@charset "UTF-8"; /*___________________________________ Cascading Style Sheets for SHOTOC --- n_a_r_y & jun --- office@shotoc.com 2023.23.july ___________________________________*/ a { color: ##99FFFF} a:hover { color:#FF9900; text-decoration:none;} .format { background-color: #4C4C4C} .spec { color:#999; text-indent: 0; padding-left: 1em; margin:0 0 0.2em 0;} .spec::before { content: '■'; margin-left: -1em;} .notice { text-indent: 0; padding-left: 1em; margin:0 0 0.5em 0;} .notice::before { content: '※'; margin-left: -1em;} @font-face {font-family:"standard 07_53";src:url("stan0753.woff") format("woff");font-weight:normal;font-style:normal;} @font-face {font-family:"standard 07_55";src:url("stan0755.woff") format("woff");font-weight:normal;font-style:normal;} #sound_main { width:100%; height:280px; position:relative; } /* sample player */ #sampleplayer { width:100%; height:85px; overflow:hidden; position:absolute; background:url(../img/bg_sampleplayer.png) no-repeat; } #sampleplayer p { position:absolute; margin:0; overflow:hidden; } #sampleplayer p#sp_title { left:69px; top:28.5px; width:132px; height:12px; text-align:left; color:#F00; font-size:11px; font-family:courier new, courier; line-height:1; user-select: none; } #sampleplayer div#sp_tempo { position:absolute; left:35px;top:62px; } #sampleplayer div#sp_tempo p, #sampleplayer div#sp_signature1 p, #sampleplayer div#sp_signature2 p, #sampleplayer div#sp_bars p, #sampleplayer div#sp_soundno p { width:8px; height:0; padding-top:12px; background:url(../img/number.png); } #sampleplayer div#sp_tempo p.num0 { left:0; background-position:0 -12px;} #sampleplayer div#sp_tempo p.num1 { left:11px; background-position:0 -24px;} #sampleplayer div#sp_tempo p.num2 { left:22px; background-position:0 -60px;} #sampleplayer div#sp_signature1 { position:absolute; left:87px;top:62px; } #sampleplayer div#sp_signature1 p.num0 { left:0; background-position:0 0;} #sampleplayer div#sp_signature1 p.num1 { left:11px; background-position:0 -48px;} #sampleplayer div#sp_signature2 { position:absolute; left:126px;top:62px; } #sampleplayer div#sp_signature2 p.num0 { left:0; background-position:0 0;} #sampleplayer div#sp_signature2 p.num1 { left:11px; background-position:0 -48px;} #sampleplayer div#sp_bars { position:absolute; left:162px;top:62px; } #sampleplayer div#sp_bars p.num0 { left:0; background-position:0 0;} #sampleplayer div#sp_bars p.num1 { left:11px; background-position:0 -96px;} #sampleplayer div#sp_soundno { position:absolute; left:242px;top:25px; } #sampleplayer div#sp_soundno p.num0 { left:0; background-position:0 0;} #sampleplayer div#sp_soundno p.num1 { left:11px; background-position:0 0;} #sampleplayer div#sp_soundno p.num2 { left:22px; background-position:0 -60px;} #sampleplayer div#sp_soundno p.num3 { left:33px; background-position:0 -108px;} #sampleplayer p#bt_stop { left:235px;top:44px; width:36px; height:0; padding-top:36px; background:url(../img/bt_stop.png); } #sampleplayer p#bt_play { left:266px;top:44px; width:36px; height:0; padding-top:36px; background:url(../img/bt_play.png); } #sampleplayer p#bt_up { left:290px;top:17px; width:16px; height:0; padding-top:12px; background:url(../img/bt_up.png); } #sampleplayer p#bt_down { left:290px;top:29px; width:16px; height:0; padding-top:12px; background:url(../img/bt_down.png); } #sampleplayer p#bt_nob { left:334px;top:36px; width:15px; height:0; padding-top:18px; background:url(../img/bt_nob.png); } #sampleplayer p#bt_nob:hover { cursor:pointer; } #sampleplayer p#meter_l { left:321px;top:12px; width:9px; height:0; padding-top:65px; background:url(../img/meter.png); } #sampleplayer p#remain_l { left:321px;top:12px; width:9px; height:0; padding-top:4px; background:url(../img/meter_red.png); display:none; } #sampleplayer p#meter_r { left:352px;top:12px; width:9px; height:0; padding-top:65px; background:url(../img/meter.png); } #sampleplayer p#remain_r { left:352px;top:12px; width:9px; height:0; padding-top:4px; background:url(../img/meter_red.png); display:none; } /* information viewer */ #informationviewer { width:100%; height:194px; overflow:hidden; position:absolute; top:86px; background:url(../img/bg_informationviewer.png) no-repeat; } #informationviewer p { position:absolute; margin:0; overflow:hidden; } #informationviewer p#available { left:286px; top:2px; width:300px; text-align:right; font-family:"standard 07_55"; color:#FFF; font-size:16px;transform:scale(0.5) translate(-100%,0); font-weight:normal; font-smooth:none; -webkit-font-smoothing:none; -moz-osx-font-smoothing:grayscale; user-select: none; } #informationviewer p#jacket_image { left:52px; top:32px; width:140px; height:0; padding-top:140px; background:url(../img/jacket/sl59.png); } #informationviewer p#sd_1 { left:52px; top:32px; width:140px; height:0; padding-top:140px; background:url(../img/sd_1.png); } #informationviewer p#sd_2 { left:200px; top:32px; width:154px; height:0; padding-top:100px; background:url(../img/sd_2.png); } #informationviewer div#panel { position:absolute; left:213px; top:37px; width:170px; font-family:"standard 07_55"; color:#70F7FF; font-size:16px;transform:scale(0.5); font-weight:normal; font-smooth:none; -webkit-font-smoothing:none; -moz-osx-font-smoothing:grayscale; user-select: none; } #informationviewer p#iv_title { left:0; top:0; width:180px; text-align:left; } #informationviewer p#iv_tempo { left:0; top:47px;} #informationviewer p#iv_signature { left:0; top:73px;} #informationviewer p#iv_bars { left:0; top:99px;} #informationviewer p#iv_date { left:0; top:125px;} #informationviewer p#iv_composer { left:0; top:151px;} #informationviewer div#filesize { position:absolute; left:264px; top:141px; width:60px; font-family:"standard 07_55"; color:#FFF; font-size:16px;transform:scale(0.5); font-weight:normal; font-smooth:none; -webkit-font-smoothing:none; -moz-osx-font-smoothing:grayscale; } #informationviewer p#fs_mp3 { left:0; top:0; text-align:right; transform:translate(-100%,0); } #informationviewer p#fs_wav { left:0; top:34px; text-align:right; transform:translate(-100%,0); } #informationviewer p#bt_mp3 { left:282px;top:139px; width:66px; height:0; padding-top:18px; background:url(../img/bt_download.png); } #informationviewer p#bt_wav { left:282px;top:155px; width:66px; height:0; padding-top:18px; background:url(../img/bt_download.png); } #informationviewer p#bt_mp3:hover, #informationviewer p#bt_wav:hover { background-position:0 -18px; cursor:pointer; } #informationviewer p#bt_mp3:active, #informationviewer p#bt_wav:active { background-position:0 -36px; }