/* CSS Document
complied by Guy Hoogewerf - www.ncompass.co.uk - ©2014
*/
* {
	margin: 0;
	padding: 0;
}
html, body {
	background: url(../images/blue-tile.png) repeat-x;
	color:#111111;
    font: 100%/140% Helvetica,"Helvetica",Arial,sans-serif;
	height: 100%;
	width: 100%;
}
article, aside, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}
a:link, a:visited {
	color: #6d97c7;
	text-decoration:none;
}
a:hover, a:active, a:focus {
	color:#f40e08;
	text-decoration:underline;
}
h1, h2, h3, h4, h5, h6 {
}
p, td {
	font-size:0.875rem;
	margin-bottom:1rem
}
ul {
	list-style-type:circle;
    margin:1rem 2rem;
}
ol {
    margin:1rem 2rem;
}
li {
	font-size:0.875rem;
	margin-bottom:0.25rem;
}
.two-col {
	-moz-column-count: 2;
	-moz-column-gap: 1rem;
	-webkit-column-count: 2;
	-webkit-column-gap: 1rem;
	column-count: 2;
	column-gap: 1rem;
}
.imgright {
	float: right;
	height: auto;
	margin: 0.25rem 0 0 1rem;
	max-width: 45%;
}
.imgleft {
	float: left;
	height: auto;
	margin: 0.25rem 1rem 0 0;
	max-width: 45%;
}
.iframe-rwd  {
	position: relative;
	padding-bottom: 65.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.iframe-rwd iframe, .iframe-rwd embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.clear {
	clear: both;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.loading {
	background:url(/images/ajax-loader.gif) no-repeat 1px;
	height:28px;
	width:28px;
	display:none;  
 }  
.done {
	clear: left;
	display:none;
	background-color: rgba(244, 14, 8, 0.05);
	border: 4px double rgba(244, 14, 8, 0.5);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-bottom: 2rem;
	padding: 1rem;
}  
fieldset .hightlight {
	font-style: italic;
	border:2px solid #f50d09;
	background:url(/images/iconCaution.gif) no-repeat right;
}

/* Header */
header {
    height:75px;
	margin:0 auto;
	overflow:visible;
    width:62.5rem;
}
header h1 {
	background:url("/images/aesops-theatre-logo.png") no-repeat scroll 0px 0px;
    display:inline-block;
    height:120px;
	width:174px;
}
header h1 a:link,
header h1 a:visited,
header h1 a:hover,
header h1 a:active,
header h1 a:focus {
	color: transparent;
}
header p {
	background-color: #ffffff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	float:right;
	font-weight:bold;
	margin: 0.25rem 0;
    padding: 2px 6px;
	text-transform:lowercase;
}

/* Section */
section {
	margin:0 auto;
    max-width:62.5rem;
	width: 100%;
}
section .notify {
	background-color:rgba(157, 197, 223, 0.05);
	border:1px solid #f40e08;
	margin: 0 auto;
	padding:0.25rem;
	text-align:center;
	width:80%;
}
section #showcase {
	background:url(/images/slideshow-background.jpg) no-repeat center top / contain;
	margin:20px auto 0px auto;
	padding:10px 0 0 0;
	width:100%;
}
section #showcase #slideshow {
	border:4px solid #ffffff;
	margin:0 auto;
	max-width:98%;
}
#titleContainer {
	background-color: #ffffff;
	border-top: 1px solid #e5c4be;
	border-bottom: 1px solid #e5c4be;
	display:block;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
}
#titleContainer #label {
	text-align: center;
	padding-top: 10px;
} 
/* Nav */
nav {
	background-color:#6d97c7;
	border-bottom:8px solid #ffffff;
	-webkit-box-shadow:0px -8px 0px 0px rgba(244, 14, 8, 1);
	-moz-box-shadow:0px -8px 0px 0px rgba(244, 14, 8, 1);
	box-shadow:0px -8px 0px 0px rgba(244, 14, 8, 1);
	height: 2.25rem;
}
nav ul {
	margin: 0 auto;
    width: 62.5em;
}
#nav > a {
	display: none;
}
#nav li {
	position: relative;
	margin-bottom: 0;
}
#nav li a {
	color: #ffffff;
	display: block;
}
#nav li a:active {
	background-color: rgba(244, 14, 8, 1) !important;
}
#nav span:after {
	border: 0.3125em solid transparent; /* 5 */
	border-bottom: none;
	border-top-color: #efa585;
	content: '';
	display: inline-block;
	height: 0;
	position: relative;
	right: -0.3125em; /* 5 */
	vertical-align: middle;
	width: 0;
}
/* first level */
#nav > ul {
	background-color: #6d97c7;
	height: 2.25em;
}
#nav > ul > li {
	float: left;
	height: 100%;
	list-style: none outside none;
	width: 12.5%;
}
#nav > ul > li > a {
	height: 100%;
	line-height: 2.25rem;
	text-align: center;
}
#nav > ul > li:not( :last-child ) > a {
	border-right: 1px solid #ffffff;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a {
	background-color: rgba(244, 14, 8, 1);
	transition: background-color 0.3s ease 0s;
	text-decoration: none;
}
/* second level */
#nav li ul {
	background-color: #9dc5df;
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-right: 1px solid rgba(244, 14, 8, 0.5);
	border-bottom: 1px solid rgba(244, 14, 8, 0.5);
	border-left: 1px solid rgba(244, 14, 8, 0.5);
	box-shadow: 10px 10px 5px #888888;
	display: none;
	list-style: none;
	position: absolute;
	top: 100%;
	width: 14rem;
}
#nav li:hover ul {
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul {
	left: -1px;
}
#nav li ul a {
	border-top: 1px solid #ffffff;
	padding: 0.5em;
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a {
	color: rgba(244, 14, 8, 1);
	text-decoration: none;
}

