@charset "utf-8";

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

}

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

}

/* TEXT */
body {
	font-family: "AsapRegular", "Arial", "Verdana";
	font-size: 1em;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
a:hover {
	color: #C8E7F7;
	text-decoration: none;
}
a:active {
	color: #C8E7F7;
	text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "AsapBold", "ArialBold", sans-serif;
}
h1 {
	font-family: "AsapBold", "ArialBold", sans-serif;
	font-size: 4em;
	text-shadow: 1px 3px 2px #1B1B1B;
	margin-top: -5px;
}
.title {
	font-family: "AsapBold", "ArialBold", sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.2em;
}
.subtitle {
	font-family: "AsapBold", "ArialBold", sans-serif;
	font-size: 0.8em;
}

/* DESIGN */
#wrapper {
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	min-height: 100%;
}
.clearer {
	clear: both;
}
.clearerleft {
	clear: left;
}

.hidden {
	display: none;
	visibility: hidden;
}
img {
	border:none;
}

/* HEADER */
#header {
	background-color: #3f72db;
	height: 100px;
	width: 94%;
	padding-top: 10px;
	padding-right: 3%;
	padding-bottom: 10px;
	padding-left: 3%;
	box-shadow: 0px 5px 4px #183C83;
	background-image: url(images/header_bg.gif);
	background-repeat: no-repeat;
	background-position: center;
	text-align: right;
}
#headerlogo {
	width: 345px;
	height: 150px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url(images/header_logo.png);
	background-repeat: no-repeat;
	background-position: right top;
}
#menu {
	margin-top: 10px;
	/* [disabled]max-width: 800px; */
	/* [disabled]font-size: 0.8em; */
}
#menu2 {
	display: block;
	visibility: visible;
	height: auto;
	margin-top: 35px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	height: auto;
	width: 290px;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #666666;
	text-align: center;
	position: relative;
	background-color: #2C6ADD;
	color: #FFFFFF;
}
.header {
	font-family: "AsapBold", "ArialBold", sans-serif;
	color: #FFFFFF;
	font-size: 1.2em;
	text-shadow: 1px 2px #000000;
}
.menu_item {
	font-weight: bold;
	color: #FFFFFF;
	background-color: #88ABEC;
	height: 20px;
	width: auto;
	text-align: center;
	vertical-align: middle;
	border-radius: 5px;
	box-shadow: 0px 3px 2px #004879;
	padding: 5px;
	float: right;
	margin-left: 5px;
	margin-bottom: 7px;
}
.menu_item a:hover {
	color: #184598;
	text-decoration: none;
}
#mobilemenu {
	display: none;
	visibility: hidden;
	height: 0px;
}


/* CONTENT */
#content {
	height: auto;
	width: 94%;
	padding-top: 25px;
	padding-right: 3%;
	padding-bottom: 100px;
	padding-left: 3%;
	margin-bottom: 100px;
	margin-top: 25px;
	background-image: url(images/checkbg.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
}
.int_wrapper {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	height: auto;
	margin-bottom: 25px;
	padding-bottom: 25px;
}
.column_full {
	width: auto;
	height: auto;
	background-color: #BAE0FC;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #097ACE;
	padding: 10px;
	left: 0px;
}
.column_full_social {
	width: auto;
	height: auto;
	background-color: #BAE0FC;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #097ACE;
	padding: 10px;
	left: 0px;
	margin-top: 25px;
}


.column_full_reviewzone {
	width: auto;
	height: auto;
	background-color: #9966CC;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #097ACE;
	padding: 10px;
	left: 0px;
}
.column_full_nextissue {
	width: auto;
	height: auto;
	background-color: #F5B8B8;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #097ACE;
	padding: 10px;
	left: 0px;
	text-align: center;
}

.column_controlzone1 {
	width: auto;
	height: auto;
	background-color: #BAE0FC;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #097ACE;
	padding: 10px;
	margin-right: 290px;
	left: 0px;
	float: left;
	font-weight: normal;
	background-image: url(images/md_classic.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}

.cz_link {
	color: #2C6ADD;
	text-decoration: none;
	font-weight: bold;
}


.column_controlzone2 {
	width: 260px;
	height: auto;
	/* [disabled]background-color: #33CCFF; */
	/* [disabled]border-radius: 10px; */
	/* [disabled]float: right; */
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	position: absolute;
	top: 0px;
	right: 10px;
}

/* TITLES */
.column_controlzone1 h1 {
	color:#0066CC;
}
.reviewzone h1 {
	color: #993366;
}
.wallpapers h1 {
	color: #BE84E6;
}
.datazone h1 {
	color: #00CCFF;
	margin-bottom: 0px;
	padding-bottom: 0px;
	margin-top: -25px;
	padding-top: 0px;
}
.nextissue h1 {
	color: #DE3B36;
	text-align: left;
}
.datazone h2 {
	/* [disabled]color: #00CCFF; */
	margin-bottom: 0px;
	padding-bottom: 0px;
}
#header h3 {
	color: #FFFFFF;
	margin-bottom: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	padding-top: 0px;
	text-shadow: 1px 2px #000000;
}
#mobilemenu h3 {
	color: #FFFFFF;
	margin-bottom: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	padding-top: 0px;
	text-shadow: 1px 2px #000000;
}



