@charset "utf-8";

/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/

   v2.0 | 20110126
   License: none (public domain)
*/


/*
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, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}

 */


body {
	margin: 0;
}



/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {

	display: block;
}

p, blockquote, ul, li, ol, dl, dt, dd, div{
	text-align: left;
}



/* Base styles */



body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1em;
		line-height: 1.4em;
		color: #0C5C76;
		background-color: #f5f3e4;
}


ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

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

p{

	margin-bottom: 1em;

}

a {
	color:#df5579;
}




@font-face {
    font-family: 'Little Days';
    src:url('Little-Days.ttf.woff') format('woff'),
        url('Little-Days.ttf.svg#Little-Days') format('svg'),
        url('Little-Days.ttf.eot'),
        url('Little-Days.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: lighter;
    font-style: normal;
}


#footer{
	text-align: center;
	color: #0C5C76;
	background-color: #f5f3e4;
	border-top: 1px solid #0C5C76;
	padding: 1em 0;
	display:block;
	width:100%;
	clear:both;
}

	#footer-nav ul,
	#footer-nav ul li,
	#footer .copyright{
		text-align: center;
	}


#footer-nav ul li{
	padding: 1em;
	margin: 1em;
}


#footer p.copyright{
	display:block;
}



#headerinner {
	padding:0;
	width: 100%;
	margin:0 auto;
}


h3#logo{

}


h3#st-logo a{
	text-decoration: none;
	color: #f5f3e4;
}



#class h2{
	/* border-bottom:1px solid #0c5c75; */
	background: none;
	font-size: 1.8rem;
	margin-top: 0;
}




  #marker{

  }






  #wrap {
  	width: 100%;
    margin:0;
    padding:0 0 20px 0;
    height:auto;
  }



blockquote {
	font-size:1.2em;
	line-height:1.4;
	font-family:Arial, Helvetica, sans-serif;
	font-style:italic;
	display:block;
	padding:1em;
}

cite {
	color:#565656;
	display:block;
	padding-top:0.4em;
	font-size:0.8em;
}


div.intro{
    display: block;
    background-color:#f5f3e4;
    padding-bottom: 20px;
}

div.intro p{
  	display: block;
  	color: #0C5C76;
    font-size: 1.2em;
    line-height: 140%;
}



.rounded {-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;}




.homeBanner {
	box-shadow:0px 0px 5px #DBCCD9;
	-moz-box-shadow:0px 0px 5px #DBCCD9;
	-webkit-box-shadow:0px 0px 5px #DBCCD9;
	background-color:white;
	text-align:center;
	font-size:20px;
	line-height:27px;
	display:block;
	color:#0C5C76;
	width:280px;
	margin:0 auto 16px;
	padding:8px;
	text-decoration:none;
}

.no-box-shadow .homeBanner {
	border:1px solid gray;
}

.homeBanner .large {
	display:block;
	font-size:29px;
	color:#DF5579;
}

.homeBanner:hover,
.homebanner:hover .large,
a:hover .large {
	background-color:#DF5579;
	color:white;
}


.big-quote{
	margin: 2em 0;
}


.big-quote.cerys{

	background-image: url("/images/cerys.jpg");
	background-repeat: no-repeat;
	padding-top: 350px;

}

.big-quote .quote-box{

	background-color: #fff;
	opacity: 0.88;
	filter: alpha(opacity=80); /* For IE8 and earlier */

}


p.standfirst{
	margin-left: 1em:
	margin-right: 1em;
}


div.st-tweets{
	margin-top: 2em;
}


/** Class Times **/


p.standfirst{
	margin: 1em;
	font-size: 1.2em;
}

p.classes-p{
	margin-left: 1em;
	margin-right: 1em;
}

div.class-times{

}

div.class-times day{

}

div.class-times h3{
	font-size: 1.2em;
	font-weight: 400;
	margin: 1.5em auto 0.5em auto;
}

div.class{
	padding:1em;
	margin:0.5em 0;
	border: 1px solid #fff;
	background-color: #fff;
}


div.teacher-class{
	padding: 1em 1em 0 1em;
	margin: 1em 0;
	border: 1px solid #fff;
	background-color: #fff;
}

