/*------------------------------------------------------------------------------
Style Sheet for the index page in stephensonmusic.com

version:		1.0
date:			August 16, 2007
author:			Jim Stephenson
email:			kineticjim@stephensonmusic.com
			jim@lockportucc.org  
			jim@kineticjim.com
			sstephenson_lock@hotmail.com
website:		stephensonmusic.com
------------------------------------------------------------------------------*/

#three-col .col2	{
		width:				306px;
		border-right:			#000000 solid 0px;
		background:			#ffffff;
		}
		
.rgt		{
		background:			#ffffff;
		}

#billboard	{
		display:			none;
		border:				#369 ridge 3px;
		float:				left;
		position:			relative;
		top:				310px;
		left:				-465px;
		width:				447px;
		background:			#ffffff;
		height:				120px;
		margin:				0;
		padding:			0;
		z-index:			1;
		}

#billboard p	{
		padding:			10px 10px 0 10px;
		}

/* ---------------------------------- Map styles ---------------------------------- */

#mapro		{
		float:				left;
		position: 			relative;
		top: 				42px;
		left: 				12px;
		width: 				120px;
		height: 			100px;
		border: 			#990000 solid 0px;
		}
		
#mapro img	{
		float: 				left; 
 		right: 				100px;
 		width:				120px;
 		}
 		
#mapro p	{
		font-size:			65%;
		padding:			0 5px 12px 6px;
		line-height:			12px;
		color:				#eeeeff;
		}

#premRoBx	{
  		position: 			relative;
  		top: 				30px;
  		left: 				0px;
  		width: 				260px;
  		height: 			55px;
  		border: 			2px solid navy;
  		background-color:		#ccffff;
  		padding: 			0;
  		margin:				0;
  		font-family: 			'verdana';
  		font-size: 			12px;
  		}

#premRoBx p	{
  		font-size:			14px;
  		padding:			8px;
  		}

#preminfo	{
  		display: 			none;
  		position: 			absolute;
  		top:				20px;
  		left: 				475px;
  		width: 				265px;
   		height: 			500px;
   		border: 			navy solid 2px;
   		background-color: 		#ddffff;
   		padding: 			10px 5px 10px 0px;
   		z-index: 			3;
   		}

#preminfo p	{
  		padding:			10px 8px 7px 8px;
  		}

/* --------------------------------- COLORS styles --------------------------------- */

#colRoBx	{
		float:				left;
  		position:			relative;
  		top: 				96px;
  		left: 				15px;
  		width:				100%;
  		height:				103px;
  		border:				red solid 0px;
  		padding:			0;
  		margin:				0;
  		}
  		
#colRoBx:hover	{
		cursor:				auto;
		}

#colRoBx #cdinfo	{
		cursor:				auto; 
		display:			none;
 		position:			absolute;
 		top:				-300px;
 		left: 				115px;
 		width: 				300px;
   		height: 			425px;
   		border: 			navy solid 2px;
   		background: 			#ffffff;
		font-family: 			'trebuchet ms'; 
		font-size: 			12px;
		z-index:			10;
		margin:				12px;
		}

#colRoBx #cdinfo span.basicPos	{
		position: 			absolute; 
		left: 				13px; 
		top: 				60px;
		}

#colRoBx #cdinfo span.sampleVers	{
		position: 			absolute; 
 		left: 				6px; 
 		top: 				25px; 
 		line-height: 			12px; 
 		width: 				300px;
 		}

#colRoBx:hover #cdinfo	{
		cursor:				auto; 
		display:			inline;
		}
		
#colRoBx div	{
		float:				left;
		font-size: 			25px; 
		font-family: 			'arial narrow'; 
		display: 			block; 
		position: 			relative; 
		left: 				0px; 
		top: 				0px; 
		width: 				130px; 
		border: 			navy solid 0px;
		}
		
#colRoBx div p	{
		font-family: 			'trebuchet ms'; 
 		font-size: 			11px; 
 		line-height: 			12px;
 		color:				#eeeeff;
 		}
 		
#colRoBx img	{
		float:				left;
		}
		
/* --------------------------------------------------------------------------------- */

