/* ********************************************* */
/*  DIMENSIONS                                   */
/*  #mainwrapper - 964 x (minimum)    		 			 */
/*  #leftnav - 220 x (minimum)                   */
/*  #content - 600 x (minimum)                   */         
/*  #footer - 964 x 35                           */
/* ********************************************* */

/* ***************************************************** MAIN SITE STRUCTURE ************************************************** */

* 
{
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;	
}

body {
  font-size: 62.5%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align: center;
  color: #555555;
  background: #EEEEEE;
}

#outer-wrap {
  min-height: 100%; 	
  width: 992px;
  margin: auto;
  margin-bottom: -90px;
  background: url(img/main_bg.gif) repeat-y;	
} 

#inner-wrap {
  position: relative;	
  min-height: 100%;
  margin: auto;
  margin-bottom: -90px;
  width: 964px;
  background: url(img/header_bg.jpg) no-repeat;
}

#bristan-logo {
 position: absolute;
 top: 25px;
 left: 420px;
}

#leftnav, 
#leftnav-wide {
  float: left;
  display: inline;
  width: 220px;
  min-height: 396px;
  margin-left: 100px;
  margin-top: 8px;
}

#leftnav-wide {
  margin-left: 10px;
}

#content {
  float: left;
  display: inline;
  width: 600px;
  min-height: 420px;
  margin-left: 17px;
  margin-top: 3px;
  margin-bottom: 15px;
}

#footer,
#footershort {
  position: relative;	
  clear: both;
  margin: auto;
  width: 845px;
  min-height: 90px;
  background: #fff;
  width: 992px;
  background: url(img/main_bg.gif) repeat-y;	    
}

#clearfooter {
 clear: both;
 height: 90px;
}

#wrapcontentdiv {
 position: absolute;
 top: 185px;	
 left: 253px;
 text-align: left;
 width: 710px;
 min-height: 635px;
 background: url(img/content-wrap-back.gif) no-repeat;
}

#wrap-topstrip {
 position: relative;
 width: 710px;
 height: 58px;	
}

#wrapcontentdiv img#title {
 position: absolute;
 top: 2px;
 left: 8px;
}

#wrapcontentdiv p#title {
 position: absolute;
 top: 20px;
 left: 120px;	
 padding-left: 20px; 
 padding-right: 20px;
}

#content_home {
 margin-left: 30px;
 margin-top: 30px;
}

/* ***************************************************** CLASSES ********************************************************** */

a img {
 border: 0;
}

a {
 color: #68AABA;
 text-decoration: none;
}

a:hover {
 color: #68AABA;
 text-decoration: underline;
}

h1 {
  font-size: 1.1em;
  color: #81AA22;
  display: inline;
}

h2 {
  font-size: 1.0em;
  color: #81AA22;
  display: inline;
}

.content-title,
.content-subtitle {
  float: left;
  width: 99%;
  text-align: left;
  margin-bottom: 10px;
}

.content-subtitle {
  margin-top: 20px;
}

.content-text {
  float: left;
  width: 550px;
  display: inline;
  text-align: left;
  margin-left: 20px;
  margin-bottom: 15px;
  font-size: 1.3em;
}

.content-text ol {
 margin-left: 30px;
}

.content-text ol li {
 margin-bottom: 10px;
}

.content-text p {
 margin-bottom: 10px;
}

.spacer {
  float: left;
  width: 99%;
  height: 15px;
}

/* ***************************************************** LEFTNAV ********************************************************** */

#menu-wrap {
 float: left;
 margin:0;
 padding: 0;   
 margin-left: 46px;
 margin-top: 178px;
}

.mainmenu ul {
  float: left;	
  list-style: none;
  width: 169px;
  margin:0;
  padding: 0;  
}

.mainmenu li {
  float: left;		
  list-style: none;
  text-align: left;
  width: 169px;
  margin-bottom: 0;
  padding: 0;  
}

.mainmenu li a {
  float: left;		
  display: block;
  text-decoration: none;
  width: 169px;  
  margin-bottom: 0;
  padding: 0;  
  background: #ff0000;   
}

#menu-home a {
 color: #173E69;
 height: 34px;
 background: url(img/home.gif) no-repeat; 
}

#menu-home a:hover,
#menu-home a.selected {
 height: 34px;	
 background: url(img/home_on.gif) no-repeat;
}

#menu-about a  {
 color: #35C2F0;	
 height: 36px;
 background: url(img/about.gif) no-repeat;  
}

#menu-about a:hover,
#menu-about a.selected {
 height: 36px;	
 background: url(img/about_on.gif) no-repeat;
}

