/* COMMONSPOT CLASSES */

.cs_pagemode {
	text-align: left;
	position: absolute;
	left: 1px;
	top: 1px;
	z-index:2;
} 

html, body{ 
	 margin:0; 
	 padding:0; 
	 text-align:left; 
	 background-color: #444444;
	 behavior:url("/style/csshover3-source.htc");
} 

html, body, p, td, th, div { 
	 font-family: Arial, Helvetica, sans-serif;
	 font-size:12px;
}

td, th {
	vertical-align:top;
}
 
#pagewidth{ 
	width:970px; 
	text-align:left;  
	margin-left:auto; 
	margin-right:auto; 
	background-image: url(/images/template_images/pagebg.jpg); 
	z-index:20;
} 
 
#header{
	position:relative; 
	height:95px; 
	background-image: url(/images/template_images/TopImage.png);
	width:100%;
	z-index:20;
} 

	#logo {
		float:left;
		height:95px;
	}

	#tagline {
		float: right;
		position: relative;
		top: 39px;
		font-size: 20px;
		font-weight: normal;
		color: #ffffff;	
		text-transform: uppercase;
		padding-right: 25px;
	}
	
	#purplebar {
		background-color: #4f3795;
		width: 725px;
		height: 38px;
		float: right;
		position: relative;
		top: 34px;
		z-index:20;
		}
		
#mainnav {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 22px;	
	width: 720px;
	font-family:Arial,Helvetica;
	font-size: 12px;
	padding-top: 10px;
	padding-right: 5px;
	#padding-left: 55px;
	text-align: right;
	color: white;
	position: relative;
	z-index: 600;
	margin-left: -30px;
	margin-right: auto;
	text-transform: uppercase;
}

#mainnav a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	position: relative;
	z-index: 600;
	text-align: center;
}

#mainnav ul {
	margin: 0px 0px 0px 0px;
	list-style-type: none;
	z-index: 600;
	position: relative;
	}

#mainnav li {
	float: left;
	display: inline;
	padding: 2px 9px;
	z-index: 600;
	position: relative;
	*position: static;
}		

#mainnav li ul { /* second-level lists */ 
	position: absolute;
	width: 700px;
	left: -999em;
	background: #4f3795;
	margin-top: 20px;
	top: 37px;
	float: left;
	z-index: 600;
	text-align: left !important;
	opacity: .90 !important;
	filter: alpha(opacity = 90); !important
	padding-top: 30px;
	padding-bottom: 30px;
	#top: -60px;
	#left: -100px;
	#padding: 40px;
	text-transform: none;         
}

#mainnav li ul a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	position: relative;
	z-index: 600;
	text-align: left;
}

*html #mainnav li ul { 
	position: absolute;
	background: #4f3795;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	display: none;
	width: 720px;
	margin-top: -10px;
	top: 30px;
	float: left;
	z-index: 200;
	text-align: left;
	opacity: .90 !important;
	filter: alpha(opacity = 90); !important
	padding-top: 30px;
	padding-bottom: 40px;
	padding-left: 0;
	#top: -60px;
	#left: -100px;
	#padding: 40px;
	text-transform: none;            
	}

*+html #mainnav li ul { /* IE 7 */
	position: absolute;
	background: #4f3795;
	display: none;
	width: 545px;
	margin-top: 37px;
	margin-left: auto;
	margin-right: auto;
	float: left;
	z-index: 600;
	opacity: .90 !important;
	filter: alpha(opacity = 90); !important
	padding-top: 30px;
	padding-bottom: 30px;
	left: -150px;
	text-transform: none; 
	}

#mainnav li:hover ul, #mainnav li.sfhover ul {
	left: 300px;
	width: 620px;
	*left: -200px;
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	*position: absolute;
	display: block !important;
	#left: 34px;
	top: 63px;
	*top: -17px;
	padding-top: 24px;
	z-index: 800;
	text-align: left;
	/* margin-top: 70px;
	#margin-top: -100px;  
	top: 53px;#
	#top: 0px; */
}	
		
*html #mainnav li:hover ul, #mainnav li.sfhover ul { /* lists nested under hovered list items */
	left: 30%;
	right: 30%;
	width: 545px;
	*left: -200px;
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	*position: absolute;
	display: block !important;
	#left: 34px;
	top: 90px;
	*top: -17px;
	padding-top: 20px;
	z-index: 400;
	text-align: left;
	/* margin-top: 70px;
	#margin-top: -100px;  
	top: 53px;#
	#top: 0px; */
}

