.showDiv {
  
  }
  
.hideDiv {

	visibility: hidden;
	display: none;
	}

#assets .rBlock ul li.bold a {
  font-weight: bold;
  color: #0060a9;
  }
  
#assets .rBlock ul li.normal a {
  color: #859bab;
  }

body {

	}

#lnav #SelectedConfig h1 {
  font: bold 13px arial, helvetica, verdana, sans-serif;
  color: #1a4553; 
  text-align: center;
  padding: 15px 0 0 0;
  }

#lnav #SelectedConfig ul {  
	clear: both;
	margin: 0 4px 0 2px;
	padding: 10px 0 0 10px;
	font: normal 11px Verdana, Arial, Helvetica, sans-serif;
	border: 0px dotted blue;
	}

#lnav #SelectedConfig ul li { 
  padding: 0 0 6px 9px;
  margin: 0;
  height: 15px;
  border: 0px dotted red;
  list-style: none;
  color: #f00;
  font-weight: bold;
  background: transparent url(../images/listArrow3.gif) no-repeat 0 6px;
  }

#details { float: left; border: 0px dotted yellow; }

#selectedImg {  
  width: 160px;
  height: 160px; 
  border: 1px solid #868686; 
  background: #fff;
  margin: 0 auto;
  vertical-align:middle;
  }
  
#lnav #SelectedConfig #selectedImg p { 
  color: #f00; 
  text-align:center;
  margin: auto;
  font: normal 11px arial, helvetica, verdana, sans-serif; 
  padding: 10px 10px 0 10px; 
  }

.configurator {
  background-color: #1a4553;
  display: inline;
  clear: left;
  float: left;
  margin: 10px;
  padding: 5px;
  border: 0px dotted orange;
  width: 370px;
  }

#details .configurator h1 {
  font: bold 12px arial, helvetica, verdana, sans-serif;
  color: #fff;
  margin: 0;
  padding: 0;
  }

.configurator h1 span {
  color: #b9eeff;
  padding-right: 10px;
  }  

div#WindowTypes .img {
  width: 360px;
  height: 120px;
  text-align: center; 
  display: block;
  cursor: hand;
  margin: 10px auto;
  }

#WindowTypes_Single {
  background: transparent url(../images/calculator/singlePane.gif) no-repeat left top;
  }

#WindowTypes_Double {
  background: transparent url(../images/calculator/doublePane.gif) no-repeat left top;
  }

#FirstPaneThickness, #FirstPaneSubstrate, #FirstPaneCoating, #AirSpace, #SecondPaneThickness, #SecondPaneSubstrate, #SecondPaneCoating {
  clear: both;
  /*display: inline;*/
  float: left;
  border: 0px dotted lime;
  background-color: #1a4553;
  width: 340px;
  margin: 2px;
  text-align: center;
  padding: 0px 10px 10px 15px;
  }



#FirstPaneThickness span, #FirstPaneSubstrate span, #FirstPaneCoating span, #AirSpace span, #SecondPaneThickness span, #SecondPaneSubstrate span, #SecondPaneCoating span {
  display: inline;
   border: 0px dotted lime;
   margin:0;
  padding: 0px;
}

#FirstPaneThickness span a, #FirstPaneSubstrate span a,  #FirstPaneCoating span a, #AirSpace span a, #SecondPaneThickness span a, #SecondPaneSubstrate span a, #SecondPaneCoating span a {
  margin: 10px;
  display: inline;
  float: left;
  border: 1px solid #486a77;
  white-space: nowrap;
  width: 70px;
  text-align: center;
  margin-right: -3px;
  color: #fff;
  font: normal 9px verdana, arial, sans-serif;
  padding: 2px 0;
  }

#FirstPaneSubstrate span a {
  margin: 10px;
  display: inline;
  float: left;
  border: 1px solid #486a77;
  white-space: nowrap;
  width: 70px;
  text-align: center;
  margin-right: -3px;
  color: #fff;
  padding: 0px 0 2px 0; 
  }