#menu-basins a  {
 color: #F68423;	
 height: 37px; 
 background: url(img/basins.gif) no-repeat;  
}

#menu-basins a:hover,
#menu-basins a.selected {
 height: 37px;	
 background: url(img/basins_on.gif) no-repeat;
}

#menu-toilets a  {
 color: #B6D437;
 height: 34px;	 
 background: url(img/toilets.gif) no-repeat; 
}

#menu-toilets a:hover,
#menu-toilets a.selected {
 height: 34px;	
 background: url(img/toilets_on.gif) no-repeat;
}

#menu-taps a  {
 color: #35C2F0;		
 height: 37px;	 
 background: url(img/taps.gif) no-repeat; 
}

#menu-taps a:hover,
#menu-taps a.selected {
 height: 37px;	
 background: url(img/taps_on.gif) no-repeat;
}

#menu-showers a  {
 height: 36px;	
 color: #FFCA3E;	
 background: url(img/showers.gif) no-repeat; 
}

#menu-showers a:hover,
#menu-showers a.selected {
 height: 36px;	
 background: url(img/showers_on.gif) no-repeat;
}
      
#menu-accessories a  {
 color: #94014F;
 height: 37px;	
 background: url(img/accessories.gif) no-repeat; 
}

#menu-accessories a:hover,
#menu-accessories a.selected {
 height: 37px;	
 background: url(img/accessories_on.gif) no-repeat;
}

#menu-contact a  {
 color: #173E69;
 height: 34px;	
 background: url(img/contact.gif) no-repeat; 	
}

#menu-contact a:hover,
#menu-contact a.selected {
 height: 34px;	
 background: url(img/contact_on.gif) no-repeat;
}

#menu-measurement a  {
 color: #173E69;
 height: 41px;	 
 background: url(img/critical.gif) no-repeat; 	
}

#menu-measurement a:hover,
#menu-measurement a.selected {
 height: 41px;	 
 background: url(img/critical_on.gif) no-repeat;
}

#menu-wheretobuy a  {
 color: #173E69;	
 height: 41px; 
 background: url(img/where.gif) no-repeat; 
}

#menu-wheretobuy a:hover,
#menu-wheretobuy a.selected {
 height: 41px;	 
 background: url(img/where_on.gif) no-repeat;
}

#promotions {
  float: left;
  margin-top: 15px;  
  margin-bottom: 20px;
}

.leftimage {
  float: left;
  margin-top: 15px;  
  margin-bottom: 20px;	
}

#share {
  float: left;
  margin-left: 10px;
  text-align: left;
  color: #68AABA;
  font-size: 1.1em;
}

#share .divider {
  width: 150px;
  height: 1px;
  clear: both;
  margin-top: 3px;
  margin-bottom: 7px;
  font-size: 1px;
  background: url(img/share_divider.gif) repeat-x;
}

/* *************************************************** PAGETITLES ********************************************************* */

h1.pagetitle {
 float: left;
 display: block;
 width: 590px;
 height: 40px;
 text-indent: -9999em;
 overflow: hidden;
}

h1.pagetitle#home {
 background: url(img/titles/title_home.gif) no-repeat;
}

h1.pagetitle#home-suite {
 width: 135px;
 background: url(img/titles/title_home_suite.gif) no-repeat;
}

h1.pagetitle#save-water {
 background: url(img/titles/title_save_water.gif) no-repeat;
}

h1.pagetitle#showers {
 background: url(img/titles/title_showers.gif) no-repeat;
}

h1.pagetitle#flow {
 background: url(img/titles/title_flow.gif) no-repeat;
}

h1.pagetitle#sitemap {
 background: url(img/titles/title_sitemap.gif) no-repeat;
}

h1.pagetitle#contact {
 background: url(img/titles/title_contact.gif) no-repeat;
}

h1.pagetitle#coming-soon {
 background: url(img/titles/title_coming_soon.gif) no-repeat;
}

/* ***************************************************** CONTENT ********************************************************** */

#flash-holder {
  float: left;
  margin-bottom: 20px;
}

#wrap-featured {
  float: left;
  width: 595px;
  text-align: left;
}

#featured-img {
  float: left;
  width: 395px;
  height: 295px;
}

#featured-title {
  float: left;
  width: 195px;
  height: 45px;
}

#featured-text {
  float: left;
  width: 180px;
  padding-left: 15px;
  margin-top: 5px;
  font-size: 1.2em;
  line-height: 1.2em;
}

