/************************************
        mito. clever things.
************************************/

/* reset */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p,
del, em, img,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
canvas {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clr:before, .clr:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clr:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clr { zoom: 1; }

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 20, 2011 */
@font-face {
    font-family: 'RockwellRegular';
    src: url('../font/rock-webfont.eot');
    src: url('../font/rock-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/rock-webfont.woff') format('woff'),
         url('../font/rock-webfont.ttf') format('truetype'),
         url('../font/rock-webfont.svg#RockwellRegular') format('svg');
    font-weight: normal;
    font-style: normal;

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

}

strong, b, h3 { font-family: RockwellBold, Arial, Helvetica, sans-serif; }

/* bg */
html { 
	background: #000 url(../images/bg/foxy_jack.jpg) no-repeat center top; 
	height: 100%;
}
body { 
	height: 100%;
	text-align: center;
	font: 14px/18px RockwellRegular, Arial, Helvetica, sans-serif;
	color: #fff;
}		
html.foxy-jack { background-image: url(../images/bg/foxy_jack.jpg); }
html.zombies { background-image: url(../images/bg/zombies.jpg); }
html.foxy-grandpa { background-image: url(../images/bg/foxy_grandpa.jpg); }
html.jack-mike { background-image: url(../images/bg/jack_mike.jpg); }

/* structure */
#cnt {
	width: 930px;
	margin: 0 auto;
	text-align: left;
	position: relative;
	min-height: 100%;
}
#main {
	/*	overflow: auto;*/
	overflow: visible;
	padding-bottom: 220px;
}
#footer {
	position: relative;
	margin: -220px auto 0;
	height: 220px;
	clear: both;
}
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

.col1, .col2 {
	float: left;
}
.col1 {
	width: 290px;
}
.col2 {
	width: 610px;
}
.colCenter {
	width: 710px;
	margin: 0 auto;
}
.mr {
	margin-right: 30px;
}
#main img {
	display: block;
	margin-bottom: 20px;	
}
.left {
	float: left;
	margin-right: 30px;
}
.right {
	float: right;
	margin-left: 30px;
}

/* general */
p {
	padding-bottom: 20px;
}
.col1 p {
	padding-bottom: 5px;
}
h2 {
	font-size: 18px;
	color: #f3e09e;
	text-transform: uppercase;
	font-weight: normal;
	margin: 30px 0 15px 0;
}
p.meta {
	font-size: 8px;
	margin: -20px 0 10px;
	padding: 0;
}
a {
	color: #f3e09e;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.up {
	text-transform: uppercase;
}
.more {
	text-transform: uppercase;
	font-style: italic;
}
#main ul {
	margin-left: 20px;
	padding-bottom: 20px;
}

/* menu */
#menu {
	display: block;
	height: 52px;
	margin: 0 -100px 10px;
	padding: 0 100px;
	background: #111111;
	border: 1px solid #1b1619;
	border-top: none;
}
#menu li {
	list-style: none;
	display: block;
	float: left;
	height: 52px;
	padding: 0 23px;
}
#menu li a {
	display: block;
	line-height: 30px;
	margin: 11px 0;
	padding: 0 18px;
	color: #fff;
	font-family: RockwellBold, Arial, Helvetica, sans-serif;
	font-size: 15px;
	text-transform: uppercase;
	text-decoration: none;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
	background-position: 0 200px;
}
#menu li.selected a,
#menu li a:hover {
	color: #000;
}

/*
#menu li.kocka1.selected a, #menu li.kocka1 a:hover { background-position: -255px -373px; }
#menu li.kocka2.selected a, #menu li.kocka2 a:hover { background-position: -348px -374px; }
#menu li.kocka3.selected a, #menu li.kocka3 a:hover { background-position: -426px -375px; }
*/
#menu li.kocka1.selected a, #menu li.kocka1 a:hover { background-position: -255px -373px; }
#menu li.kocka2.selected a, #menu li.kocka2 a:hover { background-position: -436px -375px; }
#menu li.kocka3.selected a, #menu li.kocka3 a:hover { background-position: -338px -374px; }
#menu li.kocka4.selected a, #menu li.kocka4 a:hover { background-position: -278px -416px; }
#menu li.kocka5.selected a, #menu li.kocka5 a:hover { background-position: -386px -416px; }
#menu li.kocka5 a {width: 200px;}

