New 'fluid' theme

Introducing a modern looking theme that changes gallery philosophy a bit.
Instead of having thumbnails on an album page and photos on separate pages
this new design brings emphasis on story telling. Viewer is advised to
go through the whole album sequentially, bringing atmosphere to the whole
set.

All photos are loaded within a single page and keyboard navigation via
left/right arrows is supposed to be used to switch the presentation
mode on.

Three photo sizes are supported now with the 'preview' size being the
default. High resolution size has been introduced for 2560x1440 screens
and larger.

Note that this template uses code from 3rd parties, see CREDITS for
details. I haven't been able to contact anyone behind the TheCodePlayer.com
project so licensing of the breadcrumbs might be an issue.

11 files changed, 1442 insertions, 1 deletions

diff --git a/templates/Makefile.am b/templates/Makefile.am
index 150d7e2..2b03c64 100644
--- a/templates/Makefile.am
+++ b/templates/Makefile.am
@@ -1,3 +1,3 @@
 NULL =
 
-SUBDIRS = classic
+SUBDIRS = classic fluid
diff --git a/templates/fluid/CREDITS b/templates/fluid/CREDITS
new file mode 100644
index 0000000..316224e
--- /dev/null
+++ b/templates/fluid/CREDITS
@@ -0,0 +1,14 @@
+This template was heavily inspired by flickriver.com and fluidr.com portals:
+  Flickriver viewer software © 2007-2016 Flickriver.com
+  Fluidr.com Copyright by Sidath Senanayake
+
+
+The CSS breadcrumb navigation is a heavily modified example from
+  http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation
+  Copyright 2014 TheCodePlayer. All Rights Reserved.
+
+
+Portions of the JavaScript code was taken from Prototype JavaScript framework:
+  Copyright (c) 2005-2008 Sam Stephenson
+  Prototype is freely distributable under the terms of an MIT-style license.
+  For details, see the Prototype web site: http://www.prototypejs.org/
diff --git a/templates/fluid/Makefile.am b/templates/fluid/Makefile.am
new file mode 100644
index 0000000..edfc559
--- /dev/null
+++ b/templates/fluid/Makefile.am
@@ -0,0 +1,15 @@
+NULL =
+
+templatesdir = $(datadir)/cgg/fluid
+
+templates_DATA =			\
+	fluid.xml			\
+	fonts.css			\
+	styles.css			\
+	scripts.js			\
+	template_album.html		\
+	template_index.html		\
+	emblems-readonly_120.png	\
+	$(NULL)
+
+EXTRA_DIST = $(templates_DATA)
diff --git a/templates/fluid/README b/templates/fluid/README
new file mode 100644
index 0000000..268a911
--- /dev/null
+++ b/templates/fluid/README
@@ -0,0 +1,18 @@
+The fluid template is an attempt to create modern-looking interactive view mode.
+It's targeted for a stream-like presentation as opposed to single picture pages.
+
+There's a strong emphasis for an album to tell a story and drive the viewer's
+attention through it till the end.
+
+
+Navigation
+----------
+
+To start the photostream mode, use <Left> or <Right> arrow keys or press
+<Space>. To quit the photostream mode, press <Esc>, <Top> or <Down> arrow keys
+or simply scroll the mouse.
+
+Special shortcuts:
+  D - toggles EXIF panel visibility for all items
+  A - toggles animations (experimental, default=off)
+  F - toggles fullscreen mode (experimental)
diff --git a/templates/fluid/emblems-readonly_120.png b/templates/fluid/emblems-readonly_120.png
new file mode 100644
index 0000000..c952c7e
--- /dev/null
+++ b/templates/fluid/emblems-readonly_120.png
diff --git a/templates/fluid/fluid.xml b/templates/fluid/fluid.xml
new file mode 100644
index 0000000..b4e528b
--- /dev/null
+++ b/templates/fluid/fluid.xml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8"?>
+<design_setup version="2.0">
+
+  <image_sizes>
+    <size name="original">
+      <landscape w="1423" h="800" />
+      <portrait w="1000" h="1000" />
+      <quality value="95" />
+      <no_resize />
+      <fallback size="preview" />
+    </size>
+
+    <size name="preview" tagname="preview">
+      <landscape w="1067" h="600" />
+      <portrait w="800" h="800" />
+      <quality value="95" />
+      <no_resize />
+    </size>
+
+    <size name="thumbnail" type="thumbnail" style="fixed">
+      <crop w="495" h="330" />
+      <quality value="70" />
+    </size>
+
+    <size name="hires">
+      <landscape w="1897" h="1067" />
+      <portrait w="1200" h="1200" />
+      <quality value="95" />
+      <no_resize />
+      <fallback size="original" />
+    </size>
+  </image_sizes>
+
+  <supplemental_files><![CDATA[
+    styles.css
+    fonts.css
+    scripts.js
+    emblems-readonly_120.png
+  ]]></supplemental_files>
+
+
+  <theme enabled="yes">
+    <index>
+      <template>template_index.html</template>
+      <target_filename>index.html</target_filename>
+      <thumbnail_size>thumbnail</thumbnail_size>
+      <protected_thumbnail>emblems-readonly_120.png</protected_thumbnail>
+    </index>
+
+    <album>
+      <template>template_album.html</template>
+      <target_filename>index.html</target_filename>
+      <picture_size>preview</picture_size>
+    </album>
+
+    <define name="THEME_SIZE_PREVIEW" />
+    <define name="BORDER_STYLE" value="border_single" />
+  </theme>
+
+  <theme enabled="yes">
+    <index>
+      <template>template_index.html</template>
+      <target_filename>index_big.html</target_filename>
+      <thumbnail_size>thumbnail</thumbnail_size>
+      <protected_thumbnail>emblems-readonly_120.png</protected_thumbnail>
+    </index>
+
+    <album>
+      <template>template_album.html</template>
+      <target_filename>index_big.html</target_filename>
+      <picture_size>original</picture_size>
+    </album>
+
+    <define name="THEME_SIZE_BIG" />
+    <define name="BORDER_STYLE" value="border_single" />
+  </theme>
+
+  <theme enabled="yes">
+    <index>
+      <template>template_index.html</template>
+      <target_filename>index_hires.html</target_filename>
+      <thumbnail_size>thumbnail</thumbnail_size>
+      <protected_thumbnail>emblems-readonly_120.png</protected_thumbnail>
+    </index>
+
+    <album>
+      <template>template_album.html</template>
+      <target_filename>index_hires.html</target_filename>
+      <picture_size>hires</picture_size>
+    </album>
+
+    <define name="THEME_SIZE_HIRES" />
+    <define name="BORDER_STYLE" value="border_single" />
+  </theme>
+
+</design_setup>
+
diff --git a/templates/fluid/fonts.css b/templates/fluid/fonts.css
new file mode 100644
index 0000000..eac5540
--- /dev/null
+++ b/templates/fluid/fonts.css
@@ -0,0 +1,3 @@
+@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
+
+@import url(http://fonts.googleapis.com/css?family=Hind:400,300,500,600,700|Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700&subset=latin,cyrillic-ext,latin-ext,cyrillic);
diff --git a/templates/fluid/scripts.js b/templates/fluid/scripts.js
new file mode 100644
index 0000000..7c9bb97
--- /dev/null
+++ b/templates/fluid/scripts.js
@@ -0,0 +1,351 @@
+
+/******************************   EXIF TABLE   *********************************/
+
+var exif_all_visible = false;
+
+function set_exif_params (table, icon, visible) {
+  if (visible) {
+    table.style.display = 'block';
+    icon.style.opacity = 1.0;
+  } else {
+    table.style.display = 'none';
+    icon.style.opacity = 0.23;
+  }
+}
+
+function toggle_exif_visibility (id) {
+  var table = document.getElementById ('exif_table-' + id);
+  var icon = document.getElementById ('exif_icon-' + id);
+  set_exif_params (table, icon, icon.style.opacity != 1.0);
+}
+
+function toggle_exif_all_visibility () {
+  exif_all_visible = !exif_all_visible;
+  for (var i = 1; table = document.getElementById ("exif_table-" + i); i++) {
+    var icon = document.getElementById ('exif_icon-' + i);
+    set_exif_params (table, icon, exif_all_visible);
+  }
+}
+
+
+/****************************   FULLSCREEN MODE   *****************************/
+
+/*  https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode  */
+/*  FIXME: scrollbar reset in Chromium 40  */
+/*  TODO: retain stream mode if active  */
+function toggleFullScreen() {
+  if (!document.fullscreenElement &&    // alternative standard method
+      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
+    if (document.documentElement.requestFullscreen) {
+      document.documentElement.requestFullscreen();
+    } else if (document.documentElement.msRequestFullscreen) {
+      document.documentElement.msRequestFullscreen();
+    } else if (document.documentElement.mozRequestFullScreen) {
+      document.documentElement.mozRequestFullScreen();
+    } else if (document.documentElement.webkitRequestFullscreen) {
+      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+    }
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen();
+    }
+  }
+}
+
+
+/******************************   PHOTOSTREAM   *******************************/
+
+/*  PHOTOSTREAM - INSTRUCTIONS:
+ *    -  photos should be embedded in <div id="photos">
+ *    -  every photo should have id="photo-XXX" where XXX is index starting with 1
+ *    -  total number of photos needs to be defined in the NUM_PHOTOS variable
+ */
+
+var current_idx = 0;   
+var photostream_mode = false;
+var scroll_timeout = 0;
+var ignore_scroll_event = false;
+
+var enable_animations = false;
+var animation_duration = 175;  /* ms */
+var animation_steps = 17;
+
+   
+   
+/*  Portions of code taken from Prototype JavaScript framework
+ *  Copyright (c) 2005-2008 Sam Stephenson
+ *  Prototype is freely distributable under the terms of an MIT-style license.
+ *  For details, see the Prototype web site: http://www.prototypejs.org/
+ */
+
+function hasClassName (element, className) {
+  var elementClassName = element.className;
+  return (elementClassName.length > 0 && (elementClassName == className ||
+          new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
+}
+
+function addClassName (element, className) {
+  if (!hasClassName(element, className))
+      element.className += (element.className ? ' ' : '') + className;
+  return element;
+}
+
+function removeClassName (element, className) {
+  element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, '');
+  return element;
+}
+
+function cumulativeOffset (element) {
+  var valueT = 0, valueL = 0;
+  do {
+    valueT += element.offsetTop  || 0;
+    valueL += element.offsetLeft || 0;
+    element = element.offsetParent;
+  } while (element);
+  return [valueL, valueT];
+}
+
+
+/*  http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js  */
+/*  http://matthewlein.com/experiments/easing.html  */
+function fadein (el) {
+  var op = 0.35;
+  var t = 0;
+  var handler = setInterval (function () {
+    if (op >= 1.0)
+      clearInterval (handler);
+    el.style.opacity = op;
+    op += 1.0 / animation_steps;
+    t += animation_duration / animation_steps;
+    var c = 1.0 / animation_steps;
+    var d = animation_duration;
+    var b = 0.0;
+//    op += c - c * Math.cos(t/d * (Math.PI/2));   /*  easeInSine  */ 
+//    op += c*(t/=d)*t + b;  /*  easeInQuad  */
+    }, animation_duration / animation_steps);
+}
+
+
+function do_show_photo (do_show, id) {
+  var elem = document.getElementById (id);
+  if (! elem)
+    return;
+
+  if (do_show) {
+    addClassName (elem, "photostream-force-show");
+    if (enable_animations) {
+      elem.style.opacity = 0.0;
+      fadein (elem);
+    } else {
+      elem.style.opacity = 1.0;
+    }
+  } else {
+    removeClassName (elem, "photostream-force-show");
+    elem.style.opacity = 1.0;
+  }
+}
+
+function start_photostream_mode () {
+  photostream_mode = true;
+
+  if (NUM_PHOTOS <= 0)
+    return;
+
+  var l = document.getElementsByClassName('photostream-hide');
+  for (var i = 0; i < l.length; i++)
+    addClassName (l[i], "photostream-force-hide");
+
+  var elem = document.getElementById ("photostream-close");
+  if (elem)
+    removeClassName (elem, "photostream-force-hide");
+
+  var elem = document.getElementById ("photostream-position-label");
+  if (elem)
+    removeClassName (elem, "photostream-force-hide");
+}
+
+function cancel_photostream_mode () {
+  if (photostream_mode) {
+    photostream_mode = false;
+    do_show_photo (false);
+
+    var l = document.getElementsByClassName('photostream-hide');
+    for (var i = 0; i < l.length; i++)
+      removeClassName (l[i], "photostream-force-hide");
+
+    var elem = document.getElementById ("photostream-close");
+    if (elem)
+      addClassName (elem, "photostream-force-hide");
+
+    var elem = document.getElementById ("photostream-position-label");
+    if (elem)
+      addClassName (elem, "photostream-force-hide");
+  }
+}
+
+function update_position_label () {
+  var elem = document.getElementById ("photostream-position-label");
+  if (elem)
+    elem.innerHTML = current_idx + " / " + NUM_PHOTOS;
+}
+
+function scroll_to_photo (elem) {
+  var window_height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
+  var off = cumulativeOffset (elem);
+
+  off[1] += (elem.offsetHeight - window_height) / 2;
+  /*  Dirty workaround to ignore subsequent onScroll events  */
+  ignore_scroll_event = true;
+  setTimeout (function () {ignore_scroll_event=false;}, 200);  
+  window.scrollTo (off[0], off[1]);
+}
+
+function set_position (inc) {
+  var idx;
+  var elem;
+
+  if (! photostream_mode)
+    start_photostream_mode ();
+
+  idx = current_idx + inc;
+  if (idx < 1)
+    idx = 1;
+  if (idx > NUM_PHOTOS)
+    idx = NUM_PHOTOS;
+
+  elem = document.getElementById ("photo-" + idx);
+  if (! elem)
+    return;
+
+  do_show_photo (false, "photo-" + current_idx);
+  do_show_photo (false, "photo-" + current_idx + "-sep");
+  do_show_photo (false, "photo-" + current_idx + "-ispc");
+
+  scroll_to_photo (elem);
+  do_show_photo (true, "photo-" + idx);
+  do_show_photo (true, "photo-" + idx + "-sep");
+  do_show_photo (true, "photo-" + idx + "-ispc");
+
+  current_idx = idx;
+  update_position_label ();
+}
+
+function check_position () {
+  var win_pos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+  var window_height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
+  var elem;
+
+  current_idx = 0;
+  for (var i = 1; elem = document.getElementById ("photo-" + i); i++) {
+    /*  Display the first photo when scrolled to the very top of the page  */
+    if (i == 1 && elem.offsetTop > win_pos + window_height / 2 - elem.clientHeight / 2 + 4) {
+      current_idx = 0;
+      break;
+    }
+    if (elem.offsetTop > win_pos + window_height / 2)
+      break;
+    current_idx = i;
+  }
+
+  /*  Update size buttons' anchors  */
+  var l = document.getElementsByClassName('size-button');
+  for (var i = 0; i < l.length; i++) {
+    l[i].href = l[i].href.replace(/(#.*)/, '');
+    if (current_idx > 0)
+      l[i].href += '#i' + current_idx;
+  }
+  update_position_label ();
+}
+
+function schedule_check_position () {
+  clearTimeout (scroll_timeout);
+  scroll_timeout = setTimeout (check_position, 100);
+}
+
+
+/*  Movement  */
+function stop_event (event) {
+  event.preventDefault ();
+  event.stopPropagation ();
+}
+
+function onKeyEvent (event) {
+  if (!event)
+    event = window.event;
+  if (!event)
+    return;
+  if (event.ctrlKey || event.altKey || event.metaKey)
+    return;
+
+  var c = event.which ? event.which : event.keyCode;
+
+  switch (c) {
+    case 32:   /*  Space  */
+    case 39:   /*  Right arrow  */
+      set_position (1);
+      stop_event (event);
+      break;
+    case 8:    /*  Backspace  */
+      if (photostream_mode) {
+        set_position (-1);
+        stop_event (event);
+      }
+      break;
+    case 37:   /*  Left arrow  */
+      set_position (-1);
+      stop_event (event);
+      break;
+    case 27:    /*  Escape  */
+      if (photostream_mode) {
+        cancel_photostream_mode ();
+        stop_event (event);
+      }  
+      schedule_check_position ();
+      break;
+    case 68:    /*  d  */
+      toggle_exif_all_visibility ();
+      onResize (null);
+      break;
+    case 65:    /*  a  */
+      enable_animations = ! enable_animations;
+      break;
+    case 70:    /*  f  */
+      toggleFullScreen();
+      break;
+  }
+}
+
+function onScroll (event) {
+  if (ignore_scroll_event)
+    return;
+  if (photostream_mode) {
+    cancel_photostream_mode ();
+    stop_event (event);
+  }
+  schedule_check_position ();
+}
+
+function onResize (event) {
+  if (photostream_mode) {
+    var elem = document.getElementById ("photo-" + current_idx);
+    if (! elem)
+      return;
+    scroll_to_photo (elem);
+  }
+}
+
+function onLoad () {
+  document.addEventListener ("keydown", onKeyEvent, false);
+  window.addEventListener ("scroll", onScroll, false);
+  window.addEventListener ("resize", onResize, false);
+  schedule_check_position ();
+}   
+
+/*  this should perform initialization while the page is still loading  */
+onLoad();
diff --git a/templates/fluid/styles.css b/templates/fluid/styles.css
new file mode 100644
index 0000000..547ff6f
--- /dev/null
+++ b/templates/fluid/styles.css
@@ -0,0 +1,757 @@
+@import url(fonts.css);
+
+html, body {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0;
+  height: 100%;
+  background: #000000;
+}
+
+/*  for the footer to stay down  */
+div.content-wrapper {
+  min-height: 100%;
+  position: relative;
+}
+
+div.content {
+  padding: 15px;
+}
+
+div.content div.title {
+  padding-top: 50px;
+  font-weight: 600;
+  font-family: 'Hind', sans-serif;
+  font-size: 46px;
+  color: #EEEEEE;
+/*  text-shadow: rgba(240, 230, 199, 0.5) 0 0 2px;  */
+}
+
+/*  Size buttons tend to show color frame in Firefox  */
+a:active, a:visited {
+  color: rgba(0, 255, 0, 0);
+}
+
+div.content div.title a,
+div.content div.text a,
+div.photo div.photo-title a,
+div.photo div.photo-text a,
+div.interspace a,
+div.separator a,
+div.albums div.footnote a {
+  color: #CCCCCC;
+  text-decoration: underline;
+  transition-property: color, text-shadow;
+  transition-duration: 0.5s;
+}
+
+div.content div.title a:hover,
+div.content div.text a:hover,
+div.photo div.photo-title a:hover,
+div.photo div.photo-text a:hover,
+div.interspace a:hover,
+div.separator a:hover,
+div.albums div.footnote a:hover {
+  color: #D0D0D0;
+  text-decoration: underline;
+  text-shadow: 0 0 4px rgba(240, 230, 220, 1.0);
+}
+
+div.content div.text {
+  padding-top: 15px;
+  padding-left: 25px;
+  padding-right: 50px;
+  padding-bottom: 50px;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  color: #C3C3C3;
+}
+
+
+/*******************************   NAVIGATION   *******************************/
+
+div.navigation {
+  font-size: 14px;
+  font-family: 'Open Sans', sans-serif;
+  background-color: rgba(50, 50, 50, 1.0);
+  color: #E0E0E0;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+div.navigation div.navbar {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  line-height: 36px;
+  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
+  border-right: 1px solid rgba(100, 100, 100, 1.0);
+  border-bottom: 1px solid rgba(100, 100, 100, 1.0);
+  border-bottom-right-radius: 6px;
+     -moz-border-radius: 0 0 6px 0;
+  -webkit-border-radius: 0 0 6px 0;
+          box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+     -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+  -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+  background:         linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+  background: -webkit-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+  background:    -moz-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+  background:      -o-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+  transition: box-shadow 0.3s;
+}
+
+div.navigation div.navbar:hover {
+          box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+     -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+  -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+}
+
+div.navigation div.nav-right {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  right: 0;
+  padding: 8px;
+  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
+  border-left: 1px solid rgba(100, 100, 100, 1.0);
+  border-bottom: 1px solid rgba(100, 100, 100, 1.0);
+  border-bottom-left-radius: 6px;
+     -moz-border-radius: 0 0 0 6px;
+  -webkit-border-radius: 0 0 0 6px;
+          box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+     -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+  -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+  background:         linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+  background: -webkit-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+  background:    -moz-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+  background:      -o-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+  transition: box-shadow 0.3s;
+}
+
+div.navigation div.nav-right:hover {
+          box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+     -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+  -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+}
+
+/*  The following navbar code is a heavily modified example from
+ *  http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation
+ *  Copyright 2014 TheCodePlayer. All Rights Reserved.
+ */
+div.navbar a {
+  text-decoration: none;
+  float: left;
+  color: white;
+  padding: 0 8px 0 27px;
+  position: relative;
+}
+
+div.navbar .nav-current {
+  float: left;
+  color: #CACACA;
+  padding: 0 14px 0 4px;
+}
+
+div.navbar:hover .nav-current,
+div.navbar .nav-current.av {
+  padding-left: 27px;
+}
+
+div.navbar .nav-current.nav-root,
+div.navbar:hover .nav-current.nav-root {
+  padding-left: 12px;
+}
+
+div.navbar .nav-hidden,
+div.navbar:hover .nav-revhidden {
+  display: none;
+}
+
+div.navbar .nav-revhidden,
+div.navbar:hover .nav-hidden {
+  display: inline;
+}
+
+div.navbar a:first-child {
+  padding-left: 12px;
+}
+
+div.navbar a:hover {
+  background:         linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%);
+  background: -webkit-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%);
+  background:    -moz-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%);
+  background:      -o-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%);
+}
+
+div.navbar a:hover:after {
+  background:         linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important;
+  background: -webkit-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important;
+  background:    -moz-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important;
+  background:      -o-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important;
+}
+
+div.navbar a:nth-child(n+2):after,
+div.navbar:hover a:first-child:after,
+div.navbar a.av:after {
+  content: '';
+  position: absolute;
+  top: 0; 
+  right: -17px;
+  width: 34px; 
+  height: 34px;
+          transform: scale(0.707) rotate(45deg);
+  -webkit-transform: scale(0.707) rotate(45deg);
+     -moz-transform: scale(0.707) rotate(45deg);
+       -o-transform: scale(0.707) rotate(45deg);
+  z-index: 2;
+  background:         linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+  background: -webkit-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+  background:    -moz-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+  background:      -o-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+          box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
+  -webkit-box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
+     -moz-box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
+          border-radius: 0 5px 0 50px;
+  -webkit-border-radius: 0 5px 0 50px;
+     -moz-border-radius: 0 5px 0 50px;
+}
+
+div.navbar a .vert-sep {
+  display: inline-block;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 1px; 
+  height: 23px;
+  background-image:         linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%);
+  background-image: -webkit-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%);
+  background-image:    -moz-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%);
+  background-image:      -o-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%);
+  background-repeat: no-repeat;
+}
+
+/*  navbar icons  */
+div.navbar i.fa {
+  font-size: 24px;
+  opacity: 0.7;
+  transition: opacity 0.3s;
+}
+
+div.navbar:hover a i.fa {
+  opacity: 1.0;
+}
+
+div.navbar i.fa-home {
+  position: relative;
+  top: 2px;
+}
+
+
+/*******************************   FOOTER   ***********************************/
+
+div.footer {
+  clear: both;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 16px;
+  font-size: 13px;
+  font-family: 'Open Sans', sans-serif;  
+  line-height: 1.4;
+  color: #A0A0A0;
+}
+
+div.footer a {
+  color: #CCCCCC;
+  text-decoration: none;
+  transition-property: color, text-shadow;
+  transition-duration: 0.5s;
+}
+
+div.footer a:hover {
+  color: #D0D0D0;
+  text-decoration: underline;
+  text-shadow: 0 0 4px rgba(240, 230, 220, 1.0);
+}
+
+div.footer hr {
+  margin-left: 150px;
+  margin-right: 150px;
+  border: 0;
+  height: 1px;
+  background-image:         linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0));
+  background-image: -webkit-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0));
+  background-image:    -moz-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0));
+  background-image:      -o-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0));
+}
+
+div.footer i.fa {
+  padding-right: 3px;
+}
+
+
+/*******************************   BUTTONS   **********************************/
+
+div.buttons {
+  position: fixed;
+  overflow: hidden;
+  bottom: 30px;
+  left: 30px;
+  z-index: 1;
+  font-size: 13px;
+          box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+  -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+     -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+  border: solid 1px rgba(100, 100, 100, 1.0);
+          border-radius: 3px;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+  transition: box-shadow 0.3s;	
+}
+
+div.buttons:hover {
+          box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45);
+  -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45);
+     -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45);
+}
+
+div.buttons a {
+  width: 30px;
+  height: 30px;
+  text-decoration: none;
+  white-space: nowrap;
+  position: relative;
+  float: left;
+  background-color: #404040;
+  background:         linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%);
+  background: -webkit-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%);
+  background:    -moz-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%);
+  background:      -o-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%);
+  border-right: solid 1px rgba(90, 90, 90, 1.0);
+}
+
+div.buttons a:last-child {
+  border-right: none;
+}
+
+div.buttons a i.fa {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  color: white;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 30px;
+  opacity: 0.3;
+  transition: opacity 0.3s;
+}
+
+div.buttons a i.fa.small {
+  font-size: 80%;
+}
+
+div.buttons a i.fa.big {
+  font-size: 120%;
+}
+
+div.buttons a i.fa.active {
+  opacity: 0.75;
+}
+
+div.buttons a:hover i.fa {
+  opacity: 1.0;
+  text-shadow: 0 0 4px rgba(240, 230, 199, 0.8);
+}
+
+
+/*******************************   IMAGES   ***********************************/
+
+.position_marker {
+  position: relative;
+  top: -100px;
+}
+
+div.photos {
+  text-align: center;
+  padding-bottom: 50px;
+}
+
+div.photos div.photo {
+  margin-top: 60px;
+  margin-bottom: 80px;
+  display: inline-block;
+  text-align: left;
+}
+
+div.photo img {
+  display: block;
+  margin-bottom: 4px;
+}
+
+div.photo div.photo-title {
+  font-family: 'Open Sans', sans-serif;
+  text-align: center;
+  color: #E0E0E0;
+  font-size: 17px;
+  float: left;
+  display: block;
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+div.photo a.exif-icon {
+  text-decoration: none;
+  float: right;
+  display: block;
+  color: #EEEEEE;
+  padding-right: 2px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  opacity: 0.3;
+  transition-property: opacity, text-shadow;
+  transition-duration: 0.3s;
+}
+
+div.photo a.exif-icon:hover {
+  opacity: 1.0 !important;
+  text-shadow: 0 0 4px rgba(240, 230, 199, 0.8);
+}
+
+div.photo div.photo-text {
+  font-family: 'Open Sans', sans-serif;
+  color: #B0B0B0;
+  font-size: 13px;
+  clear: both;
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+
+div.photo div.photo-exif {
+  display: none;
+  clear: both;
+  margin-top: 7px;
+  margin-bottom: 2px;
+  background: #303030;
+}
+
+/*  this is nested in order to have the parent div fully expanded according
+    to the image width (including variable border size)  */
+div.photo div.photo-exif-sub {
+  font-family: 'Open Sans', sans-serif;
+  color: #CCCCCC;
+  font-size: 13px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+div.photo div.photo-exif-sub .seg {
+  padding-left: 10px;
+  padding-right: 12px;
+  display: inline-block;
+  white-space: nowrap;
+  line-height: 1.7;
+  transition: color 0.3s;
+}
+
+div.photo div.photo-exif-sub .seg:last-child {
+  padding-right: 3px;
+}
+
+div.photo div.photo-exif-sub .seg i.fa {
+  padding-right: 5px;
+}
+
+div.photo div.photo-exif-sub .seg:hover {
+  color: #E0E0E0;
+}
+
+div.photo div.photo-exif-sub a {
+  color: #D0D0D0;
+  text-decoration: none;
+  transition-property: color, text-shadow;
+  transition-duration: 0.5s;
+}
+
+div.photo div.photo-exif-sub a:hover {
+  color: #E0E0E0;
+  text-decoration: underline;
+  text-shadow: 0 0 4px rgba(240, 230, 220, 1.0);
+}
+
+
+/***************************   IMAGE BORDER STYLES   **************************/
+
+div.photo img#border_single {
+  border: solid 1px rgb(128, 128, 128);
+}
+
+div.photo img#border_none {
+}
+
+div.photo img#frame_black {
+  background-color: #909090;
+  padding: 1px;
+  border: 20px solid black;
+}
+
+div.photo img#frame_white {
+  background-color: #444444;
+  padding: 1px;
+  border: 20px solid white;
+}
+
+div.photo img#frame_black_horiz {
+  background-color: #A0A0A0;
+  padding: 1px 0 1px 0;
+  border-top: 35px solid black;
+  border-bottom: 35px solid black;
+}
+
+div.photo img#frame_white_horiz {
+  background-color: #444444;
+  padding: 1px 0 1px 0;
+  border-top: 35px solid white;
+  border-bottom: 35px solid white;
+}
+
+div.photo img#frame_black_vert {
+  background-color: #A0A0A0;
+  padding: 0 1px 0 1px;
+  border-left: 40px solid black;
+  border-right: 40px solid black;
+}
+
+div.photo img#frame_white_vert {
+  background-color: #444444;
+  padding: 0 1px 0 1px;
+  border-left: 40px solid white;
+  border-right: 40px solid white;
+}
+
+div.photo img#border_black {
+  border: 15px solid black;
+}
+
+div.photo img#border_white {
+  border: 15px solid white;
+}
+
+
+/*******************************   SEPARATORS   *******************************/
+
+div.separator {
+  clear: both;
+  text-align: left;
+  font-variant: small-caps;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 32px;
+  color: #EEEEEE;
+/*  text-shadow: rgba(240, 230, 199, 0.6) 0 0 2px; */
+  margin-top: 50px;
+  margin-left: 20px;
+  margin-right: 50px;
+  border-bottom: 1px solid #606060;
+}
+
+div.albums div.separator {
+  padding-top: 40px;
+  margin-left: 0;
+  margin-right: 10px;
+}
+
+div.interspace {
+  clear: both;
+  text-align: left;
+  margin-left: 30px;
+  margin-right: 60px;
+  margin-top: 10px;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  color: #CACACA;
+}
+
+div.albums div.interspace {
+  padding-bottom: 35px;
+  margin-left: 15px;
+  margin-right: 20px;
+}
+
+div.albums div.footnote {
+  clear: both;
+  text-align: left;
+  padding-bottom: 35px;
+  padding-top: 10px;
+  margin-left: 15px;
+  margin-right: 20px;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  color: #CACACA;
+}
+
+
+/*******************************   INDEX ITEMS   ******************************/
+
+div.albums {
+  text-align: left;
+}
+  
+div.index_item {
+  display: block;
+  overflow: hidden;
+  float: left;
+  margin: 20px;
+  border-radius: 8px;
+     -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border: 1px solid #6b6c69;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+          box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+     -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+  -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+  transition-property: box-shadow;
+  transition-duration: 0.3s;
+}  
+
+div.index_item:hover {
+  border: 1px solid #AAAAAA;
+          box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+     -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+  -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+}
+
+div.index_item a {
+  display: block;
+  position: relative;
+  width: 495px;
+  height: 330px;
+  text-align: left;
+  text-decoration: none;
+  background:         linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+  background:    -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+  background:      -o-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+  transition-property: background;
+  transition-duration: 0.3s;
+}
+
+div.index_item a:hover {
+  background:         linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+  background:    -moz-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+  background:      -o-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+}
+
+div.index_item span.album_text {
+  font-family: 'Hind', sans-serif;
+  font-size: 34px;
+  font-weight: 700;
+  color: #F3F3F3;
+  text-shadow: 0 0 2px rgba(0, 0, 0, 1);
+  position: absolute;
+  bottom: 55px;
+  left: 15px;
+  line-height: 1.1;
+  padding-right: 15px;
+  transition-property: text-shadow, color;
+  transition-duration: 0.3s;
+}
+
+div.index_item a:hover .album_text {
+  color: #FFFFFF;
+}
+
+div.index_item .album_subtext {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 15px;
+  color: #D0D0D0;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
+  position: absolute;
+  top: 277px;
+  left: 15px;
+  padding-right: 15px;
+  line-height: 1.3;
+  transition-property: color;
+  transition-duration: 0.3s;
+}
+
+div.index_item:hover .album_subtext {
+  color: #E9E9E9;
+}
+
+div.index_item .album_note {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 11px;
+  color: #B0B0B0;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
+  position: absolute;
+  right: 12px;
+  bottom: 10px;
+}
+
+div.index_item .album_protected_note {
+  font-family: 'Open Sans', sans-serif;
+  color: #c8bc00;
+  font-size: 80%;
+  position: absolute;
+  bottom: 7px;
+  left: 15px;
+}
+
+
+/******************************   PHOTOSTREAM   *******************************/
+
+.photostream-force-show {
+    visibility: visible !important;
+}
+.photostream-force-hide {
+    visibility: hidden !important;
+}
+
+.photostream-hide {
+}
+
+#photostream-close {
+  position: fixed;
+  z-index: 100;
+  top: 10px;
+  right: 15px;
+  font-size: 32px;
+  text-decoration: none;
+  color: #EEEEEE;
+  opacity: 0.4;
+  transition-property: opacity, text-shadow;
+  transition-duration: 0.3s;
+}
+
+#photostream-close:hover {
+  text-shadow: 0 0 7px rgba(240, 230, 199, 0.8);
+  opacity: 1;
+}
+
+#photostream-position-label {
+  position: fixed;
+  z-index: 101;
+  bottom: 15px;
+  right: 15px;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 600;
+  font-size: 12px;
+  text-decoration: none;
+  color: #EEEEEE;
+  opacity: 0.5;
+  transition-property: opacity, text-shadow;
+  transition-duration: 0.3s;
+}
+
+#photostream-position-label:hover {
+  opacity: 1;
+  text-shadow: 0 0 7px rgba(240, 230, 199, 0.4);
+}
+
diff --git a/templates/fluid/template_album.html b/templates/fluid/template_album.html
new file mode 100644
index 0000000..0552074
--- /dev/null
+++ b/templates/fluid/template_album.html
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!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 profile="http://www.w3.org/2005/10/profile">
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+	<title>$(PAGE_TITLE)</title>
+<!-- $(CGG_META_TAGS) -->
+<!-- $(CGG_ATOM_FEED_TAGS) -->
+	<link href="$(TEMPLATES_PATH)styles.css" type="text/css" rel="stylesheet" media="screen, print" />
+        <script type="text/javascript">var NUM_PHOTOS = $(TOTAL_ITEMS);</script>
+	<script type="text/javascript" src="$(TEMPLATES_PATH)scripts.js">onLoad();</script>
+</head>
+<body>
+
+
+<!--  ##  Navigation bar  -->
+<div class="navigation photostream-hide">
+  <div class="navbar">
+      <!-- $(BEGIN_NAV_BAR) -->
+      <!-- $(BEGIN_NAV_BAR_FIRST) -->
+        <a href="$(NAV_BAR_ELEM_LINK)" class="av" rel="home"><i class="fa fa-home"></i> <!-- $(NAV_BAR_ELEM_TITLE) -->&nbsp;</a>
+      <!-- $(END_NAV_BAR_FIRST) -->
+      <!-- $(BEGIN_NAV_BAR_ELEM) -->
+        <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a>
+      <!-- $(END_NAV_BAR_ELEM) -->
+      <!-- $(BEGIN_NAV_BAR_LAST) -->
+        <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a>
+      <!-- $(END_NAV_BAR_LAST) -->
+      <!-- $(BEGIN_NAV_BAR_CURRENT) -->
+        <span class="nav-current av"><!-- $(NAV_BAR_ELEM_TITLE) --></span>
+      <!-- $(END_NAV_BAR_CURRENT) -->
+      <!-- $(BEGIN_NAV_BAR_CURRENT_ROOT) -->
+        <span class="nav-current nav-root"><i class="fa fa-home"></i> <!-- $(NAV_BAR_ELEM_TITLE) --></span>
+      <!-- $(END_NAV_BAR_CURRENT_ROOT) -->
+    <!-- $(END_NAV_BAR) -->
+  </div> 
+  <div class="nav-right"><!-- $(TOTAL_ITEMS) --> photos</div> 
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+  <div class="title photostream-hide"><!-- $(TITLE) --></div> 
+  <div class="text photostream-hide"><!-- $(DESCRIPTION) --></div>
+
+<div class="photos photostream-hide">
+  <!-- $(BEGIN_IMG_LIST) -->
+    <!-- $(BEGIN_LIST_PICTURE) -->
+      <div class="photo" id="photo-$(ITEM_INDEX)">
+        <div class="position_marker" id="i$(ITEM_INDEX)"></div>
+        <img src="$(IMG_SRC)" width="$(IMG_SIZE_W)" height="$(IMG_SIZE_H)" alt="" id="$(value(BORDER_STYLE))"/>
+        <div class="photo-title"><!-- $(IMG_TITLE) --></div>
+        <a href="javascript: toggle_exif_visibility($(ITEM_INDEX));" class="exif-icon" id="exif_icon-$(ITEM_INDEX)" title="Show/hide metadata information"><i class="fa fa-info"></i></a>
+        <div class="photo-text" style="max-width: $(IMG_SIZE_W)px;"><!-- $(IMG_DESCRIPTION) --></div>
+        <div class="photo-exif" id="exif_table-$(ITEM_INDEX)">
+          <div class="photo-exif-sub" style="max-width: $(IMG_SIZE_W)px;">
+            <a href="#i$(ITEM_INDEX)"><span class="seg" title="Image reference link"><i class="fa fa-anchor"></i><!-- $(IMG_FILENAME) --></span></a>
+            <!-- $(ifdef(HAVE_EXIF)) -->
+              <span class="seg" title="Date and time"><i class="fa fa-calendar"></i><!-- $(get_exif_value_fixed("Exif.Photo.DateTimeOriginal")) --></span>
+              <span class="seg" title="Shutter speed and aperture number"><i class="fa fa-cog"></i><!-- $(get_exif_value_fixed("Exif.Photo.ExposureTime")) --> &nbsp; <!-- $(get_exif_value_fixed("Exif.Photo.FNumber")) --></span>
+              <span class="seg" title="Focal length"><i class="fa fa-sliders"></i><!-- $(get_exif_value_fixed("Exif.Photo.FocalLength")) --></span>
+              <span class="seg" title="ISO Speed setting"><i class="fa fa-film"></i>ISO <!-- $(get_exif_value_fixed("Exif.Photo.ISOSpeedRatings")) --></span>
+              <span class="seg" title="Camera model"><i class="fa fa-camera"></i><!-- $(get_exif_value_fixed("Exif.Image.Model")) --></span>
+              <!-- $(if (have_exif_key ("__disabled__Exif.CanonSi.CameraTemperature"))) -->
+                <span class="seg" title="Camera temperature"><i class="fa fa-cloud"></i><!-- $(get_exif_value_fixed("Exif.CanonSi.CameraTemperature")) --></span>
+              <!-- $(endif (have_exif_key ())) -->
+            <!-- $(endif(HAVE_EXIF)) -->
+          </div>
+        </div>
+      </div>
+      <br/>
+    <!-- $(END_LIST_PICTURE) -->
+    <!-- $(BEGIN_LIST_SEPARATOR) -->
+      <div class="separator" id="photo-$(ITEM_INDEX)-sep"><!-- $(LIST_SEPARATOR_TITLE) --></div>
+    <!-- $(END_LIST_SEPARATOR) -->
+    <!-- $(BEGIN_LIST_INTERSPACE) -->
+      <div class="interspace" id="photo-$(ITEM_INDEX)-ispc"><!-- $(LIST_INTERSPACE_TITLE) --></div>
+    <!-- $(END_LIST_INTERSPACE) -->
+  <!-- $(END_IMG_LIST) -->
+
+  <!--  ##  Footnote, also acts as a bottom border  -->
+  <div class="footnote"><!-- $(FOOTNOTE) --></div>
+</div>
+
+
+</div>
+
+<!--  ##  Buttons  -->
+<div class="buttons photostream-hide">
+  <a href="index.html" title="Small size" class="size-button"><i class="fa fa-picture-o small <!-- $(ifdef(THEME_SIZE_PREVIEW)) -->active<!-- $(endif(THEME_SIZE_PREVIEW)) -->"></i></a>
+  <!-- $(if (have_album_image_size ("original"))) -->
+    <a href="index_big.html" title="Normal size" class="size-button"><i class="fa fa-picture-o <!-- $(ifdef(THEME_SIZE_BIG)) -->active<!-- $(endif(THEME_SIZE_BIG)) -->"></i></a>
+  <!-- $(endif (have_album_image_size ())) -->
+  <!-- $(if (have_album_image_size ("hires"))) -->
+    <a href="index_hires.html" title="Large size" class="size-button"><i class="fa fa-picture-o big <!-- $(ifdef(THEME_SIZE_HIRES)) -->active<!-- $(endif(THEME_SIZE_HIRES)) -->"></i></a>
+  <!-- $(endif (have_album_image_size ())) -->
+</div>
+
+<a class="photostream-force-hide" id="photostream-close" href="javascript: cancel_photostream_mode();" title="Quit the photo stream mode"><i class="fa fa-times"></i></a>
+<span class="photostream-force-hide" id="photostream-position-label">1 / <!-- $(TOTAL_ITEMS) --></span>
+
+<!--  ##  Footer  -->
+<div class="footer photostream-hide">
+  <hr /><!-- $(FOOTER) -->
+</div>
+</div>
+
+
+</body>
+</html>
diff --git a/templates/fluid/template_index.html b/templates/fluid/template_index.html
new file mode 100644
index 0000000..74833dd
--- /dev/null
+++ b/templates/fluid/template_index.html
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!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 profile="http://www.w3.org/2005/10/profile">
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+	<title>$(PAGE_TITLE)</title>
+<!-- $(CGG_META_TAGS) -->
+<!-- $(CGG_ATOM_FEED_TAGS) -->
+	<link href="$(TEMPLATES_PATH)styles.css" type="text/css" rel="stylesheet" media="screen, print" />
+</head>
+<body>
+
+
+<!--  ##  Navigation bar  -->
+<div class="navigation photostream-hide">
+  <div class="navbar">
+      <!-- $(BEGIN_NAV_BAR) -->
+      <!-- $(BEGIN_NAV_BAR_FIRST) -->
+        <a href="$(NAV_BAR_ELEM_LINK)" class="av" rel="home"><i class="fa fa-home"></i> <!-- $(NAV_BAR_ELEM_TITLE) -->&nbsp;</a>
+      <!-- $(END_NAV_BAR_FIRST) -->
+      <!-- $(BEGIN_NAV_BAR_ELEM) -->
+        <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a>
+      <!-- $(END_NAV_BAR_ELEM) -->
+      <!-- $(BEGIN_NAV_BAR_LAST) -->
+        <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a>
+      <!-- $(END_NAV_BAR_LAST) -->
+      <!-- $(BEGIN_NAV_BAR_CURRENT) -->
+        <span class="nav-current av"><!-- $(NAV_BAR_ELEM_TITLE) --></span>
+      <!-- $(END_NAV_BAR_CURRENT) -->
+      <!-- $(BEGIN_NAV_BAR_CURRENT_ROOT) -->
+        <span class="nav-current nav-root"><i class="fa fa-home"></i> <!-- $(NAV_BAR_ELEM_TITLE) --></span>
+      <!-- $(END_NAV_BAR_CURRENT_ROOT) -->
+    <!-- $(END_NAV_BAR) -->
+  </div> 
+  <div class="nav-right"><!-- $(TOTAL_ITEMS) --> albums</div> 
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+  <div class="title"><!-- $(TITLE) --></div> 
+  <div class="text"><!-- $(DESCRIPTION) --></div>
+
+<div class="albums">
+  <!-- $(BEGIN_IMG_LIST) -->
+    <!-- $(BEGIN_LIST_PICTURE) -->
+      <div class="index_item" style="background-image:url($(IMG_SRC_THUMB))">
+        <div class="position_marker" id="$(IMG_POS_MARKER)"></div>
+        <a href="$(ALBUM_SUBPATH)">
+          <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
+          <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span>
+          <!-- $(ifdef(IS_PROTECTED)) --><span class="album_protected_note"><br />(This album is password protected)</span><!-- $(endif(IS_PROTECTED)) -->
+          <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
+        </a>
+      </div>
+    <!-- $(END_LIST_PICTURE) -->
+    <!-- $(BEGIN_LIST_SEPARATOR) -->
+      <div class="separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
+    <!-- $(END_LIST_SEPARATOR) -->
+    <!-- $(BEGIN_LIST_INTERSPACE) -->
+      <div class="interspace"><!-- $(LIST_INTERSPACE_TITLE) --></div>
+    <!-- $(END_LIST_INTERSPACE) -->
+  <!-- $(END_IMG_LIST) -->
+
+  <!--  ##  Footnote, also acts as a bottom border  -->
+  <div class="footnote"><!-- $(FOOTNOTE) --></div>
+</div>
+
+</div>
+
+<!--  ##  Footer  -->
+<div class="footer photostream-hide">
+  <hr /><!-- $(FOOTER) -->
+</div>
+</div>
+
+</body>
+</html>