/*!
 * Bootstrap v3.1.0 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */

//
// CSS style sheet containing definitions of classes used ONLY in the content.
// These classes are used in the system controls generated by the Portal engine.
//

// Core variables and mixins
@import (reference) "./Bootstrap/variables.less";
@import (reference) "./Bootstrap/mixins.less";

// Components
.cms-bootstrap {
    @import "Bootstrap/normalize.less";

    @import "CMSComponents/context-menu.less";
    @import "CMSComponents/variant-slider.less";
    @import "CMSComponents/combination-panel.less";
}

// Components which ensure wrapping the 'cms-bootstrap' element themselves
@import "CMSComponents/portal-engine.less";
@import "CMSComponents/webpart-toolbar.less";


// Design mode with "cms-bootstrap" wrapping
// -----------------------------------------
.cms-bootstrap {
    .PageContent { 
        padding: @base-unit;
    }

    // Protect CK Editor from global td padding reset
    .cke_dialog .cke_dialog_contents_body {
        padding: 17px 10px 5px;
    }

    .cke_dialog .cke_dialog_ui_vbox_child {
        padding: 5px 0;
    }

    #CMSHeaderDiv {
        &.LTR {
            * {
                direction: ltr;
                text-align: left;
            }

            .alert i {
                float: left !important;
                padding: 0 (@base-unit * 0.5) 0 0;
            }

            .LeftAlign {
                float: left !important;
            }

            .RightAlign {
                float: right !important;
            }
        }

        &.RTL {
            * {
                direction: rtl;
                text-align: right;
            }

            .alert i {
                float: right !important;
                padding: 0 0 0 (@base-unit * 0.5);
            }

            .LeftAlign {
                float: right !important;
            }

            .RightAlign {
                float: left !important;
            }
        }

        .btn-default {
            background: @btn-default-bg;
            .text-semibold();

            &:hover {
                background: @btn-default-box-shadow;
            }
        }
    }
}

.DesignMode {
    .webpart-error-label {
        padding-top: (@base-unit * 2);
    }
}

.webpart-error-label {
    color: @color-red-70;
    display: block;
}

// Design mode without "cms-bootstrap" wrapping
// --------------------------------------------

// --- General styles ---
.default_width_check {
    width: 1px;
    height: 1px;
}

// Overall styles
body, html {
    height: 100%;
}

.ClearBoth {
    line-height: 1px;
    font-size: 1px;
    clear: both;
    display: block;
    margin: 0;
    padding: 0;
    height: 0;
}

.FloatLeft, .RTL .FloatRight {
    float: left;
    text-align: left;
}

.FloatRight, .RTL .FloatLeft {
    float: right;
    text-align: right;
}

.HiddenButton {
    display: none;
}

.UP {
    position: fixed;
    left: 5px;
    top: 5px;
    background-color: rgb(229, 229, 229);
    padding: 5px 15px 5px 5px;
    z-index: 30000;

    img {
        vertical-align: middle;
        margin-right: 5px;
    }

    span {
        vertical-align: middle;
    }
}

.Watermark {
    color: #c1c1c1;
    background-color: #fdfdfd;
}


.RTL .UP {
    left: auto;
    right: 5px;
    padding: 5px 5px 5px 15px;

    img {
        padding-left: 5px;
    }
}


// HTML5 fixes
.cellpadding_0 td, .cellpadding_0 th {
    padding: 0;
}

.cellspacing_0 {
    border-spacing: 0;
}

// Preview bar
.preview-info {
    top: 0;
    width: 100%;
    text-align: left;
    color: @text-color !important;
    padding: (@base-unit * 0.5) @base-unit;
    border-bottom: solid 1px #a4b2bc !important;
    background-color: #f5faff !important;
}

.preview-info-text {
    color: @text-color;
}

.preview-info-link {
    color: @link-color;
    font-weight: bold;
}


// Attachments
.AttachmentsList {
    border: none;
    padding: 5px;
}

.ClearBorder .AttachmentsList {
    border: none;
    padding: 0;
}

// Editable regions
.CMSEditableRegionEdit {
    border: dashed 1px #888888;
    overflow: hidden;
    margin: 1px;
}

.CMSEditableRegionTitle {
    font-weight: bold;
    display: block;
    padding: 2px 2px 2px 5px;
    background-color: #DDDDDD;
    color: #000000;
}

