body {
        background:#4DD0E1;
        font-family: 'Open Sans', sans-serif;
    }

    #main {
        text-align:center;
        width:312px;
        margin:50px auto;
        height:522px;
        position:relative;
    }

    #tools {
        position:absolute;
        height:456px;
        width:300px;
        top:22px;
        left:0;
        background:#fcfcfc;
        border-radius: 0 5px 5px 0;
        text-align:center;
        padding:10px;
        transform:translateX(0);
        transition: 0.33s;
        overflow:hidden;
        padding-top:45px;
    }

    #tools.open {
        transform:translateX(350px);
    }

    #tools-header {
        color:#ffffff;
        font-size:20px;
        font-weight:bold;
        position: absolute;
        top:0;
        left:0;
        width:300px;
        padding:10px 10px;
    }

    #tools-content, #tools-image {
        width:230px;
        display:block;
        border-radius:5px;
        box-shadow: inset 0 0 5px #333;
        padding:10px;
        outline:none;
        margin:10px auto 10px auto;
        border:none;
        resize:none;
    }

    #tools-content { height:180px;}

    button {
        width:95px;
        border:none;
        padding:10px 20px;
        color:#ffffff;
        cursor:pointer;
        transform: translateY(0px);
        transition:all 0.1s;
        outline:none;
        border-radius:5px;
        position:absolute;
    }

    button:hover {
        filter: brightness(1.1);
    }

    button:active {
        padding-bottom:8px;
        border-bottom-width:2px;
    }

    #save-area {
        bottom:70px;
        left:50%;
        margin-left:-100px;
        background:#8BC34A;
        border-bottom:4px #558B2F solid;
        width:200px;
    }

    #cancel-area, #delete-area, #delete-area-confirm {
        bottom:20px;
    }

    #cancel-area {
        right:60px;
        background:#FFC107;
        border-bottom:4px #FF8F00 solid;
    }

    #delete-area {
        left: 60px;
        background:#F44336;
        border-bottom:4px #C62828 solid;
        opacity:1;
        pointer-events: all;
    }

    #delete-area.delete-pending {
        opacity:0;
        pointer-events: none;
    }

    #delete-area-confirm {
        left: 60px;
        background:#F44336;
        border-bottom:4px #C62828 solid;
        font-weight: bold;
        opacity:0;
        pointer-events: none;
    }

    @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }

      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }

      30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
      }

      40%, 60% {
        transform: translate3d(4px, 0, 0);
      }
    }

    #delete-area-confirm.delete-pending {
        opacity:1;
        pointer-events: all;
          animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    }

    #layout {
        float:left;
        position:relative;
        width:312px;
        height:522px;
        padding:20px;
        border-radius:10px;
        background:#fcfcfc;
        box-shadow: 0 0 10px  #000000;
    }

    .cell{
        height:100px;
        width:100px;
        display:block;
        transition: 0.33s;
        box-shadow:none;
        cursor:pointer;
        padding:0;
        float:left;
        background:#BBDEFB;
        margin:2px;
    }

    .cell:hover {
        box-shadow: inset 0 0 0 2px #222;
    }

    .cell.faded {
        filter:brightness(0.5);
    }

    .area-button {
        height:30px;
        width:30px;
        background:#f8f8f8;
        border-radius:30px;
        box-shadow: 0 0 5px #888;
        position:absolute;
        opacity:0;
        transition:all 0.2s;
    }

    .area-button {
        top:50%;
        left:50%;
        margin-top:-15px;
        background-repeat:no-repeat;
        background-position: center center;
        background-size: 75%;
        box-shadow: 0 0 10px #000000;
    }

    .area-button:hover {
        box-shadow: 0 0 15px #000000;
        transform: translateY(-2px)
    }

    .area-button:active {
        box-shadow: 0 0 5px #000000;
        transform: translateY(1px)
    }

    .area-button.edit {
        margin-left:-35px;
        background-image: url(edit.svg);
    }

    .area-button.resize {
        margin-left:10px;
        background-image: url(resize.svg);
    }

    .area-button.save-resize {
        margin-left:-15px;
        background-image: url(check.svg);
        opacity:0;
        pointer-events: none;
    }