#FirstPaneThickness span a:hover, #FirstPaneSubstrate span a:hover,  #FirstPaneCoating span a:hover, #AirSpace span a:hover, #SecondPaneThickness span a:hover, #SecondPaneSubstrate span a:hover, #SecondPaneCoating span a:hover {
  border: 1px solid #d91e38;
  }

#FirstPaneThickness span a:active, #FirstPaneSubstrate span a:active,  #FirstPaneCoating span a:active, #AirSpace span a:active, #SecondPaneThickness span a:active, #SecondPaneSubstrate span a:active, #SecondPaneCoating span a:active, #FirstPaneThickness span a:focus, #FirstPaneSubstrate span a:focus,  #FirstPaneCoating span a:focus, #AirSpace span a:focus, #SecondPaneThickness span a:focus, #SecondPaneSubstrate span a:focus, #SecondPaneCoating span a:focus {
  border: 1px solid #d91e38;
  }

#FirstPaneSubstrate img {
  display: block;
  clear: both;
  border: none;
  padding: 4px 0 2px 0;
  text-align: center;
  margin: auto;
  border: 0px dotted aqua
  }

#buttons {
  width: 360px;
  border: 0px dotted aqua;
  text-align: right;
  display:block;
  float: left;
  background-color: #1a4553;
  padding-top: 5px;
  }

#GoNext {
  width: 63px;
  height: 18px;
  background: transparent url(../images/calculator/next.gif) no-repeat left top;
  text-align: right;
  float: right; 
  display: block;
  cursor: hand;
  margin: 10px 0px 10px 10px;
  }
  
#GoBack {
  width: 63px;
  height: 18px;
  background: transparent url(../images/calculator/back.gif) no-repeat left top;
  text-align: left;
  float: left; 
  display: block;
  cursor: hand;
  margin: 10px 10px 10px 6px;
  }

div#WindowTypes .img span, #GoNext span, #GoBack span {
  display: none;
  }

/* this is the image space */
#CurrentImg {
	/**/
  position: relative; 
	left: 5px; 
	top: 5px; 
  padding: 0 0 0 0px;
  margin: 0;
	width: 360px; 
	height: 190px; 
	z-index: 1; 
	border: 0px dotted red; 
	overflow: hidden; 
	}

  /* this is the image space */
#ConfigImg {
	/**/
  position: relative; 
	left: 5px; 
	top: 5px; 
  padding: 0 0 0 0px;
  margin: 0;
	width: 144px; 
	height: 144px; 
	z-index: 1; 
	border: 1px solid #1a4553; 
	overflow: hidden; 
	}
  
/* this is used to style the sun image.  
   it can be adjusted using the 'outer_[size]' classes to move left expanding the thickness  */
#curImgOuterThickness {
	position: absolute; 
	top: 0px; 
	width: 480px; 
	height: 360px; 
	z-index: 5; 
	/* background-image: url(../images/calculator/sunside.gif);  */
	border: 0px none #000000; 
	}

.outer_1_8 {
	left: -60px;
  visibility: visible;
	}
.outer_5_32 {
	left: -67px;
  visibility: visible;
	}
.outer_3_16 {
	left: -75px;
  visibility: visible;
	}
.outer_1_4 {
	left: -90px;
  visibility: visible;
	}
.outer_5_16 {
	left: -105px;
  visibility: visible;
	}
.outer_3_8 {
	left: -120px;
  visibility: visible;
	}

#configImgOuterThickness {
	position: absolute; 
	top: 0px; 
	width: 192px; 
	height: 144px; 
	z-index: 5; 
	border: 0px none #000000;
  left: -36px;
	}

.config_outer_1_8 {
	left: -24px;
  visibility: visible;
	}
.config_outer_5_32 {
	left: -27px;
  visibility: visible;
	}
.config_outer_3_16 {
	left: -30px;
  visibility: visible;
	}
.config_outer_1_4 {
	left: -36px;
  visibility: visible;
	}
.config_outer_5_16 {
	left: -42px;
  visibility: visible;
	}
.config_outer_3_8 {
	left: -48px;
  visibility: visible;
	}
  
