/* CSS Document */

/* ------ POSITIONING AND LAYOUT ----- */
	html, body {
		width: 100%;
		height: 100%;
	}
	#flashoverlay {
	position: fixed;
	_position: absolute;
	overflow: auto;
	left:0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 1000;
	} 

body {
	margin:52px 0px 0px 0px;
	background-image:url(../images/bg_body.jpg);
	background-repeat: repeat-x;
	background-color: #1c3220;
	background-position:top center;
}

#container {	
	width: 817px;
	margin: 0px auto;
	text-align: left;
}

#middle {
	background-image:url(../images/bg_middle.jpg);
	background-repeat: no-repeat;
	height: 609px;
	position:relative;
	top: 0px;
}

#bottom {
	background-image: url(../images/bg_bottom.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	padding-bottom:113px;
}

#inbetween {
	background-image:url(../images/bg_inbetween.jpg);
	background-repeat: repeat-x;
	position:relative;
	top:60px;
	width:753px;
	background-color: #ece1c2;
	margin-left: 50px;
}

h1 {
	margin:0px;
	cursor: hand;
	background-image: url(../images/logo.jpg);
	background-repeat:no-repeat;
	width: 361px;
	height: 121px;
	text-indent: -9999px;
}

#character {
	margin-left: -408px;
	position: absolute;
	left: 50%;
	width: 817px;
	z-index: 10;
}


h2 {
	position: absolute;
	top: 7px;
	left:486px;
	margin:0px;
	width: 172px;
	height: 107px;
}

h2.comment1 {
	background-image: url(../images/comment1.jpg);
}
h2.comment2 {
	background-image: url(../images/comment2.jpg);
}
h2.comment3 {
	background-image: url(../images/comment3.jpg);
}
h2.comment4 {
	background-image: url(../images/comment4.jpg);
}

h2.comment5 {
	background-image: url(../images/comment5.jpg);
	cursor: hand;
	text-indent: -9999px;
}

h2.comment6 {
	background-image: url(../images/comment6.jpg);
	cursor: hand;
	text-indent: -9999px;
}

h2.comment7 {
	background-image: url(../images/contractors.jpg);
	cursor: hand;
	text-indent: -9999px;
}
#characterguy {
	left:658px;
	margin:0px;
	position:absolute;
	background-image:url(../images/character_invisible.jpg);
	z-index: 11;
	width: 158px;
	height: 214px;
	top: -2px;
}

#characterguy_articles {
	left:658px;
	margin:0px;
	position:absolute;
	background-image:url(../images/character_articles.jpg);
	z-index: 11;
	width: 158px;
	height: 214px;
	top: -2px;
}

.spacer {clear: both;}

td {
	color: #daceaf;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;	
	line-height: 18px;
	padding-bottom:10px;
}
/* ----------- LEFT BOX ----------- */
#box1 {
	padding-top:30px;
	padding-left:20px;
}
.boxtop{	
		/*make this the same size as the top image*/	
		display:block;	
		width:418px;	
		height:21px;	
		background-position:left top;	
		background-repeat:no-repeat;	
		background-image:url(../images/box1_top.jpg);	
	}
.boxtop_articles{	
		/*make this the same size as the top image*/
				display:block;	
		width:276px;	
		height:19px;	
		background-position:left top;	
		background-repeat:no-repeat;	
		background-image:url(../images/box2_top_articles.jpg);		
	}
	.boxbottom{	
		/*make this the same width as the bottom image*/	
		/*don’t set the height as this needs to be flexible*/	
		display:block;	
		width:418px;
		/*set the image as a background*/	
		background-position:left bottom;	
		background-repeat:no-repeat;	
		background-image:url(../images/box1_bottom.jpg);
		background-color: #5f5845;
	}	
	.maincontent{	
		/*set the font style for the main content*/	
		display:block;	
		/*align the main content nicely*/	
		padding-left:19px;	
		padding-bottom:40px;	
		padding-right:19px;
		font-family:Arial, Helvetica, sans-serif;
	font-size:12px;	
	line-height: 18px;
	color: #daceaf;
	}


