/*
 *
 * ADOBE CONFIDENTIAL
 * __________________
 *
 *  Copyright 2012 Adobe Systems Incorporated
 *  All Rights Reserved.
 *
 * NOTICE:  All information contained herein is, and remains
 * the property of Adobe Systems Incorporated and its suppliers,
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to Adobe Systems Incorporated and its
 * suppliers and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe Systems Incorporated.
 */

@import "base.less";

@toolbarBgColor:  #151515;
@itemBgColor:     #252824;
@itemBorderColor: #333631;
@fontColor:       #999;
@minDisplayedItems: 3; // minimum number of items that should be visible

@imgWidth:   140px; // keep width + height in sync with target.js image scaling
@imgHeight:  100px;
@itemBorder: 1px;
@itemWidth:  @imgWidth + 2 * @itemBorder; // keep in sync with itemFallbackDimension in target.js

@itemLabelTopMargin:     4px;
@itemLabelBottomMargin:  5px;
@itemLabelLineHeight:    15px;
@itemLabelContentHeight: 3 * @itemLabelLineHeight;
@itemLabelHeight:        @itemLabelContentHeight + @itemLabelTopMargin + @itemLabelBottomMargin;
@itemHeightNoBorder:     @imgHeight + @itemLabelHeight;
@itemHeight:             @itemHeightNoBorder + 2 * @itemBorder;

@selectedBorder: 3px;
@itemPadding:             10px - @selectedBorder;
@contentPaddingTopBottom: 10px - @selectedBorder;
@contentPaddingLeftRight: 40px - @selectedBorder;

@contentHeight: @itemHeight + 2 * @selectedBorder + 2 * @contentPaddingTopBottom;
@toolbarHeight: 28px;
@toolbarBorder: 1px;
@height: @contentHeight + @toolbarHeight + 2 * @toolbarBorder;

@zIndexEditor:  8005; // the z-index of the editor window
@zIndexPlacehoder: @zIndexEditor - 1;  //the missing offer placeholder must be "just below" the editor window

#CQ {

// placeholder for the missing offer content
.cq-targeting-offer-placeholder {
    opacity:0.85;
    z-index:@zIndexPlacehoder;
    background:#FFFFFF;
    position:absolute;
    text-align: center;
    border:1px dashed #888;

    .cq-editrollover-insert-message {
        font-weight: bold;
        cursor:pointer;
        font-size:24px;
        color:#888;
    }
}

.cq-targeting-launch-icon  {
    z-index: 8006; // one above editrollover
    cursor: pointer;
    position: absolute;
    background: url('resources/experiences_button.png') no-repeat;
    height: 40px;
    width: 40px;
}

.cq-targeting-icon-placeholder-off {
    display: none;
}

