/* EXPERT WINDOWS STYLES - 2007/2008 */

/* COLOUR LEGEND
RED - #BA0000
ORANGE - #FF7921
LIGHTEST BLUE - #334477
MID-BLUE - #223355
DARK BLUE - #332233
*/


html {
height:100%;
}

body {
background:#fff url(images/body_bg.gif) repeat-x top; 
height:100%;
}

#wrap {
position:relative;
margin:auto;
width:780px;
min-height:100%;
background:white url(images/inner-wrap_bg.gif) repeat-y;
}

* html #wrap {
height:100%;
}

* {
margin:0;
padding:0;
border:0;
list-style:none;
font-family:verdana,arial,courier,sans-serif;
}

#header {
width:780px;
height:113px;
position:relative;
}

#header li {
float:left;
}

.hide {
display:none;
}

/* MAINMENU STYLES */
#mainmenu {
width:780px;
height:31px;
position:absolute;
margin-top:0;
z-index:600;
}

*html #mainmenu {
margin-top:-3px;
}

#mainmenu li {
float:left;
height:31px;
}

#mainmenu a {
display:block;
height:31px;
}

#mainmenu li#endL { background:transparent url(images/menu_endL.gif); width:75px; }

#mainmenu li#home a { background-image:url(images/home_off.gif); }
#mainmenu li#home a:hover { background:transparent; }
#mainmenu li#home { background-image:url(images/home_roll.gif); width:49px; }

/*
#mainmenu li#about a { background-image:url(images/about_off.gif); }
#mainmenu li#about a:hover { background:transparent; }
#mainmenu li#about { background-image:url(images/about_roll.gif); width:51px; }
*/
#mainmenu li#faq a { background-image:url(images/faq_off.gif); }
#mainmenu li#faq a:hover { background:transparent; }
#mainmenu li#faq { background-image:url(images/faq_roll.gif); width:55px; }

#mainmenu li#windows a { background-image:url(images/windows_off.gif); }
#mainmenu li#windows a:hover { background:transparent; }
#mainmenu li#windows { background-image:url(images/windows_roll.gif); width:71px; }

#mainmenu li#doors a { background-image:url(images/doors_off.gif); }
#mainmenu li#doors a:hover { background:transparent; }
#mainmenu li#doors { background-image:url(images/doors_roll.gif); width:56px; }

#mainmenu li#gallery a { background-image:url(images/gallery_off.gif); }
#mainmenu li#gallery a:hover { background:transparent; }
#mainmenu li#gallery { background-image:url(images/gallery_roll.gif); width:60px; }

#mainmenu li#guarantee a { background-image:url(images/guarantee_off.gif); }
#mainmenu li#guarantee a:hover { background:transparent; }
#mainmenu li#guarantee { background-image:url(images/guarantee_roll.gif); width:101px; }

#mainmenu li#energyStar a { background-image:url(images/energystar_off.gif); }
#mainmenu li#energyStar a:hover { background:transparent; }
#mainmenu li#energyStar { background-image:url(images/energystar_roll.gif); width:85px; }

#mainmenu li#contact a { background-image:url(images/contact_off.gif); }
#mainmenu li#contact a:hover { background:transparent; }
#mainmenu li#contact { background-image:url(images/contact_roll.gif); width:83px; }

#mainmenu li#login a { background-image:url(images/login_off.gif); }
#mainmenu li#login a:hover { background:transparent; }
#mainmenu li#login { background-image:url(images/login_roll.gif); width:52px; }

#mainmenu li#endR { background:transparent url(images/menu_end.gif); width:93px; }

/* DROP DOWN MENU STYLES */

#mainmenu li li {
background:transparent none;
float:none;
height:22px;
}

#mainmenu li li a {
text-decoration:none;
}

#mainmenu li#windows li a {
background:transparent none;
color:#BA0000;
padding:5px;
text-align: left;
font-size:11px;
height:auto;
}

#mainmenu li#windows li a:hover {
color:#FF7921;
background-color:#6C6C6C;
}

#mainmenu li#doors li a {
background:transparent none;
color:#BA0000;
padding:4px;
text-align: left;
font-size:11px;
height:auto;
}

#mainmenu li#doors li a:hover {
color:#FF7921;
background-color:#6C6C6C;
}

#mainmenu li#faq li a {
background:transparent none;
color:#BA0000;
padding:4px;
text-align: left;
font-size:11px;
height:auto;
}

#mainmenu li#faq li a:hover {
color:#FF7921;
background-color:#6C6C6C;
}

#mainmenu li#gallery li a {
background:transparent none;
color:#BA0000;
padding:4px;
text-align: left;
font-size:11px;
height:auto;
}

#mainmenu li#gallery li a:hover {
color:#FF7921;
background-color:#6C6C6C;
}

li ul {
display: none;
position: absolute; 
margin-top:-1px;
background:#eee;
border:1px solid;
border-color:#6C6C6C;
border-top:0;
z-index:600;
width:auto;
}

* html li ul {
width:150px;
}

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul { 
display: block;
}
/* END DROP DOWN STYLES */

#inner-wrap {
width:780px;
margin:auto;
min-height:100%;
height:auto;
padding-bottom:55px;
background:none transparent;
}

* html #inner-wrap {
height:100%;
}

#inner-wrap:after {
content:" ";
display:block;
clear:both;
}

.clear {
clear:both;
margin-top:0;
height:1%;
width:100%;
overflow:hidden;
} 

#footer {
min-height:45px;
background:none transparent;
position:absolute;
bottom:0;
text-align:center;
margin:auto;
width:100%;
padding-top:10px;
}

