div#sidebar
{
    background-color: #d2d7e0;
    border-right: 1px solid #adadad;
    color: inherit;
    overflow: auto;
    width: 192px;
}

div#sidebar h1#customer
{
    margin: 0;
    padding: 16px;
    text-align: center;
}

div#sidebar h1#customer a
{
    background: inherit;
    color: #000000;
    text-decoration: none;
}

div#sidebar h1#customer a img
{
    display: inline-block;
    vertical-align: bottom;
}

ul#menu
{
    font-size: 90%;
    list-style: none;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 1px #b0b8c8;
}

ul#menu li a
{
    color: #000000;
    display: block;
    padding: 0.5em 0.75em;
    text-decoration: none;
}

ul#menu li a.category
{
    background-color: #646c80 !important;
    color: #ffffff;
    text-shadow: 0 1px 1px #303030;
}

ul#menu li a:hover
{
    background-color: #9ea8c0;
    color: #ffffff;
    text-shadow: 0 1px 1px #303030;
}

ul#menu > li
{
    margin: 1em 0 0;
}

ul#menu > li:first-child
{
    margin: 0;
}

ul#menu li ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#menu li ul li a
{
    padding: 0.5em 1.5em;
}

ul#menu li ul li.current a
{
    background-color: #b8c0d0;
}

@media screen and (max-width: 800px)
{
    div#sidebar
    {
        border-bottom: 1px solid #adadad;
        border-right: 0;
        width: 100%;
    }

    ul#menu li a,
    ul#menu li ul li a
    {
        padding-top: 0.75em;
        padding-bottom: 0.75em;
    }
}

@media screen and (max-width: 800px) and (min-width: 400px)
{
    div#sidebar h1#customer
    {
        border-right: 1px solid #adadad;
        float: left;
        width: 160px;
    }

    ul#menu
    {
        border-left: 1px solid #adadad;
        margin-left: 192px;
    }
}