/*------------------------------------------------------------------------------
Style Sheet for the Stephensonmusic website

version:		1.0
date:			September 5, 2006
author:			Jim Stephenson
email:			kineticjim@stephensonmusic.com
			jim@lockportucc.org  
			jim@kineticjim.com
			sstephenson_lock@hotmail.com
website:		www.stephensonmusic.com
------------------------------------------------------------------------------*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, 
address, th, td 	{ 
			margin: 		0; 
			padding: 		0;	
			}

ol, ul			{
			list-style-type:	none;
			}

table			{
			border-collapse:	collapse;
			border-spacing:		0;
			}

caption, th		{
			text-align:		left;
			}

fieldset, img		{
			border:			0;
			}

dt, address, caption, cite, code, dfn, em, i, strong, b, th, var
			{
			font-style:		normal;
			font-weight:		normal;
			}

q:before, q:after	{
			content:		'';
			}

/* Basic tag formatting ------------------------------------------------------*/

body		{
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		background:		#223355 url(graphics/bce-235-800x4.gif) repeat-x;
		color:			black;
		text-align:		center;
		}

h1		{
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		font-size:		32px;
		font-weight:		500;
		color:			#ffffff;
		margin:			5px 0 0 0;
		}

h2		{
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		font-size:		16px;
		color:			#333333;
		margin:			16px 0 8px 0;
		}

h3		{
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		font-size:		12px;
		font-weight:		900;
		color:			#000000;
		margin:			5px 0 0 0;
		}

h4		{
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		font-size:		12px;
		font-weight:		900;
		color:			#000000;
		margin:			10px 0 0 0;
		}

h5		{
		font-family:		verdana, Tahoma, Arial, sans-serif;
		font-size:		85%;
		font-weight:		900;
		color:			#000000;
		font-variant:		small-caps;
		letter-spacing:		0px;
		margin:			3px 0 0 0;
		}

h6		{
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		font-size:		14px;
		color:			#000000;
		margin:			5px 0 0 0;
		}
	
p		{
		font-family:		"trebuchet ms",Tahoma, Arial, sans-serif;
/*		font-size:		12px;	*/
		margin:			0;
		}
		
p.tma		{
		font-size:		11px;
		}
		
p.tma span	{
		color:			#cc3333;
		}

.tm		{
		position: 		relative; 
		top: 			0px; 
		color: 			#000; 
		}

/* Layout ID's --------------------------------------------------------------*/
	
