/*================================
 THINK TYPES!! SEMANTICS!!
================================*/

/*==================================================================*/
/* Document body in entirety */
/*==================================================================*/

body {
	color: white;

	background-color: black;

	padding: 0px;
	border: 0px;
	margin: 0px;

	font-size: 0.75em;
	
	height: 800px;
}

#surrounds {
	display: block;
	position: absolute;
	width: 900px;
	height: 850px;
	overflow: hidden;
}

/*==================================================================*/
/* Preloading of big images
/*==================================================================*/
/* These inline divs preload the very-large stage frame and fans images so that
   the loading screen does not have to be so long */

#preLoadStageFrame {
	position: absolute;
	left: -1900px;
	background-image: url("images/2009_09_27/StageFrame.png");
}

#preLoadFans {
	position: absolute;
	left: -2100px;
	background-image: url("images/2009_09_28/Fans.png");
}

/*==================================================================*/
/* Loading screen blackout
/*==================================================================*/

/* This element is re-used for image galleries */

.loadingScreen {
	text-align: center;
	padding-top: 290px;
	font-size: 2.5em;
}

/*==================================================================*/
/* The main stage background
/*==================================================================*/

#theStage {
	position: absolute;
	display: block;
	width: 980px;
	height: 850px;

	background-image: url("images/2009_09_27/StageBackground.jpg");
	
	padding: 0px;
	border: 0px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;

	overflow: hidden;
}

#theStageDarkness {
	position: absolute;
	display: block;
	width: 980px;
	height: 850px;

	background-color: black;
	
	padding: 0px;
	border: 0px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;

	overflow: hidden;
}

/*==================================================================*/
/* Main page content (on stage)
/*==================================================================*/

#mainContent {
	display: block;
	position: absolute;
	top: 320px;
	left: 300px;
	width: 580px;
	min-width: 580px;
	max-width: 580px;
	/*height: 300px;*/
	
	/*overflow: scroll;*/
	
	opacity: 0.00;
	filter: alpha(opacity=00);
	-moz-opacity: 0.00;
	
	z-index: 10;
}

/*==================================================================*/
/* Main outer curtain frame */
/*==================================================================*/

/*
  This is dealt with as a dynamically created Sprite
   object (see Sprite.js), but we cannot use the usual
   Sprite methods to select an image or background image
   for it, so an id  is applied instead (via JS) and these
   CSS rules take care of the image (see also style-ie-hacks.css)
*/
 
#staticCurtainFrame {
	background-image: url("images/2009_09_27/StageFrame.png");
}

/*==================================================================*/
/* Main Banner
/*==================================================================*/

#mainBanner {
	display: none;
	position: absolute;
	width: 842px;
	height: 80px;
	left: 155px;
	top: 20px;
	z-index: 11;
	cursor: pointer;
}

/*==================================================================*/
/* Main Logo
/*==================================================================*/

#mainLogo {
	display: none;
	position: absolute;
	width: 160px;
	height: 130px;
	left: 500px;
	top: 100px;
	z-index: 11;
	cursor: pointer;
}

/*==================================================================*/
/* Fans Button (holds links for now)
/*==================================================================*/

#fans {
	position: absolute;
	display: none;
	width: 175px;
	height: 378px;
	
	left: -120px;
	top: 200px;
	background-image: url("images/2009_09_28/Fans.png");
	z-index: 16;

	overflow: hidden;
	
	cursor: pointer;
}

#fans ul {
	padding-left: 20px;
}

#fans li {
	padding-top: 7px;
	padding-left: 7px;
}

#fans li a {
	color: red;
}

/*==================================================================*/
/* Stars
/*==================================================================*/

.starContainer {
	position: absolute;
	display: block;
	width: 97px;
	height: 97px;
	overflow: hidden;
	z-index: 15;
	cursor: pointer;
}

.starInner {
	width: 200px;
	height: 97px;
}

#star01Inner {
	background-image: url("images/2009_09_28/Star01.png");
}

#star02Inner {
	background-image: url("images/2009_09_28/Star02.png");
}

/*==================================================================*/
/* Tickets
/*==================================================================*/

#ticketsRear {
	position: absolute;
	display: block;
	width: 65px;
	height: 219px;
	left: -230px;
	background-image: url("images/2009_09_28/TicketsRear.png");
	overflow: hidden;
	z-index: 10;
}

#ticketsFront {
	position: absolute;
	display: block;
	width: 212px;
	height: 100px;
	left: -230px;
	background-image: url("images/2009_09_28/TicketsFront.png");
	overflow: hidden;
	z-index: 10;
	cursor: pointer;
}

