@charset "UTF-8";

/*########################################

	Project:    Suntex Water Tanks
	Version:    1.1 
	Last change:    13/01/09 [stylesheet dev] 
	Designed by:    djsoutsourcing - www.djsoutsourcing.com

#########################################*/

/*------------------------------------------------------------------ 

	[Table of contents] 
  
	1. GLOBAL STYLES
	2. COLUMN STYLES
	3. NAVIGATION
	4. PRODUCTS
	5. TANK SELECTOR
	6. GALLERY
	7. CONTACT, FORM
	8. sFIR STYLES
	9. FOOTER
	
# -------------------------------------------------------------------*/  



/*---------------------------------------

	1. GLOBAL STYLES - body, text, images, links, logo

-----------------------------------------*/ 


* { margin: 0em; padding: 0em; }

body { color: #333333; font-size: 13px; line-height: 20px; margin-bottom:14px; font-family:Arial, Helvetica, Verdana,sans-serif; background:url('../img/body-bg-water.png') no-repeat top center; }




/*   Text Styles  */

p { line-height: 20px; margin-bottom:22px; }

h1 { color:#00A4DB; font-size:16px; font-weight: bold; text-transform:capitalize; border-bottom:#AFD1E1 solid 1px; padding:4px 0px; margin-bottom:20px;  }

h2 { color:#447B8F; font-size:14px; font-weight: bold; padding:4px 0px; margin-bottom:16px;  }

h2 a { color:#333333; border:none; background:url('../index.html') 0px 5px no-repeat; padding:0px 0px 5px 18px;  }

h2 a:hover { color:#FF6600; border:none; background:url('../index.html') 0px 5px no-repeat; }

h3 { color:#333333; font-weight: normal; text-transform:capitalize; border-bottom:#999999 dotted 1px; padding-top:4px; margin-bottom:20px; background:url(../index.html) top left no-repeat; }

h4 { height:30px; }

h5 { color:#fff; font-weight: normal; font-size:24px; text-transform:capitalize; }

div.spacer { width:100%; clear:both; display:block; height:1px; }

a { color:#F29118; text-decoration:none; }

a:hover { color:#FF6600; text-decoration:underline; }

a.image-link { text-indent: -999px; }

img { border: none; }

div#scroll { padding-top: 18px; }

div#scroll li.scroll-item { text-align: center; border-right: 1px dashed #999; margin-left: 5px; overflow: hidden}

div#scroll li.last { border: none !important; width: 299px !important;}

div#scroll li.scroll-item h2 { margin: 0px;}

div.scroll-clear { width: 960px; clear: both; height: 182px }

div.clear { width: 960px; clear: both; height: 35px;}

div#detail-images-wrap {  min-height: 600px;  width: 200x; margin: 0 10px 10px 0; float: left}
div#detail-images { width: 200px; overflow: hidden;}

div#detail-images img { margin-bottom:20px; }

div#detail-images ul { list-style-position: outside; list-style-type: none; list-style-image: none; margin: auto; width: 200px; }

div#detail-images ul li { float: left; display: block; border-right: 1px dashed #666666; border-bottom: 1px dashed #666666; padding-right: 7px; cursor: pointer;}

div#detail-images ul li.last { border: none; border-bottom: 1px dashed #666666;}

/*   Other Stuff  */

div.faq-item strong { cursor: pointer; }

.red { color: #F00; }

a.chart-active { cursor:default; color: #000000 !important; }

a.chart-active:hover { cursor: default; text-decoration: none; color: #000000 !important; }




/*---------------------------------------

	2. COLUMN STYLES - header, content structure, modules, index scroller

-----------------------------------------*/

#hd-bg { height:167px; background:url('../img/hd-bar.png') repeat-x top }

#hd { height:167px; width:960px; margin:auto; position:relative; }

#hd .main-logo { background:url('../img/tankworx-logo-water-tanks.png') no-repeat; width:279px; height:214px; display:block; text-indent:-9999; overflow:hidden; position:absolute; left:0px; top:0px;  } 

#hd #hd-tel { background:url('../img/hd-tel.png') no-repeat; width:240px; height:74px; display:block; position:absolute; left:300px; top:45px; }

#hd a.grab-quote { background:url('../img/grab-a-quote.png') no-repeat; background-position:top; width:227px; height:72px; display:block; position:absolute; top:50px; right:10px; text-indent:-9999; overflow:hidden; }

#hd a.grab-quote:hover { background-position:bottom; }

#hm-feature-bg { height:250px; background:url('../img/hm-feature-bg.png') transparent repeat-x bottom; }

#hm-feature { height:250px; width:940px; margin:auto; background:url('../img/hm-bar-bg-water.png') no-repeat 0px 170px; padding:0px 0px 0px 100px; position:relative; }

#hm-feature h1 { margin:70px 0px 20px 0px; color:#1E262C; font-family:"trebuchet ms",arial,sans-serif; font-size:24px; letter-spacing:-1px; border-bottom:none; width:452px; line-height:22px; }

#hm-feature p { width:452px; }

#hm-feature a.feature-button { background:url('../img/feature-link-button.png') top no-repeat; width:226px; height:33px; display:block; padding-top:14px; color:#1E262C; text-transform:uppercase; text-align:center; font-size:16px; }

#hm-feature a.feature-button:hover { background-position:bottom; text-decoration:none; padding-top:15px; height:32px; }

#hm-feature #hm-movie  { position:absolute; top:-65px; right:100px; }


#hm-ct-bg { background:url(../img/hm-ct-bg.png) repeat-x top; height:400px; }

#ct-bg { height:400px; }

#ct { min-height:400px; display:block; width:960px; margin:auto; position:relative; }

/* index scroller */

#index-scroller { display:block; width:960px; height:195px; background:url(../img/index-scroller-bg.png) no-repeat top; position:absolute; top: -20px }

#index-scroller #l-arrow { display:block; float:left; width:20px; height:182px; background: url('../img/scroll-l-arrow.png') center no-repeat; cursor: pointer; }

#index-scroller #r-arrow { display:block; float:left; width:20px; height:182px; background: url('../img/scroll-r-arrow.png') center no-repeat; cursor: pointer; }

#index-scroller #scroll { display:block; float:left; width:920px; height:182px; }

/* columns */

#lcol { width:600px; display:block; float:left; margin:0px 20px 0px 20px; padding:20px 0px; }

#rcol { width:300px; display:block; float:left; margin:0px 20px 0px 0px; padding:20px 0px; }

#mcol { width:900px; display:block; float:left; margin:0px 20px; padding:20px 0px; }


.featured-product { -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 3px solid #E5F4F7; padding: 4px; }

.featured-product h1 { padding-left:15px; }

.featured-product h2 { -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 3px solid #EBF6E7; background:#EBF6E7; padding:3px 15px; margin-bottom:3px; }

.featured-product p { -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 3px solid #EBF6E7; background:#EBF6E7; padding:3px 15px; margin-bottom:0px; }

.featured-product div.centered-image { text-align: center; margin-bottom: 10px }

ul.ct-list {  background:#E5F2E2; padding:15px 30px; color:#6DBC57; font-size:13px; font-weight:bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 3px solid #EBF6E7; height: 100px }

ul.ct-list li { list-style:url('../img/bullet-arrow.png'); padding:0px 0px 5px 10px; float:left; width:250px;  }

ul.ct-list li.last { clear:both; display:block; height:1px; list-style:none; width:100%; }


 /*---------------------------------------

	3. NAVIGATION - top-nv, nv, stucture, header, navigation

-----------------------------------------*/ 

/* -- Top Navigation --*/

#hd ul.top-nv {  padding:0; list-style-type:none; position:absolute; top:10px; right:10px; width:310px;   }

#hd ul.top-nv li a { display:block; float:left; color:#002255; text-transform:uppercase; font:bold 12px; letter-spacing:-1px; text-decoration:none; padding:0px 6px; }

#hd ul.top-nv li a:hover { color:#ffb340;  }

/* -- Top Navigation --*/

#hd ul.nv {  padding:0; list-style-type:none; position:absolute; bottom:-1px; right:10px; width:520px;   }

#hd ul.nv li a { display:block; float:left; padding:0px 0px 0px 0px; height:31px; color:#fff; text-transform:uppercase; font:bold 12px; letter-spacing:-1px; text-decoration:none; margin-right:5px; }

#hd ul.nv li a:hover { background-position:bottom left; color: #333  }

#hd ul.nv li a span.left { background: url('../img/nv-itm-bg.png') no-repeat top left; height:26px;  padding:5px 0px 0px 0px; display: block; float: left;  }
#hd ul.nv li a span.right { background: url('../img/nv-itm-bg.png') no-repeat top right; height:26px;  padding:5px 10px 0px 5px; display: block; float: left; }

#hd ul.nv li a:hover span.right { background-position: bottom right; }

#hd ul.nv li a:hover span.left { background-position: bottom left; }




 /*---------------------------------------

	4. PRODUCTS - lists

-----------------------------------------*/ 

ul#product-list { width:100%; margin:0px; padding:0px; list-style:none; color:#447B8F; }

ul#product-list li { width:190px; display:block; float:left; margin:0px 15px 20px 10px; text-align:center; border: 4px solid #CBE8F7; background: #FFFFFF;}

ul#product-list li:hover {border: 4px solid #DAEACA; cursor: pointer }

ul#product-list li a { display: block; text-decoration: none; }

ul#product-list li a  img { border: none; max-width: 190px }

table.specs td.blue { background:#E5F4F7; text-align:right; padding:3px 10px 3px 10px; border-bottom:1px solid #fff; border-right:1px solid #AFE593; width:60px; }

table.specs td.green { background:#E3F0E1; text-align:center; padding:3px 5px 3px 0px; font-weight:bold; border-bottom:1px solid #fff; border-left:1px solid #fff; width:75px; }

ul#product-list li h2 { margin-bottom: 0px; max-width: 190px; padding-bottom: 0; font-size: 16px}

ul#product-list li h2 span { font-size: 10px}

ul#product-list li h4 { margin-bottom:0px; margin-top: 0px; padding: 0; max-width: 190px; font-size: 10px;}

 /*---------------------------------------

	5. TANK SELECTOR - items, form

-----------------------------------------*/ 

#selector { width:600px; height:500px; display:block; }

#selector div.panel-bg-small { width:600; height:57px; background:url('../img/selector-panel-bg-small.png') no-repeat; margin-bottom:10px; }

#selector div.panel-bg-large { width:600; height: 192px;  background:url('../img/selector-panel-bg-large.png') no-repeat; margin-bottom:30px;  }

#selector div.panel-bg-small .lefttext { color:#fff; font-size:20px; width:200px; height:39px; padding-top:18px; float:left; display:block; background:url('../img/selector-break.png') repeat-y right top; text-align:center;  }

#selector div.panel-bg-small .righttext { width:400px; height:35px; padding-top:15px; float:left; display:block; background:url(../img/selector-arrow.png) no-repeat center top;  }

#selector div.panel-bg-small .righttext input { border:none; font-size:24px; font-weight:bold; color:#FFDB66; background:none; float:left; width:140px; margin:0px 30px; text-align:center; }

#selector .styledcheckhide { display: none !important; }

#selector .styledcheck { text-decoration: none; background: url(../img/selector-check-box.png) no-repeat; height: 21px; width: 40px; display: block; padding: 1px 0px 0px 30px; font-size: 18px; color: #FFFFFF }

#selector .styledcheck:hover { color:#333333; }

#selector .styledchecked { background-position: left -23px; }

.panel-bg-large ul {list-style: none; list-style-type: none; padding-top: 8px; padding-left: 30px; overflow: hidden }

.panel-bg-large ul li { float: left; width: 170px; padding: 10px; }

#selector #slider-range-wrap { padding-top: 26px; width: 550px; padding-left: 20px }

.ui-slider-horizontal { height: 0.2em !important; }

.ui-slider-horizontal .ui-slider-handle { top: -1.5em !important; }

.ui-slider-horizontal .ui-slider-handle { background: url('../img/selector-slider.png') top left no-repeat !important; height: 45px !important; border: none !important; width: 29px !important;}

.ui-slider-horizontal .ui-state-hover { background-position: bottom right !important;}

.search-button { background: transparent url(../img/feature-link-button.png) no-repeat scroll center top !important; outline: none!important; border: none!important; width: 226px!important; height: 45px!important; font-size: 16px !important; color: #333333 !important; cursor: pointer!important;}

#selector .search-button:hover { background-position: 0px -47px; }

 /*---------------------------------------

	6. GALLERY - list

-----------------------------------------*/ 



 
 /*---------------------------------------

	7. CONTACT, FORM - input, text area, submit button, custom layout

-----------------------------------------*/ 

div#product-enquiry textarea { font-family:"trebuchet ms",arial,sans-serif;color:#332626;border:#AFD1E1 1px solid;background:#EBF6E7;width:360px;height:110px; padding:5px;font-size:12px;font-weight:normal;margin-bottom:10px; }

div#product-enquiry textarea:focus {background:#E3F0E1;}

div#product-enquiry input {font-family:"trebuchet ms",arial,sans-serif;color:#332626;border:#AFD1E1 1px solid;background:#EBF6E7;width:276px;padding:5px;font-size:14px;font-weight:normal;}

div#product-enquiry input:focus {background:#E3F0E1;}

div#product-enquiry { width: 380px; float: left;}



 /*---------------------------------------

	8. sIFR styles - do not modify

-----------------------------------------*/ 




 /*---------------------------------------

	9. FOOTER - site links, big click logo, w3 validation

-----------------------------------------*/ 


#ft { height:230px; background: url('../img/ft-bg.png') repeat-x top ; color:#fff; margin-top:20px;  }

#ftWrap { height:230px; margin:auto; width:960px; padding-top:10px;  }

#ftWrap .col {  height:132px; width:298px; display:block; float:left; padding:0px 10px; border-right:#AFD1E1 solid 1px; border-left:#187593 solid 1px; position:relative; }

#ftWrap .col .credits { text-align:right; }

#ft a { color:#fff; border:none; }

#ft a:hover { color:#FFAB23; }

ul.ft-links {  list-style:url('../img/bullet-arrow.png'); padding-left:15px; text-align:left; text-transform:uppercase; margin-top: 10px;}

ul.ft-links li { padding:1px;  float:left; width:136px;  }

#ft #ft-tel { background:url('../img/ft-tel.png') no-repeat; width:296px; height:29px; display:block; margin-bottom:10px; }

#ft .col a.ft-logo { background:url('../img/ft-logo.png') no-repeat; width:191px; height:152px; display:block; text-indent:-9999; overflow:hidden; position:absolute; right:64px; top:-10px; }

#ft .col a.bigclick-logo { background:url('../img/big-click-web-design-logo.png') no-repeat top right; width:300px; display:block; position:absolute; bottom:-86px; right:10px; text-align:right; padding-top:36px; color:#999999;  }

#ft .col a.bigclick-logo:hover { position:absolute; bottom:-87px; right:9px; text-align:right; color:#666666;  }