body, h1, h2, h3, h4, h5, h6, p, li, ol, ul, blockquote, code, pre {
  margin: 0;
  padding: 0;
  color: #444444;
  font-size: 18px;
  font-family: "PT Serif", Georgia, serif;
  -webkit-font-smoothing: antialiased; }

body {
  background: rgb(185,179,162) url("images/bg.png");
  background: -webkit-radial-gradient(
    center center,
    ellipse contain,
    rgba(255,255,255,1),
    rgba(255,255,255,0))
  , url("images/bg.png");
}

h1 {
  margin: 36px 0 46px;
  text-align: center;
  font: italic 1.8em normal "Rosarivo", "Baskerville", "PT Serif", Georgia, serif; }

a {
  text-decoration: none;
  color: #000;
  opacity: .3;
}
a:before {
  content: "†";
  margin-right: .3em;
  font-weight: bold;
  -webkit-transition-duration: .2s;
}
a:hover {
  -webkit-transform: scale(1.1);
  opacity: 1;
}

p, li {
  line-height: 1.4em; }

h2 {
  line-height: 18px;
  margin-top: 18px; }

p + p {
  text-indent: 1.4em; }

p, ul, ol, pre, .highlight {
  margin-top: 1em;
}

p code, li code { font-size: 85%; background: #ddd; }

blockquote {
  margin: 18px;
  font-style: italic;
}

pre, code {
  font-family: Monaco, Menlo, DejaVu Sans Mono, monospace;
  font-size: 93%;
}

pre { padding: 0 .1em; }

pre code { color: rgb(130,146,148) }

aside {
  text-align: right; }
  aside p, aside li {
    font-size: 12px;
    margin-top: 3px;
    line-height: 15px; }

hr {
  border:0;
  background: rgba(0,0,0,.1);
  height: 1px;
  width: 120px;
  margin: 1em auto 0;
}

#bucket {
  background: rgba(255,255,255,.8);
  width: 720px;
  margin: 120px auto;
  padding: 2.8em;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 5px 5px rgba(0, 0, 0, 0.45);
  position: relative;
}

#logo {
  background: url("images/logo.png") no-repeat center;
  height: 54px;
  margin: 20px 0 0 0px;
  text-indent: -9999px; }

#logo a { display: block; }

#slogan {
  text-align: center;
  color: rgba(0,0,0,.3);
  margin-top: -3em;
  margin-bottom: 4em;
  display: block;
  font-style: normal;
}

.highlight {
  padding: 4px;
  overflow: scroll;
}

.highlight pre {
  margin-top: 0;
}

nav a {
  border-radius: 15px;
  width: 30px;
  height: 30px;
  background-color: #3f3e3f;
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5);
  display: block;
  opacity: 1;
  color: #fff;
  line-height: 30px;
  text-align: center;
  position: absolute;
  top: -15px
}

nav a:before { content: none; }

nav .next { right: -15px; }
nav .previous { left: -15px; }

@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
  body {
    background: rgba(255,255,255,.8) none;
  }
  div#bucket { 
    width: auto;
    margin-top: 0;
  }
}