@import url("/css/reset.css");
@import url("/css/fonts.css");

/* sustainable styles */
body { background: #fff url("/images/bg_swirly.png") 0 0 no-repeat; }
a { text-decoration: none; color: #3a6f8f; }
a:hover { text-decoration: underline; }
strong { font-weight: bold; }
em { font-style: italic; }
.sprite span { margin-left: -9999px; }
img#bigPic { position: relative; width: 645px; height: 275px; margin-left: 346px; z-index: 2; }
img#picShadow { position: absolute; top: 76px; left: 341px; z-index: 1; }
img#vidShadow { position: absolute; top: 98px; left: 350px; z-index: 1; }
img#thisYou { position: absolute; top: 118px; left: 837px; z-index: 3; }
div#flashVideoWrap { position: relative; width: 491px; height: 275px; margin: 0 0 0 355px; padding-top:2px; z-index: 2; }
video { position: relative; width: 491px; height: 275px; z-index: 2; }
#storymain article h3 { font: 24px/24px "AlternateGothicFSNo2",Arial,sans-serif; color: #3a6f8f; margin: 5px 0 10px 355px;}
p { font: 13px/18px "ArvoRegular",Arial,sans-serif; color: #688697; }

ul#socialLinks { float: right; }
	ul#socialLinks li { float: left; margin-left: 10px; }
	


/* header styles */
header#topHeader { position: relative; width: 1000px; height: 65px; margin-left: 50px; z-index: 100; }
	header#topHeader h1 { position: absolute; top: 12px; left: 9px; width: 294px; height: 54px; background: transparent url("/images/logo.png") 0 0 no-repeat; cursor: pointer; }
	header#topHeader aside { position: absolute; top: 0; right: 0; background-color: #3a6f8f; padding: 3px 0; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }
		header#topHeader aside ul {  }
			header#topHeader aside ul li { font: 12px "AlternateGothicFSNo3",Arial,sans-serif; color: #fff; float: left; margin: 0 20px; text-transform: uppercase; }
				header#topHeader aside ul li a { color: #fff; }
	header#topHeader nav { position: absolute; top: 30px; left: 435px; }
		header#topHeader nav ul {  }
			header#topHeader nav ul li { font: 12px "ArvoRegular",Arial,sans-serif; color: #80a3b7; display: block; padding: 0 20px; float: left; border-right: 1px solid #80a3b7; }
			header#topHeader nav ul li.first { padding-left: 0; }
			header#topHeader nav ul li.last { border-right: 0; }

/* main content styles */
#storymain { position: relative; width: 1000px; margin-left: 50px; }
	#storymain article, #storymain #article { margin-top: 10px;  }
	#storymain article header, #storymain #article #artheader { color: #3a6f8f; }
		#storymain article header h1, #storymain #article #artheader h1 { font: 55px "AlternateGothicFSNo3",Arial,sans-serif; margin-left: 293px; }
		#storymain article header h2, #storymain #article #artheader h2 { font: 24px/24px "AlternateGothicFSNo2",Arial,sans-serif; margin-left: 355px; }
	
	#storymain article dl, #storymain #article dl { color: #80a3b7; margin: 5px 0 10px 355px;}
		#storymain article dl dt, #storymain #article dl dt { font: 24px/24px "AlternateGothicFSNo2",Arial,sans-serif; color: #3a6f8f; margin: 35px 0 10px 0; }
		#storymain article dl dd p, #storymain #article dl dd p { color: #80a3b7; margin: 5px 0 10px 0; }
	#storymain article p, #storymain #article p { color: #80a3b7; margin: 5px 0 10px 355px; }
	#storymain article ul, #storymain #article ul { color: #80a3b7; margin: 5px 0 10px 375px; }
	#storymain article ul li, #storymain #article ul li { list-style: disc; }
	#storymain article form, #storymain #article form { margin: 25px 0 10px 355px; }
	#storymain article form input, #storymain #article form input { display: block; margin: 0 0 5px 0; font-size: 12px; }
	#storymain article form input[type="text"], #storymain #article form input[type="text"] { padding: 2px 5px; border: 1px solid #b4b4b4; width: 370px; }
	#storymain article form input[type="password"], #storymain #article form input[type="password"] { padding: 2px 5px; border: 1px solid #b4b4b4; width: 370px; }
	#storymain article form input[type="tel"], #storymain #article form input[type="tel"] { padding: 2px 5px; border: 1px solid #b4b4b4; width: 370px; }
	#storymain article form input[type="email"], #storymain #article form input[type="email"] { padding: 2px 5px; border: 1px solid #b4b4b4; width: 370px; }
	#storymain article form input[type="image"], #storymain #article form input[type="image"] { margin: 10px 0 5px 311px; }
	#storymain article form select, #storymain #article form select { display: block; padding: 2px 5px; margin: 0 0 5px 0; border: 1px solid #b4b4b4; width: 370px; font-size: 12px; }
	#storymain article form label, #storymain #article form label { display: block; margin: 0 0 5px 0; font: 12px "ArvoRegular",Arial,sans-serif; color: #80a3b7; }
	#storymain article form textarea, #storymain #article form textarea { display: block; width: 370px; height: 116px; padding: 5px; margin: 0 0 5px 0; font-size: 12px; resize: none; }
	
#storymain article aside, #storymain #article #aside { width: 314px; }
#storymain article ul#homeInfoBox, #storymain #article ul#homeInfoBox { margin: 0; }
	#storymain article ul#homeInfoBox li, #storymain #article ul#homeInfoBox li { list-style: none; margin: 0; }
	aside ul#homeInfoBox li, #aside ul#homeInfoBox li { margin: 0 5px 50px 5px; }
	#storymain article ul#homeInfoBox li ul, #storymain #article ul#homeInfoBox li ul { margin: 0 25px 50px 40px; font: 12px "ArvoRegular",Arial,sans-serif; color: #93b5c8; padding: 0; }
		#storymain article ul#homeInfoBox li ul li, #storymain #article ul#homeInfoBox li ul li { margin: 0; list-style: disc; min-height: 0; background: none; float: none; padding: 0; width: auto; }
	ul#homeInfoBox li { position: relative; width: 314px; min-height: 170px; background: #fff url("/images/bg_infobox.png") 0 0 repeat-y; float: left; margin: 20px 5px 50px 5px; }
	ul#homeInfoBox li h3 { position: relative; font: 24px/20px "AlternateGothicFSNo2",Arial,sans-serif; text-shadow: #000 1px 1px 1px; color: #fff; margin: 0; padding: 10px 25px; background: transparent url("/images/bg_infoboxtop.png") 0 0 no-repeat; z-index: 2; }
	#storymain article ul#homeInfoBox li p, #storymain #article ul#homeInfoBox li p { position: relative; font: 13px/15px "ArvoRegular",Arial,sans-serif; color: #93b5c8; margin: 0; padding: 0 25px 5px; z-index: 2; }
	ul#homeInfoBox li h3 a, ul#homeInfoBox li p a { color: #fff; }
	ul#homeInfoBox li img.botRound { position: absolute; bottom: 0; left: 0; }
	
#storymain article ul#supplierNetworkList, #storymain #article ul#supplierNetworkList { margin: 5px 0 10px 0px;  }
	#storymain article ul#supplierNetworkList li, #storymain #article ul#supplierNetworkList li { display: block; list-style: none; clear: left; padding: 10px 0; border-top: 1px dotted #688697; }
	#storymain article ul#supplierNetworkList li.first, #storymain #article ul#supplierNetworkList li.first { border-top: 0; }
	#storymain article ul#supplierNetworkList li p, #storymain #article ul#supplierNetworkList li p { margin: 0 0 0 129px; vertical-align: middle; }
	#storymain article ul#supplierNetworkList li img, #storymain #article ul#supplierNetworkList li img { float: left; }

#storymain article#supplierNetworkWrap aside { float: left; }
#storymain article#supplierNetworkWrap div#supplierMain { float: right; width: 625px;  }

/*
	/ ******************************************* \
   |  *********** TESTTIMONIAL STYLES ***********  |
	\ ******************************************* /
*/

div.testimonialCTA { margin: 0 0 50px; }
#storymain article ul#homeInfoBox li p.testCreditLine { font-size: 11px; font-style: italic; margin: 10px 0 0 0; }

/* footer styles */
footer { position: relative; margin: 50px 0 10px 50px; border-top: 1px solid #646464; width: 1000px;  padding: 5px 0 0 0; clear: both;}
footer p { font: 10px Arial,Helvetica,sans-serif; color: #646464; }


/*** ESSENTIAL STYLES ***/
nav ul#navigation, nav ul#navigation * {

}
nav ul#navigation {

}
nav ul#navigation ul {
	position:		absolute;
	top:			-999em;
	width:			220px; /* left offset of submenus need to match (see below) */
	padding: 5px 0;
	background-color: rgba(58,111,143,0.9);
	background-color: rgb(58,111,143);
	-moz-border-radius: 0 5px 5px 5px; -webkit-border-radius: 0 5px 5px 5px; border-radius: 0 5px 5px 5px; 
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
	
}
nav ul#navigation li ul li {
	width: 210px;
	border: 0;
	padding: 0;
	font-size: 10px;
	margin: 0 5px;
}
nav ul#navigation ul li.firstFish {
	border-top: 0;
}
nav ul#navigation ul li.lastFish {
	border-bottom: 0;
	margin-bottom: 0;
}

