TDataView_ui/styles/atlas/compareView.css

#viewTools {
    position:absolute;
    right:266px;
    width:370px;
    height:44px;
    position:absolute;
    top: 17px;
    z-index:999999999999;
}

#viewTools .button {
    width: 120px;
    height: 44px;
    text-align: center;
    line-height: 48px;
    text-decoration: none;
    cursor: pointer;
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #00d2ff;
    border: none;
    background: none;
    padding:0px 0px;
    margin: 0px;
}

#viewTools .button.select {
    background: url(../../images/atlas/bg-tab-cur2.png) no-repeat left top;
    color: #ffcd2c;
}



#mapHolder .leaflet-container {
    background:none;
}


.viewType-1 #leftMapWrap {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}

.viewType-2 #leftMapWrap {
    position:absolute;
    left:0px;
    top:0px;
    width:50%;
    height:100%;
    overflow:hidden;
    border:10px solid #FFF;
    border-right:5px solid #FFF;
}

.viewType-3 #leftMapWrap {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}


#leftMap {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background:none;
    z-index:11;
}

.viewType-2 #leftMap {
    border:2px solid #333;
}


.viewType-1 #rightMapWrap{
    position:absolute;
    right:0px;
    top:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}

.viewType-2 #rightMapWrap{
    position:absolute;
    right:0px;
    top:0px;
    width:50%;
    height:100%;
    overflow:hidden;
    border:10px solid #FFF;
    border-left:5px solid #FFF;
}

.viewType-3 #rightMapWrap{
    position:absolute;
    right:0px;
    top:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}

#rightMap {
    position:absolute;
    right:0px;
    top:0px;
    width:100%;
    height:100%;
    background:none;
    z-index:10;
}

.viewType-2 #rightMap {
    border:2px solid #333;
}

#gapButton {
    display:none;
}

#gapButton .top {
    position:absolute;
    width:36px;
    height:36px;
    display:block;
    top: -2px;
    left: -14px;
    background:url(../../images/atlas/icon-gap-top.png) no-repeat;
}

#gapButton .bottom {
    position:absolute;
    width:36px;
    height:36px;
    display:block;
    bottom:-5px;
    left:-14px;
    background:url(../../images/atlas/icon-gap-bottom.png) no-repeat;
}

.viewType-1 #gapButton {
    width:6px;
    position:absolute;
    z-index:8000;
    left:50%;
    height:100%;
    margin-left:-3px;
    background:#122596;
    cursor:pointer;
    display:block;
}

.viewType-1 #gapButton:hover {
    background:#dd0000;
}

#opacityPanel {
    display:none;
}

.viewType-3 #opacityPanel {
    display:block;
    width:250px;
    height:10px;
    position:absolute;
    bottom:6px;
    z-index:7000;
    background:#FFF url(../../images/atlas/bg-opacity.png) no-repeat left center;
    border:1px solid #000;
    left:50%;
    margin-left:-125px;
}

.viewType-3 #opacityPanel a {
    display:block;
    width:20px;
    height:20px;
    background: #122596;
    border: 1px solid #fff;
    position:absolute;
    left:125px;
    top:-6px;
    margin-left:-10px;
}