/*
  Main CSS file of pelican-theme `dashof`.
  2014-15 Dieter Werthmuller
  *
  License: CC0 1.0; https://creativecommons.org/publicdomain/zero/1.0/
*/
@import url(normalize.css);
@import url(pygment.css);
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,400italic,700);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Special+Elite);

/*
  GENERAL SETTINGS
*/
html {
  height: 100%;
}
body {
  background: #fefefe;
  color: #000;
  font-family: 'Ubuntu',sans-serif;
  font-size: 1em;
  font-weight: 400;
  height: 100%;
  line-height: 1.5em;
  margin: auto;
  max-width: 1050px;
  min-width: 320px; /* Responsive design (@media at the bottom) takes care */
  padding: 0;                         /* down to 320px. That's the minimum */
  text-align: left;
  width: 100%;
}
header,
nav,
main,
section,
article,
summary,
footer { /* HTML structural elements */
  display: block;
}
a:link,
a:visited {
  color: #009;
  text-decoration: none;
}
a:hover,
a:active {
  color: #900;
  transition: .5s;
}
strong {
  font-weight: 700;
}
em {
  font-weight: 400;
}
img {
  border: 0 none;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}
.caps {
  text-transform: uppercase;
}
.libracket { /* Elliptic borders around links */
  border-left: 2px solid #900;
  border-radius: 1em/2em;
  border-right: 2px solid #900;
  padding: 0 .3em;
}
.hgrad:before { /* Horizontal green gradient */
  background: linear-gradient(to right, #fff 0%,#090 50%,#fff 100%);
  content: "";
  display: block;
  height: 1px;
  width: 100%;
}
/*
  WRAPPER
  Needed so footer is at bottom if page is less than 100 % height
*/
#wrapper {
  min-height: 100%;
  position: relative;
}
/*
  HEADER
*/
header {
  background: transparent url(/theme/images/banner.svg) repeat-x bottom;
  padding-bottom: 30px;
  text-align: right;
}
header h1 {
  display: inline-block;
  font-family: 'Special Elite';
  font-size: 2.5em;
  font-weight: 400;
  margin: 1em 1em 0 0;
}
header h2 {
  font-size: 1.2em;
  font-weight: 300;
  margin: 1em 4em 0 0;
}
header a:link,
header a:visited,
header a:hover,
header a:active {
  color: #900;
}

/*
  NAVIGATION
*/
nav {
  font-size: 1.2em;
  margin: 0 auto;
  text-align: center;
  width: 95%;
}
nav ul {
  display: inline-block;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
nav li {
  display: inline;
  margin: 0 1.3em;
}

/*
  MAIN BODY
*/
main {
  margin: 0 auto;
  max-width: 800px;
  padding-bottom: 80px;
  width: 95%;
}
main h1 {
  margin: 1.5em 0 1em;
}
main h1,
main h2 {
  line-height: 1.5em;
}
.noborder,
.optborder {
  padding-left: 1em;
}
.optborder {
  border-left: 1px solid #ccc;
}
.post-title {} /* Blog head area */
.post-list {} /* List of posts */
.post-title h1,
.post-title h4,
.post-list h2,
.post-list h4 {
  font-weight: 400;
  font-family: 'Special Elite';
}
.post-title h1 {
  line-height: 1.5;
  margin: 1em 0 .5em 0;
}
.post-title h4 {
  margin: 0 0 1.5em 1.5em;
}
.post-list h2 {
  margin: 1.5em 0 .2em 0;
}
.post-list h4 {
  margin: 0 0 0 1em;
}
.post-list ul {
  display: inline-block;
  list-style: none;
  margin: 0 auto;
  text-align: center;
}
.post-list li {
  display: inline;
  margin: 0 auto;
}
.post-list img {
  display: block;
  margin: .5em auto;
  max-width: 200px;
}
.codehilite {
  font-family: 'Ubuntu Mono';
  font-weight: normal;
  line-height: 1.3em;
  margin: 0;
  padding-left: 10px;
}
.codehilite pre {
  background: #fff;
  border-color: #ccc #ccc #ccc #900;
  border-style: solid;
  border-width: 1px 1px 1px 2px;
  font-family: 'Ubuntu Mono';
  margin: 0;
  max-width: 100%;
  overflow: auto;
  padding-left: 10px;
}
code { /* Inline code */
  font-family: 'Ubuntu Mono';
  font-weight: normal;
}
.paginator { /* On blog-index for next/previous */
  text-align: center;
  padding: 2em 0;
}
.left {
  float: left;
}
.right {
  float: right;
}
.comsection { /* Comments section */
  margin-top: 5em;
}

/*
  RESEARCH
  The research section has some special formatting
*/
.research {}
.research ul {
  list-style: none;
}
.research li {
  margin-bottom: 1.5em;
}
.research h2 {
  margin-top: 2em;
}
.research h3,
.research h4 {
  font-weight: 700;
  margin: 0;
  padding: 0;
}
.research h3 {
  color: #900;
}
.research p {
  margin: 0;
  padding: 0;
}

/*
  Contact form
*/
.mail-me {
  line-height: 1.6;
  margin: 0 2em 0 0;
  max-width: 500px;
  padding: 15px;
}
.mail-me h3 {
  font-weight: 700;
  margin: 10px 0 0;
  padding: 0 0 0 10px;
}
.mail-me input[type="text"],
.mail-me textarea {
  border: 1px solid #090;
  border-radius: 4px;
  height: 20px;
  margin: 2px 6px 16px 0;
  outline: 0 none;
  padding: 10px;
  width: 100%;
}
.mail-me input[type="text"]:focus,
.mail-me textarea:focus {
  box-shadow: 0 0 4px #090;
}
.mail-me textarea {
  height: 100px;
}
.error_strings { /* Error by sending message; class from gen_validatorv4.js */
  color: #900;
}

.mail-me #message{
  position:absolute;
  left:-2000px;
  width: 5px;
}

