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

html
{
	height:100%;
	margin:0;
	overflow-y: scroll;
	padding:0;
} /* to create a vertical dummy scrollbar in Firefox or Safari which would not have a scrollbar with height 100%. If you move to and from pages which don't have a vertical scrollbar to a page which does, it makes the page content jump sideways without a forced dummy scrollbar (works in Firefox and Safari but not in Opera; IE always shows a dummy scrollbar; Opera needs min-height and height: 101% in the container styles but it causes a standard scrollbar, not a dummy, and is less correct.)*/


body.front
{
	background:#003 url('../images/homeBkg.jpg') no-repeat fixed top right;
	height:100%;
	color:#FC9;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	margin:0;
}

body.quicktime
{
	margin:0;
	background-color:#003;
	background-image:url(../images/blueOut.jpg);
}

body
{
	background:#003 url('../images/homeBkg.jpg') no-repeat fixed 7px 70px;
	color:#FC9;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	height:100%;
	margin:0;
	padding-left:10px;
}

a:link,
a:visited
{
	color:#FC9;
}

a:hover
{
	color:#FFC;
}

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

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


p
{
	font-size:1.2em;
	font-weight:normal;
	text-align:justify;
}

	p + p
	{
		text-indent:1.5em;
	}

h1 {} /* used for page headers */
h2 /* used for resume headers */
{
	background-image:url(../images/kyrieFade.jpg);
		filter:alpha(opacity=70);
	 	opacity:.7;
		-moz-opacity:.7;
	clear:both;
	color:#003;
	height:1.5em;
	margin-top:10px;
	margin-bottom:-.2em;
	padding-left:5px;
	padding-top:.2em;
	vertical-align:middle;
}

h3.resume /* used for resume subheaders */
{
	color:#FFC;
	float:left;
	font-variant:small-caps;
	font-size:1.3em;
	font-style:italic;
	margin:14px 0 7px 10px;
	text-align:left;
}
	

h3 /* used for review headers */
{
	color:#FFC;
	font-variant:small-caps;
	font-size:1.5em;
	font-style:italic;
	margin-bottom:7px;
	margin-top:14px;
	text-align:left;
}

h4 /* used for photograph headers */
{
	background:transparent;
	border-bottom:1px solid #40403E;
	color:#E6E8DC;
	font-family:arial, sans-serif;
	font-size:150%;
	font-weight:normal;
	letter-spacing:.1em;
	margin:0px 0px 12px 145px; 
	padding:25px 0px 5px 0px; 
	text-transform:uppercase;
}

sup
{
	font-size:0.6em;
	line-height: 0.5em;
	text-transform:uppercase;
}

.sub
{
	font-size:55%;
	letter-spacing:.1em;
	padding-left:12px; 
}

span.lightbold
{
	font-weight:bold;
	color:#FFC;
}

span.tab
{
	font-family:"Courier New", Courier, monospace;
	font-size:1em;
}

span.halftab
{
	font-family:"Courier New", Courier, monospace;
	font-size:.5em;
}

/******************************************
 *	Images for front page
 ******************************************/	

img.Main
{
	position:absolute;
		bottom:0;
		left:0;
	z-index:4;
}

.name
{
	position:absolute;
		left:280px;
		top:63px;
		z-index:2;
}

.soprano
{
	position:absolute;
		top:140px;
		left:660px;
}

/******************************************
 *	middle stripe of colour on front page
 ******************************************/	

#navContainer /* goes from the top of the page to the bottom of the coloured stripe for the photo */
{
	border-bottom:3px solid #FFC;
	padding-top:140px;
	position:absolute;
		left:0;
		top:0;
		width:100%;
	z-index:1;
}

#colouredStripe /* the coloured stripe in the middle */
{
	background-color:#FC9;
	filter:alpha(opacity=70);
	 	opacity:.7;
		-moz-opacity:.7;
	height:24em; /* height of stripe */	
	padding-top:2em; /* Makes the links be not flush with the top of the bar */
	position:relative;
	width:100%;
}

ul#homeNavbar /* the navigation buttons on the home page */ 
{
	background-color:#003;
	border-left:3px solid #FFC;
	filter:alpha(opacity=70);
	 	opacity:.7;
		-moz-opacity:.7;
	height:auto;
	list-style-type:none;
	padding-left:0px;
	position:absolute;
		left:370px; /* the same width as the header photo +20 */
		top:1.5em;
	width:11em;
	z-index:1;
	}

	ul#homeNavbar li
	{
 		height:2.5em;  /* same as height of navbar a */
		line-height:200%; /* This is what makes the text vertically centred in the block */
		text-align:left;
		width:13em;
	}

	ul#homeNavbar a
	{
		color:#FFF;
		display:block;
		font-weight:bold;
		height:2.5em;  /* same as height of navbar li */
		padding-bottom:0;
		text-decoration:none;
	}
  
	ul#homeNavbar a:hover
	{
		background-color:#FC9;
		border-left:3px double #FFC;
		color:#003;

	}
	
