/*****************************************
	Utilise Lofts CSS	
	by nwonline.co.uk
	Blue: #0089c0;
	Green: #bcd723;
*****************************************/

body { background: #0089c0 url('../images/site/bg-body.jpg') 0 0 repeat-x;	font-family: "Arial", Gadget, sans-serif; margin: 0}

span#vans {
	width: 401px;
	height: 187px;
	background: url(../images/site/png_vans.png) 0 0 no-repeat;
	position: absolute;
	top: -10px; right: -10px;
	display: block;
	z-index: 100}

/*components*/
#index-wrapper { width:980px; height:auto; margin:0 auto}

#navbox { height:150px; width:100%; margin:0 auto; padding: 20px 0 0 0;
	background: url('../images/site/bg_header.png') center 10px no-repeat;	}
	
#index_wrap { width:100%;  display: block; overflow: hidden; margin:0 auto; padding: 0;
	background: url('../images/site/bg_index_wrap.png') center 0 repeat-y;	}
	
#header { width:980px; height:160px; background:url('../images/site/HEADER.jpg') 0 0 no-repeat; 
	margin: 0 auto; position: relative;}
	
#maincontent{width:980px;height:auto;background:#FFF;float: left}
#leftcontent {width:410px;float:left;padding:10px 10px 20px 20px;}
#rightcontent {width:725px;float:right;padding:15px}
#legalcontent {width:820px;height:auto;float:left;background: #fff;padding: 25px 40px}
#rightcol { float: right; width: 290px; padding: 10px 10px 0 0}

#leftcontent.full {width:728px;}

/*footer*/
#footer{ width: 100%; height: 40px; background: #006d9b url('../images/site/foot-bg.jpg') repeat-x; clear:both; padding: 5px 0; color: #d1ebf5; font: normal 11px/19px 'Tahoma', Arial, sans-serif; border-top: 1px solid #036; text-shadow: 1px 1px 1px #036}
#footer a { color: #d1ebf5;}
#footer a:hover { text-decoration: underline; color: #bcd723;}
#footer .foot_sec {	width: 45%;	float: left; padding: 10px 15px; margin: 0;}
#footer .foot_sec.left { float: left;}
#footer .foot_sec.right { float: right;}
#footer .foot_sec ul { margin: 0; padding: 0 10px 0; float: left; width: 90%; list-style:none; text-align: center; font: normal 11px/19px 'Tahoma', Arial, sans-serif;}
#footer .foot_sec ul li { display: inline; float: left; padding: 0 7px; border-left: 1px dotted #fff;}
#footer .foot_sec ul li a { list-style-type: none;}
#footer .foot_sec ul li:first-child { padding: 0 7px 0 0; border-left: none;} 

