/* root element for tabs  */
ul.opera_tabs, ul.opera_tabs_other, ul.opera_tabs_barber { 
	list-style: none; 
	margin: 0 !important; 
	padding: 0;	
	border: none;
	height: 43px;
}

/* single tab */
ul.opera_tabs li, ul.opera_tabs_other li, ul.opera_tabs_barber li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important;
	border: none;
	border-right: 3px solid #fff;
	height: 43px;
}
.opera_tabs_last {
	border-right: 0px solid #fff;
}

ul.opera_tabs a, ul.opera_tabs_other a { 
	display: block;
	height: 43px;  
	line-height: 43px;
	width: 119px;
	text-align: center;	
	text-decoration: none;
	color: #333;
	padding: 0px;
	margin: 0px;	
	/*position: relative;
	top: 1px;*/
	background: #9bcb3b;
}
ul.opera_tabs_other a {
	background: #cbe19a;
	height: 37px;
}

ul.opera_tabs a:active, ul.opera_tabs_other a:active {
	outline: none;		
}

/* when mouse enters the tab move the background image */
ul.opera_tabs a:hover, ul.opera_tabs_other a:hover {
	color: #333;
	font-weight: bold;
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.opera_tabs a.current, ul.opera_tabs a.current:hover, ul.opera_tabs li.current a, ul.opera_tabs_other a.current, ul.opera_tabs_other a.current:hover, ul.opera_tabs_other li.current a {
	cursor: default !important; 
	color: #333 !important;
	font-weight: bold;
}

/* Different widths for tabs: use a class name: s, l, xl */


/* width 1 */
ul.opera_tabs a.s 			{ background-position: -553px 0; width:81px; }
ul.opera_tabs a.s:hover 	{ background-position: -553px -31px; }
ul.opera_tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.opera_tabs a.l 			{ background-position: -247px -0px; width:174px; }
ul.opera_tabs a.l:hover 	{ background-position: -247px -31px; }
ul.opera_tabs a.l.current  { background-position: -247px -62px; }


/* width 3 */
ul.opera_tabs a.xl 			{ background-position: 0 -0px; width:248px; }
ul.opera_tabs a.xl:hover 	{ background-position: 0 -31px; }
ul.opera_tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */ 
.panes .pane {
	display: none;
}

/* Cast Tabs */
ul.cast_tabs { 
	list-style: none; 
	margin: 0 !important; 
	padding: 0;	
}

/* single tab */
ul.cast_tabs li { 
	text-indent: 0;
	padding: 0;
	margin: 0 !important;
	list-style-image: none !important; 
}

ul.cast_tabs a { 
	text-decoration: none;
	color: #333;
	padding: 1px 3px 1px 0px;
	margin: 0px;	
}

ul.cast_tabs a:active {
	outline: none;		
}

/* when mouse enters the tab move the background image */
ul.cast_tabs a:hover {
	background: #cbe19a;
	color: #333;
	font-weight: bold;
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.cast_tabs a.current, ul.cast_tabs a.current:hover, ul.cast_tabs li.current a {
	background: #cbe19a;
	cursor: default !important; 
	color: #333 !important;
	font-weight: bold;
}
.opera_panes { padding-left: 365px; }
.cast_panes { width: 410px; float: right; }
.opera_middle { width: 410px; float: left; }
.opera_blank { width: 420px; float: right; }
.opera_story { width: 730px; float: left; }
.opera_cast_left { width: 320px; float: left; }

/* ---------------- */
div.performance-cleared { background: url(../images/performance-container-bottom.png) bottom left repeat-x; height: 19px; clear: both; }
div.performance_tickets { padding: 8px 10px; margin: 20px 0px; background: url(../images/ticket-background.png) left top repeat-y; }
div.performance_tickets a { color: #231f20; text-decoration: none; font-size: 16px; font-weight: bold; }
div.story_container { border: 4px solid #9bcb3b; padding: 4px 6px; margin-top: 20px; }
div.story { height: 370px; width: 710px; overflow: auto; padding-right: 5px; }
div.cast_bio_container { border: 4px solid #9bcb3b; padding: 4px 6px; margin-top: 20px; }
div.cast_bio { height: 270px; width: 390px; overflow: auto; padding-right: 5px; }
.cast_bio_name { font-size: 15px; font-weight: bold; }
.previousOH { color: #9bcb3b; font-weight: bold; }