/*
Theme Name: KEMISTRY
Designer : Arya Wicaksono
Author: Alamanda
*/
	
	
body {
	font-size: 13px;
	color:#fff;
	margin: 0px;
	font-family: Myriad Pro, Imapct, Helvetica, Verdana, Arial, Helvetica, sans-serif;
	background-image:url(images/bg.png);
	background-attachment:fixed;
	color:#e1e1e1;
	}
html, body { 
	margin: 0; 
	padding: 0; 
	width: 100%; 
	height: 100%; 
	}
#all {
	width:950px;
	background:url(images/bg_container.png) repeat #292929;
	margin:auto;
	-moz-box-shadow: 0 0 30px 2px #131313;
	-webkit-box-shadow: 0 0 30px 2px #131313;
	box-shadow: 0 0 30px 2px #131313;
}
img {border-style:none;}
img a {border-style:none;}

h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-weight: normal;
}

.clear {clear:both;}
.left {float:left;}
.right {float:right;}

/*menu*/
#menus {
	width:160px;
	margin:5px auto 0px auto;
	text-align:right;
	}
#menubar {
	position: fixed; 
	margin-top:7px;
	}
.logo {
	margin-left:-25px;
	}
.menus {
	text-transform:uppercase;
	color:#fff;
	margin:5px 0px;
	font-size:16px;
	font-weight:bold;
}
.footer {font-size:9px; text-align:center; color:#898989;}

.footer a{color:#898989; text-decoration:none;}
/* Everything CSS Sprite Menu */
	ul#menu{margin:10px 0px 0px 0px; padding:0; list-style:none; float:right;}
		#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px;}
			#menu li a{background:url('images/menu.png') no-repeat; width:238px; height:27px; display:block;}

			/* Home Button */
			#menu li.home{width:143px; height:25px; border:}
			#menu li.home a{background-position:0px -6px;}
			#menu li.home a:hover{background-position:-143px -6px;}
			
			#menu li.home_active{width:143px; height:25px;}
			#menu li.home_active a{background-position:-143px -6px;}
			
			/* Works Button */
			#menu li.works{width:143px; height:25px; margin:5px 0px;}
			#menu li.works a{background-position:0px -36px;}
			#menu li.works a:hover{background-position:-143px -36px;}
			
			#menu li.works_active{width:143px; height:25px; margin:5px 0px;}
			#menu li.works_active a{background-position:-143px -36px;}
			
			/* people Button */
			#menu li.people{width:143px; height:25px; margin:5px 0px;}
			#menu li.people a{background-position:0px -67px;}
			#menu li.people a:hover{background-position:-143px -67px;}
			
			#menu li.people_active{width:143px; height:25px; margin:5px 0px;}
			#menu li.people_active a{background-position:-143px -67px;}
			
			/* Reels Button */
			#menu li.reels{width:143px; height:25px; margin:5px 0px;}
			#menu li.reels a{background-position:0px -96px;}
			#menu li.reels a:hover{background-position:-143px -96px;}
			
			#menu li.reels_active{width:143px; height:25px; margin:5px 0px;}
			#menu li.reels_active a{background-position:-143px -96px;}
			
			/* Services Button */
			#menu li.services{width:143px; height:25px; margin:5px 0px;}
			#menu li.services a{background-position:0px -123px;}
			#menu li.services a:hover{background-position:-143px -123px;}
			
			#menu li.services_active{width:143px; height:25px; margin:5px 0px;}
			#menu li.services_active a{background-position:-143px -123px;}
			
			/* Contact Button */
			#menu li.contact{width:143px; height:25px; margin:5px 0px;}
			#menu li.contact a{background-position:0px -151px;}
			#menu li.contact a:hover{background-position:-143px -151px;}
			
			#menu li.contact_active{width:143px; height:25px; margin:5px 0px;}
			#menu li.contact_active a{background-position:-143px -151px;}
			
			/**latest works**/
			#menu li.latest_works{width:70px; height:12px; margin:5px 0px 5px 75px;}
			#menu li.latest_works a{background-position:-290px -6px;}
			#menu li.latest_works a:hover{background-position:-363px -6px;}
			
			#menu li.latest_works_active{width:70px; height:12px; margin:5px 0px 5px 75px;}
			#menu li.latest_works_active a{background-position:-363px -6px;}
			
			/**reelsb**/
			#menu li.reelsb{width:70px; height:12px; margin:5px 0px 5px 75px;}
			#menu li.reelsb a{background-position:-290px -30px;}
			#menu li.reelsb a:hover{background-position:-363px -30px;}
			
			#menu li.reelsb_active{width:70px; height:12px; margin:5px 0px 5px 75px;}
			#menu li.reelsb_active a{background-position:-363px -30px;}
			
			/**history**/
			#menu li.history{width:70px; height:12px; margin:5px 0px 5px 75px;}
			#menu li.history a{background-position:-290px -55px;}
			#menu li.history a:hover{background-position:-363px -55px;}
			
			#menu li.history_active{width:70px; height:12px; margin:5px 0px 5px 75px;}
			#menu li.history_active a{background-position:-363px -55px;}
			
			/**2011**/
			#menu li.elev{width:65px; height:12px; margin:5px 0px 5px 72px;}
			#menu li.elev a{background-position:-290px -128px;}
			#menu li.elev a:hover{background-position:-363px -128px;}
			
			#menu li.elev_active{width:68px; height:12px; margin:5px 0px 5px 72px;}
			#menu li.elev_active a{background-position:-363px -75px;}
			
			/**2010**/
			#menu li.ten{width:70px; height:12px; margin:5px 0px 5px 72px;}
			#menu li.ten a{background-position:-290px -75px;}
			#menu li.ten a:hover{background-position:-363px -75px;}
			
			#menu li.ten_active{width:70px; height:12px; margin:5px 0px 5px 72px;}
			#menu li.ten_active a{background-position:-363px -75px;}
			
			/**2009**/
			#menu li.nine{width:70px; height:12px; margin:5px 0px 5px 72px;}
			#menu li.nine a{background-position:-290px -94px;}
			#menu li.nine a:hover{background-position:-363px -94px;}
			
			#menu li.nine_active{width:70px; height:12px; margin:5px 0px 5px 72px;}
			#menu li.nine_active a{background-position:-363px -94px;}
			
			/**2004**/
			#menu li.four{width:70px; height:12px; margin:5px 0px 5px 72px;}
			#menu li.four a{background-position:-290px -114px;}
			#menu li.four a:hover{background-position:-363px -114px;}
			
			#menu li.four_active{width:70px; height:12px; margin:5px 0px 5px 72px;}
			#menu li.four_active a{background-position:-363px -114px;}
			
			/**kemistry_latest**/
			#menu li.kem_latest{width:100px; height:12px; margin:5px 0px 5px 62px;}
			#menu li.kem_latest a{background-position:-470px -6px;}
			#menu li.kem_latest a:hover{background-position:-470px -77px;}
			
			#menu li.kem_latest_active{width:100px; height:12px; margin:5px 0px 5px 62px;}
			#menu li.kem_latest_active a{background-position:-470px -77px;}
			
			/**director_reels**/
			#menu li.dir_reels{width:100px; height:12px; margin:5px 0px 5px 62px;}
			#menu li.dir_reels a{background-position:-470px -28px;}
			#menu li.dir_reels a:hover{background-position:-470px -99px;}
			
			#menu li.dir_reels_active{width:100px; height:12px; margin:5px 0px 5px 62px;}
			#menu li.dir_reels_active a{background-position:-470px -99px;}
			
			/**recently_work**/
			#menu li.recently_work{width:110px; height:14px; margin:5px 0px 5px 30px;}
			#menu li.recently_work a{background-position:-440px -52px;}
			#menu li.recently_work a:hover{background-position:-440px -123px;}
			
			#menu li.recently_work_active{width:110px; height:14px; margin:5px 0px 5px 30px;}
			#menu li.recently_work_active a{background-position:-440px -123px;}


/*typho*/
@font-face {
    font-family: 'MyriadPro-Cond';
    src: url('font/myriadpro-cond.eot');
    src: url('font/myriadpro-cond.eot?#iefix') format('embedded-opentype'),
         url('font/myriadpro-cond.woff') format('woff'),
         url('fontmyriadpro-cond.ttf') format('truetype'),
         url('font/myriadpro-cond.svg#myriadpro-cond') format('svg');
    font-weight: normal;
    font-style: normal;
}

h10 {font-size:40px; color:#fff; font-family:Impact, myriad pro, Arial, Helvetica, sans-serif;}
h11 {font-size:32px; color:#48b4e4;	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase;}
h12 {font-size:15px; color:#48b4e4;	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif; text-transform:uppercase;}
h14 {color:#48b4e4;}

#content {
	float:right;
	width:700px;
	padding:40px 25px 40px 25px;
	min-height:570px;!important
	}

/*slideshow*/

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

#title {
	border-bottom:1px solid #898989;
	font-size:18px; 
	color:#48b4e4; 
	text-transform:uppercase;
	text-align:right;
	padding-bottom:5px;
	margin-bottom:20px;
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif;
	}
#title a{
	font-size:14px; 
	color:#8a8a8a;
	text-transform:uppercase;
	text-align:right;
	padding-bottom:5px;
	margin-bottom:20px;
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif;
	text-decoration:none;
	}
.line {border-bottom:1px solid #898989; height:1px; margin:10px 0px;}

/* List Video */
#video_thumb {
	width:205px;
	height:180px;
	margin:0px 14px 20px 14px; 
	float:left;
	}
.video_img {
	width:205px;
	height:115px;
	}
.video_img img {
	width:205px;
	height:115px;
	-moz-box-shadow: 0 0 10px 2px #1e1e1e;
	-webkit-box-shadow: 0 0 10px 2px #1e1e1e;
	box-shadow: 0 0 10px 2px #1e1e1e;
	}
.video_title {
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif;
	font-size:16px;
	text-transform:uppercase;
	color:#48b4e4; 
	text-align:center;
	margin-top:5px;
	}
.video_title a{
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif;
	font-size:16px;
	text-transform:uppercase;
	color:#48b4e4; 
	margin-top:5px;
	text-decoration:none;
	}
.video_title a:hover{
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif;
	font-size:16px;
	text-transform:uppercase;
	color:#ebebeb; 
	margin-top:5px;
	text-decoration:none;
	}
.video_dir {
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif;
	font-size:14px;
	text-transform:uppercase;
	color:#ebebeb;
	text-align:center;
	}
	
/*People*/
#people_thumb {
	width:120px;
	margin:0px 10px 20px 10px; 
	float:left;
	}
.people_img {
	width:100px;
	height:100px;
	-moz-box-shadow: 0 0 10px 2px #1e1e1e;
	-webkit-box-shadow: 0 0 10px 2px #1e1e1e;
	box-shadow: 0 0 10px 2px #1e1e1e;
	}

.people_img img{
	width:100px;
	height:100px;
	}
.people_title {
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif;
	font-size:14px;
	text-transform:uppercase;
	color:#48b4e4; 
	margin-top:5px;
	}
.people_title a{
	color:#48b4e4;
	text-decoration:none;
	}
	
/* People_detail */
#left_peop {
	float:left;
	width:160px;
	}
#left_peop img{
	width:160px;
}
#right_peop {
	width:520px;
	float:left;
	margin-left:20px;
	}
