body {
   font-family: sans-serif;
}

table {
    float:left;
}

h1 {
    width:auto;
    float:left;
}

h3 {
    float:left;
    width:100%;
    background:#d4d6fa;
    padding-top:0.25em;
    padding-bottom:0.25em;
}

h4 {
    white-space:nowrap;
    float:left;
    text-align:left;
    padding:0em;
    margin:0.25em;
}

form {
    float:left;
}

div.selected {
    background: #caecae;
}

div.major {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:4px solid #caecae;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding-bottom:2px;
}

.rounded {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border:4px solid #aeecb4;
    border-radius: 5px;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding-bottom:2px;
}

div.quiz-elem {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding:0;
    margin:0;
}

div#workbooka {
    width:99%;
    float:left;
    padding-left:3px;
    padding-right:3px;
}

div.quiz-elem form {
    margin:2px;
}

h1 {
    width:auto;
    padding:0;
    margin:0.5em;
}

div.http h4 {
    padding:0;
    margin:0;
}

div.http a {
    padding:0.25em;
}

div#menubar {
    margin-top:1%;
    border:1px solid #18ab29;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    background:ivory;
    float:left;
    white-space:nowrap;
    padding:0em;
    position:relative;
}

div#menubar div {
    float:left;
    padding:3px;
    margin-right:1em;
}

div.poweredbox table {
    width:100%;
    text-align:center;
}

div.poweredbox td {
    border:1px solid #878ade;
    text-align:center;
}

div.guess {
    padding-left:1em;
}

div.guess h3 {
    padding:0.5em;
    margin:0;
    text-align:left;
    width:auto;
}

div.guess i {
    float:right;
    text-align:right;
    width:auto;
}

.debug {
    display:none;
}

div.debug {
    border:0px dashed green;
    margin:1px;
    padding:1px;
}

div.history h2 {
    padding:0.25em;
    margin:0;
    background: #caecae;
}

div.history td {
    padding:1px;
}

div.quiz-elem {
    padding-top:0;
    padding-bottom:1em;
    margin-top:0;
    margin-bottom:1em;
    border: 4px solid #caecae;
}

div.quiz-elem h2 {
    padding:0.25em;
    margin:0;
    background: #caecae;
}

div.quiz form {
    margin-left:2%;
}

div.quiz input.submit {
    padding:0.5em;
    margin-left:1.5em;
}

td.correct {
    background:lightgreen !important;
}

td.incorrect {
    background:red !important;
}

div.test {
    float:left;
    padding: 0.5em;
    margin-top:1em;
    margin-left:1em;
    min-width:30%;
}

div.stats {
    display:none;
}

div.utterance {
    font-style:italic;
}

div.syntax {
    float:left;
    width:100%;
}

div.syntax table {
    float:left;
    width:100%;
}

div.syntax td {
    vertical-align:top;
}

table.fs th.fs {
    padding-right:0.5em;
    font-weight:normal;
    font-style:italic;
}

div.reqdata {
    display:none;
    height:15em;
    overflow:scroll;
    font-size:small;
    font-family:monospace;
    width:50%;
    border:2px solid blue;
    padding:3px;
    position: absolute;
    bottom:0;
    right:0;
}

div.reqdata table {
    width:95%;
}

div.reqdata th {
    text-align:right;
    border-bottom:1px dashed black;
}

div.reqdata td {
    width:10em;
    text-align:right;
    border-bottom:1px dashed black;
}

div.optiongroup {
    border:1px solid #caecae;
    padding:2px;
    margin:2px;
    float:left;
}

div.optiongroup h4 {
    margin:0;
    padding:0;
}

div.history table {
    width:95%;
    float:left;
}

table.matrix td {
    text-align:center;
}

table.matrix td.path {
    background: #008800;

}

table.matrix td.path {
    background: red;

}

table.matrix td.corrent {
    background: lightgreen;
}

span.insert {
    color: #bbb;
    visibility:none;
    text-decoration:line-through;
    border-bottom: 8px solid red;
}

span.delete {
    border-bottom: 8px solid red;
    color: transparent; /* causes the correct letter to be invisible in this context, which is
                           the user's guess: if span is class
                           delete, it's something that appears in the
                           correct answer, but which the user failed
                           to type. Since the correct answer will be
                           shown in the line above the user's input
                           string, we don't need to make the letter
                           visible; we will indicate the missing
                           correct letter by showing an empty
                           (transparent) blank space where the correct
                           letter is missing from the user's guess. */
    border-bottom: 8px solid red;
}

