/* CSS Document */

html, body {margin: 0; padding: 0;}

/* Clear floats */
.clear {background: none; clear: both; height: 1px; font-size: 1px; line-height: 1px; margin-bottom: -1px;}

.hidden {display: none;}



body {
	color: #131346;
	height: auto;
	font-family:'roboto_slabregular', arial; font-size:12px; height:100%; line-height:18px; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust: 100%;
	text-align: left;
	background-image: url(../img/mainBg.jpg);
	background-repeat: repeat-x;
	background-color: #FAF9E4;
}


a:link {
	color: #0C78BE;
}

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

a:visited {
	color: #131346;
}

strong, b {font-family:'roboto_slabbold'; font-weight:normal}


#header-container {
	position:relative;
	width:100%;
	height:137px;
}

#header {
	position:relative;
	width:960px;
	height:137px;
	margin:auto;

}



#page-container {
	width: 960px;
	text-align: justify;
	clear: both;
	margin-right: auto;
	margin-left: auto;
	position: relative;

}


	




img {
border:0px;

}


#logo {
	position:absolute;
	width:387px;
	height:75px;
	top: 12px;
	left: 5px;

}








	#header .contacts {display:block; overflow:hidden; padding:3px 0 0 0; position:absolute; right:0; top:30px; width:500px; z-index:99}
	#header .contacts ul {float:right; margin:0; overflow:hidden; padding:0}
	#header .contacts li {
	float:right;
	font-family:roboto_slabregular;
	font-size:33px;
	line-height:28px;
	list-style:none;
	margin:0;
	padding:0 0 0 40px;
	color: #0C78BE;
}
	.greenbold {font-weight: bold;color: #B8D432}
	
	
	#header .social {display:block; padding:0 0 0 0; position:absolute; right:-5px; top:25px; width:85px; height:34px; z-index:99}
	#header .social ul {float:right; margin:0; overflow:hidden; padding:0}
	#header .social li {float:left; list-style:none; margin:0; padding:0 5px 0 0}
	#header .social a {display:block; font-size:1px; height:34px; line-height:1px; overflow:hidden; text-indent:-9999em; width:34px}
	#header .social .twitter {background:url("../img/icons/twitter34x34.png") no-repeat 0 0}
	#header .social .facebook {background:url("../img/icons/facebook34x34.png") no-repeat 0 0}
	#header .social .linkedin {background:url("../img/icons/linkedin34x34.png") no-repeat 0 0}
	#header .social .googleplus {background:url("../img/icons/googleplus34x34.png") no-repeat 0 0}


















.yellow {
	color: #F9B218;
 }
 
.cyan {
 	color: #10acbe;
 }

.navy {
	color: #131346;
}

.green {
	color: #539743;
}

.red {
	color: #d20c48;
}

.lime {
	color: #afd242;
}

.darkred {
	color: #660500;
}

.purple {
	color: #560041;
}






.yellowNav{
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #F9B218;
}

.cyanNav{
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #10acbe;
}

.navyNav{
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #131346;
}

.greenNav{
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #539743;
}

.redNav{
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #d20c48;
}

.limeNav{
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #afd242;
}

.darkredNav{
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #660500;
}

.purpleNav{
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #560041;
}









.activeYellow, .yellowBg {
	background-color: #F9B218;
}

.activeCyan, .cyanBg {
	background-color: #10acbe;
}

.activeNavy, .navyBg {
	background-color: #131346;
}

.activeGreen, .greenBg  {
	background-color: #539743;
}

.activeRed, .redBg  {
	background-color: #d20c48;
}

.activeLime, .limeBg  {
	background-color: #afd242;
}

.activeDarkred, .darkredBg  {
	background-color: #660500;
}

.activePurple, .purpleBg  {
	background-color: #560041;
}












.yellowBorder {
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #F9B218;
}

.cyanBorder {
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #10acbe;
}

.navyBorder {
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #131346;
}

.greenBorder {
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #539743;
}

.redBorder {
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #d20c48;
}

.limeBorder {
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #afd242;
}

.darkredBorder {
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #660500;
}

.purpleBorder {
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #560041;
}

























#page-container {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	clear: both;
	width: 994px;
	position:relative;
	

	}


