/* Ropenlayer CSS customization */

/* Used in map */

/* olControlPanPanel: Move by click on move tools */
.olControlPanPanel                                { top: 10px; left: 10px; width: 55px; height: 55px; }  
.olControlPanPanel div                            { background-image: url('../images/ropenlayer/pan-panel.png'); position: absolute; background-color: transparent;
                                                    background-repeat: no-repeat }
.olControlPanPanel div:hover                      { background-image: url('../images/ropenlayer/pan-panel_active.png');             }
.olControlPanPanel .olControlPanNorthItemInactive { top: 0px;  left: 0px;  height: 23px; width: 55px; background-position: 0px 0px;     }
.olControlPanPanel .olControlPanSouthItemInactive { top: 33px; left: 0px;  height: 22px; width: 55px; background-position:  0px -33px;  }
.olControlPanPanel .olControlPanWestItemInactive  { top: 23px; left: 0px;  height: 10px; width: 28px; background-position: 0px -23px;   }
.olControlPanPanel .olControlPanEastItemInactive  { top: 23px; left: 28px; height: 10px; width: 27px; background-position: -28px -25px; }

/* olControlLayerBoxPanel: To display toolbar for select base layers */
.olControlLayersBoxControlPanel                   { top: 140px; left: 10px; width: 55px; min-height: 55px; position: absolute;
                                                    background: transparent url('../images/ropenlayer/layers_switch.png') no-repeat top left; } 
