html {
    overflow-y: scroll;
}

body {
    font-family: sans-serif;
    color: #3a3a3a; /* slightly less harsh than pure black */
}

/* classes for all our possible resistor colours */
.black  { background-color: #000000; }
.brown  { background-color: #C05600; }
.red    { background-color: #FF0000; }
.orange { background-color: #FF8000; }
.yellow { background-color: #FFFF00; }
.green  { background-color: #00FF00; }
.blue   { background-color: #0000FF; }
.violet { background-color: #DD00DD; }
.grey   { background-color: #808080; }
.white  { background-color: #FFFFFF; }
.gold   { background-color: #FFD700; }
.silver { background-color: #C0C0C0; }

#main {
    margin: 20px auto;
    padding: 0px;
    width: 500px;
}

.appPanel {
    background-image: url(resistorbg.png);
    background-repeat: repeat-y;
    margin: 10px 0px;
    padding: 20px;
    border: thin solid #000000;
}

#quiz { text-align: center; }

/* resistor diagram */
#resistor {
    width: 415px;
    height: 100px;
    margin: 10px auto;
    /*  background: transparent url(resistor.png) no-repeat center; */
    background-image: url(resistor.png);
}

/* has to be done explicitly for IE 7 */
#resistor td {
    background-image: none;
}

col.resistorWire { width: 70px; }
col.resistorCase { width: 35px; }
col.resistorBand { width: 25px; }

/* answer input box */
form {
    text-align: left;
    margin: 10px 0px;
}

input {
    max-width: 10em;
}

/* help box */
.helpBlock {
    padding-left: 1em;
}

div.toggle { padding: 5px 0px; }
div.toggle a:hover   { color: #808080; }

#help table {
    border-collapse: collapse;
}

#help td,th {
    border: thin solid black;
}

td.number {
    text-align: center;
}

/* footer text + W3C tick images */
#footer {
    font-size: 10pt;
    padding-left: 1em;
    color: #CCCCCC;
}

img.validated {
    border: 0;
    width: 66px;
    height: 20px;
}