[01] Breathe

<!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">

<!--
    BREATHE developed & designed by AUCARUS → 1/4/15
        - Do not claim this page as your's or remove credit
        - Do not move credit to another page
        - Heavy editing allowed
    This is a remake of a code that I had made in 2012...
    for a previous personal blog that I never used.
    Enjoy. Questions/concerns → aucarus.tumblr.com/faq
-->

<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/5ojoydj/p9wmmzopi/jquery.style-my-tooltips.js"></script>
<script src="http://static.tumblr.com/5ojoydj/En2mmzorm/style-my-tooltips.css"></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 type="text/css">

body {
    background-color:#B9F2FF; /*COLOR OF BACKGROUND*/
    background-image:url(''); /*BACKGROUND IMAGE*/
    background-attachment:fixed;
    font-family: 'Alef', sans-serif;
    font-size:13px;
}

blockquote {
    border-left:2px solid #000000;
    padding-left:5px;
}

::-webkit-scrollbar {
    width:4px;
    height:2px;
    background:#FFFFFF;
}

::-webkit-scrollbar-thumb {
    background-color:#CCCCCC;
}

#titlebox {
    position:fixed;
    background-color:#FFFFFF;
    margin-left:320px;
    margin-top:200px;
    padding:10px;
    padding-top:15px;
    padding-left:15px;
    width:355px;
    height:25px;
    font-size:17px;
    text-align:center;
    letter-spacing:5px;
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

#titlebox:hover {
    letter-spacing:10px;
}

#imagebox {
    position:fixed;
    width:90px;
    height:90px;
    padding:5px;
    border:10px solid #FFFFFF;
    background-color:#FFFFFF;
    background-image:url('https://31.media.tumblr.com/764735ba4ac5598510b07e27255495fc/tumblr_inline_nhogmhMb8n1shesyo.png');
    margin-left:320px;
    margin-top:290px;
}

#descriptionbox {
    position:fixed;
    width:200px;
    height:170px;
    padding:10px;
    margin-top:270px;
    margin-left:480px;
    background-color:#FFFFFF;
    border-bottom:3px solid #FFFFFF;
    overflow:auto;
}

#linksbox {
    position:fixed;
    margin-top:430px;
    margin-left:320px;
    width:120px;
    height:70px;
}

.links {
    float:left;
    background-color:#FFFFFF;
    margin-top:4px;
    margin-left:15px;
    width:10px;
    height:10px;
    border-radius:20px;
    border:1px solid #FFFFFF;
}

#s-m-t-tooltip {
    max-width:500px;
    z-index:999;
    margin:25px 50px 15px 15px;
    padding:5px;
    background:#FFFFFF;
    font-size:12px;
    color:#000000;
    text-transform:uppercase;
    border:1px solid #000000;
}

/*DO NOT REMOVE CREDIT*/
#icarus {
    width:15px;
    height:15px;
    padding:5px;
    padding-left:6px;
    color:#000000;
    background-color:#FFFFFF;
    position:fixed;
    margin-top:10px;
    margin-left:10px;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
}

#icarus:hover {
    color:#FFFFFF;
    background-color:#000000;
}


</style>

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

</head>
<body>

<div id="titlebox">
<!--TITLE BELOW-->
breathe
</div>

<div id="imagebox">
</div>

<div id="descriptionbox">
<!-- ABOUT BELOW -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu posuere lectus, at vehicula tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent id nibh varius, egestas urna molestie, venenatis justo. Nunc vel tortor quis diam porttitor scelerisque. Aliquam ultrices lacus et elit dictum gravida. Nunc sit amet leo eget eros tristique laoreet. Quisque sed iaculis tellus, varius vestibulum est. Aliquam maximus, urna ut fringilla sodales, ex nibh accumsan mauris, ac viverra lorem tortor eu diam. Aliquam ac lectus aliquam, aliquam nulla tempus, interdum arcu. Phasellus sollicitudin felis magna, sed dapibus leo condimentum sed.
</div>

<!-- LINKS BELOW -->
<div id="linksbox">
<a href="/" title="home" class="links"></a>
<a href="/ask" title="ask" class="links"></a>
<a href="/" title="LINK TITLE HERE" class="links"></a>
<a href="/" title="LINK TITLE HERE" class="links"></a>
</div>

<!--DO NOT REMOVE CREDITS BELOW-->
<a href="http://aucarus.tumblr.com/" title="themes by aucarus"><div id="icarus"><i>ac</i></div></a>

</body>
</html>