/* --------------------------------------------------
Rise Films Style Sheet
Author:  Pixeco
Created:  01/01/08
Modified: 23/05/08
-------------------------------------------------- */


/***************************************************** 
* Global
*****************************************************/

/* Global reset */
/* Check out http://developer.yahoo.com/yui for a reference */

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h5, h5, h6 { font-size:100% }
q:before, q:after { content:''}
* a { position:relative } /* Gets links displaying over a PNG background */
a { outline:none } /* Clears Firefox dotted borders */
a img { border:none } 



/* @group GLOBAL */

body {
	font: normal normal normal 62.5%/1.3 'helvetica neue',helvetica, arial,sans-serif;
	background: #000 url(../images/bg.gif) no-repeat top center;
	color: #747474;
	}


/* Typography */

h2, h3 { font-size:1.8em; }
h2 { color:#7a7a7a; }
h3 { color:#686868; }
h4 { font-size:17px; }

a:hover { text-decoration:underline; }

/* Removes the link arrow so can used with image links */
a:link, a:visited, a:active, a:hover { background-image:transparent; text-decoration:none; }
p a:link, p a:visited, p a:active, p a:hover,
h1 a:link, h1 a:visited, h1 a:active, h1 a:hover,
h2 a:link, h2 a:visited, h2 a:active, h2 a:hover,
h3 a:link, h3 a:visited, h3 a:active, h3 a:hover,
li a:link, li a:visited, li a:active, li a:hover { text-transform:uppercase; color:#ff9212; font-weight:bold; text-decoration:none; padding:0 10px 0 0; background:transparent url(../images/anchor_bg.gif) no-repeat scroll right top; }

p { padding: 0 0 1.2em; }




/* Conveinence classes */

.float { float:left; } 
.floatright { float:right; }
.inline { display:inline; }
.white { color:#fff; }
.yellow { color:#feda17; }
.small { font-size:1em; }
.big { font-size:1.4em; font-weight:bold; }
.bigger { font-size:1.6em; line-height:130%; }
.bold { font-weight:bold; }
.hidden { position:absolute; top:0px; left:-5000px; } /* apply class to p, h1, h2 etc to hide text from above an image **Search Engine/accessibility friendly!** */
/* Div used to clear floats where some browsers have trouble // Replaces the old '<br clear=all>' tag */
div.clear { clear:both !important; margin:0 !important; padding:0 !important; border:0 !important; font-size:1px !important; height:1px !important; }




/***************************************************** 
* Layout
*****************************************************/


#wrapper { margin:auto; font-size:1.1em; }
	#wrapper ul { list-style:none; }
		#wrapper li {
			padding-left: 20px;
			background: transparent url(../images/li_bg.gif) no-repeat scroll left 5px;
			margin-top: 1em;
			}

div.mainContent {
	width: 960px;
	margin: 0 auto 0 auto;
	padding-left: 100px;
	position: relative;
	}
	div.mainContent:after { /* clearing */
		content:".";
		display:block;
		clear:both;
		visibility:hidden;
		line-height:0;
		height:0;
		}	

	
#bannerContainer {
	height: 56px;
	width: 900px;
	margin: 0 auto 20px;
	background: no-repeat scroll 0 top;
	padding-bottom: 15px;
	position: relative;
	}
	#bannerContainer:after { /* clearing */
		content:".";
		display:block;
		clear:both;
		visibility:hidden;
		line-height:0;
		height:0;
		}



/* @group General */

.headerise {text-transform: uppercase; font-weight: bold;}
.highlight {color: #ff9212;}
span.headerise { color:#fff; padding-right:3px; }

/* @end */


#wrapper div.wideColumn div.film div.filmText div.tabs ul li.tabBreak {
	border-bottom: 1px solid #7a7a7a;
	width: 9px;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	}

#wrapper div.wideColumn div.film div.filmText div.tabs ul li {
	height: 15px;
	width: 75px;
	text-align: center;
	text-transform: uppercase;
	padding-top: 4px;
	margin-bottom: 10px;
	border-top-style: solid;
	border-top-width: 1px;
	border-left: 1px solid #7a7a7a;
	border-right: 1px solid #7a7a7a;
	}

#wrapper div.wideColumn div.film div.tabs {
	float: left;
	}

#wrapper div.wideColumn div.film ul.film li {
	background-image: none;
	padding-left: 0;
	}






