/*--------------------- general ---------------------*/

html, body { margin: 0; padding: 0; }
body { background: #D2D3D5; color: #333; font: 62.5% Arial, Helvetica, sans-serif; }

/* to force scrollbar with centered layout
html { min-height: 100%; margin-bottom: 1px; } */

/*  Baseline values for browser consistency  */
p, div, h1, h2, h3, h4, h5, ul, li { margin: 0; padding: 0; }
img { margin: 0; padding: 0; border: 0; }

ul, ol { list-style-position: inside; margin: 0 0 1em; }
ul li, ol li { font-size: 1.2em; margin: 0 0 0.2em; }

ul { list-style-position: outside; margin-left: 15px; }

hr { background: #ddd; color: #ddd; border: 0; height: 1px; margin: 20px 0; _margin: 10px 0; }
a:link, a:visited, a:active { color: #333; text-decoration: none; outline: 0; font-style: italic; font-weight: bold; }
a:hover { text-decoration: underline; }

.clear { clear: both; height: 0px; }
.hide { visibility: hidden; line-height:1px; font-size: 1px; margin: 0; padding: 0; }
.left { float: left; }
.right { float: right; }
.pad { padding: 15px; }

/*--------------------- layout elements ---------------------*/

#head {
	height: 114px;
	border-bottom: 1px solid #fff; }
	
	img#logo { width: 159px; height: 72px; padding: 35px 0 0 20px; }

.container { position: relative; background: url('../PageImages/bg_container.gif') right bottom repeat-x; }
#wrap { width: 1009px; background: #D2D3D5; }

	#leftcol {
		width: 200px; float: left; }
		
		#find {			
			height: 133px; width: 125px;
			padding-left: 20px; padding-top: 5px;
			background: white url('../PageImages/bg_find.gif') top left no-repeat; }
			
			#find h1 {				
				color: #999; font-size: 1.8em; font-weight: bold;
				text-transform:uppercase;
				margin: 0 0 3px; }
				
			#find p {
				font-size: 9px; _font-size: 10px;
				color: #999;
				text-transform: uppercase;
				margin: 0 0 4px; }
				
			#find a { color: #999; font-style: normal; }
		
	#section {
		width: 164px; height: 162px;
		padding: 8px 0 0 6px;
		float: left; }
		
		#section h1 {			
			font-size: 1.8em; font-weight: bold; color: #fff;
			text-transform: uppercase;
			line-height: 0.9em; }
			
			/* to control different background colours for the different sections */		
			#whatson #section { background: #7FA758 url('../PageImages/h1_whatson.gif') 150px 8px no-repeat; }
			#support #section { background: #921313 url('../PageImages/h1_support.gif') 150px 8px no-repeat; }
			#about #section { background: #655A44 url('../PageImages/h1_about.gif') 150px 8px no-repeat; }
			#contact #section { background: #9E76B4 url('../PageImages/h1_contact.gif') 150px 8px no-repeat; }
			#visit #section { background: #A47275 url('../PageImages/h1_visit.gif') 150px 8px no-repeat; }
			#education #section { background: #A09F85 url('../PageImages/h1_education.gif') 150px 8px no-repeat; }
			#literary #section { background: #D980A4 url('../PageImages/h1_literary.gif') 150px 8px no-repeat; }
			#jobs #section { background: #50B5A8 url('../PageImages/h1_jobs.gif') 150px 8px no-repeat; }
			
			#book #section { background: #666 url('../PageImages/h1_book.gif') 150px 8px no-repeat; }
			#mondays #section { background: #818181 url('../PageImages/h1_mondays.gif') 150px 8px no-repeat; }
			#mailing #section { background: #999 url('../PageImages/h1_mailing.gif') 150px 8px no-repeat; }
			
			/* to control the top and bottom section blocks on the home template */
			#home #section { height: auto; padding: 0; width: 170px; }
			#home #section .sectionTop { background: #6AADC7; padding: 12px 8px; }
				#home #section .sectionTop h2 { color: #306D80; }
				#home #section .sectionTop p { margin: 0; color: #fff; }
			#home #section .sectionBottom { background: #306D80 url('../PageImages/h1_home.gif') 150px 8px no-repeat; height: 154px; padding: 8px; position: relative; }
				#home #section .sectionBottom h1 { position: absolute; bottom: 10px; }
				#home #section .sectionBottom h2 { margin: 0; color: #6AADC7; font-size: 10px; text-transform: uppercase; }	
				#home #section .sectionBottom p { margin: 0; color: #fff; font-size: 10px; text-transform: uppercase; }
			
			/* to control the top and bottom section blocks on the whats on template */
			#whatson #section { height: auto; padding: 0; width: 170px; }			
			#whatson #section .sectionBottom { background: #7FA758 url('../PageImages/h1_whatson.gif') 150px 8px no-repeat; height: 154px; padding: 8px; position: relative; }
				#whatson #section .sectionBottom h2 { margin: 0; color: #47652F; font-size: 10px; text-transform: uppercase; }	
				#whatson #section .sectionBottom p { margin: 0; color: #fff; font-size: 10px; text-transform: uppercase; }
				
					
	#contentwrap {
		width: 639px;
		float: left; position: relative;
		background: url('../PageImages/bg_contentwrap.gif') right top repeat-y; }
		
		#contentwrap img.linesBottom { 
			width: 138px; height: 161px; 
			position: absolute; right: 0; bottom: 0;
			_margin-right: -1px; _margin-bottom: -1px; }
			
		#contentwrap img.linesTopHome { 
			width: 162px; height: 169px; 
			position: absolute; right: 0; top: 0;
			_margin-right: -1px; }
		
		#topbar {
			width: 639px; height: 170px;			
			background: url('../PageImages/bg_topbar.gif') left bottom repeat-x; }
			
			#topbar #picbig { width: 170px; height: 170px; float: left; border-left: 1px solid #D2D3D5; }			
			#topbar #picsmall { width: 139px; height: 138px; float: left; padding-top: 32px; border-left: 1px solid #D2D3D5; }
			#topbar #picbig img, #topbar #picsmall img { float: left; }			
			#topbar img.linesTop { width: 138px; height: 138px; float: right; padding-top: 32px; }
			
		#content {
			width: 441px; min-height: 341px;
			padding: 15px 18px 0;
			background: #fff; }
			
			/* to control colours and sections in homepage content area */
			#home #content, #whatson #content { width: 477px; min-height: 509px; padding: 0; }
				#home .playDetails { padding: 15px 15px 5px; background: #6AADC7; }
				#whatson .playDetails { padding: 15px 15px 5px; background: #B4C591; }
					#home .playDetails h1 { font-size: 14px; color: #306D80; margin: 0 0 0.2em; }
					#whatson .playDetails h1 { font-size: 14px; color: #47652F; margin: 0 0 0.2em; }
					#home .playDetails h2 { font-size: 12px; color: #fff; text-transform: none; margin: 0 0 0.5em; }		
					#whatson .playDetails h2 { font-size: 12px; color: #fff; text-transform: none; margin: 0 0 0.5em; }			
				#home .playTimes { padding: 15px 15px 5px; background: #306D80; }
				#whatson .playTimes { padding: 15px 15px 5px; background: #47652F; }
					#home .playTimes p, #home .playTimes a { color: #fff; }
					#whatson .playTimes p, #whatson .playTimes a { color: #fff; }

