dataserver_management_map_ui_sh2000/styles/atlas/atlasCategory.css

html,body {
    background: url(../../images/layout/bg.png);
    overflow:hidden;
}

#navcategoryTabs{
    height:58px;
    position:absolute;
    top: 12px;
    left: -7px;
    z-index:5555;
}
#navcategoryTabs a{
    width: 159px;
    height: 58px;
    text-align: center;
    line-height: 68px;
    text-decoration: none;
    cursor: pointer;
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #00d2ff;
}
#navcategoryTabs a:hover,
#navcategoryTabs .selected{
    background: url(../../images/layout/bg_tab_cur.png) no-repeat left top;
    color: #ffcd2c;
}


#navBar {
    height: 70px;
    top: 61px;
    position: absolute;
    left: 20px;
    right: 20px;
    background: url(../../images/layout/bg_tab_wrap.png) repeat-x left top;
}

#atlasSearch {
    height:38px;
    overflow:hidden;
    position:absolute;
    right:0px;
    top:16px;

}

#atlasSearch .input {
    border:none;
    background: url(../../images/layout/bg_search_input.png) no-repeat;
    width:197px;
    height: 38px;
    float:left;
    text-indent: 10px;
    color: #ffffff;
    padding:0px;
}

#cleanAtlasSearch {
    position: absolute;
    left: 169px;
    top: 11px;
    font-family: tahoma;
    font-size: 18px;
    display: block;
    width: 20px;
    height: 25px;
    text-align: center;
    line-height: 20px;
    color: #999;
    cursor: pointer;
    display: none;
    background: url(../../images/layout/abtn-close.png) no-repeat;
    overflow: hidden;
    text-indent: -99999px;
}

#atlasSearch .button {
    background:url(../../images/layout/bg_search.png) no-repeat;
    border:none;
    width:64px;
    height: 38px;
    cursor:pointer;
    text-indent: -999999px;
    overflow: hidden;
}

#categoryTabs {
    position:absolute;
    left:0px;
    top:0px;
    height:100%;
    width:70px;
    padding:10px 0 0 0;
    border-right:1px solid #AAA;
    background:#FFF url(../../images/layout/2.png);
    z-index:200;
}

#categoryTabs a {
    display:block;
    width:40px;
    text-align:center;
    float:right;
    padding:20px 5px;
    font-size:24px;
    font-family:SimSun;
    cursor:pointer;
    color:#595959;
    background:#EEE;
    text-decoration:none;
    margin-bottom:1px;
    border-bottom-left-radius:10px;
    border-top-left-radius:10px;
}

#categoryTabs a:hover {
    background:#EEE;
}

#categoryTabs .select,
#categoryTabs .select:hover {
    background:#00b7ef;
    color:#FFF;
}


#mapCategory {
    position:relative;
    width:100%;
    background:url(../../images/layout/bg.png);
    z-index:900000;
    top:70px;
    left:0px;
    right: 0px;
}

#atlasListWrap {
    margin:0 20px 50px 20px;
    z-index:100;
    padding: 0 0 15px 0;
    position:relative;
    background: url(../../images/layout/bg_box_body.png);
}

#atlasListWrap .box-left {
    position: absolute;
    left: -7px;
    top: 0px;
    width: 8px;
    bottom: 0px;
    background: url(../../images/layout/bg_box_left.png) repeat-y right top;
}

#atlasListWrap .box-right {
    position: absolute;
    right: -8px;
    top: 0px;
    width: 8px;
    bottom: 0px;
    background: url(../../images/layout/bg_box_right.png) repeat-y right top;
}

#atlasListWrap .box-bottom {
    position: absolute;
    bottom: -8px;
    left:0px;
    right:0px;
    height: 8px;
    background: url(../../images/layout/bg_box_bottom.png) repeat-x left top;
}

#atlasList {
    padding:10px 0;
    margin:0px;
}

#noListData {
    text-align: center;
    font-size: 14px;
    padding: 20px;
    color: #fff;
}

#atlasList li {
    float:left;
    width: 308px;
    height: 226px;
    overflow:hidden;
    cursor:pointer;
    position:relative;
    display:inline-block;
}

#atlasList li .cover {
    width: 308px;
    height: 226px;
    background: url(../../images/layout/cover_item.png) no-repeat center center;
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
}

#atlasList .li-select {
}
#atlasList .li-select .cover,
#atlasList .li-select:hover .cover {
    background: url(../../images/layout/cover_item_select.png) no-repeat center center;
}

#atlasList li img {
    width: 279px;
    margin: 27px 0 0 15px;
}


#atlasList li:hover .cover {
    background: url(../../images/layout/cover_item_hover.png) no-repeat center center;
}

#atlasList li .name {
    display:block;
    position:absolute;
    left: 34px;
    bottom: 32px;
    font-family:"microsoft yahei";
    font-size: 16px;
    width: 240px;
    text-align: center;
    font-weight: bold;
    color:#01aff9;
    text-shadow: 1px 1px 1px #000;
}

#atlasList li:hover .name {
    color: #ffcd2c;
}