nav ul#navigation li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
nav ul#navigation li {
	float:			left;
	position:		relative;
}
nav ul#navigation a {
	display:		block;
	position:		relative;
}

nav ul#navigation li ul li a {
    margin: 0 0;
    padding: 0 3px;
}
nav ul#navigation li:hover,
nav ul#navigation li.sfHover  {
	background-color: rgba(58,111,143,0.9);
	background-color: rgb(58,111,143);
        height: 25px;
        top: -5px;
	-moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; 
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
}
nav ul#navigation li:hover a,
nav ul#navigation li.sfHover a {
	color: #fff;
        line-height: 25px;
}
nav ul#navigation li:hover ul,
nav ul#navigation li.sfHover ul {
	left:			0;
	top:			25px; /* match top ul list item height */
	z-index:		99;
	

}
nav ul#navigation li:hover li ul,
nav ul#navigation li.sfHover li ul {
	top:			-999em;
	background-image: none;
	-moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; 
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
	
}
nav ul#navigation li li:hover,
nav ul#navigation li li.sfHover  {
	background:  #80a3b7 url(/images/bg_dropdown.png) 0 0 repeat-y;
        height: auto;
        top: 0;
	-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; 
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
}
nav ul#navigation li li:hover ul,
nav ul#navigation li li.sfHover ul {
	left:			205px; /* match ul width */
	top:			-5px;
}
nav ul#navigation li li:hover a,
nav ul#navigation li li.sfHover a {
	background-color: transparent;
}
nav ul#navigation li:hover li a,
nav ul#navigation li.sfHover li a {
        color: #fff;
}
nav ul#navigation li li li:hover a,
nav ul#navigation li li li.sfHover a {

	color: #fff;
}
nav ul#navigation li li li li:hover a,
nav ul#navigation li li li li.sfHover a {
	color: #fff;
}
nav ul#navigation li li:hover li ul,
nav ul#navigation li li.sfHover li ul {
	top:			-999em;
}
nav ul#navigation li li li:hover ul,
nav ul#navigation li li li.sfHover ul {
	left:			200px; /* match ul width */
	top:			0;
}

