html, body { height: 100%; background-color: #eee; } html, body, input, textarea, buttons { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } /** * Layout CSS */ #header { position: fixed; top: 0; right: 0; left: 0; z-index: 2; transition: left 0.2s; } #sidedrawer { position: fixed; top: 0; bottom: 0; width: 200px; left: -200px; overflow: auto; z-index: 2; background-color: #fff; transition: transform 0.2s; } #content-wrapper { min-height: 100%; overflow-x: hidden; margin-left: 0px; transition: margin-left 0.2s; /* sticky bottom */ margin-bottom: -160px; padding-bottom: 160px; } #footer { height: 160px; margin-left: 0px; transition: margin-left 0.2s; } @media (min-width: 600px) { #header { left: 200px; } #sidedrawer { transform: translate(200px); } #content-wrapper { margin-left: 200px; } #footer { margin-left: 200px; } body.hide-sidedrawer #header { left: 0; } body.hide-sidedrawer #sidedrawer { transform: translate(0px); } body.hide-sidedrawer #content-wrapper { margin-left: 0; } body.hide-sidedrawer #footer { margin-left: 0; } } /** * Toggle Side drawer */ #sidedrawer.active { transform: translate(200px); } /** * Header CSS */ .sidedrawer-toggle { color: #fff; cursor: pointer; font-size: 20px; line-height: 20px; margin-right: 10px; } .sidedrawer-toggle:hover { color: #fff; text-decoration: none; } /** * Footer CSS */ #footer { background-color: #0288D1; color: #fff; } #footer a { color: #fff; text-decoration: underline; } /** * Side drawer CSS */ #sidedrawer-brand { /* padding-left: 20px; */ } #sidedrawer ul { list-style: none; } #sidedrawer > ul { padding-left: 0px; } #sidedrawer > ul > li:first-child { padding-top: 15px; } #sidedrawer strong { display: block; padding: 15px 22px; cursor: pointer; } #sidedrawer .entry:hover { background-color: #E0E0E0; } #sidedrawer strong + ul > li { padding: 6px 0px; } #sidedrawer .entry { padding-bottom: 5px; border-bottom:1px solid #e0c0e0; padding-right: 16px; } #sidedrawer .entry:after { font-family:Linearicons-Free;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; float:right; content:"\e87a" }