body 
{
	font-size: 85%;
	font-family: sans-serif;
	margin: 0;
	color: #444;
}

h1 { font-size: large; }
h2 { font-size: medium; }
h3 { font-size: medium; margin: 0; }

img { border: 0; }

#page 
{
	padding: 0.5em;
}


/*
 *	Form styles: for correct alignment of table-free forms
 */

.aligned label,
.aligned input 
{
	display: block;
	float: left;
	margin-bottom: 10px;
}

.aligned input[type=text] 
{
	width: 150px;
}

.aligned label 
{
	text-align: right;
	padding-right: 20px;
	width: 15em;
}

.aligned br 
{
	clear: left;
}

.aligned textarea 
{
	width: 20em;
	height: 8em;
}

input.button 
{
	text-align: center;
	/* override stuff set up for non-button inputs */
	display: inline;
	float: none;
	margin-bottom: 0;
}

#status
{
	margin: 0.5em;
}

.message
{
	text-align: center;
	padding: 0.5em;
	background: #c00;
	color: white;
	font-weight: bold;
	border: 3px double white;
	white-space: nowrap;
}

.message button
{
	margin: 0 0.5em;
}


/* 
 * List styling: for lists of text inputs in game creation form
 */
form li { margin: 1em 0.5em; }
li.question 
{ 
	border-bottom: 1px solid #ccc; 
	padding: 0.5em;
}

table.cardlist_header th
{
	border: 0;
}


/*
 * Fieldset styles: for grouping of form controls
 */

fieldset 
{
	padding: 1em 0;
	margin: 1em 0;
	border: 0;
	border-bottom: 3px double #ccc;
}

fieldset legend 
{
	font-weight: bold;
}


/*
 * Confirm delete: two forms side by side, so
 * display inline
 */
.confirm form 
{
	display: inline;
}


input.card,
input.question,
input.answer,
input.feedback 
{
	margin: 0.2em;
}

input.card { width: 30em; }
input.question { width: 30em; }
input.answer{ width: 15em; }
input.feedback { width: 30em; }

.question label { font-size: small; }

/*
 * Table styling
 */

table { border-collapse: collapse; }
td, th 
{ 
	border: 1px solid silver; 
	padding: 0.3em; 
}


/* 
 * Menu styling
 */
#menu 
{
	padding: 0.5em;
	background: #eee;
}

#menu a 
{
	font-weight: bold;
	color: #c00;
	margin: 0 0.5em;
	text-decoration: none;
}

/*
 * link styles
 */
.more { font-size: smaller; }
.logout { font-size: smaller; float: right; }
.play { font-size: smaller; }

/*
 * game listing styles
 */

.flashcard_game,
.millionaire_game
{ 
	background-color: #f2f2f2;
	padding: 0.5em;
	margin: 0.5em;
	width: 80%;
}


/**
 * FLASHCARDS
 */

#game 
{
	margin: 0 auto;
	width: 50%;
	text-align: center;
}

#card_table
{
	margin: 1em auto;
	width: 80%;
	height: 15em;
}

#card 
{
	border: 1px solid gray;
	padding: 1em;
	text-align: center;
	font-size: 120%;
}

.front 
{
	background: #dde;
}

.back 
{
	background: #fff1df;
}

#grid, #answers
{
	margin: 1em auto;
}

#answers
{ 
	text-align: left; 
	background: #ddd;
	padding: 1em;
	font-size: 85%;
}

#answers .front 
{ 
	font-weight: bold; 
	background: transparent;
}

#answers .back 
{ 
	font-style: italic;  
	background: transparent;
}


/* MATCHING */

#grid
{
	border-collapse: separate;
	border-spacing: 5px;
}

#grid td 
{
	margin: 1em;
	padding: 0;
}

#grid .card_text
{
	width: 8em;
	height: 6em;
	margin: 0;
	border: 0;
}

#grid .expand
{
	text-align: right;
	float: right;
	position: relative;
	margin-top: -1.5em;
}

.expand 
{
	font-size: x-small;
	padding-right: 2px;
	width: 1em;
	background: #ddd;
	color: white;
}

.selected { background: yellow; }
.done { background: white; }


#tooltip 
{
	background: #fff;
	padding: 0.5em;
	border: 1px solid #c00;
	width: auto;
}

#finished
{
	background: #c00;
	color: white;
	font-size: 300%;
	height: 8em;
	width: 12em;
	vertical-align: middle;
}

#finished td { border: 0; }


/* MILLIONAIRE */

/* the main board */
#millionaire 
{
	width: 100%;
	border-collapse: separate;
	border-spacing: 15px;
	background: #dcdad5;
}

#millionaire td { border: 0; }

/* question */
#millionaire #question
{ 
	background: #efefef;
	width: 70%; 
	height: 10em;
	border: 1px solid #666;
	padding: 0;
}

/* prize levels */
#millionaire #levels div { margin: 3px 0; }
#millionaire #levels .level { background: #efefef; }
#millionaire #levels .current 
{
	background: #c00; 
	color: white; 
	font-weight: bold; 
}

#millionaire #levels .done { background: #ccc; }

/* answers */
#millionaire .answer
{ 
	background: #efefef; 
	border: 2px solid #666;
	cursor: pointer;
	text-align: left;
	height: 4em;
}
#millionaire .selected { border-color: #c00; }
#millionaire .answerletter { font-weight: bold; }

#millionaire #question .won 
{
	background: #c00;
	color: white;
	font-size: 200%;
	margin: 0;
	padding: 5px;
}

/* CONTROL PANEL */

#controlpanel 
{
	margin: 0.5em;
}

#controlpanel button 
{
	border: 1px solid black;
	margin: 0.2em;
}

.logout img,
.warning img,
.error img,
.info img
{
	vertical-align: bottom;
}

.warning,
.error,
.info
{
	background: #eee;
	margin: 1em auto;
	width: 50%;
	padding: 0.2em;
	text-align: center;
}

.warning,.error { border: 1px #c00 solid; }
.info { border: 1px solid gray; }
.error { color: #c00; }

form.subscription_type 
{
	margin: 1em;
	background-color: #eee;
	padding: 1em;
}