
#loopControl             { margin-top: 5px; margin-bottom:10px; }
#loopControl > div       { display:inline-block; vertical-align:top; }
#loopBtn                 { float:left; width:32px; height:32px }
#loopPositionContainer   { float:left; width:200px; margin:10px; margin-right:20px; }
#loopCount               { margin:4px; }
#loopInterval            { margin:4px; }
#animateImg              { max-width:100%; }
#animateDiv              { position:relative; display:inline-block; }
#animateDiv > img        { width:100%; }
#prevImg,#nextImg        { position:absolute; }
#prevImg                 { left:0px; }
#nextImg                 { right:0px; }
#prevLink,#nextLink      { position:absolute; z-index:1; top:50%; height:73px; width:58px; outline:none; opacity:0.5; }
#prevLink                { left:-12px; }
#nextLink                { right:-12px; }
#prevLink:hover,#nextLink:hover
                         { opacity:0.9; }
.imageBox                { position:relative; display:inline-block; overflow:hidden;
                           background-color:#dadada; border:1px solid black; max-width:100%; }
.imageBox div            { max-width:100%; top:0px; left:0px; }
.imageBox .relative      { position:relative; }
.imageBox .absolute      { position:absolute; }
.dateTime                { position:absolute; padding-left:5px; padding-right:5px;
                           color:black; background-color:gray; border:1px solid black; 
                           font-size:1.5em; font-weight:bold; }
.dateTimeRef             { position:absolute; top:0px; left:0px; width:0px; height:0px; }
.legende                 { vertical-align:top; display:inline-block; border:1px solid #a0a0a0; background-color:#e0e0e0; margin-top: 5px; }
table.legende            { padding:5px; min-width:100%; }
table.legende td         { padding:1px 5px; }
table.legende div        { width: 20px; height: 20px; }
table.legende thead      { font-weight:bold; }
#zoomBox                 { position:absolute; display:inline-block; left: 10px; top:auto; bottom:10px; }
#zoomBox div             { display:block; text-align:center; vertical-align:middle; cursor:pointer;
                           background-color:gray; border:1px solid black; opacity:0.5; }
#zoomBox div:hover       { opacity:0.9; }
.zoomIn                  { border-top-left-radius:4px; border-top-right-radius:4px; }
.zoomOut                 { border-bottom-left-radius:4px; border-bottom-right-radius:4px; }

.hideLoopControls #loopControl   { display:none; }
.hideLoopControls #animateDiv a  { display:none; }