.maincontent p {
	color: #daceaf;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;	
	line-height: 18px;
	padding-top:0px;
	margin-top:0px;
}
/* ----------- RIGHT BOX ----------- */
#box2 {
	padding-top:30px;
	padding-right:20px;
}
.boxtop2{	
		/*make this the same size as the top image*/	
		display:block;	
		width:276px;	
		height:19px;	
		background-position:left top;	
		background-repeat:no-repeat;	
		background-image:url(../images/box2_top.jpg);	
	}
	.boxbottom2{	
		/*make this the same width as the bottom image*/	
		/*don’t set the height as this needs to be flexible*/	
		display:block;	
		width:276px;
		/*set the image as a background*/	
		background-position:left bottom;	
		background-repeat:no-repeat;	
		background-image:url(../images/box2_bottom.jpg);
		background-color: #fefbf4;
	}	
	.maincontent2{	
		display:block;
		/*align the main content nicely*/
		padding-right:20px;
		padding-bottom:20px;
	}

.maincontent2 p {
	margin-top:0px;
	color: #223e27;	
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:18px;
		padding-left:20px;
}

#signature {
	text-indent: -9999px;
	background-image:url(../images/signature.gif);
	width: 162px;
	height: 42px;
}


/* --------  HEADINGS  -----------*/
h3 {
	color:#f2ede1;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	margin-top:0px;
}

h3.article {
	padding:0px;
}

h4 {
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	color: #223e27;
}
/* --------   FOOTER   -----------*/
#footer {
	padding-left:50px;
	padding-top:20px;
	padding-bottom:20px;
	color:#ebe0c0;
	font-size:11px;
	font-family: Arial, Helvetica, sans-serif;
	text-align:center;
	line-height:18px;
}

/* -------- NAVIGATION ---------- */

#navigation {
	padding-left: 7px;
	margin-top:-5px;
	margin-left: -408px;
	position: absolute;
	left: 50%;
	width: 817px;
	height: 50px;
	z-index: 5;
}

/* -------- MENU ---------- */
#menu {display:block; height: 50px; background-image:url(../images/bg_nav.jpg); background-repeat:repeat-x;}
#menu ul {margin-left: 44px; margin-top: 0px; margin-right:0px; margin-bottom:0px;  padding:0px; list-style-type:none;}
#menu li {float:left; height: 50px;}
#menu li.list1 {background:transparent url(../images/nav_roofingrev1.jpg); background-repeat:no-repeat; width: 179px;}
#menu li.list2 {background:transparent url(../images/nav_homeowners1.jpg); background-repeat:no-repeat; width: 124px; margin-left: 5px;}
#menu li.list3 {background:transparent url(../images/nav_contractors1.jpg); background-repeat:no-repeat; width: 124px; margin-left: 5px;}
#menu li.list4 {background:transparent url(../images/nav_articles1.jpg); background-repeat:no-repeat; width: 89px; margin-left: 5px;}
#menu a {display:block; height: 50px; overflow:hidden; text-decoration: none; text-indent: -9999px;}
* html #menu a:link, * html #menu a:visited { he\ight:0; height: 46px;}


/* ----------- MENU HOVERING ITEMS ----------- */
#menu a#item1 {background:transparent url(../images/nav_roofingrev2.jpg) -400px -46px no-repeat;}
#menu a#item2 {background:transparent url(../images/nav_homeowners2.jpg) -130px -90px no-repeat;}
#menu a#item3 {background:transparent url(../images/nav_contractors2.jpg) -130px -90px no-repeat;}
#menu a#item4 {background:transparent url(../images/nav_articles2.jpg) -130px -90px no-repeat;}

#menu a#item1:hover {background-position:0 0; z-index:50;}
#menu a#item2:hover {background-position:0 0; z-index:50;}
#menu a#item3:hover {background-position:0 0; z-index:50;}
#menu a#item4:hover {background-position:0 0; z-index:50;}

