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: #88D1B0; color:#214032; } a { color: #74bf9d; } a:hover { color: #214032; } #sidedrawer strong + ul > li { padding: 6px 0px; } #sidedrawer .entry { padding: 7px; cursor:pointer; } /*#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" }*/ #footer, .mui-appbar { background-color: #775585; } .card{ padding-bottom:5PX; border-bottom:1px solid silver; } div.content img { display: block; float: none !important; } @media screen and (-webkit-device-pixel-ratio:3) { body {font-size: 150%} div.content img { max-width: 365px !important; } } @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { div.content img { max-width: 1140px !important; } } /* ----------- Retina Screens ----------- */ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { div.content img { max-width: 1140px !important; } }