src/css/LdtPlayer.css
changeset 843 75ba66457232
parent 842 4ae2247a59f4
child 861 05f75ca6b5de
child 868 a525cc2214e7
--- a/src/css/LdtPlayer.css	Tue Oct 04 11:16:06 2011 +0200
+++ b/src/css/LdtPlayer.css	Fri Apr 06 16:55:34 2012 +0200
@@ -1,166 +1,968 @@
-		#demo-frame > div.demo { padding: 5px !important; };
-		
-		button.ui-button-icon-only  {
-			height:1.5em;
-			width:1.5em;
-		}
-		
-		#Ldt-loader {
-			background:url(imgs/loader.gif) no-repeat;
-			width:20px;
-			height:16px;
-			float:left;
-		}
-		
-		#Ldt-controler {
-			font-size: 62.5%;
-			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
-			background-color:#eeeeee;
-			height:35px;
-			padding:5px;
-		}
-		
-		.Ldt-iri-chapter{
-			padding-top:10px;
-			padding-bottom:5px;
-			border-left:solid 1px #000;
-			border-right:solid 1px #000;
-		}
-		
-		.tooltip {
-			display:none;
-			background:transparent url(imgs/white_arrow_mini.png);
-			font-size:12px;
-			height:55px;
-			width:180px;
-			padding:10px;
-			padding-left:15px;
-			padding-top:15px;
-			padding-right:15px;
-			color:#000;	
-			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
-		}
-		#Ldt-Root{
-			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
-		}
-		#Ldt-Hat{
-			height:3px;
-		}
-		#Ldt-Annotations{
-			padding-left:5px;
-			width:470px;
-			float:left;
-			font-size: 62.5%;
-		}
-		#Ldt-SaTitle{
-			padding-top:2px;
-			padding-bottom:5px;
-			font-size:18px;
-			height:22p;
-		}
-		#Ldt-SaDescription{
-			font-size:12px;	
-		}
-		#Ldt-Show-Arrow-container{
-			margin-left:60px;
-		}
-		#Ldt-Show-Arrow{
-			position:relative;
-			background:url(imgs/grey_arrow_Show.png);
-			width:27px;
-			height:13px;
-			margin-top:12px;
-			margin-left:-10px;
-			z-index:999;
-		}
-
-		#Ldt-Show-Tags{
-			position:relative;
-			height:13px;
-			margin-top:-10px;
-			border: solid 1px #000;
-		}
-		#Ldt-ShowAnnotation-video{
-			position:absolute;
-			z-index: 999;
-			padding:5px;
-			background:url(imgs/transBlack.png);
-			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
-			color:#FFF;	
-		}
-		#Ldt-ShowAnnotation-audio{
-			position:relative;
-			padding:5px;
-			background-color:#cfcfcf;
-			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
-			color:#4D4D4D;	
-		}
-		#Ldt-SaKeyword{
-			background-color:#b9b9b9;
-			color:#4D4D4D;
-			padding:5px;
-			font-weight:bold;
-			text-align:left;
-			float:left;
-			font-size:10px;
-		}
-		#Ldt-SaShareTools{
-			text-align:right;
-			float:right;
-		}
-		
-		
-		#Ldt-PlaceHolder{
-			position:absolue;
-			float:none;
-		}
-		
-		.Ldt-mode-radio{
-			visibility:hidden;
-			height:0px;
-			display:none
-		}
-		
-		.Ldt-Control1{
-			width:60px;
-			float:left;
-		}
-		.Ldt-Control2{
-			padding-left:10px;
-			width:60px;
-			float:left;
-		}
-		.Ldt-cleaner {
-			clear:both;
-		} 
-		.share {
-			background:url('imgs/widget20.png') no-repeat scroll 0 0 transparent ;
-			display:block;
-			height:16px;
-			line-height:16px !important;
-			overflow:hidden;
-			width:16px;
-			float:left;
-			cursor:pointer;
-			margin:2px;
-		}
-		.shareFacebook{
-			background-position:0 -704px;
-		}
-		.shareMySpace{
-			background-position:0 -736px;
-		}
-		.shareTwitter{
-			background-position:0 -1072px;
-		}
-		.shareGoogle{
-			background-position:0 -752px;
-		}
-		.shareDelicious{
-			background-position:0 -672px;
-		}
-		.shareJamesPot{
-			background-position:0 -1808px;
-		}
-		
-		
\ No newline at end of file
+/* Some general styling classes */
+
+.Ldt-floatClear {
+    display: block; width: 100%; height: 0; clear: both;
+}
+
+ul.Ldt-floatList {
+    padding: 0; margin: 0; list-style: none;
+}
+
+.Ldt-floatList li {
+    float: left;
+}
+
+
+/* */
+
+#demo-frame > div.demo { padding: 5px !important; };
+
+button.ui-button-icon-only  {
+  height:1.5em;
+  width:1.5em;
+}
+
+#Ldt-loader {
+    background:url(imgs/loader.gif) center no-repeat;
+    text-indent: -9999px;
+    position: absolute;
+}
+
+/* general class for all buttons */
+.Ldt-button {
+
+}
+
+.Ldt-SegmentsWidget {
+ /* overflow: auto; /* clear the floats */
+  margin-top: 1px;
+  padding-bottom: 8px; /* FIXME: only a temporary fix. This should be put into the layout manager. */
+}
+
+.Ldt-iri-chapter {
+  position: absolute;
+  height: 10px;
+  border-right: 1px solid white;
+}
+
+.Ldt-SegmentPositionMarker {
+  position: absolute;
+  z-index: 100;
+  width: 1px;
+  height: 10px;
+  background-color: white;
+}
+.tooltip {
+  display:none;
+  background:transparent url(imgs/white_arrow_mini.png);
+  font-size:12px;
+  height:55px;
+  width:180px;
+  padding:10px;
+  padding-left:15px;
+  padding-top:15px;
+  padding-right:15px;
+  color:#000;
+  font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
+}
+#Ldt-Root{
+  font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
+}
+#Ldt-Hat{
+  height:3px;
+}
+
+.Ldt-AnnotationsWidget {
+  font-size: 12px;
+  font-family: "Arial",  "Verdana", "sans-serif";
+  background-color:#eeeeee;
+  background:url('imgs/wire_pattern.png') repeat scroll transparent ;
+  border: 1px solid #b6b8b8;
+}
+
+.Ldt-Annotation-DoubleBorder {
+  border: 1px solid white;
+  overflow: auto;
+}
+
+.Ldt-AnnotationContent {
+  padding:5px;
+  padding-left: 12px;
+
+}
+
+.Ldt-fbShare {
+  display: block;
+  float: left;
+  width: 24px;
+  height: 24px;
+  background:url('imgs/facebook.png');
+}
+
+.Ldt-TwShare {
+  display: block;
+  float: left;
+  width: 24px;
+  height: 24px;
+  background:url('imgs/twitter.png');
+}
+
+.Ldt-GplusShare {
+  display: block;
+  float: left;
+  width: 24px;
+  height: 24px;
+  background:url('imgs/google.png');
+}
+
+.Ldt-SaTitle{
+  padding-top:2px;
+  padding-bottom:3px;
+  font-size: 12pt;
+  color : #0068c4;
+}
+
+.Ldt-SaDescription{
+  font-size:12px;
+}
+
+.Ldt-SaKeywords {  
+  font-weight:bold;  
+  font-size:10px;
+}
+
+.Ldt-AnnotationShareIcons {
+  float:right;
+  position: relative;
+}
+
+
+#Ldt-PlaceHolder{
+  position:absolue;
+  float:none;
+}
+
+.Ldt-Segments{
+  float:left;
+  font-size: 62.5%;
+}
+
+.Ldt-mode-radio{
+  visibility:hidden;
+  height:0px;
+  display:none
+}
+
+/* player */
+.Ldt-controler {
+  font-size: 10px;
+  font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
+  background:url('imgs/player_gradient.png') repeat-x transparent ;
+  height: 25px;
+  border: 1px solid #b6b8b8;
+  position: relative;
+}
+
+
+.Ldt-LeftPlayerControls {
+  float:left;
+}
+
+.Ldt-RightPlayerControls {
+  float: right;
+}
+
+.Ldt-Ctrl-button {
+  float: left;
+  width: 30px; height: 25px;
+  background: url('imgs/player-sprites.png');
+  cursor: pointer;
+}
+
+.Ldt-Ctrl-spacer {
+    float: left; width: 1px; height: 25px; background: #b6b8b8;
+}
+
+.Ldt-CtrlPlay {
+  margin: 0 15px;
+}
+
+.Ldt-CtrlPlay-PlayState {
+  background-position: 0 0;
+}
+
+.Ldt-CtrlPlay-PlayState:hover {
+  background-position: 0 -25px;
+}
+
+.Ldt-CtrlPlay-PlayState:active {
+  background-position: 0 -50px;
+}
+
+.Ldt-CtrlPlay-PauseState {
+  background-position: -30px 0;
+}
+
+.Ldt-CtrlPlay-PauseState:hover {
+  background-position: -30px -25px;
+}
+
+.Ldt-CtrlPlay-PauseState:active {
+  background-position: -30px -50px;
+}
+
+
+.Ldt-CtrlAnnotate {
+  margin: 0 2px;
+  background-position: -60px 0;
+}
+
+.Ldt-CtrlAnnotate:hover {
+  background-position: -60px -25px;
+}
+
+.Ldt-CtrlAnnotate:active {
+  background-position: -60px -50px;
+}
+
+.Ldt-CtrlSearch {
+  margin: 0 2px;
+  background-position: -90px 0;
+}
+
+.Ldt-CtrlSearch:hover {
+  background-position: -90px -25px;
+}
+
+.Ldt-CtrlSearch:active {
+  background-position: -90px -50px;
+}
+
+.LdtSearch {
+  display: none;
+  width: 165px;
+  height: 25px;
+  border: 1px;
+  border-color: #CFCFCF;
+  float: left;
+  text-align: center;
+}
+
+.Ldt-Time {
+  float: left;
+  margin: 5px;
+  font-size: 12px;
+  font-family: Arial, Verdana, sans-serif;
+}
+
+.Ldt-ElapsedTime {
+  float: left;
+  color: #4a4a4a;
+}
+
+.Ldt-TimeSeparator {
+  margin: 0 4px;      
+  float: left;
+}
+
+.Ldt-TotalTime {
+  float: left;
+  color: #b2b2b2; 
+}
+
+.Ldt-CtrlSound {
+  margin: 0 2px;
+}
+
+.Ldt-CtrlSound-Full {
+  background-position: -120px 0;
+}
+
+.Ldt-CtrlSound-Full:hover {
+  background-position: -120px -25px;
+}
+
+.Ldt-CtrlSound-Full:active {
+  background-position: -120px -50px;
+}
+
+.Ldt-CtrlSound-Mute {
+  background-position: -150px 0;
+}
+
+.Ldt-CtrlSound-Mute:hover {
+  background-position: -150px -25px;
+}
+
+.Ldt-CtrlSound-Mute:active {
+  background-position: -150px -50px;
+}
+
+.Ldt-CtrlSound-Half {
+  background-position: -180px 0;
+}
+
+.Ldt-CtrlSound-Half:hover {
+  background-position: -180px -25px;
+}
+
+.Ldt-CtrlSound-Half:active {
+  background-position: -180px -50px;
+}
+
+.Ldt-Ctrl-Volume-Control {
+    display: none;
+  position: absolute;
+  background:url('imgs/player_gradient.png') repeat-x transparent ;
+  height: 25px;
+  width: 100px; top: 25px; right: -1px; z-index: 100;
+  padding: 0 2px;
+  border: 1px solid #b6b8b8;
+}
+
+.Ldt-Ctrl-Volume-Bar { 
+    height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px;
+}
+
+.Ldt-Ctrl-Volume-Cursor {
+    position: absolute; top: 2px; width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px;
+    cursor: pointer;
+}
+
+.Ldt-Ctrl-Volume-Control:hover .Ldt-Ctrl-Volume-Cursor {
+     background: #F7268E;
+}
+
+.Ldt-cleaner {
+  clear:both;
+}
+
+/* Arrow Widget */
+.Ldt-arrowWidget {
+  position: relative;
+
+  height:16px;
+  width:27px;
+  margin-bottom: -3px;
+  z-index: 4;
+  left: 0%;
+}
+
+.Ldt-arrowLeftEdge {
+  background:url('imgs/left_edge_arrow.png') no-repeat scroll 0 0 transparent ;
+}
+
+.Ldt-arrowCenter {
+  background:url('imgs/arrow.png') no-repeat scroll 0 0 transparent ;
+}
+
+.Ldt-arrowRightEdge {
+  background:url('imgs/right_edge_arrow.png') no-repeat scroll 0 0 transparent ;
+}
+
+.cleaner {
+  clear:both;
+}
+
+.share {
+  background:url('imgs/widget20.png') no-repeat scroll 0 0 transparent ;
+  display:block;
+  height:16px;
+  line-height:16px !important;
+  overflow:hidden;
+  width:16px;
+  float:left;
+  cursor:pointer;
+  margin:2px;
+}
+.shareFacebook{
+  background-position:0 -704px;
+}
+.shareMySpace{
+  background-position:0 -736px;
+}
+.shareTwitter{
+  background-position:0 -1072px;
+}
+.shareGoogle{
+  background-position:0 -752px;
+}
+.shareDelicious{
+  background-position:0 -672px;
+}
+.shareJamesPot{
+  background-position:0 -1808px;
+}
+
+.tip{
+  position: absolute;
+  padding : 3px;
+  z-index: 10000000000;
+  max-width: 200px;
+  background: transparent url("imgs/white_arrow_long.png");
+  font-size: 12px;
+  height: 115px;
+  width: 180px;
+  padding: 15px 15px 20px;
+  color: black;
+  font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
+  overflow:hidden;
+}
+
+.tipcolor {
+    float: left; margin: 2px 4px 2px 0;
+}
+
+.tip img {
+    max-width: 140px; max-height: 70px; margin: 0 20px;
+}
+
+/* slider */
+.Ldt-SliderMinimized {
+  height: 6px;
+}
+
+.Ldt-SliderMaximized {
+  height: 11px;
+}
+
+.Ldt-sliderElementMinimized {
+  width: 100%;
+  height: 5px;
+}
+
+.Ldt-sliderElementMaximized {
+  width: 100%;
+  height: 10px;
+}
+
+.Ldt-sliderBackground  {
+  background-color: #B6B8B8;
+  position: absolute;
+  z-index: 2;
+  bottom: 1px;
+  width: 100%;
+  height: 5px;
+
+}
+
+.Ldt-sliderForeground  {
+  background-color: #747474;
+  z-index: 2;
+  width: 0px;
+  position: absolute;
+  bottom: 1px;
+  height: 5px;
+}
+
+.Ldt-sliderPositionMarker {
+  position: absolute;
+  z-index: 100;
+  background-color: #f7268e;
+  height: 5px;
+  width: 5px;
+  bottom: 1px;
+  border-left: 1px solid white;
+  border-right: 1px solid white;
+}
+
+/* tweet Widget */
+.Ldt-tweetWidget {
+  font-size: 12px;
+  font-family: "Arial",  "Verdana", "sans-serif";
+  background:url('imgs/wire_pattern.png') repeat scroll transparent ;
+  border: 1px solid #b6b8b8;
+  border-top: none;
+  overflow: auto;
+}
+
+.Ldt-tweet-DoubleBorder {
+  border: 1px solid white;
+  padding: 5px;
+  overflow: auto;
+}
+
+.Ldt-tweetAvatar {
+  float: left;
+}
+
+.Ldt-tweetAvatar-profileArrow {
+  float: left;
+  height: 48px;
+  margin-left: 5px;
+  margin-right: 5px;
+  background:url('imgs/profile_arrow.png');
+  background-position: 7 10px;
+}
+
+.Ldt-tweet_userHandle {
+   float: left;
+   color: #5c8df1;
+}
+
+.Ldt-tweet_realName {
+  float: left;
+  margin-left: 3px;
+}
+
+.Ldt-tweetContents {
+}
+
+.Ldt-tweet_date {
+  float: left;
+}
+
+.Ldt-tweetWidgetKeepOpen {
+  position: relative;
+  float: right;
+  height: 17px;
+  width: 17px;
+  margin-right: 1px;
+  background:url('imgs/minimize.png');
+}
+
+.Ldt-tweetWidgetMinimize {
+  position: relative;
+  float: right;
+  height: 17px;
+  width: 17px;
+  right: 9px;
+  background:url('imgs/minimize.png');
+}
+
+.Ldt-tweetWidget * a:link {
+  color: #729efa;
+
+}
+
+.Ldt-TweetReply {
+  float: left;
+  margin-left: 16px;
+}
+
+.Ldt-TweetReplyIcon {
+  background:url('imgs/reply_sprite.png') no-repeat scroll 0 0 transparent ;
+  width: 14px;
+  height: 11px;
+  float: left;
+  margin-top: 2px;
+}
+
+.Ldt-TweetReplyIcon:hover {
+  background-position: 0 -11px;
+}
+
+.Ldt-TweetReplyIcon:active {
+  background-position: 0 -22px;
+}
+
+.Ldt-Retweet {
+  float: left;
+  margin-left: 16px;
+}
+
+.Ldt-RetweetIcon {
+  background:url('imgs/retweet_sprite.png') no-repeat scroll 0 0 transparent ;
+  width: 14px;
+  height: 8px;
+  float: left;
+  margin-top: 3px;
+}
+
+.Ldt-RetweetIcon:hover {
+  background-position: 0 -8px;
+}
+
+.Ldt-RetweetIcon:active {
+  background-position: 0 -16px;
+}
+
+/* styling of a "++" in a tweet */
+.Ldt-PolemicPlusPlus {
+  background-color: #1d973d;
+}
+
+/* styling of a "==" in a tweet */
+.Ldt-PolemicEqualEqual {
+  background-color: #5c8df1
+}
+
+/* styling of a "--" in a tweet */
+.Ldt-PolemicMinusMinus {
+  background-color: #ce0a15;
+}
+
+/* styling of a "??" in a tweet */
+.Ldt-PolemicQuestion {
+  background-color: #c5a62d;
+}
+
+/* the styling of a spacer div */
+.Ldt-spacer {
+  background-color:#eeeeee;
+}
+
+/* sparkline widget */
+.Ldt-sparklineWidget {
+  position: relative;
+  margin-bottom: 5px;
+}
+
+.Ldt-sparkLinePositionMarker {
+  position: absolute;
+  top: 0px;
+  width: 0px;
+  background-color: #333333;
+  border-right: solid 1px pink;
+  z-index: 3;
+  opacity: 0.2;
+}
+
+.Ldt-sparkLine {
+  position: absolute;
+  top: 0px;
+}
+
+.Ldt-sparkLineClickOverlay {
+  position: absolute;
+  width: 640px;
+  height: 60px;
+  z-index: 4;
+  top: 0px;
+  opacity: 0.3;
+}
+
+.Ldt-sliceWidget {
+  position: relative;
+  width: 100%;
+  height: 25px;
+  margin-top: 3px;
+}
+
+.Ldt-sliceBackground {
+  width: 100%;
+  background-color: #b6b8b8;
+  height: 12px;
+}
+
+.Ldt-sliceZone {
+  position: absolute;
+  top: 0px;
+  background:url('imgs/wire_pattern.png') repeat scroll transparent;
+  height: 12px;
+  z-index: 2;
+}
+
+.Ldt-sliceLeftHandle {
+  position: absolute;
+  top: 0px;
+  height: 25px;
+  width: 7px;
+  background:url('imgs/left_handle.gif') no-repeat scroll transparent;
+  z-index: 2;
+}
+
+.Ldt-sliceRightHandle {
+  position: absolute;
+  top: 0px;
+  height: 25px;
+  width: 7px;
+  background:url('imgs/right_handle.gif') no-repeat scroll transparent;
+  z-index: 2;
+}
+
+.Ldt-createAnnotationWidget {
+  font-size: 12px;
+  font-family: "Arial",  "Verdana", "sans-serif";
+  background-color:#eeeeee;
+  background:url('imgs/wire_pattern.png') repeat scroll transparent ;
+  border: 1px solid #b6b8b8;  
+}
+
+.Ldt-createAnnotation-DoubleBorder {
+  border: 1px solid white;
+  overflow: auto;
+  padding: 7px;
+}
+
+.Ldt-createAnnotation-Title {
+  font-size: 12pt;
+  color : #0068c4;  
+  float: left;
+  margin-right: 5px;
+}
+
+.Ldt-createAnnotation-TimeFrame {
+  font-size: 12pt;
+  color : #ff5589;  
+  float: left;
+}
+
+.Ldt-createAnnotation-Container {
+  float: left; width: 100%; clear: both;
+}
+
+.Ldt-createAnnotation-userAvatar { 
+  float: right; 
+  width: 48px;
+  height: 48px;
+  margin: 7px 0;
+  border: 1px solid #babcbc;
+}
+
+.Ldt-createAnnotation-userAvatar img { 
+  float: right; 
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.Ldt-createAnnotation-profileArrow {
+  float: right;
+  vertical-align: top;
+  height: 48px;
+  width: 15px;
+  margin: 7px 5px;
+  background:url('imgs/profile_arrow.png') center no-repeat;
+}
+
+.Ldt-createAnnotation-Description {
+  float: left;
+  width: 520px;
+  height: 56px; padding: 2px;
+  resize: none;
+}
+
+.Ldt-createAnnotation-btnblock {
+   float: left; width: 450px;  margin: 5px 0;
+}
+
+.Ldt-createAnnotation-btnblock label {
+    float: left; margin-left: 12px; margin: 2px 8px 2px 0; font-size: 12px;
+}
+
+.Ldt-createAnnotation-keyword-button {
+  border: 1px solid #ffffff;
+  background-color: #217bcb;
+  color: #ffffff;
+  padding: 3px 4px;
+  cursor: pointer;
+}
+
+.Ldt-createAnnotation-active-button .Ldt-createAnnotation-keyword-button {
+  background-color: #d93c71;
+}
+
+.Ldt-createAnnotation-submitButton {
+  float: right;
+  background-color: #d93c71;
+  color: #ffffff;
+  cursor: pointer;
+  background-image: url('imgs/submit_annotation.png');
+  background-repeat: no-repeat;
+  height: 48px;
+  width: 48px;
+  position: relative;
+  margin-top: 3px;
+  padding: 28px 0 0;
+  font-size: 13px;
+  border: none;
+  text-align: center;
+}
+
+.Ldt-createAnnotation-endScreen {
+  background-color: #ffffff;
+  margin-left: 5px;
+  margin-right: 5px;
+  border: 1px solid #d6d6d6;
+  padding: 10px;
+  font-size: 13px;
+  font-weight: bold;
+  color : #f7268e;
+  text-align: center;
+}
+
+.Ldt-createAnnotation-errorMessage {
+  color: #D93C71;
+}
+
+.Ldt-createAnnotation-Minimize {
+  position: relative;
+  float: right;
+  height: 17px;
+  width: 17px;
+  right: 0px;
+  background:url('imgs/minimize.png');
+}
+
+/* polemic tweet annotation buttons */
+
+.Ldt-createAnnotation-polemic-button {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  margin-right: 2px;
+  width: 38px;
+  height: 26px;
+  text-indent: -999px;
+  background: url(imgs/polemic_buttons_sprite.png);
+  cursor: pointer;
+}
+
+.Ldt-createAnnotation-polemic-positive:hover {
+    background-position: 0 -26px;
+}
+.Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-positive {
+    background-position: 0 -52px;
+}
+
+.Ldt-createAnnotation-polemic-negative {
+    background-position: -38px 0;
+}
+.Ldt-createAnnotation-polemic-negative:hover {
+    background-position: -38px -26px;
+}
+.Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-negative {
+    background-position: -38px -52px;
+}
+
+.Ldt-createAnnotation-polemic-reference {
+    background-position: -76px 0;
+}
+.Ldt-createAnnotation-polemic-reference:hover {
+    background-position: -76px -26px;
+}
+.Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-reference {
+    background-position: -76px -52px;
+}
+
+.Ldt-createAnnotation-polemic-question {
+    background-position: -114px 0;
+}
+.Ldt-createAnnotation-polemic-question:hover {
+    background-position: -114px -26px;
+}
+.Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-question {
+    background-position: -114px -52px;
+}
+
+.Ldt-createAnnotation-spinner {
+	display: inline;
+	width: 16px;
+	height: 16px;
+	background-image('imgs/spinner.gif');
+}
+
+.Ldt-createAnnotation-endScreen-TweetLink {
+	width: 54px;
+	height: 20px;
+	background-image('imgs/tweet_button.png');
+}
+
+.Ldt-createAnnotation-endScreen-FbLink {
+	width: 55px;
+	height: 20px;
+	background-image('imgs/facebook_button.png');
+}
+
+.Ldt-createAnnotation-endScreen-GplusLink {
+	width: 50px;
+	height: 20px;
+	background-image('imgs/gplus_button.png');
+}
+/* AnnotationsListWidget */
+
+.Ldt-AnnotationsListWidget {
+  font-size: 12px;
+  font-family: "Arial",  "Verdana", "sans-serif";
+  border: 1px solid #b6b8b8;
+  overflow: auto;
+  max-height: 480px;
+}
+
+ul.Ldt-AnnotationsList-ul {
+  list-style: none;
+  padding: 0 3px;
+}
+
+li.Ldt-AnnotationsList-li {
+  cursor: pointer;
+  float: left; width: 100%; clear: both;
+  margin: 2px 0; padding: 2px 0;
+}
+
+.Ldt-AnnotationsList-li:hover {
+  background-color: #e9e9e9;
+}
+
+.Ldt-AnnotationsList-highlight {
+    background: #F7268E; color: #ffffff;
+}
+
+.Ldt-AnnotationsListWidget a {
+  text-decoration: none;
+}
+
+.Ldt-AnnotationsList-Thumb-Placeholder {
+  float: left;
+  height: 64px;
+  width: 64px;
+  background-image: url('imgs/video_sequence.png');
+}
+
+.Ldt-AnnotationsList-Thumbnail {
+    border: none;
+    float: left;
+    max-width: 64px;
+    max-height: 64px;
+}
+
+.Ldt-AnnotationsList-Duration {  
+  color : #f7268e;
+  float: right; text-align: right;
+}
+
+.Ldt-AnnotationsList-Title {
+  color: #0068c4;
+  font-size: 13px;
+  margin: 0 0 2px 64px;
+}
+
+.Ldt-AnnotationsList-Description {
+    clear: both;
+    margin: 2px 0;
+}
+
+ul.Ldt-AnnotationsList-Tags {
+    width: 100%; list-style: none; clear: both; padding: 0; margin: 2px 0;
+}
+
+li.Ldt-AnnotationsList-Tag-Li {
+    float: left; margin: 2px; background: #0068c4; color: #fff; padding: 4px;
+}
+
+li.Ldt-AnnotationsList-Tag-Li:hover {
+    background: #F7268E;
+}
+
+/* Tagcloud */
+
+.Ldt-TagCloud {
+    font-family: "PT Sans", Arial, Helvetica, sans-serif;
+}
+
+.Ldt-TagCloud ul {
+    list-style: none; padding: 0; margin: 5px; text-align: center;
+}
+
+.Ldt-TagCloud li {
+    display: inline-block; margin: 2px; cursor:pointer; cursor:hand;
+}
+
+.Ldt-TagCloud li:hover {
+    color: #0099ff;
+}
+
+.Ldt-TagCloud-actif {
+    color: #c000c0;
+}