/* -----

	reruntheater.com
	
	Author: Collin Olan collin@kernandlead.com
	Created: 2010-06-23

	1. User Agent Reset
	2. Font Embedding
	3. Base Screen Layout
	4. Base Screen Style
	5. Media Specific Style
	6. Fancybox Override


----- */

/* ----- 1. User Agent Reset ----- */
@media all {
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
	}	
}


/* ----- 2. Font Embedding ----- */
@font-face {
	font-family: 'AlteHaasGroteskRegular';
	src: url('../type/altehaasgroteskregular-webfont.eot');
	src: local('☺'), url('../type/altehaasgroteskregular-webfont.woff') format('woff'), url('../type/altehaasgroteskregular-webfont.ttf') format('truetype'), url('../type/altehaasgroteskregular-webfont.svg#webfontPxaxvqSn') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'AlteHaasGroteskBold';
	src: url('../type/altehaasgroteskbold-webfont.eot');
	src: local('☺'), url('../type/altehaasgroteskbold-webfont.woff') format('woff'), url('../type/altehaasgroteskbold-webfont.ttf') format('truetype'), url('../type/altehaasgroteskbold-webfont.svg#webfontDPhCRU4d') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ReklameScriptRegular';
	src: url('../type/reklamescript-regular_demo-webfont.eot');
	src: local('☺'), url('../type/reklamescript-regular_demo-webfont.woff') format('woff'), url('../type/reklamescript-regular_demo-webfont.ttf') format('truetype'), url('../type/reklamescript-regular_demo-webfont.svg#webfontEoUPKNlL') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* ----- 4. Base Screen Layout ----- */
@media screen {
	body {
		margin: 0;
	}
	
	#header,
	#nav,
	.wrapper {
		margin: 0 auto;
		width: 960px;
	}
	
	#shows .wrapper,
	#menu .wrapper,
	#about .wrapper,
	#footer .wrapper {
		padding: 1em 1% 2em;
	}

}


