idiotic four

<!--
 Idiotic Four
 page made by gyapo.tumblr.com
 don't remove this comment
 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
<title>{Title}</title>
<link rel="shortcut icon" href="http://static.tumblr.com/s2ymoja/wiXo3qyrj/favicon.png">
<link rel="alternate" type="application/rss+xml" href="{RSS}">


<style type="text/css">


 body
{font-family:consolas;
font-size:10px;
background-color:#fff;
background-image:url('http://41.media.tumblr.com/tumblr_ly0ae2N4hE1r9g6hvo1_75sq.png');
background-repeat:repeat;}

a
{text-decoration:none;}


#side
{left:30px;
top:30px;
position:fixed;
}

#all
{margin-top:130px;}

.chara
{width:160px;
margin:30px 0px 30px 0px;
text-align:center;}


.chara_picture
{height:250px;
width:160px;
background-size: 160px 250px;
background-repeat:no-repeat;}

.chara_infos
{margin-top:10px;
text-align:center;}
.chara_title
{text-transform:uppercase;
margin-bottom:2px;
color:#000;
letter-spacing:1px;
padding:1px 0px 1px 0px;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
-webkit-transition: opacity 0.3s linear;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;}

.chara:hover .chara_title
{letter-spacing:3px;
border-top:1px solid #fb7206;
border-bottom:1px solid #fb7206;}

.chara_kanji
{color:#999;}

/*
if you want to add a character don't forget to add a part here going like this

#NUMBERHERE
{background-image: url('FIRST IMG URL');}


.chara:hover #NUMBERHERE
{background-image: url('SECOND IMG OR GIF URL');}

*/

#one
{background-image: url('http://41.media.tumblr.com/ea73813441d04c8513a31e0b792c1c53/tumblr_o3qzrj1YjD1r9g6hvo4_250.png');}
.chara:hover #one
{background-image: url('http://45.media.tumblr.com/55ef9e6401b052b6e8729b34d6370a60/tumblr_o3rxelpesc1r9g6hvo9_250.gif');}

#two
{background-image: url('http://41.media.tumblr.com/ad2335f4eedc751955908f2aa039fa8e/tumblr_o3qzrj1YjD1r9g6hvo8_r1_250.png');}
.chara:hover #two
{background-image: url('http://49.media.tumblr.com/36b5313be398cc71a9445f64f4861507/tumblr_o3rxelpesc1r9g6hvo8_250.gif');}

#three
{background-image: url('http://40.media.tumblr.com/c8035a40fffa321f3e66aab5a1af30bc/tumblr_o3qzrj1YjD1r9g6hvo9_250.png');}
.chara:hover #three
{background-image: url('http://49.media.tumblr.com/2098a5661e5c87c9dfae82d9375d5fb8/tumblr_o3rxelpesc1r9g6hvo6_250.gif');}

#four
{background-image: url('http://40.media.tumblr.com/14dcda0cf5bc82debcefe5790c40e565/tumblr_o3qzrj1YjD1r9g6hvo6_250.png');}
.chara:hover #four
{background-image: url('http://45.media.tumblr.com/42730a2cf14412583949063078503ede/tumblr_o3rxelpesc1r9g6hvo7_250.gif');}

.icon
{margin-bottom:10px;color:#222;
text-transform:uppercase;letter-spacing:1px;font-size:8px;
}

.icon img
{vertical-align:-2px;}
.icon .text
{opacity:0;}
.icon:hover .text
{opacity:1;}
</style>
</head>
<body>

<div id="side">
<a href="/"><div class="icon">    <img src="http://31.media.tumblr.com/3c6e09e37f98a4deb4406a9c0f875ddd/tumblr_inline_n5sr5gxBh41sbfysw.gif"/> <span class="text">home</span></div></a>

<a href="/ask"><div class="icon">    <img src="http://31.media.tumblr.com/3c6e09e37f98a4deb4406a9c0f875ddd/tumblr_inline_n5sr5gxBh41sbfysw.gif"/> <span class="text">message</span></div></a>

<a href="http://gyapo.tumblr.com/"><div class="icon">    <img src="http://31.media.tumblr.com/3c6e09e37f98a4deb4406a9c0f875ddd/tumblr_inline_n5sr5gxBh41sbfysw.gif"/> <span class="text">theme by gyapo</span></div></a>

<!--music player-->
<div class="icon">MUSIC PLAYER CODE HERE</div>
<!--music player end-->

</div><!--side-->

<table id="all" align='center'>
    <tr>


        <td><!--chara 01-->
        <a title ="Gyapo" href="http://gyapo.tumblr.com/"><div class="chara">
            <div class="chara_picture" id="one"></div><!--picture-->
            <div class="chara_infos">
                <div class="chara_title">Kageyama Tobio</div>
                <div class="chara_kanji">影山飛雄 . <span class="position">setter</span></div>
            </div><!--infos-->
        </div></a><!--chara-->
        </td><!--chara 01 end-->


              <td><!--chara 02-->
              <a title ="Lavestale" href="http://lavestale.tumblr.com/">
        <div class="chara">
            <div class="chara_picture" id="two"></div><!--picture-->
            <div class="chara_infos">
                <div class="chara_title">Tanaka Ryūnosuke</div>
                <div class="chara_kanji">田中龍之介 . <span class="position">wing spiker</span></div>
            </div><!--infos-->
        </div></a><!--chara-->
        </td><!--chara 02 end-->


        <td><!--chara 03-->
         <a title ="Sunkei" href="http://sunkei.tumblr.com/">
        <div class="chara">
            <div class="chara_picture" id="three"></div><!--picture-->
            <div class="chara_infos">
                <div class="chara_title">Hinata Shōyō</div>
                <div class="chara_kanji"> 日向翔陽 . <span class="position">middle blocker</span></div>
            </div><!--infos-->
        </div></a><!--chara-->
        </td><!--chara 03 end-->

         <td><!--chara 04-->
         <a title ="Lavestale" href="http://lavestale.tumblr.com/">
        <div class="chara">
            <div class="chara_picture" id="four"></div><!--picture-->
            <div class="chara_infos">
                <div class="chara_title">Nishinoya Yū</div>
                <div class="chara_kanji">西谷夕 . <span class="position">libero</span></div>
            </div><!--infos-->
        </div></a><!--chara-->
        </td><!--chara 04 end-->


    </tr>
</table>


</body>
</html>