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

body { 
	background:rgb(34,34,34);
	color:#AAA;
	line-height:1.5em;
  min-width: 0px; /* Modified to allow Unsemantic to take over from 960 */
}

a:link, a:visited {
	color:white;
	-webkit-transition: text-shadow .3s ease-in-out, color .3s ease-in-out;
	-moz-transition: text-shadow .3s ease-in-out, color .3s ease-in-out;
	-o-transition: text-shadow .3s ease-in-out, color .3s ease-in-out;
	transition: text-shadow .3s ease-in-out, color .3s ease-in-out;
}
a:hover, a:active {
	color:#B1FFFF;
	text-shadow: 0 0 10px #B1FFFF;
	-webkit-transition: text-shadow .3s ease-in-out, color .3s ease-in-out;
	-moz-transition: text-shadow .3s ease-in-out, color .3s ease-in-out;
	-o-transition: text-shadow .3s ease-in-out, color .3s ease-in-out;
	transition: text-shadow .3s ease-in-out, color .3s ease-in-out;
}

/* coreui typography overrides */
h2, h3 { font-weight: bold; }



.hidden {display:none;}

.lite {font-weight:normal;}
.light { font-weight:300; }

.nospace { display:none; }

#body { 
  min-height:250px;
  margin-top:0px;
  padding-top:120px;
  background: transparent;
}

.clear-transparencey {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
  background: rgba(44,36,123,0.8);
}

#body.nobg .clear-transparencey {
  background: transparent;
}

/*compatability for older ie versions*/
.no-cssgradients #body { background: url(images/bg_grad_purple.png) repeat-x; }

#body.nobg { 
	background:#222;
	margin-top:20px;
	padding-top:0;
	min-height:0;
}

#body h1, #body h2, #body h3, #body h4, #body h5, #body h6 {
	font-weight:normal;
}

#body h2.long {
	color:#ccc;
}

#header a { text-shadow:none; }

#header h2 {
}

#header {
  position: fixed;
  width : 100%;
  top: 0;
  left: 0;
	padding-top:20px;
	padding-bottom:20px;

  z-index: 1000;
  background: url(/images/filmstrip/filmstrip_header.png);
  background-size: auto 100%;
  background-repeat: repeat-x;
  opacity: 0.9;

	color:black;
}

#header .logo-container {
  text-align: center;
}

#header .logo {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

#header h2 {
	text-align: center;
	text-transform:uppercase;
	color:#999;

  font-size: 1.2em;
  font-family: "museo-slab", Helvetica, sans-serif;
}

#header h2 span { color:#666; }

#header .text-info {
  float: right;
  color: #aaa;
  padding: 0px 6px;
  top: 8px;
  margin-right: 5px;
  font-size: 8pt;

}

#header .link.text-info {
  cursor: pointer;
}

#header .link.text-info:hover {
  color: white;
}

#header .button {
	height:0;
	font-size:0;
	padding-top:15px;
	float:right;
	margin-right:10px;
	background-position:0 0;
	overflow:hidden;
	background-repeat:no-repeat;
	margin-top:4px;
}

#header .button:hover { background-position:0 -15px; }

#header .button.contact {
  background-image:url(/images/icons/contact_white_bg.png);
  width: 22px;
}
#header .button.twitter {
  background-image:url(/images/icons/header/twitter_sprite.png);
  width: 22px;
}
#header .button.facebook {
  background-image:url(/images/icons/header/facebook_sprite.png);
  width: 22px;
}
#header .button.instagram {
	background-image:url(/images/icons/header/instagram_sprite.png);
	width: 22px;
}
#header .button.login {
  background-image:url(/images/icons/header/user_sprite.png);
  width: 22px;
}

#loginform a { color: #111; }

#ufmenu {
  font-size: 1.2em;
  /*The height of the menus will expand with font size now, yay! */
  line-height: 1em;
}

#ufmenu li {
  list-style:none;
  display: inline-block;
  text-align: left;
}

