Navigation Page 02-Compass

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Étoiles</title>
    <link rel="shortcut icon" href="http://25.media.tumblr.com/avatar_fb2df6ad6fd3_128.png">
    <link rel="alternate" type="application/rss+xml" href="http://carolines.co.vu/rss">

    <!---


888           8888888      888b     d888      8888888888       .d8888b.
888             888        8888b   d8888      888             d88P  Y88b
888             888        88888b.d88888      888             Y88b.
888             888        888Y88888P888      8888888          "Y888b.
888             888        888 Y888P 888      888                 "Y88b.
888             888        888  Y8P  888      888                   "888
888             888        888   "   888      888             Y88b  d88P
88888888      8888888      888       888      8888888888       "Y8888P"

ABOUT ME PAGE 02 BY OFCUTEBOYS/LIMESTHEMES/CAROLINE --Compass--

This is the second about me page in my Triple Page Pack

It's type #2-Modern

Don't put more than 8 links in a category! It will scroll if you do, but I think it looks much better like this.

Enjoy it! If this doesn't suit your fancy, check out the rest of the pack.

Make sure to follow the rules, and if you have any questions, go to http://limesthemes.tumblr.com/support !

    --->


    <style type="text/css">


body {
    background-color:;
    font-family:Helvetica;
    font-size:11px;
    color:;
}

a {
    color:;
    text-decoration:none;
    -webkit-transition-duration:.3s;
    -moz-transition-duration:.3s;
    -o-transition-duration:.3s;
}

a:hover {
    color:;
}

h1 {
    font-size:18px;
    font-weight:normal;
    letter-spacing:2px;
    color:;
}


blockquote {
    padding:10px;
    background-color:#F5F5F5;
    text-align:justify;
}

blockquote blockquote {
    padding-left:10px;
    border-left:2px solid ;
}


::selection {
    background-color:;
}


::-webkit-scrollbar {
    width:1px;
    background-color:white;
}



#credit {
    bottom:3px;
    position:fixed;
    right:10px;
    float:right;
    font-family:calibri;
    color:black;
    font-size:9px;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:5px;

}

#credit a {
    color:black;
    background-color:white;
    padding:5px;
    -webkit-transition-duration:.8s;
    -moz-transition-duration:.8s;
    -o-transition-duration:.8s;
    -ms-transition-duration:.8s;
}

#credit a:hover {
    color:white;
    background-color:#00bdb3;
}

#topbunk {
    position:fixed; /*---don't change this---*/
    background-color:black; /*---it looks best black but you can change it if you want to---*/
    width:102%;/*---don't change this---*/
    height:100px;/*---don't change this---*/
    margin-top:-10px;/*---don't change this---*/
    margin-left:-10px;/*---don't change this---*/
}

#actualfuckingcontent_top {
    width:500px;/*---don't change this---*/
    left:50%;/*---don't change this---*/
    margin-left:-250px;/*---don't change this---*/
    position:fixed;/*---don't change this---*/
    height:100px;/*---don't change this---*/
}

.firstletter {
    width:60px;
    z-index:-999;
    left:50%;
    margin-left:-35px;
    position:fixed;
    margin-top:20px;
    color:black;
    font-size:35px;
    text-align:center;
    padding-top:10px;
    font-family:Helvetica;
    border:2px solid black;
    font-weight:100;
    height:50px;
    background-color:white;
    -webkit-border-radius:33px;
    -moz-border-radius:33px;
    -o-border-radius:33px;
    -ms-border-radius:33px;
    -webkit-transition-duration:.8s;
    -moz-transition-duration:.8s;
    -o-transition-duration:.8s;
    -ms-transition-duration:.8s;
}

#topbunk:hover .firstletter {
    opacity:.5;
    background-color:black;
    border-color:white;
    color:white;
    -webkit-transform:rotate(360deg);
}

