@import url("reset.css");
  
/*COLOUR CHEAT SHEET
sandstone background colour: #e2dfd5
light sandstone: #efece8
Maroon: #8c0022
Darker grey: #3c3d3f
Lighter grey: #4e4f51
*/
html, body{
	height: 100%;
	min-height: 100%;
}

body {
	margin: 0 0;
	padding: 0;
	font-family: Georgia, Palatino, "Times New Roman", Times, serif;
	font-size: 62.5%;
	color: #333;
	background-color: #efece8;
	text-align: center;
}

/* Make sure the table cells show the right font */
td {
font-family: "Lucida Grande", verdana, arial, helvetica, sans-serif;
}

/*-------------------------------------------------
GLOBALS & GENERAL CASES
-------------------------------------------------*/
a {
text-decoration: none;
}

#contentframe a:link {
color: #8c0022;
text-decoration: none;
}

#contentframe a:visited{
	color: #8c0022;
/* 	border-bottom: dotted 1px #4e4f51; */
}

#contentframe a:hover, #contentframe a:active {
	color: #8c0022;
	border-bottom: dotted 1px #8c0022;
}


/*-------------------------------------------------
TYPOGRAPHY
-------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, Palatino, "Times New Roman", Times, serif;
font-weight: normal;
}

/* approx 21px*/
h1 {
font-size: 2.1em;
margin-top: 2em;
color: #3c3d3f;
}

#header h1 {
display: none;
}

/* approx 16px*/
h2 {
font-size: 2.4em;
margin-top: 0.5em;
margin-bottom: 1em;
color: #3c3d3f;
}

/* approx 14px*/
h3 {
font-size: 1.8em;
font-weight: bold;
margin: 0;
padding-top: 0.4em;
color: #8c0022;
}

/* approx 12px*/
h4 {
font-size: 1.4em;
color: #8c0022;
margin: 0.5em 0 0 0;
}

/* approx 15pt */
p {
font-family: Georgia, Palatino, "Times New Roman", Times, serif;
font-size: 1.6em;
line-height: 1.4;
padding: 0;
margin: 0.5em 0 1em 0;
color: #4e4f51;
}

#glossary {
width: 98%;
float: left;
display: inline;
margin: 0 0 8em 0;
padding: 2em 2em 2em 2em;
background-color: #e2dfd5;
}


#glossary p {
font-family: Georgia, Palatino, "Times New Roman", Times, serif;
font-size: 1.3em;
margin: 0 0 0.5em 0;
padding: 0;
color: #4e4f51;
}

#glossary h3 {
font-size: 1.8em;
margin-bottom: 0.5em;
margin-top: 0;
padding: 0 0;
}


#glossary h4 {
font-family: Georgia, Palatino, "Times New Roman", Times, serif;
font-size: 1.4em;
padding: 0;
margin-bottom: 0.5em;
color: #3c3d3f;
font-weight: bold;
}

#glossary a:link, #glossary a:visited, #glossary a:hover, #glossary a:active{
	text-decoration: none;
	border: none;
	color: #3c3d3f;
}

.faq_answer p {
line-height: 1.3;
}

ul.faq_list{
	padding: 1em 0 1em 0;
	margin-bottom: 1em;
	margin-left: -1.5em;
}

.faq_answer{
	margin-bottom: 3em;
}

.back2top {
	text-align: right;
}

#contentframe ul li {
list-style: none;
font-family: Georgia, Palatino, "Times New Roman", Times, serif;
font-size: 1.5em;
line-height: 1.4em;
padding: 0;
margin-bottom: 1em;
margin-left: 1em;
color: #4e4f51;
}

.highlight {
color: #8c0022;
}
 
blockquote, blockquote p {
font-family: Georgia, Palatino, "Times New Roman", Times, serif;
font-size: 1.4em;
padding: 0;
margin: 1em 1em 1em 0.5em;
color: #8c0022;
text-align: center;
line-height: 1.2em;
}

#newscolumn h3 {
font-size: 1.5em;
font-weight: bold;
margin:0 0;
padding-top: 0.4em;
color: #8c0022;
}

body#body_workshops #newscolumn h3 {
margin: 1em 0 1em 0;
}

body#body_workshops #newscolumn h2 {
margin: 1em 0 0 0;
}

#newscolumn h2 {
padding: 0;
}

