/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    min-height: 100%;
}
body {
	
	/* background-image:url("Images/StarBackground.jpg");
	background-repeat:repeat;*/
	background:#091018;
	min-width:950px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

a, a:visited, a:hover, a:active {
	
	color:black;
	text-decoration:none;
}

a.MainLink:hover, a.MainLinkMiddle:hover {
    text-decoration: underline;
    cursor: pointer;
}

a.MainLink, a.MainLink:visited, a.MainLinkMiddle, a.MainLinkMiddle:visited {
	
	color:azure;
	text-decoration: underline;
    text-shadow: 1px 1px #8b000050;
	text-decoration:underline;
}
a.MainLinkMiddle, a.MainLinkMiddle:visited  {
	
	color:#131313;
}
a.MainLink:hover, a.MainLinkMiddle:hover {
	
	color:black;
	text-shadow:1px 1px firebrick;
	text-decoration:none;
}


/* ///////////////////// */
/* // Start of Header // */
/* ///////////////////// */
#HeaderArea {
	
    height: 72px;
    position: fixed;
    width: 100%;
	min-width:950px;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #091018; 
}
#HeaderArea .LogoImg {
	
    float: left;
    margin-left: 10px;
    margin-right: 80px;
	
}
#HeaderLogoImg {
	
	width:225px;
	height:75px;
}

header {

	height:72px;
}

header a, header a:visited {
	
	color:white;
}

header a:hover, header a:active  {
	
	color:#ccc;
	cursor:pointer;
}

header nav ul li {
	
	float:left;
	width:100px;
	height:40px;
	margin-top:40px;
	text-transform:uppercase;
	text-align:center;
	font-family:Source Sans Pro,sans-serif;
	font-size:0.75rem;
}

#header-right {
	
	float:right;
	width:100px;
}

#header-right a {
	
	float:left;
	width:100px;
	height:40px;
	margin-top:40px;
	text-transform:uppercase;
	text-align:center;
	font-family:Source Sans Pro,sans-serif;
	font-size:0.75rem;
}

.hero {
    position: relative;
    text-align: center;
    color: white;
    background-image: url('Images/HeroImage.webp'); /* Your background image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh; /* Adjust the height as needed */
}

.hero img.hero-image {
    display: none; /* Hide the img tag as background is set in .hero */
}

.hero .hero-content {
	
    /*text-shadow: 1px 1px #cdb07f;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    min-width: 950px;
}

.hero .hero-content .TitleImage {
	
	height:125px;
	font-size:6rem;
	margin-left:10px;
}
.TitleImage {
	
	clear:left;
	float:left;
	text-shadow:1px 1px black;
}
.TitleCopyright {
	
    float: left;
    padding-top: 1rem;
    padding-left: 0.375rem;
    font-size: 1rem;
}

.hero h1 {
    font-size: 2.5em;
    margin-bottom: 0.5em;
}

.hero p {
	
	clear:left;
	color: white;
    text-shadow: 1px 1px #101010;
    font-size: 1.5em;
    height: 35px;
    padding: 5px;
    margin-bottom: 40px;
}

.hero-buttons-container {
	
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;	
}

.hero a.hero-button {
	
	margin:2px;
    background-color: #FFF;
	color:#101010;
	border:1px solid #FFF;
    display: flex;
	flex-direction: row;
	justify-content: center;
    align-items: center;
	border-radius:2px;
	font-family:Source Sans Pro,sans-serif;
	font-size:1rem;
	font-weight:500;
	gap:0.5rem;
	justify-content:center;
	letter spacing:1px;
    line-height: 1;
    min-height: 3.5rem;
    width:225px;
    padding: 0.5rem 1.5rem;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s, border-color .2s, color .2s;
}

.hero a.hero-button:hover {
	
    background-color: #cdb07f33;
	color:#FFF;
	text-shadow: 1px 1px #cdb07f;
	cursor:pointer;
}
.hero a.hero-button:hover svg {
    fill: #FFF;
}


#WatchTrailer {
    display: block;              
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
    transform-origin: center;
	float:left;
	height: 152px;
	border-radius: 18px;
    border: 2px solid #FFFFFF99;
	margin-top:1px;
	opacity:0.825;
}
#WatchTrailer:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
    filter: brightness(1.08) contrast(1.05);
    cursor: pointer;
	opacity:1;
	border: 2px solid white;
}

#ComingSoonLink #WishList {
    display: block;              
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
	margin-left:10px;
    transform-origin: center;
	float:left;
    border: 2px solid #FFFFFF99;
	border-radius: 18px;
	height: 145px;
	opacity:0.825;
}
#ComingSoonLink:hover #WishList {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
    filter: brightness(1.08) contrast(1.05);
    cursor: pointer;
	opacity:1;
	border: 2px solid white;
}

#DiscordBWLink #DiscordBW {
    display: block;              
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
	margin-left:12px;
    transform-origin: center;
	float:left;
	height: 150px;
	opacity: 0.825;
	border-radius: 18px;
	border: 2px solid #FFFFFF99;	
}
#DiscordBWLink:hover #DiscordBW {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
    filter: brightness(1.08) contrast(1.05);
    cursor: pointer;
	opacity:1;
	border: 2px solid white;
}



/* ///////////////////////// */
/* // Start of Email Form // */
/* ///////////////////////// */
.header .header-form {
    position: absolute;
    top: calc(var(--vh)* 100);
    left: 0;
    width: 100%;
    transform: translate(0, -100%) translate(0, calc(0vh +(min(max(0,(var(--percent) - 0) /(1 - 0)), 1))*(var(--header-height) - 0vh)));
    padding-top: 100px;
    font-family: "Philosopher", "Times New Roman", serif;
    background: linear-gradient(0.18deg, rgba(28, 24, 25, 0.8), rgba(28, 24, 25, 0) 100%);
    opacity: calc(1 +(1 -((1 - min(max(0,(var(--percent) - 0.75) /(0.85 - 0.75)), 1))*(1 - min(max(0,(var(--percent) - 0.75) /(0.85 - 0.75)), 1))*(1 - min(max(0,(var(--percent) - 0.75) /(0.85 - 0.75)), 1))))*(0 - 1));
}	

.header .header-form .top-img {
    width: 100%;
}

.top-img {
	
	width:100%;
}
.top-img img {
	
	width:100%;
}

.header .header-form .bg {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.header-form {
    padding: 36px 0;
    width: 100%;
    position: absolute;
    z-index: 2;
    height: 180px;
    bottom: 0px;
}

.JoinText {
	
    display: block;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color: #ffe1a2;
}

.form-content {
	padding: 36px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: url(Images/header-form-bg.png);
    background-color: #11111199;
	padding-top: 25px;
	border-bottom: 1px solid #c1aa92;
}


div .emailarea {
	
	background: rgba(33, 35, 41, .5);
    border: 1px solid #948667;
    border-radius: 9px;
    text-align: center;
    margin: 0 40px;
    height: 45px;
    left: 45px;
    color: #948667;
}
.email-input {
	
    background: rgba(33, 35, 41, .5);
    border: 1px solid #fdd37c;
    border-radius: 9px;
    text-align: center;
    margin: 0 40px;
    height: 45px;
    left: 45px;
    color: #948667;
    width: 30%;
}
.email-button {
	
	margin-left:20px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    color: currentColor;
    border: 2px solid #948667;
    border-radius: 9px;
    line-height: 1;
    min-width: 200px;
    background: rgba(33, 35, 41, .6);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 3px;
    transition: opacity .3s, transform .3s;
	margin-top: 8px;
}
.email-button:hover {
	
	color:#c4b697;
	border:2px solid #c4b697;
	background: rgba(33, 35, 41, .8);
}
.email-text {
	
	width: 100%;
    height: 34px;
    border: 1px solid #948667;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #2C3038, #17191F);
    position: relative;
	color:#ffe1a2;
}


/* /////////////////////////////// */
/* // Start of Game Description // */
/* /////////////////////////////// */
.game-description {
	
	color:white;
}
.container, .container--nested {
	
	    display: grid;
    gap: 16px;
    grid-gap: 16px;
    grid-gap: var(--gap);
    gap: var(--gap);
    grid-template-columns: repeat(4, 1fr);
    grid-template-columns: repeat(var(--num-columns), 1fr);
    padding: 0 16px;
    padding: 0 var(--grid-padding);
}

.TextModule_content__ZG4S2 {
    display: flex;
    flex-flow: column;
    grid-column: 1 / -1;
    padding: 3rem 0;
    z-index: 0;
}

.TextModule_center__c_GZ4 .TextModule_content__ZG4S2 {
    align-items: center;
    text-align: center;
	padding: 4.5rem 0;
	
}

.TextModule_title___BDmB {
    margin: 0 0 1rem;
}
.title, .title-s {
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.title {
    font-size: 1rem;
    letter-spacing: .0625rem;
	color: #49cd9b;
}

.heading-l {
    font-size: 2.5rem;
    line-height: 1.1;
	font-weight:700;
}

.descriptionbody {
	
	width: 800px;
    padding-top: 35px;
    padding-bottom: 10px;
	font-family: sans-serif;
	font-size: 14px;
	line-height:24px;
	box-sizing:border-box;
}

.watch-gameplay-wrapper {
    flex-direction: row;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
}

a.watch-gameplay-button {
    color: white;
}
a.watch-gameplay-button:hover {
    color: black;
}
.watch-gameplay-button {
	--button-theme-color:#49cd9b;
	--button-theme-color-dimmed:rgba(73, 205, 155, 0.5);
    background-color: #101010;
    background-color: var(--button-theme-color-dimmed, #101010);
    border-color: var(--button-theme-color, #101010);
    color: #fff;
    align-items: center;
    border: 1px solid #49cd9b;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    font-family: Source Sans Pro, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: 1px;
    line-height: 1;
    min-height: 3.5rem;
    min-width: 8rem;
    padding: 0.5rem 1.5rem;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s, border-color .2s, color .2s;
}
.watch-gameplay-button-arrow {
	fill:#fff;
    transition: background-color .2s, border-color .2s, color .2s;
}

.watch-gameplay-button:hover {
	
	background:#49cd9b;
}
.watch-gameplay-button:hover svg {
    fill: #000;
}

.paired-description-area {
    display: flex;
    width: 100%;
    height: 27.375vw;
	min-height:300px;
}

.paired-description-screenshot-area,
.paired-description-text-background {
    flex: 1;
    position: relative;
	background:#20252c;
}

.paired-description-screenshot-image,
.paired-description-text-image {
    width: 100%;
    height: 100%;
    object-fit: fill;
    position: absolute;
    top: 0;
    left: 0;
}
.screenshotimg {
	
	object-fit:cover;
}

.paired-description-text-area, .paired-description-text-area-right {
    position: relative;
	float:right;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    width: 35vw;
    min-width: 325px;
    max-width: 675px;
	padding-right:3vw;
}
.paired-description-text-area-right {
	
	float:left;
    min-width: 400px;
	padding-left:3vw;
}

.paired-description-text-title {
	
	font-size: 2.5rem;
    line-height: 1.1;
	text-transform:uppercase;
}

.paired-description-text-title,
.paired-description-text-body {
    color: white; /* Adjust the text color as needed */
    text-align: left; /* Center the text */
}

.paired-description-text-body {

	padding-top:25px;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 24px;
    box-sizing: border-box;
}


/* //////////////////////////// */
/* // Start of Media Section // */
/* //////////////////////////// */
.media {
	
	text-align:center;
	padding-top:8rem;
	margin-bottom:8rem;
}
.media .heading-l  {
	
	color:white;
}

#TrailorCarouselArea {
	
	margin-top:2.875rem;
	text-align:center;
}

#TrailorCarousel {
	
	width:1074px;
	height:604px;
	background:green;
}

#gamefoundintroduction {
	
	margin-top:5rem;
}
#GameFoundArea {
	
	width:75%;
	min-width:950px;
	max-width:1294px;
	margin-left: calc(50% - 648px);
}
#GameFoundLeft {
	
	clear:left;
	float:left;
	width:30%;
	height:auto;
	margin-left: calc(50% - 648px);
	margin-top: 2rem;
	border:1px solid #5c5c5c;
	border-right:none;
	margin-bottom: 3rem;
}
#GameFoundDetails {
	
	float:left;
	width:40%;
	height:400px;
	background:white;
	margin-top: 2rem;
	border-top:1px solid white;
	border-bottom:1px solid #5c5c5c;
	margin-bottom: 3rem;
}
#GameFoundMillion {
	
	width: 65%;
    height: auto;
	background-size:100% 100%;
	margin-top: 0.875rem;
}
#GameFoundBanner {
	width: 100%;
    height: auto;
    margin-top: 1.5rem;
	background-size:100% 100%;
}
#GameFoundButton {
	
	width: 70%;
    height: auto;
	margin-top:1rem;
	border:2px inset #5c5c5c;
	opacity:0.75;
	border-radius:10px;
}
#GameFoundButton:hover {
	border:2px outset #00e961;
	opacity:1;
}
#GameFoundRight {
	
	float:left;
	width:30%;
	height:auto;
	margin-top: 2rem;
	border:1px solid #5c5c5c;
	border-left:none;
	margin-bottom: 3rem;
}

#GameFoundContainer{
	
	display:none;
	width:1295px;
	height:408px;
	background:url("Images/GameOfPlanetsLaunch.png");
	background-size:100% 100%;
	margin-top:2.25rem;
	margin-left:calc(50% - 647px);
}


/* ///////////////////////////////// */
/* // Start of Newsletter Section // */
/* ///////////////////////////////// */
.hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

.newsletter {
	
	clear:left;
	background: url(Images/GalaxyBackground_ReducedTransparent.webp);
    background-size: cover;
	width:100%;
	color:white;
	padding-top:5rem;
	padding-bottom:4rem;
    text-align:center;
}
#NewsletterPopup, #TrailerVideoPopup {
	
	display:none;
	position:fixed;
	top: calc(50% - 197px);
    width: 630px;
    height: 394px;
	z-index:1003;
	text-align:center;
	color:white;
}
#TrailerVideoPopup {
	
	position: fixed;
    padding-top: calc(50% - 1260px);
    width: 1260px;
    height: 100%;
    z-index: 1003;
    text-align: center;
    color: white;
    top: 0;
    background: #111;
	display: none;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.TrailerVideoCloseButton {
	
	position:fixed;
	right:1rem;
	top:1rem;
	color:white;
	font-size:1.25rem;
}
.TrailerVideoCloseButton:hover {
	
	cursor:pointer;
}

.NewsletterContainer, .BaseTrailerContainer {
	
	width: 630px;
    margin-left: calc(50% - 315px);
}
.BaseTrailerContainer {
	
    margin-left: calc(50% - 630px);
}
.NewsletterArea {
	
    border-radius: 4px;
    padding: 2rem;
	background-color: hsla(0, 0%, 6%, .875);
    border: 1px solid #5c5c5c;
}

.newsletter .descriptionbody  {
	
	margin-left:calc(50% - 400px);
	margin-bottom:2.5rem;
}

