HOLD ONTO THIS

S P I N E ' S • B I N D I N G
PAGE LAYOUT CODE: #001;

<style type="text/css">

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

@import url(//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic);


.pfor {display: none;}
#profile { background-color: transparent; border: 0px; }
body{
background-color: #000;
background-image:url('http://wallsfx.com/wallpapers/Disney-Company-movies-library-Beauty-And-The-Beast-_257076-19.jpg');
background-size: 100%;
}

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

#thelibrary{
position:absolute;
top:10px;
left:380px;
font-family:pinyon script;
color:#fff;
text-align:center;
line-height:65px;
letter-spacing: 2;
font-size:93px;
z-index:2;
}

#quote{
position:absolute;
top:630px;
left:500px;
color:fff;
text-align:right;
font-family:times new roman;
font-size:12px;
border-top:1px dashed #fff;
line-height:25px;
letter-spacing:5;
z-index:2;
}

#banner{
position:absolute;
top:0px;
left:350px;
width:660px;
background-color:#000;
color:transparent;
opacity:0.9;
}

#banner2{
position:absolute;
top:0px;
left:324.5px;
width:25px;
background-color:#000;
color:transparent;
opacity:0.8;
}

#banner3{
position:absolute;
top:0px;
left:302.5px;
width:22px;
background-color:#000;
color:transparent;
opacity:0.7;
}

#banner4{
position:absolute;
top:0px;
left:283.5px;
width:19px;
background-color:#000;
color:transparent;
opacity:0.6;
}

#banner5{
position:absolute;
top:0px;
left:267.5px;
width:16px;
background-color:#000;
color:transparent;
opacity:0.5;
}

#banner6{
position:absolute;
top:0px;
left:254.5px;
width:13px;
background-color:#000;
color:transparent;
opacity:0.4;
}

#banner7{
position:absolute;
top:0px;
left:244.5px;
width:10px;
background-color:#000;
color:transparent;
opacity:0.3;
}

#banner8{
position:absolute;
top:0px;
left:237.5px;
width:7px;
background-color:#000;
color:transparent;
opacity:0.2;
}

#banner9{
position:absolute;
top:0px;
left:233.5px;
width:4px;
background-color:#000;
color:transparent;
opacity:0.1;
}

#banner20{
position:absolute;
top:0px;
left:1009.5px;
width:25px;
background-color:#000;
color:transparent;
opacity:0.8;
}

#banner30{
position:absolute;
top:0px;
left:1034.5px;
width:22px;
background-color:#000;
color:transparent;
opacity:0.7;
}

#banner40{
position:absolute;
top:0px;
left:1056.5px;
width:19px;
background-color:#000;
color:transparent;
opacity:0.6;
}

#banner50{
position:absolute;
top:0px;
left:1075.5px;
width:16px;
background-color:#000;
color:transparent;
opacity:0.5;
}

#banner60{
position:absolute;
top:0px;
left:1091.5px;
width:13px;
background-color:#000;
color:transparent;
opacity:0.4;
}

#banner70{
position:absolute;
top:0px;
left:1104.5px;
width:10px;
background-color:#000;
color:transparent;
opacity:0.3;
}

#banner80{
position:absolute;
top:0px;
left:1114.5px;
width:7px;
background-color:#000;
color:transparent;
opacity:0.2;
}

#banner90{
position:absolute;
top:0px;
left:1121.5px;
width:4px;
background-color:#000;
color:transparent;
opacity:0.1;
}




#welcome{
position: absolute;
top:210px;
left:415px;
font-family: Open Sans Condensed;
font-size: 13px;
color: fff;
text-align:center;
background-color: #transparent;
height:20px;
width:50px;
border-radius:2px;
}

#staff{
position: absolute;
top:210px;
left:475px;
font-family: Open Sans Condensed;
font-size: 13px;
color: fff;
text-align:center;
background-color: #transparent;
height:20px;
width:50px;
border-radius:2px;
}

