/* GENERAL *********************************************/
html { background-color: rgb(34,34,34); }
body {
	
	color: rgb(170,170,170);
	font-family: 'Lucida Grande', Helvetica, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5 {
	color: white;
	font-family: Georgia;
	text-shadow: 0 -1px 0 rgb(34,34,34);
}

a { color: white; text-decoration: none; }
a:hover { text-decoration: underline; }
a img { border: 0; }

.clear { clear: both; }
.error { color: firebrick; margin-top: 8px; }


/* HEADER **********************************************/
#bar_wrapper { overflow: hidden; padding-bottom: 10px; width: 100%; }

#bar {
	background-color: rgb(51,102,153);
	border-bottom: 1px solid rgb(100,147,182);
	box-shadow: 0 5px 5px rgb(25, 25, 25);
	color: white;
	padding: 0;
	width: 100%;
	-moz-box-shadow: 0 5px 5px rgb(25,25,25);
	-webkit-box-shadow: 0 5px 5px rgb(25,25,25);
}
#bar h1 {
	float: left;
	font-size: 24px;
	font-style: italic;
	font-weight: normal;
	margin: 5px 5px 5px 15px;
	text-shadow: 0 1px 1px rgb(34,34,34);
}
#bar h1 a {
	text-decoration: none;
	margin: 0;
	padding: 0;
}
#bar #back {
	float: left;
	margin: 15px 0 0;
	text-shadow: 0 1px 1px rgba(34,34,34,0.25);
}
#bar ul.right {
	float: right;
	line-height: 24px;
	list-style-type: none;
	margin: 6px 15px;
	text-shadow: 0 1px 1px rgba(34,34,34,0.25);
}
#bar ul.right li {
	float: left;
	margin: 0 0 0 15px;
}
#bar a {
	padding: 5px;
}

#idle_bar { overflow: hidden; padding: 0 0 10px; position: absolute; width: 100%; z-index: 500; }

#idle_bar div {
	background-color: firebrick;
	border-bottom: 1px solid darkred;
	box-shadow: 0 5px 5px rgba(25,25,25,0.75);
	color: white;
	display: none;
	margin: 0;
	padding: 5px;
	text-align: center;
	text-shadow: 0 1px 1px rgb(34,34,34);
	width: 100%;
	-moz-box-shadow: 0 5px 5px rgba(25,25,25,0.75);
	-webkit-box-shadow: 0 5px 5px rgba(25,25,25,0.75);
}
#idle_bar div h2 { font: italic normal 18px Georgia; display: inline; margin: 0; padding: 0; text-shadow: 0 -1px -1px rgb(34,34,34); }
#idle_bar div p { display: inline; margin: 0 0 0 5px; padding: 0; }


/* CONTAINER *******************************************/
#container { margin: 15px auto 25px; width: 950px; }
#container #left_column { float: left; width: 570px; }
#container #right_column { float: left; margin-left: 40px; width: 340px; }
#container h2 { margin-top: 0; }


/* BOX *************************************************/
.box {
	background-color: white;
	border-radius: 5px;
	box-shadow: 5px 5px 5px rgb(25,25,25);
	color: black;
	margin-bottom: 20px;
	padding: 10px;
	-moz-border-radius: 5px;
	-moz-box-shadow: 5px 5px 5px rgb(25,25,25);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 5px 5px 5px rgb(25,25,25);
}
.box h4 { font-size: 16px; margin: 0; text-shadow: 0 1px 1px white; }
.box a, .box h4 { color: black; }


/* LISTS ***********************************************/
#online_users, #my_spaces, #public_spaces { list-style-type: none; padding: 0; }
#online_users li, #my_spaces li { line-height: 1.75em; margin-left: 15px; padding-left: 24px; }

#online_users li { background: url(/images/user.png) no-repeat center left; }
#online_users li.editing { background-image: url(/images/user_edit.png); }
#online_users li.away { background-image: url(/images/user_gray.png); }
#online_users li.in_space { background-image: url(/images/user_red.png); }
#online_users li.joinable { background-image: url(/images/user_go.png); }

#my_spaces li { background: url(/images/page_white_world.png) no-repeat center left; }
#my_spaces li.private { background-image: url(/images/page_white.png); }
#my_spaces li.deleted { background-image: url(/images/page_white_delete.png); }

#public_spaces { margin-bottom: 6px; }
#public_spaces li { background: url(/images/page_white_world.png) no-repeat 7px 7px; border-top: 1px rgb(170,170,170) dotted; }
#public_spaces li:first-child { border: 0; }
#public_spaces li a { display: block; padding: 7px 0 7px 30px; text-decoration: none; width: 290px; }
#public_spaces li a:hover span.name { text-decoration: underline; }
#public_spaces li span.description { color: rgb(170,170,170); display: block; }


/* FORMS ***********************************************/
label { display: block; font-weight: bold; margin: 1em 0 0.5em; position: relative; }
label input { font-weight: normal; margin-top: 0.5em; }
img#pwcheck { margin: 0 0 -4px 5px; }


/* IE MESSAGE ******************************************/
#ie, #ie h1, #ie p { color: white; font-size: 48px; font-weight: normal; }
#ie p { font-size: 20px; }