.sign-up-now {
	
	font-weight: 700;
	font-size: 1.5rem;
    line-height: 1.16667;
	margin: 0 0 1rem;
	color: var(--color-white);
}
.SignUpArea {
	
	background-color: transparent !important;
    padding: 0 !important;
    display: block;
	color: var(--color-white);
}
.SignUpFormArea {
	
	text-align: left;
	margin-top:0.5rem;
	margin-bottom: 1.75rem;
    max-width: 370px;
	margin-left: auto;
    margin-right: auto;
}
.SignUpEmailTitle {
	
	font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
	font-size: .75rem;
    letter-spacing: .05rem;
	display: block;
    margin-bottom: .5rem;
}
#SignUpEmailInput, #SignUpEmailPopUp {
	
	border: 1px solid;
    display: block;
    font-family: Source Sans Pro, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: .4375rem 1rem;
    width: 100%;
	background-color: var(--color-pdx-black);
    border-color: var(--color-disabled-dark);
    color: var(--color-white);
}
.SubscriptionPreferencesArea {
	
	margin-bottom: 2.5rem;
    margin-top: 1.25rem;
	align-items: center;
    display: flex;
    flex-direction: column;
}
.SubscriptionCheckboxArea {
	
	padding-top: 0.75rem;
	display: grid;
    grid-gap: .5rem;
    gap: .5rem;
    justify-content: center;
    justify-items: start;
	grid-template-columns: repeat(2, 1fr);
}
.checkbox {
	
	margin-top: .5rem;
}
.Checkbox_label__Sw98f {
	
	cursor: pointer;
    display: inline-block;
    line-height: 1.5;
    padding-left: 0.5rem;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.SubscribingMessage {
	
	margin: 1.5rem 0;
	font-size: .875rem;
    line-height: 1.43;
	color: var(--color-white);
}
.SubmitButtonArea {
	
	text-align: center;
}
.SubscribeButton {
	
    padding: 1rem;
    border-radius: 1.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: bold;
    background: #5abe41;
    border-color: #5abe41;
}

.SubscribeButton:hover {
	
	background:#77db8b;
	border-color:#77db8b;
	cursor:pointer;
}

footer {
	
	background:#101010;
	height:280px;
	padding-top:16px;
	padding-bottom:48px;
	color:white;
	font-size:0.5rem;
}
.FooterContainer {
	
	width:1250px;
	margin-left:calc(50% - 625px);
	padding-top:1.875rem;
}
.LogoContainer {
	
	clear:left;
	float:left;
	width:1000px;
	height:90px;
}
.FooterLogo {
	
	width:120px;
	height:auto;
	margin-left:-5px;
}
.SocialsContainer {
	
	float:left;
	width:250px;
	padding-left:10px;
	height:90px;
}
.SocialIcon {
	
	float:left;
	width:40px;
	margin-left:10px;
	margin-right:10px;
	height:40px;
	background:white;
	opacity:0.75;
}
.SocialIcon:hover {
	
	cursor:pointer;
	opacity:1;
}
#SteamIcon {
	
	background:url('Images/SteamLogo.png');
	background-size:100% 100%;
}
#DiscordIcon {
	
	background:url('Images/Discord.png');
	background-size:100% 100%;
}
#LinkedInIcon {
	
	background:url('Images/LinkedIn_icon.png');
	background-size:100% 100%;
}
#IGSIcon {
	
	background:url('Images/IGSIcon.png');
	background-size:100% 100%;
}

.FooterMenuArea {
	
	clear:left;
	width:100%;
	height:180px;
	font-size: 0.675rem;
    letter-spacing: 2px;
}
.FooterMenuItem a, .FooterMenuItem a:visited, .FooterLegalItem a, .FooterLegalItem a:visited {
    color: #ccc;
    text-decoration: none;
}

.FooterMenuItem a:hover, .FooterLegalItem a:hover {
    color: white;
}
.FooterMenuItem {
	
	text-transform:uppercase;
	color:#ccc;
	height:35px;
	width: fit-content;
}
#FooterMenuTitle, #FooterMenuTitle a, #FooterMenuTitle a:visited {
	
	color:white;
	height:35px;
}
.FooterMenuItem:hover{
	
	cursor:pointer;
	color:white;
}
.PolicyFooter {
	
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #898051;
    height: 3rem;
}
.FooterCopyright {
	
	clear:left;
	float:left;
	color:#e8e7ce;
	height:1rem;
	font-size: 0.875rem;
}
.FooterLegalsArea {
	
    text-align: right;
    height: 1rem;
    font-size: 0.875rem;
    margin-left: 30px;
	float:right;
}
#FooterLegalItemLeft {
	
	padding-right:10px;
	border-right:1px solid white;
}
#FooterLegalItemRight {
	
	padding-left:12px;
	border-left:1px solid white;
}
.FooterLegalItem {
	
	float:left;
}
.FooterLegalItem:hover {
	
	cursor:pointer;
	color:#ccc;
}


/* ////////////////////////// */
/* // Start of Player Area // */
/* ////////////////////////// */
#PlayerBigArea, #OtherServersArea {
	
	padding-left:1rem;
	margin-top:1.5rem;
	width: 95%;
    float: left; 
    height: 375px; 
	background:linear-gradient(90deg, gold, #FFDD7050);
	border:1px solid black;
	clear:left;
	float:left;
	border-radius:2rem;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
	display:none;
}
#OtherServersArea {
	
	width:100%;
	margin-right:0px;
	margin-top:10px;
	border-radius:2rem;
	border-top-left-radius:0px;
	border-top-right-radius:0px;
}
#PlayerServersTitle, #OtherServersTitle {
	
	display:none;
    font-size: 1.75rem;
    text-align: left;
    margin-left: 1rem;
    margin-top: 20px;
    text-decoration: underline;
    height: 4.5rem;
}

#PlayerServersDisplayArea, #OtherServersDisplayArea, #BetaNotice {
	
	width:100%;
	text-align:center;
}
#BetaNoticeSign {
	
        width: 85%;
        margin-left: 7.5%;
        background: #FFFFFFCC;
        padding: 1rem;
        padding-top: 1.5rem;
        line-height: 1.25rem;
        font-size: 1.25rem;
        letter-spacing: 0.025rem;
        color: black;
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
}

#Leaderboard {
	
	margin-top:1.5rem;
	width: 22.5%;
    float: left; 
    height: 600px; 
	background:linear-gradient(90deg, gold, #FFDD7050);
	border:1px solid black;
	float:left;
	border-top-right-radius:2rem;
	border-bottom-right-radius:5px;
	overflow-y:scroll;
	display:none;
}
#LeaderboardTitle {
	
    font-size: 1.75rem;
    text-align: center;
    margin-top: 20px;
    text-decoration: underline;
    height: 3.5rem;
}
#LeaderboardArea {
	
	overflow:hidden;
}
.LeaderBoardMember {
	
	display:none;
    clear: left;
    width: calc(96% - 2px);
    margin-left: 2.5%;
    padding-top: 7px;
    padding-left: 0%;
    padding-right: 0%;
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 5px;
    height: calc(7.5rem + 5px);
    background: gold;
}
.LeaderBoardRank {
	
	font-weight: bold;
    font-size: 2rem;
    width: 17.5%;
    overflow: hidden;
    clear: left;
    float: left;
	display:none;

}
.LeaderBoardFlag {
	
    float: left;
    width: 120px;
    height: 72px;
    margin-left: calc(50% - 60px);
	margin-top:5px;
}
.LeaderBoardName {
	
    float: left;
    font-weight: bold;
    font-size: 1.125rem;
    width: 100%;
    text-align: center;
    height: 2.5rem;
    padding-top: 0.5rem;
}


/* //////////////////////// */
/* // Start of Index.CSS // */
/* //////////////////////// */
#QuickButtonsArea {
	
	float:right;
	width:275px;
	display:none;
}
#LoginRegisterAreaFixed, #PlayerQuickAreaFixed {
	
	margin-top:1rem;
}


#LoginRegisterArea, #PlayerQuickArea {
	position: absolute;
    right: 4rem;
    top: 4rem;
}

#TopLoginButton, #TopRegisterButton, #TopLogOutButton {
	float:left;
	width: 120px;
    height: 40px;
    padding: 5px;
    font-size: 1.25rem;
    text-align: center;
    font-weight: bold;
    border: 2px solid gold;
    background: #333;
    color: #eee;
}

#TopRegisterButton, #TopLogOutButton {
    margin-left: 10px;
}
#TopLogOutButton {
	margin-left:125px;
}

#TopLoginButton:hover, #TopRegisterButton:hover, #TopLogOutButton:hover {
	
	cursor:pointer;
	background:gold;
	border:2px solid #333;
	color:#111;
} 

#AutoCentreContainer {
    clear: left;
    max-width: 2000px; /* Maximum width for larger screens */
	min-width:1235px;
    width: 90%; /* Width relative to the viewport on smaller screens */
    margin: 2.5rem auto 0; /* Top margin of 50px and horizontally centered */
    height: auto;
	min-height:1950px;
}

#GameOfPlanetsTitleContainer {
	
	width: 100%;
    background: white;
    height: 240px;
    padding-top: 15px;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    overflow: hidden;
}
#GameOfPlanetsTitle {

	float:left;
    height: 205px;
    width: 616px;
    margin-left: calc(50% - 308px);
}

#ScreenshotsBannerArea {
	display:none;
    background: #006600;
    width: 100%;
    height: 250px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    overflow: hidden;
}
#GalaxyBackgroundBanner {
	
	width:100%;
	height:250px;
}

#scrolling-container {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
#scrolling-container img {
    flex: 0 0 auto;
    animation: scroll 60s linear infinite;
	image-rendering: pixelated;
	margin-right:-1px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

#ShowcaseArea{
	
	display:none;
	width:100%;
	height:450px;
	margin-top:1.5rem;
	
}
#ShowcaseAreaAboutScreenLeft {
	
    float: left;
    width: 40%;
    padding-right: 1.25%;
    padding-left: 1.25%;
    border-right: 1px solid grey;
	height:100%;
	background:white;
}

#ShowcaseAreaAboutScreenRight {
	
    float: left;
    padding-left: 2.5%;
    padding-right: 2.5%;
	padding-top:1em;
    width: 60%;
    background:linear-gradient(45deg, #001, #000000cf, #00000000);
    height: 100%;
    display: table;
}
#ShowcaseAreaAboutScreenBlurb {
	
    font-size: 1.5rem;
    color: white;
    text-shadow: 1px 1px #333;
    width: 97.5%;
    padding: 2.5%;
    display: table-cell;
    vertical-align: middle;
}
#ShowcaseAreaAboutScreenSeparationLine {
	
    clear: left;
    width: calc(100% - 2px);
    margin-top: 2em;
    margin-left: 0;
    height: 3px;
    background: SteelBlue;
    border: 1px ridge SteelBlue;
    border-radius: 3px;
}
#ShowcaseAreaScreenshotsArea {
	
	margin-top: 0.375em;
}
.ShowcaseAreaScreenShot {
	
	width: calc(20% - 10px);
    height: calc(5em - 1px);
    float: left;
    margin: 5px;
    margin-top: 2%;
    margin-bottom: 0;
    cursor: pointer;
    border: 2px solid black;
}
.ShowcaseAreaScreenShot:first-child {
	
	clear:left;
}
.ShowcaseAreaScreenShot:hover {
	
	border:2px solid yellow;
}

#ShowcaseAreaScreenshotDisplay {
	
	display:none;
	position:fixed;
	z-index:300;
	left:50%;
	top:50%;
	background:black;
	width:0%;
	height:0%;
	box-shadow: 0px 0px 15px 12px #99990088;
}
#ShowcaseAreaAboutScreenJoin {
	
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	padding-bottom:6px;
	text-align:center;
	font-weight:normal;
	cursor:pointer;
    width: calc(40% - 14px);
    margin-top: 1.5em;
    margin-left: 30%;
	font-size:1.25em;
}
.SeparationLine {
	
	clear:left;
	width:calc(76% - 2px); /* 92%; */
	margin-left:calc(12% + 1px); /* 3%; */
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}






#TableOfContentsTitle {
    font-weight: bold; 
    text-decoration: underline; 
    font-size: 2.375rem;
	margin-top:125px;
	height:90px;
	text-align:center;
}

.TableOfContentsMember {
    text-decoration: underline; 
    font-size: 1.5rem;
	height:30px;
	margin-top:0.875rem;
	margin-left:5px;
	text-align:center;
}

#NovaMacCourtArea {
	margin-top:1.5rem;
    width: 33%; 
    border-left: 15px solid black;
    border-right: 15px solid black;
    float: left; 
    height: 475px;
	margin-bottom:1.5rem;
    background:linear-gradient(180deg, gold, #FFDD70cc);
    display: flex; /* Add flex display */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically */
    align-items: center; /* Center children horizontally */
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-radius:2.5rem;
}

#NovaMacCourt {
    width: 50%;
    border-radius: 5%;
    box-shadow: 1px 1px 5px 5px midnightblue;
    margin: 0; /* Remove margin */
}

#AGameByNovaMacCourt {
    width: 100%;
    text-align: center;
    font-size: 1.375rem;
    margin-top: 2.5rem; /* Adjust top margin as needed */
}


#SupportAreaContainer {
	display:none;
	margin-top:1.5rem;
    width: 63%;
    float: left; 
	margin-left:2%;
    height: 475px; 
	margin-bottom:1.5rem;
	border-right:15px solid black;
}
#SupportArea {
	width:100%;
	border-left:1px solid black;
    height: 475px; 
	background:linear-gradient(180deg, gold, #FFDD7099);
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}
#CrowdfundingImage {
	
	clear:left;
	float:left;
	height:425px;
	width:425px;
	margin-left:35px;
	margin-top:25px;
	border-radius:1rem;
	box-shadow:1px 1px 15px 5px black;
}
#SupportDetailsArea {
	
	float: left;
    padding-top: 125px;
    padding-bottom: 125px;
    width: calc(100% - 535px);
    margin-left: 40px;
    text-align: center;
    font-size: calc(0.5vh + 1.25vw);
    margin-top: 100px;
    text-shadow: 1px 1px darkolivegreen;
    box-shadow: 1px 1px 15px 5px gold;
    background: gold;
	border-radius:1rem;
	border: 1px solid navajowhite;
}

#QuoteAndCreditsArea {
	display:none;
	margin-top:1.5rem;
    width: 33%; 
	border-right:1px solid black;
    float: left; 
    height: 475px;
	margin-bottom:1.5rem;
	background:linear-gradient(180deg, gold, #FFDD7099);
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-top-right-radius:2rem;
	border-bottom-right-radius:2rem;
}
#CoolQuote {
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    font-style: italic;
    font-size: 1.625rem;
    margin-top: 4.5rem;
    height: 6.25rem;
}
#MusicCreditArea {
	
	float:left;
	width:50%;
	text-align:center;
	height:125px;
}
#JusticeMeyers {
	
	width:50%;
	margin-left:25%;
	margin-right:25%;
	margin-top:5px;
	margin-bottom:15px;
	border-radius:10px;
	box-shadow:1px 1px 15px 5px midnightblue;
}
#MusicCredit {
	
	height:50px;
    text-align: center; 
    font-size: 1.25rem;
}

#SoundCreditArea {
	
	float:left;
	width:50%;
	text-align:center;
	height:125px;
}
#HamidSami {
	
	width:50%;
	margin-left:25%;
	margin-right:25%;
	margin-top:5px;
	margin-bottom:15px;
	border-radius:10px;
	box-shadow:1px 1px 15px 5px midnightblue;
}
#SoundCredit {
	
	height:50px;
    text-align: center; 
    font-size: 1.25rem;
}

