/*=================================*/

/* My A&S Landscape 

/* November 2012

/* http://my.aandslandscape.co.uk/

/* By: David Harris



/* Useful information

/* Green: #BBD24C

/* Grey: #818285

/*=================================*/



/*====================*/

/*===    Global    ===*/

/*====================*/

* {margin:0;padding:0;}



body {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; overflow-y: scroll;}



h1 {color:#818285; font-size:34px; font-weight:normal;}

h2 {color:#333; font-size:22px; font-weight:bold; margin:10px 0px 15px 0px;}

h3 {color:#BBD24C; font-size:16px; line-height:22px; margin-bottom:5px;}



p {margin-bottom:15px; font-size:13px;}

ul.bulletlist {list-style-type:square; margin-left:20px;}

ul.bulletlist li {margin-bottom:8px;}



a {text-decoration:underline;; color:#333;}

a:hover {text-decoration:underline; color:#333;}



.green {color:#BBD24C;}

.green a {color:#BBD24C;}



img, img a {border:0}

.clearfix {clear:both;}



/*====================*/

/*===    Header    ===*/

/*====================*/

#headerWrapper {

	width:100%;

	background-image:url('../images/header/headerbg.gif');

	background-repeat:repeat-x;

	height:170px;

}



#headerWrapper .headerContent {

	margin:auto; 

	width:850px;

	padding:0px 40px;

}



#headerWrapper .headerContent .logo {

	width:150px;

	float:left;

}



#headerWrapper .headerContent .rightStrapline {

	float:right;

	width:600px;

	height:60px;

	margin:30px 0px 15px 0px;

	text-align:right;

}

#headerWrapper .headerContent .rightNav {

	float:right;

	width:280px;

	height:40px;

	font-size:16px;

	color:#FFF;

	font-weight:bold; 

	text-align:right;

}



/*====================*/

/*== Middle Content ==*/

/*====================*/

#middleWrapper {

	width:100%;

	clear:both; 

	background:#FFF;

}



#middleWrapper .middleContent {

	width:850px;

	padding:0px 40px;

	margin:auto;

}



							/**** Internal, left & right ****/



#middleWrapper .middleContent .left {

	width:550px;

	float:left;

}



#middleWrapper .middleContent .right {

	float:right;

	width:280px;

}



							/**** Internal, full width ****/



#middleWrapper .middleContent .fullwidth {

	width:850px;

	margin:auto;

	clear:both;

}



							/**** Home, 3 equal collumns ****/



#middleWrapper .middleContent .collumn {

	width:195px;

	float:left;

	padding:20px 40px;

}



#middleWrapper .middleContent .collumn a {

	font-size:20px;

	font-weight:bold;

	line-height:35px;

}



/*====================*/

/*==  Gallery page  ==*/

/*====================*/						

.galleryTeaser {

	float:left;

	margin-right:15px;

	margin-bottom:10px;

	width:160px;

}



.galleryThumb {width:160px;}



/*====================*/

/*==  Options page  ==*/

/*====================*/

.standardColours {

	display:block;

	float:left;

	width:170px;

	height:50px;

	padding:40px 0px 0px 0px;

	margin:0px 10px 10px 0px;

	font-size:15px;

	text-align:center;

	color:#FFF;

}



.roofingColours {

	display:block;

	height:150px;

	float:left;

	margin:0px 10px 10px 0px;

	padding:0px 0px 0px 0px;

	text-align:center;

	font-size:14px;

}



.roofingColours img {width:170px; padding-bottom:5px;}



/*====================*/

/*===  Navigation  ===*/

/*====================*/

ul.rightNav {

	list-style:none;

}



ul.rightNav li {

	display:block;

	width:280px;

	height:33px;

	padding-top:12px;

	background-image:url('../images/nav/green.gif');

	background-repeat:repeat-x;

	text-align:center;

	font-size:20px;

margin-bottom:10px;

	-moz-box-shadow: -5px 5px 5px #888;

	-webkit-box-shadow: -5px 5px 5px #888;

	box-shadow: -5px 5px 5px #888;



}



ul.rightNav li .current {

	display:block;

	width:280px;

	height:33px;

	padding-top:12px;

	margin-top:-12px;

	background-image:url('../images/nav/grey.gif');

	background-repeat:repeat-x;

	text-align:center;

	font-size:20px;

	margin-bottom:25px;

	-moz-box-shadow: -5px 5px 5px #888;

	-webkit-box-shadow: -5px 5px 5px #888;

	box-shadow: -5px 5px 5px #888;

}



ul.rightNav li a {

	color:#FFF;

	display:block;

	text-decoration:none; !important

}



/*====================*/

/*==  Capture Form  ==*/

/*====================*/

form label {

	float:left;

	width:100px;

	margin-bottom:20px;

	clear:left;

}



form input {

	width:300px;

	margin-bottom:20px;

	clear:left;

}



/*====================*/

/*==  Conact Panel  ==*/

/*====================*/

.panel {

	position: fixed;

	top: 200px;

	left: 0;

	display: none;

	background-color: #676766;

	width: 610px;

	height:156px;

	padding: 0px 0px 0px 60px;

	/*filter: alpha(opacity=90);

	opacity: .90;*/

	z-index:700;

}



.panelText{

	color:#fff;

	line-height:20px;

}



.panelText a{

	color:#fff;

	text-decoration:none;

	font-weight:bold;

}



.panelText a:hover{

	color:#fff;

	text-decoration:underline;

}



