/* Hopkins Symphony Orchestra web site Stylesheet 
 * by David Friedlander  July 2009                */

/* Global settings */
body {
	font-family:Arial, Helvetica, sans-serif;
        margin: 0 auto;
        padding: 0 20px;
	
	background-color: #c2b7ef; /* lavender */
	/* Works for global body color & gradient */
	background-image: url(/jhso/images/purple-to-white_960.jpg);
	background-repeat: repeat-y; 
	background-position: top center;
}

#wrapper {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}

#main_content {
	display: inline;  /* IE 6, as per p.292 */
	float: left;
	width: 770px;
	margin-left : 170px;
	padding-left: 10px;
	border-left: 1px dotted #999999;
}

#sidebar {
	margin-left: -937px;  /* or -951px */
	float : left; 
	width: 150px; /* added 26 Aug 2009 , as per p.290 */
	/* background-color: #c2b7ef; */ }  /* lavender, as sampled by Digital Color Meter */

#sidebar img { margin-top: 10px; }
/* Banner at top of each page */
.hso_banner img {padding-top: 5px; float: left; }
p.end_banner {clear: both; margin-bottom: 2px; }
/* Horizontal navigation ('hnav') buttons  see p. 223 */
ul#hnav {
	clear: both;
	list-style: none;
	padding-left:0;
	margin-top: 2px;
	margin-left:0;
	padding-top: 0;
	/* padding-bottom: 5px; */  /* eliminate tiny extender on LHS */
	/* border-left: 1px solid #000; */ /* p. 243 */ /* Matched pair line with 'border-left:none', below in ul#hnav a */
	float: left;
	font-size: 10pt;
	width: 100%;  /* This solved the vert. buttons problem in IE */
	}
ul#hnav a {text-decoration: none; 
	display: block;
	border: 1px solid #000;
	/* border-left: none; */ /* Need this if boxes touch, not otherwise */
	padding: 5px 15px 5px 15px;
	margin-right: 5px;
	/* background-color: #EAEAEA; */
	background-color: #AFAFAF; /* #999999 to match www.jhu.edu */
	color: #333;
	width: 9em;
	text-align: center;
	/* text-transform: uppercase; */
}
#hnav a:hover { 
		font-weight: bold;
		color: #FFFFFF; /* red; */
		/* background-color: #D287C2; */ /* #FEC7B9;  */
		background-color: #333333; /* to match www.jhu.edu */
}
ul#hnav li { float: left; }

/* IE hacks/fixes */
* html ul#hnav a { height: 1px; }

/* 'previous season' & 'following season' buttons on archive pages */
/* buttons based on hnav, then override a few properties... */
/* not working at present ... (July 2010) */
/* .prevfollow  a { background-color: white; color: red;}  */

body#home a#homeLink,
body#concert a#concertLink,
body#about a#aboutLink,
body#meminfo a#meminfoLink,
body#ticket a#ticketLink {
	background-color: #FE69F1;
}


/* **************************** sidebar navigation ******************** */
/* from http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html */
	#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		/*dpf margin-left: -917px; */
		float : left; 
		list-style: none;
		width : 11em; /*100px;  /* dpf edit (was 11em) */
		font-size: 10pt; /* added by dpf */
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		line-height : 1.25em;
		margin-bottom : -1px;
		width: 11em;
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 11.05em;
		margin-top : -1.35em;
		background-color : white; /* Added by dpf  */
		/* background-color: #999999; /* to match www.jhu.edu */
		/* To match JHU menu color scheme, use 999999, to match 
		light blue BG, use d7dbf3.  */
		/* background-color: #d7dbf3; */  /* to match www.jhu.edu */
	}
	
	#nav li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	#nav li a {
		width: 11em;
		w\idth : 10em;
		display : block;
		color : black;
		font-weight : bold;
		text-decoration : none;
		/* THIS background-color was preventing the sidebar
		BG from showing through. (dpf) */
		/*dpf  background-color : white; */
		/* background-color: #999999; /* to match www.jhu.edu */ 
		border : 1px solid black; 
		/* border-bottom : 1px solid black;  */
		padding : 0 0.5em;  
	}
	
	#nav li a:hover {
		color : white;
		/* background-color : #D287C2; */ /* was: pink */ 
		background-color: #333333; /* to match www.jhu.edu */
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li
li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	
	/* Only needed in example code 
	#content {
		margin-left : 12em;
	}
	*/
