<!--- TAB TITLE CODE. ---!>
<script language=javascript>document.title=("seren♥")</script>


<!--- FAVICON CODE. ---!>
<link rel="shortcut icon" href="http://eclecticquill.com/assets/favicon-transparent.ico">

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


<style>

body{
background-image: url('http://www.minimalwall.com/wp-content/themes/imageriver/thumb.php?src=http://www.minimalwall.com/wp-content/uploads/minimal-desktop-wallpaper-ffffff.png&w=590&zc=1&q=85') !important; background-repeat;repeat !important;
background-position:top-center!important;
background-repeat:repeat;
background-attachment:fixed;
}

::selection {
background: #c0bccd;
color:#ffffff;
}

::-moz-selection {
background: #c0bccd;
color:#ffffff;
}


a:link {
color: #999999;
}

a:visited {
color: #999999;
}

a:hover {
color: #999999;
}

a:active {
color: #999999;
}

#fish{
width:350px;
border:1px solid #c0bccd;
overflow:hidden;
height:50px;
position:fixed;
display:block;
left:200px;
top:70px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

#box{
background-color:#ffffff;
font-family: 'Laila', serif;
border:1px solid #c0bccd;
height:200px;
width:310px;
font-size:9px;
overflow:auto;
padding:20px;
color:#808080;
position:fixed;
top:130px;
left:200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}


.dy{
color:#808080;
font-family:tahoma;
padding-left:10px;
padding-right:27px;
padding-bottom:8px;
font-size:29px;
display:block;
text-decoration:none;
height:35px;
width:8px;
margin-bottom:20px;
border-radius:3px;
background-color:#c0bccd;
color:#c0bccd;
border:1px solid #c0bccd;
z-index:-9999;
}

.dy:hover{
z-index:-9999;
-webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
-moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
-o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
text-decoration:none;
color:#c0bccd;
background-color:#ffffff;
border-right:60px solid #ffffff;
}


#player {
z-index:999;
background-color:transparent;
width:50px;
height:23px;
position:fixed;
overflow:hidden;
top:90px;
left:125px;
-webkit-transition: opacity 0.8s linear;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
}

#icon {
margin-top:3px;
margin-bottom:20px;
margin-left:10px;
font-size:9px;
color:#cccccc;
font-family:san-serif;
-webkit-transition: opacity 0.8s linear;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
}

#player:hover {
width:50px;
background:#fff;
-moz-border-radius:0px;
border-radius:0px;
}

#player:hover #icon {
margin-top:-15px;
margin-bottom:4px;
opacity:0;
}


h1{
background:#ffffff;
text-transform:uppercase;
margin-bottom:2px;
border-bottom:1px dashed #c0bccd;
color:#c0bccd;
font-size:9px;
font-family: 'Laila', serif;
}


.link{
letter-spacing:1px;
width:70px;
height:14px;
text-align:center;
display:inline-block;
font-size:9px;
font-family: 'Laila', serif;
border:1px solid #cccccc;
background-color:#ffffff;
color:#999999;
padding-top:3px;
margin-bottom:3px;
margin-right:2px;
}

.link:hover{
opacity:0.4;
color:#999999;
}
</style>


<div style="position:fixed; left:130px; top:130px;">

<!--- TAB 1 ---!>
<a class="dy" style="cursor:pointer;" onMouseover="cursor:pointer';" onClick="changeNavigation ('tab1')">1</a>


<!--- TAB 2 ---!>
<a class="dy" style="cursor:pointer;" onMouseover="cursor:pointer';" onClick="changeNavigation ('tab2')">2</a>


<!--- TAB 3 ---!>
<a class="dy" style="cursor:pointer;" onMouseover="cursor:pointer';" onClick="changeNavigation ('tab3')">3</a>


<!--- TAB 4 ---!>
<a class="dy" style="cursor:pointer;" onMouseover="cursor:pointer';" onClick="changeNavigation ('tab4')">4</a>
</div>

<!--- "WELCOME" MESSAGE ---!>
<div id="box">


<!--- TITLE ---!>
<h1>welcome</h1>

Navigate using the boxes to the left.</br></br>


</div>

<div id="tab1" style="display:none">


<!--- TITLE ---!>
<h1>about me</h1>

<!--- TAB 1 DESCRIPTION ---!>

Hello there!<br><br>Generally, making friends for me is rather difficult, as I am painfully awkward -- I can't be the only one. Anyways, I came to this site because I get bored, I like to write, and I enjoy writing with others who can share a mutual interest of profound pleasure. Of course, my personality can mae many skeptical the first time they cross paths with me, so, I should go ahead and reveal one truth: I promise I'm not boring. I'm just shy, and awkward. Give me time, talk to me, I can be a great friend to have around. Message me, please, I love talking to new people. ♥
</div>