/***********************************
 *	upcoming events on front page
 ***********************************/	

div.upcomingEvents
{
	height:19em;
	position:relative;
		left:550px;
		top:20px;
	overflow:auto;
	width:19em;
}

	.upcomingEvents	ul
	{
		color:#003;
		float:left;
		list-style:none;
	}

		li.EventDate
		{
			font-size:1.2em;
			font-weight:bold;
		}
		
		li.EventTitle
		{
			font-size:1em;
			font-weight:bold;
		}
		
		li.EventDescription
		{
			font-size:1em;
		}
		
	span.am-pm
	{
		font-variant:small-caps;
	}
		
/******************************************
 *	Review at the bottom of the front page
 ******************************************/	

p.frontReview1
{
	color:#003;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	line-height:25%;
	position:relative;
		left:295px;
		top:-1.1em;
}

p.frontReview2
{
	color:#003;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	line-height:25%;
	position:relative;
		left:260px;
		top:-1.1em;
}
	
p.frontReview3
{
	color:#003;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	line-height:25%;
	position:relative;
		left:250px;
		top:-1.1em;
}
	
p.frontReviewCredit
{
	color:#003;
	font-size:.8em;
	font-family:Georgia, "Times New Roman", Times, serif;
	line-height:25%;
	position:relative;
		left:353px;
		top:-1.7em;
}

#copyrightFront
{
	font-size:.8em;
	position:relative;
		top:530px;
	text-align:center;
	width:100%;
}


/***********************************************************************************************************
 *	Banner at the top of the inside pages
 ************************************************************************************************************/	

#banner
{
	background-color:#003;
	padding:5px 0 0 5px;
	position:fixed;
		left:0;
		top:0;
	z-index:10;
}

img#topRight
{
	position:fixed;
		top:10px;
		left:690px;
}

#blueOut /* for the wider pages so you can't see them scroll */
{
	height:157px;
	position:fixed;
		top:0;
		left:765px;
	width:45px;
	z-index:10;
}

/***********************************************************************************************************
 *	Navigation Bar on all the pages but the front
 *  CSS popups modified from http://meyerweb.com/eric/css/edge/popups/demo.html
 ************************************************************************************************************/	

ul.navMenu
{
	background-color:#003;
	height:26px;
	padding:0;
	position:fixed;
		top:117px;
		left:10px;
	width:auto;
	z-index:10;
}

	ul.navMenu li
	{
		background-image:url(../images/button.jpg);
		float:left;
		list-style-type:none;
		width:85px;
	}
	
	ul.navMenu a
	{
		border-width:0;
		color:#FFC;
		display:block;
		font-weight:bold;
		font-size:1em;
		margin:0 0 1px 0;
		padding:5px 10px;
		text-align:center;
		text-decoration:none;
	}
	
	ul.navMenu a:hover
	{
		background-image:url(../images/kyrieButton.jpg);
		color:#003;
	}

	ul.navMenu a img
	{
		border-width:0;
		height:0;
		width:0;
	}
	
	ul#wide a:hover img
	{
		border:3px inset #FC9;
		height:225px;
		position:fixed;
			left:2874px;
			top:230px;
		width:150px;
	}

	ul#narrow a:hover img
	{
		border:3px inset #FC9;
		height:225px;
		position:fixed;
			left:634px;
			top:230px;
		width:150px;
	}

	.bonusPic a img
	{
		border-width:0;
		height:0;
		width:0;
	}

	.bonusPic a:hover img
	{
		border:3px inset #FC9;
		height:225px;
		position:fixed;
			left:634px;
			top:230px;
		width:150px;
	}

/***********************************************************************************************************
 *	The banner on the right side of the narrow pages
 ************************************************************************************************************/	

#rightBanner
{
	background-image:url(../images/rondinefrontSmall.jpg);
	border:3px inset #FC9;
	height:225px;
	position:fixed;
		left:634px;
		top:230px;
	width:150px;	
}

#rightBanner2
{
	background-image:url(../images/kyrie1513.jpg);
		filter:alpha(opacity=70);
	 	opacity:.7;
		-moz-opacity:.7;
	background-repeat:repeat-y;
	height:100%;
	position:fixed;
		left:615px;
		top:162px;
	width:193px;
}

	#rightBanner2 img
	{
		border:3px inset #FC9;
			filter:alpha(opacity=100);
		 	opacity:1;
			-moz-opacity:1;
		height:225px;
		position:fixed;
			left:634px;
			top:230px;
		width:150px;
	}
	