#newscolumn p {
color: #3c3d3f;
font-size: 1.5em;
margin-top: .5em;
}



#footer p {
text-align: center;
text-transform: uppercase;
font-family: Futura, "Lucida Sans", Helvetica, Arial, sans-serif;
font-size: 0.9em;
color: #4e4f51;
margin: 0 0 0 0;
padding: 0.4em 0 0 0;
}


/*-------------------------------------------------
NAVIGATION
-------------------------------------------------*/
#navcontainer {
float: right;
height: 2.2em;
margin: 5.4em 6em 0 0;
display: inline;
}


ul#nav {
list-style-type: none;
display: inline;
}


ul#nav li {
display: inline;
float: left;
text-indent: -9999px;
}

ul#nav li a {
display: block;
background: transparent url(../images/navigation_new.gif) no-repeat 0 0;
/*make the nav text tiny and the same colour as the background to avoid the negative text indent issue on IE5.5*/
font-size: 1px;
color: #e2dfd5;
height: 20px;
width: 34px;
}

ul#nav li#home a {
width: 57px;
background-position: 0 0;
}

ul#nav li#home a:hover, body#body_home ul#nav li#home a {
width: 57px;
background-position: 0 -22px;
/*make the tiny text the same colour as the highlight so it doesn't show - see comment above*/
color: #efece8;
}

ul#nav li#beginners a {
width: 88px;
background-position: -57px 0;
}

ul#nav li#beginners a:hover, body#body_beginners ul#nav li#beginners a {
width: 88px;
background-position: -57px -22px;
color: #efece8;
}

ul#nav li#timetable a {
width: 81px;
background-position: -145px 0;
}

ul#nav li#timetable a:hover, body#body_timetable ul#nav li#timetable a {
width: 81px;
background-position: -145px -22px;
color: #efece8;
}

ul#nav li#bookings a {
width: 87px;
background-position: -226px 0;
}

ul#nav li#bookings a:hover, body#body_bookings ul#nav li#bookings a {
width: 87px;
background-position: -226px -22px;
color: #efece8;
}

ul#nav li#teachers a {
width: 79px;
background-position: -313px 0;
}

ul#nav li#teachers a:hover, body#body_teachers ul#nav li#teachers a {
width: 79px;
background-position: -313px -22px;
color: #efece8;
}

ul#nav li#workshops a {
width: 97px;
background-position: -392px 0;
}

ul#nav li#workshops a:hover, body#body_workshops ul#nav li#workshops a {
width: 97px;
background-position: -392px -22px;
color: #efece8;
}

ul#nav li#articles a {
width: 73px;
background-position: -489px 0;
}

ul#nav li#articles a:hover, body#body_articles ul#nav li#articles a {
width: 73px;
background-position: -489px -22px;
color: #efece8;
}

ul#nav li#faq a {
width: 44px;;
background-position: -562px 0;
}

ul#nav li#faq a:hover, body#body_faq ul#nav li#faq a {
width: 44px;
background-position: -562px -22px;
color: #efece8;
}

ul#nav li#contact a {
width: 75px;
background-position: -606px 0;
}

ul#nav li#contact a:hover, body#body_contact ul#nav li#contact a {
width: 75px;
background-position: -606px -22px;
color: #efece8;
}

/*-------------------------------------------------
TIMETABLES
-------------------------------------------------*/

table.timetable {
    border-spacing: 0px;
    border-collapse: collapse;
    border-top: 4px solid #8c0022;
    border-bottom: 1px solid #8c0022;
/*	height: 52.5em;*/
}

table.timetable caption {
	font-size: 2.4em;
	margin-bottom: 0.5em;
	padding: 0 0;
	text-align: left;
	color: #3c3d3f;
}

table.timetable tr.odd {
background-color: #e2dfd5;
}

table.timetable tr.even {
background-color: #efece8;
}

table.timetable tr:hover {
background-color: white;
}

table.timetable th {
    text-align: left;
    font-weight: bold;
    font-size: 1.2em;
    padding: 0.5em 0.5em;
    border: 1px dotted #8c0022;
	vertical-align: middle;
}

table.timetable th.time {
    text-align: left;
	font-weight: bold;
    font-size: 1.2em;
    white-space: nowrap;
    padding: 0.5em 0.5em;
    border: 1px dotted #8c0022;
	vertical-align: middle;
}

