/*	css stylesheet for www.wardbaxter.com
	created by ward baxter
	validated by W3C CSS Validator 2/22/05 	*/


/* ------------ HTML ELEMENTS ------------- */
*, html, body {margin: 0; padding: 0;}

body {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 80%;
	line-height: 1.3em;
	color: black;
	background-color: white;
	width: 100%;
	}
	
p 	{
	font-size: 1.0em;
	line-height: 1.4em;
	margin: .6em 0em;
	}
	
h1, h2, h3, h4, h5, h6 {
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	line-height: 1.0em;
	}
/* 
equalizing margins for headers: same space as paragraphs above, same as line height below
margin-top = line-height (1.3) / font-size
margin-bottom = font-size * desired line-height (0.3)
*/
h1   { font-size: 2.0em; margin-top: 0.65em; margin-bottom: 0.60em;
	  font-family: "Impress BT", "Comic Sans MS", arial, helvetica, sans-serif;
	}	
h2	{ font-size: 1.7em; margin-top: 0.76em; margin-bottom: 0.51em }
h3	{ font-size: 1.4em; margin-top: 0.93em; margin-bottom: 0.42em }
h4	{ font-size: 1.0em; margin-top: 1.30em; margin-bottom: 0.30em }
h5	{ font-size: 1.0em; margin-top: 1.30em; margin-bottom: 0.30em }
h6	{ font-size: 0.8em; margin-top: 1.63em; margin-bottom: 0.24em }

div    {padding: 0; margin:0;}
form   {padding: 0; margin:0;}
hr     {display: none; /*color: black; height: 1px;*/}
img    {padding: 0; border: 0; margin:0;}

table  {table-layout: fixed;}
tr     {vertical-align: top;}
td, th {font-size: 1.0em;}
th     {font-weight: bold; text-align: left;} 

ol, ul {
	margin-left: 2.0em;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
	}
li, dt, dd 	{/*	list-style: none; */
	font-size: 1.0em;
	line-height: 1.4em;
	}
	
dl {margin: 0.8em;}
dt {font-weight: bold; margin-top: 0.8em}

a {color: blue; text-decoration: underline;}
a:hover {color: black; background-color: silver; text-decoration: none;}
a:hover img {background-color: white;}

a sup {text-decoration: none; font-size: 0.7em}


/* ------------ PAGE LAYOUT ------------- */
/* image replacement based on Dwyer method */
h1 {
	width: 400px;
	height: 51px;
	background-image: url(images/wb_banner.jpg);
	margin-left: auto;
	margin-right: auto;
	}
h1 span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	}



#content a.link_pdf {
	background: url(images/icons/pdf.png) no-repeat center right;
	padding-right: 19px; /* the width of the pic (16px) + a little space */
	}
#content a.link_ext {
	background: url("images/icons/external.png") center right no-repeat;
	padding-right: 13px;
}
#content a.link_mp3 {
	background: url("images/icons/mid.png") center right no-repeat;
	padding-right: 19px;
}
#content a.link_ra {
	background: url("images/icons/ra.gif") center right no-repeat;
	padding-right: 19px;
}
#content a.link_zip {
	background: url("images/icons/zip.png") center right no-repeat;
	padding-right: 19px;
}
#content a:hover {color: black; background-color: silver; text-decoration: none;}

/* Template Navigation (table rows) */
#container {width: 760px; margin-left: auto; margin-right: auto}

#header {text-align: center;}

#content {border: 1px solid #0066CC; padding-bottom: 0.8em; margin: 1.0em 0;}
#content p {text-align: justify; margin: 0.8em; padding-top: 0;}
#content h2 {font-size: 1.2em; font-weight: bold; text-align: center; color: white; background-color: #0066CC; padding-bottom: 0.2em; margin-top: 0;}
#content h3 {font-size: 1.0em; font-weight: bold; text-align: left; color: white; background-color: #0066CC; padding: 0.2em; padding-left: 0.8em; margin-top: 0;}
#content h4 {font-size: 1.0em; margin-left: 0.8em; line-height: 0;}
#content h5 {font-size: 1.0em; margin-left: 0.8em; line-height: 0.8em;}
#content ul {margin-top: 0.8em;}
#content li p {margin: 0; margin-right: 0.6em;}
#content table {width: 95%; margin: 0.8em;}


#nav {}
#nav ul {padding-left: 0; margin-left: 0.5em; text-align: center;}
#nav li {
	font-size: 1.2em; 
	display: inline; 
	padding: 0;
	margin: 0;
	}
	
#nav li:before { content: "| "; }
#nav li:first-child:before { content: ""; }	

/* begin IE workaround Fat Erik 5s simple pipelist */
	/*All IE browsers*/
	* html #nav li {
		border-left: 1px solid black;
		padding: 0 0.4em 0 0.4em;
		margin: 0 0.4em 0 -0.4em;
		}

	/*Win IE browsers - hide from Mac IE\*/
	* html #nav { height: 1%; }

	* html #nav li {
		display: block;
		float: left;
		}
	/*End hide*/

	/*Mac IE 5*/
	* html #nav li:first-child { border-left: 0; }
/* end IE workaround */

#nav li a {padding: 0 0.25em;}
li.this_page a {color: black; text-decoration: none; font-weight: bold}

#nav li ul {display: none; padding-left: 0; margin-left: 0;}
#nav li li {font-size: 0.8em; padding: 0 0.25em;}


