/* - - - - - - - - - - - -
Stylesheet by Winston Hoy
Design by Liza Gipsova
Made for BREHMLAB LTD

Thanks:
http://www.fontsquirrel.com/fontface/generator  : font embedding help

The fonts used throughout this website are League Gothic and Junction. League
Gothic was created by The League of Moveable Type. Junction was created by
Caroline Hadilaksono. Both fonts are made available by The League of Moveable
Type and are subject to the Open Font License. For more information on either
font, please visit www.theleagueofmoveablefont.com

contact me for usage
winston@curiousercreative.com
 - - - - - - - - - - - - -*/

/* Get rid of safari default scroll bar
  Safari has a weird blinking issue with the jquery plugin scrollTo, so we are using
  webkits built-in scroll, but not displaying the bar
*/

::-webkit-scrollbar {
    color: #fff;
}

/* -------------
  Font embedding
--------------- */
@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('fonts/league_gothic-webfont.eot#') format('eot'),
         url('fonts/league_gothic-webfont.woff') format('woff'),
         url('fonts/league_gothic-webfont.ttf') format('truetype'),
         url('fonts/league_gothic-webfont.svg#webfontIkXJy5b0') format('svg');
    font-weight: normal;
    font-style: normal;
}
	
@font-face {
    font-family: 'JunctionRegular';
    src: url('fonts/junction-webfont.eot?') format('eot'),
         url('fonts/junction-webfont.woff') format('woff'),
         url('fonts/junction-webfont.ttf') format('truetype'),
         url('fonts/junction-webfont.svg#webfont0YabUMTB') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* -------------
  Reset styles
--------------- */

*>a {
    border: none !important;
    outline: none !important;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
	list-style: none;
    margin: 0;
    padding: 0;
}

p {
	margin: 0;
	padding: 0;
	font-size: 16px;
}

a {
    border: none;
    color: inherit;
    text-decoration: none;
}

a img {
    border: none;
}

.clear-fix {
    clear:both;
    display:inline-block;
    float:none;
}

/* -------------
  Global styles
--------------- */

@media all and (min-width: 1024px) {
  p {
	font-size: 14px;
  }
}
@media all and (min-width: 1600px) {
  p {
	font-size: 16px;
  }
}

body {
    background: #000000;
    font-family: 'JunctionRegular', 'Trebuchet MS', 'Trebuchet-Ms', 'Trebuchet Ms', Trebuchet, Verdana, Arial, sans-serif;
	font-weight: 100;
    color: white;
    position: absolute;
    width: 100%;
    min-width: 1024px;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
    height: 100%;
}

.page {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'LeagueGothicRegular', Verdana, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 100;
}

h1 {
    font-size: 3.75em;
    line-height: .85em;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 2.75em;
    margin:0;
    padding: 0;
}

h3 {
    font-size: 2em;
    margin: 0;
}

h4 {
	font-size: 1.5em;
}

.pullout a, .description a {
	text-decoration: underline;
}

.container {
	width: 80%;
	margin: 225px auto 0;
}

#hidden_container {
    visibility: hidden;
	position: absolute;
	top: 100%;
}

.bg {
	background: black;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* -------------
  Logo
--------------- */

#logo {
	display: block;
    left: 1.5%;
    min-height: 136px;
    min-width: 503px;
    opacity: 0.85;
    position: absolute;
    top: 40px;
    width: 30%;
    z-index: 100;
}

#logo img {
	max-width: 100%;
}


/* -------------
  Navigation menu
--------------- */

#primary_nav {
	position: absolute;
    right: 0;
    top: 40px;
    z-index: 100;
	background: url(graphics/nav.png) bottom left no-repeat;
    height: 123px;
    width: 573px;
}

.player #primary_nav {
	background-position: top left;
}

#primary_nav ul {
	bottom: 0;
    position: absolute;
    right: 0;
	height: 100%;
	white-space: nowrap;
	min-width: 450px;
	overflow: hidden;
}

#primary_nav li {
	display: block;
	float: left;
    height: 100%;
	vertical-align: top;
	width: 25%;
	position: relative;
}

#primary_nav h3 {
	font-size: 32px;
	line-height: 192px;
    margin: 0 21px;
	opacity: .7;
	text-align: center;
}

#primary_nav a {
    height: 100%;
    overflow: hidden;
}

#primary_nav .nav.bg {
	background: black;
	opacity: 0;
}

/* -------------
  Pullout content
--------------- */

#pullout_container {
	z-index: 100;
	position: absolute;
    right: 0;
    top: 100%;
	width: 573px;
	height: 0;
	overflow: hidden;
}

#pullout_container>.pullout {
	right: 0;
    position: absolute;
    top: -100%;
    width: 523px;
	padding: 20px 25px;
}

.pullout .bg{
	background: transparent url(graphics/trans_black.png) repeat;
	opacity: .7;
}

.pullout h1 {
    text-align: right;
	font-size: 60px;
}

#client input {
	background: url(graphics/trans_white.png) repeat;
    border: #333 1px solid;
    display: inline-block;
    font-size: 14px;
    height: 3em;
    margin: 1.5em 10px 0.5em;
	color: white;
	text-indent: 0.5em;
	width: 203px;
}

#client button {
	background: black;
	border: none;
	height: 3em;
	color: white;
	font-size: 14px;
	cursor: pointer;
}

#client button:hover {
	color: #999;
}

#client .response {
	text-align: center;
    margin: 1.5em 1em 1.5em 2em;
}

#about h1 {
	text-align: left;
}

#about img {
	float: left;
	margin: 0 20px 20px 0;
}

#contact p {
	text-align: right;
}

#contact object {
	float: left;
}

