/******************************************************************************
* Hooks UI styles
*******************************************************************************/

#hooks_subscriber,
#hooks_provider {
    margin-bottom: 1%;
    padding: 1%;
}

/* COMMON */
.sarea_wrapper ol,
.sarea_wrapper ol li,
.pareas_category ol,
.pareas_category ol li {
    border: none;
    margin: 0 !important;
}

#hooks_subscriber .z-sub {
    display: block;
}

/* SUBSCRIPTION */

/* subscriber areas */
#hooks_subscriber .sareas_category {
    padding-bottom: 1em !important;
}

#hooks_provider_areas .parea_wrapper,
#hooks_subscriber .sareas_category .sarea_wrapper {
    border: 1px solid #CCCCCC;
    margin-top: -1px;
}

#hooks_subscriber .sarea_wrapper h4 {
    background: #ddd url("../../../images/global/arrow_right_black.png") no-repeat scroll 3px 0.65em;
    color: inherit;
    font-size: 1.1em;
    margin: 2px;
    padding: 3px 3px 3px 14px;
}

#hooks_subscriber .sarea_wrapper h4:hover {
    background: #ccc url("../../../images/global/arrow_right_grey.png") no-repeat scroll 3px 0.65em;
}

#hooks_subscriber .sarea_wrapper h4.z-panel-active {
    background: #ddd url("../../../images/global/arrow_down_black.png") no-repeat scroll 3px 0.65em;
    border-bottom: 1px solid #ccc;
}

#hooks_subscriber .sarea_wrapper h4.z-panel-active:hover {
    background: #ccc url("../../../images/global/arrow_down_grey.png") no-repeat scroll 3px 0.65em;
}

#hooks_subscriber .sarea_wrapper ol.z-itemlist li {
    background-color: #fff;
    line-height: 1.2em;
    padding: 0.3em;
}

#hooks_subscriber .sarea_wrapper ol.z-itemlist li.sarea_empty {
    padding: 0.3em 0.3em 0.3em 30px !important;
}

#hooks_subscriber .sarea_wrapper ol li:hover {
    background-color: #f9f9f9;
}

#hooks_subscriber .sarea_wrapper ol li a.detachlink {
    position: absolute;
    right: 0.5em;
    top: 0.65em;
}

#hooks_subscriber .sarea_wrapper ol li.attachedarea_detach,
#hooks_subscriber .sarea_wrapper ol li.attachedarea_detach span {
    background-color: #F7CBCA;
    color: #880000;
}

/* droppable active*/
#hooks_subscriber .sarea_wrapper.z-hook-droppable-active h4,
#hooks_subscriber .sarea_wrapper.z-hook-droppable-active span,
#hooks_subscriber .sarea_wrapper.z-hook-droppable-active ol li {
    background-color: #DFF2BF;
    color: #264409 !important;
}

/* provider areas */
#hooks_provider_areas.z-panels .z-panel-header,
#hooks_provider_areas.z-panels .z-panel-header.z-panel-active {
    background: #ddd url("../../../images/global/arrow_right_black.png") no-repeat scroll 3px 0.65em;
    color: inherit;
    border: none;
    font-size: 1.1em;
    margin: 2px;
    padding: 3px 3px 3px 14px !important;
}

#hooks_provider_areas.z-panels .z-panel-header:hover,
#hooks_provider_areas.z-panels .z-panel-header.z-panel-active:hover {
    background: #ccc url("../../../images/global/arrow_right_grey.png") no-repeat scroll 3px 0.65em;
}

#hooks_provider_areas.z-panels .z-panel-header.z-panel-active {
    background: #ddd url("../../../images/global/arrow_down_black.png") no-repeat scroll 3px 0.65em;
}

#hooks_provider_areas.z-panels .z-panel-header.z-panel-active:hover {
    background: #ccc url("../../../images/global/arrow_down_grey.png") no-repeat scroll 3px 0.65em;
}

#hooks_provider_areas.z-panels .z-panel-content {
    border: none;
    padding: 0.3em 0.7em 0.1em;
}

#hooks_subscriber .pareas_category ol.z-itemlist li {
    border: 1px solid #DDDDDD;
    line-height: 1.4em;
    margin-top: -1px !important;
}

/* PROVISION */

#hooks_subscriber .registered_provider_areas ol {
    margin-bottom: 0;
}
