#kop
{
   background-color: #fff;
   font-family: source;
   padding-left: 15.5em;
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 7.5em;
   z-index: 1;
}

#kop > h4
{
   color: #f00;
   font-size: 1.5em;
   font-weight: normal;
   margin: .2em 0;
}

#kop > h4:before
{
   content: "{";
   color: #f00;
   font-family: kbm-symbol;
   font-size: 1.5em;
   font-weight: bold;
   line-height: 0;
   position: relative;
   top: .075em;
   right: .25em;
}

#kop > div
{
   font-weight: bold;
   margin-left: -1.5%;
   margin-bottom: .6%;
   width: 90%;
}

#kop > div > span
{
   background-color: #fff;
   border: .25em solid #fd0;
   border-right: none;
   color: #00b223;
   display: inline-block;
/* these two provide height - needed for scaling down */
   line-height: 1;
   padding-top: .1em;
   padding: .25em 0 .05em;
   text-align: center;
   text-transform: uppercase;
   width: 1.7em;
}

#kop > div > span:last-child
{
   border-right: .25em solid #fd0;
}

/* logo rules are in separate logo.css since the logo appears on itself in index.php and organisatie.php */

#menu
{
   position:fixed;
   left: 0;
   top: 0;
   width: 13.75em;
   z-index: 1;
}

#menu-switch
{
   background-color: #f00;
   border-radius: 0 .5em .5em 0;
   display: none;
   position: absolute;
   right: -3em;
   width: 3em;
   height: 2.75em;
}

#items
{
   font-family: source;
   font-size: .8em;
   margin: 0;
   margin-top: 10.5em;
   margin-left: .5em;
   padding: 0;
   white-space: nowrap;
}

#items > li:not(.socmed):not(#organisatie)
{
   background-color: #00b223;
   color: #fff;
   font-weight: bold;
   letter-spacing: .06em;
   list-style-type: none;
   margin-bottom: .5em;
   text-align: right;
}

#items > #current-item
{
   background-color: #f00 !important;
}

/* padding is applied to the As and the current LI rather than all LIs to allow
 * the A to stretch to the top of the LI to maximize the pointer sensitive area
 */
#items > li:not(.socmed):not(#organisatie) > a
{
   color: #fff;
   display: block;
   padding: .5em .75em;
   -webkit-transition: padding-right 500ms ease;
           transition: padding-right 500ms ease;
}

#items > li:not(.socmed):not(#organisatie):hover > a
{
   padding-right: 1em;
}

#current-item
{
   cursor: default;
   padding: .5em 2em !important;
}

#organisatie
{
   list-style-type: none;
   margin-top: 2em;
}

#organisatie > a
{
   color: #09f;
   display: block;
   font: bold 1.5em dolly;
   text-align: center;
   text-transform: capitalize;
}

#organisatie img
{
   display: block;
   margin: 0 auto;
   margin-bottom: .5em;
}

#organisatie span
{
   color: #f92179;
}

@media screen and (orientation: landscape)
{
/* wide screen, long transition time */
   #menu,
   #intro,
   #content
   {
      -webkit-transition: left 500ms ease-out;
              transition: left 500ms ease-out;
   }

   #menu-switch
   {
      -webkit-transition: right 500ms ease-out;
              transition: right 500ms ease-out;
   }
}

@media screen and (orientation: portrait)
{
/* narrow screen, short transition time */
   #menu,
   #intro,
   #content
   {
      -webkit-transition: left 250ms ease-out;
              transition: left 250ms ease-out;
   }

   #menu-switch
   {
      -webkit-transition: right 250ms ease-out;
              transition: right 250ms ease-out;
   }
}

   /* sliding menu  */
@media screen and (max-width: 767px)
{
   #kop > h4,
   #menu > .logo,
   #organisatie img
   {
      display: none !important;
   }

   #kop
   {
      background-attachment: fixed;
      background-image: url("../pix/decoration.png");
      background-position: 0 0;
      background-repeat: repeat-x;
      background-size: calc(100% / 16);
      padding-left: 0;
   }

   #kop > div
   {
      position: absolute;
   }

   #kop > div > span
   {
      padding: 1.1% 0 .5%;
   /* 'kinderboekenmarkt' has 17 letters */
      width: calc(100% / 17);
   }

   #menu
   {
      padding: 0;
      width: 100%;
      height: 100%;
   }

   #menu.closed          { left: -100%; }
   #menu.open            { left:    0; }
   #menu.open + #intro,
   #menu.open ~ #content { left: 100%; }

   #menu-switch
   {
      display: table;
   }

   #menu.open > #menu-switch
   {
      border-radius: .5em 0 0 .5em;
      right: 0;
   }

   #menu-switch > img
   {
      display: table-cell;
      vertical-align: middle;
      width: 90%;
      height: 125%;
   }

   #menu.open > #menu-switch > img
   {
      margin-left: .25em;
   }

   #items
   {
      margin: 0;
      position: absolute;
   }

   #items > li
   {
      width: 100%;
   }

   #organisatie
   {
      margin-top: 1.5em;      /* this pushes down both #organisatie and .socmed items */
   }

   #organisatie > a
   {
      display: inline;
      float: right;
   }
}