.slideshow {
	height: 372px;
	width: 994px;
	position:relative;
	z-index:1;
	background-color: #FFFFFF;
	margin:auto;
	overflow: hidden;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
border-bottom-left-radius: 20px;
}










#content {
	width:880px;
	position:relative;
	background-color:#FFFFFF;
	margin-top:-106px;
	z-index:2;
	margin-right: 37px;
	margin-bottom: auto;
	margin-left: 37px;
	padding: 20px;
	float:left;
	border-radius:20px;
}



.titles {
	font-size: 26pt;
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
	margin-bottom: 25px;
	display: block;
}


.column {
	position:relative;
	float:left;
}




.spacer {
	position: relative;
	width: 20px;
	float: left;
}
















/* side navigation 
--------------------------------------------*/
.leftNavigation {
	width:200px;
	position:relative;
	float:left;
	margin-bottom: 30px;
}



.leftNavigation ul
{
	list-style: none;
	padding: 0;
	border: none;
	margin: 0;
}

.leftNavigation li
{
	margin-right: 0;
	margin-left: 0;
	padding-top: 1px;
	padding-bottom: 1px;
}

.leftNavigation li a, .leftNavigation li a:visited
{
	display: block;
	color: #414142;
	text-decoration: none;
	width: 96%;
	padding-top: 4px;
	padding-bottom: 4px;
	text-align: left;
	font-family: "Trebuchet MS";
	font-size: 12pt;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	text-transform: uppercase;


}

html>body .leftNavigation li a { width: auto; }

.leftNavigation li a:hover
{
	color: #CCCCCC;
	text-decoration: none;

}



.leftNavigation li.active a {
	font-weight: normal;
	background-image: url(../img/left_nav_a.gif);
	background-position: 0px 6px;
	color: #bf8c2a;
}








#centralFull {
	float:left;
	width:645px;
	text-align: justify;
	margin: 0px;
	padding: 0px;
	color: #414142;
	font-size: 11pt;
}

#centralFullMap {
	float:left;
	width:880px;
	text-align: justify;
	margin: 0px;
	padding: 0px;
	color: #414142;
	font-size: 11pt;
}




#central {
	float:left;
	width:425px;
	text-align: justify;
	margin: 0px;
	padding: 0px;
	color: #414142;
	font-size: 11pt;
}

#centralFull h1, #central h1, #centralFullMap h1 {
	font-size: 19pt;
	color: #0C78BE;
	line-height:26px;
	font-weight:100;
	text-align:left;
}


#centralFull ul, #central ul, #centralFullMap ul {
}

#centralFull li, #central li, #centralFullMap li {
	background-image: url(../img/bullet.gif);
	background-repeat: no-repeat;
	background-position: 0px 3px;
	padding-left: 18px;
	text-align: left;
}





#businessWidget {width:645px; float:left; margin-bottom:15px; padding-bottom:10px; border-bottom:thin solid #B8D432;}

#businessWidget img {float:left;}

#businessWidget .businessWidgetList { width:335px; float:right; font-size:14px; line-height:20px;}




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

#rightCol {float:right; width:550px}














#quoteBox {
	width:195px;
	height:autopx;
	position:relative;
	float:left;
	background-color: #10acbe;
	border-radius:10px;
	padding:10px;
}


.quoteTitle {
	display: block;
	text-align: left;
	font-size: 20pt;
	color: #FFFFFF;
	font-weight: bold;
	line-height:40px;


}


.quotelge {
	display: block;
	text-align: left;
	font-size: 20pt;
	color: #FFFFFF;
	font-weight: bold;
	color:#FFFFFF;
}