.cq-targeting-editor {
    // using absolute instead of relative as we otherwise virtually increase the
    // size of the editbar and invisibly block the components content area
    position: absolute;
//    left: 0;
//    top: 0;
    margin-top: -@height;
    height: @height;
    min-width: @minDisplayedItems * (@itemWidth + @itemPadding) + (2 * @contentPaddingLeftRight);
    z-index:@zIndexEditor;

    .border-radius(8px);

    background-color: @bgColor;
    .cq-targeting-editor-font(@fontColor);

    // make sure the nested cq-targeting-editor popup
    // - flies over other editbars/column control bars (8004)
    // - is above geometrixx nav bars (9000)
    // - is below the client context (9002)
    z-index: 9001;

    /* turning off unwanted text selection highlighting in experience selection dialog */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cq-targeting-editor-toolbar {
    height: @toolbarHeight;
    padding-left: 10px;
    padding-right: 10px;

    background-color: @toolbarBgColor;
    .border-top-left-radius(8px);
    .border-top-right-radius(8px);

	.cq-toolbar-item() {
        height: 14px;
		margin-top: 8px;

		.inline-block;
	}

    .cq-targeting-action {
		.cq-toolbar-item;
        width: 20px;
        cursor: pointer;
    }

    .cq-targeting-campaign-selector {
    	.cq-toolbar-item;
    	vertical-align: top;
    	margin-top: 5px;
    	margin-left: 10px;
    }

    .cq-targeting-action-edit {
        // copied from coralui allIcons.css
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgZmlsbD0iI0ZGRkZGRiIgdmVyc2lvbj0iMS4xIiBpZD0iaWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMCIgeT0iMCIJIHdpZHRoPSIxMTUycHgiIGhlaWdodD0iMTE1MnB4IiB2aWV3Qm94PSIwIDAgMTE1MiAxMTUyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMTUyIDExNTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xMTUyLDY3MlY0ODBoLTEwNS42NTZjLTEyLjQyMi02MS4yNjYtMzYuNjU2LTExOC4yMTktNzAuMDMxLTE2OC41ODZsNzQuODU5LTc0LjgzNglsLTEzNS43NS0xMzUuNzVsLTc0Ljg1OSw3NC44MzZDNzkwLjIxOSwxNDIuMzEyLDczMy4yNjYsMTE4LjA3OCw2NzIsMTA1LjYzM1YwSDQ4MHYxMDUuNjMzCWMtNjEuMjY2LDEyLjQ0NS0xMTguMjE5LDM2LjY4LTE2OC41NjIsNzAuMDMxbC03NC44NTgtNzQuODM2bC0xMzUuNzUsMTM1Ljc1bDc0Ljg1OSw3NC44MzYJYy0zMy4zNzUsNTAuMzY3LTU3LjYwOSwxMDcuMzItNzAuMDMxLDE2OC41ODZIMHYxOTJoMTA1LjY1NmMxMi40MjIsNjEuMjY2LDM2LjY1NiwxMTguMjE5LDcwLjAzMSwxNjguNTg2bC03NC44NTksNzQuODM2CWwxMzUuNzUsMTM1Ljc1bDc0Ljg1OS03NC44MzZjNTAuMzQ0LDMzLjM1MiwxMDcuMjk3LDU3LjU4NiwxNjguNTYyLDcwLjAzMVYxMTUyaDE5MnYtMTA1LjYzMwljNjEuMjY2LTEyLjQ0NSwxMTguMjE5LTM2LjY4MSwxNjguNTYyLTcwLjAzMWw3NC44NTksNzQuODM2bDEzNS43NS0xMzUuNzVsLTc0Ljg1OS03NC44MzYJYzMzLjM3NS01MC4zNjcsNTcuNjA5LTEwNy4zMiw3MC4wMzEtMTY4LjU4NkgxMTUyTDExNTIsNjcyeiBNNTc2LDg2NGMtMTU5LjA5NCwwLTI4OC0xMjguOTUzLTI4OC0yODhzMTI4LjkwNi0yODgsMjg4LTI4OAlzMjg4LDEyOC45NTMsMjg4LDI4OFM3MzUuMDk0LDg2NCw1NzYsODY0eiIvPjwvc3ZnPg==");
        background-position: center center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 18px;
        height: 18px;

        margin-top: 5px;
        margin-left: 1px;
    }

    .cq-targeting-action-add {
        height: 20px;
        margin-top: 0px;
        margin-left: 10px;
    }

    // the coralui add/"+" icon is a round circle shape which does not work here; using a textual "+" instead
    .cq-targeting-action.cq-targeting-action-add:before {
        content: "+";
        color: white;
        font-size: 25px;
        line-height: 20px;
        font-weight: bold;
    }

    .cq-targeting-action-close {
        background-image: url("../../../../../../../libs/cq/personalization/components/clientcontext/clientlib/ui/themes/default/icons/close.png");
        position: absolute;
        right: 11px;
        top: 0;
    }
    
    .cq-targeting-action-error {
		width: 20px;
		font-weight: bold;
	    text-align: center;
	    color: white;
	    margin-top: 6px;
	    font-size: 16px;
	    vertical-align: top;
    }
}

.cq-targeting-editor-content {

    /* JCAROUSEL 0.3 */
      .jcarousel {
        overflow: hidden;
        position: relative;
        height: @contentHeight;

        ul {
            width: 20000em;
            position: absolute;
            list-style: none;
            margin: 0;
            padding: 0;
          }
        li {
          float: left;
        }
      }
    /* END TO JCAROUSEL 0.3 */

    .jcarousel-container {
        padding: @contentPaddingTopBottom @contentPaddingLeftRight;
    }

    .jcarousel-clip {
        overflow: hidden;
    }

    .jcarousel-item {
        width: @itemWidth;
        height: @itemHeight;
        margin: 0 @itemPadding 0 0;
        border: @selectedBorder solid @bgColor;

        overflow: hidden;

        .border-bottom-left-radius(8px);
        .border-bottom-right-radius(8px);
    }

    .cq-targeting-experience-selected {
        border: @selectedBorder solid white;
    }

    .cq-targeting-experience-content {
        height: @itemHeightNoBorder;
        overflow: hidden;
        background: @itemBgColor;
        border: @itemBorder solid @itemBorderColor;
        .border-bottom-left-radius(8px);
        .border-bottom-right-radius(8px);

        cursor: pointer;
    }

    .cq-targeting-experience-img-clip {
        width:  @imgWidth;
        height: @imgHeight;
        overflow: hidden;

        cursor: pointer;
    }

    .cq-targeting-experience-img {
        position: relative;
        background-color: @fontColor;

        cursor: pointer;
    }

    .cq-targeting-experience-label {
        height: @itemLabelContentHeight;
        line-height: @itemLabelLineHeight;
        margin: @itemLabelTopMargin 7px @itemLabelBottomMargin 7px;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;

        .cq-targeting-editor-font(@fontColor);

        cursor: pointer;
    }

    // no hand pointer shown for already selected item
    .cq-targeting-experience-selected .cq-targeting-experience-content,
    .cq-targeting-experience-selected .cq-targeting-experience-img-clip,
    .cq-targeting-experience-selected .cq-targeting-experience-img,
    .cq-targeting-experience-selected .cq-targeting-experience-label {
        cursor: default;
    }

    // the campain chooser drop-down (copied from clientcontext.css)
    .cq-cc-store {
      color: white;
      line-height: 16px;
      height: auto;
      min-height: 20px;
      padding: 8px 15px 12px 15px;
      border-top: 1px solid #151515;
      margin: -1px;
    }

    .cq-cc-store .cq-cc-campaign-prop span.label {
      color: white;
      width: 125px;
      display: inline-block;
    }

  //END campaign chooser drop-down

    .cq-targeting-experience-quickactions {
        display: none;

        position: absolute;
        top: 0px;

        background-color: transparent;
    }

    .jcarousel-item:hover .cq-targeting-experience-quickactions {
        display: block;
    }

    @quickactionSize: 36px;
    @quickactionBorder: 2px;
    @quickactionIconSize: 18px;

    .cq-targeting-experience-quickactions > div {
        width: @quickactionSize;
        height: @quickactionSize;

        position: absolute;
        left: (@imgWidth - (@quickactionSize + 2 * @quickactionBorder)) / 2;

        border: @quickactionBorder solid white;
        .border-radius(@quickactionSize);

        background-size: @quickactionIconSize @quickactionIconSize;
        background-position: @quickactionIconSize/2 @quickactionIconSize/2;
        background-repeat: no-repeat;

        cursor: pointer;
        background-color: @itemBgColor;
    }

    .cq-targeting-experience-quickactions > div:hover {
        background-color: @bgColor;
    }

    .cq-targeting-experience-quickactions-edit {
        top: 8px;
        // copied from coralui allIcons.css
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgZmlsbD0iI0ZGRkZGRiIgdmVyc2lvbj0iMS4xIiBpZD0iaWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMCIgeT0iMCIJIHdpZHRoPSIxMTUycHgiIGhlaWdodD0iMTE1MnB4IiB2aWV3Qm94PSIwIDAgMTE1MiAxMTUyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMTUyIDExNTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xMTQwLDEzMkwxMDIwLDEyYzAsMC0xMi0xMi0zNi0xMnMtMzYsMTItMzYsMTJsLTg0LDg0bDE5MiwxOTJsODQtODRjMCwwLDEyLTEyLDEyLTM2CVMxMTQwLDEzMiwxMTQwLDEzMnoiLz48cmVjdCB4PSIxOTIuNzE4IiB5PSI0MTYuMjM2IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjcwNzEgLTAuNzA3MSAwLjcwNzEgMC43MDcxIC0yMTQuNTg0IDU4NS45NDY0KSIgd2lkdGg9IjgxNC41NzkiIGhlaWdodD0iMjcxLjUyNiIvPjxwYXRoIGQ9Ik0zMzYsMTAwOEwxNDQsODE2TDAsMTE0MGMwLDEyLDAsMTIsMTIsMTJDMTIuNSwxMTUyLDMzNiwxMDA4LDMzNiwxMDA4eiIvPjwvc3ZnPg==");
    }

    .cq-targeting-experience-quickactions-add {
      top: 8px;
      // copied from coralui allIcons.css
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIGZpbGw9IiNGRkZGRkYiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTE1MnB4IiBoZWlnaHQ9IjExNTJweCIgdmlld0JveD0iMCAwIDExNTIgMTE1MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTE1MiAxMTUyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIHBvaW50cz0iMTEwNCw0MzIgNjcyLDQzMiA2NzIsMCA0MzIsMCA0MzIsNDMyIDAsNDMyIDAsNjcyIDQzMiw2NzIgNDMyLDExMDQgNjcyLDExMDQgNjcyLDY3MiAxMTA0LDY3MiAiLz4NCjwvc3ZnPg==");
    }

    .cq-targeting-experience-quickactions-delete {
        top: 55px;
        // copied from coralui allIcons.css
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgZmlsbD0iI0ZGRkZGRiIgdmVyc2lvbj0iMS4xIiBpZD0iaWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMCIgeT0iMCIJIHdpZHRoPSIxMTUycHgiIGhlaWdodD0iMTE1MnB4IiB2aWV3Qm94PSIwIDAgMTE1MiAxMTUyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMTUyIDExNTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xOTIsMzg0djc2OGg3NjhWMzg0SDE5MnogTTQzMiw5OTZjMCwwLDAsMTItMTIsMTJzLTU5Ljk5OSwwLTcyLDBzLTEyLTEyLTEyLTEyVjQ5MgljMCwwLDAtMTIsMTItMTJzNjAsMCw3MiwwczEyLDEyLDEyLDEyVjk5NnogTTYyNCw5OTZjMCwwLDAsMTItMTIsMTJzLTYwLDAtNzIsMHMtMTItMTItMTItMTJWNDkyYzAsMCwwLTEyLDEyLTEyczYwLDAsNzIsMAlzMTIsMTIsMTIsMTJWOTk2eiBNODE2LDk5NmMwLDAsMCwxMi0xMiwxMnMtNjAsMC03Miwwcy0xMi0xMi0xMi0xMlY0OTJjMCwwLDAtMTIsMTItMTJzNjAsMCw3MiwwczEyLDEyLDEyLDEyVjk5NnoiLz48cGF0aCBkPSJNOTg0LDE5MmMtOTYsMC0xNjgsMC0xNjgsMFY2MGMwLDAsMC02MC02MC02MGMtOTYsMC0yNjQsMC0zNjAsMGMtNjAsMC02MCw2MC02MCw2MHYxMzIJYzAsMC03MiwwLTE2OCwwYy03MiwwLTcyLDcyLTcyLDcydjcyaDk2MHYtNzJDMTA1NiwyNjQsMTA1NiwxOTIsOTg0LDE5MnogTTY3MiwxOTJINDgwdi04NGMwLDAsMC0xMiwxMi0xMmMyNCwwLDE0NCwwLDE2OCwwCWMxMiwwLDEyLDEyLDEyLDEyVjE5MnoiLz48L3N2Zz4=");
    }

    .cq-targeting-experience-quickactions-remove {
        top: 55px;
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIGZpbGw9IiNGRkZGRkYiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTE1MnB4IiBoZWlnaHQ9IjExNTJweCIgdmlld0JveD0iMCAwIDExNTIgMTE1MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTE1MiAxMTUyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik02MjQsMTkyVjk2YzAsMCwwLTQ4LTQ4LTQ4Uzk2LDQ4LDQ4LDQ4UzAsOTYsMCw5NnY5Nkg2MjR6Ii8+DQo8cGF0aCBkPSJNNjcyLDc2OHYzODRoNDMyVjc2OEg2NzJ6IE04MTYsMTA1MGMwLDAsMCw2LTYsNnMtMzAsMC0zNiwwcy02LTYtNi02VjgyMmMwLDAsMC02LDYtNnMzMCwwLDM2LDBzNiw2LDYsNlYxMDUweiBNOTEyLDEwNTANCgljMCwwLDAsNi02LDZzLTMwLDAtMzYsMHMtNi02LTYtNlY4MjJjMCwwLDAtNiw2LTZzMzAsMCwzNiwwczYsNiw2LDZWMTA1MHogTTEwMDgsMTA1MGMwLDAsMCw2LTYsNnMtMzAsMC0zNiwwcy02LTYtNi02VjgyMg0KCWMwLDAsMC02LDYtNnMzMCwwLDM2LDBzNiw2LDYsNlYxMDUweiIvPg0KPHBhdGggZD0iTTU3Niw4MTZoLTQ4bDAtMTkyYzAsMCwwLTk2LDk2LTk2aDQ4YzAsMCwwLTk2LDg0LTk2aDMwMHYtOTZjMCwwLDAtNDgtNDgtNDhTMCwyODgsMCwyODh2NjcyYzAsMCwwLDQ4LDQ4LDQ4DQoJYzI1LjY4NywwLDI4NS4wNTUsMCw1MjgsMFY4MTZ6Ii8+DQo8cGF0aCBkPSJNMTExNiw2MjRoLTEwOHYtNjZjMCwwLDAtMzAtMzAtMzBjLTQ4LDAtMTMyLDAtMTgwLDBjLTMwLDAtMzAsMzAtMzAsMzB2NjZjMCwwLTYwLDAtMTA4LDBjLTM2LDAtMzYsMzYtMzYsMzZ2NjBoNTI4di02MA0KCUMxMTUyLDY2MCwxMTUyLDYyNCwxMTE2LDYyNHogTTkzNiw2MjRoLTk2di00MmMwLDAsMC02LDYtNmMxMiwwLDcyLDAsODQsMGM2LDAsNiw2LDYsNlY2MjR6Ii8+DQo8L3N2Zz4NCg==");
    }

    .cq-targeting-experience-plus {
        height: @imgHeight;
        line-height: @imgHeight;
        text-align: center;
        border: 1px solid white;
        cursor: pointer;

        .cq-targeting-editor-font(@fontColor);
        font-size: 45px;
    }
    // left/right buttons for scrolling through items
    .jcarousel-prev-horizontal {
        position: absolute;
        // vertically centered
        top: (@contentHeight - 20px) / 2;
        left: 9px;
        width: 20px;
        height: 20px;

        cursor: pointer;
        background: transparent url("../../../../../../../etc/clientlibs/foundation/personalization/jcarousel/resources/left.png") no-repeat 0 0;
    }

    .jcarousel-prev-disabled {
        display: none;
    }

    .jcarousel-next-horizontal {
        position: absolute;
        // vertically centered
        top: (@contentHeight - 20px) / 2;
        right: 9px;
        width: 20px;
        height: 20px;

        cursor: pointer;
        background: transparent url("../../../../../../../etc/clientlibs/foundation/personalization/jcarousel/resources/right.png") no-repeat 0 0;
    }

    .jcarousel-next-disabled {
        display: none;
    }

}

.cq-targeting-editor-clientcontext-hint {
    width: 100%;
    height: @contentHeight;
    position: absolute;

    display: table;
}

.cq-targeting-editor-clientcontext-hint > span {
    text-align: center;
    vertical-align: middle;
    display: table-cell;

    .cq-targeting-editor-font(@fontColor);
    color: white;
}

.cq-targeting-editor-clientcontext-hint a {
    .cq-targeting-editor-font(@fontColor);
    color: white;
    text-decoration: underline;
}

.cq-targeting-editor-clientcontext-hint a > img {
    vertical-align: top;
    margin-left: 5px;
}

.cq-targeting-experience-dialog {

    z-index: 10000;
    background-color: @itemBgColor;
    border: 1px solid white;
    padding: 10px;

    .cq-targeting-segment-link {
        .cq-targeting-editor-font(@fontColor);

        display: inline-block;
        float: right;
        margin-right: 10px;
    }

    h3 {
        .cq-targeting-editor-font(@fontColor);

        margin-bottom: 10px;
    }

    input[type="submit"] {
        margin: 20px 15px 10px 0px;
        padding: 3px;
        .border-radius(3px);
        font-size: 12px;
        min-width: 80px;
        text-align: center;
    }
}

} // #CQ