header
{
    position: fixed;
    margin: 0; z-index: 2;
    padding: 0;
}

header h1
{
    width: 7.6em; padding : 0; font-family: Quadranta; font-size: 2em; font-weight: bold; font-weight: bold;
    text-align: center;
}

header ul
{
    padding: 0;
    list-style: none;
}

header ul li
{
    display: inline-block;
    margin: 0;
    padding: 0 2em 0 2em;
    color: #E5E5E5;
}

header ul li a
{
    color: #A532ED;
}


header.folded
{
    top: 0; left: 0;
    width: 100%; height: 7em;
    background-color: #E1E1E1;
    /*border: solid 1px #000;*/
}

header.folded h1
{
    position: absolute; top: 1.75em; left: calc(5% + 5em); margin: 0;
    color: #A532ED;
}

header.folded h1 a
{
    color: #A532ED;
    text-decoration: none;
}

header.folded ul
{
    position: absolute; top: 4.25em; margin: 0 0 0 calc(5% + 30em);
}

header.folded button
{
    position: absolute; top: 0px; right: calc(0px + 5%); margin: 1.5em 2em 0 0;
}

header.unfolded
{
    /*position: absolute;*/
    top: 5%; left: 5%;
    width: 90%; /*height: 90%;*/

    /*
    background-image: url("/resources/img/px000.png"), url("/resources/img/px000.png"), url("/resources/img/px000.png"), url("/resources/img/px000.png"), url("/resources/img/px000.png");
    */

    background-position: top left, calc(7.6em + 20em)/*24em*/ 0px, top left, bottom left, top right;
    background-size: 9em 1px, 100% 1px, 1px, 1px, 1px;
    background-repeat: no-repeat, no-repeat, repeat-y, repeat-x, repeat-y;
    /*font-size: 1em;*/
}

header.unfolded h1
{
    position: absolute; top: calc(.75em - 5%); left: 5em; margin: 0;
    color: #A532ED;
}

header.unfolded h1 a
{
    color: #A532ED;
    text-decoration: none;
}

header.unfolded ul
{
    position: inherit; margin: 2em 0 0 30em;
}

header.unfolded ul li a {text-decoration: none;}

header.unfolded button
{
    position: absolute; top: 0px; right: 0px; margin: 1.5em 2em 0 0;
}