/*

#threeColLayout #overall	{
		height:			1500px;
		}

#overall	{
		position:		relative;
		background:		#6781a6;
		top:			15px;
		width:			850px;
		margin:			0 auto;
		font-family:		"trebuchet ms",arial,sans-serif;
		color:			black;
		text-align:		left;
		}

#siteBanner	{
		background:		#6781a6;
		position:		relative;
		top:			10px;
		left:			0px;
		width:			100%;
		height:			100px;	
		font-family:		"trebuchet ms";
		color:			#336699;
		background:		url("graphics/grad-eef-fff.gif") repeat-x;	
		Z-index:		10;
		}

#basicNav	{
		border:			0px solid rgb(237,28,36);
		background-color:	transparent;
		position:		absolute;
		top:			0px;
		right:			240px;
		width:			220px;
		height:			20px;		
		font-family:		"trebuchet ms",arial,sans-serif;
		font-size:		75%;
		color:			white;
		z-index:		2;
		}

#bannerName	{
		position: 		absolute; 
		left: 			670px; 
		top: 			66px;		
		}
		
#bannerName h1	{
		font-size:		20px;
		font-family:		georgia;
		}	
	
#bannerName a:hover	{
		text-decoration: 	none;
		cursor:			pointer;
 		}

#bannerSub1	{
		border:			#900 solid 0px;
		background-color:	transparent;
		position:		absolute;
		top:			93px;
		left:			672px;
		height:			20px;
		font-family:		"trebuchet ms";
		font-size:		13px;
		font-weight:		900;
		letter-spacing:		1px;
		color:			#fff;			
		}

#bannerSub2	{
		border:			#900 solid 0px;
		background-color:	transparent;
		position:		absolute;
		top:			94px;
		left:			15px;
		font-family:		arial, Tahoma, sans-serif;
		font-size:		12px;
		font-weight:		bold;
		color:			#fff;
		}

#bannerSub3	{
		border:			#900 solid 0px;
		background-color:	transparent;
		position:		absolute;
		top:			112px;
		float:			right;
		right:			21px;
		width:			200px;
		height:			20px;		
		font-family:		"trebuchet ms",arial,sans-serif;
		font-size:		12px;
		line-height:		14px;
		font-weight:		bold;
		letter-spacing:		0px;
		color:			#333333;
		text-align:		right;
		}
		
#bannerSub4	{
		border:			#900 solid 0px;
		background-color:	#eeeeee;
		position:		absolute;
		top:			18px;
		float:			left;
		left:			618px;
		width:			132px;
		height:			25px;		
		font-family:		"trebuchet ms",arial,sans-serif;
		font-size:		16px;
		line-height:		14px;
		font-weight:		bold;
		letter-spacing:		0px;
		color:			#333333;
		text-align:		left;
		z-index:		1000;
		border-bottom:		#999999 solid 2px;
		}

#bannerSub5	{
		border:			#900 solid 0px;
		background-color:	transparent;
		position:		absolute;
		top:			66px;
		float:			left;
		left:			12px;
		width:			48%;
		font-family:		"trebuchet ms",arial,sans-serif;
		font-size:		12px;
		line-height:		14px;
		font-weight:		bold;
		letter-spacing:		0px;
		color:			#333333;
		text-align:		left;
		}

#picture img	{
		float:			right;
		position:		absolute;
		margin: 		32px 0 0 0;
		width:			80px;
		right:			12px;
		z-index:		10;
		}


#topNav		{
		z-index:		10;
		border:			#900 solid 0px;
		background-color:	transparent;
		position:		absolute;
		left:			261px;
		top:			77px;
		height:			24px;
		width:			675px;
		font-family:		georgia;
		font-style:		italic;
		text-decoration:	none;
		color:			#ffffff;
		letter-spacing:		2px;
		}
				
#topNav ul	{
		z-index:		100;
		margin:			0px 12px 0 0;
		padding:		0;
		list-style:		none;
		width:			700px;
		float:			left;
		background:		transparent;
		}
			
#topNav ul li	{
		float:			left;
		}
				
#topNav ul a	{
		float:			left;
		padding:		0 1em;
		line-height:		1.6em;
		background: 		transparent;
		font-size:		11px;
		font-weight:		900;
		color:			#ffffff;
		}
		
#topNav ul a:hover  {
		color:			#000000;
		text-decoration:	underline;
		}
		
#topNav .sel a	{
		color:			#fc0;
		}
				
#topNav ul .first a {
		background: 		none;
		}					*/
		
/* #contentWrapper	{
		border:			#900 solid 0px;
		background:		#ffffff;
		position:		relative;
		top:			-24px;
		width:			100%;
		font-family:		"trebuchet ms",arial,sans-serif;
		color:			white;	
		}	*/

#twoColLayout #contentWrapper	{
		border:			#900 solid 0px;
		background:		#ffffff;
		position:		relative;
		top:			0px;
		width:			850px;
		font-family:		"trebuchet ms",arial,sans-serif;
		color:			white;	
		border-right:		#476186 solid 0px;
		}	

#contentBanner	{
		border:			#900 solid 0px;
		background-color:	#666699;
		float:			right;
		padding:		0;
		margin:			0;
		width:			100%;
		height:			25px;		
		font-family:		"trebuchet ms",arial,sans-serif;
		color:			black;			
		}

/*-- Three Column Layout --*/