/* ----- 4. Base Screen Style ----- */
@media screen {
	/* --- 4a. Common --- */
	body {
		background: #000 url(../images/Sunset.jpg) no-repeat 50% 0;
		color: #c0c0c0;
		font: normal normal 87.5%/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 14px (14 ÷ 16 = 0.875) */
	}
	
	cite {
		font-style: italic;
	}
	
	h1 {
		font-size: 2.5em;
	}
	
	h2 {
		font-family: 'ReklameScriptRegular', 'Brush Script MT', cursive;
		font-size: 2.714285714285714em;
	}
	
	h3 {
		font-size: 1.75em;
	}
	
	img {
		max-width: 100%;
	}
	
	p {
		margin-bottom: 1em;
	}
	
	strong {
		font-weight:bold;
	}
	
	.header {
		position: relative;
	}
	
	.header p {
		font-size: 1.4em;
	}
	
	.button {
		background-color: #000;
		background-color: rgba(0,0,0,0.6);
		border: none !important;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		color: #fbf5c7;
		display: inline-block;
		padding: 0.8em 20px;
		text-decoration: none;
		text-transform: uppercase;
	}
	
	.top {
		font-family: 'ReklameScriptRegular', 'Brush Script MT', cursive;
		font-size: 1.714285714285714em;
		letter-spacing: 1px;
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.tooltip {
		background: transparent url(../images/arrow-tooltip-top.gif) no-repeat 50% 0;
		padding-top: 6px;
		position: absolute;
		width: auto;
		z-index: 3;
	}
	
	.tooltip span {
		background-color: #be2106;
		background-color: rgba(190,33,6,0.95);
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		color: #fbf5c7;
		display: block;
		padding: 1em;
	}
	
	/* ----- Announcement ------ */
	#announcement {
		left: 50%;
		margin-left: -480px;
		overflow: hidden;
		position: absolute;
		width: 960px;
	}
	
	#announcement p {
		background: transparent url(../images/21-and-over.png) no-repeat 0 100%;
		float: right;
		height: 95px;
		text-indent: -9999px;
		width: 116px;
	}
	
	/* ----- 4b. Header ----- */
	#header {
		height: 139px;
		padding-top: 4px;
		position:relative;
	}
	
	#header .logo {
		left: -22px;
		position: relative;
	}
	
	#header h1,
	#header .tagline {
		left: -9999px;
		position: absolute;
	}
	
	/* ----- 4c. Navigation ----- */
	#nav {
		left: 50%;
		margin-left: -480px;
		position: absolute;
		top: 0;
		width: 960px;
	}
	
	#nav ul {
		padding-right: 16.6666666666667%;
		text-align: right;
	}
	
	#nav li {
		display: inline-block;
		list-style: none;
		margin: 10px;
		text-align: center;
		width: 14.5833333333333%;
	}
	
		#nav li a {
			color: #fbf5c7;
			font-family: 'ReklameScriptRegular', 'Brush Script MT', cursive;
			font-size: 1.714285714285714em;
			text-decoration: none;
		}
		
		#nav li a:hover {
			color: #be2106;
		}

	/* ----- 4d. Feature ----- */
	#feature {
		color: #76756d;
		height: 414px;
	}
	
	#feature a {
		border-bottom: 1px dotted #921803;
		color: #BE2106;
		text-decoration: none;
	}
	
	#feature .wrapper {
		background-color: #17161b;
		height: 360px;
	}
	
	#feature .header,
	#feature .caption {
		float: right;
		width: 33.3333333333333%;
	}

	#feature .header,
	#feature h3,
	#feature h3 a {
		color: #fbf5c7;
		text-decoration:none;
		border:none;
	}
		
	#feature .video {
		float: left;
		width: 65.625%;
	}
	
	#feature .button {
		background-color: #be2106;
		color: #fbf5c7;
	}
	
	#feature .more:hover {
		border-bottom-style: solid;
	}
	
	#feature .available {
		font-size: 0.9em;
		padding: 0.8em;
	}
	
	/* twitter field */
	
	#twitterFeed {
		background-color:#32303A;
		clear:both;
		margin:0 auto;
		width:960px;
	}
	
	#twitterFeed #tweet {font-size:10px; padding-left:10px;}
	
	/* ----- 4e. Upcoming ----- */
	#shows {
		background: #17161b url(../images/Upcoming-Gradient.png) repeat-x 0 0;
	}
	
	#shows a {
		color: #be2106;
	}

	#shows .header h2 {
		background: #be2106 url(../images/Upcoming-Header.png) no-repeat 100% 50%;
		color: #fbf5c7;
		float: left;
		padding: 0 1%;
		width: 65.625%;
	}
	
	#shows .header .top {
		background: transparent url(../images/arrow-red.png) no-repeat 100% 75%;
		padding-right: 12px;
	}
	
	#shows .article {
		background: #fbf5c7 url(../images/Wagner-Grid.png) repeat 0 0;
		border: 10px solid #cdc8a5;
		clear: both;
		color: #5b5b5b;
		text-transform: uppercase;
	}
	
		#shows .article ol {
			list-style: none;
			overflow: hidden;
			width: 100%;
		}
		
		#shows ol li {
			overflow: hidden;
			padding: 0 1em;
		}
		
		#shows .article h3 {
			clear: left;
			color: #be2106;
			float: right;
			font: normal bold 2.571428571428571em/1 'AlteHaasGroteskBold', sans-serif;
			width: 79.25%;
		}
		
		#shows .article .date {
			clear: right;
			float: right;
			width: 79.25%;
		}
		
		#shows .button {
			color: #fbf5c7;
			float: left;
			position: relative;
			top: -2em;
		}
		
		#shows .button:hover {
			background-color: #be2106;
		}
		
	/* ----- 4g. Facebook ----- */
	
	#facebook {
	
	}
	
	#facebook .wrapper {
		height:168px;
		overflow:hidden;
		width:956px;
	}
	
	#facebook  iframe {
		left:-2px;
		position:relative;
		top:-1px;
	}

	/* ----- 4g. Menu ----- */
	#menu {
		background-color: #17161b;
		color: #be2106;
	}
	
	#menu .wrapper {
		overflow: hidden;
	}
	
	#menu .header .top {
		background: transparent url(../images/arrow-yellow.png) no-repeat 100% 75%;
		padding-right: 12px;
	}
	
	#menu a {
		color: #fbf5c7;
	}
	
	#menu .article .note {
		color: #fbf5c7;
		width: 63.625%;
	}
	
	#menu .menu-item {		
		clear: right;
		float: right;
		margin-bottom: 2em;
		margin-right: 2%;
		width: 31%;
	}
	
	#menu #dogs,
	#menu #popcorn {
		background-color: #be2106;
		color: #fbf5c7;
		float: none;
		margin-right: 0;
		padding: 1em 2%;
		width: auto;
	}
	
	#menu #dogs h3,
	#menu #popcorn h3 {
		font-family: 'AlteHaasGroteskBold';
		text-transform: uppercase;
	}
	
	#menu #dogs ul,
	#menu #popcorn ul {
		color: #5C0E01;
		margin-bottom:1em;
	}
	
	#menu .menu-item ul {
		color: #C7C29F;
		font-size: 0.857142857142857em;
		padding-left: 1em;
	}

	#menu .article .main {
		float: left;
		width: 63.625%;
	}
	
	#menu #popcorn {
		clear: left;
	}
	

	/* ----- 4h. About ----- */
	#about {
		background-color: #32303a;
		border-top: 5px solid #17161b;
		clear: both;
	}
	
	#about .wrapper {
		overflow: hidden;
	}
	
	#about .header .top {
		background: transparent url(../images/arrow-purple.png) no-repeat 100% 75%;
		padding-right: 12px;
	}
	
	#about a {
		border-bottom: 1px dotted #77728a;
		color: #ddd9ee;
		text-decoration: none;
	}
	
	#about a:hover {
		border-bottom-style: solid;
	}
	
	#about .button {
		margin-bottom: 1em;
	}
	
	#about .button:hover {
		background-color: #201e25;
	}

	#about .gallery {
		background-color: #201e25;
		margin-top: 1em;
		overflow: hidden;
		padding: 10px;
		position: relative;
		width: 940px;
	}
				
		#about .gallery .caption {
			color: #6C677C;
			font-size: 0.857142857142857em;
		}
		
		#about .gallery a,
		#about .gallery a img {
			display: block;
		}

		#about .gallery a {
			background-color: #ddd9ee;
			border: none;
			float: left;
			margin-right: 10px;
		}

		#about .gallery img {
			background-color: #201e25;
		}

		#about .gallery .window-shade {
			background-color: #000;
			background-color: rgba(0,0,0,0.5);
			border-radius: 20px;
			-moz-border-radius: 20px;
			-webkit-border-radius: 20px;
			color: #fff;
			left: 22.9166666666667%;
			padding: 12px 20px;
			position: absolute;
			top: 50%;
		}
		
	#about .bios {
		width: 65.625%;
	}
	
	#about .bios span.n {
		color: #eee;
	}
	
	#about .reservations {
		float: right;
		width: 31.75%;
	}
	
		#about .reservations h3 {
			visibility: hidden;
		}
	
	/* ----- 4i. Press ----- */
	#press {
		background-color:#201E25;
		color:#FBF5C7;
	}
	
	#press .header .top {
		background:url("../images/arrow-yellow.png") no-repeat scroll 100% 75% transparent;
		color:#FBF5C7;
		border:none;
		padding-right:12px;	
	}
	
	#press a {
		border-bottom:1px dotted #921803;
		color:#BE2106;
		text-decoration:none;
	}
	
	#press .article {
	
	}
	
	#press .article blockquote {
		font-size:1.4em;
		padding:1em 0;
		text-align:center;
	}
	
	#press .article blockquote .quote {
		font-family:Trebuchet MS;
		font-size:3em;
		line-height:0;
		vertical-align:-0.4em;
	}
	
	#press .article .cite {
		font-size:18px;
		text-align:right;
	}
	
	#press .footer {
		text-align:right;
	}
	
	/* ----- 4j. Footer ----- */
	#footer {
		background-color: #be2106;
		color: #17161b;
