/* STUDIO KUU stylesheet
	overrides the default blueprint styles
	author: hannu.oksa@gmail.com */

body {
	background: #F2F2F2;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0 18px;
}

.container {
	margin: 0;
}

a { color: #000; text-decoration: underline; }
a:focus, a:hover { color: #333;}
a.emphasize {
	font-size: 0.8333em;
	line-height: 1.8em;
	font-weight: bold;
	text-transform: uppercase;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
}

h1, h2, h3 { 
	color: #000;
}

h2.light, h3.light, h4.light { 
	color: #666;
	font-weight: normal;
}

h1.bottom-border {
	border-bottom: 0.0278em solid #000;
	padding-bottom: 0.0556em;
	margin-bottom: 0.4166em;
}

h2.bottom-border {
	border-bottom: 0.0416em solid #000;
	margin-bottom: 0.7083em;
}

h3.bottom-border {
	border-bottom: 0.0555em solid #000;
	padding-bottom: 0.1666em;
	margin-bottom: 0.7777em;
}

h4.bottom-border {
	border-bottom: 0.0694em solid #000;
	padding-bottom: 0.0694em;
	margin-bottom: 1.1112em;
}

h2.page-title { 
	font-size: 1.5em;
	line-height: 1;
	color: #FFF;
	background: #000;
	margin-bottom: 1em;
	padding: .75em 9px .25em 9px;
	font-weight: bold;
	text-align: right;
	text-transform: uppercase;
	width: 117px;
	float: right;
	display: block;
	border: none;
}

h5 {
	font-size: .8333em;
	line-height: 1.8em;
	font-weight: bold;
	text-transform: uppercase;
	background: #000;
	color: #FFF;
}
h5 a, h5 a:focus, h5 a:hover {
	padding: 0 4.5px;
	color: #FFF;
	text-decoration: none;
	display: block;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; }

img { border: 1px solid #000;}

ul { list-style-type: square;}

em { background: none; }

hr {
	color: #000;
	background: #000;
	height: 1px;
	margin-bottom: 17px;
}

hr.big {
	height: 4px;
	margin-bottom: 14px;
}

hr.space {
	color: #F2F2F2;
	background: #F2F2F2;
}

blockquote.big {
	font-family: Georgia, serif; 
	font-size: 1.667em;
	line-height: 0.9em;
	color: #111;
	margin: 0;
	padding: 0 .9em .9em;
}

blockquote.download {
	font-size: 1.5em;
	line-height: 1;
	font-style: normal;
	border: 0.0555em solid #BBB;
	padding: 0.4445em;
	margin: 0 1em 1em;
	background: #E8E8E8;
}
blockquote.download a { font-weight: bold; }

.readmore {
	font-size: 0.8333em;
	line-height: 1.8em;
	font-weight: bold;
	text-transform: uppercase;
}

/* forms */

input.text, textarea {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	padding: 3px;
	border-color: #000;
	background-color: #DDD;
}
input.text:focus, textarea:focus {
	border-color: #000;
	background-color: #FFF;
}
.errorlist {
  color: #D12F19;
  list-style: none;
  margin-left: 0;
	font-size: 0.9166em;
	line-height: 1.6363em;
}

/* basic layout */

#header h1 {
	margin: 0;
	height: 351px;
	text-indent: -1000em;
	background: #000 url(../images/title-bg.gif) bottom left no-repeat;
}

#nav {
	margin: 0 0 18px 0;
	padding: 9px 0;
	height: 45px;
	list-style-type: none;
	background: #E8E8E8;
	text-transform: uppercase;
	font-size: 0.8333em;
	line-height: 1.8em;
	font-weight: bold;
}
#nav li { 
	height: 54px;
}
#nav li.first {
	padding-left: 4px;
	width: 59px;
}
#nav li.border {
	border-color: #BBB;
}

#nav li a {
	color: #333;
	text-decoration: none;
}
#nav li a:focus, #nav li a:hover { text-decoration: underline;}

#footer {
	font-size: 0.9166em;
	line-height: 1.6363em;	
}
#footer hr {
	margin: 0.9em 0 0.5em;
}
#footer #suneffects a {
  width: 103px;
  height: 55px;
  background: url(../images/suneffects-logo.png) 0 0 no-repeat;
  display: inline-block;
  text-indent:-9999px;
}
#footer #shop a.logo {
  width: 60px;
  height: 52px;
  background: url(../images/shop-logo.png) 0 0 no-repeat;
  display: inline-block;
  text-indent:-9999px;  
}