/* social */
.social {
	position: absolute;
	top: 0;
	right: 0;
	padding: 14px 0;
}
.social li {
	list-style: none;
	display: block;
	float: left;
	width: 25px;
	height: 25px;
	margin-right: 11px;
}
.social li a {
	display: block;
	background: url(../images/sprite.png) no-repeat 0 -184px;
	width: 25px;
	height: 25px;
	text-indent: -999em;
}
.social li#tw a { background-position: 0 -249px; }
.social li a:hover { background-position: 1px -217px; }
.social li#tw a:hover { background-position: 0 -281px; }

/* logo */
h1, h1 a  {
	display: block;
	background: url(../images/sprite.png) no-repeat -52px -184px;
	width: 531px;
	height: 152px;
	text-indent: -999em;
}
h1 {	
	margin: 0 auto 55px;
}
h1.blog, h1.blog a {
	background: url(../images/sprite.png) no-repeat -37px -459px;
	width: 538px;
	height: 152px;
}

/* top links */
#music, #demo, #buy1, #buy2 {
	display: block;
	position: absolute;
	text-indent: -999em;
	background-image: url(../images/sprite.png);
}
#music {
	background: url(../images/sprite.png) no-repeat -305px -642px;
	width: 149px;
	height: 88px;
	top: 62px;
	left: -70px;
}
#music:hover { background-position: -475px -642px; }
#demo {
	background-position: -9px -638px;
	width: 130px;
	height: 94px;
	top: 58px;
	left: 75px;
}
#demo:hover { background-position: -148px -638px; }
#buy1 {
	background-position: -595px -364px;
	width: 120px;
	height: 106px;
	top: 66px;
	right: -55px;
}
#buy2 {
	background-position: -588px -6px;
	width: 120px;
	height: 106px;
	top: 67px;
	right: 75px;
}
#buy1:hover { background-position: -595px -492px; }
#buy2:hover { background-position: -588px -177px; }
#xbox {
	display: block;
	/*margin-top: 48px;*/
	padding-top: 48px;
	height: 40px;
	text-indent: -999em;
}
#pc {
	display: block;
	/*margin-top: 48px;*/
	padding-top: 48px;
	height: 40px;
	text-indent: -999em;
}
#psn { /* todo: sprite.psd kikapcsolt layer be */
	display: block;
	height: 60px;
	text-indent: -999em;
}

/* footer */
#footer {
	width: 880px;
	background: url(../images/footer.png) no-repeat center 120px;
	color: #515151;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

#footer .logos {
	height: 90px;
	padding: 30px 0 0 40px;
	margin-bottom: 20px;
	border-bottom: 1px solid #0a0a08;
}
#footer .logos li {
	list-style: none;
	display: block;
	float: left;
	height: 60px;
	margin-right: 60px;
	background: url(../images/sprite.png) no-repeat -15px -111px;
	text-indent: -999em;
}
#footer .logos li a {
	display: block;
	height: 60px;
	background: url(../images/sprite.png) no-repeat -15px -111px;
	width: 52px;
	text-indent: -999em;
}
#footer .logos li.cg,
#footer .logos li.cg a {
	background-position: -97px -106px;
	width: 62px;
}
#footer .logos li.psn,
#footer .logos li.psn a {
	background-position: -168px -105px;
	width: 56px;
}
#footer .logos li.xbox,
#footer .logos li.xbox a {
	background-position: -238px -105px;
	width: 148px;
}
#footer .logos li.pc,
#footer .logos li.pc a {
	background-position: -399px -103px;
	width: 59px;
}
#footer .logos li.esrb,
#footer .logos li.esrb a {
	background-position: -474px -100px;
	width: 89px;
}
#footer .links {
	margin-bottom: 10px;
}
#footer .links li {
	display: inline;
	color: #949494;
}
#footer .links li a {
	color: #949494;
	text-decoration: none;
}
#footer .links li a:hover { text-decoration: underline; }

