* kurootetsuroll

<style>
    /*

        ╳  ╳  ╳  : (  ── C0DES BY EUFLEURIC! ) ▰ ▰ ▰ ♚ ♚ ♚
 ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

UNDER NO CIRCUMSTANCES MUST YOU REMOVE THE CREDIT. THE ONLY EXCEPTION IS IF YOU SWEAR THAT YOU WILL PROPERLY LINK MY TUMBLR/TWITTER (@EUFLEURIC) SOMEWHERE ON YOUR PAGE THAT IS HYPERLINKED AND EASY TO SPOT.

THIS IS YOUR ONLY WARNING.
I WILL NOT GIVE ANY MORE.
YOU WILL BE IN A LOT OF TROUBLE.
IF I FIND YOU, I WILL DROP YOUR ASS LIKE THE BASS.

DO NOT JOCK, REDISTRIBUTE OR COPY ANYTHING OFF MY STYLESHEET.

HELP/CREDIT FOR THE TOGGLE+JAVASCRIPT GOES TO THESE PEOPLE:
http://stackoverflow.com/questions/20128515/javascript-toggle-visibility-of-multiple-divs

STYLE TOOLTIP GOES TO:
http://manos.malihu.gr/tuts/style-my-tooltips.html

HAVE FUN, AND IF YOU NEED ANY HELP CONTACT ME HERE:
http://eufleuric.tumblr.com/ask
https://twitter.com/eufleuric

 ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰
        ╳  ╳  ╳  : (  ── C0DES BY EUFLEURIC! ) ▰ ▰ ▰ ♚ ♚ ♚

*/
</style>
<script>
    var divs = ["containerone", "containertwo", "containerthree", "containerfour", "containerfive"];
    var visibleDivId = null;

    function toggleVisibility(divId) {
        if (visibleDivId === divId) {
            visibleDivId = null;
        } else {
            visibleDivId = divId;
        }

        hideNonVisibleDivs();
    }

    function hideNonVisibleDivs() {
        var i, divId, div;

        for (i = 0; i < divs.length; i++) {
            divId = divs[i];
            div = document.getElementById(divId);

            if (visibleDivId === divId) {
                div.style.display = "block";
            } else {
                div.style.display = "none";
            }
        }
    }
</script>
<link href="http://static.tumblr.com/xxxtcim/vBXncagbd/style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/xxxtcim/PfUncagat/jquery.style-my-tooltips.js"></script>
<script>
    (function($) {
        $(document).ready(function() {
            $("[title]").style_my_tooltips({
                tip_follows_cursor: true,
                tip_delay_time: 200,
                tip_fade_speed: 300,
                attribute: "title"
            });
        });
    })(jQuery);
</script>
<style>
    #s-m-t-tooltip {
        width: auto;
        z-index: 10;
        margin: 24px 14px 7px 12px;
        /* style and design */
        padding: 3px;
        background-color: #ebf6f9;
        /* font */
        font-family: consolas;
        text-transform: uppercase;
        font-size: 9px;
        line-height: 16px;
        color: #FFFFFF;
        text-align: center;
        letter-spacing: 1px;
