html {
	width						:	100%;
	height						:	100%;
}
body {
	font						:	20px "Trebuchet MS", sans-serif;
	margin						:	0px;
}

/*Header*/
#header {
    width						:	822px;
    margin-left					:	auto;
    margin-right				:	auto;
    height						:	60px;
    margin-top					:	0px;
    margin-bottom				:	10px;
    background					:	#f6a828 url(../img/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
	border-bottom-right-radius	:	4px;
	border-bottom-left-radius	:	4px;
}
#header h1 {
    float						:	left;
    margin-left					:	15px;
    margin-top					:	15px;
    color						:	#FFFFFF;
    font-size					:	24px;
}
#header h1 a { 
    color						:	#FFFFFF;
    text-decoration				:	none;
}

#header ul {
    float						:	right;
    margin						:	0;
    margin-right				:	10px;
}
#header ul li {
    float						:	left;
    display						:	inline;
    color						:	#FFFFFF;
    height						:	60px;
    padding-left				:	10px;
    padding-right				:	10px;
}
#header ul li:hover {
    background					:	#ffe45c url(../img/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
	color						:	#363636;
}
#header ul li.Active {
    background					:	#eeeeee url(../img/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
	color						:	#333333;
}
#header ul li a {
    float						:	left;
	width						:	100%;
	height						:	100%;
	text-decoration				:	none;
}
#header ul li a span {
    float						:	left;
    color						:	#FFFFFF;
    margin-top					:	27px;
    text-decoration				:	none;
    font-size					:	14px;
    font-weight					:	bold;
}
#header ul li:hover a span {
	color						:	#363636;
}
#header ul li.Active a span {
	color						:	#333333;
}

/*Content*/
#container {
    width               		:	822px;
    margin-left         		:	auto;
    margin-right        		:	auto;
}

#content {
    width               		:	100%;
    border              		:	1px solid #ffffff;
    background          		:	#eeeeee;
    background-position 		:	center bottom;     
    margin-bottom       		:	10px;
    color               		:	#383450;
    font-size           		:	13px;
	border-top-right-radius		:	4px;
	border-top-left-radius		:	4px;
	border-bottom-right-radius	:	4px;
	border-bottom-left-radius	:	4px;
}
#content h1 {
    margin              		:	0;
    margin-left         		:	20px;
    margin-top          		:	10px;
    font-size           		:	20px;
}
#content h2 {
    margin              		:	0;
    margin-left         		:	20px;
    margin-top          		:	15px;
    margin-bottom       		:	10px;
    font-size           		:	14px;    
}
#content h2 img {
    margin              		:	0;
    margin-right        		:	3px;
}

#content #loginshortcut {
	float						:	right;
	display						:	inline-block;
	font						:	'Source Sans Pro', sans-serif;
    font-size           		:	12px;
    color               		:	#03638b;
	margin-top        			:	12px;
	margin-right        		:	20px;
}

#content #loginshortcut a {
    color               		:	#03638b;
}

#content #breadcrumbs {
	font						:	'Source Sans Pro', sans-serif;
    margin-top          		:	4px;
    margin-left         		:	20px;
    margin-right        		:	20px;
    margin-bottom       		:	8px;
	padding-top       			:	4px;
    font-size           		:	12px;
    color               		:	#03638b;
    border              		:	1px solid #ADBED7;
    border-width        		:	1px 0 0 0;    
}
#content #breadcrumbs a {
    color               		:	#03638b;
}

#content .Box {
    width               		:	760px;
    font-size           		:	12px;
    margin-left         		:	auto;
    margin-right        		:	auto;
    margin-bottom       		:	10px;
    padding-top         		:	10px;
    padding-bottom      		:	10px;
   -moz-border-radius   		:	4px;
    border-radius       		:	4px;
    border              		:	1px solid #ffe45c;
    background-color    		:	#FFFFFF;
    opacity             		:	0.8;    
}

#content .Box h2 {
    margin              		:	0;
    margin-left         		:	20px;
    margin-right        		:	20px;
    margin-top          		:	20px;
    width               		:	740px;
    font-size           		:	17px;    
    border              		:	1px solid #D0D0D0;
    border-width        		:	0 0 1px 0;
    background-color    		:	#FFFFFF;
    padding-left        		:	20px;
}

#content .Box p {
    margin-left         		:	20px;
    width               		:	720px;
}
#content .Box img {
    margin-left         		:	20px;
}
#content .Box h2 {
    font-size           		:	16px;
    border              		:	0;
    margin              		:	0;
    margin-bottom       		:	4px;
}
#content .Box h3 {
    margin-left         		:	20px;
}

canvas {
	background-color			:	transparent;
}

/*Form*/

.form {
	font						:	'Source Sans Pro', sans-serif;
}

label {
	margin-left					:	3px;
	cursor						:	pointer;
}

