@charset 'Shift_JIS';
/*
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃  TITLE     : 俳諧アルバム                                  ┃
┃  SHEET     : haikai.css                                    ┃
┃  VERSION   : Ver1.1.2                                      ┃
┃  LANGUAGE  : JavaScript1.3                                 ┃
┃  AUTHOR    : yap                                           ┃
┃  CREATED   : 2008/02/24  //as Ver1.0.1                     ┃
┃  UPDATED   : 2009/11/16  //as Ver1.1.2                     ┃
┃  LICENSE   : (c) 2008 interOrb yap All Rights Reserved.    ┃
┃  LINKURL   : http://yap.jp/bin/labo/haikai/                ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
*/
/***************************************************************
    ページ全体の定義
***************************************************************/

/* ページ全体の定義 */
html {
    background-color: #000000;
    scrollbar-face-color: #000000;
    scrollbar-arrow-color: #990000;
    scrollbar-highlight-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-3dlight-color: #990000;
    scrollbar-darkshadow-color: #990000;
    scrollbar-track-color: #000000;
}

/* ボディの定義 */
body {
    margin: 0px;
    padding: 0px;
    font-size: 12pt;
    font-family: 'HG行書体','DF行書体','AR行書体Ｍ','CRC&G流麗行書体','ＭＳ 明朝','ヒラギノ明朝ProＷ３';
    line-height: 1.5em;
}

/***************************************************************
    ヘッダ/メニュー部の定義
***************************************************************/

/* ページ部の定義 */
#page {
    margin: auto;
    width: 984px;
    height: 664px;
}

/* ヘッダ部の定義 */
#head {
    height: 8px;
    background-color: #000000;
}

/* メニュー部の定義 */
#menu {
    float: left;
    padding: 40px 24px 24px 32px;
    width: 152px;
    height: 560px;
    background-image: url('image/menu.jpg');
}

/* ロゴ部の定義 */
#logo {
    height: 104px;
}

/* キャラクタ部の定義 */
#chara {
    height: 120px;
}

/* メニューボタンの定義 */
#home, #genre0, #genre1, #genre2, #genre3, #genre4, #back {
    margin-bottom: 16px;
}

/* メニューボタンリンクの定義 */
#home a, #genre0 a, #genre1 a, #genre2 a, #genre3 a, #genre4 a, #back a {
    width: 152px;
    height: 32px;
    display: block;
    outline: none;
}

/* メニューボタンリンク選択の定義 */
#home   a:hover {background-image: url('image/home.jpg');}
#genre0 a:hover {background-image: url('image/genre0.jpg');}
#genre1 a:hover {background-image: url('image/genre1.jpg');}
#genre2 a:hover {background-image: url('image/genre2.jpg');}
#genre3 a:hover {background-image: url('image/genre3.jpg');}
#genre4 a:hover {background-image: url('image/genre4.jpg');}
#back   a:hover {background-image: url('image/back.jpg');}

/***************************************************************
    ボディ部の定義
***************************************************************/

/* ボディ部の定義 */
#body {
    float: left;
    width: 404px;
    height: 624px;
    background-image: url('image/body.jpg');
}

/* カバー部の定義 */
#cover {
    margin: 28px 0px 4px 20px;
    width: 384px;
    height: 520px;
    filter: progid:DXImageTransform.Microsoft.Barn(Duration=2);
}

/* コンテンツ部の定義 */
#cont {
    position: relative;
    top: -552px;
    margin: 40px 12px 12px 32px;
    padding: 0px 20px;
    width: 320px;
    height: 496px;
}

/* フレームの定義 */
#frame1, #frame2, #frame3, #frame4, #frame5, #frame6 {
    float: right;
    width: 52px;
    writing-mode: tb-rl;
    font-size: 24pt;
    font-weight: bold;
    line-height: 2.0em;
    filter: progid:DXImageTransform.Microsoft.GradientWipe(Duration=4, GradientSize=0.25, WipeStyle=0, Motion=Forward);
}

/* フレーム位置の定義 */
#frame1 {margin-top: 40px;}
#frame2 {margin-top: 120px;}
#frame3 {margin-top: 280px;}
#frame4 {margin-top: 120px;}
#frame5 {margin-top: 200px;}
#frame6 {
    margin: 280px 8px 0px 0px;
    color: #CC0000;
}

/* パネルの定義 */
#panel {
    position: relative;
    top: -552px;
    padding: 8px 12px 40px 32px;
}

/* 次のうたボタンの定義 */
#next {
    float: left;
    padding-right: 56px;
}

/* 前のうたボタンの定義 */
#prev {
    float: left;
}

/* コントロールボタンリンクの定義 */
#next a, #prev a {
    width: 152px;
    height: 32px;
    display: block;
    outline: none;
}

/* コントロールボタンリンク選択の定義 */
#next a:hover {background-image: url('image/next.jpg');}
#prev a:hover {background-image: url('image/prev.jpg');}

/***************************************************************
    テール/フッタ部の定義
***************************************************************/

/* テール部の定義 */
#tail {
    float: left;
    width: 372px;
    height: 624px;
    background-image: url('image/tail.jpg');
}

/* リスト部の定義 */
#list {
    margin: 40px 40px 12px 12px;
    padding: 16px;
    width: 288px;
    height: 228px;
    writing-mode: tb-rl;
    overflow: auto;
}

/* カーテンの定義 */
#curtain {
    position: relative;
    top: 0px;
    left: 0px;
    width: 344px;
    height: 284px;
    writing-mode: tb-rl;
    filter: progid:DXImageTransform.Microsoft.Slide(Duration=2, Bands=1, SlideStyle=Hide);
}

/* 説明の定義 */
#explain {
    position: relative;
    top: -256px;
    left: 28px;
    width: 288px;
    height: 228px;
    font-size: 15pt;
    writing-mode: tb-rl;
    overflow: auto;
    filter: progid:DXImageTransform.Microsoft.Slide(Duration=2, Bands=1, SlideStyle=Hide);
}

/* フッタ部の定義 */
#foot {
    clear: both;
    height: 40px;
    text-indent: -9999px;
    background-image: url('image/foot.jpg');
}