#wowsDb #wowsDbTree { width: 708px; border: 1px solid #002734; overflow: hidden; background-color: #008ebb; margin: 15px 0 15px 0; } #wowsDb #wowsDbTree .content { width: 706px; background-color: #004156; margin: 1px; } #wowsDb #wowsDbTree .wowsDbtreeTop { margin-top: 16px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul { } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state1 { margin-left: 19px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state2 { margin-left: 12px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state3 { margin-left: 13px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state4 { margin-left: 12px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state5 { margin-left: 12px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state6 { margin-top: 5px; margin-left: 19px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state7 { margin-top: 5px; margin-left: 12px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state8 { margin-top: 5px; margin-left: 13px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state9 { margin-top: 5px; margin-left: 12px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state10 { margin-top: 5px; margin-left: 12px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state99 { margin-top: 5px; margin-left: 19px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state12 { margin-top: 5px; margin-left: 12px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state13 { margin-top: 5px; margin-left: 19px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state14 { margin-top: 5px; margin-left: 13px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li, #wowsDb #wowsDbTree .wowsDbtreeTop ul li a { float: left; display: block; width: 124px; height: 43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li a { margin-left: 0; text-indent:-9999px; background: url('//static.inven.co.kr/image_2011/wows/dataninfo/tree/treetop_state_669x87a.jpg') no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state1 a { background-position: 0 0; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state2 a { background-position: -136px 0; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state3 a { background-position: -273px 0; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state4 a { background-position: -409px 0; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state5 a { background-position: -545px 0; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state1 a:hover, #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state1 a.selected { background-position: 0 -44px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state2 a:hover, #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state2 a.selected { background-position: -136px -44px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state3 a:hover, #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state3 a.selected { background-position: -273px -44px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state4 a:hover, #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state4 a.selected { background-position: -409px -44px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state5 a:hover, #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state5 a.selected { background-position: -545px -44px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state6 a, #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state7 a, #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state8 a, #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state9 a, #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state99 a { background: url('//static.inven.co.kr/image_2011/wows/dataninfo/tree/nation_669x86_grid3a.jpg') no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state10 a { background: url('//static.inven.co.kr/image_2011/wows/dataninfo/tree/bttn_124x86_italy.png') no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state12 a { background: url('//static.inven.co.kr/image_2011/wows/dataninfo/tree/america.jpg') no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state13 a { background: url('//static.inven.co.kr/image_2011/wows/dataninfo/tree/netherlands.jpg') no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state14 a { background: url('//static.inven.co.kr/image_2011/wows/dataninfo/tree/spain.png') no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state6 a { background-position: 0px 0px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state7 a { background-position: -136px 0px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state8 a { background-position: -273px 0px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state9 a { background-position: -409px 0px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state99 a { background-position: -545px 0px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state10 a { background-position: 0 0; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state6 a:hover { background-position: 0px -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state7 a:hover { background-position: -136px -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state8 a:hover { background-position: -273px -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state9 a:hover { background-position: -409px -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state99 a:hover { background-position: -545px -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state10 a:hover { background-position: 0 -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state12 a:hover { background: url(//static.inven.co.kr/image_2011/wows/dataninfo/tree/america_hover.jpg) no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state13 a:hover { background: url(//static.inven.co.kr/image_2011/wows/dataninfo/tree/netherlands_hover.jpg) no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state14 a:hover { background: url(//static.inven.co.kr/image_2011/wows/dataninfo/tree/spain_hover.png) no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state6 a.selected { background-position: 0px -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state7 a.selected { background-position: -136px -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state8 a.selected { background-position: -273px -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state9 a.selected { background-position: -409px -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state10 a.selected { background-position: -545px -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state10 a.selected { background-position: 0 -43px; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state12 a.selected { background: url(//static.inven.co.kr/image_2011/wows/dataninfo/tree/america_hover.jpg) no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state13 a.selected { background: url(//static.inven.co.kr/image_2011/wows/dataninfo/tree/netherlands_hover.jpg) no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop ul li.state14 a.selected { background: url(//static.inven.co.kr/image_2011/wows/dataninfo/tree/spain_hover.png) no-repeat; } #wowsDb #wowsDbTree .wowsDbtreeTop .treeTopEnd { width: 690px; height: 1px; background-color: #008ebb; margin: 16px 0 0 6px; } #wowsDb #wowsDbTree .wowsDbtreeList { width: 700px; margin: 19px 0 0 9px; } #wowsDb #wowsDbTree .wowsDbtreeList ul li { width: 103px; text-align: center; color: #ffffff; font-weight: bold; } #wowsDb #wowsDbTree .wowsDbtreeList ul li.shiptype2 { margin-left: 12px; } #wowsDb #wowsDbTree .wowsDbtreeList ul li.shiptype3 { margin-left: 13px; width: 258px; } #wowsDb #wowsDbTree .wowsDbtreeList ul li.shiptype4 { margin-left: 12px; } #wowsDb #wowsDbTree .wowsDbtreeList ul li.shiptype5 { margin-left: 12px; } #wowsDb #wowsDbTree .wowsDbtreeList ul li.shiptype6 { margin-left: 12px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist { width: 688px; height: 820px; position: relative; overflow-x: scroll; overflow-y: hidden;} #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo { width: 90px; height: 54px; overflow: hidden; background-color: #00151c; } #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo img.shipimg { width: 88px; height: 52px; border: 1px solid #000000; position: absolute; left: 0; top: 0; } /* TEST */ #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.shipcode, #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.reqship, #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.coordinate { color: white; text-align: center; display: inline-block; width: 100%; position: absolute; } #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.shipcode { top: 10px; font-weight: bold; font-size: 13px; } #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.reqship { top: 32px; font-weight: bold; font-size: 13px; } #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.coordinate { top: 52px; font-weight: bold; font-size: 13px; } /* -- */ #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.shiptype, #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.tier, #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.reqship, #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.shipname { display: inline-block; position: absolute } #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.shipname { width: 100%; } #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.shiptype { top: 7px; left: 7px; } #wowsDb #wowsDbTree .wowsDbtreeList div.shipinfo span.tier { top: 6px; left: 26px; color: #bdbaac; font-weight: bold; font-size: 12px;} #wowsDb #wowsDbTree .wowsDbtreeList .treelist .shipinfo span.shipname { bottom: 8px; right: 13px; width: auto; color: #FFF; text-align: center; padding: 3px; font-weight: bold; background-color: rgba(0, 0, 0, 0.5); letter-spacing: -1px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 82px; } #wowsDb #wowsDbTree .wowsDbtreeList .premiumBox .shipinfo span.shipname { bottom: 1px; right: -1px; width: auto; color: #FFF; text-align: center; padding: 3px; font-weight: bold; background-color: rgba(0, 0, 0, 0.5); letter-spacing: -1px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 82px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .top1 { top: 0; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .top2 { top: 73px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .top3 { top: 146px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .top4 { top: 219px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .top5 { top: 292px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .top6 { top: 365px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .top7 { top: 438px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .top8 { top: 511px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .top9 { top: 584px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .top10 { top: 657px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .top11 { top: 730px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .left1 { left: 0; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .left2 { left: 100px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .left3 { left: 200px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .left4 { left: 300px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .left5 { left: 400px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .left6 { left: 500px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .left7 { left: 600px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist .left8 { left: 700px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo { position: absolute; overflow: hidden; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.xRightLine { width: 10px; height: 3px; background-color: #008ebb; margin: 28px 0 0 -10px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.xRightLine[data-diff-x="2"] { margin: 27px 0 0 -110px; width: 110px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.xRightLine[data-diff-x="3"] { width: 236px; margin: 30px 0 0 -236px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.xLeftLine { width: 10px; height: 3px; background-color: #008ebb; margin: 28px 0 0 90px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.xLeftLine[data-diff-x="-2"] { width: 110px; margin: 30px 0 0 90px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.xLeftLine[data-diff-x="-3"] { width: 210px; margin: 25px 0 0 90px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.yLine { width: 3px; height: 18px; background-color: #008ebb; margin: -18px 0 0 44px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.yLine[data-diff-y="2"] { height: 91px; margin: -92px 0 0 44px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.leftWidth1 { width: 55px; height: 3px; background-color: #008ebb; margin: -48px 0 0 44px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.leftHeight1 { width: 3px; height: 46px; background-color: #008ebb; margin: -46px 0 0 44px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.rightWidth1 { width: 57px; height: 3px; background-color: #008ebb; margin: -46px 0 0 -10px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.rightHeight1 { width: 3px; height: 43px; background-color: #008ebb; margin: -43px 0 0 44px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.rightWidth2 { width: 100px; height: 3px; background-color: #008ebb; margin: -46px 0 0 -53px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist div.lineInfo.rightHeight2 { width: 3px; height: 43px; background-color: #008ebb; margin: -43px 0 0 44px; } #wowsDb #wowsDbTree .wowsDbtreeList .treelist a { position: absolute; width: 103px; height: 61px; overflow: hidden; display: inline-block; } /* 프리미엄 군함 박스 */ #wowsDb #wowsDbTree .wowsDbtreeList .premiumBox { display: block; overflow: hidden; width: 100%; } #wowsDb #wowsDbTree .wowsDbtreeList .premiumBox .premiumTitle { display: block; width: 100%; overflow: hidden; color: #FFFFFF; font-weight: bold; border-top: 1px solid #008ebb; padding: 22px 0; margin-top: 22px; text-align: center; } #wowsDb #wowsDbTree .wowsDbtreeList .premiumBox .premiumList { display: block; width: 100%; overflow: hidden; margin: 5px 0 0 15px; } #wowsDb #wowsDbTree .wowsDbtreeList .premiumBox .premiumList .shipinfo { position: relative; } #wowsDb #wowsDbTree .wowsDbtreeList .premiumBox .premiumList .premiumShip { margin-right: 10px; margin-bottom: 10px; } #wowsDb #wowsDbTree .wowsDbtreeList .premiumBox .premiumList .premiumShip:nth-child(6n) { margin-right: 0px; }