span.subst {
    border-bottom: 8px solid red;
    text-decoration:line-through;
    color:#bbb;
}

span.match {
    color:#111;
    border-bottom: 8px solid lightgreen;
}

td.corr span.match {
    color: black;
}

td.eval {
    white-space:normal;
}

td.eval span {
    padding:1px;
}

table.history {
    border-collapse: collapse;
    width:100%;
    border:3px solid #33ffff;
    margin:0.5em;
}

tr.odd {
    background: #33ffff;
}

tr.dist0 {
    font-size: 250%;
}

tr.dist1 {
    font-size: 250%;
}

tr.dist1 td {
    padding-bottom:1em;
}

tr.dist2 {
    font-size: 200%;
}

tr.dist2 td {
    padding-bottom:1em;
}

tr.dist3 {
    font-size: 200%;
}

tr.dist3 td {
    padding-bottom:1em;
}

tr.dist4 {
    font-size: 100%;
}

tr.dist4 td {
    padding-bottom:1em;
}

tr.distn {
    font-size: 90%;
}

tr.distn td {
    padding-bottom:0.75em;
}

td.answer {
    text-align:left;
}

tr.distn span.insert {
    border-bottom: 2px solid red;
}

tr.distn span.delete {
    border-bottom: 2px solid red;
}
tr.distn span.subst {
    border-bottom: 2px solid red;
}
tr.distn span.match {
    border-bottom: 2px solid lightgreen;
}

span.subst {
    visibility:visible;
    border-bottom: 8px solid red;
}

span.match {
    border-bottom: 8px solid lightgreen;
}

div.click {
    border: 3px solid lightgreen;
    background: green;
    color: lightgrey;
    padding: 3px;
    width:auto;
    float:left;
}

div.click:hover {
    background: white;
    color: darkgrey;
}

/* firefox says "unknown pseudo-class or pseudo-element" */
/*div.click:blur {
    background: green;
    color: lightgrey;
}*/

span.qtype {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size:small;
    border:#00cc00;
    background:lightblue;
    padding:0.25em;
    padding-top:0.125em;
    padding-bottom:0.125em;
}

span.remove {
    font-size:small;
    font-weight:lighter;
}

div.error {
    border: 2px solid lightred;
    width:90%;
}

div.code {
    text-align:left;
    background:#eee;
    font-family:monospace;
    border:1%;
    padding:1%;
    width:100%;
}

// http://stackoverflow.com/questions/2874813/why-textarea-and-textfield-not-taking-font-family-and-font-size-from-body
// TODO: be more specific: textarea.code-editor
form {
   font-family:monospace;
}

textarea {
   font-family: inherit;
   font-size: inherit;
   font-family:monospace;
}

table.studenttest td {
    padding-left:0.25em;
    padding-right:0.25em;
}

th.delete {
    text-align:center;
}

th.num {
    text-align:right;
}
td.num {
    text-align:right;
}

/* Create/Read/Update/Delete standard elements (TODO: move to crud.css) */
.links {
    white-space:nowrap;
    border:1px solid lightgreen;
    margin:0.25em;
    width:auto;
    margin-top:1.5em;
    float:left;
    border-top:
}

.links span {
    padding-right:1em;
}

.delete {
    float:right;
}

.user-alert {
    float:right;
    text-align:right;
    color:#aaa;
    font-style:italic;
}

table.striped th.rn {
    text-align:right;
    width:2em;
}

table.striped th,td {
    padding:0.25em;
}

table.striped tr:nth-of-type(odd) {
  background-color:ghostwhite;
}

.manage {
    border:4px solid #e9ecae;
    background: #e9ecae;
}

.manage h3 {
    background: #aeecb4;
}

.language {
    text-align:center;
    font-size:larger;
    width:100%;
}

.intro {
    float:left;
    text-align:center;
    margin-top:0.5em;
    margin-bottom:0.75em;
    padding:0.25em;
    background:#caecae;
    margin-left:10%;
    width:80%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:4px solid #caecae;
}

.summary {
    float:left;
    background: cyan;
    margin-top:0.5em;
    margin-bottom:0.75em;
    padding:0.25em;
    margin-left:10%;
    width:80%;
}

.summary p {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: 3px solid lightblue;
    float:left;
    background: #e9ecae;
    padding:0.75em;
    width:80%;
    margin:1em;
    font-size: large;
}

.summary p .left {
    text-align:left;
    float:left;
}

.summary p.right {
    text-align:right;
    float:right;
}

div.rows2table {
}