*+html #mainnav li:hover ul, #mainnav li.sfhover ul { /* IE 7 */
	left: 30%;
	right: 30%;
	width: 505px;
	*left: -200px;
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	*position: absolute;
	display: block !important;
	#left: 34px;
	top: 90px;
	*top: -17px;
	padding-top: 20px;
	z-index: 400;
	text-align: left;
	/* margin-top: 70px;
	#margin-top: -100px;  
	top: 53px;#
	#top: 0px; */
}	

html>/**/ #mainnav li:hover ul, #mainnav li.sfhover ul { /* IE 8 */
	left: 30%;
	right: 30%;
	width: 505px;
	*left: -200px;
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	*position: absolute;
	display: block !important;
	#left: 34px;
	top: 62px;
	*top: -17px;
	padding-top: 20px;
	z-index: 400;
	text-align: left;
	/* margin-top: 70px;
	#margin-top: -100px;  
	top: 53px;#
	#top: 0px; */
}

#mainnav:first-of-type li:hover ul, #mainnav:first-of-type li.sfhover ul { /* lists nested under hovered list items */ /* safari 3+, chrome 1+, ff 3.5+ */
		position: fixed;
		left: auto;
		right: auto;
		margin-left: auto;
		margin-right: auto;
		display: block;
		left: 320px;
		top: 62px;
		z-index: 300;
		/* top: 57px; */
		}
	
#mainnav ul li ul .section {
	padding-bottom: 0px;
	text-align: left;
	}
	
#mainnav ul li ul li tr {
	text-align: left;
	}		
	
#mainnav ul li ul li tr {
	text-align: left;
	}	
	
#mainnav ul li ul li tr td a {
	padding-bottom: 12px;
	}	
	
		
	
@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#mainnav ul li ul { /* second-level lists */ /* safari 3+, chrome 1+ */
			display: none;
			background: #4f3795;
			width: 545px;
			z-index: 400;
			padding: 23px;
			text-align: left;
			position: relative;
			margin-left: 300px;
			text-transform: none;
			}
		}
	
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#mainnav li:hover ul, #mainnav li.sfhover ul { /* lists nested under hovered list items */ /* safari 3+, chrome 1+ */
		position: absolute;
		display: block;
		left: auto;
		right: auto;
		margin-top: -10px;
		margin-left: auto;
		margin-right: auto;
		z-index: 500;
		text-transform: none;
		margin-top: 24px;
		}	
	}				


	
		
	.searchfield {
		font-size:10px;color:#666;font-style:italic;background-color:#e1c6c0
		}
	
	
#leftcol{
	width:245px; 
	float:left; 
	position:relative; 
	background-color: #a46791;
	padding-bottom:0px;
	padding-top:2px;
	z-index: 9;
 }
 
 	#leftcol ul {
		margin: 0px;
		padding: 0px;
		list-style-type:none;
		color:#FFFFFF;
	}
	
 	#leftcol h2 {
		font-size: 20px;
		color: #fbcdb8;
		padding-left:16px;
		font-weight:normal;
		height:38px;
		margin:0px;
		line-height:38px;
		text-transform:lowercase;
	}

	#leftcol .bodytext {
		font-size: 11px;
		color: white;
		font-weight: normal;
		margin-left: 16px;
		width: 220px;
		}
	
		#leftcol .bodytext a:link, a:visited {
			color: #FFFFFF;
			text-decoration:none;
		}
		
		#leftcol .bodytext a:hover {
			color: #e1c6c0;
			text-decoration:none;
		}
		
		#leftcol .bodytext a:active	{
			color: #e1c6c0;
			text-decoration: none;
		}
	
		#leftcol .bodytext a:visited	{
			color: #dfbfd5;
			text-decoration: none;
		}
	
	#leftcol .bodytextbutton {
		background-color: #FFFFFF;
		line-height:140%;
		font-size: 11px;
		color: white;
		font-weight: normal;
		padding: 6px 6px 6px 6px;		
		}
	
		#leftcol .bodytextbutton a:link, a:visited {
			color: #8d487f;
			text-decoration:none;	
		}
		
		#leftcol .bodytextbutton a:hover {
			text-decoration: none;
			color: #4f3795;
		}
		
		#leftcol .bodytextbutton a:active	{
			text-decoration: none;
			color: #4f3795;
		}
	
		#leftcol .bodytextbutton a:visited	{
			text-decoration: none;
			color: #8d487f;
		}
		
	#leftcol .subhead {
			font-size: 13px;
			color: white;
			padding-left: 16px;
			padding-right: 16px;
			margin-bottom: 8px;
			font-weight: bold;
		}	
		 
		 #leftcol #nowPlaying {
			font-size: 14px;
			color: #fbcdb8;
			padding-left: 16px;
			padding-right: 16px;
			font-weight: bold;
		 }
		 
		  #leftcol #nowPlayingWrapper {
 			width: 210px;
			height: 50px;
 		}
		
		#leftcol .nptitle {
 			padding-bottom: 5px;
 		}
 
		  #leftcol #nowPlayingWrapper .left {
			float: left;
		}

		  #leftcol #nowPlayingWrapper .right {
			float: right;
			width: 150px;
		}
		
		#leftcol #nowPlayingWrapper .right .title a {
			text-decoration: none;
			color: #FFFFFF;
			text-transform: uppercase;
			font-size: 10px;
		}
 

		#leftcol #emLogo {
			padding:8px 16px 16px 16px;
		}
 
 