.image{
width:150px;
height:150px;
background-color:#fff;
background-image:url('http://i.picpar.com/9Y1b.png');
background-size:50px;
border:1px solid #aaa;
z-index:2;
}

.charactername{
margin-left:145px;
padding-left:20px;
margin-top:-150px;
border-bottom:1px solid #aaa;
}

.description{
margin-top:-10px;
height:140px;
}

#map{
position: absolute;
top:210px;
left:535px;
font-family: Open Sans Condensed;
font-size: 13px;
color: fff;
text-align:center;
background-color: #transparent;
height:20px;
width:50px;
border-radius:2px;
}

#Monthly{
position: absolute;
top:210px;
left:595px;
font-family: Open Sans Condensed;
font-size: 13px;
color: fff;
text-align:center;
background-color: #transparent;
height:20px;
width:50px;
border-radius:2px;
}

#history{
position: absolute;
top:210px;
left:655px;
font-family: Open Sans Condensed;
font-size: 13px;
color: fff;
text-align:center;
background-color: #transparent;
height:20px;
width:50px;
border-radius:2px;
}

#records{
position: absolute;
top:210px;
left:715px;
font-family: Open Sans Condensed;
font-size: 13px;
color: fff;
text-align:center;
background-color: #transparent;
height:20px;
width:50px;
border-radius:2px;
}

#schedule{
position: absolute;
top:210px;
left:775px;
font-family: Open Sans Condensed;
font-size: 13px;
color: fff;
text-align:center;
background-color: #transparent;
height:20px;
width:50px;
border-radius:2px;
}


#Rules{
position: absolute;
top:210px;
left:835px;
font-family: Open Sans Condensed;
font-size: 13px;
color: fff;
text-align:center;
background-color: #transparent;
height:20px;
width:50px;
border-radius:2px;
}

#Return{
position: absolute;
top:210px;
left:895px;
font-family: Open Sans Condensed;
font-size: 13px;
color: fff;
text-align:center;
background-color: #transparent;
height:20px;
width:50px;
border-radius:2px;
}


#box{
position:absolute;
top:245px;
left:400px;
background-color:#000;
height:300px;
width:560px;
border-radius:10px;
}

#contentbox{
position:absolute;
top:255px;
left:410px;
background-color:#000;
height:270px;
width:530px;
z-index:2;
background-image:url('http://i.picpar.com/MQsb.gif');
background-position:bottom left;
background-repeat:no-repeat;
opacity:0.8;
background-size:180px;
}

#contenttext{
position:absolute;
top:260px;
left:420px;
height:240px;
width:520px;
font-family: open sans condensed;
font-size: 15px;
color:#fff;
z-index:3;
}

#run{
position:absolute;
top:480px;
left:420px;
z-index:2;
}

h1{
font-family: Pinyon Script;
text-align:center;
font-size:26px;
color:;
font-weight:normal;
letter-spacing:2;
}

b{font-family: open sans condensed;
font-size: 15px;
color:#5d6f70;
}

i{font-family: open sans condensed;
font-size: 15px;
color:#fff;
}

u{font-family: open sans condensed;
font-size: 15px;
color:#;
}

a{font-family: open sans condensed;
font-size: 15px;
color:#939c72;
text-decoration:none;
}