#ufmenu li a {
  display: inline-block;
  padding:5px 6px;
  text-transform:uppercase;
  font-weight:bold;
  font-family: "museo-sans", Helvetica, sans-serif;
}

#ufmenu li:first-child a { padding-left:0; }

#ufmenu li a:link, #ufmenu li a:visited { color:#999; }
#ufmenu li a:hover, #ufmenu li a:active { color:white; text-shadow:none; }

#ufmenu li a.selected {
  color:white;
  cursor:default;
}

@media all and (max-width: 767px)
	{
		#ufmenu
		{
			position: absolute;
      left: 100%;
      top: 100%;
			height:auto;

      margin-top: 10px;
			padding: 10px 100px 10px 10px;

      font-size: 2em;

			transition: margin-left 0.3s ease-in;
			background: #222222;
			border-radius: 20px;
		}

		#ufmenu.display
		{
			display:block;
			margin-left: -9em;
			transition: margin-left 0.3s ease-out;
		}
	
		#ufmenu li{
			clear: left;
      display: block;
		}

		#menubutton
		{
			display: block;
      float: right;
      margin-bottom: 0;

      font-weight: bold;
      text-align: right;
		}

    #header .logo {
      max-height: 1.3em;
    }
	}

@media all and (min-width: 768px) {

  #ufmenu {
    display:block;
    margin:0;
    /*margin-bottom:70px;*/
    padding:0;
    float:right;
    text-align: center;
  }
}

#content {
	
}

.poster_soon {
margin:5px;
border:5px solid white;
}

#searchform {
	float:right;
	margin-bottom:15px;
	margin-right:-12px;
}

.filmsearch input[type="text"] {
	background:white;
	border:none;
	font-size:12px;
	padding:5px 25px 5px 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
  width: 20em;
	height: 1em;
	color:#999;
	-moz-box-shadow: inset 0 2px 2px #999, inset 0 -1px 1px #e0e0e0;
	-webkit-box-shadow: inset 0 2px 2px #999, inset 0 -1px 1px #e0e0e0;
	box-shadow: inset 0 2px 2px #999, inset 0 -1px 1px #e0e0e0;
	margin:0 0 0 20px;
	vertical-align:middle;
}

