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.

1 files changed, 757 insertions, 0 deletions

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);
+}
+