/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.chromeframe {position: absolute; top: 0;}


@font-face {
	font-family: 'AvenirLTStd35Light';
	src: url('../fonts/avenirltstd-light-webfont.eot');
	src: url('../fonts/avenirltstd-light-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/avenirltstd-light-webfont.woff') format('woff'),  url('../fonts/avenirltstd-light-webfont.ttf') format('truetype'),  url('../fonts/avenirltstd-light-webfont.svg#AvenirLTStd35Light') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
  font-family: 'Elusive-Icons';
  src:url('../fonts/Elusive-Icons.eot');
  src:url('../fonts/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Elusive-Icons.woff') format('woff'),
    url('../fonts/Elusive-Icons.ttf') format('truetype'),
    url('../fonts/Elusive-Icons.svg#Elusive-Icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 13px Helmet, Freesans, sans-serif;}
body, select, input, textarea {color: #242424;}


div.content {
	margin: 0 auto;
	width: 960px;
}

/* Header
---------------------------------------*/
header {
	background: #f6f6f6;
	height: 482px;
}

body header div.container {
	margin: 0 auto;
	position: relative;
	z-index: 2;
	width: 960px
}
body header div.content {
	position: absolute;
	left: 0;
	top: 0;
	width: 960px;
}

/* Logo */
header a#siteLogo {
	background: url('img/logo.png') no-repeat 0 0;
	display: block;
	float: left;
	margin: 10px 0 0 10px;
	height: 188px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 149px;
}

/* Navigation */
header nav {
	background: rgb(255,255,255);
	background: rgba(255,255,255,.75);
	float: right;
	height: 50px;
	margin: 10px;
}

header nav ol {
	list-style: none;
}
header nav ol li {
	float: left;
}
header nav ol li a {
	display: block;;
	color: #3c3c3c;
	font-family: 'AvenirLTStd35Light', sans-serif;
	font-size: 14px;
	line-height: 50px;
	padding: 0 20px;
	text-decoration: none;
}
header nav ol li.active a,
header nav ol li:hover a {
	background: #e13027;
	color: #fff;
}
header nav ol li.active a.about,
header nav ol li:hover a.about {
	background: #019ae0;
}
header nav ol li.active a.hire,
header nav ol li:hover a.hire {
	background: #5e990e;
}
header nav ol li.active a.faq,
header nav ol li:hover a.faq {
	background: #4c0f90;
}

/* Phone Number */
header p.phone {
	clear: right;
	color: #fff;
	float: right;
	font-family: 'AvenirLTStd35Light', sans-serif;
	font-size: 15px;
	margin: 0 30px 0 0;
}
header p.phone:before {
	color: #fff;
	content: '\e065';
	font-size: 14px;
	margin: 0 5px 0 0;
}

/* Header Carousel */
header div#headerImage {
	border-bottom: 3px solid #e13027;
	height: 482px;
	margin: 0 auto;
	min-width: 960px;
	max-width: 1296px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
body.about header div#headerImage { background: url('../img/headers/about.jpg') no-repeat center top;}
body.hire header div#headerImage { background: url('../img/headers/hire.jpg') no-repeat center top;}
body.faq header div#headerImage { background: url('../img/headers/faq.jpg') no-repeat center top;}
body.contact header div#headerImage { background: url('../img/headers/contact.jpg') no-repeat center top;}

header div#headerImage a.prev,
header div#headerImage a.next {
	background: rgba(255,255,255,0.5);
	display: block;
	height: 30px;
	position: absolute;
	bottom: 10px;
	width: 30px;
	text-decoration: none;
	z-index: 5;
}
header div#headerImage a.prev {
	right: 210px;
}
header div#headerImage a.next {
	right: 178px;
}
header div#headerImage a.prev:before,
header div#headerImage a.next:before {
	color: #fff;
	font-family: 'Elusive-Icons';
	font-size: 18px;
	line-height: 30px;
	padding-left: 5px;
	text-align: center;
}
header div#headerImage a.prev:hover:before,
header div#headerImage a.next:hover:before {
	color: #E13027;
}

header div#headerImage a.next:before {
	content: '\e0cc';
	padding-left: 7px;
}
header div#headerImage a.prev:before {
	content: '\e0cd';
}

/* Content
---------------------------------------*/
div.wrapper {
	margin: 0 auto;
	overflow: hidden;
	padding: 30px 0 0 0;
	width: 960px;
}

.home div.wrapper article,
.faq div.wrapper article {
	float: none;
	width: 100%;
}

