* { box-sizing: border-box; } html, body { position: relative; font-family: sans-serif; font-size: 20px; width: 100%; min-height: 100vh; margin: 0; padding: 0; } header, footer { padding-top: 30px; text-align: center; display: block; } footer { position: absolute; bottom: 0; width: 100%; height: 64px; padding: 16px 0; color: #999; } main { display: block; overflow: auto; width: 100%; max-width: 700px; margin: 42px auto 0; padding-bottom: 128px; /* Footer height */ text-align: center; } .warning { padding: 8px; background: #FF6800; font-weight: bold; border-radius: 4px; } a { color: inherit; } img { display: block; margin: 16px auto; max-width: 90%; } .view { display: none; text-align: center; } form { text-align: left !important; } textarea, input, select { margin-top: 8px; border-radius: 3px; } input[type="button"], input[type="submit"] { float: right; cursor: pointer; margin: 16px 0 16px 16px; padding: 12px 16px; border: none; background: #C50E1F; color: #fff; font-size: 1em; font-weight: bold; } input[type="button"].center, input[type="submit"].center { float: none; } input[type="button"][readonly], input[type="submit"][readonly] { cursor: auto; background: #888 !important; } input[type="text"], input[type="number"], textarea, select { background: #ddd; margin-bottom: 16px; padding: .5em; border: 1px solid #888; width: 100%; font-size: 20px; } label { cursor: pointer; } input[type="radio"], input[type="checkbox"] { cursor: pointer; margin-top: 10px; float: left; transform: scale(1.6); } input[type="radio"] + p, input[type="checkbox"] + p { margin: 0 0 0 30px; padding: 5px; border-radius: 3px; } input[type="radio"]:checked + p, input[type="checkbox"]:checked + p { background: #ddf; } input[type="radio"]:hover + p, input[type="checkbox"]:hover + p { background: #ddd; } #sharing a { font-size: 16px; } #quiz form.sequential .question { display: none; } .question.correct label, .question.incorrect label, .question.correct input, .question.incorrect input { pointer-events: none !important; } .question.correct h3, .question.correct h4 { color: #008800; } .question.incorrect h3, .question.incorrect h4 { color: #BB0000; } .question input.trueans + p { color: #008800; } .question.incorrect input:checked:not(.trueans) + p { color: #BB0000; } .question input.right { color: #008800; border-color: #008800; } .question.incorrect input:not(.right) { color: #BB0000; border-color: #BB0000; } .question.incorrect input[type="text"]:not(.right) + p { margin-top: 0; color: #008800; } .question .meta { background: #ddd; padding: 12px; border-radius: 4px; font-size: 16px; } .question .meta p { margin: 0 } .question .meta h5 { font-size: 16px; margin: 16px 0; } #submitinfo { float: right; margin: 16px 0; padding: 12px 0; } #fsastuff { display: none; } #fsabonuspointsinfo { float: left; font-size: 15px; font-style: italic; } #fsateamcounttroll { text-align: right; font-size: 15px; font-style: italic; } #fsapointbar { width: 100%; height: 42px; border: 1px solid black } #fsapointbar > div { height: 100%; background: darkred; width: 100%; transition: 1s linear width; }