/**
  CONFIGURATION
**/

// General
@general-google-font: Open Sans;
@general-link-color: #00c957;
@general-link-text-decoration: none;
@general-link-hover-color: #00843d;
@general-link-hover-text-decoration: none;

// Head Bar
@head-bar: "no";
@head-bar-google-font: Open Sans;
@head-bar-background-color: #00843e;
@head-bar-font-color: #FFFFFF;
@head-bar-font-size: 12px;

// Header
@header-background-color: #FFFFFF;

// Main Menu
@main-menu-google-font: Open Sans;
@main-menu-background-color: #efefef;
@main-menu-font-color: #565656;
@main-menu-active-background-color: #ffffff;
@main-menu-active-font-color: #646363;
@main-menu-height: 50px;
@main-menu-padding-top: 15px;
@main-menu-shadow: none;
@main-menu-background-image: url();

// Main Menu Sub
@main-menu-sub-background-color: fade(#ffb101,100%);
@main-menu-sub-hover-background-color: fade(#ea6a14,100%);

// Main Menu on narrow screens
@main-menu-narrow-headline: "Hauptmenü";

// Breadcrumb
@breadcrumb: "no";
@breadcrumb-background-color: #646363;
@breadcrumb-height: 20px;
@breadcrumb-font-size: 12px;
@breadcrumb-separator: " - ";
@breadcrumb-separator-color: #ffffff;
@breadcrumb-link-color: #ffffff;

// Content
@content-background-color: #FFFFFF;
@content-background-image: url();
@content-font-color: #000000;
@content-font-size: 15px;
@content-list-style-type: square;

// Footer
@footer-font-color: #000000;
@footer-font-size: 13px;
@footer-list-style-type: square;

// Article date (single article view)
@article-single-date-font-color: #FFFFFF;
@article-single-date-background-color: #FF0000;
@article-single-date-shadow: none;

// Article date (multiple article view)
@article-multiple-date-font-color: #FFFFFF;
@article-multiple-date-background-color: #000000;
@article-multiple-date-shadow: none;

// Blog button
@blog-button-background-color: #000000;
@blog-button-font-color: #FFFFFF;
@blog-button-hover-background-color: lighten(#000000,20);
@blog-button-hover-font-color: #FFFFFF;

/**
  END OF CONFIGURATION.
  DO NOT EDIT ANYTHING BELOW THIS LINE.
**/

@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;

body {
font-family: 'Open Sans', sans-serif;
  a {
    color: @general-link-color;
    text-decoration: @general-link-text-decoration;
    &:hover {
      color: @general-link-hover-color;
      text-decoration: @general-link-hover-text-decoration;
    }
  }
}

.head-bar {
  & when (@head-bar = "no"){ display:none; }
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  padding: 5px 0;
  background-color: @head-bar-background-color;
  color: @head-bar-font-color;
  font-size: @head-bar-font-size;
  a, a:focus, a:active, a:hover, a:visited {
    color: @head-bar-font-color;
    text-decoration: none;
  }
  .left {
    float: left;
    display: none;
    @media (min-width: (@screen-sm-min)) {
      display: block;
    }
  }
  .right {
    float: right;
  }
}

.header {
  background-color: @header-background-color;
}

.main-menu {
  font-family: 'Open Sans', sans-serif;
  padding-top: 15px;
  background-color: @main-menu-background-color;
  a, a:focus, a:active, a:hover, a:visited {
    color: @main-menu-font-color;
    text-decoration: none;
  }
  .container > ul {
    margin: 0 0 15px 0;
  }
  ul {
    padding: 0;
    list-style: none;
    ul {
      padding-left: 20px;
    }
  }
  h1 {
    width: 100%;
    height: 18px;
    font-size: 120%;
    margin: 0 0 15px 0;
    padding-right: 25px;
    color: @main-menu-font-color;
    position: relative;
    cursor: pointer;
    &:after {
      content: @main-menu-narrow-headline;
    }
    .icon-bar {
      display: block;
      position: absolute;
      right:0;
      height: 2px;
      width: 20px;
      background-color: @main-menu-font-color;
      &:nth-child(1){top:1px}
      &:nth-child(2){top:8px}
      &:nth-child(3){top:15px}
    }
  }
  @media (min-width: (@screen-md-min)) {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 110%;
    font-weight: 600;
    box-shadow: @main-menu-shadow;
    height: @main-menu-height;
    background-image: @main-menu-background-image;
    background-position: 0 @main-menu-height;
    .container {
      & > ul {
        margin: 0;
        & > li {
          display: inline-block;
          position: relative;
          &:hover {
            background-color: @main-menu-active-background-color;
            & > a {
              color: @main-menu-active-font-color;
              background-position: 0 0;
            }
            & > ul {
              display: block;
            }
          }
          &.active {
            background-color: @main-menu-active-background-color;
            & > a {
              color: @main-menu-active-font-color;
              background-position: 0 0;
            }
          }
          & > a {
            display: block;
            padding: @main-menu-padding-top 15px 0 15px;
            height: @main-menu-height;
            background-image: @main-menu-background-image;
            background-position: 0 @main-menu-height;
          }
          & > ul {
            z-index: 200;
            display: none;
            box-shadow: @main-menu-shadow;
            position: absolute;
            left: 0;
            top: 100%;
            background-color: @main-menu-sub-background-color;
            padding: 0;
            text-transform: none;
            min-width: 100%;
            li {
              white-space: nowrap;
              position: relative;
              a {
                display: block;
                padding: 5px 15px;
              }
              &:hover {
                background-color: @main-menu-sub-hover-background-color;
                & > a {
                  color: @main-menu-active-font-color;
                }
                & > ul {
                  display: block;
                }
              }
              & ul {
                display: none;
                padding: 0;
                position: absolute;
                left: 100%;
                top: 0;
                background-color: @main-menu-sub-background-color;
                li {
                  position: relative;
                  a {
                    display: block;
                  }
                  & > ul {
                    display: block;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.content {
  background-color: @content-background-color;
  background-image: @content-background-image;
  background-attachment: fixed;
  min-height: 100vh;
  color: @content-font-color;
  font-size: @content-font-size;
  ul {
    list-style-type: @content-list-style-type;
  }
}

.footer {
  color: @footer-font-color;
  font-size: @footer-font-size;
  ul {
    list-style-type: @footer-list-style-type;
  }
}

.breadcrumb {
  & when (@breadcrumb = "no"){ display:none; }
  @media (max-width: (@screen-md-min - 1px)) { display:none; } // In der mobilen Ansicht, Breadcrumb ausblenden
  background: @breadcrumb-background-color;
  margin: 0 0 0 0;
  padding: 0;
  border-radius: 0;
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    li {
      &:before {
        content: @breadcrumb-separator;
        color: @breadcrumb-separator-color;
        margin-right: 5px;
      }
      @media (min-width: (@screen-md-min)) {
        display: inline-block;
        line-height: @breadcrumb-height;
        margin-left: 5px;
        &:first-child {
          margin-left: 0;
          &:before {
            content: '';
            margin-right: 0;
          }
        }
      }
      a {
        color: @breadcrumb-link-color;
        font-size: @breadcrumb-font-size;
      }
    }
  }
}

.box {
  background-color: white;
  color: black;
  padding: 30px 10px 10px 10px;
  margin: 15px 0;
  position: relative;
  h1 {
    margin: 0 0 10px 0;
    font-size: 180%;
    font-weight: bold;
  }
  .author {
    font-size: 120%;
    margin-bottom: 30px;
  }
  .main-text {
    color: rgb(120,120,120);
  }
}

.date {
  background-color: @article-multiple-date-background-color;
  color: @article-multiple-date-font-color;
  box-shadow: @article-multiple-date-shadow;
  text-align: center;
  font-size: 160%;
  padding: 20px 0;
  line-height: 1.2;
  font-weight: bold;
  width: 80px;
  margin: 0 0 15px 0;
  &.date-red {
    background-color: @article-single-date-background-color;
    box-shadow: @article-single-date-shadow;
    color: @article-single-date-font-color
  }
  @media (min-width: (@screen-md-min)) {
    margin: 0 auto;
    width: 75%;
  }
}

.button, .button:hover, .button:active, .button:focus {
  display: inline-block;
  background-color: @blog-button-background-color;
  color: @blog-button-font-color;
  padding: 5px 30px;
  text-align: center;
  font-size: 160%;
  text-decoration: none;
  font-weight: bold;
  &:hover {
    background-color: @blog-button-hover-background-color;
    color: @blog-button-hover-font-color;
  }
}

ul.sidebar {
  list-style-type: none;
  padding: 0;
  .widget_search {
    label {
      display: none;
    }
    input[type=text]{
      width: 100%;
      border: 1px solid rgb(222,222,222);
      margin-bottom: 15px;
      font-size: 120%;
      padding: 8px;
    }
    input[type=submit]{
      text-transform: lowercase;
      background-color: @blog-button-background-color;
      color: @blog-button-font-color;
      &:hover {
        background-color: @blog-button-hover-background-color;
        color: @blog-button-hover-font-color;
      }
      border: none;
      padding: 5px 30px;
      text-align: center;
      font-size: 160%;
      text-decoration: none;
      font-weight: bold;
    }
  }
  li {
    h2 {
      font-size: 110%;
      font-weight:bold;
      color: rgb(30,30,30);
      margin: 30px 0 25px 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
      li {
        padding: 5px 0;
        border-top: 1px solid rgb(222,222,222);
        &:last-child {
          border-bottom: 1px solid rgb(222,222,222);
        }
        a, a:hover {
          color: rgb(30,30,30);
          text-decoration: none;
        }
      }
    }
  }

}

.icon-balloon {
  display: inline-block;
  vertical-align: middle;
  width: 45px;
  height: 31px;
  background-image: url("icons.png");
}

.icon-categories {
  display: inline-block;
  vertical-align: middle;
  width: 28px;
  height: 18px;
  background: url("icons.png") -45px -7px;
  margin-right: 12px;
}

.icon-tags {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  margin-right: 16px;
  height: 26px;
  background: url("icons.png") -73px -3px;
}

.categories-and-tags {
  ul {
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style-type: none;
    li {
      display: inline-block;
    }
  }
  a, a:hover {
    color: black;
    text-decoration: none;
    margin-right: 10px;
  }
}

hr {
  border-color: rgb(222,222,222);
}

.comment-respond {
  textarea {
    resize: none;
    width: 100%;
    border: 1px solid rgb(222,222,222);
  }
  input[type=submit]{
    background-color: @blog-button-background-color;
    color: @blog-button-font-color;
    &:hover {
      background-color: @blog-button-hover-background-color;
      color: @blog-button-hover-font-color;
    }
    border: none;
    padding: 5px 10px;
    text-align: center;
    font-size: 120%;
    text-decoration: none;
    font-weight: bold;
    @media (min-width: (@screen-md-min)) {
      font-size: 160%;
    }
  }
}

.amount-comments {
  position: absolute;
  top: 0;
  right: 20px;
  @media (min-width: (@screen-md-min)) {
    position: static;
    margin-top: 15px;
    text-align: center
  }

}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float:right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%; /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}