@charset "UTF-8";
	
/* 
	CSS Styles for the Dojo
	Author: Russell Kerr
	www.stylizemultimedia.co.uk
*/

/* For HTML5 Shiv */

header, section, article, nav, footer {display:block;}

/****** Main Styles ******/

body, html {margin:0; font: 13px;}

body {font: 13px 'MyriadWeb', "Trebuchet Ms", Arial, sans-serif; color:#3c3c3c; position:relative;}
b, strong {font-family:'MyriadWebBold', "Trebuchet Ms", Arial, sans-serif; font-weight:normal;}
em {font-family:'MyriadWebItalic', "Trebuchet Ms", Arial, sans-serif; font-weight:normal; font-style:normal;}.clear {clear:both; width:100%; display:block; height:1px; background:transparent;}

.wrapper {width:960px; margin:0 auto;}

a {text-decoration:none; color:#16335a;}
a.img {border:0;}

/****** Headings ******/

h1 {font-size:27px; margin:0; padding:0;}

h1,h2,h3 {font-family:'MyriadWebBold'; font-weight:normal;}


/***** Header and Footer ******/

/* Header Navigaton */

header {
	width:100%; 
	background:url(images/header/bg.png) bottom center repeat-x transparent;
	height: 50px;
	box-shadow: 2px 2px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.2);
	-o-box-shadow: 2px 2px 2px rgba(0,0,0,.2);
	padding-top: 20px;
	position:absolute;
	z-index:999;
	top:0;
}


header h1 {margin:0; padding:3px 0 0; width:130px; float:left;}

header h1 a {	
	background:url(images/header/logo.png) 0 0 no-repeat transparent;
	width: 130px;
	height: 35px;
	display:block;
}

header nav {width: 800px; float:right; text-transform:uppercase; color:#FFF;}

header nav a {
	color:#FFF; 
	text-decoration:none; 
	font-family:'MyriadWebBold'; 
	font-size:11px; 
	text-shadow: 1px 1px 1px rgba(0,0,0,.6); 
	-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,.6); 
	-moz-text-shadow: 1px 1px 1px rgba(0,0,0,.6); 
	-o-text-shadow: 1px 1px 1px rgba(0,0,0,.6);
	padding:10px 20px;
	/*transition: all ease-in-out .2s;
	-webkit-transition: all ease-in-out .2s;
	-moz-transition: all ease-in-out .2s;
	-o-transition: all ease-in-out .2s;*/
	border-radius: 5px;
	}
	
header nav a:hover {
	box-shadow:inset 1px 1px 2px rgba(0,0,0,.6);
	background:url(images/header/nav-grad.png) bottom center repeat-x;
	border-radius: 5px;
	text-shadow:none;
}
	
header nav ul {margin:0; padding:10px 0 0; list-style:none;}
header nav ul li {float:right; margin:0 4px;}

/* Footer */

footer {width:100%; border-top:1px solid #ababab; background:url(images/footer/bg.png) top center no-repeat #ffffff; margin-top:30px; clear:both; padding-top:20px; color:#3c3c3c;}
footer h1 {width:290px; text-transform:uppercase; font-size:15px; padding:5px;}

footer .column {width:300px; float:left; margin-right:30px; padding:10px 0;}
footer .column.last {margin-right:0;}
footer .column a:hover {border-bottom:1px solid;}
footer .column p {padding: 0 5px;}

footer .miniLinks {width:100%; padding:15px 0 10px 0; color:#FFF; background:#1a2e47; height:15px; font-size:11px;}
footer .miniLinks p {padding:0; margin:0;}
footer .miniLinks a {color:#FFF; padding: 0 3px;}
footer .miniLinks a:hover {text-decoration:underline;}

/****** Homepage ******/

body.homepage {background:#e6e6e6;}

#bannerHome {
	width:100%; 
	height:450px; 
	background:url(images/header/topbg.png) bottom center repeat-x;
	box-shadow:0 2px 3px rgba(0,0,0,.15);
	padding-top:30px;
	}

.bannerHomeBg {background:url(images/home/banner-bg.png) bottom left no-repeat transparent; height:380px; display:block; width:960px; padding-top: 70px;}

#bannerHome h1 {width:940px; height:90px; display:block; margin:0; padding:0; background:url(images/home/logo.png) 0 0 no-repeat;}
#bannerHome h1 span {display:none;}
#bannerHome img {padding-top:25px;}
#bannerHome .btnYellow {width:173px; height:47px; display:block; background:url(images/home/btnYellow.png) 0 0 no-repeat; float:right; margin-right: 350px;}
#bannerHome .btnYellow:hover {background-position: 0 -47px;}

#homeCol {width:300px; margin-right:30px; float:left; margin-top:30px;}
#homeCol.last {margin-right:0;}
#homeCol header {padding-bottom:10px; width:300px; height:35px; background:url(images/gen/shadow300.png) bottom center no-repeat; position:static; padding:0 0 12px 0; box-shadow:none;}

#homeCol h1 {
	padding:7px 5px 3px 14px; 
	color:#FFF; 
	width:280px;
	height:25px;
	display:block;
	text-transform:uppercase;
	font-size:17px;
	text-shadow:2px 2px 2px rgba(0,0,0,.15);
	-webkit-text-shadow:2px 2px 2px rgba(0,0,0,.15);
	-moz-text-shadow:2px 2px 2px rgba(0,0,0,.15);
	-o-text-shadow:2px 2px 2px rgba(0,0,0,.15);
	margin:0;
}

#homeCol h1.kids {background:url(images/home/kidsBg.png) 0 0 no-repeat;}
#homeCol h1.adult {background:url(images/home/adultBg.png) 0 0 no-repeat;}
#homeCol h1.network {background:url(images/home/networkBg.png) 0 0 no-repeat;}

#homeCol img {padding-bottom:10px; padding-top:11px; background:url(images/gen/shadow300.png) bottom center no-repeat;}
#homeCol img.kids {padding-top:0;}

#homeCol article {height:185px;}
#homeCol .btn {width:135px; height:35px; display:block; float:right;}
#homeCol .btn.adult:hover, #homeCol .btn.kids:hover, #homeCol .btn.network:hover, #homeCol .btn.contact:hover { background-position: 0 -35px;}

#homeCol .btn.adult {background:url(images/home/adultBtn.png) 0 0 no-repeat;}
#homeCol .btn.kids {background:url(images/home/kidsBtn.png) 0 0 no-repeat;}
#homeCol .btn.network {background:url(images/home/networkBtn.png) 0 0 no-repeat;}
#homeCol .btn.contact {background:url(images/about/contactBtn.png) 0 0 no-repeat; margin-top:15px;}


#wwjCallout {
	border:3px solid #FFF; 
	border-radius:6px; 
	height: 100px; 
	padding:15px 25px; 
	clear:both; 
	margin-top:30px;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #e6e6e6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#e6e6e6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
	box-shadow: 0 4px 8px rgba(0,0,0,.10);
	}
	
#wwjCallout h1 {font-size:15px; color:#16335a;}
#wwjCallout h1, #wwjCallout p {width: 600px; float:left; margin:9px 5px 0 5px; padding:0;}
#wwjCallout img {width:100px; float:left; padding-right:45px;}
#wwjCallout .moreBtn {width:110px; height:32px; display:block; background:url(images/home/moreBtn.png) 0 0 no-repeat; float:right; margin-top:37px;}
#wwjCallout .moreBtn:hover {background-position:0 -32px;}

/****** About Us ******/

#bannerAbout {
	width:100%; 
	height:450px; 
	background:url(images/about/topbg.png) bottom center repeat-x;
	box-shadow:0 2px 3px rgba(0,0,0,.15);
	padding-top:30px;
	}
	
.bannerAboutBg {background:url(images/about/banner-bg.png) bottom left no-repeat transparent; height:380px; display:block; width:960px; padding-top: 70px;}


#bannerAbout h1 {wdth:940px; height:90px; display:block; margin:0; padding:0; background:url(images/home/logo.png) 0 0 no-repeat;}
#bannerAbout h1 span {display:none;}
#bannerAbout img {padding-top:25px;}
#bannerHome .btnYellow:hover {background-position: 0 -47px;}

/****** Adults ******/

body.adults {background:url(images/adult/bg.jpg) 0 0 repeat-x #373331; color:#FFF; margin:0;}
.adultWrapper {width:1000px; margin: auto; min-height:300px; clear:both; font-size:14px;}

#adultTop {background:url(images/adult/bgTop.png) center bottom no-repeat; height:498px; padding-top:60px; position:relative;}
#adultMid {background:url(images/adult/bgMid.png) center 0 no-repeat; height:435px; color:#3c3c3c; padding:5px 40px;}
#adultBtm {background:url(images/adult/bgBtm.png) center 0 no-repeat; height:543px; padding:25px 40px;}
#adultFooter {background:transparent; padding:10px 40px 25px 40px;}

#adultTop .syllabusBtn {width:210px; height:25px; background:url(images/adult/syllabusBtn.png) 0 0 no-repeat; display:block; position:absolute; bottom:28px; right:25px;}
#adultTop .syllabusBtn:hover {background-position: 0 -25px;}

#adultMid .gallery {width:300px; float:left; display:block; min-height:250px;}
#adultMid article {width:575px; float:left; padding-left:25px; padding-top:5px;}

#adultBtm article {float:left; width:550px; padding-top:25px;}
#adultBtm .form {width:230px; padding:100px 35px 0 35px; height:415px; background:url(images/adult/formBg.png) 0 0 no-repeat; float:right; margin-right:10px;}
#adultBtm .form label {width:230px; font-family:'MyriadWebBold'; text-decoration:underline; padding-bottom:3px;}
#adultTel, #adultName {width:220px; padding:3px; height:17px; box-shadow: inset 2px 2px 2px #CCC; color:#3c3c3c;}
#adultTel:focus, #adultName:focus {outline:none;}
#adultBtm .form .submit-button {float:right; margin-top:10px;}

#adultFooter .gallery {width:175px; float:left; display:block;}
#adultFooter article {width:675px; float:left; padding-left:35px; padding-top:20px; padding-bottom:30px;}


/****** Kids ******/

body.kids {background:url(images/kids/bg.jpg) 0 0 repeat-x #133d6c; color:#FFF;}
.kidsWrapper {width:1000px; margin: 0 auto; padding-top:100px;}
.kidsWrapper h1 {width:900px; height:80px; margin:10px 0 20px 40px; background:url(images/kids/logo.png) 0 0 no-repeat; display:block;}
.kidsWrapper h1 span {display:none;}

.kidsBanner {float:right; margin-right:50px; clear:both; margin-bottom:20px;}
.kidsFinding {float:left; margin-left:10px; clear:both; position:relative;}
.kidsBadge {float:right; clear:both; background:url(images/kids/badge.png) left center no-repeat; height:95px; width:600px; font: 18px 'MyriadWebBold'; padding:20px 0 0 130px; text-shadow: 2px 2px 0 rgba(0,0,0,.35);}

#parents {width:320px; height:245px; background:url(images/kids/parentsBg.png) 0 0 no-repeat; float:left; clear:both; color:#3c3c3c; padding: 40px 50px 30px 90px; font-size:14px; margin-top:15px;}

#syllabusBtn {width:170px; height:25px; background:url(images/kids/syllabusBtn.png) 0 0 no-repeat; position:absolute; right:155px; bottom:36px; display:block;}
#syllabusBtn:hover {background-position:0 -25px;}

#timetableWrapper {width:450px; float:left; padding-left:30px; z-index:10;}
#timetableTop {width:450px; height:227px; background:url(images/kids/timetableTop.png) 0 0 no-repeat; position:relative;}
#timetableBtm {width:450px; height:253px; background:url(images/kids/timetableBtm.png) 0 0 no-repeat;}
#clickHere {width:120px; height:40px; display:block; background:url(images/kids/clickhere.png) 0 0 no-repeat; position:absolute; bottom: 14px; right: 20px;}
#clickHere:hover {background-position: 0 -40px;}

#postitsWrapper {width:512px; height:524px; background:url(images/kids/postitsBg.jpg) 0 0 no-repeat; float:left; position:relative; top:-130px; z-index:-1;}
#postitsWrapper article {font: 14px 'MyriadWebBold'; color:#FFF; text-shadow: 1px 1px 2px rgba(0,0,0,.25); height:113px; width:412px;}
#postitsWrapper article h1 {width:auto; height:auto; background:none; margin:0; font-size:18px; }
#postitsWrapper article.top {padding: 40px 70px 20px 30px;}
#postitsWrapper article.mid {padding: 35px 30px 20px 70px;}
#postitsWrapper article.btm {padding: 25px 70px 20px 30px;}

#shopWrapper {width:450px; float:right; }
#shopTop { background:url(images/kids/shopBg.jpg) 0 0 no-repeat; position:relative; height:311px; width:450px; }
#shopBtn {width:80px; height:30px; position:absolute; right:48px; bottom: 41px; background:url(images/kids/shopBtn.png) 0 0 no-repeat; display:block;}
#shopBtn:hover {background-position: 0 -30px;}
#eventsBtm {background:url(images/kids/eventsBtm.jpg) -3px 0 no-repeat; position:relative; height:350px; position:relative;}
#eventsBtn {width:80px; height:20px; display:block; position:absolute; background:url(images/kids/eventsBtn.png) 0 0 no-repeat; top:87px; right:190px;}
#eventsBtn:hover {background-position: 0 -20px;}

#boxOne {float:left; padding:0 0 40px 80px; margin-top:20px; width:400px; font: 14px 'MyriadWebBold'; text-shadow:1px 1px 2px rgba(0,0,0,.35); position:relative; top:-130px; background:url(images/kids/quote.png) 25px top no-repeat;}
#boxTwo {float:right; margin-top:60px; width:400px; font: 14px 'MyriadWebBold'; text-shadow:1px 1px 2px rgba(0,0,0,.35); position:relaitve; top:-130px;}
#boxTwo h1 {width:auto; height:auto; background:none; margin:0; font-size:18px; }

#kidsForm {float:left; width:500px; height:180px; background:url(images/kids/formBg.png) 0 0 no-repeat; position:relative; top:-130px;}
#kidsForm #adultTel, #kidsForm #adultName {float:left; margin-bottom:6px; width:200px; height:15px; box-shadow:inset 4px 4px 4px rgba(0,0,0,.25);}
#kidsForm label {float:left; width:100px; font:14px 'MyriadWebBold'; clear:both; text-decoration:underline;}
#kidsForm .submit-button {position:absolute; right:21px; bottom:33px;}

.formWrap {width:410px; padding-top:85px; padding-left:30px;}

/****** Dojo Network *******/

#bannerNetwork {
	width:100%; 
	height:450px; 
	background:url(images/about/topbg.png) bottom center repeat-x;
	box-shadow:0 2px 3px rgba(0,0,0,.15);
	padding-top:30px;
	}
	
.bannerNetworkBg {background:url(images/network/bannerbg.png) bottom left no-repeat transparent; height:380px; display:block; width:960px; padding-top: 70px;}

.networkContent {}
.networkContent article {border-bottom:1px solid #FFF; padding:10px 10px 10px 0;}
.networkContent article p {margin:0; padding:10px 0; width:435px; float:right;}
.networkContent article:hover {background:#f0f0f0;}
.networkContent article a:hover {text-decoration:underline;}
.networkContent article img {float:left; padding-right:25px; padding-left:5px;}

article.transBlock {height:auto!important; padding:0 10px 15px;}

article.block {padding-bottom:10px; height:auto!important; background:url(images/gen/shadow300.png) bottom center no-repeat;}
article.block div {background:#FFF; padding:10px 15px;}
article.block div img {background:none!important; padding:0!important;}

/****** Contact Us ******/

.bannerContactBg {background:url(images/contact/banner-bg.png) bottom left no-repeat transparent; height:380px; display:block; width:960px; padding-top: 70px;}

#contact-area {
	width: 575px;
	margin-top: 25px;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 471px;
	font-family: Helvetica, sans-serif;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #ffc200;
	outline:none;
}

#contact-area input.submit-button {
	width: 100px;
	float: right;
	border-radius:6px;
	background:#1a2e47;
	color:#FFF;
	font-weight:bold;
	font-size:15px
}

#contact-area input.submit-button:hover {background:#ffc200; cursor:pointer;}


label {
	float: left;
	text-align: left;
	margin-right: 15px;
	width: 75px;
	padding-top: 5px;
}

/****** ALL PAGES ******/

#mainContent {width:600px; margin: 30px 60px 30px 0; float:left;}

/****** COLOURS ******/

.white {color:#FFF;}
.yellow {color:#ffc200;}
.navy {color:#1a2e47;}

a.noborder, a.noborder:hover {border:0!important; text-deocation:none!important;}