/* © 2014 Daniel Bünzli */

@import url(lato-font.css);
@import url(dejavu-sansmono.css);

/* Reset a few things */

*, *:before, *:after { -webkit-box-sizing: border-box;
                       -moz-box-sizing: border-box;
                       box-sizing: border-box; }

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,
address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,
b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,
hgroup,menu,nav,section,summary,time,mark,audio,video,input,select
{ margin: 0; padding: 0; border: 0; outline: 0;
  font-size: 100%;
  font-family: inherit;
  font-weight: inherit;
  background: transparent; color: inherit;
  vertical-align: baseline; }

ol, ul { list-style: none }

/* Center body */
html, body { top: 0px; right: 0px; bottom: 0px; left: 0px; height: 100%;
             margin: auto;}

body { color: #D0D0D0;
       background-color: black;
       font-size: 1em;
       line-height: 1.3125em;
       font-family: 'Lato', sans-serif;
       font-weight: 300;
       -webkit-text-size-adjust: none;
       -moz-text-size-adjust: none;
       text-size-adjust: none;
       margin-top: 1px; /* force scroll bar */
       min-width: 20em;
       max-width: 40em;
       text-align: left; }

/* Three columns, fluid center. */
#left { float: left; width: 2.25em; padding-top: 7.9em; }
#right { float: right; width: 2.25em; padding-top: 7.9em; }
#content { margin-left: 2.25em; margin-right: 2.25em; padding-top: 1.75em; }

/* Navigation */
#left a, #right a
{ display: block;
  width:100%;
  height: 2.5em;
  border: none;
  /* border: solid 1px white; */
  color: #404040;
  text-align: center; }

#left a:hover, #right a:hover { color:white; }
#left a { text-align: left; }
#right a { text-align: right; }
.button { font-size: 4.5em; }

/* Headers */
header a { border-bottom: none; }
article header { margin-top:1.3125em; }
article header + ol { margin-top:2.632em; }

h1 { font-weight: 300; font-size:3em; line-height: 1.3125em;
     text-transform: uppercase; display: inline; margin-right: 0.5ex; }

h1 + time { display: inline-block }

/* content */

em { font-style: italic;  }

sup { vertical-align: super; }
sub { vertical-align: sub; }
sup, sub { font-size : 0.75rem; line-height: 0; margin-left: 0.1ex; }

a { color:inherit; text-decoration: none; border-bottom: 1px solid #808080;}
a:hover { color:white; border-bottom-color: white }

img { width: 100%; margin-top: 1.3125em; border: 1px solid #404040;}

p {
  -moz-text-rendering: optimizeLegibility;
  -moz-font-feature-settings: "gsub";
/*
       -webkit-font-feature-settings: "liga";
       font-feature-settings: "liga", "dlig", "onum";
*/
}
p, pre { margin-top: 1.3125em; }
p > *:first-child { margin-top: 0em }

/* lists */
ul, ol { margin-top: 0.65625em; margin-bottom: 0.65625em; }
ul + *, ol + * { margin-top: 0em; }
ul { text-indent: -1em; list-style: square inside; }
ol { text-indent: -1.1em; list-style: decimal inside; }

/* Preformatted and code */
pre { font-family: dejavu-sansmono, monospace;
      font-size:0.89em;
      line-height:1.33em;
      margin-top:1.4747em;
      color: #B0B0B0; /* It's bolder so it picks up more light */
      white-space: -moz-pre-wrap;
      white-space: -pre-wrap;
      white-space: -o-pre-wrap;
      white-space: pre-wrap;
      word-wrap: break-word; }

p code { font-family: dejavu-sansmono, monospace;
         font-size:0.92em;
         color: #B0B0B0; }

p a:hover code { color: inherit }

.kw, .kw1 { color: #858585 }
.id { color: #B7B7B7;}
.kw2 { color:#7F997F; }
.comment { color:#997F99; }
.string { color:#99997F; }

/* Footer */
footer { margin-top: 1.3125em; padding-bottom: 2.5em; }
footer .copyright { font-size:0.666em; color:#808080;}
footer .copyright a { border-bottom: none; }

/* Index */
#index ol { text-indent: 0em; list-style: none; }
#index li { font-size: 1.5em; line-height: 1.3125em; text-transform:uppercase}
#index li time { font-size:0.666em; line-height: 2.25em;
                 display:inline-block; width:17%;
                 vertical-align: top; }
#index li span { display:inline-block; width:78%; vertical-align:baseline}
#index li a { border-bottom: none; }


/* Mobile adjustements */
@media only screen and (max-width: 480px)
{
  #left { width: 1.5em; padding-top: 5.4em; }
  #right { width: 1.5em; padding-top: 5.4em; }
  #content { margin-left: 1.5em; margin-right: 1.5em; }
  #left a, #right a { height: 1.5em; text-align: center; }
  .button { font-size: 3em; line-height: 0.25em}
  h1 { font-size: 1.6em; }

  #index li { font-size: 1.2em; }
  #index li time { width:30%; }
  #index li span { width:60%; }
}

/* Print adjustements */
@media print
{
  body { color: black; background-color: white; }
  #left a, #right a { display: none; }
  header > a { display:none; }
}