/**************************************************************
   AUTHOR:  Pat Heard (fullahead.org)
   DATE:    2008.02.15
   PURPOSE: Controls the site layout
 **************************************************************/


/**************************************************************
   Common declarations
 **************************************************************/

.widthFull {
  width: 100%;
  min-width: 1000px;
}

.widthContent,
.widthSplash {
  position: relative;
  z-index: 3;
  clear: both;
  
  width: 940px;
  margin: 0 auto;
  padding: 0 30px;
}

.widthSplash {
  width: 790px;
}




/**************************************************************
   Visual elements: repeating wallpaper, black gradient
   and rows of seats
 **************************************************************/

#wall {
  position: relative;
  background: url(/images/bg/body.jpg) repeat top left;
}


#siding {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 118px;
  background: url(/images/bg/wall_siding.png) repeat top left;
}

#seats {
  clear: both;
  height: 51px;    
  background: url(/images/bg/seats.png) repeat-x bottom center;
}

#splash #seats {
  position: absolute;
  bottom: -25px;
  left: 0;
  z-index: 2;
}

#gradient {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  height: 309px;
  background: url(/images/bg/gradient.png) repeat-x top left;
}




/**************************************************************
   #header: holds logo and menu on content pages
 **************************************************************/

#header {
  padding: 10px 0;
  margin-bottom: 30px;
  background: url(/images/bg/header.png) repeat-y bottom left;
}

#splash #header {
  padding: 5px 0;
  margin-bottom: 10px;
  background: url(/images/bg/header_splash.png) repeat-y bottom left;  
}

#header>.widthContent>a>img {
  position: absolute;
  left: 13px;
  top: 7px;
  border: 0;
}


/* Main menu */
#header ul {    
  margin: 0;  
  padding: 2px 0 45px 243px;
  list-style: none;
}

#splash #header ul {
  padding: 0 14px;
}

#header ul li {
  margin: 0;
  padding: 0;
  display: inline;
}

#header ul li a {
  float: left;
  margin: 10px 0;
  padding: 0 10px;
  
  text-decoration: none;
  
  color: #65605d;
  border-right: 1px solid #211f1d;
}

#splash #header ul li a {
  padding: 0 14px;
}

#header ul li a:hover {
  color: #FFF;
}

#header ul li.last a {
  border: 0;
}

#header ul li.here a,
#header ul li.here a:hover {
  color: #fad75c;
}



/**************************************************************
   #stage: main stage for splash page
 **************************************************************/

#stage {
  position: relative;
  z-index: 2;
  
  height:734px; 
  width: 833px;
  margin: 0 auto;
}

/* Visual elements of the stage */
#stage .top {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 27px;
  
  width: 780px;
  height: 58px;
  background: url(/images/bg/stage_top_body.png) no-repeat top left;
}

#stage .top .shadow {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  
  width: 780px;
  height: 58px;
  background: url(/images/bg/stage_top_shadow.png) no-repeat top left;
}


#stage .topLeft {
  position: absolute;
  top: 58px;
  left: 4px;
  
  width: 48px;
  height: 55px;
  background: url(/images/bg/stage_top_left.png) no-repeat top left;
}

#stage .topRight {
  position: absolute;
  top: 58px;
  left: 782px;
  
  width: 49px;
  height: 55px;
  background: url(/images/bg/stage_top_right.png) no-repeat top left;
}


#stage .topCurtain {
  position: absolute;
  top: 58px;
  left: 52px;
  
  width: 731px;
  height: 55px;
  background: url(/images/bg/stage_top_curtain.jpg) no-repeat top left;
}

#stage .bodyShadow {
  position: absolute;
  z-index: 1;
  top: 113px;
  left: 0px;
  
  height: 525px;
  width: 833px;
  background: url(/images/bg/stage_body_shadow.png) repeat-y top left;
}


#stage .body .stairsLeft,
#stage .body .stairsRight {
  position: absolute;  
  top: 524px;  
  width: 96px;
  height: 86px;
}

#stage .body .stairsLeft {
  left: -96px;
  background: url(/images/bg/stage_stairs_left.jpg) no-repeat top left;
}

#stage .body .stairsRight {
  left: 792px;
  background: url(/images/bg/stage_stairs_right.jpg) no-repeat top left;
}

#stage .body {
  position: absolute;
  z-index: 2;
  top: 113px;
  left: 22px;
  
  width: 792px;
  height: 621px;
  background: #000 url(/images/bg/stage_body.jpg) no-repeat top left;
}


/* text elements of the stage */
#stage h1 {
  height: 84px;
  width: 410px;
  margin: 60px auto 5px auto;
  padding: 0;
  
  text-indent: -1000em;
  background: url(/images/bg/logo_showcamp.jpg) no-repeat top right;
}

