@charset 'UTF-8';

/* CSS3 web-fonts used for headings. Downloaded from fontsquirrel.com. */
@font-face {
    font-family: 'KomikaAxisRegular';
    src: url('../font/Komika-Axis-fontfacekit/KOMIKAX_-webfont.eot');
    src: url('../font/Komika-Axis-fontfacekit/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Komika-Axis-fontfacekit/KOMIKAX_-webfont.woff') format('woff'),
         url('../font/Komika-Axis-fontfacekit/KOMIKAX_-webfont.ttf') format('truetype'),
         url('../font/Komika-Axis-fontfacekit/KOMIKAX_-webfont.svg#KomikaAxisRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body { height: 100% }

body {
	background: #7f7f7f;
	background: -moz-radial-gradient(center, ellipse cover,  #7f7f7f 50%, #3f3f3f 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%,#7f7f7f), color-stop(100%,#3f3f3f));
	background: -webkit-radial-gradient(center, ellipse cover,  #7f7f7f 50%,#3f3f3f 100%);
	background: -o-radial-gradient(center, ellipse cover,  #7f7f7f 50%,#3f3f3f 100%);
	background: -ms-radial-gradient(center, ellipse cover,  #7f7f7f 50%,#3f3f3f 100%);
	background: radial-gradient(ellipse at center,  #7f7f7f 50%,#3f3f3f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#3f3f3f',GradientType=1 );
}

/* The outer frame div contains all of the main page's content.
	To vertically centre it it is relatively positioned halfway down 
	the page then translated back upwards by half the div's height. */
#outer-frame {
	position: relative;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	border: 4px solid black;
	border-width: 4px 0;
	box-shadow: 0 0 30px black;
	background-color: #fff;
}

header, footer {
	font-family: KomikaAxisRegular, 'Comic Sans', sans-serif;
}

header {
	text-align: center;
	border-bottom: 4px solid black;
	padding: 20px 0;
}

/* The main heading had a couple of CSS3 tricks, including dynamic font-size, 
	rotation and a stroke effect. Browser compatibility, especially 
	the stroke, is limited at time of writing. */
header h1 {
	font-size: 400%;
	font-size: 5vw;
	letter-spacing: 0.05em;
	color: #c00;
	-moz-text-stroke: 1px black;
	-webkit-text-stroke: 1px black;
	text-stroke: 1px black;
	margin-bottom: 40px;
	-moz-transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	transform: rotate(-3deg);
	text-shadow: 4px 4px 0 rgba(0,0,0,1);
}

header h2 {
	font-size: 150%;
	margin-bottom: 10px;
}

footer {
	text-align: center;
	font-size: 120%;
	font-variant: small-caps;
	border-top: 4px solid black;
	padding: 10px 0;
	line-height: 1.2;
}

/* Most of the advanced layout happens within the panels div.
	The div itself has only a gradient effect to help appearances
	when the window is wider than the nav element. */
#panels {
	background: rgb(63,63,63);
	background: -moz-linear-gradient(left,  rgba(63,63,63,1) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(63,63,63,1) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(63,63,63,1)), color-stop(15%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(100%,rgba(63,63,63,1)));
	background: -webkit-linear-gradient(left,  rgba(63,63,63,1) 0%,rgba(0,0,0,1) 15%,rgba(0,0,0,1) 85%,rgba(63,63,63,1) 100%);
	background: -o-linear-gradient(left,  rgba(63,63,63,1) 0%,rgba(0,0,0,1) 15%,rgba(0,0,0,1) 85%,rgba(63,63,63,1) 100%);
	background: -ms-linear-gradient(left,  rgba(63,63,63,1) 0%,rgba(0,0,0,1) 15%,rgba(0,0,0,1) 85%,rgba(63,63,63,1) 100%);
	background: linear-gradient(to right,  rgba(63,63,63,1) 0%,rgba(0,0,0,1) 15%,rgba(0,0,0,1) 85%,rgba(63,63,63,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#3f3f3f',GradientType=1 );
}

/* The nav element contains the panels. It is the parent element
	used for positioning purposes.
	The width is capped to prevent the images blurring at 
	larger-than-native sizes. The height will be altered using JavaScript
	to suit screen-estate. */
nav {
	width: 100%;
	max-width: 1280px;
	height: 480px;
	margin: 0 auto;
	position: relative;
}

/* The panel class contains styles that apply to all panels.
	This includes the basic layout styles and a CSS3 transition
	to animate the roll-over effect. */
*.panel {
	position: absolute;
	z-index: 10;
	height: 100%;
	
	transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
}

/* Each named panel is given specific layout properties,
	including position and size as well as a tweaked 
	centre point for the scale effect.
	These styles cascade with the generic panel class to
	fully describe the layout and appearance. */
#batman {
	left: 0;
	width: 33.125%; /* 424 / 1280 * 100 */
	
	transform-origin: left center;
	-moz-transform-origin: left center;
	-webkit-transform-origin: left center;
	-o-transform-origin: left center;
	-ms-transform-origin: left center;
}

#hulk {
	margin: 0 auto;
	left: 27.345%; /* approx by eye */
	width: 44.0625%; /* 564 / 1280 * 100 */
	
	transform-origin: center center;
	-moz-transform-origin: center center;
	-webkit-transform-origin: center center;
	-o-transform-origin: center center;
	-ms-transform-origin: center center;
}

#dredd {
	right: 0;
	width: 35.46875%; /* 454 / 1280 * 100 */
	
	-moz-transform-origin: right center;
	-webkit-transform-origin: right center;
	-o-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
}


/* Hovering over a panel will increase the size.
	The size increase is handled by CSS3 transforms,
	the transition effect is already set up above. */
*.panel:hover {
	z-index: 13;
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}


/* Panel images are given the auto-scaling treatment.
	Images scale to fit their containing div. */
*.panel img {
	width: 100%;
	height: auto;
}


/* The biography pop-up panel is styled ahead of use so that when content
	is copied across it should look as intended automatically. */
#biopopup {
	position: fixed;
	z-index: 110;
	left: 0; right: 0;
	top: 15%; bottom: 15%;
	width: 60%;
	min-width: 400px;
	max-width: 1024px;
	margin: 0 auto;
	background-color: rgba(255,255,255,0.9);
	border: 2px solid black;
	padding: 20px;
	
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#biopopup.hidden {
	left: -100%;
	right: inherit;
	min-width: inherit;
}

#biopopup *.biography {
	font: 11pt/1.1 Arial, Helvetica, sans-serif;
	height: 100%;
	overflow: auto;
	padding: 0 100px;
}

*.biopic {
	float: right;
	margin-left: 10px;
}

@media (max-width: 1200px) {
	*.biopic {
		float: none;
		margin-left: 0;
	}
}


*.biopic img {
	border: 2px solid black;
}


*.biography h1 {
	font-family: KomikaAxisRegular, 'Comic Sans', sans-serif;
	font-size: 180%;
	margin: 0 0 1em;
}

*.biography p {
	text-align: justify;
}

#biopopup *.closebtn {
	position: absolute;
	right: -12px;
	top: -10px;
	background-color: #fff;
	border: 2px solid black;
	border-radius: 4px;
	box-shadow: 4px 4px 6px #000;
}

#biopopup *.closebtn:hover {
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

#biopopup *.closebtn > a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 5px 10px 12px;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 16pt;
	color: #000;
	font-family: KomikaAxisRegular, 'Comic Sans', sans-serif;
	font-weight: bold;
}

*.biography p {
	margin: 0 0 1.2em;
	font-size: 110%;
}

#shadeoverlay {
	background-color: #000;
	opacity: 0.75;
	position: fixed;
	left: 0; right: 0;
	top: 0; bottom: 0;
	z-index: 100;
	display: none;
}