/* @group NAV */

#nav {
	width: 900px;
	height: 40px;
	margin: 115px auto 0 auto;
	}
	#nav ul {
		margin-top: 1.6em;
		float: left;
		list-style: none;
		float: left;
		display: block;
		font-weight: bold;
		font-size: 1.3em;
		}
		#nav ul li {
			float: left;
			margin-left: 1.5em;
			}	
			#nav ul li a {
				color: #747474;
				background: none;
				text-transform: lowercase;
				text-decoration: none;
				display: block;
				}
				#nav ul li a:hover { color: #ff9212; }

/* Page Selected nav colors */
body#home a#navWelcome,
body#about a#navAbout,
body#documentary a#navDocumentary,
body#comedy a#navComedy,
body#summer_challenge a#navSummer,
body#news a#navNews,
body#press a#navPress 				{ color:#ff9212; }

div#logo {
	float: right;
	background: transparent url(../images/logo.gif) no-repeat scroll right center;
	width: 136px;
	height: 34px;
	margin-right: 0;
	}
	div#logo span { display: none; }

/* @end */






/* @group BANNER */

#bannerContainer {
	width: 100%;
	height: 56px;
	width: 900px;
	margin: 0 auto 20px;
	background: no-repeat scroll 0 top;
	padding-bottom: 15px;
	}

#banner {
	padding-left: 5px;
	padding-top: 15px;
	position: relative;
	}
	
div.bannerTitle {
	margin-left: 10px;
	position: absolute;
	top: 15px;
	left: 5px;
	}
	div.bannerTitle h1 { color:#fff; font-size:33px; letter-spacing:-1px; text-transform:uppercase; margin-top:8px; }

#trailerImage { margin-top:50px; }

/* Change the font-size here to affect all main content elements based on em */
#quarterColumn1 h1.pageTitle {
	color: #fff;
	font-size: 33px;
	line-height: 0.9em;
	letter-spacing: -1px;
	text-transform: uppercase;
	margin-bottom: 7px;
	}

/* @end */







/* @group COLUMNS */

#column1 {
	width: 356px;
	float: left; 
	padding: 20px 0 20px 0;
	margin-right: 20px;
	border-bottom: 1px dotted #999;
	}
	body#home #column1 { 
		width: 410px;
		border: none;
		} 

#column2 {
	width: 240px;
	float: left; 
	padding: 20px 0 20px 0;
	margin-right: 20px;
	border-bottom: 1px dotted #999;
	} 
	body#home #column2 {
		width: 450px;
		border: none;
		}

#column3 { 
	width: 240px;
	float: left; 
	padding: 20px 0 20px 0;
	margin-right: 0;
	border-bottom: 1px dotted #999;
	}
	

/* Total width is 400px according to the box-model.

#column2 { width: 230px; } // total width is 270px

#column3 { width: 240px; } // total width is 200px*/

#quarterColumn2, 
#quarterColumn3, 
#quarterColumn4 { 
	float: left;
	width: 278px;
	margin-right: 20px;
	}

#quarterColumn1{ 
	float: left;
	width: 204px;
	margin-right: 20px;
	}

/* @end */





/* @group FLASH */

.flash { font-size:1.1em; }

/* @end */




/* @group FORMS */

div.inputBorder { 
	width: 169px;
	margin: 0 6px 2px 0; 
	padding: 1px; 
	float: left;
	display: inline;
	border:1px solid #494949;
	}
	div.inputBorder.right { 
		margin-right: 0;
		}
	input.textInput {
		background-color: #333333;
		padding: 3px;
		width: 161px;
		height: 18px;
		margin: 1px;
		border: none;
		font-weight: bolder;
		font-size: 1.3em;
		}

input.submitButton { 
	margin: 0;
	float: left;
	}



/* @end */





/* @group -- Home */

body#home {
	background-image: url(../images/bg_home.gif);
	}

body#home #bannerContainer {
	width: 900px;
	height: 218px;
	margin: 0 auto;
	background-color: transparent;
/*	border-top: 1px dotted #999;
	border-bottom: 1px dotted #999;*/
	}

