/* a simple style sheet for presenting the accessible quiz: http://www.websemantics.co.uk/tutorials/accessible_quiz_01/ */

html * {vertical-align:center}
body {font-family: sans-serif}

h1 {font-size:2rem; line-height:1.2}

ol {vertical-align:top}
li {margin:2rem 0; padding:0}
fieldset {border:0 solid; padding:0; margin:0}

input, select {font-size:1rem}
.text input {width:6rem; padding-left:0.25rem}
.radio label {margin:0 2rem 0 0.5rem}
.hide {display:none; margin:0}
.text label {margin-right:1rem}
select {margin:0 1rem; width:6rem; padding-left:0.25rem}
select.left {margin-left:0}

/* the menu at the bottom of the quiz */
#quizmenu     {margin:2rem 0 1rem; padding:0}
#quizmenu li  {display:inline; list-style-type:none; margin:0 1rem 0 0}

/* This style replaces the text "Correct" and "Sorry wrong answer" with a tick or cross graphic */
span.correct  {background:url(tick.gif); margin-left:0.5rem; text-indent:21px; position:absolute; overflow:hidden; width:20px; height:19px}
span.wrong    {background:url(cross.gif); margin-left:1rem; text-indent:15px; position:absolute; overflow:hidden; width:14px; height:14px}