/* USEFUL SHORTCUT CLASSES */

.is-center
{
    text-align: center;
}

.is-left
{
    text-align: left;
}

.center-content
{
    /* Will work on Firefox as well, which has a bad tendency to not center things easily*/
    margin-right: auto;
    margin-left: auto;
    display: block;
}

.center-form
{
    /* Will work on Firefox as well, which has a bad tendency to not center things easily*/
    margin-right: auto;
    margin-left: auto;
    display: block !important;
}

.box
{
    margin-right: auto;
    margin-left: auto;
    display: block;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
    padding: 1em;
}

/* General elements */

a
{
    text-decoration: none;
}

#Header
{
    text-align: center;
    position: fixed;
    left: 0;
    background-color: #00539b;
    box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}

#Header ul

{
    margin: 0;
    padding: 0;
}

.header-item
{
    list-style-type: none;
    display: block;
    width: 100%;
    padding: 1em 0;
    margin: 0;
    transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
}

#Toggle
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;

}
#Toggle:before
{
    content:'\2261'; /* Hamburger icon */
    font-size: xx-large;
}
#ToggleButton
{
    background-color: #00539b;
    padding: 0 0.5em;
    border: none;
    box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
    position: fixed;
    top: 0;

}

/* Mobile menu */
@media screen and (min-width: 0)
{
    #Header
    {
        width: 50%;
        top: 42px;
        display: none;
    }

    .header-heading
    {
        border: none;
    }

    .content-subhead
    {
        text-align: left; /* Justifying this looks like shit on small displays */
    }
    .is-justify
    {
        text-align: justify;
    }
}

@media screen and (min-width: 480px)
{
    #Header
    {
        width: 40%;
    }
}

@media screen and (min-width: 600px)
{
    #Header
    {
        width: 30%;
    }

}

@media screen and (min-width: 900px)
{
    #Toggle
    {
        display: inline-block;
    }
    #Header
    {
        width:20%;
        padding: 0;
    }



}

/* Desktop menu */

@media screen and (min-width: 1200px)
{
    #Header
    {
        visibility: visible;
        width: 100%;
        padding: 0.5em;
        top: 0;
        display: block;
    }

    .header-item
    {
        display: inline-block;
        padding: 0.5em;
        margin: 0;
        width: auto;
    }

    #Toggle
    {
        display: none;
        visibility: hidden;
    }
    .header-heading
    {
        border: 1px solid white;
    }
}



.header-list
{
    margin: 0.5em 0;
}


.header-heading a
{
    color: white !important;
}


.header-item:hover
{
    background: rgba(255,255,255,0.3);
    margin-left: 0.1em;
    margin-right: 0.1em;
}

.header-item a
{
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 90%;
    color: #000;
}


/* 2aabd2 */
.headerUserID a
{
    color:white  !important;
}


.headerFonctions a
{
    color: white !important;
}