*{margin:0; padding:0; border:0; }
body{ background: #121212 url(../images/main_bg_pattern.gif) top left; margin: 0 0 20px 0; color: #B2B2B2; font-family: Arial, Helvetica, sans-serif; font-size: 100%; }

/**** RESETS *******/
p{ margin: 0 0 8px 0; font-size: 90%; color: #b2b2b2; line-height: 13pt;}

/*********** MAIN CONTAINERS **************/
#main-wrapper{ background: transparent url(../images/main_transparent_bg.png) top left repeat-x; min-height: 180px; z-index: -2000;  width: 100%;}
*html #main-wrapper{ height: 180px; position: absolute; }
#main-wrapper img.graphic-bg{  left: 0px;  top: 0px;   position: absolute; z-index: 2; }
*html #main-wrapper img.graphic-bg{ z-index: -1; }
#wrapper{ width: 1200px; }
#content-wrapper{ width: 800px; float: left; z-index: 1; margin: 70px 0 25px 0; }

/*********** LEFT SIDEBAR **************/
div#sidebar{ float: left; width: 280px; margin: 34px 15px 0 92px; z-index: 1000; position: relative;  }
*html div#sidebar{ margin-left: 46px; }
div#sidebar img{ margin: 0 0 10px 0; }

ul#nav{ margin: 0; padding: 0; list-style: none; }
ul#nav li{ background: url(../images/divider.png) bottom left repeat-x; padding: 3px 0; }
ul#nav li a{ color: #B2B2B2; text-decoration: none; } ul#nav li a.active, ul#nav li a:hover{ color: #b90f10; }
ul#nav li .white a{ color: #ffffff; text-decoration: none; } ul#nav li a.active, ul#nav li a:hover{ color: #b90f10; }
ul#nav li .current a{ color:#b90f10;; text-decoration: none; }

	/******* Sidebar-box *********/
	div#sidebar-box{ font-size: 80%; padding: 0; margin-top: 8px;  background: url(../images/transparent.png) top left repeat; width: 280px; display: block;   }
	*html div#sidebar-box{ height: 264px; }
	div#sidebar-content{ padding: 10px; }

/******* HOMEPAGE ************/

	/********** REELS & NEWS *********************/
	div#reels{ float: left; width: 550px; }
	#rotate{ margin-left: 4px; width: 540px; height: 295px; overflow: hidden; }
	
	div#news{ float: left; width: 200px; font-size: 75%; margin-left: 10px;}
	#news ul{ list-style: none; margin: 0 0 0 3px; }
	#news li{ padding: 12px 0 0px 0; margin-bottom: 14px; background: url(../images/divider.png) top left repeat-x; line-height: 12pt;}
	
	
	/************ FEATURED WORKS *******************/
	#features-wrapper{ margin: 5px 0 0 0; clear: both; }
	div#features{ width: 100%; height: 152px; display: block; }
	
	#scroller{ width: 760px; background: url(../images/big_transparent_bg.png) no-repeat; position: relative; padding-bottom: 30px; }
	*html scroller{ width: 750px; }
	/*#carousel{ overflow: hidden; height: 110px; padding: 15px 0 0px 0; margin: 3px 0 0 25px; width: 710px; position: relative; background: transparent;}*/
	#carousel{ overflow: hidden; height: 110px; padding: 15px 0 0px 0; margin: 3px 0 0 3px; width: 760px; position: relative; background: transparent;}
	*html #carousel{ width: 700px; }
	#carousel img{ z-index: -1; margin: 0 5px; }
	#carousel.imgs{ clear: both; margin: 0 3px; padding: 0 3px; cursor: pointer; position: absolute; z-index: -1; }
	
	#carousel a.captions{ color: #b90f10; text-decoration: none; } #carousel a.captions:hover{ color: #b2b2b2; }
	#carousel a.captions span {display:none; padding:5px; margin: 0; width:180px; height: 105px; !important position: relative; overflow: hidden; z-index: 1000;}
	#carousel a.captions:hover span{display:inline; position:absolute; background: transparent; color:#fff; margin-left: -190px; z-index:0; padding: 5px;}

	div#nextBtn, div#prevBtn{ width:10px; height: 50px; cursor: pointer;}
	div#prevBtn{ position: absolute; top: 70px; left: 2px; } 
	div#prevBtn a{ background: url(../images/btn_prev.png) 0px 0px no-repeat; }
	div#prevBtn a:hover{ background: url(../images/btn_prev.png) -10px 0px no-repeat; }
	div#nextBtn{ position: absolute; top: 70px; right: 2px;} 
	div#nextBtn a{ background: url(../images/btn_next.png) 0px 0px no-repeat; }
	div#nextBtn a:hover{ background: url(../images/btn_next.png) -10px 0px no-repeat; }
	div#nextBtn span, div#prevBtn span{ visibility: hidden; }
	
/************* WORK *************/
#work{ width: 65%; float: left; margin: 55px 0 25px 0;  position: relative; } 
#work-thumbs ul{ list-style: none; margin: 0; padding: 0; z-index: 1000; }
#work-thumbs li{ float: left; display: block; position: relative; margin: 0 8px 8px 0; padding: 0; width: 190px; height: 110px; overflow: hidden; }
#work-thumbs li img{ display: block; position: absolute; z-index: 0;  width: 190px; height: 110px; }
.work-overlay{ color: #fff; position: absolute; z-index: -1; padding: 5px; display: block; font-size: 9pt; float: left; width: 190px; height: 110px;}
.work-overlay a{ cursor: pointer; }
div#categories{ z-index: 2000;width: 288px; height: 36px; margin: 0 0 10px 0; padding: 4px 0px 2px 45px; background: url('../images/features_desc_bg.png') top left no-repeat; }
li#cat-hdr{ list-style: none; position: absolute; z-index: 3000; cursor: crosshair;}
ul#cats{ z-index: 3000; position: relative; left: 0;  top: 4px; border: 1px solid #676767;  display: none; list-style: none; padding: 4px; background: #111; width: 150px;}
ul#cats li{ padding 4px;}
	/*************** SIDEBAR PLAYLIST ************/
	
	#work-playlist{ padding: 0px; margin: 0;}
	#empty, .plist{ min-height: 250px; }
	#message{ height: 0; font-size: 95%; font-weight: bold; display: none; line-height: 13pt; }
	
	*html #empty, *html .plist{ height: 250px; }
	
	ul.playlist{ list-style: none; width: 97%; height: 0px; display: block; background: #141414; border: 1px solid #1e1e1e; padding: 3px; margin: 0; overflow: hidden; margin: 4px 0 0 0; display: none;}
	.list-thumb{ width: 50px; float: left; }
	.list-title{ width: 160px; font-size: 90%; float: left; padding: 3px 0 0 0; }
	.x{ width: 25px;  float: right; padding: 8px 0px 0 8px; cursor: pointer;}
	ul.child{list-style: none; width: 95%; height: 25px; display: block; background: #080808; border: 1px solid #1e1e1e; padding: 3px; margin: 0; overflow: hidden; margin: 2px 0 0 8px; }
	
	#list-controls{ background: url(../images/divider.png) top left repeat-x; padding: 8px 0 0 0; margin: 8px 0;  width: 100%; height: 25px;}
	#list-controls span{  margin: 0 5px; font-size: 95%; }
	#list-controls span a{ color: #B2B2B2; text-decoration: none; cursor: pointer; } #list-controls span a:hover{ color: #b90f10; }
	span.ploading{ background: url(../images/ajax-loader2.gif) no-repeat; width: 16px; height: 16px; display: block; float: right; }
	
/**************** ORIGINALS ***************/
.originals{  }
.originals ul{ list-style: none; }
.originals li{ margin: 0 0 10px 0; overflow: hidden; height: 105px; width: 590px; padding-bottom: 5px; }
.originals img{ position: absolute; z-index: 0;} 
.org-caption{  margin: 0; color: #fff; padding: 6px; display: none; z-index: 1;}
span.org-title{color: #fff; padding: 0px;  font-size: 110%; font-weight: bold; }
.org-caption p{ color: #fff; padding: 0; font-size: 70%;}

/***************** WORK & ORIGINALS SUBNAV *******/
#subnav{ font-size: 70%; margin: 0; width: 80%; padding: 0px 0 15px 5px; height: 0px; display: none; overflow: hidden;} *html #subnav{ height: 0px; }
#subnav-noscript{font-size: 70%; margin: 0; width: 80%; padding: 0px 0 6px 5px;}

/************* PLAYLIST PAGE ****************/


.custom-hdr{ font-size: 45px; letter-spacing: -3px; color: #b90f10; float: left;}
.playlist-smalltext{  font-size: 75%; float: left; padding: 25px 0 0 8px;}
#playlist-container{ clear: both; width: 620px; margin-left: 4px; } *html playlist-container{ width: 605px; }
#playlist{ padding: 15px 0 15px 15px;  min-height: 250px; } *html #playlist{ height: 250px; }
div.playlist-item{ width: 190px; height: 130px; background: #141414; padding: 0; margin: 0 10px 10px 0; display: block; float:left; } 
div.playlist-item img{ width: 190px; height: 110px; }
span.playlist-num{ font-size: 9pt; padding: 2px 4px; width: 30px; }
span.playlist-x{ margin-left: 150px; } span.playlist-x img{  width: 10px; height: 8px; }

#playlist-controls{ min-height: 60px; margin: 15px 0 0 0; } *html #playlist-controls{ height: 60px; }

/******************* SINGLE PAGES *******************/
#vids{ width: 640px; margin-left: 0px; }
#web{ width: 640px; margin-left:4px;} 

	/********** Video box *************/
	.media{ margin-left: 4px; }
	.caption{ background: url(../images/vid-caption-bg.png) top left no-repeat; display: block; height: 42px; width: 750px;margin:0;padding:0;padding-top:2px;margin-top:0px; }
	/*.caption .controls{ height: 20px; display: block; width: 580px; }*/
	.caption p{ font-size: 10pt; margin:0; padding: 0 0 0 45px; color: #fff; }
	
	/********** Clip thumbnails *************/
	#clips{ width: 650px; padding: 10px 0; margin: 10px 0 0 0;}
	#clips ul{ list-style: none; }
	#clips li{float: left; margin: 0 4px 10px 4px; padding: 0; width: 154px; }	
	#clips li span{ font-size: 70%;margin: 3px 0 0 0; cursor: pointer;  display:block;}
	#clips a{ color: #b2b2b2; text-decoration: none; cursor: pointer; } #clips a:hover{ color: #b90f10; }
	/********** Stills *************/
	#stills{width:654px;}
	#stills{ margin: 10px 0 15px 4px; }
	#stills ul{ list-style: none; margin: 10px 0; }
	#stills li{ float: left; margin: 0; padding: 0 14px 10px 0;}
	#stills:after{
		content:"."; 
		display:block;
		height:0; 
		clear:both; 
		visibility:hidden;
	}
/************ TYPOGRAPHY ***************/
a{ color: #b90f10; text-decoration: none; } a.active, a:hover{ color: #b2b2b2; }
h2 { font-size: 45px; font-weight: normal; letter-spacing: -5px; margin: 0; padding: 0; }
.gray{ color: #B2B2B2; }
.white, a.white, h2.white a{ color: #fff; }
h2.red, p.red{ color: #b90f10; }
h3{ color: #b2b2b2; font-size: 30px; letter-spacing: -3px; }
.current a.active{color:#b90f10;}

/*********** MISCELLANEOUS ************/
.loading{ background: url(../images/ajax-loader2.gif) center center no-repeat; width: 100%; height: 125px; }
.overlay{ background: url(../images/transparent-70percents.png) top left repeat; float: left; color: #fff; position: absolute; z-index: 1; top: 0; left: 0;}
.hrz{ background: url(../images/divider.png) bottom left repeat-x; padding: 8px 0; }
.divider{ background: url(../images/divider.png) bottom left repeat-x; }
.transparent{ background: transparent url(../images/transparent.png) top left; }
.right-img{ float: left; margin: 0 0 10px 10px; }
.left-img{ float: left; margin: 0 10px 10px 0; }
.clear{ clear: both; height: 0px; margin: 0; padding: 0; }
.clearfix:after { content: ".";  height: 0; clear: both; visibility: hidden; display: block; }
*html .clearfix { zoom: 1; }
.hidden{ display: none; }