Navigation Theme 01 by lttlebirds

<!-- THEME CREDIT TO LTTLEBIRDS
     *thank you for using my theme, but please do not use this as a base or remove the credit! that's just not nice. however, you can edit it so that it is to your liking of course! if you have any questions, you can message me at lttlebirds.tumblr.com!
                                ♡ALLI♡-->

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


<meta name="image:header" content=""/>

<html>
<head>

<title>{Title}</title>

{block:Description}
<meta name="description" content="{MetaDescription}"/>
{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

<style type="text/css">

body {
    font-family:calibri;
    font-size:10px;
    background:#fff;
    overflow-x:hidden;
}

a {
    text-decoration:none;
    color:#d5d5d5;
}

#title {
    margin-top:50px;
    margin-left:40px;
    text-align:center;
    text-transform:lowercase;
    font-family:oswald;
    color:#C0C0C0;
    opacity:.75;
    font-size:15px;
    padding:0px;
}

#header img{
    width:200px;
    margin-top:20px;
    border:1px dashed #eeeeee;
    margin-left:30px;
}

.links {
    width:200px;
}

.links a {
    display:block;
    background:#f3f3f3;
    color:#ccc;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:5px;
    margin-top:2px;
    margin-bottom:2px;
    position:relative;
    z-index:99;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.links a:hover {
    background:#fff;
}

#mainlinks {
    margin-top:-70px;
    margin-left:-170px;
    text-align:center;
}

#mainlinks a{
    width:40px;
    background:#fff;
    color:#C0C0C0;
    font-size:9px;
    display:inline-block;
    padding:3px;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#mainlinks a:hover{
    background:#C0C0C0;
    color:#fff;
}

#pizza {
    margin-top:50px;
    margin-left:45px;
    text-align:center;
    text-transform:lowercase;
    font-family:oswald;
    color:#C0C0C0;
    opacity:.75;
    font-size:12px;
    padding:0px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

#cheesecake {
    margin-top:-40px;
    margin-left:220px;
}

#cheesecake a {
    width:60px;
    background:#C0C0C0;
    color:#fff;
    font-size:9px;
    display:inline-block;
    padding:3px;
    letter-spacing:1px;
    text-transform:lowercase;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#cheesecake a:hover {
    background:#fff;
    color:#ddd;
}


::-webkit-scrollbar {width: 7px; height:7px; background:#fff;}
::-webkit-scrollbar-corner {background:#e5e5e5;}
::-webkit-scrollbar-thumb:vertical {background:#e5e5e5;}
::-webkit-scrollbar-thumb:horizontal {background:#e5e5e5;}

{CustomCSS}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

</head>

<body>

<center>
<div id="title">NAVIGATION</div>


<!--CHANGE YOUR HEADER IMAGE HERE BY CHANGING THE URL-->


<div id="header"><img src="http://25.media.tumblr.com/tumblr_mdjpu93oi61rwt020o1_500.jpg"></div>

<div id="mainlinks">
<a href="/">main</a><br>
<a href="/ask">ask</a><br>
<a href="http://lttlebirds.tumblr.com">credit</a>
<!-- start block 1-->
<div id="pizza">CATEGORY</div>

<div id="cheesecake">

<a href="/"> link 1 </a>

<a href="/"> link 2 </a>

<br>

<a href="/"> link 3 </a>

<a href="/"> link 4 </a>

<br>

<a href="/"> link 5 </a>

<a href="/"> link 6 </a>

<br>
</div>
<!-- end block 1-->
<!--to start another block of links, copy the chunk of code above from "start block 1" to "end block 1"-->

</body>

</html>