/* Article */
article {
	display:inline-block;
	margin:2rem 4.5% 2rem 0;
	width:65%;
}
article h2 {
	font-size:1.5rem;
	line-height:1.6rem;
}
article h3 {
	font-size:1.2rem;
	line-height:2.25rem;
}
article blockquote {
	font-size:0.875rem;
	margin:0 3rem 3rem;
}
article img.border {
	background-color: rgba(244, 14, 8, 0.05);
	border: 1px solid rgba(244, 14, 8, 0.5);
	padding: 6px;
}
article .news {
	background-color: rgba(244, 14, 8, 0.05);
	border: 4px double rgba(244, 14, 8, 0.5);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-bottom: 2rem;
	padding: 1rem;
}
article .special {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	display:inline-block;
	margin:0 1rem 2rem;
	padding: 1rem;
	vertical-align:top;
	width:38%;
}
article .special:nth-child(3n) {
	background-color: rgba(61, 154, 48, 0.05);
	border: 4px double rgba(61, 154, 48, 0.5);
}
article .special:nth-child(3n+1) {
	background-color: rgba(244, 14, 8, 0.05);
	border: 4px double rgba(244, 14, 8, 0.5);
}
article .special:nth-child(3n+2) {
	background-color: rgba(1, 160, 204, 0.05);
	border: 4px double rgba(1, 160, 204, 0.5);
}
article ul.plays li {
	display:inline-block;
	list-style:none;
	margin:0 1.3% 2rem;
    width:30%;
}
article ul.plays li img {
	height:auto;
	text-align:center;
    width:90%;
}
article .reviews {
	background-color: rgba(244, 14, 8, 0.05);
	border: 4px double rgba(244, 14, 8, 0.5);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-bottom: 2rem;
	padding: 1rem;
}
article hr {
	background-color:#9dc5df;
	border-left:0 none;
    border-top:2px solid #ffffff;
	-webkit-box-shadow: 0px -4px 0px 0px rgba(244, 14, 8, 1);
	-moz-box-shadow:    0px -4px 0px 0px rgba(244, 14, 8, 1);
	box-shadow:         0px -4px 0px 0px rgba(244, 14, 8, 1);
    height:6px;
	padding-bottom:1px;
	margin:2rem 0;
}
article .anchor{
	
}
article table {
	border-left:0 none;
    border-bottom:2px solid #ffffff;
	-webkit-box-shadow: 0px 4px 0px 0px rgba(244, 14, 8, 1);
	-moz-box-shadow:    0px 4px 0px 0px rgba(244, 14, 8, 1);
	box-shadow:         0px 4px 0px 0px rgba(244, 14, 8, 1);
	margin:2rem auto;
	width:80%;
}
article table th {
	background-color:#9dc5df;
	color:#ffffff;
}
article table#tariffs td {
	text-align:center;
}
/* Aside */
aside {
	background:url(../images/form-background.png) repeat center center rgba(157, 197, 223, 0.2);
	border:1px solid rgba(244, 14, 8, 0.5);
	border-bottom:4px solid rgba(244, 14, 8, 0.5);
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	display:inline-block;
	margin:2rem 0;
	padding:2%;
    vertical-align:top;
    width:25.8%;
}
aside .icon {
	float:left;
	margin: 0px 10px 60px 0px;
}


