/*
 * CSS for Timeliner 1.2
 *
 * This CSS is for the plugin functionality
 * Use timeliner_styling.css for personal styling.
 */
/* timeliner */
.timeliner{margin:0;padding:0;position:relative;display:none;}
.timeliner .slide{margin:0;padding:0;list-style:none;overflow:hidden;position:absolute;display:block;}
.timeliner .timeline{display:block;position:absolute;z-index:2;list-style:none;}
.timeliner .innertimeline{position:absolute;bottom:0;z-index:3;overflow:hidden;}
.timeliner .timedisplay{position:absolute;text-align:right;cursor:default;white-space:nowrap;}
.timeliner .node{position:absolute;z-index:4;cursor:pointer;}
.timeliner .tooltip{position:absolute;white-space:nowrap;display:none;}
.timeliner .pause, .timeliner .play, .timeliner .previous, .timeliner .next{position:absolute;list-style:none;z-index:3;cursor:pointer;}
.timeliner .previous, .timeliner .next{z-index:2;}
.timeliner img{vertical-align:bottom}

.timeliner li dl{ width:122px; height:146px; float:left; display:block; text-align:center; margin:0 5px}
.timeliner li dl span{ display:block; margin-top:3px; height:18px; overflow:hidden}

/* The container */
#example1{background:url(loading.gif) center no-repeat;}
/* Each slide */
#example1 .slide{ clear:both; overflow:hidden}
/* The timeline background */
#example1 .timeline{background:#ddd;border-top:1px solid #ccc;border-bottom:1px solid #fff;}
/* The timeline fill bar */
#example1 .innertimeline{background:#003d24;}
/* The time display */
#example1 .timedisplay{color:#777;}
/* Each node */
#example1 .node{background:url(node.png) center no-repeat;width:26px;height:26px;}
/* The active node */
#example1 .node_active{background:url(node_active.png) center no-repeat;}
/* Each node tooltip */
#example1 .tooltip{background:#fff;padding:5px 8px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;opacity:0.8;filter:alpha(opacity=80);}
/* The time display inside a tooltip */
#example1 .tooltiptime{font-size:8pt;font-weight:bold;}
/* The pause/play button */
#example1 .pause, #example1 .play{width:80px;height:80px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 0 10px #bbb;-moz-box-shadow:0 0 10px #bbb;box-shadow:0 0 10px #bbb;}
/* The pause button */
#example1 .pause{background:#fff url(pause.gif) center no-repeat;}
/* The play button */
#example1 .play{background:#fff url(play.gif) center no-repeat;}
/* The previous/next buttons */
#example1 .previous, #example1 .next{width:43px;height:50px;}
/* The previous button */
#example1 .previous{background:#fff url(previous.gif) center no-repeat;-webkit-border-radius:6px 0 0 6px;-moz-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;}
/* The next button */
#example1 .next{background:#fff url(next.gif) center no-repeat;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;}