body {
  font-family: 'Roboto', sans-serif;
  color      : #212121;
  height     : 100%;
  width      : 100%;
}

h2 {
  margin: .83em 0;
}

nav {
  position        : fixed;
  top             : 0;
  left            : 0;
  height          : 3em;
  width           : 100%;
  background-color: #263238;
  padding         : 0 1em;
  box-sizing      : border-box;
  z-index         : 999;
  color           : #eee;
}

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;
}

nav ul li {
  list-style-type: none;
  display        : inline-block;
  vertical-align : middle;
}

nav ul li:last-child {
  margin-left: auto;
}

nav img {
  height: 2em;
}

nav ul li a {
  padding        : .5em;
  line-height    : 2em;
  display        : block;
  text-decoration: none;
  color          : inherit;
  transition     : .5s ease background-color;
}

nav ul li a:hover {
  background-color: rgba(255, 255, 255, 0.57);
}

.main {
  position: fixed;
  top     : 3em;
  left    : 0;
  width   : 100%;
  height  : calc(100% - 3em);
  overflow: auto;
}

header {
  color           : #fff;
  background-color: #37474f;
  padding         : .67em 0;
}

header h1 {
  margin: 0;
}

footer {
  background-color: #ddd;
  padding         : 1.5em 0;
  text-align      : center;
  color           : rgba(0,0,0,0.5);
}

footer a {
  text-decoration: none;
  color          : inherit;
}

footer p {
  margin: 0;
}

.content {
  margin   : 1.5em auto;
  width    : 80%;
  max-width: 800px;
}

.hidden {
  display: none;
}

/* EDITOR STYLE */
.editor .sidebar {
  position        : fixed;
  left            : 0;
  top             : 3em;
  overflow-y      : auto;
  overflow-x      : hidden;
  height          : calc(100% - 3em);
  width           : 25%;
  background-color: #37474f;
  color           : #ddd;
  box-sizing      : border-box;
  padding         : 1.5em 1em;
}

.editor .container {
  position  : fixed;
  top       : 3em;
  right     : 0;
  overflow  : hidden;
  height    : calc(100% - 6em);
  width     : 75%;
  box-sizing: border-box;
}

.editor .sidebar h2 {
  margin-top: 0;
}

.editor #preview-area,
.editor textarea {
  position  : relative;
  box-sizing: border-box;
  height    : 100%;
  width     : 100%;
  border    : 0;
  padding   : 1.5em 10%;
  font-size : 1.05em;
}

.editor #preview-area *:first-child {
  margin-top: 0;
}

.editor textarea {
  resize     : none;
  font-family: monospace;
}

.editor textarea:focus {
  outline: 0;
}

.editor input {
  width           : 100%;
  background-color: rgba(0, 0, 0, 0.25);
  color           : rgba(255, 255, 255, 0.3);
  border          : 0;
  border-radius   : 5px;
  padding         : .5em 1em;
  box-sizing      : border-box;
}

.editor input:focus {
  color : rgba(255, 255, 255, 0.7);
  border: 0;
}

.editor h3 {
  font-size  : 1em;
  font-weight: bold;
  margin     : 0;
}

.action-bar {
  position        : fixed;
  bottom          : 0;
  right           : 0;
  width           : 75%;
  background-color: #455a64;
  height          : 3em;
  display         : flex;
  padding         : .5em 1em;
  box-sizing      : border-box;
}

.action-bar .left {
  margin-right: auto;
}

.action-bar *:last-child {
  margin-left: 1em;
}

/* FORMS ELEMENTS */
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;
  margin : .1em 0 0;
}

form fieldset {
  border    : 0;
  margin    : 1em 0 0;
  padding   : 1em 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

form legend {
  font-size: 1.5em;
}

input[type="file"] {
  display: none;
}

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;
  transition      : .3s ease all;
}

button,
input[type="submit"],
button:active,
input[type="submit"]:active,
button:hover,
input[type="submit"]:hover,
button:focus,
input[type="submit"]:focus {
  outline: 0;
}

button:hover,
input[type="submit"]:hover,
button:active,
input[type="submit"]:active {
  background-color: #999;
}

button.default,
input[type="submit"].default {
  background-color: #2196f3;
}

button.default:hover,
input[type="submit"].default:hover,
button.default:active,
input[type="submit"].default:active {
  background-color: #1e88e5;
}

button.add {
  vertical-align: middle;
  border-radius : 50%;
  height        : 1.5em;
  width         : 1.5em;
  font-size     : .7em;
  padding       : 0;
  opacity       : 0;
}

h3:hover > button.add {
  opacity: 1;
}

/* BROWSE */
.left {
  text-align: left;
}

.right {
  text-align: right;
}

.browse a {
  color          : inherit;
  text-decoration: none;
}

.browse table {
  width: 100%;
}

.browse .actions {
  background-color: #455a64;
  color           : #fff;
  padding         : 1.5em 0;
}

.actions .content {
  margin : 0 auto;
  display: flex;
}

.actions .fa {
  vertical-align: middle;
}

.actions .go-right {
  margin-left: auto;
}

.browse tr {
  line-height  : 2em;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}
@import "scrollbar";
@import "notifications";