/** Project: FKD
 *  @framework     YAML v4.02
 */

@media screen {

  /* force vertical scrollbar */
  body {overflow-y: scroll; background: url(../dummy/images/hg_nav-meta.png) top left repeat-x;}

  .ym-wrapper {margin: 0 auto; max-width: 80em; width: auto;}
  .ym-wbox {}

  /* fallback for missing media queries support*/
  body > header, body > nav, body > main, body > footer {min-width: 760px;}

  main {background: rgb(254,243,223); padding-bottom: 2em;}
  
  #header .ym-wbox {padding: 0px 20px 0px 20px;}

  #title {position: absolute; z-index: 1; width: 75px; float: left; padding: 10px 15px; background: #fff;}
  #title h1 { margin: 0.85em 120px  0.25em  0.25em; display: none;}
  #title h1 a {color: rgba(171,129,50,0.75); }
  
  #logo-fkd {display: block; text-align: center;}
  
  #nav-meta {float: right; margin: 0 0 3.5em 0; letter-spacing: 0.05em; padding: 10px 0 0; font-size: 0.8em;}
  #nav-main {float: right; margin: 0 0 1.3em 0; letter-spacing: 0.03em;}

  #banner {clear: both}
  #banner img {width: 100%; height: 100%;}
  
  #content {background: rgb(255,255,255);  padding: 0px 20px 0px 20px; overflow: hidden;}

  #watchword {margin: 0 20px 20px 20px; min-heihgt: 115px; background: rgb(255,255,255); box-shadow: 0px 1px 2px  #cccccc;  margin-bottom: 1.85em;  }
  
  #right .ym-gbox-right {padding-left: 0;}
  
  #margin {margin: 0 0 1.85em 0; background: #fff; }
  
  #footer {background: #c5914d; color: #ffffff; padding: 2.5em 0px 4em 0px;}
  #footer aside, #footer nav {border-right: 1px solid #8e6b28; float: none; padding: 0.25em 3.5em 0 1.75em;display: table-cell; }
  #footer aside {border-left: 1px solid #8e6b28;}

  #nav-social, #nav-search  {
  background: #fff;
      border-bottom-left-radius: 3px;
      border-top-left-radius: 3px;
      box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
      margin: -100px 0 0 0;
      overflow: hidden;
      padding: 8px;
      position: fixed;
      right: 0;
      top: 50%;
      z-index: 100;
  }

  #nav-social:hover, #nav-search:hover {box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);}

  #nav-social ul {list-style: none outside none; margin-bottom: 0;}
  #nav-social li {margin: 0;}
  #nav-social li.social-fb {margin-bottom: 8px;}
  #nav-social a {display: block; width: 24px; height: 24px; }
  
  #nav-search {margin-top: 0;}
  #nav-search .ym-searchform {line-height: 1;}
  #nav-search .ym-searchfield {width: 0; padding: 0; border: 0; visibility: hidden; transition: padding 0s linear 0.25s, visibility 0s linear 0.25s, margin 0.25s ease-in-out, width 0.25s ease-in-out; -webkit-appearance: textfield;}
  #nav-search:hover .ym-searchfield {width: 150px; padding: 0.25em; margin-right: 8px; visibility: visible; transition-delay: 0s }
  #nav-search .ym-searchbutton {width: 24px; height: 24px; border: 0 none; text-shadow: none; border-radius: 0;  background: url(../images/icon_suche.png) top left no-repeat;}

  #nav-path, #nav-lang {padding: 0.5em 0 0.75em 0; letter-spacing: 0.02em;}
  #nav-path ul, #nav-lang ul {float: left; margin: 0;}
  #nav-path {float: left;}
  #nav-lang {text-transform: uppercase; float: right;}
  #nav-lang li {display: inline; margin-left: 0.5em;}
  #nav-lang .active, #nav-lang .notavailable {color: #bbb}
  #nav-path li {display: inline; margin: 0;}
  #nav-path h6 {float: left; font-weight: normal;  font-family: inherit; margin: 0 0.25em 0 0;}
  #nav-path a:after{display: inline-block; padding: 0 0.35em; content:' > '; color: #bbb;}
  
  iframe {border: 0 none;}
 
  #button-area {margin: 0 20px;}
  
  /* skip links styling */
  .ym-skiplinks a.ym-skip:focus,
  .ym-skiplinks a.ym-skip:active {
    color: #fff;
    background: #333;
    border-bottom: 1px #000 solid;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
  }

    /* ------- search form -------- */
  .ym-searchform {
    display: inline;
    line-height: 2;
  }
  .ym-searchform .ym-searchfield {
    background: #fff;
    line-height: 1;
    padding: 0.25em;
/*    width: 12em; */
    border: solid 1px #888;
    border: solid 1px rgba(255, 255, 255, 0.1);
    outline: none;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  .ym-searchform .ym-searchbutton {
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    line-height: 1.25;
    padding: 0.25em;
    border: solid 1px transparent;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    border-radius: .2em;
    background: #5f5f5f;
    background: rgba(0,0,0, 0.2);
  }
  
  .gridelements .ym-gbox {padding: 0 6px;}  
  .gridelements .ym-gbox-left {padding: 0 12px 0 0;}  
  .gridelements .ym-gbox-right {padding: 0 0 0 12px;}  
}