#ActiveServersArea, #MiddleServersArea, #ScheduledServersArea {

	display:none;
    background: linear-gradient(90deg, #ECECEC, #ECECEC66); 
    width: 450px; 
	margin-top:1.5rem;
	/* margin-bottom:1.5rem; */
	border:1px solid black;
	border-radius:2rem;
    padding-top: 10px; 
    height: 425px;
	float:left;
	overflow:hidden;
}
#ActiveServersArea {
	
	clear:left;
	margin-left:0px;
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
}
#MiddleServersArea {
	
	padding-top:0px;
	width:calc(100% - 954px);
	margin-left:25px;
	margin-right:25px;
	background: none;
}
#NovaMiddleArea, #AfterNovaMiddleArea {
	
	clear:left;
	width:100%;
	height:250px;
	background: #ECECEC;
	border-radius: 2rem;
	padding:5px;
}
#AfterNovaMiddleArea {
	
	height:155px;
	margin-bottom:1rem;
}

#NovaMacCourtAreaMiddle {
	
	width:100%;
    border-left: 15px solid black;
    border-right: 15px solid black;
    float: left; 
    height: 240px;
	margin-bottom:1.5rem;
    background:linear-gradient(180deg, gold, #FFDD70cc);
    display: flex; /* Add flex display */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically */
    align-items: center; /* Center children horizontally */
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-radius:2.5rem;
}
#AGameByNovaMacCourtMiddle {
    width: 100%;
    text-align: center;
    font-size: 1.125rem;
    margin-top: 2.5rem;
}
#NovaMacCourtMiddle {
    width: 8rem;
    border-radius: 5%;
    box-shadow: 1px 1px 5px 5px midnightblue;
    margin: 0; /* Remove margin */
}

#ScheduledServersArea {
	
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
    background: linear-gradient(270deg, #ECECEC, #ECECEC66); 
}

#ActiveServersTitle, #ScheduledServersTitle {

	display:block;
    text-align: center;
    font-size: 1.75rem;
    text-align: left;
    margin-left: 1rem;
    margin-top: 20px;
    text-decoration: underline;
}
#ActiveServersDisplayArea, #ScheduledServersDisplayArea {
	
	width:100%;
	height:600px;
	text-align:center;
}
#ActiveServersDisplayArea {
	
	margin-top:25px;
	height:275px;
}
@keyframes pulseActiveServerShadow {
    0%, 100% {
        box-shadow: 0px 0px 25px black;
    }
    50% {
        box-shadow: 0px 0px 15px darkorange;
    }
}

.ActiveServer, .ScheduledServer, .CurrentGameServer {
	
	display:none;
	float: left;
    width: 350px;
    height: 273px;
    margin-bottom: 2.5rem;
    margin-left: 50px;
    margin-right: 4.5%;
    border: 2px solid gold;
    border-radius: 25px;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
    color: white;
    box-shadow: 1px 3px 10px midnightblue;
	background:#000033;
}
.CurrentGameServer {
	
	width: calc(30% - 2px);
    height: calc(280px + 12rem);
    margin-left: 1.5%;
    margin-right: 1.5%;
}

.ActiveServerOpen {
	
    background: black;
    box-shadow: 0px 0px 10px midnightblue;
    animation: pulseActiveServerShadow 5s infinite;
}

#CreateServerPanel {
	
	display:none;
	float: left;
    width: 24%;
    height: 273px;
    margin-bottom: 50px;
    margin-left: 4.5%;
    margin-right: 4.5%;
}
#CreateNewGameButton {
	
	background: white;
    width: 250px;
    margin-left: calc(50% - 125px);
    height: 5rem;
    margin-top: 6rem;
    color: black;
    text-shadow: 1px 1px gold;
    cursor: pointer;
    text-align: center;
    padding-top: 1.75rem;
    font-size: 1.25rem;
    border: 2px solid gold;
    border-radius: 2rem;
    box-shadow: 0px 0px 12px 5px black;
}

@keyframes pulseCreationShadow {
    0%, 100% {
        box-shadow: 0 0 15px #000000;
    }
    50% {
        box-shadow: 0 0 25px #ffff00;
    }
}
.CreationInProgress {
	
	border:2px solid midnightblue;
	box-shadow:1px 3px 10px 10px gold;
	animation: pulseCreationShadow 5s infinite;
	border-radius: 0px;
    background: cornflowerblue;
}

#JoinAGame {
	
	font-size: 2rem;
    width: calc(100% - 2rem);
    margin: 1rem;
    margin-top: 5rem;
    background: gainsboro;
    padding: 3rem;
    border: 2px solid grey;
    border-radius: 10rem;
}

.GameServer_TypeTitle {
	
	text-align: center;
    margin-top: 1.5rem;
    font-weight: normal;
    font-size: 1.375rem;
}
.GameServer_RulesDisplay {
	
	margin-bottom:2.5rem;
	text-align: center;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    padding: 5px;
    width: 150px;
    margin-left: calc(50% - 75px);
    border: 1px solid #cccc33;
	border-radius:1rem;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
    background: #333300;
}
.GameServer_PlayersDisplay, .GameServer_PlayersRemaining {
	
	text-align: center;
    margin-top: 2rem;
    text-decoration: underline;
    font-size: 0.875rem;
}
.GameServer_PlayersRemaining {
	
	text-decoration:none;
	margin-top:1.5rem;
	margin-bottom:1.25rem;
}

.GameServer_PlayersDisplay.GameClosed {
	
    font-size: 2rem;
    margin-top: 2.5rem;
    text-decoration: none;
    color: gold;
}
	
.GameServer_CreationInProgress {
	
	text-align: center;
    margin-top: 3.25rem;
    font-weight: bold;
    font-size: 1.375rem;
    color: khaki;
    text-shadow: 1px 1px black;
    text-decoration: underline;
}
.GameServer_GameClosed {
	
	text-align: center;
    margin-top: 3.25rem;
    font-weight: bold;
    font-size: 1.375rem;
}

.GameServer_BottomBreak {
	
	width: 100%;
    height: 0rem;
    border-top: 1px solid white;
}

@keyframes blinkJoinGameButton {
    0%, 100% {
        font-size: 1.25rem;
        padding: 5px;
        border: 1px solid gold;
        font-weight:normal;
        background: #000033;
        border-radius: 5px;
        border-top-right-radius:10px;
        border-top-left-radius:10px;
        box-shadow: 0px 0px 15px 5px dodgerblue;
        color:white;
        text-shadow:none;
        margin-bottom: 1.75rem;
    }
    40% {
        font-size:1.3125rem;
        padding-top:6px;
        padding-bottom:9px;
        border: 1px solid #000033;
        font-weight:bold;
        background: gold;
        border-radius: 5px;
        border-bottom-right-radius:15px;
        border-bottom-left-radius:15px;
        box-shadow: 0px 0px 15px 5px dodgerblue;
        color:black;
        text-shadow:0px 2px white;
        margin-bottom:calc(1.75rem - 5px);
    }
}
.JoinGameExplanation {
	
	color: white;
    background: #33333399;
    letter-spacing: 0.125rem;
    font-size: 1.375rem;
    margin: 3rem;
    margin-top: 5rem;
    margin-bottom: 5rem;
    text-align: center;
    padding: 1.25rem;
}
.GameServer_JoinButton, .GameServer_EnterButton {
	
    text-align: center;
    width: 180px;
    margin-left: calc(50% - 90px);
    margin-top: 1rem;
    font-size: 1.25rem;
    padding: 5px;
    border: 1px solid gold;
    border-radius: 5px;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    background: #000033;
    margin-bottom: 1.75rem;
    /* animation: blinkJoinGameButton 3s infinite; */
    transition: all 0.3s ease;
}
.GameServer_EnterButton {
	
	background:cornflowerblue;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	margin-bottom:0.75rem;
	padding:10px;
}

.GameServer_JoinButton:hover, .GameServer_EnterButton:hover {

	cursor:pointer;
    font-size:1.3125rem;
    padding-top:6px;
    padding-bottom:7px;
    border: 1px solid #000033;
    font-weight:bold;
    background: gold;
    border-radius: 5px;
    border-bottom-right-radius:15px;
    border-bottom-left-radius:15px;
    box-shadow: 0px 0px 15px 5px dodgerblue;
    color:black;
    text-shadow:0px 2px white;
    margin-bottom:calc(1.75rem - 5px);
	animation: none;
}
.GameServer_EnterButton:hover {
	
	border-radius:10px;
	padding:10px;
}

.GameServer_GameStats {
	
    width: 180px;
    margin-left: calc(50% - 90px);
    border: 1px solid gold;
    border-radius: 5px;
    background: black;
    text-align: center;
    height: 14.375rem;
    padding-top: 0.5rem;
    margin-bottom: 2rem;
}
.StatInfo {
	
	width:100%;
	text-align:center;
    color: white;
    margin-top: 0.25rem;
    font-size: 1rem;
}
.StatInfoBreak {
	
	height: 0.68755rem;
    border-bottom: 1px solid white;
}
.StatValue {
	
	clear:left;
	float:left;
	width:calc(50% - 5px);
	margin-right:5px;
	text-align:right;
    color: #fff4b8;
    margin-top: 0.5rem;
    font-size: 1.125rem;
}
.StatType {
	
	float:right;
	width:50%;
	text-align:left;
    color: #fff4b8;
    margin-top: 0.5rem;
    font-size: 1.125rem;
    color: white;
}

.GameServer_DeadlineToJoin, .GameServer_TimeToGameOpen, .GameServer_CurrentGameStatus  {
	
	text-align: center;
    font-weight: bold;
    font-size: 1.125rem;
    padding-top: 10px;
    border-top: 1px solid gold;
}
.DealineToJoinTitle {
	
	text-decoration:underline;
}
.GameServer_Timing {
	
	color:gold;
}
.GameServer_TimeToGameOpen {
	
	margin-top:45px;
}
.GameServer_CurrentGameStatus {
	
	border-top:1px solid white;
}

#LiveGameStatsArea {
	display:none;
	width:95%;
	margin-left:2.5%;
    background: gold; 
    clear: left; 
    height: 200px;
	border:1px solid black;
	padding-top:1rem;
	margin-top:1.5rem;
	border-radius:2rem;
}
#LiveStatsTitle {
	
	font-size:2rem;
	font-weight:bold;
	text-align:center;
	text-decoration:underline;
	height:auto;
	margin-bottom:2rem;
}
#LiveBigStatsArea {
    width: 100%; 
	padding-left:5%;
	padding-right:5%;
    height: 1.75rem;
	margin-bottom:1rem;
}
.BigStatsDisplay {

	float:left; 
	width: 25%;
	padding-left:1.25%;
	padding-right:1.25%;
	text-align:center;
	font-size:1.5rem;
}
#StatsAreaBreakline {
	
	width:calc(95% - 2px);
	margin-left:2.5%;
	margin-right:2.5%;
	height:3px;
	border:1px solid black;
	border-radius:25px;
	background:black;
	margin-bottom:20px;
	
}
#LiveSmallStatsArea {
    width: 100%; 
	padding-left:1.25%;
	padding-right:1.25%;
    height: 1.75rem;
}
.SmallStatsDisplay {

	float:left; 
	width: 14.666666%;
	padding-left:1.25%;
	padding-right:1.25%;
	text-align:center;
	font-size:1.125rem;
}
#TotalStars, #TotalPlanets, #TotalUnits {
	
	width: 18.666666%;
}
.Total {
	
	font-weight:bold;
	font-size:1.375rem;
	color:#000033;
	padding-right:3px;
}
@keyframes numberChange {
    0%, 100% {
        transform: translateY(0);
        text-shadow: 0 0 5px #fff;
		font-size:1.425rem;
    }
    50% {
        transform: translateY(-20px); /* More pronounced bounce */
        text-shadow: 0 0 15px #fff;
		font-size:1.5rem;
    }
}

.animate-change {
    animation: numberChange 0.5s ease-in-out;
}


#BottomLinksContainer {
	display:none;
    clear: left; 
	max-width: 2000px;
	min-width:1235px;
    width: 90%;
    height: 2.375rem; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    color: white;
    margin: 1.5rem auto 0;
	margin-bottom: 1rem;
}
#BottomLinksArea {
	width: 100%;
    height: 35px;
	background:white;
	border-radius:2rem;
	overflow:hidden;
}
.BottomLink {	
	float: left;
    width: 16.666%;
    padding-left: 1%;
    padding-right: 1%;
    font-size: 0.75rem;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
	border-left:5px solid black;
}
.BottomLink:hover {
	
	background:gold;
	text-decoration:underline;
	cursor:pointer;
}
.BottomHighlight {
	
	background:gold;
	color:black;
	text-decoration:underline;
	cursor:pointer;
}
.BottomHighlight a, .BottomHighlight a:visited, .BottomHighlight a:hover, .BottomHighlight a:active  {
	
	background:gold;
	color:black;
}


#InteractionArea {
	
	position:fixed;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
	width:750px;
	height:375px;
	background:#000033;
	border:2px solid black;
	box-shadow: 1px 1px 25px 10px white;
	text-align:center;
    display: none;
}

#InteractionTitle {
	
	font-weight:bold;
	font-size:1.75rem;
	text-decoration:underline;
	text-align:center;
	text-shadow:1px 1px black;
	height:90px;
	margin-top:85px;
	color:white;
}

#InteractionMessage {
	
	color:white;
	margin-top:1px;
	text-shadow:1px 1px black;
}
#GameSetupText {
	
	text-decoration:underline;
}
#InteractionProgressBar {
	
	background:black;
	border:2px solid gold;
	border-radius:10px;
	width:400px;
	margin-left:175px;
	margin-top:15px;
	height:15px;
	overflow:hidden;
}
#InteractionProgress {
	
	background:green;
	width:0px;
	height:100%;
}
#InteractionWarning {
	
	color:white;
	margin-top:1px;
	text-shadow:1px 1px black;
	font-size:0.875rem;
	margin-top:50px;
	text-decoration:underline;
}

#InteractionBlanket, #CreationBlanket {
	
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:2;
	background:#282828F9;
	display:none;
}
#CreationBlanket {
	
	background:url('../Images/StarClusterBG.jpg');
	background-size:100% 100%;
	background-repeat:no-repeat;
}


/* ////////////////////////// */
/* // Start of Welcome.CSS // */
/* ////////////////////////// */
#LoadingScreen {
	
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;
	display:table;
}
#LoadingScreenBacking {
	
	position:fixed;
	z-index:2;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}
#LoadingScreenSecondBacking {
	
	position:fixed;
	z-index:1;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}
#LoadingMessage {
	
	width:100%;
	text-align:center;
	font-size:1.5em;
	font-weight:bold;
	display:table-cell;
	vertical-align:middle;
}

#FrontScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#FrontScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}
#FrontScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}

#MultiLoginScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#MultiLoginScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}
#MultiLoginScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}

#WelcomeTo {
	
	clear:left;
	float:left;
	text-align:right;
	width:50%;
	margin-left:5%;
	margin-top:30px;
	margin-right:1%;
	text-decoration:underline;
	font-size:3.75em;
	font-weight:bold;
}

.GameOfPlanetsLogo {
	
	float:left;
	/* border:2px double darkred; */
	width:384px; /* 270px; */
	margin-left:calc(50% - 192px); /* 2.5%; */
	height:128px; /* 95px; */
	margin-top:20px;
	background:url('Images/GameOfPlanets-Horizontal.png');
	background-size:100% 100%;
	border-radius:5px;
}

.GameOfPlanetsSlogan {
	
	clear:left;
	float:left;
	width:100%; /* 75.75%; */
	margin-left:0%; /* 3%; */
    margin-top:0.5em; /* 2.25em; */
	padding-left: 0.125%;
	font-size:1.25em;
	font-weight:bold;
	color:navy;
	text-transform:uppercase;
	letter-spacing:2px;
	text-align:center; /* left; */
	/* font-style:italic; */ 
	/* text-shadow:0px 1px black; */
}

