/* 

STYLE SHEET FOR MARIANNE TYLER BROWN WEB SITE
www.mariannetylerbrown.com
Created by Peter Blake www.performerswebdesign.co.uk

*/



/* --------- 1. defaults  --------- */

* {
		margin: 0;
		padding: 0;
		}

body {
	background-color: #a9cca4;
	color: #333333;
	font-family: Verdana, Arial, sans-serif;
	margin-top: 0;
	margin-bottom: 10px;
}
body {
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small;
}
html>body {
	font-size: small;
}
		
/*  --------- 2. structure  --------- */

#wrapper {
	position: relative;
	text-align: left;
	width: 960px;
	margin: 0 auto;
	background-color: #c8e8af;
}
body {
	text-align: center;
}
#wrapper {
	text-align: left;
}
/* border-top to bring down the masthead by 10px */	
#masthead {
	margin-bottom: 0px;
	padding-bottom: 5px;
	height: 200px;
	background-color: #e90397;
	/*background-image: url(images/bottom.jpg);
	background-position: bottom left;
	background-repeat: repeat-x;
	border-bottom */
		}
		
#masthead ul {
	list-style: none;
	padding-top: 5px;
	padding-left: 814px; /* for Opera to let smaller col in wrapper (with nav and images) stay in place on right. 
									If masthead ul floated right it mucks up the smaller col position of nav in Opera */
}
#masthead li {
	padding-bottom: 3px;
	margin-bottom: 5px;
	color: #000000;
	font-variant: lowercase;
}
#masthead li a {
	text-decoration: none;
	color: #fafad2; /* preferred #fafad2 */
	font-weight: bold;
}
#masthead li :hover {
	background-color: #c8e8af;
	color: #000000;
}
/* #fafad2 is preferred colour of font */	
#masthead h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 250%;
	color: #000000;
	margin-top: -200px; /* for Opera, see padding-left for masthead ul. The minus value is to put the h1 in place */
	padding-top: 35px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#masthead h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 150%;
	color: #c8e8af;
	padding-left: 12px;
}
#masthead h5 {
	margin-top: -10px;
	margin-bottom: 20px;
	padding-left: 12px;
}
.masthead_player {
	background-color: transparent;
	margin-top: 25px;
	margin-left: 10px;
}
		
#content {
	padding-left: 10px;
	margin-top: 0;
	border-top
}

#content p {
	font-size: 90%;
	text-align: justify;
	line-height: 2em;
	margin-bottom: 10px;
	color: #000000;
}

.strong {
	font-weight: bold;
}
.left {
	float: left;
	clear: both;
}
/* used for opening para of pages to gain some space between header and text */
.biog {
	padding-top: 25px;
	/* font-variant: small-caps; */
}
.smallindent {
	margin-top: 0px;
	margin-left: 20px;
}

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
/* --------------- table for the music shop page ------------------*/
.datatable {
	border: 1px solid #338ba6;
	border-collapse: collapse;
	margin-bottom: 20px;
	width: 80%;
	/* text-align: center; */
}
.datatable td, .datatable th {
	border: 1px solid #73c0d4;
	padding: 4px;
}
.datatable th {
	background-color: #bcbcbc;
	font-weight: bold;
	text-align: center;
}
.datatable caption, .datatable tfoot {
	font: bold 1.25em "Times New Roman", Times, Serif;
	text-align: center;
	color: #33517a;
	padding-top: 3px;
	padding-bottom: 2px;
	text-transform: uppercase;
}
.datatable tfoot {
	font: bold 1.25em "Times New Roman", Times, Serif;
	text-align: center;
	background-color: #b0c4de;
	color: #33517a;
	padding-top: 3px;
	padding-bottom: 2px;
	text-transform: uppercase;
}
/* --------------- end of table for the music shop page ------------------------------------------------*/
/* ---- boxes with coloured backgrounds on the educator page ----*/
.boxout, .boxout2 {
	float: left;
	background-color: #B0E8B3;
	margin-top: 10px;
	margin-bottom: 25px;
}
.boxout {
	margin-right: 20px;
	width: 340px;
	padding-left: 10px;
	padding-right: 10px;
	border-right: 2px solid;
	border-bottom: 2px solid;
}
.boxout2 {
	width: 385px;
	margin-right: 0;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid;
	border-left: 2px solid;
}
/* ----end of boxes on educator page ----*/

/* columns within wrappers and clearing floated content, coloured boxes on cellist page */
.divOne, .divTwo {
	float: left;
	background-color: #B0E8B3;
	padding-right: 5px;
	padding-left: 5px;
}
.divOne {
	margin-right: 20px;
	width: 350px;
} 
.divTwo {
	width: 405px;
	margin-bottom: 20px;
}

/* end of columns within wrappers etc */


#gallery {
	margin-top: 35px;
	margin-bottom: 30px;
	width: 780px;
}
#gallery img {
	margin-right: 10px;
	margin-bottom: 10px;
}

/* this is used on the index page ONLY image left side */
#sidebar {
float: left;
background-color: #2e8b57;
width: 180px;
height
margin-top: 0;
margin-right: 10px;
margin-bottom: 46px;
margin-left: -10px;
}
#sidebar img {
	width: 180px;
}
#sidebar p {
	width: 180px;
	text-align: center;
	font-size: .75em;
	padding-top: 5px;
}
	
#content ul {
	float: left;
	margin-top: 30px;
	margin-bottom: 20px;
	padding: 10px;
	background-color: #D9EFC7;
}

#content li {
	list-style: none;
	margin-left: 0;
	padding-top: 10px;
	padding-bottom: 15px;
	border-bottom: 2px dotted #2e8b57;
}

