body {
    background-color: #ffff99;
/*    margin: 0px; */
    padding: 0px;
}
body#login-screen {
    background-color: #ffffff;
    color: #330000;
}
#contents {
    position: relative;
    width: 1140px;
    margin: 0 auto;
}
#header {
}
#main {
    margin-left: 260px;
/*    margin-right: 20px;
    margin-top: 0px;
    margin-bottom: 0px; */
    background-color: #ffffff;
    padding-left: 5px;
    color: #000000;
    width: 850px;
}
#side {
    width:255px;
    position: absolute;
    left:0px;
    top:0px;
    color: #ffffff;
    background-color: #000000;
    padding-left: 5px;
}
#commandlist a {
    text-decoration: none;
    color: #ffffff;
}
span.error {
    background-color : #ffcccc;
}
/* Book bibliographic information */
#bookinfo {
    float: left;
    margin-right: -310px;
    width: 100%;
}
#footer {
    clear:both;
    text-align: center;
}
#footer hr {
    width: 70%;
}
/* login box */
#login {
    position: absolute;
    top: 70px;
    right: 10px;
    width: 200px;
/*    height: 250px; */
    background-color: #ffffcc;
    color: #000000;
    border: 6px double #ffff00;
}
#login h2 {
    font-size: medium;
    text-align: center;
    color: #663300;
}
#login-screen .newsbox {
    font-size: small;
    border: solid 2px #0000ff;
    margin-left: 40px;
    margin-right: 260px;
    background-color: #dddddd;
    color: #0000cc;
}
#login-screen .newsbox h1 {
    font-size: large;
    color: #cc0000;
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
}
.nofloat {
    clear: left;
}
#login form {
    width: 180px;
    font-size: small;
    margin-left: 10px;
    margin-right:10px;
    margin-bottom:10px;
}
#login .input {
    width: 150px;
}

#login .label {
    display:block;
    width:5em;
    float:left;
    clear:left;
}
#login .button {
    font-size: small;
}
#login p {
    font-size: small;
    text-align: center;
}
.warn {
    color: #ff0000;
    font-size: 80%;
    text-align: center;
}

/* registration form */
#registration {
    width: 800px;
/*    height: 350px; */
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -400px;
    margin-top: -200px;
    background-color: #ffffcc;
    border: 6px double #ffff00;
}
#registration h1 {
    text-align: center;
    color: #663300;
}
#registration form {
    width: 600px;
    margin-left: 100px;
    margin-bottom: 10px;
}
#registration .label {
    display:block;
    width:12em;
    float:left;
    clear:left;
}
#registration ol {
    list-style:none;
    margin:0;
    padding:0;
}
#registration li {
    padding:6px;
    background:#e1e1e1;
    margin-bottom:1px;
}

/* question list */
.qlist {
}
ul.qlist {
    font-size: 90%;
    position: relative;
    list-style: none;
    padding-left: 5px;
    color: #ffffff;
}
.qlist li.off {
    position: relative;
    width:200px;
    height:18px;
    overflow:hidden;
    border:1px solid #ffffff;
    /***/
    padding: 2px;
    color: #ffff00;
}
.qlist li.finished {
    position: relative;
    width:200px;
    height:18px;
    overflow:hidden;
    border:1px solid #ffffff;
    padding: 2px;
    /***/
    color: #999999;
    background-color: #333333;
}
.qlist li.on {
    position: relative;
    width:200px;
    height:18px;
    overflow:hidden;
    border:1px solid #ffffff;
    padding: 2px;
    /***/
    background-color:#0000cc !important;
    color: #ffff00 !important;
}
ul.qlist > li.on {
    overflow:visible;
}
ul.questions{
    margin: 0px;
    padding: 0px;
    position: relative;
    left: 202px;
    top: -25px;
    width: 42px;
    border:1px solid #ffffff;
    border-bottom:0px solid #ffffff;
    background-color:#000000;
    list-style:none;
}
.solved {
    background-color: #333333;
}
.solved a {
    color: #999999;
}
.unsolved {
    background-color:#000000;
}
.unsolved a {
    color: #ffff00;
}
.questions li {
}
.questions a {
    padding:2px;
    display:block;
    width:38px;
    border-bottom:1px solid #ffffff;
    text-decoration:none;
}
.questions a:hover{
    background-color:#0000cc;
    color: #ffff00;
}

#question {
    margin: 20px;
    padding: 5px;
    border: 1px solid #6699ff;
}

#userinput {
    margin: 5px;
    border: 1px solid #6699ff;
    border-spacing: 0em;
}

.lineno {
    text-align: right;
    background-color:#dddddd;
    padding-left: 1ex;
    padding-right: 1ex;
}
.code {
    padding-left: 1em;
    padding-right: 1em;
}
#userinput td {
    vertical-align: top;
}
#userinput pre {
    margin: 0pt;
}
/* statistics */
#ranking {
   color: #000000;
   margin-left: 20px;
}
#ranking .you {
    background-color: #ff0000;
    color: #ffffff;
}
#ranking .even {
    background-color: #c9efff;
    color: #000000;
}
#ranking .odd {
    background-color: #edf9ff;
    color: #000000;
}
#ranking .num {
    text-align: right;
    padding-left: 3px;
    padding-right: 3px;
}
#ranking .name {
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}
#ranking .rank {
    text-align: right;
    background-color: #ffffff;
    color: #000000;
}
#ranking .score {
    text-align: right;
    padding-left: 3px;
    padding-right: 3px;
}

#graph {
    border: 3px solid #000000;
    margin-left: 20px;
    border-collapse: collapse;
    border-spacing: 0;
}
#graph td {
    padding: 5px;
    border: 1px solid #000000;
}
#graph .section {
    background-color: #008800;
    color: #ffffff;
}