#newsRoBx	{
		float:				left;
  		position:			absolute;
  		top: 				84px;
  		left: 				148px;
  		width:				296px;
  		height:				42px;
		border-left:			#eeeeee solid 1px;
		border-top:			#eeeeee solid 1px;
  		border-right:			#cccccc solid 2px;
  		border-bottom:			#cccccc solid 2px;
  		padding:			0;
  		margin:				0;
		}
		
#newsRoBx:hover	{
		cursor:				pointer;
		}
		
#newsRoBx #newsPuBx	{
		display:			none;
		cursor:				auto;
		position:			absolute;
		top:				-1px;
		left:				1px;
		width:				298px;
		height:				971px;
		border-left:			#dddddd solid 1px;
		border-top:			#dddddd solid 1px;
  		border-right:			#cccccc solid 2px;
  		border-bottom:			#cccccc solid 2px;
		background:			#ffffff;
		color:				#000000;
		z-index:			10;
		padding:			0 0 0 0px;
		}
		
#newsRoBx #newsPuBx p	{
		padding:			12px 6px 12px 6px;
		font-size:			12px;
		}


#newsRoBx:hover	#newsPuBx	{
		cursor:				pointer;
		display:			inline;
		}	

#newsRoBx h2	{
		border: 			#000000 solid 0px;
		position:			relative;
		font-family: 			georgia, serif;
		font-size: 			18px;
		font-weight:			normal;
		line-height: 			36px;
		margin: 			0 0 0 0px;
		padding: 			0 0 0 0px;	
		}
/*		
#newsRoBx img	{
		position:			absolute;
		margin:				-108px 0 0 247px;
		z-index:			100;
		}
*/		
#premies	{
		position:			relative;
		width:				100%;
		float:				left;
		top:				12px;
		z-index:			auto;
		margin:				0 0 24px 0;
		background:			transparent;
		}
		
					
.grphead	{
		background:			#eeeeee;
		color: 				#000000; 
 		font-variant: 			small-caps;
 		font-weight:			bold;
 		padding:			0 5px;
 		}

/* -------------------------------- Content Banner _______________________________ */

#contentBanner	{
		float:				left;
		position:			relative;
		top: 				0px;
		left:				0px;
		width:				678px;
		background: 			#ffffff;
		font-weight: 			bold;
		text-align: 			left;
		margin:				0;
		padding:			12px 12px 9px 12px;
		z-index:			auto;
		border-bottom:			#333344 solid 4px;
		border-right:			#333344 solid 0px;
		}

#contentBanner p	{
		font-family:			arial;
		color:				#000000;
		font-size:			80%;
		line-height:			14px;
		margin:				6px 0;
		}
		
#contentBanner p.big-first:first-letter	{
		position:			relative;
		float:				left;
		font-size:			300%;
		margin:				0 3px 0 0;
		}
		
p span.col1	{
		color:				#009999;
		background:			transparent;
		letter-spacing:			1px;
		}
		
p span.col2	{
		color:				#999900;
		background:			transparent;
		letter-spacing:			1px;
		}
		
p span.col3	{
		color:				#990099;
		background:			transparent;
		letter-spacing:			1px;
		}

/* -------------------------------- Promo panels -------------------------------- */

.promopanel	{
		float:				left;
		position:			relative;
		left:				0px;
		top:				0px;
		width:				294px;
/*		background:			#ffffff url(images/ichabod.jpg) no-repeat right bottom;	*/
		border-right:			#333344 solid 4px;
		border-bottom:			#333344 solid 4px;
		border-top:			#cccccc solid 0px;
		border-left:			#cccccc solid 0px;
		color:				#000000;
		background:			#ffffff;
		padding:			6px;
		}

.promopanel p	{
		font-family:			arial, verdana, Tahoma, sans-serif;
		font-size:			75%;
		font-weight:			900;
		line-height:			14px;
		margin:				5px 5px 5px 6px;
		}
		
.promopanel p	span	{
		color: 				#f33;
		}
		
.promopanel .ppu	{
		display:			block;
		cursor:				pointer;
		}
		
