html, body { height: 100%; }
	body {
	  margin: 0px;
	  padding: 0px;
		padding-top: 10px;
	  font-size: 11px;
	  font-family: 'Lato Latin', "trebuchet ms", helvetica, arial, sans-serif;
	  overflow: scroll;
		color: #113;
	}
	
	h1,h2,h3,h4 {
	  font-family: 'pt_sans_narrowbold', "trebuchet ms", helvetica, arial, sans-serif;
	}
	
	legend { padding: 0px 4px 3px 4px; }
	legend span {	border-bottom: 2px solid #F40; }
	
	#container, #login {
		text-align: center;
	}
	
	#container {
		position: absolute;
		top: 0.5%;
		left: 0.5%;
		width: 20%;
		z-index: 2;
	}
	#editcontainer {
		position: absolute;
		top: 37px;
		left: 21%;
		width: 76%;
		height: 76%;
		border: 1px solid #99B;
		padding: 10px;
		overflow: hidden;
		z-index: 1;
	}
	
	fieldset, #container > div { margin: 0px auto; border: 1px solid #99B; padding: 7px 10px; text-align: left; margin: 0px 1% 10px 1%; }
	#container > div { margin-bottom: 10px;}
	#container #login { padding: 0px; border: none; }
	#container #msg { max-height: 200px; overflow: auto; }
	#gblbtns div { 
		display: inline-block; 
		border: 2px solid #99B; 
		border-radius: 3px; 
		padding: 4px 5px;
		margin-bottom: 4px;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
	}
	#gblbtns div.bton { border-width: 3px 1px 1px 3px;}
	#gblbtns div:active { border-width: 3px 1px 1px 3px;}
	
	#container #userlist div { 
		border: 1px solid #99B; 
		padding: 7px 10px; 
		font-size: 13px; 
		margin-bottom: 5px;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
	}
	
	input {border: 1px solid #99B; border-radius: 2px; padding: 2px 3px; font-size: 11px;}
	.inpb {
		background: #EEF;
		margin-left: 2px;
	}
	
	.uname, .umsg {display: inline-block; }
	.uname { width: 60px; margin-right: 4px; text-align: right; }
	.uname:after {
		content: ": ";
	}
	
	
	
	/* CLASSES FOR EDITABLE ELEMENTS */
	.defaultele, .editstyles {
		position: absolute;
		left: 100px;
		top: 100px;
		padding: 2px 3px;
		z-index: 3;
	}
	.editstyles {
		border: 1px dashed #555;
		background: #FFF;
		width: 200px;
		height: 250px;
		overflow: auto;
		z-index: 4;
	}
	.highlight {
		border: 2px dashed #A33;
	}
	
	
	/* ANIMATIONS */
	.fadeoutnow {
		animation: 					fadeout 0s 0s forwards ease-out;
		-webkit-animation: 	fadeout 0s 0s forwards ease-out;
	}
	.fadeout {
		animation: 					fadeout 2s 2s forwards ease-out;
		-webkit-animation: 	fadeout 2s 2s forwards ease-out;
	}
	.fadein {
		animation: 					fadein 1s 0s forwards ease-out;
		-webkit-animation: 	fadein 1s 0s forwards ease-out;
	}
	.fadein100 {
		animation: 					fadein2 1s 2s forwards ease-out;
		-webkit-animation: 	fadein2 1s 2s forwards ease-out;
	}
	@-webkit-keyframes fadeout {
		0% {
			opacity: 1;
		}
		50% {
			/*opacity: 0;*/
		}
		100% {
			opacity: 0;
			height: 0;
		}
	}

	@keyframes fadeout {
		0% {
			opacity: 1;
		}
		50% {
			/*opacity: 0;*/
		}
		100% {
			opacity: 0;
			height: 0;
		}
	}

	@-webkit-keyframes fadein {
		0% {
			opacity: 0;
			height: 0;
		}
		100% {
			opacity: 1;
			height: auto;
			padding: 10px;
		}
	}

	@keyframes fadein {
		0% {
			opacity: 0;
			height: 0;
		}
		100% {
			opacity: 1;
			height: auto;
			padding: 10px;
		}
	}

	@-webkit-keyframes fadein2 {
		0% {
			opacity: 0;
			height: 0;
		}
		100% {
			opacity: 1;
			height: 85%;
			padding: 10px;
		}
	}

	@keyframes fadein2 {
		0% {
			opacity: 0;
			height: 0;
		}
		100% {
			opacity: 1;
			height: 85%;
			padding: 10px;
		}
	}
	
		
	#footer	{
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		border-top: 2px solid #999;
		box-shadow: 0px 0px 15px 10px #FFF;
		z-index: 11;
		background: #FFF;
	}
	#footerc {
		width: 500px;
		margin: 5px auto 0 auto;
		padding: 2px 0px 4px 0px;
		font-size: 10px;
	}