Corrected indent and whitespace. Validates now with nxml html5.rnc rules.
[treecutter.git] / style / bluenightsky / index.html
index eb501cb0f7b3544c7308ead2c7c0ddee953cfcc4..d3e1643ca8f36ed0a8d3d54a61d6856042ebde0e 100755 (executable)
-<!doctype html>
-<html lang="en">
-<head>
-       <meta charset="utf-8" />
-       <title>BlueNightSky</title>
-       <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
-       <link rel="stylesheet" type="text/css" href="print.css" media="print" />
-       <script type="text/javascript"
-src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
-       <script type="text/javascript" src="js/simpletabs.js"></script> 
-       <link rel="stylesheet" type="text/css" href="lightbox.css" media="screen" />
-       <script type="text/javascript" src="js/jquery.js"></script>
-  <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
-       <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-<script type="text/javascript">
-$(function() {
-       $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
-});
-</script>
-</head>
-<body>
-<div id="wrapper"><!-- #wrapper -->
-
-       <header><!-- header -->
-               <h1><a href="#">Blue Night Sky</a></h1>
-               <h2>Your compelling tag line goes here</h2>
-               <img src="images/bluenightsky.png" width="940" height="200" alt=""><!-- header image -->
-       </header><!-- end of header -->
-       
-       <nav><!-- top nav -->
-               <div class="menu">
-                       <ul>
-                               <li><a href="#">Home</a></li>
-                               <li><a href="#">About</a>
-                           <ul>
-                                       <li><a href="#">The Team</a></li>
-                                       <li><a href="#">History</a></li>
-                                       <li><a href="">Vision</a></li>
-                               </ul>
-                       </li>
-                               <li><a href="#">Products</a>
-                                       <ul>
-                                               <li><a href="#">Widgets</a></li>
-                                               <li><a href="#">Wodgets</a></li>
-                                       </ul>
-                               </li>
-                               <li><a href="#">Services</a>
-                                       <ul>
-                                               <li><a href="#">Consulting</a></li>
-                                               <li><a href="#">Troubleshooting</a></li>
-                                       </ul>
-                               </li>
-                               <li><a href="#">Support</a></li>
-                               <li><a href="#">Contact Us</a></li>
-                       </ul>
-               </div>
-       </nav><!-- end of top nav -->
-       
-       <section id="main"><!-- #main content and sidebar area -->
-
-                       <section id="content"><!-- #content -->
-
-                       <section id="lightboxthumbs">
-                       <a href="images/gallery/falls1.jpg" rel="lightbox" title="Waterfall 1 Caption goes here"><img src="images/gallery/falls1-thumb.jpg" alt="" class="frameit"></a>
-                       <a href="images/gallery/falls2.jpg" rel="lightbox" title="Waterfall 2 Caption goes here"><img src="images/gallery/falls2-thumb.jpg" alt="" class="frameit"></a>
-                       <a href="images/gallery/falls3.jpg" rel="lightbox" title="Waterfall 3 Caption goes here"><img src="images/gallery/falls3-thumb.jpg" alt="" class="frameit"></a>
-                       <a href="images/gallery/falls4.jpg" rel="lightbox" title="Waterfall 4 Caption goes here"><img src="images/gallery/falls4-thumb.jpg" alt="" class="frameit"></a>
-                       <a href="images/gallery/falls5.jpg" rel="lightbox" title="Waterfall 5 Caption goes here"><img src="images/gallery/falls5-thumb.jpg" alt="" class="frameit"></a>
-                       <a href="images/gallery/falls6.jpg" rel="lightbox" title="Waterfall 6 Caption goes here"><img src="images/gallery/falls6-thumb.jpg" alt="" class="frameitlast"></a>
-                       </section>
-
-                               <article class="featured">
-                                       <img src="images/newspic.jpg" alt="" class="featuredthumb" />
-                                       <p><a href="#" class="featuredtitle">This is the featured article</a></p><p class="featuredstory">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet.</p>
-                               </article>
-
-                               <article class="odd">
-                                       <img src="images/newspic1.jpg" alt="" class="thumb" />
-                                       <p><a href="#" class="title">This is the title of a news article</a></p><p class="story">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa.</p>
-                               </article>
-
-                               <article class="even">
-                                       <img src="images/newspic2.jpg" alt="" class="thumb" />
-                                       <p><a href="#" class="title">This is another news article</a></p><p class="story">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa.</p>
-                               </article>
-
-                               <article class="odd">
-                                       <img src="images/newspic3.jpg" alt="" class="thumb" />
-                                       <p><a href="#" class="title">This is a news article too</a></p><p class="story">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa.</p>
-                               </article>
-
-                               <article class="even">
-                                       <img src="images/newspic4.jpg" alt="" class="thumb" />
-                                       <p><a href="#" class="title">This is an older news article</a></p><p class="story">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa.</p>
-                               </article>
-
-                               <article class="odd">
-                                       <img src="images/newspic5.jpg" alt="" class="thumb" />
-                                       <p><a href="#" class="title">This is the last news article</a></p><p class="story">Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Pellentesque ut sapien arcu, egestas mollis massa.</p>
-                               </article>
-                                               
-                       </section><!-- end of #content -->
-
-               <aside id="sidebar"><!-- sidebar -->
-
-                       <div class="tabwidget"> 
-         <ul class="tabs"> 
-             <li><a href="#tab1">Recent</a></li> 
-             <li><a href="#tab2">Popular</a></li>
-             <li><a href="#tab3">About Me</a></li>
-         </ul> 
-         <div class="tab_container"> 
-             <div id="tab1" class="tab_content"> 
-                 <h3>Recent Articles</h3> 
-                 <ul>
-                       <li><a href="#">Interesting Recent Link 1</a></li>
-                       <li><a href="#">Interesting Recent Link 2</a></li>
-                       <li><a href="#">Interesting Recent Link 3</a></li>
-                       <li><a href="#">Interesting Recent Link 4</a></li>
-                       <li><a href="#">Interesting Recent Link 5</a></li>
-                       <li><a href="#">Interesting Recent Link 6</a></li>
-                       <li><a href="#">Interesting Recent Link 7</a></li>
-                                                       </ul>
-             </div> 
-             <div id="tab2" class="tab_content"> 
-                 <h3>Our Most Popular</h3> 
-                 <ul>
-                       <li><a href="#">Most Popular Link 1</a></li>
-                       <li><a href="#">Most Popular Link 2</a></li>
-                       <li><a href="#">Most Popular Link 3</a></li>
-                       <li><a href="#">Most Popular Link 4</a></li>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>BlueNightSky</title>
+    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
+    <script type="text/javascript"
+           src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
+    </script>
+    <script type="text/javascript" src="js/simpletabs.js"></script>
+    <link rel="stylesheet" type="text/css" href="lightbox.css" media="screen" />
+    <script type="text/javascript" src="js/jquery.js"></script>
+    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
+    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+    <script type="text/javascript">
+      $(function() {
+      $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
+      });
+    </script>
+  </head>
+  <body>
+    <div id="wrapper"><!-- #wrapper -->
+
+      <header><!-- header -->
+       <h1><a href="#">Blue Night Sky</a></h1>
+       <h2>Your compelling tag line goes here</h2>
+       <img src="images/bluenightsky.png" width="940" height="200" alt=""/>
+       <!-- header image -->
+      </header><!-- end of header -->
+
+      <nav><!-- top nav -->
+       <div class="menu">
+         <ul>
+           <li><a href="#">Home</a></li>
+           <li><a href="#">About</a>
+           <ul>
+             <li><a href="#">The Team</a></li>
+             <li><a href="#">History</a></li>
+             <li><a href="">Vision</a></li>
+           </ul>
+           </li>
+           <li><a href="#">Products</a>
+           <ul>
+             <li><a href="#">Widgets</a></li>
+             <li><a href="#">Wodgets</a></li>
+           </ul>
+           </li>
+           <li><a href="#">Services</a>
+           <ul>
+             <li><a href="#">Consulting</a></li>
+             <li><a href="#">Troubleshooting</a></li>
+           </ul>
+           </li>
+           <li><a href="#">Support</a></li>
+           <li><a href="#">Contact Us</a></li>
+         </ul>
+       </div>
+      </nav><!-- end of top nav -->
+
+      <section id="main"><!-- #main content and sidebar area -->
+
+       <section id="content"><!-- #content -->
+
+         <section id="lightboxthumbs">
+           <a href="images/gallery/falls1.jpg" rel="lightbox"
+              title="Waterfall 1 Caption goes here"><img
+              src="images/gallery/falls1-thumb.jpg"
+              alt="" class="frameit"/></a>
+           <a href="images/gallery/falls2.jpg" rel="lightbox"
+              title="Waterfall 2 Caption goes here"><img
+              src="images/gallery/falls2-thumb.jpg"
+              alt="" class="frameit"/></a>
+           <a href="images/gallery/falls3.jpg" rel="lightbox"
+              title="Waterfall 3 Caption goes here"><img
+              src="images/gallery/falls3-thumb.jpg"
+              alt="" class="frameit"/></a>
+           <a href="images/gallery/falls4.jpg" rel="lightbox"
+              title="Waterfall 4 Caption goes here"><img
+              src="images/gallery/falls4-thumb.jpg"
+              alt="" class="frameit"/></a>
+           <a href="images/gallery/falls5.jpg" rel="lightbox"
+              title="Waterfall 5 Caption goes here"><img
+              src="images/gallery/falls5-thumb.jpg"
+              alt="" class="frameit"/></a>
+           <a href="images/gallery/falls6.jpg" rel="lightbox"
+              title="Waterfall 6 Caption goes here"><img
+              src="images/gallery/falls6-thumb.jpg"
+              alt="" class="frameitlast"/></a>
+         </section>
+
+         <article class="featured">
+           <img src="images/newspic.jpg" alt="" class="featuredthumb" />
+           <p><a href="#" class="featuredtitle">This is the featured
+           article</a></p><p class="featuredstory">Pellentesque ut
+           sapien arcu, egestas mollis massa. Fusce lectus leo,
+           fringilla at aliquet sit amet, volutpat non erat. Aenean
+           molestie nibh vitae turpis venenatis vel accumsan nunc
+           tincidunt. Pellentesque ut sapien arcu, egestas mollis
+           massa. Fusce lectus leo, fringilla at aliquet sit amet,
+           volutpat non erat. Aenean molestie nibh vitae turpis
+           venenatis vel accumsan nunc tincidunt. Pellentesque ut
+           sapien arcu, egestas mollis massa. Fusce lectus leo,
+           fringilla at aliquet.</p>
+         </article>
+
+         <article class="odd">
+           <img src="images/newspic1.jpg" alt="" class="thumb" />
+           <p><a href="#" class="title">This is the title of a news
+           article</a></p><p class="story">Pellentesque ut sapien
+           arcu, egestas mollis massa. Fusce lectus leo, fringilla at
+           aliquet sit amet, volutpat non erat. Aenean molestie nibh
+           vitae turpis venenatis vel accumsan nunc
+           tincidunt. Pellentesque ut sapien arcu, egestas mollis
+           massa.</p>
+         </article>
+
+         <article class="even">
+           <img src="images/newspic2.jpg" alt="" class="thumb" />
+           <p>
+             <a href="#" class="title">This is another news
+             article</a></p><p class="story">Pellentesque ut sapien
+             arcu, egestas mollis massa. Fusce lectus leo, fringilla
+             at aliquet sit amet, volutpat non erat. Aenean molestie
+             nibh vitae turpis venenatis vel accumsan nunc
+             tincidunt. Pellentesque ut sapien arcu, egestas mollis
+             massa.
+           </p>
+         </article>
+
+         <article class="odd">
+           <img src="images/newspic3.jpg" alt="" class="thumb" />
+           <p>
+             <a href="#" class="title">This is a news article
+             too</a></p><p class="story">Pellentesque ut sapien arcu,
+             egestas mollis massa. Fusce lectus leo, fringilla at
+             aliquet sit amet, volutpat non erat. Aenean molestie
+             nibh vitae turpis venenatis vel accumsan nunc
+             tincidunt. Pellentesque ut sapien arcu, egestas mollis
+             massa.
+           </p>
+         </article>
+
+         <article class="even">
+           <img src="images/newspic4.jpg" alt="" class="thumb" />
+           <p>
+             <a href="#" class="title">This is an older news
+             article</a></p><p class="story">Pellentesque ut sapien
+             arcu, egestas mollis massa. Fusce lectus leo, fringilla
+             at aliquet sit amet, volutpat non erat. Aenean molestie
+             nibh vitae turpis venenatis vel accumsan nunc
+             tincidunt. Pellentesque ut sapien arcu, egestas mollis
+             massa.
+           </p>
+         </article>
+
+         <article class="odd">
+           <img src="images/newspic5.jpg" alt="" class="thumb" />
+           <p>
+             <a href="#" class="title">This is the last news
+             article</a></p><p class="story">Pellentesque ut sapien
+             arcu, egestas mollis massa. Fusce lectus leo, fringilla
+             at aliquet sit amet, volutpat non erat. Aenean molestie
+             nibh vitae turpis venenatis vel accumsan nunc
+             tincidunt. Pellentesque ut sapien arcu, egestas mollis
+             massa.
+           </p>
+         </article>
+
+       </section><!-- end of #content -->
+
+       <aside id="sidebar"><!-- sidebar -->
+
+         <div class="tabwidget">
+           <ul class="tabs">
+             <li><a href="#tab1">Recent</a></li>
+             <li><a href="#tab2">Popular</a></li>
+             <li><a href="#tab3">About Me</a></li>
+           </ul>
+           <div class="tab_container">
+             <div id="tab1" class="tab_content">
+               <h3>Recent Articles</h3>
+               <ul>
+                 <li><a href="#">Interesting Recent Link 1</a></li>
+                 <li><a href="#">Interesting Recent Link 2</a></li>
+                 <li><a href="#">Interesting Recent Link 3</a></li>
+                 <li><a href="#">Interesting Recent Link 4</a></li>
+                 <li><a href="#">Interesting Recent Link 5</a></li>
+                 <li><a href="#">Interesting Recent Link 6</a></li>
+                 <li><a href="#">Interesting Recent Link 7</a></li>
+               </ul>
+             </div>
+             <div id="tab2" class="tab_content">
+               <h3>Our Most Popular</h3>
+               <ul>
+                 <li><a href="#">Most Popular Link 1</a></li>
+                 <li><a href="#">Most Popular Link 2</a></li>
+                 <li><a href="#">Most Popular Link 3</a></li>
+                 <li><a href="#">Most Popular Link 4</a></li>
                </ul>
