/*Basic reset*/
* {
    margin: 0;
    padding: 0;
}

body {
    background: #ba4732;
    font-family: Nunito, arial, verdana;
}

#accordian {
    background: #ba4732;
    width: 250px;
    margin: 10px 0 0 0;
    color: ivory;
    /*Some cool shadow and glow effect*/
    box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.6), 0 0 200px 1px rgba(255, 255, 255, 0.5);
}
    /*heading styles*/
    #accordian h3 {
        font-size: 25px;
        line-height: 34px;
        padding: 0 10px;
        cursor: pointer;
        /*fallback for browsers not supporting gradients*/
        background: #003040;
        background: linear-gradient(#003040, #002535);
    }
        /*heading hover effect*/
        #accordian h3:hover {
            text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
        }
        /*iconfont styles*/
        #accordian h3 a {
            color: ivory;
            text-decoration: none;
            font-size: 22px;
            line-height: 37px;
            padding: 0 15px;
            /*transition for smooth hover animation*/
        }

            #accordian h3 a:hover {
                color: #E1E1E1;
            }
    /*list items*/
    #accordian li {
        list-style-type: none;
        background: #4D6974;
    }
    /*links*/
    #accordian ul ul li a {
        color: ivory;
        text-decoration: none;
        font-size: 18px;
        line-height: 37px;
        display: block;
        padding: 0 15px;
        /*transition for smooth hover animation*/
        transition: all 0.15s;
    }
        /*hover effect on links*/
        #accordian ul ul li a:hover {
            background: #003545;
            border-left: 5px solid lightgreen;
        }
    /*Lets hide the non active LIs by default*/
    #accordian ul ul {
        display: none;
    }

    #accordian li.active ul {
        display: block;
    }