Templates cleanup, remove non-XHTML code

Much better flexibility in scaling, although some elements are fixed to pixels (image sizes, borders)

5 files changed, 342 insertions, 413 deletions

diff --git a/sample/src/setup.xml b/sample/src/setup.xml
index ca2c338..7b8c6b0 100644
--- a/sample/src/setup.xml
+++ b/sample/src/setup.xml
@@ -72,9 +72,9 @@ And the second line.</add_copyright>
   </navigation>
 
   <footer><![CDATA[
-  <div class="footer">So this is footer, suitable place for copyright, W3C validation links and advertisement! | 
-    Generated with <a href="http://cgg.bzatek.net/" title="Cataract Gallery Generator" class="footermail">Cataract Gallery Generator</a>.
-  </div>
+    So this is footer, suitable place for copyright, W3C validation links and advertisement! | 
+    Generated with <a href="http://cgg.bzatek.net/" title="Cataract Gallery Generator">Cataract Gallery Generator</a>. |
+    <a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Strict">XHTML 1.0 Strict</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="(in-)valid CSS 2.1">Invalid CSS 2.1</a>
   ]]></footer>
 
 </gallery_setup>
diff --git a/templates/styles.css b/templates/styles.css
index 052b658..6d14e38 100644
--- a/templates/styles.css
+++ b/templates/styles.css
@@ -1,9 +1,9 @@
+/******   GENERAL   ******/
 body {
    margin: 0px;
    font-family: "DejaVu Sans", "Bitstream Vera Sans", "Verdana", sans-serif;
    font-size: 12px;
    color: #EEEEEC;  
-/*   background: #343D42;  */
    background: #43484A;
 }
 
@@ -23,380 +23,317 @@ a:hover {
    color: #A3BED4;
 }
 
