@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

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

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 15px; padding: 0; margin: 0;}
body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #89867e;
	background:#f7f7f7 url(../images/pattern.png) repeat top left;
}
.gridContainer{
	background: #f9f9f9;
}
a {
	color: #333;
	text-decoration: none;
}
a:hover {
	color: #fff;
}
#footer a, #form_feedback a:hover, #title_right a {
    color: #9E5D63;
}
#footer a:hover, #title_right a:hover {
	color: #68234C;
}
.first:first-letter{
	font-size: 1.5em;
} 
.text-right{
	text-align:right;
}
.vid_container{
	max-width:1280px;
	margin:auto;
}
.video{
	position:relative;
	/*padding-bottom:56.25%;
	/*padding-top:26px;*/
	height:0;
	margin-bottom:2em;
}
.video iframe {
	position:absolute;
	width:100%;
	height:100%;
}
#contact_left{
	margin-top:-1.25em;	
}
#contact_right{
	margin-top:-1.25em;	
}
/*global form styles*/
fieldset {
	border: none;
	background: rgb(237, 228, 214);
	position: relative;
	min-width: 250px;
	padding:1em;
	margin: 1em 0;
	-webkit-border-radius: 0 .5em .5em 0;
	-moz-border-radius: 0 .5em .5em 0;
	border-radius: 0 .5em .5em 0;
}
fieldset:before {
	content:attr(title);
	display: block;
	font: 1.2em Cantarell, Arial, Helvetica, sans-serif;
	font-weight:bold;
	border-bottom: 1px solid rgb(76, 67, 65);
	width: 100%;
}
legend {
	position: absolute;
	top:0;
	left: -2000em;
}
fieldset p {
	font: .8em Cantarell, Arial, Helvetica, sans-serif;
	margin: 1em 0 0;
	font-style: italic;
}
label {
	display:block;
	font-size: 1em;
	margin: .8em 0 0;
}
#frmContact input, #frmContact textarea, #frmContact #state { 
    display:block;
	width:16em;
	width:100%;
	border:1px solid #aaa;
    padding:0.3125em;
	background:#ddd;
    box-shadow: 0px 0px 3px #ddd, 0 10px 15px #eee inset;
	font-size:1em;
	color:#666;
	-webkit-border-radius:0.25em;
	-moz-border-radius:0.25em;
	border-radius:0.25em;
}
#frmContact textarea {min-height:10em;}
#frmContact #state{width:inherit;}
input[type="button"]{max-width:10em;}
input[type="submit"]{display:block;margin:1em 0;max-width:10em;}
#frmContact #number,#frmContact #postcode{width:5em;}
input[type=number].noSpinners {-moz-appearance:textfield;}
input[type=number].noSpinners::-webkit-inner-spin-button,
input[type=number].noSpinners::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
form.frmContact label.error, label.error {
	/* remove the next line when you have trouble in IE6 with labels in list */
	color: red;
	font-style: italic
}
#form_feedback {                                                                       
	clear: both;
	float: left;
	margin-left: 0;
	width: 84%;
	display: block;
	padding:8%;
}
#fullwidth {                                                                       
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding:8%;
}
/* home slider container */
#home_slider {
	width: 100%;
}
/* text sizes */
.text_s{
	font-size:0.875em;
	display:block;
}
.text_m{
	font-size:1.25em;
	display:block;
}
.text_l{
	font-size:1.375em;
	display:block;	
}
.text_xl{
	font-size:1.75em;
	display:block;	
}
.tile_inset{
	clear: both;
	margin:auto;
	width:100%;
	max-width:290px;
	background: rgb(237, 228, 214);
	-webkit-border-radius: .5em .5em .5em .5em;
	-moz-border-radius: .5em .5em .5em .5em;
	border-radius: .5em .5em .5em .5em;
	-moz-box-shadow:0em 0.125em 0.375em 0em #aaa;
    -webkit-box-shadow:0em 0.125em 0.375em 0em #aaa;
    box-shadow:0em 0.125em 0.375em 0em #aaa;
	padding: 1em 0 1em 0;
}
.tile_inset2{
	color:#000;
	font-size:1.25em;
	padding:2%;
	background-color:#fff;
	text-align:center;
}
.tile_inset1{

}
.shadow{
	-moz-box-shadow:0.125em 0.125em 0.375em 0em #aaa;
    -webkit-box-shadow:0.125em 0.125em 0.375em 0em #aaa;
    box-shadow:0.125em 0.125em 0.375em 0em #aaa;
}
#map-canvas {
  height: 100%;
  padding: 0px
}
/*Flexislider styles */
#slider_box{max-width:600px;display: block;margin-left:auto;margin-right:auto;}
#slider{width:100%;}
#carousel li {margin-right: 5px;}
#carousel img {display: block; opacity: .5; cursor: pointer;}
#carousel img:hover {opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}
/* Loading
***********************/
.loading #portfolio_slide {opacity: 0;}
.loading:before  { content: 'LOADING'; display: block; margin: 100px 0 0; text-align: center; color: #fff; font-weight: bold; font-size: 60px; opacity: 0.3; }
body {opacity: 1; -webkit-transition: opacity 1s ease;}
/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		6;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	15;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 93.913%;
	padding-left: 1.0434%;
	padding-right: 1.0434%;
}
#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-image:url('../images/header480x100.png');
	height: 100px;
}
#nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#maincontent1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#maincontent2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:justify;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding-bottom: 1.2em;	
}
.dialoguebox{
	width: 84%;
	margin: 8% auto 8% auto;
	display: block;
}
.dialoguebox2{
	width: 84%;
	margin: 0 8% 0 8%;
	text-align: justify;
}
.dialoguebox2 h1{
	text-align: center;
}
.vid-content{
	clear: both;
	float: left;
	width: 100%;
	margin-top: 1.125em;
}
.vid-dialogue{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: -2em;
}
#footer_left{
	clear: both;
	float: left;
	margin-left: 0;
	width: 48.8888%;
	display: block;
}
#footer_right{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding-top: 0.5em;
}
#contact_left{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact_right{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact_header{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#portfolio_tile1{
	clear: both;
	float: left;
	margin-left: 0;
	width: 48.8888%;
	display: block;
	margin-top:1em;
}
#portfolio_tile2{
	clear: none;
	float: left;
	margin-left: 2.2222%;
	width: 48.8888%;
	display: block;
	margin-top:1em;
}
#portfolio_tile3{
	clear: both;
	float: left;
	margin-left: 0;
	width: 48.8888%;
	display: block;
	margin-top:1em;
}
#portfolio_tile4{
	clear: none;
	float: left;
	margin-left: 2.2222%;
	width: 48.8888%;
	display: block;
	margin-top:1em;
}
#home_container{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#sidebar{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background: rgb(237, 228, 214);
	-webkit-border-radius: .5em .5em .5em .5em;
	-moz-border-radius: .5em .5em .5em .5em;
	border-radius: .5em .5em .5em .5em;
}
#nested1{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#nested2{
	clear: both;
	float: left;
	margin-left: 0;
	width: 94%;
	display: block;
	font-size:1.125em;
	padding:3%;
	text-align:justify;
}
#sidebar_insert{
	clear: both;
	float: left;
	margin: 3.125% 3.125% 0 3.125%;
	width: 93.75%;
	display: block;
	background-color:#fff;
}
#sidebar_insert2{
	clear: both;
	float: left;
	margin: 0 3.125% 3.125% 3.125%;
	width: 93.75%;
	padding:7% 3% 5% 3%;
	display: block;
	text-align:center;
	font-family: Arial, sans-serif;
	background-color:#fff;
	padding-bottom:1.5em;
	color:#000;
}
#map_container{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 31.25em;
}
#directions_container{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#portfolio_slide{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#title{
	clear: both;
	float: left;
	margin-left: 0;
	width: 97%;
	display: block;
	padding:1em 0 .625em 3%;
}
#title_left{
	clear: both;
	float: left;
	margin-left: 0;
	width: 97%;
	display: block;
	padding:1em 0 .625em 3%;
}
#title_right{
	clear: none;
	float: left;
	margin-left: 0;
	width: 97%;
	display: block;
	padding:0 0 .625em 3%;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 94.4347%;
	padding-left: 0.7826%;
	padding-right: 0.7826%;
}
#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-image:url('../images/header768x140.png');
	height: 140px;
}
#nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#maincontent1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 49.1712%;
	display: block;
}
#maincontent2 {
	clear: none;
	float: left;
	margin-left: 1.6574%;
	width: 49.1712%;
	display: block;
	text-align:justify;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.vid-content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top:1.25em;
}
.vid-dialogue {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 49.1712%;
	display: block;
}
#footer_right {
	clear: none;
	float: left;
	margin-left: 1.6574%;
	width: 49.1712%;
	display: block;
	text-align:right;
	padding:0;
}
#contact_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact_right {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact_header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#frmContact input, #frmContact textarea {width:25em;}
#portfolio_tile1 {clear: both;float: left;margin-left: 0;width: 49.1712%;display: block;}
#portfolio_tile2 {clear: none;float: left;margin-left: 1.6574%;width: 49.1712%;display: block;}
#portfolio_tile3 {clear: both;float: left;margin-left: 0;width: 49.1712%;display: block;}
#portfolio_tile4 {clear: none;float: left;margin-left: 1.6574%;width: 49.1712%;display: block;}
#home_container {clear: both;float: left;margin-left: 0;width: 61.8784%;display: block;margin-top: 1em;}
#sidebar {clear: none;float: left;margin-left: 1.6574%;width: 36.464%;display: block;margin-top: 1em;}
#nested1 {clear: both;float: left;margin-left: 0;width: 100%;display: block;}
#nested2 {clear: both;float: left;margin-left: 0;width: 94%;padding: 3%;display: block;}
#sidebar_insert {clear: both;float: left;margin: 3.125% 3.125% 0 3.125%;width: 93.75%;display: block;}
#sidebar_insert2 {clear: both;float: left;margin: 0 3.125% 3.125% 3.125%;width: 93.75%;display: block;}
#map_container {clear: both;float: left;margin-left: 0;width: 100%;display: block;margin-top:1em;}
#directions_container {clear: both;float: left;margin-left: 0;width: 100%;display: block;margin-top:1em;}
#portfolio_slide {clear: both;float: left;margin-left: 0;width: 100%;display: block;}
#title {clear: both;float: left;margin-left: 0;width: 97%;display: block;padding:1.25em 0 .75em 3%}
#title_left{clear: both;float: left;margin-left: 0;width: 36.4505%;display: block;padding:1.25em 0 .75em 3%}
#title_right{text-align:right;clear: none;float: right;display: block;margin-left: 0.0989%;width: 56.4505%;padding:1.5em 3% .5em 0}
}
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 91.0217%;
	max-width: 1500px;
	padding-left: 0.4891%;
	padding-right: 0.4891%;
	margin: auto;
}
#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-image:url('../images/header1232x180.png');
	background-repeat: no-repeat;
	height: 180px;
}
#nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#maincontent1 {
	clear: left;
	float: left;
	margin-left: 0;
	width: 49.4505%;
	display: block;
}
#maincontent2 {
	clear: none;
	float: right;
	margin-left: 0.0989%;
	width: 49.4505%;
	display: block;
	text-align:justify;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.vid-content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top:1.625em;
}
.vid-dialogue {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 49.4505%;
	display: block;
}
#footer_right {
	clear: none;
	float: left;
	margin-left: 1.0989%;
	width: 49.4505%;
	display: block;
	text-align:right;
	padding:0;
}
#contact_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 49.4505%;
	display: block;
}
#contact_right {
	clear: none;
	float: left;
	margin-left: 1.0989%;
	width: 49.4505%;
	display: block;
}
#contact_header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#frmContact input, #frmContact textarea {width:18.75em;width:100%}
#portfolio_tile1 {clear: both;float: left;margin-left: 0;width: 24.1758%;display: block;}
#portfolio_tile2 {clear: none;float: left;margin-left: 1.0989%;width: 24.1758%;display: block;}
#portfolio_tile3 {clear: none;float: left;margin-left: 1.0989%;width: 24.1758%;display: block;}
#portfolio_tile4 {clear: none;float: right;margin-left: 0.0989%;width: 24.1758%;display: block;}
#home_container {clear: both;float: left;margin-left: 0;width: 74.7252%;display: block;margin-top: 1.25em;}
#sidebar {clear: none;float: right;margin-left: 0.0989%;width: 24.1758%;display: block;margin-top: 1.25em;}
#nested1 {clear: both;float: left;margin-left: 0;width: 49.4505%;display: block;}
#nested2 {clear: none;float: left;margin-left: 1.0989%;width: 46.4505%;padding:1.5%;display: block;margin-top:-1.25em;}
#sidebar_insert {clear: both;float: left;margin: 3.125% 3.125% 0 3.125%;width: 93.75%;display: block;}
#sidebar_insert2 {clear: both;float: left;margin: 0 3.125% 3.125% 3.125%;width: 93.75%;display: block;}
#map_container {clear: both;float: left;margin-left: 0;width: 59.4505%;display: block;margin-top:1.5em;}
#directions_container {clear: none;float: right;margin-left: 0.0989%;width: 39.4505%;display: block;margin-top:1.5em;padding-left:1%}
#portfolio_slide{clear: both;float: left;margin-left: 0;width: 100%;display: block;margin:auto;}
#title{clear: both;float: left;margin-left: 0;width: 97%;display: block;padding:1.75em 0 1em 3%}
#title_left{clear: both;float: left;margin-left: 0;width: 46.4505%;display: block;padding:1.75em 0 1em 3%}
#title_right{text-align:right;clear: none;float: right;display: block;margin-left: 0.0989%;width: 46.4505%;padding:2em 3% .75em 0}
}
@media only screen and (min-width: 1233px) {
#frmContact input, #frmContact textarea {width:28em;}
#nested2, .dialoguebox{
	font-size:1.25em;
}
.vid-dialogue {
	max-width:1280px;
	margin:auto;
	float: none;
}
}
@media only screen and (min-width: 1500px) {
#frmContact input, #frmContact textarea {width:32em;}
#nested2, .dialoguebox{
	font-size:1.375em;
}
}