@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif');

body { background-color: white; color: black; font-family: 'Noto Sans', sans-serif; }
div#title { text-align: center; }
div.countdown { text-align: center; }
.broadcastnotes { font-size: 90%; font-style: italic; 
                  margin-left: 10%; margin-right: 10%; }
p.fineprint { font-size: small; text-align: center; }
p.error { font-weight: bolder; font-style: italic; color: green; }
.error { text-align: center; }
div.error { margin-bottom: 1em; }

p.validation { text-align: right; font-size: small; font-style: italic; }

/* main page */

h1 + h2 { margin-top: -0.5em; }

.awardname { color: red; font: italic bold 110% serif; }
td.awardname { width: 275px; }
select { width: 400px; }

div.ballot { background-color: #ddddff; color: black; 
             margin: 0px auto; }
div.ballot p { text-align: center; }
/* some nice rounded corners */
div.ballot,div.header { padding-top: 5px; padding-bottom: 5px; border-radius: 20px; }

.ballot .pointvalue { font-size: 80%; font-weight: bold; text-align: right; }
.ballot table { margin: 1em auto; }
.ballot table tr { color: black; }
.ballot table tr:nth-child(even) { background-color: #d8d8ff; }
.ballot table tr:nth-child(odd) { background-color: #e2e2ff; }

hr { border: 0; width: 50%; height: 3px; 
     color: #bbd; background-color: #bbd; }

div.response { margin: 0px 10%; text-align: center;}

div.header { background-color: #a4a; color: white; margin: 0px auto; }

/* awardgraph */

body.graph table { border-collapse: collapse; }
body.graph table td, body.graph table th { padding: 0.4em 0.5em; line-height: 1; }
body.graph h1 { font-size: 150%; font-family: 'Noto Serif', serif; }
body.graph h3 { font-family: 'Noto Serif', serif; font-weight: 500; }
body.graph .countdown { font-size: 120%; }

.entrant { color: blue; }
.graph .points { color: black; font-weight: bold; }
.bar { height: .8em; }

table.graph { border: none; }
.graph tr:nth-child(even) { background-color: #e8e8ff; }
.graph td { padding: 0 8px; }

table.graph th { font-weight: normal; text-align: left; }
    
td.points { white-space: nowrap; }

body.graph .broadcastnotes { font-size: 75%; }
.update-note { text-align: center; font-size: 75%; font-family: 'Noto Serif', serif; font-weight: 400; }
/* .entrant.wk { font-style: italic; } */

/* awardlinks */

h4 { margin: 0px; }
.consensus { font-size: 90%; color: #888; }

.link { margin: 0px; }

.link h3 { margin: 0px; 
           background-color: black; color: white; 
           padding: .1em;
           font-size: 220%;
           font-weight: normal;
	   font-family: 'Noto Serif', serif;
           text-align: left;
}

.link table th { font-weight: normal; }

.link table { border-collapse: collapse; }
.link #results { margin-left: auto; margin-right: auto; }
.link td, .link th { padding: 0.4em 0.5em; line-height: 1; }
.link td.points { text-align: center; }
.link table tr:nth-child(even) { background-color: #e8e8ff; color: black; }

/* Waseem-Klaus Oscar Party special stuff */
p.results { text-align: center; margin-top: 60pt; margin-left: 20pt; }

/* Announcement */
div#overlay {
  position: fixed;
  height: 100%; width: 100%; 
  left: 0;
  top: 0;
  z-index: 1 !important;
  background-color: black;
  opacity: 0.9; 
}

div#announcement { 
  position: relative;
  z-index: 2;
  background-color: #ccf; color: black; 
  opacity: 1.0; 
  margin: 20%; 
  padding: 80px; 
  font-size: 120%;
  border: 5px solid #224; 
}
div#announcement h2 { font-size: 220%; margin-botton: 2ex; text-align: center;}

@media (max-width: 610px) {
  select { width: 100%; }
  div.ballot,div.header { margin: 0px; }
  .ballot table,.ballot tbody,
  .ballot tr,.ballot td.selection { display: block; }
  td.awardname,td.pointvalue { display: span; width: auto; }
  td.selection { width: 100%; }
}

@media (max-width: 700px) {
  .link th { display: none; }
  .link td { display: block; }
  .link td { padding: 0; line-height: normal; }
  .link td.category { padding-top: 0.5em; }
  .link td.points { padding-bottom: 0.5em; }
  .link td.winner::before { content: "(winner: "; }
  .link td.winner::after { content: ")"; }
  .link td.consensus::before { content: "(consensus: "; }
  .link td.points::after { content: "point(s)"; }
  .link td.zero { display: none; }
}

@media (min-width: 890px) {
  div.ballot,div.header { margin: 0px 10%; }
}