/*

STYLESHEET FOR TRANSMISSION INTERRUPTED MOVIE SUBSITE
Created by Samuel Marlow
www.samuelmarlow.co.uk

ToC

	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	6. tables
	7. forms

*/


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



/*---------- 1. defaults ----------*/

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #142a16;
	margin: 0;
	padding: 0;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
/* End hide from IE-mac */


/*---------- 2. structure ----------*/

#wrapper {
	max-width: 980px;
	margin: 0 auto 0 auto;
}

#nav {
	width: 100%;
	padding: 5px 0 5px 0;
	background-color: #0f1e15;
	text-align: center;
}

#nav-tablet, #nav-mobile {
	display: none;
}

#container {
	width: 100%;
	margin: 0 auto;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#synopsis {
	width: 56%;
	padding: 15px 2% 10px 2%;
	float: left;
}

#details{
	width: 36%;
	padding: 15px 2% 10px 2%;
	float: right;
}

#poster {
	display: none;
}

		/*-- Page Background Images --*/
#about {
	width:	100%;
	height: 550px;
	background-image: url('/transmissioninterrupted/images/about-bg.jpg');
}

#gallery {
	width:	100%;
	height: 550px;
	background-image: url('/transmissioninterrupted/images/gallery-bg.jpg');
}

#castcrew {
	width:	100%;
	height: 550px;
	background-image: url('/transmissioninterrupted/images/castcrew-bg.jpg');
}

#bts {
	width:	100%;
	height: 550px;
	background-image: url('/transmissioninterrupted/images/bts-bg.jpg');
}

#screenings {
	width: 100%;
	height: 550px;
	background-image: url('/transmissioninterrupted/images/screening-bg.jpg');
}

#dvd {
	width: 100%;
	height: 550px;
	background-image: url('/transmissioninterrupted/images/dvd-bg.jpg');
}

#video {
	width: 63%;
	float: left;
	margin: 20px 0 0 2%;
	background-color: #ffffff;
}

#sidescroll-r {
	width: 270px;
	height: 480px;
	margin: 20px 20px 20px 10px;
	padding: 15px;
	float: right;
	overflow-y: auto;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#mainscroll-l {
	width: 510px;
	height: 480px;
	margin: 20px 10px 20px 20px;
	padding: 3%;
	float: left;
	overflow-y: auto;
	background-image: url('/images/div-bg.png');
	background-color: #ffffff;
}

#main-left {
	width: 55%;
	height: 480px;
	margin: 20px 1% 20px 2%;
	padding: 15px 1.5% 15px 1.5%;
	float: left;
	overflow-y: auto;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#main-right {
	width: 51%;
	height: 480px;
	margin: 20px 2% 20px 1%;
	padding: 15px 1.5% 15px 1.5%;
	float: right;
	overflow-y: auto;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#side-right {
	width: 28%;
	height: 480px;
	margin: 20px 2% 20px 1%;
	padding: 15px 1.5% 15px 1.5%;
	float: right;
	overflow-y: auto;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#mainscroll-w {
	width: 100%;
	min-height: 510px;
	padding: 20px 2% 20px 2%;
}

#content {
	width: 96%;
	min-height: 510px;
	padding: 20px 2% 20px 2%;
}

#vidnotes {
	width: 100%;
	height: 90px;
	margin: 0 15px 0 0;
	overflow-y: auto;
	background-color: #ffffff;
}

#vidnav-l {
	width: 51%;
	float: left;
	margin: 10px 0 0 1%;
	background-color: #ffffff;
}

#vidnav-r {
	width: 47%;
	float: right;
	margin: 10px 0 0 0;
	padding: 0 1% 0 0;
	background-color: #ffffff;
	text-align: right;
}

#footer {
	max-width: 980px;
	margin: 0 auto 0 auto;
	padding: 10px 0 0 0;
	background-color: #0f1e15;
}

#contacts {
	width: 220px;
	margin: 0 0 10px 2%;
	float: left;
}

#networks {
	width: 300px;
	margin: 0 0 10px 2%;
	float: left;
}

#credits {
	margin: 0 0 10px 2%;	
	float: left;
}

#image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9, #image10, #image11, #image12, #image13, #image14, #image15, #image16, #image17, #image18, #image19, #image20, #image21, #image22, #image23, #image24, #image25, #image26, #image27, #image28, #image29, #image30, #image31 {
	display: none;
}

.video {
	position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#more-vids {
	display: none;
}


/*---------- 3. links and navigation ---------- */

a:link, a:visited {
	font-family: Helvetica, Verdana, sans-serif;
	text-decoration: none;
	font-size: 1em;
	color: #1d4521;
}

