/* hierarchy examples*/
/* .agsjsTOCNode -----> .agsjsTOCRootLayer-------> .agsjsTOCContent */
/* .agsjsTOCNode -----> .agsjsTOCGroupLayer ------>.agsjsTOCContent */

.agsjsTOCNode {
    padding-bottom: 1px;
    padding-top: 1px;
    width: 100%;
    height:100%;
    position:relative;
    
}
.agsjsTOCContent {
    display:block;
    width: 100%;
    height:24px;
    position:relative;
    line-height:24px;
}
.agsjsTOCContent span:first-child {
    margin-left:5px;
}
/* agsjsTOCContent content -1 title of the layer*/
.agsjsTOCContent >  agsjsTOCGroupLayerLabel {
    position:relative;
    float:left;
}
/* agsjsTOCContent content -2  tree expand/collapse icon*/
.agsjsTOCContent > .dijitTreeExpando{
    position:relative;
    float:right;
    height: 20px !important;
    width: 20px !important;
    cursor:pointer;
}

.agsjsTOCContent .dijitTreeExpandoClosed{
    background: url('../images/expand-blue.png') center center no-repeat !important;
}
.agsjsTOCContent .dijitTreeExpandoOpened{
    background: url('../images/collapse-blue.png') center center no-repeat !important;
}

/* when out of scale*/
.agsjsTOCOutOfScale .agsjsTOCContent .dijitTreeExpandoClosed{
    background: url('../images/expand-grey.png') center center no-repeat !important;
}
.agsjsTOCOutOfScale .agsjsTOCContent .dijitTreeExpandoOpened{
    background: url('../images/collapse-grey.png') center center no-repeat !important;
}

/* agsjsTOCContent content -3  metadata tool*/
.agsjsTOCContent >  .agsjsTOCMetadataTool {
    position:relative;
    float:right;
    width:20px;
    height:20px;
    cursor: pointer;
    background: url('../images/metadata-blue.png') center center no-repeat !important;
}
/* when out of scale*/

.agsjsTOCOutOfScale .agsjsTOCContent >  .agsjsTOCMetadataTool {
    background: url('../images/metadata-grey.png') center center no-repeat !important;
}

/* agsjsTOCContent content - 4  transparency slider tool*/
.agsjsTOCContent >  .agsjsTOCTransparencyTool {
    position:relative;
    float:right;
    width:20px;
    height:20px;
    cursor: pointer;
    margin-right:2px;
    background: url('../images/slider-blue.png') center center no-repeat !important;
}
/* when out of scale*/

.agsjsTOCOutOfScale .agsjsTOCContent >  .agsjsTOCTransparencyTool {
    background: url('../images/slider-grey.png') center center no-repeat !important;
}

.agsjsTOCOutOfScale {
    color: grey;
}

.agsjsTOCIcon {
  vertical-align:bottom
}
.agsjsTOCRootLayerLabel {
    font-size: 10px;
    font-weight: bold;
}



.agsjsTOCGroupLayerLabel {
    font-size: 12px;
}


.agsjsTOCServiceLayerLabel {
    font-size: 9px;
    padding-left: 2px;
}

.agsjsTOCLegendIcon {
    /* width: 50px;*/
}

.agsjsTOCLegendLabel {
    font-size: 9px;
    padding-left: 2px;
}
/*slider floating panel*/
.agsjsTOCSliderPanel {
    overflow:hidden;
    width:400px;
    height:120px;
    position:absolute;
    border:1px solid black;
    z-index:9999;
    top:0px;left: 0px;
    float:left;
    background-color:white;
    font-size:5px;
    visibility:hidden;
}
 /*slider container*/
.agsTOCSliderOuterContainer {
    margin:0 auto;
    width:98%;
    position:relative;
    margin-top:20px;
}
.agsjsTOCSlider {
    width:350px;
    margin:0 auto;    
}
.dijitRuleLabelsContainer {
    height:14px !important;
}