@charset "UTF-8";
/* CSS Document */

h1,h2,h3,h4 {font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:white;}

body { background:black; color:white; text-align:justify;}

td {	vertical-align:top;}

.mainbody {padding-top:0;}

a.button.black{ 
	font-family:Arial, Helvetica, sans-serif;
	font-weight:lighter; 
}
a.button.black strong {
	font-weight:bold;
}

#header_menu {background:black;}

#header h1 {
	height:0;
	overflow:hidden;
	padding-top:45px;
	width:274px;
	background:url(../images/logos/unionfilms_grey.png) no-repeat;
	margin-top:10px;
	margin-bottom:5px;
}
#header h2 {
	clear:both;
	color:#888;
	font-size:12px;
	font-weight:normal;
}

#review table a, #review p a, #review2 p a {
    color:#0088cc;
}

#container {
	width:960px;
	background:black;
	border:16px solid white;
	margin:0px auto;
	text-align:justify;
}

#logo {
	float: left;
	margin:26px 0 0 26px;
}

#search_ans{
	margin-left:-40px;
	width:260px;
	z-index:500;
    position: absolute;
	font-size:12px;
	text-align:left;
}

#search_ans li a{
	display:block;
	background: rgba(220,220,220,0.9);
	color:white; 
	padding:3px;
}

#search_ans img{
	float:left; margin-right:6px; margin-left:3px;
}

#search_ans .title{
	display:block;
	color:black;
	font-weight:bold;
	cursor:pointer;
}

#search_ans .date{
	display:block;
	color:#666;
	font-size:10px;
}

#search_ans li a:hover{
	background: white;
}

#page {
	width:960px;
	overflow:hidden;
}

#content {
}

#menubar {
	margin-top:250px;
	width:960px;
	height:30px;
	background:rgba(0,0,0,0.5);
}

#menu {
	float:right;
	margin:0px;
	padding:0px;
	margin-right:18px;	
}

#menu li {
	display:inline;
	list-style:none;
}

#menu li a {
	display:block;
	font-size:18px;
	padding: 5px 12px;
	float:left;
}


#menu li a:link, #menu li a:visited, 
#userinfo a:link, #userinfo a:visited {
	color:#FFFFFF;
	text-decoration:none;
}

#menu li a:hover, #menu li a:active, 
#userinfo a:hover, #userinfo a:active {
	color:#CCCCCC;
	text-decoration:underline;
}


#userinfo{
	font-size:18px;
	padding: 5px 12px;
	margin-left:18px;
	float:left;
}

#buttons {
	float:right;
	margin-top:18px;
	font-size:14px;
}

#review {
	background-image: -webkit-gradient(linear, left top, left 160, color-stop(0, rgba(0,0,0,0.5)), color-stop(1, rgba(0,0,0,1)));
	background-image: -moz-linear-gradient(0px 160px 90deg, rgba(0,0,0,1),  rgba(0,0,0,0.5));
	padding:60px 30px;
	width:900px;
}

#review2 {
	background-image: -webkit-gradient(linear, left top, left 70, color-stop(0, rgba(0,0,0,0.5)), color-stop(1, rgba(0,0,0,1)));
	background-image: -moz-linear-gradient(0px 70px 90deg, rgba(0,0,0,1),  rgba(0,0,0,0.5));
	padding:35px 0px;
	width:960px;
}

#review	h1{ 
	font-size :48px;
	margin:0px;
	margin-bottom:18px;
}

#review h2 {
	font-size:16px;
	color:#999999;
	margin-top:-8px;
	font-weight:lighter;
}

#review .showing {
	display:block;
	float:right;
	color:#999999;
	margin:0px;
	margin-bottom:5px;
	margin-top:-15px;
	font-size:16px;
	line-height:20px;
	color:white;
	text-align:right;
}

#review .buttons {
	text-align:right;
}

#review .poster {
	clear:both;
	float:left;
	margin-right:20px;
	margin-top:5px;
}

