/* General settings */
body {
  color: black;
  background: white;       
}

h1, h2, h3 { color: #005A9C; background: transparent }

:link { color: #00C; background: transparent }
:visited { color: #609; background: transparent }
a:active { color: #C00; background: transparent }


/* result buttons */
#result { margin-top: 1em; }

.pass { background-color: green; color: white; font-weight: bold; }
.fail { background-color: red; color: white; font-weight: bold; }

/* test */

#description { 
               padding-bottom:0.5ex;
               padding-left: 1ex;
               padding-right: 4ex;
               margin-bottom:1ex;
               }
#testobject { 
              padding-top: 2px;
              }
#testobject pre { 
                  margin-top: -1em;
                  font-size: small;
                  width: auto;
                  height: 33em;
                  overflow: auto;
                  border: 1px solid black;
              }

/* The set of options in the top area */
.options1 { 
           float: left;
           margin-left: 4ex;
            }
.options1 th {
               text-align: right;
 }
.options2 { 
           float: right;           
           margin-right: 4ex;
 }
.options2 th {
               text-align: left;
 }

/* For the HTML5 player */
div.dfxp { 
   background-color: black;
   color: white;
   padding: 0;
   margin: 0;
   min-height: 6ex;
   font-size: 90%;
   text-align: center;
   line-height: 100%; /* default value for DFXP is normal, which means 100% */
}
div.dfxp div, div.dfxp p, div.dfxp span {
   margin: 0;
   padding: 0;
}

/* table for tests in the left area */
div#tables th { border: none;}
div#tables th input {  width: 100%; margin: 0; text-align: left; }
div #tables div.table { 
  width: 40ex;
}
div#tables h3 {  margin-top: 1ex; padding-top: 0 }
div#tables table a,
div#tables table span { font-size: x-small; cursor: pointer }

/* The three areas on screen */

div#content
  {
  margin: 0;
  padding: 8.5em 1ex 1ex 1ex;
}

div#testarea {
  position: absolute;
  top: 8.5em;
  left: 50ex;
  right: 1ex;
  bottom: 1ex;
  border-left: 2px solid #ccc;
  padding-left: 1ex;
}

div#header {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 1ex;
  width: 100%;
  background: white;
  border-bottom: 2px solid #ccc;
}

@media screen
  {
  div#testarea, div#header
    {
    position: fixed;
    }
  /* Don't do this at home */
  * html
    {
    overflow-y: hidden;
    }
  * html div#content
    {
    overflow-y: auto;
    height: 100%;
    padding: 8.5em 1ex 1ex 1ex;
    font-size: 100%;
    }
  * html div#testarea, * html div#header
    {
    position: absolute;  
    }
  /* All done. */
  }