/* für IE 8 */
@media \0screen {
  article img { 
    width: auto; /* for ie 8 */
  }
}

/* reset fallback values in modern browsers */
@media screen and (min-width: 0px) {
  body > header, body > nav, body > main, body > footer {min-width: 0;}
}

@media only screen and (max-width: 1010px) {
  #nav-meta, #nav-main {letter-spacing: 0;}
  #nav-main .ym-hlist ul li {font-size: 1.05em; margin: 0 0 0 0.1em; transition: font-size 0.15s ease-in-out, margin 0.15s ease-in-out;}
  #nav-main .ym-hlist ul li a {padding: 0 0.35em; transition: padding 0.15s ease-in-out;}
}

@media only screen and (max-width: 768px) {

  .linearize-level-1,
  .linearize-level-1 > [class*="ym-g"],
  .linearize-level-1 > [class*="ym-col"] {
    display: block;
    float: none;
    margin: 0 0 2em 0;
    padding: 0;
    width: auto !important;
  }

  #right .ym-gbox-right,
  .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"],
  .linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
    margin: 0 ;
    overflow: hidden;
    padding: 0 20px;
  }

  #title {transition: all 0.15s ease-in-out; padding: 5px 8px; width: 50px;}
  #title h1 {font-size: 307.14286%; transition: font-size 0.15s ease-in-out;}
  #title img {width: 100%;}
  
  #nav-meta .ym-hlist ul li {margin: 0 0 0 0.1em; transition: font-size 0.15s ease-in-out, margin 0.15s ease-in-out;}
  #nav-meta .ym-hlist ul li a {padding: 0 0.35em; transition: padding 0.15s ease-in-out;}
  #nav-main .ym-hlist ul li a {padding: 0 0.25em; transition: padding 0.15s ease-in-out;}
  
  main {margin-bottom: -2em;}

  #watchword {margin: 0; min-heihgt: 100px;}

  #button-area {margin: 0;}

  #margin .link-button {display: inline-block; margin-right: 0;}
  
  #footer aside, #footer nav {display: block; border: 1px solid #8e6b28; border-width: 0 0 1px 0;}
  #footer aside {padding-bottom: 1em}
  #footer nav {padding-top: 1em}
  #footer aside h6, #footer nav h6 {margin-bottom: 0;}
  
}

@media only screen and (max-width: 480px) {

  .linearize-level-2,
  .linearize-level-2 > [class*="ym-g"],
  .linearize-level-2 > [class*="ym-col"] {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    width: auto !important;
  }

  .linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"],
  .linearize-level-2 > [class*="ym-col"] > [class*="ym-cbox"] {
    margin: 0;
/*    overflow: hidden; */
    padding: 0;
  }

  #banner {margin-bottom: 1em;}
  
  #nav-lang {position: absolute; top: 10px; right: 20px;}
  #nav-path {}
  #nav-social {margin: 0px 0 0 0; right: 0; top: 40px;}
  #nav-search {top: 130px;}
  
}