/*Advanced Roofing CSS - www.arc8.co.uk*/



* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

body {
text-align: center;
font:70%/1.5 Arial, Helvetica, sans-serif;
color: #3D3F3F;
background-color: #D9D9D9;
}

h1, h2, h3{
border-bottom:1px dotted #7F8182;
margin-bottom: 10px;
color:#1E5062;
}

h1, h2{
height: 29px;
}

h1{
font-size: 1.6em;
}

h2{
	font-size: 1.2em;
	color: #1D515C;
	margin-top:10px;
	height:25px;
}

h3{
margin: 0;
font-size: 1.2em;
border:none;
}

h4{
font-size: 1em;
margin: 5px 0 2px 0;
color:#1E5062;
}

h5{
font-size: 1.3em;
}

h6{
font-size: 1.5em;
}


p{
margin-bottom: 1em;
font-size: 1.2em;
text-align:justify;
line-height:1.3em;
}

li{
font-size: 1em;
}

label{
font-size: 0.9em;
}

a{
text-decoration: none;
color: #1E5062;
font-weight:bold;
}

a:hover{
text-decoration:underline;
}

a img{
border: none;
}

/*** layout ***/

#header div, div#innerFoot, div#content{
width: 780px;
margin: 0 auto;
text-align: left;
}

div#content{
padding: 40px 0;
}

#home div#content{
}

div#footer{
min-height: 170px;
}

#footer1{
float:left;
width:205px;
}

#footer2{
float:left;
width:250px;
}

#footer3{
float:left;
width:300px;
}

#footer4{
float:left;
width:160px;
}

#footer5{
border-top: 1px dotted #999999;
clear:left;
padding-top:5px;
}

#footer5 div{
float:left;
width:150px;
}


#footer5 .button{
width:200px;
}

div#container{
background-color:#fff;

}

/* columns */

.rightColumn{
float: right;
width: 195px;
}

.rightColumn p, .leftComment{
font-size: 1em;
color:#6a6a6a;
text-align:left;
line-height:1.3em;
}

.leftColumn{
float: left;
width: 175px;
}

.rightMargin{
margin-right: 225px;
}

.leftMargin{
margin-left: 205px;
}

/* columns and margins are different on home page */

#home .leftColumn{

}


/* page margins - creates 20px gutter on edge of page */

.leftPageMargin{
margin-left:0px;
}

.rightPageMargin{
margin-right:20px;
}

/* if there's no title at the top of the column, nudge it down */

.noTitle{
margin-top: 50px;
}

.contentPhoto{
margin-top: 30px;
}

div.rightColumn h2{
margin-bottom:15px;
}


/*** header ***/

#header{
background: #AAABAF url("../graphics/header_bg.gif") repeat-x top;
}

#header div{
background: url("../graphics/london_scape.jpg") no-repeat;
position: relative;
}


#header img{
position: absolute;
top: 28px;
left: 0;
}

#header ul{
list-style: none;
padding-top: 117px;
}

#header ul li{
float: left;
margin-right: 2px;
}

#header ul li a{
padding: 3px 36px 0 0px;
color: #D3D6DD;
display: block;
line-height: 22px;
margin: 0 0 5px 0;
font-weight:bold;
text-decoration:none;
}

#header ul li a:hover{
border-bottom: 5px solid #DBDCE1;
color: #F1F3F7;
margin: 0;
}

#header ul li#active a{
border-bottom: 5px solid red;
color: #fff;
margin: 0;
}

#header ul li#brochureActive a{
border-bottom: 5px solid red;
color: #fff;
margin: 0;
margin-left: 10px;
}

#header div ul.rightColumn li{
width:175px;
background-image: url("../graphics/brochures_gradient_bg.gif");
background-repeat: no-repeat;
}

#header div ul.rightColumn li a{
background-image: url("../graphics/brochures_arrow.gif");
background-repeat: no-repeat;
background-position: 0 10px;
padding-left: 10px;
margin-left: 10px;
}

#header div ul.rightColumn li a:hover{
margin-left:10px;
}

/*** content ***/

/** home page **/

/* bubble links */

ul#bubbles{
list-style: none;
margin-bottom: 30px;
}

ul#bubbles li{
float: left;
}

ul#bubbles li a{
width: 195px;
height:90px;
color: #2C3E44;
display: block;
font-weight: 800;
background-position: top left;
background-repeat: no-repeat;
display: block;
line-height: 1.2em;
}

