body { font-family: 'Roboto', sans-serif; color: #212121; height: 100%; width: 100%; } header { position: fixed; top: 0; left: 0; height: 3em; width: 100%; background-color: #263238; padding: 0 2em; box-sizing: border-box; z-index: 999; color: #eee; } header nav ul { margin: 0; padding: 0; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; } header nav ul li { list-style-type: none; display: inline-block; vertical-align: middle; } header nav ul li:last-child { margin-left: auto; } header nav img { height: 2em; } header nav ul li a { padding: 0.5em 0.5em; line-height: 2em; display: block; text-decoration: none; color: inherit; transition: .5s ease background-color; } header nav ul li a:hover { background-color: rgba(255, 255, 255, 0.57); } main { top: 3em; left: 0; position: fixed; width: 100%; height: 100%; overflow: inherit; } .container { box-sizing: border-box; top: 3em; height: auto; max-height: 100%; bottom: 0; } .container.left { position: fixed; left: 0; width: 25%; background-color: #37474F; overflow: auto; color: #eee; padding: 1.5em 1.5em; } .container.main { position: fixed; right: 0; width: 75%; overflow: auto; padding: 0; margin-bottom: 3em; } .container *:first-child { margin-top: 0; } .container.main textarea { height: 100%; width: 100%; padding: 2em 5em; box-sizing: border-box; } .content { margin: 1.5em auto; width: 80%; max-width: 800px; } textarea { width: 100%; min-height: 50em; border: 0; resize: vertical; box-sizing: content-box; font-family: inherit; } /* FORMS */ form input { color: rgba(0, 0, 0, 0.41); width: 15em; line-height: 1.25em; margin: .5em 0; border: 1px solid #fff; transition: .5s ease-out all; background-color: transparent; } form input:focus { color: inherit; outline: 0; border-bottom: 1px solid #2196F3; } form label { width: 10.5em; display: inline-block; } form fieldset { border: 0; margin: 0; padding: 0; } form legend { font-size: 1.5em; } form .container.left input { width: 100%; background-color: #fff; border-radius: 5px; padding: .5em 1em; box-sizing: border-box; } form .container.left input:focus { border: 1px solid #ddd; } form .container.left label {} form .container.left legend { font-size: 1em; font-weight: bold; } .action-bar { position: fixed; bottom: 0; right: 0; width: 75%; background-color: #455A64; height: 3em; display: flex; padding: 0.5em 1em; box-sizing: border-box; } .action-bar .left { margin-right: auto; } .action-bar *:last-child { margin-left: 1em; } button, input[type="submit"] { border: 0; color: #fff; margin: 0; padding: .5em 1em; border-radius: 10px; font-size: .9em; width: auto; line-height: 1em; background-color: #BBB; } button.default, input[type="submit"].default { background-color: #2196F3; }