nav ul#navigation li ul li ul li {
	border: 0;
}
nav ul#navigation li ul li ul li.firstFish {
	border-top: 0;
}
nav ul#navigation li ul li ul li.lastFish {
	border-bottom: 0;
	margin-bottom: 0;
}

nav ul#navigation li ul li ul li ul li {
	border: 0;

}
nav ul#navigation li ul li ul li ul li.firstFish {
	border-top: 0;
}
nav ul#navigation li ul li ul li ul li.lastFish {
	border-bottom: 0;
	margin-bottom: 0;
}

nav ul#navigation .sf-sub-indicator {
	display: none;
}

/* ================ */
/* = video player = */
/* ================ */
a.btn { cursor:pointer; position:absolute;}
#controls { position:absolute; right:170px; top:118px; z-index:10;}
#pause, #mute, #unmute, #rewind { display:none; }


/* BLOG */
#primary { float: left; margin: 20px 0; font: 12px "ArvoRegular",Arial,sans-serif; }
.widget-title { color: #3a6f8f; font: 20px/20px "AlternateGothicFSNo2",Arial,sans-serif; margin: 10px 0; }
#wpadminbar { display: none; }
.entry-title { font: 55px "AlternateGothicFSNo3",Arial,sans-serif; margin-left: 293px; color: #3a6f8f; }
.entry-meta { color: #80a3b7; margin: 5px 0 10px 355px; font: 10px "ArvoRegular",Arial,sans-serif; text-align: right; }
.entry-content { color: #80a3b7; margin: 5px 0 10px 355px; font: 12px "ArvoRegular",Arial,sans-serif;  }
.entry-utility { color: #80a3b7; margin: 5px 0 10px 355px; font: 10px "ArvoRegular",Arial,sans-serif; text-align: right; }
#comments { color: #80a3b7; margin: 25px 0 10px 355px; font: 12px "ArvoRegular",Arial,sans-serif; }
#comments-title { color: #3a6f8f; font: 24px/24px "AlternateGothicFSNo2",Arial,sans-serif; margin-bottom: 15px; }
.comment-author img { float: left; margin: 0 20px 10px 0; }
.comment-meta { margin: 5px 0 10px 0; }
.comment-body { margin: 0 0 20px 60px; }
.comment-body p { margin: 0 0 15px 0; }
.reply { margin: 0 0 0 60px; }
#respond { margin: 20px 0 0 0; }
#reply-title { color: #3a6f8f; font: 24px/24px "AlternateGothicFSNo2",Arial,sans-serif; margin-bottom: 15px; }
.logged-in-as { margin: 0 0 10px 0; }
.comment-form-comment label { display: block; margin: 0 0 5px 0; }
.comment-form-comment textarea { display: block; width: 370px; height: 116px; padding: 5px; margin: 0 0 10px 0; font-size: 12px; resize: none; }
.form-allowed-tags { color: #80a3b7; margin: 5px 0 10px 0; font: 10px "ArvoRegular",Arial,sans-serif;  }
div.entry-content ul { color: #80a3b7; margin: 5px 0 10px 20px; }
div.entry-content ul li { list-style: disc; font: 13px/18px "ArvoRegular",Arial,sans-serif; }