/*
  FOOTER
*/
footer {
  bottom: 0;
  height: 55px;
  position: absolute;
  text-align: center;
  width: 100%;
}
footer p {
  font-size: .8em;
  font-weight: 300;
  margin: 0;
}
footer ul {
  display: inline-block;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
footer li {
  display: inline;
  margin: 0 1.5em;
}
footer p a:link,
footer p a:hover,
footer p a:visited,
footer p a:active {
  color: #000;
  font-weight: 400;
}

/*
  Buttons
*/
.button,
.tightbutton {
  background: #eee;
  border: 2px solid #900;
  border-radius: 4px;
  color: #009;
  display: inline-block;
  font-weight: 700;
  padding: 10px 25px;
}
.tightbutton {
  padding: 2px 4px;
}
.button:hover,
.button:active,
.tightbutton:hover,
.tightbutton:active{
  color: #090;
  transition: .5s;
  box-shadow: 0 0 4px #900; 
}

/*
  RESPONSIVE DESIGN
*/

/*
  Screens less than 843px
  Main is 95% of page-width, to a maximum of 800px. If the width is 800px, the
  total width is 800px/0.95 ~ 842.1px. That is when we get rid of the left
  border-line, as the content fills the whole page width.
*/
@media all and (max-width: 842px) {
  .noborder,
  .optborder {
    border-left: 0;
    padding-left: 0;
  }
}

/*
  Screens less than 480px
  If width is smaller than 480px, we have to decrease title and foot
  font-sizes, and some of the margin/padding, in order to fit the whole title,
  nav-bar, link-bar, and bottom-comment on one line each.
*/
@media all and (max-width: 479px) {
  header h1 {
    font-size: 2.2em;
  }
  nav li,
  footer li {
    margin: 0 .5em;
  }
  footer p {
    font-size: .7em;
  }
}

/*
  Screens less than 360px
  Further decrease the font-size of the title, to fit width. Note, 320px is set
  to min-width in html (top of main.css), if width is <320px a horizontal
  scroll-bar will appear.
*/
@media all and (max-width: 359px) {
  header h1 {
    font-size: 2em;
  }
}

/*
  Print settings
  Just a few.
*/
@media print {
  body {
    background: #fff;
    font-size: .9em;
    line-height: 1.1em;
  }
  .noborder,
  .optborder {
    border-left: 0;
    padding-left: 0;
  }
  footer,
  nav,
  .comsection,
  .paginator,
  .button {
    display: none;
  }
}