div.wrapper article {
	float: left;
	padding: 0 10px;
	width: 670px;
}
div.wrapper aside {
	float: left;
	padding: 86px 0 0 30px;
	width: 290px;
}


/* Feature Boxes */
div.wrapper a.feature {
	border-bottom: 3px solid #e13027;
	float: left;
	height: 200px;
	margin: 30px 5px 50px 0;
	position: relative;
	width: 310px;
}
div.wrapper a.feature.last {
	margin-right: 0;
}
#theatreFeature { background: url('../img/features/abouttheTheatre.jpg') no-repeat center center; }
#hireFeature { background: url('../img/features/venueHire.jpg') no-repeat center center; }
#faqFeature { background: url('../img/features/faq.jpg') no-repeat center center; }

div.wrapper a.feature h2 {
	color: #e13027;
	font-weight: 600;
	position: absolute;
	left: 10px;
	top: 140px;
	z-index: 2;
}

div.wrapper a.feature p {
	background: rgb(255,255,255);
	background: rgba(255,255,255,0.90);
	color: #242424;
	display: block;
	font-family: 'AvenirLTStd35Light', sans-serif;
	height: 60px;
	line-height: 80px;
	margin: 0;
	padding: 0 0 0 10px;
	position: absolute;
	bottom: 10px;
	text-decoration: none;
	width: 100%;
}
div.wrapper a.feature p:before {
	content: "\e0cc";
	color: #e13027;
	position: absolute;
	right: 10px;
	bottom: 13px;
}

/* Contact Page */
.contact footer {
	padding: 0;
	height: 30px;
}
.contact footer div.content { display: none; }
.contact a#gmap {
	float: right;
}

.contact .col.nofloat { float: none;}
.contact .col {
	float: left;
	width: 40%;
}
.contact .col.sml {
	margin: 0 0 50px 8%;
	width: 22%;
}
.contact .col.sml p span {
	display: block;
	padding-left: 40px;
}
.contact .col a {
	color: #242424;
}

/* Silhouttes
---------------------------------------*/
.about .wrapper {
	background: url('img/aboutTheatre.png') no-repeat bottom right;
}
.hire .wrapper {
	background: url('img/venueHire.png') no-repeat bottom right;
}

/* Lightbox
---------------------------------------*/
.about a#galleryLink {
	color: #009add;
	font-family: 'AvenirLTStd35Light', sans-serif;
	font-size: 22px;
	position: relative;
}
.about a#galleryLink span {
	position: absolute;
	bottom: 77px;
	text-align: center;
	width: 100%;
	transition: ease .2s;
}
.about a#galleryLink span:before {
	content: '\e0a9';
	font-family: 'Elusive-Icons';
	font-size: 72px;
	position: absolute;	
	left: 88px;
	top: -80px;
	transition: ease .2s;
}
.about a#galleryLink:hover span:before {
	font-size: 82px;
	left: 84px;
	top: -85px;
}
.about a#galleryLink:hover span {
	font-size: 26px;
}

/* Footer
---------------------------------------*/
footer {
	background: #f6f6f6;
	border-bottom: 3px solid #e13027;
	clear: both;
	margin: 10px auto 5px;
	min-width: 960px;
	max-width: 1296px;
	overflow: hidden;
	padding: 35px 0 20px 0;
}

/* Address details */
footer a#gmap {
	float: left;
	margin: 0 50px 0 0;
}
footer .content {
	padding-left: 10px;
}
footer div.col {
	float: left;
}
footer div.col h3 {
	margin: 0 0 10px 0;
	padding: 0 0 0 30px;
}
div.col p.ico {
	margin: 0 0 15px 0;
	padding: 0 0 0 30px;
	position: relative;
}
div.col p.ico:before { 
	color: #009add;
	font-size: 18px;
	position: absolute;
	left: 0;
}
div.col p.address:before { content: '\e07a'; }
div.col p.email:before { content: '\e0eb'; }
div.col p.phone:before { content: '\e065'; }
div.col p.fax:before { content: '\e0c1'; }

footer a {
	color: #242424;
}

p.copyright {
	color:#333;
	font-size: 11px;
	margin: 0 0 30px 0;
	text-align: center;
}