.promopanel .ppu .promopop	{
		display:			none;
		position:			absolute;
		background:			#ffffff;
		width:				294px;
		border:				#cc00cc solid 3px;
		cursor:				pointer;
		z-index:			100;
		margin:				-6px 0 0 -3px;
		}
		
.promopanel .ppu:hover .promopop	{
		display:			block;
		cursor:				pointer;
		}

.promopanel .ppu:hover .promopop li	{
		line-height:			16px;
		}
		
.promopanel .ppu:hover .promopop p	{
		margin:				6px 6px 9px 6px;
		}

.promopanel .cytitle	{
		font-size:			120%;
		font-style:			normal;
		}

.promopanel h3 	{
		font-family:			verdana, Tahoma, Arial, sans-serif;
		font-size:			14px;
		font-weight:			bold;
		line-height:			12px;
		margin:				5px 5px 5px 6px;
		padding:			0px 0 6px 0px;
		color:				#000000;
		text-align:			left;
		}

.promopanel h4	{
		font-family:			"trebuchet ms", Tahoma, Arial, sans-serif;
		font-size:			13px;
		font-weight:			bold;
		line-height:			15px;
		margin:				6px 2px 6px 9px;
		color:				#000000;
		}
		
.promopanel h4 span	{
		font-style:			italic;
		}
		
.promopanel ul	{
		position:			relative;
		top:				-6px;
		}
		
.promopanel li	{
		font-family:			verdana, serif;
		position:			relative;
		line-height:			12px;
		left:				36px;
		font-size:			11px;
		}
		
.promopanel img.headless	{
		float:				left;
		margin:				-1px 4px 0px 0px;
		z-index:			1;
		}
		
.promopanel img.ichabod	{
		float:				right;
		margin:				-62px 0px -27px 0px;
		}


.stuff		{
		display:			block;
		}

.promopanel span.col1	{
		color:				#0099cc;
		background:			transparent;
		letter-spacing:			1px;
		}
		
.promopanel span.col2	{
		color:				#cc9900;
		background:			transparent;
		letter-spacing:			1px;
		}
		
.promopanel span.col3	{
		color:				#cc00cc;
		background:			transparent;
		letter-spacing:			1px;
		}

/* -------------------------------- Various classes -------------------------------- */


.crrntev	{
		float:				left;
		position:			relative;
		margin:				5px 0 0 0;
		padding:			0;
		width:				270px;
		height:				80px;
		background:			transparent;
		border:				#666 solid 0px;
		font-size:			12px;
		list-style:			none;
		}

.crrntev p	{
		padding:			0 0 0 7px;
		margin:				0;
		line-height:			13px;
		}

.ttl		{
		display:			inline;
		color:				#333399;
		font-weight:			900;
		font-size:			100%;
		}

.prf		{
		font-size:			11px;
		color:				#933;
		}

.cnd		{
		font-size:			11px;
		}

.lcn		{
		font-size:			11px;
		}

.premicon	{
		float:				right;
		}

.premiconnew	{
		background:			url("graphics/icons/premiere3.gif") no-repeat 210px 10px;
		z-index:			auto;
		}

a.hpnews:hover	{
		border-color:			#f00;
		}

.lesswidth	{
		float: 				right;
		width: 				150px;
		position: 			relative;
		top: 				0px;
		}

/* --------------------------------- content1 styles --------------------------------- */
		
#three-col #content1	{
		border:				#ffff00 solid 0px;
		width:				100%;
		display:			inline;
		float:				left;
		margin:				166px 0 0 0;
		background:			transparent;
		}

#three-col #content1 h2	{
		}
	
#three-col #content1 h2:first-letter {
		z-index: 			5;
		float: 				left;
		top: 				10px;
		font-size: 			240%;
		margin:				5px 0px 0px 0px;
		padding: 			0 0 0px 0;
		color: 				orange; 
		}

#three-col #content1 #premies ul	{
  		position:			relative;
  		top:				-9px;
  		margin:				0px;
  		padding:			0;
  		list-style:			none;
  		font-size:			14px;
  		left:				0;
  		z-index:			1;
  		border:				#0000ff solid 0px;
  		width:				100%;
		background:			transparent;
  		}

