/* Layout */

/* Generated by WordPress */
.aligncenter { display:block; margin:0 auto }
.alignleft { 
	float:left;
	margin: 0 20px 10px 0; 
}
.alignright { 
	float:right;
	margin: 0 0 10px 20px;
}
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

br.clear{
	clear: both;
}

@font-face {
	font-family: AvantGarde;
	src: url(../fonts/ITCAvantGardeStd-Bk.otf);
}

body{
	margin: 0;
	padding: 0;
	background: #000  url(../images/backgrounds/stripes_background.jpg) 0 0 no-repeat;
	font-family: Arial, Tahoma, sans-serif;
	font-size: 75%;
	display: block;
	width: 100%;
	height: 100%;
}

body.tourquoise{background: #000  url(../images/backgrounds/stripes_background.jpg) 0 0 no-repeat;}
body.blog, body.single, body.archive{background: #000  url(../images/backgrounds/blackwhite_background.jpg) 0 0 no-repeat;}
body.green{background: #fff  url(../images/backgrounds/storm_trooper.jpg) 0 0 no-repeat;}
body.pink{background: #000  url(../images/backgrounds/background_lights.jpg) 0 0 no-repeat;}

a{
	text-decoration: none;
	color: #4fbfee;
}

body.tourquoise a{color: #4fbfee;}
body.blog a, body.single a, body.archive a{color: #9d58f1;}
body.green a{color: #88f782;}
body.pink a{color: #f250a0;}

a:hover{opacity: 0.8;}

a.mainLinkStyle
{
       display: block;
       background: url(../images/main_link_tourquoise.png) no-repeat 100% 60%;
       float: left;
       padding: 2px 20px 2px 5px;
       margin: 10px 12px 0 0;
       overflow: visible;
       text-transform: uppercase;
       position: relative;
       line-height: 1.2em;
       z-index: inherit;
}

body.tourquoise a.mainLinkStyle{background-image: url(/images/main_link_tourquoise.png);}
body.blog a.mainLinkStyle, body.single a.mainLinkStyle, body.single a.archive{
       background-image: url(/images/main_link_purple.png);
}

body.pink a.mainLinkStyle{
       background-image: url(/images/main_link_green.png);
}
body.pink a.mainLinkStyle{
       background-image: url(/images/main_link_pink.png);
}

/*
p.arrow{
	background: url(../images/arrow_tourquoise.png) no-repeat 100% 8px;
	position: relative;
	left: 0;
	top: 0;
	display: block;
	float: left;
	z-index: 4;
	line-height: 1.2em;
	z-index: inherit;
}

body.tourquoise p.arrow{background-image: url(../images/arrow_tourquoise.png);}
body.blog p.arrow, body.single p.arrow, body.single p.arrow{
	background-image: url(../images/arrow_purple.png);
}
body.green p.arrow{background-image: url(../images/arrow_green.png);}
body.pink p.arrow{background-image: url(../images/arrow_pink.png);}
*/

#mainContainer{
	margin: 0;
	display: block;
	height: 100%;
	width: 100%;
}

header{
	margin-top: 0;
	padding-top: 0;
}

h2,h3,h4,h5,h6{
	text-transform: uppercase;
	font-weight: normal;
	font-family: AvantGarde, Arial, Tahoma, sans-serif;
}

h2{
	font-size: 2.6em;
	background: url(../images/black.png) repeat;
	padding: 12px 12px 8px;
	position: relative;
	border-bottom: 3px solid #525252;
	border-bottom: 3px solid rgba(255,255,255,0.1);
	color: #fff;
    padding: 15px 12px 5px;
}

h2 a{
	background: url(../images/big_arrow_tourquoise.png) no-repeat 100% 20%;
	display: block;
    background: transparent url(../images/big_arrow_tourquoise.png) no-repeat scroll 100% -3px;
}

body.tourquoise h2 a{background-image: url(../images/big_arrow_tourquoise.png);}
body.blog h2 a, body.single h2 a, body.archive h2 a{background-image: url(../images/big_arrow_purple.png);}
body.green h2 a{background-image: url(../images/big_arrow_green.png);}
body.pink h2 a{background-image: url(../images/big_arrow_pink.png);}


h2 a:hover{
	opacity: 0.8;
}

h3{
	font-size: 1.8em;
}

h4{
	font-size: 1.4em;
	margin-bottom: 10px;
}

h5{
	font-size: 1.2em;
}
	
p{
	line-height: 1.4em;
	margin-top: 0;
}


hr{
	border: none;
	height: 3px;
	background-color: #525252;
	background: rgba(255,255,255,0.1);	
}

h1 a{
	background: url(../images/logo_tourquoise.png) no-repeat 0 0;
	width: 343px;
	height: 125px;
	text-indent: -9999px;
	display: block;
	margin: 0 153px 0 35px;
	float: left;
}

body.tourquoise h1 a{background-image: url(../images/logo_tourquoise.png);}
body.blog h1 a, body.single h1 a, body.archive h1 a{background-image: url(../images/logo_purple.png);}
body.green h1 a{background-image: url(../images/logo_green.png);}
body.pink h1 a{background-image: url(../images/logo_pink.png);}


header{
	background: url(../images/black.png) repeat;
	border-bottom: 3px solid #525252;
	border-bottom: 3px solid rgba(255,255,255,0.1);

}

nav ul{
	list-style-type: none;
	overflow: hidden;
	padding-top: 35px
}

nav ul li a{
	display: block;
	float: left;
	background: url(../images/corners_grey.png) no-repeat 0 0;
	width: 94px;
	height: 44px;
	text-transform: uppercase;
	text-align: center;
	padding-top: 28px;
	margin: 0 12px;
	color: #fff;
	font-size: 1.1em;
}

/*to make the unselected menu items white*/
body.tourquoise nav ul li a, body.blog nav ul li a, body.single nav ul li a, body.archive nav ul li a,
body.green nav ul li a, body.pink nav ul li a{
	color: #fff;
}

nav ul li a:hover, nav ul li a.selected{
	background-image: url(../images/corners_tourquoise.png);
	color: #4fbfee;
}

body.tourquoise nav ul li a:hover, body.tourquoise nav ul li a.selected{
	background-image: url(../images/corners_tourquoise.png);
	color: #4fbfee;
}

body.blog nav ul li a:hover, body.blog nav ul li a.selected,
body.single nav ul li a:hover, body.single nav ul li a.selected,
body.archive nav ul li a:hover, body.archive nav ul li a.selected{
	background-image: url(../images/corners_purple.png);
	color: #9d58f1;
}

body.green nav ul li a:hover, body.green nav ul li a.selected{
	background-image: url(../images/corners_green.png);
	color: #88f782;
}

body.pink nav ul li a:hover, body.pink nav ul li a.selected{
	background-image: url(../images/corners_pink.png);
	color: #f250a0;
}


.allPosts{
	width: 810px;
	float: left;
    margin-bottom: 40px;
}

section{
	background: url(../images/white.png) repeat;
	position: relative;
	width: 660px;
    padding: 10px 20px;
}


section h3, section h4, section h5, section h6 {
	margin-top: 10px;
}
section p {
	margin-bottom: 10px;
}

article{
	width: 700px;
	float: left;
	margin: 20px 55px 20px 35px;
	position: relative;
}

body a.commentsIcon{
	background: url(../images/comment_icon_purple.png) no-repeat 0 0;
	float: right;
	font-size: 0.8em;
	color: #000;
	z-index: 3;
	border: 0;
	width: 14px;
	padding: 5px 5px 0px 5px;
	height: 24px;
	text-align: center;
	margin: 3px 10px 5px 5px;
}

body.blog a.commentsIcon, body.single a.commentsIcon, body.archive a.commentsIcon{
	background: url(../images/comment_icon_purple.png) no-repeat 0 0;
}

body.green a.commentsIcon{background-image: url(../images/comment_icon_green.png)}
body.pink a.commentsIcon{background-image: url(../images/comment_icon_pink.png)}

aside{
	width: 180px;
	float: left;
	background: url(../images/black.png) repeat;
	color: #fff;
    position: relative; top: 0; left: 0;
    margin-bottom: 40px;
    padding-bottom: 30px;
}

aside div{
	padding: 5px 15px 10px;
	overflow: hidden;
}

aside ul{
	list-style-type: none;
	margin: 10px 0 20px;
}

aside li{
	margin: 0;
	padding: 0;
}


.topLeftCorner, .topRightCorner, .bottomLeftCorner, .bottomRightCorner{
	background: url(../images/corners_grey.png) no-repeat 0 0;
	width: 27px;
	height: 29px;
	overflow: hidden;
	position: absolute;
	display: block;
}

/* On a main item, corners appear in their page colour. To do: They also change colour on hover*/
body.tourquoise .main .topLeftCorner, body.tourquoise .main .topRightCorner,
body.tourquoise .main .bottomLeftCorner, body.tourquoise .main .bottomRightCorner{
	background-image: url(../images/corners_tourquoise.png);
}

body.blog .main .topLeftCorner, body.blog .main .topRightCorner,
body.blog .main .bottomLeftCorner, body.blog .main .bottomRightCorner,
body.single .main .topLeftCorner, body.single .main .topRightCorner,
body.single .main .bottomLeftCorner, body.single .main .bottomRightCorner,
body.archive .main .topLeftCorner, body.archive .main .topRightCorner,
body.archive .main .bottomLeftCorner, body.archive .main .bottomRightCorner    {
	background-image: url(../images/corners_purple.png);
}

body.green .main .topLeftCorner, body.green .main .topRightCorner,
body.green .main .bottomLeftCorner, body.green .main .bottomRightCorner {
	background-image: url(../images/corners_green.png);
}

body.pink .main .topLeftCorner, body.pink .main .topRightCorner,
body.pink .main .bottomLeftCorner, body.pink .main .bottomRightCorner {
	background-image: url(../images/corners_pink.png);
}


.topLeftCorner{
	top: -7px;
	left: -7px;
}

.topRightCorner{
	background-position: 100% 0;
	top: -7px;
	right: -7px;
}

.bottomLeftCorner{
	background-position: 0 100%;
	bottom: -7px;
	left: -7px;
}

.bottomRightCorner{
    background-position: 100% 100%;
    bottom:  -7px;
    right: -8px;
}

a.box{
	display: block;
	width: 160px;
	height: 160px;
	margin: 20px 20px 0 0;	
	float: left;
	position: relative;
	text-transform: uppercase;
}

a.last{margin-right: 0;}

a.box span.words{
	background-color: #b1b1b1;
	display: block;
	width: 135px;
	padding: 5px 20px 5px 5px;
	color: #000;
	font-size: 0.9em;
	position: absolute;
	bottom: 0;
	left: 0;	
	border-top: 3px solid #525252;
	border-top: 3px solid rgba(255,255,255,0.1);
    background: rgba(255, 255, 255, 0.8) url(../images/arrow_tourquoise.png) no-repeat scroll 98% 100%;
}

body.blog a.box span.words, body.single a.box span.words, body.archive a.box span.words{
	background-image: url(../images/arrow_purple.png);
}

body.green a.box span.words{
	background-image: url(../images/arrow_green.png);
}

body.pink a.box span.words{
	background-image: url(../images/arrow_pink.png);
}

footer{
	clear: both;
	margin: 50px 0 0 35px;
	position: relative;
	min-height: 200px;
}

.blogTeaser{
    width: 340px;
	float: left;
	position: relative;
	display: block;
	margin-right: 20px;
	height: 200px;
	background-color: #b1b1b1;
	background: rgba(255,255,255,0.8);
}

h4.titleBar{margin-bottom: 0;}

h4 a{
	display: block;
	background-color: #131313;
	position: relative;
	padding: 10px 10px 4px;
	margin-bottom: 0;
	border-bottom: 3px solid #525252;
	border-bottom: 3px solid rgba(255,255,255,0.1);
    background: rgba(25, 25, 25, 0.8) url(../images/arrow_tourquoise.png) no-repeat scroll 98% 7px;
}

body.blog h4 a, body.single h4 a, body.archive h4 a{background-image: url(../images/arrow_purple.png);}
body.green h4 a{background-image: url(../images/arrow_green.png);}
body.pink h4 a{background-image: url(../images/arrow_pink.png);}


/* I don't want these styles to appear on the sidebar though!*/
aside h4 a{
	background: none;
	padding: 0;
	border: none;
	margin-top: 15px;
}

/*on the single page, I need to take off the arrow, and move the comment count to the right*/
body.single h4 a, body.green h4 a, body.pink h4 a{
	background-image: none;
}

h4 a time{
	color: #fff;
	margin-right: 5px;
}

.blogTeaser p{
       padding: 10px 20px 5px;
}

.blogTeaser a.mainLinkStyle
{
    left: 15px;
    margin-right: 20px;
}

.blogTeaser p.more
{
    padding: 0px 0px 0px 5px;
}

.twitter{
	background-color: #4fbfee;
	width: 140px;
	padding: 20px;
	float: left;
	position: absolute;
	bottom: 0;
	left: 775px;
	height: 160px;
}

body.tourquoise .twitter{background-color: #4fbfee;}
body.blog .twitter, body.single .twitter, body.archive .twitter{background-color: #9d58f1;}
body.green .twitter{background-color: #88f782;}
body.pink .twitter{background-color: #f250a0;}



.twitter h6{
	margin: 10px 0;
}
.twitter a, body.tourquoise .twitter a, body.blog .twitter a, body.single .twitter a, body.archive .twitter a, body.green .twitter a, body.pink .twitter a{
	color: #fff;
}


aside input{
	width: 130px;	
	background: rgba(255,255,255,0.6);
	border: 1px solid #000;
	padding: 4px 2px 3px;
	margin-top: 22px;
}

/*because of the way it overlaps the search bar*/
.placeholderButton{
	position: absolute;
	right: 9px;
	top: 23px;
    height:15px;
	z-index: 2;
	background: transparent url(../images/big_arrow_black.png) no-repeat 0 0;
	
}
aside button{
	background: transparent url(../images/big_arrow_tourquoise.png) no-repeat 0 0;
	width: 29px;
	height: 29px;
	border: 0;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	position: absolute;
	right: 10px;
	top: 23px;
	cursor: pointer;
	z-index: 3;	
}

body.blog aside button, body.single aside button, body.archive aside button{
	background-image: url(../images/big_arrow_purple.png);
}
body.green aside button{background-image: url(../images/big_arrow_green.png);}
body.pink aside button{background-image: url(../images/big_arrow_pink.png);}


aside button:hover{
	opacity: 0.8;
}

h5.category{
	display: block;
	background: url(../images/black.png) repeat 0 0;
	padding: 10px 20px;
	float: left;
	position: relative;
	margin-left: 35px;
}

h5.category a{color: #adadad;}

/*comments form*/

#commentform{
	margin: 50px 0 0;
}

#contactForm{
	margin: 50px 0;
}
label{
	color: #fff;
	text-transform: uppercase;
	float: left;
	width: 130px;
	font-size: 1.3em;
	margin-top: 3px;
}

input#author, input#name, input#email, input#url, input#subject, input#comment, textarea#comment{
	width: 563px;
	background: rgba(255,255,255,0.6);
	border: #000;
	font-size: 1.3em;
	margin-bottom: 10px;
	padding: 3px;
}

button#send, body.about form a.mainLinkStyle{
	margin-left: 130px;
}

.comment{
	position: relative;
}

.comment p{
	background: url(../images/white.png);
	min-height: 30px;	
	padding: 20px;
}

.commentmetadata{
	color: #fff;
	border: none;
	margin-bottom: 5px;	
}
.fn a.url{
	text-transform: uppercase;
	font-style: normal;
}

.avatar{
	width: 60px;
	height: 60px;
	float: left;
	margin-right: 10px;
}

.commentContent{
	width: 590px;
	float: left;
}

.commentCorner{
	background: url(../images/comment_corner.png) no-repeat 0 0;
	width: 24px;
	height: 20px;
	position: absolute;
	top: 67px;
	left: 46px;
}

/*individual film page*/

.thumbnails{
	padding: 0 0 0 22px;
}

.thumbnails a{
	display: block;
	float: left;
	margin: 10px 10px 0 0;
}

.filmLinks{
	position: relative;
}

.filmLinks span, .filmLinks span.photos, .filmLinks span.videoClips, .filmLinks span.links{
	background: url(../images/pdf.png) no-repeat 0 0;
	width: 62px;
	height: 58px;
	position: absolute;
	top: -10px;
	left: -25px;
	z-index: 6;
}

.filmLinks span.photos{background-image: url(../images/camera.png);}

.filmLinks span.videoClips{
	background-image: url(../images/video_camera.png);
	top: -2px;	
}

.filmLinks span.links{
	background-image: url(../images/link_icon.png);
	left: -15px;
	top: -15px;
}

.filmLinks a{
	background: url(../images/black.png) repeat;
	display: block;
	padding: 10px 10px 5px 50px;
	margin-bottom: 30px;
}

ul.festivals{
	list-style-type: none;
	margin: 10px 0;
}

ul.festivals li{
	margin: 0 0 15px;
	overflow: hidden;
}

ul.festivals img{
	float: left;
	margin: 0 10px 0 0;
}

ul.festivals div{
	width: 550px;
	float: left;
}


ul.festivals h4{
	margin: 1px 0 0 0;
}

ul.festivals h4 a{
	background: none;
	padding: 0;
}

.subList{
	margin: 0;
}

.subList li{
	line-height: 1.4em;
}

.subList li a{
	color: #fff;
}

.filmSecondaryContainer{
	float: left;
	margin-right: 20px;
}

.second{margin-right: 0;}

.secondary{
	width: 300px;
	position: relative;
}

h4.secondary{
	margin-bottom: 0;
	width: 340px;	
}