/* Main CSS page 
The first few entries are used to set defaults text-shadow is a fix for OSx light-on-dark contrast problem
*/
* {border: 0px; margin: 0px; padding: 0px; outline: none; font-weight: normal; text-shadow: #000 0px 0px 0px; font-family: Arial; font-size: 14px; color: #000000;}
.redbox {border: solid 1px red;}
.bluebox {border: solid 1px blue;}
.greenbox {border: solid 1px green;}
.hidden {display: none;}
.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}
.blue {color: rgb(0,0,255);}
.red {color: rgb(255,0,0);}
.super { vertical-align: super; font-size: 80%;}

.floatLeft {float: left;}
.floatRight {float: right;}


li {}
img { behavior:	url(css/png_behavior.htc);} /* Allows png support in IE<7, REQUIRES EXPLICIT DIMENSIONS ON EACH IMAGE (that's why they aren't showing up!)*/
strong, strong a {font-weight: bold;}
body {background: #FFFFFF url('../sprites/bggradient.png') repeat-x scroll left 132px;}

/* Master Container fits just inside body for placement and behavior*/
#masterContainer {background:url('../sprites/water_2_levels.jpg') no-repeat scroll center 132px; min-width:925px;
width:100% !important;
width:925px; }

#header {text-align: center; height: 132px; width: 100%; background: url('../sprites/headerslice.png') repeat-x top left;}
#header a {text-decoration: none;}
#headerImg {width: 925px; height: 99px; background: url('../sprites/header.png') top left; position: relative; margin-left: auto; margin-right: auto;text-decoration: none;}
#tagline {position: relative; top: 60px; left: 260px; text-transform: uppercase; text-align: left; color: #FFFFFF; z-index: 5; width: 600px; text-decoration: none;} 
#menuBar {background: #000000; height: 32px; border-bottom: solid 1px #c3c3c3; position: absolute; top: 99px; left: 0px; 
min-width:925px;
width:100% !important;
width:925px; 
z-index: 5000;}
#menu {width: 865px; text-align: right; margin-left: auto; margin-right: auto; position: relative; z-index: 5000;}
#menu li {list-style-type: none; display: inline; margin-left: 28px;}
#menu li a {text-decoration: none; color: #cc6600; line-height: 32px;}
#menu li a:hover {text-decoration: none; color: #fd911e;}

#menu ul.popdown {display: none; height: 100px; width: 200px; background-color: #2867a6; position: absolute; top: 32px; left: 210px; text-align: left;  padding: 10px; z-index: 5000;
border-left: solid 1px #c3c3c3; border-bottom: solid 1px #c3c3c3; border-right: solid 1px #c3c3c3;
}
#menu ul.popdown li  {display: block; margin-left: 0px; }
#menu ul.popdown li a {text-decoration: none; color: #FFFFFF; line-height: 20px; }
/*Container div holds header, content and footer  */
#container {
width: 925px;
min-height:712px;
height:auto !important;
height:712px;
margin-left: auto; margin-right: auto; position: relative; z-index: 20;
position: relative;
padding-top: 1px;
}

#leftSlideout {
background:url('../sprites/leftSlideoutBG.jpg') no-repeat scroll top left;
position: absolute; 
top: 0px; 
left: 0px;
width: 0px; 
height: 323px;
display: none;
}

#rightSlideout {
background:url('../sprites/rightSlideoutBG.jpg') no-repeat scroll top left;
position: absolute; 
top: 0px; 
left: 241px;
width: 0px; 
height: 323px;
display: none;
}

.product {position: absolute; width: 159px; height: 155px;}
#product1 {top: 0px; left: 241px;}
#product2 {top: 0px;left: 411px;}
#product3 {top: 168px;left: 241px;}
#product4 {top: 168px;left: 411px;}

#product1text, #product2text, #product3text, #product4text {display: none;}
#product1text, #product3text {position: absolute; width: 220px;}
#product2text, #product4text {position: absolute; left: 325px; width: 220px;}

