Nav 02: Blueprint

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

<!---

NAVIGATION PAGE 02: BLUEPRINT BY LUNECERISE AKA ROMULVS

-keep credit intact
-don't steal any code
-don't use as a basecode

--->

<title>BLUEPRINT</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>

<style type="text/css">
body {
    font-family:trebuchet ms;
    font-size:10px;
    background: #fff url(https://41.media.tumblr.com/653da9957797dc3ed2715268e4ea854a/tumblr_njj5xy4ras1tnrgpko3_250.png) repeat fixed left top;
    -moz-font-smoothing:subpixel-antialiased;
    -webkit-font-smoothing:subpixel-antialiased;
    font-smoothing:subpixel-antialiased;
}

#s-m-t-tooltip {
    max-width:300px;
    padding:5px 8px;
    margin:10px;
    background-color:#fff;
    font-size:8px;
    letter-spacing:1px;
    text-transform:uppercase;
    border-radius:1px;
    color:#aaa;
    z-index:10000000000000000;
    box-shadow:2px 2px 0.2em #eee;
    transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    }

::-webkit-scrollbar {background-color:#fff; height:4px; width:4px;}
::-webkit-scrollbar-thumb:vertical {background-color:#000;}
::-webkit-scrollbar-thumb:horizontal {background:#000; height:4px!important}

*, 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; }

a {
    text-decoration:none;
    color:#bbb;
    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:#eee;
}

.container {
    width:500px;
    margin:auto;
    overflow:hidden;
}

#title {
    margin:120px auto 10px;
    text-align:center;
    font-size:50px;
    width:500px;
}

#links {text-align:center;padding:10px;background:#fff;border:3px solid #000;}
#links a {display:inline-block;padding:2px 10px;color:#000;text-transform:uppercase;}

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

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

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

.sfm input {
    background-color:#fff;
    font-size: 10px;
    font-style:bold;
    border:solid 2px #000;
    margin-top: 0px;
    color: #000;
    letter-spacing: 1px;
    padding: 8px 6px 8px 17px;
    outline:none;
    text-transform:uppercase;
}

#sf {
    background: url('http://static.tumblr.com/vmteopo/IQwns6198/searchb.png') #fff left center no-repeat;
    background-size: 15px 10px;
    color:#000;
    padding-right:5px;
    width:110px;
    margin:5px auto;
    height:15px;
    margin-left:3px;
    outline:none;
}

#credit, #credit a {
    position:fixed;
    bottom:5px;
    right:5px;
    padding:5px 4px;
    font-family:helvetica;
    text-transform:uppercase;
    color:#bbb;
    font-size:8px;
    -moz-transition-duration:0.3s;
    -webkit-transition-duration:0.3s;
    -o-transition-duration:0.3s;
    -ms-transition-duration:0.3s;
}

#credit:hover, #credit a:hover {
    font-family:helvetica;
    text-shadow:#aaa 2px 2px 0.1em;
    -moz-transition-duration:0.4s;
    -webkit-transition-duration:0.4s;
    -o-transition-duration:0.4s;
    -ms-transition-duration:0.4s;
}

</style></head> <body>

 <div id="title">B L U E P R I N T</div>

<div class="container">
<div id="links">
<!--- the main "all up in your face" links --->
<a href="/letters">faq</a>
<a href="/archive">archive</a>
</div>

<!--- link start (lmao sao anyone); use <h1> for categories --->

<h1>links.</h1>
<a href="link">link</a>, <a href="/">link</a>

<h1>more links.</h1>
<a href="/">link</a>, <a href="/">link</a>, <a href="/">link</a>

<h1>you can do links like this too:</h1>
<!--- to make the links in a column just add <br> after them --->
<a href="/">link</a>,<br>
<a href="/">link</a>,<br>
<a href="/">link</a>,<br>
<a href="/">link</a>

<h1>go nuts</h1>
<a href="/">link</a>, <a href="/">link</a>, <a href="/">link</a>,<br>
<a href="/">link</a>,<br>
<a href="/">link</a>, <a href="/">link</a>, <a href="/">link</a>, <a href="/">link</a>,<br>
<a href="/">link</a>,<br>
<a href="/">link</a>,

<!--- link end; below is the searchbar (you probably shouldn't touch that) --->

<center><br><br><script language="javascript">
function send()
{document.theform.submit()}
</script>
  <form action="/search" method="get" class="sfm" name="theform">
    <input type="text" name="q" onfocus="if(this.value == 'SEARCH') { this.value = ''; }" value="" id="sf" />
</form></center>

<div id="return"><a href="/">return</a></div>

</div></div>

<div id="credit"><a href="http://lunecerise.co.vu" title="lunecerise">LC</a></div>
</body>
</html>