div.teacher-class li{
	list-style: disc;
}


.venue{ display:block; font-weight: 500; color: #666;}
.venue a{ color: #666; font-weight: normal;}
.venue .postcode{ white-space: nowrap;}
.time-age{ display: block;}
.time-age .time{ font-weight: 600;}
.teacher-contact{ display: block;}
.telephone{ white-space: nowrap;}


div.extra-info p{
	padding:1em;
	margin:0.5em 0;
	border: 1px solid #fff;
	background-color: #fff;
}





div.main-image {
		display: inline-block;
		margin-bottom: 20px;
		border-radius: 5px;
		border: 1px solid #ccc;
		padding:10px;
		background-color:white;
		clear: both;
}



div.main-image img{
		width: 260px;
		height: 169px;
}




div.intro p.credit{
  	font-size: 0.8em;
  	margin-bottom: 0;
    overflow: hidden;
}


  h2, h2 a {
    background-color: #f5f3e4;
    color: #0C5C76;
    margin: 0;
    padding: 0;
    line-height: 140%;
  }

  div.teachers{
    display: block;
    float: left;
    margin: 0;
  }

  div.teacher{
    background-color:#f5f3e4;
    color: #0C5C76;
    padding: 1em 0;
    display: block;
    float: left;
    margin: 0;
    border-top: 1px solid #0C5C76;
  }

  div.teacher-photo{
    margin: 0;
    background: white;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    float: left;
  }

  div.teacher-photo img{
    width: 240px;
    height: 240px;
    border: none;
  }

  div.teacher-photo p.caption{
    display: none;
  }

  div.teacher-info{
    width: 100%;
    display: block;
    float: left;
    margin-top: 10px;
  }

  div.teacher-info h3{
    font-size: 2em;
    line-height: 140%;
    margin-bottom: 20px;
  }


  div.teacher-info h4{
    font-size: 1.6em;
    line-height: 140%;
    margin: 20px 0;
  }



  div.teacher-biog{
    display: block;
    float: left;
    width: 100%;
    margin-top: 10px;
  }

  div.teacher-biog p{
    font-size: 1.2em;
    line-height: 140%;
  }


  ul.linklist li{

  	margin-bottom: 1em;
  	color: #0C5C76;

  }

  div.cta{
  	display: block;
  	float: right;
  	margin-bottom: 10px;
  }




.testimonials {
	background:url(../images/66-large.gif) no-repeat -9px -13px #fff;
	background: #fff;
	border-radius:9px;
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	margin-bottom:18px;
	display:block;
	box-shadow:0px 0px 5px #DBCCD9;
	-moz-box-shadow:0px 0px 5px #DBCCD9;
	-webkit-box-shadow:0px 0px 5px #DBCCD9;
}





a.strongLink {font-weight:normal;
	color:#df5579;
	background-color: #fff;
	font-size:1em;
	text-decoration:none;
	display:block;
	text-align:center;
	display:block;
	/*background:url(../images/star.gif) no-repeat right -6px #fff; commented out as image was missing */
	padding:1em;
	border-radius:0.5em;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	box-shadow:0px 0px 5px #DBCCD9;
	-moz-box-shadow:0px 0px 5px #DBCCD9;
	-webkit-box-shadow:0px 0px 5px #DBCCD9;
	margin-bottom: 2em;
}

a.strongLink:hover, a.strongLink:hover .grey {
	background-color:#df5579;
	background-image:none;
	color:#fff;
}








/*Style 'show menu' label button and hide it by default*/
#menu .show-menu {
	font-size: 1.6em;
	font-weight: 100;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #fff;
	background: #000;
	padding: 1em 0.5em;
    margin: 0;
    cursor: pointer;
	display: none;
}


/*Hide checkbox*/
#menu input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}


ul.linklist{
	padding: 0;
}





/*******************************/
/*                             */
/*                             */
/*                             */
/*   Styles for small screen   */
/*                             */
/*                             */
/*                             */
/*******************************/



@media all and (max-width: 1023px){


	blockquote{
		padding: 0.5em;
	}

	#header{
		color: #f5f3e4;
		background-color:#0c5c75;
		float: left;
		width: 100%;
	}

	#menu {
		display: block;
		float:left;
		background: black;
		margin:0;
		padding:0;
		width:100%;
	}

	ul#primary-nav {
		position: static;
		overflow:hidden;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #fff;
		display: none;
	}


	/*Hide menu when invisible checkbox is not checked*/
	#menu input[type=checkbox]:not(checked) + ul#primary-nav{
    	display: none;
	}

	/*Show menu when invisible checkbox is checked*/
	#menu input[type=checkbox]:checked + ul#primary-nav{
    	display: block;
	}



	ul#primary-nav li {
		list-style-type:none;
		display: block;
		border-top: 1px solid #fff;
		margin:0;
		padding: 0;
	}

	ul#primary-nav li a {
		display: block;
		color:#fff;
		font-size: 1.6em;
		font-weight:100;
		letter-spacing: 0.1em;
		text-decoration:none;
		text-shadow: none;
		padding: 1em 0.5em;
		text-transform: capitalize;
	}

	ul#primary-nav li a:hover {
		text-decoration:underline;
	}



	/*Display 'show menu' link*/
	#menu .show-menu {
		display:block;
	}


	#links h2{
		font-size: 1.6em;
	}


	h3#logo{

		font-size: 2.8em;
		font-family:"Little Days";
		margin: 0.5em;
		display: block;
		float: left;
	}


	/* New style and ID for the logo - Dec 2015 */
	h3#st-logo{
		font-size: 2.8em;
		font-family:"Little Days";
		padding: 0em 0.3em 0em 0.3em;
		display: block;
		float: left;
		color: #f5f3e4;
		background-color:#0c5c75;
	}



	#wrap{
		float:left;
		background-color: #f5f3e4;
	}




	h4#strapline {
		font-size: 2em;
		font-family:"Little Days";
		color:#0c5c75;
		padding:0;
		margin: 0.6em 0.3em 0.4em 0.3em;
		display:block;
		float:left;
	}



	h1 {
		font-family:"Little Days";
		margin:0.4em auto 0.6em auto;
		padding:0;
		display:block;
		color:#DF5579;
		font-size:4em;
		line-height:100%;
		font-weight:normal;
	}

	h1.home-title{
		display: none;
	}


	#approach h2{
		font-size: 1.8em;
		font-weight: 400;
	}






	div.intro{

		padding-left: 10px;
		padding-right: 10px;
		float: left;

	}


	div.intro h2{
		font-size: 1.2em;
		line-height: 120%;
		margin: 1em 0 0.5em 0;
	}

	#class h2{
		font-size: 1.6em;
	}


	div.teachers{
		padding:1em;
	}



	div.teachers h2{
		padding-left: 0;
		padding-right: 0;
	}



	div.cta{
	  	margin: 10px;
	}



	ul.linklist li{
		font-size: 1.2em;
		margin-bottom: 1.2em;
	}






}