/* screens submenu & articlelist pager */
.submenu, 
.pager-wrap {
	background: url(../images/fabal.png) no-repeat left top;
	padding-left: 32px;
	margin-bottom: 25px;
}
#main .submenu ul,
#main .pager-wrap  ul {
	height: 33px;
	float: left;
	background: url(../images/fajobb.png) no-repeat right top;
	padding: 0 30px 0 0;
	margin: 0;
}
.submenu ul li,
.pager-wrap  ul li {
	display: block;
	float: left;
	height: 33px;
	background: #33221c;
}
.submenu ul li a,
.pager-wrap  ul li a {
	display: block;
	height: 33px;
	line-height: 35px;
	background: #33221c;
	text-transform: uppercase;
	padding: 0 10px;
	font-size: 14px;
	color: #fff;
	text-shadow: 3px 3px 6px rgba(0,0,0,0.6);
}
.submenu ul li.selected a,
.submenu ul li a:hover,
.pager-wrap  ul li.selected a,
.pager-wrap  ul li a:hover {
	text-decoration: none;
	color: #f3e09e;
}
.submenu ul li.selected a,
.pager-wrap  ul li.selected a {
	cursor: default;
}
.pager-wrap  ul li a {
	font-weight: bold;
	padding: 0 2px;
}
.pager-wrap  ul li.prev {
	padding-right: 8px;
}
.pager-wrap  ul li.next {
	padding-left: 8px;
}
.pager-wrap  ul li.prev a,
.pager-wrap  ul li.next a,
.pager-wrap  ul li.first a,
.pager-wrap  ul li.last a {
	font-size: 18px;
	line-height: 33px;
}

/* screens */
#main ul.thumbs {
	margin: 0 -13px;
	padding: 0;
}
.thumbs li {
	list-style: none;
	display: block;
	float: left;
	width: 173px;
	height: 108px;
	margin: 9px;
}
.thumbs li a {
	display: block;
	width: 165px;
	height: 100px;
	padding: 4px;
	background: #e5e1b9;
	text-align: center;
}
.thumbs li a img {
	margin: 0 auto;
}
.thumbs li a:hover {
	background-color: #fff;
}

.thumbs li:nth-child(3n) {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	transform: rotate(2deg);
}
.thumbs li:nth-child(4n+2) {
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	transform: rotate(-4deg);
}
.thumbs li:nth-child(6n+1) {
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

/* video */
.carousel {
	position: relative;
}
.carousel .wrap {
	display: block;
	width: 820px;
	height: 90px;
	overflow: hidden;
	margin: 30px auto 40px;
	background: #000;
	position: relative;
}
#main .carousel .wrap ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 1000px;
	margin: 0;
	padding: 0;
}
.carousel li {
	float: left;
	background: #000;
	position: relative;
}
.carousel li,
.carousel li a,
.carousel li a span {
	display: block;
	width: 140px;
	height: 90px;
	text-align: center;
}
.carousel li a {
	margin: 0 5px;
	width: 120px;
}
.carousel li a span {
	width: 120px;
	position: absolute;
	top: 0;
	left: 5px;
	background: url(../images/sprite.png) no-repeat  0 -357px;
}
.carousel a:hover {
	text-decoration: none;
}
.carousel li a img {
	display: block;
	margin: 0 auto;
}
.carousel .prev, 
.carousel .next {
	display: block;
	width: 23px;
	height: 66px;
	position: absolute;
	top: 16px;
	background: url(../images/sprite.png) no-repeat -336px -11px;
	text-indent: -999em;
} 
.carousel .prev {
	left: 36px;
}
.carousel .next {
	right: 36px;
	background-position: -306px -10px;
}
.carousel .prev:hover { background-position: -398px -11px; }
.carousel .next:hover { background-position: -367px -12px; }
.carousel .prev.end:hover { background-position: -336px -11px; cursor: default;}
.carousel .next.end:hover { background-position: -306px -10px; cursor: default;}