body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  background-color: #333;	
  color: #ccc;
}

h1, h2, h3 {
  font-family: 'Goudy Bookletter 1911', serif;
  color: #eee;
}
h3 {
  color: #ddd;
}

h1 {
  margin-top: 40px;
}

a, a:visited {
  text-decoration: none;
  color: #0cf;
}

#body {
  padding: 0px 20px;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 50px;
}

#webgl-error-strip {
  position: fixed;
  top: calc(50% - 100px);
  width: 100%;

  text-align: center;
  background-color: #b6f;
  color: black;
  /*
  margin-bottom: 10px;
  */
  padding: 50px;
  border-top: 1px solid yellow;
  border-bottom: 1px solid yellow;
  display: none;
  z-index: 100;
}
#webgl-error-strip a {
  color: #036;
}

.spoiler {
  background-color: #222;
  cursor: pointer;
  color: #aa0;
  font-family: monospace;
}
.spoiler div {
  display: none;
}
.spoiler-revealed {
}

/* 
 * Header 
 */
#header {
  text-align: center;
  padding: 5px 5px 5px 5px;
  /*border-bottom: 1px solid #aaa;*/
  margin-bottom: 10px;
  font-size: 0;
  font-family: 'Goudy Bookletter 1911', serif;
}
#header .left,
#header .right,
#header .dynamic {
  display: inline-block;
  vertical-align: middle;
}
#header .button {
  font-size: 20px;
  padding: 5px 20px;
  display: inline-block;
  vertical-align: middle;
  color: #888;
}
#header .button:hover {
  /*background-color: #ccc;*/
  color: #eee;
}
#header .button i {
  display: inline-block;
  vertical-align: middle;
  margin-top: -4px;
  margin-left: -4px;
}
#header .right {
  border-left: 1px solid #aaa;
}
#header .dynamic .button {
  border-left: 1px solid #aaa;
  position: relative;
}
#header .dynamic .button .overlay-dot {
  position: absolute;
  left: 16px;
  bottom: 7px;
  background-color: #f33;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: small;
  font-weight: bold;
  border-radius: 50%;
  width: 23px;
  height: 21px;
  text-align: center;
  padding-top: 2px;
  display: none;
}

#subheader {
  position: relative;
  width: 100%;
}
#subheader .wallet {
  position: absolute;
  right: 0px;
  top: 0px;
  display: inline-block;
  border: 1px solid black;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 5px 20px;
}
#subheader .wallet .orbs {
}
#subheader .wallet .orbs .icon {
  display: inline-block;
  vertical-align: middle;
  background-image: url("/static/media/orb-icon.png");
  background-size: contain;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
#subheader .wallet .orbs .num {
  display: inline-block;
  vertical-align: middle;
  font-family: 'Goudy Bookletter 1911', serif;
  font-size: 22px;
  color: gold;
}

/* 
 * Footer 
 */
#footer {
  margin-top: 20px;
  padding: 20px 50px;
  text-align: center;
  color: #666;
  font-size: 16px;
}
#footer a {
  color: #08b;
}
#footer a:hover {
  color: #0cf;
}
#footer .col {
  text-align: left;
  display: inline-block;
  vertical-align: top;
  padding: 0px 25px;
}
#footer .note {
  margin-top: 20px;
  font-size: 12px;
}

/* 
 * Material icons
 * http://google.github.io/material-design-icons/
 */
/* Rules for sizing the icon. */
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-16 { font-size: 16px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-20 { font-size: 20px; }
.material-icons.md-22 { font-size: 22px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }