@charset "utf-8";

/*
akaihito.css
赤い人ゲーム

Created by いんふぉ(TM) on 2013/11/06.
Copyright (c) 2013年 @iTchan_3. All rights reserved.

This software is released under the MIT License.
http://opensource.org/licenses/mit-license.php
*/


/* ページ全体 */
body {
    margin: 0px;
    background-image: url(img/akaihito/bg.png);
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
}

/* 隠し項目 */
#audio, #ringmenu, #partymenu, #action, #tweet {
    display: none
}

/* 各HPゲージの背景 */
.gauge {
	background-color: rgba(0,0,0,0.5);
}

/* 状態表示領域 */
#result {
    max-width: 100%;
}

textarea{
    background-image: url(img/akaihito/title.png);
    background-attachment: scroll;
    font-family: serif;
}

/* 以下、腹筋UIのボタン項目 */

ul#startlist li a {
    background-image: url(img/akaihito/start.png);
}

ul#actionlist li a {
    background-image: url(img/akaihito/action.png);
}

ul#partylist li a {
    background-image: url(img/akaihito/party.png);
}

ul#ringlist li a {
    padding-top: 80px;
    background-image: url(img/akaihito/ring.png);
}

ul#tweetlist li a {
    background-image: url(img/akaihito/tweet.png);
}


#startMale a { width: 160px; background-position: 0 0px;}
#startFemale a { width: 160px; background-position: -160px 0px;}
#startSetting a { width: 160px; background-position: 0 -80px;}
#startExit a { width: 160px; background-position: -160px -80px;}

#attack a { width: 160px; background-position: 0 0px;}
#escape a { width: 160px; background-position: -160px 0px;}
#ring a { width: 160px; background-position: 0px -80px;}
#party a { width: 160px; background-position: -160px -80px;}
#bomb a { width: 160px; background-position: 0px -160px;}
#recovery a { width: 160px; background-position: -160px -160px;}

#yuki a { width: 160px; background-position: 0 0px;}
#koyomi a { width: 160px; background-position: -160px 0px;}
#chiya a { width: 160px; background-position: 0px -80px;}
#maya a { width: 160px; background-position: -160px -80px;}
#haruka a { width: 160px; background-position: 0px -160px;}
#nayuta a { width: 160px; background-position: -160px -160px;}

#red a { width: 80px; background-position: 0px 0px;}
#blue a { width: 80px; background-position: -80px 0px;}
#yellow a { width: 80px; background-position: -160px 0px;}
#black a { width: 80px; background-position: -240px 0px;}

#tweettxt a { width: 160px; background-position: 0 0px;}
#tweetimg a { width: 160px; background-position: -160px 0px;}

/* 以下、タブレット向けの設定。 */

@media only screen and (min-width: 768px) {
    textarea{
        background-image: url(img/akaihito/title_tab.png);
    }
    ul#startlist{
        width: 480px;
    }
    ul#startlist li{
        height: 120px;
    }
    ul#startlist li a {
        padding-top: 120px;
        background-image: url(img/akaihito/start_tab.png);
        background-size: 480px 240px;
    }
    ul#ringlist li {
        margin-left: 20px;
        margin-right: 20px;
    }
    ul#tweetlist{
        width: 480px;
    }
    ul#tweetlist li{
        height: 120px;
    }
    ul#tweetlist li a {
        padding-top: 120px;
        background-image: url(img/akaihito/tweet@3x.png);
        background-size: 480px 120px;
    }
    #startMale a { width: 240px; background-position: 0 0px;}
    #startFemale a { width: 240px; background-position: -240px 0px;}
    #startSetting a { width: 240px; background-position: 0 -120px;}
    #startExit a { width: 240px; background-position: -240px -120px;}
    #tweettxt a { width: 240px; background-position: 0 0px;}
    #tweetimg a { width: 240px; background-position: -240px 0px;}
}

/* 以下、Retina ディスプレイ向けの設定。 */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
    textarea{
        background-image: url(img/akaihito/title@2x.png);
    }
    ul#startlist li a {
        background-image: url(img/akaihito/start@2x.png);
        background-size: 320px 160px;
    }
    ul#actionlist li a {
        background-image: url(img/akaihito/action@2x.png);
        background-size: 320px 240px;
    }
    ul#partylist li a {
        background-image: url(img/akaihito/party@2x.png);
        background-size: 320px 240px;
    }
    ul#ringlist li a {
        background-image: url(img/akaihito/ring@2x.png);
        background-size: 320px 80px;
    }
    ul#tweetlist li a {
       background-image: url(img/akaihito/tweet@2x.png);
        background-size: 320px 80px;
    }
}

/* 以下、Retina タブレット向けの設定。 */

@media only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 768px) and (min-resolution: 1.5dppx) {
    textarea{
        background-image: url(img/akaihito/title_tab@2x.png);
        background-size: 480px 270px;
    }
    ul#startlist li a {
        background-image: url(img/akaihito/start_tab@2x.png);
        background-size: 480px 240px;
    }
}