#foot { clear: both; border-top: 1px solid #fff; padding: 10px 10px 0; }
	.footwrap { width: 1009px; }
	#foot .footLeft { width: 360px; float: left; }
	#foot .footRight { width: 649px; float: right; }
	#foot p { font-size: 10px; color: #666; text-transform: uppercase; float: left; margin-right: 15px; }
	#foot p.links { margin: 0 10px 0 23px; }
	#foot a, #foot a:visited { color: #666; font-style: normal; text-decoration: none; }
	#foot a:hover { color:#921313; }

/*--------------------- paragraphs & headings ---------------------*/

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

.color { color: #921313; font-size: 12px; }

h1 { 
	font-size: 1.8em; font-weight: bold; color: #fff;
	text-transform: uppercase; }

	#content h1 {text-transform: uppercase; font-size: 1.5em; margin: 0 0 1em; }
	#whatson #content h1 { color: #7FA758; }
	#support #content h1 { color: #921313; }
	#about #content h1 { color: #655A44; }
	#contact #content h1 { color: #9E76B4; }
	#visit #content h1 { color: #A47275; }
	#education #content h1 { color: #A09F85; }
	#literary #content h1 { color: #D980A4; }
	#jobs #content h1 { color: #50B5A8; }
	#book #content h1, #mailing #content h1, #mondays #content h1 { color: #68AEC7; }

h2 {
	font-size: 1.3em; font-weight: bold; color: #fff;
	text-transform: uppercase; }

h3 { color: #456533; font-size: 1.5em; text-transform: uppercase; }
			
/*--------------------- navigation ---------------------*/

ul.level1 a, ul.level1 a:visited, ul.level2 a, ul.level2 a:visited, ul.extraNav a, ul.extraNav a:visited { font-style: normal; }

ul.level1 { 
	list-style: none; 
	width: 199px; 
	margin: 13px 0 20px; }

ul.level1 li { 
	margin: 0 0 2px 0;
	padding-left: 10px; }
	
	/* level1 bg colours */
	ul.level1 li.home { background: url('../PageImages/bg_li_home.gif') left 3px repeat-x; }
	ul.level1 li.whatson { background: url('../PageImages/bg_li_whatson.gif') left 3px repeat-x; }
	ul.level1 li.support { background: url('../PageImages/bg_li_support.gif') left 3px repeat-x; }
	ul.level1 li.about { background: url('../PageImages/bg_li_about.gif') left 3px repeat-x; }
	ul.level1 li.contact { background: url('../PageImages/bg_li_contact.gif') left 3px repeat-x; }
	ul.level1 li.visit { background: url('../PageImages/bg_li_visit.gif') left 3px repeat-x; }
	ul.level1 li.education { background: url('../PageImages/bg_li_education.gif') left 3px repeat-x; }
	ul.level1 li.literary { background: url('../PageImages/bg_li_literary.gif') left 3px repeat-x; }
	ul.level1 li.jobs { background: url('../PageImages/bg_li_jobs.gif') left 3px repeat-x; }

ul.level1 li a, ul.level1 li a:visited, ul.level1 li a:active {
	font-size: 1.2em; font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	background: #D2D3D5;
	display: block;
	width: 185px;
	padding-left: 4px; }
		
	/* level1 text colours */
	ul.level1 li.home a { color: #6AADC7; }
	ul.level1 li.whatson a { color: #7FA758; }
	ul.level1 li.support a { color: #921313; }
	ul.level1 li.about a { color: #655A44; }
	ul.level1 li.contact a { color: #9E76B4; }
	ul.level1 li.visit a { color: #A47275; }
	ul.level1 li.education a { color: #A09F85; }
	ul.level1 li.literary a { color: #D980A4; }
	ul.level1 li.jobs a { color: #50B5A8; }

ul.level1 li a.MenuOn, ul.level1 li a:visited.MenuOn {
	display: inline;
	padding-right: 4px;
	background: #D2D3D5; }

ul.level1 li a:hover { text-decoration: none; }


/***** Level 2 *****/

ul.level2 { list-style: none; margin: 0; }

ul.level2 li { 
	background: none;
    margin: 0px;
    padding-left: 0px; }

ul.level2 li a, ul.level2 li a:visited, ul.level2 li a:active, ul.level2 li a.MenuOn {
	font-size: 11px; font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	background: none;
	width: 155px;
	padding-left: 25px;
	margin-left: 5px; }

	/* level2 link colours */
	ul.level1 li.whatson li a { color: #47642E; }
	ul.level1 li.support li a { color: #653334; }
	ul.level1 li.about li a { color: #4F4933; }
	ul.level1 li.visit li a { color: #95686B; }
	ul.level1 li.education li a { color: #868870; }
	ul.level1 li.literary li a { color: #B46987; }
	
ul.level1 li ul.level2 li.MenuOn a.MenuOn { display: block; background: #D2D3D5 url('../PageImages/bg_level2.gif') 13px 3px no-repeat; }


/***** Extra Nav *****/

ul.extraNav { 
	list-style: none;
	margin: 0 0 20px; }

ul.extraNav li { margin: 0 0 8px; padding-left: 35px; }

	ul.extraNav li.book { background: url('../PageImages/bg_book.gif') left top no-repeat; }
	ul.extraNav li.mondays { background: url('../PageImages/bg_happy.gif') left top no-repeat; }
	ul.extraNav li.mailing { background: url('../PageImages/bg_join.gif') left top no-repeat; }

ul.extraNav li a, ul.extraNav li a:visited, ul.extraNav li a:active {
	height: 29px;
	font-size: 1.5em; font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 0.8em; _line-height: 0.9em; }
	
	ul.extraNav li.book a { color: #666; }
	ul.extraNav li.mondays a { color: #818181; }
	ul.extraNav li.mailing a { color: #999; }

ul.extraNav li a.MenuOn, ul.extraNav li a:hover {
	color: #fff; text-decoration: none; }

/*--------------------- images ---------------------*/

img.tagline {
	width: 494px; height: 31px; padding-left: 20px; }

img.tube { 
	float: left; padding: 3px 3px 0 0; }
	
img.arrow { 
	padding: 3px 0 0 1px; }

img.logo { 
	padding: 0 20px 10px 0; }

/*--------------------- form elements ---------------------*/

form label {
 cursor: pointer;
 font-size: 1.2em;
 display: block; 
 float: left;
 width: 80px; }
 		
		form span { font-size: 1.2em; }
		
fieldset {
 border: none; 
 background: #fff;
 margin: 0 0 1em;
 padding: 0; }
		
input, select, textarea {
 font: 1.2em Arial, Helvetica, sans-serif;
 margin: 0 0 10px;
 width: 200px; }
 
	input.checkbox { width: auto; margin: 0 25px 0 5px; }

button { margin: 0 0 0 120px; width: 50px; height: 20px; color: #fff; background: #69AEC7; border: none; }
	
/*--------------------- PAST PERFORMANCES PAGE ---------------------*/

div.play { width: 100%; float: left; margin: 18px 0 0 18px; }
div.play img { float: left; padding: 0 10px 0 0; }
div.play p { font-weight: bold; margin: 0; }
div.play a, div.play a:visited, div.play a:active { color: #333; }