@charset "utf-8";
/* CSS Document */
body
{
	background-image: url(http://www.chulavistaacademyofmusic.com/images/bg/bg4.gif);	
	background-repeat: repeat-x;
font: 62.5%/1.5 Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
color: #333;
min-height: 100%;
-webkit-font-smoothing: antialiased;	
}
.big{font-size: 150%;
	font-weight: bold;}
    html,body {width:100%; height:100%;margin:0px; padding:0px;}	
	body {overflow-y: scroll;}
.bigger{font-size: 200%;}
.nowrap{white-space:nowrap;}
/*Float clearing, used on twice front page below #heading, but could be anywhere*/
div.clearer 
{
	clear: both; 
	line-height: 0; 
	height: 0;
}

.highlightBl{ color: white; text-shadow: 0 0 0.2em #0094FF, 0 0 0.2em #0094FF, 0 0 0.2em #0094FF;}
.highlightVl{ color: #ff47cd; text-shadow: 0 0 0.4em #aa0088, 0 0 0.4em #aa0088, 0 0 0.4em #aa0088;}
.highlightGr{color:#bbff55; text-shadow: 0 0 0.4em #586e3e, 0 0 0.4em #586e3e, 0 0 0.4em #586e3e;}
.highlightRd{color: #ff4747; text-shadow: 0 0 0.4em #aa1100, 0 0 0.4em #aa1100, 0 0 0.4em #aa1100;}

/*Central div that holds all content*/
#container
{
	position: relative;
	/*width: 770px;*/
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	background: white;
}

/*The branding bar always across the top, containing the scroller and the company name*/
#heading
{
	height: 130px;
	width: auto;
	overflow: hidden;
	/*background-color, background-image, background-repeat, background-attachment, and background-position*/
	background: url(../images/BannerRep.jpg) repeat-x 500px 0px;
}

/*The AoMD banner always on top*/
#heading h1 
	{
		margin: 0;
		padding: 0;
		font-size: 1px;
		height: 130px;

		text-indent: -2000px;
		background-image: url(../images/BannerJun.jpg);
		background-repeat: no-repeat;
		background-position: left;
		width: 500px; /*width of the banner image*/
		float:left;
	}

/*The scrolling flash slideshow always on top*/
#flashcontent
	{
		width: 270px;	
		float: right;
	}

/* Floating transparent kids image, always on top. Don't mess with this too much */
#kids
{
	height: 182px;
	heigh\t: 180px;
	width: 220px;
	position: absolute;
	left: 0px;
	top: 100px;
	z-index: 1;
	border-bottom-width: 2px;
	border-bottom-style: double
}

/*Blue bar extending across under the header. Still part of #heading*/
#slogan
{
	height: 23px;
	border-top-color: #333333;
	border-top-width: 2px;
	border-top-style: groove;
	border-bottom-color: #333333;
	border-bottom-width: 2px;
	border-bottom-style: groove;
	background-color: #3399FF;
	text-align: right;
	padding-right: 10px;
	padding-top: 5px;
	overflow: hidden;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #333333 !important;
	font-style: italic;
	*margin: 0 15px;	
}

/*Special fix clearer div for the kid picture in IE*/
*:first-child+html #dropFix
{ 
	margin: 0;
	*display: none;
}

/*The static left side menu bar*/
#menu
{
	position: absolute; 
	left: 0px; 
	/*right: 200px; */
	bottom: 0px; 
	top: 162px; 
	background-color: blue; 
	/*border-top-width: 2px;
	border-top-style: double;
	float:left;*/
	width:200px;
	/*margin-top: 120px;*/
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
	background: url('../images/Texture0115.jpg') repeat;
	overflow: hidden;
}

	#menu A:link
	{
		text-decoration: none;
		color:#660000
		color: #336666;
	}
	
	#menu A:visited
	{
		text-decoration: none;
		color:#660000
	}
	
	#menu A:active
	{
		text-decoration: none;
		color:#660000
	}
	
	#menu A:hover
	{
		text-decoration: none;
		font-style: italic;
		color: #999966
	}

	#menu ul
	{
		list-style: none;
		list-style-image: url("http://www.chulavistaacademyofmusic.com/images/musicnote.gif");
		font-size: 14px;
		font-family: Geneva, Arial, Helvetica, sans-serif;
		text-align: left
	}
	
	#menu li
	{
		padding: 3px;
		margin: 2px 0px 2px 0px
	}
	
	#menu li.longitem
	{
		/*font-size: smaller*/
	}
	
	#menu p
	{
		text-align: center;
		color: #0066FF;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: bold
	}
	
	#mission
	{
		display: inline;
		border-width: 4px;
		border-style: groove;
		margin: 10px 0px;
	}

/*Wrapper for the right side viewable content area. #menu should extend vertically to match this*/
#view
{
	position: absolute;
	margin-left: 220px;
	width: auto; 
		
}

/*The actual content div*/
#thecontent
{
	margin-left: 220px;
	border-left: 1px solid black;
	background-color: white;
	position: relative;
	padding-bottom: 36px;
}

/*The small gray bar at the bottom*/
#copyright
{
	clear:left;
	text-align: center;
	font-size: small;
	font-family:"Times New Roman", Times, serif;
	background-color: #000000;
	color: white;
	border-top-width: 1px;
	border-top-style: solid;
	position: absolute;
	bottom: 0;
	height: 36px;
	width: 100%;
}
/*End Frontpage*/

/*-------------------Subpages----------------------------*/
/*Subpage general*/
div.subpage
{
	padding: 0px;
	text-align: center;
	min-height: 900px;
}

div.subpage IMG, object
{
	/*border-width: 4px;
	border-style: double;*/
}

img.noborder
{
	border: none;
	border-style: none;
}

/*IE fix*/
#flashcontent
{
	border-width: 0px;
	border-style: none;
}
/*IE fix*/

A:link
{
	text-decoration: none;
	color:#660000
	color: #336666;
}

A:visited
{
	text-decoration: none;
	color:#660000
}

A:active
{
	text-decoration: none;
	color:#660000
}

A:hover
{
	text-decoration: none;
	font-style: italic;
	color: #999966
}

a img { border: 0 none; }
a:active img {border: 0 none; }
a:hover img {border: 0 none; }
a:visited img {border: 0 none; }
/*End Subpage general*/

/*Events page specific*/
#Sevents h1
{
	color: #0066FF;
	font-family: Georgia, "Times New Roman", Times, serif
}
/*End Events page*/

/*Photos Subpage general*/
#Sphotos table
{
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #333333;
	border-width: 2px;
	border-style: double;
	width: 100%;
}
#Sphotos td
{
	padding: 2px
}
/*End Photos Subpage general*/

/*Home Subpage general*/
	
#home h2
{
	font-size: medium;
	color:#006699
}

#home p
{
	text-align: left
}

#home span
{
	color:#FF0000;
	font-size: larger
}

#home strong
{
	font-size: x-large;
	color:#003399
}
/*Home subpage scroller */

/* root element for single scroll */
	.ballerina
	{
		margin:3px; 
		display:none;
		height:220px; 
		height:220px; 
		width:100%;
		text-align:left;
	}
	
	.ballerina img
	{
		border:none;
	}
	
	#danceclassfilter
	{
		position:relative;
		background-color:#141414;
		height:48px;
		top:0px;
		z-index: 1;
	}
	
	#danceclasstable
	{
		position:relative;
		top:-46px;
		z-index: 2;		
	}
	
	#dancelessons
	{
		color: black; 
		font-size: 16px;
		height: 48px;
		display: none;
	}

	/* The two text layers */
	#neonTextDC span
	{
		background:url("../images/DanceClasses.png") no-repeat left top;
		/*
		ORIGINAL width:360px;
		*/
		width:360px;
		height:40px;
		position:absolute;
		left:0;
		top:0; 
		display:inline;
	}

	#neonTextNF span
	{
		background:url("../images/pulsing_forming.png") no-repeat left top;
		/*
		ORIGINAL width:360px;
		*/
		width:200px;
		height:21px;
		position:absolute;
		left:0;
		top:0; 
		display:inline;
	}

	
	span#layer1
	{
		z-index:100;
	}
	
	span#layer2
	{
		background-position:left bottom;
		z-index:99;
	}
 
	/* The h1 tag that holds the layers */
	#neonTextDC
	{
		height:40px;
		margin:auto 0;
		position:relative;
		width:360px;
		text-indent:-9999px;
	}
	/* The h1 tag that holds the layers */
	#neonTextNF
	{
		height:21px;
		margin:auto 0;
		position:relative;
		width:200px;
		text-indent:-9999px;
	}	
	
	.classWord
	{
		font-weight:bold;
		display:none;
	}
	
	#classFade5
	{
		color: #FF0000;
	}
	/*End home subpage scroller */	
/*End Home Subpage general*/

/*Lesson Subpage general*/
#lessonhead
{
	width: 100%;
	border-bottom-width: 2px;
	border-bottom-style: dashed;
	background: url('../images/Texture0115.jpg') repeat;
	text-align: center;
}

#lessonhead h1
{
	margin-top: 0px;
}

#lesson h1
{
	font-size: xx-large;
	color: #FF0000;
}

#lesson strong
{
	color: #006699;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: larger
}

#lesson p
{
	text-align: left
}
/*
#lesson ul
{
	list-style: none;
	text-align: left;
	padding-left: 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: medium
}
*/
#lesson h2
{
	font-style: normal;
	font-size: medium
}
/*End Lesson Subpage general*/

/*Contact Subpage general*/
#contact h1
{
	font-size: large;
	font-family: "Courier New", Courier, monospace
}

#contact h2
{
	font-size: medium;
	font-family: Verdana, Arial, Helvetica, sans-serif
}

#contactL
{
	width: 40%;
	float: left;
	font-size: 16px
}
#contactR
{
	width: 60%;
	float: left
}
#contact24hr
{
	color:#990000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: smaller
}
#contactemail
{
	color: #0066FF
}
/*End Contact Subpage general*/

/*5 Ways Subpage general*/
#\35ways p
{
	text-align: left;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px
}
#\35ways strong
{
	font-weight: bold;
	color: #0099CC;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px
}
/*End 5 Ways Subpage general*/

/*Schedule general*/
#danceSchedule
{
	width: 85%;
	text-align:center;
	border-width: 4px;
	border-style: groove;
	border-color: #000000;
	border-collapse: collapse;
	background-color:#6699FF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 15px auto;
}
#danceSchedule td
{
	border-width: 1px;
	border-style: dashed;
	padding: 4px;
}

.danceScheduleRowHead
{
	background-color: #660033;
	font-weight: bold;	
}

tr.danceScheduleRowHead td
{
	color: #FFFFFF;
}

.danceScheduleRow
{
	background-color: #99ccff;
}

#danceDesc
{
	position: relative;
	width:95%;
	margin: 10px auto;
}

#danceDesc td
{
	padding: 5px;
	text-align: left;
}

.danceDescLeft
{
	padding: 3px;
}
.danceDescMid
{
    font-family: Geneva,Arial,Helvetica,sans-serif;
    font-size: 16px;
	font-style:italic;
}
.danceDescMid img
{
	border: 2px groove black;
}

.danceDescTitles
{
    color: #000066;
    font-family: Geneva,Arial,Helvetica,sans-serif;
    font-size: 18px;
	font-weight:bold;
	margin: auto;
}

.danceDescLevels
{
    color: #BF3232;
    font-family: Geneva,Arial,Helvetica,sans-serif;
    font-size: 14px;
	font-weight:bold;	
	font-style: italic;
}

#schedule div
{
	text-align: center
}

#schedule table
{
	border-width: 2px;
	border-style: groove;
	border-color: #000000;
	border-collapse: collapse;
	background-color:#6699FF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	width: 90%;
}

#schedule tr
{
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-top-width: 2px;
	border-top-style: solid;	
}

#schedule td
{
	border-left-width: 1px;
	border-left-style: dashed;
	border-right-width: 1px;
	border-right-style: dashed;
	padding: 5px 5px

}

#schedule td.leftmost
{
	border-left: none
}

#schedule td.rightmost
{
	border-right: none
}

/*End Schedule general*/

.fad0, .fad1, .fad2
{
	display: none;
}

#lg1
{
	z-index: 2;
	position: absolute;
	top: 5px;
	left: 0px;		
}

#lg2
{
	z-index: 3;
	position: absolute;
	top: 5px;
	left: 0px;		
}

#lg3
{
	z-index: 4;
	position: absolute;
	top: 5px;
	left: 0px;		
}

.home-roll-box
{
	z-index: 2;
	position: relative;
	top: -310px;
	height: 310px;
	width: 960px;
	margin: 0 auto;
}

.home-roll-box img
{
	border: 0px none !important;
}

#overlayguitar
{
	z-index: 3;
	position: absolute;
	top: 0;
	left: 240px;
}

#overlaykid
{
	opacity: 0;
}

.rockerguy
{
	border: 0px none;
	display: none; 
}

#legendshome
{
	font-family: Georgia, arial, serif;
	color: white;
	/*
	background-image:url('../images/bg0.jpg');
	background-repeat:no-repeat;
	background-position: left top;
	
	background-position: 220px 130px;
	background-attachment:fixed;
	*/
	background-color: black;
	min-width: 950px;
}

#legendsinfo
{
	width: 340px;
	height: 490px;
	position: absolute;
	top: 20px;
	float: right;
	right: 2px;
	text-align: left;
	z-index: 4;
	background-image:url('../images/RockPanel.png');
	background-repeat:no-repeat;
	background-position: center;
	font-family: Georgia, arial, serif;
}

#fpnamebar
{
	margin-top: 20px; 
	padding: 10px 0;
	background-image:url('../images/marble0.png');
	background-repeat: repeat-x;
	width: 100%;
	text-align:center;
	font-family: Georgia, arial, serif;
	color: white;	
	border-bottom: 2px black groove;
}

#rp0
{
	width: 280px;
	margin: 60px auto 20px;
	color: #ddffff;
	font-weight: bold;
	font-size: 18px;
}

#legendscanvas
{
	width: 960px; 
	margin: 0 auto;
	height: 310px;
	overflow: hidden;
}

#legendscanvas img
{
	border: 0px none;
}

#musicavail
{
	border: 2px groove black;
	border-collapse:collapse;
	width: 100%;
	text-align: left;
}

#musicavail td
{
	border: 2px groove black;
	padding: 5px;
	vertical-align: middle;
	font: bold 14px/24px Georgia, arial, serif;
}

#musicavail .monday
{
	background-color: #99bbff;
	color: #262e3f;
}
#musicavail .tuesday
{
	background-color: #99ffd5;
}
#musicavail .wednesday
{
	background-color: #efff99;
}
#musicavail .thursday
{
	background-color: #ffc999;
}
#musicavail .friday
{
	background-color: #ff9999;
}
#musicavail .saturday
{
	background-color: #e199ff;
}
#musicavail .noday
{
	 background-color: #494949;
}

.availicon
{
	margin-right: 5px;
}

#compra{border-collapse:collapse;
	width: 100%;
	border: 0;
	margin: 0;}
#compra td.checked
{
	background-image: url(http://www.chulavistaacademyofmusic.com/images/check.gif);
	background-position: center;
	background-repeat: no-repeat;
	width: 25%;
	min-height: 45px;
}

#compra td.unchecked
{
	background-image: url(http://www.chulavistaacademyofmusic.com/images/uncheck.gif);
	background-position: center;
	background-repeat: no-repeat;
	width: 25%;
	min-height: 45px;
}
#compra .left
{
	font-weight: bold;
	padding: 10px 15px;
	text-align:left;
	width: 50%;
}
#compra .tablehead
{
	background-color: #666699;
	border-bottom: double;
	border-bottom-width: 4px
}
#compra tr
{
	background: #c4cce9;
	border-top: 1px solid #b3c3ff;
	border-bottom: 1px solid #b3c3ff;
}
#compra tr:nth-child(2n+1) 
{
	background: #d5ddfa;
}
/****************************************************************************************************
 @group images */
.textmiddle {vertical-align:middle;} 
.align-right { float:right; margin: 0 0 15px 15px; }
.align-left { float:left; margin: 0 15px 15px 0; }
.frame{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 6px;
border: 1px solid #CCC;
background-color: #EEE;
top: 0;
left: 0;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
}
/* @end */

/****************************************************************************************************
 @group headings */
h3.bar{
display: block;
border-top: 3px solid rgb(153, 0, 0);
border-bottom: 1px solid rgb(204, 204, 204);
padding: 2px 0px 2px 2px;
margin: 0px 0px 9px;
font-size: 1.6em;
letter-spacing: 2px;
}
div.section{
display: block;
width: 80%;
border-bottom: 1px solid #d7d7d7;
margin-bottom: 10px;
}
h1.elegant{
font-family: 'Neucha', arial, serif;
font-size: 30px;
text-align:left;
}
h2.elegantsubtitle{
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 16px;
font-style: italic;
color: #163C75;
/*background: url(chrome-extension://knomilfbnhpkmibhmleppnkmcempglag/media/images/topbar-bg.jpg);*/
background: url(../images/icons/asterisk_orange.png) no-repeat left 0.2em;
padding-left: 1.0em;
text-align:left;
}
p.aggressive{
color: #444;
font-size: 16px;
letter-spacing: 0;
font-family: Verdana, Helvetica, sans-serif;
text-align:left;
}
p.indent
{
text-indent: 2em;
}
a.biglink{
color: #009fcc;
text-decoration: underline;
word-spacing: 0.25em;
text-align: left;
letter-spacing: 0;
line-height: 1.4em;
font-size: 1.9em;
}
a.medlink{
color: #fff;
text-decoration: underline;
word-spacing: 0.25em;
text-align: left;
letter-spacing: 0;
line-height: 0.8em;
font-size: 1.2em;
font-weight: bold
}
a.littlelink
{
margin-left: 5px;
font-weight: bold;
text-decoration: none;
color: #163C75;
font-size: 1.1em;
}
.title {
display: block;
width: 80%;
border-bottom: 1px solid #d7d7d7;
}
.breaker {
color: #444;
margin: 10px 0px;
padding: 0;
font-weight: bold;
text-shadow: 2px 1px 2px #b8b8b8;
font-size: 1.8em;
}
.centered {
text-align: center;
}
/* @end */

/****************************************************************************************************
 @circleplayer */
 
 
.cp-container {
	position: absolute;
	width: 104px; /* 200 - (2 * 48) */
	height: 104px;
	background: url("/images/bgr.png") 0 0 no-repeat;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
top: 200px;
right: 245px;
}

.cp-container :focus {
	border:none; 
	outline:0;
}

.cp-buffer-1,
.cp-buffer-2,
.cp-progress-1,
.cp-progress-2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 104px;
	height: 104px;
	clip:rect(0px,52px,104px,0px);

	-moz-border-radius:52px;
	-webkit-border-radius:52px;
	border-radius:52px;
}

.cp-buffer-1,
.cp-buffer-2 {
	background: url("/images/buffer.png") 0 0 no-repeat;
}     


/* FALLBACK for .progress
 * (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step)
 * (It needs the container selector to work. Or use div)
 */ 

.cp-container .cp-fallback {
	background: url("/images/progress_sprite.jpg") no-repeat;
	background-position: 0 104px; 
}

.cp-progress-1,
.cp-progress-2 {
	background: url("/images/progress.png") 0 0 no-repeat;
} 

.cp-buffer-holder,
.cp-progress-holder,
.cp-circle-control {
	position:absolute;
	width:104px;
	height:104px;
} 

.cp-circle-control {
	cursor:pointer;
}

.cp-buffer-holder,
.cp-progress-holder {
	clip:rect(0px,104px,104px,52px);
	display:none;
}


/* This is needed when progress is greater than 50% or for fallback */

.cp-buffer-holder.cp-gt50,
.cp-progress-holder.cp-gt50,
.cp-progress.cp-fallback{
	clip:rect(auto, auto, auto, auto);
}  

.cp-controls {
	margin:0;
	padding: 26px;
}

.cp-controls li{
	list-style-type:none;
	display: block;

	/*IE Fix*/  
	position:absolute;
}

.cp-controls li a{
	position: relative;
	display: block;
	width:50px;
	height:50px;
	text-indent:-9999px;
z-index: 7;
}

.cp-controls .cp-play {
	background: url("/images/controls.jpg") 0 0 no-repeat;
	top: -50px;
}

.cp-controls .cp-play:hover {
	background: url("/images/controls.jpg") -50px 0 no-repeat;
}

.cp-controls .cp-pause {
	background: url("/images/controls.jpg") 0 -50px no-repeat;
}

.cp-controls .cp-pause:hover {
	background: url("/images/controls.jpg") -50px -50px no-repeat;
}

.cp-jplayer {
	width: 0;
	height: 0; 
}

#jplayer_inspector{display: none;}

ul.sidewayslist, ul.sidewayslist li
{
	float: left;
}

/* Color Map
	---------------: 	#------
	---------------: 	#------
	---------------: 	#------
*/
/* Font Map
	Base:
	Default Text:
*/

/* Table of Contents:
	1. Basics
	2. Typography
	6. Images
	5. Lists
	3. Menu(s)
	4. Videos 	
*/

/* 1) Basics
====================================== */
ul
{
	list-style-type: none;
}
.nested
{
	font-size: 1em;
}

/*************************************************************************************
/* 2) Images
====================================== */
.align-left
{
	float: left;
	margin: 0 15px 15px 0;
}
img.fluid
{
	max-width: 100%;
	height: auto;
}
/*************************************************************************************	
/* 3) Lists
====================================== */
ul.sidewayslist, ul.sidewayslist li
{
	float: left;
}
/*************************************************************************************
/* 4) Videos
====================================== */
.videoBackground 
{
	background: #a0d8ef; /* Old browsers */
	background: -moz-linear-gradient(top,  #a0d8ef 0%, #ddf1f9 65%, #feffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0d8ef), color-stop(65%,#ddf1f9), color-stop(100%,#feffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* IE10+ */
	background: linear-gradient(top,  #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=0 ); /* IE6-9 */
}
.videoHeader 
{
	display: block;	
	background-position: left center;
	color: #C2C2C2;
	background: #0C2A4C;
	-moz-border-radius-topleft: 12px;
	-moz-border-radius-topright: 12px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 12px 12px 0px 0px;
	border-radius: 12px 12px 0px 0px;	
	padding: 0.1em;
	border-bottom: 4px double #C2C2C2;
	padding-left: 50px;	
	text-align:left;
}
.piano
{
	background-image: url(/images/icon_piano_48.png);
	background-repeat: no-repeat;
}
.videoHeader h3
{
	margin: 0.6em 0 0.4em 0;
	display: inline-block;
}
h3.classtype
{
	margin: 0.6em 0.8em 0.4em 0;
	display: inline-block;
	font-style:italic;
	border-right: 2px solid #fff;
	padding: 0 1em 0 0;
}
.videoList li
{
		display: inline-block;
		margin: 0.5em 0 0.5em 0;
		font-size: 1.2em;
}
.videoItem
{
	background: #333; /* Old browsers */
	background: -moz-linear-gradient(bottom,#333 15%,#252828 75%); /* FF3.6+ */
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0.15,#333),color-stop(0.75,#252828)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(bottom,#333 15%,#252828 75%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(bottom,#333 15%,#252828 75%); /* Opera 11.10+ */
	background: -ms-linear-gradient(bottom,#333 15%,#252828 75%); /* IE10+ */
	background: linear-gradient(bottom,#333 15%,#252828 75%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#252828',GradientType=0 ); /* IE6-9 */	
}
ol.videoItem
{
	color: #707070;
	padding: 0 0 0 0;
}
ol.videoItem li 
{
	background-image: linear-gradient(bottom,#333 15%,#252828 75%);
	background-image: -o-linear-gradient(bottom,#333 15%,#252828 75%);
	background-image: -moz-linear-gradient(bottom,#333 15%,#252828 75%);
	background-image: -webkit-linear-gradient(bottom,#333 15%,#252828 75%);
	background-image: -ms-linear-gradient(bottom,#333 15%,#252828 75%);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15,#333),color-stop(0.75,#252828));
	background-color: #333;
	margin-top: 0;
	padding: 5px;
	border-top: 0;
	cursor: pointer;
	float: none;
	text-align:left;
}
.videoItem a
{
	color: #555;
}
li > .playButton 
{
-ms-filter: "alpha(opacity=0)";
background: transparent url(/images/sp-icons-1.png) no-repeat -842px 0;
bottom: 32px;
cursor: pointer;
display: block;
filter: alpha(opacity = 0);
height: 36px;
left: 0;
margin-bottom: 20px;
margin-left: 10px;
opacity: 0;
position: absolute;
top: 125px;
left: 0;
width: 36px;
}
ol.videoItem li > i, ol.videoItem li, ol.videoItem li > .playButton 
{
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
li.videoPreview:hover > .playButton 
{
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity = 100);
opacity: 1;
}
li.videoPreview i
{
	font-size: 0.9em;
}
ol.videoItem li:hover i
{
	color: #CA0002;
}
ol.videoItem li:hover 
{
	background: black;
}
/*************************************************************************************