.SeparationLine {
	
	clear:left;
	width:calc(76% - 2px); /* 92%; */
	margin-left:calc(12% + 1px); /* 3%; */
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#GameOfPlanetsLogo, #Multi_GameOfPlanetsLogo {
	
	float:left;
	/* border:2px double darkred; */
	width:384px; /* 270px; */
	margin-left:calc(50% - 192px); /* 2.5%; */
	height:128px; /* 95px; */
	margin-top:20px;
	background:url('Images/GameOfPlanets-Horizontal.png');
	background-size:100% 100%;
	border-radius:5px;
}

#GameOfPlanetsSlogan, #Multi_GameOfPlanetsSlogan {
	
	clear:left;
	float:left;
	width:100%; /* 75.75%; */
	margin-left:0%; /* 3%; */
    margin-top:0.5em; /* 2.25em; */
	padding-left: 0.125%;
	font-size:1.25em;
	font-weight:bold;
	color:navy;
	text-transform:uppercase;
	letter-spacing:2px;
	text-align:center; /* left; */
	/* font-style:italic; */ 
	/* text-shadow:0px 1px black; */
}

#ByDefianceIndustries {
	
	float:right;
	width:20.625%;
	margin-top:1em; /* 4.375em; */
	font-style:italic;
	font-size:0.675em;
	font-weight:bold;
	color:MidnightBlue;
}
#DefianceIndustriesLogo {
	
	width:15px;
	height:15px;
	margin-top:4px;
	margin-bottom:-3px;
	margin-left:2px;
}

#SeparationLine {
	
	clear:left;
	width:calc(76% - 2px); /* 92%; */
	margin-left:calc(12% + 1px); /* 3%; */
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

.FrontScreenButton {
	
	color:white;
	background:lightsteelblue;
}
.FrontScreenButton:hover {
	
	color:dodgerblue;
	background:aliceblue;
	text-shadow:0px 1px gold;
}

#LoginButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	padding-bottom:6px;
	text-align:center;
	font-size:1.75em;
	font-weight:normal;
	width:calc(25% - 12px);
	margin-top:1.75em;
	margin-left:37.5%;
	cursor:pointer;
}
#AlphaLoginButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	padding-bottom:6px;
	text-align:center;
	font-size:1.75em;
	font-weight:normal;
	width:calc(30% - 12px);
	margin-top:2.75em;
	margin-left:35%;
	cursor:pointer;
}
#BetaLoginButton, #Multi_AlphaLoginButton, #Multi_BetaLoginButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	padding-bottom:6px;
	text-align:center;
	font-size:1.75em;
	font-weight:normal;
	width:calc(22.5% - 12px);
	margin-top:1.6875em;
	margin-left:38.75%;
	cursor:pointer;
}
#Multi_BetaLoginButton {
	
	margin-top: 0.2875em;
}

#OrArea, .OrArea {
	
	clear:left;
	width:25%; 
	margin-left:37.5%;
	margin-top:5px;
    font-size:1.125em;
    font-weight:bold;
    color:darkslategray;
	text-align:center;
}

#JoinButton, #AboutScreenJoin {
	
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	padding-bottom:6px;
	text-align:center;
	font-size:1.75em;
	font-weight:normal;
	width:calc(22.5% - 12px);
	margin-top:5px;
	margin-left:38.75%;
	cursor:pointer;
}
#JoinButton {
	
	width: calc(17.5% - 12px);
	margin-left: 41.25%;
}

#AboutScreenJoin {
	
    width: calc(40% - 14px);
    margin-top: 1.5em;
    margin-left: 30%;
	font-size:1.25em;
}

#JoinScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#JoinScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(315deg, black, transparent);
	width:50%;
	height:50%;	
}
#JoinScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(315deg, black, transparent);
	width:50%;
	height:50%;	
}

#AboutScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:black;
	border:1px double grey;
	width:50%;
	height:50%;	
}

#AboutScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}
#AboutScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}
#AboutScreenLeft {
	
    float: left;
    width: 40%;
    padding-right: 1.25%;
    padding-left: 1.25%;
    border-right: 1px solid grey;
	height:100%;
	background:white;
}
#AboutScreenRight {
	
    float: left;
    padding-left: 2.5%;
    padding-right: 2.5%;
	padding-top:1em;
    width: 60%;
    background: linear-gradient(45deg, #001, #000, #003);
    height: 100%;
    display: table;
}
#AboutScreenBlurb {
	
    font-size: 1em;
    color: white;
    text-shadow: 1px 1px #333;
    width: 97.5%;
    padding: 2.5%;
    display: table-cell;
    vertical-align: middle;
}
#AboutScreenSeparationLine {
	
    clear: left;
    width: calc(100% - 2px);
    margin-top: 2em;
    margin-left: 0;
    height: 3px;
    background: SteelBlue;
    border: 1px ridge SteelBlue;
    border-radius: 3px;
}
#ScreenshotsArea {
	
	margin-top: 0.75em;
}
.ScreenShot {
	
    width: calc(45% - 4px);
    height: calc(5em - 1px);
    float: left;
    margin: 2.5%;
	margin-top:2%;
    margin-bottom: 0;
	cursor:pointer;
	border:2px solid black;
}
.ScreenShot:first-child {
	
	float:none;
    margin-left: 25%;
    width: 50%;
    height: 5.5em;
}
.ScreenShot:hover {
	
	border:2px solid yellow;
}

#ScreenshotDisplay {
	
	display:none;
	position:fixed;
	z-index:300;
	left:50%;
	top:50%;
	background:black;
	width:0%;
	height:0%;
	box-shadow: 0px 0px 15px 12px #99990088;
}

#LoginScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#LoginScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(315deg, black, transparent);
	width:50%;
	height:50%;	
}
#LoginScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(315deg, black, transparent);
	width:50%;
	height:50%;	
}


#JoinGameOfPlanetsLogo, #AboutGameOfPlanetsLogo, #LoadingGameOfPlanetsLogo {
	
	/* border:2px double darkred; */
	width:282px; /* 272px; */
	margin-left:calc(50% - 141px); /* 10.75%; */
	height:94px; /* 95px; */
	margin-top:2.5em;
	background:url('Images/GameOfPlanets-Horizontal.png');
	background-size:100% 100%;
	border-radius:5px;
}
#AboutGameOfPlanetsLogo {
	
	margin-top:0;
}

#JoinSeparationLineOne {
	
	clear:left;
	width:90%;
	margin-left:5%;
	margin-top:1em;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#JoinEmailArea {
	
	margin-top:2em;
	width:90%;
	text-align:center;
	margin-left:5%;
	font-size:1em;
	font-weight:bold;
	color:navy;
	padding-left:12px;
}

#JoinPasswordArea {
	
	margin-top:0.5em;
	width:90%;
	text-align:center;
	margin-left:5%;
	font-size:1em;
	font-weight:bold;
	color:navy;
}

#JoinNowButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:calc(30% - 12px);
	margin-top:1.75em;
	margin-left:34.75%;
	cursor:pointer;
}

#JoinSeparationLineTwo {
	
	clear:left;
	width:90%;
	margin-left:5%;
	margin-top:1.5em;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#AuthenticateScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#AuthenticateScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}
#AuthenticateScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}

#AuthenticateTitle {
	
	text-align:center;
	width:90%;
	margin-left:5%;
	margin-top:10px;
	font-size:2.5em;
	font-weight:bold;
}

#AuthenticateSeparationLineOne {
	
	width:90%;
	margin-left:5%;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#SendingActivationLink, #ActivationLinkSent {
	
	text-shadow:1px 1px gold;
	margin-top:2.875em;
	font-size:1.0625em;
    font-weight:bold;
	letter-spacing:1px;
    width:90%;
    text-align:center;
    margin-left:5%;
    font-weight: bold;
    color: blue;
}
#ActivationLinkSent {
	
	display:none;
	font-size:1em;
}

#AuthenticateBlurb {
	
	margin-top:2.875em;
	font-size:0.75em;
    font-weight:bold;
    width:90%;
    text-align:center;
    margin-left:5%;
	display:none;
}
#TinyGameOfPlanetsLogo {
	
	width:150px;
	height:50px;
	margin-left:75px;
	margin-top:20px;
	background:url('Images/GameOfPlanets-Horizontal.png');
	background-size:100% 100%;
	border-radius:5px;
	display:none;
}

.AbouttheGame, .LoginButton {
	
	margin-top:2em;
	width:90%;
	text-align:center;
	margin-left:5%;
	font-size:0.875em;
	color:blue;
	text-decoration:underline;
	cursor:pointer;
}
.AbouttheGame { 

	margin-top: 0.25em;
}

#WelcomeScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}

#WelcomeScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}
#WelcomeScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}
#WelcomeToTheGame {
	
    margin-top: 3em;
    margin-bottom: 2em;
    text-align: center;
    text-shadow: 1px 1px gold;
    font-weight: bold;
    color: blue;
	font-size:1.0625em;
}

#LoginGameOfPlanetsLogo {
	
	/* border:2px double darkred; */
	width:282px; /* 272px; */
	margin-left:calc(50% - 141px); /* 10.75%; */
	height:94px; /* 95px; */
	margin-top:2.5em;
	background:url('Images/GameOfPlanets-Horizontal.png');
	background-size:100% 100%;
	border-radius:5px;
}

#LoginSeparationLineOne {
	
	clear:left;
	width:90%;
	margin-left:5%;
	margin-top:1em;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#LoginEmailArea {
	
	margin-top:2em;
	width:90%;
	text-align:center;
	margin-left:5%;
	font-size:1em;
	font-weight:bold;
	color:navy;
	padding-left:12px;
}

#LoginPasswordArea {
	
	margin-top:0.5em;
	width:90%;
	text-align:center;
	margin-left:5%;
	font-size:1em;
	font-weight:bold;
	color:navy;
}

#LoginLoginButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:calc(25% - 12px);
	margin-top:1.75em;
	margin-left:37.25%;
	cursor:pointer;
}

#LoginSeparationLineTwo {
	
	clear:left;
	width:90%;
	margin-left:5%;
	margin-top:1.5em;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#LoginForgotPassword {
	
	margin-top:2.5em;
	width:90%;
	text-align:center;
	margin-left:5%;
	font-size:0.875em;
	color:blue;
	text-decoration:underline;
	cursor:pointer;
}

.LoginOrArea {
	
	clear:left;
	width:25%; 
	margin-left:37.25%;
	margin-top:0.25em;
    font-size:0.875em;
    font-weight:bold;
    color:darkslategray;
	text-align:center;
}

#LoginJoinNow {
	
	margin-top:0.25em;
	width:90%;
	text-align:center;
	margin-left:5%;
	font-size:0.875em;
	color:blue;
	text-decoration:underline;
	cursor:pointer;
}

#ForgotPasswordScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#ForgotPasswordScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(135deg, black, transparent);
	width:50%;
	height:50%;	
}
#ForgotPasswordScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(135deg, black, transparent);
	width:22.5%;
	height:35.75%;	
}

#PasswordRecoveryTitle {
	
	text-align:center;
	width:90%;
	margin-left:5%;
	margin-top:30px;
	font-size:2.5em;
	font-weight:bold;
}

#PasswordRecoverySeparationLineOne {
	
	width:90%;
	margin-left:5%;
	margin-top:0.25em;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#PasswordRecoveryEmailArea {
	
	margin-top:2.75em;
	width:90%;
	text-align:center;
	margin-left:5%;
	font-size:1em;
	font-weight:bold;
	color:navy;
}

#SendCodeButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:calc(32.5% - 12px);
	margin-top:2.5em;
	margin-left:30.5%;
	cursor:pointer;	
}

#ForgotPasswordCancelButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:calc(22.5% - 12px);
	margin-top:0.5em;
	margin-left:35.75%;
	cursor:pointer;
}

#RecoverAccountScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#RecoverAccountScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}
#RecoverAccountScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}

#RecoverAccountTitle {
	
	text-align:center;
	width:90%;
	margin-left:5%;
	margin-top:30px;
	font-size:2.5em;
	font-weight:bold;
}

#RecoverAccountSeparationLineOne {
	
	width:90%;
	margin-left:5%;
	margin-top:0.25em;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#RecoverAccountBlurb {
	
	margin-top:3.375em;
	font-size:0.75em;
    font-weight:bold;
    font-style:italic;
    width:50%;
    text-align:center;
    margin-left:25%;
}

#RecoverAccountCodeArea {
	
	margin-top:2em;
	width:90%;
	text-align:center;
	margin-left:5%;
	font-size:1em;
	font-weight:bold;
	color:navy;
}

#RecoverAccountCode {
	
	text-align:center;
}

#ConfirmCodeButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:calc(20% - 12px);
	margin-top:2em;
	margin-left:40%;
	cursor:pointer;	
}

#RecoverAccountCancelButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:calc(15% - 12px);
	margin-top:0.5em;
	margin-left:42.5%;
	cursor:pointer;	
}

#NewPasswordScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#NewPasswordScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}
#NewPasswordScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}

#NewPasswordTitle {
	
	text-align:center;
	width:90%;
	margin-left:5%;
	margin-top:30px;
	font-size:2.5em;
	font-weight:bold;
}

#NewPasswordSeparationLineOne {
	
	width:90%;
	margin-left:5%;
	margin-top:0.25em;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#NewPasswordBlurb {
	
	margin-top:3.5em;
	font-size:0.75em;
    font-weight:bold;
    font-style:italic;
    width:90%;
    text-align:center;
    margin-left:5%;
}

#NewPasswordArea {
	
	margin-top:2em;
	width:90%;
	text-align:center;
	margin-left:5%;
	font-size:1em;
	font-weight:bold;
	color:navy;
}

#NewPasswordConfirmArea {
	
	margin-top:0.25em;
	width:90%;
	text-align:center;
	margin-left:0%;
	padding-left:11px;
	font-size:1em;
	font-weight:bold;
	color:navy;
}

#FinishPasswordButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:calc(20% - 12px);
	margin-top:2em;
	margin-left:40%;
	cursor:pointer;	
}

#NewPasswordCancelButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:calc(15% - 12px);
	margin-top:0.5em;
	margin-left:42.5%;
	cursor:pointer;	
}

#ErrorScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#ErrorScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}
#ErrorScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}

#ErrorTitle {
	
	text-align:center;
	width:90%;
	margin-left:5%;
	margin-top:10px;
	font-size:2.5em;
	font-weight:bold;
}

#ErrorSeparationLineOne {
	
	width:90%;
	margin-left:5%;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#ErrorBlurb {
	
	margin-top:2.875em;
	font-size:0.75em;
    font-weight:bold;
    width:90%;
    text-align:center;
    margin-left:5%;
}

#ErrorRetryButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:20%;
	margin-top:2em;
	margin-left:40%;
	cursor:pointer;	
}

#MobileScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#MobileScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}
#MobileScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}

#MobileTitle {
	
	text-align:center;
	width:90%;
	margin-left:5%;
	margin-top:10px;
	font-size:3.5em;
	font-weight:bold;
}

#MobileSeparationLineOne {
	
	width:90%;
	margin-left:5%;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#MobileGameOfPlanetsLogo {
	
	border:2px double darkred;
    width:40%;
    margin-left:30%;
    height:20%;
    margin-top:1.5em;
    background:url(Images/GameOfPlanets-Horizontal.png);
    background-size:100% 100%;
    border-radius:5px;
	display:none;
}

#ComingSoonToMobile {
	
    width:90%;
    margin-left:5%;
    height:72.5%;
    margin-top:1em;
    background:url(Images/ComingSoon.jpg);
	background-size:100% 100%;
}