/* on a page with a hidden menu, #kop is stripped to 'kinderboekenmarkt'
 * #menu-switch, #items and #content have position absolute and are
 * pushed down to #kop's height
 */
   /* #kop height and font-size */
@media screen and (max-width: 767px)
{
   #kop
   {
      height: 12.5%;
   }

   #kop > div
   {
      left: 5%;
      top: 35%;
   }

   #items,
   #content,
   #menu-switch
   {
      margin-top: 0;
      top: 12.5%;       /* equal to #kop height */
   }
}

@media screen and (min-width: 720px) and (max-width: 767px) and (orientation: portrait)
{
   #kop
   {
      background-size: calc(100% / 16);
      height: 7.5%;
   }

   #items,
   #content,
   #menu-switch
   {
      top: 7.5%;
   }
}

@media screen and (min-width: 480px) and (max-width: 719px) and (orientation: portrait)
{
   #kop
   {
      height: 10%;
   }

   #items,
   #content,
   #menu-switch
   {
      top: 10%;
   }
}

@media screen and (orientation: landscape)
{
   #kop > div
   {
      left: 15%;
      width: 70%;
   }
}

@media screen and (min-height: 1280px) and (max-width: 767px) and (orientation: portrait)
{
   #kop
   {
      height: 10%;
   }

   #items,
   #content,
   #menu-switch
   {
      top: 10%;
   }
}

   /* the UL containing the menu items + .socmed and #organisatie */
@media screen and (max-width: 767px)
{
   #items
   {
      left: 1em;
      width: 75%;
   }
}

@media screen and (min-width: 720px) and (max-width: 767px) and (orientation: portrait)
{
   #items
   {
      left: 2em;
   }
}

@media screen and (min-width: 480px) and (max-width: 719px) and (orientation: portrait)
{
   #items
   {
      left: 2em;
      width: 70%;
   }
}

@media screen and (min-width: 600px) and (max-width: 767px) and (orientation: portrait)
{
   #items
   {
      left: 9em;
      width: 55%;
   }
}

@media screen and (min-width: 720px) and (max-width: 767px) and (orientation: portrait)
{
   #items
   {
      left: 11em;
   }
}

@media screen and (max-height: 540px) and (orientation: landscape)
{
   #items
   {
      margin-top: 0;
      position: absolute;
      left: .5em;
      top: 1em;
      width: 95%;
      z-index: 1;
   }
}

@media screen and (max-height: 620px) and (orientation: landscape)
{
   #organisatie img
   {
      display: none;
   }
}

   /* menu background image */
@media screen and (min-width: 360px) and (max-width: 720px) and (orientation: portrait)
{
   #menu:before
   {
      background-image: url("../pix/affiches/2013.jpg");
      background-size: contain;
      background-repeat: no-repeat;
      content: "";
      display: block;
      position: absolute;
      -webkit-transform: rotate(-12.5deg);
              transform: rotate(-12.5deg);
   }
}

@media screen and (min-height: 640px) and (orientation: portrait)
{
   #menu:before
   {
      left: 5%;
      top: 80%;
      width: 65%;
      height: calc(1.4125 * 65%);      /* calculate aspect ratio based on width */
   }
}

@media screen and (min-height: 800px) and (orientation: portrait)
{
   #menu:before
   {
      left: 10%;
      top: 70%;
      width: 100%;
      height: calc(1.4125 * 100%);
   }
}

@media screen and (min-height: 1280px) and (max-width: 767px) and (orientation: portrait)
{
   #menu:before
   {
      left: 10%;
      top: 60%;
      width: 100%;
      height: calc(1.4125 * 100%);
   }
}

   /* 2 col menu */
@media screen and (max-height: 430px) and (orientation: landscape)
{
   #kop
   {
      height: 17.5%;
   }

   #items,
   #content,
   #menu-switch
   {
      top: 17.5%;
   }

   #menu:before
   {
      display: none;
   }

   #items
   {
      left: auto;
      right: 15%;
      width: 75%;
   }

   #items > li
   {
      float: left;
   }

   #items > li:nth-child(odd)
   {
      width: calc(62.5% - .5em);
   }

   #items > li:nth-child(even)
   {
      margin-left: 1em;
      width: calc(37.5% - (1em / 2 + .8125em));          /* remaining space - (left margin / 2 + box shadow) */
   }

   #organisatie
   {
      clear: left;
      float: none !important;
      margin-left: 0 !important;
      padding-top: 1em;
      width: 100% !important;
   }
}

   /* 2 col menu #kop corrections */
@media screen and (min-height: 360px) and (max-height: 430px) and (orientation: landscape)
{
   #kop
   {
      height: 20%;
   }

   #items,
   #content,
   #menu-switch
   {
      top: 20%;
   }
}