.prod-wrap {
  float: left;
  width: 595px;
  text-align: left;
  margin-bottom: 5px;
}

.prod-img {
  float: left;
  width: 150px;
}

.prod-text {
  float: left;
  width: 430px;
  margin-left: 15px;
  margin-top: 15px;
  font-size: 1.3em;
}

ul.sitemap-list {
 float: left;
 width: 500px;
 margin-left: 30px;
 margin-bottom: 15px;
 list-style-image: url(img/list_item.gif);
}

ul.sitemap-list li a {
 font-size: 1.1em;
 color: #FFFFFF;
 text-decoration: none;
}

ul.sitemap-list li a:hover {
 color: #FFFFFF;
 text-decoration: underline;
}

#flashholder {
 float: left;
 display: inline;
 width: 725px;
 height: 710px;
 margin-bottom: 10px;
}

/* ***************************************************** FORMS ********************************************************** */

.win-form {
  float: left;
  width: 595px;
  text-align: left;
}

fieldset.win-set {
  margin: 0;
  padding: 0;
  border: none;
}

fieldset.win-set legend {
  display: none;
}

.win-form label {
  float: left;
  width: 180px;
  height: 20px;
  line-height: 20px;
  margin-left: 20px; 
  font-size: 1.2em;
  color: #85AA30;
}

.wide-label {
  float: left;
  width: 90%;
  height: 20px;
  line-height: 20px;
  margin-left: 20px; 
  font-size: 1.2em;
  color: #85AA30;
}

.hide-label {
  visibility: hidden;
}

.wrap-error {
  float: left;
  width: 385px;
  margin-bottom: 5px;
  padding-top: 4px;
  padding-left: 4px;
  text-indent: 4px;
  font-size: 1.1em;
  color: #FF0000;
  background: url(img/error_bg.gif) repeat;
}

.wrap-no-error {
  float: left;
  width: 385px;
  padding-top: 0px;
  padding-left: 4px;
}

.field-required {
  float: left;
  width: 10px;
  height: 20px;
  font-size: 1.3em; 
  color: #FF0000;
}

.wrap-input input {
  float: left;
  width: 180px;
  height: 20px;
  padding-top: 4px;
  background: url(img/input_bg.gif) repeat-x;	
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 1.1em; 
  color: #777777;
  border: none;
}

.wrap-input-sml input {
  float: left;
  width: 50px;
  height: 20px;
  padding-top: 4px;
  background: url(img/input_bg.gif) repeat-x;	
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 1.1em; 
  color: #777777;
  border: none;
}

.wrap-left {
  float: left;
  width: 10px;
  height: 20px;
  background: url(img/input_bg_left.gif) no-repeat;
}

.wrap-right {
  float: left;
  width: 10px;
  height: 20px;
  background: url(img/input_bg_right.gif) no-repeat;
}

.wrap-radio {
  float: left;
  width: 150px;
  margin-top: 1px;	
}

.radio-answers {
  float: left;
}

.radio-answers input {
  float: left;
  height: 20px;
}

.radio-answers label {
  float: left;
  clear: none;
  width: 39px;
  height: 20px;
  margin-left: 2px;
  line-height: 20px; 
  font-size: 1.1em; 
  color: #777777;
}

.radio-answers label.radio-sml {
  width: 50px;
}

.radio-answers label.radio-med {
  width: 75px;
}

.radio-answers label.radio-wide {
  width: 85px;
}

.radio-answers label.radio-large {
  width: 95px;
}

.radio-answers label.radio-xxl {
  width: 110px;
}

.wrap-wide {
  float: left;
  width: 385px;
  margin-top: 1px;	
}

.wrap-wide-high {
  float: left;
  width: 385px;
  margin-top: 20px;	
}

.win-form label.comp-question {
 width: 590px;
 font-size: 1.3em;
}

#comp-question-wrap {
 float: left;
 width: 590px;
 margin-left: 20px;	
}

/* ***************************************************** FOOTER ********************************************************** */

#shadow-left {
  float: left;
  width: 25px;
  height: 18px;
  background-image: url(img/footer_left.gif);	
}

#shadow-mid {
  float: left;
  width: 795px;
  height: 18px;
  background: url(img/footer_mid.gif) repeat-x;	
}

#shadow-right {
  float: left;
  width: 25px;
  height: 18px;
  background-image: url(img/footer_right.gif);	
}

#footer-logos {
  float: left;
  width: 99%;
  text-align: right;
}

#footer-logos .logos {
  float: right;
  display: inline;
  margin-right: 20px;
  margin-top: 25px;  
}