/* Typography
-------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5 {
	font-family: 'AvenirLTStd35Light', sans-serif;
	font-weight: normal;
}

h1 {
	color: #e13027;
	font-size: 28px;
	margin: 0 0 18px 0;
}
.contact h1 { margin-bottom: 54px; }
h2 {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 5px 0;
}
.contact h2 { margin-bottom: 10px;}
h3 {
	color: #009add;	
	font-size: 18px;
	margin: 0 0 10px 0;
}
h4 {
	font-family: arial, sans-serif;
	font-weight: bold;
	font-size: 13px;
}
footer h3 { color: #242424;}
.ico:before {
	font-family: 'Elusive-Icons';
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

a { color: #0370a2;}

a[href$=".pdf"] {
	background: url('img/pdf-ico.png') no-repeat 0 0;
	display: block;
	line-height: 18px;
	margin: 0 0 7px 0;
	padding-left: 25px;
}

article p {
	margin: 0 0 20px 0;
}

article ul {
	margin: 0 0 20px 0;
	padding: 0 0 0 25px;
}
article ul li {
	list-style: square;
	margin: 0 0 3px 0;
}
aside ul {
	margin: 0 0 30px 0;
}
aside li {
	position: relative;
}

article ol { 
	font-size: 18px;
    list-style-type: decimal-leading-zero;
}
article ol li p {
	font-size: 12px;
}

div.divider { 
	border-top: 1px solid #e13027;
	clear: both;
	margin: 50px 0;
	width: 100%;
}


/* Page Colours
-------------------------------------------------------------------------------*/
/* about - #019ae0 */
body.about h1 {	color: #019ae0; }
body.about h3 {	color: #019ae0; }
body.about header div#headerImage,
body.about footer { border-color: #019ae0;}

/* hire - #5e990e */
body.hire h1 { color: #5e990e; }
body.hire h3 { color: #5e990e; }
body.hire header div#headerImage,
body.hire footer { border-color: #5e990e;}

/* faq - #4c0f90 */
body.faq h1 { color: #4c0f90; }
body.faq header div#headerImage,
body.faq footer { border-color: #4c0f90;}

/* default/contact - #e13027 */
body.contact h3 { color: #e13027; }
div.col p.ico:before { color: #e13027; }

/* IE
-------------------------------------------------------------------------------*/
.ie7 div.wrapper aside {
	width: 240px;
}



/* Media queries!
-------------------------------------------------------------------------------*/

@media (max-width: 480px) {

	/* General Layout */
	div.content {
		max-width: 100%;
	}
	body header {
		background: none;
		height: 350px;
	}
	body header div.container {
		max-width: 100%;
	}
	header div#headerImage {
		height: auto;
		min-height: 205px;
		min-width: 320px;
		max-width: 100%;
	}
	div.wrapper {
		max-width: 100%;
	}
	footer {
		min-width: 320px;
		max-width: 100%;
	}
	p,
	article li {
		font-size: 14px;
		line-height: 18px;
	}


	/* Header */
	header p.phone,
	header a.phone:link {
		color: #fff!important;
		margin: 0;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	header nav {
		clear: both;
		margin: 10px 0 0;
		width: 100%;
	}
	header nav ol li {
		clear: both;
		float: left;
		width: 100%;
	}
	header nav ol li a {
		line-height: 30px;
	}
	header div#headerImage {
		background: url('../img/mobile/home.jpg') no-repeat center top;
	}
	body.about header div#headerImage { background: url('../img/mobile/about.jpg') no-repeat center top;}
	body.hire header div#headerImage { background: url('../img/mobile/hire.jpg') no-repeat center top;}
	body.faq header div#headerImage { background: url('../img/mobile/faq.jpg') no-repeat center top;}
	body.contact header div#headerImage { background: url('../img/mobile/contact.jpg') no-repeat center top;}

	header div#headerImage a.prev,
	header div#headerImage a.next,
	header div#headerImage .slideContainer { 
		display: none;
	}

	/* Content */
	div.wrapper article,
	div.wrapper aside {
		max-width: 100%;
	}
	div.wrapper aside {
		margin: 0 0 20px 0;
		padding: 10px;
	}
	div.wrapper a.feature { 
		margin: 10px 0 0 0;
		width: 300px;
	}
	div.wrapper a.feature:last-child {
		margin-bottom: 10px;
	}
	div.wrapper a.feature p:before { display: none;}
	.contact .col,
	.contact .col.sml {
		margin: 0 0 10px 0;
		width: 100%;
	}
	.about a#galleryLink { 
		display: none;
	}

	/* Footer */
	footer div.content {
		padding: 10px;
	}
	footer div.col {
		padding: 10px 0 0 0;
	}
	footer div.col h3 {
		display: none;
	}

	.mobileHide { display: none;}
}