@import url('//fonts.googleapis.com/css?family=Raleway:100');
body {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
  background-color: #ffffff;
  color: #2e3436;
  padding-left: 0;
  padding-right: 0;
}

body.about {
  background-color: #000000;
  color: #eeeeec;
  padding-top: 1em;
  padding-bottom: 1em;
}

body.about h1 {
  font-family: 'Raleway',  'DejaVu Sans', 'Verdana', sans-serif;
  font-size: 28pt;
  color: #ffffff;
  margin-bottom: 1em;
}

body.about .thumbnail {
  border-color: #000000;
}

body.about ul {
  list-style: none;
  margin: 0;
}

body.about .nav {
  margin-top: 2em;
}

body.about .nav > li > a:hover {
  background-color: transparent;
  text-decoration: underline;
}

a {
  color: #c17d11;
}

a:hover {
  color: #8f5902;
}

body.about a {
  color: #ffffff;
}
body.about p a {
  color: #ffffff;
  text-decoration: underline;
}

code {
  color: #333333;
}

article {
  display: block;
}

header {
  display: block;
  padding-top: 130px;
}

header h1 {
  margin-bottom: 1em;
  font-family: 'Raleway',  'DejaVu Sans', 'Verdana', sans-serif;
  font-size: 28pt;
  line-height: 32pt;
  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

header h1 a {
  color: #2e3436;
  border-radius: 8px;
  text-shadow: 0 0 0 #ffffff;
}

body.blog header,
body.blogcategory header,
body.post header{
  padding-top: 0;
}

body.blog header div,
body.blogcategory header div,
body.post header div {
  background-image: url('../img/mdpi/bergie_istanbul_small.jpg');
  background-size: 369px 300px;
  background-position: top right;
  background-repeat: no-repeat;
  padding-top: 175px;
  min-height: 130px; 
}

body.blog header h1,
body.blogcategory header h1,
body.post header h1 {
  margin-right: 280px;
}

body .container {
  margin-left: 20px;
  margin-right: 20px;
}

body.front header div {
  background-image: url('../img/mdpi/bergie_istanbul_big.jpg');
  background-size: 491px 400px;
  padding-top: 230px;
  height: 180px;
}

body.front aside {
  display: block;
}

body.front header h1 {
  font-size: 36pt;
}

body.blog article h1 {
  margin-bottom: 1em;
  font-family: 'Raleway',  'DejaVu Sans', 'Verdana', sans-serif;
}

body.blog article h1 a {
  color: #2e3436;
}

body.blog article a.commentscount {
  margin-left: 3em;
  text-transform: lowercase;
}

body.blog article .metadata {
  font-weight: bold;
  font-style: italic;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
  font-size: 16pt;
  color: #555753;
}
body.blog aside {
  margin-top: -40px;
}

body.blog aside p,
body.blogcategory aside p {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
  font-size: 18pt;
  line-height: 23pt;
  margin-bottom: 2em;
}

body.blogcategory ol.categoryposts {
  list-style-type: square;
}

body.blogcategory ol.categoryposts li {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
  font-size: 16pt;
  line-height: 20pt;
}

body.blogcategory ol.categoryposts li a {
  font-weight: bold;
  color: #2e3436;
}

body.blogcategory ol.categoryposts li .metadata {
  display: block;
  font-style: italic;
  font-size: 12pt;
}

body.post article .metadata {
  font-style: italic;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
  font-size: 12pt;
  color: #555753;
  text-align: right;
  padding-bottom: 1em;
}

article div,
article p,
article ul,
article ul li,
article ol,
article ol li,
article blockquote {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
  font-size: 16pt;
  line-height: 21pt;
  margin-bottom: 1em;
}

article ul,
article ol {
  margin-left: 0;
  padding-left: 0;
}

article li ul,
article li ol {
  margin-left: 2em;
}

article ul {
  list-style-type: square;
}

article ol {
  list-style-type: upper-roman;
}

article blockquote ul,
article blockquote ol {
  margin-left: 2em;
  padding-left: 1em;
}

article pre code {
  color: #333;
  border: none;
}

article .contentSource {
  font-style: italic;
}

article div.previous,
article div.previous p,
article div.previous ul li {
  font-size: 12pt;
}

hr {
  height: 80px;
  background-image: url('../img/mdpi/flyingpig.png');
  background-size: 89px 80px;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  margin-bottom: 2em;
  border-top: none;
  border-bottom: none;
}

footer {
  display: block;
  background-color: #eeeeec;
  width: 100%;
  padding-top: 1em;
  padding-bottom: 1em;
}

footer p {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
  font-size: 14pt;
  line-height: 17pt;
}

footer .avatar {
  float: left;
  margin-right: 1em;
}

footer .avatar .switcher {
  position:relative;
  width: 120px;
  height: 120px;
  margin: 0;
}

footer .avatar div.image {
  width: 120px;
  height: 120px;
  background-size: 120px 120px;
  background-repeat: no-repeat;
  position:absolute;
  left:0;
  cursor:pointer;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out; 
  transition: opacity 1s ease-in-out;
}

footer .avatar div.photo {
  background-image: url('../img/mdpi/bergie.jpg');
}

footer .avatar div.drawing {
  background-image: url('../img/mdpi/bergie_drawn.jpg');
}

footer:hover .avatar div.drawing,
footer .avatar div.transparent {
  opacity:0;
} 

footer ul.nav-wide {
  margin-left: 120px;
  padding-left: 1em;
}

footer ul.nav li a {
  background-color: #ffffff;
  margin-right: 1em;
}

@media (max-width: 980px) {
  body.blog header div,
  body.blogcategory header div,
  body.post header div {
    padding-top: 275px;
  }
  body.blog header h1,
  body.blogcategory header h1,
  body.post header h1 {
    margin-right: 40px;
  }
  body.front header div {
    padding-top: 365px;
  }
}

@media (max-width: 767px) {
  body.blog article .metadata {
    font-weight: normal;
    text-align: right;
  }
  body.post article iframe,
  body.post article video {
    width: auto;
    max-width: 100%;
  }
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.3),
only screen and (-moz-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.3) {
  body.blog header div,
  body.blogcategory header div,
  body.post header div {
    background-image: url('../img/hdpi/bergie_istanbul_small.jpg');
  }
  body.front header div {
    background-image: url('../img/hdpi/bergie_istanbul_big.jpg');
  }
  hr {
    background-image: url('../img/hdpi/flyingpig.png');
  }
  footer .avatar div.photo {
    background-image: url('../img/hdpi/bergie.jpg');
  }
  footer .avatar div.drawing {
    background-image: url('../img/hdpi/bergie_drawn.jpg');
  }
}

@media only screen and (-Webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 3) {
  body.blog header div,
  body.blogcategory header div,
  body.post header div {
    background-image: url('../img/xhdpi/bergie_istanbul_small.jpg');
  }
  body.front header div {
    background-image: url('../img/xhdpi/bergie_istanbul_big.jpg');
  }
  hr {
    background-image: url(..img/xhdpi/flyingpig.png');
  }
  footer .avatar div.photo {
    background-image: url(..img/xhdpi/bergie.jpg');
  }
  footer .avatar div.drawing {
    background-image: url(..img/xhdpi/bergie_drawn.jpg');
  }
}