/* 
Title:       Theatre Group default style
Author:    Richard Copperwaite
*/

@font-face {
	font-family: 'Museo Slab 100';
	src: url('/fonts/ms100.otf') format("opentype");
}
@font-face {
	font-family: 'Museo Slab 300';
	src: url('/fonts/ms300.otf') format("opentype");
}
@font-face {
	font-family: 'Museo Slab 500';
	src: url('/fonts/ms500.otf') format("opentype");
}
@font-face {
	font-family: 'Museo Slab 700';
	src: url('/fonts/ms700.otf') format("opentype");
}
@font-face {
	font-family: 'Bebas Neue';
	src: url('/beta/fonts/bebasneue/bebasneue-webfont.eot');
	src: url('/beta/fonts/bebasneue/bebasneue-webfont.woff') format("woff"),
		  url('/beta/fonts/bebasneue/bebasneue-webfont.ttf') format("truetype"),
		  url('/beta/fonts/bebasneue/bebasneue-webfont.svg') format("svg");
}

/*Basic elements*/

body { padding: 0px; margin: 0px; background: #31363E; color: #383d44; }		/*Set page background and main font colour here. You may use an image for the background*/

/*Be sure to set the background of all the following elements in the panes so they do not show through to the page background*/
/*Mobile version*/
@media only screen and (max-device-width: 480px) {
    div#wrapper{
        width: 400px;
    }
    
    .width{ width: 400px; margin: 0 auto; }		/*This is the width of the main content pane. Not recommended to go above 760px. Alternatively can use percentage value*/
    .width1{ width: 30px; margin: 0 auto; float: left; }
    .width2{ width: 370px; margin: 0 auto; float: left; }
}
/*Main text*/
p {
	line-height: 19px;
	margin: 0px;
	font-family: 'Museo Slab 500', sans-serif;
	font-size: 13px;
	}

ol {
	font-family: Verdana, sans-serif;
	font-size: 13px;
	margin-top: 0px;
}

form {
	margin:0px;
}

textarea {
	font-family: Verdana, sans-serif;
	font-size: small;
}	

input {
	font-family: Verdana, sans-serif;
	font-size: small;
}	

	/*Header text style 1*/
h1 {
	margin: 0 0 15px 0;
	padding: 0;
	font-family: 'Bebas Neue', serif;
	font-weight: normal;
	font-size: 40px;
	line-height: 1.5em;
	color: black;
	border-bottom: 1px solid rgb(221,217,135);
	/*text-shadow: 1px 1px 3px rgba(0,0,0,0.4);*/
	}
	
h2 {
	margin: 0 0 10px 0;
	padding: 0;
	font-family: 'Bebas Neue', serif;
	font-weight: normal;
	font-size: 36px;
	line-height: 1.5em;
	color: black;
	border-bottom: 1px solid rgb(221,217,135);
	}
	
	h3 {
	margin: 0 0 10px 0;
	padding: 0;
	font-family: 'Bebas Neue', serif;
	font-weight: normal;
	font-size: 28px;
	line-height: 1.5em;
	color: black;
	border-bottom: 1px solid rgb(221,217,135);
}
	
/*Links*/
 a:link, a:visited {
	padding-bottom: 1px;
	color: #326ea1;
	text-decoration: none;
	border-bottom: 1px solid rgb(221,217,135);
	}
	
/*Links when hovered over with the mouse*/
a:hover {
	padding-bottom: 0;
	color: #383d44;
	border-bottom: 2px solid rgb(221,217,135);
	}

/*Page layout guides*/
	
.width{ width: 900px; margin: 0 auto; }		/*This is the width of the main content pane. Not recommended to go above 760px. Alternatively can use percentage value*/
.width1{ width: 170px; height: 380px; margin: 0 auto; float: left; }
.width2{ width: 730px; margin: 0 auto; float: left; }

/*These are the vertical spacers between the panes. You may want to adjust their height values*/
.height1{height:5px; margin: 0 auto; background: transparent; }
.height2{height:0px; margin: 0 auto; background: transparent; }
.height3{height:0px; margin: 0 auto; background: transparent; }
.height4{height:0px; margin: 0 auto; background: transparent; }
.height5{height:0px; margin: 0 auto; background: transparent; }

.clear { clear: both; }
.clearmain { clear: both; }

/*The header is split into two. Make their combined width equal the width of the main content pane to display inline*/
.headerleft { width: 900px; float: left; }
.headerright { width: 0px; float: left; }

/*Same with the footer*/
.footerleft { width: 620px; float: left; }
.footerright { width: 280px; float: left; }

#headerleft {
  background: rgb(185,55,10) url(/images/testing/logo.jpg) 0px -4px; background-repeat: no-repeat;	/*This is the logo image. To use your own make the path images/yourstylename/yourimage*/
  margin-top: -5px;
  margin-bottom: -4px;
  padding: 31px;
  height: 98px;
  width: 834px;
  }