.no-boxshadow .filmsearch input[type="text"] { border:1px solid #999; }

.filmsearch input[type="submit"] {
	display:inline-block;
	width:14px;
	height:0;
	padding-top:14px;
	font-size:0;
	overflow:hidden;
	background-image:url(../images/icons/search_white_bg.png);
	background-position:0 -15px;
	background-repeat:no-repeat;
	border:0px;
	background-color:transparent;
	position:relative;
	left:-23px;
	top:3px;
}

.filmsearch input[type="submit"]:hover {
	background-position:0 1px;
	cursor:pointer;
}

.filmextras {
	-webkit-transition: top 0.25s linear;
	padding:20px;
	width:260px;
	height:410px;
	position:absolute;
	top:450px;
	left:0;
	background:rgba(50,50,50,0.9);
	color:#999;
}

.filmextras a.tickets, .filmextras a.trailer {
	display:inline-block;
	padding:7px 0;
	text-align:center;
	font-size:16px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow:inset 0px 1px 1px rgba(225,225,225,0.5), inset 0px -1px 1px rgba(0,0,0,0.5);
}

.filmextras a.tickets:link, .filmextras a.tickets:visited, .filmextras a.trailer:link, .filmextras a.trailer:visited  { background:#222; color:white; }
.filmextras a.tickets:hover, .filmextras a.tickets:active, .filmextras a.trailer:hover, .filmextras a.trailer:active { background:#ccc; color:black; }

.filmextras a.tickets { width:110px; }
.filmextras a.trailer { width:130px; margin-right:20px; }

.filmextras .tomatometer {
	display:block;
	width:260px;
	height:30px;
	background:rgba(255,255,255,0.2);
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	margin-top:20px;
	-webkit-box-shadow:inset 0px 1px 1px rgba(225,225,225,0.5), inset 0px -1px 1px rgba(0,0,0,0.5);
}

.filmextras .tomatometer .meter{
	display:block;
	height:30px;
	background:#EF7205;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.filmextras p {
	margin-top:10px;
	font-size:16px;
	text-transform:uppercase;
}

.filmextras a.button {
	display:block;
	padding:7px 20px;
	width:220px;
	margin-bottom:20px;
	background:#222;
	font-size:16px;
	color:white;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow:inset 0px 1px 1px rgba(225,225,225,0.5), inset 0px -1px 1px rgba(0,0,0,0.5);
}

.filmextras a.button.facebook { background:#3B5998; }
.filmextras a.button.twitter { background:#33CCFF; }

.container_12.films.featured { margin-bottom:20px; }

/*#body .button {
	display:inline-block;
	background:rgba(255,255,255,0.5);
	color:rgb(34,34,34);
	font-size:16px;
	padding:5px 10px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	border-radius:7px;
	text-align:center;
}*/

#body .button {
	display:inline-block;
	min-height:25px;
	padding:0.4rem 0.3rem 0.3rem 0.3rem;
	text-align:center;
	color:white;
	text-transform:uppercase;
	
	background: #333333; /* Old Browsers */
	background: -moz-linear-gradient(top, #333333 0%, #2a2a2a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#2a2a2a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #333333 0%,#2a2a2a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #333333 0%,#2a2a2a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #333333 0%,#2a2a2a 100%); /* IE10+ */
	background: linear-gradient(to bottom, #333333 0%,#2a2a2a 100%); /* W3C */
	
	-moz-box-shadow: inset 0 1px 1px #5c5c5c, 0 1px 3px black;
	-o-box-shadow: inset 0 1px 1px #5c5c5c, 0 1px 3px black;
	-webkit-box-shadow: inset 0 1px 1px #5c5c5c, 0 1px 3px black;
	box-shadow: inset 0 1px 1px #5c5c5c, 0 1px 3px black;
	
	-moz-border-radius:3px;
	-o-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	
	-webkit-transition:all .25s ease-in-out;  
	-moz-transition:all .25s ease-in-out;  
	-o-transition:all .25s ease-in-out;  
	transition:all .25s ease-in-out; 
}

#body  .button:hover { 
	-moz-box-shadow:inset 0 0 0 2px #B1FFFF, inset 0 3px 10px black, 0 0 15px #292DE2;
	-o-box-shadow:inset 0 0 0 2px #B1FFFF, inset 0 3px 10px black, 0 0 15px #292DE2;
	-webkit-box-shadow:inset 0 0 0 2px #B1FFFF, inset 0 3px 10px black, 0 0 15px #292DE2;
	box-shadow:inset 0 0 0 2px #B1FFFF, inset 0 3px 10px black, 0 0 15px #292DE2;
	
	text-shadow: 1px 1px 5px #292DE2;
	
	color:#B1FFFF;
}

.followunionfilms {
	padding:20px;
	height:88px;
	background:url(../images/social/jacksparrow.png) no-repeat;
	margin-top:-12px;
	color:black;
}

.followunionfilms p {
	margin-top:20px;
	margin-bottom:10px;
}

.followunionfilms a {
	display:block;
	float:left;
	margin-right:10px;
}

#search_ans{
	margin:0;
	width:300px;
	z-index:510;
    position: absolute;
	right:-15px;
	top:0;
	font-size:14px;
	text-align:left;
}

#search_ans li{
	list-style:none;
}

#search_ans li a{
	display:block;
	background: #e0e0e0;
	color:black; 
	padding:10px;
}

#search_ans img{
	float:left; margin-right:10px; margin-left:0px;
}

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

#search_ans .date{
	display:block;
	color:#333;
	font-size:10px;
	text-shadow:none;
}

#search_ans li a:hover{
	background: rgba(120,120,120,0.9);
}

#search_ans li a:hover .title { color:white; }
#search_ans li a:hover .date { color:rgba(255,255,255,0.8); }

.contact label { width: 140px; text-align:right; margin-right:20px; display:inline-block; }

.contact input[type='text'], .contact textarea { 
	border:1px solid white;
	font-size:14px;
	padding:5px 10px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	margin-bottom:10px;
	vertical-align:top;
	margin-top:-2px;
	width: 220px;
}
.contact textarea {
	width:460px;
	height:140px;
}

.contact input[type='submit'] {
	background:#e0e0e0 url(../images/icons/email_go.png) no-repeat;
	background-position:112px 10px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	border:1px solid white;
	font-size:14px;
	padding:10px 32px 10px 10px;
	-webkit-box-shadow: inset 0 -7px 7px #ccc, inset 0 7px 7px white;
	-moz-box-shadow: inset 0 -7px 7px #ccc, inset 0 7px 7px white;
	box-shadow: inset 0 -7px 7px #ccc, inset 0 7px 7px white;
	margin-left:-1px;
}

.contact input[type="submit"]:hover {
	background-color: #eee;
	-webkit-box-shadow: inset 0 -7px 7px #ddd, inset 0 7px 7px white;
	-moz-box-shadow: inset 0 -7px 7px #ddd, inset 0 7px 7px white;
	box-shadow: inset 0 -7px 7px #ddd, inset 0 7px 7px white;
	cursor:pointer;
}

.contact .contact-error {
	color:red;
	margin-left:20px;
}

img.inline {
	margin-right:20px;
}

.definition, .definition h1, .definition h2, .definition h3 {
	font-family:"Times New Roman", Times, serif;
}

.definition h1, .definition h2 { display: inline-block; margin-bottom:10px; line-height:0; }

.definition h1 {}

.definition h2 {
	font-weight:100;
	margin-left:10px;
	position:relative;
	top:-2px;
}

.definition h3 { font-style:italic; }

.definition ol { list-style:decimal; }
.definition ol li { margin-left:20px; }


.white {
	background:#fff !important;
	color:#333;
}

.grey {
	background:#444;
	background: -webkit-gradient(linear, 0 0, 0 250, from(#111), to(#333), color-stop(0.02,#444));
	background: -moz-linear-gradient(top, #111 0px, #444 5px, #333 250px);
	padding-top:30px;
	padding-bottom:30px;
}

.black {
	background:#111;
	background: -webkit-gradient(linear, 0 0, 0 250, from(#111), to(#111), color-stop(0.02,#222));
	background: -moz-linear-gradient(top, #111 0px, #222 5px, #111 250px);
	padding-top:30px;
	padding-bottom:30px;
}

.square_score {
	position:relative;
	width: 100%;
	height: 2rem;
	background:#1a1a1a;
	float:left;
  margin-top: 2rem;
	margin-right: 1.5rem;
	margin-bottom: 2em;
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-moz-box-shadow: inset 0 -1px 1px #444, inset 0 1px 10px black;
	-o-box-shadow: inset 0 -1px 1px #444, inset 0 1px 10px black;
	-webkit-box-shadow: inset 0 -1px 1px #444, inset 0 1px 10px black;
	box-shadow: inset 0 -1px 1px #444, inset 0 1px 10px black;
}

.white .square_score {
	background:#ccc;
	-moz-box-shadow: inset 0 -1px 1px #eee, inset 0 1px 10px #666;
	-o-box-shadow: inset 0 -1px 1px #eee, inset 0 1px 10px #666;
	-webkit-box-shadow: inset 0 -1px 1px #eee, inset 0 1px 10px #666;
	box-shadow: inset 0 -1px 1px #eee, inset 0 1px 10px #666;
}

.square_score span {
	display:block;
	height:1.9rem;
	margin:1px 0 0 1px;
	float:left;
	background:rgb(177,255,255);
	
	-moz-box-shadow: 0px 0px 15px #292DE2, inset 0px 0px 1px 1px #292DE2;
	-o-box-shadow: 0px 0px 15px #292DE2, inset 0px 0px 1px 1px #292DE2;
	-webkit-box-shadow: 0px 0px 15px #292DE2, inset 0px 0px 1px 1px #292DE2;
	box-shadow: 0px 0px 15px #292DE2, inset 0px 0px 1px 1px #292DE2;
	
	-webkit-border-top-left-radius: 2px;
	-webkit-border-bottom-left-radius: 2px;
	-moz-border-radius-topleft: 2px;
	-moz-border-radius-bottomleft: 2px;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

.white .square_score span {
	background:#666;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.square_score span.marker {
	display:block;
	width:1px;
	height:2.5rem;
	background:#b1ffff;
	-moz-box-shadow:none;
	-o-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	position:relative;
	left:-2px;
	top:1px;	
}

.white .square_score span.marker { background:#666; }

.square_score p {
	font-size:0.8rem;
	color:#b1ffff;
	position:absolute;
}

.white .square_score p { color:#666; }

.square_score > p.score_title {
  top: -1.5rem;
}

.square_score > p.score_value {
  top: 2.7rem;
  width: 2rem;
  text-align: center;
  margin-left: -0.9rem;
}

p.error {
	background:#cc0000;
	color:white;
	position:absolute;
	top:210px;
	padding:7px 20px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:inset 0px 2px 1px #ea3d00, inset 0px -2px 1px #a30000;
	-moz-box-shadow:inset 0px 2px 1px #ea3d00, inset 0px -2px 1px #a30000;
	box-shadow:inset 0px 2px 1px #ea3d00, inset 0px -2px 1px #a30000;
}

.susu-logo a img {
	vertical-align: bottom;
	padding-right: 2px;
	opacity: 0.65;
}

.susu-logo a:hover img {
	opacity: 0.9;
}

/* Image loading that avoids reflowing the whole page. Makes the loading experience nicer. */

.image-noreflow-container {
  position: relative;
  height: 0;
}

.image-noreflow-container > img {
  box-sizing: border-box;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  width: 100%;
}

/* Shaded boxes
 * ===============================================================================
 * Standalone boxes that provide a background, and format for header and content.
 * Used heavily on the frontpage.
 * =============================================================================== 
 */

/*
 * A better looking default horizontal rule
 */

hr, .shaded-header::after {
    content: "";
    display: block;
    border: 0;
    border-top: 1px solid #ddd;
    margin: 1em 0;
    padding: 0;
}

.shaded {
  background:rgb(44,36,123);
  /* Legacy colour, kept for RGB purposes. 
  background:rgba(44,36,123,0.8);*/
  background:rgba(57,48,141,0.8);
  border-radius: 20px;
}

.shaded hr {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}

.shaded-header {
  box-sizing: border-box;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 0.2rem;

  text-align: center;
}

.shaded-header * {
  display: inline-block;
}

.shaded-header > h1 {
  font-family: "museo-slab", Helvetica, sans-serif;
  text-align: center;
  vertical-align: middle;
  margin-right: 1rem;
  margin-bottom: 0px;
}

.shaded-header > img {
  height: 4em;
}

/*Modifies the <hr/> inserted after the element. See below. */
.shaded-header::after {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

.shaded-content {
  margin: 1em;
}

/* ==========================================================================
   Background
   ========================================================================== */

#background, #background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100vh;

  background: rgb(44, 36, 123);
  z-index: -1;
}

/* Done is CSS (rather than PHP) to avoid splitting colour codes. */
#background > .tint {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background: linear-gradient(rgba(44, 36, 123, 0.5), rgba(44, 36, 123, 1));
}

#background > .fullscreen-background, #background-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background: rgb(44, 36, 123) url(/images/backgrounds/purple.jpg);
  background-size: cover;
  background-position: center center;
}

#background > .background-container {
  position: absolute;
  width: 100%;
  z-index: -10;
}

#background > .background-container > img {
	position: relative;
  width: 100%;

	z-index:-10;
}

#background .blend {
  position:absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;

  z-index: 0;
  background: linear-gradient(to top, rgba(44,36,123,1), rgba(44,36,123,0.5));
}

/*@media all and (min-width: 1440px) { #body { min-height:900px; } }
@media all and (min-width: 1920px) { #body { min-height:1280px; } }*/