/* overall defaults */
body {
  font-family: "chaparral-pro", serif;
  font-size: 1.2em;
  background: #F0F0F0;
  margin: 0;
  background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(0, #DBDBDB),
      color-stop(0.25, #F4F4F4),
      color-stop(0.75, #F4F4F4),
      color-stop(1, #DBDBDB)
  );
  background-image: -moz-linear-gradient(
      left center,
      #DBDBDB 0%,
      #F4F4F4 25%,
      #F4F4F4 75%,
      #DBDBDB 100%
  );
}

/*h1, h2, h3, h4, h5, h6, th, #title {
  font-family: "bree-serif", "Helvetica Neue", Helvetica, Verdana, sans-serif;
}*/

a {
  text-decoration: none;
}

a:link {
  color: #606C88;
  -webkit-transition: color 0.4s;
  -moz-transition: color 0.4s;
  -o-transition: color 0.4s;
  transition: color 0.4s;
}

a:visited {
  color: #606C88;
}

a:hover {
  color: #3F4C6B;
}

a:active {
  color: #8B94F5;
}

.permalink {
  visibility: hidden;
  margin: 0 0 0 0.25em;
}

h1:hover .permalink, h2:hover .permalink,
h3:hover .permalink, h4:hover .permalink,
h5:hover .permalink, h6:hover .permalink {
  visibility: visible;
}

pre, code {
  font-family: source-code-pro, Consolas, monospace;
}

code {
  font-weight: bold;
  font-size: 0.9em;
  word-wrap: break-word;
}

pre {
  padding: 0.6em;
  background: #F4F4F4;
  overflow: auto;
  font-size: 0.75em;
  -webkit-box-shadow: inset #494949 0 0 0.4em;
  -moz-box-shadow: inset #494949 0 0 0.3em;
  -o-box-shadow: inset #494949 0 0 0.3em;
  box-shadow: inset #494949 0 0 0.3em;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

/* codehilite tables */
table.codehilitetable {
  width: 100%;
}

table.codehilitetable td {
  border: none;
  padding: 0;
}

table.codehilitetable td.linenos pre {
  /* don't show the line numbers */
  display: none;
  /* make them nice, just in case */
  color: #BBB4C7;
  text-align: right;
  border: none;
  box-shadow: none;
  background: inherit;
}

th, td {
  padding: 0.2em 0.5em;
}

/* header */
#title {
  display: block;
  text-align: center;
  color: #DDDDDD;
  font-weight: bold;
  font-size: 4rem;
  margin: 0;
  padding: 0.2em 0;
}

nav ul {
  list-style: none;
  color: white;
  overflow: hidden;
  margin: 0;
  padding: 0.25em;
  background-color: rgba(255, 255, 255, 0.2);
}

nav ul li {
  float: left;
  margin: 0 1em;
}

nav a:link, nav a:visited {
  color: #F0F0F0;
}

#header {
  background-image: -webkit-radial-gradient(center, ellipse cover, #606C88 0%, #000000 100%);
  background-image: -moz-radial-gradient(center, ellipse cover, #45484D 0%, #000000 100%);
  background: radial-gradient(center, ellipse cover, #45484d 0%,#000000 100%);
  background-color: black;
  -webkit-box-shadow: black 0 0 1em;
  -moz-box-shadow: black 0 0 1em;
  -o-box-shadow: black 0 0 1em;
  box-shadow: black 0 0 1em;
}

#header form {
  float: right;
  margin-top: -1.5em;
}

#header form div {
  float: left;
}

#header form label {
  display: none;
}

#header form #query {
  width: 20em;
}

#header form input[type="submit"] {
  border: none;
  background: none;
  color: #F0F0F0;
  font-size: 1em;
  font-family: "chaparral-pro", serif;
  margin: 0.2em 0;
  padding: 0 1em 0 0.5em;
}

/* main */
article > header > h1 {
  margin-bottom: 0.25em;
}

#main {
  clear: both;
  margin: 0 auto;
  padding: 0 1em;
  max-width: 36em;
}

time {
  color: #5F5F5F;
}

header time {
  font-size: 1.2em;
  display: inline-block;
}

