/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
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,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

body, html {
	font-family: Arial, Helvetica, sans-serif;
}

#wrapper {
	width: 100%;
	min-width: 996px;
	position: absolute;
}

ul.reset {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.reset li {
	margin: 0;
	padding: 0;
}

.hide {
	display: none !important;
}

/**
 * Header
 */
#header {
	height: 40px;
	width: 100%;
	background: #333 url(images/_header.png) top center no-repeat;
}

/**
 * Logo
 */
#logo {
	position: absolute;
	top: 10px;
	left: 20px;
	z-index: 700;
	width: 1px;
	height: 1px;
}

#logo img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

/**
 * Container & page
 */
#container {
	position: absolute;
	width: 100%;
}

#page {
	width: 100%;
	height: 602px;
	overflow: hidden;
	position: relative;
}

.page {
	width: 100%;
	height: 100%;
	position: absolute;
	background-position: top center;
	background-repeat: no-repeat;
	-webkit-backface-visibility: hidden;
}

.page .content {
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 5;
}

#content .page {
	position: absolute;
	top: 2000px;
	overflow: hidden;
}

#content .page-static,
#content .page-flex, 
#content .page-full {
	/* opacity: 0; */
}

.page-static {
	width: 996px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -498px;
	
}

.page-flex {
	width: 100%;
	min-width: 996px;
	position: relative;
	margin: 0 auto;
	height: 100%;
}

.page-full {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}

.page-full-right {
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}


.page-background {
	width: 100%;
	position: absolute;
	min-width: 996px;
	overflow: hidden;
	height: 100%;
}

.page-background img {
	display: block;
	width: 100%;
	position: absolute;
	min-width: 1280px;
	-webkit-transform:scale(1);
}

.page-background .holder {
	width: 100%;
	position:absolute;
	top: 0;
	left: 0;
}

html.lessThan1280 .page-background img {
	left: 50%;
	margin-left: -640px;
}

/**
 * Loading
 */
.pageLoader {
	width: 100%;
	background: url(images/loading-black.gif) no-repeat center center;
	position: absolute;
	height: 602px;
	z-index: 900;
}

#siteLoader {
	height: 100%;
	background-color: #FFF;
	z-index: 900;
	width: 100%;
	position: absolute;
}

/**
 * Logo
 */
#logo {
	position: absolute;
	top: 10px;
	left: 20px;
	z-index: 700;
}

#logo img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

/**
 * Rollover
 */
.rollover .over,
.rollover .up {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	
	-webkit-transition-property: opacity;
  -webkit-transition-duration: 0.3s;
	-moz-transition-property: opacity;
  -moz-transition-duration: 0.3s;
	transition-property: opacity;
  transition-duration: 0.3s;
}

.rollover .over {
	opacity: 0;
	filter: alpha(opacity=0);
}

.rollover.active .up {
	opacity: 0 !important;
	filter: alpha(opacity=0) !important;
}

.rollover.active .over {
	opacity: 1 !important;
	filter: alpha(opacity=1) !important;
}

html.desktop .rollover:hover .over,
html.mobile .rollover:active .over {
	opacity: 1;
	filter: alpha(opacity=100);
}

html.desktop .rollover:hover .up,
html.mobile .rollover:active .up {
	opacity: 0;
	filter: alpha(opacity=0);
}

/* Boxarrow */
.boxarrow {
	display: block;
	position: absolute;
	width: 55px;
	height: 60px;
	right: 0;
	
	-webkit-transition-property: right;
  -webkit-transition-duration: 0.3s;
	-moz-transition-property: right;
  -moz-transition-duration: 0.3s;
	transition-property: right;
  transition-duration: 0.3s;
}

html.mobile .boxarrow:active,
html.mobile .boxarrow:active{
	right: 0;
}

.boxarrow.next {
	top: 50%;
	margin-top: -60px;
}

.boxarrow.prev {
	top: 50%;
	margin-top: 0px;
}

.boxarrow img {
	display: block;
	position: absolute;
	top: 0;
	right: -7px;
}

.boxarrow .over {
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 1;
}

.boxarrow .up, 
.boxarrow .over {
	-webkit-transition-property: right;
  -webkit-transition-duration: 0.3s;
	-moz-transition-property: right;
  -moz-transition-duration: 0.3s;
	transition-property: right;
  transition-duration: 0.3s;
}

html.desktop .boxarrow:hover .over,
html.mobile .boxarrow:active .over {
	opacity: 1;
	filter: alpha(opacity=100);
	right: 0;
}

html.desktop .boxarrow:hover .up,
html.mobile .boxarrow:active .up {
	right: 0;
	opacity:0;
}

/**
 * Footer
 */
#footer {
	height: 358px;
	width: 100%;
	z-index: 800;
	background: #dedede url(images/footer/gradient.jpg) top left repeat-x;
}

#footer-shadow {
	height: 7px;
	background:url(images/footer/shadow.png) repeat-x;
	position: absolute;
	top: -7px;
	width: 100%;
	z-index: 1;
	pointer-events: none;
  cursor: default;
}

#footer-toggle {
	width: 70px;
	height: 29px;
	position:absolute;
	top: -28px;
	left: 50%;
	margin-left: -35px;
	text-align: center;
	display: none;
}

#footer-toggle:hover,
#footer-toggle.active {
	z-index: 2;
}

#footer.drawer #footer-toggle {
	display: block;
}

html.desktop #footer.drawer {
	position: fixed;
}

/* Share */
.share-button {
	width: 142px;
	height: 32px;
	display: block;
	position: absolute;
}

/* Menu */
#footer #menu {
	border-top: solid 1px #363636;
	height: 29px;
	background: #1f1f1f;	
	width: 100%;
}

#footer-inner { /* Chrome bug fix */
	width: 100%;
	position: absolute;
}

#footer #menu ul {
	text-align: center;
}

#footer #menu li {
	display: inline-block;
	margin-left: 18px;
}

#footer #menu li:first-child {
	margin-left: 0;
}

#footer #menu li.active a {
	opacity: 1;
}

#footer #menu a {
	height: 29px;
	overflow: hidden;
	display: block;
	background:url(images/menu.png) no-repeat;
	opacity: 0.5;
	
	-webkit-transition-property: opacity;
  -webkit-transition-duration: 0.3s;
	-moz-transition-property: opacity;
  -moz-transition-duration: 0.3s;
	transition-property: opacity;
  transition-duration: 0.3s;
}

#footer #menu a:hover {
	opacity: 1;
}

#footer #menu img {
	display: block;
	position: relative;
	top: 8px;
}

#footer #menu-home { width: 44px; }
#footer #menu-video { width: 46px; }
#footer #menu-video a { background-position: 0 -29px; }
#footer #menu-share { width: 50px; }
#footer #menu-share a { background-position: 0 -58px; }
#footer #menu-about { width: 50px; }
#footer #menu-about a { background-position: 0 -87px; }
#footer #menu-characters { width: 90px; }
#footer #menu-characters a { background-position: 0 -116px; }
#footer #menu-gallery { width: 60px; }
#footer #menu-gallery a { background-position: 0 -145px; }
#footer #menu-games { width: 48px; }
#footer #menu-games a { background-position: 0 -174px; }
#footer #menu-downloads { width: 90px; }
#footer #menu-downloads a { background-position: 0 -203px; }
#footer #menu-products { width: 75px; }
#footer #menu-products a { background-position: 0 -232px; }
#footer #menu-partners { width: 75px; }
#footer #menu-partners a { background-position: 0 -261px; }
#footer #menu-tickets { width: 55px; }
#footer #menu-tickets a { background-position: 0 -290px; }