body {
  margin: 0;
  padding: 0; }
.container {
  position: relative;
  max-width: 960px;
  margin: 0 auto; }
.container, .column, .row {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden; }
.column, .left { float: left; }
.right { float: right; }
.row:after {
  content: "";
  display: table;
  clear: both; }
/* Phone */
.container, .row, .column, .full, .half { width: 100%; }
.third { width: 100%; }
.quarter { width: 50%; }
.mq-large { display: none; }
.mq-medium { display: none; }
/* Tablet */
@media (min-width: 400px) {
  .half { width: 100%; }
  .quarter { width: 50%; } }
/* Desktop */
@media (min-width: 550px) {
  .mq-medium { display: block; }
  .half { width: 50%; }
  .third { width: 33.33%; }
  .quarter { width: 25%; } }
@media (min-width: 900px) {
  .container { width: 95%; }
  .mq-large { display: block; }
}
.half.const { width: 50%; }
.third.const { width: 33.33%; }
.quarter.const { width: 25.33%; }
/* typography */
body, input, textarea {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-weight: 400;
  font-size: small;
  line-height: 1.45;
  color: #222; }
h1, h2, h3, h4, h5, h6 {
  margin: 0.5em 0 0.5em;
  font-weight: inherit;
  line-height: 1.2; }
h1 {
  font-size: 2.75em;
  margin-top: 0;
}
input, button, textarea {
  margin: .5em 0;
  padding: .25em;
}
ol { counter-reset: item; padding-left: 1em; }
ol li { display: block; }
ol li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}
/* colors */
img, iframe {border-style: none;}
iframe {overflow:hidden;}
a, a.visited { text-decoration: none; color: #00f; }
#menu a, #menu a.visited { color: #444; }
.black a, .black a.visited { color: #fff; }
.white a, .white a.visited { color: #444; }
pre { max-height: 24em; overflow-y: scroll; }
pre, #toc { 
  border: 1px solid #aaa;
  background-color: #ddd;
  padding: 1em;
  margin: .5em;
}
#menu {
  background-color: #ddd;
}

a:hover, #menu a:hover { color: #000; }
.black a:hover { color: #f00; }

p { margin-top: 0; }
small { font-size: 0.707em; }
.white { background: #fff; color: #222; }
.black { background: #000; color: #fff; }
.rounded {}
.centered { text-align: center; }
.padded { padding: 1em; }
.icon { height: 1.75em; vertical-align: middle; }
.large { font-size: 1.25em; }
.bold { font-weight: bold; }
.nowrap, .nowrap * { white-space: nowrap; }
canvas.game {
  padding: 0; margin: 0;
  width:800px; height:600px;
}
canvas.loader {
  position:absolute; z-index:100;
}

/* Tables */
table, blockquote {
  background-color: #fcfcfc;
  border-radius: 0.75em; padding: 0.5em;
  border: 1px solid #ccc;
}
table {width: 100%;}
td, img {border-style: none;}
td {vertical-align:top;}

.button, a.button {
  display: inline-block;
  padding: .25em 1em;
  font-size: 2em;
  text-shadow: 0 2px rgba(0,0,0,.5);
  
  background-color: #693;
  border-bottom: 2px solid #9c6;
  
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
}

.button:hover {
  background-color: #7a4;
  opacity: 1;
}

.button a:hover, a.button:hover {
  color: #fff;
}

.button img {
  height: 1.75em;
  vertical-align: middle;
  -webkit-filter: drop-shadow(0 2px 0 rgba(0,0,0,1));
  filter: drop-shadow(0 2px 0 rgba(0,0,0,1));
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#000')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#000')";
}