#footer-links {
 position: absolute;
 top: 30px;
 left:25px;
 width: 99%;
 text-align: left;
 margin-left: 10px;
 color: #68AABA;
 font-size: 0.9em;
}

#footer-links a {
 color: #68AABA;
 text-decoration: none;
}

#footer-links a:hover {
 color: #68AABA;
 text-decoration: underline;
}

#copyright {
 position: absolute;
 top: 50px;
 left:25px;
 text-align: left;
 margin-left: 10px;
 color: #B8B8B8;
 font-size: 0.9em; 
}

/*********************** ACCESSORIES **********************/

#content_home {
 width: 659px;
 height: 600px;
 margin-left: 30px;
 margin-top: 20px;
 background: url('img/content_home_bg.jpg');
}

#content_home p,
#content_advice p  {
 margin-left: 10px;
 margin-top: 10px;
 margin-bottom: 20px;
 margin-right: 10px;
 color: #ffffff;
}

#content_about {
 width: 659px;
 height: 600px;
 margin-left: 30px;
 margin-top: 20px;
 background: url('img/content_about_bg.jpg');
}

#content_about p {
 margin-left: 10px;
 margin-top: 10px;
 margin-right: 10px;
 margin-bottom: 30px;
 color: #ffffff;
}

#content_accessory,
#content_where,
#content_advice {
 width: 659px;
 margin-left: 30px;
 margin-top: 20px;
 background: url('img/content_accessory_bg.jpg');
}

#content_where {
 height: 900px;
 background: url('img/content_home_bg.jpg');
}

#content_advice {
 height: 600px;
 background: url('img/content_home_bg.jpg');
}
	
#content_accessory .item {
 background: url('img/content_accessory_item_bg.jpg') no-repeat;
 width: 659px;
 height: 141px;
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 1.1em; 
}

/*********************** SHOWER **********************/

#content_shower {
 width: 659px;
 margin-left: 30px;
 margin-top: 20px;	
 background: url('img/content_shower_bg.jpg');
}
	
#content_shower .item {
 background: url('img/content_shower_item_bg.jpg') no-repeat;
 width: 659px;
 height: 141px;
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 1.1em; 
}

/*********************** BASIN **********************/

#content_bassin {
 width: 659px;
 margin-left: 30px;
 margin-top: 20px;
 background: url('img/content_bassin_bg.jpg');
}

#content_bassin .item {
 background: url('img/content_bassin_item_bg.jpg') no-repeat;
 width: 659px;
 height: 141px;
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 1.1em; 
}

/*********************** TAP **********************/

#content_taps {
 width: 659px;
 margin-left: 30px;
 margin-top: 20px;
 padding-bottom: -20px;
 background: url('img/content_tap_bg.jpg');
}

#content_taps .item {
 background: url('img/content_tap_item_bg.jpg') no-repeat;
 width: 659px;
 height: 141px;
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 1.1em; 
}

/*********************** TOILET **********************/

#content_toilet {
 width: 659px;
 margin-left: 30px;
 margin-top: 20px;
 padding-bottom: 10px;
 background: url('img/content_toilet_bg.jpg');
}

#content_toilet .item {
 background: url('img/content_toilet_item_bg.jpg') no-repeat;
 width: 659px;
 height: 141px;
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 1.1em; 
}

.item ul {
 padding: 0;
 margin: 0;
 list-style: none;
 display: inline;
}

.thumbnail {
 display: inline;
 margin: 10px 0 0 56px;
 float: left;
}

.desc {
 display: inline;
 margin: 10px 0 0 40px;
 float: left;
 width: 395px;
}

.desc h2 {
 font-size: 1.2em;
 padding: 0;
 margin: 0;
 color: #FFFFFF;
 font-weight: bold;
}
.desc p {
 font-size: 1em;
 color: #FFFFFF;
 margin: 5px 0 10px 0;
}

li.desc a {
 font-size: 1em;
 color: #FFFFFF;
}

li.desc a:hover {
 font-size: 1em;
 color: #FFFFFF;
}

.margin-top-twenty {
 margin-top: 20px;
}

/*********************** ADVICE **********************/

#advicethumbswrap {
 float: left;
 display: inline;
 width: 639px;
 margin-left: 10px;
 margin-top: 10px;
 margin-bottom: 30px;
 margin-right: 10px;
 color: #ffffff;	
}

.advicethumbs {
 float: left;
 display: inline;
 width: 150px;
 height: 180px;
 margin-right: 9px;
}