#maincol{
	float: right; 
	display:inline; 
	position: relative; 
	width:725px; 
	background-color: #e1c6c0;
	z-index:10;
 }
 
 	#maincol h1 {
		background-color: #8d487f;
		height: 38px;
		font-size: 20px;
		line-height:38px;
		color: #fbcdb8;
		text-transform:lowercase;
		padding-left:16px;	
		margin: 0px;
		font-weight: normal;
		z-index:2;
	}
	
	#maincol h2 {
		background-color: #f1d1cc;
		height: 38px;
		font-size: 16px;
		line-height:38px;
		color: #8d487f;
		text-transform:lowercase;
		padding-left:16px;	
		margin: 0px;
		font-weight: normal;
		z-index:2;
	}
		
	#maincol h6 {
		background-color: #8d487f;
		height: 38px;
		font-size: 20px;
		line-height:38px;
		color: #fbcdb8;
		text-transform:lowercase;
		padding-left:16px;	
		margin: 0px;
		font-weight: normal;
	}	
	
	#maincol a {
		color: #8d487f;
		text-decoration: none;
	}
	
	#maincol a:hover {
		color: #4f3795;
		text-decoration: none;
	}
		
	#maincol a:active	{
		text-decoration: none;
		color: #4f3795;
	}
	
	#maincol a:visited	{
		text-decoration: none;
		color: #97698e;
	}	
		
	#maincontent {
		padding:  16px;
	}
	
	#maincontenthome {
	
	}
	
	#share {
		padding-top:15px;
		width:100%;
		clear: both;
	}
	
	.programsFeatureHome {
		width:217px;
		padding-left:16px;
		padding-top: 16px;
		padding-right:8px;
		font-size: 10px;
		text-transform: uppercase;
		font-weight: bold;
		color: #7c3a6e;
		float:left;
	}
	
	.artistFeatureHome {
		width:226px;
		padding-left:8px;
		padding-top: 16px;
		padding-right:8px;
		font-size: 10px;
		text-transform: uppercase;
		font-weight: bold;
		color: #7c3a6e;
		float:left;
	}
	
	.albumsFeatureHome {
		width:217px;
		padding-left:8px;
		padding-top: 16px;
		padding-right:16px;
		font-size: 10px;
		text-transform: uppercase;
		font-weight: bold;
		color: #7c3a6e;
		float:left;
	}
	
	.featureLink {
		font-size:13px;
		font-weight: normal;
		color: #000000;
	}
	
	#newsgallerycontainer {
		position: relative;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		color:#666;
		text-decoration:none;
		height: 360px;
		
		/*Add a height attribute and set to largest image's height to prevent overlaying*/
		}
	
	#newswrapper { 
		margin: 0 auto;
		width: 725px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		color:#666;
		height: 360px;
		background-color:#FFFFFF;
		}
	
	#newsrightcolumn { 
		color: #333;
		background-color: #fff;
		margin: 0px;
		padding: 25px;
		height: 311px;
		width: 183px;
		float: right;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
		color:#666;
		}
		
	#newsrightcolumn .date {
		color: #a46791;
		text-transform: uppercase;
		font-size: 10px;
		text-decoration: none;
		}
		
	#newsrightcolumn .artist {
		color: #8d487f;
		font-size: 16px;
		font-weight: bold;
		text-decoration: none;
		}		
 
