/*------------------------------------------------------------------------------
Style Sheet for the KineticJim 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.kineticjim.com
------------------------------------------------------------------------------*/




/* Layout ID's --------------------------------------------------------------*/
		
		
#topNav		{
		background:		transparent;
		position:		relative;
		width:			100%;
		height:			24px;
		font-family:		"trebuchet ms",arial,sans-serif;
		letter-spacing:		0px;
		}
		
#topNav ul	{
		float:			left;
		background:		#cc3399;
		width:			100%;
		margin:			0;
		padding:		0;
		list-style:		none;
		}
		
#topNav ul li	{
		float:			left;
		background:		transparent;
  		margin:			0;
  		padding:		0 1em;
  		font-weight:		bold;
		}
		
#topNav ul li a	{
		display:		block;
		float:			left;
		background: 		transparent;
		padding:		0 1.5em;
		color:			#333333;
		line-height:		24px;
		text-decoration:	none;
		}
		
#topNav ul a:hover  {
		color:			#eeeeff;
		}
		
#topNav .sel a	{
		color:			#fc0;
		}
		
#topNav ul .first a {
		background: 		none;
		}
		
#contentBanner	{
		z-index:		1;
		background:		#cc3366;
		position:		relative;
		top:			0px;
		width:			100%;
		font-family:		"trebuchet ms",arial,"san serif";
		line-height:		25px;
		text-align:		right;
		border:			0px solid rgb(237,28,36);
		}
		
#contentBanner h1 {
		display:		inline;
		padding:		0em 18px 0em 0em;
		color:			#000000;
		font-size:		18px;
		font-weight:		500;
		letter-spacing:		3px;
		border:			transparent solid 1px;
		}

#atag-nav	{
		position:		relative;
		left:			0px;
		top:			0px;
		width:			100%;
		background:		transparent;
		border:			0px solid #993366;
		}
		
#atag-nav h3	{
		font-family:		verdana, "trebuchet ms",arial,"san serif";
		font-weight:		bold;
		}

#atag-nav h4	{
		font-family:		verdana, "trebuchet ms",arial,"san serif";
		font-weight:		bold;
		}
		
#atag-nav ul	{
		font-family:		"trebuchet ms",arial,"san serif";
		font-size:		12px;
		line-height:		20px;
		padding:		15px 0px 15px 30px;
		letter-spacing:		1px;
		}		
				
.sel 		{
		background:		#ffffff;
		}
		
.photo		{
		float:			right;
		position:		relative;
		margin:			0px -230px 18px 18px;
		}
		
.photo270		{
		float:			right;
		position:		relative;
		margin:			0px -230px 18px 18px;
		width:			270px;
		}
		
.photoleft		{
		float:			left;
		margin:			12px 18px 18px 18px;
		width:			270px;
		}
	
#pre1930	{
		background:		#99cc33;
		position:		relative;
		left:			12.5%;
		top:			0px;
		width:			75%;
		height:			100px;
		border:			0px solid rgb(237,28,36);
		border-right:		black solid 1px;
		border-left:		#ffffff solid 1px;
		border-top:		#ffffff solid 1px;
		}

#x30s		{
		background:		#cccc00;
		position:		relative;
		left:			10%;
		top:			26px;
		width:			65%;
		height:			100px;		
		border:			0px solid rgb(237,28,36);
		border-right:		black solid 1px;
		border-left:		#ffff99 solid 1px;
		border-top:		#ffffff solid 1px;
		}

#x40s		{
		background:		#666666;
		position:		relative;
		left:			10%;
		top:			0px;
		width:			65%;
		height:			200px;		
		border:			#ff2222 solid 0px;
		border-right:		#000000 solid 1px;
		border-left:		#999999 solid 1px;
		}

#x50s		{
		background:		#ccffff;
		position:		relative;
		left:			10%;
		top:			0px;
		width:			65%;
		height:			200px;		
		border:			0 solid #ff0033;
		border-right:		#000000 solid 1px;
		border-left:		#ffffff solid 1px;
		}