#headerleft a {
	position:relative;
	left: -15px;
	top: 94px;
	border-bottom: none;
}

#headerright {
  background: rgb(190,55,15);
  padding: 0px;
/*	text-align: right;
	font: italic normal 12pt georgia; 	
	letter-spacing: 1px; 
	margin-bottom: 0px; */
  }
#headerright * { color: #383d44; }

#headerright span {
  /*If you wish to hide the title text, for instance if you already had the text in a large logo image, uncomment out the following line*/
  display: none;
  background-color: rgb(255,255,153);
}

/*Navigation pane*/

#nav{
  background: rgb(185,55,10);
  height: 400px;
  text-align: center;
  margin: 4px;
  padding: 0px;
  color: black; 
  width: 170px;  
  border-radius: 10px;
}

#nav * { color: black; }


#nav ul {
	margin: 0;
	margin-left: -22px;
	padding: 0;
	list-style: none;
	text-align: center;
	/*border-top: 1px solid #464a52;*/
	background: rgb(185,55,10);
	}

html>body #nav ul { /* Internet Explorer 6, 5.5 fix */
	position: relative;
	left: 50%;
	}

#nav li {
	float: left;
	margin: 0px;
	padding: 0;
	font-family: 'Museo Slab 500', serif;
	font-size: 20px;
	letter-spacing: 0px;
	/*Uncomment out the following line to make the nav links UPPERCASE, or change it to lowercase*/
	/*text-transform: uppercase;*/
	background: transparent;
	width: 134px;
	}
#nav li a {
	float: left;
	padding: 5px 0px 5px 0px;			/*Adjust this second padding value carefully to align the nav links along the pane*/
	text-decoration: none;
	color: rgb(255,237,84);
	border: none;
	text-align: center;
	background: rgb(185,55,10);
	width: 134px;
	/*background: url(/images/default/nav-bg.gif) no-repeat bottom right;*/
	}

html>body #nav li a { /* Internet Explorer 6 & 5.5 fix, they can't read this! */
	float: left;
	position: relative;
	left: -50%;
	padding: 8px 20px;			/*Adjust this second padding value carefully to align the nav links along the pane*/
	text-decoration: none;
	color: rgb(255,237,84);
	border: none;
	text-align: center;
	background: rgb(185,55,10);
	width: 134px;
	/*background: url(/images/default/nav-bg.gif) no-repeat bottom right;*/
}
	
/*This is the nav link style with the mouse hovering over*/
#nav li a:hover {
	color: rgb(255,255,153);
	background: rgb(148,44,8);
	}
/*This is the nav link style for the current page highlighting*/
#nav li a.active {
	color: rgb(255,255,153);
	background: rgb(130,39,7);
	/*url(/images/default/nav-on-bg.gif) repeat-x top left*/;
	}

#main {
  background: rgb(255,255,153);	/*Set the main content pane background here. Again, you may use an image*/
  margin: 4px;
  padding: 26px; 
}

#footerleft {
  font-family: 'Museo Slab 300'; 	/*This is the font for the smallprint. Keep it small!*/
  font-size: 14px;
  line-height: 1.7em;
  margin: -4px 0px 2px 0px;
  padding: 13px 27px 40px 27px;
  background: rgb(185,55,10);
  color: rgb(255,237,84);
  height: 43px;
}
  
#footerleft * {
	background: rgb(185,55,10);
	color: rgb(255,237,84);
}

#footerright {
  background: rgb(185,55,10);
  text-align: right;	/*Aligns the style switching form to the right*/
  margin: -4px 2px 2px 0px;
  padding: 27px; color: rgb(255,237,84); 
  height: 42px;
  width: 222px;
}

/*This is for lists which are dynamically generated*/
.list{position: relative;}
.listspaceracross{width: 10px; height: 5px; float: left;}
.listspacerdown{height: 10px;}
.listspacerdown2{height: 4px;}
.listelementname{position: relative; width: 45%; float: left; }
.listelementrole{position: relative; width: 350px; float: left; }

/*Formatting for pictures*/

#memberpic , .showpic , .showpicindex , .pic , .pic2 , .posterpic , .budgetpic {
  	padding-top: 2px;
  	padding-left: 5px;
  	padding-right: 5px;
  	padding-bottom: 2px;
}


#memberpic { width: 200px; }
.showpic { width: 300px; }
.showpicindex { width: 150px;
		  margin-top: 4px; }
.pic { width: 500px;
	margin-left: auto;
	margin-right: auto; }

.posterpic { width: 200px; }

.posterpicspacer1 {
		position: relative;
		float: left;
		width: 200px;
		margin-right: 20px;
}

.posterpicspacer2 {
		position: relative;
		float: right;
		width: 200px;
		margin-left: 20px;
}

.budgetpic { width: 575px;
		margin-left: auto;
		margin-right: auto; }