table.timetable td {
    text-align: center;
    border: 1px dotted #8c0022;
    padding: 0.8em 0.6em;
	width: 20em;
	line-height: 1.2;
	vertical-align: middle;
}

table.timetable thead th {
    text-align: center;
	background-color: #efece8;
    border-bottom: 1px solid #8c0022;
}

table.timetable th.Corner {
    text-align: left;
}

p.table_footnote {
	font-size: 1.3em;
	font-style: italic;
	text-align: left;
}

#mainTimetable {
	height: 52.5em;
}

#beginnersTimetable{
	height: 15em;
	width: 100%;
}

.term tr th,  .term thead tr th{
text-align: left;
background-color: #8c0022;
color: #FFF;
border: 1px solid #8c0022;
height: 26px;
padding: 0 0 0 10px;
}



/*Tweaks for Special January Timetable*/
#EarlyJanList{
float: left;
width: 20em;
margin-right: 5em;
margin-bottom: 1em;
}

#EarlyJanList caption {
font-size: 1.8em;
}

#JanTimetable{
	height: 15em;
	width: 35.2em;
	margin-bottom: 1em;
}

#JanTimetable td{
 text-align: left !important;
 }
 
 #JanTimetable caption{
 font-size: 1.8em;
 }


table.fees_table {
    border-spacing: 0px;
    border-collapse: collapse;
    border-top: 4px solid #8c0022;
    border-bottom: 1px solid #8c0022;
}

table.fees_table caption {
	font-size: 2.4em;
	margin-bottom: 0.5em;
	padding: 0.5em 0 0 0;
	text-align: left;
}

table.fees_table thead{
    text-align: left;
    font-weight: bold;
    font-size: 1em;
    padding: 0.2em 0.5em;
	border-bottom: 1px dotted #8c0022;
	border-left: 1px dotted #8c0022;
}

table.fees_table td {
	padding: 5px 5px;
	font-size: 1.1em;
	border-bottom: 1px dotted #8c0022;
	border-right: 1px dotted #8c0022;
	vertical-align: middle;
}

table.fees_table th {
	padding: 5px 5px;
	font-size: 1.2em;
	vertical-align: middle;
	border-right: 1px dotted #8c0022;
}


table.fees_table th.topborder {
	border-top: 1px dotted #8c0022;
}

table.fees_table tr.odd {
background-color: #e2dfd5;
border-left: 1px dotted #8c0022;
}

table.fees_table tr.even {
background-color: #efece8;
	border-left: 1px dotted #8c0022;
}


/*-------------------------------------------------
PAGE STRUCTURE
-------------------------------------------------*/
/*Main Layout elements*/
#container {
	width: 100%;
	margin: 0 0;
	text-align: left;
	min-width: 84em;
}

#topstripe {
	height: 5px;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #8c0022;
}

#header {
	background: url(../images/header_stripe.gif) repeat-x;
	height: 76px;
	width: auto;
	margin: 0;
	padding: 0;
}
	
#contentframe {
	width: 97%;
	float: left;
	display: inline;
/*	background-color: #efece8;*/
	padding-bottom: 30px;
	margin: 3em 0 5em 3em;
}

#watermark {
	width: 305px;
	height: 780px;
	padding: 0 0;
	margin: 0 0;
	top: 10em;
	left: 20%;
	background-image: url('../images/bg_img.gif');
	background-repeat: no-repeat;
	position: absolute;
	z-index: 1; /*this is here because Firefox 2 for Windows doesn't understand negative z-indexes */
}

#certification_logo {
float: right;
margin: -8.5em 4em 1em 0;
display: inline;
	border: 0;
	padding: 0;
	width: 121px;
	height: 75px;
}

#certification_logo a:hover{
	border: 0!important;
	text-decoration: none!important;
}

#main_content {
	width: 60%;
	padding: 0 0 0 1em;
	margin: 0 0;
	float: left;
	display: inline;
	position: relative;
	z-index: 2; /*this is here because Firefox 2 for Windows doesn't understand negative z-indexes */
}


body#body_home #main_content {
	width: 60%;
	padding: 0 0 0 1em;
	margin: 0 1em 0 ;
	float: left;
	display: inline;
}


body#body_beginners #main_content{
width: 60%;
padding: 0 0 0 1em;
margin: 0 1em 0 0;
}