#footer {font-size: 0.8em; text-align: center;}
.nocss {display: none}
.descriptive {color: gray; font-size: 0.9em; font-style: italic;}
.nodec { /* clears basic font formatting */
	font-style: normal; 
	font-weight: normal; 
	text-decoration: none; 
	text-transform: none; 
	font-variant: normal;}
.row_shade {background-color: #FFFFCC}

.two_column {position: relative; width: 100%}
.first_column {width: 45%}
.second_column {position: absolute; top: 0em; left: 50%; width: 45%; margin-left: 2.0em;} 
.first_column img, .second_column img {margin-top: 10px}

div.pic_2col { 
	width:50%; 
	float: left; 
	position: relative; 
	text-align: center; 
	margin: 10px 0 10px 0; 
	}
div.pic_2col p { 
	width: 300px; 
	padding-left: 30px; 
	}

/* ------------ PAGE SPECIFIC ------------- */
/* index.php */
div#nav {position: relative}
div#nav a span {display: none;}
div#nav a span img	{padding: 0 5px}

div#nav a:hover span {
	display: block; 
	position: absolute; 
	top: 30px; 
	width: 300px; 
	height: 150px;
	font: italic 16px Times, sans-serif; 
	text-align: left;}

div#nav #composition a:hover span {left: 0}
div#nav #performance a:hover span {left: 100px}
div#nav #education a:hover span {left: 200px}
div#nav #BMP a:hover span {right: 200px; text-align: right}
div#nav #personal a:hover span {right: 100px; text-align: right}
div#nav #wlinks a:hover span {right: 0; width: 250px; text-align: right}

#instructions	{
	height: 150px;
	border: 1px dashed silver;
	}
#instructions p	{
	font: italic 16px "Times New Roman", "Times", serif;
	padding-top: 40px;
	text-align: center;
	color: #999999; 
	}
	
/* poker */
#poker a:visited, #poker a:link {text-decoration: none; color: #333333;}
#poker a:hover {text-decoration: underline;	color: #FF9900; background-color: white;}
#poker_nav {padding: 5px; border: 1px solid #369; margin-left: 15px; margin-right: 15px}
#poker_nav h4 {margin-top: 0}
.poker_header {color: #369; font-weight: bold;}
.poker_variations {font-weight: bold; font-style: italic}
.poker_links {font-size: 0.6em}
.poker_links a {font-size: 1.4em}

/* performance.php */
.imgcaption     {float: right; width: 260px; font-size: .8em; line-height: 1.0em; padding: 0; border: 1px solid silver; margin-left: 0.7em; margin-top: 1.4em;}
.imgcaption h3  {padding: 0 0.5em 0.2em 0.5em; color: white; background-color: #0066CC; margin: 0;}
.imgcaption p   {padding: 0; margin-top: 0;}
.imgcaption img {padding: 0; margin: 0;}

/* instruments.php */
.instrument {
     background-color: transparent;
     background-repeat: no-repeat; 
     background-position: left 5px;
     padding-left: 75px;
     border-top: 2px solid gray; 
     }   
     
/* min-height is not supported well by IE, and there is a 
   nice solution at mezzoblue.com, but it would bloat the code 
   too much, since each box is a different height...oh well,
   it works in "real" browsers ;) */ 
#soprano_sax   { min-height: 90px;  background-image: url(images/performance/inst_sax_soprano.jpg); }
#alto_sax      { min-height: 115px; background-image: url(images/performance/inst_sax_alto.jpg); }
#tenor_sax     { min-height: 130px; background-image: url(images/performance/inst_sax_tenor.jpg); }
#baritone_sax  { min-height: 160px; background-image: url(images/performance/inst_sax_baritone.jpg); }
#bass_sax      { min-height: 183px; background-image: url(images/performance/inst_sax_bass.jpg); }
#Eb_clarinet   { min-height: 110px; background-image: url(images/performance/inst_clarinet_Eb.jpg); }
#Bb_clarinet   { min-height: 125px; background-image: url(images/performance/inst_clarinet_Bb.jpg); }
#alto_clarinet { min-height: 140px; background-image: url(images/performance/inst_clarinet_alto.jpg); }
#bass_clarinet { min-height: 160px; background-image: url(images/performance/inst_clarinet_bass.jpg); }
#contrabass_clarinet { min-height: 243px; background-image: url(images/performance/inst_clarinet_contrabass.jpg); }
#piccolo       { min-height: 75px;  background-image: url(images/performance/inst_piccolo.jpg); }
#flute         { min-height: 125px; background-image: url(images/performance/inst_flute.jpg); }
#alto_flute    { min-height: 125px; background-image: url(images/performance/inst_alto_flute.jpg); }

/* recordings.php */

.recording     {
     padding: 5px; 
     padding-right: 20px;
     border-top: 2px solid gray;
     }
.recording dl { margin-top: 0 }
.recording dt { line-height: 0.5em; margin-bottom: 1.0em }
.recording dt.album { font-style: italic }
/* self-clearing div */
.recording:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.recording {display: inline-block;}

/* Hides from IE-mac \*/
* html .recording {height: 1%;}
.recording {display: block;}
/* End hide from IE-mac */

.recording img {
     float: left; 
     width: 150px; 
     height: 150px;
     border: 1px solid black;
     margin: 5px 10px 5px 5px;
     }

/*  \*/
* html .recording dl {
	height: 1%;
}
/*  */



/* personal.php */
#journal_entry1, #journal_entry2, #journal_entry3, #journal_entry4, #journal_entry5, #journal_entry6 {
	display: none;}
a.open_article {width: 13px; height: 13px; font-weight: bold; text-decoration: none; border: 1px solid black;}