@import "variables.less";
@import "mixins.less";
    
/* Messages */
.spyropress-messages {
    border: 1px solid #fff;
    padding: 16px 35px 10px 14px;
    color: #fff;
    position: relative;

    .message-sub-header {
        margin: 1em 0;
        color: #fff;
        font-size: 1.3em;
    }
    li:first-child .message-sub-header {
        margin-top: 0;
    }
}
.spyropress-success, .badge-success {
    background-color: #01A31C;
    border-color: #01A31C;
}

.spyropress-notices {
    background-color: #2D89F0;
    border-color: #2D89F0;
}

.spyropress-errors, .badge-error {
    background-color: #D44A26;
    border-color: #D44A26;
}

.badge-success, .badge-error {
    color: #fff;
    display: inline;
    padding: 2px 5px;
    text-align: center;
    .border-radius(4px);
} 

/* ajax message css */
.ajax-message {
    position: absolute;left: 50%;width:220px;z-index: 100;display: none;
    overflow: visible;height: 116px;margin-left:-110px;
    
    .message {
        padding: 30px;z-index: 33;position: relative;font: 23px/28px Georgia;text-align: center;border:1px solid #1D692D;
        .box-shadow(inset 0 1px 1px #94DDA6, 0 1px 2px rgba(0, 0, 0, 0.61));
        .border-radius(4px);
        .gradientBar(#5dbb73, #2d9047, @white, '0 1px 2px #114A1E, 0 1px 0 #114A1E');
        *background-color: #5DBB73;
        .reset-filter();
        
        &.warning {
            border-color:#7D180A;
            .box-shadow(inset 0 1px 1px #FB926A, 0 1px 2px rgba(0, 0, 0, 0.61));
            .border-radius(4px);
            .gradientBar(#ef6638, #b62918, @white, '0 1px 2px #6F1C0E, 0 1px 0 #6F1C0E');
            *background-color: #C54224;
            .reset-filter();
        }
    }
}

/* Buttons **************************************/

.button-green, .button-red {
    border:1px solid #eee;
    padding: 3px 6px;
    outline: none;cursor: pointer;text-decoration: none;
    .border-radius(4px);
    .reset-filter();
}
/* Button Styles */
.button-green {
    border-color:#1D692D;
    .box-shadow(inset 0 1px 1px #94DDA6, 0 1px 2px rgba(0, 0, 0, 0.61));
    .gradientBar(#5dbb73, #2d9047, @white, '0 1px 0px #777');
    *background-color: #5DBB73;
    .buttonHover(#68ce80, #3cae5a, @white, '0 1px 0px #777');

}

.button-red {
    border-color:#7D180A;
    .box-shadow(inset 0 1px 1px #FB926A, 0 1px 2px rgba(0, 0, 0, 0.61));
    .gradientBar(#ef6638, #b62918, @white, '0 1px 2px #6F1C0E, 0 1px 0 #6F1C0E');
    *background-color: #C54224;
    .buttonHover(#ed754e,#c93e23, @white, '0 1px 2px #6F1C0E, 0 1px 0 #6F1C0E');
}

/* Buttons Sizes */
.button-large {
    height: 30px;
    line-height: 28px;
    padding: 0 12px 2px;
}
.button-xlarge {
    font-size: 20px;
    line-height: 2;
    padding: 0 2em;
}

.pull-left {
    float: left;
}
.pull-right {
    float: right;
}

// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

// Fix 100% width
.chosen-container, .chosen-drop, .chosen-drop .chosen-search, .chosen-drop .chosen-search input {
    width: 100% !important;
    .box-sizing(border-box);
}
    
/* spyropress wrapper */
.spyropress-wrap {
    position: relative;

    h1 {
        font-size:37px;font-weight:700;color: #333;text-shadow:0 0 1px #888;line-height: 1;
    }

    .icon32 {
        margin-top: 1px;
    }

    .teaser-text {
        font:24px/1.4em "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif;
        margin: 0 200px 1.6em 0;color: #777;
    }
    
    .wp-badge {
        background: url(../img/wp-badge.png);float: right;color: #333;text-shadow: none;
        padding: 160px 0 13px;height: auto;width: 173px;box-shadow: none;
    }
}

.about-text .text-small {font-size: 17px;line-height: 1.6em;margin: 0.6em 0 1em;}

/* Pages ***********************************/

/* Dashboard */
.spyropress-wrap {
    
    /* Theme Verifier */
    .welcome-panel {
        margin: 20px 0;
    }
    
    #dashboard-widgets, a.rsswidget {
        font-size: 11px;
    }
    
    #dashboard-widgets {
        margin: 0 -8px;
    }
    .postbox-container .postbox {
        margin: 0 8px 20px;
    }
    .postbox ul {
        margin-bottom: 0;
    }
    .postbox .inside {
        margin: 0;padding-bottom: 0;
    }
}

/* Theme Updater */
.spyropress-changelog ul {
    list-style: disc;margin-left: 30px;font-size: 13px;
}
.theme-update-screenshot {
    width:250px;float:left;margin:0 20px 20px 0;border:1px solid #ddd;
}

/* More Themes */
.store-item {
    cursor: pointer;overflow: hidden;float:left;width:30%;margin:0 3% 25px 0;
    .box-shadow(0 0 0 5px #323232);

    .item-thumb img {
        max-width: 100%;display: block;
    }

    h3 {
        margin: 3px 0 7px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;
    }

    .item-detail {
        overflow: hidden;background: #464646;padding: 7px 15px 5px;color: #eee;
        .box-shadow(inset 0 3px 2px rgba(0, 0, 0, 0.3));
    }
    .item-meta {
        float: left;overflow: hidden;

        strong {
            font-size:20px;float: left;padding-top:10px;margin-right: 30px;font-weight: normal;
            
            &:last-child {
                margin-right:0
            }
        }

        i {
            background: url(../img/store-icons-sprites.png) no-repeat;float: left;
            width: 32px;height: 31px;position: relative;margin-right: 5px;top:-10px;

            &.item-cost {background-position:0 -33px;}

        }
        span {
            font-size: 13px;color: #ddd;
        }
    }
}

/* Common Styles ***********************************/
.ui-slider-horizontal .ui-slider-handle {
    margin-left: -11px;top: -10px;
}
.section-reset {
    position: absolute;top: 0;right: 0;
}

.pb10 {
    padding-bottom:10px;
}

.mt15 {
    margin-top: 15px;
}
strong.sub {
    display: block;margin-bottom: 10px;
    
    span {
        font-weight: normal;
        font-style: italic;
    }
}
    
.section {
    border-bottom: 1px solid #DDE2E5;margin-bottom:15px;padding-bottom: 15px;position: relative;
    .clearfix();
    
    // Structure
    h3.heading, label.heading {
        font-size:1.1em;margin:0 0 10px;color: #333;display: block;font-weight: bold;
        line-height: 1.4;
    }
    
    .controls {
        float: left; width: 60%;
    }
    .description {
        background: url(../img/icon-info.png) no-repeat 0 7px;width: 35%;padding:5px 0 5px 20px;
        float: right;font-size: 11px; color: #666;font-style: italic;
        .box-sizing(border-box);
    }
    
    // Text, Textarea and Text Editor Field
    .field {
        width: 100%;font-size: 14px;padding: 8px 10px;outline: none !important;background: white;color: #555;
        margin-bottom: 0;height: auto;line-height: 15px;
        .border-radius(4px);
        .box-sizing(border-box);
        
    }
    
    .field, .field:focus, .field:active {
        border: 1px solid #B7B7B7;
        .box-shadow(inset 0 2px 3px #CCC, 0 1px 0 #F4FFF6);
    }
    
    // Checkbox Field
    .checkbox {
        color: #555;font-style: italic;display: block;margin-bottom: 4px;background: none;border: 0;
        input {
            .opacity( 0.6 );margin: 1px 4px 1px 1px;
        }
    }
    
    // Radio Image List
    &-radio-img {
        label {
            margin:6px 0;display: inline-block;padding: 10px;vertical-align: middle;
            
            &.selected, &.selected:hover {
                background-color: #e8e8e8;
                
                img {
                    border-color: #C9C9C9
                }
            }
            
            &:hover {
                background-color: #f5f5f5;
            }
        }
        
        input {
            display: none;
        }
        
        img {
            border: 4px solid #e9e9e9;
            width: 100%;
            .box-sizing(border-box);
        }
        span {
            display: block;text-align: center;font-size: 11px;font-weight: bold;
        }
    }
    
    // Selectbox
    select {
        width: 100%;
    }
    
    // Single Chosen
    .chosen-container-single { 
        .chosen-single {
            font-size: 14px;
            padding:4px 10px;
            outline: none;
            border-color:#B7B7B7;
            color: #555;
            
            abbr {
                top: 10px;
            }
            div {
                height: 80%;top: 4px;
            }
        }
        
        &.chosen-container .chosen-results {
            margin-top: 4px;width: auto;
        }
    }
    
    // Multi Chosen   
    .chosen-container-multi {
        .chosen-choices {
            padding:6px 3px 2px;
            outline: none;
            border-color: #B7B7B7;
            .border-radius(4px);
            .box-shadow(inset 0 2px 3px #CCC, 0 1px 0 #F4FFF6);
            
            .search-field input {
                height: auto;padding: 6px;color: #555;
            }
        }
        
        &.chosen-container .chosen-drop {
            margin-top: -4px;
        }
    }
    
    // Range-Slider
    .range-slider {
        
        .field, .slider {
            float: left;
            .box-sizing(border-box);
        }
        .field {
            width: 21%;float:right
        }
        
        .slider {
            width: 75%;
            display: block !important;
        }
    }
    
    // Editor
    .wp_themeSkin table.mceLayout {
        background: #fff;
    }
    
    // Slider List
    &.section-padder {
        .range-slider .slider {
            width: 90%;
        }
    }
    
    &.section-slider {
        .range-slider .slider {
            margin-top: 19px;
        }
    }
    
    // border
    &.section-border {
        .range-slider .slider {
            width: 97%;
        }
    }
    
    // Colorpicker
    .color-picker {
        .field {
            width: 91.5%;float: left;
        }
        
        .color-box {
            background: #FAFAFA;float: left;width:31px;height:31px;position: relative;top: 1px;
            border: 1px solid #ccc;border-color: #ccc #eee #eee #ccc;margin-left: 4px;
            .border-radius(4px);
            
            div {
                background: #fafafa;width: 18px;height: 18px;position: absolute;left: 5px;top: 5px;
                border: 1px solid #bbb;border-color: #eee #ccc #ccc #eee;
                .box-shadow(1px 1px 0px #ccc);
            }
        }
    }
    
    // Uploader
    .uploader {
        .field {
            width:85%;float: left;
        }
        
        .button-secondary {
            float: left;margin:4px 0 0 2%;padding: 1px 8px;font-weight: bold;height: auto;
            width: 12%;
        }
    }
    
    // Section Full Width
    &.section-full {
        .controls {
            float: none;width: 100%;margin-bottom: 7px;
        }
        
        .description {
            float: none;width: 95%;clear: both;
        }
    }
    
    // Typography
    &.section-typography {        
        .range-slider .slider {
            width: 80%;margin: 5px 0 0 7px;
        }
        
        .advance-settings {
            display: block;margin-bottom:7px;
        }
        
        .font-preview {
            display: block;width: auto;right: 0;height: auto;
            padding: 20px;margin: 10px 0;border: 2px dashed #ccc;
            .border-radius(3px);
        }
    }
        
    // Section Info
    &.section-info {
        border-bottom: none; padding:0;
        
        h3.heading, label.heading {
            background: #F6D643 url(../img/icon-section-info.png) no-repeat 4px 3px;margin-bottom: 0 !important;padding: 10px 0 12px 40px;
        }
        .description {
            background: #FAE689;width: 100%;color: #333;padding: 0 !important;font-size: 12px;
        }
        .description .pad {
            padding:10px
        }
    }
    
    // Sub-Heading
    &.section-subheading {
        margin: 15px -20px;border: 0;padding: 10px 20px;
        #gradient > .vertical(#263038, #263038);
        *background-color: #263038;
        .reset-filter();
        
        * {
            color: #fff !important;
        }
        h3.heading, label.heading {
            margin:0 0 4px;
        }
        .description {
            float: none;background: none;padding: 0;width: 90%;
        }
    }
    
    &.section-typography, &.section-border {
        .color-picker .field {
            width: 75%;
        }
    }
}


// Bg Patterns List
#bg_patterns, #bg_patterns li {
    float: left;margin: 0;
}
.section-pattern label {
    padding:5px;margin:5px;float: left;
    img { width:55px;height: 55px; display: block; }
}

// Uploader Screenshot
.uploader .screenshot {
    float: right;margin-left: 1px;position: relative;width: 344px;
    
    img {
        float: right;max-width: 334px;padding: 4px;border: 1px solid #ccc;background: #fafafa;border-color: #ccc #eee #eee #ccc;
        .border-radius(4px);
    }
    
    a {
        text-decoration: none;padding-left: 20px;
        
        &.remove-media {
            background: url(../img/icon-delete.png) no-repeat 0 0;
            text-indent: -9999px;float: left;padding: 0;border: none;z-index: 11;
            display: block;height: 16px;width: 16px;position: absolute;bottom: -4px;right: -4px;
        }
    }
}

// Section Toggler
.toggle_set {
    .toggle_trigger {
        position: relative;cursor: pointer;
        
        h3 { cursor: pointer !important }
        
        .toggle_icon {
            position: absolute;top:10px;right: 12px;color: #464646;font: bold 16px/1 Georgia;text-shadow: 0 0 1px #fff
        }
    }
        
    .toggle_container {
        &.inactive { display: none;}
        &.active { display: block !important }
    }
}

// Section Repeater
.section.section-repeater {
    
    // button-add
    .repeater-add {
        font-size: 14px;
        font-weight: bold;
        display:block;
        height: auto;
        padding: 5px;
        width:100%;
    }
    
    .section {
        border: 0;margin: 0;padding-bottom: 7px;       
        
        h3.heading, label.heading {
            font-size: 12px
        }
        
        .controls.ui-sortable {
            background: #fff;
        }
    }
    
    .tocopy {
        display: none;
    }
    
    .repeater-group {
        border: 1px solid #b7b7b7;
        padding: 0 20px;
        margin-bottom: 15px;
        
        &.inactive .repeater-sections { display: none; }
        &.active .repeater-sections { display: block; }
    }
    
    .repeater-group-header {
        background: #f5f5f5;
        border-bottom: 1px solid #b7b7b7;
        cursor: pointer;
        font-weight: bold;
        margin: 0 -20px;
        padding: 10px;
    }
        
    .repeater-sections {
        padding-top: 10px;
    }
    
    .repeater-delete, .repeater-close {
        color: #21759b;border-bottom:1px solid #21759b;text-decoration: none;padding: 1px 2px;
    }
    .repeater-close:hover {
        color: #fff;background-color: #21759b;
    }
    .repeater-delete {
        color: #f00;border-bottom-color:#f00;
    }
    .repeater-delete:hover {
        color: #fff;background-color: #f00;
    }
}

/* Panel *******************************************/
.spyropress-panel {
    margin-top: 40px;
    .box-shadow(0 0 12px #999);
    
    form {
        position: relative;margin: 0;
    }
    form > .panel-header {
        border-bottom:1px solid #0379B8;position: relative;z-index:3;
        .gradientBar(#64B7ED, #387DDC, @white);
        *background-color: #387DDC;
        .reset-filter();
        .border-radius(4px 4px 0 0);
        .box-shadow(0 0 0 1px #64B7ED);
    }
    form > .panel-footer {
        padding:15px;z-index: 3;position: relative;
        .gradientBar(#242F35, #192126, @white);
        *background-color: #192126;
        .reset-filter();
        .box-shadow(0 0 0 1px #192126);
        .border-radius(0 0 4px 4px);
        
        &.panel-fixed {
            border-radius: 0;z-index: 11;
        }
    }
    
    .panel-body {
        background: #fff;
        min-height:550px;position: relative;
        .box-shadow(0 0 0 1px #AAA);
    }
    
    .panel-nav {
        position: absolute;top:1px;bottom:1px;left: 0;z-index: 99;width:21.1%;border-right: 1px solid #DDE2E5;min-width:21.1%;
    }
    
    .panel-content {
        margin-left: 21.2%;
        
        &-inner {
            padding:16px 20px
        }
    }
    
    .button-red, .button-green {
        padding: 5px 10px;
    }
    
    /* panel-logo */
    .panel-logo {
        margin: 20px 10px 5px;
        a {
            display: block;background: url(../img/sp-logo.png);width: 95px;height: 34px;
        }
    }
    
    /* panel-info */
    .panel-info {
        margin: 16px 10px 5px;
        
        .info {
           float:right;line-height: 15px;text-transform: uppercase;text-align: right;color: #fff;text-shadow:0 1px 2px rgba(0, 0, 0, 0.4);clear:both;
        
            &.theme {
                font-size: 15px;font-weight: bold;
            }
        }
        
        .theme-links {
            float: right;clear: both;margin: 2px 0 0;
            
            li {
                float: left;margin: 0;
                
                a {
                    color: #fff;font-size: 11px;text-decoration: none;
                    
                    &:hover {text-decoration: underline;}
                }
                
                span {padding: 0 4px;font-weight: bold;}
            }
        }
    }
}

/* panel nav */
.panel-nav ul {
    margin: 0;padding: 16px 8px;
    
    li {
        margin-bottom: 4px;
    
        a {
            display:block;font-weight: bold;font-family: sans-serif;text-decoration: none;padding:7px;color: #343D42;
            
            &.selected, &:hover {
                .gradientBar(#263038, #263038, @white);
                *background-color: #263038;
                .reset-filter();
                .border-radius(3px);
            }
            
            span {
                padding-right: 15px;
            }
            
            &:hover {
                background: #EBF4F5;color: #333;text-shadow: none;
                
                span {
                    background-image: url('../img/module-icons-black.png');
                }
            }
        }
    
        &.separator {
            margin: 30px 0;border-bottom: 1px solid #E4E4E4;
        }
    }
}

/* MetaBox */
.spyropress-panel-meta {    
    .section {
        h3 {
            background: none;
            border: 0;
            font-size: 1em !important;
            font-weight: bold !important;
            margin: 0 0 5px !important;
            padding: 0 !important;
        }
    }
    
    .panel-body {
        padding: 0 5px;
    }
    
    .section.section-subheading {
        margin: 15px -17px;
    }
}

/* MetaBox Tabs */
.panel-tabs {
    padding: 7px 9px 0;margin: -6px -12px 20px;background: #F9F9F9;border-top: 1px solid white;overflow: hidden;
    .box-shadow(inset 0 -1px 0 0 #D5D5D5);
    
    ul, li {
        float: left;margin: 0;padding: 0;
    }
    li {
        margin-right: 7px;
        
        a {
            padding:9px ;line-height: 16px;background: #F1F1F1;color: #555;font-size: 0.9em;outline: none;
            border: 1px solid #D5D5D5;text-shadow: 0 1px 1px white;float: left;text-decoration: none;
            .border-radius(3px 3px 0 0);
            .box-shadow(inset 0 1px 0 1px rgba(255, 255, 255, 0.5));
            
            .span {
                padding-right:6px;
            }
        }
        
        &.open a {
            background-color:#fff;border-bottom-color:#fff;
        }
    }
}

/* Widget */
.widget-liquid-right .widget {
    overflow: visible;
}

.widget-liquid-right .section.section-subheading {
    margin: 15px -13px;
}
.widget-liquid-right {
    .section {
        &.section-subheading {
            margin: 15px -13px;
        }
    }
    
    .toggle_container { display: none; }
}

.debug-bar-maximized #querylist {
    z-index: 99999;
}

/* ICONS */
#menu-posts-bucket.menu-icon-post div.wp-menu-image:before { content: '\f116'; }
#menu-posts-faq.menu-icon-post div.wp-menu-image:before { content: '\f125'; }
#menu-posts-portfolio.menu-icon-post div.wp-menu-image:before { content: '\f116'; }
#menu-posts-staff.menu-icon-post div.wp-menu-image:before { content: '\f110'; }
#menu-posts-slider.menu-icon-post div.wp-menu-image:before { content: '\f161'; }
#menu-posts-testimonial.menu-icon-post div.wp-menu-image:before { content: '\f122'; }
#menu-posts-template.menu-icon-post div.wp-menu-image:before { content: '\f134'; }

/* MODULE ICONS */
[class^="module-icon-"],
[class*=" module-icon-"] {
    display: inline-block;
    line-height: 16px;width:16px;height: 16px;
    vertical-align: text-top;
    background-image: url('../img/module-icons-black.png');
    background-position: 16px 16px;
    background-repeat: no-repeat;
    
    &:hover {
        background-image: url('../img/module-icons-white.png');
    }
}

.module-icon-white {
    background-image: url('../img/module-icons-white.png');
}

.module-icon-general { background-position:-256px -32px }
.module-icon-layout, .module-icon-footer { background-position:-160px -32px }
.module-icon-post { background-position:-192px -32px }
.module-icon-styling { background-position:-95px -32px }
.module-icon-images { background-position:-127px 0 }
.module-icon-seo { background-position:-64px -64px }
.module-icon-social { background-position:1px -130px }
.module-icon-import { background-position:-224px 0 }
.module-icon-docs { background-position:-32px 0 }
.module-icon-support { background-position:-256px -1px }

.module-icon-options { background-position:-256px -32px }
.module-icon-add { background-position:-192px -96px }
.module-icon-delete { background-position:-224px -32px }
.module-icon-grid { background-position:-160px -32px }
.module-icon-left { background-position:-256px -128px }
.module-icon-right { background-position:-288px -128px }
.module-icon-widget { background-position:-185px 8px }

.gallery-item {
    float: left;
    padding: 1px;
    border: 1px solid #ddd;
    margin-left: 10px;
}
.gallery-item img {
    display:block
}
.gallery_holder.clearfix {
    margin-left: -10px;
}

.skin-selector .controls {
    overflow: hidden;margin-left: -10px;
}
.skin-selector label.checkbox {
    float: left;
    margin-left: 10px;
}
.skin-selector label.checkbox > input {
    display: none;
}
.skin-selector .skin-item {
    float: left;display: block;
    width: 70px;height: 70px;
    margin-bottom: 10px;
    position: relative;
}
.skin-selector .skin-item:hover span, .skin-selector .selected .skin-item span {
    display: block;
}
.skin-item span {
    display: none;
    position: absolute;
    width: 100%;height: 100%;
    text-align: center;
    background: rgba(250, 250, 250, 0.56);
    color: #222;
    line-height: 60px;
}
.skin-selector .skin-remove-item.button-red {
    clear: both;
    display: block;
    font-size: 11px;
    text-align: center;
    padding: 2px;
}

.mce-i-spyropress-shortcode-icon {
    background-image: url(../img/shortcode_icon.png) !important;
}