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

html * {font-size:100%; vertical-align:center}
body {font:76.1%/130% verdana,helvetica,sans-serif}

h1 {font-size:200%; line-height:120%}

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

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

/* the menu at the bottom of the quiz */
#quizmenu     {margin:0; padding:0}
#quizmenu li  {display:inline; list-style-type:none; margin:0 1em 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.5em; text-indent:21px; position:absolute; overflow:hidden; width:20px; height:19px}
span.wrong    {background:url(cross.gif); margin-left:1em; text-indent:15px; position:absolute; overflow:hidden; width:14px; height:14px}