@import url(//fonts.googleapis.com/css?family=Nunito:400,100,200,300,500,600);
@import url(//fonts.googleapis.com/css?family=Roboto:400,600);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600);
@import url(//fonts.googleapis.com/css?family=Playfair+Display:400,600);
@import url(//fonts.googleapis.com/css?family=Source+Code+Pro:400,600);

BODY     {
	margin:0 auto;
	background:#000000;
	text-align:center;
	font-size:16px;
	}

#box {
	z-index:10;
//	border:solid 1px #888888;
	}

#card {
	display:block;
	margin: 0 auto;
	width:900px;
	height:600px;
	background-image:url(graphics/card6.jpg);
	background-size:100% 100%;
	}

#card2 {
	display:none;
	width:100%;
	height:100%;
	background-color:#000000;
	}

#check {
	position: relative;
	top: 150px;
	left: 600px;
	width:105px;
	height:97px;
	z-index:2;
	}

.redchk{
	animation-name: redchk;
	-webkit-animation-name: redchk;
	animation-duration: 6s;
	-webkit-animation-duration: 6s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 2s;
	-webkit-animation-delay: 2s;
	visibility: visible !important;
	}

@keyframes redchk {
	0% {
		transform: translateX(0%) scale(1);
		opacity: 1.0;
		}
	100% {
		transform: translateX(-100%) scale(10);
		opacity: 0.0;
		}
	}

@-webkit-keyframes redchk {
	0% {
		-webkit-transform: translateX(0%) scale(1);
		opacity: 1.0;
		}
	100% {
		-webkit-transform: translateX(-100%) scale(10);
		opacity: 0.0;
		}
	}

A.foot {color:#ffffff;text-decoration:none;}
A.foot:hover {color:#ffcc88;}

#main {
	width:99%;
	height:100%;
	}

#room {
	position:relative;
	top:0px;
	margin:0 auto;
	width:1280px;
	height:520px;
	}

#lobby {
	position:absolute;
	top:0px;
	left:0px;
	width:1280px;
	height:520px;
	z-index:0;
	}

#wall {
	position:absolute;
	top:520px;
	left:0px;
	width:1280px;
	height:300px;
	z-index:0;
	}

#roll {
	position:absolute;
	top:155px;
	left:495px;
	width:280px;
	height:132px;
	overflow:hidden;
	}

#reel {
	position:absolute;
	top:200px;
	left:20px;
	width:250px;
	font:1.0em Arial;color:#ffffff;
	line-height:2em;
	}

.rollup{
	animation-name: rollup;
	-webkit-animation-name: rollup;
	animation-duration: 30s;
	-webkit-animation-duration: 30s;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	visibility: visible !important;
	}

@keyframes rollup {
	0% {
		top:200px;
		}
	100% {
		top:-1000px;
		}
	}

@-webkit-keyframes rollup {
	0% {
		top:200px;
		}
	100% {
		top:-1000px;
		}
	}

#desk {
	position:absolute;
	top:284px;
	left:190px;
	width:899px;
	height:236px;
	z-index:3;
	}

#logbut {
	position:absolute;
	top:80px;
	left:362px;
	width:230px;
	height:32px;
	cursor:pointer;
	z-index:10;
	}

#regbut {
	position:absolute;
	top:40px;
	left:332px;
	width:146px;
	height:20px;
	cursor:pointer;
	z-index:10;
	}

#signin {
	display:none;
	position:absolute;
	top:155px;
	left:520px;
	width:238px;
	height:126px;
	z-index:4;
	text-align:center;
	}

#mform {
	margin-top:15px;
	}

#disc {
	position:absolute;
	left:28%;
	top:600px;
	width:43%;
	height:50px;
	padding:5px;
	font: 0.65em Arial;color:#cccccc;
	z-index:10;
	}

#footer {
	position:absolute;
	margin:0 auto;
	top:650px;
	width:100%;
	height:50px;
	padding:5px;
	font: 0.75em Arial;color:#cccccc;
	z-index:10;
	}

#seal {
	position:absolute;
	margin-top:30px;
	top:600px;
	left:30px;
	width: 150px;
	z-index:10;
	}

#welc {
	display:none;
	position:fixed;
	top:60%;
	margin-left: 50%;
	transform:translateX(-50%);
	width:70%;
	min-width:360px;
	height:auto;
	border:solid 1px #000000;
	background-color:#ffcc88;
	z-index:100;
	padding:20px;
	font:1.0em Arial;
	text-align:left;
	}

A.email  {
	text-decoration:none;
	font: 1.0em Arial;color:#ffcc88;
	}
A.email:hover {
	text-decoration:underline;
	}

.txbg {
	background-color:#000000;
	}

.logs {
	width:220px;
	height:20px;
	margin:5px;
	font: 1.0em Arial;color:#000000;
	}

A.lost  {
	font: 0.75em Arial;color:#ff8866;
	font-weight:600;
	text-decoration:none;
	}
A.lost:hover {
	text-decoration:underline;
	}

button {
	border:solid 1px #000000;
	margin-top:5px;
	cursor:pointer;
	}
.butt {
	border:none;
	}
.butt:hover {
	box-shadow: 0px 0px 20px rgba(255,200,0,0.9);
	-moz-box-shadow: 0px 0px 20px rgba(255,200,0,0.9);
	-webkit-box-shadow: 0px 0px 20px rgba(255,200,0,0.9);
	}
.butt1 {
	font:1.0em Nunito;color:#004488;
	font-weight:400;
	width:80px;
	height:26px;
	}