body#home #banner {
	padding-left: 0;
	padding-top: 0;
	display: block;
	border-bottom-style: none;
	border-bottom-width: 10px;
	color: #ff9212;
	}

body#home div.mainContent #column1 h3 {
	font-size: 13px;
	}

#column3 p.nowPlaying span {
	color: #ff9212;
	}

.nowPlaying { margin-top: 1em; }
	.nowPlaying a:link, 
	.nowPlaying a:hover, 
	.nowPlaying a:active, 
	.nowPlaying a:visited { 
		text-transform: none;
		background-position: 100% 80%;
		color: #747474;
		font-weight: normal;
		}

body#home ul.riseNews { 
	padding-top: 3px;
	}
	body#home ul.riseNews li {
		margin: 0 0 5px 0;
		font-size: 11px;
		background-image: none;
		padding-left: 0;
		font-weight: normal;
		font-style: normal;
		}
		body#home ul.riseNews li a {
			text-transform: none;
			}

/* @end */






/* @group -- About Rise */

body#about #bannerContainer {
	width: 100%;
	height: 0;
	width: 900px;
	margin: 0 auto 10px;
	}

body#about #banner {
	width: 214px;
	float: left;
	}

div.mugContainer {
	margin-bottom: 24px;
	}
	div.mugContainer p { margin-top:10px; }
	div.mugContainer h3 { color:white; }
	div.mugContainer h3 a { text-transform:lowercase; background-image:none; padding:0; }
	div.mugContainer h3 span { color:#fff; }
	div.mugContainer img { margin-top:10px; }

div.film div.filmText {
	display: block;
	width: 320px;
	float: left;
	}

#wrapper div.wideColumn div.film div.tabs ul li {
	background-image: none;
	padding: 0;
	float: left;
	}

body#films div.wideColumn div.film div.filmText {
	clear: left;
	width: 349px;
	}

#wrapper div.wideColumn div.film div.filmText div.tabs ul li.tabBreak {
	border-bottom-color: #ff9212;
	}
	
/* @end */





/* @group -- News */


div.mainContent div.twoThirdColumn div.newsItem img.portraitImage {
	height: 243px;
	width: 160px;
	}

div.twoThirdColumn {
	width: 599px;
	float: left;
	}
	div.twoThirdColumn div.newsItem {
		border-bottom: 2px dashed white;
		margin-bottom: 30px;
		padding-bottom: 25px;
		}
		div.twoThirdColumn div.newsItem p { margin-bottom:10px; }
		div.twoThirdColumn div.newsItem h3 { color:white; margin-bottom:10px; margin-top:-4px; } 
		div.twoThirdColumn div.newsItem img { width:253px; margin-top:10px; text-align:center; margin-bottom:10px; margin-right:10px; }

div.newsNav {
	float: left;
	width: 189px;
	margin-right: 44px;
	}	
	div.newsNav h3 { margin-bottom:13px; }
	div.newsNav h3 a { text-transform:none; font-size:64%; font-weight:bold; }

/* @end */





/* @group -- Documentary / Fictions pages */

body#documentary #banner,
body#fiction #banner, {
	width: 214px;
	float: left;
	}
	
div#filmContainer {
	float: left;
	width: 170px;
	margin: 0 50px 0 0;
	}