.advicethumbs img {
 float: left;
 width: 150px;
 height: 160px;
 margin-bottom: 5px;
}

.advicethumbs .thumbdesc {
 float: left;
 width: 150px;
 text-align: center;
}

/*********************** WHERE TO BUY **********************/

#storelocator {
 float: left;
 display: inline;
 width: 639px;
 margin-left: 10px;
}

/* ***************************************************** SPACER Divs ******************************************************** */

#accessory-spacer {
 width: 100%; 
 height: 200px;	
}

#taps-spacer {
 width: 100%; 
 height: 2px;	
}

#basins-spacer {
 width: 100%; 
 height: 380px;	
}

#toilets-spacer {
 width: 100%; 
 height: 201px;	
}

#showers-spacer {
 width: 100%; 
 height: 50px;	
}

#where-spacer {
 width: 100%; 
 height: 50px;	
}

#advice-spacer {
 width: 100%; 
 height: 50px;	
}

#home-spacer {
 width: 100%; 
 height: 10px;	
}

/* ** LEFT HAND SPACERS ** */

#accessories-left-spacer {
 float: left;
 height: 200px;
 width: 160px;
}

#taps-left-spacer {
 float: left;
 height: 317px;
 width: 160px;
}

#home-left-spacer {
 float: left;
 height: 180px;
 width: 160px;
}

#about-left-spacer {
 float: left;
 height: 180px;
 width: 160px;
}

#basins-left-spacer {
 float: left;
 height: 210px;
 width: 160px;
}

#showers-left-spacer {
 float: left;
 height: 202px;
 width: 160px;
}

#toilets-left-spacer {
 float: left;
 height: 32px;
 width: 160px;
}

#where-left-spacer {
 float: left;
 height: 530px;
 width: 160px;
}

#advice-left-spacer {
 float: left;
 height: 230px;
 width: 160px;
}

/* *************************************************** MOZILLA FIX ************************************************** */

:link:focus, :visited:focus {
-moz-outline: none;
} 

/* ***************************************************** IE7 HACKS ********************************************************** */

/* Pushes #inner-wrap above #footer */
*:first-child+html #inner-wrap {
 margin-bottom: 0;	
}

/* reduces IE's extravagant radio label spacing */
*:first-child+html .radio-answers label {
 margin-left: 0;
}

*:first-child+html #accessory-spacer {
 height: 180px;	
}

*:first-child+html #taps-spacer {
 width: 100%; 
 height: 3px;	
}

*:first-child+html #basins-spacer {
 width: 100%; 
 height: 360px;	
}

*:first-child+html #toilets-spacer {
 width: 100%; 
 height: 201px;	
}

*:first-child+html #basins-left-spacer {
 height: 190px;
}

*:first-child+html #accessories-left-spacer {
 height: 180px;
}

/* ***************************************************** IE6 HACKS ********************************************************** */

* html #basins-left-spacer {
  height: 176px;
}

* html #accessory-spacer {
 height: 180px;	
}

* html #taps-spacer {
 height: 3px;	
}

* html #basins-spacer {
 height: 360px;	
}

* html #toilets-spacer {
 width: 100%; 
 height: 216px;	
}

* html #showers-left-spacer {
 height: 213px;
}

* html #accessories-left-spacer {
 height: 150px;
}

* html #taps-left-spacer {
 height: 255px;
}

* html #advice-left-spacer {
 height: 250px;
}

* html .margin-top-twenty {
 margin-top: 5px;
}


/* Counters the min-height set on #outer-wrap */
* html #outer-wrap {
  height: 100%;
}

/* Counters the min-height set on #inner-wrap */
* html #inner-wrap {
  height: 100%;	
}

/* Counters the min-height set on #leftnav */
* html #leftnav,
* html #leftnav-wide {
  height: 396px;
}

/* Counters the min-height and pushes #content above #footer */
* html #content {
  height: 400px;
  margin-bottom: 100px;
}

/* Counters the min-height set on #footer */
* html #footer {
  height: 90px;
  margin-top: 90px;
}

* html #footershort {
  height: 90px;
}

/* Remove double-margin effect */
* html #share {
  margin-left: 5px;
}

* html .wide-label,
* html #comp-question-wrap {
  margin-left: 10px;
}

/* reduces IE's extravagant radio label spacing */
* html .radio-answers label {
  margin-left: 0;
}

* html #menu-wrap {
 margin-left: 23px;
 margin-top: 178px;
}

* html #wrapcontentdiv {
  height: 625px;
}

/* For transparent png images */
* html img,
* html .png {
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
        this.src = "img/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
    );
}