.quote {
	color: #FFFFFF;
	text-align: left;
	display: block;
	font-family:'roboto_slabregular', arial; font-size:12px;
}

#quoteBox a {color:#FFFFFF;}


#right-col {float:right; position:relative; width:215px}




#green_deal {
	float:right;
	position:relative;
	width:215px;
}







table {
	border-collapse: collapse;
	width: 100%;
	font-size: 10pt;
	text-align: left;
}
 
th {
	color: #FFFFFF;
	font-weight: bold;
	padding: 2px 11px;
	text-align: left;
	line-height: 1.2;
	background-color: #06486C;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #000000;
}
 
td {
	padding: 6px 11px;
	vertical-align: top;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #06486C;
}
 
td * {
	padding: 6px 11px;
}
 
tr.alt td {
	background: #ecf6fc;
}
 
tr.over td, tr:hover td {
	background-color: #C9EAFC;
}






















/* Contact __________________________________________________________ */ 
#map_canvas {
width: 100%;
height: 600px;
overflow: auto;
position: relative; }

#map_canvas_side {
width: 100%;
height: 200px;
position: relative;
clear:both;
float:left;
margin-bottom:20px }

.contact_details {
text-align: left;
position: absolute;
right: 20px;
margin: 3em 0;
z-index: 99;
width: 52%;
background: #0c78be;
background: rgb(12,120,190);
background: rgba(12,120,190, 0.95);
color: #fff; }

.contact_details > div {
padding: 1.5em; }



.contact_details h2 {
font-size: 1.1em;
margin-bottom: 0; }

.contact_details h2 a { 
letter-spacing: normal;
text-transform: none;
font-weight: 200!important; }

.contact_details p {
margin-bottom: .5em; }

.contact_details a {
color: #ffffff; }

.contact_details a:hover {
color: #268E89; }



.contact_details ul#address {
margin: 0;
padding: 0; }

.contact_details ul#address li { 
background: url(../img/icon_location.png) no-repeat;
background-size: 10px 16px;
background-position: 0 4px;
display: inline-block;
list-style-type: none; 
padding: 0 10% 0 5%;
vertical-align: top; }

.contact_info {
display: inline-block;
vertical-align: middle;
margin:  0;
padding: 0;
line-height: 1.6em;
font-weight: 700;
font-size: 1.7em; }



.circle_icon {
background: #0465a4;
width: 82px;
height: 82px;
border-radius: 41px;
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 1em;
transition: background .15s linear;
-webkit-transition: background  .15s linear;
-moz-transition: background  .15s linear; }

.circle_icon:hover {
background: #30a1e9;
transition: background .15s linear;
-webkit-transition: background  .15s linear;
-moz-transition: background  .15s linear; }

.circle_icon.email span {
	position: absolute;
	margin-top: 27%;
	margin-left: 23%;
	width: 45px;
	height: 36px;
	background-size: 100%;
	background-image: url(../img/icons/icon_email_low_res.png);
	background-repeat: no-repeat;
}




















@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);



#feedback-page{
	text-align:center;
}

#form-main{
	width:100%;
	float:left;
	padding-top:0px;
}

#form-div {
	width: 600px;
	float: left;
	position: relative;

}

#form-div h1 {font-size:26px;
}

.feedback-input {
	color:#3c3c3c;
	font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
	font-size: 18px;
	border-radius: 0;
	line-height: 22px;
	background-color: #fbfbfb;
	padding: 13px 13px 13px 54px;
	margin-bottom: 5px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  border: 3px solid rgba(212,212,212,1);
}

.feedback-input:focus{
	background: #fff;
	box-shadow: 0;
	border: 3px solid #c40505;
	color: #c40505;
	outline: none;
  padding: 13px 13px 13px 54px;
}

.focused{
	color:#c40505;
	border:#c40505 solid 3px;
}

