/* 
 * copyright (c) 2010-2014 Ben Bass
 * All rights reserved
 *
 */


* {
  padding: 0;
  margin: 0;
}

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

a:active, a:hover {
  color: #22f;
}

h1, h2, h3, header, nav {
  text-shadow: 1px 1px 1px #FFF;
}

h1 a:hover, h2 a:hover, h3 a:hover {
  text-shadow: 1px 1px 1px #444;
}


body {
  background-color: #dde; /*#080820;*/
  font-family: "Ubuntu", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  margin: auto;
  max-width: 80rem;
}

div.container {
  margin: 20px 10px 20px 220px;
  max-width: 800px;
}

header {
  margin: 0px auto;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 220px;
  max-width:800px;
  /*min-width: 500px;*/
  background-color: #aab;
  border-radius: 5px;
  -moz-border-radius: 5px;
}

header > div {
  padding: 10px;
  max-width: 800px;
}

header .title_name {
  display: block;
  position: relative;
  padding: 20px;
  background-color: #ccd;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-box-shadow: inset 3px 3px 2px #444;
  -moz-box-shadow: inset 3px 3px 2px #444;
  box-shadow: inset 3px 3px 2px #444;
  text-shadow: 1px 1px 2px #000,
               0px 0px 50px #fff,
               0px 0px 10px #ddd,
               0px 0px 5px #eee,
               0px 0px 2px #fff;
  font-weight: bold;
  text-align: center;
  font-size: 36pt;
  color: #000;
}

/* make HTML5 elements display as block elements */
section, header, footer, nav, canvas {
  display: block;
}

nav {
  background-color: #aab;
  position: fixed;
  top: 10px;
  left: 10px;
  min-width: 175px;
  min-height: 20px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 10px;
}

nav div.nav-inner {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-box-shadow: inset 3px 3px 2px #444;
  -moz-box-shadow: inset 3px 3px 2px #444;
  box-shadow: inset 3px 3px 2px #444;
  padding: 5px 0 5px 12px;
  background-color: #ccd;
  font-weight: bold;
}

nav a,
nav a:visited,
nav a:active,
nav a:hover {
  color: #080820;
  font-size: 30px;
  margin: 10px 0 10px;
  text-decoration: none;
  display: block;
}

nav a.active {
  text-shadow: 0px 0px 1px #ffd;
  color: #ffd;
}
nav a.active:hover {
  text-shadow: 0px 0px 1px #ffd;
  color: #ffd;
}

nav a:hover,
nav a:active {
  text-shadow: 1px 1px 2px #000,
               0px 0px 50px #fff,
               0px 0px 10px #ddd,
               0px 0px 5px #eee,
               0px 0px 2px #fff;
}

nav img {
  border: 0;
  margin-bottom:-5px;
  margin-right: 5px;
  margin-left: -5px;
  width: 32px;
  height: 32px;
}

nav a.social_link {
  width: 32px;
  height: 32px;
  display: block;
  float: left;
  margin-right:8px;
}

nav a.social_link:hover {
    box-shadow: 0px 0px 5px #ffd;
    -webkit-box-shadow:0px 0px 5px #ffd;
    -moz-box-shadow:0px 0px 5px #ffd;
}

nav a.social_link img {
  /* undo negative margin */
  margin: 0px;
}

div.social_links {
  height: 48px;
}

a div.home_link {
  display: block;
  text-align:center;
  font-size:0.9em;
  text-shadow: 1px 1px 2px #000,
               0px 0px 50px #fff,
               0px 0px 10px #ddd,
               0px 0px 5px #eee,
               0px 0px 2px #fff;
  font-weight: bold;
}

blockquote {
  border: 3px inset;
  -webkit-box-shadow: 4px 4px 4px #444;
  -moz-box-shadow: 4px 4px 4px #444;
  box-shadow: 4px 4px 4px #444;
  margin: 20px 100px 20px 100px;
  background-color: #ddd;
  font-style: italic;
  padding: 20px;
}

blockquote h1,
blockquote h2,
blockquote h3 {
  font-style: normal;
  text-shadow: 0px 1px 1px #fff;
}

footer {
  /* use a simpler font here */
  font-family: Arial, sans-serif;
  font-size: 9pt;
  text-align: center;
  color: #aab;
}

legal {
  font-size: 80%;
}

div.text-content,
div.form-content,
div.page-heading,
section {
  border-radius: 5px;
  border: 3px solid #ccd;
  background-color: #eef;
  color: #080820;
  padding: 10px 30px 10px 30px;
  margin-bottom:10px;
}

p {
  padding:10px;
  /* make text less dense */
  word-spacing: 3px;
  line-height: 150%;
  font-size: 14pt;
}

div.page-heading {
  text-align: center;
  font-weight: bold;
  font-size: 14pt;
}

div.canvas-content {
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-color: #ccd;
  padding: 10px 30px 10px 30px;
  margin:20px;
}

div.canvas-status {
  font-family: monospace;
  font-size: 11pt;
  background-color: #dde;
  width: 396px;
  padding: 2px;
  border: 2px solid #888;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

div.canvas-container {
 /* for some reason canvas seems to default to inline, so
    doesn't want to center... */
  margin-left: auto;
  margin-right: auto;
}

canvas {
  margin: 0px auto;
  clear: both;
}

ul, ol, dl {
  padding-top: 10px;
  padding-left: 40px;
  padding-bottom: 10px;
}

li, dt {
  padding-top:5px;
  padding-bottom:5px;
}

h1 {
  padding-top: 20px;
}
h2,h3 {
  padding-top: 10px;
}

#bottom_anchor {
    position: absolute;
    width:1px;
    height:1px;
    left: 0;
    top: 1000px;
}

.float_link {
    position: fixed;
    display: none;
}

.float_link a {
    position: relative;
    left: -50%;
    text-decoration: none;
    color: #bcc;
}

.float_link a:hover {
    text-shadow: 0px 0px 3px #fff;
    color: #ffd;
}

.float_link a img:hover {
    box-shadow: 0px 0px 5px #ffd;
    -webkit-box-shadow:0px 0px 5px #ffd;
    -moz-box-shadow:0px 0px 5px #ffd;
}

#cs_title {
  position: fixed;
  top: 45%;
  width: 100%;
  text-shadow: 1px 1px 2px #000,
               0px 0px 50px #fff,
               0px 0px 10px #ddd,
               0px 0px 5px #eee,
               0px 0px 2px #fff;
  font-weight: bold;
  text-align: center;
  font-size: 36pt;
  color: #000; /*EEF;*/
}

/* bordered images should be:
 * div.image_border > div.image_inner > img
 */
div.image_border {
  background-color: #aab;
  border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 10px;
}

div.image_inner {
  box-shadow: inset 3px 3px 2px #444;
  background-color: #ccd;
  border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 10px; /*7px 5px 5px 7px;*/
}

div.image_inner > img.pressable {
  border-radius: 5px;
  box-shadow: 4px 4px 2px #444;
  padding: 0;
  margin: 0;
  opacity: 0.8;
}

div.image_inner > img.pressable:hover {
  box-shadow: 1px 1px 2px #444;
  margin: 2px -2px -2px 2px;
  opacity: 1;
}