@charset "utf-8";
/* CSS Document */

/* ============================================ CLASSES INFORMATION BAR */
#infoBar{
width:798px;
height:80px;
background-color:rgba(255,255,255,0.5);
border:#d9d9d9 1px dashed;
position:relative;
top:0;
left:0;
margin:5px auto;
}

#info, #hint, #basics, #choreo, #jam{
cursor:pointer;
display:inline-block;
overflow:hidden;
width:130px;
}

/* INFO TAB */
#info{
background:url(../images/classes-page/icon-sheet.png) 0 0 no-repeat;
width:100px;
height:80px;
position:absolute;
top:0;
left:6px
}

#info:hover, #info.selected{
background-position:0 -80px;
height:80px;
position:absolute;
top:0;
}

/* HINT TAB */
#hint{
cursor:default;
background:url(../images/classes-page/icon-sheet.png) -130px -55px no-repeat;
height:55px;
position:absolute;
top:-20px;
right:415px
}

/* BASICS TAB */
#basics{
background:url(../images/classes-page/icon-sheet.png) -260px 0 no-repeat;
height:55px;
position:absolute;
top:15px;
right:310px
}

#basics:hover, #basics.selected{
background-position:-260px -55px;
height:80px;
position:absolute;
top:5px;
}


/* CHOREO TAB */
#choreo{
background:url(../images/classes-page/icon-sheet.png) -390px 0 no-repeat;
height:55px;
position:absolute;
top:15px;
right:147px;
}

#choreo:hover, #choreo.selected{
background-position:-390px -55px;
height:80px;
position:absolute;
top:5px;
}

/* JAM TAB */
#jam{
background:url(../images/classes-page/icon-sheet.png) -520px 0 no-repeat;
height:55px;
position:absolute;
top:15px;
right:-8px;
}	

#jam:hover, #jam.selected{
background-position:-520px -55px;
height:80px;
position:absolute;
top:5px;
}


/* ============================================ AREA THAT HOLDS CHANGING CONTENT */
#classDisplay{
width:960px;
min-height:575px;
position:relative;
top:0;
left:-80px;
margin:0 auto;
overflow:hidden;
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out;
}

/* Use this when there is two classes running at the same time */
#classDisplay.option-selected{
min-height:720px;
}


/* ============================================ Class Content Containers */
#info-content, #basics-content, #choreo-content, #jam-content{
width:798px;
position:absolute;
top:0;
right:-3333px
}


/* ============================================ INDIVIDUAL CLASSES CSS */
/*INFO INTRO*/
.learnDescription{
width:780px;
position:relative;
padding:10px
}

.learnDescription h1{font-size:1.4em}

.learnDescription p{
font-size:15px;	
text-align:justify;
margin:12px 0
}
	
p.slogan{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:22px;
font-style:italic;
color:#b90068;
text-align:right;
margin:18px 0
}

p.extra-text{
font-size:12px
}

/*CLASS INTRO BACKGROUNDS*/
.basics{
background:url(../images/classes-page/basicsBg.jpg) top left
}

.choreo{
background:url(../images/classes-page/choreoBg2.jpg) top left
}

.jam{
background:url(../images/classes-page/jamBg.jpg) top left
}

.basics, .choreo, .jam{
width:798px;
height:425px;	
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 2px 2px #bbb; 
-moz-box-shadow:0 2px 2px #bbb;
box-shadow:0 2px 2px #bbb; 
/* For IE */
background-color:#fff;
zoom:1;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#bbbbbb', Direction=180, Strength=2);
behavior:url("pngbehavior.htc");
padding:0;
margin:0 auto 25px auto;
position:relative;
top:0;
left:0
}

/* CLASS DESCRIPTIONS */
.basics-desc, .choreo-desc, .jam-desc{
width:400px; 
height:375px;
font-size:13px;
line-height:15px; 
text-align:justify;
color:#000; 
background-color:rgba(255,255,255,0.8);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:15px;
position:absolute;
top:10px;
right:10px
}

