Navigation 1

<!DOCTYPE html>

<!--

NAVIGATION 1 BY CAYLO (princeoberynn)
Please don't steal, redistribute or remove credit!
Thank you ♥

-->


<html xml:lang="en" lang="en">
<head><title>Navigation</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">


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

<style type="text/css">

pre, p{
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}

::-webkit-scrollbar {
        height: 5px;
        width: 5px;
        -webkit-border-radius: 0px;
        background-color:white;
}
::-webkit-scrollbar-thumb{background-color: gray;}
::-webkit-scrollbar-track{background-color: white;}


body {
    margin: 0px;
    color: #444;
    font-size: 11px;
}

a {
    text-decoration: none;
    outline :none;
    -moz-outline-style: none;
    color: #6a6a6a;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

a:hover {
    opacity: 0.7;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}


img {
    border: none;
}


#header{
    width: 320px;
    margin:auto;
    margin-top: 90px;
    text-align: center;
}

#title{
    font-size: 14px;
    font-family: 'raleway', sans-serif;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 25px;
    color: #444;
}


#image img{
    width: 120px;

    /* DELETE THE LINES BELOW IF YOU DONT WANT A CIRCLE PICTURE */
    width: 90px;
    height: 90px;
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
}

#content{
    font-family: 'times', serif;
    line-height: 180%;
    color: #444;
    width: 630px;
    margin: 30px auto 50px auto;
    text-align: center;
}

.box{
    width: 180px;
    margin: 5px;
    display: inline-block;
    vertical-align: top;
}

.head{
    /* CHANGE COLOR OF HEADERS AND HEADER TEXT IN THE LINES BELOW  */
    background-color: #444;
    color: white;
    font-family: 'Raleway', sans-serif;
}

.box a{
    display: block;
    background-color: #eee;
    margin-bottom: 1px;
}

.box a:hover{
    letter-spacing: 2px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}


{CustomCSS}</style></head>

<body>

<div id="header">

<!-- REPLACE THE LINK IN THE LINE BELOW WITH THE PICTURE YOU WANT -->
<div id="image"><img src="http://puu.sh/9k8JB/e75968b3f3.jpg"></div>

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

<div id="content">

<div class="box">
    <div class="head">TAGS 1</div>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
</div>

<div class="box">
    <div class="head">TAGS 2</div>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
</div>

<div class="box">
    <div class="head">TAGS 3</div>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
</div>

<div class="box">
    <div class="head">TAGS 4</div>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
</div>

<div class="box">
    <div class="head">TAGS 5</div>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
</div>

<div class="box">
    <div class="head">TAGS 6</div>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
    <a href="/">tag</a>
</div>

</div>


<!-- CREDIT, PLEASE DON'T TOUCH -->

<div style="position:fixed; bottom:6px; right:12px; font-size:8px; letter-spacing:1px; font-family:gautami;"><a href="http://carolinesthemes.tumblr.com/">CAYLO</a></center></div>


</body></html>