/* !---------- colors ----------
	gray: #4f504c
*/


/* !---------- fonts ---------- */
@font-face {
	font-family: 'MonospaceTypewriterRegular';
	src: url('../fonts/MonospaceTypewriter-webfont.eot');
	src: local('☺'), url('../fonts/MonospaceTypewriter-webfont.woff') format('woff'), url('../fonts/MonospaceTypewriter-webfont.ttf') format('truetype'), url('../fonts/MonospaceTypewriter-webfont.svg#webfonttFxfH5S2') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* !---------- general ---------- */
body {
	background: #4f504c;
	border: 0;
	bottom: 0;
	color: #fff;
	font-family: 'MonospaceTypewriterRegular', monospace, serif;
	font-size: 1em;
	left: 0;
	line-height: 1.4em;
	min-height: 600px;
	min-width: 960px;
	position: absolute;
	overflow-x: hidden;
	right: 0;
	top: 0;
}

#loading {
	background: url('../images/loading-transparent.png') top left no-repeat;
	display: none;
	height: 25px;
	left: 50%;
	margin-left: -12px;
	margin-top: -12px;
	position: absolute;
	top: 50%;
	width: 24px;
}

a { color: #fff; text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }

p { padding: 10px 0 15px 0; }

.active { text-decoration: underline; }
.small { font-size: 0.8em; line-height: 1.5em; }
.large { font-size: 1.2em; line-height: 1.5em; }
.huge { font-size: 1.8em; line-height: 1.5em; }
.extreme { font-size: 2.5em; line-height: 1.3em; }


/* !---------- header / footer ---------- */
header, footer { position: absolute; right: 25px; }
header { left: 50px; top: 35px; }
footer { left: 40px; bottom: 35px; }


/* !---------- main nav ---------- */
ul#nav { bottom: 0; left: 0; margin: 0; position: absolute; right: 0; }
ul#nav li { float: left; list-style: none; }
	ul#nav li a {
		font-size: 13px;
		padding: 0 10px;
	}

ul#sidenav { bottom: 0; margin: 0; position: absolute; right: 0; }
ul#sidenav li { float: left; list-style: none; }
  ul#sidenav li a {
    font-size: 13px;
    padding: 0 10px;
    text-transform: lowercase;
  }


/* !---------- main ---------- */
#content {
	bottom: 75px;
	left: 50px;
	overflow: visible;
	position: absolute;
	top: 150px;
	width: 870px;
}
#main .content { bottom: 0; left: 0; position: absolute; right: 0; top: 0; }

#main.film,
#main.images,
#main.trailer,
#main.aboutus,
#main.news {
	bottom: 0;
	height: auto;
	position: absolute;
}

#main.film,
#main.images {
	top: 40px;
}

#main.trailer {
	top: 60px;
}

#main.aboutus,
#main.news {
	top: 30px;
}

#main.downloads p.extreme {
  padding: 0;
}


/* !---------- content ---------- */
.news .item {
	background: url(../images/line.png) bottom left repeat-x;
	padding: 10px 0 15px 0;
}
.news .item.no-border {
	background: none;
}

.filmfacts .left,
.filmfacts .right {
	white-space: nowrap;
}

.filmfacts .left {
	float: left;
	padding-right: 10px;
	text-align: right;
	width: 40%;
}
.filmfacts .right {
	float: left;
	padding-left: 10px;
	text-align: left;
	width: 40%;
}

#trailer {
	background: #000 url(../images/loading-black.gif) center center no-repeat;
	height: 360px;
	width: 640px;
}

#main.companyprofile .content { top: 2em; }

/* !---------- mosaic styles ---------- */
#mosaic { display: table; height: inherit; width: inherit; top: inherit; left: inherit; z-index: -2; }
#mosaic .row { display: table-row; }
#mosaic .row .col { display: table-cell; }


/* !---------- background overlay ---------- */
.bg_overlay {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}


/* !---------- images ---------- */
#main.images .content img {
	cursor: pointer;
}

#gallery-controls .control {
	cursor: pointer;
	position: absolute;
	text-indent: -9999px;
}
#gallery-controls .close {
	background: url(../images/close.png) 0 0 no-repeat;
	height: 36px;
	right: 30px;
	top: 30px;
	width: 37px;
}
#gallery-controls .prev {
	background: url(../images/arrow-left.png) 0 0 no-repeat;
	height: 62px;
	left: 30px;
	top: 45%;
	width: 36px;
}
#gallery-controls .next {
	background: url(../images/arrow-right.png) 0 0 no-repeat;
	height: 62px;
	right: 30px;
	top: 45%;
	width: 36px;
}


#gallery-controls {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 9999;
}


/* !---------- toggle website iframe ---------- */
#website {
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 188px;
}
#website > a {
	background: url(../images/open_in_new_window.png) 0 0 no-repeat;
	display: block;
	height: 42px;
	position: absolute;
	right: 67px;
	text-indent: -9999px;
	top: -55px;
	width: 47px;
	z-index: 999;
}
a#close_website {
	background: url(../images/close.png) 0 0 no-repeat;
	right: 4px;
  top: -48px;
}
#website .inner {
	background: url(../images/loading-white.gif) center center no-repeat #FFF;
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
}
#website iframe {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

/* nanoscroller */
/** initial setup **/
.nano {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.nano .content {
  position      : absolute;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.nano .content:focus {
  outline: thin dotted;
}
.nano .content::-webkit-scrollbar {
  visibility: hidden;
}
.has-scrollbar .content::-webkit-scrollbar {
  visibility: visible;
}
.nano > .pane {
  background : rgba(0,0,0,.25);
  position   : absolute;
  width      : 10px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity    : .01; 
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;  
  border-radius         : 5px;
}
.nano > .pane > .slider {
  background: rgba(0,0,0,.5);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;  
  border-radius         : 3px;
}
.nano:hover > .pane, .pane.active, .pane.flashed {
  visibility : visible\9; /* Target only IE7 and IE8 with this hack */
  opacity    : 0.99;
}
.pane.external {
  background : rgba(0,0,0,.25);
  position   : absolute;
  width      : 10px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity    : .01; 
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;  
  border-radius         : 5px;
}
.pane.external > .slider {
  background: rgba(0,0,0,.5);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;  
  border-radius         : 3px;
}
.pane.external {
  visibility : visible\9; /* Target only IE7 and IE8 with this hack */
  opacity    : 0.99;
}

.pane.external {
	left: -1px;
	right: auto;
  background : 0;
}
.pane.external > .slider {
  background: white;
  -moz-border-radius    : 0;
  -webkit-border-radius : 0;
  border-radius         : 0;
}


/* !---------- about us / small nav ---------- */
.aboutus ul, ul.nav.small { list-style: none; margin: 0; overflow: visible; }
ul.nav.small li { display: inline; margin-right: 12px; white-space: nowrap; }
ul.nav.small li .desc { display: none; }
.staff .desc { font-size: 0.5em; display: none; line-height: 1.4em; }