.maincontent, .page {
  margin-top: 2em;
  width: 96%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto; }

#main-form label {
  display: none; }

.button, input[type="submit"] {
  background-color: #D73A31;
  color: #F4E8C1; }

input {
  display: block;
  width: 100%;
  margin-bottom: 1em;
  padding: .5em 1em;
  border: 1px solid transparent;
  background: #F4E8C1;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
  input[type="submit"] {
    width: 50%;
    margin-left: auto;
    margin-right: auto; }

html * {
  box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0; }

body {
  font-family: "Open Sans", sans-serif;
  color: #032B2F;
  background-color: #D0D3C5; }

a {
  text-decoration: none;
  color: #D73A31; }

.title {
  text-align: center;
  color: #032B2F;
  font-weight: normal;
  background: #F4E8C1;
  color: #D0D3C5;
  margin: 0;
  padding-top: .5em;
  padding-bottom: .5em;
  box-shadow: 0 1px 2px rgba(128, 128, 128, 0.5);
  text-shadow: 1px 1px 1px rgba(128, 128, 128, 0.7); }
  .title a {
    color: inherit; }

.indicator {
  font-size: 2.5em;
  position: absolute;
  right: .4em;
  top: .1em; }

.indicator.online {
  color: #56B1BF; }

.indicator.online.offline {
  color: #D0D3C5; }

nav {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 100%;
  top: 0;
  left: -100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform .3s;
          transition: transform .3s;
  color: #D0D3C5;
  background-color: #032B2F; }

nav.open {
  position: fixed;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0); }

.main {
  padding: 1.5em; }

.menu-toggle {
  position: absolute;
  top: 1em;
  left: 1.5em;
  font-weight: bold; }

h2 {
  padding-left: .5em;
  margin-bottom: .45em; }

.main-menu-list {
  margin-top: 3.5em;
  list-style: none;
  padding-left: 0;
  margin-left: 1px;
  margin-right: 1px; }

.main-menu-list li {
  padding-left: .5em;
  line-height: 2.5;
  background-color: #D0D3C5;
  color: #032B2F;
  padding-left: 1em;
  font-weight: bold; }
  .main-menu-list li:nth-child(even) {
    background-color: #F4E8C1; }

.notify-drawer {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0; }

.notify-drawer .note {
  background-color: #032B2F;
  padding: .5em 1em;
  color: #D0D3C5; }

.notify-drawer .note a {
  color: #D73A31;
  font-weight: bold; }

.notify-drawer .note a.confirm {
  float: right; }

.page {
  display: none; }

.page.visible {
  display: block; }

/* LIST MAIN DATA */
.list-items {
  list-style: none;
  padding-left: 0;
  background: #F4E8C1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

.list-items li {
  padding: .5em 1em;
  font-weight: bold; }
  .list-items li:nth-child(odd) {
    background: #f2e3b4; }

@media (min-width: 800px) {
  nav {
    width: 30%;
    left: -30%; }
    nav.open {
      box-shadow: 2px 0 2px rgba(0, 0, 0, 0.6); } }

@media (min-width: 1000px) {
  .menu-toggle {
    display: none; }
  nav {
    left: 0;
    box-shadow: 2px 0 2px rgba(0, 0, 0, 0.6); }
  .title {
    margin-left: 30%; }
  .main {
    margin-left: 30%; }
  .notify-drawer {
    width: 70%;
    left: 30%; } }

.slidein {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-name: slidein;
          animation-name: slidein; }

@-webkit-keyframes slidein {
  from {
    margin-left: 100%; }
  to {
    margin-left: 0; } }

@keyframes slidein {
  from {
    margin-left: 100%; }
  to {
    margin-left: 0; } }