/* Flashcard Base css file */
*
{
	margin: 0;
	padding: 0;
}	

body {height: 100%; }
em {color: teal; font-style: normal; }
select {width: 12em; }


/* Overall Page */
#page 
{
	background-color: #eee8aa; /* pale golderod */
	margin-top: 10px;
	margin-left: auto; margin-right: auto;
	width: 48em;
	color: #8b6914; /* golderod4 */
	font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
	border: 2px solid #8b6914;
}


#page a { color: #8b6914; }

#page-wide 
{
	background-color: #eee8aa; 
	margin-top: 10px;
	margin-left: auto; margin-right: auto;
	width: 68.75em;  /* Must also edit outercontent-wide */
	color: #8b6914; /* golderod4 */
	font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
	border: 2px solid #8b6914;
}

#page-wide a { color: #8b6914; }

/* Banner has photo and horizontal links */
#banner h1 a {color: #8b6914; font-size: small;}

#banner li a {font-weight: bold; text-decoration: none; font-size: small}
#banner li a {padding-left: 2em; padding-right: 2em; }
#banner li a {padding-top:   .2em; padding-bottom: .2em;}
#banner li a:link    { background-color: #cdbe70;   color: white; }
#banner li a:visited { background-color: #cdbe70;   color: white; }
#banner li a:hover   { background-color: white;  color: #cdbe70;  }
#banner li a:active  { background-color: #cdbe70; color: white;  }

#banner
{
	background-color: #eee8aa;
	color: inherit;
	height: 7.84em;
	border-bottom: 2px solid #8b6914;
}

#banner img
{
	float: left;
	width: 10.45em;
	padding-right: .8em;
}

#banner h1
{
	padding-top: .5em;
	font-size: x-large;
}

#banner h2
{
	font-size: large;
	margin-bottom: 1.6em;
}

#banner li
{
	display: inline;
	list-style-type: none;
}	



#middle {height: 100%}

/* Vertical navigation menu on left side of content area */
#menu 
{
	height: 100%;
	background-color: #eee8aa; 
	color: inherit;
	width: 10.45em;
	
	float: left;
	text-align: center;
}	

#innermenu {padding-left: 1.5em; padding-right: 1.5em; }
.resources li {font-size: small; }
.countdown {font-size: small; font-weight: bold; text-decoration: none; background: white }

#menu .button {margin-top: 1.3em; margin-bottom: 1em;}

#menu #inneremenu {font-size: small; }


#menu .button a {font-weight: bold; text-decoration: none; font-size: small; display: block;}
#menu .button a {padding-left: .4em; padding-right:   .4em;}
#menu .button a {padding-top: .2em; padding-bottom: .2em;}
#menu .button a:link       { background-color: #cdbe70;   color: white; }
#menu .button a:visited { background-color: #cdbe70;   color: white; }
#menu .button a:hover     { background-color: white;     color: #cdbe70;  }
#menu .button a:active   { background-color: #cdbe70;   color: white;  }

#menu p {font-size: x-small; margin-top: 2em; }

#menu ul
{
	margin-top: .1em;
}	


#menu li
{
 	list-style-type: none;
	padding-top: .2em;
	padding-bottom: .2em;
}	



/* Content areas */

#login
{
	text-align: left;
}

.imp {font-weight: bold; }

.error {color: red; font-weight: bold; }


#login p.error
{
	margin-left: 0;
	padding-left: 0;
}

#outercontent
{
	width: 37.5em;
	height: 100%;
	background-color: #ffffe0;
	color: inherit;	
	float: left;
}	


#outercontent-wide
{
	width: 58.29em;   /* Must also edit page-wide */
	height: 100%;
	background-color: #ffffe0;
	color: inherit;	
	float: left;
}	



#innercontent
{
	padding: 1em;
	margin-left: 1em;
	font-size: small;
}

#innercontent ul
{
	margin-top: 1em;
	margin-left: 1.6em;
}	
	

#displayarea
{
	height: 25em;
	margin-top: 1em;
}	

#innercontent .summary h3
{
	padding-top: .8em;
	padding-bottom: .5em
}	

#innercontent .summary h4
{
	padding-top: .7em;
}	

#innercontent .summary ul
{
	margin-top: .3em;
	padding-bottom: .5em;
}	

#innercontent .summary td
{
	padding: 1em;
	border: solid black 1px;
	
}

.debug {font-size: xx-small; color: green; }
.log {font-size: xx-small; }

#innercontent h3 {margin-top: 0;}
#innercontent h4 {margin-top: 0;}
#innercontent tr {padding-left: 1em;}
#innercontent {font-size: small;}
#innercontent td {vertical-align: top; }
#innercontent p {padding-top: .4em; padding-bottom: .4em}


#innercontent form td.group  {padding-left: .2em; padding-right: .2em;}
#innercontent form p {padding: .7em; }
#innercontent form .innergroup {padding: .3em; } 
#innercontent form .innergroup .choice {padding: 0 0 0 .3em; margin: 0;}
#innercontent form .innergroup .description {padding: 0 0 0 .1em; margin: 0;}
#innercontent form h4 {margin-top: .5em; padding-left: .2em; font-size: .8em;}
#innercontent form fieldset
{
	border: 1px solid #781351;
}
#innercontent form legend
{
	font-size: 1em;
	font-weight: bold;
	padding: .1em .1em;
	margin-left: .5em;
	margin-top: .5em;
}

#innercontent .counter
{	
	font-size: xx-small;
	color: teal;
}

#innercontent .button
{	
	margin-top: .5em;
	width: 13.8em;
}

#innercontent .button-wide
{	
	margin-top: .5em;
	width: 28.3em;

}

#innercontent .card img
{	
 	padding-top: .7em;
	padding-bottom: .7em;
}

#innercontent .card
{	
 	visibility: visible;
	text-align: left;
	width: 30em;
	background-color: #fafad2;
	border: 1px solid black;
	margin-top: .2em;
}
#innercontent .card h3
{	
 	visibility: visible;
 	font-size: 1.3em;
	margin: .2em 0 .2em 0;
	padding-top: .6em;
	padding: .4em;
}

#innercontent .card ul
{	
 	visibility: visible;
 	list-style-type: disc;
	text-align: left;
	margin-top: .5em;
	margin-left: 2em;;
}

#innercontent .card table
{	
 	visibility: visible;
	margin-left: auto; margin-right: auto;
	text-align: center;
	margin-top: .5em;
}

#innercontent .card td
{	
 	visibility: visible;
	text-align: left;
	font-size: 1.2em;
}

#innercontent .card tt
{	
	font-size: .9em;
}

#innercontent .card td.conjug
{	
 	visibility: visible;
	text-align: right;
	font-size: 1.2em;
	padding-right: .2em;
}

#innercontent .card ul li
{	
 	visibility: visible;
	font-size: .8em;
}

#innercontent .card p
{	
 	visibility: visible;
	margin-top: 1em;
	font-size: .8em;
	margin-bottom: 1em;
	text-align: center;
}

#innercontent .card p.verb-prompt
{	
	margin-top: .1em;
	font-size: 1em;
}

#innercontent .card-noshow
{	
 	visibility: hidden;
	text-align: center;
	width: 30em;
	background-color: #fafad2;
	border: 1px solid black;
	margin-top: .2em;
}

#innercontent .card-noshow tt
{	
	font-size: .9em;
}

#innercontent .card-noshow h3
{	
 	visibility: hidden;
	font-size: 1.3em;
	margin: .2em 0 .2em 0;
	padding-top: .6em;
	padding: .4em;
}

#innercontent .card-noshow ul
{	
 	visibility: hidden;
	list-style-type: none;
	text-align: center;
	margin-top: .5em;
	margin-left: 0;
}

