/* Vinyl Design
Author: Christina Reeser
Site design: Karen Chase/224 Design
Date Created: 10/25/2009
Copyright: Vinyl Design. All rights reserved. */

/* ---------->>> GLOBAL <<<-----------*/

* { margin: 0; padding: 0;}

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

body {
 background: #BFB29F url(bg.jpg) repeat-y;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 line-height: 17px;
}

h1, h2, h3, h4, h5, h6, pre, blockquote, label, ul, li, ol { 
	padding:0;
	margin:0; 
	}
li, dd { margin-left:5%; }

p { margin-bottom: 15px; }

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

/* ---------->>> DIVS <<<-----------*/

#topnav { 
 width: 800px;
 height: 23px;
 background: url(topnav.gif) no-repeat;
 margin: 0;
 margin-left: 145px;
 margin-bottom: 5px;
 padding: 0px;
}

#wrapper { 
 background: url(faux.gif) top left repeat-y;
 width: 800px;
 margin-left: 145px;
 padding: 0;
 
}

#header {
 background: #719028 url(header.jpg) no-repeat;
 width: 800px;
 height: 299px;
 margin: 0 auto;
}

#photo {
width: 600px;
height: 265px;
padding-top: 24px;
padding-left: 23px;
float: left;
}

#feature {
float: left;
width: 120px;
margin-left: 20px;
margin-top: 40px;
color: #fff;
}

#faux {
 background: url(vinyldesign_logo.gif) 70% 100% no-repeat;
 width: 760px;
 margin: 0 auto;
 padding: 0 24px;
 padding-bottom: 50px;
 color: #010101; 
 /*Min-Height Hack*/
 min-height:210px;
 height: auto !important;
 height: 210px;
}

#rightcol {
 display: inline;
 float: right;
 width: 140px;
 border-top: 7px solid #fff;
 margin-right: 10px; 

}

#subnav {
 padding: 10px;
}

#content {
 display: inline;
 width: 510px;
 padding: 0 20px;
 float: left; 
 margin-top: 20px;

}

#footer {
 background: #719028 url(footer.jpg) no-repeat;
 width: 800px;
 height: 31px;
 margin: 0 auto;
 padding: 0;
}

/* ---------->>> HEADER ITEMS <<<-----------*/
	
h1 { }

	#logo h1 {
 	background: url(vinyldesign_logo.gif) top left no-repeat;
 	text-indent:-9000px;
 	width:120px; 
 	height:72px;
 	float: right;
 	margin-right: 30px;
 	margin-top: 30px;
	}
	
	#content h1 {
	color: #B50937;
	font-size: 13px; 
	font-weight: normal;
	margin-bottom: 20px;
	}
	
	#content h2{
	color: #669933;
	font-size: 12px; 
	font-weight: normal;
	}
	

h2 { }

hr { border: 1px solid #CAC0AB; margin: 20px 0;}


p { }
	p#to_top {
	margin: 0; padding: 0;
	background: url(top_icon.gif) center left no-repeat;
	font-size: 10px;
	text-align: left;
	padding-left: 15px;
	margin-bottom: 20px;
	}

ul { }	
	#content ul {
	margin-bottom: 15px;
	}


a { }

	#topnav a {
	display: block;
	float: left;
	width: 244px;
	color: #fff;
	padding: 2px 3px;
	font-size: 12px;
	}
	#topnav a:hover {
 	text-decoration: none;
	}	
	
	#subnav a { color: #fff; }
	
img { }

	img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto 
    }
	

/* ---------->>> Global NAVIGATION <<<-----------*/

#menu {
 height: 25px;
 width: 600px;
 padding: 0px;
 background-color: #B9AC97;
 line-height: auto;
}
  
 #menu ul {
 padding: 0;
 margin: 0;
 }

/* never apply padding to the li, as offsetWidth will differ in IE!,
if you need padding add it to a child element */
#menu ul li {
	float: left;
	list-style: none;
	margin: 0; padding: 0;
}

#menu ul li a, #menu a.last {
	display: block;
	background: url(divider.gif) bottom right no-repeat;
	font-size: 11px;
	color: #fff;
	padding: 4px 10px;
	position: relative;
	overflow: hidden; /* this is sort of a trick to prevent firefox from extending the dotted shape when you click a link */
}

#menu a.last {
	background: url(divider.gif) bottom left no-repeat;
	text-align: right;
	padding-left: 20px;
	float: right;
}


#menu ul li a:hover, #menu a.last:hover {
 color: #B50937;
 text-decoration: none;
}

#home .home, #about .about, #windows .windows, #sunrooms .sunrooms, #energy .energy, #resources .resources, #contact .contact {
 color: #717174 !important;
}

#subnav li {
	list-style-type: none;
	padding-left: 12px;
	background: url(bullet.gif) top left no-repeat; 
}

#subnav li:hover {
	background: url(bullet_on.gif) top left no-repeat; 
}

#subnav li li {
	list-style-type: none;
	background: url(dash.gif) top left no-repeat; 
}

#subnav li li:hover, #subnav li li:hover, #subnav li li.on  {
	list-style-type: none;
	background: url(dash_on.gif) top left no-repeat; 
}

#subnav li.on {
background: url(bullet_on.gif) top left no-repeat; 
}

#subnav li.on a {
color: #717174;
}

#subnav li.on li a {
color: #fff !important;
}

#subnav li.on li a:hover, #subnav li li.on a {
color: #717174 !important;
}

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

/* ---------->>> TABLE Items <<<-----------*/

table.data {
	border-collapse: collapse;
	background-color: #DAD1C4;
	width: 100%;
	margin-bottom: 40px;
	color: #C69635;
}

table.data th {
	background-color: #AEA393;
	color: #000;
	text-align: left;
	padding: 5px;
	font: bold 10px/22px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 8px 12px 4px 12px;
	/* background: #CAE8EA url(bg_header.jpg) no-repeat; */
	vertical-align:middle;
}
table.data tr {
vertical-align: top;
}

table.data td  {
	padding: 5px;
	border-top: 1px solid #fff;
	font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	padding: 6px 12px 6px 12px;
	color: #333;
}

table.centered td { text-align: center; }
td.tabletitle { text-align: left !important; font-weight: bold !important; background-color: #AEA393;}
td.tabletitle2 { text-align: left !important; font-weight: bold !important; background-color: #B9AC97;}

.alt { background-color: #EFE9E1;}

/* ---------->>> MISC <<<-----------*/

a[href $='.pdf'] { 
   padding-left: 18px;
   background: transparent url(icon_pdf.gif) no-repeat top left;
}

.question { font-weight: bold; margin-bottom: 0 !important; margin-left: 17px;}
.question2 { font-weight: bold;}
.answer { color: #666 !important; margin-bottom: 10px; margin-left: 35px;}
.letter-a { font-weight: bold; margin-left: -17px; }
.letter-q { font-weight: bold; margin-left: -17px;}

dt { font-weight: bold;}
dl { margin-bottom: 10px;}

.clear { clear: both; background: none; }

.imgleft { padding-right: 20px; float: left; }
.imgright { padding-left: 20px; float: right; }