</style>
<style>
    body {
        background-color: #f9f9f9;
    }
    ::-webkit-scrollbar {
        width: 5px;
        height: 10px;
        padding-top: 40px;
    }
    ::-webkit-scrollbar-track {
        background-color: #ffffff;
    }
    ::-webkit-scrollbar-thumb {
        height: 30px;
        width: 5px;
        background-color: #f1f1f1;
    }
    ::-webkit-scrollbar-track-piece {
        height: 30px;
        width: 30px;
    }
    ::-moz-selection, ::selection {
        background: #ebf6f9;
        color: #ffffff;
        !important
    }
    ::selection {
        background: #ebf6f9;
        color: #ffffff;
        !important
    }
    a {
        font-family: calibri;
        font-size: 9px;
        text-transform: uppercase;
        color: #c2e0e8;
        letter-spacing: 0px;
        text-decoration: none;
        -webkit-transition: all .5s ease-in-out;
    }
    a:hover {
        color: #f9bcc1;
        letter-spacing: 1px;
    }
    i {
        font-style: italic;
        font-size: 9px;
        font-family: georgia;
        text-transform: lowercase;
        font-weight: bold italics;
        line-spacing: 4px;
        color: #cfeff8;
    }
    b {
        color: #c2e0e8;
        font-family: calibri;
        font-size: 9px;
        line-height: 10px;
        text-transform: uppercase;
    }
    u {
        color: #c2e0e8;
        font-family: lucida console;
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 0px;
        text-decoration: none;
        border-bottom: dashed 1px #c2e0e8;
    }
    blockquote {
        font-family: georgia;
        font-style: italic;
        color: #c2e0e8;
        margin: 5px;
        text-transform: lowercase;
        font-size: 13px;
        text-align: center;
        letter-spacing: -1px;
    }
    .mainbox {
        background-color: #ffffff;
        position: fixed;
        width: 181px;
        height: 215px;
        left: 84px;
        top: 95px;
        padding: 10px;
        border: 7px solid #f1f1f1;
        opacity: 1;
    }
    .quotebox {
        position: fixed;
        background-color: #fff;
        opacity: 1;
        top: 355px;
        height: 20px;
        width: 216px;
        left: 83px;
        border-bottom: 7px solid #f1f1f1;
        font-family: arial;
        font-size: 8px;
        text-transform: uppercase;
        line-height: 25px;
        text-align: center;
        letter-spacing: 3px;
        color: #dadada;
    }
    h1 {
        padding: 0px;
        margin: 0px;
        font-size: 13px;
        font-family: georgia;
        font-weight: lighter;
        text-transform: uppercase;
        text-align: center;
        letter-spacinG: 5px;
        text-shadow:-2px 1px 0px #cecece;
        color: #ffffff;
    }
    h2 {
        padding: 0px;
        margin: 0px 0px 3px 0px;
        font-size: 10px;
        font-family: georgia;
        font-style: italic;
        font-weight: lighter;
        text-transform: lowercase;
        text-align: center;
        letter-spacing: 3px;
        color: #e1e1e1;
    }
    .toggleone {
        display: inline-block;
        color: #ffffff;
        background-color: #f1f1f1;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0px;
        font-family: corbel;
        font-size: 9px;
        width: 40px;
        height: 15px;
        margin: 0px 0px 0px 0px;
        line-height: 15px;
        text-align: center;
        -webkit-transition: all .7s ease-in-out;
    }
    .toggleone:hover {
        background-color: #ebf6f9;
        color: #fff;
    }
    #containerone {
        background-color: #fff;
        width: 190px;
        height: 115px;
        margin-top: 3px;
        margin-left: -4px;
        font-family: arial;
        font-size: 9px;
        color: #d4d4d4;
        letter-spacing: 1px;
    }
    #containertwo {
        background-color: #fff;
        width: 190px;
        height: 115px;
        margin-top: 3px;
        margin-left: -4px;
        font-family: arial;
        font-size: 9px;
        color: #d4d4d4;
        letter-spacing: 1px;
    }
    #containerthree {
        background-color: #fff;
        width: 190px;
        height: 115px;
        margin-top: 3px;
        margin-left: -4px;
        font-family: arial;
        font-size: 9px;
        color: #d4d4d4;
        letter-spacing: 1px;
    }
    #containerfour {
        background-color: #fff;
        width: 190px;
        height: 115px;
        margin-top: 3px;
        margin-left: -4px;
        font-family: arial;
        font-size: 9px;
        color: #d4d4d4;
        letter-spacing: 1px;
    }
    .hoverbox {
        position: fixed;
        background-color: #fff;
        opacity: 0;
        width: 208px;
        height: 100px;
        padding: 5px;
        left: 83px;
        top: 330px;
        font-family: arial;
        font-size: 9px;
        color: #d4d4d4;
        letter-spacing: 0px;
        -webkit-transition: all .7s ease-in-out;
    }
    .hoverbox:hover {
        opacity: 1;
        top: 390px;
    }
    .hoverbox b {
        color: #d0e6ec;
        font-family: calibri;
        font-size: 10px;
        line-height: 5px;
        text-transform: uppercase;
    }
    .titlebox {
        position: fixed;
        background-color: #transparent;
        -webkit-transform: rotate(90deg);
        width: 300px;
        height: 30px;
        top: 230px;
        left: 170px;
        font-family: impact;
        font-size: 38px;
        color: #f1f1f1;
        text-transform: uppercase;
        letter-spacing: -1px;
    }
    .linkbox {
        position: fixed;
        background-color: #fff;
        width: 100px;
        height: 100px;
        left: 141px;
        top: 49px;
        z-index: 9;
        opacity: 0;
        -webkit-transition: all .7s ease-in-out;
    }
    .linkbox:hover {
        opacity: 1;
    }
    .linkbox a {
        display: block;
        background-color: #ebf6f9;
        margin-top: 4px;
        height: 15px;
        width: 90px;
        align: center;
        line-height: 15px;
        color: #fff;
    }
    .linkbox a:hover {
        background-color: #d5e9ee;
    }
    .music {
        position: fixed;
        background-color: #transparent;
        width: 22px;
        height: 20px;
        top: 75px;
        left: 246px;
        overflow: hidden;
    }
</style>
<div class="music">
    <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
        <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
        <param name="bgcolor" value="#f9f9f9" />
        <param name="FlashVars" value="mp3=http%3A//k003.kiwi6.com/hotlink/d05qg5esnb/beautiful_sunrise.mp3&amp;autoplay=1&amp;bgcolor=f9f9f9&amp;loadingcolor=cccccc&amp;buttoncolor=cccccc" />
    </object>
