/**
 * @version    $Id$
 * @package    IT_Theme_Framework
 * @author     InnoThemes Team <support@innothemes.com>
 * @copyright  Copyright (C) 2012 InnoThemes.com. All Rights Reserved.
 * @license    GNU/GPL v2 or later http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Websites: http://www.innothemes.com
 */

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

//= Import Variables & Mixins
@import "variables";
@import "mixins";

/* General */
*:before,
*:after {
    .box-sizing;
}
.jsn-master .jsn-bootstrap input[type="text"],
.jsn-master .jsn-bootstrap input[type="password"],
.jsn-master .jsn-bootstrap input[type="number"],
.jsn-master .jsn-bootstrap input[type="search"],
.jsn-master .jsn-bootstrap input[type="email"],
.jsn-master .jsn-bootstrap input[type="url"] {
    .box-sizing;
    .box-shadow(none);
}
.jsn-master .jsn-bootstrap input:not([type="radio"]), 
.jsn-master .jsn-bootstrap textarea, 
.jsn-master .jsn-bootstrap select {
    border: 1px solid @thumbnail-border !important;
    .border-radius(0) !important;
    .font-size(11px);
}
.jsn-master .jsn-bootstrap input,
.jsn-master .jsn-bootstrap textarea,
.jsn-master .jsn-bootstrap select {
    .box-shadow(none);
    &:focus {
        border-color: darken(@gray-light, 6.8%) !important;
        color: darken(@gray-light, 6.8%);
    }
}
#it-theme-options ul,
#it-theme-options ol {
    .margin(0);
}
#it-theme-options [id*="google_analytics_id"],
#it-theme-options [id*="code_at_end_of_head"],
#it-theme-options [id*="code_at_end_of_body"],
#it-theme-options [id*="search_box_text"],
#it-theme-options [id*="copyright_text"],
#it-theme-options [id*="side_tabs_text"],
#it-theme-options [id*="coming_soon_page_text"],
#it-theme-options [id*="404_page_text"] {
    .margin-bottom(20px);
}
#it-theme-options i.it-loading {
    background: url("../images/icons-16/icon-16-loading-circle.gif") no-repeat !important;
    &:before {
        content: "";
    }
}
#it-theme-options #it-form-accordion-general_styling {
    overflow-y: auto !important;
    height: 600px;
}

