.side-left { left: 0; background: #333; margin-top: -20px; height: 100%; color: #fff; z-index: 1; padding-top: 0em; }
.side-left ul { list-style: none; margin: 0 0 1em 0; padding: 0 0 0 .5em; max-height: 50%; overflow-y: auto; }
.side-left li {}
.side-left li a { position: relative; padding: 1em 2em; color: #fff; display: block; width: 100%; }
.side-left h4 a { width: 100%; display: block; }
.side-left h4 a:hover { color: #fff; text-decoration: none; }
.side-left li a:hover { background: rgba(255,255,255,0.1); }
.side-left li a .pagetype { position:absolute; top: 1em; left: .5em; }
.side-left li a .pagedelete { position:absolute; bottom: 1em; right: .5em; }
.side-left li a .pagedelete:hover { color: #d2322d; }

.side-left h2 { margin-top: 2em; font-size: 150%; padding-top: 0; }
.side-left p a { color: #fc3; }
.side-left p a:hover { text-decoration: none; }
.side-left h4 a,
.side-left li a { color: rgba(255,255,255,0.5); transition: .3s;}
.side-left li.active a { background: transparent; color: #fff; }
.side-left li.active,
.side-left li:hover
{ color: #fff; }
.side-left li.active { background: rgba(255,255,255,0.05); border-radius: 4px; }
.side-left .nav-pills li.active a:hover { background: rgba(255,255,255,0); }
.side-left li .pagedelete { display: none; }
.side-left li:hover .pagedelete { display: block; }

a.side-left-toggle { z-index: 1000; position: fixed; display: none; left: 1em; top: 60px; border: 1px solid rgba(0,0,0,0.1); color: #000; background: #efefef; border-radius: 3px; padding: .1em .3em; font-size: 90%; }
a.side-left-toggle:hover { background: lightblue; text-decoration: none; }
a.side-left-toggle .active { display: none; }
a.side-left-toggle.active .active { display: block; }
a.side-left-toggle.active .inactive { display: none; }
a.side-left-toggle .inactive { display: block;}
a.side-left-toggle { background: lightblue; color: #000; }


form label { margin-top: 1em; }
form textarea { display: block; clear: both; }

body.settings .content h1 { margin-top: .5em; padding-top: 0; }

@media screen and (min-width: 999px) {
    .side-left { display: block !important; }
}

@media screen and (max-width: 999px) {
    .side-left { display: none; z-index: 2;}
    a.side-left-toggle { display: block; }
}