body {
	color: #FFFFFF;
	font-family: "tahoma";
	background: #000000;
	border: 0;
	margin: 0;
	padding: 0;

	/* the following were added to override picnic defaults */
	font-size: 1em;
	line-height: 1;
}
body#main {
	background: #000000 url(/assets/body.png) repeat;
}

.dataTable table {
	font-size: 0.9em;
}

.dataTable th {color: #DDDDDD; background-color: #2E2E2E; text-align: center;}
.dataTable td {color: #FFFFFF}

.dataTable tr.hidden1{ background-color: #646444; }
.dataTable tr.hidden1alt{ background-color: #656555; }

.dataTable tr.hidden2{ background-color: #644464; }
.dataTable tr.hidden2alt{ background-color: #655565; }

.dataTable tr {background-color: #444444}
.dataTable tr.alt{ background-color: #555555; }

.dataTable .dataTableDivider { background-color: #000000; }

.tableCentered tr td {
	text-align: center;
}
.tableCentered th {
	width:70px;
	text-align: center;
}
.tableCentered th.metadataBookmarkRating {
	width:80px;
}
.tableCentered th.metadataComments {
	width:100px;
}
.tableCentered th.metadataDate {
	width:150px;
}

a, .a {
	text-decoration: underline;
	color: #FFFFFF;
}
a:link {color: #FFFFFF}
a:visited {color: #DDDDFF}
a:active, .a:active {color: #FFFFFF; text-decoration: underline overline}
a:hover, .a:hover {color: #8888FF; cursor: pointer}
th.sort-active { background-color: #FF8888; }
img {border-style: none;}

.errorBox {
	position: relative;
	top: 50px;
	
	border: 1px solid white;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	font-family: "BankGothic Lt Bt", "tahoma";
}
.errorBox .title {
	background: #888888;
	padding: 5px;
	color: #FFFFFF;
	
	text-align: left;
	font-size: 1.5em;
	font-weight: bold;
}
.error {
	border: 0px solid white;
	background: #555555;
	padding: 5px;
	color: #FFFFFF;
	text-align: center;
}
.error p {
	font-size: 2em;
}

.floatRight {
	float: right;
}
.floatLeft {
	float: left;
}

.darkText {
	color: #666666;
}

.statusError {
	color: #B9002F;
}
.statusSuccess {
	color: #88FF88;
	font-weight: bold;
}

.pagination {
	text-align: right;
}

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #FFFFFF;
	background-color: #333333;
	padding: 5px;
	opacity: 0.85;
	font-size: 0.6em;
}
#tooltip h3, #tooltip div {
	margin: 0;
}

p.tooltipTxt {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline;
}
h4 { /* TODO: make selector more specific */
	font-size: 0.5em;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline;
}
#metadata h4 {
	font-size: 1em;
	margin: 0;
	padding: 0;
	display: block;
}

.isMe, a.isMe{
	color: #B7FF82;
}

.halfCol_left {
	float:left;
	width: 50%;
}
.halfCol_right {
	float:right;
	width: 50%;
}

.body {
	width: 95%;
	height: 100%; /* important for main-screen.swf (all parent divs need to have height specifed) */
	text-align: center;
	margin: auto;
}
.block {
	background: #030303 url(/assets/header-bg.png) repeat-x;
	position: relative;

	text-align: left;
}
.block .center {
	text-align: center;
}
.block .right {
	text-align: right;
}
.block .left {
	text-align: left;
	float: left;
}
.block h1 {
	/*display: inline;*/
	margin: 0.2em;
	padding: 0;
}
.block h3 {
	display: inline;
	font-weight: normal;
	font-size: 1.2em;
	color: BBBBBB;
}
.block .padded {
	padding: 20px 20px 20px 20px;
}
.scrollLinks {
	color: #CCCCCC;
	font-size: 0.9em;
}
.scrollLinks a {
	cursor: pointer;
}

#userHeader {
    display:inline;

    /*set the div in the top right corner*/
    position:absolute;
    top:0;
    right:0;
	
	margin-top: 10px;
	margin-right: 10px;
}
#userHeader div {
	display:inline;
}
#userHeaderBottom {
    display:inline;

    /*set the div in the bottom right corner*/
    position:absolute;
    right:0;
	
	margin-right: 10px;
}
#userHeaderBottom div {
	display:inline;
}

#userHeader.dev input {
	color: #FFFFFF;
	background-color: #333333;
}

/* MENU */
#menu {
	background: url(/assets/menu-bg.png) repeat-x;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 115px;
	
	padding-top: 10px;
	padding-left: 10px;
}
#menu div {
	display: inline;
}
#menu div.top {
	margin-right: 40px;
}
#menu div.bottom {
	margin-left: 40px;
}

/* RATING STARS */
.ratingStars_s {
	width: 100px;
	background: url(/assets/RatingStars/starEmpty_s.png) 0 0 repeat-x;
}

.ratingStars_s div {
	height: 20px;
	background: url(/assets/RatingStars/starFilled_s.png) 0 0 repeat-x;
}
.ratingStars {
	width: 500px;
	background: url(/assets/RatingStars/starEmpty.png) 0 0 repeat-x;
}

.ratingStars div {
	height: 100px;
	background: url(/assets/RatingStars/starFilled.png) 0 0 repeat-x;
}

.ratingStars_notYetRated {
	opacity: 0.3;
}

/* BUTTONS */
.button {
	color: #FFFFFF;
	cursor: pointer;
}
.handCursor { /* will stop using .button because conflicts with picnic css */
	cursor: pointer;
}

/* COMMENTS */
.commentHeader {
	font-size: 1.5em;
}
.comment {
	position: relative;
	top: 20px;
	overflow: hidden;
}
.innerComment {
	position: relative;
	width: 100%;
	left: 0%;
	/* erm...not needed?*/
}

.comment table {
	border-spacing: 20px;
}
.col1, .col2 {
	float: left;
	position: relative;
}
.col1 {
	width: 15%;
	float: left;
}
.col2 {
	margin-left: 0%;
	width: 75%;
}


/*.col1_dev, .col2_dev {*/
.col1_dev {
	/*float: left;*/
	/*position: relative;*/
	flex-grow: 0;
}
.col1_dev {
	max-width: 200px;
	min-width: 180px;
	/*float: left;*/
}
.col2_dev {
	/*margin-left: 0%;*/
	text-align: left;
}

.forceMinHeight {
	height: 30px;
}
.forceSpacing {
	height: 20px;
}
.divider {
	clear: both;
	background-color: #555555;
	height: 1px;
	width: 100%;
}
.comment h1 {
	font-size: 1em;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline;
}

.comment h2 {
	font-size: 0.5em;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline;
}

.comment .power {
	font-size: 0.6em;
	font-weight: bold;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline;
}

textarea#commentInput {
	color: #FFFFFF;
	background-color: #333333;
}

/* REGISTER SUCCESS */
ol#thingsToDo {
	list-style-type: none;
}
#thingsToDo li {
	margin-left: 0;
	margin-top: 2em;
	margin-bottom: 2em;
}

/* FOR LEVEL PROFILE */
img.screenshot { /* scale image to fit screen, but set max to the resolution of the image which is 800x600 */
	width: 100%;
	max-height: 600px;
	max-width: 800px;
	border-style: solid;
	border-color: #DDDDDD;
	border-width: 1px;
}
.column {
	float: left;
}
.column_holder:after {
    /*content: "";*/
    /*display: table;*/
    clear: both;
}
.level_action_buttons {
	display: inline;
	padding-right: 10px;
}