5 The bridle bends

<head>
<title>Leaving the city</title>
</head>

<style type="text/css">
body {
margin: 0px;
padding: 0px;
background: #fcfbfc;}

#content{
background: url(http://onyxhotel.three-words.net/pages/images/clear.png);
color:#333;
font: 9px/20px arial;
width:500px;
padding:4px;
margin:145px 0px 0px 200px;
letter-spacing:2px;
position:fixed;}

h1{
font: 25px/5px courier;
letter-spacing: 3px;
padding-left: 5
color: #000;}

h2{
font: 10px/5px helvetica;
letter-spacing: 3px;
padding-left: 15px;
color: #333;}

#header2 {
position:fixed;
z-index:-1;
background:no-repeat;
margin-left: 315px;
margin-top:70px;
width : 900px;}

#border{
border: 1px solid #eee;
width: 335px;
margin:10px 0px 0px 198px;
position: absolute;}

#navi2 {position:absolute; top: 10px; left:195px; width: 100px;}

#navi2 a{background:#f6f0f5;
color:#333333;
font: 10px/20px arial;
width:100px;
padding:2px;
margin:3px;
display:block;
float:left;
letter-spacing:3px;
width:100px;
text-align:center;
text-decoration:none;}

#navi2 a:hover {
background:#000;
color:#fff;}

#sidebar {position: absolute; top: 0px; left:0px; height: 100%; }

#sidebar{
background: url(http://onyxhotel.three-words.net/images/designs/piva_zps4213f1f9.png);
width:176px;
padding:2px;
margin:0px;
display:block;
height: 100%;
display:block;
position:fixed;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;}

#sidebar:hover {
opacity: .4;
filter:alpha(opacity=.4);}

#info{
background:#000;
color:#fff;
font: 9px/20px arial;
width:150px;
padding:5px;
margin: 200px 0px 0px 10px;
letter-spacing:3px;
opacity: 0;
filter:alpha(opacity=0);
-moz-opacity: 0;
position:fixed;
text-align:justify;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
background:#000;}

#info:hover {
opacity: 1;
filter:alpha(opacity=100);
-moz-opacity: 1;}

</style>
</head>
<body>

<div id="sidebar">
<div id="info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
Don't hit the limit.
</div></div>

<div id="border"></div>
<div id="navi2">
<table width="180">
<tr>
<td width="90" style="text-align:left;">
<a href="#" >link</a>
<a href="#" >link</a>
<a href="#" >link</a>
<a href="#" >link</a>

</td><td width="90" style="text-align:right;">
<a href="#">link</a>
<a href="#" >link</a>
<a href="#" >link</a>
<a href="#" >link</a>

</td><td width="90" style="text-align:right;">
<a href="#" >link</a>
<a href="#" >link</a>
<a href="#" >link</a>
<a href="http://onyxhotel.three-words.net/" >credit</a>

</td>
</tr></table>
</div>

<div id="header2">
<img src="http://onyxhotel.three-words.net/images/designs/piva22_zpsb789e858.png">
</div>

<div id="content">
<h1>Hay and a clean stall</h1>
<h2>and ivy on a garden wall</h2>


This is your text! This layout has a fixed sidebar image and an info box appears when you hover over it. <br>
<b>bold </b><i>italic </i><u>underline</u> <s>strikethrough</s> <a href="http:///url">link</a><br>
You can edit and tweak the code, or change the header.
<br>You may also change the size of header and change the size of everything else.

<li>Please keep credit on.</li>
<li>Do no steal code/header</li>

</div>


</div>
</html>