@charset "UTF-8";

* { margin: 0; padding: 0; }
html, body { height: 100%; max-height: 100%; background-color: #FFF; font-size: 1em; overflow: hidden; }
html, body, div, span, li { font-family: "Dotum","돋움","Tahoma","Verdana","AppleGothic"; }

body { -webkit-overflow-scrolling: none }

a { text-decoration: none; }
li { list-style-type: none; }

#loading { display: none; text-align: center; padding: 30px 0; line-height: 2; font-size: 0.85em; }

#top,
#title { position: absolute; display: block; width: 100%; }

#top { height: 35px; background: url(../imgs/bg.gif) top repeat-x; z-index: 5; }
#lg { width: 159px; height: 35px; background: url(../imgs/lg.gif) no-repeat; margin-left: 10px; }
#lg span { display: none; }
#lg a { display: block; width: 100%; height: 100%; }

#title { height: 38px; background: url(../imgs/bg3.gif) top repeat-x; z-index: 4; top: 35px; }
#title div { position: absolute; line-height: 2.5; font-size: 1em; color: #515151; padding-left: 10px; font-weight: bold; }

#albumlist,
#t_albumlist { left: 0; width: 330px; }
#tracklist,
#t_tracklist { left: 330px; width: 330px; }
#lyricsmain,
#t_lyricsmain { left: 660px;  }

#tracklist,
#lyricsmain { background: url(../imgs/bg2.gif) repeat-y; }

#albumlist,
#tracklist,
#lyricsmain { top: 73px; z-index: 3; bottom: 0; position: absolute; overflow: auto; z-index: 2; display: block; }

#lyricsmain,
#t_lyricsmain { right: 0; }

#lyricsmain { line-height: 150%; }
#t_lyricsmain { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

#category { height: 100px; background-color: #FFE3F0; font-size: 0.8em; padding: 10px; border-bottom: 1px solid #DDD; }
#category dt,
#category dd { height: 20px; display: block; }
#category dt { font-weight: bold; float: left; clear: both; width: 65px; }
#category dd {  }
#category li { position: relative; float: left; margin: 1px 2px 1px 3px; color: #000; font-size: 11px; font-family: "돋움","Dotum"; line-height: 1em; white-space: nowrap; }
#category li a { display: block; padding: 4px 5px 1px 4px; color: #000; }
#category li a:hover { text-decoration: underline; }
#category li.selected { background: #E24E8D url(../imgs/bg_selected.gif) 0 0 no-repeat; }
#category li.selected a { background: url(../imgs/bg_selected.gif) 100% 0 no-repeat; color: #FFF; }
#list { overflow-x: hidden; }
#item { border-bottom: 1px solid #DDD; width: 100%; height: 50px; overflow: hidden; cursor: pointer; display: block; }
#item:hover { background-color: #FDF1F6; }
#item.on { background-color: #FFE3F0; }
#item div { position: absolute; }
#item .cover { left: 0; width: 50px; }
#item .title { left: 60px; padding-top: 10px; font-size: 0.8em; font-weight: bold; }
#item .title span { display: block; font-size: 0.9em; color: #555; font-weight: 100; margin-top: 3px; }

#albuminfo {  }
#albuminfo div { }
#albuminfo .blank { height: 20px; clear: both; display: block; }
#albuminfo .title { width: 75px; height: 18px; background: url(../imgs/albuminfo.gif) no-repeat; margin: 5px; }
#albuminfo .title span { display: none; }
#albuminfo .albumtitle { font-size: 0.95em; font-weight: bold; margin: 5px 0 5px 10px; overflow: hidden; }
#albuminfo .cover { float: left; margin: 0 5px 0 10px; width: 120px; height: 120px;  }
#albuminfo .info { color: #222; font-size: 0.8em; }
#albuminfo .info strong { display: block; }
#albuminfo .tracklist_title { width: 57px; height: 18px; background: url(../imgs/tracklist.gif) no-repeat; margin: 5px; display: block; }
#albuminfo .tracklist_title span { display: none; }
#albuminfo .tracklist {  }
#albuminfo .track,
#albuminfo .track2 { display: block; border-top: 1px solid #DDD; padding: 5px 0 5px 30px; font-size: 0.8em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#albuminfo .track { cursor: pointer; }
#albuminfo .track2 { color: #888; }
#albuminfo .track span,
#albuminfo .track2 span { position: absolute; right: 0; padding-right: 5px; font-size: 0.7em; color: #777; }
#albuminfo .track:hover { background-color: #FDF1F6; }
#albuminfo .on { background-color: #FFE3F0; font-weight: bold; }
#albuminfo .on span { font-weight: normal; }

.lyrics { padding: 10px; }

/* Track Number */
.num01, .num02, .num03, .num04, .num05, .num06, .num07, .num08, .num09, .num10 { background: url(../imgs/01-10.png) no-repeat; }
.num11, .num12, .num13, .num14, .num15, .num16, .num17, .num18, .num19, .num20 { background: url(../imgs/11-20.png) no-repeat; }
.num21, .num22, .num23, .num24, .num25, .num26, .num27, .num28, .num29, .num30 { background: url(../imgs/21-30.png) no-repeat; }
.num31, .num32, .num33, .num34, .num35, .num36, .num37, .num38, .num39, .num40 { background: url(../imgs/31-40.png) no-repeat; }
.num41, .num42, .num43, .num44, .num45, .num46, .num47, .num48, .num49, .num50 { background: url(../imgs/41-50.png) no-repeat; }
.num01, .num11, .num21, .num31, .num41 { background-position: 5px 3px; }
.num02, .num12, .num22, .num32, .num42 { background-position: 5px -27px; }
.num03, .num13, .num23, .num33, .num43 { background-position: 5px -57px; }
.num04, .num14, .num24, .num34, .num44 { background-position: 5px -87px; }
.num05, .num15, .num25, .num35, .num45 { background-position: 5px -117px; }
.num06, .num16, .num26, .num36, .num46 { background-position: 5px -147px; }
.num07, .num17, .num27, .num37, .num47 { background-position: 5px -177px; }
.num08, .num18, .num28, .num38, .num48 { background-position: 5px -207px; }
.num09, .num19, .num29, .num39, .num49 { background-position: 5px -237px; }
.num10, .num20, .num30, .num40, .num50 { background-position: 5px -267px; }