body{
    font-family: arial;
    background-color: #A7C4D2;
}
#main
{
    display: block;
    position: relative;
}
h1
{
    color: white;
    text-align: center;
    text-shadow: 5px 5px 5px black;
}
#slider
{
    display: block;
    position: fixed;
    height: 100%;
    top:0px;
    left: 0px;
    background-color: #7087B8;
    z-index: 999;
}
    #slider #bottom_nav
    {
        display: block;
        position: absolute;
        width: 99%;
        bottom: 0px;
        height: 50px;
        vertical-align: top;
        border-top: 1px solid black;
    }
        #bottom_nav div
        {
            display: inline-block;
            width: 45%;
            height: 35px;
            margin: 3px;
        }
        #bottom_nav #nav_one
        {
            background-image: url(mySlider/settings.png);
            background-position: bottom center;
            background-repeat: no-repeat;
        }
        #bottom_nav #nav_two
        {
            background-image: url(mySlider/categories.png);
            background-position: bottom center;
            background-repeat: no-repeat;
        }
        .active
        {
            clear: both;
            border: none !important;
            background-position: top center !important;
        }
    #slider h4
    {
        text-align: center;
    }
        .slide_back h4
        {
            display: none;
        }
        .section
        {
            padding: 5px;
        }
        .slide_back .section
        {
            display: none;
        }
    #slider #actuator
    {
        display: block;
        position: absolute;
        height: 50px;
        width: 50px;
        top:45%;
        left: 97%;
        background-color: black;
        border-radius: 25px;
        z-index: 2000;
        background-image: url(mySlider/arrow.png);
        background-position: center center;
        background-repeat: no-repeat;
        transform: rotate(180deg);
    }
        #slider #actuator:hover
        {
            cursor: pointer;
            transform: rotate(0deg);
            transition: all 1s;
        }
        #slider #actuator.slide_back
        {
            transform: rotate(0deg);
            transition: all 1s;
        }
        #slider #actuator.slide_back:hover
        {
            transform: rotate(180deg);
            transition: all 1s;
        }
    .slide_out
    {
        width: 40%;
        transition: width 1s;
    }
    .slide_back
    {
        width: 0px;
        transition: width 1s;
        display: none;
    }
    .slide_up
    {
        height: 0px;
        transition: height 1s;
        display: none;
    }

.simPic
{
    display: inline-block;
    position: relative;
    height: 100px;
    width: 100px;
    margin: 10px;
    margin-right: 20px;
    background-color:navy;
}
.hideMe
{
    display: none;
}