/* Form Sections */
#it-theme-options .ui-widget {
    font-family: @font-base !important;
    overflow: hidden;
    width: auto;
    .border-radius(0);
    .ui-tabs-nav {
        background-color: @white-color;
        border-bottom: 0;
        border-top: 1px solid @thumbnail-border;
        z-index: @zindex-ui-widget !important;
        .border-radius(0);
            .ui-state-default {
                .box-shadow(none);
                .base-top(0);
                &:hover,
                a:hover {
                    background-color: @thumbnail-border;
                }
                span.it-icon {
                    background-image: url("../images/icons-32/tab-icon.png");
                    background-repeat: no-repeat;
                    width: 32px;
                    height: 32px;
                    display: block;
                    &.star {
                        background-position: 0 -1px;
                    }
                    &.cog {
                        background-position: -41px -1px;
                    }
                    &.extra {
                        background-position: -80px -1px;
                    }
                    &.header {
                        background-position: -117px 0;
                    }
                    &.promo {
                        background-position: -158px 0;
                    }
                    &.main {
                        background-position: -198px 0;
                    }
                    &.bottom {
                        background-position: -238px 0;
                    }
                    &.footer {
                        background-position: -278px 0;
                    }
                }
                .ui-tabs-anchor {
                    border: 0;
                    .border-radius(0);
                    .padding(2px 2.69px);
                }
            }
            .ui-tabs-active .ui-tabs-anchor,
            .ui-tabs-active .ui-tabs-anchor:hover {
                background-color: lighten(@gray, 6.4%);
                border: 0;
            }
            .ui-state-active span.it-icon {
                &.star {
                    background-position: 0 -32px;
                }
                &.cog {
                    background-position: -41px -31px;
                }
                &.extra {
                    background-position: -80px -31px;
                }
                &.header {
                    background-position: -117px -30px;
                }
                &.promo {
                    background-position: -158px -30px;
                }
                &.main {
                    background-position: -198px -30px;
                }
                &.bottom {
                    background-position: -238px -30px;
                }
                &.footer {
                    background-position: -278px -30px;
                }
            }
    }
    .ui-tabs-panel {
        border: 0;
        .border-radius(0);
        .padding(0);
        legend {
            background-color: lighten(@gray, 6.4%);
            border-bottom: 1px solid #eee;
            color: @white-color;
            font-weight: 600;
            line-height: 40px;
            width: 100%;
            .font-size(1.1em);
            .margin(0);
            .padding(0 10px);
            .box-sizing;
            a[class^="icon-"] {
                color: @white-color;
                cursor: pointer;
                .margin-top(4px);
                .font-size(0.8em) !important;
                &:hover {
                    color: @gray-light;
                }
            }
            .it-form-fieldset-state-switcher {
                .float(right);
                .margin-top(7px);
                a.btn {
                    text-transform: uppercase;
                    .font-size(11px);
                    .padding(4px 8px);
                }
            }     
        }
        .it-getting-started {
            .padding(15px);
            ul li {
                text-align: center;
            }
            hr {
                .margin(40px 0);
            }
        }
        .it-form-accordion {
            .ui-accordion-header {
                border-color: @gray-lighter;
                border-style: solid;
                border-width: 0 0 1px;
                color: @gray;
                font-weight: 600;
                .margin(0);
                .padding(10px);
                .border-radius(0);
                .box-shadow(none);
                .ui-accordion-header-icon {
                    display: block;
                    .base-left(auto);
                    .base-right(6px);
                }
                .ui-icon-triangle-1-s {
                    background-position: 0px -16px;
                }
                .ui-icon-triangle-1-e {
                    background-position: -64px -16px;
                }
            }
            .ui-state-active {
                background-color: @white-darker;
                color: @gray;
                .box-shadow(none);
            }
            .ui-accordion-content {
                border-color: @gray-lighter;
                border-right: 0;
                overflow: visible;
                .border-radius(0);
                .margin(0);
                .padding(10px);
                .base-top(0);
                .control-label {
                    cursor: auto;
                    font-weight: 600;
                    width: 100%;
                    .font-size(1em);
                    i.it-form-field-help {
                        .float(right);
                    }
                    i.it-loading {
                        background: url("../images/icons-16/icon-16-loading-circle.gif") no-repeat;
                    }
                }
                label {
                    .font-size(0.9em);
                }
                .row {
                    .margin-left(0);
                    .margin-right(0);
                }
                > [class*="it-form-field-"] {
                    .margin-bottom(20px);
                }
                [class*="it-form-field-"]:last-child {
                    .margin-bottom(0);
                }
            }
        } 
    }
}