-             </div> 
-             <div id="tab3" class="tab_content"> 
-                 <h3>Who I Am</h3> 
-                 <img src="images/me.png" alt="" /><p>Lorem ipsum in libris debitis facilis qui, in usu esse falli deseruisse. Vel ut vivendo sensibus partiendo, liber philosophia ne vim. Viris oblique explicari has et. Nam noster iisque discere te, sale doming delectus est te, an debet quando eruditi pro. Ad dicant praesent persequeris has, ne vel minimum petentium periculis.</p>
-             </div>
-            </div>
-           </div>
-           
-            <div class="standard">
-               <h3>Things To Do</h3>
-                                       <ul>
-                                               <li><a href="#">Create</a></li>
-                                               <li><a href="#">Have Fun</a></li>
-                                               <li><a href="#">Share With Friends</a></li>
-                                               <li><a href="#">Play Games</a></li>
-                                               <li><a href="#">Upload</a></li>
-                                               <li><a href="#">Download</a></li>
-                                       </ul>
-
-                                       
-                               <h3>Sponsors</h3>
-                                       <img src="images/ad180.png" alt="" /><br /><br />
-
-                               <h3>Connect With Us</h3>
-                                       <ul>
-                                               <li><a href="#">Twitter</a></li>
-                                               <li><a href="#">Facebook</a></li>
-                                               <li><a href="#">LinkedIn</a></li>
-                                               <li><a href="#">Flickr</a></li>
-                                       </ul>
-                       </div>
-
-               </aside><!-- end of sidebar -->
-
-       </section><!-- end of #main content and sidebar-->
-       
-               <footer>
-               <section id="footer-area">
-
-                       <section id="footer-outer-block">
-                                       <aside class="footer-segment">
-                                                       <h4>Friends</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #first footer segment -->
-
-                                       <aside class="footer-segment">
-                                                       <h4>Awesome Stuff</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #second footer segment -->
-
-                                       <aside class="footer-segment">
-                                                       <h4>Coolness</h4>
-                                                               <ul>
-                                                                       <li><a href="#">one linkylink</a></li>
-                                                                       <li><a href="#">two linkylinks</a></li>
-                                                                       <li><a href="#">three linkylinks</a></li>
-                                                               </ul>
-                                       </aside><!-- end of #third footer segment -->
-                                       
-                                       <aside class="footer-segment">
-                                                       <h4>Blahdyblah</h4>
-                                                               <p>&copy; 2010 <a href="#">yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
-                                       </aside><!-- end of #fourth footer segment -->
-
-                       </section><!-- end of footer-outer-block -->
-
-               </section><!-- end of footer-area -->
-       </footer>
-       
-</div><!-- #wrapper -->
-<!-- Free template created by http://freehtml5templates.com -->
-</body>
+             </div>
+             <div id="tab3" class="tab_content">
+               <h3>Who I Am</h3> <img src="images/me.png" alt=""
+               /><p>Lorem ipsum in libris debitis facilis qui, in usu
+               esse falli deseruisse. Vel ut vivendo sensibus
+               partiendo, liber philosophia ne vim. Viris oblique
+               explicari has et. Nam noster iisque discere te, sale
+               doming delectus est te, an debet quando eruditi
+               pro. Ad dicant praesent persequeris has, ne vel
+               minimum petentium periculis.</p>
+             </div>
+           </div>
+         </div>
+
+         <div class="standard">
+           <h3>Things To Do</h3>
+           <ul>
+             <li><a href="#">Create</a></li>
+             <li><a href="#">Have Fun</a></li>
+             <li><a href="#">Share With Friends</a></li>
+             <li><a href="#">Play Games</a></li>
+             <li><a href="#">Upload</a></li>
+             <li><a href="#">Download</a></li>
+           </ul>
+
+
+           <h3>Sponsors</h3>
+           <img src="images/ad180.png" alt="" /><br /><br />
+
+           <h3>Connect With Us</h3>
+           <ul>
+             <li><a href="#">Twitter</a></li>
+             <li><a href="#">Facebook</a></li>
+             <li><a href="#">LinkedIn</a></li>
+             <li><a href="#">Flickr</a></li>
+           </ul>
+         </div>
+
+       </aside><!-- end of sidebar -->
+
+      </section><!-- end of #main content and sidebar-->
+
+      <footer>
+       <section id="footer-area">
+
+         <section id="footer-outer-block">
+           <aside class="footer-segment">
+             <h4>Friends</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #first footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Awesome Stuff</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #second footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Coolness</h4>
+             <ul>
+               <li><a href="#">one linkylink</a></li>
+               <li><a href="#">two linkylinks</a></li>
+               <li><a href="#">three linkylinks</a></li>
+             </ul>
+           </aside><!-- end of #third footer segment -->
+
+           <aside class="footer-segment">
+             <h4>Blahdyblah</h4>
+             <p>© 2010 <a href="#">yoursite.com</a> Praesent
+             libero. Sed cursus ante dapibus diam. Sed nisi.</p>
+           </aside><!-- end of #fourth footer segment -->
+
+         </section><!-- end of footer-outer-block -->
+
+       </section><!-- end of footer-area -->
+      </footer>
+
+    </div><!-- #wrapper -->
+    <!-- Free template created by http://freehtml5templates.com -->
+  </body>
 </html>