html { min-height: 100%; } body { color: #777; min-ehgiht: 100%; } div.content { padding: 15px; min-height: 100%; color: black; } .header { margin-left: 0; } input.file { padding: .5em .6em; display: inline-block; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; } #menu { width: 100%; height: 40px; position: relative; background: #191818; webkit-overflow-scrolling: touch; } #menu .pure-menu-heading { display: inline-block; } #menu .pure-menu-nonlink { color: #777; padding: .5em 1em; display: block; text-decoration: none; white-space: nowrap; } #menu .menu-button { display: inline; position: absolute; top: 0px; right: 0px; margin-top: 10px; margin-right: 10px; color: white; text-decoration: none; } .menu-bottom { width: 150px; border-top: 1px solid white; } #menu .menu-container { display: none; position: absolute; right: 0px; top: 40px; background-color: #191818; } #menu .menu-container>ul { background-color: #191818; } div.horizontal-scroll { overflow-x: scroll; } img.thumbnail { width: 100px; height: 100px; } .thumbnail-container { display: block; height: 120px; background-color: #EEE; } .padding { padding: 5px; } .space { margin: 5px; } .space-sides { margin-left: 5px; margin-right: 5px; } .big-space { margin: 10px; } .left { text-align: left; } .right { text-align: right; } .center { text-align: center; } .center-all { text-align: center; vertical-align: center; margin: auto; } table.center td { text-align: center; } table.padding td { padding: 5px; } .pure-button-error { background-color: #DD0000; color: #FFFFFF; } #modal-overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; text-align: center; z-index: 1000; background-color: rgba(0, 0, 0, 0.5); } #modal-overlay>div { width: 500px; margin: 100px auto; background-color: #FFF; border: 1px solid #000; border-radius: 10px; padding: 15px; text-align: center; } @media (min-width: 40em) { #menu { width: 150px; height: 100%; position: fixed; } #menu .menu-button { display: none; } #menu .menu-container{ display: initial; width: 100%; } .menu-bottom { width: 150px; position: fixed; left: 0px; bottom: 0px; } .header { margin-left: 150px; } aside.flash { margin-left: 150px; } aside.flash.success { background-color: #229af9; color: #FFFFFF; } .content { margin-left: 150px; } } @media screen and (max-width:35.5em) { div.pure-control-group label.control-label { text-align: left; } } @media screen and (max-width:64em) and (min-width: 48em) { div.pure-control-group label.control-label { text-align: left; } }