/*		color: #32303a;*/
	}
	
	#footer a {
		color: #fbf5c7;
		cursor:pointer;
	}
	
	#footer .tooltip {
		background: transparent url(../images/arrow-tooltip-bottom.gif) no-repeat 12px 100%;
		padding-top: 0;
		padding-bottom: 6px;
		position: absolute;
		top:-100px;
		width: auto;
		z-index: 3;
	}
	
	#rebarLogo {float:right;}
	
	#footer #twitter .tooltip {background-position: 48px 100%;}
	
	#footer .tooltip span {
		background-color: #be2106;
		background-color: rgba(190,33,6,0.95);
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		color: #fbf5c7;
		display: block;
		padding: 1em;
		white-space:nowrap;
	}
	
	/* ----- 4k. Mail Chimp Newsletter Form ----- */
	
	/* header */
	
	#email-signup {
		color: #000;
		color: rgba(0, 0, 0, 0.6);
		position: absolute;
		bottom: 2px;
		right: 0;
	}
	
	#email-signup label {
		color: #FBF5C7;
	}
	
	#email-signup input[type=text] {
		-webkit-border-radius: 20px;
		   -moz-border-radius: 20px;
		        border-radius: 20px;
		-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
		   -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
		     -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
		        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
		background-color: rgb(251, 245, 199);
		background-color: rgba(251, 245, 199, 0.6);
		border: none;
		color: #FBF5C7;
		display: inline-block;
		padding: 0.8em 20px;
		text-decoration: none;
	}

	#email-signup .button:hover {
		cursor: pointer;
	}
	
	/* footer */
	#footer .signup h2 {
		margin-bottom:10px;
	}
	
	#footer .mc-field-group {
		float:left;
		height:100px;
	}
	
	#mce-EMAIL {
		background-color: #FFF;
		border: none !important;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		border-radius: 20px;
		color: #32303A;
		display: inline-block;
		padding: 0.8em 20px;
		margin-right:10px;
		text-decoration: none;
	}
	
	#mc-embedded-subscribe {
		background-color: #000;
		background-color: rgba(0,0,0,0.6);
		border: none !important;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		cursor:pointer;
		color: #fbf5c7;
		display: inline-block;
		padding: 0.8em 20px;
		text-decoration: none;
		text-transform: uppercase;	
	}
	
	#mc-embedded-subscribe:hover {background-color:#BE2106;}
}


