/* styles */
.overlay {
	font-size: 1em;	
	font-family: sans-serif;
  	text-align: center;
  	background-color: #00b;
  	color: #fff;
  	width: 100%;
  	height: 100%;
  	padding-top: 1em;
  	position: absolute;
  	z-index: 2000;
  	display: none; 
}
h1{
	font-size: 1em;
	font-weight: normal;
	letter-spacing: 0.25em;
	margin-bottom: 2em;
}
section {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 100%; 
}

#progressBar {
	width: 300px;
	height: 6px;
	padding: 0px;
	margin: 0 auto;
	border: 2px solid #fff; 
}

#progress {
  height: 3px;
  background-color: #fff;
  width: 0px; 
}

#desktopinput{
	display: block;
}

aside{
	z-index:1000;
	position:absolute;
	display: block;
	padding:1em 0 0;
	margin: 0;
	font-family: sans-serif;
	text-align: center;
	font-size: 1em;
	top:0;
	min-width: 280px;
	max-width: 25%;
}
.left{
	left:0;
}
.right{
	right:0;
}
.active{
	border:#fff 2px dotted;
}
.switch{
	position:absolute;
	bottom:1em;
	left:1em;	
	z-index:1000;
}

label{
	color: #fff;
	display: inline-block;
	width: 45%;
	margin-right: 1em;
	text-align: right;	
}
.playername{
	color: #fff;
	font-weight: bold;
	display: inline-block;
	width: 100%;
	margin:0.5em 0;
	text-align: center;	
}
input{
	font-size: 1em;
	padding:0;
	margin: 0;
	text-align: center;
	display: inline-block;
}
aside input{
	width: 10%;
	margin:0 0.25em;
}
button{
	font-size: 1em;	
   	color: #000;
   	margin:0;
}
button[disabled] {
	color: #000;
}
.space{
	margin:1em;
}