html, body { height: 100%; }

body {
    background: #000000 url(../images/background.png) no-repeat center top;
    font: normal 11px Arial;
    color: #999999;
    padding: 0;
    margin: 0;
}

#wrapper {
    width: 1200px;
    padding: 0;
    margin: 0 auto;
}

#contentWrapper {
    position: relative;
    width: 1000px;
    padding: 0;
    margin: 0 auto;
    clear: both;
}

.menubg_active {
	display: block;
	position: absolute;
    top: -40px;
    left: -35px;
    z-index: -5;
}

#nav2_bg.menubg_active { left: -30px; }

.menubg {
	display: none;
}

.clickable { cursor: pointer; }
.clickableNew { cursor: pointer; }

.navitem {
	text-transform: uppercase;
	text-shadow: 0px 1px 2px rgba(0,0,0,.55), 1px 0px 2px rgba(0,0,0,.65);
}
.navitem:hover {
	color: #AE5300;
}

.navitem_active, .navitem_active:visited {
	color: #edae21;
	text-shadow: 0px 1px 2px rgba(237, 174, 33,.25), 1px 0px 5px rgba(237, 174, 33,.25);
}

a, a:visited {
	color: white;
	text-decoration: none;
	transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
}

/* HEADER */

#header {
    position: relative;
    width: 1200px;
    height: 480px;
    margin: 0 auto;
    padding: 0;
    clear: both;
}

#header img { border: 0; }

#navigation, #navNews, #navGame, #navMedia, #navComicbook {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 640px;
    height: 195px;
    margin: 0;
    padding: 0;
}

#menu {
    position: relative;
    list-style: none;
    padding: 35px 0 0 0;
    margin: 0;
}

#menu li {
    position: relative;
    float: left;
    padding: 0;
    margin: 0 0 0 35px;
}

#menu .hover {
    position: absolute;
    top: 0;
    left: 0;
    height: 37px;
    z-index: 10;
    display: none;
}

#menu li h1 { padding: 0; margin: 0; }


/* NEWS */

#ioty-widget
{
	display: block;
	width: 466px;
	height: 262px;
	background: #000000;
	border: 0;
	margin: 0 0 0 auto;
}

#topSection {
    position: relative;
    width: 1000px;
    height: 405px;
    padding: 0 0 70px 0;
    clear: both;
}

#topLeft {
    float: left;
    position: relative;
    width: 580px;
    height: 405px;
    margin: 0;
    padding: 0;
}

#topRight {
    float: right;
    position: relative;
    width: 360px;
    margin: 0;
    padding: 0;
}

#videoWrapper {
    position: absolute;
    left: 0;
    top: -75px;
    width: 565px;
    height: 390px;
    background: url(../images/video_background.png) no-repeat left top;
    margin: 0;
    padding: 90px 0 0 15px;
}

#videoContainer {
    position: relative;
    width: 550px;
    height: 330px;
    margin: 0;
    padding: 0;
    clear: both;
}

#videoPlayer {
    position: relative;
    width: 550px;
    height: 330px;
    font: normal 12px Arial;
    text-align: center;
}
#videoPlayer a, #videoPlayer a:hover, #videoPlayer a:active, #videoPlayer a:visited {
    color: #AE5300;
    text-decoration: none;
}

#pausedOverlay {
    position: absolute;
    top: 115px;
    left: 150px;
    background: url(../images/video_paused.png) no-repeat left top;
    width: 250px;
    height: 100px;
    z-index: 30;
}

#overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(../images/video_overlay.png) no-repeat left top;
    width: 550px;
    height: 250px;
    z-index: 10;
}

#watch {
    position: absolute;
    bottom: -103px;
    left: -84px;
    z-index: 20;
}

#watchButton { cursor: pointer; }

#thebox {
    position: relative;
    width: 360px;
    height: 166px;
    padding: 0;
    margin: 0;
}

