body {
  color: #000;
  background-color: #fff;
  font-family: helvetica, arial;
  font-size: 16px;
  margin: 0px;
  padding: 0px;
}

div.logo {
  z-index: 10;
  float: right;
}

div.header {
  height: 125px;
  color: #000;
  background-color: #858585;
}

div.timer {
  float: left;
  margin-left: 238px;
  margin-top: 92px;
  font-size: 24px;
  color: #000;
}

div.hbar {
  height: 5px;
  background-color: #000;
}

div.vbar {
  width: 2px;
  height: 150%;
  background-color: #000;
  float: left;
}

div.body {

}

div.menu {
  width: 225px;
  height: 150%;
  font-size: 24px;
  color: #fff;
  background-color: #474747;
  float: left;  
  display: block;
}

div.problem {
  margin-left: 227px;
  padding: 27px;
}

div.problem-bigscreen {
  padding: 27px;
}

/* Form tables are input fields, but present readonly as non-interactive. */
form input:read-only:not([type=submit]) {
  border: none;
  outline: none;
  font-size: 16px;
  background-color: transparent;
}


div.menuhbar {
  height: 2px;
  width: 225px;
  background-color: #000;
}

div.menuitem {
  height: 34px;
  padding-left: 15px;
  padding-top: 7px;
  background-color: #666666;
}

div.submenuitem {
  height: 31px;
  padding-left: 30px;
  padding-top: 5px;
  background-color: #555;
}

div.menuitem.selected {
  height: 34px;
  padding-left: 15px;
  padding-top: 7px;
  background-color: #AAA;
}

div.submenuitem.selected {
  height: 34px;
  padding-left: 30px;
  padding-top: 7px;
  background-color: #AAA;
}


.menu { font-size: 24px; }
.submenuitem { font-size: 18px; }
.menu a:link    { color: #fff; text-decoration: none; }
.menu a:visited { color: #fff; text-decoration: none; }
.menu a:active  { color: #e2e33b; text-decoration: none; }
.menu a:hover   { color: #e2e33b; text-decoration: none; }

div.line {
  display: inline-block;
  margin-top: 2px;
  margin-bottom: 6px;
}
div.label {
  float: left;
  width: 140px;
}
div.problem_label {
  float: left;
  width: 140px;
}
div.input {
  float: left;
}
div.info {
  float: left;
}
div.error {
  color: #f00;
  margin-left: 1em;
  margin-top: 1em;
  display: block;
}
div.status {
  color: #00F;
}

.result_row:nth-of-type(odd) {
  background-color: #eef;
  z-index: -1;
}
.result_row:nth-of-type(even) {
  background-color: #ccc;
  z-index: -1;
}

div.result {
  display: inline-block;
  margin-top: 1px;
  margin-bottom: 1px;
}

div.result_userid {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 2em;
}
div.result_name {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 16em;
}
div.result_time {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 8.5em;
}
div.result_seconds {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 5em;
}
div.result_problem {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 13em;
}
div.result_problem_id {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 2em;
}
div.result_file {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 10em;
}
div.result_status {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 6.5em;
}
div.result_edit {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 3em;
}
div.result_note {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 10.5em;
}


div.problem_list:nth-of-type(odd) {
  background-color: #eef;
  z-index: -1;
}
div.problem_list:nth-of-type(even) {
  background-color: #ccc;
  z-index: -1;
}

.problem_list input[type='number'] {
  /* "size=" doesn't work for numbers. */
  width: 50px;
}
div.problem_list {
  display: inline-block;
  margin-top: 1px;
  margin-bottom: 1px;
}
.problem_list  .id {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 40px;
}
.problem_list .dir {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 240px;
}
.problem_list .name {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 100px;
}
.problem_list .generator {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 140px;
}
.problem_list .validator {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 140px;
}
.problem_list .rating {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 110px;
}
.problem_list .mode {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 60px;
}
.problem_list .set {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 60px;
}
.problem_list .enabled {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 70px;
}
.problem_list .delete {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 70px;
}
.problem_list .view {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 70px;
}



div.standing {
  display: inline-block;
  margin-top: 1px;
  margin-bottom: 1px;
}
.standing_results:nth-child(odd) {
  background-color: #eef;
  z-index: -1;
}
.standin_results:nth-child(even) {
  background-color: #ccc;
  z-index: -1;
}

div.standing_place {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 4em;
}
div.standing_score {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 4em;
}
div.standing_name {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 14em;
}
.standing_easy, .standing_medium, .standing_hard {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 5em;
  /* Required to allow the progress bar to be 100% height. */
  overflow: hidden;
  position: relative;
}
div.standing_problem_name {
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 15em;
}
div.standing_beers, div.standing_bonus {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 5em;
}
div.standing_last_time {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 12em;
}
div.standing_last_result {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 12em;
}
.progress_bar {
  position: absolute;
  height: 100%;
  /* width set in HTML */
}
.standing_percent {
  position: relative;
  z-index: 2;
  margin-top: 2px;
  margin-left: 2px;
}
.standing_complete > .progress_bar {
  background-color: #8f8;
}
.standing_partial > .progress_bar {
  background-color: #f88;
}
div.standing_complete {
  padding-top: 2px;
  padding-bottom: 2px;
  width:100%; 
}
div.standing_partial {
  padding-top: 2px;
  padding-bottom: 2px;
  position: relative;
  margin: -1px;
  width:100%;
}

div.standing_partial_bar {
  background-color: #f88;
  float: left;
  position: absolute;
}

div.standing_partial_score {
  float: left;
  position: absolute;
  width: 100%;
}  


pre {
  background-color: #F5F5F5;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px 4px 4px 4px;
  display: block;
  font-size: 13px;
  line-height: 20px;
  margin: 0 0 10px;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  color: #000;
  font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
  padding: 0 3px 2px;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 18px;
}


div.team, div.team_header {
  display: inline-block;
  margin-top: 1px;
  margin-bottom: 1px;
}
div.team:nth-child(odd) {
  background-color: #eef;
}
div.team:nth-child(even) {
  background-color: #ccc;
}
div.team_name {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 14em;
}
div.team_username {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 11em;
}
div.team_access {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 4.5em;
}
div.team_active {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 7em;
}
div.team_playing {
    padding-top: 2px;
    padding-bottom: 2px;
    float: left;
    width: 4em;
}
div.team_beers {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 4em;
}
div.team_bonus {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 4em;
}
div.team_edit {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 3em;
}
div.team_beerme {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 4em;
}
div.team_diff {
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
  width: 4em;
}



table{
  /* margin          : 0 auto 1.5em; */
  border-collapse : collapse;
  border-spacing  : 0;
  margin-top: 8px;
  margin-bottom: 4px;
}

td,
th{
  font-weight    : normal;
  vertical-align : top;
  margin: 0;
  padding-left   : 0.375em;
  padding-right  : 0.375em;
}

.diff td{
  padding:0 0.667em;
  vertical-align:top;
  white-space:pre;
  white-space:pre-wrap;
}

.diff span{
  display:block;
  margin-top:-20px;
  padding:0px;
  padding-left:4px;
  padding-right:4px;
}

* html .diff span{
  height:1.333em;
}

.diff span:first-child{
  margin-top:0;
}

.diffDeleted span{
  border:1px solid rgb(255,192,192);
  background:rgb(255,224,224);
}

.diffInserted span{
  border:1px solid rgb(192,255,192);
  background:rgb(224,255,224);
}

#toStringOutput{
  margin:0 2em 2em;
}

div.show {
  margin: 8px;
}