/*Typography*/
p {color: #666; font: normal 12px/20px sans-serif;}
a:link, a:visited {	text-decoration: none;}
a:hover, a:active { text-decoration: underline;}

#leftcontent p a { color: #2873b2; font: bold 12px sans-serif; text-decoration: underline;}
#leftcontent p a:hover { color: #666; font: bold 12px sans-serif; text-decoration: none;}
#leftcontent blockquote { font: normal 12px/19px sans-serif; color: #666; font-style: italic; margin: 10px 40px 10px 40px; border-left: 2px solid #2873b2; padding: 5px 0 5px 10px;}

#leftcontent ul { clear: both; padding: 10px 0; width: 590px; list-style-type: disc !important; list-style: disc !important; margin: 0;}
#leftcontent ol { clear: both; padding: 10px 0; width: 590px; list-style-type: decimal !important; list-style: decimal !important; margin: 0;}
#leftcontent ul li { font: normal 12px/19px sans-serif; color: #666; list-style-type: disc !important; list-style: disc !important; margin: 0 0 0 30px}
#leftcontent ol li { font: normal 12px/19px sans-serif; color: #666; list-style-type: decimal !important; list-style: decimal !important; margin: 0 0 0 30px}

#leftcontent address { font: normal 12px/19px sans-serif; color: #666; font-style: italic;}
#leftcontent abbr { cursor:help; background: url('../images/site/dotted.jpg') 0 bottom repeat-x; font: bold 12px/19px sans-serif;}

/*Gallery*/
#leftcontent .gallery { float: left; list-style-type: none; list-style: none; width: 420px; padding: 10px 0; margin: 0;}
#leftcontent .gallery li { float: left; display: inline; width: 127px; height: 140px; margin: 0 10px 0 0; list-style-type: none;  text-align: center; font: normal 11px/28px 'Tahoma', sans-serif;position:relative}
#leftcontent .gallery li img { width: 125px; float: left; border: 1px solid #ccc; padding: 1px; background: #fff;}
#leftcontent .gallery span {position:absolute;bottom:0px;left:2px;}

#leftcontent .gallery li a { color: #1a1a1a;}
#leftcontent .gallery li a:hover { text-decoration: none; color: #06C}
#leftcontent .gallery li:hover img { border: 1px solid #666;}

#leftcontent.full .gallery{  width: 722px;}

#leftcontent ul.detailgallery { float: left; list-style-type: none; list-style: none; width: 420px; padding: 10px 0; margin: 0;}
#leftcontent ul.detailgallery li { float: left; display: inline; width: 200px;  position: relative; margin: 0 10px 0 0; list-style-type: none;  text-align: center; font: normal 11px/28px 'Tahoma', sans-serif; cursor: pointer;}
#leftcontent ul.detailgallery li:hover { cursor: pointer;}
#leftcontent ul.detailgallery li a { text-decoration: none;}
#leftcontent ul.detailgallery li img { width: 200px;  float: left; border: 1px solid #ccc; padding: 1px; background: #fff;}

#leftcontent ul.detailgallery li span { display: none; position: absolute; top: 2px; left: 2px; width: 200px; height: 150px; background: #000;}
#leftcontent ul.detailgallery li:hover span { display: block; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -moz-opacity: 0.4; -khtml-opacity: 0.4; opacity: 0.4; background: #000; font: bold 22px/150px 'Helvetica neue', 'Helvetica', Arial, sans-serif; letter-spacing: -1px; color: #fff;}

/*Contact Forms*/
#contact_form { width: 400px; padding: 15px 50px; float: left; margin: 10px 0; background: #F7F7F7; border-top: 1px solid #dedede; border-bottom: 1px solid #ccc; overflow: hidden;}
#contact_form form { float: left; width: 400px; margin: 0; }
#contact_form label { width: 180px; float: left; clear: both; font: normal 12px/26px sans-serif; color: #666;}

#contact_form label.full { width: 400px;}
#contact_form input[type=text], input[type=password], textarea { 
	float: right;
	font: normal 12px sans-serif;
	color: #666;
	width: 200px;
	margin: 2px 0;
	padding: 5px;
	background: #fff;
	border: 1px solid #ccc;}

#contact_form #submit { width: 90px; float: right; margin: 0; clear: both;} 

#contact_form select { font: normal 12px sans-serif; color: #666; padding: 5px; float: right; width: 150px; margin: 0; background: #fff; border: 1px solid #ccc;}
#contact_form small { font: normal 11px/34px sans-serif; color: #666;}

/*headers*/
h1 { color: #0089c0; font: normal 24px/30px "Helvetica", Arial, sans-serif; letter-spacing: -1px; padding: 0; margin: 0; }
h2 { font: normal 18px/22px "Helvetica", Arial, sans-serif; color: #0089c0; padding: 5px 10px 0 0; letter-spacing: -1px;}
h4 { font: bold 12px/20px sans-serif; color: #333;}
#leftcontent h2 { font: normal 20px/22px "Helvetica", Arial, sans-serif; color: #0089c0; padding: 5px 10px 0 0; letter-spacing: -1px;}

/*Navigation*/
#nav_wrap { width: 980px; float: left; position: relative; border-top: 1px solid #fff;}
#topmenu { width: 970px; float: left; margin: 0; padding: 0 0 0 10px; background: #c7c7c7 url('../images/site/nav_bg.jpg') 0 0 repeat-x;}
#topmenu li { float: left; position: relative; height: 36px; font: bold 12px/36px sans-serif; margin: 0 1px 0 0}
#topmenu li a { display: block; padding: 0 12px; color: #fff; text-shadow: 1px 1px 1px #036}
#topmenu li a:hover { color: #1a1a1a; background: url('../images/site/nav_hover_green.jpg') 0 0 repeat-x; text-decoration: none; text-shadow: 1px 1px 1px #FFC}
#topmenu li ul { list-style: none; position: absolute; visibility: hidden; overflow: hidden; top: 36px; left: -1px; float: left; z-index: 100; padding: 5px 10px 20px 10px; width: 180px; background: #002650 url('../images/site/nav_li_ul.jpg') 0 0 repeat-x; margin: 0 ; text-align: left; border-top: 1px solid #036; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;} 
#topmenu li:hover ul { visibility:visible;}
#topmenu li li { margin: 0; padding:0; height: 27px; float: left; clear: both; width: 180px; font: bold 12px/23px sans-serif; background: url('../images/site/png_dn.png') 0 25px repeat-x;}
#topmenu li li:first-child { border: none;}
#topmenu li li a { display: block; color: #fff; margin: 0; padding: 0 10px; text-decoration: none;}	
#topmenu li li a:hover { color: #bcd723; background: transparent; text-shadow: 1px 1px 1px #036}

#nav_001 .nav_001, #nav_002 .nav_002, #nav_003 .nav_003, #nav_004 .nav_004, #nav_005 .nav_005, #nav_006 .nav_006 { color: #383838 !important; background: #3a3a3a url('../images/site/nav_hover.jpg') 0 0 repeat-x; text-shadow: 1px 1px 1px #fff;}	

/*left col nav*/
#leftcol_short { float: left; width: 212px; padding: 10px 0 10px 10px;}
#leftcol_short ul { float: left; list-style-type: none; font: bold 12px/24px sans-serif; border: 1px solid #cfcfcf;}
#leftcol_short li { float: left; position: relative; clear: both; display: block; width: 212px;}
#leftcol_short li a { border-top: 1px solid #cfcfcf; padding: 0 0 0 15px; display: block; background: #fff; color: #0089c0; font: normal 11px/24px 'Tahoma', sans-serif;}
#leftcol_short li a:hover{ background: #f8f8f8; color: #1a1a1a; text-decoration: none; padding: 0 0 0 20px;}
#leftcol_short li#top { background: #fff url('../images/site/lc_short_head.jpg') 0 1px repeat-x; height: 35px;}
#leftcol_short li#top { font: bold 12px/35px sans-serif; color: #383838; padding: 0 0 0 15px; width: 197px; text-shadow: 1px 1px 1px #fff;}

/*Right Col Boxes*/
#rightcol ul { list-style-type: none; padding: 0;}
#rightcol li { width: 260px; height: 85px; position: relative; float: left; background: #f8f8f8 url('../images/site/rc_bg.jpg') 0 0 repeat-x; margin: 10px 0 0 0; padding: 30px 10px 5px 10px; border: 1px solid #e0e0e0;}
#rightcol li:first-child { margin: 0 !important;}
#rightcol li h3 { text-indent: -9999px; display: none;}
#rightcol li p { font: normal 12px/16px sans-serif; color: #2873b2;}
#rightcol li p a { color: #004ec2; text-decoration: underline;}
#rightcol li p a:hover { color: #2873b2; text-decoration: none;}

#rightcol li#rc1 { background: url('../images/site/rc_ladders.jpg') 0 0 no-repeat;}
#rightcol li#rc2 { background: url('../images/site/rc_storage.jpg') 0 0 no-repeat;}
#rightcol li#rc3 { background: url('../images/site/rc_conversion.jpg') 0 0 no-repeat;}
#rightcol li#rc4 { background: url('../images/site/rc_roofing.jpg') 0 0 no-repeat;}
#rightcol li#rc5 { background: url('../images/site/rc_brochure.jpg') 0 0 no-repeat;}
#rightcol li#rc6 { background: url('../images/site/rc_estimate.jpg') 0 0 no-repeat;}

.sitemap_left {
float:left;
}
.sitemap_right {
float:right;
margin-right:30px;
width:200px;
}
.sm_item {
	padding:5px;
}

.sitemap_left h2 ,.sitemap_right h2
{
	font-size:24px;
	font-weight:bold;
}