#threeColLayout #content1	{
		background:		#ffffff;
		border:			blue solid 0px;
		width:			400px;
		display:		inline;
		float:			left;
		margin:			0px 0 20px -700px;
		border-right:		#ccccff solid 2px;
		border-bottom:		#ccccff solid 2px;
		border-left:		#333333 solid 2px;
		border-top:		#333333 solid 2px;
		z-index:		5;
		} 
		
#threeColLayout #content1 h3 	{
  		font-family: 		verdana, arial, sans-serif;
  		padding: 		0 0 12px 24px;
  		font-weight: 		500;	
  		}
		
#content2	{
		border:			green solid 0px;
		width:			288px;
		display:		inline;
		float:			left;
		margin:			0 0 20px 562px;
		height:			720px;
		}
		
#threeColLayout #leftSide	{
		border:			green solid 0px;
		float:			left;
		width:			148px;
		display:		inline;
		margin:			0 0 20px -850px;
		height:			720px;
		color:			black;
		}	

/*-- Two Column Layout --*/

#twoColLayout #content1		{
		width:			702px;
		float:			left;
		margin:			0 0 0 148px;
		background:		#6781a6;
		min-height:		720px;
		}
		
#twoColLayout #leftSide	{
		border:			green solid 0px;
		float:			left;
		width:			148px;
		display:		inline;
		margin:			0 0 20px -850px;
		min-height:		720px;;
		color:			black;
		background:		#6781a6;
		}
		
#twoColLayout #contentWrapper	{
		background:		#6781a6;
		}


/*-- One Column Layout --*/
		
#content1	{
		border:			red solid 2px;
		width:			100%;
		display:		inline;
		float:			left;
		margin:			0;
		background:		#ffffff;
		}
			
#twoColLayout #content2		{
		display:		none;
		}
		
#oneColLayout #content2, #oneColLayout #leftSide	{
		display:		none;
		}
		
/* -------- Navigation in left side ---------- */		

#leftNav	{
		border:			#999900 solid 0px;
		background-color:	transparent;
		float:			left;
		position:		relative;
		top:			-25px;
		left:			12px;
		width:			100%;
		height:			300px;	
		font-family:		"trebuchet ms",arial,sans-serif;
		font-size:		12px;
		letter-spacing:		1px;
		color:			black;	
		z-index:		100;
		
		}
		
#leftNav ul	{
		border:			#00ff00 solid 0px;
		margin:			0;
		padding:		0;
		list-style:		none;
		position:		relative;
		top:			10px;
		z-index:		2;
		}
		
#leftNav h3	{
		position: 		relative; 
		top: 			8px;
		padding:		5px 0 0 2px;
		}

#leftNav ul a	{
		display:		block;
		width:			120px;
		height:			30px;
		line-height:		30px;
		margin:			0;
		padding:		0;
		color:			#ffffff;
		text-decoration:	none;
		text-indent:		26px;
		font-weight:		900;
		}
		
#leftNav li a.db-9cf 	{
		background:		#94b8e9 url(graphics/dblbtn-9cf-369-r.gif) no-repeat right bottom;		
		}
		
#leftNav li a.db-99f	{
		background:		#94b8e9 url(graphics/dblbtn-99f-339-r.gif) no-repeat right bottom;		
		}

#leftNav li a.db-c9f	{
		background:		#94b8e9 url(graphics/dblbtn-c9f-639-r.gif) no-repeat right bottom;		
		}
		
#leftNav li a.db-f9f	{
		background:		#94b8e9 url(graphics/dblbtn-f9f-939-r.gif) no-repeat right bottom;		
		}
		
#leftNav li a.db-f9c	{
		background:		#94b8e9 url(graphics/dblbtn-f9c-936-r.gif) no-repeat right bottom;		
		}
		
#leftNav li a.db-f99	{
		background:		#94b8e9 url(graphics/dblbtn-f99-933-r.gif) no-repeat right bottom;		
		}
		
