*updated 2022* The Horse and the Castle

CLICK TO ENLARGE

Is this the layout for you?

Please read Terms of Service

Click in the textbox and it will automatically select all the text

Right click and copy

{coded for Celestial Equine}

<!***** outline of page:  
                       I. Navigation up top
                       II. 2 Expanding boxes for info
                       III. CSS styling
                  
               to add a link use this format: 
                                         ‹a href="URL"›text here‹/a›
               to insert line breaks use: ‹br›
                  & do not remove info related to Tiberia's Layouts, thanks and enjoy!  *****!>


<!--------------- I.Navigation -------------!>

<div id="topbanner">
<ul id="navigation" class="nav-main">
<li class="dropdown"><a href="news.php">News</a></li>
<li class="list"><a href="stable.php">Stable</a><ul class="nav-sub">
<li><a href="breedingbarns.php"> Breeding Barns</a></li>
<li><a href="account.php">Account</a></li>
<li><a href="friend_list.php">Friend List</a></li>
</ul>
<li><a href="world.php">World</a></li>
<li><a href="community.php">Community</a></li>
<li><a href="marketplace.php">Search</a></li>
<li><a href="help.php">Help</a></li>
</ul>
<font size=0.3px><font color="#444">Page design by: Tiberia Layouts</font></font></div>
<div id="layout">
</div>
<div class="box">
<div class="boxcontent">
<div class="text">
<!---------- end of navigation ----------!>


<!--------------- II .Info Box Left -------------!>

<h1>
Header</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper, odio eu dictum lobortis, erat lacus rhoncus est, vitae fermentum ante lectus nec nulla. Donec a ante nec nulla facilisis pulvinar. Mauris vel metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer luctus, lectus ac volutpat tristique, nunc purus pretium tellus, eu luctus neque urna eget massa. Phasellus urna augue, consectetur eget, iaculis vel, egestas at, tortor. Fusce volutpat erat nec dui. Vestibulum tempus euismod lacus.
   
<h1>
Header</h1>
<h2>
sub header</h2>
Etiam nisi elit, bibendum in, faucibus at, eleifend a, nulla. Cras sed enim et massa mattis varius. In metus odio, ultricies vitae, pulvinar sit amet, cursus eget, risus. Aenean nisl neque, sollicitudin volutpat, commodo quis, lobortis non, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 

   
</div>
</div>
</div>
</div>
<div class="box2">
<div class="boxcontent2">
<div class="text">
<!---------- end of info box left ----------!>


<!--------------- II .Info Box Right -------------!>

<h1>
Header</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper, odio eu dictum lobortis, erat lacus rhoncus est, vitae fermentum ante lectus nec nulla. Donec a ante nec nulla facilisis pulvinar. Mauris vel metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer luctus, lectus ac volutpat tristique, nunc purus pretium tellus, eu luctus neque urna eget massa. Phasellus urna augue, consectetur eget, iaculis vel, egestas at, tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper, odio eu dictum lobortis, erat lacus rhoncus est, vitae fermentum ante lectus nec nulla. Donec a ante nec nulla facilisis pulvinar. Mauris vel metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer luctus, lectus ac volutpat tristique, nunc purus pretium tellus, eu luctus neque urna eget massa. Phasellus urna augue, consectetur eget, iaculis vel, egestas at, tortor.
   
<h1>
Header</h1>
<h2>
sub header</h2>
Etiam nisi elit, bibendum in, faucibus at, eleifend a, nulla. Cras sed enim et massa mattis varius. In metus odio, ultricies vitae, pulvinar sit amet, cursus eget, risus. Aenean nisl neque, sollicitudin volutpat, commodo quis, lobortis non, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.    



</div>
</div>
</div>
</div>
<!---------- end of info box left ----------!>

