body{ -moz-transition: left 100ms ease-in-out, right 100ms ease-in-out;
-webkit-transition: left 100ms ease-in-out, right 100ms ease-in-out;
transition: left 100ms ease-in-out, right 100ms ease-in-out;
}
.sidetogglemenu{ background-color: white;
width: 290px; height: 100%;
position: fixed;
top: -100%;
clear: both;
display: block;
visibility: 'hidden';
overflow-y: auto;
-moz-transition: all 100ms ease-in-out; -webkit-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
.sidetogglemenu ul{ padding: 0;
margin: 0;
list-style: none;
}
.sidetogglemenu ul ul{ border-left: 6px solid darkred;
margin-left: 5px;
padding-left: 2px;
font-size: .9em;
}
.sidetogglemenu a{
padding: 10px;
display: block;
color: #595959;
position: relative;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}
.sidetogglemenu a img.downarrow{
position: absolute;
right: 5px;
top: 15px;
}
.sidetogglemenu a:hover{
background:#3498db;
color: white;
} div#smallscreentoggler{ width: 1.5em;
z-index: 10000;
color: white;
position: relative;
float: right;
overflow: hidden;
background: #2686c5;
font: normal 1.8em Arial;
margin-bottom: 0.5em;
text-align: center;
box-shadow: -3px 3px 5px gray;
cursor: pointer;
border-radius: 2px;
display: none;
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
div#smallscreentoggler:hover{
background: #2686c5;
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
@media screen and (max-width: 480px){ div#smallscreentoggler{
display: block; }
.sidetogglemenu{ position: static;
border-width: 0;
border-top-width: 1px;
width: 98% !important;
height: auto;
box-shadow: 5px 0 5px rgba(174, 174, 174, .8) !important;
margin-left: 5px;
margin-bottom: 10px;
display: none;
}
}