links page 01; by primrosetylers

<!DOCTYPE HTML>
<head>

<!--

links page 01;
coded by irma at primrosetylers.tumblr.com
do not steal, redistribute, or remove the credit thanks


if you would like to change the colors, ctrl (or command) + f for "change." there are notes in the coding that will help you with the rest.
-->

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">

<!-- tooltip script -->
<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(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:30,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>

</head>

<style type="text/css">

/*tooltip css*/
#s-m-t-tooltip {
max-width:300px;
position:absolute;
z-index:99999;
margin-top:20px;
text-transform:uppercase;
padding:2px 4px 2px 4px;
background-color:#000; /* CHANGE - color of the tooltip bg */
font-family:arial;
font-size:11px;
color:#fff; /* CHANGE - tooltip color text */
border-radius:4px;
}

body {
font-family:arial;
background-color:#fff; /* CHANGE - background color of entire page */
}

a {
text-decoration:none;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
}

#header {
width:650px;
margin:auto;
text-align:right;
color:#224b37;
margin-top:125px;
font-size:55px;
letter-spacing:-1px;
border:2px solid #224b37; /* CHANGE - header border color */
padding:10px 0 10px 0;
}

#headerlinks {
float:right;
padding-left:10px;
padding-right:10px;
}

.toplink {
width:12px;
height:12px;
border:2px solid #224b37; /* CHANGE - square links at the top color */
background-color:#224b37; /* CHANGE - square links at the top color */
margin:5px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

.toplink:hover {
background-color:transparent;
}

#main {
width:650px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
}

.mainlink {
background-color:#347153; /* CHANGE - background color of the main body links */
text-transform:uppercase;
color:#fff; /* CHANGE - text color of main body links */
width:200px;
margin:5px;
padding-top:15px;
padding-bottom:15px;
border:2px solid #347153; /* CHANGE - border color of the main body links */
display:inline-block;
text-align:center;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

.mainlink:hover {
color:#347153; /* CHANGE - text color of main body links on hover */
background-color:#fff; /* CHANGE - background color of main body links on hover */
}

</style>

<body>

<div id="header">
[<i>navigate</i>]
<div id="headerlinks">
<!-- YOU MAY CHANGE THE LINKS IN THE TOPBAR IF YOU WISH, EXCEPT FOR THE CREDIT! PLEASE DON'T TOUCH THE CREDIT -->
<a title="back home" href="/"><div class="toplink"></div></a>
<a title="dashboard" href="http://tumblr.com/dashboard"><div class="toplink"></div></a>
<a title="theme credit" href="http://primrosetylers.tumblr.com"><div class="toplink"></div></a>
</div>
</div>

<div id="main">

<!-- CHANGE YOUR LINKS HERE -->

<a href="http://url">
<div class="mainlink">link one</div>
</a>

<a href="/">
<div class="mainlink">link two</div>
</a>

<a href="/">
<div class="mainlink">link three</div>
</a>

<a href="/">
<div class="mainlink">link four</div>
</a>

<a href="/">
<div class="mainlink">link five</div>
</a>

<a href="/">
<div class="mainlink">link six</div>
</a>

<a href="/">
<div class="mainlink">link seven</div>
</a>

<a href="/">
<div class="mainlink">link eight</div>
</a>

<a href="/">
<div class="mainlink">link nine</div>
</a>


</div>

</body>
</html>