Theme 007 - Navigation

<!DOCTYPE html>

<!--        macfustythemes     -->
    <head>
        <title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title} </title>
        {block:Description}
        <meta name="description" content="{MetaDescription}">
        {/block:Description}

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

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

        <!-- HTML5 Shiv -->
        <!--[if lt IE 9]>
                <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
        <![endif]-->

        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="http://static.tumblr.com/01wstkc/BAXnr15b7/jquery-ui.min.js" type="text/javascript"></script>

        <script></script>

        <style>

        body {
            background-color: #0f0f0f;
            background-image: url('{image:Background}');
            background-repeat: no-repeat;
            background-attachment: fixed;
            color: #000;
            font-size: 11px;
            font-family: 'Calibri', sans-serif;
            line-height: 18px;
        }

        a {
            color: #f2992e;
            text-decoration: none;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        a:hover {
            color: #fff;
            letter-spacing: 1px;
        }

        .clear {
            clear: both;
        }

        blockquote {
            border-left: 1px solid {color:Border};
            padding: 5px 10px;
        }

        h1 {
            font-weight: normal;
            text-transform: uppercase;
            text-align: center;
            font-size: 18px;
            letter-spacing: 3px;
        }

        h3 {
            font-weight: normal;
            text-transform: uppercase;
            text-align: center;
            font-size: 14px;
            letter-spacing: 3px;
        }

        h2 {
            background-color: #f2992e;
            width: 100%;
            padding: 5px 0;
            font-weight: normal;
            font-family: 'Roboto', sans-serif;
            text-transform: uppercase;
            text-align: center;
            color: #0f0f0f;
        }

        /**     HEADER      **/

        #header {
            position: fixed;
            width: 100%;
            top: 10%;
            left: 7.3%;
            font-family: 'Roboto', sans-serif;
        }

        #header span {
            font-size: 22px;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #f2992e;
            padding-right: 1%;
        }

        #header a {
            color: #707070;
            text-transform: lowercase;
            padding: 0 2%;
        }

        #header a:hover {
            color: #f2992e;
        }

        /**     CONTAINER     **/

        #container {
            position: fixed;
            height: 77.5%;
            width: 85.4%;
            left: 7.3%;
            top: 15%;
            background-color: #fff;
            border: 1px solid #0f0f0f;
            overflow: auto;
        }

        #container::-webkit-scrollbar
        {
        	width: 4px;
        }

        #container::-webkit-scrollbar-thumb
        {
        	background-color: #f2992e;
        }


        #content {
            width: 93.7%;
            margin: 5% 0 0 4%;
        }

        #section {
            position: relative;
            width: 235px;
            margin: 0 20px 20px 0;
            display: inline-block;
            background-color: #eaeaea;
            border-left: 15px solid #f2992e;
            padding: 15px 0 5px 0;
        }

        #label {
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 4px;
            margin-left: 25px;
        }

        ul#nav {
            margin-left: 25px;
            float: left;
            padding: 0;
            width: 225px;
        }

        ul#nav li {
            list-style-type: none;
            width: 175px;
            padding: 10px 5px;
            text-transform: lowercase;
            letter-spacing: 2px;
            border-bottom: 1px solid #707070;
        }

        ul#nav li a {
            color: #000;
        }

        ul#nav li a:hover {
            color: #f2992e;
            letter-spacing: 4px;
        }

        /**     CREDIT      **/

        a.macfustys {
            position: fixed;
            bottom: 2%;
            right: 1%;
            border: 1px solid #707070;
            padding: 2px;
            font-size: 12px;
            letter-spacing: 1px;
            color: #707070;
        }

        a.macfustys:hover {
            color: #f2992e;
            letter-spacing: 1px;
        }

        </style>
    <body>

    <!--        HEADER      -->

    <div id="header">
        <span>{Title}</span>
        <a href="/">Home</a>
        <a href="/ask">Message</a>
        <a href="/">Link 2</a>
        <a href="/">Link 3</a>
        <a href="/">Link 4</a>
        <a href="/">Link 5</a>
        <a href="/">Link 6</a>
    </div>

    <!--        CONTAINER       -->

    <div id="container">
        <div id="content">
            <div id="section">
                <div id="label">Section 1</div>
                <ul id="nav">
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
            </div>

            <div id="section">
                <div id="label">Section 2</div>
                <ul id="nav">
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
            </div>

            <div id="section">
                <div id="label">Section 3</div>
                <ul id="nav">
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
            </div>

            <div id="section">
                <div id="label">Section 4</div>
                <ul id="nav">
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
            </div>

            <div id="section">
                <div id="label">Section 5</div>
                <ul id="nav">
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
            </div>

            <div id="section">
                <div id="label">Section 6</div>
                <ul id="nav">
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
            </div>

            <div id="section">
                <div id="label">Section 7</div>
                <ul id="nav">
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>
                    <li><a href="/">Link</a></li>

            </div>
        </div>

    </div>

    <!--        CREDIT      -->
    <a target="new" class="macfustys" href="http://macfustythemes.tumblr.com/">
        MT
    </a>
    </body>
</html>