/* BACKGROUND COLOURS LIGHT */
.sonicbg {
	background-color: #93bdfd;
}
.silverbg {
	background-color: #CCCCCC;
}
.darkbg {
	background-color: #761214;
}
.blazebg {
	background-color: #B8A5EF;
}
.teknobg {
	background-color: #c3ecc3;
}
.tailsbg {
	background-color: #f4d19d;
}
.knucklesbg {
	background-color: #e8a6a6;
}
.amybg {
	background-color: #f0cae4;
}
.houseofthedeadbg {
	background-color: #ae8282;
}
.decapbg {
	background-color: #996699;
}
.sonicsworldbg {
	background-color: #b3d2e6;
}

/* BACKGROUND COLOURS DARK */
.sonicbg2 {
	background-color: #2C6ADD;
}
.silverbg2 {
	background-color: #959595;
}
.darkbg2 {
	background-color: #761214;
}
.blazebg2 {
	background-color: #BE84E6;
}
.teknobg2 {
	background-color: #00CC66;
}
.tailsbg2 {
	background-color: #FF9933;
}
.knucklesbg2 {
	background-color: #FF3333;
}
.amybg2 {
	background-color: #E77AD3;
}
.houseofthedeadbg2 {
	background-color: #ae8282;
}
.decapbg2 {
	background-color: #996699;
}
.sonicsworldbg2 {
	background-color: #00CCFF;
}

/* TEXT COLOURS */
.sonic {
	color: #2C6ADD;
}
.silver {
	color: #959595;
}
.dark {
	color: #761214;
}
.blaze {
	color: #BE84E6;
}
.tekno {
	color: #00CC66;
}
.tails {
	color: #FF9933;
}
.knuckles {
	color: #FF3333;
}
.amy {
	color: #E77AD3;
}
.houseofthedead {
	color: #ae8282;
}
.decap {
	color: #996699;
}
.sonicsworld {
	color: #00CCFF;
}

/* BUTTONS */
.button {
	height: 50px;
	width: 270px;
	margin-bottom: 10px;
	/* [disabled]margin-right: 10px; */
	background-color: #7FC4EB;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0px 4px 4px #054F85;
	padding-top: 0.1em;
	padding-bottom: 2px;
	font-size: 1em;
	line-height: 1em;
	color: #FFF;
	float: left;
	font-weight: bold;
}
.button2 {
	height: auto;
	width: auto;
	margin-bottom: 10px;
	background-color: #7FC4EB;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0px 4px 4px #054F85;
	padding-top: 0.1em;
	padding-bottom: 2px;
	/* [disabled]line-height: 1em; */
	color: #FFF;
	font-weight: bold;
	min-width: 270px;
	max-width: 700px;
	margin-right: auto;
	margin-left: auto;
	text-shadow: 0px 0px 5px #333333;
	position: relative;
	font-size: 1.2em;
}
.anniversary {
	background-color: #3399CC;
	background-image: url(images/anniversary_bg.png);
	background-repeat: no-repeat;
	background-position: left center;
}
.summary {
	background-color: #7FC4EB;
	background-image: url(images/summary_bg.png);
	background-repeat: no-repeat;
	background-position: left center;
}