.butt5 {
	font:0.9em Nunito;color:#000000;
	font-weight:600;
	width:50px;height:25px;
	}
.grad2 {
	background-image: linear-gradient(#ffffff, #88ccff);
	}
.grad4 { background-image: linear-gradient(#eeffdd, #669955); }
.grad5 { background-image: linear-gradient(#ffeedd, #aa9988); }
.rad1 {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	}
.rad2 {
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	}

.butt6 {
	font:1.2em Nunito;color:#000000;
	width:200px;height:30px;
	}


#boxalert {
	display:none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -150px;
	width:300px;
	height:100px;
	padding:10px;
	font: 1.0em Arial;color:#000000;
	text-align:center;
	background-image: linear-gradient(#cccccc, #ffffff, #cccccc);
	border: solid 3px #000000;
	z-index:100;
	}

#register {
	display:none;
	position:absolute;
	top: 50%;
	left: 50%;
	margin-top: -260px;
	margin-left: -150px;
	width:280px;
	height:520px;
	z-index:50;
	background-color:#ffffff;
	font:0.85em Arial;color:#000000;
	text-align:left;
	padding:10px;
	}

.sm1 {
	font: 0.85em Arial;color:#880000;
	font-weight:600;
	}

.dark {
	background-color:#000000;
	opacity: 0.0;
	}

.rad1 {-webkit-border-radius:4px;border-radius:4px;}
.grad1 {background-image: linear-gradient(#ffffff, #ff5544);}
.grad3 {background-image: linear-gradient(#ffffff, #88ffaa);}

.shad {
	box-shadow: 15px 15px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 15px 15px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 15px 15px 5px rgba(0,0,0,0.5);
	}

.butt1 {
	width:80px;height:24px;
	font:1.0em Nunito;color:#000000;
	}
.butt4 {
	width:120px;height:24px;
	font:1.2em Nunito;color:#000000;
	}
.butt3 {
	width:80px;height:24px;
	font:1.0em Nunito;color:#000000;
	}

h3 {
	font:1.2em Arial;color:#000000;
	padding-top:10px;
	text-align:center;
	}

h4 {
	font:1.5em Times New Roman;color:#000000;
	margin:10px;
	text-align:center;
	}

.wipeout {
	animation-name: wipeout;
	-webkit-animation-name: wipeout;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	visibility: visible !important;
	}
@keyframes wipeout {
	0% {opacity: 0.0;}
	100% {opacity: 1.0;}
	}
@-webkit-keyframes wipeout {
	0% {opacity: 0.0;}
	100% {opacity: 1.0;}
	}
@-moz-keyframes wipeout {
	0% {opacity: 0.0;}
	100% {opacity: 1.0;}
	}

#loma {
	text-align:center;
	width:100%;
	}

#logo {
	margin: 0 auto;
	width:90%;
	max-width:896px;
	height:auto;
	}

#content {
	margin: 0 auto;
	width:80%;
	max-width:900px;
	}

#continue {
	font:0.85em "Open Sans";
	}

.fserif {
	font:1.0em "Playfair Display";
	}

.wserif {
	font:1.3em "Open Sans";
	}

#tnam {
	font-size:2.0em;
	}

#whitbox {
	width:100%;
	height:300px;
	background-color:#ffffff;
	text-align:left;
	font: 1.0em Arial;
	padding:10px;
	}

#whitbox input {
	border: solid 1px #000000;
	margin-left:0px;
	margin-bottom:2px;
	height:18px;
	resize:none;
	width:400px;
	}

#whitbox ::placeholder {
    color: #aa6644;
    opacity: 1;
	}

A.black {
	font: 0.85em "Source Code Pro";
	color:#000000;
	text-decoration:none;
	}
A.black:hover {
	text-decoration:underline;
	}

.mput { width:300px; }

#apps {
	position:fixed;
	top: 5%;
	margin-left: 50%;
	transform:translateX(-50%);
	width:60%;
	max-width:800px;
	height:60%;
	min-height:460px;
	z-index:10;
	display:none;
    }
#topbar {
	position:relative;
	width:100%;
	height:10%;
	min-height:40px;
	text-align:center;
	background-color:#ccd0cc;
	font:1.2em Arial;color:#000000;
	}
#content {
	position:relative;
	width:97.5%;
	height:70%;
	padding:10px;
	background-color:#ffffff;
	overflow-y:auto;
	overflow-x:hidden;
	font:0.85em Arial;color:#000000;
	text-align:left;
	}
#control {
	position:relative;
	width:100%;
	height:10%;
	min-height:40px;
	text-align:center;
	background-color:#ccd0cc;
	font:1.0em Arial;color:#000000;
	}

.eye {
	margin:5px;
	padding-left:270px;
	cursor:pointer;
	}


@media screen and (max-width:480px) {

	* {
		margin:0px;
		padding:0px;
		}

	#card {
		display:none;
		}

	#card2 {
		display:block;
		}

	#register {
		top: 0;
		left: 0;
		margin-top: 0px;
		margin-left: 0px;
		width:96%;
		height:96%;
		font:1.1em Arial;color:#000000;
		}

	h4 {
		font:1.6em Times New Roman;color:#000000;
		}

	#register input {
		height:22px;
		}

	#register input.full {
		font: 1.25em Arial;color:#ffffff;
		}

	.sm1 {
		font: 1.0em Arial;color:#880000;
		}

	.butt4 {
		width:120px;height:28px;
		font:1.2em Nunito;color:#000000;
		}


	}