.name {
    font-family:helvetica;
    text-transform:uppercase;
    padding-bottom:5px;
    width:100px;
    border-bottom:1px solid #77b3cd;
    color:white;
    font-weight:500;
    letter-spacing:5px;
    font-size:14px;
    text-align:center;
    left:50%;
    position:fixed;
    overflow:hidden;
    margin-left:-90px;
    margin-top:45px;
    opacity:0;
    -webkit-transition-duration:.8s;
     -moz-transition-duration:.8s;
    -o-transition-duration:.8s;
    -ms-transition-duration:.8s;
}

#topbunk:hover .name {
    width:180px;
    opacity:1;
}

#topbunk:hover #links {
    opacity:1;
}

#links {
    display:block;
    width:100%;
    font-family:Helvetica;
    letter-spacing:3px;
    margin-left:-20px;
    margin-top:55px;
    opacity:0;
    z-index:999999999;
      text-align:center;
          -webkit-transition-duration:.8s;
     -moz-transition-duration:.8s;
    -o-transition-duration:.8s;
    -ms-transition-duration:.8s;
}

#links a {
    display:inline-block;
    padding:3px;
    width:20px;
    margin-left:20px;
    color:white;
    padding-left:5px;
    text-transform:none;
        -webkit-transition-duration:.8s;
     -moz-transition-duration:.8s;
    -o-transition-duration:.8s;
    -ms-transition-duration:.8s;
}

#links a:hover {
    color:#00b3bd;
}


#actualfuckingcontent_body {
    margin-top:140px;
    position:fixed;
    width:800px;
    height:500px;
    margin-left:-400px;
    left:50%;
}

.group {
    width:180px;
    text-align:center;
    height:250px;
}

.grouptitle {
    background-color:black;
    color:white;
    padding:7px;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:4px;
    display:inline-block;
    width:150px;
       -webkit-transition-duration:.8s;
     -moz-transition-duration:.8s;
    -o-transition-duration:.8s;
    -ms-transition-duration:.8s;

}

.group a {
    display:block;
    width:150px;
    padding:7px;
    margin-left:8px;
    color:black;
   font-size:11px;
   letter-spacing:2px;
   margin-top:1px;
   border-bottom:1px solid white;
   -webkit-transition-duration:.8s;
     -moz-transition-duration:.8s;
    -o-transition-duration:.8s;
    -ms-transition-duration:.8s;
}

.group a:hover {
    border-color:black;
}

.group:hover .grouptitle {
    background-color:#00b3bd;
}


    </style>

<script src="http://assets.tumblr.com/assets/scripts/tumblelog.js?_v=278a8782ed49b1a35186d62748fe01aa"></script>
<meta http-equiv="x-dns-prefetch-control" content="off"/>
</head>
<body>
<div id="topbunk">
    <div id="actualfuckingcontent_top">
        <div class="firstletter">N</div>
        <div class="name">Navigation</div>
        <div id="links">
            <a href="/">home</a>
           <a href="/ask" style="margin-top:15px;margin-left:35px;">ask</a>
           <a href="http://ofcuteboys.tumblr.com">credit</a>

        </div>
    </div>
</div>

<div id="actualfuckingcontent_body">

    <table align="center">
        <tr>
            <td>
                <div class="group">
                <div class="grouptitle">Title</div>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                </div>
            </td>
            <td>
                <div class="group">
                <div class="grouptitle" style="letter-spacing:3px;">Title</div>
                <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                </div>
            </td>
            <td>
                <div class="group">
                <div class="grouptitle">Title</div>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                </div>
            </td>

            <td>
                <div class="group">
                <div class="grouptitle">Title</div>
                     <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>                </div>
            </td>
            </tr>
        <tr>
            <td>
                <div class="group">
                <div class="grouptitle">Title</div>
     <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>                </div>
            </td>
            <td>
                <div class="group">
                <div class="grouptitle">Title</div>
     <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                </div>
            </td>
            <td>
                <div class="group">
                    <div class="grouptitle">Title</div>
     <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                </div>
            </td>

                 <td>
                <div class="group">
                    <div class="grouptitle">Title</div>
     <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                    <a href="/">link</a>
                </div>
            </td>

        </tr>
    </table>

</div>



    <div id="credit"><a href="http://ofcuteboys.tumblr.com/">ofcuteboys</a></div>


</body></html>