/*==================================================================*/
/* TopHat
/*==================================================================*/

.topHatContainer {
	position: absolute;
	display: block;
	width: 169px;
	height: 169px;
	overflow: hidden;
	cursor: pointer;
}

.topHatInner {
	width: 338px;
	height: 146px;
}

#theTopHatInner {
	background-image: url("images/2009_09_28/TopHat.png");
}

/*==================================================================*/
/* Beasties Logo
/*==================================================================*/

#beastiesLogo {
	position: absolute;
	display: none;
	width: 170px;
	height: 228px;
	overflow: hidden;
	background-image: url("images/2009_09_28/Beasties.png");
	cursor: pointer;
}

/*==================================================================*/
/* Gallery Logo
/*==================================================================*/

#galleryLogo {
	position: absolute;
	display: none;
	width: 172px;
	height: 224px;
	overflow: hidden;
	background-image: url("images/2009_09_28/Gallery.png");
	cursor: pointer;
}

/*==================================================================*/
/* Cards (Contact)
/*==================================================================*/

#cards{
	position: absolute;
	display: none;
	width: 180px;
	height: 131px;
	overflow: hidden;
	background-image: url("images/2009_09_28/Cards01.png");
	cursor: pointer;
}

/*==================================================================*/
/* Top Card
/*==================================================================*/

.topCardContainer {
	position: absolute;
	display: block;
	width: 128px;
	height: 173px;
	overflow: hidden;
	cursor: pointer;
}

.topCardInner {
	width: 256px;
	height: 173px;
}

#theTopCardInner {
	background-image: url("images/2009_09_28/Cards03.png");
}

/*==================================================================*/
/* Nipple Cap
/*==================================================================*/

#nippleCap {
	position: absolute;
	width: 124px;
	height: 123px;
	visibility: hidden;
	overflow: hidden;
	background-image: url("images/2009_09_28/NippleCap.png");
	cursor: pointer;
}

#nippleCapTassle {
	position: absolute;
	width: 42px;
	height: 183px;
	visibility: hidden;
	overflow: hidden;
	background-image: url("images/2009_09_28/NippleCapTassle.png");
	cursor: pointer;
}

/*==================================================================*/
/* Hand Buttons
/*==================================================================*/

#leftHandButton {
	visibility: hidden;
	background-image: url("images/2009_09_28/PointingHandLeft.png");
	cursor: pointer;
}

#rightHandButton {
	visibility: hidden;
	background-image: url("images/2009_09_28/PointingHandRight.png");
	cursor: pointer;
}

/*==================================================================*/
/* Splash Image
/*==================================================================*/

#splashImage {
	display: block;
	width: 278px;
	height: 327px;
	background-image: url("images/2009_09_28/OrchidFrontPage.png");
}

/*==================================================================*/
/* Tabs
/*==================================================================*/

div#tabComponent
{
	display: none;
	width: 580px; 
	background-color: transparent;
	padding: 0px;
	
	z-index: 7;
}