<!--------------- III. CSS styling -------------!>
<style type="text/css">
.text{font-size:10px;font-family:Verdana,Arial,SunSans-Regular,Sans-Serif;text-align:justify;padding:2px}a,a:link,a:visited,a:active{color:#aebf8b;text-decoration:none}a:hover{color:#8a4e1a}body{background:url(http://dl.dropbox.com/u/54798516/bg-alt.jpg);background-repeat:no-repeat;background-position:center center;background-attachment:fixed;-o-background-size:100% 100%,auto;-moz-background-size:100% 100%,auto;-webkit-background-size:100% 100%,auto;background-size:100% 100%,auto;font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif,Vladimir Script;margin:0;font-size:11px;color:#fff;line-height:15px;text-align:justify;margin-bottom:40px}#topbanner{position:absolute;left:auto;top:2px}#navigation{margin:0 -10px;padding:0;clear:both;width:782px;height:51px;background:#d6eaf8 url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/dropdown-bg_zpsc4c3e06f.gif) repeat-x left top}ul.nav-main,ul.nav-main li{list-style:none;margin:0;padding:0}ul.nav-main{position:relative;z-index:597}ul.nav-main li:hover > ul{visibility:visible}ul.nav-main li.hover,ul.nav-main li:hover{position:relative;z-index:599;cursor:pointer;background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/dropdown-bg-hover_zpse2378690.gif) repeat-x left top}ul.nav-main li{float:left;display:block;height:51px;color:#999;font:14px Arial,Helvetica,sans-serif;background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/separator_zpsabb2e6d9.gif) no-repeat right center}ul.nav-main li a{display:block;padding:16px 16px 0;height:35px;color:#999;font:14px georgia;text-decoration:none}ul.nav-main li a:hover{color:#D6D6D6}ul.nav-main .list{padding-right:22px;background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/navigation-arrow_zps60aba0a5.gif) no-repeat right top}ul.nav-sub{visibility:hidden;position:absolute;padding:10px;top:48px;left:0;z-index:598;background:#353535 url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/dropdown-list-bg_zps1863a475.gif) repeat-x left top;border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000}ul.nav-sub li{list-style:none;display:block;padding:0;height:27px;float:none;width:145px;border-bottom:1px solid #000;background:none}ul.nav-sub li a{list-style:none;display:block;padding:6px 5px;height:15px;float:none;width:145px;background:none;font:12px georgia}.wrapper{background-color:transparent;border-right:0 solid #E2DCC7;border-left:0 solid #E2DCC7;margin:0 auto;padding:0 1px;width:1020px}header,.middle{border-right:0 solid #FFF9EA;border-left:0 solid #FFF9EA}.masthead{background:url(none) no-repeat center;border-right:0 solid #859BA6;border-left:0 solid #859BA6;height:55px;position:relative;display:block}.title{display:none}.title p{margin:0}.title p:first-child{font:2em "Lucida Sans",Georgia,"Times New Roman",serif;letter-spacing:.2em;text-shadow:-2px 2px 2px rgba(0,0,0,0.3);text-transform:lowercase}.title p:last-child{text-shadow:-1px 1px 1px rgba(0,0,0,0.4);text-transform:uppercase;letter-spacing:1px}.error{background-color:transparent}.success{background-color:transparent}td,tr,th{background-color:transparent;background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/70_zps13ae4994.png);background-repeat:repeat;opacity:1;filter:alpha(opacity=100);margin:1px;text-align:center}td{color:#2f3c2f;font-family:georgia;font-style:bold;font-size:13px}nav{display:none}footer{background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/70_zps13ae4994.png);width:1040px;border-bottom:1px solid #111;border-top:1px solid #000;color:#777;font-size:.8em;padding:10px}footer a{display:none}table{background-color:transparent;border-radius:10px;border-spacing:0;margin:0 auto 1em;width:100%;font-family:times new roman;font-size:1.08em;color:#fff}.center{font-family:times new roman;letter-spacing:0;font-variant:georgia;text-transform:none;font-size:12px;color:#444;line-height:12px}.tan{background-color:transparent}.tabs{margin:0 auto 1em;width:80%}.tabs-navigation a{color:transparent;display:inline-block;padding:.4em .8em;border-top-left-radius:3px;border-top-right-radius:3px;margin:0 0 0 .5em;text-shadow:0 0 rgba(255,255,255,0.1),0 -1px rgba(0,0,0,0.3);font:1.2em 'Times New Roman',serif;text-transform:uppercase;font-weight:700}.tabs-content > div{background-color:transparent;border-radius:3px;padding:10px}.tabs-content > div:not(:first-child){display:none}.player-info{background:transparent;border-bottom-right-radius:10px;border-bottom-left-radius:10px;-webkit-box-shadow:inset 0 2px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 2px 5px rgba(0,0,0,0.1);box-shadow:inset 0 2px 5px rgba(0,0,0,0.1);color:#fff;font-family:georgia;margin:0 0 100px 495px;padding:5px;text-align:right;width:35%}.player-info span:not(:first-child){margin:0 0 0 10px}input[type="submit"]{color:#aebf8b;background-color:transparent;background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/70_zps13ae4994.png);background-repeat:repeat}input[type="submit"]:hover{color:#8a4e1a;background-color:transparent;background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/70_zps13ae4994.png);background-repeat:repeat;cursor:url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur),progress!important}input[type="submit"]:active{color:#aebf8b;background-color:transparent;background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/70_zps13ae4994.png);background-repeat:repeat}textarea{display:block;background:transparent;background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/70_zps13ae4994.png);background-repeat:repeat;margin:0 auto;max-height:300px;max-width:100%;resize:vertical;width:90%}input[type="text"],input[type="password"],textarea,select{border:1px dotted #333;border-radius:3px;background:transparent;color:#999;font:1em arial narrow;padding:5px;cursor:url(http://cur.cursors-4u.net/cursors/cur-9/cur873.cur),progress!important;-webkit-transition:box-shadow 1s;-moz-transition:box-shadow 1s;-o-transition:box-shadow 1s;transition:box-shadow 1s}input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{background-color:transparent;box-shadow:0 0 14px #59e2f2;outline:0}.alternate-heading{background:url(none);background-color:transparent;font-family:Vladimir Script,mistral;font-size:40px;text-transform:lowercase;color:#d8e7dc;font-weight:700;text-align:center}.middle{background-color:transparent;color:#999;width:1060px;border:0}.middle section{background-color:transparent;background:none;border:0;color:#999;background-color:none;background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/70_zps13ae4994.png);background-repeat:repeat}.middle:after{clear:both;content:".";display:block;height:0;visibility:hidden;margin:0 auto}h1{color:#444;fontface:georgia;text-decoration:uppercase;font-size:2em;padding-bottom:5px;margin-top:10px;border-bottom:0 dotted #555}h2{color:#864817;font-size:1em;font-style:oblique;letter-spacing:1px;margin:0 0 5px}h3{background:transparent;color:#fff;margin:0 0 10px;padding:.3em;font:georgia;font-size:10px;border-bottom:2px solid #61be0e}h5{color:#6bc366;font-size:12px;line-height:10px;text-align:left;border-width:0 0 1px;border-style:solid;border-color:#666;margin:10px 0 0}h6{color:#4a7583;font-size:9px;line-height:8px;text-align:left;margin:5px 5px 0}h7{color:#fff;fontface:georgia;font-size:1.5em}.sticky section{background:none;background-color:none;background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/70_zps13ae4994.png);background-repeat:repeat;color:#555;opacity:1;filter:alpha(opacity=100);border:0;box-shadow:inset 0 0 0 rgba(0,0,0,0);-webkit-box-shadow:inset 0 0 0 rgba(0,0,0,0);-moz-box-shadow:inset 0 0 0 rgba(0,0,0,0);font-family:times new roman;font-size:12px}.sticky{background-color:none;background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/eq/70_zps13ae4994.png);background-repeat:repeat;background-color:none;opacity:1;filter:alpha(opacity=100);box-shadow:inset 0 0 0 rgba(0,0,0,0);-webkit-box-shadow:inset 0 0 0 rgba(0,0,0,0);-moz-box-shadow:inset 0 0 0 rgba(0,0,0,0)}.center{background-color:none}#masthead{background-color:#151515;padding:10px;color:#CCC;box-shadow:0 0 40px #666}#footer{color:#CCC;background-color:#151515;padding:10px;border-radius:0 0 8px 8px;font-size:12px}.p7ehc-a{font-size:inherit}#layout{z-index:1;position:relative;width:900px;background-image:url(http://i20.photobucket.com/albums/b249/plaidsoxs/Tib/horse%20and%20castle4.jpg);height:600px;margin-left:-80px;top:0;background-repeat:no-repeat;display:inline-block}.box{float:left;text-align:justify;display:inline;margin-left:40px;margin-top:1px;max-width:300px;min-width:300px;background-color:rgba(0,0,0,0.25);background-position:top center;background-repeat:repeat-y}.box h2{margin:0}.box p{text-align:justify}.boxcontent{margin:0;padding:0 20px}.box2{float:left;text-align:justify;margin-left:80px;margin-top:0;display:inline;max-width:300px;min-width:300px;background-color:rgba(0,0,0,0.25);background-position:top center;background-repeat:repeat-y}.box2 h2{margin:0}.box2 p{text-align:justify}.boxcontent2{margin:0;padding:0 20px}
</style>

{coded for Howrse & PonyBox}

 <center>
<div style="background:url(http://i20.photobucket.com/albums/b249/plaidsoxs/Tib/horse%20and%20castle4.jpg); width: 900px; height: 600px;position: relative;">
<div style=" border-right: 2px solid #000; float: left; text-align: justify; display:inline; margin-left:40px; margin-top:600px; max-width: 300px; min-width: 300px;    padding: 0px 20px 0px 20px; background-color: rgba(0, 0, 0, 0.3); background-repeat: repeat-y; font: 11px/15px "Lucida Sans Unicode", "Lucida Grande", sans-serif, Vladimir Script; align: center; ">
<div style="font face: georgia; text-decoration: uppercase; font-size: 2.0em; padding-bottom: 5px; margin-top: 10px; border-bottom: 1px dotted #555555; color: #444444; ">



Header I



</div>
<div style="font face: Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0px; font-size: 11px; color:#ffffff; line-height: 15px; text-align: justify; margin-bottom: 40px;">



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper, odio eu dictum lobortis, erat lacus rhoncus est, vitae fermentum ante lectus nec nulla. Donec a ante nec nulla facilisis pulvinar. Mauris vel metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer luctus, lectus ac volutpat tristique, nunc purus pretium tellus, eu luctus neque urna eget massa. Phasellus urna augue, consectetur eget, iaculis vel, egestas at, tortor. Fusce volutpat erat nec dui. Vestibulum tempus euismod lacus.


   
</div>
<div style="font face: georgia; text-decoration: uppercase; font-size: 2.0em; padding-bottom: 5px; margin-top: 10px; border-bottom: 1px dotted #555555; color: #444444; ">



Header II




</div>
<div style="font face: Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0px; font-size: 11px; color:#ffffff; line-height: 15px; text-align: justify; margin-bottom: 40px;">




Etiam nisi elit, bibendum in, faucibus at, eleifend a, nulla. Cras sed enim et massa mattis varius. In metus odio, ultricies vitae, pulvinar sit amet, cursus eget, risus. Aenean nisl neque, sollicitudin volutpat, commodo quis, lobortis non, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
   



</div>
</div>
<div style="text-align: center; display: inline; float: left; margin-left: 30px; margin-top:600px;max-width: 39px; min-width: 39px; padding: 0px; background-color: transparent;">
<a href="http://tibs-premade-layouts.blogspot.com/"><img src="http://i20.photobucket.com/albums/b249/plaidsoxs/Tib/tiberia%20layout%20sig.png" border="0"></a></div>
<div style="border-left: 2px solid #000; float: left; text-align: justify; display: inline; margin-left:40px; margin-top:600px;max-width: 300px; min-width: 300px; padding: 0px 20px 0px 20px; background-color: rgba(0, 0, 0, 0.3); background-repeat: repeat-y;font: 11px/15px Lucida Sans Unicode, Lucida Grande, sans-serif, Vladimir Script; align: center;">
<div style="font face: georgia; text-decoration: uppercase; font-size: 2.0em; padding-bottom: 5px; margin-top: 10px; border-bottom: 1px dotted #555555; color: #444444; ">




Header III


</div>
<div style="font face: Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0px; font-size: 11px; color:#ffffff; line-height: 15px; text-align: justify; margin-bottom: 40px;">




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper, odio eu dictum lobortis, erat lacus rhoncus est, vitae fermentum ante lectus nec nulla. Donec a ante nec nulla facilisis pulvinar. Mauris vel metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer luctus, lectus ac volutpat tristique, nunc purus pretium tellus, eu luctus neque urna eget massa. Phasellus urna augue, consectetur eget, iaculis vel, egestas at, tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper, odio eu dictum lobortis, erat lacus rhoncus est, vitae fermentum ante lectus nec nulla. Donec a ante nec nulla facilisis pulvinar. Mauris vel metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer luctus, lectus ac volutpat tristique, nunc purus pretium tellus, eu luctus neque urna eget massa. Phasellus urna augue, consectetur eget, iaculis vel, egestas at, tortor.
  

 
</div>
<div style="font face: georgia; text-decoration: uppercase; font-size: 2.0em; padding-bottom: 5px; margin-top: 10px; border-bottom: 1px dotted #555555; color: #444444; ">




Header IV


</div>
<div style="font face: Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0px; font-size: 11px; color:#ffffff; line-height: 15px; text-align: justify; margin-bottom: 40px;">




Etiam nisi elit, bibendum in, faucibus at, eleifend a, nulla. Cras sed enim et massa mattis varius. In metus odio, ultricies vitae, pulvinar sit amet, cursus eget, risus. Aenean nisl neque, sollicitudin volutpat, commodo quis, lobortis non, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.  



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

*Note*

Please change your Howrse presentation settings to the following: