@font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 400; src: local('Inconsolata-Regular'), local('Inconsolata'), local('Inconsolata Regular'), url('../fonts/inconsolata/Inconsolata-Regular.ttf'); } @font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 700; src: local('Inconsolata-Bold'), local('Inconsolata Bold'), url('../fonts/inconsolata/Inconsolata-Bold.ttf'); } *, *:before, *:after { box-sizing: border-box; } body { height: 100%; display: flex; flex-direction: column; border: 0px; margin: 0px; font-family: 'Inconsolata', monospace; font-size: 12pt; } #stream-metabox { flex-direction: column; display: flex; min-height: 85vh; max-height: 85vh; background-color: #d5d5d5; padding-left: 15px; padding-right: 15px; padding-bottom: 0px; padding-top: 0px; overflow-y: auto; } /* Alignment hack: http://stackoverflow.com/a/37515194 */ #stream-metabox > :first-child { margin-top: auto !important; } #stream { background-color: #fbfbfb; padding-bottom: .25em; } .stream-entry { background-color: #fdfdfd; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px; border-left-style: solid; border-left-width: 2px; border-left-color: #7b7b7b; margin-top: .5em; margin-bottom: 0px; margin-left: -2px; margin-right: 0px; } .stream-entry p { margin-top: .25em; margin-bottom: 0px; } #input-metabox { flex: 1; min-height: 15vh; max-height: 15vh; background-color: #414141; color: #d5d5d5; padding: 15px; } input { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border: 3px solid #e6e6e6; background-color: #ffffff; padding: 5px; width: 75%; font-family: 'Inconsolata', monospace; font-size: 12pt; }