.peop_det_title {
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif;
	font-size:20px;
	text-transform:uppercase;
	color:#48b4e4; 
	border-bottom:1px solid #fff;
	margin-bottom:20px;
	padding-bottom:10px;
	}
.close {
	float:right;
	}
	
/* Video Page */
.video_page_title {
	font-size:24px; 
	color:#48b4e4;	
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif; 
	font-weight:bold; 
	text-transform:uppercase;
	}
#video_page {color:959595;font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif; text-transform:uppercase;}
.video_page_dir {
	color:#e1e1e1;
	font-size:15px;
	text-transform:uppercase;
	}
.video_page_dir a {
	color:#e1e1e1;
	text-decoration:none;
	text-transform:uppercase;
	}
.video_page_dir a:hover {
	color:#e1e1e1;
	text-decoration:underline;
	text-transform:uppercase;
	}
.video_page_box {
	margin-top:5px;
	}
	
/*director reels */
#dir_reels_list {
	height:150px;
	width:205px;
	margin:0px 14px 20px 14px; 
	float:left;
	}
.dir_title {
	font-size:18px;
	color:#fff;
	text-decoration:none;
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif; 
	text-transform:uppercase;
}
.dir_title a{
	font-size:18px;
	color:#fff;
	text-decoration:none;
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif; 
	text-transform:uppercase;
	}
.dir_title a:hover{
	font-size:18px;
	color:#48b4e4;
	text-decoration:none;
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif; 
	text-transform:uppercase;
	}
.view_reels {
	font-size:14px;
	color:#757575;
}
.view_reels a{
	font-size:14px;
	color:#757575;
	text-decoration:none;
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif; 
	text-transform:uppercase;
	}
.view_reels a:hover{
	font-size:14px;
	color:#757575;
	text-decoration:underline;
	font-family:MyriadPro-Cond, arial, Arial, Helvetica, sans-serif; 
	text-transform:uppercase;
	}