body#documentary a.divButton,
body#fiction a.divButton {
	background-image: none;
	padding: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	}
	body#documentary div.filmButton,
	body#comedy div.filmButton,
	body#summer_challenge div.filmButton {
		width: 139px; /* 165px */
		height: 138px; /* 254px */
		padding: 96px 11px 10px 15px;
		margin: 0 2px 0 0;
		background-color: #000;
		}
		a div.filmButton h2 {
			font-size: 13px;
			display: block;
			line-height: 16px;
			color: white;
			text-transform: uppercase;
			margin-bottom: 2px;
			}
		a div.filmButton p {
			color: #7a7a7a;
			text-transform: none;
			font-weight: normal;
			font-style: normal;
			}
		a:hover div.filmButton p {
			color: #ff9212;
			}
		div.filmButton {
			padding: 0;
			margin-bottom: 0;
			margin-left: 0;
			margin-right: 0;
			display: block;
			float: left;
			}		
			div.filmButton#buttonKnuckle			{ background:url(../images/but_knuckle.jpg) no-repeat 0 0; }
			div.filmButton#buttonCasterSemenya		{ background:url(../images/but_CasterSemenya.jpg) no-repeat 0 0; }
			div.filmButton#buttonPromiseOfParadise	{ background:url(../images/but_PromiseOfParadise.jpg) no-repeat 0 0; }
			div.filmButton#buttonWat				{ background:url(../images/but_WAT.jpg) no-repeat 0 0; }
			div.filmButton#buttonKashmir 			{ background:url(../images/but_Kashmir.jpg) no-repeat 0 0; }
			div.filmButton#buttonKim 				{ background:url(../images/but_kimL.jpg) no-repeat 0 0; }
			div.filmButton#buttonCowboys 			{ background:url(../images/but_Cowboys.jpg) no-repeat 0 0; }
			div.filmButton#buttonFestival 			{ background:url(../images/but_festival.jpg) no-repeat 0 0; }
			div.filmButton#buttonPeterandben 		{ background:url(../images/but_peterandben.jpg) no-repeat 0 0; }
			div.filmButton#buttonSummer 			{ background:url(../images/but_summer.jpg) no-repeat 0 0; }
			div.filmButton#buttonApology 			{ background:url(../images/but_apology.jpg) no-repeat 0 0; }
			div.filmButton#buttonInterrupters 		{ background:url(../images/but_interrupters.jpg) no-repeat 0 0; }
			div.filmButton#buttonAsquith 			{ background:url(../images/but_asquith.jpg) no-repeat 0 0; }
			div.filmButton#buttonFestivalBoy 		{ background:url(../images/but_festival_boy.jpg) no-repeat 0 0; }
			div.filmButton#buttonMuslimSchool 		{ background:url(../images/but_muslim_school.jpg) no-repeat 0 0; }
			div.filmButton#buttonRoadToLasVegas 	{ background:url(../images/but_switching_lanes.jpg) no-repeat 0 0; }
		





body#documentary div.wideColumn,
body#fiction div.wideColumn {
	float: left;
	width: 700px;
	position: relative;
	}

#bannerContainer div.filmButton h1 {
	padding: 0;
	margin: 0;
	line-height: 24px;
	}

div.col1 {
	float: left;
	height: 157px;
	width: 208px;
	}

/* these are the film boxes that reveal */
div.film {
	float:left;
	height: 420px;
	width: 649px;
	padding-left: 15px;
	background-color: #161616;
	}
	div.film img.poster {
		float: right;
		margin-right: 15px;
		width: 250px;
		margin-top: 15px;
		margin-bottom: 0;
		}
	div.film div.filmText h2 { color:#ff9212; text-transform:none; }
	
	

/* @end */




/* @group -- Summer Challenge */

body#summer { background-image:url(../images/bg_home.gif); }
	
body#summer #bannerContainer {
	width: 900px;
	height: 218px;
	margin: 0 auto;
	background-color: transparent;
	}

body#summer #banner {
	padding-left: 0;
	padding-top: 0;
	display: block;
	border-bottom-style: none;
	border-bottom-width: 10px;
	color: #ff9212;
	}
	
body#summer div.mainContent { 
	padding-top: 20px;
	}

body#summer div.mainContent div.wideColumn {
	width: 640px;
	padding-right: 10px; 
	float: right;
	}
	body#summer div.mainContent div.wideColumn p {
		font-size: 1.2em;
		padding-bottom: 10px; 
		}
	body#summer div.mainContent div.wideColumn h1 {
		font-size: 1.8em;
		line-height: 1.1em;
		padding-bottom: 0.7em; 
		}
	body#summer div.mainContent div.wideColumn img.summerLogos {
		margin-right: 40px;
		padding-bottom: 20px;
		}

/* @end */




/* @group FOOTER */

#footer { width:920px; margin:auto; padding-bottom:4em; }
	#footer ul {
		margin-top: 1.6em;
		float: right;
		list-style: none;
		display: block;
		font-weight: bold;
		font-size: 1.3em;
		}
		#footer ul li { background:none; padding:0; float:left; margin-left:1.5em; }
			#footer ul li a { color:#747474; background:none; text-transform:lowercase; text-decoration:none; display:block; }
			#footer ul li a:hover { color: #ff9212; }

/* @end */