#MobileBlurb {
	
	display:none;
    text-decoration:underline;
    font-family:sans-serif;
    margin-top:2em;
    font-size:1.625em;
    width:75%;
    text-align:center;
    margin-left:7.5%;
    border:2px outset steelblue;
    border-radius:10px;
    padding:5%;
}

#JoinMenuScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#JoinMenuScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}
#JoinMenuScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}

#JoinMenuTitle {
	
	text-align:center;
	width:90%;
	margin-left:5%;
	margin-top:10px;
	font-size:2.5em;
	font-weight:bold;
}

#JoinMenuSeparationLineOne {
	
	width:90%;
	margin-left:5%;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#JoinMenuBlurb {
	
	margin-top:3.5em;
	font-size:0.75em;
    font-weight:bold;
    font-style:italic;
    width:90%;
    text-align:center;
    margin-left:5%;
}

#JoinMenuCreateEmpireButton {
	
    clear: left;
    border: 2px outset SteelBlue;
    border-radius: 5px;
    padding: 5px;
    padding-bottom: 6px;
    padding-top: 0.125em;
    text-align: center;
    font-size: 1.25em;
    text-shadow: 1px 1px black;
    font-weight: normal;
    width: calc(30% - 12px);
    height: 1.25em;
    line-height: 1.375em;
    margin-top: 1.75em;
    margin-left: 35%;
    cursor: pointer;
}

#JoinMenuQuickStartButton {
	
	clear: left;
    border: 2px outset SteelBlue;
    border-radius: 5px;
    padding: 5px;
    padding-bottom: 6px;
    padding-top: 0.75em;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: bold;
    width: calc(55% - 12px);
    color: white;
    text-shadow: 1px 1px black;
    height: 2em;
    line-height: 1.375em;
    margin-top: 1em;
    margin-left: 22.5%;
    cursor: pointer;
}
#JoinMenuQuickStartButton:hover {
	
	color:dodgerblue;
	background:aliceblue;
	text-shadow:0px 1px gold;
}

#JoinMenuCancelButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:calc(17.5% - 12px);
	margin-top:1.5em;
	margin-left:41.5%;
	cursor:pointer;
}

#JoinBetaScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#JoinBetaScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}
#JoinBetaScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}

#JoinBetaTitle {
	
	text-align:center;
	width:90%;
	margin-left:5%;
	margin-top:10px;
	font-size:2.5em;
	font-weight:bold;
}

#JoinBetaSeparationLineOne {
	
	width:90%;
	margin-left:5%;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#JoinBetaBlurb {
	
	margin-top:3.5em;
	font-size:0.75em;
    font-weight:bold;
    font-style:italic;
    width:90%;
    text-align:center;
    margin-left:5%;
}

#JoinBetaCodeArea {
	
	margin-top:2em;
	width:90%;
	text-align:center;
	margin-left:5%;
	font-size:1em;
	font-weight:bold;
	color:navy;
}

#JoinBetaCode {
	
	text-align:center;
}

#JoinBetaRetryButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:20%;
	margin-top:1.875em;
	margin-left:40%;
	cursor:pointer;	
}

#JoinBetaCancelButton {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	text-align:center;
	font-size:1em;
	font-weight:normal;
	width:17.5%;
	margin-top:0.5em;
	margin-left:41.5%;
	cursor:pointer;
}

#CreateEmpireScreen {
	
	display:none;
	position:fixed;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;
	cursor:default;
}
#CreateEmpireScreenBacking {
	
	display:none;
	position:fixed;
	z-index:2;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}
#CreateEmpireScreenSecondBacking {
	
	display:none;
	position:fixed;
	z-index:1;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}

#CreationStepTitle {

    margin-top:0.25em;
    font-size:3.5em;
    width:calc(95% - 10px);
	padding-left:8px;
    letter-spacing:10px;
    font-weight:bold;
    margin-left:2.5%;
    text-align:center;
	background:linear-gradient(180deg, gold, yellow);
	border:1px solid #c9abd3;
	border-bottom:none;
}
	
#CreationSeparationLineOne {
	
	width:94.875%;
	margin-left:2.5%;
	height:3px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	border-radius:3px;
}

#GovernmentSelectionArea {
	
	width:42.5%;
	margin-left:1%;
	margin-right:2.375%;
	float:left;
	display:none;
}
#GovernmentSelectTitle {
	
	font-size: 1.25em;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 10px;
	text-align:center;
}
#GovernmentCostArea {
	
	padding: 2%;
    float: left;
    margin: 0.5%;
    width: 40%;
	height:5em;
    text-align: center;
    border: 1px solid grey;
    background: linear-gradient(185deg, yellow, #dd9327);
    border-radius: 12px;
    margin-right: 1.25%;
	margin-left:32.5%;
    padding-top: 1.75%;
    padding-bottom: 1.25%;
    margin-top: 0.875em;
	display:none;
}
#GovernmentSelections {
	
	border:1px solid #9fbae3;
    float:left;
    width:100%;
    margin-left:62.5%;
    margin-top:0.5em;
    padding:2.5%;
	padding-bottom:0.625em;
	padding-top:0.625em;
    height:22.5%;
	margin-bottom:0.5em;
	background:linear-gradient(333deg, aliceblue, gold);
	display:none;
}
#GovernmentSelectionsArea {
	
	width:70%;
	margin-left:25%;
}
.GovernmentTypeTitle {

	font-size:1.125em;
}
#GovernmentCostTitle {
	
	font-weight:bold;
    text-decoration:underline;
}
#GovernmentCostPoints {
	
    font-size:1.625em;
    font-weight:bold;
    color:red;
    font-family:"Arial Black", Gadget, sans-serif;
}
#GovernmentCostPointsTitle {
	
	font-size:1em;
	font-weight:bold;
}
#GovernmentDetailsArea {

	float:left;
	width:56.5%;
	margin-left:3%;
	margin-top:0.5em;
	display:none;
}
#GovernmentIconArea {
	
	width:35%;
	float:left;
	height:7.5em;
	margin-left:7%;
	display:none;
}
#GovernmentDescriptionArea {

    margin-left: 2.75%;
    float: left;
    width: 36.5%;
    margin-top: 0.25em;
    padding: 2.5%;
    padding-top: 1.5em;
    padding-left: 5%;
    overflow: hidden;
    height: 9em;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.625em;
    background: linear-gradient(316deg, yellow, gold);
    border: 1px solid grey;
    border-radius: 12px;
    font-weight: bold;
    font-style: italic;
    line-height: 1.25em;
    margin-bottom: 0.75em;
	display:none;
}
#GovernmentHorizontalRule, #FinalizationHorizontalLine, #FlagHorizontalLine {
	
    width: 96.375%;
    margin-left: 0%;
    height: 3px;
    background: SteelBlue;
    border: 1px ridge SteelBlue;
    border-radius: 3px;
    clear: left;
    margin-bottom: 7px;
	display:none;
}
#FlagHorizontalLine {
	
	height:0px;
	margin-bottom:0.875em;
	display:block;
}

#GovernmentStatsArea {
	
	font-size: 1.25em;
    border: 1px solid grey;
    background: linear-gradient(45deg, yellow, gold);
    width: 86.25%;
    padding: 5%;
    padding-top: 0.625em;
    padding-bottom: 0.5em;
    margin-left: 0%;
    border-radius: 5px;
    margin-bottom: 0.5em;
    height: 5em;
}

#CreationEvolutionArea1 {
	
	width: 30%;
    height: 20%;
    float: left;
    background: linear-gradient(333deg, aliceblue, gold);
    border: 1px solid #9fbae3;
    padding: 2.5%;
	padding-top:2%;
	padding-bottom:3%;
    margin-left: 32.5%;
    margin-top: 4.875em;
    border-radius: 12px;
    margin-bottom: 0.5em;
    display: none;
}
#EvolutionSelectTitle1 {
	
	font-size: 1.25em;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 10px;
	text-align:center;
}
#CreationEvolutionSelections1 {
	
	width:80%;
	margin-left:20%;
}
.EvolutionChoiceTitle {
	
	font-size:1.125em;
}
#CreationEvolutionVerticalRule1 {

	float: left;
    width: 1px;
    background: SteelBlue;
    border: 1px ridge SteelBlue;
    height: 28%;
    margin-left: 1%;
    margin-top: 0.5em;
	display:none;
}
#CreationEvolutionDescription1 {

    margin-left: 1.25%;
    float: left;
    width: 36.5%;
    margin-top: 0.875em;
    padding: 2.5%;
	padding-top:1.125em;
    overflow: hidden;
    height: 9.5em;
    border: 1px solid gold;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.625em;
    background: linear-gradient(316deg, yellow, gold);
    border: 1px solid grey;
    border-radius: 12px;
    font-weight: bold;
	font-style:italic;
    line-height: 1.25em;
    margin-bottom: 0.5em;
    text-align: center;
	display:none;
}
#CreationEvolutionDescriptionText1 {
	
	height:5.5em;
}
#AdaptationEffect1 {
	
	margin-top: 1em;
    background: linear-gradient(145deg, #ffe397, #edfeff);
    border: 1px solid grey;
    border-radius: 12px;
    width: 45%;
    height: 1.5em;
    font-size: 0.875em;
    padding-left: 2.5%;
    padding-right: 2.5%;
    padding-top: 0.25em;
    float: left;
    margin-left: 25%;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    padding-bottom: 0.25em;
    color: green;
    text-shadow: 0px 1px lawngreen;
}
#AdaptationEffect2 {
	
	margin-top: 0.25em;
    background: linear-gradient(145deg, #ffe397, #edfeff);
    border: 1px solid grey;
    border-radius: 12px;
    width: 40%;
    height: 1.5em;
    font-size: 0.875em;
    padding-left: 2.5%;
    padding-right: 2.5%;
    padding-top: 0.25em;
    float: left;
    margin-left: 27.5%;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    padding-bottom: 0.25em;
    color: red;
    text-shadow: 0px 1px indianred;
}
#CreationEvolutionCostArea1 {
	
	padding: 2%;
    float: left;
    margin: 0.5%;
    width: 10%;
    text-align: center;
    border: 1px solid grey;
    background: linear-gradient(185deg, yellow, #dd9327);
    border-radius: 12px;
    margin-right: 1.25%;
    padding-top: 1.75%;
    padding-bottom: 1.25%;
    margin-left: 1%;
    margin-top: 1.5em;
	display:none;
}
#EvolutionCostTitle1 {
	
	font-weight:bold;
    text-decoration:underline;
}
#EvolutionCostValue1 {
	
    font-size:1.625em;
    font-weight:bold;
    color:red;
    font-family:"Arial Black", Gadget, sans-serif;
}
#EvolutionCostPointsTitle1 {
	
	font-size:1em;
	font-weight:bold;
}

#CreationEvolutionHorizontalRule {

	width:94.875%;
	margin-left:2.5%;
    height:3px;
    background:SteelBlue;
    border:1px ridge SteelBlue;
    border-radius:3px;
    clear:left;
    margin-bottom:10px;
	display:none;	
}

#CreationEvolutionArea2 {
	
	width: 30%;
    height: 20%;
    float: left;
    background: linear-gradient(333deg, aliceblue, gold);
    border: 1px solid #9fbae3;
    padding: 2.5%;
    margin-left: 32.5%;
    margin-top: 0em;
    border-radius: 12px;
    margin-bottom: 0.5em;
    display: none;
}
#EvolutionSelectTitle2 {
	
	font-size: 1.25em;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 10px;
	text-align:center;
}
#CreationEvolutionSelections2 {
	
	width:85%;
	margin-left:12.5%;
}
#CreationEvolutionVerticalRule2 {

	float: left;
    width: 1px;
    background: SteelBlue;
    border: 1px ridge SteelBlue;
    height: 28%;
    margin-left: 1%;
    margin-top: 0em;
	display:none;
}
#CreationEvolutionDescription2 {

    margin-left: 1.25%;
    float: left;
    width: 36.5%;
    margin-top: 0em;
    padding: 2.5%;
	padding-top:1.125em;
    overflow: hidden;
    height: 9.5em;
    border: 1px solid gold;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.625em;
    background: linear-gradient(316deg, yellow, gold);
    border: 1px solid grey;
    border-radius: 12px;
    font-weight: bold;
	font-style:italic;
    line-height: 1.25em;
    margin-bottom: 0.5em;
    text-align: center;
	display:none;
}
#CreationEvolutionDescriptionText2 {
	
	height:5.5em;
}
#EvolvementEffect1 {
	
	margin-top: 1em;
    background: linear-gradient(145deg, #ffe397, #edfeff);
    border: 1px solid grey;
    border-radius: 12px;
    width: 45%;
    height: 1.5em;
    font-size: 0.875em;
    padding-left: 2.5%;
    padding-right: 2.5%;
    padding-top: 0.25em;
    float: left;
    margin-left: 25%;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    padding-bottom: 0.25em;
    color: green;
    text-shadow: 0px 1px lawngreen;
}
#EvolvementEffect2 {
	
	margin-top: 0.25em;
    background: linear-gradient(145deg, #ffe397, #edfeff);
    border: 1px solid grey;
    border-radius: 12px;
    width: 40%;
    height: 1.5em;
    font-size: 0.875em;
    padding-left: 2.5%;
    padding-right: 2.5%;
    padding-top: 0.25em;
    float: left;
    margin-left: 27.5%;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    padding-bottom: 0.25em;
    color: red;
    text-shadow: 0px 1px indianred;
}
#CreationEvolutionCostArea2 {
	
	padding: 2%;
    float: left;
    margin: 0.5%;
    width: 10%;
    text-align: center;
    border: 1px solid grey;
    background: linear-gradient(185deg, yellow, #dd9327);
    border-radius: 12px;
    margin-right: 1.25%;
    padding-top: 1.75%;
    padding-bottom: 1.25%;
    margin-left: 1%;
    margin-top: 1em;
	display:none;
}
#EvolutionCostTitle2 {
	
	font-weight:bold;
    text-decoration:underline;
}
#EvolutionCostValue2 {
	
    font-size:1.625em;
    font-weight:bold;
    color:red;
    font-family:"Arial Black", Gadget, sans-serif;
}
#EvolutionCostPointsTitle2 {
	
	font-size:1em;
	font-weight:bold;
}

#SpeciesTypePictureArea2 {
	
    float:left;
    width:34.625%;
    margin-left:5.25%;
    height:30.25%;
    margin-top:0.5em;
	border:1px solid grey;
	margin-bottom:12px;
	background:linear-gradient(45deg, #afb4dd, #f9e56b);
	border:1px solid gold;
    background:url(Images/CreationPics/Raptor.gif);
    background-size:100% 100%;
	border:none;
	display:none;
}

#SpeciesTypeSelectArea {
	
	border:1px solid #9fbae3;
    float:left;
    width:52.5%;
    margin-left:21.25%;
    margin-top:0.5em;
    padding:2.5%;
    height:22.5%;
	margin-bottom:10px;
	background:linear-gradient(333deg, aliceblue, gold);
}

#SpeciesSelectTitle, .BonusSelectTitle {
	
	font-size:1.5em;
    font-weight:bold;
    text-decoration:underline;
    margin-bottom:10px;
}
.BonusSelectTitle {

	font-size:1.25em;
	margin-top:2.5%;
}

.CreationLackOfPointsYellow {

	color:red;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	margin-left:5px;
}
.CreationLackOfPointsRed {

	color:darkred;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	margin-left:5px;
}

