/*
white #FFFFFF;
black #000000;

#999 logomenu unhover
#CCC darkest bg
#69F blue

??? #666 heading, name
*/


* { /*this sets ALL margins/pads to zero, thus removing browser variations, then I can respecify them as needed ; maybe I should add border:0 too ? */
margin: 0;
padding: 0;
}

html, body {
border:0;
margin:0;
padding:0;
text-align:center; /*this aligns the SITE (even in dodgy browsers), then I need to text-align:left/justify the CONTENT */

/*font-family : Verdana,Arial,Helvetica,Geneva,sans-serif;*/
/*but Arial/Helvetica are 'narrow' sans fonts, compared to 'wide' Verdana*/

font-family : Verdana, Geneva, sans-serif;

font-size:11px; /*was 10px on old shmd site - I need to redo this as em ? I don't like it... 8pt is good though*/
color : #000;
background-color : #DDD;

/*F5F5F5 to CCC is best?*/
/*background-image : url(../images/shmd_bg_2400h.jpg);
background-repeat: repeat-x;
background-attachment:fixed;*/		/*is this correct ? and if I use it, will it look good?*/

}





/*force the browser to allow space for the scrollbar on short pages so that the centre-alignment of the site doesn't change from page to page*/
html {
/*this version allows space for the scrollbar without always drawing it, which looks better, but it is only allowed in CSS3*/
	/*overflow-y: scroll;*/

/* this solution is compliant but always draws the scrollbar which doesn't look as good*/
/* and it now seems to fail in FF3 */
	/*height: 100%;
	margin-bottom: 1px;*/

/*try this instead from http://www.phwinfo.com/forum/macromedia-dreamweaver/351587-vertical-scroll-bar-creating-centered-layout-issue.html*/
height: 102%;

}













#container {
width: 960px;

/*revised version centering the site*/
	margin: 15px auto;
	padding:0px;

line-height: 140%; /*increases legibility - could be increased, in fact*/
}



#headerstrip {
padding: 15px; /*top right bottom left*/
color : gray;
text-align:left;
background-color : white;
}

#menutable {
height:41px;
}



#leftcontent {
width: 350px;
float: left;

/*background-color : #CCC; background-color : #DDD;
background-image : url(../images/shmd_bg_2400h.jpg);
background-repeat: repeat-x;*/ /*including these lines ensures the content panel doesn't flash grey before white*/
background-color : white;

/*border-top: 1px solid white;*/ /*230709 I COMMENTED THIS OUT*/
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
}

#rightcontent {
width: 590px; /*NB THIS NEEDS TO BE THE WIDTH OF THE FOLIO IMAGES PLUS PADDINGx2 !!! */
float: right;

/*margin-left:10px;*/ /*adding this made the white bodytext bg appear wrong in IE6 ; luckily it's not needed if floated right*/

/*background-color : #CCC; background-color : #DDD;
background-image : url(../images/shmd_bg_2400h.jpg);
background-repeat: repeat-x;*/ /*including these lines ensures the content panel doesn't flash grey before white*/
background-color : white;

/*border-top: 1px solid white;*/ /*230709 I COMMENTED THIS OUT*/
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;

margin-bottom:15px;
}



.fix { /*this is a rudimentary 'clearfix' to fix the prob caused by floated content no longer being contained by its parent*/
clear:both;
margin:0;
padding:0;
}



.heading, .heading h1, .heading h2 {
background-color : white;
text-align:left;
padding: 15px;
padding-top:0px; /*so that gap from hover strip to headings is 15px (not 30px i.e. padding twice)*/

/*font-family:Helvetica;color: gray;font-size:16px;font-weight:bold;*/ /*THIS MIGHT NEED TO BE AMENDED TO SUIT offscreen-shifted H1s */
}

H1, .heading H1 {
background-color : white;
text-align:left;
padding: 0px;
}




.bodytext {
text-align: left;
/*text-align: justify;*/ /*sod it, it leads to stupidly large gaps between words*/
padding: 15px;
/*padding-top:5px;*/ /*so that padded gap between heading and bodytext is 15+5=20px */

/*background-color : #CCC;*/
/*background-image : url(../images/shmd_bg_2400h.jpg);
background-repeat: repeat-x;*/
background-color : white;
}

.checklist { /*keep a white bg on the checklist form*/
background-color:white;
background-image:none;
}

.musicproject, .testimonial {
width:560px;
}

.musicprojectpic, .testimonialpic {
width:160px;
padding-right:15px;
float:left;
}

.musicprojecttext, .testimonialtext {
width:385px;
float:right;
}

B {
color:#69F;
}

.right {
text-align:right;
}

/*===================================================================*/
/* JQUERY-RELATED SETTINGS*/
/*===================================================================*/

#headerstrip, #leftcontent, #rightcontent {
display:none;
}

img { /*this should make hoverfade menu buttons appear properly/better */
border:0;
outline:none;
}


/*===================================================================*/
/* JPLAYER-RELATED SETTINGS inspired by http://www.pitjamajusto.com/releases/detail/a-corner-in-england*/
/*===================================================================*/

.jplayercontainer ul li {
list-style-type:square;/*square or disc or circle*/
list-style-position: inside;
color:#CCC;
/*color:#69F;*/
/*color:#000;*/
}

/*.jplayercontainer ul li a.selected, /jplayercontainer ul li a:hover {}*/

.inlineplayer {
display:inline; /*TRY FLOAT LEFT IF THIS DOES NOT WORK IN ALL BROWSERS*/
color:black;
}

/*===================================================================*/
/* HYPERLINK STYLING*/
/*===================================================================*/
A,A:link,A:active,A:visited {
/*color : #666666;*/
color : #000;
text-decoration:underline;
}

A:hover, A.overlink {
color : #69F;
text-decoration:underline;
}

A.faded,A.faded:link,A.faded:active,A.faded:visited {
color : #999;
text-decoration:underline;
}

A.faded:hover, A.faded.overlink {
color : #69F;
text-decoration:underline;
}


/*===================================================================*/
/* FORM ELEMENTS*/
/*===================================================================*/
.contactformbox {
width:310px;
margin-bottom:15px;
border: 1px solid #CCC;
font-family : Verdana,Arial,Helvetica,Geneva,sans-serif;
font-size:11px;
padding:1px;
}

.checklistformbox {
width:558px;
margin-bottom:15px;
border: 1px solid #CCC;
font-family : Verdana,Arial,Helvetica,Geneva,sans-serif;
font-size:11px;
padding:1px;
}

.submitbutton {
font-family : Verdana,Arial,Helvetica,Geneva,sans-serif;
font-size:11px;
color : #000;
}