/* Form */
.form {
	width: auto;
}
fieldset {
	border:1px dashed #9dc5df;
	margin-bottom:2rem;
	padding:1rem 2rem;
}
aside fieldset {
	border:0 none;
	margin-bottom:0;
	padding:0;
}
fieldset legend {
	background-color:rgba(244, 14, 8, 0.05);
	border:1px solid rgba(244, 14, 8, 0.5);
	padding:0.25rem 1rem;
}
fieldset label {
	display:inline-block;
	max-width:190px;
	padding-top:3px;
	vertical-align:top;
	width: 35%;
}
aside fieldset label {
	display:none;
}
fieldset .textarea {	
	border:1px solid #6d97c7;
	color:#3d9a30;
	font-family:Helvetica,"Helvetica",Arial,sans-serif;
	font-size:0.875rem;
	margin:3px 0px;
	padding:2px;
	width:60%;
}
aside fieldset .textarea {	
	width:99%;
}
fieldset .text {
	margin: 3px 0px;
	padding: 2px;
	color: #3d9a30;
	font-size: 90%;
	border: 1px solid #6d97c7;
	width: 60%;
}
aside fieldset .text {
	width: 99%;
}
fieldset select {	
	border:1px solid #6d97c7;
	color:#3d9a30;
	margin:3px 0px;
	padding:2px;
	width:60%;
}

aside .form p.small {
	font-size: 0.6875rem;
	line-height: 0.875rem;
}
.form .button {
	*overflow:visible;
	background-clip:padding-box;
	-moz-background-clip:padding;
	-webkit-background-clip:padding-box;
	
	background:rgb(61,154,48); /* Old browsers */
	background:-moz-linear-gradient(top, rgba(61,154,48,0.5) 1%, rgba(61,154,48,0.9) 40%, rgba(61,154,48,1) 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(61,154,48,0.5)), color-stop(40%,rgba(61,154,48,0.9)), color-stop(100%,rgba(61,154,48,1))); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top, rgba(61,154,48,0.5) 1%,rgba(61,154,48,0.9) 40%,rgba(61,154,48,1) 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top, rgba(61,154,48,0.5) 1%,rgba(61,154,48,0.9) 40%,rgba(61,154,48,1) 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top, rgba(61,154,48,0.5) 1%,rgba(61,154,48,0.9) 40%,rgba(61,154,48,1) 100%); /* IE10+ */
	background:linear-gradient(to bottom, rgba(61,154,48,0.5) 1%,rgba(61,154,48,0.9) 40%,rgba(61,154,48,1) 100%); /* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d9a30', endColorstr='#3d9a30',GradientType=0 ); /* IE6-9 */
	border:1px solid #B3B3B3;
	border-color:#518800;
	border-radius:4px 4px 4px 4px;
	-webkit-border-radius:4px 4px 4px 4px;
	-moz-border-radius:4px 4px 4px 4px;
	box-shadow:0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(150, 150, 150, 0.7);
	color:#ffffff;
	cursor:pointer;
	float:right;
    font-size:1.28571rem;
	height:34px;
	text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
	padding:2px 14px;
	font-weight:700;
	margin:0 0 2rem 0;
	width:25%;
}
aside .form .button {
	float:none;
	width:100%;
}
.form .url {
	display:none;
}

