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

@import url("font/stylesheet.css");

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, div {
    display: block;
}

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
a img {border:none; text-decoration:none;}

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background: #FFF;
	font-family: Georgia, Times New Roman, serif;
	font-size: normal;
	color:#463380;
	vertical-align:baseline;
}

#pagewrap {	width: 100%; min-height:100%; position: relative; background:#fff url(../ui/content-bg.gif) repeat-x 0 200px; }


/* =============================== HEADER =============================== */
#header { width:100%; height:200px; overflow:hidden; background:#652E93 url(../ui/header.gif) repeat-x center top; }
#claire { position:absolute; right:-15px; top:-26px; z-index:3; }

/* =============================== NAVIGATION =============================== */
#nav { margin:0; font-size:0.85em; line-height:1.3em; background:#775DB1; position:relative; z-index:2;}
#nav ul { list-style:none; z-index:4; position:relative; }
#nav li { display:inline-block; padding:0; position:relative; }
#nav li a { display:inline-block; padding:0.5em 0.75em; text-decoration:none; color:#FFF; background:none; }
#nav li:hover > a, #nav a.active { color:#775DB1; background:#D0CEFF; }
#nav li:hover ul {display: block;}

#nav li ul {display:none; position:absolute; top:2.3em; left:0; -webkit-box-shadow: 0px 3px 3px 0px #775DB1; box-shadow: 0px 3px 3px 0px #775DB1;}
#nav li ul li {overflow:hidden;}
#nav li ul li a { color:#775DB1; background:#D0CEFF; display: block; width:200px;}
#nav li ul li a:hover { color:#FFF; background:#775DB1; }

#nav:after { clear:both; }

.dwn {display:block; height:1em; width:9px; float:right; background:url(../ui/arrow-down.png) no-repeat center bottom;}
#nav li a#whisper-boy {background:#007A84;}
#nav li:hover a#whisper-boy, #nav a#whisper-boy.active {background:#CFF; color:#007A84;}

/* =============================== CONTENT =============================== */
#content { position:relative; overflow:auto; padding-bottom: 100px; z-index:1; }
#note { width:300px; height:450px; display: block; position: absolute; top:200px; left:-50px; background:url(../ui/note-bg.gif) center no-repeat; z-index:0; }
#content.push { margin-top: 2em; }
#content img {margin-bottom: .5em; }

/* =============================== FOOTER =============================== */
#footer {position: relative; font-size:small; border-top:thin solid #463380; padding:10px 10px 0; z-index:1;
	margin-top: -100px; /* negative value of footer height */
	height: 80px;
	clear:both;
	text-align:center;}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/* =============================== COMMONs =============================== */
#nav ul, #content, .row { max-width: 940px; margin:0 auto; clear:both; }
#nav, #content { position:relative; padding-top:0; padding-left:10px; padding-right:10px; }
.clear { clear:both; }

