html {
	
	width:100%;
	height:100%;
	overflow:hidden;
}

body {
	
	overflow:hidden;

		  -webkit-touch-callout: none; /* iOS Safari */
			-webkit-user-select: none; /* Safari */
			 -khtml-user-select: none; /* Konqueror HTML */
			   -moz-user-select: none; /* Old versions of Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
					user-select: none; /* Non-prefixed version, currently
										  supported by Chrome, Edge, Opera and Firefox */

	width:100%;
	height:100%;
	background:url('Images/Dragon_Drawing.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
	margin:0;
}

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 */
}

#LoadingScreen {
	
	position:absolute;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;
	display:table;
}
#LoadingScreenBacking {
	
	position:absolute;
	z-index:2;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}
#LoadingScreenSecondBacking {
	
	position:absolute;
	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;
}

#LoginInstructions, #JoinInstructions {
	
    font-size: 2em;
    text-align: center;
    padding: 1em;
}
#JoinInstructions {
	
	padding-bottom:0;
}

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

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

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

.JoinInput {
	
	width:54%;
}
.JoinInputSelect {
	
	width:56.25%;
}

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

#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:absolute;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#AuthenticateScreenBacking {
	
	display:none;
	position:absolute;
	z-index:2;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}
#AuthenticateScreenSecondBacking {
	
	display:none;
	position:absolute;
	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;
}

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

#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;
}

.FrontScreenButton {
	
	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%;
	color:white;
	background:lightsteelblue;
	cursor:pointer;
}
.FrontScreenButton:hover {
	
	color:dodgerblue;
	background:aliceblue;
	text-shadow:0px 1px gold;
}

#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;
}
.JoinLoginOr {
	
	margin-top:1.75em;
}

#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:absolute;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#ForgotPasswordScreenBacking {
	
	display:none;
	position:absolute;
	z-index:2;
	background:linear-gradient(135deg, black, transparent);
	width:50%;
	height:50%;	
}
#ForgotPasswordScreenSecondBacking {
	
	display:none;
	position:absolute;
	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:absolute;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#RecoverAccountScreenBacking {
	
	display:none;
	position:absolute;
	z-index:2;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}
#RecoverAccountScreenSecondBacking {
	
	display:none;
	position:absolute;
	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:absolute;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#NewPasswordScreenBacking {
	
	display:none;
	position:absolute;
	z-index:2;
	background:linear-gradient(45deg, black, transparent);
	width:50%;
	height:50%;	
}
#NewPasswordScreenSecondBacking {
	
	display:none;
	position:absolute;
	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:absolute;
	z-index:3;
	background:white;
	border:1px double grey;
	width:50%;
	height:50%;	
}
#ErrorScreenBacking {
	
	display:none;
	position:absolute;
	z-index:2;
	background:linear-gradient(225deg, black, transparent);
	width:50%;
	height:50%;	
}
#ErrorScreenSecondBacking {
	
	display:none;
	position:absolute;
	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;	
}


@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;
	}
	
    #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;
	}

    #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;
	}
}