input[type="text"],
input[type="password"] {
	display						:	block;
	height						:	20px;
	padding						:	4px 6px;
	margin-top					:	3px;
	margin-bottom				:	10px;
	font-size					:	14px;
	line-height					:	20px;
	color						:	#555;
	border-radius				:	4px;
	-moz-border-radius			:	4px;
	-webkit-border-radius		:	4px;
	vertical-align				:	middle;
	background-color			:	#fff;
	border						:	1px solid #ccc;
	-webkit-box-shadow			:	inset 0 2px 2px rgba(0,0,0,0.075);
	-moz-box-shadow				:	inset 0 2px 2px rgba(0,0,0,0.075);
	box-shadow					:	inset 0 2px 2px rgba(0,0,0,0.075);
	box-shadow					:	inset 0 2px 2px rgba(0,0,0,0.075) 0 21px #fff;
	-moz-box-shadow				:	inset 0 2px 2px rgba(0,0,0,0.075) 0 21px #fff;
	-webkit-box-shadow			:	inset 0 2px 2px rgba(0,0,0,0.075) 0 21px #fff;
	-webkit-transition			:	border linear .2s,box-shadow linear .2s;
	-moz-transition				:	border linear .2s,box-shadow linear .2s;
	-o-transition				:	border linear .2s,box-shadow linear .2s;
	transition					:	border linear .2s,box-shadow linear .2s
}

input[type="text"]:focus,
input[type="password"]:focus {
	border-color				:	rgba(82,168,236,0.8);
	outline						:	0;
	outline						:	thin dotted \9;
	-webkit-box-shadow			:	inset 0 2px 2px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);
	-moz-box-shadow				:	inset 0 2px 2px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);
	box-shadow					:	inset 0 2px 2px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);
	box-shadow					:	inset 0 2px 2px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6) 0 21px #fff;
	-moz-box-shadow				:	inset 0 2px 2px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6) 0 21px #fff;
	-webkit-box-shadow			:	inset 0 2px 2px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6) 0 21px #fff;
}

input[type="checkbox"] {
	cursor						:	pointer;
	margin						:	4px 0 0;
	line-height					:	normal;
	width						:	auto;
}

input[type="checkbox"]:focus {
	outline						:	thin dotted #333;
	outline						:	5px auto -webkit-focus-ring-color;
	outline-offset				:	-2px;
}

.form a {
	color						:	#03638b;
	text-decoration				:	none;
}

.form .inputtextlink {
	display						:	block;
	margin-left					:	3px;
	margin-top					:	-7px;
	margin-bottom				:	5px;
}

.form td {
	vertical-align				:	top;
}

#table_delimiter {
	border              		:	1px solid #d0d0d0;
    border-width        		:	0 1px 0 0;    
}

/*Footer*/
#footer {
	text-align					:	center;
	font-size					:	10px;
	color						:	#363636;
	padding-top					:	5px;
	padding-bottom				:	10px;
}
#footer a:link {
	color						:	#970;
	text-decoration				:	none;
}
#footer a:visited {
	color						:	#a73;
	text-decoration				:	none;
}
#footer a:hover {
	color						:	#fa3;
	text-decoration				:	underline;
}
#footer a:active {
	color						:	#b82;
	text-decoration				:	none;
}

.notification {
	position					:	fixed;
	z-index						:	100;
	width						:	824px;
	margin-right				:	auto;
	margin-left					:	auto;
	bottom						:	0;
	text-align					:	center;
}

.notification-content {
	padding						:	0 .7em;
	max-width					:	600px;
	min-width					:	400px;
	margin-right				:	auto;
	margin-left					:	auto;
	display						:	inline-block;
	text-align					:	left;
	cursor						:	pointer;
}

#ui-game-fastmenu-wrapper {
	position					:	absolute;
	right						:	-100px;
	top							:	77px;
	width						:	100px;
	height						:	300px;
	overflow					:	hidden;
}

#ui-game-fastmenu {
	position					:	absolute;
	left						:	0px;
	top							:	0px;
	width						:	60px;
	height						:	200px;
	background-color			:	#f6a828;
	border						:	4px solid white;
	border-top-right-radius		:	10px;
	border-bottom-right-radius	:	25px;
}

#ui-game-replay-mainmenu-wrapper {
	position					:	relative;
	height						:	110px;
	overflow					:	hidden;
	position					:	relative;
	margin-left					:	auto;
	margin-right				:	auto;
	width						:	250px;
}

#ui-game-replay-mainmenu {
	position					:	relative;
	top							:	0px;
	height						:	100px;
	background-color			:	#f6a828;
	border						:	4px solid white;
	border-bottom-right-radius	:	25px;
	border-bottom-left-radius	:	25px;
}

#ui-game-overlay {
	position					:	absolute;
	top							:	0px;
	left						:	0px;
	width						:	100%;
	height						:	100%;
	overflow					:	hidden;
	opacity						:	0.45;
	z-index						:	10;
}

#ui-game-menu-window,
#ui-game-dialog-window {
	opacity						:	1;
	background					:	rgba(0,0,0,0.2);
	z-index						:	20;
}

#ui-game-menu-content,
#ui-game-dialog-content {
	left						:	4px;
	top							:	4px;
	width						:	100%;
	height						:	100%;
}

