/* METRO GLASSTECH */
/* Phosphor Essence Ltd */


/* BROWSER WRANGLING */

#footernav{display:none;}

/* mac hide\*/
html, body {
	/*height: 100%;*/
}
/* end hide */

html, body, #container {
/*	scrollbar-face-color: #E2DAC5;
	scrollbar-base-color: #B39D66;
	scrollbar-highlight-color: #E2E2E2;
	scrollbar-shadow-color: #8F7B47;
	scrollbar-3dlight-color: #CCBE99;
	scrollbar-arrow-color: #B39D66;
	scrollbar-track-color: #E2DAC5; */
}

/*************************************************************************** 
* The "height" above is a hack for IE5+/Win. Below it's adjusted using 
* the child selector to hide from IE5+/Win. 
* Without this, Moz1.0 adds a vertical scrollbar, & Firefox1.0/Opera7.54 
* cover everything with the footer when the viewport gets too small. 
***************************************************************************/ 

html,body {
	padding: 0px;
	margin: 0px;
}

html>body #container {
/*	height: auto; */
}
body {
	text-align: center;
	background-position: right top;
	background-repeat: no-repeat;
	background-color: #eeeeee; /*#020F3C*/
/*	overflow: auto;*/
/*	min-width: 760px;  for mozilla */
}

.clear{clear:both;}

div,p {
	margin-top: 0px;
} /*clear top margin for mozilla*/



/* PAGE STRUCTURE DIVS */


#wrapper {
	margin: 0px;
	padding: 0px;
	border: none;
	margin-left: auto;
	margin-right: auto; /*keeps container in center of page*/
	width: 840px;
	text-align: left;
/*	background: transparent url(../images/bkgd_wrap.gif) top left repeat;*/
}

#container {
	width: 800px;
	height: 100%;
/*	min-height: 768px;*/
	color: #000000;
/*	background-color: #FFFFFF;*/
	padding: 0px;
	margin: 0px;
	margin-top: 40px;
	margin-left: 20px;
	text-align: left;
	position: relative;
/*	border: solid 1px orange;*/
}

#logo-print {
	display: none;
}




/**** NAV AREA STYLES ****/
#header{background:url(/userfiles/images/header-bkgd.jpg) bottom left repeat-x; height:109px;  position:relative; }
.logo{background: transparent; height:77px; top:20px; left:20px; position:absolute; width:272px; }
.logo a{display:block; height:77px; text-indent:-9999px; width:272px; }


#top {
/*	height: 145px;*/
	margin: 0px;
	padding: 0px;
/*	border: dashed 1px aqua;*/
}

#logo-top {
	width: 800px;
	height: 32px;
	margin: 0px;
	padding: 0px;
	background-color: #020F3C; /*1F4887*/
	border-bottom: solid 1px #FFFFFF;
	float: left;
	z-index: 200;
	position: relative;
/*	border: dashed 1px turquoise;*/
}

#topnav {
	width: 505px;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	float: right;
	position: relative;
	z-index: 300;
/*	border: dashed 1px pink;*/
}
#home-sidenav {
	overflow:hidden;
	width: 151px;
	height: 455px;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	background-image: url(../images/home/sidenav_bkgd_gradient.jpg);
	background-repeat: no-repeat;
	background-color: #0B6184;
	float: left;
	position: relative;
	
/*	border: dashed 1px pink;*/
}

#home-img {
	width: 646px;
	height: 455px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative;
	border-left: solid 1px #FFF;
/*	border-left: solid 1px #FFF;*/
/*	border: dashed 1px lime;*/
}

#nav {
	width: 800px;
	float: left;
/*	border: solid 1px green;*/
}

#nav-position {
	clear: left; /* This fixes the totally weird "phantom text" problem in IE */
}

#subnav {
/*	width: 370px;
	height: 20px;*/
	margin: 0px;
	padding: 0px;
}
#footer {
    display: none;
}
#footernav {
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	margin-bottom: 10px;
	float: right;
	position: relative;
}


/**** FLOAT DIV's - for popup boxes eg. Quick Reference, Search Tips, Gallery ****/

#content-float {
/*	scrollbar-track-color: #EEEEEE; 
	scrollbar-arrow-color: #FFFFFF;
	scrollbar-shadow-color: #666666;
	scrollbar-darkshadow-color: #333333;
	scrollbar-highlight-color: #999999;
	scrollbar-3dlight-color: #CCBE99;
	scrollbar-face-color: #CCCCCC;*/
}
#float-sym, #float-nav, #float-per, #floatSearch {
	width: 300px;
	height: 540px;
	top: 0px; /* needs this so it doesn't hide it underneath the content and cause the page to scroll heaps */
	left: -5000px;

	margin: 0px;
	padding: 0px;
	margin-bottom: 6px;

	position: absolute;
	z-index: 500;