a:hover {
	color: #0f1e15;
}

#nav a, #nav-tablet a, #nav-mobile a {
	font-family: 'SteelfishRB', Impact, Verdana, sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: normal;
	margin: 0 10px 0 10px;
	font-size: 2em;
	color: #959cd6;
}

#nav a:hover, #nav-tablet a:hover, #nav-mobile a:hover {
	color: #aed288;
}

#footer a {
	font-family: Helvetica, Verdana, sans-serif;
	text-decoration: none;
	font-size: 1em;
	color: #959cd6;
}

#footer a:hover {
	color: #aed288;
}


/*---------- 4. fonts ----------*/

p {
	font-family: Helvetica, Verdana, sans-serif;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.3em;
	margin-bottom: 0.5em;
	color: #0f1e15;
}

#video p {
	font-family: Helvetica, Verdana, sans-serif;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.3em;
	margin-bottom: 0.5em;
	padding: 0 5px 5px 10px;
	color: #0f1e15;
}

h1 {
	font-family: 'SteelfishRB', Impact, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 2em;
	margin-bottom: 5px;
	text-transform: uppercase;
	color: #1d4521;
}

h2 {
	font-family: 'SteelfishRB', Impact, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1.5em;
	line-height: ;
	margin-bottom: 5px;
	text-transform: uppercase;
	color: #1d4521;
}

#footer p {
	font-family: Helvetica, Verdana, sans-serif;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.3em;
	margin-bottom: 0.5em;
	color: #959cd6;
}

#footer h1 {
	font-family: 'SteelfishRB', Impact, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 2em;
	line-height: ;
	margin-bottom: ;
	text-transform: uppercase;
	color: #959cd6;
}


/*---------- 5. images ----------*/

img {
	width: 100%;
	border: none;
}

#video img {
	width: 98%;
	border: none;
	padding: 5px 1% 5px 1%;
}

#side-right img {
	width: 47%;
	border: none;
	padding: 0 1% 0 0;
}

#vid-select img {
	width: 100%;
	padding: 5px 0 10px 0;
}

#main-right img {
	width: 30%;
	padding: 0 2% 5px 0;
}


/*---------- 6. tables ----------*/

tr {
	font-family: Helvetica, Verdana, san-serif;
	font-weight: normal;
	font-size: 15px;
	line-height: 20px;
	margin-bottom: 0;
	text-transform: ;
	color: #0f1e15;
}

tbody {
	vertical-align: top;
}

.indent-table {
	margin-left: 35px;
}


/*---------- 7. forms ----------*/

.formField {
	width: 460px;
	border: 1px solid #7da7d8;
	background-color: #ffffff;
	margin: 5px 0 10px 0;
	padding: 5px;
	font-family: Helvetica, Verdana, san-serif;
	font-weight: normal;
	font-size: 15px;
	color: #707070;
}
.formMessage {
	width: 460px;
	height: 150px;
	border: 1px solid #7da7d8;
	background-color: #ffffff;
	margin: 5px 0 10px 0;
	padding: 5px;
	font-family: Helvetica, Verdana, san-serif;
	font-weight: normal;
	font-size: 15px;
	color: #707070;
}

.formFieldS {
	visibility: hidden;
}
















@media screen and (min-width: 500px) and (max-width: 910px) {
/*---------- 1. defaults ----------*/

/*---------- 2. structure ----------*/

#nav, #nav-mobile {
	display: none;
}

#nav-tablet {
	display: block;
	padding: 5px 0 5px 0;
	background-color: #0f1e15;
	text-align: center;
}

#video {
	width: 70%;
	float: left;
	margin: 0;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#main-left {
	width: 60%;
	height: 520px;
	padding: 15px 1.5% 15px 1.5%;
	margin: 0;
	float: left;
	overflow-y: auto;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#main-right {
	width: 51%;
	height: 520px;
	margin: 0;
	padding: 15px 1.5% 15px 1.5%;
	float: right;
	overflow-y: auto;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#side-right {
	width: 27%;
	height: 520px;
	margin: 0;
	padding: 15px 1.5% 15px 1.5%;
	float: right;
	overflow-y: auto;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#vidnotes {
	width: 100%;
	height: 110px;

	margin: 0 15px 0 0;
	overflow-y: auto;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#vidnav-l {
	width: 52%;
	float: left;
	margin: 10px 0 0 0;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#vidnav-r {
	width: 47%;
	float: right;
	margin: 10px 0 0 0;
	padding: 0 1% 0 0;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}


/*---------- 3. links and navigation ---------- */


/*---------- 4. fonts ----------*/


