/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "compass/reset";
@import "compass/css3/box-sizing";
@import "compass/utilities/general/clearfix";
@import "colors.scss";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700|Vollkorn);

* {
  @include box-sizing(border-box);
}

$pad: 20px;
$fSansSerif: "Noto Sans", Verdana, sans-serif;
$fSerif: Vollkorn, serif;


body {
  background-color: $cMainBG;
  color: $cMainText;
  font-family: $fSansSerif;
  display: flex;
  flex-wrap: wrap;
}

.grid {
  margin: $pad 0 $pad $pad;

  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pad;
}

.col-twelfth { width: 8.33% }
.col-sixth { width: 16.66%; }
.col-quarter { width: 25%; }
.col-third { width: 33.33%; }
.col-fivetwelfth { width: 41.66%; }
.col-half { width: 50%; }
.col-seventwelfth { width: 58.33%; }
.col-twothird { width: 66.66%; }
.col-threequarter { width: 75%; }
.col-fivesixth { width: 83.33%; }
.col-eleventwelfth { width: 91.66%; }
.col-full { width: 100%; }


#sidebar {
  margin-left: 20px;
  width: 200px;
}

#sidebar-rechts {
  width: 200px;
}

@import "content";

@import "box";

#title-bar {
  margin: 20px;
  
  background: radial_gradient(transparent, transparentize($cMainBG, .2) 60%, $cMainBG 70%) no-repeat center, url("../bg-navy.png") no-repeat center;
  background-size: 853px, auto;
  flex-grow: 1;
  flex-basis: 100%;

  a.logo {
    text-align: center;
    font-family: serif;
    font-size: xx-large;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #111;
    display: block;
    text-decoration: none;
    color: $cMainText;

    img {
      height: 70px;
      vertical-align: middle;
      background: radial_gradient($cMainBG, transparent);
    }
  }

  .titles {
    display: flex;
    justify-content: space-between;

    .left {
      padding-left: 5px;
      padding-right: 5px;
      border-bottom: 20px solid $cMenuOutline;
      border-right: 15px solid rgba(0,0,0,0);
      display: inline-block;
      height: 0;
      line-height: 22px;

      font-size: smaller;

      //text-shadow: 1px 1px 2px #111;
      color: $cBoxHeading;
    }

    .right {
      padding-left: 5px;
      padding-right: 5px;
      border-bottom: 20px solid $cMenuOutline;
      border-left: 15px solid rgba(0,0,0,0);
      display: inline-block;
      height: 0;
      line-height: 22px;

      /*font-family: $fSerif;
      font-variant: small-caps;*/
      font-size: smaller;

      //text-shadow: 1px 1px 2px #111;
      color: $cBoxHeading;
      float: right;
    }

    a, a:visited, a:active {
      color: $cMainBG;
    }
  }


  .body {
    display: block;
  }

  .top-menu {
    display: flex;
    width: 100%;

    li {
      flex-grow: 1;
      padding: 5px;
      padding-top: 7px;
      text-align: center;
      width: 10px;
      transition: all .3s ease;
      font-family: $fSerif;
      font-variant: small-caps;
      text-shadow: 1px 1px 2px #111;

      a {
        text-decoration: none;
        color: $cMainText;
        display: block;
      }

      &:hover {
        background-color: $cMenuHover;
      }
    }
  }
}


.menu {
  a {
    text-decoration: none;
    font-style: italic;
    font-size: smaller;
    color: $cMainText;
    display: block;
  }

  li {
    padding: 7px 0 5px 5px;
    transition: all .3s ease;

    &:before {
      content: "\f054";
      font-family: FontAwesome, serif;
      float: left;      width: 0;
      font-size: smaller;
      transition: all .3s cubic-bezier(.68,-0.55,.27,1.55);
      color: transparent;
    }

    &:hover {
      background-color: $cMenuHover;

      &:before {
        color: inherit;
        width: 12px;
      }
    }

    &.title {
      font-weight: bold;
    }
  }
}

#content {
  margin-left: $pad;
  margin-right: $pad;
  flex-grow: 1;

  .content-header {
    text-align: center;
    border-bottom: 2px solid $cMenuOutline;

    .pageTitle {
      text-align: center;
      margin: 0 auto;
      border-bottom: 30px solid $cMenuOutline;
      border-right: 20px solid rgba(0, 0, 0, 0);
      border-left: 20px solid rgba(0, 0, 0, 0);
      display: inline-block;
      height: 0;
      line-height: 32px;

      font-family: $fSerif;
      font-variant: small-caps;

      text-shadow: 1px 1px 2px #111;
      color: $cBoxHeading;
    }
  }

  .content-footer {
    text-align: center;
    border-top: 1px solid $cMenuOutline;
    clear: both;

    .copy {
      text-align: center;
      border-top: 15px solid $cMenuOutline;
      border-right: 10px solid rgba(0, 0, 0, 0);
      border-left: 10px solid rgba(0, 0, 0, 0);
      display: inline-block;
      height: 0;
      line-height: 0;
      margin: 0; padding: 0;
      font-size: x-small;
      color: $cBoxHeading;

      div {
        position: relative;
        top: -14px;
      }
    }
  }

  .content-body {
    background-color: $cContentBG;
    padding: $pad;
    @include clearfix;
  }
}