.RTL .CMSEditableRegionTitle {
    padding: 2px 5px 2px 2px;
}

.CMSEditableRegionTextBox {
    margin: 0;
}

.CMSEditableRegionError {
    color: #ff0000;
    padding: 2px;
}

// Editable Texts
.EditableTextEdit {
    border: dashed 1px #888888;
    overflow: hidden;
    margin: 1px;
}

// Editable text inline mode (without any text)
.cke_textarea_inline {
    min-height: 100px;
}

.cke_editable:focus {
    outline: none;
}

.EditableTextTitle {
    font-weight: bold;
    display: block;
    padding: 4px 2px 4px 5px;
    background-color: #262524;
    background-position: center;
    color: #fff;
    text-decoration: none !important;
}

.EditableTextError {
    color: #ff0000;
    padding: 2px;
    display: block;
}

.EditableImageEdit {
    border: dashed 1px #888888;
    margin: 1px;
    padding: 1px;
    min-height: 23px;

    img {
        padding: 0;
        margin: 0;
    }
}


.EditableImageEditBody {
    min-height: 22px;
}

.ImageSelector {
    min-height: 24px;
}

.EditableImageEdit .ImageSelectorHeader, .EditButtons {
    position: absolute;
    padding: 0;
    margin: 0;
    background-color: #d6d9d6;
}

.EditButtons {
    position: relative;
    float: left;
    margin-right: 5px;
}

.RTL.IE9 .EditableImageEdit .ImageSelectorHeader {
    min-width: 150px;
}

.RTL .EditableTextTitle {
    padding: 2px 5px 2px 2px;
}

.EditableTextTextBox {
    margin: 0;
    color: inherit;
    background-color: inherit;
}

// Edit mode buttons
.CMSEditModeButtonClear {
    clear: both;
    line-height: 0;
    height: 0;
}

// Errors
.WebPartError, .FormControlError {
    padding: 1px;
    border: solid 1px #ff0000;
    position: relative;
    background-color: #ffffff;
}

.DesignMode .WebPartContent .WebPartError {
    padding-top: 25px;
}

.TransformationError {
    padding: 1px;
    border: solid 1px #ff0000;
    display: block;
}

.WebPartErrorTitle, .FormControlErrorTitle {
    font-weight: bold;
}

.InlineControlError {
    border: solid 1px #ff0000;
    padding: 1px;
    margin: 1px;
}

// Overall
.ErrorLabel, .EditingFormErrorLabel {
    color: #ff0000;
    display: block;
    padding-bottom: 10px;
    text-align: left;
}

.AsyncError {
    // eg. when thread is lost (application restart)
    color: #ff0000;
}

.FormPanel .EditingFormLabelCell {
    vertical-align: middle;
    max-width: 300px;
}

.EditingFormValueCell .ExplanationText {
    font-style: italic;
}

.RTL .ErrorLabel {
    text-align: right;
}

.EditingFormInfoLabel {
    display: block;
    padding-bottom: 10px;
    text-align: left;
}

.RTL .EditingFormInfoLabel {
    text-align: right;
}

.InfoLabel {
    display: block;
    margin-bottom: 16px;
    background: none;
}

.LabelsMargin .alert {
    margin: 10px;
}

.EditMenuInfo {
    padding: 6px 10px 6px 10px;
    background-image: none;
    box-shadow: none;
}

.BoldInfoLabel {
    color: #000000;
    display: block;
    padding-bottom: 10px;
    font-weight: bold;
}

fieldset .PageContent {
    padding: 0 4px;
}

// Page Title
.PageTitleImage {
    vertical-align: middle;
    padding: 0 5px 5px 0;
    width: 24px;
    height: 24px;
}

.RTL .PageTitleImage {
    padding: 0 0 5px 5px;
}

// Content new
.ContentNewClasses {
    border: none;
}

.ContentNewClass {
    padding: 5px;
    color: #0000ff;
}

.content-new-link i {
    padding-right: @padding-small-horizontal;
}

.ContentNewClass img, .ContentNewLink img {
    vertical-align: middle;
    padding-right: 8px;
}

.RTL .ContentNewClass img, .RTL .ContentNewLink img {
    padding-left: 8px;
    padding-right: 0;
}

// Content list
.MassAction {
    clear: both;
    padding-top: 15px;
}

// Messaging
.MessagingDialog textarea {
    width: 325px;
    height: 130px;
}