#ui-game-dialog-text {
	padding-left				:	7px;
	padding-right				:	7px;
}

.ui-game-menu-button a,
.ui-game-dialog-button a {
	padding						:	.4em 1em .4em 1em;
	margin						:	0px 0px 0px 10px;
	text-align					:	center;
	text-decoration				:	none;
	width						:	70%;
	position					:	relative;
}

.ui-selectmenu-menu {
	font						:	13px "Trebuchet MS", sans-serif;
	color						:	#383450;
}

.hor-zebra {
	font-size					:	14px;
	width						:	480px;
	text-align					:	left;
	border-collapse				:	collapse;
	background-color			:	white;
}
.hor-zebra .th {
	display						:	inline-block;
	font-size					:	16px;
	font-weight					:	bold;
	padding						:	10px 8px;
	color						:	#f6a828;
}
.hor-zebra .td {
	display						:	inline-block;
	padding						:	8px;
	color						:	#03638b;
}
.hor-zebra .odd {
	background					:	#e8edff; 
}
.hor-zebra .user {
	background					:	#f6c861;
}
.hor-zebra .clickable {
	cursor						:	pointer;
	color						:	#1c94c4;
	font-weight					:	bold;
	background					:	#f6c861;
	border						:	1px solid #cccccc;
}
.hor-zebra .clickable:hover {
    background					:	#f6d07b;
}

.hor-zebra a {
	text-decoration				:	underline;
}

.ui-tooltip {
	font						:	bold 13px "Trebuchet MS", sans-serif;
}

/* Social sign in buttons */
.ui_signin_button
{
	color						:	#fff;
	-webkit-box-shadow			:	0 1px 0 rgba(0,0,0,0.10);
	box-shadow					:	0 1px 0 rgba(0,0,0,0.10);
	-webkit-border-radius		:	3px;
	border-radius				:	3px;
	cursor						:	pointer;
	-webkit-user-select			:	none;
	-webkit-font-smoothing		:	antialiased;
	display						:	inline-block;
	font-family					:	arial,sans-serif;
	outline						:	none;
	overflow					:	hidden;
	position					:	relative;
	text-decoration				:	none;
	white-space					:	nowrap;
	font-size					:	12px;
	height						:	31px;
	line-height					:	31px;
	font-weight					:	bold;
}

.ui_signin_button:hover
{
	-webkit-box-shadow			:	inset 0 -2px 0 rgba(0,0,0,.20);
	box-shadow					:	inset 0 -2px 0 rgba(0,0,0,.20)
}

.ui_signin_button:active
{
	-webkit-box-shadow			:	inset 0 2px 0 rgba(0,0,0,.20);
	box-shadow					:	inset 0 2px 0 rgba(0,0,0,.20)
}

.ui_signin_button .ui_icon_button
{
	height						:	32px;
	width						:	32px;
	margin-top					:	-1px;
}

.ui_signin_button .ui_label_button
{
	-webkit-border-radius		:	0 3px 3px 0;
	border-radius				:	0 3px 3px 0;
	display						:	inline-block;
	padding						:	0 20px;
}

.ui_icon_button
{
	border-style				:	solid;
	border-width				:	0;
	display						:	inline-block;
	vertical-align				:	top;
	border-right-width			:	1px
}

.ui_google_signin_button
{
	background-color			:	#dd4b39;
}

.ui_google_signin_button:hover
{
	background-color			:	#e74b37;
}

.ui_google_signin_button:active
{
	background-color			:	#be3e2e;
}

.ui_google_signin_button .ui_icon_button
{
	border-color				:	#bb3f30;
	background					:	no-repeat url(../img/g_icon.png) -44px 0;
}

.ui_google_signin_button:hover .ui_icon_button
{
	border-color				:	#c33f2e
}

.ui_google_signin_button:active .ui_icon_button
{
	border-color				:	#a13426
}

.ui_facebook_signin_button
{
	background-color			:	#3b5998;
}

.ui_facebook_signin_button:hover
{
	background-color			:	#4467af;
}

.ui_facebook_signin_button:active
{
	background-color			:	#223f7a;
}

.ui_facebook_signin_button .ui_icon_button
{
	border-color				:	#1f4681;
	background					:	no-repeat url(../img/fb_icon.png) 0 0;
}

.ui_facebook_signin_button:hover .ui_icon_button
{
	border-color				:	#264788
}

.ui_facebook_signin_button:active .ui_icon_button
{
	border-color				:	#002757
}

.ui_twitter_signin_button
{
	background-color			:	#f4f4f4;
	color						:	#000000;
}

.ui_twitter_signin_button:hover
{
	background-color			:	#ffffff;
}

.ui_twitter_signin_button:active
{
	background-color			:	#e8e6d4;
}

.ui_twitter_signin_button .ui_icon_button
{
	border-color				:	#dee8d7;
	background					:	no-repeat url(../img/tw_icon.png) 0 0;
}

.ui_twitter_signin_button:hover .ui_icon_button
{
	border-color				:	#e7e0de
}

.ui_twitter_signin_button:active .ui_icon_button
{
	border-color				:	#bec0aa
}