Navigation Theme #2 / Pink /

<!--
      NAVIGATION/TAGS PAGE #2
      by: myackles.tumblr.com / ma-themes.tumblr.com

      Editing is okay as long as you:
      DO NOT CLAIM AS YOUR OWN OR REMOVE/MOVE THE CREDIT!!
-->


<head>
<link rel="shortcut icon" href="{Favicon}"/>
<title>Navi</title> <!-- PAGE TITLE -->
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>


<style type="text/css">

/* SCROLL AND HOVER */

::selection {background-color:white;color:gray;} /* HOVER COLORS */
::-moz-selection {background-color:white;color:gray;}  /* HOVER COLORS */

::-webkit-scrollbar-thumb {
    height:auto;
    background-color: #8b8a8b;} /* SCROLLBAR COLOR */
::-webkit-scrollbar {
    height:9px;
    width:2px;
    background-color: #fff;}

body { background-color:#fbfbfb;}

.container {overflow:auto;width:900px;margin:10px auto 0 auto;}

a {text-decoration:none;color:#777777;font-size:10px;text-transform:uppercase;text-align:center;}

.head {


  /* HEADER BACKGROUND IMAGE DOWN HERE */
  background-image: url('http://25.media.tumblr.com/635112a23dec216b53c2fe5664ddfcc0/tumblr_mj77t2OgYd1r9c5eeo3_r1_250.png');
      border-bottom:2px solid #e23957;}

.header {
    color:#8b8a8b;
    width:100%;
    letter-spacing:2px;
    text-shadow: 2px 2px 2px white;/* TEXT SHADOW */
    font-family:'Quicksand';
    font-size:30px;
    text-transform:uppercase;
    padding-bottom:20px;}

.u {margin-top:-70px; border-bottom:2px solid gray;padding-bottom:70px;}
.u:first-letter {color:#e23957;}

.links {font-family:calibri;margin-top:-50px;letter-spacing:2px;}

.a {
    display:inline-block;
    width:100px;
    border-bottom:2px;
    background-image:none;
    transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;}
.a:hover  {
    letter-spacing:3px;
    transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;}

.birds{ opacity:0.3;}


.column1 {
    width:205px;
    float:left;
    margin:10px;}

.column1header h4{
    font-family: calibri;
    font-size:10px;
    letter-spacing:2px;
    border-bottom:1px solid #e23957;
    display:block;
    text-transform:uppercase;
    color:gray;
    text-align:center;
    padding:5px;padding-top:10px;
    width:180px;padding-bottom:10px;}

.column1 a {
    display:block;
    padding:5px;  border:1px solid #f0f0f0;
    font-family: calibri;
    font-size:10px;
    width:180px;letter-spacing:2px;
    background-color:white;
    margin:2px 0;
    transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;}

.column1 a:hover {
    letter-spacing:4px;
    transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;}

.column2 {
    width:205px;
    float:left;
    margin:10px;}

.column2header h4{
    font-family: calibri;
    font-size:10px;
    letter-spacing:2px;
    border-bottom:1px solid gray;
    display:block;
    text-transform:uppercase;
    color: #e23957;
    text-align:center;
    padding:5px;padding-top:10px;
    width:180px;padding-bottom:10px;}

.column2 a {
    display:block;
    padding:5px;  border:1px solid #f0f0f0;
    font-family: calibri;
    font-size:10px;
    width:180px;letter-spacing:2px;
    background-color:white;
    margin:2px 0;
    transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;}

.column2 a:hover {
    letter-spacing:4px;
    transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;}


</style>
</head>

<body>
<center>
<div class="header"><div class="head"><div class="birds"> <!-- BIRDS IMAGE DOWN HERE --><img src="http://media.tumblr.com/5756dcf0f8e9d68dc5296646cc5177a6/tumblr_inline_mpa74rDTQT1qz4rgp.png" width="520" height="200"></div>


<div class="u">navigation</div>
</div>

<div class="links"> <!-- LINKS ARE DOWN HERE -->

<div class="a"><a href="/">HOME</a></div>
<div class="a"> <a href="/ask">ASKBOX</a></div>
<div class="a"><a href="/archive">HISTORY</a></div>
<div class="a"><a href="http://www.ma-themes.tumblr.com">CREDIT</a></div>

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


<div class="container">
<div class="column1"><div class="column1header">

<h4>COLUMN 1 HEADER</h4>

</div>
<div class="column1links">

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

</div></div>


<div class="column2"><div class="column2header">

<h4>COLUMN 2 HEADER</h4>

</div>
<div class="column2links">

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

</div></div>


<div class="column1"><div class="column1header">

<h4>COLUMN 3 HEADER</h4>

</div>
<div class="column1links">

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

</div></div>


<div class="column2"><div class="column2header">

<h4>COLUMN 4 HEADER</h4>

</div>
<div class="column2links">

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

</div></div>

<!-- IF YOU WANT TO HAVE ANOTHER LINE OF COLUMNS JUST COPY THOSE ABOVE (1-4) AND PASTE THEM HERE -->

</body></html>