.olControlLayersBoxControlPanel:hover             { background-image: url('../images/ropenlayer/layers_switch_active.png') } 
.olControlLayersBoxControlPanel .olControlLayersBoxControlItemActive  { width: 55px; height: 55px; cursor: pointer; }
.olControlLayersBoxControlLinks                   { top: 140px; left: 85px;  background-color: #16b87d; width: 250px; position: absolute; 
                                                    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; border: 1px solid #ECECEC;  }
.olControlLayersBoxControlLinks a                 { display: block; margin: 3px 3px; padding: 2px 2px; color: white; font-size: 1.1em;   }
.olControlLayersBoxControlLinks a:hover           { background-color: #03fda1; color: black; }


/* olControlEditMapPanel: To display toolbar for edit map options */
.olControlEditMapControlPanel                          { top: 200px; left: 10px; width: 55px; min-height: 55px; position: absolute;
                                                    background: transparent url('../images/ropenlayer/edit_map.png') no-repeat top left; } 
.olControlEditMapControlPanel:hover                    { background-image: url('../images/ropenlayer/edit_map_active.png') } 
.olControlEditMapControlPanel .olControlEditMapControlItemActive  { width: 55px; height: 55px; cursor: pointer; }
.olControlEditMapControlLinks                   { top: 200px; left: 85px;  background-color: #16b87d; width: 250px; position: absolute; 
                                                    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; border: 1px solid #ECECEC;  }
.olControlEditMapControlLinks a                 { display: block; margin: 3px 3px; color: white; font-size: 1.1em;   }
.olControlEditMapControlLinks a:hover           { background-color: #03fda1; color: black; }
.olControlEditMapControlLinks a.activeControl   { background-color: white; color: black;  }



/* olControlScaleLine: To display scale line */
.olControlScaleLine                               { display: block; position: absolute; left: 47%; bottom: 15px; font-size: x-small; }
.olControlScaleLineBottom                         { border: solid 2px #666666; border-bottom: none; border-top-width: 1px;  margin-top:0px; text-align: center; }
.olControlScaleLineTop                            { border: solid 2px #666666; border-top: none;  border-bottom-width: 1px;  text-align: center; }


/* olControlMousePosition: To mouse position */
div.olControlMousePosition                        { bottom: 15px; right: 3px; display: block; position: absolute; font-family: Arial; font-size: smaller; color: white; }

/* olMapNotificationArea */
div.olMapNotificationArea                         { position: absolute; font-style: italic; font-size: 1.1em;  background-color: #16b87d; top: 175px; margin-left: 120px; width: 400px; height: 20px;
                                                    padding: 5px; text-align: center;  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #ECECEC;   }

/* olMapNewElementsArea */
div.olMapNewElementsArea                         { position: relative; margin-top: 40px; margin-left: 130px; font-size: 1.1em;  background-color: white;  width: 600px; height: 300px;
                                                    padding: 5px; text-align: center;  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #ECECEC;
                                                    overflow: auto; }


.olPopup, .olPopup span, .olPopop div   { background-color: #16b87d !important; color: white !important; }
.olPopupContent { background-color: white !important; color: #666666 !important; margin-left: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }


/* DEFAULT NEED REVIEW */
.olControlZoomPanel {
    top: 75px;
    left: 10px;
    width: 55px;
    height: 55px;
} 

.olControlZoomPanel div {
    background-image: url('../images/ropenlayer/zoom-panel.png');
    position: absolute;
    cursor: pointer;
    width: 55px;

}

.olControlZoomPanel div:hover {
    background-image: url('../images/ropenlayer/zoom-panel_active.png');
}


.olControlZoomPanel .olControlZoomInItemInactive {
    top: 0px;
    left: 0px;
    height: 20px;
    background-position: 0px 0px;
}

.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
    top: 20px;
    left: 0px;
    background-position: 0px -20px;
    height: 15px;

}

.olControlZoomPanel .olControlZoomOutItemInactive {
    top: 35px;
    left: 0px;
    height: 20px;
    background-position: 0px -35px;
}





/* No used */








div.olMap {
    z-index: 0;
    padding: 0px!important;
    margin: 0px!important;
    cursor: default;
}

div.olMapViewport {
    text-align: left;
}

div.olLayerDiv {
   -moz-user-select: none;
}

.olLayerGoogleCopyright {
    left: 2px;
    bottom: 2px;  
}
.olLayerGooglePoweredBy {
    left: 2px;
    bottom: 15px;   
}
.olControlAttribution {
    font-size: smaller; 
    right: 3px; 
    bottom: 4.5em; 
    position: absolute; 
    display: block;
}
.olControlScale {
    right: 3px;
    bottom: 3em;
    display: block;
    position: absolute;
    font-size: smaller;
}


.olControlPermalink {
    right: 3px;
    bottom: 1.5em;
    display: block;
    position: absolute;
    font-size: smaller;
} 


.olControlOverviewMapContainer {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.olControlOverviewMapElement {
    padding: 10px 18px 10px 10px;
    background-color: #00008B;
    -moz-border-radius: 1em 0 0 0;
}

.olControlOverviewMapMinimizeButton {
    right: 0px;
    bottom: 80px;
}    

.olControlOverviewMapMaximizeButton {
    right: 0px;
    bottom: 80px;
}

.olControlOverviewMapExtentRectangle {
    overflow: hidden;
    background-image: url("../images/ropenlayer/blank.gif");
    cursor: move;
    border: 2px dotted red;
}
.olControlOverviewMapRectReplacement {
    overflow: hidden;
    cursor: move;
    background-image: url("../images/ropenlayer/overview_replacement.gif");
    background-repeat: no-repeat;
    background-position: center;
}

.olLayerGeoRSSDescription {
    float:left;
    width:100%;
    overflow:auto;
    font-size:1.0em;
}
.olLayerGeoRSSClose {
    float:right;
    color:gray;
    font-size:1.2em;
    margin-right:6px;
    font-family:sans-serif;
}
.olLayerGeoRSSTitle {
    float:left;font-size:1.2em;
}

.olPopupContent {
    padding:5px;
    overflow: auto;
}    
.olControlNavToolbar { 
    width:0px;
    height:0px;
}    
.olControlNavToolbar div { 
  display:block;
  width:  28px;
  height: 28px;
  top: 300px;
  left: 6px;
  position: relative;
}

.olControlNavigationHistory {
   background-image: url("../images/ropenlayer/navigation_history.png");
   background-repeat: no-repeat;
   width:  24px;
   height: 24px;

}
.olControlNavigationHistoryPreviousItemActive { 
  background-position: 0px 0px;
}
.olControlNavigationHistoryPreviousItemInactive { 
   background-position: 0px -24px;
}
.olControlNavigationHistoryNextItemActive { 
   background-position: -24px 0px;
}
.olControlNavigationHistoryNextItemInactive { 
   background-position: -24px -24px;
}

.olControlNavToolbar .olControlNavigationItemActive { 
  background-image: url("../images/ropenlayer/panning-hand-on.png");
  background-repeat: no-repeat;
}
.olControlNavToolbar .olControlNavigationItemInactive { 
  background-image: url("../images/ropenlayer/panning-hand-off.png");
  background-repeat: no-repeat;
}
.olControlNavToolbar .olControlZoomBoxItemActive { 
  background-image: url("../images/ropenlayer/drag-rectangle-on.png");
  background-color: orange;
  background-repeat: no-repeat;
}
.olControlNavToolbar .olControlZoomBoxItemInactive { 
  background-image: url("../images/ropenlayer/drag-rectangle-off.png");
  background-repeat: no-repeat;
}
.olControlEditingToolbar  {
    float:right;
    right: 0px;
    height: 30px; 
    width: 200px;
}
.olControlEditingToolbar div { 
  background-image: url("../images/ropenlayer/editing_tool_bar.png");
  background-repeat: no-repeat;
  float:right;
  width:  24px;
  height: 24px;
  margin: 5px;
}
.olControlEditingToolbar .olControlNavigationItemActive { 
  background-position: -103px -23px; 
}
.olControlEditingToolbar .olControlNavigationItemInactive { 
  background-position: -103px -0px; 
}
.olControlEditingToolbar .olControlDrawFeaturePointItemActive { 
  background-position: -77px -23px; 
}
.olControlEditingToolbar .olControlDrawFeaturePointItemInactive { 
  background-position: -77px -0px; 
}
.olControlEditingToolbar .olControlDrawFeaturePathItemInactive { 
  background-position: -51px 0px; 
}
.olControlEditingToolbar .olControlDrawFeaturePathItemActive { 
  background-position: -51px -23px; 
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive { 
  background-position: -26px 0px; 
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive { 
  background-position: -26px -23px ;                                                                   
}
div.olControlSaveFeaturesItemActive { 
    background-image: url(../images/ropenlayer/save_features_on.png);
    background-repeat: no-repeat;
    background-position: 0px 1px;
}
div.olControlSaveFeaturesItemInactive { 
    background-image: url(../images/ropenlayer/save_features_off.png);
    background-repeat: no-repeat;
    background-position: 0px 1px;
}

.olHandlerBoxZoomBox {
    border: 2px solid red;
    position: absolute;
    background-color: white;
    opacity: 0.50;
    font-size: 1px;
    filter: alpha(opacity=50);
}
.olHandlerBoxSelectFeature {
    border: 2px solid blue;
    position: absolute;
    background-color: white;
    opacity: 0.50;
    font-size: 1px;
    filter: alpha(opacity=50);
}   

.olPopupCloseBox {
  background: url("../images/ropenlayer/close.gif") no-repeat;
  cursor: pointer;
}

.olFramedCloudPopupContent {
    padding: 5px;
    overflow: auto;
}

.olControlNoSelect {
 -moz-user-select: none;
}

.olImageLoadError {
    background-color: pink;
    opacity: 0.5;
    filter: alpha(opacity=50); /* IE */
}

/**
 * Cursor styles
 */

.olCursorWait {
    cursor: wait;
}
.olDragDown {
    cursor: move;
}
.olDrawBox {
    cursor: crosshair;
}
.olControlDragFeatureOver {
    cursor: move;
}
.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
    cursor: -moz-grabbing;
}

/**
 * Layer switcher
 */


.olControlLayerSwitcher {
    position: absolute;
    top: 125px;
    left: 32px;
    width: 25em;
    font-family: sans-serif;
    font-weight: bold;
    margin-left: 3px;
    margin-bottom: 3px;
    font-size: smaller;
    color: white;
    background-color: transparent;
    cursor: pointer;
}
.olControlLayerSwitcher span {
   background-color: #83d4b6 !important;
   opacity: 1 !important;
}
.olControlLayerSwitcher .layersDiv {
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #83d4b6;
    width: 100%;
    height: 100%;
    opacity: 1 !important;

}

.olControlLayerSwitcher .layersDiv .baseLbl,
.olControlLayerSwitcher .layersDiv .dataLbl {
    margin-top: 3px;
    margin-left: 3px;
    margin-bottom: 3px;
}

.olControlLayerSwitcher .layersDiv .baseLayersDiv,
.olControlLayerSwitcher .layersDiv .dataLayersDiv {
    padding-left: 10px;
}

.olControlLayerSwitcher .maximizeDiv,
.olControlLayerSwitcher .minimizeDiv {
    top: 5px;
    right: 0px;
}