/*
Theme Name: Matah Ati v2 Responsive
Theme URI: http://matah-ati.com/
Description: Second theme of Matah Ati with responsive layout
Author: Rio Purnomo
Author URI: http://siriokun.com/
*/
body { background:#000; font-family:"Times New Roman", Times, serif; font-size:14px; margin:0 }
@font-face { font-family: 'RotisSemiSerifStd55Regular'; src: url('fonts/rotissemiserifstd-webfont.eot'); src: url('fonts/rotissemiserifstd-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/rotissemiserifstd-webfont.woff') format('woff'), url('fonts/rotissemiserifstd-webfont.ttf') format('truetype'), url('fonts/rotissemiserifstd-webfont.svg#RotisSemiSerifStd55Regular') format('svg'); font-weight: normal; font-style: normal; }
a { color:#000; text-decoration:none }
img { border:0 }
h1, h2, h3, h4, h5 { font-size:14px }
.red{color:red;}
sup{line-height:0;}
/* header */
#top { font-family: "RotisSemiSerifStd55Regular"; display:block; position:fixed; top:0; z-index:100; width:100% }
.logo { margin:30px; position:absolute; top:-20px; left:-170px; z-index:101 }
.qtrans_language_chooser { float:right; margin:0 -150px 0 0; padding:0; position:relative; top:20px; }
.qtrans_language_chooser li { display:inline-block; list-style:none; padding:0 10px }
.qtrans_language_chooser .active span { border-bottom:1px dashed #333 }
.qtrans_language_chooser li:first-child { border-right:1px solid #333 }
.tagline { margin-right:30px; text-align:right; text-transform:none; }
#header { margin:35px auto 0; padding:0; width:700px; position:relative; text-transform:lowercase; left:-8px }
.menu { border-top:1px solid #333; clear:both; padding:0 }
.menu ul { margin:0; padding:0 }
.menu li { float:left; list-style:none; border-right:1px solid #333; margin:0; height:15px; position:relative; left:8px; }
.menu li:last-child { border:0 }
.menu a { display:block; padding:10px 25px 0; }
.menu li ul { display: none; position: absolute; left: 0; padding:0; margin:0; }
.menu li:hover > ul { display: block; }
.menu li ul li a { width: 100px; display: block; }
/*sub submenu*/
.menu li ul li ul { display: none; }
.menu li ul li:hover ul { left:100%; top:0; }
.menu .sub-menu { display:none; float:left; padding-top:5px; position:absolute; top:25px; left:1px; }
.menu .sub-menu .sub-menu {padding-top:10px; width:450px }
.menu .sub-menu .sub-menu li { padding-left:10px }
.sub-menu li { border:0!important; height:auto; padding-top:5px; vertical-align:top }
.sub-menu a { background:#000; color:#fff; display:block; padding:2px 15px; white-space:nowrap; }
.sub-menu li li, .sub-menu li li a { display:inline-block; float:left}
.sub-menu li li {position:relative; left:0; top:-10px; }
.sub-menu ul.sub-menu li a { background:none; color:#333; width:175px }
.sub-menu ul.sub-menu .short a { width:90px }
.sub-menu li li a:hover { background:url(images/bg-nav.png); }
.clear{clear:both;}

/* slides */
#slides { color:#808080; height:100%; width:100%; position:absolute; top:0; z-index:1; overflow:hidden; line-height:0 }
#slides img { width:100%; /*height:100%*/ }
.slides-gallery{background:url(images/loading.png) center center no-repeat;height:100%;}
.bx-prev, .bx-next { background:url(images/slider-navs.png) right 0 no-repeat; height:20px; width:20px; overflow:hidden; text-indent:-100px; position:absolute; top:50%; right:3%; z-index:101; opacity:.5; }
.bx-prev { background-position:0 0; right:auto; left:3% }
.bx-prev:hover, .bx-next:hover{ opacity:1; }
.merc .bx-prev, .merc .bx-next { background-position:right bottom; }
.merc .bx-prev { background-position:left bottom; }
.slides-merc{ margin:0;padding:0}
.slides-merc li{position:relative}
.slides-merc a{ display:block;position:absolute; top:10%; left:11%; height:82%; width:15%;}
.slides-merc a:hover{background:url(images/icon-eye.png) center center no-repeat;}
/* touch */
#content{position:relative;top:45px; left:0;}
#content>div {
	position:absolute; z-index:1;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	padding:0;
  	width:650px;
}
.selectnav, .display{display:none}

/* content */
.flex { background: url(images/bg.png) center 0 repeat-y; height:100%; width:100%; overflow:hidden; position:absolute; top:0; z-index:1 }
#content, #discontent { font-family: "RotisSemiSerifStd55Regular";color:#000; margin:150px auto 150px; line-height:14pt; height:289px; width:650px; overflow:auto; padding:0 287px 70px; }
#content hr { border:0; border-top:1px solid #ccc; float:left; margin:0 100% 1em 0; width:200px }
img.aligncenter { display:block; margin:0 auto }
img.alignleft { float:left; margin:0 30px 15px 0 }
img.alignright { float:right; margin:0 0 15px 30px }
.thumbs { margin-left:-30px; width:800px }
.thumbs img { margin:0 0 20px 30px; cursor:pointer; }

/* footer */
.foot { background:#fff; border-top:1px solid #fff; display:block; font-size:9px; float:right; position:absolute; z-index:100; bottom:0; left:0; width:100%; }
.foot p { font-family: Arial, sans-serif; margin:0 auto; padding:35px 0 0; width:980px }
.foot-social { color:#f00; float:right; font-style:normal; margin-top:-21px; text-align:right; width:580px }
.foot-social strong{ color:#333; display:block; float:left;line-height:16px}

.foot{ text-align:center; color:#3c3c3c; font-size:14px; font-family: 'RotisSemiSerifStd55Regular'; padding-top:10px; }
.foot .grey { color:#8c8c8c; }
.foot .links { margin:15px auto; vertical-align:middle; color:#b10000; font-weight:bold; width:650px; }
.foot .links a { display: block; float:left; margin-left:15px; }

.foot .links .text { margin-top:15px; display: block; float:left; }
.foot .links .fb { margin-top:3px; }
.foot .links .twitter { margin-top:3px; }


/* coverage */
#play{display:none; cursor:pointer;}
.coverage>#discontent{width:558px;overflow:hidden;}
.coverage>#discontent a{ display:inline; float:left; margin:10px;}
.fancybox-wrap{background:#fff;z-index:102; box-shadow:10px 5px 15px rgba(0,0,0,.5);}
.fancybox-wrap img{height:auto; width:100%}
.fancybox-skin{ border:1px solid #ccc;margin-bottom:30px;}
#fancybox-loading{ margin:120px auto 0; background:url(images/loading.gif) 0 0 no-repeat; height:32px; width:32px; position:relative; z-index:105; opacity:.5}
#fancybox-overlay{background:#fff; height:100%; width:100%; position:fixed; left:0; top:0; z-index:101; opacity:.7;cursor:pointer;}
.fancybox-close,.fancybox-prev,.fancybox-next{ background:url(images/slider-close.png) 0 0 no-repeat; cursor:pointer; height:21px; width:21px; position:absolute; right:15px; bottom:5px}
.fancybox-prev,.fancybox-next {
background-image:url(images/slider-nav.jpg);
	position:absolute;left:15px;right:auto;
}
.fancybox-next{left:35px;background-position:-25px 0;}
.overlay-dark, .overlay-dark #discontent{padding:0; height:auto; width:633px}
.overlay-dark{background:none;position:relative;z-index:103; margin:0 auto;}
.video-player{background:none}
.video-player #discontent{ padding:0; height:auto;width:633px}
/* merchandise */
#item1,#item2,#item3{display:none; position:absolute; top:0; left:0; height:100%; width:100%; z-index:102;}
.box{overflow:hidden;}
.box img{float:left;margin:0 15px 10px 0;width:auto}
.upcoming{position:absolute; top:-35px; right:-280px;}
#seat1, #seat2, #seat3{display:none; text-align:center;}
.fancybox-title{text-align:center;width:100%!important;}
.child a{color:red;}
.up{background: url(images/bg.jpg) center 0 repeat-y;}
.col2,.col3{display:inline-block; width:25%; vertical-align:top;}
.col2{ margin:0 25px;width:40%}
.hr{border-top:1px solid #ccc; margin:20px 0;}
.col3 .red{float:right; margin-bottom:15px;}
/* details */
.sub-menu ul.sub-menu .uppercase a{text-transform:none;}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-button:start:decrement{display:block;height:0;right:20px}
::-webkit-scrollbar-button:end:increment{display:block;height:0;right:20px}
::-webkit-scrollbar-button:vertical:increment{background:#222}
::-webkit-scrollbar-track-piece{background-color:#ddd}
::-webkit-scrollbar-thumb:vertical{height:43px;background-color:#000;border:1px solid #333}
::-webkit-scrollbar-thumb:horizontal{width:30px;background-color:#000;border:1px solid #333}
::-webkit-scrollbar-thumb:vertical:active{border-width:1px 2px 1px 2px}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover{background-color:#000}
::selection,::-moz-selection {background:#333; color:#fff;}
@media only screen and (min-width:100px) and (max-width:800px) {
    body{overflow:hidden}
    #header,.video-player #discontent, .bx-wrapper, .bx-window{width:auto}
    #content{ margin-top:155px;padding:25px; width:auto}
    #content>div{width:100%}
    #content img, #discontent img{max-width:100%}
    .coverage>#discontent, #content>div, .thumbs { width: auto }
	.coverage>#discontent{padding:15px; height:auto}
    #casts .item{padding:0 30px 30px 0}
    .thumbs{margin:0}
	.thumbs img{margin:0 0 1px 1px; width:50px}
    .col2, .col3 { display:block; margin: 0; width: auto }
    .col3 .red{float:none}
    #slides{margin-top:215px}
    #slides.merc{margin-top:250px}
    .slides-gallery{background-position:center 25%}
    .tagline{margin-left:30px; margin-right:120px; text-align:left}
    .logo{ margin:30px 30px 0;position:inherit}
	.upcoming{right:0; top:-55px}
	.qtrans_language_chooser{ position:absolute; float:none; margin:20px; top:-35px; left:0}
    .menu li{height:35px}
    .foot{display:none}
    .selectnav{display:block; margin:0 30px; padding:5px; width:90%}
    #menu-navigation, #play{display:none!important}
    iframe{width:100%}
    .display{display:block}
    .fancybox-skin{margin-bottom:40px}
    .fancybox-close, .fancybox-prev, .fancybox-next{ background-size:cover;height:30px; width:30px}
    .fancybox-next{left:50px; background-position:-48px 0}
}
@media only screen and (min-width:768px) and (max-width:1024px) {
	body{overflow:hidden}
	#slides.merc{margin-top:250px!important}
    #content{ margin-top:155px;padding:25px;}
    #content>div{width:auto}
	.logo{ margin:30px 30px 0;position:inherit}
	.upcoming{right:0; top:-70px}
    .tagline{margin-left:30px; margin-right:120px; text-align:left}
	.qtrans_language_chooser{ position:absolute; float:none; margin:20px; top:-35px; left:0}
    .foot p{margin:0 15px;width:auto}
	.video-player #discontent{margin-top:180px}
    .selectnav{display:block; margin:0 30px; padding:5px; width:90%}
    #menu-navigation{display:none!important}
    .fancybox-skin{margin-bottom:40px}
    .fancybox-close, .fancybox-prev, .fancybox-next{ background-size:cover;height:30px; width:30px}
    .fancybox-next{left:50px; background-position:-48px 0}
}