/* **************************** end sidebar nav ********************** */

.concertheader {
	/* background: red; */
	text-align: left;
	font-family: Arial, sans-serif;
	top: 0px;
	padding-bottom: 5px;
	border-bottom: 1px solid #444444;
}
.concertheader h1, 
.concertheader h2, 
.concertheader h3, 
.concertheader h4 {/* color:orange; background-color: #000099;*/
	/* border: 1px solid  #EE0000; */ /* STILL NOT WORKING TO CENTER!*/
	text-align: center;
}
.concertheader hr { /* width:80%; */ height: 3px;  color: #000099;
	background-color: #000099; 
}

.concert {
	padding-top: 5px;
	padding-bottom: 5px;
	/* background: black; */
	/* Aug 24: margin-right: 290px; */  /* (NEEDED?) so as to clear the photo */

	/* CSS Missing Manual-derived example (ch7) */
	/* Try setting no width at all! 8/24/09  */
	/* width: 710px; */ /* was 550px */ /* 510 works for IE testing (Aug 24) */
	margin: 10px;
	border: solid 1px #fdd041;
	border-top-width: 5px;
	padding: 10px;
	/* background-color: #fbef99; */
	background-color: #ddd6f7;

	text-align: left;
 
	/* float: left;  */
}
.concert h3 {margin-bottom: 0px; padding-top: 5px;}
.concert h4 {font-size: 16pt; font-weight: 400; /* color: orange; */}
.concert p {font-weight: normal;   /* color: green */;}

/* Sub-parts of concerts page  */
.composer {/* color:red; */
	font-weight:bold;
	font-family:sans-serif;
}

.concert div.artist { margin-left: 12px;  margin-top: 0px;}
.concert .piece { font-size: 12pt; }

#concertbrochure {
	float: right; 
	margin: 6px; 
	/* margin-right: -50px; */ /* works but inelegant! */
	width: 200px;	 
	/* display: none;  */ /* turn it off here! */
}
#concertfooter {
	/* background-color: purple;  */
	clear: both ; 
	/* height: 200px; */
	margin: 7px;
	}
p.author { padding-top: 15px; text-align: left; }
	