#leftNav li a.db-fc9	{
		background:		#94b8e9 url(graphics/dblbtn-fc9-963-r.gif) no-repeat right bottom;		
		}
		
#leftNav li a.db-ff9	{
		background:		#94b8e9 url(graphics/dblbtn-ff9-993-r.gif) no-repeat right bottom;		
		}
		
#leftNav li a.db-cf9	{
		background:		#94b8e9 url(graphics/dblbtn-cf9-693-r.gif) no-repeat right bottom;		
		}
		
#leftNav li a.db-9f9	{
		background:		#94b8e9 url(graphics/dblbtn-9f9-393-r.gif) no-repeat right bottom;		
		}
		
#leftNav li a.db-9fc	{
		background:		#94b8e9 url(graphics/dblbtn-9fc-396-r.gif) no-repeat right bottom;		
		}
		
#leftNav li a.db-9ff	{
		background:		#94b8e9 url(graphics/dblbtn-9ff-399-r.gif) no-repeat right bottom;		
		}
		
#leftNav li a.db-fff	{
		background:		#94b8e9 url(graphics/dblbtn-fff-000-r.gif) no-repeat right bottom;		
		}		
		
#leftNav li a.db-ccc	{
		background:		#94b8e9 url(graphics/dblbtn-ccc-333-r.gif) no-repeat right bottom;		
		}		

#leftNav li a:hover {
		background-position:	left bottom;
		color:			#000;
		}
		
#leftNav li.selected a {
		background-position:	left bottom;
		color:			#000;
		}
		
#leftNav li.first a {
		height:			31px;
		line-height:		31px;
		}

a.nav3:link, a.nav3:visited	{
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		font-variant:		small-caps;
		color: 			#000000;
		font-weight: 		900;
		margin-top:		.2em;
		margin-bottom:		.2em;
		}

a.nav3:hover	{
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		font-variant:		small-caps;
		text-decoration: 	underline;
		color:			#000000;
		font-weight: 		900;
		margin-top:		.2em;
		margin-bottom:		.2em;
		}

a.nav3:active	{
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		font-variant:		small-caps;
		color: 			#000000;
		font-weight: 		900;
		margin-top:		.2em;
		margin-bottom:		.2em;
		}

/* -----------------------------------*/

#footer		{
		clear:			both;
		}

#frautschi	{
		float:			left;
		position:		relative;
		top:			20px;
		border:			black solid 0px;
		}		
		
#frautschi p	{
		font-size:		10px;
		line-height:		13px;
		margin:			0 0 0 15px;
		}
		
#christmas-jukebox	{
  position: absolute;
  left: 455px;
  top: 105px;
  }
  
#clpLngth	{
  position: relative;
  top: 0px;
  width: 100%;
  left: 24px;
  margin: 0;
  padding: 0;
  height: 48px;
  }
  
#clpLngth h3	{
  font-family : verdana, arial, sans-serif;
  position: relative;
  margin: 12px 0 12px 0px;
  padding-top: 0px;
  width: 125px;
  font-size: 14px;
  font-weight : 500;
  }

#clpLngth ul	{
  background: #faa819 url(graphics/ccc-999.gif) repeat-x;
  list-style: none;
  float: left;
  margin: 0 0 0 0;
  height: 24px;
  width: 225px;
  font-family: verdana, arial,sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 2.0em;
  display: inline;
  }
 
#clpLngth ul li{
  background: url(graphics/greyDivider1.gif) repeat-y left top;
  height: 100%;
  float: left;
  display: inline;
  padding: 0 1.2em;
  }
  
#clpLngth ul li.first {
  background:	none;
  }
  
.clipSelect {
  background : #ccccdd;
  border-top : #cccccc solid 1px;
  border-left : #cccccc solid 1px;  
  border-right : #999999 solid 1px;
  border-bottom : #cccccc solid 1px;
  font-family : verdana, arial, sans-serif;
  position : relative;
  width : 672px;
  top : 10px;
  left : 16px;
  padding : 6px 0 12px 0;
  margin : 0 0 12px 0;
  }
  
