html {
	font-family: Trebuchet MS1, Trebuchet MS, sans-serif; 
}
html.wf-active {
	/* font-family: "Comic Sans MS", sans-serif; */
	/* Not websafe */
	/* font-family: Cantarell, Helvetica, Arial, sans-serif; */
	/* font-family: Helvetica, Arial, sans-serif; */
	/* font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; 
	/*  font-family: Book Antiqua3;  */

	

}

body {
	font-size: 16px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px; /* this is definitely not a webkit-specific hack to fix font aliasing */
	background-color: #121212;
	color: #ddd;
	margin: 0;
	opacity: 1; 
}

p {
	margin-top: 0;
}

form {
	display: inline;
}

a:link, a:visited, a:active {
	text-decoration: underline;
	color: #FFFFCC;
	transition:color .4s ease-out;
	-webkit-transition:color .4s ease-out;
	-o-transition:color .4s ease-out;
	-moz-transition:color .4s ease-out;
}
a:hover {
	color: #EEDDBB;
	text-decoration: none;
	transition:color 0s ease-out;
	-webkit-transition:color 0s ease-out;
	-o-transition:color 0s ease-out;
	-moz-transition:color 0s ease-out;
}

.wrapper {
	width: 900px;
	margin: 0 auto;
}
.wrapper2 {
	width:900px;
	min-height:20px;
	margin: 0 auto;
}

.hidden-maps {
	display:none;
}
.shown-maps {
}


.float {
	float:left;
}
.lfloat {
	float:right;
}

#topbar {
	font-weight:bold;
	padding: 15px 15px;
	margin: 0 auto 40px;
	text-align: center;
	position: relative; /* for #user */
	min-width: 900px;
	background: -moz-linear-gradient(top, #252525, #121212);
	background: -webkit-linear-gradient(top, #252525, #121212);
}
#topbar a.nav {
	background-color: #222;
	margin-right: 15px;
	padding: 7px 10px;
	border-radius: 5px;
	text-decoration: none;
	border: 1px solid #333;
	box-shadow: 0 0 1px #444;
}
#topbar a.nav.selected, #topbar a.nav:hover {
	border: 1px solid #222;
	background-color: #2c2c2c;
}
#topbar #user {
	position: absolute;
	right: 25px;
	top: 5px;
	text-align: right;
}

#difficulties {
	width: 100%;
	text-align: center;
	margin-bottom: 35px;
}
#difficulties a {
	margin: 0 10px;
	color: #ddd;
	background-color: #334;
	padding: 3px 10px;
	border-radius: 5px;
	text-decoration: none;
	border: 1px solid #446;
	box-shadow: 0 0 1px #445;
}
#difficulties a.selected, #difficulties a:hover {
	background-color: #446;
	border: 1px solid #223;
}

#daynav {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	padding-bottom: 15px;
}
#daynav a {
	margin: 0 35px;
	color: #ddd;
	background-color: #223;
	padding: 3px 10px;
	border-radius: 5px;
	text-decoration: none;
	border: 1px solid #332;
	box-shadow: 0 0 1px #445;
}
#daynav a.selected, #daynav a:hover {
	background-color: #336;
	border: 1px solid #112;
}



table.score {
	border: 1px solid #777;
	background-color: #252530;
	color: #ccc;
	margin: 0px auto;

}
table.score th, table.score td {
	padding: 2px 4px 1px 4px;
}
table.score td {
	font-size:105%;
}
table.score th {
	border: 1px solid #777;
}

#copy {
	text-align: center;
	margin: 40px auto 0;
	width: 400px;
}
#copy iframe {
	border: none;
	width: 95px;
	height: 21px;
	vertical-align: text-bottom;
	overflow: hidden;
}
#facebook {
	border: none;
	width: 95px;
	height: 21px;
	vertical-align: text-bottom;
	overflow: hidden;
}

@keyframes notifiAnimate
{
0%   {top:-300px;}
50%   {height:700px;top:-200px;}
65% {height:300px;top:200px;}
80% {height:350px;top:175px;}
100% {height:300px;top:200px;}
}
@-moz-keyframes notifiAnimate /* Firefox */
{
0%   {top:-300px;}
50%   {height:700px;top:-200px;}
65% {height:300px;top:200px;}
80% {height:350px;top:175px;}
100% {height:300px;top:200px;}
}
@-webkit-keyframes notifiAnimate /* Safari and Chrome */
{
0%   {top:-300px;}
45%   {height:700px;top:-200px;}
65% {height:280px;top:200px;}
80% {height:350px;top:175px;}
100% {height:300px;top:200px;}
}
@-o-keyframes notifiAnimate /* Opera */
{
0%   {top:-300px;}
45%   {height:700px;top:-200px;}
65% {height:280px;top:200px;}
80% {height:350px;top:175px;}
100% {height:300px;top:200px;}
}

.notification
{
	animation: notifiAnimate 1s;
	-moz-animation: notifiAnimate 1s; /* Firefox */
	-webkit-animation: notifiAnimate 1s; /* Safari and Chrome */
	-o-animation: notifiAnimate 1s;  /* Opera */
	position:fixed;
	left:50%;
	margin-left: -200px;
	top:200px;
	text-align: center;
	width:400px;
	height:300px;	
	color: #ddd;
	background-color: #334;
	padding: 1px 1px;
	border-radius: 5px;
	text-decoration: none;
	border: 2px solid #446;
	box-shadow: 0 0 3px #445;

}
.notification_close {
	top:276px;
	position:absolute;
	text-align:right;
}
.notification_close a {
	color: #FF5;
}

.name_color_select span
{
	background-color:#111;
	margin-right:15px;
}
.name_color_select span:hover
{
	background-color:#356;
	cursor:default;
}