/* CSS Document */

html, body {
	height: 100%;         /* required */
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	background: #f6f8f8;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	background-image: url(images/bg.gif);
	background-repeat: repeat-y;
	background-position: top center;
}

a:link { color: #1ab7ea; text-decoration: underline; }
a:visited { color: #1ab7ea; text-decoration: underline; }
a:hover { color: #000; text-decoration: underline; }
a:active { color: #000; text-decoration: underline; }

#wrap { margin: 0 auto; width: 820px; height:100%; background: #fff; }


/*-------------------------------------------
	header
-------------------------------------------*/


#header {
	width: 820px; 
	height: 180px; 
	margin: 0 auto; 
	position: relative; 
	text-align: center;
}

#header-markets {
	width: 820px; 
	height: 230px; 
	margin: 0 auto; 
	position: relative; 
	text-align: center;
}

#allnav {
	width: 820px;
	margin: 0 auto;
	padding: 0;
}

#nav {
    width: 820px; height: 30px;
    background: url(images/nav.gif);
    margin: 0; padding: 0;
    position: relative;
}

#nav li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
#nav li a { height: 0px; display: block; padding-top: 30px; overflow: hidden; }


#nav1 { left: 90px; width: 80px; }
#nav2 { left: 170px; width: 105px; }
#nav3 { left: 275px; width: 110px; }
#nav4 { left: 385px; width: 115px; }
#nav5 { left: 500px; width: 60px; }
#nav6 { left: 560px; width: 75px; }
#nav7 { left: 635px; width: 95px; }

#nav1 a:hover { background: transparent url(images/nav.gif) -90px -30px no-repeat; }
#nav2 a:hover { background: transparent url(images/nav.gif) -170px -30px no-repeat; }
#nav3 a:hover { background: transparent url(images/nav.gif) -275px -30px no-repeat; }
#nav4 a:hover { background: transparent url(images/nav.gif) -385px -30px no-repeat; }
#nav5 a:hover { background: transparent url(images/nav.gif) -500px -30px no-repeat; }
#nav6 a:hover { background: transparent url(images/nav.gif) -560px -30px no-repeat; }
#nav7 a:hover { background: transparent url(images/nav.gif) -635px -30px no-repeat; }

#nav1 a.selected { background: transparent url(images/nav.gif) -90px -30px no-repeat; }
#nav2 a.selected { background: transparent url(images/nav.gif) -170px -30px no-repeat; }
#nav3 a.selected { background: transparent url(images/nav.gif) -275px -30px no-repeat; }
#nav4 a.selected { background: transparent url(images/nav.gif) -385px -30px no-repeat; }
#nav5 a.selected { background: transparent url(images/nav.gif) -500px -30px no-repeat; }
#nav6 a.selected { background: transparent url(images/nav.gif) -560px -30px no-repeat; }
#nav7 a.selected { background: transparent url(images/nav.gif) -635px -30px no-repeat; }


#ConnectNav {
    width: 220px; height: 24px;
    background: url(images/connectwithus.gif);
    margin: 0; padding: 0;
    position: relative;
}

#ConnectNav li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
#ConnectNav li a { height: 0px; display: block; padding-top: 24px; overflow: hidden; }


#ConnectNav1 { left: 0; width: 84px; }
#ConnectNav2 { left: 84px; width: 58px; }
#ConnectNav3 { left: 142px; width: 68px; }

#ConnectNav1 a:hover { background: transparent url(images/connectwithus.gif) 0 -24px no-repeat; }
#ConnectNav2 a:hover { background: transparent url(images/connectwithus.gif) -84px -24px no-repeat; }
#ConnectNav3 a:hover { background: transparent url(images/connectwithus.gif) -142px -24px no-repeat; }


#snav_top {
    width: 820px; height: 26px;
    background: url(images/snav_top.gif);
    margin: 0; padding: 0;
    position: relative;
}

#snav_top li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
#snav_top li a { height: 0px; display: block; padding-top: 26px; overflow: hidden; }

#snav_bot {
    width: 820px; height: 36px;
    background: url(images/snav_bot.gif);
    margin: 0; padding: 0;
    position: relative;
}