/* Radio Images & Checkbox Images */
#it-theme-options {
    .btn {
        .box-shadow(none);
    }
    .it-form {
        .clearfix;
        .pull-left {
            width: 46px;
            .float;
            .margin(3px);
            &:hover {
                cursor: pointer;
            }
        }
        .it-thumbnail {
            border: 3px solid @gray-lighter;
            .border-radius(3px);
            .padding(2px);
            .transition(all 0.7s ease 0s);
            &:hover {
                border-color: #bbb;
            }
        }
        .it-form-field-radio-image-selected,
        .it-form-field-checkbox-image-selected {
            border-color: lighten(@gray, 6.4%);
        }
    }
    #it-form-field-responsive_layout.it-form i {
        color: #888;
        .font-size(1.8em);
        &.it-form-field-checkbox-image-selected {
            color: @black-color;
        }
    }
    .it-form-field-media-selector.input-group .input-group-btn > .btn,
    .it-form-field-color-picker.input-group .input-group-btn > .btn,
    .it-form-field-radio-image-modal.input-group .input-group-btn > .btn,
    .it-form-field-date-picker.input-group .ui-datepicker-trigger {
        .border-left-radius(0);
        .margin-left(-1px);
    }
    .it-form-field-date-picker.input-group {
        .ui-datepicker-trigger {
            line-height: 1.4;
        }
        .form-control.hasDatepicker {
            width: 246px;
            .margin(0);
        }
    }
    .it-form-field-column-settings {
        text-align: center;
        .thumbnails {
            overflow: hidden;
            .margin(0 auto);
            li {
                .float;
                .margin(0 7px 0 0);
                .thumbnail {
                    line-height: 20px;
                    .margin-bottom(0);
                }
                .ui-resizable-handle {
                    width: 7px;
                    .base-right(-7px);
                }
            }
            li.last-column {
                .margin(0);
                .thumbnail {
                    line-height: 20px;
                    .margin-bottom(0);
                }
            }
        }
        .it-form-field-column-settings-grid-preview {
            display: none;
            .position;
            div {
                background-color: lighten(@gray, 6.4%);      
                width: 4px;
                z-index: 99;
                .opacity(.33);
                .position(absolute);
            }
        } 
    }
}

/* Social Chanel */
#it-theme-options .it-form-field-social-channels {
    .it-sortable-list {
        width: 100%;
        .it-item {
            border: 0;
            border-left: 2px solid;
            .margin(0 0 1px);
            .padding(6px 10px);
            &:hover {
                background-color: #eef4f7;
            }
            input.checkbox {
                .margin-top(1px);
            }
        }
    }
    .btn {
        width: 40px;
        .margin-top(10px);
    }
}

/* Font Selector */
#it-theme-options {
    .chzn-container {
        border: 0;
        .padding(0);
        width: 100% !important;
        .margin-bottom(5px) !important;
        .chzn-single {
            background: none;
            border: 1px solid @thumbnail-border;
            height: 30px;
            line-height: 28px;
            .border-radius(0);
            .box-shadow(none);
        }
        .chzn-single div {
            border-left: 1px solid @thumbnail-border;
            .padding(4px 2px 0 10px);
        }
        .chzn-drop {
            border-color: @thumbnail-border;
        }
    }
    .chzn-container-active .chzn-single {
        .chzn-container .chzn-single;
    }
}

/* Font Attributes */
#it-theme-options {
    .it-form-field-typography {
        .it-form-field-color-picker {
            input {
                display: none;
            }
            .input-group-btn .btn {
                border-color: @thumbnail-border;
                .border-radius(0);
                .margin-left(5px);
                .padding(6px 10px);
            }
        }
        .it-form-field-typography-font-size {
            width: 40% !important;
        }
        .it-form-field-typography-font-display {
            width: 45% !important;
            .margin-left(5px);
        }
    }
    [id*="_font_attributes"].it-form-field-typography  [class*="it-form-field-typography-font-"] {
        .float;
    }
}

/* Modal */
.ui-dialog {
    border: 0;
    z-index: @zindex-ui-widget !important;
    .border-radius(0);
    .box-shadow(0 3px 10px rgba(0, 0, 0, 0.3));
    .padding(0);
    .ui-dialog-titlebar {
        border-bottom: 1px solid darken(@white-color, 6.4%);
        .ui-dialog-title {
            font-weight: 300;
            .padding(10px 0);
        }
        .ui-button {
            background: none;
            border: 0;
            .box-shadow(none);
            .margin-top(-15px);
        }
    }
    .ui-dialog-content {
        .padding(10px);
        ul {
            .margin(0);
        }
    }
    .it-radio-image-modal ul.thumbnails,
    .it-radio-image-modal ul.thumbnails li {
        .margin-left(0);
    }
    #it-install-sample-data-modal {
        .alert {
            border: 1px solid;
            .border-radius(4px);
            .padding(10px);
        }
        .alert-warning {
            background-color: #FCF8E3;
            border-color: #FBEED5;            
        }
        .alert-error {
            background-color: #F2DEDE;
            border-color: #EED3D7;
        }
        .label {
            color: #fff;  
            font-weight: bold;
            .border-radius(3px);
            .font-size(0.85em);
            .padding(2px 4px);
        }
        .label-important {
            background-color: #B94A48;
        }
        .label-success {
            background-color: #5cb85c;
        }
        .it-toolbar {
            text-align: center;
            .margin-top(30px);
        }
        ul li {
            list-style: inside;
        }
        ol li {
            .btn {
                border-color: @gray-lighter;
                text-decoration: none;
                .box-shadow(none);
            }
        }
        input[type="file"] {
            height: 30px;
            .margin(10px 0);
            .padding(0);
            .box-sizing;
        }
        .it-install-sample-data-failure-message h3 {
            color: #444;
            font-weight: bold;
            .margin(20px 0);
        }
        label {
            display: inline-block;
            padding-right: 10px;
            white-space: nowrap;
        }
    }
    #it-social-channels-modal {
        .form-horizontal {
            overflow: hidden;
        }
        label {
            text-align: right;
            .font-size(0.9em);
        }
    }
}