#x60s		{
		background:		#cc9933;
		position:		relative;
		left:			10%;
		top:			0px;
		width:			65%;
		height:			200px;		
		border:			0px solid rgb(237,28,36);
		border-right:		#000000 solid 1px;
		border-left:		#ffcc66 solid 1px;
		}

#x70s		{
		background:		#666699;
		position:		relative;
		left:			10%;
		top:			0px;
		width:			65%;
		height:			200px;		
		border:			0px solid rgb(237,28,36);
		border-right:		#000000 solid 1px;
		border-left:		#9999cc solid 1px;
		}

#x80s		{
		background:		#ccccff;
		position:		relative;
		left:			10%;
		top:			0px;
		width:			65%;
		height:			200px;		
		border:			0px solid rgb(237,28,36);
		border-right:		#000000 solid 1px;
		border-left:		#ffffff solid 1px;
		}

#x90s		{
		background:		#ff3366;
		position:		relative;
		left:			10%;
		top:			0px;
		width:			65%;
		height:			200px;		
		border:			0px solid rgb(237,28,36);
		border-right:		#000000 solid 1px;
		border-left:		#ff6699 solid 1px;
		}

#x00s		{
		background:		#3399cc;
		position:		relative;
		left:			10%;
		top:			0px;
		width:			65%;
		height:			200px;		
		border:			0px solid rgb(237,28,36);
		border-right:		#000000 solid 1px;
		border-left:		#66ccff solid 1px;
		}
		
#x10s		{
		background:		#3399cc;
		position:		relative;
		left:			10%;
		top:			0px;
		width:			65%;
		height:			200px;		
		border:			0px solid rgb(237,28,36);
		border-right:		#000000 solid 1px;
		border-left:		#66ccff solid 1px;
		}
		
#x20s		{
		background:		#3399cc;
		position:		relative;
		left:			10%;
		top:			0px;
		width:			65%;
		height:			200px;		
		border:			0px solid rgb(237,28,36);
		border-right:		#000000 solid 1px;
		border-left:		#66ccff solid 1px;
		}
		
#x030s		{
		background:		#3399cc;
		position:		relative;
		left:			10%;
		top:			0px;
		width:			65%;
		height:			120px;		
		border:			0px solid rgb(237,28,36);
		border-right:		#000000 solid 1px;
		border-left:		#66ccff solid 1px;
		}
		
#x30s p, #x40s p, #x50s p, #x60s p, #x70s p, #x80s p, #x90s p, #x00s p, #x10s p, #x20s p, #x030s p
		{
		z-index:		5;
		position:		relative;
		left:			104px;
		top:			-15px;
		font-size:		12px;
		font-weight:		bold;
		}

#x36 p		{
		z-index:		5;
		position:		relative;
		left:			122px;
		top:			-15px;
		font-size:		12px;
		font-weight:		bold;
		}

#parfam		{
		z-index:		2;
		background:		#cccccc;
		position:		absolute;
		left:			18px;
		top:			-10px;
		width:			106px;
		height:			45px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ffffff solid 1px;
		border-top:		#ffffff solid 1px;
		}
		
a #parfam p 	{
		font-size:		80%;
		color: 			black;
		line-height: 		12px; 
		padding: 		10px 0px 10px 7px;
		margin:			0;
		text-align:		left;
		}
		
a:hover #parfam p 	{
		background:		#ffffcc;
		cursor:			pointer;
		}

#navinfo	{
		z-index:		2;
		background:		#cccccc;
		position:		absolute;
		left:			18px;
		top:			66px;
		width:			106px;
		height:			56px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ffffff solid 1px;
		border-top:		#ffffff solid 1px;
		}

#navinfo p	{
		font-size:		80%;
 		line-height: 		12px; 
 		padding: 		5px 5px 4px 7px;
 		}

.tltitle	{
		display: 		none; 
		z-index: 		5;
		background:		transparent;
		position: 		absolute; 
		left: 			15px;
		top: 			-1px; 
		width:			130px;
		color: 			#000000;
		font-size: 		15px; 
		line-height:		20px;
		text-align:		left;
		vertical-align:		top;
		padding:		5px;
		}
				