#review .review {
	width:680px;
	float:right;
	color:#cccccc;
}

#review .review p {
	margin-top:0px;
}

#review .indented {
	padding-left:40px;
	padding-right:40px;
}

#filminfo p {
	font-size:12px;
	color:#999999;
	float:left;
	display:block;
	width:516px;
	line-height:20px;
	margin:0px;
}

#filminfo p a {
	color:white;
}

#filminfo h3{
	clear:both;
	color:#aaaaaa;
	float:left;
	display:block;
	width:80px;
	font-size:12px;
	line-height:20px;
	margin:0px;
}

#featureblock {
	width:960px;
	height:360px;
	overflow:hidden;
}

#featureblock .left{
	float:left;
	display:block;
	width:740px;
	height:360px;
	overflow:hidden;
	margin:0px;
	padding:0px;
}

#featureblock .left li{
	list-style:none;
	margin:0px;
	padding:0px;
}

#featureblock .left li a{
	display:block;
	width:740px;
	height:90px;
	padding-top:270px;
	text-decoration:none;
	color:#FFFFFF;
}

#featureblock .left li a h2, #featureblock .left li a h3, #featureblock .left li a p {
	background:rgba(0,0,0,0.65);
	padding:0px 20px;
	margin:0px;
}

#featureblock .left li a h2{
	font-size:30px;
	height:30px;
	padding-top:10px;
}

#featureblock .left li a h3{
	font-size:18px;
	height:18px;
	padding-top:2px;
	color:#999999;
	font-weight:normal;
}

#featureblock .left li a p{
	font-size:14px;
	height:14px;
	padding-top:1px;
	padding-bottom:15px;
}

.featureright {
	width:220px;
	height:360px;
	overflow:hidden;
	position:relative;
	float:left;
}

.feature{
	height:270px;
	float:left;
	text-align:left;
}

.feature .showingbar{
	height:18px;
	background:#111111;
	-moz-opacity:.80; filter:alpha(opacity=80); opacity:.80; 
	display:block;
	margin-top:246px;
	padding:3px;
	color:#FFFFFF;
}
.feature:hover{
	text-decoration: underline;
	color:white;
}
.featuresqr{
	margin-left:10px;
}

 
#filmbar{
	background: #222222;
	clear:both;
	margin-top:10px;
	margin-bottom:0px;
	padding:4px;
	font-size:13px;
	font-weight:bold;
	color:#888888;
}
#filmbar li{
	display:inline;
	margin-left:10px;
}
 
#filmbar a:link, #filmbar a:visited{
	color:white;
}

#filmbar a:hover, #filmbar a:active{
	color:#0099FF;
}

#filmlist{
	padding:10px;
	border: 2px solid #222222;
	text-align:left;
}
#filmlist h1{
	font-size: 30px;
	margin-top:0px;
	margin-bottom:15px;
}
 .filmlistitem{
	width:219px;
	float:left;
	text-align:center;
}
 .filmlistitem a{
 	color:white;
}

 .filmlistitem small{
 	color:#999;
}
 .filmlistitem img{
	text-decoration:none;
	width:120px;
	height:180px;
	border:2px solid #222222;
}

.filmlistitem img.phoenix{
	border:2px solid #fff;
	box-shadow: 0px 0px 10px #fff;
	-moz-box-shadow: 0px 0px 10px #fff;
	-webkit-box-shadow: 0px 0px 10px #fff;
}

 .filmlistitem a:hover img{
	border:2px solid #0099FF;
}
#filmlist h3{
	margin:8px 0px;
	line-height:26px;
}
 #filmlist .colfirst{
margin:0px;
	width:200px;
	float:left;
	font-size:12px;
	line-height:14px;
}
#filmlist .col{
	width:200px;
	margin: 0px 0px 0px 24px;
	font-size:12px;
	line-height:14px;
}
.filmlistpage{
	display: none;
}
.filmlistitem a:link, .filmlistitem a:visited,
.filmlistitem a:hover, .filmlistitem a:active {
	text-decoration:none;
}


