surreal
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Surreal | A free css template by Rambling Soul</title>
<style type='text/css'>
@charset "utf-8";
/*
Name of Template : Surreal
Author : Roshan
URL : www.ramblingsoul.com
License : Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
Note : Do not remove the credit links from the template
*/
* { margin: 0px; padding: 0px;}
body {background:url(images/bg.jpg) repeat; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#666666;}
.clear {clear:both;}
#wrap {background:url(images/wrapbg.jpg) repeat-y; width:927px; margin:25px auto 25px auto;}
#wrap #header #sitename {color: #ffffff; font-family: Georgia, "Times New Roman", Times, serif; font-size: 58px; font-weight: normal; display: block; padding-top: 140px; text-align: right; padding-right: 50px;}
#sitename a, #sitename a:visited, #sitename a:active{color:#ffffff; text-decoration:none;}
#sitename a:hover{color:#ffffcc; text-decoration:none;}
#header {background:url(images/header.jpg) no-repeat; height:341px;}
#page {padding:0px 10px 0px 10px;}
#page #menu {float:left; background:url(images/sidemenu.jpg) no-repeat; width:269px; height:382px;}
#page #content {margin:0px 0px 0px 275px; padding:0px 20px 0px 5px;}
#content p {line-height:22px; margin:0px 0px 25px 0px;}
#content h2 {font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; font-size:26px; color:#666600; display:block; margin-bottom:20px;}
#content a {color:#999900;}
#content a:visited {color:#666666;}
#content a:active { color:#99CC00;}
#content a:hover {color:#000000; text-decoration:none;}
#content h2 .seo {display:block; text-align:right; font-size:10px; color:#999999; background:#efefef; padding:3px;}
#content blockquote {display:block; padding:5px; margin:10px; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; color:#996600; background:#F8FDBA; border-top:dashed 1px #666666; border-bottom:dashed 1px #666666;}
#content blockquote p {margin:0px;}
#content blockquote cite {color:#000000; display:block; text-align:right; padding:5px; border-top:solid 1px #F3ECBE;}
#content img {background:#efefef; margin:5px; padding:5px; border:solid 1px #999999;}
#content .alignleft {float:left;}
#content .alignright {float:right;}
#content .postmetadata {display:block; padding:3px; background: #E3EDAF;}
#content h1,#content h3,#content h4,#content h5,#content h6 {color:#666600;}
#content ul {list-style:square; padding:5px; margin:10px 10px 10px 20px;}
#content li {padding:5px; margin-bottom:10px;}
#content ol {padding:5px; margin:10px 10px 10px 20px;}
#browse { background:url(images/postbottombg.jpg) no-repeat; padding:40px 5px 10px 5px;}
#browse .subhead{font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; padding-left:25px; font-size:26px; color:#666600; display:block; margin-bottom:35px;}
#browse .categoryhead {font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; padding:5px; font-size:22px; color:#666600; display:block; border-bottom:solid 1px #ffffff;}
#browse ul {list-style:none;}
#browse li {display:block; height:25px; border-top:solid 1px #FEFEFC; border-top: solid 1px #EBE6B4;}
#browse ul a {display:block; height:20px; padding:5px 5px 0px 5px; text-decoration:none; color:#000000;}
#browse a:visited,active{display:block; height:20px; padding:5px 5px 0px 5px; text-decoration:none; color:#000000;border-bottom:solid 1px #D7C479;}
#browse a:hover {background:#ffffff; color:#000000;}
.browsecat {float:left; width:30%; padding:5px 6px 8px 6px; margin-left:10px; border:solid 1px #F3ECBE; background:#FBFAF0;}
#menu h2 {display:block; color:#666600; border-bottom:solid 1px #DFCD95; padding:5px; font-family:Georgia, "Times New Roman", Times, serif; font-size:22px; font-weight:normal;}
#wrap #page #menu #sidemenu { padding: 65px 45px 0px 40px; display: block;}
#sidemenu ul { display:block;list-style:none;}
#sidemenu li {display:block; height:26px; border-top:solid 1px #FFFFff;}
#sidemenu a, #sidemenu a:visited, #sidemenu a:active {display:block; height:20px; padding:5px 5px 0px 5px; color:#666666; text-decoration:none; border-bottom:solid 1px #DFCD95;}
#sidemenu a:hover{background:#ffffcc;}
#sidemenu .active a,#sidemenu .active a:visited, #sidemenu .active a:active, #sidemenu .active a:hover {background:#ffffcc;}
#footer {background:url(images/footer.jpg) no-repeat; background-position:bottom; height:100px; text-align:center;}
#footercontent {margin:15px; border-top:solid 1px #EBE6B4; padding-top:15px;}
#footer a, #footer a:visited, #footer a:active {color:#996633; text-decoration:none;}
#footer #credit {font-size:10px;}
.textfield {display: block; float:left; width:65%; background-color: #F3F4E8; margin:3px 3px 3px 30px; padding:3px; border: 1px solid #D6D9AE; clear:right;}
label { display: block; float:left; text-align:right; font-weight:bold; width:20%; margin:3px; padding: 5px;}
.button {display: block; padding:0px; background-color:#E3E6C8; margin:3px; border: 2px solid #efefef; color:#000000;}
.textfield:hover {background:#FBFCF8;}
.textfield:focus {background:#ffffff;}
#content .clear2 {clear:right; width:90%;}
.hide {display:none;}
#content table {margin:10px; width:500px; border:solid 1px #BDDB99;}
#content th {background:#DFEDCD; padding:5px 15px 5px 15px; color:#999933; font-weight:bold; text-align:center; border-bottom:1px solid #BDDB99;}
#content td {border-bottom:1px solid #DFEDCD ; padding:5px 15px 5px 15px; border-right:1px solid #DFEDCD;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="sitename"><a href="#">Surreal</a></h1>
</div>
<div id="page">
<div id="menu">
<div id="sidemenu">
<h2>Menu</h2>
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="tables.html">Tables</a></li>
<li><a href="forms.html">Forms</a></li>
<li class="active"><a href="blog.html">Blog Entries</a></li>
<li><a href="#browse">Browse More</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>Lorem Ipsum <span class="seo">Posted on 01/11/2007</span></h2>
<img class="alignright" src="images/imagesample1.jpg" alt="Surreal Template Image" />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pulvinar arcu sed risus. Etiam odio mauris, mattis non, vestibulum quis, mollis ac, mi. Fusce a nibh. Integer eu quam. Fusce sem nunc, tincidunt et, imperdiet eu, dapibus id, arcu. Sed mollis ligula. Nullam dapibus vestibulum eros. Suspendisse venenatis sodales nulla. Vivamus et magna. Maecenas pellentesque mauris non ipsum. Phasellus ac eros. Integer est. In sit amet lectus a tellus dapibus ultrices. Suspendisse molestie diam nec erat.
</p>
<p>
Aliquam gravida. Sed hendrerit, ante porta euismod hendrerit, nisl velit pharetra ipsum, quis porta justo felis mattis dui. Phasellus elit ligula, cursus vitae, euismod ac, scelerisque non, diam. Maecenas imperdiet. Aliquam egestas, sem eget hendrerit dapibus, mi tellus lacinia ante, ac condimentum nulla magna quis velit. Nullam scelerisque, purus at tempor pretium, neque nulla ullamcorper ante, et imperdiet odio sapien sit amet felis.</p>
<p class="postmetadata">
189 Comments | Add your comment | Filed under Web Design
</p>
<h2> Headings & Lists<span class="seo">Posted on 01/11/2007</span></h2>
<p> Nam a erat. Suspendisse nunc magna, condimentum quis, condimentum non, sollicitudin nec, nisi. In adipiscing justo. Pellentesque non dolor nec purus dignissim fermentum. Donec sit amet dolor id nisi adipiscing ornare. Sed nisl massa, ullamcorper a, pellentesque et, ultricies eu, justo. Duis faucibus diam a neque.
</p>
<h3>Heading 3</h3>
<p>
Donec vel diam. Maecenas aliquam massa sit amet neque. Duis sodales, felis id tincidunt volutpat, leo orci convallis lacus, ac congue lacus massa eu neque. Sed risus lectus, tempor ac, scelerisque sed, adipiscing sed, urna. Proin mattis ipsum id elit. Fusce orci. </p>
<h4>Heading 4</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas in ipsum vel orci bibendum cursus. Nulla nisi diam, tempor et, auctor vitae, sollicitudin at, arcu. In aliquet placerat ipsum. Duis turpis ipsum, euismod nec, semper nec, posuere et, quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vulputate vestibulum ligula. Donec vestibulum purus et tortor. Sed consequat justo et eros. Aenean dictum, quam egestas sodales feugiat, leo massa gravida neque, in aliquet urna diam dictum nulla. Quisque turpis. Mauris nisi mi, adipiscing et, tempor non, posuere vel, nunc. Donec quis sem. Mauris eget magna eu ante congue tempus. Fusce mattis lorem a arcu. Quisque scelerisque augue at quam.
</p>
<h3>List Example</h3>
<p>
Duis tempor purus in arcu. Sed dapibus, ante eu euismod tristique, ante leo malesuada dui, in ultrices ligula mauris non sapien. Cras nonummy consectetuer enim. Nam magna sem, imperdiet sit amet, pretium in, mollis non, odio. Donec quis arcu. Cras sed sapien vel lorem pulvinar consequat.</p>
<ul>
<li> Morbi dui augue, volutpat et, consectetuer nec, elementum sed, sem. </li>
<li>Quisque id risus. Praesent ullamcorper faucibus risus. Nulla ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam sapien sem, tincidunt ac, nonummy sed, blandit ac, diam. Quisque adipiscing eros vitae orci. </li>
<li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis sit amet metus. </li>
<li>Aliquam lacus metus, dictum sed, consequat in, euismod vel, mi. Pellentesque faucibus. Morbi varius blandit nulla. Etiam pharetra mauris id sapien. Nullam dignissim. </li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>
Duis auctor sem eu ante. Suspendisse potenti.</li>
<li> Morbi mi. Morbi ut neque ut tellus pretium tristique. </li>
<li>Aenean nonummy, dolor cursus tristique pretium, sapien pede luctus ipsum, luctus condimentum dui elit eu magna.</li>
<li> Nam sed orci et purus laoreet fringilla. Nam facilisis lobortis ante. Suspendisse elementum velit at velit. Duis rutrum ante ac tortor. Curabitur nonummy leo mollis tortor. Pellentesque ac pede. </li>
</ol>
</div>
<div class="clear"></div>
<div id="browse">
<h2 class="subhead">Browse</h2>
<div class="browsecat">
<h2 class="categoryhead">Categories</h2>
<ul>
<li><a href="#">
Web Designing</a></li>
<li><a href="#">Music & Entertainment</a></li>
<li><a href="#">Electronics & Gadgets</a></li>
<li><a href="#">Computer Science</a></li>
<li><a href="#">Educations</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Charity</a></li>
<li><a href="#">Paranormal Science</a></li>
<li><a href="#">and more..</a></li>
</ul>
</div>
<div class="browsecat">
<h2 class="categoryhead">Archives</h2>
<ul>
<li><a href="#">
January 2007</a></li>
<li><a href="#">February 2007</a></li>
<li><a href="#">March 2007</a></li>
<li><a href="#">April 2007</a></li>
<li><a href="#">May 2007</a></li>
<li><a href="#">June 2007</a></li>
<li><a href="#">July 2007</a></li>
<li><a href="#">August 2007</a></li>
<li><a href="#">September 2007</a></li>
</ul>
</div>
<div class="browsecat">
<h2 class="categoryhead">Links</h2>
<ul>
<li><a href="http://opendesigns.org">
The Open Designs Community</a></li>
<li><a href="http://ramblingsoul.com">Rambling Soul - Free CSS Templates</a></li>
<li><a href="http://cssfreebies.com">CSS Freebies</a></li>
<li><a href="http://google.com">Google.com</a></li>
<li><a href="http://alistapart.com">A List Apart</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div id="footercontent">
<p>Yoursitename.com © All Rights Reserved</p>
<p><a href="#">Put</a> | <a href="#">Some</a> | <a href="#">Links</a> | <a href="#">Here</a></p>
<p id="credit"><a href="http://ramblingsoul.com">CSS Template</a> by Ramblingsoul</p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category