/*******************************************************************************
** ANIMAL ACTORS
*  RESPONSIVE WEBSITE, BEGUN SEPTEMBER 2015 BY APPLEGREEN
*  PLACED ONLINE 29th SEPTEMBER 2015
*******************************************************************************/

/*Reset info ===========================================================*/

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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	p {
		margin: 1.2em 0; /*returns normal margins to <p>, Applegreen */
		line-height: 140%;
		font-size: 95%;
	} 
/* giving <ul> a margin of 0 in the <nav> element is essential for the drop-down menu to work, if there is one. */

/* general styles for animal actors =======================================*/
h1 {
	font-family: georgia, times new roman, sans serif;
	color: #fff;
	text-align: center;
	font-weight: normal;
}
p, li , form label{
	 font-family: verdana;
	 color: #fff;
	 font-size: 90%;
}
a {
	color: #fd9700;
}
a:hover {
text-decoration: none;
}
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
sup {
    vertical-align: super;
    font-size: smaller;
} 
.clear {
		clear: both;
}
.offscreen { /* for skip navigation link */
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* desktop styles================== =======================================*/

body {
	background: url(images/dark-wood.png);
}
#main {
	margin: 16px auto 6px auto;
	padding-bottom: 120px;
	max-width: 1020px; /* a fraction wider than 1000 to accommodate frieze */
}
#home #main {
	background: url(images/film-strip8.jpg) top left repeat-x,
				url(images/frieze-home.png) bottom left repeat-x  #000;
}
#about #main {
	background: url(images/film-strip8.jpg) top left repeat-x,
				url(images/frieze-about.png) bottom left repeat-x  #000;
}
#credits #main {
	background: url(images/film-strip8.jpg) top left repeat-x,
				url(images/frieze-credits.png) bottom left repeat-x  #000;
}
#contact #main {
	background: url(images/film-strip8.jpg) top left repeat-x,
				url(images/frieze-contact.png) bottom left repeat-x  #000;
}

h1.heading {
	font-family: georgia;
	text-align: center;
	color: #e6e6e6;
	font-size: 100px;
	font-weight: bold;
	padding-top: 56px;
	line-height: 25%;
	text-shadow: 2px 2px 4px #000,
				-2px -2px 4px #000,
				-2px 2px 4px #000,
				2px -2px 4px #000;
}
.strapline {
	font-family: helvetica;
	color: #fd9700;
	font-weight: normal;
	font-size: 24%;
	margin-right: 37%;
}

nav {
	margin-top: 30px;
	background-color: #232222;
	height: 28px;
	text-align: right;
}
nav ul {
	margin-right: 2%;
}
nav li {
	list-style-type: none;
	display: inline-block;
	margin: 4px 2.5%;
	font-weight: bold;
	font-family: helvetica;
}
nav a {
	text-decoration: none;
	font-size: 110%;
}
nav a:hover {
	border-bottom: solid 2px #fd9700;
}
body#home .home,
body#about .about,
body#credits .credits,
body#contact .contact,
body#extra .extra /*  nonexistant page helps with navigation */
nav li a { /* specify nav li a, not just a, so that only the top-level link remains highlighted. Remove the classes on the drop-down menu links, but reinstate them for the mobile menu if doing the Brightside model */
	border-bottom: solid 2px #fd9700;
}

h1 {
	margin-top: 40px;
	font-size: 28px;
}
.homecontent {
	padding: 50px 4% 20px 4%;
}
.innercontent,.creditscontent, .creditslist {
	padding: 50px 4% 20px 4%;
}

#cycler{
	position:relative;
	float: left;
	margin: 0 4% 10px 2%;
	width: 38%;
	border: solid 1px #232222;
	}
#cycler img{
	position:absolute;
	z-index:1
	background-color:white;
	width:100%;
	height:100%;
	left:0;
	top:0;
	display:none;
	}
#cycler img.active{z-index:3;}
#cycler img.base{
	z-index:-1;
	position:static;
	display:block;
}