/* blog */

p.blog-rss {
	margin: 1.5em 9px 0 0;
	font-weight: bold;
	width: 54px;
	float: right;
	display: block;
}
p.blog-rss a {
	background: url(../images/icon-feed.png) 0 2px no-repeat;
	padding-left: 18px;
}

.blogpost-list {
	border-bottom: .1em solid #BBB;
	margin-bottom: 1.4em;
}
.blogpost-list-last {
	margin-bottom: 1.5em;
}
.blogpost-list h5,
.blogpost-list-last h5 {
	margin-top: 0.75em;
}
.blogpost-list .emphasize,
.blogpost-list .emphasize:hover,
.blogpost-list .emphasize:focus,
.blogpost-list-last .emphasize,
.blogpost-list-last .emphasize:hover,
.blogpost-list-last .emphasize:focus {
	padding: 3px 4.5px;
	background: #E8E8E8;
	color: #333;
	text-decoration: none;
}
.blogpost-list .readmore,
.blogpost-list-last .readmore {
	font-size: 0.8333em;
	line-height: 1.8em;
	font-weight: bold;
	text-transform: uppercase;
}

ul.blogarchive-list { margin-bottom: 0; }

.blog-search input.text {
	width: 199px;
	margin: 0 0.5em 0 0;
}

.blog-detail { margin-bottom: 1.5em; }
.blog-detail h5 {
	width: 90px;
	padding: 0 4.5px;
}
.blog-detail .emphasize,
.blog-detail .emphasize:hover,
.blog-detail .emphasize:focus {
	padding: 3px 4.5px;
	background: #E8E8E8;
	color: #333;
	text-decoration: none;
}

#comments ol { 
	list-style-type: none;
	margin-left: 0;
}

.comment,
.comment-last {
	clear: left;
	padding-bottom: 1.5em;
}
.comment-last { padding-bottom: 0; }

.comment-details { margin-bottom: 0;}
.comment-details dt,
.comment-form dt {
	width: 99px;
	margin-right: 9px;
	float: left;
}
.comment-form dt { padding-top: 9px; }
.comment-details dd, .comment-form dd { margin-left: 108px; }
.comment-details dd input.text, .comment-form dd input { width: 307px; }
.comment-details dd textarea, .comment-form dd textarea { width: 451px; }
.comment-form ul { margin-bottom: 0; }
.comment-form dd input {
  margin:0.5em 0.5em 0.5em 0;
  border: 1px solid #000; 
  background: #DDD; 
  padding: 5px;
}
.comment-form dd input:focus {
  border: 1px solid #000; 
  background: #fff; 
}

p.comment-form-submit {
  padding-left: 108px;
}

a.count,
a.count:hover, 
a.count:focus {
	padding: 3px 4.5px;
	margin-right: 3px;
	background: #000;
	color: #FFF;
	text-decoration: none;
	font-size: 0.8333em;
	line-height: 1.8em;
	font-weight: bold;
}

.comment-details dt span { 
	margin-left: 2.1em;
	display: block;
	font-weight: normal;
	font-size: 0.8333em;
	line-height: 1.8em;
	color: #666;
}

/* blog typography */

.blog-detail-content h1, .comment-details h1,
.blog-detail-content h2, .comment-details h2,
.blog-detail-content h3, .comment-details h3,
.blog-detail-content h4, .comment-details h4,
.blog-detail-content h5, .comment-details h5,
.blog-detail-content h6, .comment-details h6 {
	font-size: 1em;
	line-height: 1.8em;
	margin-bottom: 1.5em;
} 
.blog-detail-content blockquote, .comment-details blockquote {
	margin: 0 0 1.5em 0;
	padding: 0 1.5em;
	border-left: 1px solid #666;
}

p img { float: none; margin: 0;}

/* contact */

#contact-info h6,
#contact-info p { padding-left: 25px; }

#contact-info h6.email { background: url(../images/icon-email.gif) 0 0 no-repeat; }
#contact-info h6.phone { background: url(../images/icon-device.gif) 0 0 no-repeat; }
#contact-info h6.address { background: url(../images/icon-home.gif) 0 0 no-repeat; }

