﻿
     .wpc_styler.switcher_on {
                    width: 400px;
                    position: fixed;
                    left: 0;
                    top: 70px;
                    z-index: 100;
                    background: #f4f4f4;
                    -webkit-box-shadow: 0 2px 9px 2px rgba(0, 0, 0, 0.14);
                    -moz-box-shadow: 0 2px 9px 2px rgba(0, 0, 0, 0.14);
                    box-shadow: 0 2px 9px 2px rgba(0,0,0,0.14);
                }

                .wpc_styler {
                    width: 200px;
                    position: fixed;
                    left: -200px;
                    top: 70px;
                    z-index: 100;
                    background: #f4f4f4;
                    -webkit-box-shadow: 0 2px 9px 2px rgba(0, 0, 0, 0.14);
                    -moz-box-shadow: 0 2px 9px 2px rgba(0, 0, 0, 0.14);
                    box-shadow: 0 2px 9px 2px rgba(0,0,0,0.14);
                }

                .wpc_styler_wrapper {
                    display: block;
                    -webkit-box-shadow: 0 2px 9px 2px rgba(0, 0, 0, 0.14);
                    -moz-box-shadow: 0 2px 9px 2px rgba(0, 0, 0, 0.14);
                    box-shadow: 0 2px 9px 2px rgba(0,0,0,0.14);
                }

                .wpc_styler_title {
                    font-size: 12px;
                    display: block;
                    height: 40px;
                    line-height: 41px;
                    border-bottom: 1px solid rgba(23,24,26,0.15);
                    padding-left: 15px;
                    background: #202020;
                    color: #fff;
                    text-transform: uppercase;
                    letter-spacing: 2px;
                    font-weight: bold;
                }

                .styler_box {
                    padding: 10px 15px;
                    border-bottom: 1px solid rgba(23,24,26,0.15);
                }

                    .styler_box:last-child {
                        border-bottom: none;
                    }

                .styler_title {
                    font-size: 11px;
                    font-weight: bold;
                    margin-bottom: 3px;
                }

                .wpc_styler_toggle {
                    width: 40px;
                    height: 40px;
                    display: block;
                    position: absolute;
                    top: 0px;
                    right: -40px;
                    background: #202020;
                    cursor: pointer;
                    -webkit-box-shadow: 0 2px 9px 2px rgba(0, 0, 0, 0.14);
                    -moz-box-shadow: 0 2px 9px 2px rgba(0, 0, 0, 0.14);
                    box-shadow: 0 2px 9px 2px rgba(0, 0, 0, 0.14);
                }

                    .wpc_styler_toggle i {
                        font-size: 20px;
                        color: #FFF;
                        padding: 9px 10px;
                    }

                    .wpc_styler_toggle.close {
                        left: 0px;
                    }

                .styler_note {
                    line-height: 17px;
                    font-size: 11px;
                }

                .styler_bgcolors a img, .styler_colors a img, .styler_patterns a img {
                    width: 24px;
                    height: 24px;
                    margin: 0px 4px 6px 0px;
                    display: inline-block;
                }

                .styler_patterns a.item-element, .styler_colors a.item-element, .styler_bgcolors a.item-element {
                    width: 24px;
                    height: 24px;
                    margin: 0px 4px 4px 0px;
                    display: block;
                    display: inline-block;
                    overflow: hidden;
                }

                .styler_colors a {
                    border: 2px solid #FFF;
                }

                    .styler_patterns a.active, .styler_colors a.active, .styler_bgcolors a.active {
                        width: 24px;
                        height: 24px;
                        border: 2px solid #404040;
                    }

                .styler_images img {
                    width: 24px;
                    height: 24px;
                    display: inline-block;
                }

                .ui-slider-vertical {
                    height: auto;
                    width: auto;
                    background: none;
                    border: none;
                    opacity: 1;
                }

                .wpc-custom-color-picker {
                    width: 100%;
                    height: 24px;
                    padding: 2px;
                    background: rgba(0,0,0,0.5);
                    border: 2px solid #404040;
                }

                .wpc_styler_switcher {
                    width: 200px;
                    float: left;
                    text-align: center;
                }

                .wpc_styler_wrapper {
                    width: 200px;
                    float: right;
                    background: #fff;
                }

                .wpc_styler_switcher a img {
                    margin: 5px 0px 20px;
                    display: block;
                    -webkit-box-shadow: 0 0px 9px 0px rgba(0, 0, 0, 0.3);
                    -moz-box-shadow: 0 0px 9px 0px rgba(0, 0, 0, 0.3);
                    box-shadow: 0 0px 9px 0px rgba(0, 0, 0, 0.3);
                }

                    .wpc_styler_switcher a img:hover {
                        opacity: 0.7;
                        display: block;
                    }

                .styler_switcher_content {
                    padding: 10px;
                }

                .styler_layout a {
                    font-size: 12px;
                    text-transform: uppercase;
                    padding: 6px 20px;
                    text-decoration: none;
                    color: #666;
                    border: 1px solid #eee;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    display: inline-block;
                }

                    .styler_layout a.wide-layout {
                        margin-right: 10px;
                    }

                    .styler_layout a.active {
                        background: #f0f0f0;
                        border-color: #ccc;
                    }
}