#churchchoir	{
		background:		#cccccc;
		position:		absolute;
		left:			78px;
		top:			693px;
		width:			15px;
		height:			155px;		
		border:			0px solid rgb(237,28,36);
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ffffff solid 1px;
		border-top:		#ffffff solid 1px;
		font-size:		0px;		
		}

#gradeschool	{
		z-index:		5;
		background:		#66cc99;
		position:		absolute;
		left:			30px;
		top:			153px;
		width:			15px;
		height:			155px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#99ff99 solid 1px;
		border-top:		#99ff99 solid 1px;
		}
		
#gradeschool .tltitle	{
		color:			#ffffff;
		}

#lths		{
		z-index:		5;
		background:		#990066;
		position:		absolute;
		left:			30px;
		top:			313px;
		width:			15px;
		height:			75px;
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#cc3399 solid 1px;
		border-top:		#cc3399 solid 1px;
		}

#jjc		{
		z-index:		5;
		background:		#9999cc;
		position:		absolute;
		left:			30px;
		top:			393px;
		width:			15px;
		height:			35px;
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ccccff solid 1px;
		border-top:		#ccccff solid 1px;
		}

#purdue		{
		z-index:		5;
		background:		#ffcc00;
		position:		absolute;
		left:			30px;
		top:			433px;
		width:			15px;
		height:			55px;
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ffff33 solid 1px;
		border-top:		#ffff33 solid 1px;
		}

#california	{
		z-index:		5;
		background:		#cc0033;
		position:		absolute;
		left:			30px;
		top:			490px;
		width:			15px;
		height:			35px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ff3366 solid 1px;
		border-top:		#ff3366 solid 1px;
		}

#argonne	{
		z-index:		5;
		background:		#009900;
		position:		absolute;
		left:			30px;
		top:			527px;
		width:			15px;
		height:			157px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#33cc33 solid 1px;
		border-top:		#33cc33 solid 1px;
		}

#fermilab	{
		z-index:		5;
		background:		#3333cc;
		position:		absolute;
		left:			30px;
		top:			683px;
		width:			15px;
		height:			43px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#6666ff solid 1px;
		border-top:		#6666ff solid 1px;
		}

#kineticsystems	{
		z-index:		5;
		background:		#cc0000;
		position:		absolute;
		left:			30px;
		top:			720px;
		width:			15px;
		height:			574px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ff3333 solid 1px;
		border-top:		#ff3333 solid 1px;
		}

#drake		{
		z-index:		5;
		background:		#000000;
		position:		absolute;
		left:			32px;
		top:			368px;
		width:			11px;
		height:			5px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#333333 solid 1px;
		border-top:		#333333 solid 1px;
		}

#caterpillar	{
		z-index:		5;
		background:		#000000;
		position:		absolute;
		left:			32px;
		top:			428px;
		width:			11px;
		height:			5px;		
		border-right:		black 1px;
		border-bottom:		black 1px;
		border-left:		#333333 solid 1px;
		border-top:		#333333 solid 1px;
		}

#hammond	{
		z-index:		5;
		background:		#000000;
		position:		absolute;
		left:			32px;
		top:			448px;
		width:			11px;
		height:			5px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#333333 solid 1px;
		border-top:		#333333 solid 1px;
		}

#lessons	{
		z-index:		4;
		background:		#cccccc;
		position:		absolute;
		left:			55px;
		top:			193px;
		width:			15px;
		height:			205px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ffffff solid 1px;
		border-top:		#ffffff solid 1px;
		}
		
#lessons .tltitle	{
		color:			#ffffff;
		}
		
#swingband	{
		z-index:		1;
		background:		#cccccc;
		position:		absolute;
		left:			78px;
		top:			353px;
		width:			15px;
		height:			80px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ffffff solid 1px;
		border-top:		#ffffff solid 1px;
		}

#fredmitchell	{
		z-index:		5;
		background:		#cccccc;
		position:		absolute;
		left:			78px;
		top:			445px;
		width:			15px;
		height:			43px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ffffff solid 1px;
		border-top:		#ffffff solid 1px;
		}