* html #menu a:hover {he\ight:0; height: 46px;}

/* -------- CURRENT MENU ITEM ----------- */
#menu li.list1_2 {background:transparent url(../images/nav_roofingrev3.jpg); background-repeat:no-repeat; width: 179px;}
#menu li.list2_2 {background:transparent url(../images/nav_homeowners3.jpg); background-repeat:no-repeat; width: 124px; margin-left: 5px;}
#menu li.list3_2 {background:transparent url(../images/nav_contractors3.jpg); background-repeat:no-repeat; width: 124px; margin-left: 5px;}
#menu li.list4_2 {background:transparent url(../images/nav_articles3.jpg); background-repeat:no-repeat; width: 89px; margin-left: 5px;}

#howworks ul {list-style-type:none; margin: 0px; padding: 0px;}
#howworks li {height: 96px; float: left;}
#howworks a {display:block; height: 96px; text-indent: -9999px; border-bottom: none;}
#howworks li.list5 {background:transparent url(../images/how_it_works_btn.jpg); background-repeat:no-repeat; width: 235px; height: 96px; margin-bottom: 10px;}
#howworks a#item5 {background:transparent url(../images/how_it_works_btn.jpg) no-repeat;}
#howworks a#item5:hover {background-position:0px -96px; z-index:50;}

/* -------- LINK STUFF ------------*/
a {
  outline: none;
}

:focus {
  -moz-outline-style: none;
}

.maincontent a:link,.maincontent a:visited, #footer a:link, #footer a:visited {
	text-decoration: underline;
	color: #f2ede1;
}

.maincontent a:hover {
	color:white;
	text-decoration:underline;
}

a.rightbox {
	color: #494534;
}
a.rightbox:hover {
	color: red;
}

#footer a {
	text-decoration:none;
}

#footer a:hover {
	border-bottom:1px #f2ede1 dotted; 
}

a.webtek {
	text-decoration:none;
	color: #ebe0c0;
}

a img {
	border: 5px solid #f2ede1;
}

a:hover img{
	border: 5px solid #ebe0c0;
}

a.rightside:link {
	color:#990000;
}

a.rightside:hover {
	color:red;
}

.style1 {color: #990000; font-style: italic;}

/* -------- article menu ------------*/

#article_menu {
font-family:Arial, Helvetica, sans-serif;
}

#article_menu h3{
	margin: 0px;
	padding:0px;
	font-size:inherit;
}

#article_menu ul, li{
	margin:0px;
	padding: 0px;
	list-style: none;
}

#article_menu  ul li h3{
	font-size: 14px;
	color: #ffffff;
}

#article_menu  ul li {
	font-size: 14px;
	color: #ffffff;
	background-image:url(../images/article_bg.jpg);
	background-repeat: no-repeat;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 16px;
	_margin-right: -35px;
	margin-bottom: -1px;
	width: 276px;
}

#article_menu ul li a:link,  #article_menu ul li a:visited {
	color: #ffffff;
	text-decoration:none;
}

#article_menu ul li a:hover {
	text-decoration:underline;
}

#article_menu ul li ul {
	background-image:url(../images/article_bg2.png);
	_background-image: none;
	background-repeat: no-repeat;
	background-position: top;
	margin: 10px 0px -8px -32px;
}

#article_menu ul li ul li {
	font-size:11px;
	color: #2e5035;
	background-image: none;
	text-indent: 20px;
	background-image:url(../images/article_underline.png);
	background-repeat:no-repeat;
	background-position:bottom;
}

#article_menu ul li ul li h3{
	font-size:11px;
	color: #2e5035;
	background-image: none;
	text-indent: 20px;
}


#article_menu ul li ul li a:link, #article_menu ul li ul li a:visited  {
	color: #2e5035;
	text-decoration:none;
}

#article_menu ul li ul li a:hover {
	text-decoration:underline;
}

dfn {
display: none;
}