#metadata {
  height: 2.5em;
}

#metadata .author, #metadata .shorturl {
  display: inline-block;
}

#metadata .tag a {
  color: #E0E0E0;
  background-color: #838383;
  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
  padding: 0.1em 0.5em;
  display: inline-block;
  -webkit-transition: color 0.6s;
  -moz-transition: color 0.6s;
  -o-transition: color 0.6s;
  transition: color 0.6s;
  -webkit-transition: background-color 0.6s;
  -moz-transition: background-color 0.6s;
  -o-transition: background-color 0.6s;
  transition: background-color 0.6s;
}
#metadata .tag a:hover {
  color: #FFF;
  background-color: #000;
}

#metadata #tags {
  float: right;
  padding: 4px;
  font-size: 0.75em;
  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
  background-color: rgba(255, 255, 255, 0);
  -webkit-transition: background-color 0.6s;
  -moz-transition: background-color 0.6s;
  -o-transition: background-color 0.6s;
  transition: background-color 0.6s;
}

#metadata #tags .tagtext {
  padding: 0.1em 0.5em;
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

#metadata #tags:hover {
  background-color: rgba(255, 255, 255, 1);
}

#metadata #tags:hover .tagtext {
  opacity: 1;
}

/* table of contents */
div.toc {
  float: right;
  margin: 1em 0 1em 1em;
  border-left: 1px solid #838383;
  font-size: 0.8em;
}

div.toc ul {
  padding-left: 1em;
}

div.toc li {
  list-style-type: none;
}

article ol {
  list-style: none;
  counter-reset: item;
}

article ol > li:before {
  content: counter(item) ".";
  counter-increment: item;
  color: #5F5F5F;
  float: left;
  width: 2em;
  margin-left: -2em;
}

article > table {
  margin: 1em auto;
  border-collapse: collapse;
}

article > table th {
  border-bottom: 2px solid;
}

article > table td {
  border-bottom: 1px solid;
}

article > blockquote {
  font-size: 0.9em;
  margin: 0 1em;
  padding: 0.1em 1em;
  -webkit-border-radius: 1.2em;
  -moz-border-radius: 1.2em;
  border-radius: 1.2em;
  border-left: 2px solid #CDCDCD;
  border-right: 2px solid #CDCDCD;
}

ol#archives {
  list-style-type: none;
}

ol#archives > li > h2 {
  margin-top: 0.5em;
  margin-bottom: 0;
}

ol#archives > li > ol {
  list-style-type: none;
}

ol#archives time {
  padding-left: 1em;
  opacity: 0.3;
}

#main img {
  max-width: 100%;
}

#main p > img {
  display: block;
  margin: 0 auto;
}

/* Disqus */
/*.dsq-options img {
  display: none !important;
}
*/
/* footer */
#footer > p {
  text-align: center;
  font-size: 0.75em;
}

/* Safari Touch tweaks */
@media screen and (device-width: 320px) and (orientation: portrait) {
  #main, nav ul li {
    font-size: 3em;
  }
  table.codehilitetable td.code pre {
    width: 19em;
  }
}
@media screen and (device-width: 320px) and (orientation: landscape) {
  #main, nav ul li {
    font-size: 2em;
  }
  #main {
    max-width: none;
  }
  .codehilite > pre {
    font-size: 1.2rem;
  }
}
@media screen and (max-device-width: 480px) {
  #main {
    /* fucking tables */
    overflow: scroll;
  }
  nav ul li {
    margin: 0 0.5em;
  }
  #header form {
    display: none;
  }
  #metadata .tagtext {
    display: none;
  }
  #metadata .tag {
    display: block;
    margin-top: 0.2em;
    text-align: right;
  }
  div.toc {
    float: none;
    border: none;
  }
  article ol > li {
    margin-left: 0.5em;
  }
  article ol > li:before {
    width: 1em;
    margin-left: -1em;
  }
  #footer > p {
    text-align: center;
    font-size: 2em;
  }
}
/* iPad */
@media only screen and (device-width: 768px) {
  #main {
    max-width: none;
  }  
  #main, nav ul li {
    font-size: 1.4em;
  }
}