/*	border: solid 1px green;*/
}
.float-gal-content a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #000000;
}
.gall-title p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	color: #000000;
	text-align: left;
	margin: 0px;
	padding: 2px 0px 4px 15px;
	height: 20px;
	background-color: #FFF;
}
.gall-title {
	width: 450px;
}

#content-float-top {
	margin: 0px;
	padding: 0px;
	padding: 10px 0px 0px 15px;
	background-color: #FFFFFF;
	text-align: left;
/*	border: dashed 1px pink;*/
}
#content-float {
/*	width: 260px;*/
	height: 380px;
	margin: 0px;
	padding: 0px;
	padding: 5px 10px 20px 15px;
	background-color: #FFFFFF;
	overflow-y: scroll;
	text-align: left;
/*	border: dashed 1px green;*/
}
#content-float-btm {
	height: 20px;
	margin: 0px;
	padding: 0px;
	padding: 12px 0px 0px 15px;
	background-color: #EEEEEE;
	text-align: left;
/*	border: dashed 1px yellow;*/
}
#float-per #content-float {
	height: 359px; /*This needs to be 21px less than the other two Quick Reference "popups" because the Performance Data title image takes up 2 lines*/
	margin: 0px;
	padding: 0px;
	padding: 5px 10px 20px 15px;
	background-color: #FFFFFF;
 	overflow-y: scroll;
	text-align: left;
/*	border: dashed 1px green;*/
}



/* CONTENT DIV's */

#content {
	width: 800px;
/*	min-height: 100%;
	height: auto;*/
	margin: 0px;
	padding: 0px;
	padding-top: 30px;
	padding-bottom: 0px;
	margin-bottom: 0px;
	text-align: left;
	background-image: url(images/cover_bkgd.jpg);
	background-position: top;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	float: left; /*this was commented out, but was causing the content area to show up the top of the page in Firefoxy ?!?!*/
	position: relative;
    z-index:20;
/*	border: solid 1px lime;*/
}

/**** 2-COLUMN LAYOUT - standard ****/

#cont-colfull-top, #cont-colfull-mid, #cont-colfull-btm {
	width: 740px;
	left: 30px;
	margin: 0px;
	padding: 0px;
	margin-bottom: 20px;
	float: left;
	position: relative; /*ie needs this to show float */
}
#cont-colleft, #cont-colleft-btm {
	width: 340px;
	left: 30px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative; /*ie needs this to show float */
/*	border: solid 1px purple;*/
}

#cont-colright-position, #cont-colright-btm-position {
	width: 365px;
/*	height: 1150px;*/
	margin: 0 0 0 60px;
/*	margin: 0px;*/
	padding: 0px;
	border-left: solid 1px #BBBBBB;
	float: left; /*
	position: relative; /*ie needs this to show float */
/*	border: solid 1px red;*/
}

#cont-colright, #cont-colright-btm {
	margin-left: 30px;
}

#content-copyright { /*COPYRIGHT*/
	width: 300px;
	height: auto;
	margin: 0px;
	padding: 0px;
	padding-top: 60px;
}


/**** 3-COLUMN LAYOUT - standard ****/

#cont-colleft-1, #cont-colleft-2, #cont-colleft-3 {
	width: 234px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative; /*ie needs this to show float */
/*	border: solid 1px purple;*/
}
#cont-colmid-1, #cont-colmid-2, #cont-colmid-3 {
	width: 234px;
	left: 19px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative; /*ie needs this to show float */
/*	border: solid 1px red;*/
}
#cont-colright-1, #cont-colright-2, #cont-colright-3 {
	width: 234px;
	left: 38px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative; /*ie needs this to show float */
/*	border: solid 1px orange;*/
}

#cont-colleft-wide-1, #cont-colleft-wide-2, #cont-colleft-wide-3 {
	width: 430px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative; /*ie needs this to show float */
/*	border: solid 1px purple;*/
}
#cont-colright-nrw-1, #cont-colright-nrw-2, #cont-colright-nrw-3 {
	width: 280px;
	left: 30px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative; /*ie needs this to show float */