div.new {
    float:left;
    width:95%;
}

div#top {
    padding:0;
    margin:0;
    float:left;
    width:auto;
}

div.major {
    margin-right:0.5em;
    width:99%;
    float:left;
}

div.major h2 {
    padding:0.25em;
    margin:0;
    margin-bottom:0.25em;
    background: #caecae;
}

div.content {
    margin-right:1%;
}

div.poweredbox {
    float:left;
    white-space:nowrap;
    text-align:center;
    display:block;
}

div.poweredbox table {
    margin:1%;
    width:98%;
}

div.poweredbox td {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    border:4px solid #71fbfb;
    background:#71fbfb;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding-bottom:2px;
}

table.italianquiz td {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius:7px;
    border:4px solid #11ceff;
    background:#11ceff;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding-bottom:2px;
}

div.groupinglabel {
    float:left;
    font-size:smaller;
}

div.groupinglabel2 {
    width:100%;
    float:left;
}

div.groupinglabel2 span.label {
    padding-left:2%;
    font-size:100%;
    float:left;
    text-align:left;
}

table.groupinglabel2 td {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border:4px solid #11ceff;
    background:#71fbfb;
    padding:2%;
    margin:0%;
    margin-top:2%;
    margin-bottom:2%;
}

div.guess {
    width:70%;
}

div.question {
    display:block;
    width:55%;
    float:left;
}

div.history {
    float:right;
}

table.question {
    width:100%;
}

table.quiz {
    width:100%;
}

div.quiz {
    width:100%;
    float:left;
}

div.quiz-elem {
    width:99%;
    float:left;
}

div.stats {
    left:0;
    top:70%;
}

div.stats table {
    float:left;width:80%;
}

div#controls {
    width:auto;
}

div#controls input.submit {
    float:right;
    width:50%;
}

div.welcome {
    float:right;
}

div.history {
    width:45%;
    right:0;
}

#ajax_quiz {
    float:left;
    width:90%;
}

#ajax_quiz input {
    margin:0.5em;
}

table.quiz {
    margin-left:0.25em;
    width:100%;
}

table.quiz td.en {
    width: 40%;
}


#quiz_table {
}

#quiz_table td.corr {
    padding-bottom:0.5em;
}

/* 'incorrect' being used somewhere else (TODO fix name collision). */
#quiz_table td.incorr {
    padding-bottom:1em;
}

#quiz_table {
    border-collapse:collapse;
    width:100%;
    margin-top:0.5em;
}

#quiz_table tbody {
    width:100%;
}

#quiz_table tr {
    width:100%;
}

#quiz_container {
    width:98%;
    float:left;
    margin-bottom:1em;
}

#controls_container {
    float:left;
}

/* search */

div#search-ui {
    float:left;
}

div#searchbar {
    width:100%;
    margin:0.5em;
    float:left;
}

div#searchbar button {
    margin-left:1em;
}

div#searchresults {
    width:100%;
    padding:0.5em;
    float:left;
}

div.respond {
    margin:0.3em;
}

div.login {
    text-align:right;
    padding:3px;
    margin-top:1%;
    margin-right:1%;
    float:right;
    width:auto;
}

div.login p {
    padding:0;
    margin:0;
}

div.login form {
    padding:0;
    margin:0;
    width:auto;
}


div.login form div {
    width:auto;
    padding:0;
    margin:0;
}

div.login input {
    padding:0;
    margin:0;
}


div.login input.button {
    padding:5px;
    margin:3px;
}

body > div {
    margin-left:1%;
}

div.newlink {
    float:left;
    width:100%;
    padding:0.25em;
}

div.login img {
    width:30px;
}

div.login div {
    text-align:left;
    float:left;
    width:100%;
}

div.login form {
    float:left;
}

div.major > div {
    float:left;
    width:100%;
}

div.major > div.conjugate {
    width:50%;
    float:left;
}

div.major > div.conjugate > table > tbody > tr > th {
    text-align:left;
}

div.major div.onlysubmit {
    border:0px dashed green;
    float:right;
    width:auto;
    margin:0.25em
}

div.pager table {
    width:100%;
}

div.pager th.lt {
    text-align:left;
}

div.pager th.gt {
    text-align:right;
}

div.pager th.range {
    text-align:center;
}

div.privacy {
    float:right;
    margin-right:1em;
}

div.print_as {
    margin:0.25em;
    padding:0.125em;
    border:2px solid lightgreen;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}

#session-current {
    overflow:scroll;
    margin-left:1em;
    width:95%;
}