/*li#bubbles1 a{
background-image: url("../graphics/bubble_bg_1.gif");
}

li#bubbles1 a:hover{
background-image: url("../graphics/bubble_bg_1_on.gif");
}

li#bubbles2 a{
background-image: url("../graphics/bubble_bg_2.gif");
}

li#bubbles2 a:hover{
background-image: url("../graphics/bubble_bg_2_on.gif");
}

li#bubbles3 a{
background-image: url("../graphics/bubble_bg_3.gif");
}

li#bubbles3 a:hover{
background-image: url("../graphics/bubble_bg_3_on.gif");
}

li#bubbles4 a{
background-image: url("../graphics/bubble_bg_4.gif");
}

li#bubbles4 a:hover{
background-image: url("../graphics/bubble_bg_4_on.gif");
}

ul#bubbles li a:hover{

}*/



li#bubbles1 a{
background-image: url("../graphics/bubble_1.jpg");
}

li#bubbles1 a:hover{
background-position: 0px -90px; 
}

li#bubbles2 a{
background-image: url("../graphics/bubble_2.jpg");
}

li#bubbles2 a:hover{
background-position: 0px -90px; 
}

li#bubbles3 a{
background-image: url("../graphics/bubble_3.jpg");
}

li#bubbles3 a:hover{
background-position: 0px -90px; 
}

li#bubbles4 a{
background-image: url("../graphics/bubble_4.jpg");
}

li#bubbles4 a:hover{
background-position: 0px -90px; 
}


ul#bubbles li span{
padding: 37px 0 0 95px;
display: block;
}

/* quick links */

ul#quickLinks{
list-style: none;
margin-top:10px;
}



/* latest projects */

#latestProjects a, ul#quickLinks a{
display: block;
color: #1E5062;
background: url("../graphics/red_arrow.jpg") no-repeat 0 14px;
padding-left: 10px;
font-weight: 800;
margin:3px 0 2px 0;
}

ul#quickLinks img{
float: left;
margin-bottom: 6px;
}

ul#quickLinks li{
clear: left;
}

ul#quickLinks a{
margin: 23px 0px 0px 7px;
float: left;
width: 83px;
background-position: left 50%;
}

ul#quickLinks img{
border: 3px solid #e9e9e9;
}

ul#quickLinks li.active a{
color: #fe1302;
}

#latestProjects a{
background-position: 0 0.3em;
}

.latestAimage{
background:none;
background-image:none;
}

#latestProjects img{
border: 5px solid #e9e9e9;
}

#latestProjects a:hover, #quickLinks a:hover{
text-decoration: underline;
}

/* logos */

ul#logos{
list-style: none;
border-top: 1px dotted #7F8182;
margin-top:30px;
padding-top: 10px;
}

ul#logos li{
	float: left;
	margin-right: 17px;
}

ul#logos li.last{
margin-right: 0
}

/* blue bullets */

ul.blueBullets{
list-style:none;
margin-top:8px;
}

ul.blueBullets li{
background: url("../graphics/blue_bullet.gif") no-repeat 0 7px;
padding:0px 0px 5px 14px;
font-size:1.1em;
	
}

.rightColumn img{
/*border: 0px solid #9faab0;*/
}

/* side menu */

#sideMenu{
background: url("../graphics/side_menu_top.gif") no-repeat top left;
padding-top:39px;
}

#sideMenu a{
text-decoration:none;
}


#sideMenu ul{
list-style: none;
padding-bottom: 63px;
background: url("../graphics/side_menu_bottom.gif") no-repeat bottom;
margin: 0;
width: 165px;

}

#sideMenu ul a{
display: block;
background:#E9EBEC url("../graphics/side_menu_arrow_off_light.gif") no-repeat 10px 50%;
border-bottom: 1px solid #fff;
padding:2px 0px 2px 20px;
line-height: 20px;
color: #1E5062;
font-weight:bold;
}

#sideMenu ul li.darker a{
background:#DADFE1 url("../graphics/side_menu_arrow_off.gif") no-repeat 10px 50%;

}

#sideMenu ul li a:hover{
background-color:#cbcdce;
background-image: url("../graphics/side_menu_arrow_over.gif");
}

#sideMenu ul li.active a{
background-color:#8EB0C1;
background-image: url("../graphics/side_menu_arrow_on.gif");
color: #fff;
}

/*** footer ***/

div#footer{
background: #D9D9D9 url("../graphics/footer_bg.gif") repeat-x top;
}


div#footer p{
color:#646363;
font-size:1em;
line-height:1.4em;
}


div#innerFoot{
padding-top: 20px;
}

div#footer a{
color: #265E72;
}

div#footer a:hover{
text-decoration: underline;
}

.red{
color:#FE1302;
margin:0;
padding:0;
}

div#footer h5{
line-height:0.7em;
}

.turq{
color: #265E72;
}

div#footer form p{
margin: 0;
}

div#footer form input{
width: 130px;
margin-right: 5px;
border: 1px solid #939393;
}

div#footer form input#send{
width: auto;
margin: 0;
float: right;
margin-top: -20px;
border:none;
font-size:1em;
}



/********************** clearfix **********************/

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}
§