#content li a {
	color: #000000;
	text-decoration: none;
	font-weight: normal;
}
#content li :hover {
	text-decoration: none;
	background-color: #fafad2;
	text-decoration: underline;
}

/* this is for the mp3 player on the music page */
.player {
	padding-top: 30px;
	margin-bottom: 10px;
	width: 780px;
	border
}
/*  for the button player p  */
.button_para {
	margin-top: -45px;
	margin-left: 50px;
}
#brahms {
	background-color: #d9efc7;
	width: 715px; /* 76%; */
	padding: 8px 8px 8px 5px;;
	margin-top: 20px;
}
#brahms .brahms_text {
	padding: 0 5px 0 50px;
	line-height: 16px;
	font-family: "Times New Roman", Times, serif;
	font-size: 115%;
	font-weight: bold;
}
#brahms .small {
	font-size: smaller; /* 88%; */
	padding: 0 50px 0 50px;
	line-height: 16px;
}

/* this is for the ul on the index page and other pages */
.centraldiv1 {
	clear: left;
	margin-top: 46px;
	margin-left: 0;
	font-weight: bold;
}
.ul_heading {
	font-weight: bold;
	font-variant: small-caps;
}
/*----- this is for the cello image beneath the ul on all pages except cello and educator. The forward slash before /left: means
compliant browsers can't read it but the duff IE7 reads it, otherwise the div is sent off to the right in IE7 -----*/
.centraldiv2 {
	clear: left;
	position: absolute;
	bottom: 60px;
	/left: 0px;
   width: 500px;
	/*padding-top: 140px;	
	margin-top: 500px;*/		
	margin-left: 250px; /* 100px for bigger image */
	font-size: 80%;
}

.cellocredit {
	background-color: #2e8b57;
	width: 35%;
	padding-left: 10px;
	margin-left: 58px; /* 110px for bigger image */
}

/* used for the final images at the bottom of some pages */
.centraldiv3 {
	/*clear: left;
	position: absolute;
	bottom: -950px; */
	margin-top: 500px;
	margin-left: 10px;
	
}
.centraldiv3 img {
	margin-right: 25px;
	margin-bottom: 10px;
	margin-left: 0px;
	widt
}

/* this is for the bottom images of teaching pupils */
.teaching {
	text-align: center;
	font-style: oblique;  
}

/* this is the navigation right column with images */
#smallercol {
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #2e8b57;/* important for text box*/
	width: 144px;
	margin-top: 0;
	margin-bottom: 20px;
	margin-left: 10px;
	letter-spacing: normal;
	line-height: 1.75em;
	font-variant: lowercase;
	font-weight: bold;
	text-align: center;
}

#smallercol p {
	font-family: Arial, Helvetica, sans-serif;
	font-variant: lowercase;
	font-weight: bold;
	width: 100%;
	color: #000000;
	padding-top: 3px;/* important for size of text box */
	margin-bottom: 5px; /* important for size of text box */
	line-height: normal;
	text-align: center;
	letter-spacing: normal;
}

#smallercol img {
   border: none;
	padding-bottom: 0;
}

#smallercol a {
	display: block;
	text-decoration: none;
	background-color: #2e8b57;
	color: #000000;
	fafad2
}

#smallercol :hover {
	background-color: #2e8b57; /* or #edf9de */
	color: #fafad2; /* nothing registers in Firefox */
	
}
hr {
	color: #2e8b57;
}

.caption{
	font-family: "Times New Roman", Times, serif;
	margin-top: 0;
	margin-left: 55px;
	
}

/* end small right column */

#footer {
	clear: both;
	background-color: #2e8b57;
	color: #000000;
	text-align: center;
		}
#footer p {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 85%;
	padding-top: 3px;
	padding-bottom: 3px;
}

.separator {
	   clear: both;
		}
.separator_left {
	clear: left;
}

#formContainer {
	margin-left: 180px;
	width
}


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

#contact-form {
	width: 50%;
	border: 1px solid #CCCCCC;
	background-color: #E5E8B0;
	padding: 10px;
}

#contact-form label {
	font-size: 80%;
	display:block;
	width: 100%;
	color: #333333;
}

#contact-form div {
	margin: 0.4em 0.5em 0.6em 0;
}

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

#contact-form legend {
	color: #666666;
	font-size: 90%;
	font-weight: bold;
	margin: 0 0 10px -10px;
	padding: 0;
}

#contact-form .txt {
	width: 100%;
	border: 1px solid #CCCCCC;
	font-size: 100%;
	padding: 2px;
}

#contact-form .btn {
	border: 1px outset #666666;
	background-color: #c8e8af;
	color: #000000;
	padding: 2px;
	font-size: 80%;
}

#contact-form div.submit {
	text-align: center;
}
.warning {
	font-weight: bold;
	color: #ff0000;
} 		


/* ---------- 3. links ---------- */

a { color: Blue;
	 text-decoration: none;
		}

a:hover {
	background-color: #edf9de;
	text-decoration: underline;
}

#gallery a:hover {
	background-color: transparent;
}

		
/* ---------- 4. fonts ---------- */

h1, h2, h3, h4, p, ul {
		}

h1 {
	font-size: 200%;
	margin-bottom: 5px;
		}

h2 {
	margin-top: 3px;
	margin-bottom: 0px;
		}


h3 {
	padding-top: 5px;
		}
		
h4 {
	font-size: 125%;
	margin-top: 20px;
		}
h5 {
	margin-top: 5px; 
}


p {
		}

ul {
		list-style-type: none;
		}

/* ---------- 5. images first rule removes border from image
                 nested in links ---------- */

a img {
		border: 0;
		}
		
/* ---------- 6. hacks ---------- */

body	{ /* IE 5 centring bug fix */
		text-align: center;
		margin: 0;
		padding: 0;
		}
		
#wrapper {
		text-align: left;
		}