#snav_bot li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
#snav_bot li a { height: 0px; display: block; padding-top: 36px; overflow: hidden; }


#snav1 { left: 20px; width: 260px; }
#snav2 { left: 280px; width: 200px; }
#snav3 { left: 480px; width: 80px; }
#snav4 { left: 560px; width: 240px; }
#snav5 { left: 90px; width: 120px; }
#snav6 { left: 210px; width: 90px; }
#snav7 { left: 300px; width: 250px; }
#snav8 { left: 550px; width: 170px; }

#snav1 a:hover { background: transparent url(images/snav_top.gif) -20px -26px no-repeat; }
#snav2 a:hover { background: transparent url(images/snav_top.gif) -280px -26px no-repeat; }
#snav3 a:hover { background: transparent url(images/snav_top.gif) -480px -26px no-repeat; }
#snav4 a:hover { background: transparent url(images/snav_top.gif) -560px -26px no-repeat; }
#snav5 a:hover { background: transparent url(images/snav_bot.gif) -90px -36px no-repeat; }
#snav6 a:hover { background: transparent url(images/snav_bot.gif) -210px -36px no-repeat; }
#snav7 a:hover { background: transparent url(images/snav_bot.gif) -300px -36px no-repeat; }
#snav8 a:hover { background: transparent url(images/snav_bot.gif) -550px -36px no-repeat; }

#snav1 a.selected { background: transparent url(images/snav_top.gif) -20px -26px no-repeat; }
#snav2 a.selected { background: transparent url(images/snav_top.gif) -280px -26px no-repeat; }
#snav3 a.selected { background: transparent url(images/snav_top.gif) -480px -26px no-repeat; }
#snav4 a.selected { background: transparent url(images/snav_top.gif) -560px -26px no-repeat; }
#snav5 a.selected { background: transparent url(images/snav_bot.gif) -90px -36px no-repeat; }
#snav6 a.selected { background: transparent url(images/snav_bot.gif) -210px -36px no-repeat; }
#snav7 a.selected { background: transparent url(images/snav_bot.gif) -300px -36px no-repeat; }
#snav8 a.selected { background: transparent url(images/snav_bot.gif) -550px -36px no-repeat; }


#snav-pro_top {
    width: 820px; height: 26px;
    background: url(images/snav-products_top.gif);
    margin: 0; padding: 0;
    position: relative;
}

#snav-pro_top li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
#snav-pro_top li a { height: 0px; display: block; padding-top: 26px; overflow: hidden; }

#snav-pro_bot {
    width: 820px; height: 36px;
    background: url(images/snav-products_bot.gif);
    margin: 0; padding: 0;
    position: relative;
}

#snav-pro_bot li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
#snav-pro_bot li a { height: 0px; display: block; padding-top: 36px; overflow: hidden; }


#snav-pro1 { left: 60px; width: 260px; }
#snav-pro2 { left: 320px; width: 210px; }
#snav-pro3 { left: 530px; width: 230px; }

#snav-pro4 { left: 255px; width: 90px; }
#snav-pro5 { left: 345px; width: 90px; }
#snav-pro6 { left: 435px; width: 130px; }

#snav-pro1 a:hover { background: transparent url(images/snav-products_top.gif) -60px -26px no-repeat; }
#snav-pro2 a:hover { background: transparent url(images/snav-products_top.gif) -320px -26px no-repeat; }
#snav-pro3 a:hover { background: transparent url(images/snav-products_top.gif) -530px -26px no-repeat; }

#snav-pro4 a:hover { background: transparent url(images/snav-products_bot.gif) -255px -36px no-repeat; }
#snav-pro5 a:hover { background: transparent url(images/snav-products_bot.gif) -345px -36px no-repeat; }
#snav-pro6 a:hover { background: transparent url(images/snav-products_bot.gif) -435px -36px no-repeat; }

#snav-pro1 a.selected { background: transparent url(images/snav-products_top.gif) -60px -26px no-repeat; }
#snav-pro2 a.selected { background: transparent url(images/snav-products_top.gif) -320px -26px no-repeat; }
#snav-pro3 a.selected { background: transparent url(images/snav-products_top.gif) -530px -26px no-repeat; }