* html #footer {
height:45px;
}

#footer p {
margin:0 20px;
color:#FF7921;
font-size:10px;
border-top:1px dotted #ddd;
line-height:15px;
}

/* FONT FORMATTING */

h1 {
width:745px;
padding-left:35px;
height:41px;
padding-top:32px;
background:transparent url(images/h1_bg.gif) no-repeat;
position:relative;
margin-top:30px;
font-size:15px;
font-weight:bold;
color:#334477;
z-index:50;
}

* html h1 {
margin-top:27px;
}

h2 {
font-size:13px;
color:#BA0000;
padding:2px;
margin:5px 40px;
}

p {
color:#444;
font-size:12px;
margin:15px 60px;
line-height:19px;
}

a {
color:#BA0000;
text-decoration:underline;
}

a:hover {
color:#FF7921;
text-decoration:none;
}

.mainlist {
margin:10px 80px;
}

.mainlist li {
font-size:11px;
color:#223355;
line-height:16px;
padding:2px;
margin:5px;
background:white url(images/mainlist_arrow.gif) no-repeat left;
padding-left:14px;
}


.knobList {
margin:10px 55px;
}
.knobList li {
float:left;
font-size:11px;
color:#555;
text-align:center;
margin:5px 15px;
}

#errorlist {
margin:10px 100px;
}

#errorlist li {
height:25px;
margin:2px;
padding-left:30px;
padding-top:5px;
color:#BA0000;
background:white url(images/errorlist.gif) no-repeat top left;
font-size:12px;
}

#rightHomeBox {
float:right;
margin:5px 30px 5px 10px;
border-left:1px solid #ddd;
padding:4px;
}

#rightHomeBox h2 {
margin:5px;
}

#rightHomeBox ul {
margin:10px;
}

#rightHomeBox ul li {
font-size:11px;
color:#223355;
line-height:16px;
padding:2px;
margin:5px;
background:white url(images/mainlist_arrow.gif) no-repeat left;
padding-left:14px;
}

p.factBox {
float:right;
width:160px;
margin:0 40px;
background-color:#f5f5f5;
padding:20px;
font-size:11px;
border:1px solid;
border-color:#ddd #eee #eee #ddd;
}

* html p.factBox {
margin:0 20px;
}

.imgRight {
float:right;
margin:0 30px;
padding:1px;
border:1px solid #ddd;
font-size:11px;
}

#galleryList {
margin:5px 10px;
width:760px;
margin:auto;
}

#galleryList li {
width:145px;
padding-left:5px;
height:145px;
padding-top:5px;
margin:5px 20px;
background:white url(images/gallery_bg.gif) no-repeat;
float:left;
}
#galleryList img {
vertical-align:bottom;
}

/* TOOLTIP STYLE */
#dhtmltooltip{
position: absolute;
width: 300px;
border:1px solid;
font-size:11px;
line-height:15px;
border-color:#e5e5e5 #ccc #ccc #e5e5e5;
padding: 5px;
background-color: #f5f5f5;
color:#333;
visibility: hidden;
z-index: 100;
}

.cssform {
position:relative;
margin:10px;
float:right;
margin-right:50px;
}

.cssform p {
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dotted #ddd;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
text-align:right;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
padding:2px;
border:1px solid;
border-color:#e5e5e5 #bbb #bbb #e5e5e5;
}

.cssform select {
color:#333;
font-size:11px;
width:180px;
padding:2px;
border:1px solid;
border-color:#e5e5e5 #bbb #bbb #e5e5e5;
}

.cssform option {
color:#333;
font-size:11px;
padding:2px;
}

.cssform textarea{
width: 250px;
height: 150px;
border:1px solid;
border-color:#e5e5e5 #bbb #bbb #e5e5e5;
font-size:11px;
color:#333;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

.submitbutton {
color:white;
background:#BA0000 url(images/submit_bg.gif) repeat-x;
font-weight:bold;
padding:2px;
float:right;
border:1px solid;
border-color:#e5e5e5 #bbb #bbb #e5e5e5;
}

/* BEGIN ACCORDIAN STYLES FOR DROP-DOWN FORM */
#basic-accordian{
	padding:5px;
	z-index:2;
	width:240px;
	text-align:center;
}

.accordion_headings{
	padding:5px;
	background:transparent none;
	color:#BA0000;
	text-decoration:underline;
	cursor:pointer;
}

.accordion_headings:hover{
	background:none transparent;
	color:#FF7921;
}

.accordion_child {
	padding:0;
	background:#EEE url(images/accordian_bg.gif) repeat-x;
	border:1px solid #ddd;
}

.accordion_child form {
width:220px;
padding:10px;
}

.accordion_child p {
color:#444;
margin:4px 10px 4px 25px;
font-size:10px;
text-align:left;
}

.accordion_child input {
border:1px solid #ddd;
padding:2px;
width:160px;
}

.accordion_child textarea {
padding:2px;
border:1px solid #ddd;
width:160px;
font-size:10px;
}

.accord_submit {
padding:4px;
background:#BA0000 url(images/submit_bg.gif) repeat-x;
height:20px;
cursor:pointer;
width:auto;
color:white;
font-weight:bold;
border:1px solid #ddd;
}


.header_highlight{
	background:none transparent;
}

/* END ACCORDIAN STYLES */

/* BEGIN LIGHTBOX STYLES */

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 1000;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(Images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;color:#BA0000;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 950;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

#credList {
margin:5px;
width:600px;
height:150px;
margin:auto;
border:1px solid #ddd;
}

#credList li {
width:150px;
float:left;
}