#locheorgan	{
		z-index:		5;
		background:		#cccccc;
		position:		absolute;
		left:			78px;
		top:			590px;
		width:			15px;
		height:			87px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ffffff solid 1px;
		border-top:		#ffffff solid 1px;
		}


#prismproject	{
		z-index:		5;
		background:		#cccccc;
		position:		absolute;
		left:			55px;
		top:			867px;
		width:			15px;
		height:			100px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ffffff solid 1px;
		border-top:		#ffffff solid 1px;
		}

#interlochen1	{
		z-index:		5;
		background:		#cccccc;
		position:		absolute;
		left:			78px;
		top:			870px;
		width:			15px;
		height:			157px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ffffff solid 1px;
		border-top:		#ffffff solid 1px;
		}

#interlochen2	{
		z-index:		5;
		background:		#cccccc;
		position:		absolute;
		left:			78px;
		top:			1288px;
		width:			15px;
		height:			123px;		
		border-right:		black solid 1px;
		border-bottom:		black solid 1px;
		border-left:		#ffffff solid 1px;
		border-top:		#ffffff solid 1px;
		}

/* ------- Mouseout colors ------- */

a:link #lessons, a:visited #lessons, a:active #lessons 			{background:		#cccccc;}
		
a:link #gradeschool, a:visited #gradeschool, a:active #gradeschool 	{background:		#66cc99;}

a:link #lths, a:visited #lths, a:active #lths 				{background:		#990066;}

a:link #drake, a:visited #drake, a:active #drake 			{background:		#000000;}

a:link #jjc, a:visited #jjc, a:active #jjc 				{background:		#9999cc;}

a:link #caterpillar, a:visited #caterpillar, a:active #caterpillar 	{background:		#000000;}

a:link #purdue, a:visited #purdue, a:active #purdue 			{background:		#ffcc00;}

a:link #hammond, a:visited #hammond, a:active #hammond 			{background:		#000000;}

a:link #california, a:visited #california, a:active #california 	{background:		#cc0033;}

a:link #argonne, a:visited #argonne, a:active #argonne 			{background:		#009900;}

a:link #fermilab, a:visited #fermilab, a:active #fermilab 		{background:		#0000cc;}

a:link #kineticsystems, a:visited #kineticsystems, a:active #kineticsystems 	{background:		#cc0000;}

a:link #swingband, a:visited #swingband, a:active #swingband,
a:link #fredmitchell, a:visited #fredmitchell, a:active #fredmitchell,
a:link #locheorgan, a:visited #locheorgan, a:active #locheorgan,
a:link #churchchoir, a:visited #churchchoir, a:active #churchchoir,
a:link #prismproject, a:visited #prismproject, a:active #prismproject,
a:link #interlochen1, a:visited #interlochen1, a:active #interlochen1,
a:link #interlochen2, a:visited #interlochen2, a:active #interlochen2 	{background:		#cccccc;}

/* ------- Mouseover colors ------- */

a:hover #lessons 	{background:		#ffffcc;}
		
a:hover #gradeschool 	{background:		#99ff99;}
		
a:hover #lths 		{background:		#ff66cc;}
		
a:hover #drake 		{background:		#666666;}
		
a:hover #jjc 		{background:		#ccccff;}
		
a:hover #caterpillar 	{background:		#666666;}
		
a:hover #purdue 	{background:		#ffff33;}
		
a:hover #hammond 	{background:		#666666;}
		
a:hover #california 	{background:		#ff3300;}
		
a:hover #argonne 	{background:		#66ff33;}
		
a:hover #fermilab 	{background:		#6666ff;}
		
a:hover #kineticsystems {background:		#ff3300;}
		
a:hover #swingband, a:hover #fredmitchell, a:hover #locheorgan, a:hover #churchchoir,
a:hover #prismproject, a:hover #interlochen1, a:hover #interlochen2	{
			background:		#ffffcc;}
		
/* ------- Link title reveal ------- */

