﻿/* #region Shared */
@font-face {
  font-family: 'Nevis';
  src: url('/Fonts/nevis.eot?') format('eot'), url('/Fonts/nevis.woff') format('woff'), url('/Fonts/nevis.ttf') format('truetype');
}
@font-face {
  font-family: 'Orbitron';
  src: url('/Fonts/orbitron.eot?') format('eot'), url('/Fonts/orbitron.woff') format('woff'), url('/Fonts/orbitron.ttf') format('truetype');
}
html, html > body, html > body > form 
{
	height: 100%;
}
html
{
	background: #0D0D0D url('/images/otc_release_background.jpg') no-repeat center top;
	color: #E8E1CB;
    min-width: 640px;
}
html > body 
{
	color: #E8E1CB;
	display: block;
	font-family: 'Segoe UI', Arial, sans-serif;
	position: relative;
}
body > form > main 
{ 
	display: block;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -113px;
	text-align: center;
}
a:link, a:visited, a:active 
{
	color: #E8E1CB;
}
a:hover 
{
	color: #BA634F;
}
body > form > main  a.logo img 
{ 
	margin: 6em 27em 2em auto; 
    z-index: 100;
}
body > form > main  .push 
{ 
	height: 120px; 
}
/* #endregion */
.header_container {
	margin-left: -590px;
	left: 50%;
	position: absolute;
	top: 0;
	width: 1180px;
	z-index: 10;
}

/* #region Mobile Nav */
#nav-menu
{
	display: none;
	height: auto;
	left: 0;
	position: fixed;
	top: 0;
	transition: left 0.75s ease;
	-o-transition: left 0.75s ease;
	-moz-transition: left 0.75s ease;
	-webkit-transition: left 0.75s ease;
	z-index: 1002;
}

#nav-menu.navopen
{
	left: 140px;
	transition: left 0.75s ease;
	-o-transition: left 0.75s ease;
	-moz-transition: left 0.75s ease;
	-webkit-transition: left 0.75s ease;
}

#mobilenav
{
	background-color: #26303A;
	height: 100%;
	left: -140px;
	position: fixed;
	top: 0;
	transition: left 0.75s ease;
	-o-transition: left 0.75s ease;
	-moz-transition: left 0.75s ease;
	-webkit-transition: left 0.75s ease;
	width: 140px;
	z-index: 2000;
}
#mobilenav.navopen
{
	transition: left 0.75s ease;
	-o-transition: left 0.75s ease;
	-moz-transition: left 0.75s ease;
	-webkit-transition: left 0.75s ease;
	left: -140px;
}
#mobilenav ul {
	    color: transparent;	
        display: inline-block;
        list-style-image: none;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

#mobilenav > ul > li {
	    color: transparent;	
        display: block;
        list-style-image: none;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	#mobilenav > ul > li > a {
		background: url('/images/layout/sidenav.jpg') no-repeat;
		background-position-y: top;
		color: transparent;
        height: 100%;
		display: block;
        float: left;
		vertical-align: top;
        width: 100%;
	}

		#mobilenav > ul > li > a.home {
			background-position: left top;
			height: 45px;
			width: 140px;
		}

			#mobilenav > ul > li > a.home:hover,
			#mobilenav > ul > li > a.home.active {
				background-position: -140px top;
			}

		#mobilenav > ul > li > a.media {
			background-position: left -45px;
			height: 44px;
			width: 140px;
		}

			#mobilenav > ul > li > a.media:hover,
			#mobilenav > ul > li > a.media.active {
				background-position: -140px -45px;
			}

		#mobilenav > ul > li > a.game {
			background-position: left -89px;
			height: 44px;
			width: 140px;
		}

			#mobilenav > ul > li > a.game:hover,
			#mobilenav > ul > li > a.game.active {
				background-position: -140px -89px;
			}

		#mobilenav > ul > li > a.journals {
			background-position: left -133px;
			height: 44px;
			width: 140px;
		}

			#mobilenav > ul > li > a.journals:hover,
			#mobilenav > ul > li > a.journals.active {
				background-position: -140px -133px;
			}

		#mobilenav > ul > li > a.forums {
			background-position: left -177px;
			height: 44px;
			width: 140px;
		}

			#mobilenav > ul > li > a.forums:hover,
			#mobilenav > ul > li > a.forums.active {
				background-position: -140px -177px;
			}

        #mobilenav > ul > li > a.marsdaq {
			background-position: left -221px;
			height: 68px;
			width: 140px;
		}

			#mobilenav > ul > li > a.marsdaq:hover,
			#mobilenav > ul > li > a.marsdaq.active {
				background-position: -140px -221px;
			}

		#mobilenav > ul > li > a.store {
			background-position: left -289px;
			height: 44px;
			width: 140px;
		}

			#mobilenav > ul > li > a.store:hover,
			#mobilenav > ul > li > a.store.active {
				background-position: -140px -289px;
			}