.clipSelect p	{
  color : #000000;		
}
  
.clipSelect h2 {
text-align: center;
padding : 0;
margin : 0;
color : #cc0000;
}
  
.clipSelect h3 {
  font-family : verdana, arial, sans-serif;
  font-size : 14px;
  padding : 0 0 12px 24px;
  font-weight : 500;
  }
    
.christmasInstrumentation {
  position : absolute;
  width : 400px;  
  left : 204px;
  top : 13px;
  line-height : 12px;
  font-family : verdana, arial, sans-serif;
  font-size : 85%;
  color : #000000;
  text-decoration : none;
  }
  

/* Drop shadow classes ------------------------------------------------------*/	

.whttxt	{
	display:		inline;
	position: 		absolute; 
	left: 			0px; 
	top: 			0px; 
	z-index: 		2;
	color:			#eeeeff;
	}

.lavtxt	{
	display:		inline;
	position: 		absolute; 
	left: 			0px; 
	top: 			0px; 
	z-index: 		2;
	color:			#9966cc;
	}

.redtxt	{
	display:		inline;
	position: 		absolute; 
	left: 			0px; 
	top: 			0px; 
	z-index: 		2;
	color:			#cc0000;
	}

.blktxt	{
	display:		inline;
	position: 		absolute; 
	left: 			0px; 
	top: 			0px; 
	z-index: 		2;
	color:			#003366;
	}
		
.ltshdw	{
	display:		inline;
	position: 		absolute; 
	left: 			2px; 
	top: 			1px; 
	color: 			#999999; 
	z-index: 		1;
	}
	
.dkshdw	{
	display:		inline;
	position: 		absolute; 
	left: 			2px; 
	top: 			2px; 
	color: 			#333333; 
	z-index: 		1;
	}


/* Other classes ------------------------------------------------------------------*/

.ch3		{
		font-family:		verdana, Tahoma, Arial, sans-serif;
		font-size:		11px;
		font-weight:		500;
		color:			#000000;
		margin-top:		0em;
		margin-bottom:		0em;
		line-height:		18px;
		position:		relative;
		left:			12px;
		padding:		0;
		}
				
.ch3 h2 {
  font-family : verdana, arial, sans-serif;
  color : #cc0000;
  margin : 0;
  padding : 0 0 6px 0;
  text-align: center;
  }  
	
.ch4		{
		font-family:		verdana, arial, tahoma, sans-serif;
		font-size:		11px;
		font-weight:		500;
		color:			#000000;
		margin-top:		0em;
		margin-bottom:		0em;
		line-height:		36px;
		position:		relative;
		left:			36px;
		vertical-align:		bottom;
		border-top:		#eeeeee solid 0px;
		width:			416px;
		display:		block;
		}
		
.ch4 h2 {
  font-family : verdana, arial, sans-serif;
  color : #993333;
  margin : 0;
  padding : 6px 0 6px 0;
  }  

.choice		{
		font-size:		70%;
		margin-left:		5px;
		margin-right:		5%;
		margin-top:		0em;
		line-height:		12px;
		}

.dwnldTtl	{
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		font-size:		80%;
		font-weight:		900;
		color:			#333333;
		margin-left:		5%;
		margin-right:		5%;
		line-height:		25px;
		}
		
.external	{
		background	:	url(images/externalLink.gif) no-repeat right top;
		padding-right:		10px;
		}

.for		{
		font-size:		75%;
		margin-left:		3%;
		margin-right:		3%;
		margin-top:		0.2em;
		}

.listTblPos	{
		width: 			92.5%; 
		position: 		relative; 
		left: 			0; 
		top: 			10px; 
		text-align: 		left;
		}

.listTblRow	{
		height: 		30px; 
		line-height:	 	12px; 
		vertical-align: 	top;
		}
	
.listTtl	{
		text-align:		left;
		margin:			25px 0 5px 0;
		}
		