/* ----- 5. Media Specific Style ----- */
@media screen and (max-width: 600px) {
	#header,
	#nav,
	#feature .wrapper,
	#shows .wrapper,
	#menu .wrapper,
	#about .wrapper,
	#footer .wrapper {
		margin: 0 auto;
		width: 93.75%;
	}
	
	#nav,
	#main .section,
	#feature .header,
	#feature .caption,
	#feature .video,
	#about .gallery {
		float: none;
		width: auto;
	}
	
	#feature,
	#feature .wrapper {
		height: auto;
	}
	
	#feature .header,
	#feature .caption {
		padding: 10px;
	}
	
	#header {
		height: auto;
	}
	
	#header .logo {
		left: 0;
	}
	
	#nav {
		left: 0;
		margin-left: 0;
		position: static;
	}
	
	#nav ul {
		float: none;
		width: auto;
	}

}

@media screen and (max-width: 480px) {
	#header,
	#nav,
	#feature .wrapper,
	#shows .wrapper,
	#menu .wrapper,
	#about .wrapper,
	#footer .wrapper {
		margin: 0 auto;
		width: 93.75%;
	}
	
	#main .section,
	#feature .header,
	#feature .caption,
	#feature .video,
	#upcoming .header,
	#about .gallery {
		float: none;
		width: auto;
	}
	
	#feature,
	#feature .wrapper {
		height: auto;
	}
	
	#feature .header,
	#feature .caption {
		padding: 10px;
	}
	
	#header {
		height: auto;
	}
	
	#header .logo {
		left: 0;
	}
	
	#nav {
		left: 0;
		margin-left: 0;
		position: static;
	}
	
	#nav ul {
		float: none;
		width: auto;
	}
}

/* ----- 6. Fancybox Override ----- */
#fancybox-outer {
	background-color: #fbf5c7;
}