/****************/
/* Image Dialog */
/****************/

.halloimage-dialog .ui-dialog-content {
    padding: 0;
}

.halloimage-dialog button {
    cursor: pointer;
}

/* Nav/Tabs */
.halloimage-dialog .nav {
    height: 35px;
    width: 100%;
}

.halloimage-dialog .tabs {
    text-transform: uppercase;
    font-size: 10px;
    color: white;
    height: 30px;
    line-height: 30px;
    display: table;
    width: 100%;
}

#activitySpinner {
    display: none;
    width: auto;
    height: 20px;
    margin: 0 auto;
    font-size: 10px;
}

.halloimage-dialog .tabs li {
    display: table-cell;
    cursor: pointer;
    background: #01add2 url('images/divider.png') no-repeat right;
    text-align: center;
}

.halloimage-dialog .tabs li:hover {
    background-color: #2EA0BE;
}

.halloimage-dialog .tabs li.halloimage-tabselector span {
    position: relative;
    padding: 4px 6px 0 18px;
    margin-right: 1px;
}
.halloimage-dialog .tabs li.halloimage-tab-suggestions span {
    background: url('images/tabicon_suggestions.png') no-repeat left;
}
.halloimage-dialog .tabs li.halloimage-tab-search span {
    background: url('images/tabicon_search.png') no-repeat left;
}
.halloimage-dialog .tabs li.halloimage-tab-upload span {
    background: url('images/tabicon_upload.png') no-repeat left;
}

.halloimage-dialog .tabs li:last-of-type {
    background-image: none;
}

.halloimage-dialog .tab-search,
.halloimage-dialog .tab-upload {
    display: none;
}

.halloimage-dialog .tab-activeIndicator {
    vertical-align: top;
    margin-left: 50px;
    width: 18px;
    height: 8px;
    display: relative;
    background: url('images/arrow.png');
}


/* Content */
.halloimage-dialog .dialogcontent {
    text-align: center;
    padding: 15px;
}

.halloimage-dialog .ui-dialog-content {
    overflow: visible;
}


.halloimage-dialog .search-activeImageContainer {
    display: none;
}

/* Thumbnails */
.halloimage-dialog .imageThumbnail {
    max-width: 45px;
    max-height: 45px;
    padding: 2px;
    border: 1px solid #E1E1E1;
    box-shadow: 2px 2px 3px #888;
    cursor: pointer;
    float: left;
}

.imageThumbnailContainer li {
    display: block;
    float: left;
    width: 60px;
    height: 50px;
    margin-bottom: 13px;
}

.imageThumbnailContainer ul {
    overflow: hidden;
}

.halloimage-dialog .imageThumbnail:hover {
    border: 1px solid #01add2;
}

.halloimage-dialog .imageThumbnailActive,
.halloimage-dialog .imageThumbnailActive:hover {
    padding: 0;
    border: 2px solid black;
    box-shadow: 2px 2px 3px #888;
}

/* Active image */
.halloimage-dialog .activeImageContainer {
    position: relative;
    margin: auto;
    margin-top: 30px;
}

.halloimage-dialog .rotationWrapper {
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    max-width: 200px;
    max-height: 150px;
    position: relative;
    display: inline-block;
    z-index: 3;
}

.halloimage-dialog .rotationWrapper img,
.halloimage-dialog .activeImageBg {
    max-height: 150px;
    box-shadow: 4px 4px 7px #888;
}

.halloimage-dialog .rotationWrapper:hover {
    -moz-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -moz-transform: translateX(-20px) rotate(-3deg);
    -webkit-transform: translateX(-20px) rotate(-3deg);
    transform: translateX(-20px) rotate(-3deg);
    cursor: move;
}

.halloimage-dialog .rotationWrapper .hintArrow {
    background: transparent url('images/drop_left.png') no-repeat -2px -2px;
    height: 44px;
    width: 44px;
    position: absolute;
    top: -5px;
    left: -30px;
}

.halloimage-dialog .rotationWrapper:hover .hintArrow{
    background-position: -2px -50px;
}

.halloimage-dialog .activeImageBg {
    /*-moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);*/
    opacity: 0.2;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: none;
}

.halloimage-dialog .metadata {
    margin-top: 20px;
    text-align: left;
}

.halloimage-dialog .metadata label {
    color: #A1A1A1;
    font-size: 14px;
}

.halloimage-dialog .metadata button {
    color: white;
    background-color: #646464;
    padding: 5px;
    border: 0;
    border-radius: 3px;
    margin-top: 10px;
}

.halloimage-dialog .metadata button:hover {
    background-color: #01add2;
}

.halloimage-dialog .pager-prev,
.halloimage-dialog .pager-next {
    width: 11px;
    height: 21px;
    background-color: #FFF;
    cursor: pointer;
    position: absolute;
    top: 45px;
}

.halloimage-dialog .pager-prev {
    background: url('images/pager_arrows.png') no-repeat -5px 0;
    left: 0;
}

.halloimage-dialog .pager-next {
    background: url('images/pager_arrows.png') no-repeat -21px 0;
    right: 0;
}
.halloimage-dialog .pager-prev:hover { background-position: -5px -22px; }
.halloimage-dialog .pager-next:hover { background-position: -21px -22px; }

.halloimage-dialog .tab-search .searchInput {
    width: 175px;
    height: 22px;
    border-radius: 2px 0 0 2px;
}

.halloimage-dialog .tab-search .searchButton {
    width: 56px;
    top: 1px;
    cursor: pointer;
}

.halloimage-dialog .tab-search .searchResults {
    margin: 15px 0 0 0;
    position: relative;
}

.halloimage-dialog .tab-upload {

}
.halloimage-dialog .tab-upload .file {
    font-size: 11px;
    margin-bottom: 10px;
}

.halloimage-dialog .imageThumbnailContainer {
    min-height: 110px;
}


.inlineImage-left, .inlineImage-right, .inlineImage-middle {
    margin: 5px;
    left: 0;
}
.inlineImage-left {
    float: left;
    margin-right: 10px;
}
.inlineImage-right {
    float: right;
    margin-left: 10px;
}
.inlineImage-middle {
    float: none;
}

[contenteditable] .halloTmp {
    opacity: 0.3
}

[contenteditable] .halloTmpLine{
    background-color: #ffffff;
    width: 98%;
    height: 2px;
    margin: 0 auto 10px auto;
    border-top: 2px solid #1cb8d6;
    border-bottom: 2px solid #1cb8d6;
    opacity: 1;
    padding: 1px;
}

.bigOverlay, .smallOverlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(28, 184, 214, 0.4);
}

.bigOverlayRight{
    display : block;
    border-right : 3px dashed rgb(28, 184, 214);
    border-left : none;
}

.bigOverlayLeft{
    display : block;
    border-left : 3px dashed rgb(28, 184, 214);
    border-right : none;
}

.smallOverlayLeft{
   border-right : 3px dashed rgb(28, 184, 214);
}

.smallOverlayRight{
    border-left : 3px dashed rgb(28, 184, 214);
}