.contact-form dt {
	width: 99px;
	margin-right: 9px;
	float: left;
	padding-top: 8px;
}
.contact-form dd { margin-left: 108px; }
.contact-form dd input { 
  width: 307px;
}
.contact-form dd textarea { width: 451px; }

#map {
	width: 205px;
	height: 232px;
	border: 1px solid #000;
}

#map div span,
#map div a { display: none; }

#map .gmap_button { position: absolute; }
#map .gmap_button img {
	border: 0;
	margin: 0;
}

/* people */

.people {
	list-style: none;
	margin-left: 0;
	margin-right: 0;
}
.people li {
	width: 279px;
	float: left;
	display: block;
}
.people li.left { margin: 0 9px 1.5em 0; }
.people li.right { margin: 0 0 1.5em 0; }

.person-image-outer {
	width: 277px;
	height: 196px;
	border: 1px solid #000;
	background: url(../images/people-image-bg.gif) 50% 50% no-repeat;
}
.person-image-inner {
	width: 277px;
	height: 196px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/* customers & image gallery */

.records,
.gallery {
	list-style: none;
	margin-left: 0;
	margin-right: 0;
}
.records li,
.gallery li {
	width: 135px;
	float: left;
	display: block;
	margin: 0 9px 0.75em 0;
	font-size: 0.9166em;
	line-height: 1.6363em;
	overflow: hidden;
}
.records .li1 { clear: left; }
.records .li4,
.gallery .last { margin-right: 0; }

.record-image-outer,
.gallery-image-outer {
	width: 133px;
	height: 133px;
	border: 1px solid #000;
	background: url(../images/record-image-bg.gif) 50% 50% no-repeat;	
}
.record-image-inner {
	width: 133px;
	height: 133px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.gallery-image-outer img { margin: 0; float: none; }

/* background specific color changes */

.bg-01 a:focus, .bg-01 a:hover,
.bg-01 #nav li a:focus, .bg-01 #nav li a:hover { color: #D88237;}
.bg-02 a:focus, .bg-02 a:hover,
.bg-02 #nav li a:focus, .bg-02 #nav li a:hover { color: #F43C22;}
.bg-03 a:focus, .bg-03 a:hover,
.bg-03 #nav li a:focus, .bg-03 #nav li a:hover { color: #596C6A;}
.bg-04 a:focus, .bg-04 a:hover,
.bg-04 #nav li a:focus, .bg-04 #nav li a:hover { color: #EEA04D;}
.bg-05 a:focus, .bg-05 a:hover,
.bg-05 #nav li a:focus, .bg-05 #nav li a:hover { color: #7E6346;}
.bg-06 a:focus, .bg-06 a:hover,
.bg-06 #nav li a:focus, .bg-06 #nav li a:hover { color: #B79E99;}
.bg-07 a:focus, .bg-07 a:hover,
.bg-07 #nav li a:focus, .bg-07 #nav li a:hover { color: #8B7675;}
.bg-08 a:focus, .bg-08 a:hover,
.bg-08 #nav li a:focus, .bg-08 #nav li a:hover { color: #53645E;}
.bg-09 a:focus, .bg-09 a:hover,
.bg-09 #nav li a:focus, .bg-09 #nav li a:hover { color: #DE7D08;}

body.bg-01 #header h1 { background: #000 url(../images/title-bg-01.jpg) bottom left no-repeat;}
body.bg-02 #header h1 { background: #000 url(../images/title-bg-02.jpg) bottom left no-repeat;}
body.bg-03 #header h1 { background: #000 url(../images/title-bg-03.jpg) bottom left no-repeat;}
body.bg-04 #header h1 { background: #000 url(../images/title-bg-04.jpg) bottom left no-repeat;}
body.bg-05 #header h1 { background: #000 url(../images/title-bg-05.jpg) bottom left no-repeat;}
body.bg-06 #header h1 { background: #000 url(../images/title-bg-06.jpg) bottom left no-repeat;}
body.bg-07 #header h1 { background: #000 url(../images/title-bg-07.jpg) bottom left no-repeat;}
body.bg-08 #header h1 { background: #000 url(../images/title-bg-08.jpg) bottom left no-repeat;}
body.bg-09 #header h1 { background: #000 url(../images/title-bg-09.jpg) bottom left no-repeat;}