a:hover #lessons .tltitle, a:hover #gradeschool .tltitle, a:hover #lths .tltitle, a:hover #drake .tltitle,	
a:hover #jjc .tltitle, a:hover #caterpillar .tltitle, a:hover #purdue .tltitle, a:hover #hammond .tltitle,	
a:hover #california .tltitle, a:hover #argonne .tltitle, a:hover #fermilab .tltitle, a:hover #kineticsystems .tltitle,	
a:hover #swingband .tltitle, a:hover #fredmitchell .tltitle, a:hover #locheorgan .tltitle, a:hover #churchchoir .tltitle,	
a:hover #prismproject .tltitle, a:hover #interlochen1 .tltitle, a:hover #interlochen2 .tltitle	{
			display:		inline;
			padding:		0 0 0 5px;}	

/* ------- End of link title reveal ------- */

#decades	{
		z-index:		5;
		background:		transparent;
		position:		absolute;
		left:			117px;
		top:			0px;
		}
		
#decades ul li	{
		position:		relative;
		top:			-292px;
		margin:			184px 0;
		border:			#000000 solid 0px;
		}

.tlpic	{
		display: 		none; 
		z-index: 		200;
		background:		#333333;
		position: 		absolute; 
		left: 			110px;
		top: 			10px; 
		width:			130px;
		color: 			white;
		font-size: 		15px; 
		line-height:		20px;
		text-align:		center;
		vertical-align:		top;
		border:			5px ridge silver;
		}
		
.clipping	{
		position:		relative;
		top:			100px;
		background:		#cccc99;
		position:		relative;
		left:			15px;
		width: 			150px;
		padding:		0;
		color: 			black;
		}
		
.clipping p	{
		padding:		3px 5px;
		text-align:		justify;
		}
		
.clipping h3	{
		padding:		5px;
		margin:			0;
		font-size:		15px;
		}
		
.clipping h4	{
		padding:		5px 5px 0px 5px;
		margin:			0;
		font-size:		12px;
		font-weight:		bold;
		text-align:		center;
		}
		
.img-rt		{
		float:			right;
		}
		
/* Link formatting ----------------------------------------------------------*/

a:link, a:visited		{
	color: 			#ccccff;
	text-decoration: 	none;
	font-weight: 		900;
	font-size:		100%;
		}

a:hover, a:active	{
	color:			#ffffff;
	text-decoration: 	none;
	font-weight: 		900;
	font-size:		100%;
		}
	
/* -----------------------------------*/

A.nav3:link, A.nav3:visited, A.nav3:active	{
	margin-top:		.2em;
	margin-bottom:		.2em;
	color: 			#000000;
	font-family:		"trebuchet ms", Tahoma, Arial, "sans serif";
	font-variant:		small-caps;
	font-weight: 		800;
	text-decoration: 	none;
		}

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

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

a.content,
a.content-y:link, a.content-y:visited, a.content-y:active,
a.content-g:link, a.content-g:visited, a.content-g:active	{
	font-family:		verdana, Tahoma, Arial, "sans serif";
	font-size:		100%;
	font-weight: 		normal;
	text-decoration: 	none;
		}
		
a.content	{
	color: 			#cc0000;
	}

a.content-y	{
	color: 			#cccc00;
	}

a.content-g	{
	color: 			#00cc00;
	}

a.content:hover, a.content-y:hover, a.content-g:hover	{
	text-decoration: 	underline;
	cursor:			pointer;
	}

a.content:hover	{
	color:			#ff3333;
	}
	
a.content-y:hover	{
	color:			#ffff33;
	}
	
a.content-g:hover	{
	color:			#33ff33;
	}

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

A.perf:link, A.perf:visited, A.perf:active	{
	color: 			#000000;
	font-family:		"trebuchet ms",Tahoma, Arial, "sans serif";
	font-size:		13px;
	font-weight: 		900;
	text-decoration: 	none;
	letter-spacing:		1px;
		}

A.perf:hover	{
	color:			#990000;
	font-family:		"trebuchet ms",Tahoma, Arial, "sans serif";
	font-size:		13px;
	font-weight: 		900;
	text-decoration: 	none;
	letter-spacing:		1px;
		}
	
.selected	{
	display:		block;
	background:		#ffffff;
	width:			100%;
	margin:			0 0 0 -5px;
	padding:		0 0 0 5px;
	color:			#990000;
		}