#filmlist hr{
	clear:both;
	height:5px;
	border:none;
	color:black;
	background:black;
}

#filmlistnav{
	float:right;
	margin-top:-50px;
	display:block;
}
#filmlistfooter{
	font-size:12px;
	background:#111111;
	margin: 0px -10px -10px -10px;
	padding:0px 10px 1px 10px;
}

#filmlistfooter h2{
	clear:both;
	padding:0px;
	margin-bottom: 5px;
	padding-top: 10px;
	font-weight: bold;
}
#filmlistfooter .col{
	width:175px;
}
.col {
	float:left;
}
.pageleft, .pageright{
	cursor: pointer;
	font-weight:bold;
	font-size:18px;
}
.cert {
	float:right;
	margin-top:-42px;
}

#options {
	width:120px;
	margin-left:20px;
	float:left;
}

#extras {
	display:block;
	padding:0;
	margin:0;
	list-style:none;

}

#extras li {
	display:inline;
	float:right;
	margin: 10px 0 10px 10px;
}

/*#extras li.button a {
	display:block;
	float:left;
	text-align:center;
	text-decoration:none;
	height:24px;
	margin:4px 0px 4px 12px;
	padding-top:6px;
	width:120px;
	overflow:hidden;
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(40,40,40,0.5)), to(rgba(100,100,100,0.5)), color-stop(.51,rgba(80,80,80,0.5)),color-stop(.49,rgba(60,60,60,0.5)));
	background-image: -moz-linear-gradient(0% 100% 90deg,rgba(40,40,40,0.5), rgba(50,50,50,0.5), rgba(60,60,60,0.5) 50%,rgba(80,80,80,0.5) 51%,rgba(100,100,100,0.5) 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#extras li.button a:hover {
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(60,60,60,0.5)), to(rgba(120,120,120,0.5)), color-stop(.51,rgba(100,100,100,0.5)),color-stop(.49,rgba(80,80,80,0.5)));
	background-image: -moz-linear-gradient(0% 100% 90deg,rgba(60,60,60,0.5), rgba(70,70,70,0.5), rgba(80,80,80,0.5) 50%,rgba(100,100,100,0.5) 51%,rgba(120,120,120,0.5) 100%);
}*/

#optionlist {
	padding:0px;
	margin:0px;
	margin-top:20px;
	list-style:none;
}

#optionlist li {
	font-size:14px;
	height:25px;
	padding-left:25px;
	padding-top:1px;
}

#optionlist li a:link, #optionlist li a:visited {
	text-decoration:none;
	color:#888888;
	margin-top:-4px;
}

#optionlist li a:hover, #optionlist li a:active {
	text-decoration:underline;
	color:#666666;
	margin-top:-4px;
}
	
#adminbar {
	display:none;
	background:#CBCBCB;
	color:black;
	height:22px;
	text-align:center;
}

#adminbar a{
	color:#CC0000;
}

#adminextra {
	background:#CBCBCB;
	position:relative;
	z-index:1000;
	text-align:left;
}

#adminextra div{
padding:10px;
margin:10px;
}
#showadmin {
	position:absolute;
	top:4px;
	left:4px;
	color:#cbcbcb;
}

#film_top {
	display:block;
	width:930px;
	height:60px;
	float:left;
	padding-left:30px;
	padding-top:30px;
	padding-bottom:140px;
	text-shadow: black 1px 1px 5px;
}

#film_top {
	color:white;
}

#film_top h1 {
	font-size:18px;
	margin:0px;
	line-height:18px;
}

#film_top h2 {
	font-size:12px;
	margin:0px;
	margin-top:2px;
	color:#ffffff;
	font-weight:lighter;
}

.adminfilmlist .film {
	display:inline-block;
	width:500px;
}

.adminfilmlist .edit a {
	display:inline-block;
	padding-left:20px;
	background:url('http://www.susu.org/images/icons/page_white_edit.png') 0 0 no-repeat;
	width:80px;
	color:#999;
}