/* this is used as the style for the edge (L) of the outer pane of a double pane config.  
   Use the outer_substrate_[substrate color]L to change the image color. */  
#curImgOuterSubstrateL {
	position: absolute; 
	left:-60px; 
	top:0px; 
	width:480px; 
	height:360px; 
	z-index:3; 
	border: 0px none #000000;
	}

#configImgOuterSubstrateL {
	position: absolute; 
	left:-24px; 
	top:0px; 
	width:192px; 
	height:144px; 
	z-index:3; 
	border: 0px none #000000;
	}  
  
.outer_substrate_blueL {
	/* background-image: url(../images/calculator/L_blue.gif);*/ 
	}
.outer_substrate_bluegreenL {
	/* background-image: url(../images/calculator/L_bluegreen.gif);*/ 
	}
.outer_substrate_bronzeL {
	/* background-image: url(../images/calculator/L_bronze.gif);*/ 
	}
.outer_substrate_clearL {
	/* background-image: url(../images/calculator/L_clear.gif);*/ 
	}
.outer_substrate_darkblueL {
	/* background-image: url(../images/calculator/L_darkblue.gif);*/ 
	}
.outer_substrate_grayL {
	/* background-image: url(../images/calculator/L_gray.gif);*/ 
	}
.outer_substrate_greenL {
	/* background-image: url(../images/calculator/L_green.gif);*/ 
	}
.outer_substrate_noneL {
	/* background-image: url(../images/calculator/L_none.gif);*/ 
	}

  /* this is used as the style for the surface (R) of the outer pane of a double pane config.  
   Use the s_outer_substrate_[substrate color]R or d_outer_substrate_[substrate color]R to change the image color. */ 
#curImgOuterSubstrateR {
	position: absolute; 
	left: -60px; 
	top :0px; 
	width: 480px; 
	height: 360px; 
	z-index: 4;
	border: 0px none #000000; 
	}

#configImgOuterSubstrateR {
	position: absolute; 
	left: -24px; 
	top :0px; 
	width: 192px; 
	height: 144px; 
	z-index: 4;
	border: 0px none #000000; 
	}
  
.d_outer_substrate_blueR {
	/* background-image: url(../images/calculator/mid_blue.gif);*/ 
  visibility: visible;
	}
.d_outer_substrate_bluegreenR {
	/* background-image: url(../images/calculator/mid_bluegreen.gif);*/ 
  visibility: visible;
	}
.d_outer_substrate_bronzeR {
	/* background-image: url(../images/calculator/mid_bronze.gif);*/ 
  visibility: visible;
	}
.d_outer_substrate_clearR {
	/* background-image: url(../images/calculator/mid_clear.gif);*/ 
  visibility: visible;
	}
.d_outer_substrate_darkblueR {
	/* background-image: url(../images/calculator/mid_darkblue.gif);*/ 
  visibility: visible;
	}
.d_outer_substrate_grayR {
	/* background-image: url(../images/calculator/mid_gray.gif);*/ 
  visibility: visible;
	}
.d_outer_substrate_greenR {
	/* background-image: url(../images/calculator/mid_green.gif);*/ 
  visibility: visible;
	}
.d_outer_substrate_noneR {
	/* background-image: url(../images/calculator/mid_none.gif);*/ 
  visibility: visible;
	}

.s_outer_substrate_blueR {
	/* background-image: url(../images/calculator/mid_blue1.gif);*/ 
  visibility: visible;
	}
.s_outer_substrate_bluegreenR {
	/* background-image: url(../images/calculator/mid_bluegreen1.gif);*/ 
  visibility: visible;
	}
.s_outer_substrate_bronzeR {
	/* background-image: url(../images/calculator/mid_bronze1.gif);*/ 
  visibility: visible;
	}
.s_outer_substrate_clearR {
	/* background-image: url(../images/calculator/mid_clear1.gif);*/ 
  visibility: visible;
	}
.s_outer_substrate_darkblueR {
	/* background-image: url(../images/calculator/mid_darkblue1.gif);*/ 
  visibility: visible;
	}