/***********************************************************************************************************
 *	Main content of the pages - one narrow and one wide....
 ************************************************************************************************************/	

#contentNarrow
{
	margin-top:180px;
	width:595px;
	z-index:9;
}

#content
{
	margin-top:180px;
	width:790px;
	z-index:9;
}

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

.dropcap
{
	float:left;
	font-size:3.3em;
	font-weight:bold;
	line-height:1em;
	padding-right:.1em;
} 


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

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

	ul.resumeItalics
	{
		font-style:italic;
	}
	
	ul.leftColumn
	{
		width:170px;
	}

	ul.ColWide
	{
		width:230px;
	}
	
	ul.ColNarrow
	{
		width:90px;
	}
	
	ul.ColSuperWide
	{
		width:490px;
	}

	ul.Years
	{
		padding:0;
		text-align:right;
		width:75px;
	}

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

.headerList
{
	float:left;
}

.clear
{
	clear:left;
	margin-left:0;
}

/***********************************************************************************************************
 *	Samples and reviews Page
 ************************************************************************************************************/	

div.sample
{
	border-bottom:3px groove #FC9;
	clear:both;
	min-height:145px; /* in IE6 makes this just a height tag */
	padding:10px 0;
}

	.sample p
	{
		line-height:1em;
		margin:.1em;
		text-indent:0;
	}
	
	.sample p.people
	{
		font-size:1em;
	}
	
	.sample p.place
	{
		padding-top:.6em;
		font-size:.9em;
	}

	.sample span.audio
	{
		font-size:.7em;
	}

	.sample img
	{
		border:2px groove #FC9;
		float:left;
		height:100px;
		margin:15px 20px 15px 10px;
		width:100px;
	}

	.sample a.hover,
	.sample a.hover:visited
	{
		border:0;
		color:#FFC;
		font-size:1.3em;
		height:100px;
		padding-top:15px;
		text-decoration:none;
		width:100px;		
	} 
	
	.sample a.hover:hover
	{
		background-color:transparent;  /* If you don't specify this, the image in the left blinks */
		text-decoration:none;
	}

	.sample a.hover:hover .popup
	{
		border:3px inset #FC9;
		display:block;
		height:225px;
		position:fixed;
			left:624px;
			top:216px;
		width:150px;
	}

	.sample a .popup
	{
		border:0;
		height:0;
		position:fixed;
			left:631px;
			top:216px;
		width:0;
	}
	
	.sample img.right
	{
		float:right;
		margin-top:3.5em;
	}

	.sample img.left
	{
		margin-top:3.5em;
	}

.quicktimeWindow
{
	background-color:#003;
		filter:alpha(opacity=20);
	 	opacity:.2;
		-moz-opacity:.2;
	height:45px;
	overflow:auto;
	position:relative;
		left:75px;
	width:400px;
}	

.flashMP3
{
	z-index:1;
}

/***********************************************************************************************************
 *	Reviews Page
 ************************************************************************************************************/	

p.reviewCredit
{
	font-size:.9em;
	line-height:1.3em;
	padding-top:.4em;
	text-align:right;
}


/***********************************************************************************************************
 *      Gallery Page
 ************************************************************************************************************/

/* Menu on the left side */

#leftMenu
{
	float:left; 
	padding:22px 0 10px 4px;
	width:130px;
}

.leftMenuItem
{
	height:70px;
	padding:6px 0 8px 0;
	width:140px; 
}

	.leftMenuItem a img
	{
		border:none;
	}
	
	.leftMenuItem a
	{
		background:#40403E;
		color:#FC9;
		float:left; 
		height:54px; 
		width:124px; 
	}
	
	.leftMenuItem img 
	{
		display:block; 
		margin:2px;
	}

	.leftMenuItem a.selected,
	.leftMenuItem a:hover,
	.leftMenuItem a.selected:hover
	{
		background:#FFC;
		color:#929280;
	}

	.info
	{
		float:left;
		padding-top:4px;
	}

/* gallery */

#gallery
{
	height:700px;
	margin-left:140px;
	padding:10px 0 0 10px;
	position:relative;
	width:650px;
}
	#gallery b.default
	{
		height:380px;
		position:absolute;
		left:-31px;
		top:5px;
		text-align:center;
		width:548px;
	}
	#gallery b.default img
	{
		border:1px solid #40403E;
		display:block;
		margin:0 auto 10px auto;
	}
	#gallery b.default span
	{
		border:2px white solid;
		display:block; color:#FFC;
		font-family:verdana, arial, sans-serif;
		font-size:.9em;
		font-weight:normal;
		margin:0 auto; 
		width:350px;
	}

