/*

	@Version 0.1
	@Created by Martin Dingley (createanet)
	@03 April 2007
	
	//
	
	For a 2 colum layout cycle down this file and uncomment  
	the styles in #main_content and #sub_content. It is also possible to shuffle the columns
	up, but for now im not explaining how ...

	//


*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, 
h4, h5, h6, pre, form, fieldset, input, p, 
blockquote, th, td 
{ margin : 0; padding : 0; }

h1,h2,h3,h4,h5,h6, input, textarea, select { font-size : 100%; }

h3 { font-size: 120%; }

ol,ul { list-style : none; }

table { border-collapse : collapse; border-spacing : 0; }
p { margin-bottom: 1.6em; }
a { 
	color: #000;
	outline: none;
 }
a:hover { text-decoration: none; }
hr {margin:10px 0; background: #ccc; }
*{
	font-size: 100%;
}
th, td { padding: 5px; }
th {
		background:#999999;
		
		margin: 0 0 .2em 0;
		color:#fff;
		text-align:left;
		}
table { border:none; }

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

img, div { behavior: url(iepngfix.htc) }



/* Print Scheme Size   ////////////////////////////////////  */



body {
	font:75%/120% Helvetica, Arial, Helvetica, sans-serif;
	text-align:center;
	padding:0;
	background:url(../images/backgrounds/page_bg.gif) repeat-x top left #FFF;
	margin:0 0 15px 0;
	
	}
	
	
	
/*/////////////////////////////////////////////////////////*/

 input, textarea, select { font-family:Helvetica, Arial, Helvetica, sans-serif; }

#wrap h1{
	color:#000;
	font-size: 240%;
	margin-bottom:5px;
}
oint

.hidden_navigation{
	width: 1px;
	position: absolute;
	left: -9999px;
}


/*\Template Variables /*\/*/

#wrap{
	width: 800px;
	margin: 0 auto;
	text-align: left;
}

/*=Header
	-------------------------------------------------------*/

#header { height:123px; margin:0; padding:0 10px 0 10px; color:#FFF; font-size:10px; line-height:normal;}
#header p {margin:0 0 5px 0; padding:0;}

#header ul  {margin:0; padding:0;}
#header li {padding:0; float:left; height:123px;}

.logo {width:265px; margin:0 200px 0 0; padding:0;}
.callus {width:215px; padding:0; margin:0;}
.factoryprices {width:99px; margin:0; padding:0;}


/*=Framework
	-------------------------------------------------------*/

#main_content { width:470px; float:left; min-height: 400px; margin:0; padding:0;}
#main_content a {text-decoration:none; color:#2e5777;}
#main_content a:hover {text-decoration:underline; color:#2e5777;}


#main_content h1 {color:#223749; font-weight:100; font-size:22px; margin:0 0 7px 0; padding:0;}
#main_content h2 { font-size: 140%; font-size:18px; color:#666; font-weight:100; margin:0 0 25px 0;  }

#sub_content { width: 310px; float: left; margin:0 0 0 10px; padding:0;}
#sub_content  h3 {color:#223749; font-weight:100; font-size:22px; margin:0 0 7px 0; padding:0;}


#large_content {float:left; margin:0; width:620px;  min-height: 400px;}
#large_content h1 {color:#223749; font-weight:100; font-size:22px; margin:0 0 7px 0; padding:0;}
#large_content  h2 { font-size: 140%; font-size:18px; color:#666; font-weight:100; margin:0 0 25px 0;  }
#large_content a {text-decoration:none; color:#2e5777;}
#large_content a:hover {text-decoration:underline; color:#2e5777;}

#rightsubcontent {float:left; margin:0 0 0 10px; width:150px;  min-height: 400px;}
#rightsubcontent a { text-decoration:none; color:#FFF;}
#rightsubcontent a:hover { text-decoration:underline; color:#FFF;}

/*=Homepage Categories
	-------------------------------------------------------*/
	