/*	border: solid 1px orange;*/
}

#cont-colleft-nrw-1, #cont-colleft-nrw-2, #cont-colleft-nrw-3 {
	width: 290px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative; /*ie needs this to show float */
/*	border: solid 1px purple;*/
}
#cont-colright-wide-1, #cont-colright-wide-2, #cont-colright-wide-3 {
	width: 430px;
	left: 20px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative; /*ie needs this to show float */
/*	border: solid 1px orange;*/
}

#cont-colright-wide-3 #leftcol-1 {
	width: 210px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative;
}
#cont-colright-wide-3 #rightcol-1 {
	width: 200px;
	left: 11px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative;
}



/***** CONT-RIGHTCOL split into two columns - eg. About Us & Locations page *****/


#cont-colright-leftcol-1 {
	width: 168px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative; /*ie needs this to show float */
/*	border: solid 1px purple;*/
}

#cont-colright-rightcol-2-position {
	width: 177px;
/*	height: 1150px;*/
	left: 10px;
	margin: 0px;
	padding: 0px;
	border-left: solid 1px #BBBBBB;
	float: left;
	position: relative; /*ie needs this to show float */
/*	border: solid 1px red;*/
}

#cont-colright-rightcol-2 {
	margin-left: 15px;
}



/***** INDEX COLUMNS *****/

#cont-indexfull-top {
	width: 800px;
	height: 420px;
	left: 0px;
/*	top: 30px;*/
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative; /*ie needs this to show float */
}



/**** FOOTER DIV's ****/

#page-scroll {
	width: 800px;
/*	height: 80px;*/
	margin: 0px;
	padding: 0px;
	margin-top: 50px;
	padding-bottom: 10px;
/*	background-color: #FFFFFF;*/
	float: left;
	position: relative;
}

#footer {
	width: 800px;
	/*height: 950px; RUA */
	height: 35px;
	margin:0;
	padding: 0px;
	text-align: center;
	background-image: url(../images/bkgd_fern_footer.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	background-color: #020F3C;
	border-top: solid 1px #CCCCCC;
	clear:left; 
	/*float: left;*/
	/*position: relative;*/
/*	border: solid 1px purple;*/
}





/**** UNUSED DIV's ****/

/*

#logo-banner {
	left: 640px;
	top: 2px;
	background-color: #B39D66;
	position: absolute;
	z-index: 200;
}


#tnbox {
	width: 169px;
	margin: 0px;
	padding: 0px;
	left: 425px;
	position: absolute;
	z-index: 400;
}

#pullout {
	width: 760px;
	padding-left: 50px;
	padding-top: 170px;
	float: left;
	position: relative;
}

#popup {
	background-color: #b49e66;
}

#tagline {
	width: 300px;
	left: 424px;
	top: 188px;
	position: absolute;
}

#flash-audio {
	bottom: 6px;
	right: 10px;
	position: absolute;
}

#pre-hdr {
	color: #b49e66;
	font-size: 1.05em;
	font-weight: 460;
	margin-top: 0px;
	margin-bottom: 10px;
	line-height: 1.8em;
	position: relative;
	left: 200px;
	top: 5px;
}

#copyright {
	float: left;
	position: relative;
}

#topofpage-link {
	float: right;
	position: relative;
}
*/

#download {
	margin: 0px;
	padding: 10px 10px 5px 20px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 0.7em;
	background-color: #FFFAE3;
	border: solid 2px #999;
}
#download a {
	color: #000;
	padding-right: 0px;
	padding-bottom: 0px;
}
#download a:hover {
	color:#BF0026;
}
	
#download em {font-size: 0.9em;
}
.white {
	color: #FFFFFF;
}
.gallery_thumbnails p {
	height: 80px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	color: #FFFFFF;
}
.gallery_thumbnails img {
	margin-right: 10px;
}

#scroll-overflow {
	height: 300px;
	overflow: auto;

/*	"margin-bottom" variable is defined in the page itself e.g. gall_default, loca_default, abou_default */
}

#float-gal,#float-gal2 {
/*	width: 600px;
	height: 400px;*/
	text-align: left;
	top: 0px;
	left: 10px;
	margin: 0px;
	padding: 0px;
	margin-bottom: 6px;
	float: none;
	position: absolute;
}
#products_table {
	text-transform: uppercase;
	font-size: 0.7em;
	line-height: 120%;
}
#products_table p {
	margin: 0px;
	padding: 0px;
	margin-bottom: 2px;
}
#products_table td {
	padding-bottom: 6px;
}

