/* STANDARD PAGE ELEMENTS */
body 
{ 
	padding: 0;	
	margin: 0; 
	font-family: sans-serif;
}

table 
{
	border-collapse: collapse;
}

form 
{
	margin: 0;
	padding: 0;
}

fieldset { border: 0; padding: 0; }
label { cursor: pointer; }

h1 { font-size: 140%; margin-top: 0;}
h2 { font-size: 120%; margin-top: 0;}
h3 { font-size: 100%; }
a { text-decoration: none; }

img { border: 0; }
img.inline { vertical-align: middle; }
img.captioned { display: inline; float: left; }


/* HEADER */

.header, 
.header .inner
{
	padding: 0;
	height: 129px;
}

	.header .home 
	{
		display: block;
		float: left;
		width: 270px;
		height: 80px;
		position: absolute;
		left: 0;
		top: 0;
	}

	/* MENU */
	.menu 
	{
		margin: 0;
		position: absolute;
		top: 90px;
		left: 0;
		float: left;
	}

		.menu a
		{
			padding: 0;
			margin: 0 0.2em;
			display: block;
			float: left;
			text-align: center;
			line-height: 30px;
		}

	/* LOGIN AREA */
	.header .login 
	{ 
		font-size: 10px;
		padding: 0.2em;
	}

		.header .login label
		{
			height: 1em;
		}

		.header .login input
		{
			font-size: x-small;
			height: 1.1em;
			margin-bottom: 2px;
			vertical-align: middle;
			width: 8em;
		}

		.header .login button
		{
			font-size: x-small;
			margin-right: 4em;
			margin-top: 2px;
			padding: 0 2px;
		}

	/* "LOGGED IN" INFO */
	.header .login,
	.loggedin
	{
		float: right; 
		position: relative;
		top: 60px;
		text-align: right;
	}

	.loggedin 
	{
		font-size: small;
		width: 150px;
		padding-right: 4px;
	}

		.loggedin .username,
		.loggedin a
		{
			font-weight: bold;
		}

		.loggedin a
		{
			display: block;
			float: right;
			height: 18px;
			margin-left: 80px;
			padding-top: 3px;
			text-align: center;
			width: 56px;
		}


/* PAGE LAYOUT */
#container
{
	margin-top: 0.5em;
	font-size: small;
	width: 100%;
  overflow: hidden;
}

#container.columns {
}

	#content 
	{
		padding: 0.5em;
		padding-top: 0;
	}

  #container.columns #content {
    margin-left: 190px;
  }

  #container #sidebar {
    display: none;
  }

	#container.columns #sidebar
	{
    display: block;
    float: left;
		padding: 0.5em;
    width: 180px;
	}
		#sidebar h1
		{
			margin: 0; 
			padding: 0.2em;
			text-align: left;
			white-space: nowrap;
		}

		#sidebar .listing 
		{
			font-size: 90%;
			width: 95%;
			margin-bottom: 1em;
		}

/* Paging */
.paging, .filter { text-align: center; }

.paging * { vertical-align: bottom; }
.paging .pagenum
{
	padding: 1px 2px;
	font-weight: bold; 
	font-family: Courier New, Andale Mono, monospace;
	font-size: 90%; 
}

/* LIST OF PUZZLES */

.listpuzzles, .games
{
	margin: 1em auto;
}

.listing th, .listing td
{
	padding: 0.4em;
}

/* APPLET */
#applet 
{
	margin: 0 auto;
	text-align: center;
}


/* GOOGLE ADS */
#ad_leaderboard
{
	text-align: center;	
}

#ad_skyscraper
{
	text-align: center;
}

/* SITEMETER COUNTER */

.meter 
{ 
	float: right;
}

/* ASSOCIATE LINK */
#body .associate 
{ 
	float: right; 
	margin-right: 0.5em; 
	margin-bottom: 0.5em; 
}

#left .associate
{
	margin: 0;
	margin-bottom: 2em;
}


/* FOOTER TEXT */

