#main-content-wrapper, #main-content-wrapper > div
{
    height: 100%;
}

#main-content-scaler
{
    height: 100%;
    margin: 0 auto;
}

/*Header*/
#main-content-header
{
    z-index: 900;

    height: 100px;
}

#main-content-header
{
    position: absolute;
    top: 0;
    left: 25%;

    visibility: hidden;
    overflow-y: auto;

    width: 50%;
    height: auto;
    min-height: 50px;
    max-height: 80%;
    margin-top: -20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;

    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;

    color: rgba(0,0,0,0);
    background: rgba(0,0,0,0);
}

#main-content-header.active
{
    position: absolute;
    top: 85px;

    visibility: visible;

    color: rgb(0, 0, 0);
    background: rgb(255, 255, 255);
    box-shadow: rgba(86, 132, 181, .62) 0 0 20px 0;
}

#main-content-header ul
{
    width: 75%;
    height: 100%;
    margin: 0 auto;
    padding: 10px;

    list-style: none;

    text-align: center;
}

#main-content-header .header-item
{
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;

    color: rgba(0,0,0,0);
}

#main-content-header.active .header-item
{
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;

    color: rgb(86, 132, 181);
}

.header-item
{
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;

    height: 100%;

    text-indent: 20px;
}

.header-item:hover
{
    cursor: pointer;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;
}


.header-item .title
{
    font-size: 14px;
}

.header-item .body
{
    font-size: 10px;
}

.header-item:after
{
    display: block;

    width: 60%;
    height: 1px;
    margin: 5px auto;

    content: '';
}

.header-item:before
{
    font-size: 12px;
}

#main-content-header.active .header-item.info:hover::before, #main-content-header.active .header-item.warning:hover::before, #main-content-header.active .header-item.error:hover::before
{
    font-size: 16px;

    content: 'Click to remove';
}


#main-content-header.active .header-item.error:before
{
    content: 'Error';

    color: rgb(158, 24, 24);
    text-shadow: 0 0 2px rgb(158, 24, 24);
}


#main-content-header.active .header-item.warning:before
{
    content: 'Warning';

    color: #8a6d3b;
    text-shadow: 0 0 2px #8a6d3b;
}

#main-content-header.active .header-item.info:before
{
    content: 'Info';

    color: #236b9b;
    text-shadow: 0 0 2px #236b9b;
}

#main-content-header.active .header-item.error:after
{
    background-color: rgb(158, 24, 24);
}

#main-content-header.active .header-item.warning:after
{
    background-color: #8a6d3b;
}

#main-content-header.active .header-item.info:after
{
    background-color: #236b9b;
}

#main-content-header.active .header-item.error
{
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;

    color: rgb(158, 24, 24);
}

#main-content-header.active .header-item.warning
{
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;

    color: #8a6d3b;
}

#main-content-header.active .header-item.info
{
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;

    color: #236b9b;
}

.nex-menu {
    padding-left: 20% !important;
}

/*Fade out everything when not active*/
#main-content-header .header-item.error:before,
#main-content-header .header-item.warning:before,
#main-content-header .header-item.info:before,
#main-content-header .header-item.error:after,
#main-content-header .header-item.warning:after,
#main-content-header .header-item.info:after,
#main-content-header .header-item.error,
#main-content-header .header-item.warning,
#main-content-header .header-item.info
{
    color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
}