/**************************************************/
/*                                                */
/*                                                */
/*                                                */
/*      Styles for medium and large screens      */
/*                                                */
/*                                                */
/*                                                */
/**************************************************/




@media all and (min-width: 1024px){


	body {
		background-image:url(../images/treetrunk.gif);
		background-repeat:repeat-y;
		background-position:center;
		margin: 0;
	}


	p {
		font-family:Arial, Helvetica, sans-serif;
		font-size:13px;
		line-height:21px;
		line-height:1.6em;
		margin:0 auto 1.4em auto;
		color:#0C5C76;
	}





	#header {
		height: 150px;
		background-color: #DF5579;
	}

	ul#primary-nav {
		margin: 0;
	}




	#footer{
	}


	#footer-nav{
		display:block;
		float:left;
		width:100%;
		text-align: center;
	}

	#footer-nav ul{
		display: block;
	}

	#footer-nav ul li{
		display: inline-block;
	}



	.home-title {
		text-indent:-999em;
		overflow:hidden;
		height:1px;
		width:1px;
		float:left;
	}

	h1 {
		font-family:"Little Days";
		margin:0 auto 26px auto;
		padding:0;
		display:block;
		color:#DF5579;
		font-size:62px;
		line-height:66px;
		font-weight:normal;
	}

	h2 {
		font-size:2em;
		color:#0c5c75;
		margin:1em 0;
	}

	#home h1{
		display:none;
	}


	h3 {
	}

	h4 {
		font-size:1.6em;
		font-weight:normal;
		margin:0.5em auto;
	}

	div#logo, h3#logo {
		font-size:45px;
		font-family:"Little Days";
		letter-spacing:-1px;
		font-weight:normal;
		display:block;
		float:right;
		width:300px;
		text-align:right;
		color:#ffffff;
	}

	/* New style and ID for the logo - Dec 2015 */
	h3#st-logo {
		font-size:2.8em;
		font-family:"Little Days";
		letter-spacing:-1px;
		font-weight:normal;
		display:block;
		float:right;
		color:#ffffff;
		margin: 0.4em 0;
	}

	h4#strapline {
		font-size:2em;
		font-family:"Little Days";
		color:#0c5c75;
		padding:0;
		margin:0;
		display:block;
		padding:1em 0 0 0;
		float:right;
		text-align:right;
	}


	hr {
		border-bottom:0 none;
		border-left:0 none;
		border-right:0 none;
		border-top:1px solid #ccc;
		margin:1em auto 1em auto;
	}

	table {
		margin-bottom:12px;
	}

	table td {
		padding:6px;
		background-color:white;
		text-align:left;
		font-family:Arial, Helvetica, sans-serif;
		font-size:13px;
		line-height:21px;
		vertical-align:top;
	}

	td.grey, p.grey {
		color:#565656;
	}

	#links strong {
		float:left;
		display:block;
		width:160px;
	}

	.textbox {
		background: #fff;
		border-radius:9px;
		-moz-border-radius:9px;
		-webkit-border-radius:9px;
		margin-bottom:18px;
		display:block;
		width:450px;
		box-shadow:0px 0px 5px #DBCCD9;
		-moz-box-shadow:0px 0px 5px #DBCCD9;
		-webkit-box-shadow:0px 0px 5px #DBCCD9;
	}

	.fixed {height:190px;}
	.fixed blockquote {height:140px;}

	.nomarginbottom {
		margin-bottom:0;
	}

	em {
		font-style:italic;
	}


	/** Layout **/



	#header {
		height:56px;
		background: url(../images/header-bg.jpg) repeat-x #DF5579;
	}

	#headerinner {
		padding:0;
		width:960px;
		margin:0 auto;
	}

	#menu {
		width:580px;
		height:50px;
		padding:6px 0 0 0;
		float:left;
		background-color: transparent;
	}

	#menu ul {
		width:680px;
		overflow:hidden;
	}

	#menu ul li {
		list-style-type:none;
		padding:12px 24px 0 0;
		margin:0;
		float:left;
		border: none;
	}

	#menu ul li a {
		color:#ffffff;
		font-size:20px;
		line-height:24px;
		font-weight:normal;
		letter-spacing:-1px;
		text-decoration:none;
		text-shadow: rgba(0,0,0,0.5) 1px 0, rgba(0,0,0,0.3) 0 1px, rgba(255,255,255,0.5) 0 -1px, rgba(0,0,0,0.3) 1px 2px;
	}

	#menu ul li a:hover {
		text-decoration: none;
		text-shadow: none;
		color:#ebafbf;
	}





	#wrap {
		width:960px;
		margin:0 auto;
		padding:0;
		height:auto;
		background:url(../images/singweb-bg.jpg) no-repeat top center;
		/**/
	}




	#inner {
		/*background:url(../images/singweb-bg.jpg) no-repeat top center;*/
	}

	#wrap img {
		display:block;
	}



	.rightcol {
		float:right;
		display:block;
		clear:right;
		text-align:right;
		width:482px;
		height:380px;
		padding:110px 20px 0 20px;
		margin:0 auto 0 auto;
		background:url(../images/narrow-bg.png) no-repeat;
	}

	.maincol {
		display:block;
		clear:both;
		padding:40px 20px 0 20px;
		margin:0 auto;
	}

	#home .maincol, #links .maincol {
		background:url(../images/short-bg.png) no-repeat;
		height:320px;
	}

	#approach .maincol, #about .maincol, #class .maincol {
		background:url(../images/large-bg.png) no-repeat;
		height:407px;
	}


	.fullRightCol {
		display:block;
		width:450px;
		clear:both;
		margin:0 0 12px auto;
	}

	.innercolleft {
		width:438px;
		padding:0 12px 0 0;
		float:left;
		background:url(../images/dashes.gif) right top repeat-y;
	}

	#home .innercolleft, #links .innercolleft  {
		height:200px;
	}

	#approach .innercolleft, #about .innercolleft, #class .innercolleft {
		height:300px;
	}

	.innercolright {
		width:440px;
		float:right;
	}

	.innercolleftsmall {
		float:left;
		width:190px;
		padding:10px;
		margin:0 0 24px 0;
	}
	.innercolrightsmall {
		float:right;
		width:190px;
		padding:10px;
		margin:0 0 24px 0;
	}

	.whitebg {background-color:white;}


	#class .innercolleftsmall {
		padding:10px 0 0 0;
	}


	#marker {
		background:url(../images/marker.png) no-repeat;
		width:960px;
		height:96px;
		clear:left;
		float:left;
	}

/* originals
	#home #marker {background-position:12px 0;}
	#about #marker {background-position:70px 0;}
	#approach #marker {background-position:190px 0;}
	#class #marker {background-position:315px 0;}
	#testimonials #marker {background-position:425px 0;}
	#links #marker {background-position:510px 0;}
*/

	#home #marker {background-position:12px 0;}
	#class #marker {background-position:90px 0;}
	#about #marker {background-position:190px 0;}
	#approach #marker {background-position:300px 0;}
	#testimonials #marker {background-position:425px 0;}
	#links #marker {background-position:515px 0;}


	p.extragap {margin-bottom:40px;}

	.shadow {border:1px solid #ccc;}

	table.shadow {border-collapse: separate;}

	.boxshadow .shadow {box-shadow:0 0 3px #633; border:0 none;}


  	div.main-image img{
  		width: 430px;
  		height: 280px;
  	}



	.boxshadow .main-image {box-shadow:0 0 3px #633; border:0 none;}

	.aside {font-size:12px;}

	.marginright {margin-right:20px;}

	.caption, .description, .credit {padding:2px 6px; background:#fff; margin:0 auto 0 0;}

	.caption {color:#DF5579; font-weight:bold;}

	.credit {padding:6px 0 0 0;text-align:center;}

	.pink, p.pink {color:#df5579; font-size:16px; margin:0;}

	.blue, a.blue {color:#0c5c76;}

	.grey {color:#999;}

	.larger {
		font-size:140%;
		line-height: 1.4;
	}

	.smaller {font-size:80%;}


	.clearme {
		clear:both;
	}




	div.intro { /* was fullRightCol and still is elsewhere */
	display:block;
	width:450px;
	clear:both;
	margin:0 0 12px auto;
	}

	div.intro p{
	font-size: 1em;
	line-height: 140%;
	}

	div.teachers h2{
	font-size: 2.4em;
	margin: 0.5em 0;
	margin-left: 30px;
	}

	div.teachers{
	float: left;
	margin-left: 230px;
	}


	div.teacher{
	display: block;
	float: left;
	margin: 1em 0;
	}

	div.teacher-photo{
	margin-left: 30px;
	background: white;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
	display: inline-block;
	float: left;
	}

	div.teacher-photo img{
	width: 190px;
	height: 190px;
	border: none;
	}

	div.teacher-photo p.caption{
	padding: 2px 0;
	}

	div.teacher-info{
	width: 450px;
	display: block;
	float: left;
	margin-top: 10px;
	margin-left: 20px;
	}

	div.teacher-info h3{
	font-size: 1.8em;
	margin-bottom: 0.5em;
	}

	div.teacher-info h4{
	font-size: 1.4em;
	margin-bottom: 0.5em;
	}

	div.teacher-biog{
	width: 450px;
	display: block;
	float: left;
	margin-top: 10px;
	margin-left: 20px;
	}

	div.teacher-biog p{
	font-size: 1em;
	line-height: 140%;
	}


}