@import url("reset.css");
@import url("nav.css");


/*-----------------------
Colours - Patios Plus

Red = #9f2300
Yellow = #edc847
Blue = #007dc6

----------------------*/



/*-----------------------
Body
----------------------*/
body { background: #bcab98 url('../images/bg.gif') repeat-x center top; }

h1 { font: bold 20px/18px Verdana, Arial, Helvetica, sans-serif; color: #9f2300; }
h2 { font: bold 16px/16px Verdana, Arial, Helvetica, sans-serif; color: #edc847; }
h3 { font: bold 12px/12px Verdana, Arial, Helvetica, sans-serif; }

hr { border: 0; border-top: 1px dashed #c7c7c7; height: 1px; margin: 15px 0; }


/*-----------------------
Wrap
----------------------*/
#wrap {
	width: 908px;
	height: auto;
	margin: 0 auto;
}



/*-----------------------
Container
----------------------*/
#container {
	width: 908px;
	height: auto;
	margin: 0 auto;
	font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
	color: #312f2c;
	padding-bottom: 20px;
}

a { color: #007dc6; text-decoration: none; }
a:hover { color: #52ade2; text-decoration: underline; }

p { margin: 13px 0; }



/*-----------------------
Header
----------------------*/
div.header {
	width: 908px;
	height: 155px;
	padding: 0;
	margin: 0;
	position: relative;
	background: url('../images/bg-header.jpg') 0 0 no-repeat;
}

div.logo { 
	width: 377px;
	height: 34px;
	margin: 37px 0 0 56px;
	padding: 0;
	position: absolute; 
	top: 0; 
	left: 0;
}

div.logo img {
	border: 0;
}


/*  Call Action  */
div.call-action {
	width: 133px;
	margin-left: 598px;
	padding: 0;
	position: absolute;
	/*cursor: pointer;*/
}

div.call-action h2 {
	/*display: block;*/
	width: 133px;
	height: 73px;
	text-indent: -9999px;
	overflow: hidden;
	background: url('../images/phone-enquires.jpg') 0 0 no-repeat;
}

div.fair-dinkum {
	width: 125px;
	height: 25px;
	position: absolute;
	margin: 8px 0 0 743px;
}


/*   Nav   */
div.nav-container {
	width: 453px;
	height: 22px;
	position: absolute;
	margin: 0;
	right: 0;
	top: 107px;
}



/*-----------------------
Banner
----------------------*/
div.banner {
	width: 826px;
	height: 376px;
	padding: 0 41px;
	margin: 0;
	background: url('../images/bg-banner.jpg') 0 0 no-repeat;
}

#flash { margin-top: -5px; }



/*-----------------------
Container Content
----------------------*/
div.container-content {
	width: 908px;
	height: auto;
	background: url('../images/bg-content.jpg') repeat-y 0 0;
}



/*-----------------------
Content
----------------------*/
div.content {
	width: 824px;
	height: auto;
	padding: 30px 44px 50px 40px;
}

div.content-centre {
	width: 779px;
	height: auto;
	padding-left: 26px;
}

div.content-centre ul {
	list-style: disc;
	margin-left: 20px;
	margin-bottom: 13px;
}

div.content-left {
	width: 574px;
	height: auto;
	padding-left: 26px;
	float: left;
}


div.content-right {
	width: 149px;
	height: auto;
	padding: 4px 19px 0 56px;
	float: left;
}



/*-----------------------
Page titles
----------------------*/
h1.pagetitle-left {
	text-indent: -9999px;
	width: 574px;
	height: 20px;
	padding-bottom: 19px;
}

body.home h1.pagetitle-left { background: url('../images/titles/welcome.jpg') no-repeat; }
body.profile h1.pagetitle-left { background: url('../images/titles/company-profile.jpg') no-repeat; }
body.patios h1.pagetitle-left { background: url('../images/titles/patios.jpg') no-repeat; }
body.sheds h1.pagetitle-left { background: url('../images/titles/sheds.jpg') no-repeat; }
body.form-sheds h1.pagetitle-left { background: url('../images/titles/kit-form-sheds.jpg') no-repeat; }
body.garage h1.pagetitle-left { background: url('../images/titles/garage-doors.jpg') no-repeat; }
body.contact h1.pagetitle-left { background: url('../images/titles/contact.jpg') no-repeat; }

h1.pagetitle-right{
	text-indent: -9999px;
	width: 149px;
	height: 36px;
	padding-bottom: 11px;
}

body.home h1.pagetitle-right { background: url('../images/titles/visit-our-office.jpg') no-repeat; }



/*-----------------------
Affiliates logo
----------------------*/
div.affiliates-logo {
	width: 795px;
	height: 64px;
	padding: 0 53px 0 60px;
	float: left;
}

div.affiliates-logo img { padding: 0 5px; }



/*-----------------------
Profile
----------------------*/
div.right-gallery {
	margin-top: 45px;
}

div.right-gallery ul {
	list-style-type: none;
}

div.right-gallery ul li {
	margin-top: 10px;
}

div.right-gallery ul li img {
	border: 5px solid #e3cda6;
}


/*-----------------------
Patios
----------------------*/
div.product {
	width: 779px;
	height: auto;
	padding: 15px 0 5px 0;
}

div.product-image {
	float: left;
	width: 130px;
	height: auto;
	padding: 15px 0;
}

div.product-image div.caption {
	color: #949494;
	font: 9px Verdana, Arial, Helvetica, sans-serif;	
	display: block;
	padding-top: 2px;
}

div.product-caption {
	color: #949494;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	display: block;
	padding-bottom: 4px;
}

div.product-swatches ul {
	list-style-type: none;
}

div.product-swatches ul li {
	float: left;
	padding: 3px;
	margin-right: 2px;
}

div.product-swatches ul li a {
	width: 15px;
	height: 15px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

div.product-swatches ul li a.red {
	background: #841921;
}

div.product-swatches ul li a.blue {
	background: #29314a;
}

div.product-swatches ul li a.green {
	background: #637352;
}

div.product-swatches ul li a.lightbrown {
	background: #6b5a52;
}

div.product-swatches ul li a.orange {
	background: #a52108;
}

div.product-swatches ul li a.darkgreen {
	background: #3a4a3a;
}

div.product-swatches ul li a.lightgreen {
	background: #7b9473;
}

div.product-swatches ul li a.grey {
	background: #9c9c8c;
}

div.product-swatches ul li a.yellow {
	background: #d6ce94;
}

div.product-swatches ul li a.green1 {
	background: #213a29;
}

div.product-swatches ul li a.aqua {
	background: #3a6363;
}

div.product-swatches ul li a.lightgrey {
	background: #d6ded6;
}

div.product-swatches ul li a.green2 {
	background: #3a4a42;
}

div.product-swatches ul li a.black {
	background: #000;
}

div.product-swatches ul li a.darkblue {
	background: #293152;
}

div.product-swatches ul li a.cream {
	background: #e6dec5;
}

div.product-swatches ul li a.lightblue {
	background: #eff7f7;
}

div.product-swatches ul li a.cream1 {
	background: #f7efd6;
}

div.product-swatches ul li a.green3 {
	background: #8c8c73;
}

div.product-swatches ul li a.darkcream {
	background: #d6ceb5;
}

div.product-top {
	color: #949494;
	font: 10px Verdana, Arial, Helvetica, sans-serif;	
	display: block;
}

div.product-top a { color: #949494; text-decoration: none; }
div.product-top a:hover { color: #949494; text-decoration: underline; }

/* Product Gallery */

div.product-gallery {
	width: 779px;
	height: auto;
}

div.product-gallery:after {
    content: "."; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden;
}

div.product-gallery ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

div.product-gallery ul li {
	float: left;
	padding: 10px;	
}


/*-----------------------
Kit Form Sheds
----------------------*/
div.content ol { margin:0 0 10px 50px; }

div.content ol li {
	padding: 2px 0;
}



/*-----------------------
Contact Form
----------------------*/
form.form fieldset,
form.form ol, 
form.form li, 
form.form legend {
	margin: 0;
	padding: 0;
}

form.form fieldset { border: 0; }

form.form ol { list-style: none; }

form.form li { margin-bottom: 5px; }

form.form label {
	display: inline-block;
	width: 150px;
}

form.form input, form.form select, form.form textarea {
	width: 250px;
	padding: 3px;
	border: 1px solid #ddd;
	background: #fff;
	font: normal 13px/13px Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	vertical-align: top;
}

form.form textarea { height: 200px; }

form.form select {
	padding: 0;
	width: auto;
}

form.form li.button { margin-top: 15px; }

form.form li.button input {
	width: auto;
	border: 0;
	background: #312f2c;
	color: #fff;
	cursor: pointer;
}

form.form fieldset legend {
	padding: 20px 0;
	font-weight: bold;
	font-size: 18px;
	color: #444;
	_margin: 0 -7px; /* IE Win fix */
}

/* IE Mac legend fix */
form.form legend {
  display: inline-block;
}



/*-----------------------
Footer
----------------------*/
div.footer {
	width: 788px;
	height: 26px;
	padding: 43px 60px 10px 60px;
	position: relative;
	background: url('../images/bg-footer.jpg') no-repeat 0 0;
}


div.footer-links {
	width: 530px;
	padding: 0px;
	float: left;
	font: 11px/14px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
}

div.footer-links a { color: #fff; text-decoration: none; }
div.footer-links a:hover { color: #abc088; text-decoration: underline; }

div.wflogo {
	width: 153px;
	height: 23px;
	margin: 0;
	position: absolute; right: 55px; top: 34px;
}