/*  
 *  Author: Jennifer Gliere, DMA
 *  Creation Date: March 2009
 *  css/screen.css
 */

html, body, ul, li, h1, h2, h3, h4 {
	color:#FC9;
	margin:0;
	padding:0;
}

body {
	background:black;
	text-align:center;
	color:white;
	font:11px verdana, sans-serif;
}


body.quicktime
{
	margin:0;
	background-color:maroon;
}

img { border:0;}

a {
	color:#FFC;
}

a:hover {
	color:#F2AB9E;
}

.clear {clear:both;}

a[href*="pdf"]:after
	{
		content:" [PDF]";
		font-size:smaller;
	}


a.download, a.download :visited {
	color:#FC9;
	text-decoration:none;
}

#wrapper {
	background:#8d0207 top right url(../images/bkg.png) no-repeat;
	border:5px solid #750306;
	margin:15px auto;
	position:relative;
	text-align:left;
	width:778px;
}

h1 {                 /*For front page headers*/
/*	background:130px .5em url(../images/dot_dot_dash.jpg) no-repeat;*/
	font:24px verdana, sans-serif;
	font-weight:normal;
	font-style:italic;
}

h2 {                 /*For inside page headers*/
	clear:both;
	font-size:1.5em;
	position:relative;
		top:-65px;
	text-align:center;
	width:778px;
}

h3 {
	border-bottom:1px grove #FC9;
	clear:both;
	font-size:1.3em;
	margin:1em 0 .5em 0;
}

h4 {                 /* For inside page sub-headers (pics, resume, press) */
	color:#FC9;
	font-size:.8em;
	margin:-1.5em 0 1em 0;
	text-align:center;
}

.spacer {
	clear:both;
	height:6em;
}

/*******************************************************
*      Front page
********************************************************/

img#headshot {
	position:absolute;
		left:454px;
		top:5px;
}

#soprano {
	position:absolute;
		left:150px;
		top:76px;
}

ul#nav {
	color:#FC9;
	font-size:1.3em;
	list-style-type:none;
	margin:0 0 25px 100px;
	padding-top:30px;
	width:200px;
}

ul#nav li {
	height:1.5em; /*Same as hight under ul#nav a*/
	list-style-type:none;
}

ul#nav li + li {
	background:top left url(../images/navLine.jpg) no-repeat; 
}

ul#nav a {
	color:#FC9;
	display:block;
	height:1.5em;  /*Same as hight under ul#nav li*/
	margin-top:1em;
	padding-left:5px;
	padding-top:.6em;
	text-decoration:none;
}

	ul#nav a:hover {
		background:top left url(../images/navLineHover.jpg) no-repeat;
		color:#FFC;
	}

#galleryFront {
	float:left;
	margin-top:10px;
	padding-left:38px;
	width:278px;
}

#galleryFrontInset {
	background:#750306;
	border:1px solid #9F0408;
	height:261px;
	margin:13px 10px 0 6px;
	position:relative;
}

	#galleryFrontInset img {
		display:block;
	}

	.galInset {
		background:#9F0408;
		padding:4px;
		position:absolute;
	}
		#galMain {
			left:15px;
			top:13px;
			width:221px;
		}
		#gal1 {
			left:15px;
			top:200px;
			width:57px;
		}
		#gal2 {
			left:98px;
			top:200px;
			width:57px;
		}
		#gal3 {
			left:179px;
			top:200px;
			width:57px;
		}
	
#upcoming {
	float:right;
	font-size:1.2em;
	margin-top:15px;
	padding-right:22px;
	width:345px;
}

	#upcoming ul {
		border-bottom:2px solid #933;
		padding:.3em 0 .5em 18px;
	}
	
	#upcoming li.info {
		list-style-type:none;
	}

/*******************************************************
*      Inside header
********************************************************/
#header {
	height:100px;
}

	#header img#name {
		position:relative;
			left:25px;
			top:4px;
		z-index:2;
	}

	#header #headshotSmall {
		float:right;
		position:relative;
			top:-90px;
	}

	#header ul /* the navigation buttons */
	{
		background-color:#C00;
			opacity:.7;
		height:2.3em; /* height of the background */
		list-style-type:none;
		margin-top:-.5em;
		padding-left:52px;
		width:726px; /* width of wrapper minus padding */
	}

	#header li
	{
		float:left; /* makes the links horizontal instead of stacked */
		height:2.3em; /* height of the background */
		text-align:center;
		width:80px;
	}

	#header a
	{
		color:#FFC;
		display:block;
		height:2.3em; /* same as height of the background */
		padding:.6em 0 0 0;
		text-decoration:none;
	}
  
	#header a:hover
	{
		background-color:maroon;
		color:#FFF;
	}

#headShotLine {
	background-color:black;
	clear:both;
	height:5px;
	position:relative;
		top:-90px;
}

/*******************************************************
*       Inside pages
********************************************************/

#content {
	color:#FC9;
	margin:0 1em;
	position:relative;
		top:-45px;
}

	#content img.floatright {
		border:4px solid #911;
		float:right;
		margin-left:1em;
	}
	
p {
	margin:0 3em;
	text-align:justify;
}

.padding {
	height:20em;
}

/*******************************************************
*       Inside pages
********************************************************/

p.bio {
	font-size:1.3em;
}
	
	p.bio + p.bio {
		text-indent:4em;
	}


/*******************************************************
*      Resume
********************************************************/

ul.resume {
	list-style-type:none;
	margin-left:.5em;
}

.resume {
	width: 750px;
}

.resume ul {
	border:none;
	list-style-type:none;
	margin-bottom:2em;
}

.leftCol {
	float:left;
	margin-left:.5em; /*same as rightCol and SmallLists*/
	width:380px;
}

.rightCol {
	float:right;
	margin-left:.5em; /*same as leftCol and SmallLists*/
	text-align:right;
	width:345px;
}

ul.small {
	border:none;
	float:left;
	list-style-type:none;
	margin-left:25px;
	width:120px;
}

ul.small li.header {
	font-size:1.1em;
	font-weight:bold;
	list-style-type:none;
	margin-bottom:.5em; 
	text-decoration:underline;
}

#smallLists {
	clear:both;
	height:125px;
	margin-left:.5em; /*same as leftCol and rightCol*/
}

/*************************************************************************************************
 *   Gallery - with captions and on-focus click
 *************************************************************************************************/
 
#gallery {
	height:445px;
	padding:10px;
	position:relative;
		right:13px;
	width:757px;
}

	#gallery b.default {
		position:absolute;
			left:3px;
			top:9px;
		text-align:center;
		width:575px;
	}

		#gallery b.default img {
			display:block;
			margin:0 auto 10px auto;
		}

		#gallery b.default span {
			color:#FC9;
			display:block;
			font-family:verdana, arial, sans-serif;
			font-size:1em;
			font-weight:normal;
			margin:0 auto;
			width:350px;
		}

	#gallery ul {
		float:right;
		list-style:none;
		padding:0;
		margin:0;
		position:relative;
		width:175px;
	}
	
		#gallery ul li {
			display:inline;
			float:left;
			height:52px;
			margin:0 0 5px 5px;
			width:52px;
		}
		
			#gallery ul li a {
				display:block;
				border:1px outset #FFC;
				height:50px;
				text-decoration:none;
				width:50px;
			}
			
				#gallery ul li a span {display:none;}
				#gallery ul li a img {
					border:0;
					display:block;
					height:50px;
					width:50px;
				}

				#gallery ul li a:hover {
					background:url(../images/spacer.gif);
					border:1px outset maroon;
					white-space:normal;
				}

				#gallery ul li a:hover b { /* the large pictures that appear */
					position:absolute;
						left:-585px;		/* should be the same as #gallery ul li a:focus b below */
						top:0;
					text-align:center;
					z-index:20;
				}

				#gallery ul li a:hover span {/* the captions */
					color:#FC9;
					display:block;
					font-family:verdana, arial, sans-serif;
					font-weight:normal;
					font-size:1em;
					width:350px;
					margin:0 auto;
				}

				#gallery ul li a:hover img {
					border:1px outset #FC9;
					height:450px;					/* should be the same as #gallery ul li a:active b below */
					margin:0 auto 10px auto;
					width:auto;
				}

				#gallery ul li a:active,
				#gallery ul li a:focus {
					background:url(../images/spacer.gif);
					border:inset 1px #FC9;
					white-space:normal;
				}

					#gallery ul li a:active b, /* What happens when you click on a picture to make it stay. */
					#gallery ul li a:focus b {
						background:url(../images/spacer.gif);
						height:450px;						/* should be the same as #gallery ul li a:hover img above */
						position:absolute;
							left:-585px;		/* should be the same as #gallery ul li a:hover b above */
							top:0;
						text-align:center;
						width:575px;
						z-index:10;
					}

	#gallery ul li a:active span,
	#gallery ul li a:focus span { /* the captions after you've clicked on them */
		color:#FC9;
		display:block;
		font-family:verdana, arial, sans-serif;
		font-size:1em;
		font-weight:normal;
		margin:0 auto;
		width:350px;
	}
	
	#gallery ul li a:active img, #gallery ul li a:focus img {
		border:1px inset #EEE;
		height:auto;
		margin:0 auto 10px auto;
		width:auto;
	}


/*******************************************************
*      Samples
********************************************************/

ul.sample {
	font-size:1.2em;
	list-style-type:none;
	margin:auto;
	padding:1em 0 1em 3em;
	width:400px;
}

	ul.sample a {
		text-decoration:none;
	}

	ul.sample a:hover {
		color:#FFC;
		text-decoration:underline;
	}

	ul + ul {
		border-top:2px groove #FC9;
	}


li.title { font-size:1.3em; }

li.player { padding-top:1.5em; }

/*******************************************************
*      Press Page
********************************************************/

ul.press {
	margin-left:50px;
	font-size:1.4em;
	list-style-type:square;
}


/*******************************************************
*      Footer
********************************************************/

#footer {
	border-top:1px solid #983234;
	clear:both;
	color:#CD3639;
	margin-top:2em;
	padding:6px 0 40px 0;
}

a.top {
		color:#CD3639;
}

p#fright {
	float:right;
	text-align:right;
	width:300px;
}

p#fleft {
	float:left;
	text-align:left;
	width:300px;
}