</div>





<div class="linkbox">
    <center> <a href="/">HOME</a>
 <a href="/">ASK</a>
 <a href="/">LINK</a>
 <a href="/">LINK</a>
 <a href="http://eufleuric.tumblr.com/">CREDIT</a>
    </center>
</div>




<div class="titlebox">kuroo tetsurou</div>




<div class="mainbox">
    <div style="width: 100px; height: 100px; border: 7px solid #f1f1f1; margin-top: -70px; margin-left: 33px; margin-bottom: 10px;">
        <img src="http://i.imgur.com/nktHZxN.png">
    </div>
     <h1>the beginning</h1>

     <h2>so where do i begin?</h2>

    <center> <a href="#" onclick="toggleVisibility('containerone');" title="about" class="toggleone">I</a>  <a href="#" onclick="toggleVisibility('containertwo');" title="faq" class="toggleone">II</a>
 <a href="#" onclick="toggleVisibility('containerthree');" title="tags" class="toggleone">III</a>
 <a href="#" onclick="toggleVisibility('containerfour');" title="links" class="toggleone">IV</a>
    </center>



    <div id="containerone" style="display: normal;">
        <fieldset style="overflow: auto; height: 95px; border: solid 1px #f1f1f1; margin-top: 10px;">this is text, yes. hi. how are you. <b>this is text, yes. hi. how are you. </b>  <i>this is text, yes. hi. how are you. </i>  <a href="#">this is text, yes. hi. how are you. </a>this is text, yes. hi. how are you. <b>this is text, yes. hi. how are you. </b>  <i>this is text, yes. hi. how are you. </i>  <a href="#">this is text, yes. hi. how are you. </a>

            <blockquote>this is text, yes. hi. how are you.</blockquote>
        </fieldset>
    </div>





    <div id="containertwo" style="display: none;">
        <fieldset style="overflow: auto; height: 95px; border: solid 1px #f1f1f1; margin-top: 10px;">box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two box two</fieldset>
    </div>




    <div id="containerthree" style="display: none;">
        <fieldset style="overflow: auto; height: 95px; border: solid 1px #f1f1f1; margin-top: 10px;">box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three box three</fieldset>
    </div>




    <div id="containerfour" style="display: none;">
        <fieldset style="overflow: auto; height: 95px; border: solid 1px #f1f1f1; margin-top: 10px;">box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four box four</fieldset>
    </div>
</div>




<div class="quotebox">hover here</div>



<div class="hoverbox">
    <div style="float: left; width: 49%; height: 95px; overflow: auto; overflow-x: hidden; border: solid 0px #000;">
        <br> <b>●</b> fact or something
        <br> <b>●</b> fact or something
        <br> <b>●</b> fact or something
        <br> <b>●</b> fact or something
        <br> <b>●</b> fact or something
        <br> <b>●</b> fact or something
        <br> <b>●</b> fact or something
        <br> <b>●</b> fact or something
        <br>
    </div>

    <div style="float: right; width: 50%; height: 95px; overflow: auto; overflow-x: hidden; border: solid 1px #f1f1f1;">something short here? maybe your interests or something? something short here? maybe your interests or something? something short here? maybe your interests or something? something short here? maybe your interests or something? something short here? maybe your interests or something? something short here? maybe your interests or something?</div>
</div>

















<style>
#bellafleur{position: absolute;width: 20px;height: 20px;background-color: #FFFFFF;right: 10px;bottom: 10px;z-index: 1;border: solid #c2d2cf 2px;outline: 2px solid #FFFFFF;}
#precipitation {position: absolute;bottom: 560px;right: 40px;padding: 5px;background-color: #FFFFFF;width: 200px;z-index: 3;opacity: 0;border: solid #FFFFFF 4px;-webkit-transition: all 1s ease-in-out;font-weight: lighter;font-family: consolas; text-transform: uppercase; font-size: 8px;color: #c2d2cf;text-align: center;}
#bellafleur:hover + #precipitation {opacity: 1;bottom: 8px;}
#bellafleur a {text-transform: lowercase;text-decoration: none;color: #c2d2cf;font-family: georgia;font-size: 20px;line-height: 17px;margin-left: 5px;font-style: italic;-webkit-transition: all .5s ease-in-out;}
#bellafleur a:hover {color: #aaa19c;}
</style>
<div id="bellafleur"> <a href="http://eufleuric.tumblr.com/">e</a> </div>
<div id="precipitation">Everything was typed and coded by Ricky <font color="ffb6cb">@eufleuric</font> on Twitter and Tumblr. Toggle JavaScript goes to help of <a href="http://stackoverflow.com/questions/20128515/javascript-toggle-visibility-of-multiple-divs">these people</a>.  <br><br>Do not remove credit or redistribute parts of my codes as your own, please.</div>