<!--- IGNORE ---!>
<script>function changeNavigation(id) {document.getElementById('box').innerHTML=document.getElementById(id).innerHTML}</script>

<div id="tab2" style="display:none">



<!--- TITLE ---!>
<h1>friends</h1>

<!--- TAB 2 DESCRIPTION---!>
</br>

<!--- FRIENDS ---!>
<select style=" height: 20px; width: 150px;color: 808080; font-size: 9px; font-family:trebuchet ms;">

<option>friend</option>

<option>friend</option>

<option>friend</option>

<option>friend</option>

<option>friend</option>

<option>friend</option>

<option>friend</option>

<option>friend</option>

</select>
<p>

</div>

<div id="tab3" style="display:none">



<!--- TITLE ---!>
<h1>my accounts</h1>

<!--- TAB 3 DESCRIPTION ---!>

<!--- LINK ---!>
<a class="link" href="http://link.com">Wren</a>

<!--- LINK ---!>
<a class="link" href="http://link.com">Juno</a>

<!--- LINK ---!>
<a class="link" href="http://link.com">Selene</a>

<!--- LINK ---!>
<a class="link" href="http://link.com">account</a>

<!--- LINK ---!>
<a class="link" href="http://link.com">account</a>

<!--- LINK ---!>
<a class="link" href="http://link.com">account</a>

<!--- LINK ---!>
<a class="link" href="http://link.com">account</a>

<!--- LINK ---!>
<a class="link" href="http://link.com">account</a>

<!--- LINK ---!>
<a class="link" href="http://link.com">account</a>

<!--- LINK ---!>
<a class="link" href="http://link.com">account</a>

<!--- LINK ---!>
<a class="link" href="http://link.com">account</a>

<!--- LINK ---!>
<a class="link" href="http://link.com">account</a>


<p>


As a general rule, my characters are based on well thought out concepts. I mostly RP subs, but I also throw in a few dom's. <i>Shrugs</i>. It honestly just depends on what I'm in the mood for.


</div>




<!--- RIGHT IMAGE ---!>
<img src="http://40.media.tumblr.com/3c7a4fdfb251195437c41f3100fb687b/tumblr_mx2sq5sAmC1rpb5h1o1_1280.png" height="100%" width="auto" style="position:fixed;right:350px;z-index:-9999;bottom:0px;"/ >


<!--- FISH WIDGET ---!>
<div id="fish">
<div style="margin-left:-20px;">
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor10=F45540&up_fishName=Fish&up_foodColor=E3E3E3&up_fishColor1=FFFFFF&up_fishColor5=FFFFFF&up_fishColor8=FFFFFF&up_fishColor6=E3E3E3&up_fishColor9=F45540&up_fishColor4=E3E3E3&up_fishColor7=FFFFFF&up_fishColor3=FFFFFF&up_backgroundColor=C0BCCD&up_backgroundImage=http://&up_numFish=6&up_fishColor2=E3E3E3&" width="420" height="60"><param name="movie" value="http://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor10=F45540&up_fishName=Fish&up_foodColor=E3E3E3&up_fishColor1=FFFFFF&up_fishColor5=FFFFFF&up_fishColor8=FFFFFF&up_fishColor6=E3E3E3&up_fishColor9=F45540&up_fishColor4=E3E3E3&up_fishColor7=FFFFFF&up_fishColor3=FFFFFF&up_backgroundColor=C0BCCD&up_backgroundImage=http://&up_numFish=6&up_fishColor2=E3E3E3&"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>
</div>
</div>

<div class="gaf210imvustylez_youtubebox" style="width:1px;height:1px;overflow:hidden"><iframe width="300" height="300" src="https://www.youtube.com/embed/1HrZ2CWxx6Y?autoplay=1&amp;loop=1&amp;playlist=1HrZ2CWxx6Y" frameborder="0" allowfullscreen></iframe><!--Youtube player code generated @ http://gaf210.imvustylez.net --></div>
<!--- MUSIC PLAYER CODE (NOT MINE) - REPLACE .mp3 URL ---!>
<div id="player"><center>
<div id="icon"><img src="http://media.tumblr.com/tumblr_m7w28slx3l1r6o8v2.gif"/> </div>
<div> <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k003.kiwi6.com/hotlink/1h5rq1ihe7/Circus_Fish_-_by_Vermillion_Lies.mp3" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /> </div>
<div>
</center> </div>