#showroomlist {margin:0; padding:0 0 10px 0;}
#showroomlist li {padding:0; float:left; height:137px; width:150px; color:#FFF;}

#showroomlist li a {display:block; height:21px; width:142px; color:#FFF; text-decoration:none; padding:116px 0 0 8px;}

.conservatories {background:url(../images/categories/conservatories.jpg) no-repeat top left;}
.windows {background:url(../images/categories/windows.jpg) no-repeat top left; margin:0 0 10px 10px;}
.porches {background:url(../images/categories/porches.jpg) no-repeat top left;}
.doors {background:url(../images/categories/doors.jpg) no-repeat top left; margin:0 0 10px 10px;}

.paving {background:url(../images/categories/paving.jpg) no-repeat top left; margin:0 0 0 10px;}
.conversions {background:url(../images/categories/conversions.jpg) no-repeat top left;}


/*=Special Offers
	-------------------------------------------------------*/
#specoffers {width:143px; height:72px; background:url(../images/categories/offers.jpg) no-repeat top left; color:#FFF; margin:0 0 15px 0; padding:12px 154px 0 12px; position:relative;}
#specoffers h3 { font-size:16px; font-weight:normal; margin:0 0 7px 0; padding:0; color:#FFF;}
#specoffers p {margin:0; padding:0; line-height:normal;}

#specoffers p a {background:url(../images/backgrounds/arrow_yell.gif) no-repeat top right; font-weight:bold; color:#FFF; text-decoration:none; padding:0 10px 0 0;}
#specoffers p a:hover {text-decoration: underline; color:#FFF;}
	

/*=Navigation
	-------------------------------------------------------*/

#navcontainer ul { margin:0 0 22px 0; padding:0; color: FFF; float: left; width: 100%; font-family: arial, helvetica, sans-serif; font-size:14px;}

#navcontainer ul li { display: inline; }

#navcontainer ul li a { padding:4px 0 0 0; color:#FFF; text-decoration: none; float: left; height:21px; display:inline; display:block; margin:0 36px 0 0;}

#navcontainer ul li a:hover { color:#fff; background-image:url(../images/backgrounds/arrow.gif); background-position:bottom; background-repeat:no-repeat;}

/*=Easysteps
	-------------------------------------------------------*/

#stepspic { width:460px; position:relative; margin:0; padding:0; height:161px;}	