/* -------------
  Landing Page Color Bars
--------------- */
#background, #landing {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.bar {
	width: 14.6%;
	top: 0;
	height: 100%;
	position: absolute;
	z-index: 0;
	background-position: center center;
}

.bar_white, .bar_blue {
	width: 13.5%;
}

.bar_white {
	background: url(graphics/bar_white.png) repeat;
	left: 0;
}

.bar_yellow {
	background: url(graphics/bar_yellow.png) repeat;
	left: 13.5%;
}

.bar_cyan {
	background: url(graphics/bar_cyan.png) repeat;
	left: 28.1%;
}

.bar_green {
	background: url(graphics/bar_green.png) repeat;
	left: 42.7%;
}

.bar_pink {
	background: url(graphics/bar_pink.png) repeat;
	left: 57.3%;
}

.bar_red {
	background: url(graphics/bar_red.png) repeat;
	left: 71.9%;
}

.bar_blue {
	background: url(graphics/bar_blue.png) repeat;
	left: 86.5%;
}

@media all and (min-height: 1000px) {
	.bar_white {
		background: url(graphics/bar_white_1600.png) repeat;
	}
	
	.bar_yellow {
		background: url(graphics/bar_yellow_1600.png) repeat;
	}
	
	.bar_cyan {
		background: url(graphics/bar_cyan_1600.png) repeat;
	}
	
	.bar_green {
		background: url(graphics/bar_green_1600.png) repeat;
	}
	
	.bar_pink {
		background: url(graphics/bar_pink_1600.png) repeat;
	}
	
	.bar_red {
		background: url(graphics/bar_red_1600.png) repeat;
	}
	
	.bar_blue {
		background: url(graphics/bar_blue_1600.png) repeat;
	}
}
.bar .landing_thumb, .bar a{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.bar .pattern_bars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(graphics/pattern_bars.png) repeat;
	z-index: 5;
}

.bar img {
	height: 100%;
	opacity: .4;
	position: relative;
	z-index: 1;
	left: 50%;
}

.bar .landing_title {
	position: absolute;
	left: 0;
	width: 100%;
	background : url(graphics/pattern_bars_double.png) repeat;
	z-index: 25;
}

.bar .landing_title h1{
	padding: .25em;
}

/* -------------
  Video Gallery
--------------- */

#videos {
}

#videos .container {
	background: url("graphics/trans_black.png") repeat scroll 0 0 transparent;
    margin-bottom: 20px;
    padding: 40px 1.25%;
    position: relative;
    width: 73%;
}

#background {
	z-index: -1;
	position: fixed;
}

#videos h2 {
	margin: 0 0.79%;
}

#videos .filter {
	position: absolute;
	top: 50px;
	right: 2.5%;
	background: url(graphics/filter_bg.png) no-repeat;
	min-width: 260px;
	z-index: 25;
	overflow: hidden;
	cursor: pointer;
}

.filter h4 {
	font-size: 24px;
	line-height: 36px;
    margin: 0;
    text-indent: 38px;
	letter-spacing: .06em;
}

.filter ul {
    margin: 5px 0 0;
	text-indent: 38px;
	background: url(graphics/trans_black.png) repeat;
	width: 230px;
}

.filter ul li:hover {
	background: black;
}

#videos .thumbnail_container {
	margin: 40px 0 0;
	width: 100.5%;
}

#videos .thumbnail_container>a {
	margin: 10px 0.79%;
    width: 18%;
	display: inline-block;
}

.thumbnail_container>a {
	position: relative;
	overflow: hidden;
	opacity: .8;
	display: block;
}

.thumbnail_container>a>img {
	width: 100%;
	position: absolute;
	bottom: 0;
}

.thumbnail_container>a h4 {
	background: url("graphics/pattern_bars_double.png") repeat;
    margin: 0;
	line-height: 1.25em;
	max-height: 30%;
    position: absolute;
    text-indent: 0.5em;
    white-space: nowrap;
    width: 100%;
    z-index: 20;
	bottom: -1.25em;
}

/* -------------
  Video Player
--------------- */

#player .bg {
	opacity: .7;
}

#playlist {
	left: 0;
	overflow: hidden;
	padding-bottom: 10px;
	border-right: 3px solid #000000;
}

#playlist, #description {
	background: url(graphics/pattern_bars.png) repeat;
	z-index: 15;
	width: 18%;
	min-width: 260px;
	height: 100%;
	position: absolute;
	bottom: 42px;
}

#player .thumbnail_container {
	height: 0;
	overflow: hidden;
}

#player .thumbnail_container>a {
	margin: 20px;
}

#video_player {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 5;
	background: black;
}

#video_player h1 {
	line-height: 1em;
    margin-top: -1em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 0;
}

#video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 5;
	background: black;
}

#play_pause {
	position: absolute;
	bottom: 52px;
	left: 0;
	width: 100%;
	height: 100%;
	background: none;
	z-index: 50;
	cursor: pointer;
	opacity: 0;
}

#play_pause div{
	background: url("graphics/button.png") no-repeat scroll 0 0 transparent;
    height: 174px;
    left: 50%;
    margin: -87px 0 0 -97.5px;
    position: absolute;
    top: 50%;
    width: 195px;
}

#play_pause .play {
	background: url("graphics/button.png") no-repeat scroll 0 0 transparent;
}

#play_pause .pause {
	background: url("graphics/button.png") no-repeat scroll 0 100% transparent;
}

#description {
	right: 0;
	border-left: 3px solid #000000;
}

#description .description {
	width: 90%;
	left: 5%;
	position: absolute;
	bottom: 7%;
	opacity: 0;
}

#credit {
    bottom:2px;
    font:100 14px/14px  Verdana;
    left:5px;
    position:absolute;
    text-shadow:-1px -1px 0 #000000;
    z-index:50;
}

#credit a {
	color: #ff9900;
}