/* ---------- GENERAL LAYOUT ---------- */
body {
	background: #D9CDA5 url(../images/bg.jpg) no-repeat center top;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#header {background-color: #333; height: 140px;}
#header .wrapper {
	width: 960px;
	margin: 0px auto;
	background: url(../images/header-bg-tile-y.png) repeat-y center top;
}
#wrapper {width: 920px; margin: 0px auto;}
/* ---------- HEADER ---------- */
#header #logo {
	background: url(../images/solardark-logo.png) no-repeat 0px 0px;
	text-indent: -9999em;
	display: block;
	height: 138px;
	width: 236px;
	float: left;
}
#header .callout .buynow {
	float: right;
	display: block;
	text-indent: -9999em;
	height: 140px;
	width: 313px;
	background: url(../images/header-callout.png) no-repeat 0px 0px;
	border: none;
	cursor: pointer;
}
#header .callout .buynow:hover {background-position: 0px -140px;}

#topnav {font-size: 16px; line-height: 23px; text-transform: uppercase; text-align: center; padding: 10px;}
#topnav a {margin: 0px 30px; text-decoration: none; color: #000;}
#topnav a:hover {color: #648A9B;}
/* ---------- HOME PHOTOBAR ---------- */
#photobar {
	background: url(../images/photobar-shadow.png) center bottom;
}
#photobar .frame {
	width: 900px;
	height: 290px;
	padding: 10px;
	background-color: #FFF;
}
	/*
		root element for the scrollable.
		when scrolling occurs this element stays still.
	*/
	.scrollable {
	
		/* required settings */
		position:relative;
		overflow:hidden;
		width: 900px;
		height: 290px;
	}
	
	/*
		root element for scrollable items. Must be absolutely positioned
		and it should have a extremely large width to accomodate scrollable items.
		it's enough that you set the width and height for the root element and
		not for this element.
	*/
	.scrollable .items {
		/* this cannot be too large */
		width:20000em;
		position:absolute;
		clear:both;
	}
	
	.items .slide {
		float:left;
		width: 900px;
		height: 290px;
	}
	.items .slide .screen {background: url(../images/screen-black-60per.png) repeat; margin-top: 215px; height: 75px;}
	.items .slide .screen p {float: left; color: #FFF; width: 680px; margin: 10px;}
	
	.items .slide .button {
		display: block;
		width: 175px;
		height: 68px;
		background: url(../images/button-learnmore.png) no-repeat 0px 0px;
		float: right;
		text-indent: -9999em;
		margin-top: 3px;
	}
	.items .slide .button:hover {background-position: 0px -68px;}
	.items #slide1 {background: url(../images/trouble-sleeping.jpg) no-repeat 0px 0px;}
	.items #slide2 {background: url(../images/too-bright.jpg) no-repeat 0px 0px;}
	.items #slide3 {background: url(../images/losing-sleep.jpg) no-repeat 0px 0px;}
	
	/* single scrollable item */
	.scrollable img {
		float:left;
		margin:20px 5px 20px 21px;
		background-color:#fff;
		padding:2px;
		border:1px solid #ccc;
		width:100px;
		height:75px;
	}
	
	/* active item */
	.scrollable .active {
		border:2px solid #000;
		position:relative;
		cursor:default;
	}
	
	/* this makes it possible to add next button beside scrollable */
	.scrollable {
		float:left;	
	}
	
	/* prev, next, prevPage and nextPage buttons */
	a.browse {
		background: #C00;
		display:block;
		width:30px;
		height:30px;
		float:left;
		margin:40px 10px;
		cursor:pointer;
		font-size:1px;
	}
	
	/* right */
	a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
	a.right:hover 		{ background-position:-30px -30px; }
	a.right:active 	{ background-position:-60px -30px; } 
	
	
	/* left */
	a.left				{ margin-left: 0px; } 
	a.left:hover  		{ background-position:-30px 0; }
	a.left:active  	{ background-position:-60px 0; }
	
	
	/* disabled navigational button */
	a.disabled {
		visibility:hidden !important;		
	} 	
	
	/* position and dimensions of the navigator */
	.navi {
		width: 920px;
		height: 38px;
	}
	
	
	/* items inside navigator */
	.navi a {
		width:8px;
		height:8px;
		float:left;
		margin:3px;
		background:url(../images/navigator.png) 0 0 no-repeat;
		display:block;
		font-size:1px;
	}
	
	/* mouseover state */
	.navi a:hover {
		background-position:0 -8px;      
	}
	
	/* active state (current page state) */
	.navi a.active {
		background-position:0 -16px;     
	}




/* ---------- LEFT COLUMN ---------- */
#leftcol {
	width: 606px;
	float: left;
	background: url(../images/shadow-leftcol.png) no-repeat center bottom;
	padding-bottom: 20px;
}
#content {background-color: #FFF; padding: 20px; min-height: 460px;}
#content strong {font-weight: bold;}
#content em {font-style: italic;}
#content p {font-size: 14px; line-height: 20px; margin-bottom: 10px;}
#content h1 {font-size: 28px; line-height: 33px; font-weight: normal; margin-bottom: 10px;}
#content h2 {font-size: 24px; line-height: 29px; font-weight: normal; margin: 25px 0px 10px; color: #648A9B;}
#content h3 {font-size: 20px; line-height: 25px; font-weight: normal; margin-bottom: 10px;}