#footer{
	font-size:10px;
	width:970px; 
	text-align:center;  
	margin-left:auto; 
	margin-right:auto; 
	padding: 15px;
	color: #BBBBBB;	
 } 
 
 #footer a {
 	text-decoration: none;
	color: #ffffff;
 	}
 

 
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  

 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

* performance wrap-up image gallery */	
	
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer {
	position: relative;
	height: 300px;
	z-index:29;
	/*Add a height attribute and set to largest image's height to prevent overlaying*/
	}
	
.rowwidth {
	width: 400px;
	}	

.thumbnail img {
	margin: 0 5px 5px 0;
	z-index:1;
	}

.thumbnail:hover {
	background-color: transparent;
	z-index:40;
	}

.thumbnail span { /*CSS for enlarged image*/
	font-size: 11px;
	left: -1000px;
	visibility: hidden;
	color: black;
	position: absolute;	
	text-decoration: none;
	z-index:200;
	}

.thumbnail span img { /*CSS for enlarged image*/
	border-width: 0px;
	margin-top: 0px;
	z-index:200;
	}

.thumbnail:hover span { /*CSS for enlarged image*/
	left: 300px; /* position where enlarged image should offset horizontally */
	z-index: 100;
	visibility: visible;
	top: 0px;
	}
	
.caption {
	width: 320px;
	font-size: 11px;
	color: #000000;
	margin-left: 300px;
	margin-top: 23px;
	}
	
	a.tt{
	font-weight:bold;
    color:#3CA3FF;
	z-index:29;
    text-decoration:none;
	position:relative;
}
	a.tt span{ display: none; }
	
	/*background:; ie hack, something must be changed in a for ie to execute it*/
	a.tt:hover{ z-index:40; color: #aaaaff; background:none transparent scroll repeat 0% 0%;}
	a.tt:hover span.tooltip{
		display:block;
		padding: 0px;
		color: #993300;
		border:3px black solid;
		position:absolute;
		top:45px;
		left: 0px;
		text-align: left;
		z-index: 40;
	}
	
.programSched {
	padding:5px;
	font-weight:bold;
	font-style:italic;
	}
	
.programDescription {
	padding:5px;
	}
	
/* page index list styles */
#itemWrapper {
	width: 100%;
}

#itemLeft {
	float: left;
	width: 330px;
	padding-left:5px;
}
#itemRight {
	float:right;
	width: 330px;
	padding-right:5px;
}



/* programs > music page - schedule table */

.day {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 11px;
	color:#000000;
}

.time {
	font-weight: bold;
	color: #000000;	
	font-size: 11px;
}

.revolutions {
	font-weight: normal;
	color: #330066;
	background-color: #e5c2c0;
}

.revolutions a {
	font-weight: bold;
}

.daytime {
	font-weight: normal;
	color: #330066;
	background-color: #f2d9d4;
}

.daytime a {
	font-weight: bold;
}

.youarehere {
	font-weight: normal;
	color: #330066;
	background-color: #cbc0c6;
}

.youarehere a {
	font-weight: bold;
}

.chagigah {
	font-weight: normal;
	color: #330066;
	background-color: #f8ded2;
}

.chagigah a {
	font-weight: bold;
}

.firstchurch {
	font-weight: normal;
	color: #330066;
	background-color: #e5e1e0;
}

.firstchurch a {
	font-weight: bold;
}

.standingroomonly {
	font-weight: normal;
	color: #330066;
	background-color: #f2d2c7;
}

.standingroomonly a {
	font-weight: bold;
}

.allacappella {
	font-weight: normal;
	color: #330066;
	background-color: #b593ae;
}

.allacappella a {
	font-weight: bold;
}

.theplayground {
	font-weight: normal;
	color: #330066;
	background-color: #e5d8d2;
}

.theplayground a {
	font-weight: bold;
}

.thesecretspot {
	font-weight: normal;
	color: #330066;
	background-color: #cca5b7;
}

.thesecretspot a {
	font-weight: bold;
}

.rockers {
	font-weight: normal;
	color: #330066;
	background-color: #f7eeea;
}

.rockers a {
	font-weight: bold;
}

.atnight {
	font-weight: normal;
	color: #330066;
	background-color: #ccc6cb;
}

.atnight a {
	font-weight: bold;
}

.theleftend {
	font-weight: normal;
	color: #330066;
	background-color: #CC9999;
}

.theleftend a {
	font-weight: bold;
}