Navigation Page 01

<head>

<link rel="shortcut icon" href="{Favicon}"/>
<title>Navigation</title>
<link href='http://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>

<!---------------------------------------------------------------------
----------------- THEME BY ELISE WHITE (MISSCAPALDI) ------------------
-------- PLEASE DO NOT REMOVE THE CREDIT OR USE AS A BASE CODE --------
------------------- THANKS AND HAVE A LOVELY DAY ;) -------------------
---------------------------------------------------------------------->

<style type="text/css">

::-webkit-scrollbar-thumb {
    height:auto;
    background-color: #8b8a8b;
}

::-webkit-scrollbar {
    height:9px;
    width:2px;
    background-color: #fff;
}

#header {
    width:500px;
    height:150px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-10px;
    text-align:center;
}

    #header img {
        width:500px;
        height:150px;
    }

#title {
    width:550px;
    font-family: 'Karla', sans-serif;
    text-transform:uppercase;
    background-color:#e0e0e0;
    margin-top:-150px;
    margin-left:-25px;
    opacity:0.8;
    color:black;
    padding:2px 0px 2px 0px;
    letter-spacing:1px;
    font-size:15px;
}

#description {
    width:150px;
    margin-top:10px;
    margin-left:175px;
    background-color:#ffffff;
    opacity:0.8;
    color:#4c4c4c;
    padding:2px 2px 2px 2px;
    font-size:8px;
    font-family:calibri;
    text-align:center;
    letter-spacing:1px;
    text-transform:uppercase;
}

#links {
    width:auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    padding-bottom:5px;
    border-bottom:1px solid #667371;
}

    #links a {
        display:inline-block;
        width:70px;
        padding:1px 0px 1px 0px;
        background-color:#ffffff;
        color:gray;
        font-size:10px;
        font-family:calibri;
        text-align:center;
        letter-spacing:1px;
        margin-left:2px;
        margin-right:2px;
        text-transform:uppercase;
        text-decoration:none;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

    #links a:hover {
        background-color:#667371;
        color:#ffffff;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

#content {
    width:500px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    margin-top:60px;
    margin-bottom:-20px;
}

    #content h1 {
        margin-top:25px;
        text-decoration:none;
        font-family: 'Karla', sans-serif;
        font-size:16px;
        letter-spacing:1px;
        color:#333333;
        text-align:left;
        text-transform:uppercase;
        font-weight:normal;
        border-bottom:1px solid #ADADAD;
    }

    #content h1:first-letter {
        color:#75817F;
    }

    #content a {
        margin-bottom:-15px;
        width:248px;
        display:inline-block;
        font-family:calibri;
        text-transform:uppercase;
        font-weight:normal;
        font-size:11px;
        color:#666666;
        text-align:center;
        line-height:150%;
        background-color:#EEEEEE;
        letter-spacing:2px;
        text-decoration:none;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

    #content a:hover {
        background-color:#667371;
        color:#FFFFFF;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

#credit {
    font-size:9px;
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-style:italic;
    letter-spacing:1px;
}

    #credit a {
        background-color:#fff;
        padding:5px;
        border-top:1px solid #e9e9e9;
        border-bottom:1px solid #e9e9e9;
        position:fixed;
        right:15px;
        bottom:10px;
        text-decoration:none;
        color:gray;
        -moz-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
    }

        #credit a:hover {
            color:#fff;
            background-color:#747474;
            -moz-transition-duration:1s;
            -webkit-transition-duration:1s;
            -o-transition-duration:1s;
        }

</style>

<body>

<!------------------------------------
     HEADER
------------------------------------->

<div id="header">
    <img src="https://24.media.tumblr.com/fcabfe205b232886996566431cbd7cb4/tumblr_myvbq3xh5l1rv5n8go1_500.png">
    <div id="links">
        <a href="/">HOME</a>
        <a href="/ask">ASK</a>
        <a href="/answered">ANSWERED</a>
        <a href="http://tumblr.com/dashboard">DASH</a>
    </div>
    <div id="title">TITLE GOES HERE</div>
    <div id="description">Your description will go here. You'll want to keep it fairly short or it will run off of the header. Hope you like!! :)</div>
</div>

<!------------------------------------
     LINKS
------------------------------------->

<div id="content">
    <h1>Personal</h1>
        <a href="/">Link Here</a>
        <a href="/">Link Here</a>
        <a href="/">Link Here</a>
        <a href="/">Link Here</a>
    <h1>Links</h1>
        <a href="/">Link Here</a>
        <a href="/">Link Here</a>
        <a href="/">Link Here</a>
        <a href="/">Link Here</a>
    <h1>Recommendations</h1>
        <a href="/">Link Here</a>
        <a href="/">Link Here</a>
        <a href="/">Link Here</a>
        <a href="/">Link Here</a>
</div>

<!--------------------------------------------
     Add as many or as little sections/links
     as you'd like. Each heading should go
     inside <h1></h1> tags and each link
     should go inside <a></a> tags. You'll
     need to change the URL's according to
     your specific links.
---------------------------------------------->

<!--------------------------------------------
    CREDIT - YOU MAY EDIT BUT YOU MAY NOT REMOVE
 --------------------------------------------->

<div id="credit"><a href="http://misscapaldi.tumblr.com">elise white</a></div>

</body>