@import url(fonts.css);


/* --- global --------------------------------------------------------------- */

body 
{ font-family: 'Barlow', sans-serif;
  font-stretch: normal;
  font-size: 13pt; /* 12pt/normal */
  line-height: 1.4em;
  margin: 0;
}

::selection
{
  color: #222222;
  background: #D6EDFF
}

a
{ color: #155c9d;
  transition: color ease 0.3s;
}

a:hover
{ color: #57A3E8;
}

b
{ font-weight: 600;
}


/* --- header --------------------------------------------------------------- */ 

.overview-header,
.article-header
{ width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 0;
  background-color: #ccc;
  background: linear-gradient(to top, #fff, #fff 10%, 
    #000 10%, #000 10.6666%, #ccc 10.6666%, #fff);
}

.overview-header img,
.article-header img
{ width: 800px;
}


/* --- article -------------------------------------------------------------- */

.content h1.title a
{ color: inherit;
  text-decoration: inherit;
}

.content article
{ width: 90%;
  max-width: 700px;
  margin: 1.5em auto;
  padding-bottom: 1.5em;
  word-break: break-word;
  hyphens: auto;  
  clear: both;
}

.content article:nth-last-of-type(n+2)
{ border-bottom: #9eabb3 1px solid;
}

.published-full
{ font-size: 11pt;
}

.published-extra
{ display: none;
}

h1.title
{ font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-stretch: condensed;
  font-size: 20pt;
  line-height: 1.2em;
  color: #50585D;
  margin-top: 0.5em;
}

h1, h2, h3, h4, h5, h6
{ font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 14pt;
  margin-top: 1.5em;
}


.content blockquote
{
  margin: 1em 0 1em 0em;
  padding: 1pt 1em 1pt 1.5em;
  border-left: #cccccc 0.5em solid;
  background: #eeeeee;
  font-style: italic;
}

.content p
{
  margin: 0.6em 0 0.6em 0;
}

.content p:first-child
{
  margin-top: 0;
}

.content ul
{ list-style-type: square;
}

.content ul, 
.content ol 
{ margin: 1em 0;
}

.content ol ol,
.content ul ul,
.content ul ol, 
.content ol ul 
{ margin: 0.4em 0;
}

.content li > p
{ margin: 0
}

.content li > p + p
{ margin-top: 0.6em;
}

.content hr
{ display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #000000;
  margin: 3.2em 0;
  padding: 0;
}

.content .link
{ display: grid;
  grid-template-columns: 100px 1fr;
}

.content .videolink
{ display: grid;
  grid-template-columns: 110px 1fr;
}

.content .link .icon
{ width: 100px;
}

.content .link .icon > img
{
  width: 89px;
  height: 44px;
}

.content .videolink .icon
{ width: 110px;
}

.content .videolink .icon > img
{
  width: 102px;
  height: 44px;
}

.content .link .linkcontent,
.content .videolink .linkcontent
{ padding-top: 8px;
}

/* --- pagination ----------------------------------------------------------- */

.pagination 
{ position: relative;
  width: 90%;
  max-width: 700px;
  margin: 16pt auto;
  font-family: 'Barlow', sans-serif;
  font-size: 10pt;
  color: #9EABB3;
  text-align: center;
}

.pagination a
{
  color: #9EABB3;
}

.older-posts,
.newer-posts
{ position: absolute;
  display: inline-block;
  padding: 0 15px;
  border: #EBF2F6 2px solid;
  text-decoration: none;
  border-radius: 30px;
  transition: border ease 0.3s;
}

.older-posts
{ right: 0;
}

.page-number
{ display: inline-block;
  padding: 2px 0;
}

.newer-posts
{ left: 0;
}

.older-posts:hover,
.newer-posts:hover 
{ border-color: #9EABB3;
}


/* --- footer --------------------------------------------------------------- */

.page-footer
{ text-align: center;
  border-top: #000 1px solid;
  padding: 1em 0;
  background: linear-gradient(to bottom, #cccccc, #ffffff);
}

.page-footer > .inner
{ margin: 0 auto;
  width: 90%;
  max-width: 700px;
  font-size: 11pt;
  line-height: 13pt;
}

.page-footer .rss
{ margin-bottom: 0.5em;
}

.page-footer .rss a
{ text-decoration: none;
  color: inherit;
}

.page-footer .rss img
{ height: 1em;
  vertical-align: middle;
}


/* --- small devices -------------------------------------------------------- */


@media only screen and (min-width: 1000px) 
{
  .published-full
  { display: none;
  }

  .published-extra
  { display: block;
    float: left;
    overflow: visible;
    width: 0;
  }

  .published-extra span
  { display: block;
    width: 85pt;
    position: relative;
    left: -100pt;
    text-align: center;
    color: #808080;
    background: #f0f0f0;
  }

  .published-extra span:nth-child(1)
  { border-top: 3pt solid #808080;
  }

  .published-extra span:nth-child(2)
  { border-top: 1pt solid #808080;
  }

  .published-extra .month-year
  { font-stretch: semi-condensed;
  }

  .published-extra .day
  { font-weight: 200;
    font-stretch: condensed;
    font-size: 72pt;
    line-height: 1em;
    border-bottom: 1pt solid #808080;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 800px) 
{
  .overview-header > img,
  .article-header > img
  { width: 100%;
  }
}

@media only screen and (max-width: 500px)
{
  body
  { font-size: 12pt;
    line-height: 1.2;
  }

  h1.title
  {
    font-size: 16pt;
  }

  h1, h2, h3, h4, h5, h6
  { 
    font-size: 13pt;
  }

  .content .link
  { display: grid;
    grid-template-columns: 74px 1fr;
  }

  .content .videolink
  { display: grid;
    grid-template-columns: 83px 1fr;
  }

  .content .link .icon
  { width: 60px;
  }

  .content .link .icon > img
  {
    width: 66px;
    height: 33px;
  }

  .content .videolink .icon
  { width: 66px;
  }

  .content .videolink .icon > img
  {
    width: 75px;
    height: 33px;
  }

}