html { min-height: 100%; } body { color: #777; min-height: 100%; } a { text-decoration: none; } div.content { padding: 15px; min-height: 100%; color: black; } div.half { width: 50%; } .header { margin-left: 0; } .primary { color: #0078e7; } .primary-bg { background-color: #0078e7; } input.file { padding: .5em .6em; display: inline-block; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; } input.ranking-input { width: 50px; border-radius: 5px; border: 1px solid #CCC; text-align: center; } button.submit-vote { } i.move-icon { cursor: ns-resize; } #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 { height: 100px; } .thumbnail-container { display: block; height: 120px; background-color: #EEE; padding-top: 20px; } .padding { padding: 5px; } .space { margin: 5px; } .space-sides { margin-left: 5px; margin-right: 5px; } .space-vertical { margin-top: 5px; margin-bottom: 5px; } .large { font-size: 18px; } .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 tbody>td { text-align: center; } table.padding td { padding: 5px; } table tfoot { border-top: 1px solid #CCC; } .pure-button-error { background-color: #DD0000; color: #FFF; } .pure-button-toggle-first { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .pure-button-toggle-middle { border-radius: 0px; margin-left: -1px; border-left: 1px solid #CCC; } .pure-button-toggle-last { border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: -5px; border-left: 1px solid #CCC; } .pure-button:disabled { background-color: #CCC; color: #999; } #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; } div#embiggenedScreenShot { cursor: pointer; background-color: #FFF; } div.fullscreen { height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; text-align: center; margin: auto auto; z-index:1001; } @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; } div.flash { font-size: 24px; position: fixed; top: 0px; width: 100%; } div.flash.error { background-color: #DD0000; color: #FFFFFF; } div.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; } }