@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	text-decoration:none;
}

body{
	background:url(../images/bg.png) 50% 0 repeat-y #d9d8d7;
	font: .9em/150% Arial, Helvetica, sans-serif;
	line-height: 1.25em;
	margin: 0;
	padding: 0;
}

p{ padding:0.6em 0; line-height:1.4em;}
a, a:visited {outline: 0; color:#0066cc }
a:hover, a:focus {color: #000; text-decoration:underline;}
a[href^=tel]{color:inherit;text-decoration: underline;}

h1, h2 { font-weight:normal;}
h1 { font-size: 2em; margin:10px 0; padding:0; line-height:1em;}
h2 { font-size: 3em; line-height:1.1em; display:block; text-align:center; margin:10px 0; font-weight:normal; }
h3 { font-size: 2.2em; line-height:1.1em; margin:15px 0 0px 0; font-weight:normal; }

h3.h3content{ font-size: 1.4em; line-height:1.3em; font-weight:normal;color:#444; margin:15px 0 10px 0; }
#branding h3{ font-size: 1.4em; line-height:1em; margin:0 0 10px 0; font-weight:bold; font-style:italic; }

h4 { font-size:1.2em; margin-bottom:8px; font-weight:bold; line-height:1.3em;  }
h5 {  }
h6 {  }

#home {
  width: 100%; 
  position: relative;
  min-height:200px;
}

#intro {
 	margin: 0 auto; 
 	width: 100%; 
  	position: relative;
	padding-top:20px;
}
 
#people { 
  background: url(../images/people.jpg) 50% 200px fixed;
  height: 300px; 
  margin: 0 auto; 
  width: 100%; 
  position: relative; 
}


#strip { 
  background: url(../images/stripes.jpg);
  height:25px;
  margin: 0 auto; 
  width: 100%; 
  position: relative; 
}

#signup { 
  min-height: 400px; 
  margin: 0 auto; 
  width: 100%; 
  position: relative;
  padding-top:30px;
}

#grey { 
  background: #323232;
  color:#FFFFFF;
  min-height: 970px; 
  margin: 0 auto; 
  width: 100%; 
  position: relative; 
}

#top{ height:55px; background-color:#323232; text-align:right; padding-right:30px; color:#666; position:relative;}
#top form {display:inline-block;}
#top a, input.topsignup{ display:inline-block; 	outline:none; line-height:55px; padding:0 18px; color:#33ccff; text-decoration:none; background-color:#484848; border:none;}
#top a:hover, input.topsignup:hover{ background-color:#6f6d6d; color:#FFFFFF;}

#logo{
	position:absolute;
	top:0;
	left:100px;
	width:190px;
	height:190px;
	background-color:#FFFFFF;
	-webkit-box-shadow: 1px 2px 3px 0 #545454;
	box-shadow: 1px 2px 3px 0 #545454;
	border:#C7C7C7 1px solid;
}

#branding{
	position:absolute;
	top:65px;
	left:350px;
}

.container {
	width:70%;
	max-width:1280px;
	padding:0 3%;
	margin:0 auto;
}

.services{padding:3%;}

.breadcrumb{ text-align:center; height:42px; width:42px; clear:both; margin:30px auto;}
.breadcrumb a{ background:url(../images/arrows.jpg); width:42px; height:42px; display:inline-block; float:left; margin-right:6px; text-indent:-9999em;}
.breadcrumb a.up{ background-position: 42px 0px;}
.breadcrumb a.down{background-position: 0 0;}
.breadcrumb a.up:hover{background-position: 42px 42px;}
.breadcrumb a.down:hover{background-position: 0px 42px;}

a.button, input.button { 
	-webkit-appearance: none;
	outline:none;
	border: 2px solid #c6423a;
	display:inline-block;
	padding:0.7em 2.5em;
	font-size:1.2em;
	text-transform:uppercase;
	letter-spacing:0.1em;
	text-decoration:none;
	color:#666;
	cursor:pointer;
	margin:2px;
	color:#FFFFFF;
	background-color: #c6423a;	
}