.normalTab 			{ color: #666666; font-weight: bold; border: 1px solid #222222; padding: 2px; background-color: #222222}
a.normalTab:link 		{ color: #666666; font-weight: bold; border: 1px solid #222222; padding: 2px; background-color: #222222}
a.normalTab:visited 	{ color: #666666; font-weight: bold; border: 1px solid #222222; padding: 2px; background-color: #222222}
a.normalTab:active 	{ color: #666666; font-weight: bold; border: 1px solid #222222; padding: 2px; background-color: #444444}
a.normalTab:hover 	{ color: #ffffff;     font-weight: bold; border: 1px solid #000000; padding: 2px; background-color: #444444}
.selectedTab 		{ color: #CCCCCC; font-weight: bold; border: 1px solid #000000; padding: 5px; background-color: #660000}
.tabHeading 		{ color: #CCCCCC; font-weight: bold; padding: 5px; background-color: #000000}
.tabCol1 			{ color: #AAAAAA; font-weight: bold; border: 1px solid #111111; padding: 3px; background-color: #000000}
.tabCol2 			{ color: #AAAAAA; font-weight: normal; border: 1px solid #333333; padding: 3px; background-color: #000000; text-align: left;}

#tabPage0 { position: relative; display: block; width: 580px; 	opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;}
#tabPage1 { position: relative; display: none; width: 580px; 	opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;}
#tabPage2 { position: relative; display: none; width: 580px; 	opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;}
#tabPage3 { position: relative; display: none; width: 580px; 	opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;}
#tabPage4 { position: relative; display: none; width: 580px; 	opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;}
#tabPage5 { position: relative; display: none; width: 580px; 	opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;}
#tabPage6 { position: relative; display: none; width: 580px; 	opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;}
#tabPage7 { position: relative; display: none; width: 580px; 	opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;}
#tabPage8 { position: relative; display: none; width: 580px; 	opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;}
#tabPage9 { position: relative; display: none; width: 580px; 	opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;}



/* Each individual tab page is of this class */
.tabPage {
	width: 580px;
	height: 500px;
	overflow: auto;
	
	margin: 0px;
	padding: 0px;
	
	color: #CCCCCC;
}

.tabPage a {
	color: #FFFFFF;
}

.tabPage p {
	margin: 0px;
	padding: 0px;
	padding-top: 0px;
	padding-bottom: 5px;
}

.tabPage img {
	padding: 5px;
}

#tabPage0 {
	padding-top: 55px;  /* Push down text on tabPage0 to expose background image properly */
	text-align: center;
}

#tabPage0 p {
	padding-left: 40px;
	width: 500px;
}


#tabPage2 
{
	text-align: center;
}

#tabPage6 {
	padding-top: 55px;  /* Push down text on tabPage6 to expose background image properly */
	text-align: center;
}

#tabPage6 ul {
	text-align: left;
	margin-left: 170px;
}

#tabPage7
{
	text-align: center;
}


/*==================================================================*/
/* Panoramic Image Containers (General)
/*==================================================================*/

.leftToRightPanoContainer {
	display: block;
	position: relative;
	width:580px;
	height:320px;
	overflow: hidden;
}

/*==================================================================*/
/* Panoramic Image Containers (Artist Profiles)
/*==================================================================*/

.leftToRightPanoContainer .artisteProfile {
	display: block;
	position: absolute;
	width: 580px;
	height: 320px;
}

.leftToRightPanoContainer .artisteProfile p.blurb {
	display: block;
	width: 350px;
	padding: 5px;
}

.artisteProfile img {
	padding: 0px;
	border: 1px solid;
	border-color: #FFFFFF;
}

.artisteProfile h1 {
	margin-top: 0px;
}


/*==================================================================*/
/* Panoramic Image Containers (Event Profiles)
/*==================================================================*/

.leftToRightPanoContainer .eventProfile {
	display: block;
	position: absolute;
	width: 580px;
	height: 310px;
}

.leftToRightPanoContainer .eventProfile p{
	padding: 5px;
}

.eventProfile img {
	padding: 0px;
	border: 1px solid;
	border-color: #FFFFFF;
}


/*==================================================================*/
/* Contact blurb
/*==================================================================*/

#contactBlurb {
	text-align: center;
}

#contactBlurb a {
	color: #FFFFFF;
}

/*==================================================================*/
/* GalleryCollection
/*==================================================================*/

#galleryCollection {
	margin-left: 5px
}

.galleryCollection {
	margin-left: 5px
}

.imageContainer {
	float: left;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 6px;
	padding-bottom: 10px;
	margin: 0px;
	
	display: inline;
	width: 130px;
	height: 100px;
	
	background-color: transparent;
	 
	opacity: 0.85;
	filter: alpha(opacity=85);
	-moz-opacity: 0.85;
	
	font-size: 11px;
	text-align: center;
}

.imageContainer p {
	border: 0px none;
	padding: 0px;
	margin: 0px;
}

.imageContainer a {
	border: 0px none;
	padding: 0px;
	margin: 0px;
	cursor: default;
	color: #EEEEEE;
	cursor: pointer;
}

.imageContainer img {
	border: 1px solid;
	border-color: #FFFFFF;
	padding: 0px;
	margin: 0px;
	
	cursor: pointer;
	/*cursor: default;*/
}

/*==================================================================*/
/* Gallery (individual galleries thumbnails)
/*==================================================================*/

.gallery {
	display: none; /* Initially hidden, shown by choosing a gallery from a gallery collection */
}

/*==================================================================*/
/* Gallery Image Popup
/*==================================================================*/

.galleryImagePopup {
	border: 0px none;
	background-color: transparent;
	color: #000000;
}

.galleryImagePopup img {
	border: 1px solid;
	border-color: #FFFFFF;
	cursor: pointer;
}

.galleryImagePopup a {
	color: #000000;
}

/*==================================================================*/
/* Special effects */
/*==================================================================*/

.strong {
	font-weight: bold;
}

.smallprint {
	font-size: 11px;
}

.centered {
	text-align: center;
}

.floatLeft {
	float: left;
	clear: left;
}

.floatRight {
	float: right;
	clear: right;
}

.hide {
	display: none;
}