cyhiraeth

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

<!--

cyhiraeth by solarre

-keep credit intact
-don't steal any code
-don't use as a basecode/claim as your own

-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<!--- page title --->

<title>cyhiraeth</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/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:1,
tip_fade_speed:100,
attribute:"title"
});
});
})(jQuery);
</script>

<script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
    $("#n1").click(function(){
        $("#words").fadeIn();
        $("#words2, #words3, #words4").fadeOut();
        $("#title").animate({opacity: "1"});
        $("#title2, #title3, #title4").animate({opacity: "0"});
    });
    $("#n2").click(function(){
        $("#words2").fadeIn();
        $("#words, #words3, #words4").fadeOut();
        $("#title2").animate({opacity: "1"});
        $("#title, #title3, #title4").animate({opacity: "0"});
    });
    $("#n3").click(function(){
        $("#words3").fadeIn();
        $("#words2, #words, #words4").fadeOut();
        $("#title3").animate({opacity: "1"});
        $("#title2, #title, #title4").animate({opacity: "0"});
    });
    $("#n4").click(function(){
        $("#words4").fadeIn();
        $("#words2, #words3, #words").fadeOut();
        $("#title4").animate({opacity: "1"});
        $("#title2, #title3, #title").animate({opacity: "0"});
    });
});
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>

</head>

