html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, form, formfield {  
	margin: 0; 
	padding: 0; 
	border: 0; 
}

body {
	font-size: 90.01%;/* fix for IE scaling error at small font sizes*/
	font-family:  Arial, "Trebuchet MS",Helvetica, sans-serif;
	text-align: center;/* centers the wrapper in IE 5.x*/
	background:#FFFFFF url(../img/bg_top.gif) repeat-x scroll left top;
}

#wrapper {
	text-align: left;
	position: relative;/*set for the positioning of the nav*/
	background:#FFFFFF url(../img/bg_top.gif) repeat-x scroll left top;	
	color: inherit;
	border-top: none;
	margin: 0 auto;
	width: 960px;
	padding: 0px;
	height: 100%;
}
#banner {
	float: left;
  height: 245px;
}

#banner h1,#banner h1 a,#banner h1 a:hover {
  background:transparent none repeat scroll 0 0;
  color:#3D6683;
  font-size:32px;
  text-decoration:none;
  margin:0;
  padding:0;
}

#banner h2,#banner h2 a,#banner h2 a:hover {
  background:transparent none repeat scroll 0 0;
  color:#444;
  font-size:14px;
  line-height:1.4em;
  margin-top:10px; 
  text-decoration:none;
  width:300px;
  padding:0;
}
#banner #bannerContent {
  padding:10px;
}

#banner p {
  color:#FFF;
  display:block;
  margin-top:5px;
  width:330px;
}
#outercontent {
	margin-left: 1px;
}
#header {
	color: #5c0878;	  
	font-weight: bold;
	height: 100px;
	max-width: 960px;
	min-width: 500px;
	padding: 0 0 0 36px;
}
#header p {
	font-size: 110%;
}
#header ul {
	font-size: 92%;
	line-height: 1.5em;
	width: 20em;
}
#header li {
	list-style: none;
}
#content {
	font-size: 95%;
	padding: 0 0 20px 36px;
	width: 900px;
	clear: both;
}
* html #content {
  height: 580px;/*fix for ie content height*/
}

h1 {
	font: bold 1.4em Arial, Times, serif;
	margin: 20px 0 12px 0;
	color: #909;
	background-color: inherit;
}
#content h2 {
	font-size: 120%;
	color: green;
	background-color: inherit;
}

#content h3 {
	font-size: 100%;
	padding: 5px;
	color: #fff;
	margin-top: 10px;
	background-color: #302766;
}

#content h4 {
	font-size: 105%;
	color: #993333;	
	margin-left: 5px;
	background-color: inherit;
}	

#content p {
	margin-top: 10px;
	line-height: 145%;	
	color: #666;
}
#content a { 
	color: #363;
}
#content strong {
	color: purple;
}
#content ul {
	padding-left: 50px;
	margin-top: 10px;
	margin-bottom: 15px;
	line-height: 150%;
	color: #444;
}
#content ol {
	padding-left: 50px;
	margin-top: 10px;
	margin-bottom: 15px;
}
#content ol li {
	margin-top: 15px;
}
#content img.left {	
	border: 1px #222 solid;
	float: left;
	margin: 5px 10px 5px 0;
	padding: 4px;
}
#content img.right {	
	border: 1px #222 solid;
	float: right;
	margin: 5px 0 5px 10px;
	padding: 4px;
}
#content img.left-noborder {	
	float: left;
	margin: 0 10px 5px 0;
	padding: 4px;
}
#content img.right-noborder {	
	float: right;
	margin: 5px 0 5px 10px;
	padding: 4px;
}

#content dl {
	margin: 5px;
	width: 100%;
}
#content dl dt {
	float: left;
	font-weight: bold;
	line-height: 0.8em;
	margin: 0;
	padding: 0.3em 0.5em 0 0;
	text-align: right;
	width: 8em;
}
#content dl dd {
	line-height: 1.2em;
	margin: 0;
	padding-top: 0.1em;
}
#content dl dt.postad {
	padding-top: 0.5em;
	display: table-cell;
	height: 6em!important;
	width: 8em;
}
#content dl dd.postad {
	padding-top: 0.3em;
	margin: 0;
}
#content span.email span {
  font: 12px Arial, "Trebuchet MS",Helvetica, sans-serif;
	display: none;
}

div#layout {display: table;}
div.hgroup {display: table-row;}
div.cell {display: table-cell;}

#content .printheader {
	display: none;/*hide the header for the print style sheet*/
}
#content td.title {
  background-color: #d7e38c;
	font-size: 12px;
	height: 10px;
	text-align: center;
}
#content td.body {
  background-color: #e9eae4;
	font-size: 12px;
	height: 10px;
	padding-right: 10px;
	text-align: right;
}
#content td.body-prod-id {
  background-color: #e9eae4;
	color: purple;
	font-size: 12px;
	font-weight: 900;
	height: 10px;
	padding-left: 10px;
	text-align: left;
}
#content td.body-product {
  background-color: #e9eae4;
	color: purple;
	font-size: 12px;
	font-weight: 900;
	height: 10px;
	padding-left: 10px;
	text-align: left;
}
.strikethrough {
  text-decoration: line-through;
	color: #933;
 }