.s_outer_substrate_grayR {
	/* background-image: url(../images/calculator/mid_gray1.gif);*/ 
  visibility: visible;
	}
.s_outer_substrate_greenR {
	/* background-image: url(../images/calculator/mid_green1.gif);*/ 
  visibility: visible;
	}
.s_outer_substrate_noneR {
	/* background-image: url(../images/calculator/mid_none1.gif);*/ 
  visibility: visible;
	}

/* this is used as the style for the outer pane coating.
   the outerCoating_[size] is used to change the location based on pane thickness.
 */
#curImgOuterCoating {
	position: absolute; 
	top: 0px; 
  left: 0px;
	width: 480px; 
	height: 360px; 
	z-index: 8; 
	background-repeat: no-repeat;
	border: 0px none #000000;  
	padding-top: 0px; 
	padding-left: 0px; 
	font: bold 11px verdana, Arial, Helvetica, sans-serif; 
  /*background-image: url(../images/calculator/outer_coating.gif); 
  background-color: transparent;
	color: #048f5b;  */
}

span.outerCoatingText {
  border: 0px dotted red;
  position: absolute;
  top: 120px;
  left: 140px;
  text-align: center;
  width: 80px;
  color: #1a4553;
  }

span.innerCoatingText {
  border: 0px dotted red;
  position: absolute;
  top: 120px;
  left: 140px;
  text-align: center;
  width: 80px;
  color: #1a4553;
  }

/*
#curImgOuterCoating  p {
  text-align: center;
  margin: 0 0 0 -285px;
  padding-top: 30px;
}

*/
  
/* this is used as the style for the inner pane coating. */
#curImgInnerCoating {
	position: absolute; 
	left: 0px; 
	top: 0px; 
	width: 480px; 
	height: 360px; 
	z-index: 100; 
	background-repeat: no-repeat; 
	border: 0px none #000000;
	padding-top: 0px; 
	padding-left: 0px; 
	font: bold 11px verdana, Arial, Helvetica, sans-serif; 
	color: #048f5b; 
}

/* this is used as the style for the air space between panes coating. */
#curImgAirSpace {
	position: absolute; 
	left: 0px; 
	top: 0px; 
	width: 116px; 
	height: 25px; 
	z-index: 6; 
	border: 0px solid #666; 
	text-align: center; 
	padding-top: 0px; 
	font: 11px Arial, Helvetica, sans-serif; 
	}

/* this is used as the style for the air space between panes coating. */
#configImgAirSpace {
	position: absolute; 
	left: 0px; 
	top: 0px; 
	width: 47px; 
	height: 10px; 
	z-index: 6; 
	border: 0px solid #666; 
	text-align: center; 
	padding-top: 0px; 
	font: 11px Arial, Helvetica, sans-serif; 
	}  
  
#curImgInnerSubstrate {
	position: absolute; 
	top: 0px; 
	width: 480px; 
	height: 360px; 
	border: 0px none #000000; 
  background-color: #ccc;
	}

.inner_1_8  {
	left: -60px;
	}
.inner_5_32 {
	left: -53px;
	}
.inner_3_16 {
	left: -45px;
	}
.inner_1_4 {
	left: -30px;
	}
.inner_5_16 {
	left: -15px;
	}
.inner_3_8 {
	left: 0px;
	}

#configImgInnerSubstrate {
	position: absolute; 
	top: 0px; 
	width: 192px; 
	height: 144px; 
	border: 0px dotted red; 
  background-color: #ccc;
	}

.config_inner_1_8  {
	left: -24px;
	}
.config_inner_5_32 {
	left: -21px;
	}
.config_inner_3_16 {
	left: -18px;
	}
.config_inner_1_4 {
	left: -12px;
	}
.config_inner_5_16 {
	left: -6px;
	}
.config_inner_3_8 {
	left: 0px;
	}  
  
/*
.on {
	visibility: visible;
	}
.off {
	visibility: hidden;
	}, #FirstPaneSubstrate, #FirstPaneCoating, #AirSpace, #SecondPaneThickness, #SecondPaneSubstrate, #SecondPaneCoating
*/