.world_map{ background:black; font-size:13px; color:white; } .map_title{ width:700px; height:20px; text-align:center; } .map_detail .map_title{ background: url('/images/ltitle.jpg') no-repeat left, url('/images/rtitle.jpg') no-repeat right; } .map_title_text{ margin:auto; text-align:center; width:160px; display:block; line-height:20px; font-size:13px; font-weight:bold; } .map_detail.map_spring .map_title_text{ background: url('/images/ad.gif') no-repeat left, url('/images/spring.gif') no-repeat right; } .map_detail.map_summer .map_title_text{ background: url('/images/ad.gif') no-repeat left, url('/images/summer.gif') no-repeat right; } .map_detail.map_fall .map_title_text{ background: url('/images/ad.gif') no-repeat left, url('/images/fall.gif') no-repeat right; } .map_detail.map_winter .map_title_text{ background: url('/images/ad.gif') no-repeat left, url('/images/winter.gif') no-repeat right; } .map_body{ width:700px; height:500px; position:relative; } .map_spring .map_body{ background: url('/images/map1.jpg') no-repeat; } .map_summer .map_body{ background: url('/images/map2.jpg') no-repeat; } .map_fall .map_body{ background: url('/images/map3.jpg') no-repeat; } .map_winter .map_body{ background: url('/images/map4.jpg') no-repeat; } .world_map .city_tooltip{ position: absolute; z-index:6; display:none; width:120px; border: 0.02em gray solid; } .world_map .city_name{ background-color: rgb(30, 164, 255); z-index: 6; line-height:15px; height:15px; } .world_map .nation_name{ background-color: rgb(30, 164, 255); z-index: 6; line-height:15px; height:15px; border-top: 0.02em gray solid; text-align:right; } .world_map .map_flag{ width:12px; height:12px; } .world_map .my_city{ border:solid 0.02em red;/* Always 1px :) */ outline:dotted 3px red; } .city_base{ position:absolute; width:40px; height:30px; } .city_base .city_bg{ z-index:1; position:absolute; background-position: center; } .city_base div{ z-index:2; } /* .map_detail .city_base.city_level_{0} .city_bg{ //$img = loadImg('/images/cast_{0}.gif'); //$parent = cssSelect('.city_base'); width: $img.width; height: $img.height; left: ($parent.width - $img.width)/2; top: ($parent.height - $img.height)/2; } */ .map_detail .city_base.city_level_1 .city_bg{ /*수*/ width:48px; height:45px; background-size:48px 45px; left:-4px; top:-7.5px; } .map_detail .city_base.city_level_2 .city_bg{ /*진*/ width:60px; height:42px; background-size:60px 42px; left:-10px; top:-6px; } .map_detail .city_base.city_level_3 .city_bg{ /*관*/ width:42px; height:42px; background-size:42px 42px; left:-1px; top:-6px; } .map_detail .city_base.city_level_4 .city_bg{ /*이*/ width:60px; height:45px; background-size:60px 45px; left:-10px; top:-7.5px; } .map_detail .city_base.city_level_5 .city_bg{ /*소*/ width:72px; height:48px; background-size:72px 48px; left:-16px; top:-9px; } .map_detail .city_base.city_level_6 .city_bg{ /*중*/ width:78px; height:54px; background-size:78px 54px; left:-19px; top:-12px; } .map_detail .city_base.city_level_7 .city_bg{ /*대*/ width:84px; height:60px; background-size:84px 60px; left:-22px; top:-15px; } .map_detail .city_base.city_level_8 .city_bg{ /*특*/ width:96px; height:72px; background-size:96px 72px; left:-28px; top:-21px; } .city_img{ position:absolute; } /* .city_base.city_level_{0} .city_img{ //$img = loadImg('/images/cast_{0}.gif'); //$parent = cssSelect('.city_base'); width: $img.width; height: $img.height; left: ($parent.width - $img.width)/2; top: ($parent.height - $img.height)/2; } */ .city_base.city_level_1 .city_img{ width:16px; height:15px; left:12px; top:7.5px; } .city_base.city_level_2 .city_img{ width:20px; height:14px; left:10px; top:8px; } .city_base.city_level_3 .city_img{ width:14px; height:14px; left:13px; top:8px; } .city_base.city_level_4 .city_img{ width:20px; height:15px; left:10px; top:7.5px; } .city_base.city_level_5 .city_img{ width:24px; height:16px; left:8px; top:7px; } .city_base.city_level_6 .city_img{ width:26px; height:18px; left:7px; top:6px; } .city_base.city_level_7 .city_img{ width:28px; height:20px; left:6px; top:5px; } .city_base.city_level_8 .city_img{ width:32px; height:24px; left:4px; top:3px; }