.introduction {float:left; width:300px; margin:0; padding:0;}
.introduction h3 {color:#223749; font-weight:100; font-size:20px; margin:0 0 10px 0; padding:0;}



#steps {background:url(../images/backgrounds/steps_bg.gif) no-repeat; height:56px; width:436px; margin:0 0 20px 0; padding:0 12px 0 12px;}
#steps ul {margin:0; padding:9px 0 0 0;}

#steps ul li {float:left; display:inline; margin:0; color:#FFF; background-repeat: no-repeat; background-position:0 0; height:43px; width:109px;}

#steps ul li a {color:#FFF; text-decoration:none; display:block; background-repeat:no-repeat; padding-left:25px;}

#steps ul li a:hover {color:#ffdd00; text-decoration:none;}


#stepone a { background-image: url(../images/icons/step1.gif); }
#steptwo a { background-image: url(../images/icons/step2.gif); }
#stepthree a  {background-image: url(../images/icons/step3.gif); }
#stepfour a { background-image: url(../images/icons/step4.gif); }

#stepone a:hover { background-image: url(../images/icons/step1_on.gif); }
#steptwo a:hover { background-image: url(../images/icons/step2_on.gif); }
#stepthree a:hover  {background-image: url(../images/icons/step3_on.gif); }
#stepfour a:hover { background-image: url(../images/icons/step4_on.gif); }

/*=Products
	-------------------------------------------------------*/

#prodimages {width:200px; float:left; margin:0; padding:0;}
.imgwrap {position:relative; margin:0 0 15px 0; padding:0;}

#proddescription {float:left; width:410px; margin:0 0 0 10px; padding:0;}
#proddescription p {margin:0 0 10px 0; padding:0;}

#proddescription li {margin:0 0 7px 0; padding:0 0 0 20px; background:url(../images/backgrounds/bullet_point.gif) no-repeat 0 5px;}

.telephone { color:#223749;}
.telephone span {font-size:22px; margin-top:4px;}

/*=Call Back
	-------------------------------------------------------*/
	
#callback {width:285px; height:72px; background:url(../images/backgrounds/callback_bg.gif) no-repeat top left; color:#FFF; margin:0 0 15px 0; padding:12px 12px 0 12px; clear:both;}
#callback h3 { font-size:16px; font-weight:normal; margin:0 0 7px 0; padding:0; color:#FFF;}
#callback p {margin:0; padding:0; line-height:normal;}

#callback p a {background:url(../images/backgrounds/arrow_yell.gif) no-repeat top right; font-weight:bold; color:#FFF; text-decoration:none; padding:0 10px 0 0;}
#callback p a:hover {text-decoration: underline; color:#FFF;}


/*=Appointment
	-------------------------------------------------------*/
	
.appointment {width:125px; height:157px; background:url(../images/backgrounds/appointment_bg.gif) no-repeat top left; color:#FFF; margin:0 0 15px 10px; padding:12px; float:left;}
.appointment h3 { font-size:16px; font-weight:normal; margin:0 0 7px 0; padding:0; color:#FFF;}
.appointment p {margin:0; padding:0; line-height:normal;}

#main_content .appointment p a {background:url(../images/backgrounds/arrow_yell.gif) no-repeat top right; font-weight:bold; color:#FFF; text-decoration:none; padding:0 10px 0 0;}
#main_content .appointment p a:hover {text-decoration: underline; color:#FFF;}

.appointment p a {background:url(../images/backgrounds/arrow_yell.gif) no-repeat top right; font-weight:bold; color:#FFF; text-decoration:none; padding:0 10px 0 0;}

.appointment p a:hover {text-decoration: underline; color:#FFF;}


/*=Offers Sm
	-------------------------------------------------------*/
	
.offerssm {width:125px; height:67px; background:url(../images/backgrounds/offers.jpg) no-repeat top left; color:#FFF; margin:0 0 15px 10px; padding:102px 12px 12px 12px; float:left; position:relative;}
.offerssm h3 { font-size:16px; font-weight:normal; margin:0 0 15px 0; padding:0; color:#FFF;}
.offerssm p {margin:0; padding:0; line-height:normal;}

.offerssm p a {background:url(../images/backgrounds/arrow_yell.gif) no-repeat top right; font-weight:bold; color:#FFF; text-decoration:none; padding:0 10px 0 0;}
.offerssm p a:hover {text-decoration: underline; color:#FFF;}


/*=Showroom
	-------------------------------------------------------*/

#showroom {width:620px; margin:0; padding:0;}

#showroom li {width:300px; margin:0 10px 15px 0; padding:0; float:left; height:119px; background:url(../images/backgrounds/category_bg.gif) repeat-x top left; color:#FFF; position:relative;}
#showroom li h2 {margin:0 0 7px 0; padding:0; font-size:16px;}
#showroom li h2 a { color:#FFF; text-decoration:none;}
#showroom li h2 a:hover { color:#FFF; text-decoration:underline;}

.categorypic { float:left; width:119px; height:119px; margin:0; padding:0;}
.categorydescrip {float:left; width:167px; margin:0; padding:12px 7px 7px 7px;}

.categorydescrip p { line-height:normal; margin:0 0 5px 0; padding:0; letter-spacing:normal;}

.categorydescrip p a {background:url(../images/backgrounds/arrow_yell.gif) no-repeat top right; font-weight:bold; color:#FFF; text-decoration:none; padding:0 10px 0 0;}
.categorydescrip p a:hover {text-decoration: underline; color:#FFF;}

/*=Special Offers
	-------------------------------------------------------*/
	
#specialoffers { width:470px; margin:15px 0 0 0; padding:0;}
#specialoffers li {width:470px; padding:5px 0 5px 0; margin:0; border-bottom:1px dashed #ccc;}

.offerspic {float:left; width:60px; margin:0; padding:0; position:relative;}
.offersdescp {float:left; width:400px; margin:0 0 0 10px; padding:0;}

.offersdescp p {margin:0 0 5px 0; padding:0;}


.mappreview { width:300px; height:240px; position:relative; margin:0 0 13px 0; padding:5px; background:url(../images/backgrounds/map_border.gif) no-repeat;}

/*=Footer
	-------------------------------------------------------*/

#footer { padding:10px 0 10px 0; border-top: 4px solid #142b3e; clear:both; width:800px; color:#666; margin-top:20px;}
#footer p { margin-bottom: 0; }
#footer li {display: inline;}
#footer a {color:#666; text-decoration:none;}
#footer a:hover {color:#2e5777; text-decoration:underline;}
#footer img { float:right; margin:0 0 0 10px;}



#page_slugs {  margin-bottom: 10px; }
#page_slugs li { display: inline; font-size: 85%;}
#page_slugs li a { color:#2e5777; text-decoration:none;}
#page_slugs li a:hover { color:#2e5777; text-decoration:underline;}
	
	
	
#offers .category #offer_thmb { float: left; margin: 0 10px 10px 0; }
#offers .category { margin-bottom: 10px; border-bottom: 1px solid #000; padding-bottom: 10px; }
#categorylisting li { border-bottom: 1px solid #ccc; padding: 20px 0 0 0; }
#categorylisting li a { }
#categorylisting p { margin-bottom: 0; }
.category_thumb { float: left; margin: 0 10px 10px 0; }

#categorylisting li:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#recentnews li { margin-bottom: 10px; }


.clearleft { clear: left; }
.paging { margin:10px 0 10px 0px;}


/*=Download
	-------------------------------------------------------*/
.download {
	background: #fffeef;
	padding: 5px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
	}
	.download a { 
		background: url(../images/pdf.gif) 0 2px no-repeat;
		padding: .2em .8em;
		padding-left: 20px;
	} 
	div.download span {
		font-size: 90%;
	}
	.pdf a {
		background: url(../images/pdf.gif) 0 2px no-repeat;
		display: block;
	}
	.swf a {
		background: url(../images/swf.gif) 0 2px no-repeat;
		display: block;
	}
	
	
/*=Gallery
	-------------------------------------------------------*/
	
.filter  { border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 10px;}

#gallerylisting li {

	width: 140px;
	background:#FFF;
	padding:0px;
	text-align: center;
	position: relative;
	float: left;
	display: inline;
	margin:0 20px 15px 0;
}

#gallerylisting li a span{
/*\*/
	position: absolute;
	left: -9999px;

}

#gallerylisting li a:hover span{	
	bottom: 0px;
	left: 0px;
	width: 140px;
	background: #2e5777;
	color: #FFF;
	padding: 5px 0 5px 0;
	font-size: 80%;
	border: 1px solid #EEE;
	border-width: 0 0 5px 0;
	filter: alpha(opacity=100);
/**/
} 



/*=Error Mesages
	-------------------------------------------------------*/
	ul.error,ul.success { list-style: disc; margin-left: 20px; margin-bottom: 10px; }
	.error { color: #990000; font-weight: bold; }
	em.error  { display: block; }
	ul.success {
		display: block;
		list-style: none;
		background: #006633;
		color: #fff;
		padding: 2px;
	}
/*=Links
	-------------------------------------------------------*/
.links li { padding: 5px; }

/*=Brochure request form
	-------------------------------------------------------*/
form.brochureForm fieldset {
	padding: 5px 20px;
	border: 0;
	margin: 0 0 10px 0;
}
form.brochureForm legend {
	text-transform: capitalize;
	font-weight: bold;
	color: #039;
	padding: 0 5px;
}
form.brochureForm ol {
	list-style: none;
}
form.brochureForm ol li {
	margin: 5px 0;
}
	form.brochureForm ol li ol li {
		display: inline;
	}
	form.brochureForm ol li ol label {
		display: inline;
	}
form.brochureForm em {
	font-weight: bold;
	color: #E00;
}
form.brochureForm label {
	display: block;
	text-transform: capitalize;
}
form.brochureForm label.radio {
	display: inline;
	padding-left: 5px;
}


/*=Tidy Forms
	-------------------------------------------------------*/

	.tidyForm label { float: left; width: 150px; padding-top: 5px; min-height: 1px; margin-bottom:20px; }
	.tidyForm p { clear: left; }
	
	
	.tidyForm fieldset { border: none; border-bottom: 1px solid #ccc; margin-bottom: 15px; padding:0;}
	
	.tidyForm legend { margin: 0 0 10px 0; font-weight: bold; font-size:120%; color:#972c8f; padding:0;}
	
	
	.tidyForm div.error { margin-left: 180px; font-size:90%; color:#952b2b; }
	
	.tidyForm input { margin-bottom:5px; }
	
	ul.error { border:1px solid #cb2026; background:#f6cbca; padding:10px 10px 10px 20px;; color:#cb2026; margin-left:0;  }
	ul.success { background:#cee6c3; border:1px solid #359545;padding:10px 10px 10px 20px;; color:#359545; margin-left:0; }
	
	.inputfield {width:240px;}
	
	

fieldset {
	border: 0;
}
.field {
	float: left;
	clear: both;
	padding-bottom: 12px;
}

.field p {float:left; width:100px;}

.field .inline_field {
	float: left;
	padding-right: 18px;
}
.input_text {
	background: #fff;
	padding: 2px 2px;
	border: 1px solid #ccc;
	border-color: #333 #ccc #ccc #333;
}
.field .input_text, .field select,  .field  .input_submit {
	font-size: 12px;
	line-height: 1.4;
}

.input_submit, .submit { 
		padding: 5px 10px
	}
select {
	background: #fff;
}
legend { display: none; }
option {
	font-size: 1em !important;
}
.field label {
	display: block;
	padding: 0 0 2px;
	color: #333;
}

#type_select {
    float:left;
    width:100%;
    /*background:#DAE0D2 url("../images/bg.gif") repeat-x bottom; */
		border-bottom:1px solid #333;
    margin:0 0 10px 0;
    line-height:normal;
}

#type_select ul {
    margin:0;
    padding:0;
    list-style:none;
    padding:10px 10px 0 0;

}
#type_select li {
    float:left;
    /*background:url("../images/tab_right.gif") no-repeat right top;*/
		border: 1px solid #333; border-bottom: none; border-right: none;
    margin:0;
    padding:0; 
}
#type_select a {
    display: block;
    text-decoration: none;
    /*background:url("../images/tab_left.gif") no-repeat left top;*/
	
    padding:5px 15px 4px;

}
#type_select ul li.bookend { border-right:1px solid #333;}

#type_select #current {
    /*background-image:url("../images/tab_right_on.gif");*/
}
#type_select #current a {
    /*background-image:url("../images/tab_left_on.gif");
    padding-bottom:5px;*/
		background: #333; color: white;

}
#type_select a:hover { color: white; 	background:#333; }







/*=Icons
	-------------------------------------------------------*/

.event_icon{ }
.notice_icon { }





/*=Archives
	-------------------------------------------------------*/

ol.archive_list ol {
	padding:20px;
	list-style:disc;
}
ol.archive_list ol li { margin-bottom: 10px; }
ol.archive_list ol p { margin-bottom:0; }

ol.archive_list ol span { display: block; font-size: 90%; font-weight: normal; }






/*=Fixes
	-------------------------------------------------------*/
	
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */