/*
 * Eric Meyer's CSS reset: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


/*
 * For font sizes, see http://www.alistapart.com/articles/howtosizetextincss/
 */
body {
    line-height: 1.5em;  /* 24px */
    font-family: georgia, 'bitstream vera sans serif', 'lucida grande', helvetica, verdana, sans-serif;
}
input {
    font-family: Helvetica, 'bitstream vera sans serif', 'lucida grande', Arial, sans-serif;
}
p, li, dt, dd {
    font-size: 0.875em; /* 14px */
}
h1, h2, p, ul, ol, dl, table {
    margin-bottom: 1.5em;
}

h1 {
    font-size: 2em; /* 28px */
    line-height: 2.5em;
    margin-bottom: 0.5em;
    font-weight: bold;
    text-align: center;
}
h2 {
	font-size: 1.25em; /* 20px */
	font-weight: bold;
}
h3 {
	font-size: 1.125em; /* 18px */
	font-weight: bold;
}
h4 {
	font-weight: bold;
}

#footer p {
	font-size: 0.75em; /* 12px */
	color: #666;
}


/**
 * Standard elements
 */

em { font-style: italic; }
strong { font-weight: bold; }

/* Lists */
ul, ol, dl { padding-left: 2em; }
ul, ol     { list-style-position: inside; }
ul         { list-style: disc; }
ul ul      { list-style: circle; }
ol         { list-style: decimal; }

label { font-weight: strong; }

/**
 * Common elements
 */

.container {
	width: 31em;
	margin: 0 auto;
}
table .left, p {
	padding-left: 0.5em;
}
table .right, p {
	padding-right: 0.5em;
}

.help {
	color: #555;
}

/* Taken from Blueprint CSS */
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}

.error, .notice, .success {
	text-align: center;
}


/**
 * Forms
 */

form input {
    margin: 0;
    padding: 1px;
}
form input[type=text],
form input[type=password],
form textarea,
form select {
    border: 1px solid #aaa;
}

form ul.errorlist {
    background:#FBE3E4;
    color:#8a1f11;
    margin: -1.5em 0 0 0;
    padding: 0;
    list-style: none;
    padding-bottom: 0.6em;
    text-align: center;
}
div.with-errors {
    background:#FBE3E4;
    padding-top: 0;
    margin-bottom: 0.6em;
}

form table {
    width: 80%;
    margin-left: 10%;
}
form table th,
form table td {
    padding-top: .6em;
    padding-bottom: .6em;
}
form table th {
    text-align: right;
    padding-right: 1em;
}
form table ul.errorlist {
	margin: 0;
}
.with-errors tr.field {
    background:#FBE3E4;
}
.with-errors tr.errors td {
    padding-top: 0;
    padding-bottom: 0.6em;
}


/**
 * Definitions
 */

.definition p,
.definition li,
.definition dt,
.definition dd {
    font-size: 1em;
}
.definition {
	width: 100%;
}
.definition .term {
    font-weight: bold;
    vertical-align: top;
    text-align: right;
    padding-right: 1em;
}
.definition td {
    border-top: 1px solid #bbb;
}
.definition .actions {
    border-left: 1px solid #bbb;
    padding-left: 0.5em;
}
.definition .mini {
    font-size: 0.75em; /* 12px */
    border-left: 0px;
}
.definition .mini .button {
    cursor: pointer;
    color: #888;
}


/**
 * Navigation
 */

#topbar {
	margin: 0 auto;
	padding-bottom: 1.5em;
}
#topbar-left {
	float: left;
}
#topbar-right {
	float: right;
}
#topbar-right a.logout {
	color: #88F
}


/**
 * Main and Flash
 */

#flash-messages-wrap {
	clear: both;
}
#main {
	clear: both;
	padding-bottom: 1.5em;
}


/**
 * Footer
 */

#footer-wrap {
    background: #e5e5e5;
    clear: both;
}
#footer { padding: 1.5em 0; }


/**
 * Dashboard
 */
 
table#latest-words {
  width: 100%;
}
#quiz-countdown {
  text-align: center;
}

#add-word p {
	text-align: center;
}
#add-word .text,
#add-word .button {
	font-size: 1.4285em; /* 20px */
}
#add-word .text {
	width: 18em;
}
#add-word.loading .text {
    background: url(../images/spinner.gif) right center no-repeat;
}

#start-quiz {
	font-size: 1.4285em; /* 20px */
	text-align: center;
}

#workflow ol {
	text-align: left;
}


/**
 * Quiz
 */

#quiz-question p {
	text-align: center;
}
#quiz-question h2 {
	font-size: 1.125em; /* 18px */
	margin-bottom: 0;
}
#quiz-question input[type=submit],
#quiz-question input[type=button] {
	margin-left: .5em;
}

#end-quiz-wrap {
	width: 8em;
	text-align: center;
	margin: -.5em auto 1em auto;
	padding: 0;
	background: #f5f5f5;
	border: 1px solid #aaa;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
}
#end-quiz-wrap a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: black;
}


/**
 * Signup form
 */

#signup-pitch {
    text-align: center;
}
#signup-pitch #promise {
    color: #666;
}


/**
 * Login form
 */

#login-pitch {
    text-align: center;
    color: #666;
}

#login-form table {
	margin-left: auto;
	margin-right: auto;
}
#login-form td.left {
	padding-right: 1em;
	text-align: right;
}
#login-form td.btn-wrap {
	text-align: center;
}


/**
 * Intro
 */

#intro h2, #intro p {
    text-align: center;
}
#intro ul {
    padding: 0;
}
#intro li {
    list-style: none;
    text-align: center;
	font-size: 1.8em; /* 24px */
    margin: 0 0 1.2em 0;
    width: 5.5em;
    float: left;
}

#intro form p {
	text-align: center;
}
#intro form .text,
#intro form .button {
	font-size: 1.4285em; /* 20px */
}
#intro form .text {
	width: 18em;
}
#intro form .help {
	display: block;
}


/**
 * Feedback
 */

form.feedback {
  width: 60%;
  margin-left: 20%;
}
form.feedback input[type=text] {
  width: 15em;
}
form.feedback textarea {
  width: 100%;
}
form.feedback p {
  text-align: center;
}