.footer
{
	font-size: 70%;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

.syndication
{
	text-align: center;
	margin-top: 1em;
}


/* AUTH FORMS */

.auth
{
	font-size: small; 
	margin: 1em auto; 
	padding: 0.5em 1em;
	width: 50%;
}

.auth table { margin: 0 auto 2em; }
.auth td { padding: 0.5em; }
.auth td.submit { text-align: center; }


/* ANNOUNCEMENTS */
.announcements { margin: 0; }

	.announcements div
	{
		margin-bottom: 0.2em;
		padding: 0.5em; 
	}

		.announcements h2
		{ 
			font-weight: bold;
			font-size: small;
		} 

		.announcements p
		{
			margin: 0;
		}

			.announcements p a.more
			{
				font-size: smaller;
				display: block;
			}
		

/* PORTAL */
.portal .item { padding: 1em; margin-bottom: 1em; }
	.portal .even .logo { float: right; margin: 0 1em 1em 1em; }
	.portal .odd .logo { float: left; margin: 0 1em 1em 0;}
		.portal .item img.feed { float: right; }

	.portal ul { padding: 0; }
	.portal li { display: inline; }

#errorlist li
{
	list-style-type: none;
}


/* MESSAGES AND ERRORS */

.message, .error
{
	padding: 0.5em;
	padding-left: 2em;
	width: 50%;
	margin: auto;
	font-weight: bold;
	text-align: center;
}

.instruction
{
	margin: 1em auto;
	width: 50%;
	text-align: center;
	padding: 0.5em;
}

.instruction p
{
	margin: 0;
	text-align: center;
}


/* POPUP MENUS */

#dropmenudiv
{
    position:absolute;
    border:1px solid black;
    border-bottom-width: 0;
    font-size: small;
    line-height:18px;
    z-index:100;
    opacity: 0.9;
}

#dropmenudiv a
{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
	color: black;
}

#dropmenudiv a:hover
{
    background-color: #fffe87;
}

.timetrials dl {
	margin: 2px;
	width: 10em;
}
	.timetrials dt {
		padding: 1px;
		width: 8em;
		cursor: hand;
	}
	.timetrials dd {
		margin-left: 1em;
	}

	.timetrials dd .date { width: 5em; float: left; }

.fb-like {
    float: right;
}

/* HELP */

table.help td
{
	padding: 0.4em;
}

.sidebyside { width: 100%; }
.sidebyside td { padding: 1em; }
.sidebyside .left { text-align: right; }
.sidebyside .right { text-align: left; }
.sidebyside .image { width: 30%; text-align: center; }
.sidebyside .text { width: 70%; vertical-align: middle; }



/* TABBER */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
 height:160px;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #778;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #000; }
ul.tabbernav li a:visited { color: #000; }

ul.tabbernav li a:hover
{
 color: #000;
 background: #AAE;
 border-color: #227;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;
 position: relative;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}

.playerlist
{
	height: 640px;
	overflow: auto;
	border: 1px solid black;
	padding-top: 0;
}

.playerlist ul,
#global_chat_list
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.playerlist li
{
	background: #dde;
	margin-bottom: 1px;
}

p.status_bar
{
    color: black;
	background: #fffe87;
	border: 1px solid black;
}

table.list td,
table.list th
{
	border: 1px solid #ddd;
}

table.list th
{
	background: #ddd;
}

table.list tr.selected td
{
    background: #aae;
}

table.list tr td span.waiting
{
    color: #00f;
}

.buttonpanel
{
	text-align: center;
	position: absolute;
	bottom: 0.5em;
	width: 100%;
}


.timetrial
{
	width: 40%;
	float: left;
	margin-right: 2em;
}

.tla
{
	text-align: left;
	margin: 0 auto 1em;
}
	.tla h1
	{
		font-size: small;
		padding: 0.2em;
		margin-bottom: 0;
	}
	.tla ul
	{
		list-style: none;
		padding: 2px;
		margin: 0;
	}

		.tla li
		{
			margin-bottom: 0.5em;
		}
			.tla a
			{
				font-weight: bold;
			}