Templates cleanup, remove non-XHTML code

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

1 files changed, 206 insertions, 269 deletions

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;