a.button:hover, input.button:hover, input.buttonR:hover {background-color: #323232; border-color:#323232; color:#Ffffff;}

a.buttonR, input.buttonR { 
	outline:none;
	-webkit-appearance: none;
	border: 2px solid #969696;;
	display:inline-block;
	padding:0.6em 1em ;
	font-size:1.2em;
	text-decoration:none;
	font-style:italic;
	background: #fefefe;
	color:#666;
	cursor:pointer;
	margin:2px;
	color:#000;

}

.telephone {
	float: left;
	margin-right: 10px;
	display: inline-block;
	padding: 0.3em 0;
}

.topbutton{
	outline:none !important;
	border: 1px solid #cccccc;
	display:inline-block;
	padding:0.3em 0.7em;
	font-size:1em;
	text-transform:uppercase;
	text-decoration:none;
	background:none;
	color:#666;
	cursor:pointer;
	color:#000000;
	background-color:#e9eaea;
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;	
}
.topbutton:hover{
	background-color:#C4C4C4;
	border:1px solid #868686;
}


.half{ width:45%; float:left; margin-right:5%; padding-bottom:20px}
.quarter{width:23%; float:left; margin-right:2%;}
.threequarter{width:60%; float:left; padding-top:30px; }
.cup { width:40%;float:left;}

.last { margin:0;}
.clear{ clear:both;}
.centered{ text-align:center;}

.whatwouldhappen{
	background-color:#f1f1f1;
	border:#dbdbdb 4px solid;
	padding: 10px 2% 20px 2%;}

.haveyoursay{ background-color:#E7E7E7; margin:10px auto 0 auto; width:50%; }
.haveyoursay h3{font-size: 1.6em; line-height:1em; margin:0; padding:0; font-weight: normal; }
.haveyoursay p{font-size:1em; font-weight:bold;  }

.haveyoursayR{ text-align:center; padding:15px 10px 20px 10px; background-color:#3f3e3e; border:4px solid #494848; margin:20px; }
.haveyoursayR h3{font-size: 1.6em; line-height:1em; margin:0; padding:0; font-weight: normal; }
.haveyoursayR p{font-size: 1.2em; line-height:1em;}

form.yoursayR {width:90%; margin:0 auto; padding:10px;background-color:#373737; border:1px solid #323232; }
form.yoursay { padding:10px; background-color:#d7d6d6; border:1px solid #bbb9b9;}

form.yoursayR input[type="text"], form.yoursay input[type="text"]{
	background-color:#FFFFFF;
	padding:10px;
	border:0;
	outline:none;
	-webkit-appearance: none;
	margin-right:2%;
	width:70%;
	display:inline-block;
}
form.yoursayR input[type="submit"], form.yoursay input[type="submit"]{
	width:20%; 
	background-color:#c6423b;
	padding:10px 0px;
	border:0;
	outline:none;
	-webkit-appearance: none;
	color:#FFFFFF;
	cursor:pointer;
	display:inline-block;
}


/* set image max width to 100% */
img.responsive {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}


ul.spaced, ol.spaced {padding-left: 20px; margin: 5px 0; }
ul.spaced li{ padding:6px 0;}

ul.costs, ol.costs {padding-left: 12px; margin: 5px 0; }
ul.costs li{ padding:2px 0;}
ul.costs ul {padding-left: 10px; margin: 2px 0;}

.credits{ margin:0 auto 10px auto;}

.makeEnquiry{ display:inline-block; float:left; outline:none; padding:0; border:none;}

@media only screen and (max-width : 1280px) {
	
	.container { width:90%; max-width:90%;	}
	.threequarter {padding-top:10px;}
	#logo{ left:50px;}
	#branding{ left:275px;}
}

@media only screen and (max-width : 768px) {
	
	.container{padding-top:20px;}
	#intro { padding-top:0;}
	#people { 
	  background: url(../images/people770.jpg) top center no-repeat;
	  height: 300px; 
	  margin: 0 auto; 
	  width: 100%; 
	  position: relative; 
	}
	.half{ width:100%; float:none; margin-right:0%;}
	.quarter { width:45%; float:left; margin-right:5%; padding-bottom:0px}

	#logo{
		width:100%;
		position: relative;
		margin:0 auto;
		left:0;
		background-color:#fff;
		text-align:center;
		top:0;
		left:0;
		-webkit-box-shadow: none;
		box-shadow: none;
		border:none;
		padding-bottom:0px;

	}
	
	#branding{
		position:relative;
		clear:both;
		display:block;
		width:90%;
		margin:0 auto;
		left:0;
		top:0;
		text-align:center;
		border-bottom:#ccc 1px solid;
		padding-bottom:20px;
	}
	
	.contactinfo{}
	
	.telephone {float: none; margin-right: 0px; margin-bottom:4px;	}
	
	.topbutton{
		float:none;
		outline:none;
		border: 1px solid #cccccc;
		display:block;
		margin:0 auto;
		padding:0.3em 0.7em;
		font-size:1em;
		text-transform:uppercase;
		text-decoration:none;
		background:none;
		color:#666;
		cursor:pointer;
		color:#000000;
		background-color:#e9eaea;
		-webkit-border-radius: 3px 3px 3px 3px;
		border-radius: 3px 3px 3px 3px;	
	}
	
		
	#top{ height:40px; text-align: center; padding-right:0px; }
	#top a, input.topsignup{ line-height:40px; padding:0; background-color:#323232;}
	#top a:hover, input.topsignup:hover{ background-color:#323232; }
	
	h1 { font-size: 1.5em;}
	h2 { font-size: 2.5em;}
	h3 { font-size: 1.8em;  }

	.whatwouldhappen{padding: 20px; margin:20px 0 0 0;}

	.haveyoursay{ width:100%;  }
	.haveyoursayR{ padding:15px 10px 20px 10px; margin:0px; margin-top:20px; }


}

@media only screen and (max-width : 480px) {
	
	#people { 
	  background: url(../images/people-sm.jpg) top center no-repeat;
	  height: 300px; 
	  margin: 0 auto; 
	  width: 100%; 
	  position: relative; 
	}
	.quarter { width:100%; float:none; margin-right:0%; padding-bottom:0px; clear:both;}
	.threequarter{width:100%; float:none; padding-top:0px; }
	.cup { width:60%;float:none;}
	
	.whatwouldhappen{padding: 10px 20px;}


	a.button, input.button, a.buttonR, input.buttonR {padding:0.3em 0.5em;}
	
	form.yoursayR input[type="text"], form.yoursay input[type="text"]{
		background-color:#FFFFFF;
		padding:10px;
		border:0;
		outline:none;
		-webkit-appearance: none;
		margin-right:0%;
		margin-bottom:10px;
		width:90%;
		display:inline-block;
	}
	form.yoursayR input[type="submit"], form.yoursay input[type="submit"]{
		width:70%; 
		background-color:#c6423b;
		padding:10px;
		border:0;
		outline:none;
		-webkit-appearance: none;
		color:#FFFFFF;
		cursor:pointer;
		display:inline-block;
	}
}