.breakingnews {
	background-color: #C11313;
	background-image: url(images/breaking_news_bg.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 250px;
}
.breakingnews_int {
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-position: left top;
	height: 165px;
	width: 240px;
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: inset 0px 3px 3px #B1B1B1;
	color: #000000;
	font-weight: normal;
	font-size: 0.9em;
	padding-right: 5px;
	padding-left: 5px;
	margin-bottom: 10px;
}
.messagezone {
	background-color: #c63636;
	background-image: url(images/messagezone_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 70px;
}
.main {
	background-color: #2C6ADD;
	background-image: url(images/mainpage_bg.png);
	background-repeat: no-repeat;
	background-position: left center;
}
.backissues {
	background-color: #7FC4EB;
	background-image: url(images/backissues_bg.gif);
	background-repeat: no-repeat;
	background-position: left top;
}


.facebook {
	background-color: #3f72db;
	background-image: url(images/facebook_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.twitter {
	background-color: #2daae1;
	background-image: url(images/twitter_bg.png);
	background-repeat: no-repeat;
	background-position: left center;
}
.tumblr {
	background-color: #395976;
	background-image: url(images/tumblr_bg.png);
	background-repeat: no-repeat;
	background-position: left center;
}
.speedlines {
	background-color: #FF9900;
	background-image: url(images/speedlines_bg.png);
	background-repeat: no-repeat;
	background-position: left center;
}

.donate {
	background-color: #FF9966;
	background-repeat: no-repeat;
	background-position: left top;
	height: 100px;
}
.affiliate {
	background-color: #BC93D0;
	background-image: url(images/affiliates_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: auto;
	padding-top: 15px;
}
.copyright {
	background-color: #363b45;
	background-image: url(images/copyright_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
	color: #FFFFFF;
	font-size: 0.7em;
	text-align: center;
}

/* PAGES */
.column_full_page {
	width: auto;
	height: auto;
	background-color: #DDDDDD;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #666666;
	padding: 10px;
	left: 0px;
	text-align: center;
}
.column_full_page img {
	margin-right: auto;
	margin-left: auto;
	max-width: 100%;
	background-image: url(comics/loading.gif);
	background-repeat: no-repeat;
	background-position: center top;
}

.page {
	/* [disabled]width: auto; */
	margin-right: auto;
	margin-left: auto;
	max-width: 100%;
	background-image: url(comics/loading.gif);
	background-repeat: no-repeat;
	background-position: center top;
}
#btn-swap {
	font-weight: bold;
	color: #FFFFFF;
	/* [disabled]background-color: #3366CC; */
	padding: 5px;
	height: 20px;
	width: 100px;
	border-radius: 10px;
	box-shadow: 0px 4px 4px #054F85;
	margin-bottom: 10px;
}

#tocwrapper {
	width: 50px;
	position: absolute;
	margin-top: 0px;
	right: 10px;
	padding-top: 10px;
}
#toc {
	position: absolute;
	padding: 10px;
	width: 30px;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #666666;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	margin-top: 0px;
}
#toc.fixed {
	position:fixed;
	top:10px;
}
#toc2 {
	display: none;
	visibility: hidden;
	height: 0px;
}

.tocselect {
	background-color: #FFFFFF;
	border-radius: 10px;
	padding: 5px;
}

/* DATA ZONE */
.column_full_datazone {
	width: auto;
	height: auto;
	background-color: #B3D2E6;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #666666;
	padding: 10px;
	left: 0px;
	text-align: left;
	margin-bottom: 15px;
}
.column_full_datazone img {
	float: left;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 5px;
}
.datazone_entry {
	border-radius: 10px;
	padding: 10px;
	margin-bottom:10px;
}
.datazonebg {
	background-color: #CFE2EF;
}

/* REVIEW ZONE */
.reviewzone img {
	max-width: 100%;
}
.countdown {
	background-color: #993366;
	padding: 10px;
	margin-top: 15px;
	margin-bottom: 15px;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #5B1E3D;
	width: 75%;
	min-width: 260px;
}
.details {
	background-color: #993366;
	padding: 10px;
	margin-top: 15px;
	margin-bottom: 15px;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #5B1E3D;
	width: auto;
	min-width: 260px;
	color: #FFFFFF;
}
.countdown img {
	border-radius: 10px;
	float: left;
	margin-right: 10px;
}
.details img {
	border-radius: 10px;
	float: left;
	margin-right: 10px;
}
.raves {
	background-color: #FFFF99;
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: inset 0px 3px 3px #FABD30;
	padding-top: 35px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	background-image: url(reviewzone/raves_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.graves {
	background-color: #FF9999;
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: inset 0px 3px 3px #E60000;
	padding-top: 35px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	background-image: url(reviewzone/graves_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 15px;
}
.score {
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 15px;
	margin-bottom: 10px;
}
.graphics {
	background-color: #9966FF;
	width: 94%;
	padding-top: 10px;
	padding-right: 3%;
	padding-bottom: 10px;
	padding-left: 3%;
	height: auto;
	font-size: 1.5em;
	font-weight: bold;
	color: #FFFFFF;
	border-radius: 5px;
	margin-bottom: 5px;
	box-shadow: inset 0px 3px 3px #4000C4;
	
}
.sound {
	background-color: #0099FF;
	width: 94%;
	padding-top: 10px;
	padding-right: 3%;
	padding-bottom: 10px;
	padding-left: 3%;
	height: auto;
	font-size: 1.5em;
	font-weight: bold;
	color: #FFFFFF;
	border-radius: 5px;
	margin-bottom: 5px;
	box-shadow: inset 0px 3px 3px #004F84;
}
.playability {
	background-color: #FF9966;
	width: 94%;
	padding-top: 10px;
	padding-right: 3%;
	padding-bottom: 10px;
	padding-left: 3%;
	height: auto;
	font-size: 1.5em;
	font-weight: bold;
	color: #FFFFFF;
	border-radius: 5px;
	margin-bottom: 5px;
	box-shadow: inset 0px 3px 3px #C44000;
}
.overall {
	background-color: #F0CAE4;
	width: 94%;
	padding-top: 10px;
	padding-right: 3%;
	padding-bottom: 10px;
	padding-left: 3%;
	height: auto;
	font-size: 2em;
	font-weight: bold;
	color: #993366;
	border-radius: 5px;
	box-shadow: inset 0px 3px 3px #5F1F3F;
}






.points {
	float: left;
	margin-left: 10px;
	margin-top: 5px;
}
.points a:link {
	color: #F0CAE4;
	text-decoration: none;
}
.points a:visited {
	color: #F0CAE4;
	text-decoration: none;
}
.points a:hover {
	color: #F8E7F2;
	text-decoration: none;
}
.points a:active {
	color: #F8E7F2;
	text-decoration: none;
}



/* WALLPAPERS */
.wallpapers {
	background-color: #EAD7F7;
}
.wallpapers img {
	float:left;
}
#wallpapertoc {
	padding: 10px;
	width: auto;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #666666;
	font-size: 1.5em;
	font-weight: bold;
	text-align: left;
	height: 285px;
	line-height: 2em;
	float: left;
	margin-left: 10px;
}

/* FOOTER */
#footer {
	height: 100px;
	width: 94%;
	text-align: center;
	padding-top: 10px;
	padding-right: 3%;
	padding-bottom: 10px;
	padding-left: 3%;
	position: absolute;
	bottom: 0px;
	margin-top: 100px;
	min-height: 75px;
	box-shadow: 0px -2px 3px #969DAB;
}
.pc {
	height: 25px;
	vertical-align: middle;
}

/* MEDIUM */
@media screen and (max-width: 1024px) {
#tocwrapper {
	display: none;
	visibility: hidden;
	height: 0px;
}
#toc2 {
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	height: auto;
	width: 50%;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #666666;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	position: relative;
	display: block;
	visibility: visible;
}
}