#networks {
    position: relative;
    width: 360px;
    height: 115px;
    padding: 0;
    margin: 0;
}

#networks ul {
    width: 100%;
    list-style: none;
    padding: 40px 0 0 0;
    margin: 0;
}

#networks li {
    float: left;
    width: 72px;
    padding: 0;
    margin: 0;
    text-align: center;
}

#networks img { border: 0; }

#webshop {
    position: relative;
    width: 360px;
    height: 124px;
    background: url(../images/shop_cart.png) no-repeat left top;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

#webshop h2 {
    font: bold 16px Arial;
    padding: 46px 0 5px 125px;
    margin: 0;
}

#webshop p {
    font: normal 12px Arial;
    color: #582A0A;
    padding: 0 0 0 125px;
    margin: 0;
}

#webshop a, #webshop a:active, #webshop a:visited {
    color: #582A0A;
    text-decoration: none;
}
#webshop a:hover { color: #BBBBBB; }

#midSection {
    position: relative;
    width: 1000px;
    height: 200px;
    padding: 0 0 50px 0;
    clear: both;
}

#featuredNews {
    width: 1000px;
    height: 200px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#featured-1, #featured-2, #featured-3 {
    float: left;
    position: relative;
    width: 306px;
    height: 196px;
    border: 2px solid #4F2102;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
}
#featured-1, #featured-2 { margin: 0 35px 0 0; }

#featuredNews .headline {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 256px;

    /* Backup if browser does not support transparent backgrounds */
    background: #4F2102 url(../images/featured_arrow_up.png) no-repeat right top;

    /* For browser that supports transparent backgrounds */
    background: rgba(79, 33, 2, 0.85) url(../images/featured_arrow_up.png) no-repeat right top;

    z-index: 10;
    padding: 10px 10px 15px 10px;
}

#featuredNews .details {
    position: absolute;
    top: 198px;
    left: 0;
    width: 286px;
    height: 171px;

    /* Backup if browser does not support transparent backgrounds */
    background: #4F2102 url(../images/featured_arrow_down.png) no-repeat right top;

    /* For browser that supports transparent backgrounds */
    background: rgba(79, 33, 2, 0.85) url(../images/featured_arrow_down.png) no-repeat right top;

    z-index: 10;
    padding: 10px 10px 15px 10px;
}

#featuredNews p {
    font: normal 15px Arial;
    color: #BBBBBB;
    text-shadow: #211003 1px 1px 6px;
    margin: 0;
    padding: 10px 0 0 0;
}

#featuredNews h2, #featuredNews p.featured-details-headline {
    font: bold 16px Arial;
    color: #BBBBBB;
    text-transform: uppercase;
    text-shadow: #211003 1px 1px 6px;
    margin: 0;
    padding: 0 30px 0 0;
}

#featuredNews a, #featuredNews a:hover, #featuredNews a:active, #featuredNews a:visited {
    color: #BBBBBB;
    text-decoration: none;
}

#bottomSection {
    position: relative;
    width: 1000px;
    clear: both;
}

#bottomLeft {
    float: left;
    position: relative;
    width: 480px;
}

#bottomRight {
    float: right;
    position: relative;
    width: 480px;
}

#latestNews {
    width: 480px;
    list-style: none;
    border-top: 1px solid #4F2102;
    margin: 0;
    padding: 0;
}

#latestNews li {
    width: 480px;
    height: 49px;
    background: url(../images/list_arrow.png) no-repeat right center;
    border-bottom: 1px solid #4F2102;
    padding: 0;
}
#latestNews li:hover { background-color: #240C00; }

#latestNews li h2 {
    font: bold 15px Arial;
    text-transform: uppercase;
    margin: 0;
    padding: 8px 0 0 20px;
}

#latestNews a, #latestNews a:hover, #latestNews a:active, #latestNews a:visited {
    color: #AE5300;
    text-decoration: none;
}