#SpeciesSelectionsLeft {
	
    clear:left;
    float:left;
    width:50%;
    height:25%;
}
#SpeciesSelectionsRight {
	
    float:left;
    width:45%;
	margin-left:5%;
    height:7em;
}
.SpeciesSelectionChoice, .BonusSelectionChoice {
	
	cursor:pointer;
}
.SpeciesTypeTitle, .BonusSelectionTitle {
	
	font-size:1.25em;
}

#GovernmentsAllowedArea {
	
	float: left;
    width: 29.625%;
    padding: 2.5%;
    padding-top: 1%;
    margin-left: 2.5%;
    height: 25.25%;
    margin-top: 0.5em;
    margin-bottom: 10px;
    background: linear-gradient(316deg, yellow, gold);
    border: 1px solid grey;
    border-radius: 12px;
    text-align: center;
	display:none;
}

#GovernmentsAllowedTitle {
	
	font-weight: bold;
    font-size: 1.25em;
    text-decoration: underline;
    margin-bottom: 0.375em;	
}

#GovernmentsList {
	
    font-style: italic;
    font-size: 0.875em;
    border: 1px solid gold;
    background: linear-gradient(45deg, yellow, gold);
    width: 60%;
    padding-top: 0.5em;
    padding-bottom: 0.375em;
    margin-left: 20%;
    border-radius: 5px;
}

#SpeciesTypePictureArea {
	
    float:left;
    width:34.625%;
    margin-left:2.5%;
    height:30.25%;
    margin-top:0.5em;
	border:1px solid grey;
	margin-bottom:10px;
	background:linear-gradient(45deg, #afb4dd, #f9e56b);
	border:1px solid gold;
    background:url(Images/CreationPics/Raptor.gif);
    background-size:100% 100%;
	border:none;
	display:none;
}
	
#SelectionSeparationLineOne {
	
	width:94.875%;
	margin-left:2.5%;
    height:3px;
    background:SteelBlue;
    border:1px ridge SteelBlue;
    border-radius:3px;
    clear:left;
    margin-bottom:10px;
}

#CostBroadArea {
	
	height:21.25%;
    clear:left;
    margin-left:3.5%;
    width:92.125%;
    padding-left:1.5%;
	margin-bottom:10px;
}

#CostValueArea {

	padding:2%;
    clear:left;
    float:left;
    margin:0.5%;
	margin-top:0%;
    width:10%;
    text-align:center;
    border:1px solid grey;
    background:linear-gradient(185deg, yellow, #dd9327);
    border-radius:12px;
    margin-right:1.25%;
    padding-top:1.75%;
    padding-bottom:1.25%;
	display:none;
}
	
#CostTitle {
	
	font-weight:bold;
    text-decoration:underline;
}
#CostValue {
	
    font-size:1.625em;
    font-weight:bold;
    color:red;
    font-family:"Arial Black", Gadget, sans-serif;
}
#PointsTitle {
	
	font-size:1em;
	font-weight:bold;
}
#CostVerticalLine {
	
    float:left;
    width:1px;
    background:SteelBlue;
    border:1px ridge SteelBlue;
    height:99%;
	display:none;
}

.FinalizationTitle, .LoginDetailsTitle {
	
	font-size:0.875em;
	margin-top:2.5%;
}
.LoginDetailsTitle {
	
	display:block;
	
}
.FinalizationTitle {
	
    display: flex;
    margin-left: 35px;
}
.FinalizationInput, .LoginDetailsInput {
	
	font-size:0.75em;
	height:10px;
	padding:2px;
	padding-left:5px;
	width:72.5%;
	margin-top:2px;
	display:none;
}
.FinalizationInput {
	
	display:inline;
	width:73.5%;
	height:auto;
}
.LoginDetailsInput {
	
    font-size: 1.125em;
    height: 1em;
	display:block;
	margin-left:12%;
}
.FinalizationSelect {
	
	height:20px;
	width:77.5%;
	padding-left:1px;
	height:auto;
}
#RulersNameTitle, #RulersName {
	
	display:block;
}
#Archetype_RulersName {
	
	display:inline;
}

#FinalizationHorizontalLine, .Archetype_FinalizationHorizontalLine {
	
    background: SteelBlue;
    border: 1px ridge SteelBlue;
    border-radius: 3px;
	display:block;
	margin-top:1.375em;
	height:1px;
}
.Archetype_FinalizationHorizontalLine {
	
    margin-bottom: 1.5em;
	margin-top:0;
}
.ArchetypeLine {
	
	border: 0;
    margin-left: -2px;
}

#FinalizationFinishButton, #Archetype_FinalizationFinishButton, #LoginFinalPlayButton, #FlagAcceptButton, #Archetype_FinalizationBackButton {
	
	clear:left;
	font-weight:bold;
	text-align:center;
	width:50%;
	height:30px;
	line-height:28px;
    margin-left: 22.5%;
	margin-top:0.625em;
	border:1px solid #885555;
	background:linear-gradient(180deg, #ffe13d, #b9b910);
	border-radius:5px;
	margin-top:0px;
	color:#193519;
	text-shadow:1px 1px white;
	text-decoration:none;
	cursor:not-allowed;
	opacity:0.5;
}
#Archetype_FinalizationFinishButton, #Archetype_FinalizationBackButton {
	
	width:calc(50% - 2px);
	margin-left:25%;
	margin-top:25px;
	opacity:1;
	cursor:pointer;
}
#Archetype_FinalizationBackButton {
	
    background: linear-gradient(45deg, #3cab40, #6068c5);
    color: white;
    width: 150px;
    margin-left: 16px;
    text-shadow: 1px 1px black;
    border: 2px outset SteelBlue;
    margin-top: 6px;
}
#Archetype_FinalizationBackButton:hover {

	background:aliceblue;
	color:dodgerblue;	
}

#FinalizationFinishButton:hover, #LoginFinalPlayButton:hover, #Archetype_FinalizationFinishButton:hover {
	
	border:1px solid #3e2828;
	background:linear-gradient(180deg, #b9b910, #ffe13d);
	text-decoration:underline;
}

#LoginFinalPlayButton {
	
	margin-left:25%;
	margin-top:1.5em;	
}

#BonusesSelectionArea, #BonusesSeparationLine, #BonusesDetailsArea, #FinalizationRightPanel {
	
	float:left;
	display:none;
}

#BonusesSelectionArea, #FinalizationLeftPanel, #LoginDetailsPanel, #FlagCreationPanel {
	
	clear:left;
	width:32.5%;
	height:55.5%;
	border:1px solid #9fbae3;
    margin-left:7.5%;
    margin-top:2.5%;
	padding:0%;
	padding-top:0.75%;
    padding-left:2.5%;
	margin-bottom:10px;
	background:linear-gradient(333deg, aliceblue, gold);
}
#LoginDetailsPanel {
	
    width: 50%;
    margin-left: 22.5%;
    margin-top: 7.5%;
    height: 50%;
    text-align: center;
	padding-left:0px;
	display:none;
}

#FlagCreationPanel {
	
	display:none;
	width:87.5%;
	margin-left:5%;
	height:71.25%;
}

#FlagPreviewTitle {
	
    clear: left;
    float: left;
    width: 25%;
    text-align: right;
    height: 5em;
    margin-top: 4.25em;
	font-size:1.125em;
	font-weight:bold;
	text-decoration:underline;
}

#FlagPreviewArea {
	
    float: left;
    width: calc(47.5% - 2px);
    margin-left: 1.25%;
    height: 10em;
    margin-top: 0.5em;
    border: 1px ridge SteelBlue;
    margin-bottom: 0.75em;
}
#FlagBGArea {
	
	position:fixed;
	width:41.25%;
	height:10em;
	z-index:5;
	background:url('Images/Flags/Elements/Element10.png');
	background-size:100% 100%;
}
#FlagFGArea {
	
	position:fixed;
	width:41.25%;
	height:10em;
	z-index:6;
	background:url('Images/Flags/Elements/Element20.png');
	background-size:100% 100%;
}
#FlagDetail {
	
	position:fixed;
	width:41.25%;
	height:10em;
	z-index:7;
	background:url('Images/Flags/Elements/Element30.png');
	background-size:100% 100%;
}


#FlagAcceptButtonArea {
	
	float:left;
	width:25%;
	margin-left:1.25%;
    text-align: left;
    height: 5em;
    margin-top: 4.375em;
}
#FlagAcceptButton {
	
    margin-left: 0em;
	opacity:1;
	cursor:pointer;
}
#FlagAcceptButton:hover {

	border:1px solid #3e2828;
	background:linear-gradient(180deg, #b9b910, #ffe13d);
	text-decoration:underline;
}

.FlagElementArea {
	
	float:left;
	width:28%;
	margin-left:5%;
}
#FlagElement1Area {
	
	clear:left;
	margin-left:1.5%;
}

.FlagElementLastButton {
	
	clear:left;
	float:left;
	width:5%;
	margin-top:0.5em;
	height:5em;
	background:url('Images/FlagLeftArrow.png');
	background-size:100% 100%;
	cursor:pointer;
}
.FlagElementLastButton:hover {

	background:url('Images/FlagLeftArrow_Highlight.png');
	background-size:100% 100%;
}

.FlagElementPreviewArea {
	
	float:left;
	width:calc(87.5% - 2px);
	margin-left:1.25%;
    border:1px ridge SteelBlue;
	height:5.75em;
	margin-bottom:0.375em;
}
.FlagElementNextButton {
	
	float:left;
	width:5%;
	height:5em;
	margin-left:1.25%;
	margin-top:0.5em;
	background:url('Images/FlagRightArrow.png');
	background-size:100% 100%;
	cursor:pointer;
}
.FlagElementNextButton:hover {

	background:url('Images/FlagRightArrow_Highlight.png');
	background-size:100% 100%;
}

.FlagElementTitle {
	
	clear:left;
	width:100%;
	text-align:center;
	font-size:0.875em;
	font-weight:bold;
}

#FinalizationLeftPanel {
	
	display:none;
	float:left;
	height:72.5%;
	margin-top:1.5%;
	padding-top:1.5%;
}

.BonusSelectionsArea {
	
	font-size:0.75em;	
}

#BonusesSeparationLine {
	
    width: 1px;
    background: SteelBlue;
    border: 1px ridge SteelBlue;
    height: 62%;
    margin-left: 5%;
    margin-top: 0.5em;
}

#BonusesDetailsArea, #FinalizationRightPanel {
	
	margin-left:1%;
	height:64%;
	width:50%;
	text-align:center;
}
#FinalizationRightPanel {
	
	width:55%;
}

#PlanetaryLeaderArea {
	
	float:left;
	margin-left:1%;
	height:64%;
	width:50%;
	display:none;
}
#LeaderPicture {
	
	clear:left;
	float:left;
	width:35%;
	height:45%;
	margin-top:2.5%;
	border:2px outset grey;
}
#LeaderSideArea {
	
    float: left;
 	margin-left:2.5%;
    width: 55%;
    height: 56.25%;
	overflow: hidden;
}

#LeaderName {
	
    margin-top: 5%;
	font-size:1.125em;
	font-weight:bold;
	clear:left;
}
#LeaderDescription {
	
    margin-top: 2.5%;
    margin-left: 2.5%;
    font-size: 0.6875em;
	line-height:120%;
	height:auto;
    text-align: left;
    text-indent: 12px;
}
#LeaderStats, #TechStats {
	
	clear:left;
	float:left;
	width:45%;
	height:27.5%;
}
.LeaderStatPoint, .TechStatPoint {
	
	font-size: 0.75em;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid grey;
    background: linear-gradient(180deg, #9bbdb3, #ffffff);
    color: midnightblue;
    height: 1em;
    padding-top: 0.25em;
    border: 1px outset grey;
    padding-bottom: 0.25em;
    margin-bottom: 2px;
	margin-left:5%;
}
.TechStatPoint {
	
	font-size:0.625em;
}

#LeaderCostArea, #BonusTechCosts, #AdditionalBonusCostArea {
	
	float:left;
	width:40%;
	margin-left:6%;
	margin-top:-5%;
	padding:2%;
    text-align:center;
    border:1px solid grey;
    background:linear-gradient(185deg, yellow, #dd9327);
    border-radius:12px;
    padding-top:1.75%;
    padding-bottom:1.25%;
}
#BonusTechCosts {
	
	margin-top:5%;
	clear:left;
	margin-left:5%;
	width:25%;
}

#LeaderHorizontalLine, #BonusTechHorizontalLine {
	
    width: 96.375%;
    height: 1px;
    background: SteelBlue;
    border: 1px ridge SteelBlue;
    border-radius: 3px;
    clear: left;
    margin-bottom: 7px;
}
#BonusTechHorizontalLine {
	
	margin-top:7.5%; 
	margin-left:-4.125%; 
}

#SelectLeaderButton, #SelectBonusTechsButton, #AdditionalBonusSelectButton {
		
	clear:left;
	font-weight:bold;
	text-align:center;
	width:50%;
	height:30px;
	line-height:28px;
    margin-left: 22.5%;
	border:1px solid #885555;
	background:linear-gradient(180deg, #ffe13d, #b9b910);
	border-radius:5px;
	margin-top:0px;
	color:#193519;
	text-shadow:1px 1px white;
	text-decoration:none;
	cursor:pointer;
}
#SelectLeaderButton:hover, #SelectBonusTechsButton:hover, #AdditionalBonusSelectButton:hover {
	
	border:1px solid #3e2828;
	background:linear-gradient(180deg, #b9b910, #ffe13d);
	text-decoration:underline;
}
#AdditionalBonusSelectButton {
	
	display:none;
}

#SelectBonusTechsButton {
	
	margin-top:5%
}

#SelectLeaderButtonText, #AdditionalSelectButtonText {
	
	vertical-align:middle;
}
#LeaderCostTitle, #BonusTechCostTitle, #AdditionalBonusCostTitle {
	
	font-weight:bold;
    text-decoration:underline;
}
#LeaderCostValue, #BonusTechCostValue, #AdditionalBonusCostValue {
	
    font-size:1.625em;
    font-weight:bold;
    color:red;
    font-family:"Arial Black", Gadget, sans-serif;
}
#LeaderPointsTitle, #BonusTechPointsTotal, #AdditionalBonusPointsTitle {
	
	font-size:1em;
	font-weight:bold;
}

.BonusTechUnavailable {
	
	padding-left:4px;
	color:red;
	font-weight:bold;
}

#BonusTechsArea, #AdditionalBonusArea {
	
    float: left;
    margin-left: 1%;
    height: 64%;
    width: 50%;
    display: none;
}
#BonusTechPicture {
	
	width:50%;
	margin-left:23.5%;
	height:32.5%;
	margin-top:1.625%;
}
#BonusTechDescriptionArea, #AdditionalBonusDescription {
	
	float:left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.625em;
    background: linear-gradient(316deg, yellow, gold);
    border: 1px solid grey;
    border-radius: 12px;
	padding-top:0.25em;
    padding-left: 2.75%;
    padding-right: 2.75%;
    height: 9.5em;
    width: 47.5%;
	overflow:hidden;
    font-weight: bold;
    line-height: 1.25em;
	margin-left:5%;
	margin-top:1em;
}
#BonusTechDescription {
	
    vertical-align: middle;
    display: table-cell;
    height: 9em;
}

#BonusTechStats {
	
	clear:left;
	float:left;
	margin-top:3.5%;
	height:50%;
	width:70%;
	margin-left:11.5%;
	font-size:1.125em;
}