/* #endregion Mobile Nav */

/* Containers */
body > form > main.Site-content
{
	left: 0;
	position: relative;
	transition: left 0.75s ease;
	-o-transition: left 0.75s ease;
	-moz-transition: left 0.75s ease;
	-webkit-transition: left 0.75s ease;
}
body > form > main.Site-content.navopen
{
	transition: left 0.75s ease;
	-o-transition: left 0.75s ease;
	-moz-transition: left 0.75s ease;
	-webkit-transition: left 0.75s ease;
	left: 0px;
}
#PageContent
{
    margin: 0 auto;
    max-width: 1152px;
    overflow: hidden;
	padding-top: 3em;
}
/* End Containers */

/* #region Navigation */
nav.navigationContainer {
	display: block;
    min-width: 851px;
	margin: 0 auto 2em;
    z-index: 200;
}

	nav.navigationContainer span {
		display: none;
	}

	nav.navigationContainer ul {
		display: inline-block;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	nav.navigationContainer > ul > li {
		background: url('/images/layout/nav_release.png') no-repeat;
		background-position-y: top;
		color: #fff;
		display: inline-block;
        float: left;
		vertical-align: top;
	}

		nav.navigationContainer > ul > li > a {
			display: inline-block;
			height: 100%;
			width: 100%;
		}

		nav.navigationContainer > ul > li.home {
			background-position: left top;
			height: 67px;
			width: 135px;
		}

			nav.navigationContainer > ul > li.home:hover,
			nav.navigationContainer > ul > li.home.active {
				background-position: left -67px;
			}

		nav.navigationContainer > ul > li.media {
			background-position: -135px top;
			height: 67px;
			width: 98px;
		}

			nav.navigationContainer > ul > li.media:hover,
			nav.navigationContainer > ul > li.media.active {
				background-position: -135px -67px;
			}

		nav.navigationContainer > ul > li.game {
			background-position: -233px top;
			height: 67px;
			width: 90px;
		}

			nav.navigationContainer > ul > li.game:hover,
			nav.navigationContainer > ul > li.game.active {
				background-position: -233px -67px;
			}

		nav.navigationContainer > ul > li.journals {
			background-position: -323px top;
			height: 67px;
			width: 137px;
		}

			nav.navigationContainer > ul > li.journals:hover,
			nav.navigationContainer > ul > li.journals.active {
				background-position: -323px -67px;
			}

		nav.navigationContainer > ul > li.forums {
			background-position: -460px top;
			height: 67px;
			width: 115px;
		}

			nav.navigationContainer > ul > li.forums:hover,
			nav.navigationContainer > ul > li.forums.active {
				background-position: -460px -67px;
			}

		nav.navigationContainer > ul > li.marsdaq {
			background-position: -575px top;
			height: 67px;
			width: 189px;
		}

			nav.navigationContainer > ul > li.marsdaq:hover,
			nav.navigationContainer > ul > li.marsdaq.active {
				background-position: -575px -67px;
			}
            
        nav.navigationContainer > ul > li.store {
			background-position: -764px top;
			height: 67px;
			width: 191px;
		}

			nav.navigationContainer > ul > li.store:hover,
			nav.navigationContainer > ul > li.store.active {
				background-position: -764px -67px;
			}
/* #endregion */

main > div.box.full {
    display: -webkit-flex;
	display: flex;
    -webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	justify-content: space-between;
    -webkit-justify-content: space-between; /* Safari 6.1+ */
	align-items: flex-start;
    -webkit-align-items: flex-start; /* Safari 7.0+ */
	margin: 0 auto;
	text-align: left;
	max-width: 1180px;
}

/* #region Common borders */

#middle {
	behavior: url(Scripts/PIE-1.0/PIE.htc);
	border-style: solid;
	border-width: 85px;
	-moz-border-image: url('/images/otc_frame.png') 85 85 84 84 repeat;
	-webkit-border-image: url('/images/otc_frame.png') 85 85 84 84 repeat;
	-o-border-image: url('/images/otc_frame.png') 85 85 84 84 repeat;
	border-image: url('/images/otc_frame.png') 85 85 84 84 repeat;
	box-sizing: border-box;
}

