@import url('//fonts.googleapis.com/css?family=Bangers|Boogaloo|Seymour+One|Neucha|Signika:400,700&subset=latin,latin-ext,cyrillic');

html {
	font-size: 100%;
	line-height: 105%;
}

body {
	font-family: 'Boogaloo', sans-serif;
	font-size: 140%;
	line-height: 90%;
	-webkit-font-smoothing: antialiased;
}

body.ru {
	font-family: 'Neucha', sans-serif;
}

body.pl {
	font-family: 'Signika', sans-serif;
}

body.pl {
	font-size: 110%;
	line-height: 90%;
}

body.ru {
	font-size: 120%;
	line-height: 80%;
}


h2, h3 {
	line-height: 100%;
}

body.ru h2, body.ru h3 {
	line-height: 105%;
}

.pageboundary {
	text-shadow: 0 0 3px white, 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 5px white, 0 0 7px white, 0 0 15px white;
}

.pageboundary a {
	text-shadow: none;
}

td {
	text-shadow: none;
	background-color: rgba(255,255,255,0.5);
}


div.spread {
	background: url('background.jpg') center 85% white no-repeat;
	background-size: cover;
}


ol {
	padding-left: 30px;
}


/* -----------------------------------------------*/
/* ------------ Cover page -------------*/
/* -----------------------------------------------*/



header h1, header ul#external {
	font-size: 102%;
}

header h1 {
	left: 200px;
	padding-top: 3px;
}

header ul#external li a#feralsite {
	margin-top: 0;
}

header ul#help {
	padding: 3px 7px 5px;
}

#cover h2 img.screen {
	display: block;
	margin: 0 auto;
	width: 30%;
	margin-bottom: 1%;
}

#cover h2 {
	text-shadow: 0 0 15px black;
	margin-top: 2%;
	font-family: 'Bangers', sans-serif;
}

.ru #cover h2 {
	font-family: 'Seymour One', sans-serif;
}

.pl #cover h2 {
	font-family: 'Signika', sans-serif;
}

.ru #cover a:after, .pl #cover a:after {
	margin-left:10px;
}


.ru #cover a, .pl #cover a {
	width: 110px;
	text-align: center;
}


#cover {
	background: url('cover.jpg') 50% 42% black no-repeat;
	background-size: cover;
	
	text-shadow: none;
}

#cover a {
	padding: 17px 20px 17px 20px;
	float: none;
	margin: 8% auto 0;
	width: 100px;
	font-size: 160%;
	text-transform: uppercase;

}

#webmanualintro{
	padding-bottom: 3px;
}

#webmanualintro .close {
	text-align: center;
	width: 20px;
	padding: 0;
}
 
#cover #logos {
	left: 5%;
	bottom: 40px
}

#cover #logos img {
	width: 8%;
}

#cover #logos img:first-child {
	width: 10%;
	margin-bottom: -7px;
}

#cover #logos img:last-child {
	width: 12%;
	margin-top: -20px;
}

/* -----------------------------------------------*/
/* ------------ Spread 1 -------------*/
/* -----------------------------------------------*/


#spread1 p, #spread1 li, #spread1 div {
	font-weight: normal;
}

#spread1 h2 {
	text-shadow: none;
}


/*#spread2 img#introspiderman {
	position: fixed;
	top: 0;
	left: 0;
	
transform - http://prefixmycss.com 
-webkit-transform:translate(100%,-70%) scale(.35) rotate(-30deg);
   -moz-transform:translate(100%,-70%) scale(.35) rotate(-30deg);
    -ms-transform:translate(100%,-70%) scale(.35) rotate(-30deg);
     -o-transform:translate(100%,-70%) scale(.35) rotate(-30deg);
        transform:translate(100%,-70%) scale(.35) rotate(-30deg);
/*transition
-webkit-transition:-webkit-transform 1s ease-in;
   -moz-transition:   -moz-transform 1s ease-in;
     -o-transition:     -o-transform 1s ease-in;
        transition:        transform 1s ease-in;

}*/

#spread2 .lhp {
	position: relative;
	z-index: 1;
}

#spread2 img#introspiderman {
	position: absolute;
	top: 0;
	left: 18%;
	height: 80%;
/*transform*/
-webkit-transform: rotate(30deg);
   -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
     -o-transform: rotate(30deg);
        transform: rotate(30deg);
	z-index: 0;
}


/*#spread2:target img#introspiderman {
	position: fixed;
	top: 0;
	left: 1%;
-webkit-transform:translate(30%) scale(.65) rotate(30deg);
   -moz-transform:translate(30%) scale(.65) rotate(30deg);
    -ms-transform:translate(30%) scale(.65) rotate(30deg);
     -o-transform:translate(30%) scale(.65) rotate(30deg);
        transform:translate(30%) scale(.65) rotate(30deg);
	z-index: 0;
}
*//*
#spread3 .lhp {
	margin-top: -5%;
	padding-top: 5%;
	height: 110%;
	background: url('thor.png') no-repeat bottom center transparent;
	background-size: auto 124%;
}*/