#three-col #content1 #premies li	{
		display:			block;
		position:			relative;
		background:			transparent;
		width:				100%;
  		line-height:			14px;
  		margin:				0;
  		padding:	  		6px 0px 6px 0px;
  		font-family:			verdana, serif;
		font-size:			100%;
  		font-weight:			normal;
		background:			transparent;
		color:				#000000;
  		}
					
					
#three-col #content1 #premies li p	{
		font-family:			arial, verdana;
		font-size:			85%;
		margin: 			0 12px;
		font-weight:			900;
		}
		
#three-col #content1 #premies li p.first-letter	{
		font-size:			200%;
		}

		
#three-col #content1 #premies li p.hearthis	{
		color:				#009999;
		}


#three-col #content1 #premies li:hover	{	
		display:			block;
		position:			relative;
		background:			transparent;
		color:				#000000;
		cursor:				pointer;
		text-decoration:		none;	
		width:				100%;
		}
		
#three-col #content1 #premies li h4	{
		font-family:			arial, verdana;
		font-size:			110%;
		margin: 			12px 12px 6px 12px;
		font-weight:			900;
		color:				#990099;
		}

		
p.pique		{
		color:				#000000;
		font-weight:			900;
		}
	
/* ------------------------------ nws popup styles --------------------------------- */

#three-col #content1 #premies li div.nws		{	
		background-image:		url('graphics/rednotes.gif');
		background-repeat:		no-repeat;
		background-position:		7px center;
		display:			none;		
		position:			absolute;
		width:				380px;
		height:				60%;
		float:				left;
		left:				-6px;
		top:				6px;
		z-index:			100;
		font-size:			14px;
		font-weight:			bold;
		border:				#999999 solid 0px;
		cursor:				pointer;
		padding:			 0px;
		}
		
#three-col #content1 #premies li:hover div.nws	{	
		display: 			block;
		}


#three-col #content1 #premies li:hover div.nws p {
		padding: 			6px 12px;
		color:				#000000;
		background:			#ffffff;
		}
		
#three-col #content1 #premies div.nws div.nws-2	{
		position:			relative;
		top:				-30px;
		left:				-318px;
		width:				330px;
		color:				#000000;
		background:			#ffffff;
		display:			none;
		border:				#999999 solid 2px;
		border-bottom:			#999999 solid 3px;
		border-right:			#999999 solid 3px;
		padding:			6px 0;
		margin:				0;
		}

#three-col #content1 #premies div.nws:hover div.nws-2	{
		position:			relative;
		display:			block;
		cursor:				pointer;
		}

#three-col #content1 #premies div.nws:hover div.nws-2 p	{
		padding:			6px 6px 0 9px;
		margin:				0 6px 0 0;;
		}
		
#three-col #content1 #premies div.nws:hover div.nws-2 div.nws-3	{
		position:			relative;
		top:				0;
		display:			none;
		width:				100%;
		background:			#ffffff;
		border:				#999999 solid 2px;
		border-bottom:			#999999 solid 3px;
		border-right:			#999999 solid 3px;
		padding:			6px 0;
		margin:				6px 0 0 18px;
		}
		
#three-col #content1 #premies div.nws:hover div.nws-2:hover div.nws-3	{
		position:			relative;
		display:			block;
		cursor:				pointer;
		}
		
#three-col #content1 #premies div.nws:hover div.nws-2:hover div.nws-3 p.top-mgn	{
		margin:				6px 0 0 0;
		}

#three-col #content1 #premies div.nws:hover div.nws-2:hover div.nws-3 p span.new-clr	{
		color:				#0099cc;
		}

/*		
#three-col #content1 #premies li .daytude h4:hover div.nws 	{
		position:			relative;
		display:			block;
		cursor:				pointer;
		}
*/
#three-col #content1 #premies li .daytude p	{
		padding:			2px 0;
		}
		
#three-col #content1 #premies li .daytude h4	{
		line-height:			16px;
		}

#content1 li div.nws p img {
		z-index: 			5;
		float: 				left;
		width: 				102%;
		margin: 			5px 5px 5px 0; 
		}
		
