/*
 * LUKUTEC style sheet
 *
 * Author: Martin Morgenstern
 */

/* @group General rules */

html {
  font-family: "Source Sans Pro", "Helvetica Neue", sans-serif;
  font-size: 95%;
}

body {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAL0lEQVQIW2NUUlL6z4AElJSUGBiRBUEC9+7dQwjCBECawCqRBcCCLi4u/0FakAEAsDoTZW/5HOIAAAAASUVORK5CYII=") repeat;
  /* Advanced checkbox hack part I */
  -webkit-animation: bugfix infinite 1s;
}

/* Advanced checkbox hack part II */
@-webkit-keyframes bugfix {
  from {padding:0;}
  to {padding:0;}
}

*, *:before, *:after {
  box-sizing: border-box;
}

.cf:after {
  clear: both;
  content: "";
  display: table;
}

/* @end */

/* @group Responsive two column layout */

.page-wrap, .main-wrap, #top, #bottom {
  position: relative;
}

.page-wrap {
  background-color: #fff;
  margin: 0 auto;
  max-width: 900px;
  width: 96%;
  padding-bottom: .4em;
}

.content-wrap {
  padding: .1em 1em;
  min-height: 400px;
}

/* WARNING: min-width here must be in sync with responsive navigation below */
@media screen and (min-width: 801px) {
  .sidebar {
    position: absolute;
    left: 0;
    top: 0;
    width: 12em;
  }

  .page-wrap {
    border-radius: .4em;
    margin: 1em auto;
    padding: 1em;
  }

  .main-wrap {
    border: 1px solid #ddd;
    border-radius: .4em;
    background-color: #ccd9ca;
  }

  .content-wrap {
    background-color: white;
    border-left: 1px solid #ddd;
    border-radius: .4em;
    margin-left: 12em;
    padding-bottom: 1em;
  }
}

/* @end */

/* @group Misc */

hr {
    border: 0;
    height: 1px;
    background: #eee;
}

/* @end */

/* @group Header */

#top img {
  margin: 1em;
}

/* @end */

/* @group Footer */

#bottom {
  color: #999;
  font-size: .9em;
  margin: 1em 1em .2em 0;
  text-align: right;
}

/* @end */

/* @group Contact box */

.contact-box {
  color: #333;
  display: none;
  float: right;
  font-size: .9em;
  margin: 0 .2em 1em 0;
  padding: .3em;
}

.contact-box label {
  text-align: right;
}

.contact label {
  display: block;
  float: left;
  margin-right: 0.5em;
  width: 4em;
}

.contact span {
  display: block;
  float: left;
}

@media screen and (min-width: 801px) {
  .contact-box {
    display: block;
  }
}

/* @end */

/* @group Navigation rules */

.main-nav {
  border: 1px solid #aaa;
  background-color: #ccd9ca;
  margin: 0 1em;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav li {
  margin: 0;
  padding: 0;
}

.main-nav a:link, .main-nav a:visited {
  color: #285e1f;
  display: block;
  text-decoration: none;
}

.main-nav a:hover {
  color: #3c8d2f;
  background-color: white;
}

.nav-first-level li {
  border-bottom: 1px solid #aaa;
}

.nav-first-level a {
  padding: .4em;
}

.nav-second-level li {
  border-bottom: 1px dotted #aaa;
}

.nav-second-level a {
  padding: .4em 1.5em;
}

/* Exceptional overrides */
.last {
  border: 0 !important;
}

.nav-category {
  color: #555;
  padding: 0.4em !important;
}

.maatz {
  border: 2px solid #c22955;
  border-left: 0;
  border-right: 0;
}

.mtz {
  color: #c22955;
}

/* @end */

/* @group Responsive navigation rules */

#show-navi-input {
  display: none;
}

#show-navi-label {
  color: #285e1f;
  cursor: pointer;
  display: block;
  padding: .4em;
}

#show-navi-input:checked ~ #menu {
  border-top: 1px solid #aaa;
  display: block;
}

#menu {
  display: none;
}

@media screen and (min-width: 801px) {
  .main-nav {
    border: 0;
    width: 11em;
    margin: .5em;
  }

  #menu {
    border: 0 !important;
    display: block;
  }

  #show-navi-label {
    display: none;
  }
}

/* @end */

/* @group Text styles */

h1 {
  font-size: 1.58em;
}

h2 {
  font-size: 1.32em;
}

h3 {
  font-size: 1.18em;
}

@media screen and (max-width: 800px) {
  h1, h2, h3, .small-center {
    text-align: center;
  }

  .welcome-text {
    text-align: justify;
  }

  ul {
    padding-left: 1.5em;
  }
}

.signature {
  font-style: italic;
}

em {
  color: #3c8d2f;
  font-style: normal;
}

a:link, a:visited {
  color: #3c8d2f;
}

a:hover, a:active {
  color: gray;
}

/* @end */

/* @group Image styles */

img {
  height: auto;
  max-width: 90%;
}

.img-r, .img-l {
  display: block;
  margin: 1em auto;
}

#portrait {
  border-radius: .4em;
}

@media screen and (min-width: 801px) {
  .img-space {
    margin-top: 1em !important;
  }

  .img-r {
    margin: 0 0 0 1em;
    float: right;
  }

  .img-l {
    margin: 0 1em 0 0;
    float: left;
  }

  #portrait {
    margin: 1.5em 1em 1.5em 15%;
  }
}

/* @end */

/* @group Contact form */

.contact-form label,
.contact-form input,
.contact-form textarea {
  margin: .1em 0;
  width: 100%;
  max-width: 30em;
}

.contact-form button {
  margin: .1em 0;
}

.contact-form label {
  display: block;
}

.contact-form textarea {
  height: 10em;
}

/* @end */