.certs { text-align:center; display:block; }
.panel { display:block; overflow:hidden; background:#775DB0; padding:0.75em; margin-bottom:1em; color:#fff; }
.panel.half {width:46%;}
.panel .alpha, .panel .beta, .panel .coda { padding-bottom:0; }
.panel p {margin:0.5em 0;}
.panel h1,.panel h2,.panel h4,.panel h5,.panel h6 { letter-spacing:1px; }
.border { display:block; border:solid thin #775DB0; padding:0.75em; margin-bottom:1em; }
.border img {margin: 0;}

#gmap {width:100%;}

/* =============================== CONTACT Form =============================== */
#ceform .errormsg { font-size:0.7em; padding:0.5em; color:#F36; text-align:center; display: inline; }
#ceform input[type="text"], #ceform textarea, #ceform select, #ceform .errormsg {width:90%;}
#ceform input[type="text"], #ceform textarea, #ceform select { border: 1px solid #999; font-family: Georgia, Times New Roman, serif; font-style: italic; font-size:.85em; line-height: 140%; padding: 3px; margin-top:2px; }
#ceform input[type="submit"] {padding:0.5em; color:#FFF; background:#463380; font-size:large; border:none; cursor:pointer;}
#ceform .red {color:#F36;}

#vt, #ce {display: none;}

/* =============================== RESPONSIVE =============================== */
/* =============================== FULL SIZE =============================== */
	.row { display:block; position:relative; margin-bottom:0.75em; }

	/* ======== COLUMNS ======= */
	.sixteen, .fifteen, .fourteen, .thirteen, .twelve, .eleven, .ten, .nine, .eight, .seven, .six, .five, .four, .three, .two, .one, .thirds { position:relative; }

	.sixteen { width:100%; }
	.fifteen { width:93.55%; }
	.fourteen { width:87.1%; }
	.thirteen { width:80.65%; }
	.twelve { width:74.2%; }
	.eleven { width:67.75%; }
	.ten { width:61.3%; }
	.nine { width:54.85%; }
	.eight { width:48.4%; }
	.seven { width:41.95%; }
	.six { width:35.5%; }
	.five { width:29.05%; }
	.four { width:22.6%; }
	.three { width:16.15%; }
	.two { width:9.7%; }
	.one { width:3.25%; }

	.thirds { width:31.2%; }

	.alpha	{ float:left; padding-right:1.5%; }
	.beta	{ float:left; padding-right:1.5%; padding-left:1.5%; }
	.coda	{ float:right; padding-left:1.5%; }
	.sixteen, .alpha, .beta, .coda { margin-left:0; margin-right:0; padding-bottom:1.5em; }

	.float	{ float:left; }
	.equaliser {padding-bottom:100em; margin-bottom:-100em;}


/* =============================== TABLET LANDSCAPE =============================== */
@media screen and (max-width: 930px) and (min-width: 600px) {
	#header {height: 180px;}
	#pagewrap { background:#fff url(../ui/content-bg.gif) repeat-x 0 180px; }
	#note { top:180px; }

	.panel {padding: 2%;}
	.panel.half {width:96%;}

	#claire { width:210px; }
}

/* =============================== TABLET PORTRAIT =============================== */
@media screen and (max-width: 600px) and (min-width: 480px) {
	.sixteen, .fifteen, .fourteen, .thirteen, .twelve, .eleven, .ten, .nine, .eight, .seven, .six, .five, .four, .three, .two, .one, .thirds { width:100%; }
	.alpha, .beta, .coda { float:none; padding:0; }
	#header {height: 140px;}
	#pagewrap { background:#fff url(../ui/content-bg.gif) repeat-x 0 140px; }
	#note { top:140px; }
	.panel {padding: 3%;}
	.panel.half {width:94%;}

	#claire { width:160px; }
}

/* =============================== MOBILE SIZE =============================== */
@media screen and (max-width: 480px) {

	html { -webkit-text-size-adjust: none; }
	.sixteen, .fifteen, .fourteen, .thirteen, .twelve, .eleven, .ten, .nine, .eight, .seven, .six, .five, .four, .three, .two, .one, .thirds { width:100%; }
	.alpha, .beta, .coda { float:none; padding:0; }
	#header {height: 100px;}
	#pagewrap { background:#fff url(../ui/content-bg.gif) repeat-x 0 120px; }
	#note { top:120px; }
	.panel {padding: 5%;}
	.panel.half {width:90%;}

	#claire { width:130px; }
}

/* =============================== FONTs & TEXT =============================== */
h1,h2,h3,h4,h5,h6 { font-family:'Lobster13Regular', Arial, Helvetica, sans-serif; font-weight:normal; margin:0 0 0.5em; padding:0; }
h3 { display: block; color:#fff; text-align: center; background:#775DB1; padding:0.6em 0 0.5em; margin:0 0 0.5em; letter-spacing:1px;}
h3 a {color:#fff; text-decoration:none; }
a { text-decoration:underline; color:#099;  }
a:hover { text-decoration:none; }
p { margin:0 0 1em; padding:0; line-height:140%; }
ul {margin:0.5em 0 0 1em; padding:0; }
ul li {padding-bottom:5px;}
.pull-text { font-size: 2.2em; font-family:'Lobster13Regular', Arial, Helvetica, sans-serif; display:inline-block; padding-top:0.3em; }
.small-text { font-size:small; }