#three-col #content1 #now ul	{
		position:			relative;
		width:				100%;
		top:				0px;
		height:				100px;
		background:			transparent;
		border:				#999999 solid 1px;
		padding:			0;
		margin:				0;
		}

#three-col #content1 #now ul li	{
		}

#content1 li span.noright {
		display: 			none;
		background: 			transparent;
		font-size: 			14px;
		position: 			absolute;
		left: 				390px;
		top:				-600px;
		width:				312px;
		height: 			1150px;
		z-index: 			1;	
		}

#content1 li:hover span.noright {	
		display: 			block;	
		}

#content1 div.iebugs 	{
		position: 			relative;
		top:				12px;
		border:				#000099 solid 1px;
		background:			transparent;
		width:				371px;
		font-size:			60%;
		margin:				0 0 0 10px;
		padding:			3px 0 0 6px;
		line-height:			13px;
		color:				#000000;
		height:				43px;
		}
	
#content1 div.iebugs p	{
		font-size:			110%;
		}

			
#content1 div.iebugs p span	{
		color:				#990000;
		}
			
#content1 div.iebugs span.it	{
		font-style:			italic;
		}

#content1 div.iebugs a	{
		color:				#00cc33;
		font-weight:			900;
		}
	
.now		{
		color:				#990000;
		font-weight:			900;
		}

#content2	{
		border:				green solid 0px;
		width:				306px;
		display:			inline;
		float:				left;
		margin:				0 0 20px 0px;
		height:				720px;
		background:			#333344;
		}

#content2 #flashPlayer object	{
		position: 			relative;
		top: 				14px;
		left: 				87px;
		z-index: 			100;	
		}
	
#content2 #flashPlayer-2 object	{
		position: 			relative;
		top: 				14px;
		left: 				87px;
		z-index: 			100;	
		}

#testbox	{
		position: relative;
		float: 				left;
		width: 				116px;
		height: 			50px;
		border: 			#eeeeff solid 1px;
		background:  			#333344;
		top: 				174px;
		left: 				15px;
		z-index: 			100;
		}
	
#testbox:hover	{
		background:			#555566;
		}
			
#testbox h3	{
		font-size: 			100%;
		line-height: 			12px;
		color: 				#eeeeff;
		margin: 			0;
		padding: 			4px 0 0 0;
		text-align:  			center;
		}

#testbox:hover h3	{
		color:				#ffcc00;
		}
	
#testbox p	{
		line-height: 			12px;
		}
		
/* ------------------------------------ h5 styles ----------------------------------- */

h5		{
		font-family:			verdana, Tahoma, Arial, sans-serif;
		font-size:			140%;
		font-weight:			900;
		color:				#000000;
		font-variant:			normal;
		letter-spacing:			0px;
		margin:				0;
		background:			transparent;
		}
		
h5 span		{
		font-size:			100%;
		color:				#3333cc;
		font-weight:			900;
		font-style:			normal;
		}
		
#three-col #content1 .now h5	{
		font-family:			georgia, "times roman";
		font-size:			135%;
		font-style:			normal;
		padding:			0;
		margin:				24px 0 0 12px;
		letter-spacing:			0px;
		}

#three-col #content1 .now h5 span	{
		padding:			0;
		color:				#0000ff;
		font-size:			100%;
		font-style:			normal;
		}

#content1 #premies h5	{
		z-index:			auto;
		padding:			0px 0 6px 12px;
		font-variant:			small-caps;
		}
		
#content1 #premies hr	{
		width:				50%;
		text-align:			center;
		margin:				9px auto;
		padding:			0;
		}
		
.crrntev h3, .crrntev h4, .crrntev h5	{
		padding:			5px 7px 0 12px;
		margin:				0;
		}

#content1 h5	{
		padding:			12px 0 6px 0px;
		z-index:			1;
		}
		
/* ------------------------- Additional COLORS cd styles -------------------------- */
		
.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.indexlink:link, a.indexlink:visited, a.indexlink:active	{
		text-decoration: 		none;
		color: 				#993333;
		font-weight: 			900;
		font-size:			100%;
		}

a.indexlink:hover	{
		text-decoration: 		underline;
		color:				#cc0033;
		}