@import url('https://fonts.googleapis.com/css?family=Karla');

.trash-editor {
    width: 100%;
    height: 100%;
    position: relative;
    background: #666666;
}

.trash-editor .left-toolbar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 120px;
    width: 40px;
    background: #ffffff;
    overflow: hidden;
}

.trash-editor .left-toolbar button {
    display: block;
    border: 1px solid #c5c5c5;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: inset -1px -1px 1px rgba(50,50,50,0.1);
    width: 30px;
    height: 30px;
    margin: 5px;
}

.trash-editor .left-toolbar hr {
    margin: 10px 5px;
    border-top: 1px solid #888888;
    border-bottom: none;
}

.trash-editor .right-toolbar {
    position: absolute;
    right: 0;
    width: 150px;
    top: 0;
    bottom: 120px;
    background: #ffffff;
}

.trash-editor .right-toolbar .color-palette {
    margin: 8px;
    border: 1px solid #b3b3b3;
    min-height: 88px;
    width: 132px;
    overflow: hidden;
    border-radius: 3px;
    background: #ffffff;
    box-shadow: inset 0 0 2px rgba(50,50,50,0.3);
}

.trash-editor .right-toolbar .color-palette button {
    width: 24px;
    height: 24px;
    border: 1px solid #eeeeee;
    margin: -1px;
}

.trash-editor .bottom-toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: #ffffff;
}

.trash-editor .bottom-toolbar .bottom-buttons-right {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 5px;
}

.trash-editor .timeline {
    position: absolute;
    left: 0;
    right: 0;
    height: 52px;
    background: #ee99;
    margin: 5px 0;
}

.trash-editor .timeline .frame-divider {
    position: absolute;
    left: 49px;
    top: 17px;
    height: 37px;
    width: 3px;
    background: #000000;
    border: 1px solid black;
    box-sizing: border-box;
    overflow: hidden;
}

.trash-editor .timeline .frame-divider.open {
    background: transparent;
    border: none;
    margin: 0 -5px;
    width: 13px;
    padding: 10px 0;
}

.trash-editor .timeline .frame-divider button {
    width: 13px;
    height: 13px;
    border-radius: 6px;
    box-shadow: inset -1px -1px 1px rgba(30,30,30,0.3);
    margin: 1px 0 0 0;
    display: block;
    background: #777777;
    border: 1px solid #565656;
}

.trash-editor .bottom-buttons-left button, .trash-editor .bottom-buttons-right button {
    display: inline-block;
    border: 1px solid #c5c5c5;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: inset -1px -1px 1px rgba(50,50,50,0.1);
    width: 30px;
    height: 30px;
    margin: 5px 0 5px 5px;
}

.trash-editor .viewport {
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 80px;
    right: 150px;
    background: #666666;
    overflow: hidden;
    box-shadow: inset 0 0 3px rgba(30,30,30,0.7);
    margin: 1px;
}

.trash-editor .viewport-sheet {
    position: absolute;
    left: 10px;
    top: 10px;
    background: #ffffff;
    box-shadow: 0 0 5px rgba(0,0,0,1);

}

.trash-editor .viewport-sheet canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.trash-editor .viewport-foreground {
    position: absolute;
    left: 0;
    top: 0;
}

.trash-editor .viewport.viewport-pencil, .trash-editor .viewport.viewport-eraser {
    cursor: none;
}

.trash-editor .viewport.viewport-move {
    cursor: all-scroll;
}

.trash-editor .viewport.viewport-picker {
    cursor: crosshair;
}

.trash-editor .viewport .cursor {
    position: absolute;
    left: 80px;
    top: 288px;
}

.trash-editor .button-save {
    background: #ffffff url(/img/trash-editor/save.svg) no-repeat 50% !important;
    background-size: 75% !important;
}

.trash-editor .button-fullscreen {
    background: #ffffff url(/img/trash-editor/fullscreen.svg) no-repeat 50% !important;
    background-size: 75% !important;
}

.trash-editor .button-pencil {
    background: #ffffff url(/img/trash-editor/pencil.svg) no-repeat 50% !important;
    background-size: 75% !important;
}

.trash-editor .button-eraser {
    background: #ffffff url(/img/trash-editor/rubber.svg) no-repeat 50% !important;
    background-size: 75% !important;
}

.trash-editor .button-picker {
    background: #ffffff url(/img/trash-editor/color_picker.svg) no-repeat 50% !important;
    background-size: 75% !important;
}

.trash-editor .button-move {
    background: #ffffff url(/img/trash-editor/zoom.svg) no-repeat 50% !important;
    background-size: 75% !important;
}

.trash-editor .left-toolbar button.toggled {
    box-shadow: inset 1px 1px 1px rgba(50,50,50,0.2);
    background-color: #f5f5f5 !important;
}