.MessagingDialog .SendMessage {
    padding: 20px 12px 15px;
}

.MessagingDialog .SubjectField {
    width: 325px;
}

.MyMessages .SubjectField {
    width: 98%;
}

.SubjectField {
    width: 280px;
}

.MessagingBox .FieldCaption {
    font-weight: bold;
    padding-right: 5px;
}

.MessagingBox .Field {
    width: 100%;
}

// Forms
.SelectorImageButton {
    cursor: pointer;
    position: relative;
    left: 2px;
    top: 3px;
}

.TextAreaMedium {
    width: 292px;
    height: 200px;
}

.DropDownField {
    width: 294px;
}

.DropDownFieldShort {
    width: 50px;
}

.ListBoxField {
    width: 297px;
    height: 100px;
}

.FieldLabel {
    text-align: left;
    white-space: nowrap;
}

.FieldLabelTop {
    vertical-align: top;
    padding-top: 3px;
}

.RTL .FieldLabel {
    text-align: right;
}

.FormPanel .BottomPadding > td {
    padding-bottom: 10px;
}

.FormPanel .TopAlign > td:first-child {
    vertical-align: top;
    padding-top: 4px;
}

.ContentListBoxLow {
    width: 295px;
    height: 150px;
}

.DesignerListBox {
    width: 100%;
    height: 350px;
}

.FormGroupHeader {
    font-weight: bold;
    display: block;
    padding: 0 10px 2px 2px;
}

.RTL .FormGroupHeader {
    padding: 15px 2px 2px 10px;
}

.FormGroupPadding {
    width: 20px;
}

.EditingFormLabel.Wrap, .FieldLabel .Wrap {
    white-space: normal;
    display: block;
}

.FieldEditor .EditingFormLabel {
    padding-left: 0;
    display: block;
}

.EditingFormCategory {
    font-weight: bold;
    padding-top: 10px;
}

.EditingFormControl {
    border: solid 1px #bbbbbb;
    padding: 3px;
    width: 286px;
}

.EditForm {
    border: solid 1px #cccccc;
    padding: 10px;
    padding-top: 0;
}


.ModalCloseButton {
    border: none;
    padding: 0 0 4px;
    margin: 0;
    cursor: pointer;
}

// Field Editor styles

.field-anchor {
    position: absolute;
    z-index: 100;
    margin-top: -80px;
}

.UIContent .field-anchor {
    margin-top: -24px; /* UIContent has top:56px; therefore the margin for FieldAnchor in the UIContent div as to be 56px more. */
}

.field-editor-category-item {
    background-color: @color-blue-130;
}

.field-editor-primary-attribute {
    background-color: @color-orange-100;
}

.field-editor-dummy-field {
    color: @color-blue-70;
}

.field-editor-hidden-item {
    color: @color-gray-100;
}

.PlaceholderLayout .PageTitle {
    color: #fff !important;
    padding: 5px 5px 1px 8px;
    font-weight: bold;
    white-space: nowrap;
}

.PageTitle {
    font-weight: bold;
    color: #ffffff;
}

.SubTitleHeader {
    padding: 6px 5px 3px 10px;
    display: block;
    white-space: nowrap;
}

.RTL .PageTitleHeader, .RTL .SubTitleHeader {
    padding: 6px 10px 3px 5px;
}

.PageTitleBreadCrumbs {
    padding: 0 5px 0 10px;
    display: block;
    height: 29px;
    overflow: hidden;
    background: #ffffff;
}

.RTL .PageTitleBreadCrumbs {
    padding: 0 10px 0 5px;
}

.SiteHeaderLine {
    background: #fff;
    border-bottom: 3px solid #d6d9d6;
    padding: 16px 0 0 16px;
}

body.Buttons {
    background: #d6d9d6;
}

.CMSVariant {
    display: none;
}

// ----------- SKIN PART OF CSS ----------

// Edit menu
.MenuItemEdit,
.MenuItemEditSmall {
    cursor: pointer;
    color: #000000;
    text-decoration: underline;

    img {
        padding: 5px;
        vertical-align: middle;
        text-decoration: none;
    }
}

.MenuItemEdit img {
    width: 24px;
    height: 24px;
}

// Forums
.ForumEdit .FieldLabel {
    min-width: 250px;
}

.ForumEdit .ForumEditControl {
    min-width: 320px;
}

.Red {
    color: #CC0000;
}

.Gray {
    color: #888888;
}