body { background-color: #2b2f33; color: white; }

#photo { position: fixed; width: 548px; text-align: right; height: 100%; display: table; margin-left: 24px; }
#photo-container { vertical-align: middle; display: table-cell; color: #92a1ae; }
#photo-container { vertical-align: top; display: table-cell; color: #92a1ae; }
#photo img { border: 24px solid white; }
#photo #video-wrapper { border: 24px solid white; padding: 0; margin: 0; }

#photo-container a { color: #92a1ae; text-decoration: none; font-weight: 600; }
#photo-container a:hover { color: white; }
#photo-container #controls { margin: 0;
    list-style: none; padding: 0; text-align: right; }
#photo-container #controls a { text-transform: uppercase; }
#photo-container #controls li:first-child { border-right: 2px solid #92a1ae; padding-right: 0.5em; }
#photo-container #controls li:last-child { border-left: 2px solid #92a1ae; padding-left: 0.5em; }
#photo-container .metadata { font-size: 14px;  
    list-style: none; padding: 0; text-align: right; }
#photo-container li { display: inline-block; }
#photo-container .metadata li { padding-left: 24px; padding-right: 10px; }
.flickr-url { display: inline-block; 
    background: url(/images/flickr_icon.png) left center no-repeat; }
.flickr-enlarge { display: inline-block; 
    background: url(/images/enlarge_icon.png) left center no-repeat; }
.date { display: inline-block;
    background: url(/images/date_icon.png) left center no-repeat; }

#loading { width: 100%; height: 100%; position: fixed; background: url(/images/loading.gif) center center no-repeat;}

#thumbs { margin-left: 596px; margin-top: 8px; display: none; width: 220px; }
#thumbs ul { margin: 0; padding: 0; list-style: none; }
#thumbs li { float: left; line-height: 0px;}
#thumbs li .metadata { display: none; }
#thumbs .selected { 
    filter: alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity: 1.0; opacity: 1.0; }
#thumbs a { display: inline-block; position: relative; width: 54px; height: 54px;}
#thumbs img { width: 50px; height: 50px; }
#thumbs .videoOverlay { display: block; height: 11px; width: 11px; 
    position: absolute; bottom: 6px; left: 4px; 
    background: transparent url(/images/video_play_icon_small.png.v1) bottom left no-repeat; cursor: pointer; }

#nav { position: fixed; top: 0; z-index: 5; left: 840px; margin-top: 48px; }
#nav h1 { font-size: 21px; font-weight: 300; color: white; padding: 0; line-height: 1em; text-align: center; }
#nav ul { margin: 0; padding: 0; list-style: none; 
    width: 100%;
    background: #1E2124; border: 3px solid #353B40; 
    -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; 
}
#nav li { padding: 0 6px; }
#nav li:first-child { border-bottom: 1px solid #131416; }
#nav li:last-child { border-top: 1px solid #2A2E32; }
#nav a { font-size: 14px; color: white; text-decoration: none; font-weight: 100; line-height: 48px; display: block; padding: 0 1em 0 36px; }
#nav li:hover { background-color: #2b2f33; }
#nav a.flickr { background: url(/images/flickr.png) no-repeat; }
#nav a.feed { background: url(/images/feed.png) no-repeat; }