.clearfix:after {
  clear: both; }

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

/* prevents from mobiles safaris own styling, e.g. form controls*/
* {
  -webkit-appearance: none; }

* {
  margin: 0;
  padding: 0; }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(boxsizing.php); }

body {
  text-shadow: 0px 2px #fafafa; }

#maincontainer {
  padding-top: 20px;
  margin: 0 auto 0;
  width: 90%;
  height: 100%; }
  #maincontainer header {
    /*background: #c43c35;*/
    /*color: #fff;*/
    position: relative;
    margin-bottom: 20px;
    font-family: Helvetica Neue; }
    #maincontainer header h1 {
      font-weight: 200; }
    #maincontainer header #loginstate {
      position: absolute;
      top: 0;
      right: 0; }
      #maincontainer header #loginstate p {
        text-align: right; }
      #maincontainer header #loginstate img {
        margin-left: 20px;
        float: right; }
  #maincontainer #mainnav {
    margin-bottom: 20px; }
  #maincontainer #currentdate {
    font-weight: bold;
    width: 250px; }
  #maincontainer .dayarrow {
    text-decoration: none;
    display: inline-block;
    height: 40px;
    background-color: #f1f1f1;
    padding: 5px 15px; }
  #maincontainer h1 > sup {
    font-weight: normal;
    font-size: 50%; }

#overflowcontainer {
  position: relative;
  border: 1px solid #deb887;
  height: 74%;
  overflow: auto; }

#container {
  font-size: 100%;
  font-weight: bold;
  line-height: 1.4em;
  position: relative;
  width: 2550px; }
  #container div {
    float: left; }
  #container .title {
    position: relative;
    z-index: 98; }
  #container .header {
    position: relative;
    z-index: 99;
    height: 40px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
    color: #666; }
    #container .header > div {
      float: left;
      background: url("../../img/bg-texture.jpg") repeat;
      padding-top: 12px;
      text-align: center;
      width: 100px; }
      #container .header > div.title {
        padding-left: 10px;
        text-align: left;
        height: 100%;
        width: 150px; }
      #container .header > div.hour {
        position: relative;
        height: 100%; }
      #container .header > div > .column {
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        top: 0;
        left: 0;
        width: 100px;
        height: 1000%;
        position: absolute;
        pointer-events: none; }
      #container .header > div:first-child .column {
        border: none;
        width: 150px;
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); }
  #container .app {
    height: 50px; }
    #container .app div {
      float: left; }
      #container .app div.title {
        width: 150px;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        height: 100%;
        background: url("../../img/bg-texture.jpg") repeat;
        padding-top: 15px;
        padding-left: 10px;
        text-align: left;
        z-index: 100; }
      #container .app div.timeline {
        width: 2400px;
        height: 100%;
        position: relative; }
        #container .app div.timeline .slot {
          position: absolute;
          top: 10%;
          height: 80%;
          width: 3px;
          cursor: pointer;
          background-color: rgba(255, 0, 0, 0.1);
          border-radius: 5px;
          border: 1px solid rgba(255, 0, 0, 0.16); }
          #container .app div.timeline .slot > * {
            display: none; }
    #container .app:last-child {
      border: none; }
  #container div.app:nth-child(2n) {
    background-color: rgba(0, 0, 0, 0.03); }