-div.navigation {
-    position: fixed;
-    top: 0px;
-    background-color: #606466;
-    width: 100%;
-    padding-top: 0.4em;
-    padding-bottom: 0.4em;
-    font-size: 1.1em;
-    border-top: 0.8em solid #43484A;
-    border-bottom: 0.1em dotted #80878A;
-    height: 1.4em;
-    overflow: hidden;
+div.master_content {
+   overflow: auto; 
+   position: absolute; 
+   top: 3.4em; 
+   bottom: 1.8em;
+   width: 100%;
 }
 
-.navigation tr td:first-child {
-	padding-left: 15px;
+/******   NAVIGATION   ******/
+div.navigation {
+   position: fixed;
+   top: 0px;
+   overflow: hidden;
+   background-color: #606466;
+   width: 100%;
+   padding: 0.4em 0em 0.4em 0em;
+   font-size: 110%;
+   border-top: 0.8em solid #43484A;
+   border-bottom: 0.1em dotted #80878A;
+   height: 1.4em;
+   text-align: center;
+   display: block;
+   color: #EEEEEC;
 }
 
-.navigation tr td:last-child {
-	padding-right: 20px;
+div.navlinks {
+   padding-left: 1.2em;
+   float: left;
 }
 
-div.desc {
-    margin-left: 15px;
-    margin-top: 20px;
-    margin-bottom: 40px;
-    font-size: 21px;
-    font-weight: bold;
-    color: #EEEEEC;
+div.navexif {
+   color: #AAAAAA;
 }
 
-div.desc_date {
-    font-size: 11px;
-    font-weight: normal;
-    color: #D0D0D0;
+div.navposition {
+   padding-right: 1.2em;
+   float: right;
 }
 
-div.desc_text {
-    margin-top: 5px;
-    margin-left: 10px;
-    margin-right: 40px;
-    font-size: 12px;
-    font-weight: normal;
-    line-height: 140%;
-    color: #D0D0D0;
+.navposnumber {
+   font-weight: bold;
 }
 
-div.footer {
-    text-align: center;
-    background-color: #4F5659;
-    width: 100%;
-    padding: 0.2em;
-    font-size: 0.9em;
-    font-family: "Trebuchet MS", "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
-    color: #9A9C97;
-    border-top: 0.1em dotted #7C8285;
-    position: fixed;
-    bottom: 0px;
-    height: 1.5em;
-    overflow: hidden;
+.navposspacer {
+   padding: 1em;
 }
 
-div.master_content {
-    overflow: auto; 
-    position: absolute; 
-    top: 3.4em; 
-    bottom: 1.8em;
-    width: 100%;
+
+/******   FOOTER   ******/
+div.footer {
+   position: fixed;
+   bottom: 0px;
+   overflow: hidden;
+   text-align: center;
+   background-color: #4F5659;
+   width: 100%;
+   padding: 0.2em;
+   font-size: 90%;
+   font-family: "Trebuchet MS", "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
+   color: #9A9C97;
+   border-top: 0.1em dotted #7C8285;
+   height: 1.5em;
+   display: block;
 }
 
-a.footermail {
+div.footer a {
    color: #B1B3AD;
    text-decoration: none;
 }
 
-a.footermail:hover {
+div.footer a:hover {
    color: #C5C7C0;
    text-decoration: underline;
 }
 
-div#img_preview {
-   text-align: center;
+
+/******   DESCRIPTION   ******/
+div.description {
+   margin: 1.5em 1.25em 3.2em 1.25em;
+   color: #D0D0D0;
 }
 
-div.exif {
-    margin-left: 15px;
-    margin-top: 30px;
-    margin-bottom: 40px;
-    font-size: 12px;
-    color: #EEEEEC;
+div.desc_title {
+   font-size: 175%;
+   font-weight: bold;
+   color: #EEEEEC;
 }
 
-.exif tr td:first-child {
-	color: #babdb6;
+div.desc_text {
+   margin: 0.4em 3em 0em 0.8em;
+   line-height: 140%;
 }
 
-.exif td + td {
-	text-align: left;
-	padding-left: 2px;
+div.desc_go_up {
+   font-size: 80%;
+   margin-bottom: 3em;
 }
 
-.exif table {
-  padding-left: 30px;
-  padding-top: 10px;
-  font-size: 9px;
-	
+div.desc_go_up a {
+   text-decoration: none;
+   border-bottom: 0.1em solid;
 }
 
-a.exif_line_a {
+div.desc_go_up a:hover {
+   color: #C5C7C0;
+   border-bottom: 0.1em dotted;
+}
+
+
+/******   PREVIEW IMAGE (big)   ******/
+div.img_preview {
+   text-align: center;
+   padding-bottom: 0.75em;
+}
+div.img_preview_full {
+   padding-top: 0.75em;
+}
+
+
+/******   EXIF TABLE   ******/
+div.exif {
+   margin: 2.5em 0 0 1.25em;
+   color: #EEEEEC;
+}
+
+div.exif a {
 /*   color: #B1B3AD;  */
    text-decoration: none;
    font-weight: bold;
-   border-bottom: 1px solid;
+   border-bottom: 0.1em solid;
 }
 
-a.exif_line_a:hover {
+div.exif a:hover {
    color: #C5C7C0;
-   border-bottom: 1px dotted;
+   border-bottom: 0.1em dotted;
 }
 
+div.exif table {
+   padding: 1em 0 0 2.6em;
+   font-size: 80%;
+}
 
+div.exif tr td:first-child {
+   color: #BABDB6;
+   text-align: right;
+   font-weight: normal;
+}
 
-
-div.bigthumbnails {
-   text-align: left;
-   padding-left: 20px;
-   padding-right: 20px;
-   margin-bottom: 50px;	
-   color: #babdb6;
-   font-size: 11px;
+div.exif td {
+   padding-left: 0.2em;
+   font-weight: bold;
 }
 
 
-div.bigthumbnails table {
-   float: left;
-   text-align: center;
-/*   text-decoration: none;   */
-   font-size: 11px;
-   border: 0px;
+/******   ALBUM THUMBNAILS   ******/
+div.album_thumbs {
+   text-align: left;
+   padding: 0 1.7em 0 1.7em;
+   font-size: 90%;
 }
 
-div.one_thumbnail {
+a.album_item {
+   position: relative;   /*  CSS positioning sucks  */
    float: left;
+   width: 19em;
+   height: 20.5em;
    text-align: center;
-   width: 215px;
-   height: 232px;
-}
-
-div.bigthumbnails a {
-   position: relative;
-/*   display: block;  */
-   float: left;
-   width: 205px;
-   height: 220px;
-/*   text-align: center;   */
    text-decoration: none;
+   border-radius: 0.5em;
+   -moz-border-radius: 0.5em;
+   -webkit-border-radius: 0.5em;
    background-color: #232729;
-   margin: 1px;     /*  Needs to be changed below in div.bigthumbnails a:hover */
-   border: 1px solid #6b6c69;
-   -moz-border-radius: 6px;
-   -webkit-border-radius: 6px;
+   margin: 4px;     /*  Needs to be changed below in a.album_item:hover */
+   border: 1px solid #6b6c69;  /*  Cannot use em units here otherwise the box will become jumpy  */
 }
 
-div.bigthumbnails a:hover {
+a.album_item:hover {
    background-color: #32332F;
-   margin: 0px;    /*  div.bigthumbnails a->margin - 1px  */ 
+   margin: 3px;    /*  a.album_item->margin - 1px  */ 
    border: 2px solid #A3BED4;
 }
 
-div.bigthumbnails img {
-	/* landscape */
-   padding-top: 25px;
-   padding-bottom: 30px;
+a.album_item img {
+   /* landscape */
+   padding-top: 2.25em;
 }
 
-div.bigthumbnails img.portrait {
-	 /* portrait */
-   padding-top: 10px;
-   padding-bottom: 4px;
+a.album_item img.portrait {
+   /* portrait */
+   padding-top: 1em;
 }
 
-.thumb_name {
+.album_thumb_text {
+   /*  CSS positioning sucks^2  */ 
    position: absolute;
-   bottom: 10px;
-   left: 65px;
+   bottom: 0.8em;
+   left: 5.7em;
 }
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-div.thumbnail_text {
-   padding-top: 3px;	
-}
-
-.thumbnail_text {
-   padding-top: 3px;	
-   font-size: 12px;
+/******   ALBUM/INDEX SEPARATORS   ******/
+div.separators {
+   float: left;
+   clear: both;
+   width: 100%;
+   text-align: left;
+   font-variant: small-caps;
+   font-family: "Trebuchet MS", "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
+   color: #C0C0C0;
 }
 
-a#thumbnail_text_a {
-/*   color: #B1B3AD;  */
-   text-decoration: none;
-   font-weight: bold;
-   border-bottom: 1px solid;
+div.album_list_separator {
+   margin: 2.2em 0 0.65em 0;
+   font-size: 320%;
+   letter-spacing: 0.055em;
+   border-bottom: 0.04em solid #606060;
 }
 
-a#thumbnail_text_a:hover {
-   color: #C5C7C0;
-   border-bottom: 1px dotted;
+div.index_separator {
+   margin: 1.9em 0 0.6em 0;
+   font-size: 260%;
+   letter-spacing: 0.035em;
+   border-bottom: 0.05em solid #606060;
 }
 
 
+/******   FOOTNOTE   ******/
+div.footnote {
+   padding: 1em 1.25em 3.2em 1.25em;
+   color: #D0D0D0;
+   clear: both;
+}
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-div.albumlist {
+/******   INDEX THUMBNAILS   ******/
+div.index_thumbs {
    text-align: left;
-   padding-left: 20px;
-   padding-right: 20px;
-   margin-bottom: 50px;	
+   padding: 0 1.7em 0 1.7em;
+   font-size: 90%;
 }
 
-div.one_album {
+a.index_item {
+   position: relative;   /*  CSS positioning sucks  */
    float: left;
-   width: 600px;
-   height: 230px;
-}
-
-div.albumlist a {
-   position: relative;
-   display: block;
-   float: left;
-   width: 580px;
-   height: 210px;
+   width: 53em;
+   height: 19.5em;
+   text-align: left;
    text-decoration: none;
+   border-radius: 0.5em;
+   -moz-border-radius: 0.5em;
+   -webkit-border-radius: 0.5em;
    background-color: #232729;
-   margin: 1px;     /*  Needs to be changed below in div.bigthumbnails a:hover */
-   border: 1px solid #6b6c69;
-   color: #babdb6;
-   -moz-border-radius: 4px;
-   -webkit-border-radius: 4px;
-}
-
-div.albumlist img {
-    /* landscape */
-   position: absolute;
-   left: 15px;
-   top: 15px;
+   margin: 9px;     /*  Needs to be changed below in a.index_item:hover */
+   border: 1px solid #6b6c69;  /*  Cannot use em units here otherwise the box will become jumpy  */
+   color: #BABDB6;
 }
 
-div.albumlist a:hover {
+a.index_item:hover {
    background-color: #32332F;
-   margin: 0px;    /*  div.bigthumbnails a->margin - 1px  */ 
+   margin: 8px;    /*  a.index_item->margin - 1px  */ 
    border: 2px solid #A3BED4;
    color: #A3BED4;
 }
 
-.album_text {
-   font-size: 20px;
-   font-weight: bold;
-   position: relative;
-   left: 215px;
-   top: 15px;
+a.index_item img {
+   position: absolute;
+   left: 1.4em;
+   top: 1.4em;
 }
 
-.album_subtext {
-   font-size: 16px;
-   font-weight: normal;
+.album_text {
+   font-size: 190%;
+   font-weight: bold;
    position: relative;
-   left: 215px;
-   top: 15px;
-}
-
-.album_note {
-   font-size: 11px;
-   font-weight: normal;
-   position: absolute;
-   right: 25px;
-   bottom: 20px;
+   left: 10.3em;
+/*   padding-right: 10.5em;  disabled --  word wrap  */
+   top: 0.65em;
 }
 
 .album_text_portrait {
-   font-size: 20px;
+   font-size: 190%;
    font-weight: bold;
    position: relative;
-   left: 155px;
-   top: 15px;
+   left: 7.5em;
+/*   padding-right: 7.7em;  disabled --  word wrap  */
+   top: 0.65em;
 }
-
-.album_subtext_portrait {
-   font-size: 16px;
-   font-weight: normal;
+.album_subtext {
+   font-size: 150%;
    position: relative;
-   left: 155px;
-   top: 15px;
+   left: 13.1em;
+/*   padding-right: 13.4em;  disabled --  word wrap  */
+   top: 2.5em;
 }
 
-
-
-div.contentx {
-	height: 200px;
-	width: 300px;
-	overflow: auto;
-	border: 1px solid #666;
-	background-color: #ccc;
-	padding: 8px;
-
-}
-
-
-/*
- *  Separators
- */
-div.separators {
-    position: relative; 
-    display: block; 
-    float: left; 
-    width: 100%;
-    text-align: left;
-    font-variant: small-caps;
-    font-family: "Trebuchet MS", "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
-    color: #C0C0C0;
-}
-
-div.album_list_separator {
-    margin: 70px 0px 30px 0px;
-    font-size: 35px;
-    letter-spacing: 2px;
-    border-bottom: 1px solid #606060;
+.album_subtext_portrait {
+   font-size: 150%;
+   position: relative;
+   left: 9.5em;
+/*   padding-right: 9.8em;  disabled --  word wrap  */
+   top: 2.5em;
 }
 
-div.index_separator {
-    margin: 50px 0px 20px 0px;
-    font-size: 28px;
-    letter-spacing: 1px;
-    border-bottom: 1px solid #606060;
+.album_note {
+   position: absolute;
+   right: 2.3em;
+   bottom: 1.9em;
 }
 
 
-
-/*
- *  Image border styles
- */
+/******   IMAGE BORDER STYLES   ******/
 img#border_single {
    background-color: #6b6c69;
    padding: 1px;
diff --git a/templates/template-album.tmpl b/templates/template-album.tmpl
index 355c290..0e5eec3 100644
--- a/templates/template-album.tmpl
+++ b/templates/template-album.tmpl
@@ -13,66 +13,56 @@
 
 <!--  ##  Navigation bar  -->
 <div class="navigation">
-<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td>
-  <!-- $(NAV_BAR) -->
-</td>
-<td align="right"><b><!-- $(TOTAL_ITEMS) --> items</b></td></tr></table>
+  <div class="navlinks"><!-- $(NAV_BAR) --></div>
+  <div class="navposition">
+    <span class="navposnumber"><!-- $(TOTAL_ITEMS) --> items</span>
+  </div>
 </div>
 
-<div class="master_content">
-
-<!--  ##  Description  -->
-<div class="desc">
-<!-- $(BEGIN_GO_UP) -->
-<div class="desc_date">:. <a href="$(GO_UP_LINK)" id="exif_line_a">Go Up</a><br /><br /><br /></div>
-<!-- $(END_GO_UP) -->
-<!-- $(TITLE) -->
-<div class="desc_text"><!-- $(DESCRIPTION) --></div>
-</div>
 
+<div class="master_content">
+  <!--  ##  Description  -->
+  <div class="description">
+    <!-- $(BEGIN_GO_UP) -->
+    <div class="desc_go_up">:. <a href="$(GO_UP_LINK)">Go Up</a></div>
+    <!-- $(END_GO_UP) -->
+    <div class="desc_title"><!-- $(TITLE) --></div>
+    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
+  </div>
 
-<!--  ##  Images  -->
-<div class="bigthumbnails">
-<!-- $(BEGIN_IMG_LIST) -->
-  <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
-    <div class="one_thumbnail" id="<!-- $(IMG_LIST_ID) -->">
-      <a href="<!-- $(IMG_SUBPAGE) -->">
-        <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" /><br />
-        <span class="thumb_name"><!-- $(IMG_FILENAME) --></span>
+  <!--  ##  Images  -->
+  <div class="album_thumbs">
+  <!-- $(BEGIN_IMG_LIST) -->
+    <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
+      <a class="album_item" href="<!-- $(IMG_SUBPAGE) -->" id="<!-- $(IMG_LIST_ID) -->">
+        <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
+        <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
       </a>
-    </div>
-  <!-- $(END_IMG_LIST_LANDSCAPE) -->
-  <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
-    <div class="one_thumbnail" id="<!-- $(IMG_LIST_ID) -->">
-      <a href="<!-- $(IMG_SUBPAGE) -->">
-        <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" class="portrait" /><br />
-        <span class="thumb_name"><!-- $(IMG_FILENAME) --></span>
+    <!-- $(END_IMG_LIST_LANDSCAPE) -->
+    <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
+      <a class="album_item" href="<!-- $(IMG_SUBPAGE) -->" id="<!-- $(IMG_LIST_ID) -->">
+        <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" class="portrait" />
+        <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
       </a>
-    </div>
-  <!-- $(END_IMG_LIST_PORTRAIT) -->
-  <!-- $(BEGIN_LIST_SEPARATOR) -->
-    <div class="separators">
-      <div class="index_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
-    </div>
-  <!-- $(END_LIST_SEPARATOR) -->
-<!-- $(END_IMG_LIST) -->
-</div>
-
-
-<!-- Dirty hack to add free space at the bottom of the page -->
-<div style="display: block; float: left; height: 240px;"></div>
-
-
-<!--  ##  Footnote  -->
-<div class="desc" style="clear: both;">
-<div class="desc_text"><!-- $(FOOTNOTE) --></div>
-</div>
+    <!-- $(END_IMG_LIST_PORTRAIT) -->
+    <!-- $(BEGIN_LIST_SEPARATOR) -->
+      <div class="separators">
+        <div class="index_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
+      </div>
+    <!-- $(END_LIST_SEPARATOR) -->
+  <!-- $(END_IMG_LIST) -->
+  </div>
 
+  <!--  ##  Footnote, also acts as a bottom border  -->
+  <div class="footnote">
+    <div class="desc_text"><!-- $(FOOTNOTE) --></div>
+  </div>
 </div> <!-- end of master_content -->
 
-<!--  ##  Footer  -->
-<!-- $(FOOTER) -->
 
+<!--  ##  Footer  -->
+<div class="footer"><!-- $(FOOTER) --></div>
 
 </body>
 </html>
+
diff --git a/templates/template-index.tmpl b/templates/template-index.tmpl
index f335014..0545fe2 100644
--- a/templates/template-index.tmpl
+++ b/templates/template-index.tmpl
@@ -13,64 +13,60 @@
 
 <!--  ##  Navigation bar  -->
 <div class="navigation">
-<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td>
-  <!-- $(NAV_BAR) -->
-</td>
-<td align="right"><b><!-- $(TOTAL_ITEMS) --> albums</b></td></tr></table>
+  <div class="navlinks"><!-- $(NAV_BAR) --></div>
+  <div class="navposition">
+    <span class="navposnumber"><!-- $(TOTAL_ITEMS) --> albums</span>
+  </div>
 </div>
 
+
 <div class="master_content">
+  <!--  ##  Description  -->
+  <div class="description">
+    <!-- $(BEGIN_GO_UP) -->
+    <div class="desc_go_up">:. <a href="$(GO_UP_LINK)">Go Up</a></div>
+    <!-- $(END_GO_UP) -->
+    <div class="desc_title"><!-- $(TITLE) --></div>
+    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
+  </div>
 
-<!--  ##  Description  -->
-<div class="desc">
-<!-- $(BEGIN_GO_UP) -->
-<div class="desc_date">:. <a href="$(GO_UP_LINK)" id="exif_line_a">Go Up</a><br /><br /><br /></div>
-<!-- $(END_GO_UP) -->
-<!-- $(TITLE) -->
-<div class="desc_text"><!-- $(DESCRIPTION) --></div>
-</div>
+  <!--  ##  Albums  -->
+  <div class="index_thumbs">
+  <!-- $(BEGIN_IMG_LIST) -->
+    <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
+      <a class="index_item" href="<!-- $(ALBUM_SUBPATH) -->" id="<!-- $(IMG_LIST_ID) -->">
+         <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
+         <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
+         <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span>
+         <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
+      </a>
+    <!-- $(END_IMG_LIST_LANDSCAPE) -->
+    <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
+      <a class="index_item" href="<!-- $(ALBUM_SUBPATH) -->" id="<!-- $(IMG_LIST_ID) -->">
+         <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
+         <span class="album_text_portrait"><!-- $(IMG_TITLE) --></span><br />
+         <span class="album_subtext_portrait"><!-- $(IMG_DESCRIPTION) --></span>
+         <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
+      </a>
+    <!-- $(END_IMG_LIST_PORTRAIT) -->
+    <!-- $(BEGIN_LIST_SEPARATOR) -->
+      <div class="separators">
+        <div class="album_list_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
+      </div>
+    <!-- $(END_LIST_SEPARATOR) -->
+  <!-- $(END_IMG_LIST) -->
+  </div>
 
+  <!--  ##  Footnote, also acts as a bottom border  -->
+  <div class="footnote">
+    <div class="desc_text"><!-- $(FOOTNOTE) --></div>
+  </div>
+</div> <!-- end of master_content -->
 
-<!--  ##  Albums  -->
-<div class="albumlist">
-<!-- $(BEGIN_IMG_LIST) -->
-  <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
-   <div class="one_album" id="<!-- $(IMG_LIST_ID) -->">
-     <a href="<!-- $(ALBUM_SUBPATH) -->">
-       <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
-       <span class="album_text"><!-- $(IMG_TITLE) --></span><br /><br /><br />
-       <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span><br /><br />
-       <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
-     </a>
-   </div>
-  <!-- $(END_IMG_LIST_LANDSCAPE) -->
-  <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
-   <div class="one_album" id="<!-- $(IMG_LIST_ID) -->">
-     <a href="<!-- $(ALBUM_SUBPATH) -->">
-       <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
-       <span class="album_text_portrait"><!-- $(IMG_TITLE) --></span><br /><br /><br />
-       <span class="album_subtext_portrait"><!-- $(IMG_DESCRIPTION) --></span><br /><br />
-       <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
-     </a>
-   </div>
-  <!-- $(END_IMG_LIST_PORTRAIT) -->
-  <!-- $(BEGIN_LIST_SEPARATOR) -->
-   <div class="separators">
-     <div class="album_list_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
-   </div>
-  <!-- $(END_LIST_SEPARATOR) -->
-<!-- $(END_IMG_LIST) -->
-</div>
 
-<!--  ##  Footnote  -->
-<div class="desc" style="clear: both;">
-<div class="desc_text"><!-- $(FOOTNOTE) --></div>
-</div>
-
-</div> <!-- end of master_content -->
 <!--  ##  Footer  -->
-<!-- $(FOOTER) -->
-
+<div class="footer"><!-- $(FOOTER) --></div>
 
 </body>
 </html>
+
diff --git a/templates/template-view_photo.tmpl b/templates/template-view_photo.tmpl
index 8de829d..7679a26 100644
--- a/templates/template-view_photo.tmpl
+++ b/templates/template-view_photo.tmpl
@@ -13,56 +13,62 @@
 
 <!--  ##  Navigation bar  -->
 <div class="navigation">
-<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td>
-  <!-- $(NAV_BAR) -->
-</td>
-<td align="center" style="color: #AAAAAA;">ISO <!-- $(EXIF_ISO) --> :: <!-- $(EXIF_TIME) --> :: <!-- $(EXIF_APERTURE) --> :: <!-- $(EXIF_FOCAL_LENGTH) --></td>
-<td align="right"><b><!-- $(FILE_NO) --></b> of <b><!-- $(TOTAL_ITEMS) --></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-  <a href="<!-- $(LINK_PREV) -->">&lt; Previous</a> :: <a href="<!-- $(LINK_NEXT) -->">Next &gt;</a> 
-</td></tr></table>
+  <div class="navlinks"><!-- $(NAV_BAR) --></div>
+  <div class="navposition">
+    <span class="navposnumber"><!-- $(FILE_NO) --></span> of <span class="navposnumber"><!-- $(TOTAL_ITEMS) --></span>
+    <span class="navposspacer"></span>
+    <a href="<!-- $(LINK_PREV) -->">&lt; Previous</a> :: <a href="<!-- $(LINK_NEXT) -->">Next &gt;</a>
+  </div>
+  <div class="navexif">ISO <!-- $(EXIF_ISO) --> :: <!-- $(EXIF_TIME) --> :: <!-- $(EXIF_APERTURE) --> :: <!-- $(EXIF_FOCAL_LENGTH) --></div>
 </div>
 
+
 <div class="master_content">
+  <!--  ##  Description  -->
+  <div class="description">
+    <div class="desc_title"><!-- $(TITLE) --></div>
+    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
+  </div>
 
-<div class="content">
-<!--  ##  Description  -->
-<div class="desc"><!-- $(TITLE) -->
-<div class="desc_text"><!-- $(DESCRIPTION) --></div>
-</div>
+  <!--  ##  Image  -->
+  <div class="img_preview">
+    <a href="<!-- $(LINK_NEXT) -->"><img src="<!-- $(IMG_SRC_BIG) -->" width="<!-- $(IMG_SIZE_BIG_W) -->" height="<!-- $(IMG_SIZE_BIG_H) -->" alt="" id="<!-- $(IMG_BORDER_STYLE) -->" /></a>
+    <!-- $(BEGIN_IMG_FULLSIZE_LINK) -->
+    <div class="img_preview_full">
+      <a href="<!-- $(IMG_SRC_FULL) -->">See original size (<!-- $(IMG_SIZE_ORIG_W) -->x<!-- $(IMG_SIZE_ORIG_H) -->)</a>
+    </div>  
+    <!-- $(END_IMG_FULLSIZE_LINK) -->
+  </div>
 
+  <!--  ##  EXIF  -->
+  <div class="exif">
+    <div id="exif_table" style="display: none;">
+      :: <a href="javascript: set_exif_table_visibility('no'); write_exif_table_cookie('no');">Hide EXIF</a>
+      <table><tbody>
+        <tr><td>Date: </td>            <td><!-- $(EXIF_DATE) --></td></tr>
+        <tr><td>Camera: </td>          <td><!-- $(EXIF_CAMERA_MODEL) --></td></tr>
+        <tr><td>ISO: </td>             <td><!-- $(EXIF_ISO) --></td></tr>
+        <tr><td>Focal length: </td>    <td><!-- $(EXIF_FOCAL_LENGTH) --></td></tr>
+        <tr><td>Aperture value: </td>  <td><!-- $(EXIF_APERTURE) --></td></tr>
+        <tr><td>Exposure time: </td>   <td><!-- $(EXIF_TIME) --></td></tr>
+        <tr><td>Flash: </td>           <td><!-- $(EXIF_FLASH) --></td></tr>
+      </tbody></table>
+    </div>
+    <div id="exif_line" style="display: block;">
+      :: <a href="javascript: set_exif_table_visibility('yes'); write_exif_table_cookie('yes');">Show EXIF</a>
+    </div>
+  </div>  
 
-<!--  ##  Image  -->
-<div id="img_preview">
-  <a href="<!-- $(LINK_NEXT) -->" id="img_preview_a"><img src="<!-- $(IMG_SRC_BIG) -->" width="<!-- $(IMG_SIZE_BIG_W) -->" height="<!-- $(IMG_SIZE_BIG_H) -->" alt="" id="<!-- $(IMG_BORDER_STYLE) -->" /></a>
-  <br /><br />
-  <!-- $(BEGIN_IMG_FULLSIZE_LINK) -->
-    <a href="<!-- $(IMG_SRC_FULL) -->">See original size (<!-- $(IMG_SIZE_ORIG_W) -->x<!-- $(IMG_SIZE_ORIG_H) -->)</a>
-  <!-- $(END_IMG_FULLSIZE_LINK) -->
-</div>
+  <!--  ##  Footnote, also acts as a bottom border  -->
+  <div class="footnote">
+    <div class="desc_text"><!-- $(FOOTNOTE) --></div>
+  </div>
+</div> <!-- end of master_content -->
 
 
-<!--  ##  EXIF  -->
-<div id="exif_table" style="display: none;" class="exif">
-:: <a href="javascript: set_exif_table_visibility('no'); write_exif_table_cookie('no');" class="exif_line_a">Hide EXIF</a>
-<table class="exif">
-<tbody><tr><td align="right">Date: </td><td><b><!-- $(EXIF_DATE) --></b></td></tr>
-<tr><td align="right">Camera: </td><td><b><!-- $(EXIF_CAMERA_MODEL) --></b></td></tr>
-<tr><td align="right">ISO: </td><td><b><!-- $(EXIF_ISO) --></b></td></tr>
-<tr><td align="right">Focal length: </td><td><b><!-- $(EXIF_FOCAL_LENGTH) --></b></td></tr>
-<tr><td align="right">Aperture value: </td><td><b><!-- $(EXIF_APERTURE) --></b></td></tr>
-<tr><td align="right">Exposure time: </td><td><b><!-- $(EXIF_TIME) --></b></td></tr>
-<tr><td align="right">Flash: </td><td><b><!-- $(EXIF_FLASH) --></b></td></tr>
-</tbody></table>
-</div>
-<div style="display: block;" id="exif_line" class="exif">
-:: <a href="javascript: set_exif_table_visibility('yes'); write_exif_table_cookie('yes');" class="exif_line_a">Show EXIF</a>
-</div>
-</div>
-
-</div> <!-- end of master_content -->
 <!--  ##  Footer  -->
-<!-- $(FOOTER) -->
-
+<div class="footer"><!-- $(FOOTER) --></div>
 
 </body>
 </html>
+