@import url("reset.css");

/* ---------- General styles ---------- */
body { font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000; background:#282828 url(../images/body-bg.png) repeat-x;}
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear floated columns */
/* div, ul, li { position:relative } */
a {text-decoration:none; color:#006699;}
a:hover {text-decoration:underline; color:#0099cc;}
p { line-height:1.4em; padding:8px 0;}
h1 { font-size:54px; font-family:Calibri,Tahoma,sans-serif; color:#b0ecff}
h2 { font-size:32px; font-family:Calibri,Tahoma,sans-serif; color:#b0ecff}
h3 { font-size:25px; font-family:Tahoma,Geneva,sans-serif; color:#357f94}
h4 { font-size:20px; font-family:Tahoma,Geneva,sans-serif; color:#000}

ul, li { list-style:none;}


.sprite { background:url(../images/sprite-4.png) no-repeat;}
.wrapper { width:1044px; height:auto; overflow:visible; background:url(../images/wrapper_bg.png) repeat-y; margin:auto; padding-bottom: 0px;}
#center { width:1000px; margin:auto; height:auto; overflow:hidden; background:#fff; clear:both; padding:30px 0 80px 0;}


/* ----------Header styles ---------- */
#header { width:1000px; height:74px; margin:auto; background:#fff;}
.logo { float:left; padding:14px 0 0 17px; width:264px; height:58px;}
.logo a { display:block; width:285px; height:58px; background-position:0 -246px;}
.tagline { width:100%; min-width: 1045px; height:40px; background:url(../images/tagline_bg.jpg) repeat-x;}
.tagline .wrapper { height:40px;}
.tagline p {clear:both; font-family:Calibri,Tahoma,Helvetica,'Helvetica Neue',Arial,Sans-serif; font-size:27px; color:#b0ecff; font-weight:bold; display:block; padding:0px 0 0 50px; }
.home_tagline { background:none; height:35px;}
.home_tagline .wrapper div {background:#fff; width:1000px; margin:auto; height:40px; }
.home_tagline .wrapper div p {color:#47BCDF; padding: 0 0 0 28px; display: block; margin-top: -4px; position: absolute;}


/* ---------- Top Navigation styles ---------- */
.topnav { float:left; padding:27px 0 0 92px}
.topnav ul li { float:left; font-family:"Century Gothic",Helvetica,Tahoma,sans-serif; font-size:23px; font-weight:bold; position:relative; z-index:1}
.topnav ul li a { background-position:0 -500px;  display:block; padding:8px 36px 5px 17px;color:#0099cc;text-decoration:none;}
.topnav ul li a:hover {color:#5cb6df;text-decoration:none;}
.topnav ul li.products a:hover { background-position: 0 -350px; color:#5CB6DF;text-decoration:none;}
.topnav ul li.products a.active { background-position: 0 -350px;color:#5CB6DF;text-decoration:none;}
.topnav ul li.support a:hover { background-position: 0 -396px; color:#5CB6DF;text-decoration:none;}
.topnav ul li.support a.active { background-position: 0 -396px;color:#5CB6DF;text-decoration:none;}

.topnav .dd { width:249px; height:auto; overflow:hidden; font-family:Helvetica,Arial,sans-serif; display:none; position:absolute; z-index:2 }
.topnav .dd .dd_hd { background-position:-686px -240px; width:249px; height:14px; overflow:hidden}
.topnav .dd .dd_ct { background-position:-686px -254px; width:249px; height:auto; padding:0 0 10px 0; overflow:hidden}
.topnav .dd .dd_ft { background-position:-686px -954px;  width:249px; height:10px;}
.topnav .dd h4 { font:bold 16px Helvetica,Arial,sans-serif; color:#fff; padding:0px 0 3px 21px;}
.topnav .dd ul { overflow:hidden; }
.topnav .dd li { font:normal 13px Helvetica,Arial,sans-serif; color:#d2e8ee; clear:both; background:url(../images/bullet.png) left no-repeat; background-position:25px 0px; }
.topnav .dd li a { padding:3px 0 0 38px; width:216px; height:17px; display:block; overflow:hidden; color:#d2e8ee;text-decoration:none;}
.topnav .dd li a img { vertical-align:top}
.topnav ul li .dd li a:hover { background:url(../images/sprite-4.png) no-repeat; background-position: -433px -328px;color:#d2e8ee;text-decoration:none;}
.topnav .dd .dd_sep { background-position:-377px -354px; width:247px; height:2px; clear:both; margin:5px 0;overflow:hidden}

.topnav .dd-products { width:479px;}
.topnav .dd-products .dd_hd { background:url(../images/dd_hd.png) no-repeat; width:479px; height:10px; overflow:hidden}
.topnav .dd-products .dd_ct { background:url(../images/dd_ct.png) repeat-y;  width:479px; height:auto; padding:0 0 10px 0; overflow:hidden}
.topnav .dd-products .dd_ft { background:url(../images/dd_ft.png) no-repeat;   width:479px; height:10px;}
.topnav .dd-products .left { width:225px; float:left}
.topnav .dd-products .right { width:249px; float:left; margin:0 0 0 2px}
.topnav .dd-products .right .dd_sep {width:249px; background:none; margin:5px 0 10px 0;}
.topnav .dd-products .right h4 {padding:0px 0 3px 10px;}
.topnav .dd-products .right li {background-position:13px 0px;}
.topnav .dd-products .right li a {padding:3px 0 0 27px; width:222px;}
.topnav .dd-products .right li a:hover {background:url(../images/hover-li.png) repeat;}

/* ---------- News Block styles ---------- */
.featured { background:url(../images/featured_bg.jpg) repeat-x; min-width: 1045px;}
#news { width:1000px; height:240px; margin:auto; position: relative; clear:both; font-family:Tahoma,Geneva,sans-serif; background-position:0 0; }
#news .news_item { float:left; width:504px; height:222px; padding: 0 0 0 470px; background:url(../images/disk.png) right no-repeat; margin:-7px 0 0 0;}
#news .news_item p { color:#fff; font-size:18px; padding:7px 60px 0 0; line-height:normal;clear:both}
#news .news_item a { color:#b0ecff; text-decoration:underline; }
#news .news_item h1 { margin:70px 0 0 0; float:left; }
#news .news_item h1 span { display:none}
#news .news_item h1.great_grates { width:324px; height:36px; display:block; background-position:0 -690px; }


/* ---------- Center Boxes styles ---------- */
.box { width:300px; min-height:525px; float:left; margin:0 0 0 20px;}
.round_grates { margin:0 0 0 30px;}
.box .box_hd { background-position:-379px -243px; width:300px; height:45px; overflow:hidden;}
.box .box_ct { width:260px; min-height:520px; background-position:-377px -379px; overflow:hidden; border:solid 5px #357f94; border-width:0 5px; padding:5px 15px }
.box .box_ft { background-position:-379px -290px; width:300px; height:17px; overflow:hidden}
.box h2 { padding:3px 0 0 10px; float:left; font-family:"Century Gothic",Helvetica,Tahoma,sans-serif; }
.box .lines { width:34px; height:35px; float:right; margin:5px 5px 0 0;}
.box .lines1 { background-position:0 -462px; }
.box .lines2 { background-position:-35px -462px; }
.box .lines3 { background-position:-70px -462px; }
.box ul { padding:5px 0 5px 30px; font-size:13px;}
.box ul li { padding:2px 0;}
.box ul li a { background-position:0 -543px; padding:0 0 0 15px;}
.box ul li a:hover { text-decoration:underline;}


/* ---------- Footer styles ---------- */
#footer { background:url(../images/footer_bg.jpg) repeat-x; width:100%; min-width:1045px;  height:107px;}
#footer .wrapper { height:107px; text-align:center; color:#bae3ee; overflow:visible;}
#footer .fnav {  float:left; padding:30px 0  0 330px;}
#footer .fnav a {color:#bae3ee;}
#footer .fnav a:hover { text-decoration:underline}
#footer .copyright { font-size:11px;}
#footer .made_in_usa { background-position:0 -570px; width:197px; height:115px; float:right; margin:-10px 30px 0 0;}


/* ----------Product Images ---------- */
.product_images { float:left; padding:0 0 0 30px; overflow:hidden}
.product_images ul { width:330px; overflow:hidden;}
.product_images ul li { float:left; margin:0 10px 10px 0; border:solid 1px #357f94; width:80px; height:80px; overflow:hidden}
.product_images ul li.main { border:solid 5px #357f94; width:300px; height:300px;}
.description { width:355px; float:left; font-size:13px;}


/* ---------- Right Sidebar ---------- */
#sidebar { width:220px; height:auto; float:right; overflow:visible; padding:0 30px 0 0; }
#sidebar a { color:#0099cc}
#sidebar a:hover { text-decoration:underline}
#sidebar h4 { padding:10px 0 0 20px; font-weight:normal}
#sidebar .sep { height:5px; background:#357f94; margin:10px 0; overflow:hidden}
.right_sidebar { width:210px; float:right; border:solid 5px #357f94; border-width:5px 5px 0 5px; padding:0 0 10px 0; position:relative}
.right_sidebar .corner { background:url(../images/corner.jpg) no-repeat; width:20px; height:29px; position:absolute; left:-20px; top:23px;}
.right_sidebar table { margin:0 0 0 16px;}
.right_sidebar table td{ padding:5px 4px; vertical-align:middle}
.right_sidebar_ft { background-position: -457px -946px; width:220px; height:19px; float: right; overflow:hidden}


/* ---------- TABS ---------- */
#tabs {width:940px; margin:auto; clear:both; }
#tabs ul { height:40px; background:url(../images/tabs_bg.jpg) repeat-x; }
#tabs ul li { float:left; line-height:40px; font-size:13px; color:#000000;}
#tabs ul li a { height:40px; color:#0099cc; background:url(../images/tabs_bg.jpg) left top repeat-x; display:block; float:left;
font:bold 20px Tahoma,Geneva,sans-serif;}
#tabs ul li a:hover {color:#357f94}
#tabs ul li a.current { background:url(../images/tabs_selected.jpg) left top no-repeat; color:#fff;}
#tabs ul li a.current:hover {color:#fff}
#tabs ul li a.current span {background:url(../images/tabs_selected_right.jpg) right top no-repeat;}
#tabs ul li a span { background:url(../images/tabs_right.jpg) right top no-repeat; height:40px; line-height:40px; display:block; float:left; padding:0 20px; cursor:pointer;}
#tabs .container { clear:both; overflow:hidden}
#tabs .container ul { background:none; height:auto}
#tabs .container ul li {background:url(../images/box_bullet.jpg) no-repeat; background-position:0 6px; padding:0 0 0 15px; line-height:1.5em; float:none; font-size:14px;}
#tabs .container table { width:100%}
#tabs .container table td { border-bottom:solid 1px #dddddd; padding:5px;}


/* ---------- Static Content Pages ---------- */
.content { width:700px; height:auto; margin:auto;}
.content a {text-decoration:underline; color:#0099cc;}
.content a:link {text-decoration:underline; color:#0099cc;}
.content a:followed {text-decoration:underline; color:#0099cc;}
.content a:hover {text-decoration:none; color:#0099cc;}
.content a:active {text-decoration:none; color:#0099cc;}
.content h1 { font-size:30px; color:#357f94; font-family:"Century Gothic",Helvetica,Tahoma,sans-serif; padding:20px 0 0px 0;}
.content h2 { font-size:26px; font-family:Tahoma,Geneva,sans-serif; color:#357f94; font-weight:normal; padding:20px 0 0px 0;}
.content h3 { font-size:20px; font-family:Tahoma,Geneva,sans-serif; color:#3a4043; font-weight:normal; padding:20px 0 0px 0;}
.content ul { padding:10px 0 10px 22px;}
.content ul li { background:url(../images/blue_arrow.gif) no-repeat left top; background-position:0 6px; padding:3px 0 3px 12px;}
.content hr {
	border: none 0;
	border-top: 1px dashed #357f94;/*the border*/
	width: 100%;
	height: 1px; /*whatever the total width of the border-top and border-bottom equal*/
}
.content .faq_questions {border:solid 5px #357f94; padding:20px;}
.content .faq_questions ol {margin:0 0 0 35px;}
.content .faq_questions ol li {list-style:decimal;margin:7px 0 0 0;}

.content .drainage-design-guide {line-height:1.5em;}
.content .drainage-design-guide h1 { font-size:26px; color:#357f94; font-family:"Century Gothic",Helvetica,Tahoma,sans-serif; padding:20px 0 5px 0;border-bottom:1px dashed #4bacc6;line-height:1em;}
.content .drainage-design-guide ol {margin:0 0 0 35px;}
.content .drainage-design-guide ol li {list-style:decimal;margin:7px 0 0 0;}
.content .drainage-design-guide .legend {font-size:11px; line-height: 1em;}
.content .drainage-design-guide table {border-collapse:collapse;}
.content .drainage-design-guide table td { border:solid 1px #4bacc6; padding:5px;}
.content .drainage-design-guide table tr.table-heading { background:#4bacc6;padding:3px;font-size:17px;font-weight:bold;color:#FFF;}
.content .drainage-design-guide table.clear {border-collapse:collapse;}
.content .drainage-design-guide table.clear td { border:0; padding:0;}
.content .drainage-design-guide table.clear tr.table-heading {}

.content .drainage-design-guide .big_title{background:#d7eff6;border:1px solid #5cb6df;padding:0 0 20px 0;text-align:center;}
.content .drainage-design-guide .big_title h3{display:block; width: 430px; margin: 0 auto;}
.content .drainage-design-guide .big_title img{float: left;margin-top: -10px;}
.content .drainage-design-guide .big_title a{display:block;}

.content .drainage-design-guide table td.white{background:white; color: black; text-align: center; width: 100px;}
.content .drainage-design-guide table td.nospace{padding:0; margin: 0;}
.content .drainage-design-guide table td.nospace .table-heading td{font-size:14px;}
.content .drainage-design-guide table tr.table-content td strong{font-size:24px; text-align: center; width: 100%;}
.content .drainage-design-guide table tr.table-content td{text-align: center;}

/* ---------- Contact Us ---------- */
.contact { width:520px; margin:0 0 0 100px; float:left;}
.contact_sidebar { width:250px; height:600px; float:left; border-left:dashed 1px #357f94; margin:0 0 0 30px;}
.contact_sidebar h3 {font-size:22px; font-family:Tahoma,Geneva,sans-serif; color:#357f94; font-weight:normal; padding:17px 0 0px 30px;}
.contact_sidebar p { padding:5px 0 5px 30px;}