.navRowDiv 	{
		width: 			20%; 
		border-left: 		#cc9999 solid 0px;
		}
		
.navTblRow	{	
		height: 		25px; 
		vertical-align: 	middle; 
		text-align: 		center;
		}

.navTtl		{
		margin-left:		1%;
		margin-bottom:		.8em;
		font-size:		80%;
		}
	
.par		{
		margin-top:		2em;
		}

.wm		{
		position:		relative;
		left:			30px;
		line-height:		15px;
		font-style:		italic;
		}
		
#bio-info	{
		position:		relative;
		top:			0px;
		padding:		0;
		margin:			0;
		background:		transparent;
		}
		
#bio-info img	{
 		float: 			right; 
 		margin: 		0px 15px 12px 12px;
 		}
		
#bio-info p	{
		color:			#ffffff;
		font-size:		80%;
		padding:		6px 18px;
		}
		
#bio-info h2	{
		color:			#ffffff;
		padding:		0px 18px;
		}

/* Link Formatting  ------------------------------------------- */

a:link,	a:visited, a.eml:link, a.eml:visited	{
	text-decoration: 	none;
	color: 			#999;
	font-weight: 		500;
	font-size:		12px;
	}

a:hover, a:active		{
	text-decoration: 	underline;
	color:			#999;
	font-weight: 		500;
	font-size:		12px;
	}

a.eml:hover, a.eml:active	{
	text-decoration: 	underline;
	color: 			#fff;
	font-weight: 		500;
	font-size:		12px;
	background:		url(images/emailIcon4.gif) no-repeat right top;
	padding-right:		14px;
	}

		

a.content:link, a.content:visited, a.content:active	{
		text-decoration: 	none;
		color: 			#660000;
		font-weight: 		900;
		}

a.content:hover	{
		text-decoration: 	underline;
		color:			#993333;
		font-weight: 		900;
		}

a.perf:link, a.perf:visited, a.perf:active	{
		text-decoration: 	none;
		color: 			#ffffff;
		font-size:		11px;
		font-family:		arial;
		font-weight:		900;
		}

a.perf:hover	{
		text-decoration: 	underline;
		color:			#ff9999;
		font-size:		11px;
		font-family:		arial;
		font-weight:		900;
		}


.cd		{
		margin:			0;
		padding:		0 0 0 25px;
		}
		
.cd-x		{
		margin:			0;
		padding:		0 5px;
 		color: 			green; 
 		font-variant: 		small-caps;
 		}
	
a.cd:link, a.cd:visited	{
		font-size:		11px;
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		color: 			#000000;
		margin-top:		.2em;
		margin-bottom:		.2em;
		}

a.cd:hover	{
		font-size:		11px;
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		text-decoration: 	underline;
		color:			#000000;
		margin-top:		.2em;
		margin-bottom:		.2em;
		}

a.cd:active	{
		font-size:		11px;
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		color: 			#000000;
		margin-top:		.2em;
		margin-bottom:		.2em;
		}
		
a.cd-x:link, a.cd-x:visited	{
		font-size:		11px;
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		color: 			#000000;
		margin-top:		.2em;
		margin-bottom:		.2em;
 		color: 			green; 
 		font-variant: 		small-caps;
		}

a.cd-x:hover	{
		font-size:		11px;
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		text-decoration: 	underline;
		color:			#000000;
		margin-top:		.2em;
		margin-bottom:		.2em;
 		color: 			green; 
 		font-variant: 		small-caps;
		}

a.cd-x:active	{
		font-size:		11px;
		font-family:		"trebuchet ms", Tahoma, Arial, sans-serif;
		color: 			#000000;
		margin-top:		.2em;
		margin-bottom:		.2em;
 		color: 			green; 
 		font-variant: 		small-caps;
		}

/* -----------------------------------*/

/*
a.perflink:link, a.perflink:visited	{
		}
		
a.perflink:hover, a.perflink:active	{
		background:		#ffc;
		}
*/