#BasicInfoV4 { position:absolute; top:0px; left:0px; width:220px; height:135px; font-size:11px; text-shadow:1px 1px white; }
#BasicInfoV4.small .large { display:none; }
#BasicInfoV4.large .small { display:none; border-radius:5px; }
#BasicInfoV4.small { height:53px; }
#BasicInfoV4.large .bt_menu { top:135px; }
#BasicInfoV4.small .bt_menu { top:53px; }

#BasicInfoV4 .buttons { background-position: left bottom; }
#BasicInfoV4.large .buttons { top:144px; }
#BasicInfoV4.small .buttons { top:62px; }

#BasicInfoV4 .topbar { height: 16px; }
#BasicInfoV4 .topbar .left { position:absolute; top:3px; left:4px; width:11px; height:11px; border:none; background:none; }
#BasicInfoV4 .topbar .right { position:absolute; top:3px; right:2px; width:11px; height:11px; border:none; background:none; }

/* LARGE */
#BasicInfoV4 .large .title{ position:absolute; top:2px; left:18px; }
#BasicInfoV4 .large .name { position:absolute; left:10px; top:20px; }
#BasicInfoV4 .large .job  { position:absolute; left:10px; top:33px; }
#BasicInfoV4 .large .hp_title { position:absolute; top:50px; left:15px;  }
#BasicInfoV4 .large .sp_title { position:absolute; top:65px; left:15px;  }
#BasicInfoV4 .large .hp_bar, #BasicInfoV4 .large .sp_bar { position:absolute; top:53px; left:35px; width:135px; height:9px; }
#BasicInfoV4 .large .sp_bar { top:68px; }
#BasicInfoV4 .large .hp_bar div, #BasicInfoV4 .large .sp_bar div { width:4px; height:9px; float:left; }
#BasicInfoV4 .large div.hp_bar_perc, #BasicInfoV4 .large div.sp_bar_perc { text-align:center; width:127px; font-size:10px; position:absolute; top:-1px; }
#BasicInfoV4 .large .hp_perc { position:absolute; top:50px; right:20px; }
#BasicInfoV4 .large .sp_perc { position:absolute; top:65px; right:20px; }
#BasicInfoV4 .large .blvl { position:absolute; top:86px; left:15px; }
#BasicInfoV4 .large .jlvl { position:absolute; top:97px; left:15px; }
#BasicInfoV4 .large .bexp, #BasicInfoV4 .large .jexp{ position:absolute; top:89px; left:84px; width:110px; height:4px; border:1px solid #afafaf; background-color:white; }
#BasicInfoV4 .large .bexp div, #BasicInfoV4 .large .jexp div { position:absolute; top:0px; left:0px; width:0%; height:4px; background-color:#4262a5; }
#BasicInfoV4 .large .jexp { top:101px; }
#BasicInfoV4 .large .extra { position:absolute; top:119px; right:-15px; width:100%; }
#BasicInfoV4 .large .extra { padding-right:10px; }
#BasicInfoV4 .buttons { position:absolute; left:0px; top:9px; width:220px; display: grid; grid-template-columns: auto auto auto auto auto; justify-items: center; }
#BasicInfoV4 .bt_menu { position:absolute; left:0px; width:219px; height:9px; }
#BasicInfoV4 .buttons button { width:32px; height:32px; border:none; margin:6px; background: transparent; }

/* REDUCED */
#BasicInfoV4 .small .line1 { position:absolute; top:2px;  left:18px; text-shadow:1px 1px white; white-space:nowrap; }
#BasicInfoV4 .small .line2 { position:absolute; top:20px; left:10px; white-space:nowrap; }
#BasicInfoV4 .small .line3 { position:absolute; top:36px; left:10px; white-space:nowrap; }
#BasicInfoV4 .toggle_btns {  border:none; background-repeat:no-repeat; }

#BasicInfoV4 .buttons button .name { pointer-events: none; position: relative; display:none; z-index:1; top:-20px; left:0px; background-color:rgba(0,0,0,0.6); text-shadow:1px 1px black; color:white; padding:5px; white-space:nowrap; font-size: 0.6rem; }
#BasicInfoV4 .buttons button:hover .name { display:table; }
#BasicInfoV4 .buttons button .name { display:none; }

#BasicInfoV4 .buttons .btn_overlay { pointer-events: none; width:35px; height:40px; border:none; position: relative; top: -6px; left: 0; display: none; }
#BasicInfoV4 .buttons button:active .btn_overlay { pointer-events: none; top: -5px; }