.adminfilmlist .download a {
	display:inline-block;
	padding-left:20px;
	background:url('http://www.susu.org/images/icons/page_white_excel.png') 0 0 no-repeat;
	width:110px;
	color:#999;
}

.adminfilmlist .view a {
	display:inline-block;
	padding-left:20px;
	background:url('http://www.susu.org/images/icons/film.png') 0 0 no-repeat;
	width:110px;
	color:#999;
}

.adminfilmlist .addshowing a {
	display:inline-block;
	padding-left:20px;
	background:url('http://www.susu.org/images/icons/add.png') 0 0 no-repeat;
	width:110px;
	color:#999;
}

.adminfilmlist .deletefilm a {
	display:inline-block;
	padding-left:20px;
	background:url('http://www.susu.org/images/icons/cross.png') 0 0 no-repeat;
	width:110px;
	color:#999;
}

.adminfilmlist li a:hover {
	color:red;
}
.adminfilmlist li:hover {
	background:#222;
}

#myufrightbar {
	float:right;
	width:250px;
}

#myufpage{
	width:630px;
}

.myufbox {
	margin-bottom:20px;
	border: #555 solid 1px;
	-moz-opacity:.80; filter:alpha(opacity=80); opacity:.80; 
	padding:5px;
	font-size: 14px;
}

.myufbox th{
	width:85px;
}

.myufbox ul{
	list-style:none;
	margin: 5px;
	padding: 0px;
}

.myufbox h3{
	margin: -5px -5px 5px -5px;
	padding:5px;
	background: #555;
	color: white;
	font-size: 16px;
}

.myuffilmlist{
	width:154px;
	float:left;
	text-align:center;
}

.myuffilmlist img{
	text-decoration:none;
	width:120px;
	height:180px;
	border:2px solid #222222;
}
.myuffilmlist a:hover img{
	border:2px solid white;
}
.myuffilmlist a:hover .title{
	text-decoration:underline;
}	

#popup{
	background:white;
	color:black;
	margin: auto;
	margin-bottom:20px;
	width:620px;
}

#popup img{
	float: left;
	margin-right: 5px;
	border:2px solid #aaaaaa;
}
#popup a{ color:#0088cc; }

#editfilm input[type=text] {
    color:#999;
	font-size:12px;
	background:none;
	border:1px dashed #333;
	outline:0;
}

#editfilm #title {
	font-size:36px;
	background:none;
	border:1px dashed #333;
	color:#FFF;
	outline:0;
}
#editfilm #tagline {
	color:#999;
	width:100%;
	margin-bottom:10px;
	font-size:14px;
	background:none;
	border:1px dashed #333;
	outline:0;
}

#editfilm #url {
	color:#999;
	margin-bottom:10px;
	font-size:12px;
	background:none;
	border:1px dashed #333;
	outline:0;
}

#editfilm #ereview{
	color:#ccc;
	width:680px;
	height:400px;
	margin-bottom:10px;
	font-size:12px;
	background:none;
	border:1px dashed #333;
	outline:0;
    padding:5px;
}
#editfilm #reviewer{
	color:#ccc;
	float:right;
	text-align:right;
	font-size:12px;
	background:none;
	width:250px;
	border:1px dashed #333;
	outline:0;
	margin-left:600px;
}

#editfilm #save {
	float:right;
	margin:20px 0px;
}

.filmlistitem .flag {
    margin-top:-186px;
}
.myuffilmlist .flag {
    margin-top:-186px;
}

#beta-note{
	float:right;
	width: 600px;
	margin: -20px 10px 0px 0px;
	border: 2px solid #333333;
	padding:5px;
	background: #555555;
	font-size: 12px;
	color:white;
}

#message-preview {
	width:640px;
	float:left;
}

#message {
	width:580px;
	height:260px;
	padding:30px;
	background:url(../images/template/emailbg.jpg) no-repeat;
}

