.toggle-button.active a {
    color: #FFF;
    background: #282828;
}

#top-pane {
    position: absolute;

    left: 0;
    width: 100%;

    top: 0;
    height: 100vh;
    transition: height 0.3s;
}

#top-pane.contracted {
    height: 70vh;
}

#bottom-pane {
    position: absolute;

    left: 0;
    width: 100%;

    bottom: -30vh;
    height: 30vh;
    transition: bottom 0.3s;
}

#bottom-pane.enabled {
    bottom: 0;
}

#top-left-pane {
    position: absolute;

    left: 0;
    width: 100%;
    transition: padding-right 0.3s;

    top: 0;
    height: 100%;
	box-sizing: border-box;
}

#top-left-pane.contracted {
    padding-right: 300px;
}

#top-right-pane {
    position: absolute;
    right: -300px;
    width: 300px;
    transition: right 0.3s;    

    top: 0;
    height: 100%;
	box-shadow: 0 0 7px 0 rgba(0,0,0,0.6);
}

#top-right-pane.enabled {
    right: 0;
}
.toggle-button a {
    font-family: steep-icons;
}

.toggle-button.active a {
    color: #FFF;
    background: #282828;
}

#top-pane {
    position: absolute;

    left: 0;
    width: 100%;

    top: 0;
    height: 100vh;
    transition: height 0.3s;
}

#top-pane.contracted {
    height: 70vh;
}

#bottom-pane {
    position: absolute;

    left: 0;
    width: 100%;

    bottom: -30vh;
    height: 30vh;
    transition: bottom 0.3s;
}

#bottom-pane.enabled {
    bottom: 0;
}

#top-left-pane {
    position: absolute;

    left: 0;
    width: 100%;
    transition: padding-right 0.3s;

    top: 0;
    height: 100%;
	box-sizing: border-box;
}

#top-left-pane.contracted {
    padding-right: 300px;
}

#top-right-pane {
    position: absolute;
    right: -300px;
    width: 300px;
    transition: right 0.3s;    

    top: 0;
    height: 100%;
	box-shadow: 0 0 7px 0 rgba(0,0,0,0.6);
}

#top-right-pane.enabled {
    right: 0;
}
Use steep icons on toggle buttons
Use steep icons on toggle buttons
