@import "base.css";
@import "structure.css";


body { background-color: #2b2f34; width: 100%; margin: 0; }
#header { width: 80%; margin: 24px 10%; position: fixed; }
#header h1 a { background: url(/images/star/_star.png) center center no-repeat; }
#header #mainnav { border-left: 1px solid #3b4147; }
#header #mainnav dt a { color: #454a52; text-shadow: #000 0px -1px 0px; }
#header #mainnav dt a:hover,
#header #mainnav dt a.selected { background-color: #454a52; color: black; text-shadow: none; }

#photo { position: fixed; width: 548px; text-align: right; height: 100%; display: table; margin-left: 24px; z-index: 10; display: none; top: 72px; }
#photo-container { vertical-align: top; display: table-cell; color: #454a52; position: absolute; right: 0; }
#photo img { border: 24px solid white; }
#photo #video-wrapper { border: 24px solid white; padding: 0; margin: 0; }

#photo-container a { color: #454a52; text-decoration: none; font-weight: 600; }
#photo-container a:hover { color: white; }

#photo-container #controls { display: none; }
/*
#photo-container #controls { margin: 0;
    list-style: none; padding: 0; text-align: right; }
#photo-container #controls a { text-transform: uppercase; background-color: #565e67; 
    border-bottom: 6px solid #0073e6; display: block;  margin: 0 1px;  
    padding: 0em 0.5em; font-weight: 300; color: white;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif; }
#photo-container #controls a:hover { background: #0073e6; border-bottom: 6px solid #565e67; }
*/

/*
#photo-container #controls { list-style: none; margin: 0; padding: 0; 
    position: absolute; width: 100%; height: 100%; pointer-events: none; }
#photo-container #controls li { width: 50%; height: 100%; text-align: left; pointer-events: none; }
#photo-container #controls li#next-container { text-align: right; }
#photo-container #controls a { font-size: 72px; color: #2b2f33; 
    display: inline-block; height: 100%; position: relative; top: -24px; width: 30%; }
#photo-container #controls a span { display: none; }
#photo-container #controls a:hover { color: #0073e6; }
#photo-container #controls a#previous { text-align: left; margin-left: 24px; }
#photo-container #controls a#previous:hover { background: url(/images/prevBlock.png) left center no-repeat; }
#photo-container #controls a#next { text-align: right; margin-right: 24px;  }
#photo-container #controls a#next:hover { background: url(/images/nextBlock.png) right center no-repeat; }
*/

#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(http://spawn.willbarton.com/images/flickr_icon.png) left center no-repeat; }
.flickr-enlarge { display: inline-block; 
    background: url(http://spawn.willbarton.com/images/enlarge_icon.png) left center no-repeat; }
.date { display: inline-block;
    background: url(http://spawn.willbarton.com/images/date_icon.png) left center no-repeat; }

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

body #content-wrapper { position: absolute; top: 0; bottom: 0; 
    left: 596px; bottom: auto; width: 236px; min-width: 236px; }
body #content { background-color: #f5f9ff; padding: 12px;
    padding-right: 8px;
    left: 0; width: 216px; clear: both; min-height: 100%; }
#thumbs { display: none; clear: both; }

#thumbs ul { margin: 0; padding: 0; list-style: none; line-height: 0px; }
#thumbs li { display: inline-block; 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: 832px; right: 0px; 
    margin-top: 24px; font-weight: 100; text-align: left; 
    font-family: "HelveticaNeue-UltraLight", "Helvetica Neue Ultra Light", "Helvetica Neue", sans-serif; }
#nav h1 { text-transform: uppercase; font-size: 18px; padding: 0.5em; 
    line-height: 24px; margin-bottom: 0; margin-top: 24px; color: white; }

#nav ul { padding: 0; list-style: none; margin: 0; width: 100%; }
#nav li { margin: 1px 0; padding: 0 0.5em; font-weight: 300; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif; border-top: 1px solid #3b4147; }
#nav li a { display: inline-block; 
    padding: 0.25em; 
    font-size: 14px; 
    color: #939fae; text-decoration: none; margin: 0; }
#nav li a:hover,
#nav li a.selected { color: white; }

#language { padding: 0; list-style: none; text-align: center;  }
#language li { display: inline-block; height: 36px; 
    margin: 0 0.25em; font-weight: 300; 
    border: 0;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif; }
#language li a { display: inline-block; height: 36px; 
    padding: 0 0.5em; line-height: 36px; 
    text-transform: uppercase; font-size: 14px; 
    text-shadow: #000 0px 1px 0px;
    cursor: pointer;
    color: #454a52; text-decoration: none; margin: 0; }
#language li a:hover,
#language li a.selected { background-color: #454a52; color: black; 
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
    text-shadow: none; }