#screentitle {
	margin-top: 30px;
}
	
#nav {
	clear: both;
	float:left;
	font-size:12px;
	font-weight:600;
	padding: 10px 0 20px 36px;
	width: 960px;
}
	
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/opaque_dl.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:0 0 10px 0; padding:0; }

#menu li {display:block; float:left; position:relative; z-index:100; margin-right:1px;}
#menu li span {display:block; z-index:100; padding:5px 8px 0 0;font-size:1.1em;}
#menu li a, #menu li a:visited {display:block; padding:0; white-space:nowrap;}

#menu dl {position:absolute; top:0; left:0; margin: 0; padding: 0; background:transparent url(../img/opaque.png);}
* html #menu dl {background:transparent url(../img/opaque.gif);}
#menu dl {position:absolute; top:0; left:0; margin: 0; padding: 0; background: #fff;}
* html #menu dl {background: #fff;}
#menu dt {margin:0; font-size: 1.1em; float:left;}
#menu dd {display:none; background: transparent; clear:left; margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}

#menu dt a, #menu dt a:visited {display:block; color:#000; padding: 5px 8px 0 0; text-decoration:none;}
#menu dd a, #menu dd a:visited {color:#000; text-decoration:none; display:block; padding: 5px 10px;}

#menu li a:hover {border:0; text-decoration:underline;}

#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {color:#690;}

#sidebartext {
padding-top: 10px;
clear: both;
}

#sidebartext p {
padding-top: 10px;
clear: both;
}

#sidebartext a:link, #sidebartext a:visited, #sidebartext a:hover, #sidebartext a:active {
  text-decoration: none;
}

#selected a:link, #selected a:visited,
#selected a:hover, #selected a:active {
	background-color: #ccc;
	color: #333;
}

#footer {
	background:#FFFFFF url(../img/bg_bottom.gif) repeat-x scroll left bottom;	
	clear: both;
	color: #222;
	font-size: 12px;
	padding: 20px 0 10px 10px;
	text-align: left;
}
#footer-inner {
	margin: 0 auto;
	width: 900px;
}
#footer-left {
  float:left;
	width: 25%;
}
#footer-middle {
  float:left;
	width: 32%
}
#footer-right {
  float:right;
	width: 8%
}
#footer p {
	padding: 160px 0 20px 0;
	text-align: center;
}
#footer ul {
	color: #222;
	line-height: 1.4em;
	width: 20em;
}
#footer li {
	list-style: none;
}
#footer dl {
	margin: 0;
	width: 100%;
}
#footer dl dt {
	float: left;
	font-weight: bold;
	line-height: 0.8em;
	margin: 0;
	padding: 0.3em 0.5em 0 0;
	text-align: right;
	width: 5em;
}
#footer dl dd {
	padding-top: 0.1em;
	line-height: 1.4em;
	margin: 0;
}
#footer span.email span {
  font: 12px Arial, "Trebuchet MS",Helvetica, sans-serif;
	display: none;
}
#footer a:link, #footer a:visited {
  font: 0.8em Arial, "Trebuchet MS",Helvetica, sans-serif;
	background-color: inherit;
	color: #888;
	text-decoration: none;
	}
#footer a:hover, #footer a:active {
  font: 0.8em Arial, "Trebuchet MS",Helvetica, sans-serif;
	background-color: inherit;
	color: #222;
	text-decoration: underline;
	}
#footer img.right {	
	float: right;
	margin: 0 0 5px 10px;
}
#map {
	height:382px;	
	width:475px;
	border:#9e9b96 2px solid;
	}	

/*Credits: Dynamic Drive CSS Library */

/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
  position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
  }

.thumbnail img{
  border: 1px solid white;
  margin: 0 5px 5px 0;
  }

.thumbnail:hover{
  background-color: transparent;
  }

.thumbnail:hover img{
  border: 1px solid blue;
  }

.thumbnail span{ /*CSS for enlarged image*/
  position: absolute;
  visibility: hidden;
  color: black;
  text-decoration: none;
  }

.thumbnail span img{ /*CSS for enlarged image*/
  border-width: 0;
  }

.thumbnail:hover span{ /*CSS for enlarged image*/
  visibility: visible;
  top:2em;
  left:272px;/*position where enlarged image should offset horizontally */
  z-index: 50;
  }

div.clear {
  clear: both;
  height: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 1px;
  }
	
.download {
	padding-right:10px; 
	vertical-align: -200%;
}

div#img-source {
    background-color: grey;
    background-image:  url(../img/roof-before-after.gif);
    background-repeat: no-repeat;
    min-height: 200px;
    width: 100%;
}
div#img-text {
    position: relative;
    height: auto;
    width: auto;
    left: 25px;
    top: 200px;
}

/*gallery */	

img {
  border:0;
  margin:0 0 -3px 0;
  padding:0;
}

.slideshow {		
	float: left;
	margin: 0 0 10px 36px;
  padding: 0;
	display: inline;
  border: 1px solid #000;
}
		
.mainImg{}