@charset "UTF-8";
body, html {
margin: 0px auto;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.tiledContentHolder {
position: relative;
width: 512px;
height: 288px;
background: black;
overflow: hidden;
border: 1px solid black;
cursor: url("cursors/openhand.png") 10 10, move;
}
.spinnerOverlay {
width: 32px ;
position:absolute;
display:none;
margin-left: auto;
margin-right: auto;
z-index: 10;
}
.instructions {
height:290px;
background-color: rgba(0, 0, 0, 0.5);
position:absolute;
margin: auto;
z-index:6;
display:none;
}
.instructions span {
font-size:13px;
color:#fff;
position:absolute;
display:block;
line-height:18px;
}
.instructions p{font-size:13px;}
.instructions span.loophelp {
width:135px;
background-color:#262626;
border:1px solid #444;
height:19px;
overflow:visible;
bottom: -2px;
left:40px;
padding:12px 16px 16px;
}
.instructions span.loophelp p {
margin:0;
padding:0;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url(../images/bubble_edge_horizontal.png);
height:46px;
}
.instructions span.movehelp {
top:60px;
right:60px;
width:100px;
padding:68px 0px 0px 0px;
background-repeat:no-repeat;
background-position:center top;
background-image:url(../images/drag_mouse.png);
}
.instructions span.zoomhelp {
background-color:#262626;
border:1px solid #444;
top:20px;
left:70px;
overflow:visible;
}
.instructions span.zoomallhelp {
background-color:#262626;
border:1px solid #444;
top:185px;
left:70px;
overflow:visible;
}
.instructions span.zoomhelp p, .instructions span.zoomallhelp p {
margin:0px 0px 0px -11px;
padding:12px 16px 12px 28px;
background-repeat:no-repeat;
background-position:center left;
background-image:url(../images/bubble_edge_vertical.png);
width:190px;
}
.instructions span.speedhelp {
width:268px;
background-color:#262626;
border:1px solid #444;
height:19px;
overflow:visible;
bottom: -10px;
left:377px;
padding:12px 16px 16px;
}
.instructions span.speedhelp p {
margin:0;
padding:0;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url(../images/bubble_edge_horizontal.png);
height:46px;
}
ul.sidebuttons {
margin:0px;
padding:0px;
display:block;
position:absolute;
top:8px;
right:10px;
}
ul.sidebuttons li {
padding:0px;
display:inline;
}
ul.sidebuttons li a {
text-decoration:none;
color:#111;
font-size:11px;
}
li.playbackSpeedOptions {
display:block;
width:153px;
background:#fff;
border:1px solid #666;
position:absolute;
bottom:0px;
z-index:5;
margin: 1px 0px 0px -380px !important;
}
li.playbackSpeedOptions ul {
display:block;
width:153px;
margin:0px !important;
padding:7px 0px 10px 7px !important;
}
li.playbackSpeedOptions ul li {
font-size:11px;
text-align:left;
display:block;
color:#999;
}
li.playbackSpeedOptions ul li a {
padding:7px;
display:block;
height:5px;
padding:6px 0px 7px 13px;
}
li.playbackSpeedOptions ul li a.current {
background-repeat:no-repeat;
background-position:bottom left;
background-image:url(../images/check.gif);
}
li.playbackSpeedOptions ul li a:hover {text-decoration:underline;}
a.playbackspeed {
display:inline-block;
padding:8px 0px 0px 0px;
position: absolute;
margin: 6px 0px 0px -380px;
width:143px;
height:21px;
text-align:center;
text-indent:-20px;
background-repeat:no-repeat;
background-position:top left;
background-image:url(../images/buttons/playbackspeed3.png);
}
a.playbackspeed:hover{background-image:url(../images/buttons/playbackspeed_hover3.png);}
a.playbackspeed:active{background-image:url(../images/buttons/playbackspeed_down3.png);}
li.sizeoptions {
display:block;
width:79px;
background:#fff;
border:1px solid #666;
position:absolute;
bottom:0px;
z-index:5;
margin: 1px 0px 0px -85px !important;
}
li.sizeoptions ul {
display:block;
width:79px;
margin:0px !important;
padding:7px 0px 10px 7px !important;
}
li.sizeoptions ul li {
font-size:11px;
text-align:left;
display:block;
color:#999;
}
li.sizeoptions ul li a {
padding:7px;
display:block;
height:5px;
padding:6px 0px 7px 13px;
}
li.sizeoptions ul li a.current {
background-repeat:no-repeat;
background-position:bottom left;
background-image:url(../images/check.gif);
}
li.sizeoptions ul li a:hover {text-decoration:underline;}
a.size {
display:inline-block;
padding:8px 0px 0px 0px;
position: absolute;
margin: 6px 0px 0px -85px;
width:81px;
height:21px;
text-align:center;
text-indent:-20px;
background-repeat:no-repeat;
background-position:top left;
background-image:url(../images/buttons/size2.png);
}
a.size:hover{background-image:url(../images/buttons/size_hover2.png);}
a.size:active{background-image:url(../images/buttons/size_down2.png);}
a.help.enabled, .help.disabled {
display:inline-block;
padding:8px 0px 0px 0px;
margin:6px 0px 0px 0px;
width:50px;
height:21px;
text-align:center;
background-repeat:no-repeat;
background-position:top left;
background-image:url(../images/buttons/help2.png);
}
a.help.enabled:hover{background-image:url(../images/buttons/help_hover2.png);}
a.help.enabled:active{background-image:url(../images/buttons/help_down2.png);}
a.help.on {
background:#333 !important;
color:#fff !important;
}
.videoTime {
margin:0px;
padding:0px;
position:absolute;
right:155px;
bottom:12px;
font-size:13px;
color:#222;
}
.captureTime {
margin:0px;
padding:0px;
position:absolute;
right:155px;
bottom:28px;
font-size:13px;
color:#222;
}
.controls {
display:block;
width:512px;
height:56px;
background:url(../images/bar_background_stretch_noborder.png) repeat-x left;
border:1px #838383 solid;
position:relative;
}
a.playbackButton {
margin:0px;
padding:0px;
display:block;
width:53px;
height:56px;
border-right:1px #838383 solid;
background-repeat:no-repeat;
background-position:top left;
}
a.stopTimeWarp {
margin:0px;
padding:0px;
display:block;
width:53px;
height:56px;
border-right:1px #838383 solid;
background-repeat:no-repeat;
background-position:top left;
}
a.play, .play_disabled{background-image:url(../images/buttons/play.png);}
a.play:hover{background-image:url(../images/buttons/play_hover.png);}
a.play:active{background-image:url(../images/buttons/play_down.png);}
a.pause, .pause_disabled{background-image:url(../images/buttons/pause.png);}
a.pause:hover{background-image:url(../images/buttons/pause_hover.png);}
a.pause:active{background-image:url(../images/buttons/pause_down.png);}
a.stopTimeWarp{background-image:url(../images/buttons/stop_snaplapse.png);}
a.stopTimeWarp:hover{background-image:url(../images/buttons/stop_snaplapse_hover.png);}
a.stopTimeWarp:active{background-image:url(../images/buttons/stop_snaplapse_down.png);}
a.pausesnap{background-image:url(../images/buttons/pause_snaplapse.png);}
a.pausesnap:hover{background-image:url(../images/buttons/pause_snaplapse_hover.png);}
a.pausesnap:active{background-image:url(../images/buttons/pause_snaplapse_down.png);}
.zoom {
display:block;
width:40px;
height:212px;
position:absolute;
margin: 15px 0px 0px 20px;
z-index:4;
}
a.zoomin {
display:block;
height:29px;
width:28px;
background-repeat:no-repeat;
background-position:center;
background-image:url(../images/zoom/zoom_in.png);
position:absolute;
top:0px;
left:0px;
z-index:4;
}
a.zoomin:hover{background-image:url(../images/zoom/zoom_in_hover.png);}
a.zoomin:active{background-image:url(../images/zoom/zoom_in_down.png);}
a.zoomout {
display:block;
height:29px;
width:28px;
background-repeat:no-repeat;
background-position:center;
background-image:url(../images/zoom/zoom_out.png);
z-index:4;
position:absolute;
top:137px;
left:0px;
z-index:4;
}
a.zoomout:hover{background-image:url(../images/zoom/zoom_out_hover.png);}
a.zoomout:active{background-image:url(../images/zoom/zoom_out_down.png);}
a.zoomall {
display:block;
height:40px;
width:39px;
background-repeat:no-repeat;
background-position:center;
background-image:url(../images/zoom/zoom_viewall.png);
z-index:4;
position:absolute;
bottom:0px;
left:-5px;
z-index:4;
}
a.zoomall:hover{background-image:url(../images/zoom/zoom_viewall_hover.png);}
a.zoomall:active{background-image:url(../images/zoom/zoom_viewall_down.png);}
.ui-slider-range { background: #6f879c; z-index:3;}
.timelineSliderFiller {
height:8px;
z-index:5;
background:#FFF;
position:relative;
}
.timelineSlider {
cursor:pointer;
display:block;
width:513px;
height:8px;
border:0px #838383 solid;
border-bottom:0px !important;
position:relative;
bottom:0px;
margin: 0px 0px 0px 0px;
background:#FFF;
z-index:5;
}
.timelineSlider .ui-slider-handle {
width:11px;
margin-left:-4px !important;
height:19px;
background:url(../images/handle.png) no-repeat; overflow: hidden;
top: -6px;
border-style:none;
border:none;
margin: 0px 0px 0px 0px;
}
.zoomSlider {
width:8px;
height:110px;
background:#969DA1;
border:1px solid #555555;
position:absolute;
top:27px;
left:9px;
}
.zoomSlider .ui-slider-handle {
width:28px;
height:11px;
background:url(../images/zoom/zoom_handle.png) no-repeat; overflow: hidden;
border-style:none;
border:none;
left:-10px;
z-index: 10;
}
.zoomSlider .ui-slider-handle:hover{background-image:url(../images/zoom/zoom_handle_hover.png);}
.zoomSlider .ui-slider-handle:active{background-image:url(../images/zoom/zoom_handle_down.png);}
.timelineSlider .ui-slider-handle:hover{background-image:url(../images/handle_hover.png);}
.timelineSlider .ui-slider-handle:active{background-image:url(../images/handle_down.png);}
.snaplapse-annotation-description {
padding:0px;
color:#fff;
background-color:#262626;
border:1px solid #444;
display:none;
max-width:500px;
min-width:300px;
position:absolute;
top:50px;
z-index:6;
overflow:visible;
}
.snaplapse-annotation-description p {
padding:30px 34px 30px 44px;
background-position:top left;
background-image:url("../images/bubble_edge_vertical.png");
background-repeat:no-repeat;
width:190px;
margin-left:-10px;
}
.carousel {
margin: 0 0 20px 10px;
/*position: relative;*/
}
.layerSlider {
/*margin-left: 260px;
position: absolute;
top: 340px;*/
margin-left: auto;
}
.carousel a.prev, .carousel a.next {
display: block;
float: left;
width: 30px;
height: 40px;
text-decoration: none;
background: url("../images/prev.jpg") left 15px no-repeat;
}
.carousel a.next {
height: 50px;
*/float: right;
right: -25px;*/
position: absolute;
margin: -78px 0px 0px 218px;
/*top: -8px;*/
background: url("../images/next.jpg") right 23px no-repeat;
}
.carousel a.next:hover {background-image: url("../images/next.jpg");}
.carousel a.prev:hover {background-image: url("../images/prev.jpg");}
.carousel a:hover, .carousel a:active {
border: none;
outline: none;
}
.carousel ul {margin: 0;}
.carousel li img, .carousel li p {
background-color: #fff;
margin: 5px;
width: 45px;
}
.jCarouselLite img {cursor: pointer;}
.repeat {
width: 27px;
height: 24px;
display: block;
position: relative;
right: -53px;
bottom: 60px;
z-index: 2;
}
.repeat.active {
background-image: url("../images/repeat_active2.png");
background-repeat:no-repeat;
}
.repeat.inactive {
background-image: url("../images/repeat_inactive2.png");
background-repeat:no-repeat;
}
.repeat:hover{
background-image: url("../images/repeat_hover2.png");
background-repeat:no-repeat;
}
.play_mouseover {
width: 20px;
height: 23px;
background-image: url("../images/play_mouseover.png");
cursor: pointer;
float: left;
}
.play_mouseout {
width: 20px;
height: 23px;
background-image: url("../images/play_mouseout.png");
cursor: pointer;
float: left;
}
.pause_mouseover {
width: 20px;
height: 23px;
background-image: url("../images/pause_mouseover.png");
cursor: pointer;
float: left;
}
.pause_mouseout {
width: 20px;
height: 23px;
background-image: url("../images/pause_mouseout.png");
cursor: pointer;
float: left;
}
.shareurl {
width:600px;
height: 32px;
}
a.share {
padding:8px 0px 0px 0px;
position: absolute;
margin: 6px 0px 0px -510px;
width:120px;
height:21px;
text-align:center;
text-indent:0px;
background-repeat:no-repeat;
background-position:top left;
background-image:url("../images/buttons/share.png");
}
a.share:hover{background-image:url("../images/buttons/share_hover.png");}
a.share:active{background-image:url("../images/buttons/share_down.png");}