html, body {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	background: #cef;
}

html, body {
	background: url(webchat/seamlesstest2.png);
}

a img {
	border: 0;
}

table th, table td {
	text-align: left;
	vertical-align: top;
}

#container {
	width: 736px; /* 768-32 */
	/*max-width: 1168px; *//* 1200-32 */
	margin: 0 auto;
	background: white;
	border-left: 1px solid #8cf;
	border-right: 1px solid #8cf;
	border-radius: 0 0 11px 11px; -moz-border-radius: 0 0 11px 11px;
}

#banner {
	height: 60px;
	text-align: center;
}

#topbar {
	color: white;
	font-weight: bold;
	text-shadow: #004466 0px 0px 5px;
	background: url(webchat/topbar.png) black;
	font-size: 13px;
	padding: 2px 1px 1px 8px;
}

#body {
	float: right;
	width: 536px; /* 736-200 */
	/*max-width: 968px; *//* 968-200 */
	/*min-height: 400px; *//* bg.png takes up 300+px of background.. */
}

#messages {
	display: none; /* enabled with js when there is content */
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: -150px;
	color: white;
	background: black;
	border-left: 1px solid yellow;
	border-right: 1px solid yellow;
	border-bottom: 1px solid yellow;
	border-radius: 0 0 11px 11px; -moz-border-radius: 0 0 11px 11px;
	padding: 8px;
	width: 300px;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

#messages p {
	margin: 0;
	padding: 4px 8px;
	text-align: center;
}

#sidebar {
	float: left;
	width: 199px;
	background: #eef;
	border-right: 1px solid #cef;
	border-bottom: 1px solid #cef;
	border-radius: 0 0 11px 0; -moz-border-radius: 0 0 11px 0;
	padding-bottom: 80px;
}

#infobar {
	float: left;
	clear: left; /* otherwise it can float to right if body is too short */
	width: 200px;
	font-size: 12px;
}

#topbar .site { float: left; }
#topbar .user { float: right; text-align: right; padding: 0 2px 1px 0; }

#topbar a { color: white; }
#topbar form { display: inline; }
#topbar input { font-size: 13px; border: 1px solid gray; color: gray; width: 90px; margin: 0; padding: 0; }

#body h1 { margin: 16px 8px; padding: 0; color: #e0a; font-size: 36px; font-weight: bold; letter-spacing: -3px; line-height: 1.2; }
#body h1:after { content: " "; display: block; margin-top: -10px; border-bottom: 2px solid #eef; }
#body h2 { margin: 16px 8px; padding: 0; color: #604; font-size: 18px; font-weight: bold; line-height: 1.2; }
#body h2:after { content: " "; display: block; margin-top: -6px; border-bottom: 2px solid #eef; }
#body p { margin: 12px; }
#body a { font-weight: bold; color: #604; text-decoration: none; }
#body a:hover { color: #704; text-decoration: underline; }

#sidebar h2 { margin: 16px 8px; color: #604; font-size: 14px; font-weight: bold; line-height: 0.6; }
#sidebar h2.profile { padding: 4px 0 0 52px; background: url(webchat/profile48.png) left top no-repeat /* required for profilepic */; min-height: 48px; }
#sidebar h2 .extra { display: block; margin-top: 4px; color: black; font-size: 12px; line-height: 1.2; }
#sidebar nav ul { list-style: none; position: relative; left: -6px; margin: 0; padding: 0; }
#sidebar nav li { margin: 0; padding: 0; }
#sidebar nav a { display: block; margin: 2px 0; padding: 0 6px; background: #604; color: white; text-decoration: none; }
#sidebar nav a:hover, #sidebar nav li.active a { background: #704; }

#infobar p { margin: 20px; padding: 4px; border: 1px dashed #cef; background: #bde; }
#infobar a { font-weight: bold; color: black; text-decoration: none; }
#infobar a:hover { text-decoration: underline; }

#recent a { text-decoration: none; color: #444; vertical-align: middle; }
#recent img { margin: 0 0 0 8px; vertical-align: middle; }

footer { clear: both; background: #bde; border-radius: 0 0 11px 11px; -moz-border-radius: 0 0 11px 11px; text-align: center; font-size: 10px; line-height: 1.1; padding: 1em; }
footer p, footer p a { color: #5790ae; }
nav#bottom { text-align: center; font-size: 9px; }
nav#bottom a { color: gray; }

/* django/forms */
/* form on top */
.djform .form-error { background: #fcc; color: red; }
.djform .form-error ul { margin: 0; padding: 0 12px; list-style: none; }
/* form fieldsets */
.djform fieldset { margin: 8px; border: 1px solid #eee; background: #eef; }
.djform fieldset .field { padding: 3px 4px; }
.djform fieldset legend { color: #604; font-weight: bold; }
/* form in field */
.djform .field { padding: 3px 12px; }
.djform label { display: inline-block; width: 220px; margin: 0; padding: 0; }
.djform .required label { font-weight: bold; }
.djform .has-error label { color: red; }
.djform input { font-weight: bold; font-size: 14px; }
.djform input:focus { background: #ffb; }
.djform input[type=text], .djform input[type=password] { width: 220px; border: 2px solid #cef; border-radius: 8px 8px 8px 8px; -moz-border-radius: 8px 8px 8px 8px; }
.djform .error-text { font-size: 11px; color: red; }
.djform .help-text { font-size: 11px; color: gray; }

/* tweaks to the form */
.djform ul { list-style: none; margin: 0; padding: 0; } /* ul is used for radio input in a form */
.djform ul label { width: auto; } /* nothing to the right of the label */

/* front-page and others.. */
.profile-enum { margin: 12px; font-size: 10px; text-align: center; }
.profile-enum .profile { display: inline-block; width: 100px; padding: 4px; margin: 8px; border: 1px solid #cef; float: left; background: #bde; }
#body .profile-enum a { color: black; text-decoration: underline; }

#notifications { position: absolute; color: black; background: #fc0; font-weight: bold; font-size: 12px; text-align: center; top: -6px; right: 12px;
		 border-radius: 12px; -moz-border-radius: 12px; height: 21px; min-width: 24px; padding-top: 2px; display: none; }

.gender-filter { text-align: right; font-size: 12px; margin: 0; padding: 0 12px; }
.gender-filter select { font-size: 12px; }

/* profile description */
#profile-description img { margin: 0 0 4px 10px; }

/* messagewall */
#wall-input { margin: 0 12px; }
#wall-input textarea, #wall-input .counter { border: 1px solid black; }
#wall .message { margin: 3px 12px; background: #cef; padding: 0 2px; }
#wall .message.alt { margin: 3px 12px; background: #eefcff; }
#wall .message .datetime { display: block; font-size: 10px; }
#wall .message .body { clear: both; }

#search-results { margin: 8px; border-collapse: collapse; border: 0; }
#search-results tr td { padding: 8px; margin: 0; background: #eee; }
#search-results tr.alt td { padding: 8px; margin: 0; background: #fff; }

/* privacy statement */
#privacy dl, #privacy ul, #privacy table { padding: 0 1.5rem; }
#privacy dt { font-weight: bold; }
#privacy .privacy-purpose { border-collapse: collapse; }
#privacy .privacy-purpose th { background-color: #eef; }
#privacy .privacy-purpose th, #privacy .privacy-purpose td { border: 1px solid #ccc; padding: 2px 4px; }
#privacy .contact td, #privacy .contact th { padding: 0 1rem; }