#latestNews li span {
    font: normal 11px Arial;
    color: #999999;
    padding-left: 20px;
}

#twitterHead {
    position: relative;
    width: 480px;
    height: 50px;
    background: url(../images/twitter_background.png) no-repeat left top;
    border-bottom: 3px solid #4F2102;
    margin: 0;
    padding: 0;
}


/* GAME */

#gameLeft {
    float: left;
    width: 580px;
    padding: 0;
    margin: 0;
}

#gameRight {
    float: right;
    width: 320px;
    padding: 0;
    margin: 0;
}

#gameAbout {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0 0 50px 0;
}

#gameRequirements {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
}

#gameAbout p, #gameRequirements p {
    font: normal 12px Arial;
    padding: 0 0 15px 0;
    margin: 0;
}

#gameHead {
    width: 100%;
    height: 28px;
    background: #AE5300;
    padding: 0;
    margin: 0;
}

#gameHead h2 {
    font: bold 13px Arial;
    color: #000000;
    line-height: 28px;
    padding: 0 0 0 10px;
    margin: 0;
}

#gameDetails {
    width: 100%;
    padding: 0;
    margin: 0;
}

#gameDetails h3 {
    font: bold 12px Arial;
    color: #AE5300;
    padding: 15px 0 0 10px;
    margin: 0;
}

#gameDetails p {
    font: normal 13px Arial;
    padding: 0;
    margin: 0 0 0 10px;
}


/* MEDIA */

.headlineImage {
    border: 0;
    margin: 0 0 30px 0;
}

.wallpapersHover {
    position: absolute;
    top: 30px;
    left: 48px;
    width: 54px;
    height: 50px;
    background: url(../images/icon_download.png) no-repeat left top;
    padding: 0;
    margin: 0;
    z-index: 10;
    display: none;
}

#mediaTop {
    float: left;
    position: relative;
    width: 100%;
    padding: 0 0 50px 0;
    margin: 0;
}

#mediaBottom {
    float: left;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
}

#videos {
    position: relative;
    float: left;
    width: 410px;
    padding: 0;
    margin: 0;
}

#videoFront {
    position: absolute;
    top: 62px;
    left: 87px;
    width: 326px;
    height: 246px;

    /* Backup if browser does not support transparent backgrounds */
    background: rgb(0, 0, 0);

    /* For browser that supports transparent backgrounds */
    background: rgba(0, 0, 0, 0.5);

    z-index: 20;
    cursor: pointer;
}

#videoBack {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 326px;
    height: 246px;

    /* Backup if browser does not support transparent backgrounds */
    background: rgb(0, 0, 0);

    /* For browser that supports transparent backgrounds */
    background: rgba(0, 0, 0, 0.5);

    z-index: 10;
    cursor: pointer;
}

#videoFront img, #videoBack img {
    margin: 3px 0 0 3px;
    border: 2px solid #371300;
}

.playVideo {
    position: absolute;
    top: 103px;
    left: 107px;
    width: 110px;
    height: 30px;
    background: url(../images/play_video.png) no-repeat left top;
    z-index: 20;
    opacity: 0.35;
}

.videoInfo {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 316px;
    height: 70px;

    /* Backup if browser does not support transparent backgrounds */
    background: rgb(0, 0, 0);

    /* For browser that supports transparent backgrounds */
    background: rgba(0, 0, 0, 0.75);

    z-index: 10;
}

.videoInfo h2 {
    font: bold 16px Arial;
    padding: 15px 0 0 10px;
    margin: 0;
    text-transform: uppercase;
}

.videoInfo p {
    font: normal 12px Arial;
    color: #BBBBBB;
    padding: 0 0 0 10px;
    margin: 0;
}

.videoInfo a {
    color: #B35600;
    text-decoration: none;
}

#screenshots {
    float: right;
    width: 490px;
    padding: 0;
    margin: 0;
}

#screenshots ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

