body {
	font-family: Arial,Helvetica,sans-serif;
	background-color: #446897;
}

div.userpick, form.login input {
	-webkit-box-shadow: 3px 3px 8px 0px rgba(50, 50, 50, 0.65);
	-moz-box-shadow:    3px 3px 8px 0px rgba(50, 50, 50, 0.65);
	box-shadow:         3px 3px 8px 0px rgba(50, 50, 50, 0.65);
	padding: 15px;
	margin: 2em auto;
    background: rgba(255,255,255,0.5);
	color: white;
    border: 3px solid white; 
	max-width: 950px;
}

/* User Picker */
div.userpick {
	width: 10em;
	padding: 0 15px 15px 15px;
}

div.userpick p {
	border-bottom: 1px solid white;
	padding-bottom: 10px;
	font-weight: bold;
	font-size: 115%;
}

div.userpick ul {
	list-style: none;
	margin: auto;
	padding: none;
}

div.userpick ul li {
	margin: 0.5em 0.5em 0.5em -0.5em;
	width: 100%;
	display: block;
}
div.userpick ul li a {
	color: white;
	font-weight: bold;
	text-decoration: none;
	padding: 4px 8px;
}
div.userpick ul li a:hover {
	background-color: #446897;
}

/* User Login */
form.login label {
	display: block;
	margin: 1em;
	color: white;
	font-weight: bold;
}
form.login {
	width: 30em;
	margin: 2em auto;
}

form.login input {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	font-weight: bold;
	font-size: 115%;
}

form.login input[type=submit] {
	margin-left: 6px;
}
form.login input:hover {
	background-color: rgba(255,255,255,0.7);
}

form.login a {
	color: #BBB;
	font-size: 90%;
	display: block;
	margin: 6em 2em 2em 1em;
}

/* Mobile Fixes */

@media all and (max-width: 699px) {
	body {
		margin: 0;
		padding: 0;
	}
	form.login {
		width: auto;
	}
	form.login input {
		margin: 6px;
	}
	div.userpick {
		width: auto;
		margin: 12px 6px;
		padding: 10px;
	}
}