/*---------- 5. images ----------*/


#video img {
	width: 98%;
	border: none;
	padding: 5px 1% 5px 1%;
}

#side-right img {
	width: 47%;
	border: none;
	padding: 0 1% 0 0;
}

#vid-select img {
	width: 100%;
	padding: 5px 0 10px 0;
}

#main-right img {
	width: 30%;
	padding: 0 2% 5px 0;
}


/*---------- 6. tables ----------*/


}







@media screen and (min-width: 10px) and (max-width: 499px) {


/*---------- 1. defaults ----------*/


/*---------- 2. structure ----------*/

#wrapper {
	width: 100%;
	margin: 0 auto;
}

#nav, #nav-tablet {
	display: none;
}

#nav-mobile {
	display: block;
	width: 100%;
	margin: 0;
	padding: 5px 0 5px 0;
	background-color: #0f1e15;
	text-align: center;
}

#container {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	height: auto;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}

#synopsis {
	width: 96%;
	height: auto;
	padding: 5px 2% 10px 2%;
}

#details{
	width: 96%;
	height: auto;
	padding: 5px 2% 10px 2%;
}

#poster {
	width: 100%;
	display: block;
}

		/*-- Page Background Images --*/
#about, #gallery, #castcrew, #bts, #royalvic, #support, #objectives, #screenings, #dvd, #headshot {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	background-image: url('/transmissioninterrupted/images/div-bg.png');
}



#video {
	width: 100%;
	margin: 0;
	height: auto;
	background-color: none;
}

#main-left {
	width: 96%;
	margin: 0;
	height: auto;
	padding: 5px 2% 15px 2%;
	overflow: auto;
	background-image: none;
}

#main-right {
	width: 96%;
	margin: 0;
	height: auto;
	float: left;
	padding: 5px 2% 15px 2%;
	background-color: none;
}

#side-right {
	width: 96%;
	margin: 0;
	float: left;
	height: auto;
	padding: 0 2% 15px 2%;
	background-color: none;
}

#content {
	width: 96%;
	padding: 5px 2% 15px 2%;
	background-color: #ffffff;
}

#vidnotes {
	width: 100%;
	margin: 0;
	background-color: #ffffff;
}

#vidnav-l {
	width: 52%;
	float: left;
	margin: 10px 0 0 0;
	background-color: #ffffff;
}

#vidnav-r {
	width: 47%;
	float: right;
	margin: 10px 0 0 0;
	padding: 0 1% 0 0;
	background-color: #ffffff;
}

#vid-select {
	width: 100%;
	float: left;
	margin: 10px 3% 10px 0;
}

#contacts {
	width: 96%;
	margin: 10px 2% 10px 2%;
}

#networks {
	width: 96%;
	margin: 0 2% 10px 2%;
}

#credits {
	width: 96%;
	margin: 0 2% 10px 2%;
}

#more-vids {
	padding: 7px 0 5px 0;
	margin: 0 0 5px 0;
	text-align: center;
	background-color: #7da7d8;
}


/*---------- 3. links and navigation ---------- */

#more-vids a {
	font-family: Impact, Verdana, san-serif;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: normal;
	margin: 0 10px 0 10px;
	font-size: 1.2em;
	color: #fff;
}

#more-vids a:hover {
	font-family: Impact, Verdana, san-serif;
	text-decoration: underline;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 1.2em;
	color: #fff;
}


/*---------- 4. fonts ----------*/



/*---------- 5. images ----------*/

img {
	width: 100%;
	border: none;
}

#video img {
	width: 100%;
	border: none;
	margin: none;
	padding: 0 0 5px 0;
}

#vid-select img {
	width: 100%;
	padding: 5px 0 10px 0;
}

#main-right img {
	width: 30%;
	padding: 0 2% 5px 0;
}

#side-right img {
	width: 30%;
	border: none;
	padding: 0 1% 0 0;
	float: left;
}


/*---------- 6. tables ----------*/


/*---------- 7. forms ----------*/

.formField {
	width: 95%;
	border: 1px solid #7da7d8;
	background-color: #ffffff;
	margin: 5px 0 10px 0;
	padding: 5px;
	font-family: Helvetica, Verdana, san-serif;
	font-weight: normal;
	font-size: 15px;
	color: #707070;
}
.formMessage {
	width: 95%;
	height: 150px;
	border: 1px solid #7da7d8;
	background-color: #ffffff;
	margin: 5px 0 10px 0;
	padding: 5px;
	font-family: Helvetica, Verdana, san-serif;
	font-weight: normal;
	font-size: 15px;
	color: #707070;
}

.formFieldS {
	visibility: hidden;
}
}