<style>

@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);

@import url(http://fonts.googleapis.com/css?family=Playfair+Display);

@import url(http://fonts.googleapis.com/css?family=Crimson+Text);

@import url(http://fonts.googleapis.com/css?family=Pinyon+Script);

@font-face {
font-family: 'Brotherhood Script';
src: url('http://www.fontsaddict.com/fontface/brotherhood-script.ttf');
}

.pfor {display: none;}
	body {background: #000; background-image: url('http://i.picpar.com/uwW.png');}

#profile {border: 0px; background: transparent;}


::-webkit-scrollbar-thumb {background-color: transparent; border-right: 4px transparent solid; border-top: 4px transparent solid; border-bottom: 4px transparent solid; box-shadow: inset #4B6A4A 0px 0px 0px 5px;}
::-webkit-scrollbar {width: 8px; background-color: transparent;}


#whole{
position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;
}

#header {
height: 100px;
width: 450px;
margin: auto;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 380px;
background: transparent;
color: #0A655D;
text-align: center;
font-family: Brotherhood Script;
font-size: 100px;
}



#bgbox {
height: 300px;
width: 475px;
margin: auto;
position: fixed;
top: 50px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(10, 101, 93, .7);
}

#textbox {
height: 255px;
width: 460px;
margin: auto;
position: fixed;
padding: 5px;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, .75);
color: #888;
font-family: Libre Baskerville;
font-size: 13px;
text-align: left;
}

#lfil {
height: 265px;
width: 50px;
margin: auto;
position: fixed;
top: 255px;
left: 0px;
right: 315px;
bottom: 0px;
background: transparent;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}

#rfil {
height: 265px;
width: 50px;
margin: auto;
position: fixed;
top: 0px;
left: 315px;
right: 0px;
bottom: 170px;
background: transparent;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

#navbg {
height:18px;
width: 460px;
margin: auto;
position: fixed;
padding: 5px;
top: 0px;
left: 0px;
right: 0px;
bottom: 214px;
background: rgba(0, 0, 0, .75);
color: #888;
font-family: cinzel;
font-size: 13px;}

.nav {
height:18px;
width: 460px;
margin: auto;
position: fixed;
padding: 5px;
top: 0px;
left: 0px;
right: 0px;
bottom: 214px;
background: rgba(0, 0, 0, .75);
color: #888;
font-family: cinzel;
font-size: 13px;
opacity: 0;
transition: all .5s;
}

#navbg:hover .nav {
height:18px;
width: 460px;
margin: auto;
position: fixed;
padding: 5px;
top: 0px;
left: 0px;
right: 0px;
bottom: 214px;
background: rgba(10, 101, 93, .7);
color: #888;
font-family: cinzel;
font-size: 13px;
opacity: 1;
}

a.n, a.visited {
height: 18px;
width: 85px;
margin-right: 4px;
display: inline-block;
text-align: center;
color: #015b70;
font-weight: bold;
font-family: playfair display;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.6);
text-decoration: none;
-webkit-transition:opacity 0.8s linear;
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}

a.n:hover {
background: rgba(130, 130, 130, 0.6);
color: #0e3f2d;
letter-spacing: 5px;
}

h1 {
color: #104344;
font-family: Pinyon script;
font-size: 35px;
margin-left: 10px;
letter-spacing: .5px;
line-height: 5px;
text-align: left;
}

h1:first-letter {
color: #1a5d60;
}

h2 {
font-family: crimson text;
color: #355b58;
font-variant: small-caps;
font-size: 22px;
margin-bottom: 8px;
border-bottom: 1px solid #102826;
line-height: 7px;
text-align: left;
}

b {
color: #555;
}

i {
color: #aaa;
}

u {
color: #bbb;
}

a, a:visited {
text-decoration: none;
font-variant: small-caps;
color: #3a696b;
font-size: 14px;
transition: all .6s;
}

a:hover {
color: #518082;
}

</style>
<div id="Header">
<span style="margin: -100px;">	The Admiral's Arms</span>
</div>

<div id="bgbox">
</div>
<div id="textbox">

<div style="height: 260px; width: 465px;; overflow: hidden;">

<a name="one"></a>
<div style="width: 260px; height: 465px; overflow: auto; ">

	<h1>Header one</h1>
	<h2>header two</h2>
	<b>bold</b> <i>italic</i> <u>underline</u> <a href="">link</a> word
</div>

<a name="two"></a>
<div style="width: 260px; height: 465px; overflow: auto; ">

	<h1>Header one 2</h1>
	<h2>header two 2</h2>
	<b>bold2</b> <i>italic2</i> <u>underline2</u> <a href="">link2</a> word
</div>

<a name="three"></a>
<div style="width: 260px; height: 465px; overflow: auto; ">

	<h1>Header one3</h1>
	<h2>header two3</h2>
	<b>bold3</b> <i>italic3</i> <u>underline3</u> <a href="">link3</a> word
</div>

<a name="four"></a>
<div style="width: 260px; height: 465px; overflow: auto; ">

	<h1>Header one4</h1>
	<h2>header two4</h2>
	<b>bold4</b> <i>italic4</i> <u>underline4</u> <a href="">link4</a> word
</div>

<a name="five"></a>
<div style="width: 260px; height: 465px; overflow: auto; ">

	<h1>Header one5</h1>
	<h2>header two5</h2>
	<b>bold5</b> <i>italic5</i> <u>underline5</u> <a href="">link5</a> word
</div>

</div>


<div id="navbg">
<div class="nav">
	<a class="n" href="#one">one</a>
	<a class="n" href="#two">two</a>
	<a class="n" href="#three">three</a>
	<a class="n" href="#four">four</a>
	<a class="n" href="#five">five</a>

	</div>
</div>

	<div id="lfil">
		<img src="http://i.picpar.com/qZwb.png">
	</div>

	<div id="rfil">
		<img src="http://i.picpar.com/qZwb.png">
	</div>