a.trigger{

	position: fixed;

	top: 200px;

	left: 0;

	width:40px;

	height:156px;

	background-image:url('../images/contact/farleft.png');	

	background-repeat:no-repeat;

	display: block;

	z-index:710;

}



a.trigger:hover{

	position: fixed;

	top: 200px;

	left: 0;

	width:40px;

	height:156px;

	background-image:url('../images/contact/farleft.png');	

	background-repeat:no-repeat;

	display: block;

}



a.active.trigger {

	background-image:url('../images/contact/farleft.png');	

	background-repeat:no-repeat;

}



/*====================*/

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

/*====================*/

#footerWrapper {

	width:100%;

	clear:left;

	background-color:#cccdcd;

	margin-top:20px;

}



#footerWrapper .footerContent {

	width:850px;

	padding:15px 40px;

	margin:auto;

}



#footerWrapper .footerContent .left {	

	float:left;

	width:420px;

	line-height:17px;

}



#footerWrapper .footerContent .left .leftOne {

	width:220px;

	height:70px;

	float:left;

}



#footerWrapper .footerContent .left .leftTwo {

	width:200px;

	height:70px;

	float:right;

	text-align:left;

}



#footerWrapper .footerContent .right {

	float:right;

	width:260px;

}



.highlight:after{
	padding-left: 5px;
    content : '✓';
    color : green;
    font-size: 20px;
}

.highlight2:after {
    padding-left: 5px;
    content : '✓';
    color : green;
    font-size: 20px;
 }


#left_sidebar {
	float:left;
	position: absolute;
	width:250px;
	height: 540px;
	padding: 0px;
	border-right: 1px black solid;
	display: inline;

}

#left_sidebar h4{
color:#fff;
margin-top: 20px;
background-color:#BBD24C;
font-size: 14px;
padding: 10px;
}

#left_sidebar .option{
margin-left: 10px;
margin-top: 10px;
}


#output_image  {
	margin-left: 240px;
	text-align:center;
}

#output_image  img{
	margin-top:30px;
max-width: 380px;
}

#main_visual {
	position:relative;
	width:900px;
	float: none;
	height: 540px;
	border: 1px black solid;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left:20px;
}

.options {
	font-size: 24px;
	text-align: center;
	color:#BBD24C;
	display:block;
	margin-top: 10px;
}


/*circles*/
.circleBase {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    display: inline-block;
    margin-right: 3px;
}

/*blue*/
.type1 {
    width: 15px;
    height: 15px;
    background: #0033CC;
    border: 1px solid #000;
}
/*red*/
.type2 {
    width: 15px;
    height: 15px;
    background: #B80000 ;
    border: 1px solid #000;
}
/*green*/
.type3 {
    width: 15px;
    height: 15px;
    background: #006600;
    border: 1px solid #000;
}
/*purple*/
.type4 {
    width: 15px;
    height: 15px;
    background: #CC00FF;
    border: 1px solid #000;
}
/*clear - white*/
.type11 {
    width: 15px;
    height: 15px;
    background: #fff;
    border: 1px solid #000;
}
/*moodust*/
.type12 {
    width: 15px;
    height: 15px;
    background: #E0DFDB;
    border: 1px solid #000;
}
/*yellow*/
.type13 {
    width: 15px;
    height: 15px;
    background: #F0A804;
    border: 1px solid #000;
}
/*rainbow*/
.type14 {
    width: 15px;
    height: 15px;
    background-image:url('../images/visual/colourful_rainbow_colour_gradient_print-r0e916b0c8c9a4155844298d36fddbaf7_w2u_8byvr_50.jpg');
    background-position: center center;
    border: 1px solid #000;
}
/*signal green*/
.type15 {
    width: 15px;
    height: 15px;
    background: #66BA65;
    border: 1px solid #000;
}
/*burgundy*/
.type16 {
    width: 15px;
    height: 15px;
    background: #66474C;
    border: 1px solid #000;
}
/*marine blue*/
.type17{
    width: 15px;
    height: 15px;
    background: #4E5999;
    border: 1px solid #000;
}
/*mid blue*/
.type18{
    width: 15px;
    height: 15px;
    background: #4784D5;
    border: 1px solid #000;
}
/*dark blue*/
.type19{
    width: 15px;
    height: 15px;
    background: #4F487C;
    border: 1px solid #000;
}
/*grey*/
.type20{
    width: 15px;
    height: 15px;
    background: #A0A2A1;
    border: 1px solid #000;
}
/*slate grey*/
.type21{
    width: 15px;
    height: 15px;
    background: #6D6F6E;
    border: 1px solid #000;
}
/*slate grey*/
.type22{
    width: 15px;
    height: 15px;
    background: #000000;
    border: 1px solid #000;
}


.footerContent .right img{
    width:100%;
}

/*************************************
technicalDrawings
**************************************/


.technicalDrawings  {
	border: 1px solid #000;
	border-collapse:collapse;
	margin: auto;
}

.technicalDrawings td, tr {
	border: 1px solid #000;
	padding: 10px;
}

.technicalDrawings td{
	width:200px;
}

.technicalDrawings tr td:nth-child(2) {
	width: 200px;
}

.technicalDrawings tr td:nth-child(3) {
	width: 200px;
}

.technicalDrawings tr td img {
	float: right;
}

.technicalDrawings p {
	font-weight: bold;
}

.technicalDrawings #sidebar {background-color: #e6eed5; text-align: center;}