/* #endregion */

/* Boxes */
main > div.box.full
{
	margin-top: -25px;
    min-width: 560px;
    position: relative;
	width: 100%;
}
#middle
{
    width: 100%;
	z-index: 100;
}
main > div.box.full > .bg
{
	background: url('/images/otc_bg.png') repeat scroll center top;
	bottom: 85px;
	left: 85px;
	position: absolute;
	right: 85px;
	top: 85px;
	z-index: 11;
}
/* End Boxes */


/* #region Popups */

#loginpopup 
{
	color: #000000;
	background-color: #a9a9a7;
	padding: 20px; 
}
#loginpopup .logintable 
{ 
	font-size: 12pt; 
}
#loginpopup .logintable tr td.desc 
{ 
	padding-right: 10px; 
}
#loginpopup .logintable tr.footer td 
{ 
	padding-top: 10px; 
}
#loginpopup a 
{ 
	color: #000000;
	font-size: 10pt;
	text-decoration: none;
}
#loginpopup a:hover
{
	text-decoration: underline;
}
#loginpopup input.inputtext 
{
	width: 150px;
}

#registerpopup 
{
	color: #000000;
	background-color: #a9a9a7;
	padding: 20px;
	width: 312px;
}
#registerpopup a 
{ 
	color: #000000;
	font-size: 10pt;
	text-decoration: none;
}
#registerpopup a:hover
{ 
	text-decoration: underline;
}
#registerpopup p 
{
	margin-bottom: 15px;
}
#registerpopup .registertable tr td.desc 
{ 
	padding-right: 10px; 
}
#registerpopup input.inputtext 
{
	width: 150px;
}
#registererror 
{
	color: #c00;
	min-height: 75px;
}
/* #endregion */

@media (max-width: 975px) {
    #mobilenav.navopen {
        left: -140px;
        transition: left 0.75s ease;
        -o-transition: left 0.75s ease;
        -moz-transition: left 0.75s ease;
        -webkit-transition: left 0.75s ease;
    }

    body > form > div.Site-content.navopen {
        left: 0;
        transition: left 0.75s ease;
        -o-transition: left 0.75s ease;
        -moz-transition: left 0.75s ease;
        -webkit-transition: left 0.75s ease;
    }

    #nav-menu.navopen {
        left: 0;
        transition: left 0.75s ease;
        -o-transition: left 0.75s ease;
        -moz-transition: left 0.75s ease;
        -webkit-transition: left 0.75s ease;
    }

    body > form > div.Site-content > div.content {
        padding-top: 2.5em;
    }
}

    @media (max-width: 975px) {
        main a.logo img {
            margin: 6em 12em 4em auto;
            min-width: 375px;
            width: 50%;
        }
        
        #mobilenav.navopen {
            transition: left 0.75s ease;
            -o-transition: left 0.75s ease;
            -moz-transition: left 0.75s ease;
            -webkit-transition: left 0.75s ease;
            left: 0px;
        }

        body > form > div.Site-content.navopen {
            transition: left 0.75s ease;
            -o-transition: left 0.75s ease;
            -moz-transition: left 0.75s ease;
            -webkit-transition: left 0.75s ease;
            left: 140px;
        }

        #nav-menu.navopen {
            left: 140px;
            transition: left 0.75s ease;
            -o-transition: left 0.75s ease;
            -moz-transition: left 0.75s ease;
            -webkit-transition: left 0.75s ease;
        }

        a#nav-menu
	    {
		    display: inline-block;
	    }

        .Site-content > header {
            display: none;
        }
    }

/* #region Footer */
footer {
    border-top: 1px solid #eee1cc;
    margin: 0 auto;
    margin-top: 20px;
	position: relative;
    text-align:center;
	width: 100%;
}

footer div {
	position: relative;
	margin: 20px auto;
    vertical-align: middle;
	width: 100%;
}

	footer div img {
		display: inline-block;
		margin-right: 15px;
		vertical-align: middle;
	}

	footer div p {
        color: #c7c6ba;
        display: inline-block;
        font-size: 0.625em;
        line-height: 1.5em;
        margin: auto 2em auto 1em;
        max-width: 287px;
        text-align: left;
        vertical-align: middle;
        width: 45%;
	}

		footer div p span.separator {
			display: inline-block;
			margin: 0 8px;
		}

		footer div p a,
        footer div p a:link {
			color: #88dbda;
			display: inline-block;
			line-height: 3em;
			text-decoration: none;
		}

			footer div p a:hover {
				text-decoration: underline;
			}

/* #endregion */