@color: #f19800;
.padding(@pad){padding:@pad;}
.left{float:left;}
.right{float:right;}
.font{font-family:arial, sans-serif;}
.font2(@size){font:normal @size 'Bebas'; text-transform:uppercase; word-spacing:5px;}
.font3(@size){font:normal @size 'Bebas';}
.absolute{position:absolute;}
.black{background:url(../img/black.png);}
.white{background:url(../img/white.png);}
.bright{background:url(../img/bright.png);}

*{border:0;margin:0;padding:0;text-decoration:none; list-style:none; outline:none;}

@font-face {
    font-family: 'bebas';
    src: url('../fnt/bebas-webfont.eot');
    src: url('../fnt/bebas-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fnt/bebas-webfont.woff') format('woff'),
         url('../fnt/bebas-webfont.ttf') format('truetype'),
         url('../fnt/bebas-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

hr{border-bottom:1px #999 solid; height:1px;}
h1{.font2(46px);}
h2{.font2(24px); margin:0 0 10px 0;}
h3{.font2(14px); margin:0 0 10px 0;}
h4{.font2(18px); margin:0 0 10px 0;}
h5{.font3(14px);}
p{.font; margin:0 0 10px 0;}
a{color:#fff;
	&:hover, &.active{color:@color;}
	img{border:1px #000 solid;
		&:hover{border:1px #fff solid;}
	}
}
	
body{.font; font-size:13px; line-height:17px; background:#222; color:#fff; -webkit-font-smoothing:antialiased;}
.popvideo{display:block; position:relative;
	.play{background:url(../img/play.png); z-index:999; left:35px; top:22px; position:absolute; height:30px; width:30px;}
	}
#page{margin:20px 0 70px 50px; position:relative; overflow:auto;}
#bg{position:fixed; top:0; left:0; z-index:-9999; display:none;}
.bgwidth {width: 100%;}
.bgheight {height: 100%;}
#contact{
	position:fixed; top:-310px; background:#000;  height:310px; z-index:999; min-width:900px; width:100%;
	.rep{.left; .padding(30px);}
	.button{.font2(16px); .absolute; bottom:-35px; right:10%; .padding(6px); background:#000; cursor:pointer;}
	form{
		.left;margin:30px 0 0 0;position:relative;left:10%;
		fieldset{
			width:350px;
			label{.left; .font2(14px); margin:0 0 10px 0;}
			input, textarea{.right; width:250px; .padding(5px); margin:0 0 5px 0; .bright;}
			#submit{.font2(16px); .padding(6px); cursor:pointer; width:70px; color:#fff; .padding(2px);}
		}
	}
}
#header{margin:20px 0 40px 0;}
ul#menu{
	li{.left; font:12px 'myriad pro'; line-height:25px; vertical-align:top;
		a{margin:0 3px; .font2(14px);}
	}
}
#quote{.font2(20px);margin:0px 0 30px 0;}

#home_page{#news, #twitter{.white; float:left; width:150px; padding:10px; height:150px; position:relative;}
	#news{margin:0 5px 0 0;
		a.more{.absolute; bottom:8px;}
	}
}

#news_page{
	#content{
		width:600px;
		.article{.white; .padding(10px); margin: 0 0 10px 0; overflow:auto; clear:both; position:relative;
			img{.left;}
			.text{.left; margin:5px 0 0 15px; width:400px;}
			.date{
				.right; .white; width:40px; position:absolute; top:0; right:0; bottom:0; text-align:center;.font2(18px); padding:40px 0 0 0;
				span{display:block;.font2(16px);}
				div{.font2(13px);display:block; margin:3px 0 0 0;}
			}
		}
		
		#paginate{.black; margin:auto; text-align:center;.padding(5px); width:200px;.font2(12px);
			a{.font2(12px);}
			strong{.font2(12px);}
		}
	}
}

#reels_page{
	.popvideo{.left; display:block; width:202px; margin:15px 20px; position:relative;
	.play{background:url(../img/play.png); z-index:999; left:85px; top:60px; position:absolute; height:30px; width:30px;}
	}
}

#story_page, #gallery_page, #work_page, #reels_page{
	.date{.left; .font2(36px); text-transform:uppercase; line-height:34px; margin: -2px 10px 3px 0;text-align:center;
		span{.font2(25px);display:block;}
		div{.font2(13px);display:block; margin:3px 0 0 0;}
	}
	.header{height:85px; padding:1px 0 0 60px; position:relative; border-bottom:solid #999 1px; margin:0 0 10px;
		.date{position:absolute; top:0; left:0;}
	}
	.main{width:515px;.left; 
		.article{.white; .padding(10px); margin:0 0 20px; overflow:auto;

		}
	}


	.details{border-bottom:1px #999 solid;border-top:1px #999 solid; padding:10px 0;
		p{display:inline;}
	}
	.side{.white;.left; margin:0 0 0 20px;
		h4{padding:10px 10px 0px 10px;}
		.article, .gallery, .reels{clear:both; .left; padding:10px; width:300px;
			&:hover{.white; color:#fff;}
		}

		.reels img{.left; margin:0 20px 0 0;}
		.gallery{width:200px;}
		hr{.left; clear:both; width:300px; margin:0 0 0 10px;}
	}
}

#work_page .side{width:320px;}
.cat h4{cursor:pointer;}
.project{display:none;}

#twitter{
	.twtr-hd, .twtr-ft{display:none!important;}
	.twtr-tweet-wrap{font-family:arial, sans-serif!important; font-size:12px!important;}
	.twtr-widget{position:relative; top:-7px; left:-6px;
		a{color:#f19800;}
	}
}

.share{background:#000; display:block; height:20px; margin:0 -10px -10px -10px; padding:10px;
	h3{.left; margin:0 20px 0 0;}
		a{.left; background:url(../img/social.png) no-repeat; height:15px; width:18px; float:right; margin:2px 5px 0 0; text-indent:-99999px;
		&.twitter{background-position:-22px 0;}
		}
}
	
#footer{
	position:fixed; bottom:0; height:20px; background:#000; width:100%; .font2(15px); padding:5px; z-index:99999;
	.social{
		background:url(../img/social.png) no-repeat; height:15px; width:18px; float:right; margin:2px 5px 0 0; text-indent:-99999px;
		&.twitter{background-position:-22px 0;}
		&.linkin{background-position:-49px 0;}
		&.vimeo{background-position:-77px 0;}
	}
	input{
		background:url(../img/bright.png); padding:2px; position:relative; top:-2px; left:5px;
		&#search_but{background:url(../img/search.png); float:right; text-indent:-99999px; width:17px; height:17px; top:3px; cursor:pointer;}
	}
	
	#follow, #cvs, #search{float:left;margin:0 100px 0 0;}
	#follow{width:220px;}
	#cvs a{font:12px arial; margin: 0 0 0 10px; position:relative; top:-3px; text-transform:none;}
	#search{width:280px; float:right; margin:0 20px 0 0;}
	#q{width:200px;}
}