/* Override WordPress style */
.wp-full-overlay-sidebar {
    .wp-full-overlay-sidebar-content {
        overflow: hidden;
    }
}

/* Bootstrap v3.1.0 IT Custom */
// Grid System
// -----------
.jsn-master .jsn-bootstrap .row {
    .clearfix;
    .make-row();
}
.make-grid-columns-float(xs);
.make-grid(@grid-columns, xs, width);
// Restyle and baseline non-control form elements.
.jsn-master .jsn-bootstrap {
    fieldset {
        border: 0;
        min-width: 0;
        .padding(0);
        .margin(0);
    }
    label {
        display: inline-block;
        font-weight: bold;
        .margin-bottom(8px); 
    }
    input[type="radio"],
    input[type="checkbox"] {
        .margin(0);
    }
    input[type="file"] {
        display: block;
    }
    .form-control {
        display: block;
        width: 100%;
        height: @input-height-base;
        padding: @padding-base-vertical @padding-base-horizontal;
        font-size: @font-size-base;
        line-height: @line-height-base;
        color: @input-color;
        background-color: @input-bg;
        background-image: none;
        border: 1px solid @input-border;
        .border-radius(4px);
        .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
    }
    .radio,
    .checkbox {
        display: block;
        min-height: @line-height-computed;
        .margin-top(10px);
        .margin-bottom(10px);
        .padding-left(20px);
        label {
            display: inline;
            font-weight: normal;
            cursor: pointer;
        }
    }
    .radio input[type="radio"],
    .radio-inline input[type="radio"],
    .checkbox input[type="checkbox"],
    .checkbox-inline input[type="checkbox"] {
        .float;
        .margin-left(-20px);
    }
    .radio + .radio,
    .checkbox + .checkbox {
        .margin-top(-5px);
    }
    .radio-inline,
    .checkbox-inline {
        display: inline-block;
        vertical-align: middle;
        font-weight: normal;
        cursor: pointer;
        .padding-left(20px);
        .margin-bottom(0);
    }
    .radio-inline + .radio-inline,
    .checkbox-inline + .checkbox-inline {
        .margin-top(0);
        .margin-left(10px);
    }
    input[type="radio"],
    input[type="checkbox"],
    .radio,
    .radio-inline,
    .checkbox,
    .checkbox-inline {
        &[disabled] {
            cursor: not-allowed;
        }
    }
    .input-sm {
        .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
    }
    textarea.input-sm {
        height: auto;
    }
    .input-lg {
        .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
    }
    .form-horizontal {
        .control-label,
        .radio,
        .checkbox,
        .radio-inline,
        .checkbox-inline {
            .margin-top(0);
            .margin-bottom(0);
            padding-top: (@padding-base-vertical + 1);
        }
        .radio,
        .checkbox {
            min-height: (@line-height-computed + (@padding-base-vertical + 1));
        }
        .form-group {
            .clearfix;
            .margin-bottom(15px);
            .make-row();
        }
        .form-control-static {
            padding-top: (@padding-base-vertical + 1);
        }
    }
    //= Button
    .btn {
        display: inline-block;
        font-weight: @btn-font-weight;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        .margin-bottom(0);
        .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
        .user-select(none);
        &:focus {
            .tab-focus();
        }
        &:hover,
        &:focus {
            color: @btn-default-color;
            text-decoration: none;
        }
        &:active,
        &.active {
            outline: 0;
            background-image: none;
            .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
        }
        &.disabled,
        &[disabled],
        fieldset[disabled] .btn {
            cursor: not-allowed;
            pointer-events: none;
            .opacity(.65);
            .box-shadow(none);
        }
    }
    .btn-default {
        .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
    }
    .btn-primary {
        .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
    }
    .btn-success {
        .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
    }
    .btn-danger {
        .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
    }
    .btn-sm {
        .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
    }
    .btn-group,
    .btn-group-vertical {
        display: inline-block;
        vertical-align: middle;
        .position;
        > .btn {
            .position;
            .float;
            &:hover,
            &:focus,
            &:active,
            &.active {
                z-index: 2;
            }
            &:focus {
                outline: none;
            }
        }
    }
    .btn-group {
        .btn + .btn,
        .btn + .btn-group,
        .btn-group + .btn,
        .btn-group + .btn-group {
            .margin-left(-1px);
        }
    }
    .btn-toolbar {
        margin-left: -5px; 
        &:extend(.clearfix all);
        .btn-group,
        .input-group {
            .float;
        }
        > .btn,
        > .btn-group,
        > .input-group {
            .margin-left(5px);
        }
    }
    .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
        .border-radius(0);
    }
    .btn-group > .btn:first-child {
        margin-left: 0;
            &:not(:last-child):not(.dropdown-toggle) {
            .border-right-radius(0);
        }
    }
    .btn-group > .btn:last-child:not(:first-child),
    .btn-group > .dropdown-toggle:not(:first-child) {
        .border-left-radius(0);
    }
    .btn-group > .btn-group {
        .float;
    }
    .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
        border-radius: 0;
    }
    .btn-group > .btn-group:first-child {
        > .btn:last-child,
        > .dropdown-toggle {
            .border-right-radius(0);
        }
    }
    .btn-group > .btn-group:last-child > .btn:first-child {
        .border-left-radius(0);
    }
    .btn-group .dropdown-toggle:active,
    .btn-group.open .dropdown-toggle {
        outline: 0;
    }
    .btn-group-sm > .btn { 
        .btn-sm();
    }
    // Input Groups
    .input-group {
        display: table;
        border-collapse: separate;
        .position;
        &[class*="col-"] {
            .float(none);
            .padding-left(0);
            .padding-right(0);
        }

        .form-control {
            width: 100%;
            display: table-cell;
            .float;
        }
    }
    .input-group-sm > .form-control,
    .input-group-sm > .input-group-addon,
    .input-group-sm > .input-group-btn > .btn { 
        .input-sm(); 
    }
    .input-group-btn {
        display: table-cell; 
        font-size: 0;
        vertical-align: middle;
        white-space: nowrap;
        width: 1%;
        .position;
        > .btn {
            .position;
            + .btn {
                .margin-left(-1px);
            }
            &:hover,
            &:focus,
            &:active {
                z-index: 2;
            }
        }
        &:first-child {
            > .btn,
            > .btn-group {
                .margin-right(-1px);
            }
        }
        &:last-child {
            > .btn,
            > .btn-group {
               .margin-left(-1px);
            }
        }
    }
    // Thumbnail
    .thumbnail {
        display: block;
        line-height: @line-height-base;
        background-color: @thumbnail-bg;
        border: 1px solid @thumbnail-border;
        .border-radius(@thumbnail-border-radius);
        .padding(@thumbnail-padding);
        .margin-bottom(@line-height-computed);
        .transition(all .2s ease-in-out);
        .caption {
            padding: @thumbnail-caption-padding;
            color: @thumbnail-caption-color;
        }
    }
    .hide {
        display: none;
    }
}