/* Entire Sheet Classifications */

*{box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

img{border: none;} /* All images will have no borders */

a[target=_blank]{background: url(img/ext_link.png) right center no-repeat; padding-right: 18px;} /* Links with a target of _blank will show an icon */

a[href$='.pdf']{background: url(img/pdficon_small.png) right center no-repeat; padding-right: 20px;} /* Links that end in .pdf will show an icon */

a{border-bottom: 1px dotted; text-decoration: none; color: #314e8c;}
a:hover{color: #8d4867; border-bottom-style: solid;}

a[href^=tel]{color: inherit; text-decoration: none; border-bottom: 0px;} /* Links with tel: have no underlines */

h1,h2,h3,h4{color: #8d4867; font-size: 1.5em; margin-bottom: 0px;}

h2#franchise{color:#314e8c;margin-bottom:-10px;}

.red{color: #ef4f4f;}

ul,ol{list-style: none; margin: 0px; padding: 10px;}

li{background: url(img/li.png) no-repeat center left; margin-bottom: 10px; padding: 3px 0 3px 27px;}

li.error{background: url(img/li_error.png) no-repeat center left;}

hr{border: none; border-bottom: 1px dashed rgba( 0,0,0,.4 );}

audio{margin: 20px 0; width: auto;}

.small{font-size: 14px; padding-left: 3px;}

#tp_widget li#tp_review_id0{margin-top:20px;}

.clearboth{clear: both;}

a.nationwidecleanerjobs{border: none; background: none; text-decoration: none; border-bottom: 0;}
a.nationwidecleanerjobs img{display: block; margin: auto;}

#franchiseList {margin-bottom: 10px; overflow: hidden;}
#franchiseList a {display: block; float: left; width: 250px; margin: 2px 0; background: none; border-bottom: none;}
#franchiseList a:hover {background: none; border-bottom: none;}

#contact{margin-top: 10px;}
#contact input[type=text]{width:32.9%;}
#contact input[type=submit]{width:100%;}

span.towns{width: 175px; float: left;}

/* Body */

body{
	font-family: 'Lato', sans-serif !important;
	font-size: 14px; /* Standard font size */
	margin: 0px; /* No margins */
	background-color: #fefefe; /* Standard background colour */
	background: linear-gradient(top, #d0f0fd, #fefefe 324px) repeat-x; /* W3C Markup */
	background: -moz-linear-gradient(top, #d0f0fd, #fefefe 324px) repeat-x; /* Firefox */
	background: -webkit-linear-gradient(top, #d0f0fd, #fefefe 324px) repeat-x; /* Webkit */
	background: -o-linear-gradient(top, #d0f0fd, #fefefe 324px) repeat-x; /* Opera */
	background: -ms-linear-gradient(top, #d0f0fd, #fefefe 324px) repeat-x; /* IE10 */
	}

/* Header */

header{display: block; max-width: 960px; margin: auto;}

/* Splash */

div#splash{
	background: url(./headerImages/headerbg.png) no-repeat center center;
	height: 396px;
	max-width: 960px;
	position: relative;
	}

div#splashrec{
	background: url(./headerImages/headerbgrec.png) no-repeat center center;
	height: 396px;
	max-width: 960px;
	position: relative;
	}

/* Logo */

span#logo{position: absolute; border: none;}
span#logo a{border-bottom: 0; text-decoration: none;}
span#logo a:hover{border-bottom-style: none;}

/* Contact Number */

span#bigcontact{
	position: absolute;
	top: 132px;
	margin-left: 10px;
	color: #ef4f4F;
	font-size: 38px;
	font-weight: bold;
	letter-spacing: 2px;
	text-shadow: 1px 1px 1px #333333;
	text-decoration: none;
	}

/* Navigation */

nav{
	position: relative;
	float: right;
	margin-top: 10px;
	display: block;
	}

nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	}

nav li{
	background: #fffeff;
	border-bottom: 2px solid #f1f5f3;
	box-shadow: 0 2px 2px rgba( 0,0,0,.2 );
	float: left;
	padding: 0;
	background: -webkit-linear-gradient(top, #fffeff, #efeef1) repeat-x; /* Webkit (Chrome 11+ and Safari) */
	background: -moz-linear-gradient(top, #fffeff, #efeef1) repeat-x; /* Mozilla Firefox */
	background: -o-linear-gradient(top, #fffeff, #efeef1) repeat-x; /* Opera */
	background: linear-gradient(top, #fffeff, #efeef1) repeat-x; /* W3C Markup */
	background: -ms-linear-gradient(top, #fffeff, #efeef1) repeat-x; /* IE10 */
	-pie-background: linear-gradient(#fffeff, #efeef1); /* PIE */
	}

nav li:hover{
	background: #f1f5f3;
	-pie-background: linear-gradient(#f1f5f3, #f1f5f3);
	}

nav li#first{
	border-radius: 10px 0 0 10px;
	}

nav li#last{
	border-radius: 0 10px 10px 0;
	}

nav a{
	border: none;
	color: #4f5d9c;
	display: block;
	font-size: 14px;
	width: auto;
	padding: 15px 25px 13px 25px;
	text-decoration: none;
	white-space: nowrap;
	}

nav a:hover{
	border: none;
	color: #333d6d;
	}

nav .active,nav .active:hover{
	background: #efeef1;
	background: -webkit-linear-gradient(top, #efeef1, #fffeff) repeat-x; /* Webkit (Chrome 11+ and Safari) */
	background: -moz-linear-gradient(top, #efeef1, #fffeff) repeat-x; /* Mozilla Firefox */
	background: -o-linear-gradient(top, #efeef1, #fffeff) repeat-x; /* Opera */
	background: linear-gradient(top, #efeef1, #fffeff) repeat-x; /* W3C Markup */
	background: -ms-linear-gradient(top, #efeef1, #fffeff) repeat-x; /* IE10 */
	-pie-background:linear-gradient(#efeef1, #fffeff); /* PIE */
	}

nav .active a,nav .active:hover a{
	color: #777777;
	cursor: default;
	}

/* Social Buttons */

span#social_buttons{
	position: absolute;
	bottom: 10px;
	right: 10px;
	}

span#social_buttons a{
	border-radius: 5px;
	color: #fefefe;
	border: none;
	float: left;
	font-size: 12px;
	font-weight: bold;
	margin-left: 10px;
	padding: 5px 10px;
	text-shadow: 1px 1px 0 rgba( 0,0,0,.4 );
	text-decoration: none;
	}

#facebook{
	background: #3b5998;
	border: 1px solid #5788f1;
	background: -webkit-linear-gradient(top, #3b5998, #5788f1) repeat-x; /* Webkit (Chrome 11+ and Safari) */
	background: -moz-linear-gradient(top, #3b5998, #5788f1) repeat-x; /* Mozilla Firefox */
	background: -o-linear-gradient(top, #3b5998, #5788f1) repeat-x; /* Opera */
	background: linear-gradient(top, #3b5998, #5788f1) repeat-x; /* W3C Markup */
	background: -ms-linear-gradient(top, #3b5998, #5788f1) repeat-x; /* IE10 */
	-pie-background:linear-gradient(#3b5998, #5788f1); /* PIE */
	}

#facebook:hover{
	background: #5788f1;
	-pie-background:linear-gradient(#5788f1, #5788f1);
	}

#twitter{
	background: #099fd4;
	border: 1px solid #5abfe2;
	background: -webkit-linear-gradient(top, #099fd4, #2bacda) repeat-x; /* Webkit (Chrome 11+ and Safari) */
	background: -moz-linear-gradient(top, #099fd4, #2bacda) repeat-x; /* Mozilla Firefox */
	background: -o-linear-gradient(top, #099fd4, #2bacda) repeat-x; /* Opera */
	background: linear-gradient(top, #099fd4, #2bacda) repeat-x; /* W3C Markup */
	background: -ms-linear-gradient(top, #099fd4, #2bacda) repeat-x; /* IE10 */
	-pie-background:linear-gradient(#099fd4, #2bacda); /* PIE */
	}

#twitter:hover{
	background: #5abfe2;
	-pie-background:linear-gradient(#5abfe2, #5abfe2);
	}

#trustp{
	background: #ff9a00;
	border: 1px solid #f8bc1e;
	background: -webkit-linear-gradient(top, #ff9a00, #ffb900) repeat-x; /* Webkit (Chrome 11+ and Safari) */
	background: -moz-linear-gradient(top, #ff9a00, #ffb900) repeat-x; /* Mozilla Firefox */
	background: -o-linear-gradient(top, #ff9a00, #ffb900) repeat-x; /* Opera */
	background: linear-gradient(top, #ff9a00, #ffb900) repeat-x; /* W3C Markup */
	background: -ms-linear-gradient(top, #ff9a00, #ffb900) repeat-x; /* IE10 */
	-pie-background:linear-gradient(#ff9a00, #ffb900); /* PIE */
	}

#trustp:hover{
	background: #f8bc1e;
	-pie-background:linear-gradient(#f8bc1e, #f8bc1e);
	}

#clicktocall{
	background: #8e213b;
	display: none;
	border: 1px solid #d21944;
	background: -webkit-linear-gradient(top, #8e213b, #d21944) repeat-x; /* Webkit (Chrome 11+ and Safari) */
	background: -moz-linear-gradient(top, #8e213b, #d21944) repeat-x; /* Mozilla Firefox */
	background: -o-linear-gradient(top, #8e213b, #d21944) repeat-x; /* Opera */
	background: linear-gradient(top, #8e213b, #d21944) repeat-x; /* W3C Markup */
	background: -ms-linear-gradient(top, #8e213b, #d21944) repeat-x; /* IE10 */
	-pie-background:linear-gradient(#8e213b, #d21944); /* PIE */
	}

#clicktocall:hover{
	background: #d21944;
	-pie-background:linear-gradient(#d21944, #d21944);
	}

/* Section */

section{
	display: block;
	max-width: 960px;
	margin: auto;
	}

div#leftboxfull{position: relative; float: left; width: 60%; margin-top: 30px;}
div#rightboxfull{position: relative; float: right; width: 37%; margin-top: 30px;}

/* Right Box (right) */

div#rightbox{border-radius: 10px; padding: 20px; width: auto;
	background: -webkit-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* Webkit (Chrome 11+ and Safari) */
	background: -moz-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* Mozilla Firefox */
	background: -o-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* Opera */
	background: linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* W3C Markup */
	background: -ms-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* IE10 */
	}

div#rightbox.scrolling{position: fixed; top: 0; max-width: 356px;}

div#rightbox p.maintext{color: #314e8c; font-size: 1.5em; margin: 0px;}
div#rightbox p.maintext img{vertical-align: top;}
div#rightbox hr.maintext,div#rightbox hr.franchisenoscroll{margin: 5px 0;}

.phoneicon{display: none;}
.phoneicon a{border: none;}

/* Main Content (left) */

div#leftbox.downloads{margin-bottom: 30px; height: 130px;}

.services li{float: left; width: 50%;}

br.clearboth{clear: both;}

div#leftbox{border-radius: 10px; padding: 20px;
	background: -webkit-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* Webkit (Chrome 11+ and Safari) */
	background: -moz-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* Mozilla Firefox */
	background: -o-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* Opera */
	background: linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* W3C Markup */
	background: -ms-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* IE10 */
	}

div#leftbox h1{margin-top: 0px;}

/* Footer */

footer{
	display: block;
	max-width: 960px;
	margin: auto;
	clear: both;
	margin-top: 40px;
	padding: 20px;
	border-radius: 10px;
	background: -webkit-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* Webkit (Chrome 11+ and Safari) */
	background: -moz-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* Mozilla Firefox */
	background: -o-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* Opera */
	background: linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* W3C Markup */
	background: -ms-linear-gradient(top, #e2f5fd, #fefefe 324px) repeat-x; /* IE10 */
	}
	
footer p span.likeheading{
	color: #8d4867;
	font-size: 16px;
	margin-bottom: 0px;
	}
	
footer p.footerright{
	text-align: right;
	}

/* Other */

.splash h1{line-height: 36px; width:45%; position:absolute; bottom:17px;  left:18px; font-weight: 300; font-size: 28px; color: #fff; text-shadow: 1px 1px 5px rgba( 0,0,0,.7 );}

/* Forms */

input,select,textarea{padding: 5px; margin-bottom: 10px;}

textarea{font-family: 'Arial'; font-size: 13px;}

input#postcode{width: 100px;}

select#select{width: 50%;}

input[type=submit]{cursor: pointer; border-radius: 5px; border: 1px solid #723651; color: #fefefe; font-weight: bold; margin-top: 10px; padding: 12px 15px; text-shadow: 1px 1px 0 rgba( 0,0,0,.5 );
	background: -webkit-linear-gradient(top, #b26085, #84415f) repeat-x; /* Webkit (Chrome 11+ and Safari) */
	background: -moz-linear-gradient(top, #b26085, #84415f) repeat-x; /* Mozilla Firefox */
	background: -o-linear-gradient(top, #b26085, #84415f) repeat-x; /* Opera */
	background: linear-gradient(top, #b26085, #84415f) repeat-x; /* W3C Markup */
	background: -ms-linear-gradient(top, #b26085, #84415f) repeat-x; /* IE10 */
	-pie-background:linear-gradient(#b26085, #84415f); /* PIE */
	}

input[type=submit]:hover{border-color: #9c3b68;
	background: -webkit-linear-gradient(top, #e37eb8, #b74a7c) repeat-x; /* Webkit (Chrome 11+ and Safari) */
	background: -moz-linear-gradient(top, #e37eb8, #b74a7c) repeat-x; /* Mozilla Firefox */
	background: -o-linear-gradient(top, #e37eb8, #b74a7c) repeat-x; /* Opera */
	background: linear-gradient(top, #e37eb8, #b74a7c) repeat-x; /* W3C Markup */
	background: -ms-linear-gradient(top, #e37eb8, #b74a7c) repeat-x; /* IE10 */
	-pie-background:linear-gradient(#e37eb8, #b74a7c); /* PIE */
	}

/* Callback form (rightbar) */

#callback input[type=text],#callback input[type=tel],#callback input[type=email],#callback textarea{margin-bottom: 5px; width: 65%;}
#callback input[type=submit]{width: 100%;}
#callback textarea{resize: vertical; vertical-align: top;}

/* Contact form */

form.contact{margin-top: 20px;}
.contact input,.contact textarea{width: 50%;}
.contact textarea{margin-bottom: 10px; resize: vertical; vertical-align: top;}
.contact input[type=radio]{width: auto; margin-bottom: 20px;}

/* Recruitment form */

form.recruitment{margin-top: 20px;}
.recruitment input[name^="dob"]{width: 12.5%;}
.recruitment input[name=doby]{width: 24%;}
.recruitment input[name=name]{width: 37%;}
.recruitment input,.recruitment textarea{width: 50%;}
.recruitment textarea{margin-bottom: 10px; resize: vertical; vertical-align: top;}
.recruitment .small{float: right; width: 50%;}
.recruitment input[type=radio]{width: auto; margin-bottom: 20px;}

/* Feedback form */

form.feedback{margin-top: 20px;}
.feedback .small{float:right; width: 50%;}
.feedback input,.feedback textarea{width: 50%;}
.feedback textarea{margin-bottom: 10px; resize: vertical; vertical-align: top;}
.feedback input[type=radio]{width: auto; margin-bottom: 20px;}

/* Reference form */

form.reference{margin-top: 20px;}
.reference input,.reference textarea{width: 50%;}
.reference textarea{margin-bottom: 10px; resize: vertical; vertical-align: top;}
.reference input[type=radio]{width: auto; margin-bottom: 20px;}

/* Referee form */

form.referee p.titles{color: #314e8c; font-size: 1.5em;}
form.referee p.infoline{color: #314e8c; font-size: 14px;}
form.referee input,form.referee select{width: 40%;}
.referee .small{float:right; width: 60%;}
div.radiobox{padding: 10px; width: 100%;}
div.radioboxbtns{float: left; width: 60%; padding-top: 5px; padding-bottom: 5px;}
div.radioboxtitle{float: right; width: 40%; padding-top: 5px; padding-bottom: 5px;}
div.radioboxbtns input.hiddenselect{display: none;}

div.radiobox span.rating{float: left; width: 25%; text-align: center;}
form.referee textarea{width: 45%; vertical-align: top;}
hr.clearboth{clear:both;}

/* Changes for Different Devices */

@media screen and (max-width:959px){

	video,audio{height: auto; max-width: 100%;}
	
	span#bigcontact{position: relative; float:right; top: 40px; right: 10px;}
	span#logo{position: relative; float: left; top: 40px;}
	
	nav{margin-top: 0px; position: absolute; top: 0px; width: 100%;}
	nav ul{width: 100%;}
	nav li{width: 16.66%;}
	nav li#first,nav li#last{border-radius: 0px;}
	nav a{font-size: 12px; height: auto; padding: 10px 0px; text-align: center;}
	
	#contact input[type=text]{width:100%;}
	#contact input[type=tel]{width:100%;}

	}

@media screen and (max-width:550px){

	div#splash{height: 450px; background-position: center bottom;}
	div#splashrec{height: 450px; background-position: center bottom;}
	
	span#bigcontact{display: none;}
	
	span#logo{position: relative; float: left; top: 100px;}
	span#logo img{height: auto; width: 160px}
	
	nav li{margin-bottom: 0; width: 33.33%;}
	nav a{font-size: 12px; height: auto; padding: 15px 0px;}
	
	span#social_buttons{position: absolute; bottom: 10px; width: 100%;}
	span#social_buttons a{margin: 10px 0 0 5%; text-align: center; width: 45%;}
	#clicktocall{display: block;}
	
	div#leftboxfull{width: 100%;}
	div#rightboxfull{width: 100%;}

	.phoneicon{font-size: 16px; display: inline;}

	input[type=submit]{padding: 15px; width: 100%;}
	form.recruitment,form.contact{font-size: 12px;}
	select#select{width: 49%;}
	
	.services li{width: 100%;}
	.splash h1{background: rgba( 0,0,0,.4 ); border-radius: 5px; bottom: 10px; font-size: 22px; left: 8px; padding: 0 5px; width: auto;}
	.tpc_rating_speaker{opacity: 0;}
	
	}