/* Icons ---------------------------------- */
#business_name{
	background-image: url(../img/icons/offices.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#business_name:focus{
	background-image: url(../img/icons/offices.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}



#supply_address, #business_address{
	background-image: url(../img/icons/map6.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#supply_address:focus, #business_address:focus{
	background-image: url(../img/icons/map6.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}






#contact_name{
	background-image: url(../img/icons/name.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#contact_name:focus{
	background-image: url(../img/icons/name.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}








#contact_position{
	background-image: url(../img/icons/black294.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#contact_position:focus{
	background-image: url(../img/icons/black294.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}









#contact_landline_number{
	background-image: url(../img/icons/phone16.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#contact_landline_number:focus{
	background-image: url(../img/icons/phone16.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}







#contact_mobile_number{
	background-image: url(../img/icons/smartphone11.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#contact_mobile_number:focus{
	background-image: url(../img/icons/smartphone11.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}








#annual_water_spend{
	background-image: url(../img/icons/budget.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#annual_water_spend:focus{
	background-image: url(../img/icons/budget.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}






#annual_water_consumption{
	background-image: url(../img/icons/rain14.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#annual_water_consumption:focus{
	background-image: url(../img/icons/rain14.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}








#current_supplier{
	background-image: url(../img/icons/on1.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#current_supplier:focus{
	background-image: url(../img/icons/on1.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}



#contract_end_date{
	background-image: url(../img/icons/day7.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#contract_end_date:focus{
	background-image: url(../img/icons/day7.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}




#electricity_mpan, #gas_mprn{
	background-image: url(../img/icons/data45.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#electricity_mpan:focus, #gas_mprn:focus{
	background-image: url(../img/icons/data45.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}






textarea {
    width: 100%;
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	background-color:white;
}

#button-red{
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	float:left;
	width: 100%;
	border: #fbfbfb solid 4px;
	cursor:pointer;
	background-color: #c40505;
	color:white;
	font-size:24px;
	padding-top:22px;
	padding-bottom:22px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}

#button-red:hover{
	background-color: rgba(0,0,0,0);
	color: #c40505;
}
	
.submit:hover {
	color: ##c40505;
}
	
.ease {
	width: 0px;
	height: 74px;
	background-color: #fbfbfb;
	-webkit-transition: .3s ease;
	-moz-transition: .3s ease;
	-o-transition: .3s ease;
	-ms-transition: .3s ease;
	transition: .3s ease;
}

.submit:hover .ease{
  width:100%;
  background-color:white;
}

@media only screen and (max-width: 580px) {
	#form-div{
	

		width: 88%;
		margin-left: 0;
		padding-left: 3%;
		padding-right: 3%;
	}
}


























#shopCol.column {
	width:800px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	text-align: left;
}

h3 {
	color: #FFFFFF;
}





.product {
	float: left;
	width: 95%;
	height:200px;
	margin-left:10px;
}

		

.productimg {
	float: left;
	background-color:#FFFFFF;
	background-image: url(../images/assets/iconBgShop.jpg);
	background-position:bottom;
	background-repeat: no-repeat;
	padding-top: 6px;
	padding-right: 6px;
	padding-bottom: 18px;
	padding-left: 6px;
	width:100px;
	height:auto;
	margin-right:10px;
}


.producttext {
	float: right;
	width: 450px;
	color: #333333;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
		 
		 
.producttext p {
	text-align: left;
	font-weight: normal;
	margin-top:10px;
}

.producttext h1 {
	font-size: 12pt;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: -15px;
	padding-bottom: 0px;
	line-height: normal;
}


h3 {
font-size: 12pt;
	color: #ffffff;
	background-color: #00a9e1;
	padding: 3px;
	display: inline-block;
	}
	
.price {
	font-size: 12pt;
	color: #ffffff;
	background-color: #00a9e1;
	border: 1px dashed #CCCCCC;
	padding: 3px;
	display: inline-block;
}