@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#wcp-editor-canvas {
    width: 800px;
    height: 600px;
    background: white;
}

/* ================================================================================================ */
/* LAYOUT */
/* ================================================================================================ */

#wcp-editor {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

/* MAIN BUTTONS */

#wcp-editor-main-buttons {
    position: absolute;
    left: 10px;
    top: 10px;
}

#wcp-editor-main-buttons .wcp-editor-main-button {
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
}

#wcp-editor-main-buttons .wcp-editor-main-button .wcp-editor-main-button-icon {
    font-size: 20px;
}

/* TOOLBAR */

#wcp-editor-toolbar-wrap {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-left: 10px;
    margin-top: 70px;
}

#wcp-editor-toolbar-wrap .wcp-editor-toolbar {
    margin: 2px 0;
}

#wcp-editor-toolbar-wrap .wcp-editor-toolbar .wcp-editor-toolbar-button {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 46px;
    height: 46px;
    font-size: 20px;
}

#wcp-editor-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#wcp-editor-right {
    display: flex;
    flex-direction: column;
    width: 250px;
}

/* OBJECT SETTINGS */

#wcp-editor-right #wcp-editor-object-settings {
    overflow-y: auto;
    flex: 1;
    margin-bottom: 4px;
}

#wcp-editor-right #wcp-editor-object-settings .wcp-editor-object-settings-group .wcp-editor-object-settings-group-header {
    line-height: 40px;
    padding-left: 10px;
    display: flex;
}

#wcp-editor-right #wcp-editor-object-settings .wcp-editor-object-settings-group .wcp-editor-object-settings-group-header .wcp-editor-object-settings-group-header-icon {
    margin-right: 10px;
}

#wcp-editor-right #wcp-editor-object-settings .wcp-editor-object-settings-group .wcp-editor-object-settings-group-header .wcp-editor-object-settings-group-header-icon .fa-minus {
    display: none;
}

#wcp-editor-right #wcp-editor-object-settings .wcp-editor-object-settings-group .wcp-editor-object-settings-content {
    padding: 10px;
}

/* OBJECT LIST */

#wcp-editor-right #wcp-editor-object-list-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#wcp-editor-right #wcp-editor-object-list-wrap #wcp-editor-object-list-buttons {
    display: flex;
    height: 30px;
    flex-shrink: 0;
}

#wcp-editor-right #wcp-editor-object-list-wrap #wcp-editor-object-list-buttons .wcp-editor-object-list-button {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
}

#wcp-editor-right #wcp-editor-object-list-wrap #wcp-editor-object-list {
    overflow-y: auto;
}

#wcp-editor-right #wcp-editor-object-list-wrap #wcp-editor-object-list .wcp-editor-object-list-item {
    line-height: 40px;
    padding: 0 10px;
}

/* ================================================================================================ */
/* TYPOGRAPHY */
/* ================================================================================================ */

#wcp-editor {
    font-family: 'Source Sans Pro', 'sans-serif';
    font-size: 14px;
}

/* ================================================================================================ */
/* COLORS */
/* ================================================================================================ */

#wcp-editor {
    background: #282727;
    color: white;
}

#wcp-editor-main-buttons {
    background: #5C5B5B;
}

.wcp-editor-main-button:hover {
    background: #88888A;
}

.wcp-editor-toolbar {
    background: #5C5B5B;
}

.wcp-editor-toolbar-button:hover {
    background: #88888A;
}

.wcp-editor-object-list-button:hover {
    background: #88888A;
}

.wcp-editor-toolbar-button.wcp-active {
    background: #0258D0;
}

#wcp-editor-object-settings {
    background: #5C5B5B;
}

.wcp-editor-object-settings-group-header {
    background: #4F4E4E;
}

#wcp-editor-object-list-wrap {
    background: #363636;
}

#wcp-editor-object-list-buttons {
    background: #5C5B5B;
}

.wcp-editor-object-list-item {
    background: #5C5B5B;
}

.wcp-editor-object-list-item:hover {
    background: #88888A;
}

.wcp-editor-object-list-item.wcp-active {
    background: #0258D0;
}


/* ================================================================================================ */
/* MISC */
/* ================================================================================================ */

#wcp-editor-toolbar-wrap, #wcp-editor-main-buttons, #wcp-editor-object-list-wrap, .wcp-editor-object-settings-group-header {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.wcp-editor-main-button, .wcp-editor-toolbar-button, .wcp-editor-object-list-button, .wcp-editor-object-list-item, .wcp-editor-object-settings-group-header {
    cursor: pointer;
}

#wcp-editor-main-buttons, .wcp-editor-toolbar {
    border-radius: 3px;
    overflow: hidden;
}