.producttext {width: 220px; padding: 12px;}
.producttext h2 {color: #4e98c4; font-size: 18px;}
.producttext h3 {font-weight: bold; font-size: 11px; margin-top: 8px; margin-left: 3px; line-height: 14px;}
.producttext p {font-size: 12px; margin-top:16px; margin-left: 3px; line-height: 15px;}
.producttext .detail {margin-top: 15px; margin-left: 2px;}
.producttext a {color: #cc6600; text-decoration: underline;font-size: 12px;}
.producttext a:hover {color: #fd911e;}

#homeContent {position: absolute; top: 323px; width: 925px;}

#addressBox { position: absolute; left: -50px; width: 280px; text-align: right; padding-top: 56px; line-height: 18px;}
#addressBox a {color: #cc6600; text-decoration: underline;}
#addressBox a:hover {color: #fd911e;}

#contentBox1 {
position: absolute;
top: 0px;
left: 241px;
float: left;
z-index: 50;
width: 329px;
}

#contentBox2 {width: 312px; position: absolute; top: 0px; left: 586px;}

#contentBox1 h2, #contentBox2 h2 {color: #4e98c4; font-size: 18px; padding-top: 16px; padding-bottom: 8px;}
#contentBox1 .text, #contentBox2 .text {height: 94px; padding: 12px; border: solid 1px #c3c3c3; font-size: 12px; color: #333333; }
#contentBox1 .learnmore, #contentBox2 .learnmore { position: absolute; bottom: 12px; right: 15px; text-transform: uppercase; width: 300px; text-align: right; }
#contentBox1 .learnmore a, #contentBox2 .learnmore a {color: #cc6600;}
#contentBox1 .learnmore a:hover, #contentBox2 .learnmore a:hover {color: #fd911e;}



#address {
padding-top: 56px; line-height: 18px;
text-align: right;
position: absolute;
bottom: 0px;
right: 30px;
font-size: 13px;
z-index: -1;
width: 250px;
}
#address a {color: #cc6600; text-decoration: underline;}
#address a:hover {color: #fd911e;}

#secondaryNav {
position: absolute; top: 0px; left: 0px; padding: 12px; 
width: 230px; 
background:url('../sprites/secondaryBG.jpg') no-repeat scroll top left; 
min-height:612px;
height:auto !important;
height:612px;

}

#secondaryNav h3 {color: #333333; font-size: 17px; padding-top: 18px;}
#secondaryNav ul {color: #4e98c4; list-style-type: none; margin-left: 21px; padding-top: 2px; line-height: 17px;}
#secondaryNav ul a {text-decoration: none; color: #4e98c4;}
#secondaryNav h4 a:hover,#secondaryNav ul a:hover, #secondaryNav ul a.selected {color: #333333;}
#secondaryNav h4 a, #secondaryNav h4 {color: #4e98c4; margin-top: 20px; margin-bottom: 20px; font-size: 17px; text-decoration: none; font-weight: bold;}
#secondaryNav h4.current {margin-top: 0px; margin-bottom: 0px;}
#secondaryNav h4.current a {color: #cc6600; font-size: 18px; text-decoration: none; }

#innerContent {position: absolute; top: 0px; left: 240px; padding: 25px; width: 390px; background: #FFFFFF;
min-height:570px;
height:auto !important;
height:570px;
padding-bottom: 60px;
}
#innerContent h2 {color: #4e98c4; font-size: 18px; margin-top: 9px;}
#innerContent h3 {color: #000000; font-size: 12px; margin-top: -1px; font-style: italic; margin-bottom: 10px;}
#innerContent h4 {color: #4e98c4; font-size: 17px; margin-top: 19px;}
#innerContent p {font-size: 11px;  line-height: 15px;}
#innerContent p a {font-size: 12px; color: #cc6600;}

#rhsImages {position: absolute; top: 0px; left: 680px; width: 245px; background: #FFFFFF;
min-height:520px;
height:auto !important;
height:520px;
z-index: 10;
}
#rhsImages img {margin-bottom: 23px;}
#rhsImages .imgCaption {font-size: 10px; margin-top: -22px;}

#footer {position: absolute; bottom: 178px; left: 240px; width: 650px; z-index: 1000; text-align: left; font-size: 11px;}
#footer.inner {left: 20px; bottom: 0px; padding-bottom: 20px; width: 650px; z-index: 1000; text-align: left; font-size: 11px;}
#footer ul {color: #999999;}
#footer ul li {display: inline; }
#footer ul li a {color: #999999; text-decoration: none;}
#footer ul li a:hover {color: #4e98c4;}
#footer ul li a.blue {color: #6699cc;}
#footer ul li a.blue:hover {color: #cc6600;}

#tableborder {border: 1px;}