#message div {
	width:440px;
	float:left;
}

#message img {
	float:left;
	margin-right:20px;
}

#message h1 {
	font-size:24px;
}

#message h2 {
	margin-bottom:24px;
}

#message a:link, #message a:active {
	color:#39C;
}

#message-preview h3, #message-form h3 {
	margin-left:10px;
	margin-bottom:10px;
}

#message-form {
	width:240px;
	float:right;
}

#email-form {
	width:220px;
	height:290px;
	padding:15px 10px;
	background:url(../images/template/emailform.jpg) no-repeat;
	font-size:12px;
}

#email-form form input{
	width:166px;
	float:right;
	background:#eee;
	border:1px solid #222;
	color:#666;
}

#email-form form textarea{
	margin-top:10px;
	width:168px;
	height:130px;
	float:right;
	background:#eee;
	border:1px solid #222;
	color:#666;}

#email-table {
	margin:0;
	padding:0;
}

label { font-size:12px; }

#email-table textarea, #email-table input { 
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	margin-left:10px;
}

#email-form form input#sendemail {
	margin-top:10px;
	width:auto;
}

#socialblock {
	width:920px;
	height:180px;
	padding:20px;
	background:#555;
	background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#444));	
	background: -moz-linear-gradient(top, #777, #444);
}

#socialblock .block {
	background:#ccc;
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#999));	
	background: -moz-linear-gradient(top, #eee, #999);
	box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
	color:black;
	float:left;
	text-align:left;
	border-radius:5px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

#info {
	width:260px;
	height:140px;
	padding:20px;
	margin-right:20px;
}

#info img { float:right; margin-top:5px; }

#twitter {
	width:240px;
	height:140px;
	padding:20px;
	margin-right:20px;
}

#facebook {
	width:300px;
	height:170px;
	padding-top:10px;
	
}

#twitter .twitter_name {color:black; font-weight:bold;}

#twitter .time {font-size:10px;}

#twitter .followus { clear:right; float:right; }

#comingsoonblock {
	width:945px;
	height:270px;
	padding-left:15px;
	background:#222;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));	
	background-image: -moz-linear-gradient(top, #333333, #111111);
}


/* root element for the whole scrollable setup */
div.scrollable {
	position:relative;
	overflow:hidden;
	width: 840px;	 
	height:250px;	
}

/* 
	root element for scrollable items. It is 
	absolutely positioned with large width. 
*/
#thumbs {	
	position:absolute;
	width:3000px;	
	clear:both;
}

#thumbs img{
	box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
}

#thumbs img.phoenix{
	box-shadow: 0px 0px 10px #fff;
	-moz-box-shadow: 0px 0px 10px #fff;
	-webkit-box-shadow: 0px 0px 10px #fff;
}

.featureitems {
	position:absolute;
	height:20000px;
}

.featureitems div {
	height:90px;
	width:200px;
}

/* custom positioning for navigational links */
a.prev, a.next {
	margin-top:118px;	
}



/* single item */
#thumbs div {
	float:left;
	width:120px;
	margin:10px;
	height:230px;
	color:#fff;
	cursor:pointer;
	text-align:center;
}

#thumbs div p {
	margin:4px;
	line-height:16px;
}


#thumbs div .flag {
	margin-top: -180px;
}

/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:24px;
	height:24px;
	background:url(../images/buttons/scroll_left.png) no-repeat;
	float:left;
	margin:90px 10px;
	cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -24px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	width:24px;
	height:24px;
	background-image:url(../images/buttons/scroll_right.png) ;
	clear:right;	
}



/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	padding-top:5px;
	margin-left:443px;
	width:200px;
	height:15px;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../images/buttons/scroll_navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
} 

.author { 
	font-size:10px;
	color:#666666;
}

.author span {
	font-size:14px;
	color:#FFFFFF;
}

div#trailer {
	width:100%;
	text-align:center;
	margin:20px 0;
}

