/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }


/* =============================================================================
   Base
   ========================================================================== */

html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

img { border: 0; -ms-interpolation-mode: bicubic; }

svg:not(:root) {
    overflow: hidden;
}


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

legend { border: 0; *margin-left: -7px; padding: 0; }

label { cursor: pointer; }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

button, input { line-height: normal; *overflow: visible; }

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; }

input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }


/* =============================================================================
   Primary styles
   Author: Shaun McKay for Forest Design
   ========================================================================== */

body{
	color: #111;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:85%;
	text-align: center;
}

#container {
	width: 996px;
	background:#FFF url(img/contentbg.png) 0 200px no-repeat;
	height:100%;
	text-align: left;
	margin:0 auto;
	position: relative;	
}
#container2 {background:url(img/sidebar.png) repeat-y; height:100%;}


/* Header
=======*/

#header {}

#header h1 {text-indent: -999em; overflow: hidden; margin:0; padding:0; background:url(img/header.jpg); height:198px;}



/* Navigation
===========*/



#nav {
	background:url(img/nav.png) repeat-x;
	height:43px;
	margin:0; padding:0;
	margin-top:-5px;
	text-align:right;
	}
	
#nav ul {position:absolute;}
	
#nav li {
	display:inline;
	line-height:43px;
	font-size:120%;
	position:relative;
	}
	
#nav a {
	color:#FFF;
	text-decoration:none;
	line-height:34px;
	display:inline-block;
	padding:0px 22px;
	height:34px;
	}

#nav li:hover {
	visibility: inherit; }/* fixes IE7 'sticky bug' */
	
#nav a:hover, #nav a:focus {text-decoration:underline;}



/* Content
========*/

#content {
	float:right;
	width: 626px;
	padding:0 35px;
}



#sidebar {
	float:left;
	width:240px;
	padding:5px 30px;
	color:#FFF;
}

#sidebar h2 {font-size:140%; border-bottom:none; margin-bottom:15px;}

#sidebar li {background:url(img/bullet.png) no-repeat 0 50%; padding-left:20px; list-style:none; margin:6px 0;}



.pullquote {
	color:#2f52b3;
	font-size:180%;
	width: 380px;
	text-align:center;
	margin:50px auto;
}


.image img {float:left; margin-right:30px;}


.image {clear:both; height:130px; margin:30px 0;}

.image h3 {
	padding-top:20px;
	font-weight: normal;
}



/*Footer
=======*/

#footer {
	clear:both;
	color:#2f52b3;
	border-top:2px solid #2f52b3;
	margin:0 35px 0 335px;
	padding:15px 0;
	
	
}

#footer p {text-align:right; margin:0; font-size:80%;}

#footer a {color:#2f52b3; text-decoration:none;}

#footer a:hover, #footer a:focus {text-decoration:underline;}


/* Typography 
===========*/

/* Headings */

h1 {
	color: #111;
	font-size: 300%;
	font-family:Verdana, Geneva, sans-serif;
	font-weight: bold;
	line-height: 160%;
	margin:25px 0 15px 0;
}

h2 {
	color: #FFF;
	font-size: 180%;
	font-weight: normal;
	line-height: 160%;
	margin:25px 0 60px -1px;
	border-bottom:2px solid #FFF;
	
}


h3 {
	color: #111;
	font-size: 100%;
	font-family:Verdana, Geneva, sans-serif;
	font-weight: bold;
	line-height: 160%;
	margin:25px 0 5px 0;
}

/* Text Elements */

p {
	font-size: 100%;
	line-height: 150%;
	font-weight: normal;
	text-align: justify;
	margin: 0 0 1.5em;
}


a, a:visited {
	color: #06c;
	text-decoration:underline;
}

a:hover, a:focus {	
	color: #09f;
	text-decoration:underline;
}
	
a:active {	
	color: #FF000;
	text-decoration:underline;

}

.left  			{ float: left !important; }
p .left			{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.right 			{ float: right !important; }
p .right 		{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

.bold {font-weight:bold;}

.italic {font-style:italic;}

.center {text-align:center}

.red {color:red;}

.blue {color:blue;}


/*Lists*/

li ul,
li ol       { margin: 0; }
ul, ol      { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables */

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; }
thead th    { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }


tfoot       { font-style: italic; }
caption     { background: #eee; }


/* Forms 
===========*/

*:focus{outline:none !important; /* Prevents blue border in Webkit */}
		
#form {		
			width:85%;
			margin: 20px auto;
			
		}
		
#form fieldset {
			width:50%;
			float:left;
		}
		
#form .enquiry {width:100%; float:left;}
		
#form label {
			height:21px; 
			line-height:21px;
			cursor:default;}
 
#form input, #form textarea {
			
			background-color:#fff;
			border:1px solid #ccc;
			font-size:11px;
			font-family:Tahoma, Geneva, sans-serif;
			color:#333;
			width:90%;
			height:19px;
			display:block;
			margin:5px 0 16px 0;
			padding:2px;			
			-webkit-border-radius:5px;
			-moz-border-radius:5px;
			border-radius:5px;

		}
		
		