#spread3 .pageboundary {
	background: url('thor.png') no-repeat left bottom transparent;
	background-size: auto 120%;
	height: 100%;
	padding-top: 5%;
	top: 0;
	left: 205px;
	padding-left: 30px;
}


#spread4 .pageboundary {
	height: 95%;
	background: url('wolverine.png') no-repeat left 85% transparent;
	background-size: auto 75%;
	left: 205px;
	padding-left: 30px;
}



#spread6 .pageboundary {
	height: 95%;
	background: url('deadpool.png') no-repeat center 105% transparent;
	background-size: auto 75%;
}



#warranty-credits .pageboundary {
	margin-top: -5%;
	padding-top: 7%;
	height: 100%;
	right: 0;
	background: url('hulk.png') no-repeat 200% -30px transparent;
	background-size: auto 100%;
}


/* Make controls pages full page spreads */

#spread5 .lhp {
	width: 100%;
}

img#gamepaddiagramcustom {
	width: 64%;
	margin: 3% 0 3% 3%;
	max-width: 510px;
	float: left;
}

table#gamepadcontrolscustom {
	width: 92%;
	margin: 0% 6% 3% 0;
	display: inline-table;
	float: right;
}





/* -----------------------------------------------*/
/* ----------- Collectibles - Spread 7 -----------*/
/* -----------------------------------------------*/


#spread7 h3 {
	padding-top: 10px;
}

#i_10_lego_studs + p:before {
	content: "";
	display: block;
	height: 50px;
	background: url('stud.png') center center transparent no-repeat;
	background-size: auto 100%;
	float: left;
	padding-right: 15%;
}

#i_11_minikits + p:before {
	content: "";
	display: block;
	height: 50px;
	background: url('minikit.png') center center transparent no-repeat;
	background-size: auto 100%;
	float: left;
	padding-right: 15%;
}

#i_12_red_bricks + p {
	margin-top: -0.8em;
	padding-top: 0.8em; 
	min-height: 1em;
}

#i_12_red_bricks + p:before {
	content: "";
	display: block;
	height: 50px;
	margin-top: -0.8em;
	background: url('redbrick.png') center center transparent no-repeat;
	background-size: auto 85%;
	float: left;
	padding-right: 15%;
}

#i_13_stan_lee + p {
	margin-top: -0.8em;
	padding-top: 0.8em; 
	min-height: 1.5em;
}

#i_13_stan_lee + p:before {
	content: "";
	display: block;
	height: 50px;
	margin-top: -0.8em;
	background: url('stan-lee.png') center center transparent no-repeat;
	background-size: auto 100%;
	float: left;
	padding-right: 15%;
}

#i_14_gold_bricks + p:before {
	content: "";
	display: block;
	height: 50px;
	background: url('goldbrick.png') center center transparent no-repeat;
	background-size: auto 85%;
	float: left;
	padding-right: 15%;
}







/* Legal page - WB shield logo positioning */

#wbshield {
	width: 10%;
	margin: 3% 0% 0% 0%;
	float: left;
}

#wbshieldtext {
	width: 80%;
	margin: 3% 0% 0% 1%;
	float: left;
	font-size: 75%;
	text-align: justify;
}

#tech-support-contact br {
	display: none;
}

#tech-support-contact ul + p + p {
	margin-top: 1em;
}



#adverts {
	font-size: 70%;
}






/* -----------------------------------------------*/
/* ---------------- Meida Queries ----------------*/
/* -----------------------------------------------*/

@media all and (max-width: 1366px) and (max-height: 768px) {
	
		body {
			font-size: 120%;
			line-height: 82%;
		}
			
		#warranty-credits .pageboundary {
			background: url('hulk.png') no-repeat 100% bottom transparent;
			background-size: 70% auto;
		}
		
		
		#spread7 h3 {
			padding-top: 0;
		}


	}
	



@media all and (min-width: 1401px) and (min-height: 901px) {
	
	body {
		font-size: 140%;
		line-height: 100%;
	}
	
	td {
		padding: 2px 10px;
	}
	
	
	#adverts {
		font-size: 70%;
	}
	
	#adverts a p {
		font-size: 90%;
		line-height: 100%;
	    margin-top: -10px;
	}
	
	#warranty-credits .pageboundary {

		background: url('hulk.png') no-repeat 100% bottom transparent;
		background-size: 70% auto;
	}

}




/* ---------------- Wide ----------------*/

@media all and (min-width: 1402px) and (max-height: 900px) {
	
	#warranty-credits .pageboundary {

		background: url('hulk.png') no-repeat 100% bottom transparent;
		background-size: 70% auto;
	}
	
}