* haru kaze

<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.

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>









<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css'>

    <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: #bbd0ac;
        /* font */
        font-family: corbel;
        text-transform: uppercase;
        font-size: 9px;
        line-height: 16px;
        color: #FFFFFF;
        text-align: center;
        letter-spacing: 1px;
</style>


<style>
    body {
        background-color: #f6f6f6;
        background-image: url('http://i.imgur.com/Qyj3oOH.jpg');
    }
    .transparentbox {
        position: fixed;
        width: 330px;
        height: 310px;
        background-color: #fff;
        padding: 20px;
        left: 150px;
        top: 150px;
        opacity: .4;
    }
    .mainbox {
        position: fixed;
        width: 310px;
        height: 280px;
        background-color: #fff;
        padding: 10px;
        left: 170px;
        top: 175px;
        opacity: .9;
    }
    .mainbox h1 {
        font-family:'Yanone Kaffeesatz', sans-serif;
        font-size: 25px;
        text-transform: uppercase;
        font-style: normal;
        color: #bbd0ac;
        font-weight: lighter;
        padding: 0px;
        margin: 0px;
        margin-top: -12px;
        text-align: center;
    }
    .imagebox {
        margin-top: 3px;
        position: fixed;
        width: 150px;
        height: 250px;
        background-color: #bbd0ac;
        padding: 5px;
    }

    .links {
        margin-top: 230px;
    position: fixed;
    width: 160px;
    height: 30px;
    background-color: #transparent;
    z-index: 9;
    }

    .links a {
        display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    font-family: corbel;
    font-size: 10px;
    text-decoration: none;
    text-align: center;
    line-height: 20px;
    color: #bbd0ac;
      -webkit-transition: all .5s ease-in-out;
    }

    .links a:hover {
        background-color: #bbd0ac;
    color: #ffffff;
    }
    .textbox {
        margin-top: 5px;
        margin-left: 160px;
        position: fixed;
        width: 145px;
        height: 170px;
        padding: 5px;
        background-color: #ffffff;
        overflow: auto;
        overflow-x: hidden;
        font-family: corbel;
        font-size: 9px;
        color: #748668;
        line-height: 10px;
    }
    .textbox p::first-letter {
        font-size: 20px;
        color: #748668;
        font-family: times;
    }
    .quotebox {
        margin-top: 195px;
        margin-left: 170px;
        position: fixed;
        width: 130px;
        height: 80px;
        padding: 5px;
        background-color: #transparent;
        font-family: georgia;
        font-size: 15px;
        font-style: italic;
        text-transform: lowercase;
        color: #bbd0ac;
        text-align: center;
        line-height: 12px;
    }
    ::-webkit-scrollbar {
        width: 5px;
        height: 10px;
        padding-top: 40px;
    }
    ::-webkit-scrollbar-track {
        background-color: #ffffff;
    }
    ::-webkit-scrollbar-thumb {
        height: 30px;
        width: 5px;
        background-color: #bbd0ac;
    }
    ::-webkit-scrollbar-track-piece {
        height: 30px;
        width: 30px;
    }
    a {
        font-family: calibri;
        font-size: 9px;
        text-transform: uppercase;
        color: #92b777;
        letter-spacing: 0px;
        text-decoration: none;
        -webkit-transition: all .5s ease-in-out;
    }
    a:hover {
        color: #8bcbbd;
    }
    i {
        font-style: italic;
        font-size: 9px;
        font-family: georgia;
        text-transform: lowercase;
        font-weight: bold italics;
        line-spacing: 4px;
        color: #8bcbbd;
    }
    b {
        color: #92b777;
        font-family: calibri;
        font-size: 9px;
        line-height: 10px;
        text-transform: uppercase;
    }
</style>
<div class="transparentbox"></div>
<div class="mainbox">
     <h1>this is a heading</h1>

    <div class="links">
        <center>
            <a href="/" title="home">I</a>
        <a href="/" title="ask">II</a>
        <a href="/" title="archive">III</a>
        <a href="/" title="link">IV</a>
        <a href="/" title="link">V</a>
        </center>
    </div>

    <div class="imagebox">
        <img src="http://i.imgur.com/0nlz6pC.png">
    </div>
    <div class="textbox">

        <p>This is normal font. <b>Bold font.</b> <i>Italic font.</i> <a href="/">This is a link.</a>




        </p>


        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam vitae neque facilisis, lobortis neque et, feugiat velit. Ut iaculis nunc vitae elit accumsan ultrices. Nam faucibus, erat ut bibendum facilisis, ex dui mattis lectus, non aliquet sapien lorem ut ex. Etiam turpis nibh, tristique sed imperdiet at, porta non massa.</p>
        <p>Etiam ornare porta odio, nec dictum diam finibus et. Pellentesque in ipsum lacus. Aenean et tincidunt neque. Cras est sem, cursus vel fermentum id, tristique et nulla. Cras in ligula et nisi ultricies iaculis. Curabitur et nisi luctus risus congue faucibus sit amet congue quam.</p>
    </div>
    <div class="quotebox">It does not matter how slowly you go as long as you do not stop.</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.
    <br><br>Do not remove credit or redistribute parts of my codes as your own, please.</div>