styles.less

body {
    overflow: hidden;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    background: #a0a4ac;
    color: #222;
    #title_line {
        display: block;
        background: #000 url('img/navy_blue.png');
        padding: 20px;
        padding-left: 50px;
        padding-bottom: 0px;
        top: 0;
        margin-top: -16px;
        margin-left: -16px;
        margin-right: -16px;
        border-bottom: 3px solid #aaa;
        #title {
            display: inline;
            font-family: Helvetica, Arial, sans-serif;
            font-style: italic;
            font-weight: bold;
            font-size: 40pt;
            color: #eee;
        }
        .status {
            .transition(opacity 2.0s ease);
            font-style: italic;
            font-weight: bold;
            display: inline;
            font-size: 30pt;
            color: #4e5;
            opacity: 0.0;
        }
        .active {
            opacity: 1.0;
        }
    }

}

#controls {
    background-image: url('img/billie_holiday.png');
    //background: rgba(224, 245, 238, 0.5);
    background-repeat: repeat;
    padding-top: 20px;
    padding-left: 0px;
    width: 320px;
    height: 100%;
    margin-top: 0px;
    margin-left: -10px;
    padding-bottom: 1200px;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 2.5;
    td {
      text-align: right;
    }
    td + td {
      text-align: left;
      padding-left: 10px
    }
    label {
        display: block;
        color: #5a5a5a;
        &:hover {
            color: #000;
        }
    }
}

#editor {
    .transition(left 0.5s ease);
    margin: 0;
    margin-top: 75px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 320px;
    right: 0;
    z-index: 2;
    &.small {
        left: 320px;
    }
    &.big {
        left: 0;
    }
}

#but {
    .transition(0.5s ease);
    right: 0;
    z-index: 3;
    cursor: pointer;
    &.hide {
        margin: 0;
        position: absolute;
        top: 50%;
        bottom: ;
        left: 325px;
    }
    &.show {
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); /* IE 9 */
        -webkit-transform:rotate(180deg); /* Safari and Chrome */
        margin: 0;
        position: absolute;
        top: 50%;
        bottom: ;
        left: 0;
    }
}

#connections, .noshow {
}

.transition(...) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}