/*
 *
 * Content of CSS:
 *
 *  #blog_summary
 *  #blog_content
 *  div.listbydate
 *  div.code
 *  div.shell
 *  div.picture
 *  div.warning
 *  div.picture
 *  #blog_footer
 *  #blog_filter
 *  #blog_part
 *  #blog_title
 *  #blog_logo
 *  #blog_railway
 *  .a_tags
 *
 *************************************************************************************************/

/* --------------------------------------------------------------------------------------------- */

/**************************************************************************************************
*                                                                                                 *
* Content of blog                                                                              *
*                                                                                                 *
**************************************************************************************************/

pre {
    font-family: "Hack";
    font-size: 14px;
}

span {
    font-family: "Hack";
    font-size: 14px;
}

#blog_part {
  max-width: 1280px;
}

#blog_summary {
  font-family: "Exo2-Light";
}

#blog_title {
  font-family: "Exo2-Light";
  border-color: lime;
  border-width: 1.5px;
  font-size: 24px;
  color: black;
  text-align: center;
  margin: 10px 10px 10px 10px;
}

#blog_title-caps {
  font-family: "Exo2-Light";
  /*font-size: 20px;*/
  font-variant: small-caps;
  font-variant: common-ligatures small-caps;
  font-size: 18px;
  color: white;

}

.blog_url {
  /*color: lightgreen;*/
  color: green;
}

.blog_url:hover {
  color: lime;
  background-color: #111;
}

.div_tag_2 {
  display: inline-block;
  background: black;
  color: lime;
  border-radius:6px;
  padding: 2px;
  font-size: 14px;
  border: solid black 1px;
}

.div_tag_2:hover {
  /*color: white;*/
  background-color: darkgreen;
  /*border-color: #cfc;*/
  color: white;
  box-shadow: 0px 0px 1px black;
}

.div_tag {
  display: inline-block;
  background: green;
  color: white;
  border-radius:6px;
  padding: 2px;
  font-size: 14px;
  border: solid black 1px;
}

.div_tag:hover {
  color: lime;
  background-color: #555;
  border-color: #cfc;
  box-shadow: 0px 0px 1px black;
}

.img_tags {
  height: 20px;
  width: 20px;
  position: relative;
  top: 5px;
}

.blog_td_logo {
  width: 320px;
  height: 220px;
}

.blog_td_logo:hover {
  filter: drop-shadow(0px 0px 3px black);
}

#blog_logo {
  position: relative;
  left: 15%;
}

#blog_railway {
  font-family: "Exo2-Light";
  font-size: 18px;
  text-decoration: none;
  color: lightgrey;
  background-color: #434343;
  padding: 10px 10px 10px 10px;
}

.a_tags {
  font-family: "Exo2-Light";
  font-size: 16px;
  text-decoration: none;
  color: lightgreen;
}

.a_tags:hover {
  color: white;
}

code {
  font-family: "Hack";
  font-size: 13px;
}




/* -[ Cells in an blog ]--------------------------------------------------------------------- */

div.listbydate{
  border: dotted #888888 1px;
  padding: 2px 2px 2px 2px;
}

div.code{
  border: dotted grey 1px;
  padding: 5px 5px 5px 5px;
  color: #110e10;
  word-wrap: break-word;
  background: url("../img/code.jpg");

  font-family: arial;
  color: red;
}

div.shell{
  border: dotted grey 1px;
  position: relative;
  padding: 5px 5px 5px 5px;
  color: #110e10;
  font-family: "Hack";
  word-wrap: break-word;
  color: #aaff00;
  font-size: 13px;
  background: #333; /*url("../img/code.jpg");*/
}

div.picture{
  border: dotted grey 1px;
  padding: 5px 5px 5px 5px;
  margin: 5px 0 5px 0;
  color: #110e10;
  font-family: "Hack";
  word-wrap: break-word;
  text-rendering: geometricPrecision;
}

div.warning{
  font-weight:bold;
  color: #FF0000;
}

div.picture {
  background: #333; /* grey */
}

#blog_filter {
  font-size: 18px;
}

.bloglink {
  color: green;
  font-weight: bold;
  text-decoration: underline;
}

.bloglink:hover {
  color: white;
  background-color: darkgreen;
  font-weight: bold;
  text-decoration: none;
}

.year {
  color: #333;
  background-color: #dfd;
  padding: 9px;
  width: 40px;
  display: inline-block;
  border-width: 1px;
  border-color: black;
  border-radius:6px;
  font-family: "Exo2-Light";
  border: green 1px solid;
}

.year:hover {
  color: white;
  background-color: green;
  display: inline-block;
  border-width: 2px;
  border-color: lime;
  border: lime 1px solid;
}



/**************************************************************************************************
*                                                                                                 *
* Bottom                                                                                          *
*                                                                                                 *
**************************************************************************************************/

#blog_footer {
  position: relative;
  width: 100%;
  max-width: 98.1%;
  border: dotted grey 1px;
  font-family: "Exo2-Light";
  font-size: 18px;

  padding: 10px 10px 10px 10px;
  background-color: #6d6d6d;

  color: white;
  white-space: normal;
  float:left;
  vertical-align:bottom;
  word-wrap: break-word;  
}



/**************************************************************************************************
*                                                                                                 *
* Responsive design                                                                               *
*                                                                                                 *
**************************************************************************************************/

@media screen and (max-width: 640px) {

  pre {
      font-family: "Hack";
      font-size: 12px;
  }

  span {
      font-family: "Hack";
      font-size: 12px;
  }

  #blog_content {
    width: 98.1%;
    max-width: 95%;
  }

  #blog_footer {
    width: 98.1%;
    max-width: 95%;
  }

}