@media screen and (max-device-width: 480px) {
        /* Small devices including ~iPod touch or iPhones */
        html { -webkit-text-size-adjust:200%; }
} 

html, body    { height: 100%; }
body    {
    background-color:#181818; color:#c0c0c0;
    margin:0px; padding:0px; text-align:center;
    font-family: PT Sans, Calibri, Trebuchet MS, Helvetica Neue, Helvetica, Arial, sans-serif;
}

#page   {
    min-height:100%; margin:0px; padding:0px; position:relative;
    background-image: linear-gradient(to bottom, #181818, rgba(0,0,0,0.66));
}

#footer { width:100%; clear:both; position:absolute; bottom:0px; }

#nav    {
    text-align:left; position:relative; top:-1px; left:0px;
    font-size:85%;
    white-space: nowrap;
    line-height:140%;
    float:left; clear:left;
    max-width:3cm;
    overflow: hidden;
    padding:3px; padding-right:0.5em;
    background-color:#000000;
    border-radius:0px 0px 1em 0px;
    border-right: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    box-shadow: 1px 1px 0px rgba(0,0,0,0.5);
    opacity:0.66;
    z-index: 1;
}

#nav:hover {
    overflow: visible;
    max-width: 10cm;
}

#nav ul {
    list-style-type: none; padding-left:0;
    margin:0px; margin-top:0.25em;
}

#nav ul li:before { content:"»"; padding-right:0.25em; }

#info    {
    text-align:center; position:relative; top:-1px; float:right;
    width:4em; font-size: 85%;
    padding:3px;
    background-color:#000000;
    border-radius:0px 0px 0px 15px;
    border-left:  solid 1px rgba(255,255,255,0.15);
    border-bottom:solid 1px rgba(255,255,255,0.15);
    box-shadow: rgba(0,0,0,0.5) -1px 1px 0px;
    opacity:0.66;
}

#exifinfo {
    position:absolute; top:1.6em; right:0.3em; z-index:3;
    border-radius:0.5em;
    background-color: #101010;
    border:1px solid black;
    box-shadow: inset 0px 0px 3px 0px rgba(255,255,255,0.25), 0px 5px 8px 2px rgba(0,0,0,0.75);
    opacity:0.95;
    margin:auto;
    padding:0.33em; text-align:left;
    display:none;
    font-size:95%;
}

#exifheading {
    text-align:right;
}

#exifdata {
    padding:5px; margin:3px;
    text-align:left;
}

#nav_title {
    font-size:smaller;
    text-shadow: #444 1px 1px 2px;
}

#pic_nav {
    text-align:center; margin-bottom:5px; font-size:85%;
    border-radius:0px 0px 15px 15px;
    border:solid 1px rgba(255,255,255,0.15); border-top-width:0px;
    padding:3px; margin:auto; width:17em; position:relative; top:-1px;
    background-color:#000000;
    opacity:0.50;
}

h3  { color:#444; margin-top:1em; border-top:1px dotted #444; padding-top:0.1em; text-align:left; }
h4  { margin-top:0.25em; text-align:left; }

div.content { padding-bottom:3em; }
div.content .descr     { margin:0.25em 2em; }
div.content .details    { margin:1em auto; font-size:85%; clear:both;}

.gallery {
    margin:1em; margin-left:3.5cm;
}

figure {
    margin: 0;
    padding: 0;
}

figure img {
    margin:1.5em 0;                   /* horizontally centered */
    max-width: 95%;
    height: auto;
    border-radius:0.33em;
    box-shadow: inset 0px 0px 2px 1px rgba(255,255,255,0.25),
       		0px 3px 10px 5px rgba(0,0,0,0.5);
    background-color:#000;  padding:3px;
}

figcaption {
    max-width: 1000px;
    font-size: 85%;
}

#title   {
    font-size:150%;
    text-shadow: #666 1px 1px 1px;
    margin:0mm; text-align:center;
    height:1.25em;
    background-color:#000000;
    border-bottom:solid 1px rgba(255,255,255,0.15);
    box-shadow: inset 0px 2px 2px rgba(255,255,255,0.1), 0px 2px 0px rgba(0,0,0,0.25);
    opacity:0.66;
}

.thumbnail_frame {
    float:left; list-style:none;
    width:132px; height:132px;
    margin: 0.75em; padding:5px;
    text-align:center; vertical-align:middle; display:inline-block;
    border-radius: 5px;
}

.thumbnail {
    border: 1px rgba(255,255,255,0.2) solid;
    border-radius: 3px;
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,1);
}

address  {
    padding:5px; background-color:#000000; text-align:right;
    font-size: 85%;
    border-top: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0px -1px 0px rgba(0,0,0,0.5);
    opacity:0.66;
}

a:link      { color:#ffb000; text-decoration:none; }
a:visited   { color:#ffe090; text-decoration:none; }
a:active    { color:#ffb000; text-decoration:none; }
a:hover     { text-decoration:underline; }
.thumbnail_frame {
    background-color:#222;
    box-shadow: inset 0 0  2px     rgba(255,255,255,0.05),
                      0 0  5px 3px rgba(0,0,0,0.5);
    border-radius: 5px;
}

.thumbnail {
    box-shadow:none;
    border:1px solid black;
}