.homeaside {
	float: right;
	width: 50%;
}
.homeaside li {
	color: #fd9700;
	list-style-type: disc;
	line-height: 135%;
	font-size: 95%;
}
.homeaside li span {
	color: #fff;
}
.homeaside ul {
	margin-left: 10%;
}
.homecontent p {
	font-size: 95%;
}
.aboutaside {
	float: left;
	margin: 20px 5% 0 2%;
	width: 18%;
}
.aboutaside img {
	border: solid 1px #232222;
	margin-bottom: 10px;
	clear: left;
	width: 100%;
}
.abouttext {
	width: 70%;
	float: right;
	padding-right: 2%;
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	border: solid 1px #232222;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.creditscontent {
	-moz-column-count: 2;
	-moz-column-gap: 2em;
	-moz-column-rule: thin dotted #3f3d3d;
	-o-column-count: 2;
	-o-column-gap: 2em;
	-o-column-rule: thin dotted #3f3d3d;
	-webkit-column-count: 2;
	-webkit-column-gap: 2em;
	-webkit-column-rule: thin dotted #3f3d3d;
	column-count: 2;
	column-gap: 2em;
	column-rule: thin dotted #3f3d3d;
}
.creditslist {
	-moz-column-count: 3;
	-moz-column-gap: 2em;
	-moz-column-rule: thin dotted #3f3d3d;
	-o-column-count: 3;
	-o-column-gap: 2em;
	-o-column-rule: thin dotted #3f3d3d;
	-webkit-column-count: 3;
	-webkit-column-gap: 2em;
	-webkit-column-rule: thin dotted #3f3d3d;
	column-count: 3;
	column-gap: 2em;
	column-rule: thin dotted #3f3d3d;
}
.santapic {
	width: 90%;
	margin-top: 10px;
}

form {
	margin-top: 20px;
}
form label {
	font-size: 90%;
	display: block; /* forces input boxes onto next line */
	margin-bottom: 4px;
	line-height: 130%;
	text-transform: uppercase;
}
form input {
	width: 70%;
	height: 27px;
	font-size: 0.9em;
	margin-bottom: 20px;
}
form textarea {
	width: 70%;
	font-size: 1em;
	margin-bottom: 20px;
	height: 130px;
}
form input#submit {
	width: 25%;
	height: 32px;
	font-size: 0.9em;
}
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		font-family: verdana, arial, sans-serif;
		color: #3e3e3e;
		background: #eee; /* Old browsers */
		background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
		background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
		background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
		background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
		background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
		background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
	  border: 1px solid #aaa;
	  border-top: 1px solid #ccc;
	  border-left: 1px solid #ccc;
	  -webkit-border-radius: 3px;
	  border-radius: 3px;
	  display: inline-block;
	  font-weight: bold;
	  text-decoration: none;
	  text-shadow: 0 1px rgba(255, 255, 255, .75);
	  margin-bottom: 6px;
}

.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
		color: #000;
		background: #ddd; /* Old browsers */
		background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
		background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
		background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
		background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
		background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
		background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
		border: 1px solid #888;
		border-top: 1px solid #aaa;
		border-left: 1px solid #aaa;
}

footer {
	max-width: 1020px;
	margin: 0 auto 10px auto;
	text-align: right;
}
footer p {
	font-size: 75%;
	line-height: 140%;
	padding-right: 3%;
	padding-left: 3%;
	color: #E6E6E6;
}
.footerpic {
	float: right;
	padding: 0 3% 10px 3%;
}
.pipe {
	padding: 0 1.5%;
}

/* media queries =========================================================================*/
@media screen and (max-width: 920px) {
	main {
		margin-top: 0;
	}
	h1.heading {
		font-size: 90px;
	}
	.strapline {
		font-size: 22px;
	}
	h1 {
		font-size: 26px;
	}
	form input {
		width: 80%;
	}
	form textarea {
		width: 80%;
	}
}
@media screen and (max-width: 700px) {
	h1.heading {
		font-size: 70px;
	}
	.strapline {
		font-size: 22px;
	}
	.aboutaside {
		width: 22%;
	}
	.abouttext {
		width: 69%;
		padding-right: 2%;
	}
}

@media screen and (max-width: 520px) {
	#main {
			padding-bottom: 100px;
	}
	h1.heading {
		font-size: 60px;
		line-height: 30%;
		padding-top: 50px;
	}
	.strapline {
		font-size: 18px;
	}
		h1 {
		font-size: 22px;
		line-height: 130%;
	}
	form input#submit {
		width: 42%;
		font-size: 0.75em;
		}
	.pipe {
		padding: 0 1%;
	}
	.pipe:last-child {
		display: none;
	}
}

@media screen and (max-width: 390px) {
	h1.heading {
		font-size: 60px;
		line-height: 74%;
		text-align: center;
		padding-top: 32px;
	}
	.strapline {
		font-size: 18px;
		margin: 0;
	}
	nav {
		text-align: center;
		margin-top: 10px;c
	}
	nav a {
		font-size: 100%;
	}
	.creditscontent, .creditslist {
		-moz-column-count: 1;
		-o-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
	.innercontent, .creditscontent, .creditslist {
		padding-top: 20px;
		padding-bottom: 10px;
	}
	#cycler{
		position:relative;
		float: none;
		margin: 0 4% 10px 2%;
		width: 90%;
		border: solid 1px #232222;
	}
	.homeaside {
		float: none;
		width: 90%;
	}
	form input {
		width: 90%;
	}
	form textarea {
		width: 90%;
	}
	form input#submit {
		width: 45%;
	}
	.footerpic {
		display: none;
	}
}