*, html {margin: 0; padding: 0;}
body, html {height: 100%;}
#outer {min-height: 100%;}



/* ============== */
/* = Typography = */
/* ============== */
body {font-size: 76%; font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, Sans-Serif; line-height: 1.6em;}
h1 {}
/* Add margins to the text */
h2, h3, h4, p, ul, ol, dd, table, legend, caption {margin-bottom: 1em;}
h2, h3, h4 {color: #ba0000;}
h2 {font-size: 1.62em; font-style: italic; margin: 1em 0}

h2.classtitle {
	height: 1em;
	padding-top:8px;
}
h3 {font-size: 1.5em; font-weight: bold;}
h4, caption, legend, dt {font-size: 1em; font-weight: bold; color: #ba0000;}
p, li, dt, dd, td, th {font-size: 1em; }
li p, dd p {font-size: 1em; margin-bottom: 0;}
ul, dd, dd p, dt {margin-bottom: 1em;}
h2 {font-size: 1.6em; height: 1.2em;}
.classestitle {margin-top: 1em;}
h3 {font-size: 1.2em;}
h4, caption, legend, dt {font-size: 1em; font-weight: bold; color: #ba0000;}
p, li, dt, dd, td, th {font-size: 1em;}
li p, dd p {font-size: 1em; margin-bottom: 0;}
ul, dd, dd p, dt {margin-bottom: 1em;}
a:link {color: #990000; text-decoration: none;}
a:visited {color: #f88000; text-decoration: none;}
a:hover {color: #f88000;}
a:active {color: #990000;}
table {width: 100%;}
caption {text-align: center;}
strong, th {font-weight: bold;}
th {text-align: center; border-bottom: 1px solid #BFAD83;}
em {font-style: oblique;}
strong, th {font-weight: bold;}
em {font-style: oblique;}
.imgLeft {float: left; margin: 0 1em 1em 0;}
.imgRight {float: right; margin: 0 0 1em 1em;}

#content ul {list-style: disc;}
#content ol {list-style: lower-roman;}
	#content li {margin-left: 20px; padding-left: 0px;}
#content img.single-column-image {float: right; margin: 0 0 1em 1em;}
#content ul.instructions, #content ul.information {list-style: none;}
	#content ul.instructions li {list-style: none; margin-bottom: 1em; margin-left: 0; padding-left: 0;}
	#content ul.information li {margin-left: 0; padding-left: 0;}
#content ul.instructions, #content ul.information {list-style: none;}
	#content ul.instructions li {list-style: none; margin-bottom: 1em; margin-left: 0; padding-left: 0;}
	#content ul.information li {margin-left: 0; padding-left: 0;}
/* ================== */
/* = Fancy FAQ list = */
/* ================== */
dl.faq {}
	dl.faq dt {display: block; width: 240px; margin-right: 20px; float: left; clear: left;}
	dl.faq dd {display: block; float: left; width: 490px;}
#footer p {text-align: right; color: #FCBF8A; margin-bottom: 0; vertical-align: center;}

/* ===================== */
/* = Class Descriptiom = */
/* ===================== */
dl.class-list {margin-bottom: 1em; overflow: hidden; font-size: 1.2em;}
dl.class-list * {margin: 0;}
	dl.class-list dt {width: 100px; float: left; clear: left;}
	dl.class-list dd {width: 130px; float: left;}
/* ========= */
/* = Forms = */
/* ========= */
form label {display: block; float: left; clear:left; width: 10em}

/* ========== */
/* = Layout = */
/* ========== */
/*body {background: url(../img/background.png) top left repeat #ba0000;}*/
#outer {background: url(../img/background.png) top left repeat #ba0000; width: 100%; position: relative; padding: 20px 0;}
#wrapper {width: 800px; margin: 0px auto; border: 2px solid #fff; background: #e9dec3;}
#head {background: url(../img/header.png) top left no-repeat #f97e14; border-bottom: 2px solid #fff; position: relative; }
	h1#logo {display: inline; text-indent: -9999px;}
		h1#logo a {display: block; height: 140px; width: 145px; margin-left: 10px; float: left;}
		
		html body#one div#outer div#wrapper div#banner,
		html body#two div#outer div#wrapper div#banner
		{
		height:165px;border-bottom: 2px solid #fff; padding: 0; clear: left;
		}

	
#banner {border-bottom: 2px solid #fff; padding: 0; clear: left;	}
#content {padding: 10px; padding-top: 20px; overflow: hidden; padding-bottom: 50px; position: relative;}

#banner ul {list-style: none; margin: 0; padding: 0; position: relative;height: 242px; display: block;}
	#banner ul li {position: absolute; top: 0; left: 0; z-index: 1;}
	#banner ul li:first-child {z-index: 2;}
		#banner ul li img {display: block;}
		#banner img {display: block;}
/* Inspire Me */
#archive {display: none;}


#footer {background: url(../img/footer.gif) top left no-repeat #F97E14; height: 55px; text-align: right; padding: 0.5em 1em;border-top: 2px solid #fff;}
	#footer a {color:  #fff; text-decoration:  none;}
		/*One Column */
		body#one #content .column {position:relative;}

		/* The columns */
		body#two #content .column {width: 490px; float: left;}
		body#two #content .column-sub {width: 240px; float: left; margin-right: 10px;}
		
			/* The columns - for a clas */
			body#two-class .column {width: 490px; float: left; margin-right: 10px;}
			body#two-class .column-sub {width: 240px; float: left; }

		/* Three columns */
		body#three #content {background: url(../img/3col.png) center repeat-y;}
		body#three #content .column {width: 247px; float: left; margin-right: 22px;}
		body#three #content .column + .column {margin-right: 0;}
		body#three #content div.last {margin-right: 0px; float: right;}
/* ============== */
/* = Navigation = */
/* ============== */
.nav, .nav * {margin:0;padding:0;list-style:none;}
.nav {line-height:1.0; position: absolute; right: 10px; bottom: 30px;}
.nav ul {position:absolute;top:-999em;width:9.45em;}
.nav ul li, .nav a {width: 100%;}
.nav li {float:left;position:relative;z-index:99;}
.nav li:hover ul, ul.nav li.sfHover ul {left:-1px;top:20px;}
.nav li:hover li ul, .nav li.sfHover li ul {top:-999em;}
.nav li li:hover ul, ul.nav li li.sfHover ul {left:9.45em;top:-1px;}
.superfish li:hover ul, .superfish li li:hover ul {top: -999em;}
.nav li {font-size: 1em; margin-right: 10px;}
.nav li.last {margin-right: 0;}
.nav a {color: #fff;padding: 5px;text-decoration:none; text-transform: uppercase; padding-top: 30px;}
.nav a:visited {color: #fff;}
.nav a:hover{color: #000; background: url(../img/smalllogo.png) center top no-repeat;}

.nav ul {width: 147px;  background: url(../img/menu-back.png) top left repeat transparent;}

.nav li ul li {font-size: 0.9em;}
.nav ul {width: 147px;  background: url(../img/menu-back.png) top left repeat transparent;} 
.nav li ul li {font-size: 0.9em;}
.nav li li li {}
.nav li ul li a {background: none; padding: 5px; line-height: 2em; text-transform: none; z-index: 1;}
.nav li ul li a {background: none; padding: 5px; line-height: 2em; text-transform: none; z-index: 1;}
	.nav li ul li a:hover {background: none;}

/*Timetable*/
table#timetable {border: 1px solid #333; border-bottom: none;}
	table#timetable th {border-bottom: 1px solid #000; background: #9C0000; color: #fff;}
	table#timetable td {padding: 0.2em 1em; border-bottom: 1px solid #333; border-left: 1px solid #333; text-align: center; background: #FFCF9C;}
		table#timetable td.first {border-left: none;A}
	table#timetable tr {border-left: 1px solid #333;}
	.class-is-cancelled {background: #FC7254;}
	.class-name-timetable {color: #9c0000;}

/* Booking Form */
form#BookingForm {}
form#BookingForm li {list-style: none; margin-left: 0; padding-left: 0; margin-bottom: 1em; overflow: hidden;}
	form#BookingForm label {width: 7em; font-weight: bold; margin-right: 1em;}
form#BookingForm input, form#BookingForm select {width: 28em; padding: 2px 5px; font-weight: bold;}
form#BookingForm select {width: 29em; padding-right: 0;}
form#BookingForm option {}
span.required {color: #f00;}

form#SmallBookingForm {}
#content form li, #content form ul {list-style: none; margin-left: 0; padding-left: 0; margin-bottom: 1em; overflow: hidden;}
	form#SmallBookingForm label {font-weight: bold; margin-right: 1em; display: block; float: none; width: auto;}
form#SmallBookingForm input, form#BookingForm select {padding: 2px 5px; font-weight: bold;}
form#SmallBookingForm select {padding-right: 0;}
form#SmallBookingForm option {}

input#classDetails {width: 100%;}

#content form ol {list-style: none; margin: 0; padding: 0}
	#content form ol li {list-style: none; margin: 0; padding: 0; margin-bottom: 1em; overflow: hidden}
		#content form ul li label {display: block; float:left; width: 10em;}
	#content form ol li.submit {padding-left: 10em;}
	#content form ol li.textarea textarea  {height: 100px}

div.book-now {overflow: hidden; line-height: 1;}
div.book-now form {float: left; margin: 0; margin-right: 5px;}

/*Gallery*/
#content ul.thumbs {list-style: none; overflow: hidden;}
	#content ul.thumbs li {margin: 0; margin-left: 0; padding-left: 0; margin-right: 16px;float: left; display: inline; margin-bottom: 1em;}
		#content ul.thumbs li a {display: table-cell; width: 110px; height: 110px; background: #CFBC8E; vertical-align: middle; overflow: hidden;}
			#content ul.thumbs li a:hover {background: #AF9862;}
			#content ul.thumbs li a img{display: block; margin: auto;}

/* Inspire Me*/
#inspire-me label {display: none;}
#inspire-me [type="text"] {border: 1px solid #a8acad; padding: 3px; width: 162px;
box-shadow:inset 0 2px 2px #ccc; 
-moz-box-shadow:inset 0 2px 2px #ccc;
-webkit-box-shadow:inset 0 2px 2px #ccc;
}


/* class listing on homepage */
#calendar {overflow: hidden;}
h4.date {
	color: #000;
	border-bottom: 1px solid #bbbaba;
	margin-bottom: 0;
	font-weight: normal; font-size: 1.3em;
}
.classblock {overflow: hidden;line-height: 1.6em;
	color: #000;
	border-bottom: 1px solid #bbbaba;
	padding-bottom: 3px;
font-size: 105%; }
p.date span {display: inline-block;}

span.classtype {
	font-size: 95%; 
	color: #b90901;
	margin-right: .5em;
}

span.time {
	font-size: 95%; 
	color: #fa7e10;
	margin-right: .5em;
	float: left;
	clear: left;
}

span.name {
	font-size: 95%; 
	font-weight: bold;
	color: #020202;
	margin-right: .5em;
	float: left;
}

span.teacher {
	font-size: 95%; 
	color: #6a6a6a;
	float: left;
}

span.bookings {
	font-size: 90%; 
	color: #6a6a6a;
	margin-top: -4px;
}

p.notes {	
	font-size: 105%; 
	line-height: 1.5em;
	color: #ba0900;
	margin-bottom: 0;
}

p.timetable {
	font-size: 95%; 
	color: #020202;
	background:url('/assets/images/calendaricon.png') no-repeat left top;
	padding-left: 20px;
	height: 14px;
	margin-top: 10px;
}
.timetable a {color: #000;}
p.note {
	font-size: 95%; 
	font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, Sans-Serif; 
	color: #020202;
	background:url('/assets/images/arrow.png') no-repeat 0 6px;
	padding-left: 15px;
	margin: 0;
}

div.classblock {
	border-bottom: 1px solid #bbbaba;
	margin-top: 10px;
}

#inspireme {
	background:url('/assets/images/inspire.png');
	width: 62px;
	height:21px;
	border: none;
}

p.video1 {
	text-align: center;
	margin-right: 8px;
}
#head:after { /* For modern browsers */
  content    : ".";
  display    : block;
  height     : 0;
  clear      : both;
  visibility : hidden;
}

#head { display : inline-block; } /* For IE6/7 */
#head { display : block; } /* For IE6/7 */