.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
    -webkit-border-top-right-radius: @topright;
    -webkit-border-bottom-right-radius: @bottomright;
    -webkit-border-bottom-left-radius: @bottomleft;
    -moz-border-radius-topright: @topright;
    -moz-border-radius-bottomright: @bottomright;
    -moz-border-radius-bottomleft: @bottomleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

.border-top-left-radius(@radius: 0) {
    border-top-left-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -webkit-border-top-left-radius: @radius;
}

.border-top-right-radius(@radius: 0) {
    border-top-right-radius: @radius;
    -moz-border-radius-topright: @radius;
    -webkit-border-top-right-radius: @radius;
}

.border-top-right-radius(@radius: 0) {
    border-top-right-radius: @radius;
    -moz-border-radius-topright: @radius;
    -webkit-border-top-right-radius: @radius;
}

.opacity(@opacity: 0.5) {
    -moz-opacity: @opacity;
    -khtml-opacity: @opacity;
    -webkit-opacity: @opacity;
    opacity: @opacity;
    @opperc: @opacity * 100;
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
    filter: ~"alpha(opacity=@{opperc})";
}

.transition(@duration:0.2s, @elem:all, @ease:ease-out) {
    -webkit-transition: @elem @duration @ease;
    -moz-transition: @elem @duration @ease;
    -o-transition: @elem @duration @ease;
    transition: @elem @duration @ease;
}

.box-shadow(@args...) {
    -webkit-box-shadow: @args;
    -moz-box-shadow: @args;
    box-shadow: @args;
}

div#ccm-dialog-content1 {
    padding: 0;
    div.ui-dialog-titlebar {
        border-bottom: 0;
    }
}

div.ccm-ui.table {
    height: 100%;
    width: 100%;
    margin-bottom: 0;
}

div.table > div {
    display: inline-block;
    height: 100%;
    float: left;
}

div.editorcontainer {
    width: 100%;
    overflow-x: hidden;
    div.Editor {
        height: 100%;
    }
    div.bottomBar {
        border-top: solid 1px #ccc;
        height: 45px;
        background: white;
        bottom: 0;
        position: absolute;
        width: 100%;
        .border-radius(0, 0, 5px, 0);
        background: #ffffff;
        background: -moz-linear-gradient(top, #ffffff 31%, #e8e9e9 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(31%, #ffffff), color-stop(100%, #e8e9e9));
        background: -webkit-linear-gradient(top, #ffffff 31%, #e8e9e9 100%);
        background: -o-linear-gradient(top, #ffffff 31%, #e8e9e9 100%);
        background: -ms-linear-gradient(top, #ffffff 31%, #e8e9e9 100%);
        background: linear-gradient(to bottom, #ffffff 31%, #e8e9e9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e8e9e9', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e8e9e9', GradientType=0); /* IE6-9 */

        span.scale {
            position: absolute;
            margin-top: -2px;
        }
        div.bottombarbutton {
            background: transparent;
            display: inline-block;
            padding: 15px 20px 0px 20px;
            height: 100%;
            border-left: solid 1px #ccc;
            border-right: solid 1px #ccc;
            margin-left: -1px;
            .transition(.2, box-shadow);
            float: left;
            &:hover {
                .box-shadow(0 0 15px skyblue);
            }
            &:active {
                background: #e8e9e9;
            }
            &.plus {
                .border-radius(0, 0, 5);
            }
            &.crop > i {
                background-image: url('/concrete/images/image_editor/crop_icon.png');
                background-position: 0 0;
            }
        }
        div.saveWidth, div.saveHeight, div.scale {
            > span {
                font-size: 12px;
                color: #aaa;
                font-weight: normal;
            }
            font-weight: bold;
            color: #999;
            float: left;
            margin-left: -1px;
            border-right: solid 1px #ccc;
            display: inline-block;
            background: white;
            padding: 12px 20px 0px 20px;
            height: 33px;
            border-left: solid 1px #ccc;
        }
        div.scale {
            font-size: 12px;
            height: 100%;
            color: #aaa;
        }
    }
}

div.slideOut {
    > ul {
        &.slideOutList {
            margin: 0;
            list-style-type: none;
            > li {
                padding: 20px 30px;
                font-size: 20px;
                cursor: pointer;
                &:hover {
                    background: skyblue;
                }
            }
        }
        &.slideOutBoxList {
            margin: 0;
            list-style-type: none;
            margin-left: 5px;
            > li {
                cursor: pointer;
                font-size: 20px;
                width: 143px;
                height: 143px;
                display: inline-block;
                float: left;
                position: relative;
                border: solid 1px #ccc;
                border-right: none;
                border-top: none;
                &:nth-child(odd) {
                    border-left: none;
                }
                &:hover {
                    background: skyblue;
                }
                &:active {
                    background: lightblue;
                }
            }
        }
        &.slideOutBlockList {
            margin: 0;
            list-style-type: none;
            margin-left: 5px;
            padding-top: 30px;
            padding-bottom: 30px;
            > li {
                margin: 15px 0px;
                width: 160px;
                position: relative;
                > span.title {
                    position: absolute;
                    bottom: 0;
                    padding: 5px 20px;
                    text-align: center;
                    width: 100%;
                    background: #333;
                    color: white;
                    .opacity(.8);
                }
                &:hover {
                    .box-shadow(0 0 0 2px skyblue);
                }
                &:active {
                    background: lightblue;
                }
            }
        }
    }
}

div.controls {
    width: 330px;
    float: right;
    position: absolute;
    right: 0;
    background: white;
    overflow: hidden;
    .box-shadow(0 0 25px -5px black);
    z-index: 1;
    .border-radius(0, 5px);

    > div.controlscontainer {
        > ul.nav {
            padding-left: 20px;
            padding-top: 20px;
            margin-bottom: 0;
            background: #f9f9f9;
        }
        > div.editorcontrols {
            overflow: auto;
            height: 1px;
            overflow-x: hidden;
            padding-bottom: 60px;
            div.control-sets, div.components {
                > div.controlset, div.component {
                    &.disabled {
                        h4 {
                            color: #ababab;
                            //background:#eee;
                            cursor: auto;
                        }
                    }
                    > h4 {
                        padding: 20px 40px 20px;
                        margin: 0;
                        cursor: pointer;
                        background: white;
                        color: #00cc66;
                    }
                    > div.border {
                        height: 0px;
                        margin: 0 15px;
                        border-bottom: solid 1px #eaeaea;
                        margin-top: -2px;
                    }
                    > div.control {
                        padding: 0 40px;
                        background: #f5f5f5;
                        height: 0px;
                        overflow:hidden;

                        .box-shadow(~"0 12px 20px -15px black inset, 0 -7px 20px -15px black inset");
                        > div.contents {
                            padding: 20px 0;

                            > div.cancelbutton {
                                color: #b3b3b3;
                                font-size: 12px;
                                text-align: right;
                                cursor: pointer;
                                text-indent: 0;
                                .transition(250ms, color);
                                .transition(250ms, text-indent);
                                &:hover {
                                    color: #87CEEB;
                                }
                                &:active {
                                    color: #ccc;
                                }
                                &.disabled {
                                    text-indent: 300px;
                                    cursor: auto;
                                }
                            }
                        }
                    }

                    &.active {
                        > h4 {
                            color: #006633;
                            cursor: auto;
                        }
                    }
                }
            }
        }
        > div.save {
            padding: 10px 15px 10px;
            background: #F5F5F5;
            width: 100%;
            border-top: solid 1px #ccc;
        }
    }
}