/***********************
RETROFIT SECTION
***********************/
#retrofit{width:798px !important; margin:-30px 0 -21px -30px !important; border:1px solid #fff; float:left; color:#fff;}
#retrofit p, #retrofit li {color:#fff; font-size:.9em; line-height:130%; margin:7px 0 10px 0;}
#retrofit a{color:#FFF200 !important;}
#retrofit a:hover{color:#00AFCA !important;}

#retrofit .pgnav{background:url(../images/retrofit/bkgd_trans.png) left -2px repeat; color:#fff; font-size:0.75em; font-weight:bold; float:right; padding:9px 5px 9px 12px; position:relative; width:250px;}
#retrofit .pgnav ul{list-style:none; margin:0; padding:0;}
#retrofit .pgnav li{margin:0; padding:0 0 4px 0;}
#retrofit .pgnav a{color:#ddd !important; background:url(../images/retrofit/bullet_arw.gif) left 3px no-repeat; display:block; padding-left:18px;}
#retrofit .pgnav a:hover{color:#fff !important; background: url(../images/retrofit/bullet_arw_f2.gif) left 3px no-repeat;}

#retrofit img{border:solid #fff; border-width:0 0 1px 0; margin:-73px 0 0 0; width:798px;}
#retrofit .columns{width:798px; background:url(../images/retrofit/bkgd_grad.jpg) #002d45 repeat-x; float:left;}
#retrofit .columns li{margin:7px 0 0 0 !important; padding:0 !important;}
#retrofit .left{border:solid #fff; border-width:0 1px 0 0; float:left; margin:0; padding:6px 20px 20px 20px; width:359px;}
#retrofit .right{float:left; margin:0; width:358px; padding:6px 20px 16px 20px;}
#retrofit .retro-button a{background:url(../images/retrofit/button-lg.png) no-repeat; color:#fff; float:left; font-size:.75em !important; font-size:1em; font-weight:bold; line-height:130%; margin:15px 0 0 0; height:34px; padding:8px 0 8px 0; text-align:center; text-transform:uppercase; width:200px;}

#retrofit .columns-diagram {border:solid #fff; border-width:1px 0 0 0; background:url(../images/retrofit/bkgd_grad.jpg) #002d45 repeat-x; float:left; width:798px;}
#retrofit .columns-diagram img{border:none; margin:/*set in page*/; text-align:center !important; width:auto;}
#retrofit .columns-diagram p{font-size:0.8em;}
#retrofit .columns-diagram .left{border:none; float:left; margin:0; padding:6px 16px 16px 20px; width:359px;}
#retrofit .columns-diagram .right{border:none; float:left; margin:0; width:358px; padding:6px 16px 16px 20px;}

#retrofit .second-image{margin:0 !important;}
#retrofit .second-image img{border:solid #fff; border-width:1px 0 0 0; margin:0;}

#retrofit h1{background-color:#e20a17; border:solid #fff; border-width:0 1px 1px 0; color:#fff; float:left; font-size:1em; font-style:italic; font-weight:normal; line-height:140%; margin:-1px 0 0 0; padding:10px 20px 10px 10px; position:relative;}
#retrofit h2{color:#fff; font-size:110%; line-height:120%; margin:0;}
#retrofit h3{color:#fff; font-size:95%; font-weight:bold; line-height:120%; margin:14px 0 0 0;}

.retro-front{}
.retro-front .left{float:left; height:355px; margin:0; padding:0; display:inline; background:#E20A17;}
.retro-front .right{float:left; margin:0; padding:0; display:inline;}
.retro-front .right img{border:solid #fff; border-width:0 1px 0 0;}
.retro-front .next-page{background:url(../images/retrofit/button.gif); float:left; font-size:1em; text-transform:uppercase; font-weight:normal; height:168px; width:354px !important; margin:0; border:solid #fff; border-width:0 1px 0 0;}
.retro-front .next-page a{float:left; font-size:.9em; margin:110px 0 0 115px; text-align:center; padding:0;}
.retro-front .next-page a:hover{color:#fff !important; text-decoration:underline;}


.textArea{background:#020F3C; border-right:1px solid #FFF; float:left; height:205px; width:354px;}
.textArea p{color:#FFF; font-size:12px; margin:10px;}


.invalidSection{width:531px; height:411px; position:absolute; z-index:50; top:130px; left:100px; background:url(../images/sticker_overlay.png) top left no-repeat;}