@media screen and (max-width: 900px) {
#menu {
	font-size: 0.8em;
}
#btn-swap {
	display: none;
	visibility: hidden;
	height: 0px;
}
}

@media screen and (max-width: 900px) {
.wallpapers img {
	width:100%;
	max-width:550px;
}
#wallpapertoc {
	margin-top:10px;
	padding: 10px;
	width: 260px;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #666666;
	font-size: 1em;
	line-height: 2em;
	text-align: left;
	height: auto;
	margin-left: 0px;
}
}

@media screen and (max-width: 768px) {
@-ms-viewport { width: 768px; }
}

/* MOBILE */
@media screen and (max-width: 721px) {
@-ms-viewport { width: 320px; }

#headerlogo {
	width: 290px;
	height: 150px;
}
#toc2 {
	width: 250px;
	position: relative;
	display: block;
	visibility: visible;
}
#header h3 {
	z-index:3;
}
#menu {
	display: none;
	visibility: hidden;
	height: 0px;
}
#mobilemenu {
	display: block;
	visibility: visible;
	height: auto;
	margin-top: 35px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	height: auto;
	width: 290px;
	border-radius: 10px;
	box-shadow: 0px 5px 4px #666666;
	text-align: center;
	position: relative;
	background-color: #2C6ADD;
}
.date {
	display: none;
	visibility: hidden;
	height: 0px;
}
h1 {
	font-size:2em;
}
.column_controlzone1 {
	width: 94%;
	height: auto;
	float: left;
	padding:;
	padding-bottom:10px;
	padding-left:3%;
	padding-right:3%;
	padding-top:10px;
}

.column_controlzone2 {
	width: auto;
	float: left;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	position: relative;
	top: 0px;
	right: 0px;
	margin-top: 25px;
}
.button {
	height: auto;
	width: 100%;
}
.datazone_entry img {
	max-width:100%;
}
.summary {
	background-color: #7FC4EB;
	background-image: url(../images/summary_bg.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
}
.anniversary {
	background-position: right center;
}
}