/* completed concerts (currently shown in gray box) */
.completed {background: #DDDDDD; border-color: #888888;}

/* Experiment: Extra concert types */
.symphonic  {
	background-color: white;
}
.chamber {
	background-color: #ddd6f7;
}
/* This 'childrens' class is to give different colors to listings for the 
   Children's Concerts.  */
.childrens {
	/* background-color: #333366; */
	/* background-color: #AA95F7;*/
	background-color: #c6c6c6;
	/* color: #d7dbf3; */
}

/* "Donate Now" button on main page (all CSS, no image)  */
.donate {
	float: left;
	font-size:11pt;
	font-weight: bold;
	margin-top: 8px;
}
.donate a { 
	text-decoration: none; 
	display: block;
	padding: 4px;
	text-align: center;
	width: 142px;
	background-color: #723E97;
	color: white;
	}
.donate a:link { background-color: #723E97; color: white;}
.donate a:hover { background-color: white; color: #723E97; }
	
/* Soloist and composer bios ****************************** */
.artist h1, .artist h2, .artist h3, .artist h4 {text-align: center;}
/* .artist h1 {padding-bottom: 9px; border-bottom: 1px dashed #660000; } */
.artist_bio {
	text-align: left;
	margin: 2px;
	/* WON'T VALIDATE: margin: 1px, 0px, 1px, 0px ; */ /* not working (when listd as "border"!*/ 
	border-color: red;  /* not working */
}
.artist_photo {
	float: right;
	padding: 10px;		
}
.artist_photo p {
	font-size: .7em;
}
.artist { font-style: normal; margin-left: 12px;}
.reh_schedule {
	text-align: center;
	font-size: 11pt;
}
.reh_schedule h2,
.reh_schedule h3, 
.reh_schedule p { line-height: 30%; }
.reh_schedule p.concert_listing { font-weight: bolder; }
.reh_schedule td, .reh_schedule th { text-align: left; }
.reh_schedule td.date { vertical-align: top;}  /* so that it is readable for split reh's */
.reh_schedule tr.service td { padding-top: 8px; } /* provide space between rehearsals */

/***** General text tables ******/
.top_text td {vertical-align: top;  padding: 2px; }
	
/* Program Notes ******************************************** */
p.pgmnotes {font-weight: normal; font-style: italic; /* color: yellow; */ }
	
/* main page    */
.concert_series { border: 1px dashed #333;  margin-bottom: 7px; }
.concert_series h3 { text-align: left; margin-left:10px;}
.logo1 {float: left; padding-right: 8px;}
.logo2 {float: right; padding-left: 8px;}
.arts_step_up { /* create white on red box */
	float: left;
	width: 170px;
	background-color: #FF0000;
	padding-left: 3px;
	margin-right: 3px;
	margin-bottom: 20px;  /* To move paragraph over */
}
.arts_step_up h2 {color: #FFFFFF; text-align: left;
	font-weight: 900; font-family: Arial, sans-serif; 
	margin-bottom: 0px; margin-top: 2px;
}
.arts_step_up p {
	color: #FFFFFF; font-weight: bold; 
	font-family: Arial, sans-serif; 
	font-size: 0.7em; margin-top: -2px; margin-bottom: 2px;
}
.sponsor_credits {
	clear: both;
	font-size: 0.9em;
	text-align: center;
}
.banner { font-size: 0.7em; }  /* e.g.,  for photo credit */
	
.scanned_history a:link {text-decoration: none;}
.scanned_history a:visited {text-decoration: none;}
.scanned_history a:hover {border: 1px; background-color: black; color: white;}
.scanned_history td {padding-bottom: 14px; }
.scanned_history {float:left; }
/* .scanned_history img {border: 0;} */ /* 2010 */
.scanned_history img.a:link {text-decoration: none;} /* 2010 */
p.disclaimer {font-size: 0.7em}
/* 
Why are these two 'td a' lines here ? (too general!) 
td a.link {text-decoration: none;}
td a.hover {background-color: green;}
*/
	
/* Children's concert  */
.poster {
	padding: 2px;
	padding-bottom: 7px;
	float: left;
	height: 240px; /* see. 191, adapted */
}
/* concert _programs_ are displayed in a table, but season brochures
   are a float-free table */
.poster img {border: 0;} /* 2010 */
.poster a:link {text-decoration: none; } /* 2010 */
.poster a:visited {text-decoration: none; } /* 2010 */
.poster a:hover {border: 1px; background-color: black; color: white;} /* 2010 */
	
/* logos without decoration until mouse hover */
.logo_link a:link    {border: 0px; text-decoration: none;}
.logo_link a:visited {border: 0px; text-decoration: none;}
.logo_link a:hover {border: 1px; color: blue;}
 .logo_link img.a:link {border: none; text-decoration: none;} /* 2010 */


	
/* Contact page */
.contact { text-align: center; }
.contact p {font-size: 0.9em; }
	
/* Page for signing up for auditions in the fall */
.audition_signup h1 {text-align: center;}
.audition_signup table {
    	margin-left: auto;
    	margin-right: auto;
}
.audition_signup td.label {text-align: right;}
.audition_signup span.bignote {color: #cc0000; font-weight: bold; }
.audition_signup h3 {text-align: center; }

/* Orchestra Board page */
.board_members li { list-style-type: none; padding: 2px;}

/* directions & parking */
.directions h1, .directions h2, .directions h3 {text-align:left;}
.directions h2 {font-variant: small-caps;}

/* For Press Releases */
.press_release p.contact_info {text-align: right;}
.press_release h1, .press_release h2 {text-align: center;}

/* Repertoire list */
.repertoire p.composer {margin-bottom: -4px; } /* tighten spacing a little */ 
.repertoire p.piece { color: #884C45; line-height: 90%;  margin: 5px 5px 0px 20px; }
.repertoire p.piece a:link {text-decoration: none;}  /* does not work */

/* Set links for repertoire, artist_list, and instrument listings */
.repertoire a:link, .artist_list a:link, .instrument a:link {text-decoration: none;}  
.repertoire a:hover, .artist_list a:hover, .instrument a:hover {
	text-decoration: underline; background-color: black; color: white;}  
.repertoire a:visited, .artist_list a:visited, .instrument a:visited {text-decoration: none; }

/* Guest Artist List */
.artist_list p.artist {font-weight: bold; margin-left: 0;
	margin-bottom: -4px;}
.artist_list .composer {font-weight: normal; font-size: 0.9em; color: black; margin-left: 20px;}
.artist_list p, .piece {font-weight: normal; font-size: 0.9em;}

/* Program Notes */
.program_notes ol.uroman {list-style-type: upper-roman;}
.program_notes .piece_notes {border-top: 2px solid #FF0000; padding: 10px 0px 10px 0px;}
.program_notes h1, .program_notes h2, .program_notes h3 {text-align: left;}
.program_notes h3 {margin: -5px 0 0 0;} 

.lyrics {text-align: left; margin-left: 55px}

.rehearsal_schedule p, 
.rehearsal_schedule td, 
.rehearsal_schedule th, 
.rehearsal_schedule li {font-size: 10pt;}
.rehearsal_schedule th {text-align: left; }
.rehearsal_schedule td {padding-right:10px;}
.rehearsal_schedule h1 {font-size: 14pt;}
.rehearsal_schedule h2 {font-size: 13pt; 
	border-top: 2px solid #000000; margin-bottom: 2px;}
.rehearsal_schedule h3 {font-size: 12pt;
	border-top: 1px solid #444444; padding-top: 3px; }
.no_reh {color: #555555; font-style: italic;}

table.donate_now_categ { padding-top: 0px; border-top: 1px solid  #000;} /* nested tables */
.donate_now_categ td { vertical-align: top; }
table.donate_now { padding-top: 0px; border-top: 1px solid  #000;} /* nested tables */
.donate_now td { vertical-align: top; border-bottom: 1px solid #AAAAAA; }

/* Pixy method of rollovers (CSS-MM, p.230) */
.pixy a  { background: url(/jhso/thumbnails/find_on_fb_pixy2.png) no-repeat left top; 
	width: 144 px;
	text-decoration: none;
	display: block;
	/* padding: 2px; */
	/* border: 1px black dashed; */
	/*height: 52 px; */
	}
.pixy a:hover {background-position: 0 -44px; }

.photo_left {
	float: left;
	padding-right: 10px
}
.photo_right {
	float: right;
	padding-left: 10px
}
p.photo_credit { margin-top: 0px; padding-top: 1px; font-size: 0.6em; }

#footer { clear: both;  text-align: center;}

.contact_footer { 
	clear: both; 
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 2px;
	border-top: thin groove #333366; 
	font-size: 0.8em; 
	text-align: center; 
}


/* A style sheet just for the printed page 
	D Friedlander, 30 July 2009   */
/* Missing Manual, p 368 */
@media print {
	body { background: #FFFFFF; }
	/* #sidebar, .hso_banner, .contact_footer { */
	#sidebar, .hso_banner {
		display: none;
	}

	#main_content {background: white;   /* use this instead of 'background-color' */
		margin-left:10px;
	}
	/* Want wide spacing for printout (on-screen does not really matter) */
	.donate_now td { vertical-align: top; border-bottom: 1px solid #AAAAAA; line-height: 250%}
} /* end @media print */