#screenshots ul li {
    float: left;
    position: relative;
    width: 150px;
    padding: 0;
    margin: 0 20px 20px 0;
    cursor: pointer;
}
#screenshots ul li:nth-child(3n+3) { margin: 0 0 20px 0; }

#screenshots li img { border: 2px solid #371300; }
#screenshots li:hover img { border: 2px solid #B35600; }

#avatars {
    float: left;
    width: 240px;
    padding: 0;
    margin: 0;
}

#avatars ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

#avatars ul li {
    float: left;
    position: relative;
    width: 110px;
    padding: 0;
    margin: 0 20px 20px 0;
    cursor: pointer;
}
#avatars ul li:nth-child(even) { margin: 0 0 20px 0; }

#avatars li img { border: 2px solid #371300; }
#avatars li:hover img { border: 2px solid #B35600; }

#wallpapersContainer {
    float: right;
    width: 660px;
    padding: 0;
    margin: 0;
}

#wallpapers {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

#wallpapers .clickableMenu {
    float: left;
    position: relative;
    width: 150px;
    padding: 0;
    margin: 0 20px 20px 0;
    cursor: pointer;
}
#wallpapers .clickableMenu:nth-child(4n+4) { margin: 0 0 20px 0; }

#wallpapers .clickableMenu img { border: 2px solid #371300; }
#wallpapers .clickableMenu:hover img { border: 2px solid #B35600; }

.resolutions {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 146px;
    height: 106px;

    /* Backup if browser does not support transparent backgrounds */
    background: rgb(0, 0, 0);

    /* For browser that supports transparent backgrounds */
    background: rgba(0, 0, 0, 0.75);

    z-index: 20;
    display: none;
}

.resolutions ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
}

.resolutions ul li {
    width: 100%;
    height: 22px;
    font: bold 13px Arial;
    padding: 0;
    margin: 0 0 0 0;
    text-align: center;
}

.resolutions a {
    color: #B35600;
    text-decoration: none;
}
.resolutions a:hover { color: #BBBBBB; }


/* 404 ERROR */

#error {
    width: 380px;
    background: url(../images/404.png) no-repeat left top;
    margin: 0 auto;
    padding: 0 0 0 220px;
}

#error h1, #error b { color: #AE5300; }


/* FOOTER */

#footer {
    width: 1000px;
    text-align: center;
    margin: 0 auto;
    padding: 70px 0 20px 0;
    clear: both;
}

#footer p {
    font: normal 11px Arial;
    color: #999999;
}


/*
	News Posts
*/

.post.header {
	background: rgba(174, 83, 0,.5);
	border: 1px solid rgba(174, 83, 0,.5);
	margin-bottom: 20px;
}

.post.header h1 { margin: 5px; }

.news_title {
	color: whitesmoke;
}

.post.content {
	color: rgb(200,200,200);
	font-size: 120%;
}

.post.content img,
.post.content.youtube {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* Reset for emoticons */
.post.content img.emoticon {
	width: unset;
	display: unset;
}

.post.content a,
.post.content a:active {
	color: rgb(180,20,20);
}

.post.content a:hover {
	color: rgb(255,0,0);
}

.post.content ul,
.post.content ol {
	padding-left: 1.5em;
	padding-right: 1.5em;
	margin: 0 0.1em 0 1.5em;
}

.maxwidth {
	width: 100%;
}

/*
	Align
*/

.align_left { text-align: left; }
.align_right { text-align: right; }
.align_center { text-align: center; }


.comic-link {
	position: absolute;
	top: 25px;
	right: 5px;
	z-index: 21;
}

.bb_h1
{
	font-size: 200%;
	margin-top: 25px;
	text-align: center;
	font-weight: bold;
}

.bb_h2
{
	font-size: 150%;
	margin-top: 25px;
	font-weight: bold;
}

.bb_h3
{
	font-size: 130%;
	margin-top: 25px;
	font-weight: bold;
}

.bb_link_host
{
	display: none;
}