#stage ul {
  width: 380px;
  margin: 0 auto;
  padding: 5px 0 15px 0;
  list-style: none;
  
  text-align: center;
  
  border-top: 1px solid #fff;  
}

#stage ul li {
  margin: 0;
  padding: 0;
  display: inline;
}

#stage ul li a {
  padding: 0 19px;
  
  text-decoration: none;
  font-size: 1.2em;
}

#stage ul li.first a {
  padding-left: 0;
}

#stage ul li.last a {
  padding-right: 0;
}

#stage p {
  width: 540px;
  margin: 10px auto 0 auto;
  text-align: justify;
}


/**************************************************************
   #movie: holder for the flash movie
 **************************************************************/

#movie {
  height: 221px;
  width: 371px;
  margin: 0 auto;
  background: #222;
}


/**************************************************************
   #columns: holds site columns
 **************************************************************/

#columns .full,
#columns .main,
#columns .side,
#columns .splash {
  padding-bottom: 30px;
}

#columns .full {
  width: 100%;
  float: left;  
}

#columns .main {
  width: 665px;
  float: right;    
}

#columns .side {  
  width: 240px;
  float: left;
}

#columns .splash {
  width: 540px;
  margin: 25px auto;
}


/* Rounded black side blocks */
#columns .side .block {  
  margin: 0 0 30px 0;
}

#columns .side .block .top,
#columns .side .block .bottom,
#columns .side .block .body {
  display: block;
}

#columns .side .block .body {
  background: #000;
}

#columns .side .block .top,
#columns .side .block .bottom {
  height: 21px;  
}

#columns .side .block .top {
  background: url(/images/bg/block_top.png) no-repeat top left;
}

#columns .side .block .bottom {
  background: url(/images/bg/block_bottom.png) no-repeat bottom left;
}


#columns .side .block h1 {
  position: relative;
  top: -6px;
  padding: 0 20px;
  margin: 0;
}

#columns .side .block p {
  padding: 0 20px;
  margin: 0;
}

#columns .side .block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#columns .side .block ul li {
  display: inline;
}

/**********
 * Case added because he couldn't get it to work anywhere else, just for the 'about us' showcamp sidebar only
 **********/
#columns .side .block #showcamp_is {
  padding-left: 15px;	
}
#columns .side .block #showcamp_is ul {
  margin: 0;
}
#columns .side .block #showcamp_is ul li {
  display: block;
/*  padding: 5px 8px 5px 0; */
  padding-right: 8px;
  line-height: 1.2em;
  color: #fdecc1;
}
/********** done with case stuff */

#columns .side .block ul li a {
  margin: 0 20px;
  padding: 5px 0;
  display: block;
  
  text-decoration: none;
  
  color: #65605d;
  border-top: 1px solid #0f0e0e;  
}

#columns .side .block ul li a:hover {
  color: #fff;
}

#columns .side .block ul li.here a,
#columns .side .block ul li.here a:hover {
  color: #fad75c;
}




/**************************************************************
   #footer: site copyright and bottom menu
 **************************************************************/

#splash #footer {
  width: 100%;
  margin-top: 50px;
  border-top: 1px solid #fff;
}

#footer p {
  float: left;
  padding: 10px 0 15px 0;
  font-size: 10px;
}

#footer ul {
  float: right;
  margin: 10px 0 20px 0;
  padding: 0;
  list-style: none;
}

#footer ul li {
  margin: 0;
  padding: 0;
  display: inline;
}

#footer ul li a {
  padding: 0 10px;
  border-right: 1px solid #26231f;
}

#footer ul li.last a {
  padding-right: 0;
  border: 0;
}


/**************************************************************
   Shows
 **************************************************************/

.show {
  padding: 15px 0;
}

.show h2 {
  margin: 0;
  padding: 0;
}

.show .poster {
  float: left;
  margin: 0 10px 10px 0;
}
.show .poster img {
	border: 0;
}

/**************************************************************
   Text headers
 **************************************************************/

.hdr {
  position: relative;
  top: 0px;
  left: -10px;

  padding: 0;
  margin: 0;
  height: 34px;
  text-indent: -1000em;
}

.imgEducation {
  background: url(/images/text/hdr_education.jpg) no-repeat top left;
}

.imgShows {
  background: url(/images/text/hdr_shows.jpg) no-repeat top left;
}


/**************************************************************
   Icons
 **************************************************************/

.icon {
  padding: 5px 0 5px 25px;
}

.tickets {
  background: url(/images/icons/tickets.jpg) no-repeat center left;  
}


/**************************************************************
   Utility Classes
 **************************************************************/
 
.floatRight {
  float: right;
}
 
.floatLeft {
  float: left;
}
 
.clear {
  clear: both;
}
 
span.clear {
  display: block;
  width: 100%;
}

.block {
  display: block;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
}