/*****************************************************************************/
/*
/* Common
/*
/*****************************************************************************/

html { font-size: 2.15vw; }
@media all and (min-width:1000px) { html { font-size: 21.8px; } }
@media all and (max-width:520px){ html {font-size: 18px;} }

/* Global Reset */
* {
  margin: 0;
  padding: 0;
}

html { height: 100%; }

body {
  min-height: 100%;
  background-color: #FFF;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  font-family: "ff-tisa-web-pro",serif;
  font-style: normal;
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  text-align: left;
  font-family: inherit;
  font-style: normal;
  font-weight: 300;
  font-size: 153%;
  line-height: 1.14em;
}

h1 { 
  margin-bottom: 1.2em; 
}
h2 { 
  margin-bottom: 1.2em; 
}

a {
  -moz-transition-property: background;
  -webkit-transition-property: background;
  transition-property: background;
  -moz-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  text-decoration: none;
  color: inherit;

  }

a:hover {
  background: #fbf3f3;
  -moz-transition-property: background;
  -webkit-transition-property: background;
  transition-property: background;
  -moz-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;

  border-radius: 8px;
}

.post a:after, .footer a:after {
  content: "\FEFF »";
  margin-left: 0.10em;
  font-size: 90%;
  top: -0.10em;
  color: #933;
}

/*****************************************************************************/
/*
/* Home
/*
/*****************************************************************************/
ul.posts {
  list-style-type: none;
  margin-bottom: 1.9rem;
  font-size: 90%;
}

ul.posts li {
  line-height: 1.75em;
}

ul.posts span {
  color: #aaa;
}


/*****************************************************************************/
/*
/* Site
/*
/*****************************************************************************/

.container {
  margin-left: 13em;
  margin-right: 4.5em;
  padding-top: 4em;
}

.site {
  font-size: 100%;
  text-align: left;
  width: inherit;
  line-height: 1.5em;
  position: relative;
  margin: 0em;
}

.header {
  text-align: left;
  position: absolute;
  left: -11.1em;
  display: block;
  width: 9.5em;
}

.site .header a {
  font-weight: bold;
  text-decoration: none;
}

.site .header h1 {
  width: 100%;
  font-size: 110%;
}

.site .header h1.title {
  display: inline-block;
  text-align: right;
}

.site .header h1.title a {
  color: #a00;
}

.site .header h1.title a:hover {
  color: #000;
}

.site .header h2 {
  text-align:right;
  font-size: 110%;
  border-top-width: 0.2em;
  border-top-color: black;
  border-top-style: double;
}

.site .header a.extra {
  color: #aaa;
  margin-left: 1em;
}

.site .header a.extra:hover {
  color: #000;
}

.site .meta {
  color: #aaa;
}

.site .footer {
  font-size: 80%;
  color: #666;
  margin-top: 2em;
  overflow: hidden;
  border-top-width: 0.2em;
  border-top-color: black;
  border-top-style: double;
}

.site .footer .contact {
  float: left;
  margin-right: 3em;
}

.site .footer .rss {
  margin-top: 1.1em;
  margin-right: -.2em;
  float: right;
}

.site .footer .rss img {
  border: 0;
}

/*****************************************************************************/
/*
/* Posts
/*
/*****************************************************************************/

/* default font */
.post {
  font-size: 0.94rem;
  text-align: left;
  line-height: 1.47;
  font-family: "ff-tisa-web-pro",serif;
  font-style: normal;
  font-weight: 300;
}
.post p { 
  margin-bottom: 1.2em; 
  width: inherit; 
}

/* standard */
.post pre {
  /*
  border: 1px solid #ddd;
  background-color: #eef;
  padding: 0 .4em;
  */
  margin-top: 1.7em;
  margin-bottom: 1.9rem;
}

.post ul, .post ol {
  margin-left: 2rem; 
  margin-bottom: 1.9rem; 
  width: inherit;
}

.post ul li, .post ol li{
  padding-left: 0.35em;
}

/* inline code blocks */
.post code {
  /*border: 1px solid #ddd;
  background-color: #eef;
  padding: 0 .2em;*/
  font-size: 90%;
  /*line-height: 1.5rem;*/
  font-family: "anonymous-pro",sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* code blocks */
.post pre code {
  border: none;
  font-size: 80%
  font-family: "anonymous-pro",sans-serif;
  line-height: 1.5rem;
}

/* terminal */
.post pre.terminal {
  /*border: 1px solid #000;
  background-color: #333;
  color: #FFF;*/
}

.post pre.terminal code {
  /*background-color: #333;*/
}

.post h2, .post h1 {
  margin-top: 0.2em; 
  margin-bottom: 1.2em; 
}

.post .highlight {
  margin-bottom: 1.9rem; 
}

.post .aside {
  text-align: right;
  position: absolute;
  left: -12.2em;
  display: block;
  width: 10em;
  font-size: 70%;
  line-height: 1.4em;
  color: #667;
}

.post .aside-header {
  text-align: right;
  position: absolute;
  left: -14.2em;
  display: block;
  width: 12.7em;
  font-size: 90%;
  line-height: 1.4em;
  color: #667;
}

.post .funding-aside {
  left: -16.2em;
}

@media all and (max-width:520px) {
  .post .aside {
    left: 0;
    float: inherit;
    position: inherit;
    width: 100%;
    text-align: left;
  }
  .post .aside-header {
    left: 0;
    float: inherit;
    position: inherit;
    width: 100%;
    text-align: left;
  }
  .post .funding-aside {
    left: 0;
    float: inherit;
    position: inherit;
    width: 100%;
    text-align: left;
  }
  .header {
    left: 0;
    float: inherit;
    position: inherit;
    width: 100%;
    text-align: left;
  }
  .site .header h2,
  .site .header h1.title {
    text-align: left;
  }
  .container {
    padding: 0;
    margin: 1.5rem;
  }
}

img {
  width: 95%; /* useful for links */
}

.post video {
  width: 100%;
}