File: /home/the-tree.org.uk/public_html/style.html
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="_your description goes here_" />
<meta name="keywords" content="_your,keywords,goes,here_" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" title="style (screen)" />
<link rel="stylesheet" href="tabs.css" type="text/css" media="screen" />
<script type="text/javascript" src="tabber.js"></script>
<title>Newsworthy</title>
</head>
<body>
<div id="wrap">
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("content-explorer");
</script>
<div id="sitemeta">
<a href="#">Log In</a>|<a href="#">Register</a>
</div>
<div id="content">
<input type="text" class="search" value="Search..." onfocus="if
(this.value==this.defaultValue) this.value='';" />
<h1 class="head"><a href="index.html">Newsworthy</a></h1>
<h2 class="head">The way to handle a lot of information...</h2>
<div id="menubar">
<ul class="nav">
<li><a class="meta" href="post.html">Blog Post</a></li>
<li><a class="meta" href="style.html">Style Demo</a></li>
<li><a href="#">Main</a></li>
<li><a href="#">News</a></li>
<li><a href="#">World</a></li>
<li><a href="#">Environment</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Local</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Science</a></li>
<li><a href="#">Weather</a></li>
<li class="up"><a href="#">Business</a></li>
<li><a href="#">Classifieds</a></li>
<li><div class="clearboth"> </div></li>
</ul>
</div>
<div id="submenu">
<a href="#">World Business</a><a href="#">Markets</a><a href="#">Quotes</a><a href="#">Opinion</a><a href="#">Business Home</a>
</div>
<div id="maincontent">
<div id="right">
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1</h2>
<img class="left" src="images/boat.jpg" alt="" />
<h3>Editorial</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pretium pede eget neque. Vivamus volutpat consectetuer nisl. </p>
<div class="clear"> </div>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content goes here.</p>
<ul class="links half">
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
<li><a href="#">HTML 1.0 Strict</a></li>
<li><a href="#">DemusDesign</a></li>
</ul>
<ul class="links half">
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
<li><a href="#">HTML 1.0 Strict</a></li>
<li><a href="#">DemusDesign</a></li>
</ul>
<div class="clear"> </div>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pretium pede eget neque. Vivamus volutpat consectetuer nisl. Vivamus et est. Pellentesque eget purus et dui fringilla tempor. Nullam ac odio quis leo bibendum blandit. </p>
</div>
</div>
<img class="banner left" src="images/banner.jpg" alt="125x125 Banner" />
<img class="banner left" src="images/banner.jpg" alt="125x125 Banner" />
<img class="banner left" src="images/banner.jpg" alt="125x125 Banner" />
<img class="banner left" src="images/banner.jpg" alt="125x125 Banner" />
<h1>Right</h1>
<ul class="links half">
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
<li><a href="#">HTML 1.0 Strict</a></li>
<li><a href="#">DemusDesign</a></li>
</ul>
<ul class="links half">
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
<li><a href="#">HTML 1.0 Strict</a></li>
<li><a href="#">DemusDesign</a></li>
</ul>
<div class="clear"> </div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pretium pede eget neque. Vivamus volutpat consectetuer nisl. Vivamus et est. Pellentesque eget purus et dui fringilla tempor. Nullam ac odio quis leo bibendum blandit. Aenean fermentum sodales augue. Cras egestas libero. Phasellus vel nisi eget sem pellentesque volutpat. Mauris consequat. Duis cursus odio at nulla. Curabitur ut felis. Integer tempor ligula at lorem. Nam venenatis. Nam sollicitudin imperdiet enim. Vestibulum mauris lectus, hendrerit at, dignissim id, dictum vel, augue. In vestibulum nunc eget quam. Nunc lobortis, nunc eget imperdiet accumsan, sapien sapien pellentesque enim, eu ornare nunc diam a lectus. In feugiat nisi. Phasellus vulputate.</p>
<p>Mauris diam ante, bibendum non, condimentum ac, tempus non, pede. In id sapien at arcu tempor consequat. Fusce a lorem. Vivamus justo eros, sollicitudin a, adipiscing nec, adipiscing eu, odio. Sed arcu mi, suscipit in, venenatis a, condimentum in, massa. Nullam consequat elementum risus. Donec mollis, odio eget tristique faucibus, orci mauris porttitor enim, sit amet dapibus urna nisl ac lacus. Praesent ultrices nunc sit amet nisi. Nunc congue, erat vel blandit sagittis, odio augue vestibulum lectus, nec cursus orci nisl sit amet diam. Nunc in eros. Aliquam porta vulputate odio. Morbi consequat justo eu arcu. Proin tempus dui et quam. Suspendisse commodo auctor felis. Vivamus neque ipsum, rhoncus quis, ultrices at, tristique vitae, pede.</p>
</div>
<div id="main">
<div id="left">
<div class="middle">
<div class="box">
<h1>Middle</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pretium pede eget neque.</p>
</div>
<img class="banner" src="images/banner.jpg" alt="125x125 Banner" />
<div class="box">
<p>Vivamus volutpat consectetuer nisl. Vivamus et est. Pellentesque eget purus et dui fringilla tempor. Nullam ac odio quis leo bibendum blandit. Aenean fermentum sodales augue. Cras egestas libero. Phasellus vel nisi eget sem pellentesque volutpat. </p>
</div>
</div>
<div class="post">
<h1>Some Style Demonstrations</h1>
<div class="author">Posted by Brad on 7/23/09</div>
<p><img class="left" src="images/boat.jpg" alt="an image in a post" />Vivamus volutpat <a href="#">consectetuer</a> nisl. Vivamus et est. Pellentesque eget purus et dui fringilla tempor. Nullam ac odio quis leo bibendum blandit. Aenean fermentum sodales augue. Cras egestas libero. Phasellus vel nisi eget sem pellentesque volutpat. Mauris consequat. Duis cursus odio at nulla. Curabitur ut felis. Integer tempor ligula at lorem. Nam venenatis. Nam sollicitudin imperdiet enim. Vestibulum mauris lectus, hendrerit at, dignissim id, dictum vel, augue. In vestibulum nunc eget quam. Nunc lobortis, nunc eget imperdiet accumsan, sapien sapien pellentesque enim, eu ornare nunc diam a lectus. In feugiat nisi. Phasellus vulputate.</p>
<h3>Code</h3>
<p><code>
code-sample { <br />
font-weight: bold;<br />
font-style: italic;<br />
}
</code></p>
<h3>Example Lists</h3>
<ol class="normal">
<li>Here is an example</li>
<li>of an ordered list</li>
</ol>
<ul class="normal">
<li>Here is an example</li>
<li>of an unordered list</li>
</ul>
<dl>
<dt>Definition title</dt>
<dd>Definition description</dd>
<dt>Definition title</dt>
<dd>Definition description</dd>
</dl>
<h3>Blockquote</h3>
<blockquote>
<p>You can have anything in the world you want if you'll just help
enough other people get what they want.</p>
<p class="author"> - Zig Ziglar</p>
</blockquote>
<h3>Headers</h3>
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h3 class="respond">Tabular Data</h3>
<table>
<tr>
<th><strong>post date</strong></th>
<th>title</th>
<th>description</th>
</tr>
<tr>
<td>04.18.2009</td>
<td>Augue non nibh</td>
<td>Commodo <a href="index.html">metus</a> vestibulum hdhdh djdjdj djdjdj</td>
</tr>
<tr class="altrow">
<td>04.18.2009</td>
<td>Fusce ut diam</td>
<td>Purus in eget odio in sapien</td>
</tr>
<tr>
<td>04.18.2009</td>
<td>Augue non nibh</td>
<td>Adipiscing blandit </td>
</tr>
<tr class="altrow">
<td>04.18.2009</td>
<td>Sed vestibulum</td>
<td>Cras <a href="index.html">lobortis</a> commodo </td>
</tr>
</table>
<div class="postmeta"><a class="comments" href="#">47 Comments</a><a class="category" href="#">Filed under: Templates</a><br /></div>
<h3 class="respond">Comments</h3>
<div class="comment odd">
<img class="gravatar" src="images/gravatar.gif" alt="" />
<h3>Brad said:</h3>
<div class="author">on August 3, 2009 at 15:34:06</div>
<p>Another great template from DemusDesign!</p>
</div>
<div class="comment">
<img class="gravatar" src="images/gravatar.gif" alt="" />
<h3>Brad said:</h3>
<div class="author">on August 3, 2009 at 15:34:06</div>
<p>Another great template from DemusDesign!</p>
</div>
<div class="comment odd">
<img class="gravatar" src="images/gravatar.gif" alt="" />
<h3>Brad said:</h3>
<div class="author">on August 3, 2009 at 15:34:06</div>
<p>Another great template from DemusDesign!</p>
</div>
<div class="comment lastcomment">
<img class="gravatar" src="images/gravatar.gif" alt="" />
<h3>Brad said:</h3>
<div class="author">on August 3, 2009 at 15:34:06</div>
<p>Another great template from DemusDesign!</p>
</div>
<h3 class="respond">Leave a Reply</h3>
<form action="index.html" method="post" id="commentform">
<p>
<label for="name">Name (required)</label><br />
<input id="name" name="name" value="Your Name" type="text" tabindex="1" />
</p>
<p>
<label for="email">Email Address (required)</label><br />
<input id="email" name="email" value="Your Email" type="text" tabindex="2" />
</p>
<p>
<label for="website">Website</label><br />
<input id="website" name="website" value="Your Website" type="text" tabindex="3" />
</p>
<p>
<label for="message">Your Message</label><br />
<textarea id="message" name="message" rows="10" cols="20" tabindex="4"></textarea>
</p>
<p class="no-border">
<input class="button" type="submit" value="Submit" tabindex="5" />
</p>
</form>
</div><br />
<h2>Width Demonstrations</h2>
<div class="halfcontent left">
<h3>Half Content</h3>
<p>This block is tagged with the class .halfcontent for its width and .left for its position.</p>
</div>
<div class="halfcontent left">
<h3>Half Content</h3>
<p>This block is tagged with the class .halfcontent for its width and .left for its position.</p>
</div>
<div class="clear"> </div><br />
<div class="substory">
<img src="images/substory.jpg" alt="" />
<h2>Sub-Story 1</h2>
<p>The .substory class constitutes 1/4 of the main content.</p>
<div class="postmeta"><a href="#" class="readmore">Read more...</a></div>
</div>
<div class="substory">
<img src="images/substory.jpg" alt="" />
<h2>Sub-Story 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus volutpat consectetuer nisl. </p>
<div class="postmeta"><a href="#" class="readmore">Read more...</a></div>
</div>
<div class="substory">
<img src="images/substory.jpg" alt="" />
<h2>Sub-Story 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="postmeta"><a href="#" class="readmore">Read more...</a></div>
</div>
<div class="substory rightsubstory">
<img src="images/substory.jpg" alt="" />
<h2>Sub-Story 4</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus volutpat consectetuer nisl. </p>
<div class="postmeta"><a href="#" class="readmore">Read more...</a></div>
</div>
<div class="clear"> </div>
<div class="substory">
<img src="images/substory.jpg" alt="" />
<h2>Sub-Story 5</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="postmeta"><a href="#" class="readmore">Read more...</a></div>
</div>
<div class="substory">
<img src="images/substory.jpg" alt="" />
<h2>Sub-Story 6</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="postmeta"><a href="#" class="readmore">Read more...</a></div>
</div>
<div class="substory">
<img src="images/substory.jpg" alt="" />
<h2>Sub-Story 7</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="postmeta"><a href="#" class="readmore">Read more...</a></div>
</div>
<div class="substory rightsubstory">
<img src="images/substory.jpg" alt="" />
<h2>Sub-Story 8</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="postmeta"><a href="#" class="readmore">Read more...</a></div>
</div>
<div class="clear"> </div><br />
<h2>Sub Stories with a right box</h2>
<div class="middle">
<div class="box">
<h1>Middle</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pretium pede eget neque.</p>
</div>
<img class="banner" src="images/banner.jpg" alt="125x125 Banner" />
<div class="clear"> </div>
</div>
<div class="substory">
<img src="images/substory.jpg" alt="" />
<h2>Sub-Story 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="postmeta"><a href="#" class="readmore">Read more...</a></div>
</div>
<div class="substory">
<img src="images/substory.jpg" alt="" />
<h2>Sub-Story 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus volutpat consectetuer nisl. </p>
<div class="postmeta"><a href="#" class="readmore">Read more...</a></div>
</div>
<div class="substory thirdsubstory">
<img src="images/substory.jpg" alt="" />
<h2>Sub-Story 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="postmeta"><a href="#" class="readmore">Read more...</a></div>
</div>
<div class="clear"> </div>
</div>
<div class="clearboth"> </div>
</div>
<br /><br />
<div class="clearboth"> </div>
</div>
</div>
<div class="footer">
<div class="footnav"><a class="first" href="#">Main</a>
<a href="#">News</a>
<a href="#">World</a>
<a href="#">Environment</a>
<a href="#">Sports</a>
<a href="#">Local</a>
<a href="#">Tech</a>
<a href="#">Science</a>
<a href="#">Health</a>
<a href="#">Weather</a>
<a href="#">Business</a>
<a href="#">Classifieds</a></div>
<div class="footnav">
<div class="threehundred left">
<h3>About this template</h3>
<p><img class="left" src="images/boat.jpg" alt="About Me" />Newsworthy is the 16th template from <a href="#">DemusDesign</a>. It's a magazine-style template built on a 6-column grid that's perfect as a news site or any site with a lot of information. If you use the template, please retain the link back to my site in the footer. Thanks.</p>
</div>
<div class="linksleft">
<h3>Recent Updates</h3>
<ul>
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
<li><a href="#">HTML 1.0 Strict</a></li>
<li><a href="#">DemusDesign</a></li>
</ul>
</div>
<div class="linksleft">
<h3>Recent Comments</h3>
<ul>
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
<li><a href="#">HTML 1.0 Strict</a></li>
<li><a href="#">DemusDesign</a></li>
</ul>
</div>
<div class="linksleft">
<h3>Recent Posts</h3>
<ul>
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
<li><a href="#">HTML 1.0 Strict</a></li>
<li><a href="#">DemusDesign</a></li>
</ul>
</div>
<div class="linksleft">
<h3>Friends and Links</h3>
<ul>
<li><a href="#">A New Template</a></li>
<li><a href="#">CSS Check</a></li>
</ul>
</div>
<div class="clearboth"> </div>
</div>
<p>© 2008 Your Site | Template by <a href="http://demusdesign.com">DemusDesign</a><img src="images/bullet.gif" alt="" /><img src="images/bullet_light.gif" alt="" /></p>
</div>
</div>
</body>
</html>