#innercontent .card-noshow table
{	
 	visibility: hidden;
	margin-left: auto; margin-right: auto;
	text-align: center;
	margin-top: .5em;
}

#innercontent .card-noshow td
{	
 	visibility: hidden;
	text-align: left;
	font-size: 1.2em;
}

#innercontent .card-noshow td.conjug
{	
 	visibility: hidden;
	text-align: right;
	font-size: 1.2em;
	padding-right: .2em;
}

#innercontent .card-noshow ul li
{	
	visibility: hidden;
	font-size: 1.2em;
}

#innercontent .card-noshow p
{	
	visibility: hidden;
	margin-top: 1em;
	font-size: .8em;
	margin-bottom: 1em;
}

#innercontent .card-no-show p.verb-prompt
{	
	margin-top: .1em;
	font-size: 1em;
}

table.rlinks
{

	border: 2px solid #8b6914;
	font-size: small;

}

.rlinks th
{
	border: 1px solid #8b6914;
	padding: .1em 1em .1em 1em;
}	

.rlinks td
{
	border: 1px solid #8b6914;
	padding: .1em 1em .5em 1em;
}	

.rlinks h4
{
	padding-top: .5em;
}	


#innercontent table.grid
{
	border: 2px solid #8b6914;
	border-collapse: collapse;
}

#innercontent .grid th
{
	border: 1px solid #8b6914;
	padding: .1em 1em .1em 1em;
}	

#innercontent .grid td
{
	border: 1px inset #8b6914;
	padding: .1em .3em .1em .3em;
	text-align: center; 
	vertical-align: middle;
}	

#innercontent .grid td ul, .grid td h4
{
	text-align: left; 
}	


#grades p {
	width: 80%;
}

#grades h3
{
	padding-top: .8em;
	padding-bottom: .5em
}		

#grades h4 {
	padding-top: .7em;
}	

#grades ul {
	margin-top: .7em;
	margin-bottom: 1em;
}

table.grades
{
	border: 2px solid #8b6914; 
	background-color: #f5fffa;
	border-collapse: collapse;
	margin-bottom: .5em; margin-top: .5em;
}

.grades th
{
	text-align: center;
	border: 1px solid;
	padding: .1em .2em .1em .2em;
}	

.grades td
{
	text-align: center; 
	border: 1px inset #8b6914;; 
	padding: .1em .2em .1em .2em;
}

.grades .oddrow {background-color: #c1ffc1;}
.grades  .evenrow {background-color: #f5fffa;}


#deckdump td
{	
	text-align: left;
	background-color: #eee9bf;
}

#deckdump table
{	
	margin-top: 1.5em;
}

#decks p
{
	width: 35em;
}

#decks table
{
	border: 1px;
}
#decks td
{
	background-color: white;
	padding-left: 1.6em; 	padding-right: 1.6em;
	border: 1px solid gray;	
}

#decks a
{
	font-size: x-small;
}

#decks h3
{
	 margin-top: .4em;
}


#decks ul
{
	margin-top: .2em;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

#quiztable h3 {margin-bottom: 2em; }
#quiztable form {margin-top: 1em; }
#quiztable span.wrong {color: red; }
#quiztable span.right {color: green; }
#quiztable td.subject {text-align: right; }
#quiztable td.tense {font-weight: bold; }
#quiztable form input {font-family: monospace;}
#quiztable p#score {font-size: 1.2em; font-weight: bold; }

/* Footer */
#footer
{
	background-color: #eee8aa;
	clear: both;
	color: inherit;	
	text-align: center;
	clear: left;
	margin-left: auto; margin-right: auto;
	border-top: 2px solid #8b6914;
}

#footer a:link    {color: #8b6914; }
#footer a:visited {color: #8b6914; }
#footer a:hover   {color: #8b6914; }
#footer a:active  {color: #8b6914; }

#footer p
{
	margin-top: .3em;
	padding: .3em;
}

#footer a.flinks
{
       vertical-align: 50%;
       font-size: small;
       padding: 1em;
}