#content ol {list-style-type: decimal; margin-left: 20px; padding-left: 20px;}
#content ol li {font-size: 14px; line-height: 20px; margin-bottom: 7px;}

#content ul li {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 7px;
	padding-left: 30px;
	background: url(../images/bullet-circle-maroon.png) no-repeat 10px 7px;
}
#content h4 a {color: #648A9B; text-align: center; display:block; font-weight: bold; text-decoration: none;}
#content h4 a:hover {text-decoration: underline;}

#content .quote {
		background: url(../images/quote-left.png) no-repeat 0px 0px;
		padding-left: 40px;
		clear: both;
		border-bottom: 1px solid #DAD1B0;
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
	#content .quote p {
		background: url(../images/quote-right.png) no-repeat right bottom;
		padding-right: 40px;
	}
	#content .quote em {font-size: 14px; line-height: 20px; font-style: italic; margin-right: 40px;}
	/* ---------- TESTIMONIALS ---------- */
	#testimonial-holder {width: 566px; height: 150px; margin-top: 20px;}
	#testimonials .quote {
		background: url(../images/quote-left.png) no-repeat 0px 0px;
		padding-left: 40px;
		border-bottom: none;
		padding-bottom: 0px;
		margin-bottom: 0px;
	}
	#testimonials .quote p {
		background: url(../images/quote-right.png) no-repeat right bottom;
		padding-right: 40px;
	}
	#testimonials .quote em {font-size: 14px; line-height: 20px; float: right; font-style: italic; margin-right: 40px;}

/* ---------- RIGHT COLUMN ---------- */
#rightcol {float: right; width: 291px;}
#rightcol h2 {font-size: 24px; line-height: 29px; font-weight: normal; margin: 0px 10px 10px; color: #648A9B; text-align: center;}
#rightcol h3 {font-size: 18px; font-weight: bold; text-align: center; margin: 0px 10px 10px;}

.addthis_toolbox {padding: 10px 0 20px;}
#video {
	background: url(../images/temp-video-placeholder.png) no-repeat 0px 0px;
	height: 302px;
	width: 291px;
	display: block;
}
#rightcol .buynow {
	background: url(../images/buynow.png) no-repeat 0px 0px;
	text-indent: -9999em;
	display: block;
	height: 99px;
	width: 271px;
	margin-top: 15px;
	border: none;
	cursor: pointer;
}
#rightcol .buynow:hover {background-position: 0px -100px;}
/* ---------- VIDEO OVERLAY ---------- */
/* the overlayed element */
.simple_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color: #FFF;
	
	width: 560px;	
	padding: 20px;
	border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radious: 16px;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(../images/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}

/* ---------- FOOTER ----------- */
#footer {padding: 10px 0px 30px;}
#footer p {font-size: 12px;}
#footnav {float: left; color: #663333;}
#footnav a {margin: 0px 5px; color: #663333; text-decoration: none;}
#footnav a:hover {text-decoration: underline;}
#credit {float: right; color: #A5887B;}

/* ---------- CONTACT FORM ---------- */
#content #contactform ul {list-style-type: none; margin: 0px; padding: 0px;}
#content #contactform label {float: left;}
#content #contactform input, #content #contactform textarea {float: left; clear: left; width: 300px; background-color: #EFEFEF; border: 1px solid #CCC; padding: 5px 7px;}
#content #contactform p.inst {clear: both; font-style: italic;}

#contactform .mc-field-group, .mc-address-group li {margin-bottom: 10px;}
#contactform div.mce_inline_error {clear: both; color: #F00; font-weight: bold;}
#contactform #mce-success-response {clear: both; color: #FACD39; font-weight: bold; width: 400px; margin-bottom: 10px;}
#contactform .mc-address-group h3, #contactform .indicate-required {}
#content #contactform input.btn {margin: 10px 0px; width: auto; border: 1px solid #FFF; background-color: #000; color: #FFF; cursor: pointer;}
#content #contactform input.btn:hover {border: 1px solid #000; color: #000; background-color:#FACD39;}

img.right {float: right; margin: 0px 0px 15px 20px;}
/* ---------- MISC ---------- */
.clear {clear: both;}