/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}

html { width: 100%; font-size: 100%; background-color: #fff; }

body {background: #fff;
		-webkit-font-smoothing: antialiased;
		font-family: 'Arial', sans-serif;
		font-size: 14px;
		line-height: 22px; 
		width: 100%; 
		color: #154B6F;
		min-width: 320px;
		-webkit-text-size-adjust: 100%; 
		-ms-text-size-adjust:none;
		-moz-text-size-adjust:none;
		text-size-adjust:none; 
		margin-top: 1px;
		overflow-x: hidden;
}

a, a:active, a:focus{ outline:none; text-decoration: none; }  
a:visited{color: inherit;}

a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

h2 {clear: both; float: none;}

p strong {font-weight: bold;}

.bg1 {
	background-image: -ms-linear-gradient(bottom, #0494c7 47%, #0380ac 100%);
	background-image: -moz-linear-gradient(bottom, #0494c7 47%, #0380ac 100%);
	background-image: -o-linear-gradient(bottom, #0494c7 47%, #0380ac 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.47, #0494c7), color-stop(1, #0380ac ));
	background-image: -webkit-linear-gradient(bottom, #0494c7 47%, #0380ac 100%);
	background-image: linear-gradient(to top, #0494c7 47%, #0380ac 100%);
	background-image: linear-gradient(to top, #0494c7 47%, #0380ac 100%);
}
.content { max-width: 1280px; margin: 0 auto;  position: relative; background-color: #fff; }

/*.content:before {
    background: url('images/background-slice-lt.png');
    content: " ";
    height: 100%;
    left: -8px;
    position: absolute;
    top: 0;
    width: 8px;
}*/

/*.content:after {
    background: url('images/background-slice-lt.png');
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    right: -8px;
    width: 8px;
}*/

header {overflow: hidden; height: 120px;}
#main-logo { float: left; margin: 29px 0 0 40px; width: 30%; max-width: 214px; background-image: url("images/logo.png"); height: 0; text-indent: -3333px; background-size: 100%; padding-top: 26.8%; background-repeat: no-repeat;}
#main-logo img { width: 100%; max-width: 214px;}
/*#main-logo a {width: 214px; height: 90px; display:block; background: url('../images/logo.png') no-repeat; text-indent: -9999px;  }*/
#info {float: right; margin: 65px 380px 0 0; text-align: right; font-family: "myriad-pro", sans-serif; font-style: normal; font-weight: 300; font-size: 25px}
.phonenumber {margin: 0 0 6px 0;}
.phonenumber strong {font-weight: 400; font-size: 26px}
.tagline { color: #41b9eb; }
#main-menu {
	background-image: -ms-linear-gradient(top, #FFFFFF 20%, #CDCFD1 100%);
	background-image: -moz-linear-gradient(top, #FFFFFF 20%, #CDCFD1 100%);
	background-image: -o-linear-gradient(top, #FFFFFF 20%, #CDCFD1 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.20, #FFFFFF), color-stop(1, #CDCFD1));
	background-image: -webkit-linear-gradient(top, #FFFFFF 20%, #CDCFD1 100%);
	background-image: linear-gradient(to bottom, #FFFFFF 20%, #CDCFD1 100%);
	height: 52px;
	padding: 1px 0 0 40px;
	clear: both;
	margin-top: 25px;
}

#main-menu li { 
	float: left;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 52px;
	vertical-align: middle;
	width: 100px;
	display: block;
	text-align: center;
	height: 52px;
}

#main-menu li a:hover {
	background-image: -ms-linear-gradient(top, #FFFFFF 20%, #b8babc 100%);
	background-image: -moz-linear-gradient(top, #FFFFFF 20%, #b8babc 100%);
	background-image: -o-linear-gradient(top, #FFFFFF 20%, #b8babc 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.20, #FFFFFF), color-stop(1, #b8babc));
	background-image: -webkit-linear-gradient(top, #FFFFFF 20%, #b8babc 100%);
	background-image: linear-gradient(to bottom, #FFFFFF 20%, #b8babc 100%);
}

#main-menu li a { display: block; width: 100%; height: 100%; color: #504f4f; }

#main-menu li.active {
	background-image: -ms-linear-gradient(top, #FFFFFF 20%, #43b9eb 100%);
	background-image: -moz-linear-gradient(top, #FFFFFF 20%, #43b9eb 100%);
	background-image: -o-linear-gradient(top, #FFFFFF 20%, #43b9eb 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.20, #FFFFFF), color-stop(1, #43b9eb));
	background-image: -webkit-linear-gradient(top, #FFFFFF 20%, #43b9eb 100%);
	background-image: linear-gradient(to bottom, #FFFFFF 20%, #43b9eb 100%);
}

#main-menu li:last-child:after { 
	background: url('images/menu-border.png'); height: 52px; width: 1px; float: right; content: "";
}

#main-menu li:before { 
	background: url('images/menu-border.png'); height: 52px; width: 1px; float: left; content: "";
}

#hero { height: 315px; overflow: auto; position: relative; border-bottom: 13px solid #f6c58b;}
#hero h2 { color: #cbfbf6; font-weight: 400; font-family: 'Open Sans', sans-serif; font-size: 40px; margin: 40px 0 0 37px; letter-spacing: -1px; width: 600px; line-height: 40px; position: relative; z-index: 5;}
#hero h3 { color: #e1f0fb; font-weight: 300; font-family: 'Open Sans', sans-serif; font-size: 30px; margin: 20px 0 0 37px; width: 560px; line-height: 34px; letter-spacing: -1px; position: relative; z-index: 5;} 

.clear {float: none; clear: both; overflow: hidden;}
.left {float: left; }

.home-background { background: url('images/background-slice.png'), url('images/home-hero.jpg') right top no-repeat, #00435d; }
.boiler-background { background: url('images/background-slice.png'), url('images/heating-hero.jpg') right top no-repeat, #00435d; }
.plumbing-background { background: url('images/background-slice.png'), url('images/plumbing-hero.jpg') right top no-repeat, #00435d; }
.generic-background { background: url('images/background-slice.png'),  #00435d; }
.landlords-background { background: url('images/background-slice.png'), url('images/landlords.jpg') right top no-repeat, #00435d; }
.fitted-kitchen-background { background: url('images/background-slice.png'), url('images/fitted-kitchen.jpg') right top no-repeat, #00435d; }
.fitted-bathroom-background { background: url('images/background-slice.png'), url('images/fitted-bathroom.jpg') right top no-repeat, #00435d; }

#plumber-image { position: absolute; top: 45px; right: 0;}
#van-image { position: absolute; top: 105px; right: 0;}
#boiler-image { position: absolute; top: -3px; right: 52px;}
#ubend-image { position: absolute; top: 0px; right: -10px;}
#property-services-image { position: absolute; top: 75px; right: -10px;}
#fitted-kitchen-image { position: absolute; top: -2px; right: 0px;}
#fitted-bathroom-image { position: absolute; top: 61px; right: 0px;}
#shower-head-image { position: absolute; top: 61px; right: 0px;}
#twentyfour-image { position: absolute; top: 245px; right: 18px;}
#gas-services-image { position: absolute; top: 45px; right: 0;}

#sub-menu {
	clear: both;
	position: absolute;
	bottom: 0;
	width: 100%;
}

#sub-menu li{
	float: left;
  	vertical-align: middle;
	width: 20%;
	height: 75px;
	overflow:hidden;
	/* IE10 Consumer Preview */ 
background-image: url('images/background-slice.png'), -ms-linear-gradient(bottom right, #45B0DC 0%, #00435D 100%);
background-image: url('images/background-slice.png'), -moz-linear-gradient(bottom right, #45B0DC 0%, #00435D 100%);
background-image: url('images/background-slice.png'), -o-linear-gradient(bottom right, #45B0DC 0%, #00435D 100%);
background-image: url('images/background-slice.png'), -webkit-gradient(linear, right bottom, left top, color-stop(0, #45B0DC), color-stop(1, #00435D));
background-image: url('images/background-slice.png'), -webkit-linear-gradient(bottom right, #45B0DC 0%, #00435D 100%);
background-image: url('images/background-slice.png'), linear-gradient(to top left, #45B0DC 0%, #00435D 100%);
}

#sub-menu li a { display: block; width: 100%; height: 100%; color: #fff; font-weight: 400; padding-top: 12px; position: relative; z-index: 5}

#sub-menu li a:hover { color: #003246; background: url('images/background-slice-lt.png') ; font-weight: 400; opacity: 0.8}

#sub-menu li.active a { color: #003246; background: url('images/background-slice-lt.png') ; font-weight: 400;}

#sub-menu li.active .menu-icon, #sub-menu li a:hover .menu-icon { fill: #003246; }

#sub-menu li a div{
	float: right;
	width: 45%;
	text-align: right;
	font-family: 'Open Sans', sans-serif; 
	font-size: 25px;
	margin: 0 30px 0 0;
}

.vcenter { line-height: 46px }

.menu-icon { height: 50px; width: 50px; margin: 0 0 0 30px; float: left; fill: #fff;}

.column {padding: 20px 20px; box-sizing: border-box; min-height: 860px;}
.logo-column { 

float: left; width: 21%; 
background-image: -ms-linear-gradient(top, #EFEDF5 75%, #FFFFFF 100%);
background-image: -moz-linear-gradient(top, #EFEDF5 75%, #FFFFFF 100%);
background-image: -o-linear-gradient(top, #EFEDF5 75%, #FFFFFF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.75, #EFEDF5), color-stop(1, #FFFFFF));
background-image: -webkit-linear-gradient(top, #EFEDF5 75%, #FFFFFF 100%);
background-image: linear-gradient(to bottom, #EFEDF5 75%, #FFFFFF 100%);


}
.logo-column p {/*color: #00435d;*/ color: #959595; line-height: 28px; font-weight: 600; font-family: 'myriad-pro', sans-serif; font-size: 20px;  margin: 0 0 0 10px;}

.gassafe {
	font-weight: 700; 
	padding: 18px 15px 18px 0;
}

.gassafe img { float: left; margin-right: 15px }

.main-column { float: left; width: 59%; padding: 20px 45px;}

.main-column .emphasis { color: #df121c;}

.boilerlist { clear: both; float: none; overflow: hidden; margin: 0 0 20px 0 ;}

.boilerlist li { font-weight: 700; float: left;}

.boilerlist li:after { content: "|"; margin: 0px 10px 0 10px;}

.boilerlist li:last-child:after { display: none;}

.footerlist { clear: both; float: none; overflow: hidden; margin: 0 0 20px 0 ; color: #fff; float: left;}

.footerlist li { font-weight: 400; float: left;}
.footerlist li a , .footerlist li a:visited , .footerlist li a:hover{ color:#FFF; }
.footerlist li a:hover{ text-decoration:underline }

.footerlist li:after { content: "|"; margin: 0px 10px 0 10px;}

.footerlist li:last-child:after { display: none;}

.social-column  { float: right; width: 20%; }

.social-column .header, .social-column .latest { color: #00a2e2; font-weight: 700; font-size: 18px;}

.social-icons { margin: 25px 0 25px 0;}

.social-divider { height:2px; background-color: blue; margin: 10px 0 10px 0;

background-image: -ms-linear-gradient(left, #d7d7d6 0%, #FFFFFF 100%);
background-image: -moz-linear-gradient(left, #d7d7d6 0%, #FFFFFF 100%);
background-image: -o-linear-gradient(left, #d7d7d6 0%, #FFFFFF 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #d7d7d6), color-stop(1, #FFFFFF));
background-image: -webkit-linear-gradient(left, #d7d7d6 0%, #FFFFFF 100%);
background-image: linear-gradient(to right, #d7d7d6 0%, #FFFFFF 100%);
}

.logo-display { margin: 25px auto; display: block; }

.main-column p {margin: 0 0 22px 0;  }
.main-column > p:first-child { font-size: 20px; line-height: 26px }


.serviceheader { color: #00a2e2; font-size: 18px; margin: 20px 0 15px 0 !important;}

.servicelist { padding-left:24px; text-indent:2px; list-style: none; list-style-position:outside; }

.servicelist li { margin-bottom: 15px; }

.servicelist li:before { color: #00a2e2; content: "\2713 "; margin-left: -25px; margin-right: 10px; }

.copy { float: right;}

p.call {
	font-size: 22px;
}

#contact { font-family: "myriad-pro", sans-serif; font-style: normal; font-weight: 600; font-size: 16px; max-width: 450px; }
#contact label { display: block;  color: #707070; font-style: normal; margin: 0 0 5px 0; letter-spacing: 0.3px;}
#contact label span { color: #00a2e2; font-style: normal;}
#contact input[type='text'], .textArea { width: 85%; max-width: 400px; }
#contact .textArea {height: 120px}
#contact button[type='submit'] { background: #003246; width: 120px; color: #FFF; letter-spacing: 2px; border: 0px; border-radius: 5px; height: 35px;}
#contact fieldset { margin: 0 0 15px 0; position: relative; z-index: 6}
#contact .required:after { content: " *"; color: red;}

.textBox { border: 2px solid #e5e5e5; }
.errorBox { border-color: #DF121C; }
.errorMessage{ display: none;}

.tweet img {float: left; margin-top: -6px;}
.tweetdate {color: #959595; font-size: 12px; font-weight: 700; }
.tweetmessage { clear: both; font-size: 12px; line-height: 18px; padding: 0 18px 0 32px; }

#overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background-color:#000;
	opacity:0.4;
	filter:alpha(opacity=0.4);
	z-index:999;
}

#preloader{
	background: url("images/preloader.gif") no-repeat 12px 10px #000000;
	font-size: 11px;
	height: 20px;
	left: 50%;
	line-height: 20px;
	margin: -20px 0 0 -45px;
	padding: 10px;
	position: fixed;
	text-align: left;
	text-indent: 36px;
	top: 50%;
	width: 90px;
	z-index: 9999;
	
	opacity:0.8;
	filter:alpha(opacity=0.8);
	
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}

.thankyou:after {
	content: "\2713";
	color: #0F0;
	font-size: 32px;
	margin-left: 8px;
	margin-top: 0px;
}

.thankyou {
	font-size: 18px;
}

.triangle-isosceles {
	position: absolute;
	padding: 5px 10px;
	/* width: 43%; */
	color: #FFF;
	background: #DF121C;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	z-index: 99999;
	right: 67px;
	bottom: -60px;
	opacity: 0.8;
	font-weight: 300;
	font-size: 13px;
}


.triangle-isosceles.top:after {
	top: -5px;
	right: 50px;
	bottom: auto;
	left: auto;
	border-width: 0 5px 5px;
	border-color: #DF121C rgba(0, 0, 0, 0);
}
.triangle-isosceles:after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 50px;
	border-width: 5px 5px 0;
	border-style: solid;
	border-color: #DF121C;
	display: block;
	width: 0;
	z-index: 1000;
}

#highlight { position: absolute; top: 450px; z-index: 2;}

footer { background: url('images/background-slice.png'), #393b3c; min-height: 50px; clear: both; padding: 50px 25px 0 25px; color: #fff; font-size: 12px; overflow: hidden}

@media screen and (max-width: 1210px) {
	.logo-display { width: 90%;}
	.logo-column p { font-size: 16px;}
	#van-image { width: 40%; top: 140px;}
	#shower-head-image { width: 454px; top: 140px;}
}

@media screen and (max-width: 1120px) {
	#sub-menu li a div{ font-size: 20px; }
	.menu-icon { height: 40px; width: 40px; }
	#info { font-size: 20px;}
	.phonenumber strong { font-size: 22px}
	#main-logo a { width: 90%;}
}

@media screen and (max-width: 1024px) {
	.logo-column p { font-size: 14px;}
	.social-column { width: 25%; }
	.main-column { width: 50%;}
}

@media screen and (max-width: 960px) {
	#sub-menu li a div{ font-size: 16px; }
	.menu-icon { height: 25px; width: 25px; }
	.hero-overlay { display: none;}
	#info { margin: 65px 20px 0 0; }
}

@media screen and (max-width: 820px) {
	#sub-menu li a div{ float: left; width: 50%; text-align: left; margin: auto 9px; }
	.menu-icon, .logo-column {  display: none; }
	.main-column { width: 75%;}
	#main-menu { padding: 1px 0 0 10px; }
	#main-logo { margin: 29px 0 0 10px; }
}

@media screen and (max-width: 768px) {
	.social-column .header, .social-column .latest { font-size: 14px; }
}

@media screen and (max-width: 750px) {
	.social-column { display: none;	}
	.main-column { width: 100%;}
	#info { margin: 30px 20px 0 0; }
	.tagline { display: none;}
	#hero h2 { font-size: 27px; line-height: 30px;}
	#hero h3 { font-size: 20px; width: 90%; line-height: 24px;}
}

@media screen and (max-width: 540px) {
	#sub-menu li a div{ font-size: 12px; line-height: 14px;}
	#main-menu li a { font-size: 12px;}
	#main-menu li { width: 20%;}
}

@media screen and (max-width: 480px) {
	body { font-size: 12px; }
	#highlight {display:none; }
}
@media print { 
	/* your print styles go here */
	#header, #footer, #menu { display: none; } 

	body { font: 12pt georgia,serif; } 
	h1 { font-size: 18pt; } 
	h2 { font-size: 16pt; color: #000; }
}