/* Footer */
footer {
	background-color: #9dc5df;
	border-top: 8px solid #ffffff;
	-webkit-box-shadow: 0px -8px 0px 0px rgba(244, 14, 8, 1);
	-moz-box-shadow:    0px -8px 0px 0px rgba(244, 14, 8, 1);
	box-shadow:         0px -8px 0px 0px rgba(244, 14, 8, 1);
	padding-bottom: 1px;
}
footer .links {
	margin:0 auto;
	padding-top: 2rem;
	width:62.5rem;
}
footer .links a:link, footer .links a:visited {
  color: #333333;
}
footer .links .fb-like {
	display:inline-block;
	text-align:left;
	min-width:14rem;
	width:23%;
}
footer .links div.productions {
	width: 35.5%;
}
footer .links div.productions ul.col2 {
	-moz-column-count: 2;
	-moz-column-gap: 1.5%;
	-webkit-column-count: 2;
	-webkit-column-gap: 1.5%;
}
footer .links div {
	display:inline-block;
	margin-right:1.5%;
	text-align:left;
	vertical-align:top;
	width:17%;
}
footer .links div ul {
	list-style:none;
	margin:0;
}
footer .links ul.col2 {
	-moz-column-count: 2;
	-moz-column-gap: 1.5%;
	-webkit-column-count: 2;
	-webkit-column-gap: 1.5%;
}
footer .links ul li {
	font-size: 0.75rem;
}
footer .links p {
	clear:both;
	font-size:80%;
	margin:0;
	text-align:right;
}
@media only screen and ( max-width: 62.5em ) /* 1000 */
{
	html, body { font-size: 100%; }
	#nav { width: 100%; position: static; margin: 0; }
}
@media (max-width: 54em ) /* 864 */
{
	html, body { font-size: 75%; }
	#nav > ul { font-size: 1rem; }
	article .special {width:80%; }
}

}
@media only screen and ( max-width: 40em ) /* 640 */
{
	html { font-size: 75%; }
	header, section { width: 98%; margin: 0 auto; }
	#nav { position: relative; top: auto; left: auto; }
	nav ul { width: 100%; }
	#nav > a { width: 2.25rem; height: 2.25rem; text-align: left; text-indent: -9999px; background-color: rgba(244, 14, 8, 1); position: relative; }
	#nav > a:before, #nav > a:after { position: absolute; border: 2px solid #fff; top: 35%; left: 25%; right: 25%; content: ''; }
	#nav > a:after { top: 60%; }
	#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type { display: block; }
	
	/* first level */
	#nav > ul { height: auto; display: none; position: absolute; left: 0; right: 0; }
	#nav:target > ul { display: block; }
	#nav > ul > li { width: 100%; float: none; }
	#nav > ul > li > a { height: auto; text-align: left; padding: 0 0.833em; /* 20 (24) */ }
	#nav > ul > li:not( :last-child ) > a { border-right: none; border-bottom: 1px solid #ffffff; }
	
	/* second level */
	#nav li ul { border: 0 none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; box-shadow: none; position: static; padding: 1.25em; /* 20 */ padding-top: 0; width: 100%; }
	#nav li ul a { border-top: 0 none; }

	article { width: 64%; }
	aside .twitter-timeline { min-width: 100% !important; }
	footer .links { width: 98%; }
	footer .links .fb-like { float: right; }
}
@media (max-width: 480px) {
	html, body { font-size: 75%; }
	header h1 { background: url("/images/aesops-theatre-logo-sm.png") no-repeat scroll 0 0px rgba(0, 0, 0, 0); }
	section #showcase { background: none; }
	section #showcase #imagesContainer, section #showcase #imagesContainer .picasaitem { max-width: 100%; }
	article { width: 100%; }
	aside { display: table; margin: 2rem auto; width: 80%; }
	footer .links .fb-like { display:none; }
	footer .links div.productions { width: 56%; }
}
@media (max-width: 320px) {
	html, body { font-size: 75%; }
	header p.contact { font-size: 0.6875rem; }
	section #showcase { display: none; }
	#nav { clear: both; top: 8px; }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
}
@media print {
	/*Reset Style */
	body { margin: 0; padding: 0; }
	nav, .backstretch, .slideshow { display: none; }
	header h1, header p { float: none; margin:0; text-align: left; }
	article { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
	footer { width: 100%; }
}
/* End - copyright Aesop's Touring Theatre Company @2014 */