#SelectionInstructionArea, #BonusInstructionArea, #FinalizationInstructionArea, #FinalizationPlayingAsArea, #PlayingAsArea {
	
    margin-left: 1.25%;
    float: left;
    width: 96.125%;
    margin-top: 1%;
    overflow: hidden;
    height: 100%;
    text-align: center;
}
#FinalizationInstructionArea, #FinalizationPlayingAsArea, #PlayingAsTitle, #PlayingAsArea {
	
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.625em;
    background: linear-gradient(316deg, yellow, gold);
    border: 1px solid grey;
    border-radius: 12px;
	padding-top:0.25em;
    padding-left: 2.75%;
    padding-right: 2.75%;
    height: 9.5em;
    width: 62.5%;
	margin-left:15%;
	overflow:hidden;
    font-weight: bold;
    line-height: 1.25em;
	margin-top:5em;
}
#FinalizationInstructionArea {
	
	margin-left:16.25%;
	display:table;
}
#FinalizationInstructionAreaText {
	
    vertical-align: middle;
    height: 9.5em;
    display: table-cell;
    text-shadow: 1px 1px yellow;
    color: tomato;
	line-height: 1.375em;
}
#FinalizationGameOfPlanets {
	
	color:royalpurple;
}

#FinalizationPlayingAsArea {
	
	width: 90%;
    margin-left: 3.5%;
    margin-top: 2em;
    height: 60.5%;
    background: linear-gradient(45deg, #ffffff, #5b89a4);
	display:none;
}
#PlayingAsTitle {
	
    background: linear-gradient(180deg, gold, #fff);
    margin-top: 0.625em;
    border-radius: 2px;
    font-size: 2em;
    border-top-left-radius: 25%;
    border-top-right-radius: 25%;
    height: 3em;
    margin-left: 15.375%;
    padding-top: 1em;
	text-decoration:underline;
	color:darkred;
	text-shadow:1px 1px honeydew;
}
#PlayingAsArea {
	
    margin-top: -1px;
    margin-left: 2.5%;
    width: 90%;
    font-size: 1.25em;
    height: 4.25em;
    padding-top: 1.75em;
    font-weight: normal;
    font-style: italic;
    color: black;
    text-shadow: 1px 1px yellow;
}

#BonusInstructionArea {
	
	margin-left:10%;
	width:80%;
	height:auto;
	margin-top:17.5%;
}

#AdditionalBonusTitle {
	
	font-weight: bold;
    font-size: 1.25em;
    text-decoration: underline;
    width: 96.25%;
    text-align: center;
	text-shadow:1px 0px grey;
	margin-top:2.5%;
}

#SelectionInstructionAreaText, #BonusInstructionAreaText {
	
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.875em;
    background: linear-gradient(316deg, yellow, gold);
    border: 1px solid grey;
    border-radius: 12px;
    padding: 0.5em;
    padding-left: 2.5%;
    padding-right: 2.5%;
    padding-top: 1em;
    height: 63.5%;
    width: 93.75%;
    font-weight: bold;
    line-height: 1.875em;
}
		
#SelectionDescriptionArea {
	
    margin-left:1.25%;
    float:left;
    width:81.125%;
    margin-top:1%;
    overflow:hidden;
    height:92.5%;
    text-align:center;
	display:none;
}
		
#SelectionDescription {
	
    font-style:italic;
    font-family:Verdana, Geneva, sans-serif;
    font-size:0.625em;
    background:linear-gradient(316deg, yellow, gold);
    border:1px solid grey;
    border-radius:12px;
    padding:0.5em;
    padding-left:2.5%;
    padding-right:2.5%;
	padding-top:1em;
    height:42.5%;
    width:93.75%;
    font-weight:bold;
	line-height:1.75em;
}
		
#SelectionDescriptionText {
	
	display:inline-block;
	vertical-align:middle;
	line-height:normal;	
	margin-left:1em;
	margin-right:1em;
}

#SelectionEffect1 {
	
	margin-top:1.25%;
    background:linear-gradient(316deg, yellow, gold);
    border:1px solid grey;
    border-radius:12px;
    width:35%;
    font-size:0.75em;
    padding:0.375em;
    float:left;
    margin-left:10%;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight:bold;
    padding-bottom:0.25em;
	color:green;
	text-shadow:0px 1px lawngreen;
}
#SelectionEffect2 {
	
	margin-top:1.25%;
    background:linear-gradient(316deg, yellow, gold);
    border:1px solid grey;
    border-radius:12px;
    width:35%;
    font-size:0.75em;
    padding:0.375em;
    margin-left:5%;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    float:left;
    font-weight:bold;
    padding-bottom:0.25em;
	color:red;
	text-shadow:0px 1px indianred;
}

#SelectionSeparationLineTwo {
	
	width:94.875%;
	margin-left:2.5%;
    height:3px;
    background:SteelBlue;
    border:1px ridge SteelBlue;
    border-radius:3px;
    clear:left;
    margin-bottom:10px;
}

#PointsRemainingArea {
	
	height:12.25%;
    clear:left;
    margin-left:2.5%;
    border:2px ridge SteelBlue;
    width:calc(95% - 4px);
	background:linear-gradient(180deg, #fbf536, #b71414);
}
	
#PointsRemainingTitle {

	clear:left;
	float:left;
	width:87.75%;
	font-size:2.25em;
	margin-top:1%;
	margin-left:2%;
	font-weight:bold;
}
#PointsRemainingVerticaline {
	
	float:left;
	width:1px;
	margin-left:5px;
	background:SteelBlue;
	border:1px ridge SteelBlue;
	height:100%;
}
#PointsRemainingValue {
	
	float:left;
	width:7.5%;
	font-size:2.75em;
	font-weight:bold;
	margin-left:4px;
	margin-top:3px;
	text-align:center;
}
	
#SpeciesStatsContainer {
	
    position:fixed;
    z-index:3;
	display:none;
}
#SpeciesStatsContainerBacking {
	
    position:fixed;
    z-index:2;
	background:linear-gradient(30deg, black, transparent);
	display:none;
}
.SpeciesStatsArea {
	
    background:linear-gradient(180deg, #9bbdb3, #ffffff);
    border:1px double grey;
	line-height:1.875em;
	display:none;
}
.SpeciesStatTop {
	
    font-size:0.625em;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    border-bottom:1px solid grey;
    color:midnightblue;
	cursor:default;
	background:transparent;
}
.SpeciesStatTop:hover {
	
	background:linear-gradient(180deg, #9bbdb3, #ffffff);
}

.SpeciesStatBottom {
	
    font-size:0.625em;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    border-top:1px solid grey;
	color:firebrick;
	cursor:help;
	background:transparent;
}
.SpeciesStatBottom:hover {
	
	background:linear-gradient(180deg, #9bbdb3, #ffffff);
}

	
#SpeciesSelectionContainer {
	
    position:fixed;
    z-index:3;
	display:none;
}
#SpeciesSelectionContainerBacking {
	
    position:fixed;
    z-index:2;
	background:linear-gradient(-185deg, black, transparent);
	display:none;
}	
.SpeciesSelectionsArea {
	
	width:100%;
}
.SpeciesSelection {
	
	vertical-align:middle;
    background:white;
    border:1px double grey;
	margin-bottom:5px;
	cursor:default;
	background:linear-gradient(45deg, #ffffff, #5b89a4);
	border-top-left-radius:5px;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:2px;
	display:none;
}
.SpeciesSelection:hover {
	
	background:linear-gradient(45deg, #b8caff, #a7deff);
	border:1px double gold;
}
#SpeciesSelection8, #SpeciesSelection9, #SpeciesSelection10 {
	
	font-style:italic;
	font-style: italic;
    background: linear-gradient(45deg, orange, gold);
    border: 1px double slategray;
    color: mintcream;
    font-size: 0.75em;
	height:2.625em;
	margin-bottom:0px;
	text-transform:uppercase;
}
#SpeciesSelection8 {
	
	margin-top:1.5em;
}
#SpeciesSelection11, #SpeciesSelection12 {
	
    font-weight: bold;
    background: linear-gradient(45deg, gold, #fff);
    border: 1px double gold;
    color: royalblue;
    margin-top: 2em;
    letter-spacing: 3px;
    height: 2.625em;
    padding-left: 1px;
    font-size: 0.75em;
    text-align: center;
	border-bottom-right-radius:5px;
    border-top-left-radius:10px;
    border-top-right-radius:2px;
}

#CancelCreationButton, #Titles_CancelCreationButton {
	
    position: fixed;
    z-index: 4;
    width: 150px;
    height: 50px;
    margin-left: calc(50% - 85px);
    margin-top: 3em;
    text-align: center;
    background: linear-gradient(45deg, #3cab40, #6068c5);
    padding: 5px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: white;
    text-shadow: 1px 1px black;
    line-height: 25px;
    border: 2px outset SteelBlue;
    border-radius: 5px;
    cursor: pointer;
	display:none;
}
#Titles_CancelCreationButton {
	
    left: calc(50% - 75px);
    top: calc(47.5% + 200px);
    margin: 0;
    z-index: 100;
}
#CancelCreationButton:hover, #Titles_CancelCreationButton:hover {

	background:aliceblue;
	color:dodgerblue;	
}
#CancelCreationButtonBacking {
	
	position:fixed;
    z-index:3;
    background:linear-gradient(0deg, black, transparent);
    width:220px;
    height:96px;
    margin-left:calc(50% - 88px);
    margin-top:2em;
    border-radius:15px;
	display:none;
	visibility:hidden;
}
#CancelCreationButtonText, #Titles_CancelCreationButtonText {
	
	vertical-align:middle;
	font-size:1.125em;
	font-weight:normal;
}

#StartGame {
	
	clear:left;
	border:2px outset SteelBlue;
	border-radius:5px;
	padding:5px;
	padding-bottom:6px;
	text-align:center;
	font-size:1.75em;
	font-weight:normal;
	width:calc(30% - 12px);
	margin-top:1.75em;
	margin-left:35%;
	cursor:pointer;	
}
#StartEmpireScreen {
	
	display:none;
	position:absolute;
	z-index:133;
	border:1px double grey;
	top:47.5%;
	left:50%;
	width:800px;
	height:172px;
	margin-left:-400px;
	margin-top:-200px;
	box-shadow: 0px 0px 15px 15px #33333399;
}
#SpeciesChoicesArea {
	
    width: 100%;
    padding-left: 1%;
    padding-top: 0.875%;
    padding-bottom: 1.25%;
    height: 100%;
	background:burlywood;
}
	.ArchetypeSelection {
		
		float: left;
		width: 79px;
		margin: 0.5%;
		border: 2px outset grey;
		border-radius: 5px;
		height: 79px;
		background: linear-gradient(45deg, grey, black);
		cursor:pointer;
		display:none;
	}
	.ArchetypeSelection:hover {
		
		border:2px inset steelblue;
		background:gold;
	}
	.ArchetypeCurrent {
		
		background:gold;
	}
	
		#Archetype_0 {
			
			background: linear-gradient(45deg, red, yellow);
		}
		#Archetype_0:hover {
			
			border:2px solid gold;
			background:white;
		}
		
		.ArchetypeSelectionImage {
			
			width:75px;
			height:75px;
		}


#SpeciesInfoArea {
	
	position:absolute;
	z-index:132;
	background:white;
	border:1px double grey;
	top:calc(47.5% + 106px);
	left:50%;
	width:800px;
	height:200px;
	margin-left:-400px;
	margin-top:-100px;
	box-shadow: 0px 0px 15px 15px #33333399;
	display:none;
}
	#SpeciesInfoText {
		
		display:table-cell;
		vertical-align:middle;
		font-size:3em;
		letter-spacing:0.05em;
		text-align:center;
		text-transform:uppercase;
		opacity:0;
	}
	.ArchetypeDetails {
		
		display:none;
		width:100%;
		height:100%;
	}
	.ArchetypeDetailsPicArea {
		
			clear:left;
			float:left;
			margin:10px;
			margin-left:11px;
			margin-right:15px;
			width:178px;
			height:178px;
			border: 1px solid #C9C9C9;
			background:gold;
	}
		.ArchetypeDetailsPic {
			
			width:100%;
			height:100%;
		}
		
	.ArchetypeDetailsArea {
		
		float:left;
		width:590px;
		height:177px;
		margin-top:10px;
	}
		.ArchetypeDescription, .ArchetypeStats {
			
			width:560px;
			height:74%;
			border:1px solid #C9C9C9;
			border-radius:5px;
			padding:10px;
			font-size:0.875em;
			color:saddlebrown;
			font-weight:bold;
			text-shadow:1px 1px #C9C9C9;
			letter-spacing:1px;
			text-align:left;
			background:#F9F9F9;
		}
			.ArchetypeDescription {
				
				display:none;
			}
			
		.ArchetypeStats {
			
			width: 99%;
			font-size:0.875em;
			border:1px solid green;
			background:lightgoldenrodyellow;
		}
			.ArchetypeStats_Details {
				
				width:100%;
				height:25px;
				margin-bottom: 5px;
			}
				.ArchetypeStats_Details_Section {
					
					float:left;
					width:33%;
					margin-right:0.333%;
					height:25px;
				}
					.ArchetypeStats_Details_Label {
						
						display:inline;
						font-size: 0.875em;
						color: black;
					}
					.ArchetypeStats_Details_Value {
						
						display:inline;
						font-size: 0.875em;
						color: blue;
					}
					.Archetype_ToggleDescription, .Archetype_ToggleDescription_Back {
						
						clear: left;
						border: 2px outset SteelBlue;
						border-radius: 5px;
						padding: 5px;
						padding-bottom: 4px;
						text-align: center;
						height: auto;
						font-size: 1em;
						font-weight: normal;
						width: 75%;
						margin-top: -4px;
						margin-left: 3.75%;
						cursor: pointer;
					}
					.Archetype_ToggleDescription_Back {
						
						display:none;
						width:135px;
						margin-left:0px;
						margin-right:8px;
						clear:none;
						margin-top:16px;
						float:right;
					}
					
					.Archetype_ToggleDescription:hover, .Archetype_ToggleDescription_Back:hover {
						
						color:dodgerblue;
						background:aliceblue;
						text-shadow:0px 1px gold;
					}
		
			.ArchetypeStatsSection {
				
				float:left;
				width:33%;
				margin-right:0.333%;
				height:85px;
			}
			.ArchetypeFirstStatsSection {
				
				clear:left;
			}
			.ArchetypeCoreSection {
				
				height:35px;
			}
			
				.ArchetypeStatLabel {
					
					width: 90%;
					font-size: 0.75em;
					color: black;
					height: 9px;
					margin-top: 1px;
				}
				.ArchetypeCoreLabel	{
					
					font-size:0.9375em;
					margin-top:-5px;
				}
				.ArchetypeStatCluster {
					
					box-sizing: border-box;
					width: 90%;
					background: green;
					height: 12px;
					border-top-right-radius: 10px;
					border-bottom-right-radius: 10px;
				}
				.ArchetypeCoreCluster {
					
					height:15px;
					margin-top:7px;
					background:darkblue;
				}
				.ArchetypeStatBar {
					
					box-sizing: border-box;
					text-align: left;
					padding-top: 3px;
					padding-bottom: 3px;
					margin-top: 3px;
					color: white;
					background-color: limegreen;
					height: 12px;
				}
				.ArchetypeCoreStatBar {
					
					height:15px;
					background:cornflowerblue;
				}
			
		.PlayAsSpecies, #CustomSpecies {
			
			clear: left;
			float:left;
			border: 2px outset SteelBlue;
			border-radius: 5px;
			padding: 5px;
			padding-bottom: 4px;
			text-align: center;
			font-size: 1.75em;
			font-weight: normal;
			width: calc(60% - 12px);
			margin-top: 8px;
			margin-left: 18.75%;
			cursor: pointer;
		}
		#CustomSpecies {
			
			width:calc(45% - 12px);
			margin-left:25%;
			background: wheat;
			color: brown;
			text-shadow: 1px 1px yellow;
		}
		#CustomSpecies:hover {
			
			color:dodgerblue;
			background:aliceblue;
			text-shadow:0px 1px gold;
		}
		
			#CustomSpeciesDescription {
				
				display:block;
				width:560px;
				height:105px;
				border:1px solid #C9C9C9;
				border-radius:5px;
				padding:10px;
				font-size:0.875em;
				color:saddlebrown;
				font-weight:bold;
				text-shadow:1px 1px #C9C9C9;
				letter-spacing:1px;
				text-align:left;
				background:#F9F9F9;
				text-align:center;
				font-size:1.5em;
				line-height:180%;
				color:lightgoldenrodyellow;
				text-shadow: 1px 1px black;
				background: darkgoldenrod;
			}
		