#body_contact #main_content {
width: 40%;
padding: 0 0 0 1em;
margin: 0 1em 0 0;
}

#body_teachers #main_content {
width: 100%;
padding: 0 0 0 1em;
margin: 0 1em 0 0;
}

#body_articles #main_content {
width: 100%;
padding: 0 0 0 1em;
margin: 0 1em 0 0;
}


#newscolumn {
	width: 25%;
	height: 90%;
	padding: 0 1.5em 2em 1.5em;
	margin: 0 7em 2em 0;
	background-color: #e2dfd5;
	float: right;
	display: inline;
}

body#body_home #newscolumn {
	height: 100%;
	padding-bottom: 4em;
	}

body#body_beginners #newscolumn{
	height: 47.5em;
}

body#body_timetable #newscolumn{
	height: 105.5em;
}

#mapcolumn {
	width: 425px;
	height: 90%;
	padding: 0 1.5em 0.5em 1.5em;
	margin: 0 7em 2em 0;
	background-color: #e2dfd5;
	float: right;
	display: inline;
}


#centre_content {
float: left;
width: 90%;
padding: 0 0 0 1em;
margin: 0 1em 0 0;
position: relative;
z-index: 2; /*this is here because Firefox 2 for Windows doesn't understand negative z-indexes */
}


#footer {
background-color: #e2dfd5;
border-top: 1px #C2C2C2 solid;
/*background: #e2dfd5 url(../images/header_stripe.gif) 0 -75px repeat-x;*/
width: 100%;
height: 1.6em;
padding: 0 0;
margin: 5em 0 0 0;
/*clear: both;*/
position: fixed;
bottom: 0;
left: 0;
z-index: 2; /*this is here because Firefox 2 for Windows doesn't understand negative z-indexes */
}

#navshadow {
background: url(../images/navshadow.gif) repeat-x;
width: auto;
height: 7px;
clear: both;
}

#logo {
float: left;
margin: 0;
padding: .5em 0 0 4em;
border: none;
}

#logo img {
border: none;
}

#logo a {
text-decoration: none;
}


#thumbnails {
width: 100%;
border-top: 1px solid #d4d6dc;
border-bottom: 1px solid #d4d6dc;
margin: 0 0 2em -2em;
padding-bottom: 3em;
text-align: center;
float: left;
display: inline;
position: relative;
z-index: 2;
}

#thumbnails img {
margin: 2em 1em 0 1em;
border: thin solid #4e4f51;
}

#thumbnails a:hover {
border: none;
text-decoration: none;
}

.article{
	margin-bottom: 3em;
}

.article p{
line-height: 1.5; 
}

.article h2{
margin-bottom: 0;
text-align: center;
}

.article h2 + p{
text-align: center;
}

.article blockquote{
text-align: center;
margin: 1em 6em 2em 6em;
}

.teacher img, .article img {
float: left;
margin: 1em 1em 0.4em 0;
border: thin solid #4e4f51;
}

.teacher{
padding-bottom: 2em;
}

.teacher p {
/*font-size: 1.4em;*/
}

.workshop_post {
border-bottom: 1px solid #d4d6dc;
border-top: 1px solid #d4d6dc;
margin: 1em 0 1em 0;	
padding: 1.2em 0 1.2em 0;
}

#main_content .workshop_post .thumbnail a{
	margin: 0 2em 0.4em 0;
	border: none;
	text-decoration: none;
	float: left;
	display: inline;
}

.workshop_post p {
/*font-size: 1.4em;*/
}


.workshop_post h3{
padding-top: 0;
margin-bottom: 1em;
}

.workshop_post h4{
font-size: 1.5em;
}

.clear {
clear: both;
}

.col_padding {
float: left;
padding: 5em 0;
}

/*Contact Form Styling */
#contact-area {
/* 	width: 50% */
	margin-top: 25px;
}

#contact-area input, #contact-area textarea {
padding: 5px;
/* width: 100%; */
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 1em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}

#contact-area textarea {
height: 9em;
}

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

#contact-area input.submit-button {
width: 200px;
/* 	margin-left: 15.5em; */
	background-color: #8c0022;
color: #fef7e4 ;
}

#contact-area fieldset {
margin: 0;
padding: 0;
border: none;
}

label {
float: left;
text-align: left;
width: 6em;
padding-top: 5px;
font-size: 1em;
}