#emailpreview{
	width:750px; background: white;color:black;margin:auto;
}

#emailpreview .whotable{
	border-bottom: grey 2px solid;
}

#emailpreview a{
	color:blue;
}

#copyright {
	text-align: center;
	color:#666;
 	margin-bottom:20px;
	padding:0px 160px;
}

#copyright a {
	color:white;
}

#copyright p {
	font-size: 10px;
	line-height:14px;
}

.terms {
	font-size:12px;
	color:#999;
}

#bookings_calendar{
	width:896px;
	overflow:hidden;
	border-left:1px solid #222;
	border-bottom: 1px solid #222;
}

.week {
    width: 910px;
    height: 100px;
	border-top: 1px solid #333;
}

.week .day {
	display:block;
    width: 117px;
	height: 90px;
	padding: 5px;
	font-size:10px;
	text-align:left;
    float: left;
	color:#444;
	position:relative;
	border-right: 1px solid #333;
}

#review .week .day h2, .week .day h3 { 
	float:left;
	margin:0px;
	padding:0px;
	color:#444;
	font-size:10px;
	font-weight:normal;
	margin-right:5px;
	margin-bottom:10px;
}

#review .week .day h2 { font-size:16px; }

.week .day p {
	clear:both;
	font-size:12px;
	color:#999;
	line-height:normal;
}

.week .day p .standard{
	color:#666;
}

.oldbooking {
	position:absolute;
	top:0px;
	left:0px;
}

.today {
	background:#FFF;
}

.month {
	background:#151515;
	color:#222;
}

.bigbutton {
	margin-right: 15px;
}

#review ol {
	list-style:decimal;
	margin:10px 10px 10px 30px;
}

#susumenu li.home a { padding-left:8px; padding-right:8px; padding-bottom:10px; border:none;}

#header { background:#000; border-color:#000; margin-bottom:0; border-bottom:none; padding-top:30px; }
#loginbox { background:#333;}
#loginbox p { color:#999;}
#searchform input { border-color:white; color:#444;}

#susumenu li a {
	display:block;
	height:1.25em;
	padding:0.66666666666667em;	/* 8px */
	-webkit-transition:padding-top 0.15s linear;
	-moz-transition-property: padding-top;
	-moz-transition-duration: 0.15s;
}

#susumenu li.one {width:115px;}
#susumenu li.one a { background:#ededed; color:#444; padding:0.66666666666667em }
#susumenu li.one a p.big { display:none; }
#susumenu li.one a:after {
	content:'Back to SUSU'; 
	font-family: "museo-slab-1","museo-slab-2",serif;
	font-weight:700;
	font-size:1.166666666666667em; 
	margin:0; 
	line-height:1.166666666666667em;
}
#susumenu li.two { width:100px; }
#susumenu li.two a { background:#faa61a; }

#susumenu li.three { width:100px; }
#susumenu li.three a { background:#ee5823; }

#susumenu li.four {width:90px;} /* 111px */
#susumenu li.four a { background:#ed0677; }

#susumenu li.five {width:100px;} /* 96px */
#susumenu li.five a { background:#a3238e; }

#susumenu li.six {width:100px;} /* 96px */
#susumenu li.six a { background:#2e3192; }

#susumenu li.seven {width:100px;} /* 111px */
#susumenu li.seven a { background:#007dc5; }

#susumenu li.eight {width:110px;} /* 99px */
#susumenu li.eight a { background:#00aeef; }

#susumenu li.custom {width:145px;}
#susumenu li.custom a { background:#72bf44; padding-bottom:0.66666666666667em; }	/* 21px */

#susumenu li a:hover, #susumenu li a.selected { 
	padding-top:1.833333333333333em;	/* 22px */
	-webkit-transition:padding-top 0.15s linear;
	-moz-transition-property: padding-top;  
	-moz-transition-duration: 0.15s;
}

#susumenu li a p { display:none; }
#susumenu li a p.big { display:inline; }