style.css

html, body{
	margin: 0;
	padding: 0;
	height: 100%;
}

body{
	font-family: "Lato", "Arial", sans-serif;
}

div#head{
	height: 15%;
	background-color: #EEE;
	
	box-shadow: 0 5px 5px #CCC;
	
	padding: 0 15px;

	position: relative;
	margin: 0;
	overflow-x: auto;
	white-space: nowrap;
}
div#main{
	padding: 15px;
	height: calc( 75% - 30px );
	overflow-y: auto;
	text-align: center;
	
	border-bottom: 2px solid #BBB;
	
	box-shadow: inset 0 0 10px #CCC;
}
div#main.challenges{
	text-align: left;
}
span.title{
	font-size: 48pt;
	display: inline-block;
	
	width: 35%;
	overflow-x: auto;
	
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	-webkit-transform: translateY( -50% );
}

ul#nav{
	float: right;
	margin: 0;
	margin-left: 15px;
	padding: 0;
	height: 100%;
	display: inline-block;
	
	text-align: right;
	
	width: 60%;
	overflow-x: auto;
}
li{
	list-style-type: none;
	vertical-align: middle;
}
ul#nav > li{
	display: inline-block;
	padding: 10px;
	margin: 0;
	height: calc( 100% - 22px );
	width: 150px;
	font-size: 14pt;
	
	cursor: pointer;
	
	color: #BBB;
	
	text-align: center;
	position: relative;
	
	white-space: nowrap;
	
	border-right: 1px solid gray;
	
	transition: all .25s ease-in-out;
}
ul#nav > li:hover{
	color: black;
	font-size: 16pt;
}
ul#nav > li:first-child{
	border-left: 1px solid gray;
}
ul#nav > li > span.text{
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	-webkit-transform: translate( -50%, -50% );
}

ol.number{
	list-style-type: decimal;
}

/* Dialogs */

div.modal{
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	
	background-color: rgba( 64, 64, 64, .75 );
	
	visibility: hidden;
}
div.popup{
	background-color: white;
	min-width: 375px;
	min-height: 125px;
	
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate( -50%, -50% );
	-webkit-transform: translate( -50%, -50% );
	
	padding: 5px;
	
	text-align: center;
	
	visibility: hidden;
	opacity: 0;
	
	transition: all .5s ease-in-out;
	
	box-shadow: 3px 3px 3px rgba( 255, 255, 255, .5 )
}
form{
	margin-top: 15px;
}
table, table > tbody{
	/* *sigh* Yes, this does indeed have to do with the dialogs */
	display: block;
	margin: 0 auto;
}
form > table > tbody > tr > td{
	display: inline-block;
	font-size: 18pt;
}
form > table > tbody > tr > td:nth-child(odd){
	text-align: right;
	width: 30%;
	margin-right: 10px;
}
form > table > tbody > tr > td:nth-child(even){
	text-align: left;
	width: 65%;
}
form > table > tbody > tr > td:nth-child(odd){
	text-align: right;
	width: 33%;
}
form > table > tbody > tr > td:nth-child(even){
	text-align: left;
	width: 60%;
}
form > table > tbody > tr:last-child{
	margin-bottom: 50px;
}
td{
	border: none;
	padding: 0;
	margin: 10px 0;
}
form > table > tbody > tr{
	display: block;
}
div.table{
	width: 1000px;
	margin: 0 auto;
	font-size: 14pt;
	font-weight: bold;
}
div.cell, div.theader{
	display: inline-block;
	padding: 0;
	margin: 0;
	width: 30%;
	vertical-align: middle;
	
	overflow-x: auto;
}
div.role{
	cursor: pointer;
	
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}
div.theader{
	font-weight: bold;
	font-size: 20pt;
}
div#tbody > div > div.cell:first-child{
	text-align: left;
}
button.submit{
	position: absolute;
	bottom: 15px;
	left: 50%;
	
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
div.popup > .title{
	text-align: left;
	margin-bottom: 10px;
}
div.popup[data-dlg="Success"]{
	background: rgb( 144, 238, 144 );
}
div.popup[data-dlg="Failure"]{
	background: rgb( 238, 144, 144 );
}
button.submit{
	position: absolute;
	bottom: 10px;
}
img.closer{
	float: right;
	cursor: pointer;
}

/* Specific styling */
div.popup[data-dlg="Register"]{
	min-height: 200px;
}

div.popup[data-dlg="Login"]{
	min-height: 150px;
}
div.popup[data-dlg="Question"].set{
	top: 50%;
}
div#user{
	font-size: 24pt;
}
div#countdown{
	font-size: 24pt;
	margin: 30px 0;
}
div#disp-msg{
	position: relative;
	top: 15px;
	opacity: 0;
	visibility: hidden;
	
	transition: top 1.5s linear,
			opacity 1.5s ease-in-out;
			
	margin-top: 50px;
	font-size: 72pt;
}

hr{
	height: 0;
	border: 1px dashed gray;
}

footer{
	position: absolute;
	bottom: 25px;
	width: 100%;
	text-align: center;
}

div.row{
	padding: 20px;
	font-size: 24pt;
}
div.cname{
	float: left;
	width: 275px;
	margin-top: 15px;
	text-align: right;
	vertical-align: middle;
	overflow-x: auto;
}

button#create{
	width: 100px;
	font-size: 48pt;
	border-radius: 50px;
	position: absolute;
	bottom: 50px;
	right: 50px;
}

div.zone{
	margin: 0 auto;
	text-align: left;
	border: 2px dashed gray;
	margin-bottom: 15px;
	background-color: #CCC;
	padding: 10px;
	font-size: 18pt;
}
div.zone > h2{
	margin: 3px;
}
div.zone > ul{
	margin: 0;
}
div.zone > ul > li{
	margin: 5px 0;
}
div.zone > ul:not(.exempt) > li::before{
	content: '>';
	color: #555;
	margin-right: 10px;
}

a{
	color: #555;
	cursor: pointer;
	text-decoration: none;
	
	transition: color 125ms linear;
}
a:hover{
	color: white;
}
a:active{
	color: black;
}

/* UI Styling */
button{
	border-radius: 3px;
	background-color: #DDD;
	border: 2px solid #CCC;
	color: #444;
	padding: 7px;
	font-size: 14pt;
	cursor: pointer;
	
	box-shadow: none;
	
	transition: all .25s linear;
	
	outline: none;
	
	min-width: 75px;
}
button:hover, button:focus{
	border-color: #AAA;
	box-shadow: 0 0 7px #AAA;
}
input[type="text"], input[type="password"], input[type="email"], select, textarea{
	border-radius: 5px;
	padding: 10px;
	box-sizing: border-box;
	width: calc( 100% - 20px );
	font-size: 14pt;
	border-style: solid;
	border-color: #CCC;
	outline: none;
}
input[name="points"], input[name="category"]{
	margin: 5px 0;
}
textarea{
	resize: none;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus{
	box-shadow: 0 0 15px lightblue;
	border-color: lightblue;
}

::-webkit-scrollbar{
	width: 2px;
}
::-webkit-scrollbar-track{
	width: 2px;
}
::-webkit-scrollbar-thumb{
	width: 2px;
	border-radius: 2px;
	background-color: #555;
}