#slideshow {
	width: 350px;
  	background: #424240;
  	/*padding-top: 2px;
  	padding-left: 5px;
  	padding-right: 5px;
  	padding-bottom: 7px;*/
	position: relative;
	float: right;
  	margin-left: 20px;
	-webkit-box-shadow: 0px 3px 10px #000;
	box-shadow: 0px 3px 10px #000;
	-moz-box-shadow: 0px 3px 10px #000;
}

.pic2 { width: 200px;
	margin-left: auto;
	margin-right: auto; }

.justify {
  text-align: justify;
}
  
#memberpicspacer {
  position: relative;
  float: left;
  width: 250px;
}
  
.showpicspacer {
  position: relative;
  float: left;
  width: 335px;
}
  
.showpicindexspacer {
  position: relative;
  float: left;
  width: 175px;
}
  
html>body .textright {
	text-align: right;
}
  
 /*Little date icons for show dates*/
.datebullet{position: relative; width: 20px; height: 15px; float: left; background: rgb(255,255,153) url(/images/default/date.gif); background-repeat: no-repeat; }
.datespacerdown{height: 5px; background: rgb(255,255,153); }
  
 .centre {
  text-align: center;
  background: rgb(255,255,153);
  }
  
/*Gallery and Rehearsals stuff*/
  
  table {
	font-family: Verdana, sans-serif;
	font-size: small;
    background-color:rgb(255,255,153);
	border-collapse: collapse;
	}
  table th {
	background-color:rgb(255,255,153);
    padding: 4px;
	border: 1px solid black;
	}
  table td {
	background-color:rgb(255,255,153);
  	padding: 4px;
	border: 1px solid black;
	}
  table tr { 
	background-color:rgb(255,255,153);
	}
  center {background-color:rgb(255,255,153);}

html>body .floatright { /* Internet Explorer 6, 5.5 fix */
	float: right;
	padding-left: 15px;
}
.floatright img {
	padding: 0px;
	border: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	border-bottom: 0px;
}
.floatright a{
	padding: 0px;
	border: 0px;
	padding-left: 10px;
	padding-bottom: 0px;
	border-bottom: 0px;
}
#rehearsalbox {
	width: 270px;
}
html>body #rehearsalbox { /* Internet Explorer 6, 5.5 fix */
	float: right;
}
#rehearsals {
	padding: 20px;
	margin-left: 15px;
	margin-bottom: 15px;
	background: rgb(185,55,10);
	width: 220px;
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px; 
  border-radius: 10px;
  -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
  box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
}
#rehearsals * {
	background: rgb(185,55,10);
}
#rehearsals h1 {
	color: rgb(255,237,84);
	border-bottom: 1px solid rgb(255,255,153);
}
#rehearsals p {
	color: rgb(255,255,153);
}
#rehearsals a {
	color: rgb(255,237,84);
}
#loggedin, #loggedin * {
	text-align: center;
	font-family: 'Museo Slab 300', sans-serif;
	font-size: small;
	color: rgb(255,255,153);
	margin-left: -4px;
	margin-top: -4px;
	width: 134px;
}
#loggedin a:link, a:visited{
	font-weight: normal;
	border-bottom: none;
}
#loggedin a:hover {
	color: #FFF;
}
#loggedin .break {
	display:block;
	border-bottom: 1px solid #5B1B05;
	background-color: #822707;
	margin-right: -4px;
	width: 170px;
	margin-left: 4px;
	padding: 2px 0px 2px 0px;
	border-right: 4px solid #822707;
	padding-top: 5px;
   padding-bottom: 5px;
	padding-left: 4px;
}
#loggedin .fill {
	display:none;
}
#flashHolder {
	position: relative;
	right: 10px;
}
#email {unicode-bidi:bidi-override; 
		direction: rtl; 
		text-align: left;}

#fb-like-box {
	float:right;
	background-color:white;
	margin-bottom:20px;
	display: none;
}

/*Stuff for quotes*/


blockquote p {
	
padding: 0px 30px 0px 0px;
font-size: 20pt;
line-height: 30px;
float: left;
text-shadow: 2px 2px 3px rgba(0,0,0,0.4);
text-align: center;
background: url(/images/lowerquote.png) bottom right no-repeat;
}
blockquote {
padding: 30px;
line-height: 25px;
font-size: 20pt;
text-align: center;
text-shadow: 2px 2px 3px rgba(0,0,0,0.4);
background: url(/images/upperquote.png) top left no-repeat;
}
cite a{
font-size: 16pt;
float: right;
}
blockquote:first-line{
text-align: center;
}


div.stars {
font-size: 35pt;
text-shadow: 2px 2px 3px rgba(0,0,0,0.4);
color: #000000;
text-align: center;
padding-bottom: 19pt;
	}
	
.formtextbox {
	font-size: 18px;
	font-family: 'Museo Slab 500';
	width: 300px;
}