.basics-desc ul, .choreo-desc ul, .jam-desc ul{
color:#936;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
width:350px;
margin:20px 0 0 -10px;
}

/* FOR LOGOS IN CLASS DESCRIPTIONS */
.basics-desc span#basicsLogo{
float:right;
background:url(../images/iconsGlobal.png) -500px -400px;
width:121px;
height:51px;
margin:0 0 0 10px
}

.choreo-desc span#choreoLogo{
float:right;
background:url(../images/iconsGlobal.png) -650px -400px;
width:94px;
height:51px;
margin:0 0 0 10px
}

.jam-desc span#jamLogo{
float:right;
background:url(../images/iconsGlobal.png) -800px -400px;
width:82px;
height:51px;
margin:0 0 0 10px
}


/* ============================================ CLASS PURCHASE BOX */
.classBox{
clear:both;	
width:730px;
border:#D9D9D9 1px dashed;
background-color:#FFF; 
padding:15px;
margin:0 auto 15px auto;
position:relative;
top:0;
left:0
}

.classBox h4{
background-color:#FFF;
border-top:#D9D9D9 1px dashed;
position:absolute;
top:0;
left:0;
padding:2px 5px;
margin:-10px 10px 0 10px
}

span.bellyBits{
width:12px;
height:12px;
display:inline-block;
background:url(../images/iconsGlobal.png) -169px -175px;
}
	
.classText1{
width:650px;
padding:5px 0 0 0;
margin:0;
}

.classText2{
width:650px;
font-size:75%;
padding:15px 0 0 0;
margin:0;
}

/* ============================================ BOOK BUTTON*/
.bookButton{  
width:130px;
margin:0; 
padding:0;
position:absolute;
top:20px;
right:10px
}

.bookButton img{
border:0;
}

.bookButton-promo{  
width:130px;
margin:0; 
padding:0;
position:absolute;
top:0;
right:10px
}

.bookButton img, .bookButton-promo img{
border:none
}

.joinButton{
width:100px;
height:62px;
position:absolute;
top:0px;
right:10px;
-moz-box-shadow: 2px 2px 5px #ccc;
-webkit-box-shadow: 2px 2px 5px #ccc;
box-shadow: 2px 2px 5px #ccc;
}

.joinButton:hover{
top:2px;
right:8px;
-moz-box-shadow: 0px 0px 0px #ccc;
-webkit-box-shadow: 0px 0px 0px #ccc;
box-shadow: 0px 0px 0px #ccc;
}

.dropIn{
width:100px;
height:62px;
background:url(../images/iconsGlobal.png) -100px -519px;
position:absolute;
top:20px;
right:22px
}

/* ============================================ PROMOTIONAL CODE INPUT*/	
.code-input{
position:relative; 
top:0; 
left:12px; 
margin:0
}
	
.code-confirm{ 
background:url(../images/icons/tick-up.png) no-repeat; 
width:30px; 
height:20px; 
margin:1px 0 0 12px; 
padding:0; 
border:0; 
vertical-align:top
}

.code-confirm:hover, .code-confirm:active{
background:url(../images/icons/tick-down.png) no-repeat top left;
width:30px; 	
height:20px; 
margin:1px 0 0 12px; 
padding:0; 
border:0; 
vertical-align:top;
cursor:pointer
}
			
/* ============================================ CLASS BOX SHADOW*/	
.classBoxShadow{
width:740px;
height:20px;
background:url(../images/iconsGlobal.png) -130px -615px;
position:relative;
top:-15px;
left:30px
}
	
/* ============================================ VENUE LINK*/
.venue-link{
font-size:80%;
text-decoration:underline
}

/* ============================================ ANCHOR TEXT LINK*/
.anchor:link, .anchor:visited, .anchor:hover{
text-decoration:none;
color:#000;
}

/* ============================================ TRAFFIC LIGHT STATES*/
.spaces{
color:#0C0;
font-size:80%
}
	
.limited{
color:#FC0;
font-size:80%
}
	
.full{
color:#C00;
font-size:80%
}