body {
  background-color: #3b5166;
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,.0), rgba(255,255,255,.3)); /* Chrome 10+, Saf5.1+ */
  background-image:         linear-gradient(left, #3b5166, #758493);
  color:#ddd;
  padding:0 2em;
  font-family: helvetica, sans-serif;
}
h1 {font-size:3em; margin:.5em 0; text-transform:lowercase; text-shadow:1px 1px 1px rgba(0,0,0,0.5); }
h2 {text-shadow:1px 1px 1px rgba(0,0,0,0.3); }
a {color:inherit; }
p {text-shadow:1px 1px 1px rgba(0,0,0,0.3); }
p a {color:#fff; }
p strong,
p b {color:#fff; }
abbr {cursor:help; }

::selection {background: #555; color: #fff; }
::-moz-selection{background: #555; color: #fff; }
::-webkit-selection{background: #555; color: #fff; }

.intro {position: relative; max-width: 720px; }
.intro .info {width: 2em; height: 12px; margin: 0 4px 0 0; padding: 4px 4px 2px 4px; font-weight: 700; color: #333; position: absolute; right: 0; top: 0; z-index: 500; cursor: pointer; }
.intro .info.open {color: #fff; }
.intro .info .about {opacity: 0; width: 400px; padding: 1.5em 1em 0 1em; color: #fff; border: 1px solid rgba(255,255,255,0.6); border-radius: 3px; background: rgba(35,35,35,0.8); -moz-transition: all .2s linear; -webkit-transition: all .2s linear; position: absolute; right: -160px; top: -18px; z-index: 400; }
.intro .info.open .about {opacity: 1; }
.intro .info .close {opacity: 0; display: block; width: auto; padding: 2px 6px; background: rgba(200,200,200,0.4); color: #fff; font-size: smaller; position: absolute; top: -1px; z-index: 700; }
.intro .info.open .close {opacity: 1; }

#other {clear:both; position:fixed; top:4%; right:2%; z-index:1001; text-align: right; }
#other ul li {
  list-style-type:none;
  color: #000;
  text-shadow:1px 1px 1px rgba(255,255,255,0.4);
  opacity: .8;
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  -ms-transition: all .1s ease-out;
  transition: all .1s ease-out;
  }
#other ul li:hover {opacity: 1; }
#other ul li a {
  display: block;
  width: 100%;
  margin-right: 5px;
  padding: 5px 10px 5px 0;
  background: transparent;
  border: 1px solid transparent;
  border-width: 0 1px 1px 0;
  color:#ddd;
  text-shadow:0 1px 0px rgba(0,0,0,0.4);
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  -ms-transition: all .1s ease-out;
  transition: all .1s ease-out;
  }
#other ul li:hover a {background: rgba(0,0,0,0.7); border-color: rgba(255,255,255,.5); -webkit-transform: scale(1.05); text-decoration: none; }
#other .credit {padding-top: 1em; }

.instructions,
.warning {max-width: 800px; padding-right: 146px; }
.warning {color:#fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
.warning a {color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,0.4); }

code {white-space: nowrap; }