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


@charset "utf-8";


/****************************************************************************
		Site properties
****************************************************************************/

body
{
  background:#000;
	color:#FDE7C2;
	font:1em arial, sans-serif;
	padding:0;
	width:100%;
}

h1
{}

h2 /* used for resume headers */
{
	clear:both;
	font-size:1.4em;
}

a:link, a:visited, span.audio
{
	color:#FFC;
	font-weight:bold;
}

	:link img
	{
	  border:none;
	}

:visited img
{
 	border:none;
}

p + p
{
	text-indent:1.5em;
	margin-top:0;
}

span.opera
{
	font-style:italic;
	font-weight:bold;
}


/****************************************************************************
		Splash page
****************************************************************************/


#frontPics
{
	border:5px ridge #911;
	height:400px;
	margin:0;
	position:absolute;
		top:40px;
		left:60px;
	width:758px;
}

	#frontpics img
	{
		float:left;
	}

	
#name
{
	position:absolute;
		top:460px;
		left:400px;
}

#frontFooter
{
	position:absolute;
		top:600px;
		left:350px;
	clear:both;
}

p.frontPage
{
	font-weight:bold;
	text-align:center;
}

p.frontPage :link, :visited
{
	color:#FDE7C2;
	text-decoration:none;
}

/****************************************************************************
		Header for inside pages
****************************************************************************/

#header
{
	background-color:#000;
    height:177px;
	position:fixed;
		top:0;
		left:0;
	width:800px;
	z-index:2;
}

.floatingPic
{
	border:#911 3px inset;
	background-color:#000;
	float:right;
	height:180px;
	position:absolute;
		left:670px;
		top:10px;
	z-index:2;
}



/****************************************************************************
		Navigation Menu on the inside pages
****************************************************************************/
ul#navMenu
{
	height:26px;
	margin-bottom:2.1em;
	padding:0;
	position:fixed;
		top:120px;
		left:0;
	width:auto;
	z-index:10;
}

	ul#navMenu li
	{
		float:left;
		list-style-type:none;
		width:95px;
	}
	
	ul#navMenu a
	{
		border-width:0;
		background-color:#911;
		color:#FDE7C2;
		display:block;
		font-weight:bold;
		font-size:.9em;
		margin:0 0 1px 0;
		padding:5px 10px;
		text-align:center;
		text-decoration:none;
	}
	
	ul#navMenu a:hover
	{
		background-color:#FDE7C2;
		color:#911;
	}

	ul#navMenu a img
	{
		border-width:0;
		height:0;
		width:0;
	}


/****************************************************************************
		Main content of the pages - wrapper and main content
****************************************************************************/
#wrapper
{
	margin-top:190px;
	padding-left:5px;
}

#wrapper, #footer
{
	width:785px;
}

#content
{

}


/****************************************************************************
		Bio page
****************************************************************************/

p.bio
{
	text-align:justify;
}

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

ul.resume
{
	float:left;
	list-style-type:none;
	padding:0;
	margin:-1em 0 1em 0;
	white-space:nowrap;
}

	ul.resume li
	{
		line-height:1.2em;
	}	

ul.italics
{
	font-style:italic;
	width:250px;
}
	
ul.leftColumn
{
	margin-left:10px;
	width:170px;
}

ul.right
{
	margin-left:10px;
	width:250px;
}


.dloadResume
{
	clear:both;
	text-align:center;
	padding:1em 0 1em 0;
}


/*************************************************************************************************
 *   Samples of audio and video - video.html
 *************************************************************************************************/

.sample
{
	border-bottom:3px #911 double;
	margin:.5em 0 .5em 1em;
}

.sample p
{
	margin-bottom:0;
	text-indent:0;
}	

.sample .title
{
	font-size:1em;
}

.sample p.people
{
}

.sample p.place
{
}

.flashMP3
{
	position:relative;
		bottom:10px;
		left:200px;
}

/*************************************************************************************************
 *   Gallery - with captions and on-focus click
 *************************************************************************************************/
 
#gallery
{
	background:#911;
	border:1px groove #FFC;
	height:450px;
	padding:10px;
	position:relative;
	width:760px;
}
	#gallery b.default
	{
		height:422px;
		position:absolute;
			left:10px;
			top:150px;
		text-align:center;
		width:548px;
	}

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

		#gallery b.default span
		{
			color:#FFF;
			display:block;
			font-family:verdana, arial, sans-serif;
			font-size:11px;
			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 #EEE;
				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:#911;
					border:1px outset #300;
					white-space:normal;
				}

				#gallery ul li a:hover b /* the large pictures that apprear */
				{
					height:420px;
					position:absolute;
						left:-548px;
						top:0;
					text-align:center;
					z-index:20;
				}

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

				#gallery ul li a:hover img
				{
					border:1px groove #EEE;
					height:400px;
					margin:0 auto 10px -35px;
					width:auto;
				}

				#gallery ul li a:active,
				#gallery ul li a:focus
				{
					background:#911;
					border-color:#555 #DDD #EEE #333;
					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:#911;
						height:380px;
						position:absolute;
							left:-585px;
							top:0;
						text-align:center;
						width:575px;
						z-index:10;
					}

	#gallery ul li a:active span,
	#gallery ul li a:focus span
	{
		color:#FFF;
		display:block;
		font-family:verdana, arial, sans-serif;
		font-size:.7em;
		font-weight:normal;
		margin:0 auto;
		width:350px;
	}
	
	#gallery ul li a:active img, #gallery ul li a:focus img
	{
		border:1px solid #EEE;
		border-color:#555 #DDD #EEE #333;
		height:auto;
		margin:0 auto 10px auto;
		width:auto;
	}
	
	
/***********************************************************************************************************
 *	Contact
 ************************************************************************************************************/	

p.contact
{
	margin:0;
}


/****************************************************************************
		Reviews
****************************************************************************/

.review
{
	border-bottom:3px #911 double;
	padding:.5em 2em .5em 2em;
}

	.review p
	{
		margin:0;
		text-align:right;
	}

/****************************************************************************
		quicktime
****************************************************************************/


body.quicktime
{
        margin:auto;
        background-color:#000;
}


.quicktimeWindow
{
	background-color:#000;
		filter:alpha(opacity=20);
	 	opacity:.2;
		-moz-opacity:.2;
	height:220px;
	overflow:auto;
	position:fixed;
		left:530px;
		top:220px;
	width:270px;
	z-index;-1;
}	


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

#footer {
	border-top:1px solid #911;
	clear:both;
	color:#911;
	font-size:.9em;
	margin-top:2em;
	padding:6px 0 40px 0;
}

a.top {
		color:#911;
}

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

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