#snav-pro4 a.selected { background: transparent url(images/snav-products_bot.gif) -255px -36px no-repeat; }
#snav-pro5 a.selected { background: transparent url(images/snav-products_bot.gif) -345px -36px no-repeat; }
#snav-pro6 a.selected { background: transparent url(images/snav-products_bot.gif) -435px -36px no-repeat; }



/*-------------------------------------------
	page structure
-------------------------------------------*/

#mainContent {
	width: 820px;
	padding: 0px;
	margin-top: 50px;
	text-align: center;
	background-image: url(images/main_bg-mid.gif);
}

#marketsContent {
	width: 820px;
	padding: 0px;
	margin-top: 50px;
	text-align: center;
	background-image: url(images/markets_bg-mid.gif);
}

#Content {
	width: 780px;
	padding: 0px;
	margin: 0 0 0 20px;
	line-height: 1.7em;
	text-align: left;
}

#orcaContent {
	width: 780px;
	padding: 0px;
	margin: 0 0 0 20px;
	text-align: left;
	background-image: url(images/product-orca.jpg);
	background-repeat: no-repeat;
}

#orca {
	width: 400px;
	height: 350px;
	padding: 0px;
	line-height: 1.7em;
	text-align: left;
}

#quote {
	width: 700px;
	padding: 0;
	margin-left: 40px;
}

#mainDivider .column {
	position: relative;
	float: left;
}

#m_left {
	width: 520px;
	padding: 0px;
	margin: 0 0 0 20px;
	line-height: 1.7em;
	text-align: left;
}

#m_right {
	width: 220px;
	padding: 0;
	margin: 0 0 0 30px;
	line-height: 1.7em;
	text-align: left;
}

#m_right p {
	font-size: 11px;
	color: #333;
}

#h_left {
	width: 520px;
	padding: 0px;
	margin: 0 0 0 20px;
	line-height: 1.7em;
	text-align: left;
}

#h_right {
	width: 220px;
	padding: 0;
	margin: 0 0 0 30px;
	text-align: left;
}

#h_left p {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 1px;
}

#h_right p {
	font-size: 11px;
	color: #333;
	line-height: 13px;
}

#prod_left {
	width: 220px;
	float: left;
}

#prod_right {
	width: 520px;
	float: right;
}

#prod_left {
	width: 220px;
	float: left;
}

#prod_right {
	width: 520px;
	float: right;
}

#con_left {
	width: 250px;
	float: left;
	line-height: 13px;
}

#con_mid {
	width: 250px;
	float: left;
	line-height: 13px;
}

#con_right {
	width: 250px;
	float: right;
	line-height: 13px;
}

#s_left {
	width: 280px;
	float: left;
}

.contactspacing { line-height: 14px }

#s_right {
	width: 480px;
	float: right;
}

.newslink:link { color: #333; text-decoration: underline; }
.newslink:visited { color: #333; text-decoration: underline; }
.newslink:hover { color: #000; text-decoration: underline; }
.newslink:active { color: #000; text-decoration: underline; }

.bluetext { color: #1498c4; }

.blueheadline { color: #1ab7ea; }

.title {
	letter-spacing: 1px;
}

.blueQ { 
	color: #1498c4;
	font-weight: bold;
	letter-spacing: .1em;
}

.homecopy {
	line-height: 20px;
	text-align: center;
}

.red { 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #b32017;
}

.right { float: right; }

.black:link { color: #333; text-decoration: underline; }
.black:visited { color: #333; text-decoration: underline; }
.black:hover { color: #1ab7ea; text-decoration: underline; }
.black:active { color: #1ab7ea; text-decoration: underline; }


/*-------------------------------------------	
	Clear
-------------------------------------------*/

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/*-------------------------------------------	
	Footer
-------------------------------------------*/

#footer {
	width: 820px;
	height: 100px;
	padding: 0px;
	margin: 20px 0 0 0;
	text-align: center;
	font-size:9px; font-weight:normal; color:#666;
}