<style type="text/css">
::-webkit-scrollbar {width:4px; height:auto; background:#fff;}
::-webkit-scrollbar-corner {background:transparent;}
::-webkit-scrollbar-thumb:vertical{background:#eee;width:1px;border:1px solid #fff;}
::-webkit-scrollbar-thumb:horizontal {background:#eee;height:3px !important;}
::-webkit-scrollbar-increment {width:3px; height:3px; background-color:#fff;}

iframe#tumblr_controls, iframe.tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop, .tmblr-iframe {
    position:fixed;
    white-space:nowrap;
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
    opacity:.5;transition: .8s ease-in-out;
    -webkit-transition: .8s ease-in-out;
    -moz-transition: .8s ease-in-out;
    -o-transition: .8s ease-in-out;
}

#s-m-t-tooltip {
    max-width:300px;
    padding: 5px 8px;
    margin:10px;
    background-color:#fff;
    font-size:8px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#777;
    border-radius:2px;
    border:1px solid #f8f8f8;
    z-index:100000000000000000000000000000000000000000;
    transition:0.5s ease-in-out;
    -webkit-transition:0.5s ease-in-out;
    -moz-transition:0.5s ease-in-out;
    -ms-transition:0.5s ease-in-out;
    -o-transition:0.5s ease-in-out;
    }

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s; animation-duration:1s; }

.fade-in.one { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; }

*, body, img { cursor:url(http://static.tumblr.com/vmteopo/yYInjhg6e/small_black_cursor.png), auto;}

a, a:hover, a:active {cursor:url(http://static.tumblr.com/vmteopo/DH3njhg50/help_cursor.png), crosshair; }

body {
    background:#f5f5f5;
    font:11px calibri;
    line-height:15px;
    -moz-font-smoothing:subpixel-antialiased;
    -webkit-font-smoothing:subpixel-antialiased;
    font-smoothing:subpixel-antialiased;
}

a {
    color:#aaa;
    text-decoration:none;
    -moz-outline-style:none;
    transition:0.5s ease-in-out;
    -webkit-transition:0.5s ease-in-out;
    -moz-transition:0.5s ease-in-out;
    -ms-transition:0.5s ease-in-out;
    -o-transition:0.5s ease-in-out;
}

a:hover {color:#555;}

h1 {font-size:15px;}

#back {
    position:fixed;
    width:500px;
    height:500px;
    margin:-262.5px auto 0 -260px;
    top:50%;
    left:50%;
    padding:10px;
    /* here's the background img of the container */
    background:#f2f2f2 url('https://68.media.tumblr.com/9691806822991fa0ab33a8549e044d3e/tumblr_nq3nzjfICo1snlw9ao1_1280.jpg') no-repeat center;
    background-size:cover;
}

#contain {
    position:fixed;
    background:rgba(0,0,0,0.3);
    width:500px;
    height:500px;
    top:50%;
    left:50%;
    margin:-262.5px auto 0 -260px;
    padding:10px;
    overflow:hidden;
}

.title {
    color:#fff;
    width:auto;
    text-align:center;
    font-size:15px;
    margin-top:25px;
    margin-bottom:-25px;
    text-transform:uppercase;
    letter-spacing:1em;
}

#words, #words2, #words3, #words4 {
    width:460px;
    padding:30px;
    height:300px;
    background:#fff;
    overflow-y:scroll;
    position:fixed;
    margin-left:-10px;
    margin-top:60px;
}

#words {z-index:-1;opacity:1;}
#words2, #words3, #words4 {z-index:2;display:none;}

.links {width:auto;text-align:center;z-index:6;margin-top:450px;}

.links a {
    display:inline-block;
    margin:0 5px;
    background:#fff;
    border:1px solid transparent;
    padding:3px;
    height:1;
    width:1;
}

.links a:hover {background:transparent;border:1px solid #fff;}

#title, #title2, #title3, #title4 {
    color:#fff;
    width:auto;
    text-align:center;
    font-size:15px;
    margin:25px auto -25px;
    text-transform:uppercase;
    letter-spacing:1em;
    padding-left:1em;
    opacity:0;
}

#title {opacity:1;}
#title2, #title3, #title4 {margin-top:10px;}

.nav #section {
    display:block;
    width:auto;
    height:auto;
    padding:10px;
    margin:5px;
    border:1px solid #f2f2f2;
}

.nav a {padding:5px;border-bottom:1px solid #f2f2f2;display:inline-block;margin:0 5px;} .nav a:hover {border-color:#555;}

.nav h2 {margin-left:5px;padding-left:10px;border-left:1px solid #f2f2f2; font-size:10px;text-transform:uppercase;color:#3f3f3f;font-family:trebuchet ms;}

.user {
    display:inline-block;
    width:40px;
    padding:10px;
    margin:5px;
    text-align:center;
    height:40px;
    background:#fff;
    border:1px solid #eee;
}

.user a {color:#000;text-transform:uppercase;}

.user img {
    float:left;
    height:30px;
    width:30px;
    padding:5px;
}

#blogs {margin:10px 0;text-align:center;}

#return {width:65px;padding:5px;margin:100px auto;}

#return a {
    padding:10px;
    letter-spacing:2px;
    color:#000;
    border:3px solid #000;
    background:#fff;
}

#return a:hover {border:3px solid transparent;background:#000;color:#fff;}

#credit, #credit a {
    position:fixed;
    bottom:20px;
    right:20px;
    color:#000;
    font:normal normal 8px calibri;
    text-decoration:none;
}

</style></head><body>

<div id="back"></div>
<div id="contain" class="box fade-in one">

<div id="title">biography</div>
<div id="title2">inquire</div>
<div id="title3">navigate</div>
<div id="title4">blogroll</div>

<div id="words">

<!--- about --->

<h1>Dawn.</h1>
<p><i>Far out in the ocean,</i> where the water is as blue as the prettiest cornflower, and as clear as crystal, it is very, very deep; so deep, indeed, that no cable could fathom it: many church steeples, piled one upon another, would not reach from the ground beneath to the surface of the water above. There dwell the Sea King and his subjects. </p>
<h1>Dusk.</h1>
<p><b>We must not imagine</b> that there is nothing at the bottom of the sea but bare yellow sand. No, indeed; the most singular flowers and plants grow there; the leaves and stems of which are so pliant, that the slightest agitation of the water causes them to stir as if they had life. Fishes, both large and small, glide between the branches, as birds fly among the trees here upon land.</p>
</div>

<div id="words2">

<!--- faq --->

<h1>Q: Who am I?</h1>
<p><b>A:</b> A mermaid has not an immortal soul,<b></b> nor can she obtain one unless she wins the love of a human being. On the power of another hangs her eternal destiny.</p>

<h1>Q: Who are you?</h1>
<p><b>A:</b> But the daughters of the air, although they do not possess an immortal soul, can, by their good deeds, procure one for themselves. We fly to warm countries, and cool the sultry air that destroys mankind with the pestilence. We carry the perfume of the flowers to spread health and restoration.</p>

<iframe frameborder="0" scrolling="yes" width="100%" height="190" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" id="ask_form" ></iframe>
</div>

<div id="words3">
<div class="nav">

<!--- links; copy paste this and fill it out accordingly for more sections:

<div id="section">
<h2></h2>
<a href="/"></a>
<a href="/"></a>
<a href="/"></a>
<a href="/"></a>
<a href="/"></a>
<a href="/"></a>
</div>

--->

<div id="section">
<h2>bangtan</h2>
<a href="/">i need u</a>
<a href="/">love is not over</a>
<a href="/">run</a>
<a href="/">butterfly</a>
<a href="/">dead leaves</a>
<a href="/">whalien 52</a>
<a href="/">autumn leaves</a>
<a href="/">house of cards</a>
<a href="/">tomorrow</a>
<a href="/">wake up</a>
<a href="/">let me know</a>
</div>

<div id="section">
<h2>winner</h2>
<a href="/">empty</a>
<a href="/">different</a>
<a href="/">confession</a>
<a href="/">tonight</a>
<a href="/">color ring</a>
<a href="/">pricked</a>
</div>

<div id="section">
<h2>exo</h2>
<a href="/">sing for you</a>
<a href="/">love me right</a>
<a href="/">lady luck</a>
<a href="/">heart attack</a>
<a href="/">machine</a>
<a href="/">wolf</a>
</div>

<div id="section">
<h2>day6</h2>
<a href="/">free하게</a>
<a href="/">이상하게 계속 이래</a>
<a href="/">congratulations</a>
<a href="/">태양처럼</a>
<a href="/">colors</a>
</div>

<div id="section">
<h2>f(x)</h2>
<a href="/">4 walls</a>
<a href="/">red light</a>
<a href="/">deja vu</a>
<a href="/">diamond</a>
<a href="/">goodbye summer</a>
<a href="/">paper heart</a>
</div>

</div>
</div>

<div id="words4">

<!--- blogroll; you don't have to touch this section --->

<div id="blogs">
{block:Following}
{block:Followed}

<div class="user">
<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-30}"></a>
</div>

{/block:Followed}
{/block:Following}
</div>
</div>

<div class="links">
<a id="n1" title="about"></a>
<a id="n2" title="faq"></a>
<a id="n3" title="navigation"></a>
<a id="n4" title="blogroll"></a>
<a href="/" title="return"></a>
</div>

</div>

<div id="credit"><a href="http://solarre.tumblr.com" title="solarre">☼</a></div>

</body>
</html>