#form textarea {
			    width:95%;
				min-height:100px;						
		}

		
#form input:valid, textarea:valid   {  }

 
#form input:focus, textarea:focus {
			-webkit-box-shadow:0 0 15px #ccc;
			-moz-box-shadow:0 0 15px #ccc;
			box-shadow:0 0 15px #ccc;			
			
		}
		
		/* The interesting bit */
		
#form input:not(:focus), textarea:not(:focus) {
			opacity:0.9;
			
		}
		
#form input:required, textarea:required {
			background:#FFF url("img/asterisk_orange.png") no-repeat 98% 0.3em;						
		}
 
#form input:valid, textarea:valid {
			background:#FFF url("img/tick.png") no-repeat 98% 0.3em;			
		}		
 
#form input:focus:invalid, textarea:focus:invalid {
			background:#FFF url("img/cancel.png") no-repeat 98% 0.3em;						
		}
 
#form input[type=submit], #form input[type=button], #button {
	width: 120px;
	height:34px;
	font-size: 12px;
	margin: 10px auto;
	padding: 2px;
	color: #FFF;
	font-weight:bold;
	background:url(img/sidebar.png);
	border:1px solid #999;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	clear:both;
	float:none;
		}
		
#form input[type=button] {margin:5px auto; height:24px;}


#form input:hover[type=submit], #form input:hover[type=button], #button:hover {
			color:#FFF;
			   /* fallback/image non-cover color */
   background:#000;
		}

label.error { text-align: left !important; margin:-15px 0 10px 0; color: #CC0000; padding: 0; height: auto; width: 200px !important; float:left;}
input.error, textarea.error { border: 1px solid #CC0000 !important }

#form p {clear:both;}

#captcha {margin:0 auto; width:320px;}




/* SLIMBOX */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(img/loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(img/prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(img/nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(img/closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}




/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* User Added Utilities */

.smartphone {display:block;}
.largescreen {display:none;}

.floatleft {float: left;}
.floatright {float: right;}

img.floatleft  {padding:3px 10px 10px 0;}

img.floatright  {padding:3px 0 10px 10px;}

.clear { clear: both; }
.clearleft { clear: left; }
.clearright { clear: right; }

hr.invisible { visibility: hidden; clear:both;}



/* -------------------------------------------------------------- 
  
   Mobile Styles
   
-------------------------------------------------------------- */

@media all and (orientation:portrait) {

}

@media all and (orientation:landscape) {

}

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

  
.floatleft {float: none; clear:both;}
.floatright {float: none; clear:both;}

img.floatleft  {padding:5px auto;}
img.floatright  {padding:5px auto;}

img {max-width:100%;}


/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
  
* {  float: none;
 -webkit-text-size-adjust:none;
}

.smartphone {display:block;}
.largescreen {display:none;}

h1, h2, h3, p {clear:both;}


body {font-size:1em;}

#container {
	max-width:100%;
	overflow:hidden;
	}


#container2 {background:none;}


/* Header
=======*/

#header {}

#header h1 {text-indent: -999em; overflow: hidden; margin:0; padding:0; background:url(img/header-mobile.jpg); height:95px;}



/* Navigation
===========*/


#nav {
	text-align:center;
	font-size:70%;
	}
	

	
#nav a {
	padding:0px 11px;
	}



/* Content
========*/

#content {
	float:none;
	width: 90%;
	padding:10px 0px;
	margin:0 auto;
}


#sidebar {
	float:none;
	width:100%;
	padding:10px 5%;
	margin:0 auto;
	background:url(img/sidebar-mobile.jpg);
}

#sidebar h2 {font-size:140%; border-bottom:none; margin-bottom:15px;}

#sidebar li {background:url(img/bullet.png) no-repeat 0 50%; padding-left:20px; list-style:none; margin:6px 0;}



.pullquote {
	color:#2f52b3;
	font-size:180%;
	width: 80%;
	text-align:center;
	margin:50px auto;
}


.image img {float:none !important; width:170px; margin:10px auto; clear:both;}

.image {float:none; clear:both; height:auto; margin:30px auto; text-align:center; border-bottom:solid 1px black;}

.image p {text-align:center; clear:both; float:none;}

.image h3 {padding-top:0px; clear:both;}



/*Footer
=======*/

#footer {
	clear:both;
	color:#2f52b3;
	border-top:2px solid #2f52b3;
	margin:10px;
	padding:15px 0 0 0;
	
	
}




/*form
=======*/
		
#form form {
	width:80%;
	}
		
#form fieldset {
	width:100%;
	float:none;
	}
		
#form label {
	float:none;
	margin:5px auto;
	line-height:1em;
	}
 
#form input, #form textarea {
	width:80%;
	height:19px;
	margin:5px auto;
	}
		
#form textarea {
	width:80%;
	min-height:100px;
	}
	
}