#ContinueArea {
	
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    height: 7.5%;
    display: none;
}
	#ContinueText {
		
		display:table-cell;
		vertical-align:middle;
		font-size:1.25em;
		letter-spacing:0.125em;
		text-align:center;
		text-transform:uppercase;
	}

#TitlesScreen {
	
	display:none;
	position:fixed;
	z-index:33;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;
	background: palegoldenrod;
	text-align:center;
	box-shadow: 0px 0px 15px 15px #33333399;
}
	#Archetype_DetailsTitle {
		
		clear: left;
		width: 100%;
		text-align: center;
		height: 50px;
		display: table;
	}
		#Archetype_DetailsText {
			
			letter-spacing: 5px;
			font-size: 2.25em;
			height: 63px;
			font-weight: bold;
			text-shadow: 1px 1px cadetblue;
			text-transform: uppercase;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			color: brown;
		}

	#Archetype_DetailsArea {
		
		clear:left;
		float:left;
		width:300px;
		font-size:1.25em;
		height:290px;
		margin-right:7px;
		border-right:2px solid steelblue;
	}
	#Archetype_ButtonsArea {
		
		float:left;
		width:185px;
		height:80px;
	}
		#Archetype_Image {
			
			clear: left;
			height: 125px;
			width: auto;
			margin-bottom: 15px;
			margin-top: 10px;
		}
		
		


		p.CreatedBy {
			
			box-shadow: -1px 0px 1rem 0rem #000;
			height:2.625rem;
			background:#333333cc;
			border-radius:1rem;
			width:95%;
			font-size:1.625rem;
			margin-bottom:3rem;
		}
		a.normallink {
			
			color:#5c9cf1;
			text-decoration:underline;
			text-shadow:1px 1px #4a3e35;
		}
		a.normallink {
			
			color:#0c68e2;
			text-decoration:underline;
		}
		a.normallink:active, .normallink:visited, .normallink:active; {
			
			color:#0a66c2;
		}
		
@media (min-width:480px) {
	
    #LoadingScreen {
		
        top:50%;
        left:50%;
        width:350px;
        height:350px;
        margin-left:-175px;
        margin-top:-225px;
    }
	#LoadingScreenBacking {
		
        top:50%;
        left:50%;
        width:400px;
        height:400px;
        margin-left:-200px;
        margin-top:-250px;
	}
	#LoadingScreenSecondBacking {
		
        top:50%;
        left:50%;
        width:450px;
        height:450px;
        margin-left:-225px;
        margin-top:-275px;
	}

    #FrontScreen {
		
        top:47.5%;
        left:50%;
        width:800px;
        height:400px;
        margin-left:-400px;
        margin-top:-200px;
    }
	#FrontScreenBacking {
		
        top:47.5%;
        left:50%;
        width:850px;
        height:450px;
        margin-left:-425px;
        margin-top:-225px;
	}
	#FrontScreenSecondBacking {
		
        top:47.5%;
        left:50%;
        width:900px;
        height:500px;
        margin-left:-450px;
        margin-top:-250px;
	}

    #MultiLoginScreen {
		
        top:47.5%;
        left:50%;
        width:800px;
        height:400px;
        margin-left:-400px;
        margin-top:-200px;
    }
	#MultiLoginScreenBacking {
		
        top:47.5%;
        left:50%;
        width:850px;
        height:450px;
        margin-left:-425px;
        margin-top:-225px;
	}
	#MultiLoginScreenSecondBacking {
		
        top:47.5%;
        left:50%;
        width:900px;
        height:500px;
        margin-left:-450px;
        margin-top:-250px;
	}

    #JoinScreen {
		
        top:50%;
        left:50%;
        width:350px;
        height:450px;
        margin-left:-175px;
        margin-top:-225px;
    }
	#JoinScreenBacking {
		
        top:50%;
        left:50%;
        width:400px;
        height:500px;
        margin-left:-200px;
        margin-top:-250px;
	}
	#JoinScreenSecondBacking {
		
        top:50%;
        left:50%;
        width:450px;
        height:550px;
        margin-left:-225px;
        margin-top:-275px;
	}

    #AuthenticateScreen {
		
        top:50%;
        left:50%;
        width:300px;
        height:200px;
        margin-left:-150px;
        margin-top:-100px;
    }
	#AuthenticateScreenBacking {
		
        top:50%;
        left:50%;
        width:350px;
        height:250px;
        margin-left:-175px;
        margin-top:-125px;
	}
	#AuthenticateScreenSecondBacking {
		
        top:50%;
        left:50%;
        width:400px;
        height:300px;
        margin-left:-200px;
        margin-top:-150px;
	}

    #WelcomeScreen {
		
        top:47.5%;
        left:50%;
        width:800px;
        height:400px;
        margin-left:-400px;
        margin-top:-200px;
    }
	#WelcomeScreenBacking {
		
        top:47.5%;
        left:50%;
        width:850px;
        height:450px;
        margin-left:-425px;
        margin-top:-225px;
	}
	#WelcomeScreenSecondBacking {
		
        top:47.5%;
        left:50%;
        width:900px;
        height:500px;
        margin-left:-450px;
        margin-top:-250px;
	}

    #AboutScreen {
		
        top:47.5%;
        left:50%;
		width:800px;
        height:400px;
        margin-left:-400px;
        margin-top:-200px;
    }
	#AboutScreenBacking {
		
        top:47.5%;
        left:50%;
        width:850px;
        height:450px;
        margin-left:-425px;
        margin-top:-225px;
	}
	#AboutScreenSecondBacking {
		
        top:47.5%;
        left:50%;
        width:900px;
        height:500px;
        margin-left:-450px;
        margin-top:-250px;
	}

    #LoginScreen {
		
        top:50%;
        left:50%;
        width:350px;
        height:450px;
        margin-left:-175px;
        margin-top:-225px;
    }
	#LoginScreenBacking {
		
        top:50%;
        left:50%;
        width:400px;
        height:500px;
        margin-left:-200px;
        margin-top:-250px;
	}
	#LoginScreenSecondBacking {
		
        top:50%;
        left:50%;
        width:450px;
        height:550px;
        margin-left:-225px;
        margin-top:-275px;
	}

    #ForgotPasswordScreen {
		
        top:50%;
        left:50%;
        width:400px;
        height:300px;
        margin-left:-200px;
        margin-top:-150px;
    }
	#ForgotPasswordScreenBacking {
		
        top:50%;
        left:50%;
        width:450px;
        height:350px;
        margin-left:-225px;
        margin-top:-175px;
	}
	#ForgotPasswordScreenSecondBacking {
		
        top:50%;
        left:50%;
        width:500px;
        height:400px;
        margin-left:-250px;
        margin-top:-200px;
	}
	
    #RecoverAccountScreen {
		
        top:50%;
        left:50%;
        width:450px;
        height:350px;
        margin-left:-225px;
        margin-top:-175px;
    }
	#RecoverAccountScreenBacking {
		
        top:50%;
        left:50%;
        width:500px;
        height:400px;
        margin-left:-250px;
        margin-top:-200px;
	}
	#RecoverAccountScreenSecondBacking {
		
        top:50%;
        left:50%;
        width:550px;
        height:450px;
        margin-left:-275px;
        margin-top:-225px;
	}

    #NewPasswordScreen {
		
        top:50%;
        left:50%;
        width:500px;
        height:350px;
        margin-left:-250px;
        margin-top:-175px;
    }
	#NewPasswordScreenBacking {
		
        top:50%;
        left:50%;
        width:550px;
        height:400px;
        margin-left:-275px;
        margin-top:-200px;
	}
	#NewPasswordScreenSecondBacking {
		
        top:50%;
        left:50%;
        width:600px;
        height:450px;
        margin-left:-300px;
        margin-top:-225px;
	}

    #ErrorScreen {
		
        top:50%;
        left:50%;
        width:300px;
        height:200px;
        margin-left:-150px;
        margin-top:-100px;
    }
	#ErrorScreenBacking {
		
        top:50%;
        left:50%;
        width:350px;
        height:250px;
        margin-left:-175px;
        margin-top:-125px;
	}
	#ErrorScreenSecondBacking {
		
        top:50%;
        left:50%;
        width:400px;
        height:300px;
        margin-left:-200px;
        margin-top:-150px;
	}

    #StartEmpireScreen {
		
        top:47.5%;
        left:50%;
        width:800px;
        height:188px;
        margin-left:-400px;
        margin-top:-200px;
    }
	
	#TitlesScreen {
		
        top:47.5%;
        left:50%;
        width:500px;
        height:400px;
        margin-left:-250px;
        margin-top:-200px;
	}
	
	#SpeciesInfoArea {
		
        top:calc(47.5% + 106px);
        left:50%;
        width:800px;
        height:200px;
        margin-left:-400px;
        margin-top:-100px;
	}

    #MobileScreen {
		
        top:82.5%;
        left:50%;
        width:80%;
        height:72.5%;
        margin-left:-40%;
        margin-top:-30%;
    }
	#MobileScreenBacking {
		
        top:87.5%;
        left:50%;
        width:85%;
        height:90%;
        margin-left:-42.5%;
        margin-top:-32.5%;
	}
	#MobileScreenSecondBacking {
		
        top:92.5%;
        left:50%;
        width:90%;
        height:82.5%;
        margin-left:-45%;
        margin-top:-35%;
	}

    #JoinMenuScreen {
		
        top:50%;
        left:50%;
        width:400px;
        height:300px;
        margin-left:-200px;
        margin-top:-150px;
    }
	#JoinMenuScreenBacking {
		
        top:50%;
        left:50%;
        width:450px;
        height:350px;
        margin-left:-225px;
        margin-top:-175px;
	}
	#JoinMenuScreenSecondBacking {
		
        top:50%;
        left:50%;
        width:500px;
        height:400px;
        margin-left:-250px;
        margin-top:-200px;
	}

    #JoinBetaScreen {
		
        top:50%;
        left:50%;
        width:400px;
        height:300px;
        margin-left:-200px;
        margin-top:-150px;
    }
	#JoinBetaScreenBacking {
		
        top:50%;
        left:50%;
        width:450px;
        height:350px;
        margin-left:-225px;
        margin-top:-175px;
	}
	#JoinBetaScreenSecondBacking {
		
        top:50%;
        left:50%;
        width:500px;
        height:400px;
        margin-left:-250px;
        margin-top:-200px;
	}

    #CreateEmpireScreen {
		
        top:50%;
        left:50%;
        width:700px;
        height:450px;
        margin-left:-350px;
        margin-top:-275px;
    }
	#CreateEmpireScreenBacking {
		
        top:50%;
        left:50%;
        width:750px;
        height:500px;
        margin-left:-375px;
        margin-top:-300px;
	}
	#CreateEmpireScreenSecondBacking {
		
        top:50%;
        left:50%;
        width:800px;
        height:550px;
        margin-left:-400px;
        margin-top:-325px;
	}

	#SpeciesSelectionContainer {
		
        top:50%;
        left:825px;
        width:150px;
        height:500px;
        margin-left:-50px;
        margin-top:-227px;
	}
	#SpeciesSelectionContainerBacking {
		
        top:calc(50% - 49px);
        left:799px;
        width:200px;
        height:512px;
        margin-left:-50px;
        margin-top:-227px;
	}
	.SpeciesSelectionsArea {
	
		height:35px;
		line-height:35px;
		
	}
	.SpeciesSelection {
		
		font-size:0.875em;
		padding-left:8px;
		letter-spacing:0.025em;
	}
	
	#FinishCreationButton {
		
		text-align:center;
		width:100px;
		height:39px;
		line-height:35px;
		margin-left:24px;
		border:1px solid #898f08;
		background:linear-gradient(180deg, #2731bc, #376b8a);
		border-radius:3px;
		margin-top:15px;
		color:white;
		text-shadow:1px 1px #732d2d;
		cursor:pointer;
		display:none;
	}
	#FinishCreationButton:hover {
		
		border:1px solid #b6be0e;
		background:linear-gradient(180deg, #2a36d9, #4788af);
		text-decoration:underline;
	}
	#FinishCreationButtonText {
		
		vertical-align:middle;
	}

	#SpeciesStatsContainer {
		
        top:500px;
        left:7%;
        width:1150px;
        height:60px;
        margin-left:-50px;
        margin-top:-25px;
	}
	#SpeciesStatsContainerBacking {
		
        top:688px;
        left:calc(7% - 25px);
        width:924px;
        height:90px;
        margin-left:-50px;
        margin-top:-227px;
	}

	.SpeciesStatsArea {
	
		width:110px;
		height:100%;
		float:left;
		margin-right:5px;
	}
	.SpeciesStatTop {
		
		letter-spacing:0.025em;
	}
	.SpeciesStatBottom {
		
		letter-spacing:0.025em;
	}
	
	#CreationButtonsContainer {
		
		float:left;
		display:none;
	}

	#NextCreationButton {
		
		text-align:center;
		width:100px;
		height:30px;
		line-height:28px;
		margin-left:24px;
		border:1px solid #885555;
		background:linear-gradient(180deg, #ffe13d, #b9b910);
		border-radius:5px;
		margin-top:0px;
		color:#193519;
		text-shadow:1px 1px white;
		text-decoration:none;
		cursor:pointer;
		display:none;
	}
	#NextCreationButton:hover {
		
		border:1px solid #3e2828;
		background:linear-gradient(180deg, #b9b910, #ffe13d);
		text-decoration:underline;
	}
	#NextCreationButtonText {
		
		vertical-align:middle;
	}
	
	#BackCreationButton, #NewQuickStartButton {
		
		text-align:center;
		width:75px;
		height:24px;
		line-height:23px;
		margin-left:38px;
		border:1px solid #3e2828;
		background:linear-gradient(0deg, #c83953, #cc2c2c);
		border-radius:3px;
		margin-top:5px;
		color:white;
		text-shadow:1px 1px #732d2d;
		cursor:pointer;
		font-size:0.875em;
		display:none;
	}
	#NewQuickStartButton {
		
		width:150px;
		margin-left:16px;		
		height: 30px;
		line-height: 30px;
		background: linear-gradient(15deg, dodgerblue, green);
		color: whitesmoke;
		text-shadow: 1px 1px black;
	}
	#BackCreationButton:hover {
		
		border:1px solid #864d4d;
		background:linear-gradient(0deg, #e74361, #ef3636);
	}
	#NewQuickStartButton:hover {
		
		border:1px solid yellow;
		background:orangered;
	}
	#BackCreationButtonText, #NewQuickStartButtonText {
		
		vertical-align:middle;
	}
}

@media (max-height: 950px) {
    .header-form {
        position: relative;
    }
}