#gallery ul
{
	float:right;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
		top:-4px;
		right:10px;
	width:171px;
}
	#gallery ul li
	{
		display:inline;
		height:50px;
		float:left;
		margin:0 0 5px 5px;
		width:50px;
	}
		#gallery ul li a
		{
			border:1px solid #40403E;
			cursor:default;
			display:block;
			height:50px;
			text-decoration:none;
			width:50px;
		}
		#gallery ul li a:hover
		{
			border-color:#555 #DDD #EEE #333;
			white-space:normal;
		}
			#gallery ul li a:hover b
			{
				height:380px;
				position:absolute;
					left:-524px;
					top:0;
				text-align:center;
				width:548px;
				z-index:20;
			}
			#gallery ul li a:hover span
			{
				color:#FFC;
				display:block;
				font-family:verdana, arial, sans-serif;
				font-size:.9em;
				font-weight:normal;
				margin:0 auto;
				position:absolute;
					right:-145px;
					top:337px;
				width:160px;
			}
			#gallery ul li a:hover img
			{
				border:1px outset #40403E;
				height:370px;
				margin:0 auto 10px auto;
				width:auto;
				/* width:460px;  The width of the photos when you hover over the thumbnails */
			}
			#gallery ul li a img
			{
				border:0;
				display:block;
				height:50px;
				width:50px;
			}
			#gallery ul li a span
			{display:none;}
	
	#gallery ul li a:active,
	#gallery ul li a:focus
	{
		border-color:#555 #DDD #EEE #333;
		white-space:normal;
	}
	#gallery ul li a:active b,
	#gallery ul li a:focus b
	{
		height:380px;
		position:absolute;
			left:-524px;
			top:0;
		text-align:center;
		width:548px;
		z-index:10;
	}
	#gallery ul li a:active span,
	#gallery ul li a:focus span
	{
		border-top:1px groove #FC9;
		color:#FFC;
		display:block;
		font-family:verdana, arial, sans-serif;
		font-size:.9em;
		font-weight:normal;
		margin:0 auto;
		position:absolute;
			right:-145px;
			top:390px;
		width:160px;
	}
	#gallery ul li a:active img,
	#gallery ul li a:focus img
	{
		border:1px outset #40403E;
		height:auto;
		margin:0 auto 10px auto;
		width:auto;
	}


/***********************************************************************************************************
 *      Press Kit
 ************************************************************************************************************/

.press,
.pressBottom
{
	float:left;
	margin:1em 2px;
	text-align:center;
}

	.press a,
	.press a:visited
	{
		color:#FC9;
		font-size:.9em;
		text-decoration:none;
	}

	.press a.hover
	{
		color:#FFC;
	}

.bottomMargin
{
	margin-bottom:3em;
}
	
/***********************************************************************************************************
 *      Contact
 ************************************************************************************************************/

form
{
	padding:5px;
}

input,
textarea
{
	background-color:#014;
	color:#FFC;
}

p.contact
{
	font-size:1.3em;
	padding-left:30px;
	text-indent:0;
}

	p.contact a
	{
		text-decoration:none;
	}

p.message
{
	padding-left:40px;
}

p.submit
{
	padding-left:350px;
}

p.formout
{
	padding:0 22px;
	text-indent:0;
}

/***********************************************************************************************************
 *      About
 ************************************************************************************************************/

a.valid
{
	border:0 none;
	text-decoration:none;
}


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

a.top, a.visited
{
	color:#FC9;
}

a.realign
{
	position:absolute;
	margin-top:-200px;
}

#footer-hack /* This is so the footer will sit at the bottom of pages that aren't 100% of the screen height. It's supposed to be a wrapper div, but since Ididn't design the site that way, I am calling it a footer hack. the height:100% seves this function in IE6 css because it doesn't understand min-height. Thanks to http://www.electrictoolbox.com/html-css-footer/ for the tips on how to get this done. */
{
	border:#003 dashed 1px; /* for some reason this has to be there to work. */
	margin-bottom:-75px; /* should be the negative value of the footer height below */
	min-height:100%;
}

#footer-spacer
{
    height:50px; /* should be the same as the footer hack and the footer height */
}

#footer
{
	border-top:2px solid #330;
	clear:both;
	color:#FC9;
	font-size:.7em;
	height:50px; /* should be the absolute value of footer-hack margin above */
	margin:3em 0 1em 75px; 
	padding:0 20px;
	position:relative;
	width:470px;
}

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

p#fleft {
	float:left;
	margin-left:.5em;
	text-align:left;
	width:100px;
}