::-webkit-scrollbar {    width: 3px;  }
::-webkit-scrollbar-track {  border-radius: 0px;   background-color: transparent; }
::-webkit-scrollbar-thumb {  border-radius: 10px;   background-color: #ccc; }

</style>
<div id="whole" oncontextmenu="return false;">

<div id="thelibrary">
<font style="font-size:20px;">The</font><br>
Spine's Binding<br>
<font style="font-size:20px;">Library & Donations Center</font><br>
</div>

<div id="quote">
"You can lose yourself in a place like this."<br>
- Jadine Laroue
</div>

<div id="banner" style="height:100%;">
</div>

<div id="banner2" style="height:100%;">
</div>

<div id="banner3" style="height:100%;">
</div>

<div id="banner4" style="height:100%;">
</div>

<div id="banner5" style="height:100%;">
</div>

<div id="banner6" style="height:100%;">
</div>

<div id="banner7" style="height:100%;">
</div>

<div id="banner8" style="height:100%;">
</div>

<div id="banner9" style="height:100%;">
</div>

<div id="banner20" style="height:100%;">
</div>

<div id="banner30" style="height:100%;">
</div>

<div id="banner40" style="height:100%;">
</div>

<div id="banner50" style="height:100%;">
</div>

<div id="banner60" style="height:100%;">
</div>

<div id="banner70" style="height:100%;">
</div>

<div id="banner80" style="height:100%;">
</div>

<div id="banner90" style="height:100%;">
</div>



<div id="welcome">
<a href="#01" style="color:fff;text-decoration:none;font-family:open sans condensed;" title="Welcome to The Spine's Binding Library & Donations Center!">Welcome</a>
</div>

<div id="staff">
<a href="#02" style="color:fff;text-decoration:none;font-family:open sans condensed;" title="Get to know the staff!">Staff</a>
</div>

<div id="map">
<a href="#03" style="color:fff;text-decoration:none;font-family:open sans condensed;" title="Getting lost? Here! We'll tell you where to go.">Map</a>
</div>

<div id="Monthly">
<a href="#04" style="color:fff;text-decoration:none;font-family:open sans condensed;" title="Here's the book of the month!">Monthly</a>
</div>

<div id="history">
<a href="#05" style="color:fff;text-decoration:none;font-family:open sans condensed;" title="Curious about the center? Then this is for you!">History</a>
</div>

<div id="records">
<a href="#06" style="color:fff;text-decoration:none;font-family:open sans condensed;" title="Some of our regulars have agreed to be posted!">Records</a>
</div>

<div id="schedule">
<a href="#07" style="color:fff;text-decoration:none;font-family:open sans condensed;" title="Learn what goes on at Spine's!">Schedule</a>
</div>

<div id="Rules">
<a href="#08" style="color:fff;text-decoration:none;font-family:open sans condensed;" title="Follow the rules, please.">Rules</a>
</div>

<div id="Return">
<a href="#01" style="color:fff;text-decoration:none;font-family:open sans condensed;" title="Have a nice day!">Return</a>
</div>


<div id="contenttext">
<div style="height:350px;overflow-y:hidden;">
<a name="01"></a>
<div style="height:350px;overflow:auto;">
<div style="margin: 0 auto; width: 33em;">
<h1>Welcome</h1>
One.<br><br>

Aliquam nulla leo, pharetra ut consectetur non, facilisis ut urna. Vivamus volutpat tortor felis, vel consectetur nisi tristique ac. Praesent arcu eros, eleifend ut mauris ut, eleifend dictum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla elementum cursus sapien. Maecenas et urna et massa suscipit elementum eget ac ligula. Integer laoreet, arcu a vehicula rhoncus, tortor ante aliquet sapien, vel feugiat quam velit a tellus. Sed aliquam, urna in luctus egestas, est sapien tempus erat, a tincidunt orci tellus feugiat tortor. In accumsan dapibus diam, sed molestie dolor placerat in. Morbi eu nulla quis lorem tincidunt porta sed eget risus.<br><br>

<b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <a href="LINK" target="_blank">Link</a><br><br>



</div></div>

<div style="height:350px;overflow-y:hidden;">
<a name="02"></a>
<div style="height:350px;overflow:auto;">
<div style="margin: 0 auto; width: 33em;text-align:justify;">

<h1>Meet the Staff</h1>

<div class="image">
<img src="http://i.picpar.com/3Y1b.png" height="150" width="150" style="float:left;margin-right:9px;"></div>

<div class="charactername">
<i><a href="" style="color:;">Exael</a> - Head Librarian</i></div><br>

<div class="description">
Okay. So I haven't <i>completely</i> figured this section out, but it works so long as you don't write something too long, okay? If you get too lengthy, it'll start overriding into the person's below this. Which is easily fixable, maybe? But I'd rather not have a hassle with it. So keep it semi-short and sweet! I think this many lines is fine, but if you need more room, I can do so.

</div><br><br>

<div class="image">
<img src="http://i.picpar.com/7Y1b.png" height="150" width="150" style="float:left;margin-right:9px;">
</div>

<div class="charactername">
<i><a href="Link" style="color:;">Avis</a> - Junior Librarian</i></div><br>

<div class="description">
Okay. So I haven't <i>completely</i> figured this section out, but it works so long as you don't write something too long, okay? If you get too lengthy, it'll start overriding into the person's below this. Which is easily fixable, maybe? But I'd rather not have a hassle with it. So keep it semi-short and sweet! I think this many lines is fine, but if you need more room, I can do so.

</div>


Two.<br><br>

Aliquam nulla leo, pharetra ut consectetur non, facilisis ut urna. Vivamus volutpat tortor felis, vel consectetur nisi tristique ac. Praesent arcu eros, eleifend ut mauris ut, eleifend dictum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla elementum cursus sapien. Maecenas et urna et massa suscipit elementum eget ac ligula. Integer laoreet, arcu a vehicula rhoncus, tortor ante aliquet sapien, vel feugiat quam velit a tellus. Sed aliquam, urna in luctus egestas, est sapien tempus erat, a tincidunt orci tellus feugiat tortor. In accumsan dapibus diam, sed molestie dolor placerat in. Morbi eu nulla quis lorem tincidunt porta sed eget risus.<br><br>

<b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <a href="LINK" target="_blank">Link</a><br><br>
</div></div>

<div style="height:350px;overflow-y:hidden;">
<a name="03"></a>
<div style="height:350px;overflow:auto;">
<div style="margin: 0 auto; width: 33em;">

<h1>Get Lost?</h1>

Three.<br><br>

Aliquam nulla leo, pharetra ut consectetur non, facilisis ut urna. Vivamus volutpat tortor felis, vel consectetur nisi tristique ac. Praesent arcu eros, eleifend ut mauris ut, eleifend dictum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla elementum cursus sapien. Maecenas et urna et massa suscipit elementum eget ac ligula. Integer laoreet, arcu a vehicula rhoncus, tortor ante aliquet sapien, vel feugiat quam velit a tellus. Sed aliquam, urna in luctus egestas, est sapien tempus erat, a tincidunt orci tellus feugiat tortor. In accumsan dapibus diam, sed molestie dolor placerat in. Morbi eu nulla quis lorem tincidunt porta sed eget risus.<br><br>

<b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <a href="LINK" target="_blank">Link</a><br><br>
</div></div>

<div style="height:350px;overflow-y:hidden;">
<a name="04"></a>
<div style="height:350px;overflow:auto;">
<div style="margin: 0 auto; width: 33em;">

<h1>The Book of the Month</h1>

Four. <br><br>

Aliquam nulla leo, pharetra ut consectetur non, facilisis ut urna. Vivamus volutpat tortor felis, vel consectetur nisi tristique ac. Praesent arcu eros, eleifend ut mauris ut, eleifend dictum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla elementum cursus sapien. Maecenas et urna et massa suscipit elementum eget ac ligula. Integer laoreet, arcu a vehicula rhoncus, tortor ante aliquet sapien, vel feugiat quam velit a tellus. Sed aliquam, urna in luctus egestas, est sapien tempus erat, a tincidunt orci tellus feugiat tortor. In accumsan dapibus diam, sed molestie dolor placerat in. Morbi eu nulla quis lorem tincidunt porta sed eget risus.<br><br>

<b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <a href="LINK" target="_blank">Link</a><br><br>
</div></div>

<div style="height:350px;overflow-y:hidden;">
<a name="05"></a>
<div style="height:350px;overflow:auto;">
<div style="margin: 0 auto; width: 33em;">

<h1>About Spine's Binding</h1>

Five.<br><br>

Aliquam nulla leo, pharetra ut consectetur non, facilisis ut urna. Vivamus volutpat tortor felis, vel consectetur nisi tristique ac. Praesent arcu eros, eleifend ut mauris ut, eleifend dictum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla elementum cursus sapien. Maecenas et urna et massa suscipit elementum eget ac ligula. Integer laoreet, arcu a vehicula rhoncus, tortor ante aliquet sapien, vel feugiat quam velit a tellus. Sed aliquam, urna in luctus egestas, est sapien tempus erat, a tincidunt orci tellus feugiat tortor. In accumsan dapibus diam, sed molestie dolor placerat in. Morbi eu nulla quis lorem tincidunt porta sed eget risus.<br><br>

<b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <a href="LINK" target="_blank">Link</a><br><br>
</div></div>

<div style="height:350px;overflow-y:hidden;">
<a name="06"></a>
<div style="height:350px;overflow:auto;">
<div style="margin: 0 auto; width: 33em;">

<h1>The Regulars</h1>

Six.<br><br>

Aliquam nulla leo, pharetra ut consectetur non, facilisis ut urna. Vivamus volutpat tortor felis, vel consectetur nisi tristique ac. Praesent arcu eros, eleifend ut mauris ut, eleifend dictum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla elementum cursus sapien. Maecenas et urna et massa suscipit elementum eget ac ligula. Integer laoreet, arcu a vehicula rhoncus, tortor ante aliquet sapien, vel feugiat quam velit a tellus. Sed aliquam, urna in luctus egestas, est sapien tempus erat, a tincidunt orci tellus feugiat tortor. In accumsan dapibus diam, sed molestie dolor placerat in. Morbi eu nulla quis lorem tincidunt porta sed eget risus.<br><br>

<b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <a href="LINK" target="_blank">Link</a><br><br>
</div></div>

<div style="height:350px;overflow-y:hidden;">
<a name="07"></a>
<div style="height:350px;overflow:auto;">
<div style="margin: 0 auto; width: 33em;">

<h1>The Center Calendar</h1>

Seven.<br><br>

Aliquam nulla leo, pharetra ut consectetur non, facilisis ut urna. Vivamus volutpat tortor felis, vel consectetur nisi tristique ac. Praesent arcu eros, eleifend ut mauris ut, eleifend dictum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla elementum cursus sapien. Maecenas et urna et massa suscipit elementum eget ac ligula. Integer laoreet, arcu a vehicula rhoncus, tortor ante aliquet sapien, vel feugiat quam velit a tellus. Sed aliquam, urna in luctus egestas, est sapien tempus erat, a tincidunt orci tellus feugiat tortor. In accumsan dapibus diam, sed molestie dolor placerat in. Morbi eu nulla quis lorem tincidunt porta sed eget risus.<br><br>

<b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <a href="LINK" target="_blank">Link</a><br><br>
</div></div>

<div style="height:350px;overflow-y:hidden;">
<a name="08"></a>
<div style="height:350px;overflow:auto;">
<div style="margin: 0 auto; width: 33em;">

<h1>Rules to Abide By</h1>

Eight.<br><br>

Aliquam nulla leo, pharetra ut consectetur non, facilisis ut urna. Vivamus volutpat tortor felis, vel consectetur nisi tristique ac. Praesent arcu eros, eleifend ut mauris ut, eleifend dictum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla elementum cursus sapien. Maecenas et urna et massa suscipit elementum eget ac ligula. Integer laoreet, arcu a vehicula rhoncus, tortor ante aliquet sapien, vel feugiat quam velit a tellus. Sed aliquam, urna in luctus egestas, est sapien tempus erat, a tincidunt orci tellus feugiat tortor. In accumsan dapibus diam, sed molestie dolor placerat in. Morbi eu nulla quis lorem tincidunt porta sed eget risus.<br><br>

<b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <a href="LINK" target="_blank">Link</a><br><br>
</div></div>

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

</div>