Navigation Page #1

<!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">

<!--------

			NAVIGATION PAGE #1 - SOURWOLLF
			#1: Don't remove the credit.
			#2: Don't redistribute and claim as your own.
			#3: Customize as you like!

			© Copyright 2013 - Sourwollf | Tumblr

--------->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

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

</head>

<style type="text/css">
body {
	padding: 0;
	margin: 0;
	list-type: none;
	background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo8_r1_250.png');
}

a {
	text-decoration: none;
	color: black;
}

#topbar {
	width: 100%;
	height: 40px;
	background-color: #303030;
}

.title {
	float: left;
	margin-left: 150px;
	margin-top: 8px;
	font-family: 'Economica';
	font-size: 20px;
	color: #FFFFFF;
	text-transform: uppercase;
}

.toplinks {
	float: right;
	margin-right: 450px;
	margin-top: 7px;
}

.toplinks a {
	font-family: Arial Unicode MS;
	font-size: 11px;
	color: #FFFFFF;
	padding: 14px 20px 14px 20px;
	background-color: #505050;
	border-bottom: 0px solid #303030;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.toplinks a:hover {
	border-bottom: 3px solid #d13056;
}

#navigation {
	width: 600px;
	height: 400px;
	background-color: transparent;
	margin-left: 400px;
	margin-top: 100px;

}

#navigation a {
	display: inline-block;
	text-align: center;
	width: 100px;
	height: 100px;
	font-family: 'Economica';
	font-size: 14px;
	color: #FFFFFF;
	padding: 100px 50px 0px 50px;
	margin-left: -4px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#navigation .one {
	background-color: #202020;
}

#navigation .one:hover {
	background-color: #FFFFFF;
	color: #000000;
}

#navigation .two {
	background-color: #303030;
}

#navigation .two:hover {
	background-color: #FFFFFF;
	color: #000000;
}

#navigation .three {
	background-color: #404040;
}

#navigation .three:hover {
	background-color: #FFFFFF;
	color: #000000;
}

#navigation .four {
	background-color: #505050;
}

#navigation .four:hover {
	background-color: #FFFFFF;
	color: #000000;
}

#navigation .five {
	background-color: #606060;
}

#navigation .five:hover {
	background-color: #FFFFFF;
	color: #000000;
}

#navigation .six {
	background-color: #707070;
}

#navigation .six:hover {
	background-color: #FFFFFF;
	color: #000000;
}

</style>
<body>
<div id="topbar">
	<div class="title">
	Navigation
	</div>
	<div class="toplinks">
	<a href="/">Home</a>
	<a href="/ask">Message</a>
	<a href="http://sourwollf.tumblr.com">Credit</a>
	</div>
</div>

<div id="navigation">
	<a href="/" class="one">Navigation 1</a>
	<a href="/" class="two">Navigation 2</a>
	<a href="/" class="three">Navigation 3</a>
	<a href="/" class="four">Navigation 4</a>
	<a href="/" class="five">Navigation 5</a>
	<a href="/" class="six">Navigation 6</a>
</div>


</body>
</html>