@font-face
{
   font-family: dolly;
/* font-face hack courtesy of <http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax> */
   src: url("./fonts/dolly-roman.eot?"),
        url("./fonts/dolly-roman.ttf") format("truetype");
}

.logo
{
   white-space: nowrap;
}

#menu > .logo
{
   position: absolute;
   left: .5em;
   top: .5em;
}

.logo > span
{
   background-color: #00b223;       /* groen */
   border-top:  .125em solid #fff;
   border-left: .125em solid #fff;
   color: #fff;
   display: inline-block;
   font: 1.125em dolly;
   padding-top: .3em;
   text-align: center;
   text-transform: uppercase;
   width: 1.95em;
   height: 1.95em;
}

.logo > span:nth-child(8),
.logo > span:nth-child(9),
.logo > span:nth-child(10),
.logo > span:nth-child(11)
{
   background-color: #e60005;       /* rood */
}

.logo > span:nth-child(15),
.logo > span:nth-child(16),
.logo > span:nth-child(17),
.logo > span:nth-child(18),
.logo > span:nth-child(19),
.logo > span:nth-child(20)
{
   margin-top: -.125em;
}

.logo > span:nth-child(9),
.logo > span:nth-child(15),
.logo > span:nth-child(17),
.logo > span:nth-child(18),
.logo > span:nth-child(19),
.logo > span:nth-child(20)
{
   height: 1.9em;
}

.logo > span:nth-child(16)
{
   background-color: transparent;
   box-shadow: none;
   color: transparent;
}

@media screen and (max-height: 540px) and (orientation: landscape)
{
   #menu > .logo
   {
      display: none;
   }

   #content
   {
      margin-top: 7.5em;
   }
}