src/css/LdtPlayer.css
changeset 843 75ba66457232
parent 842 4ae2247a59f4
child 861 05f75ca6b5de
child 868 a525cc2214e7
equal deleted inserted replaced
53:7b55777486c3 843:75ba66457232
     1 		#demo-frame > div.demo { padding: 5px !important; };
     1 /* Some general styling classes */
     2 		
     2 
     3 		button.ui-button-icon-only  {
     3 .Ldt-floatClear {
     4 			height:1.5em;
     4     display: block; width: 100%; height: 0; clear: both;
     5 			width:1.5em;
     5 }
     6 		}
     6 
     7 		
     7 ul.Ldt-floatList {
     8 		#Ldt-loader {
     8     padding: 0; margin: 0; list-style: none;
     9 			background:url(imgs/loader.gif) no-repeat;
     9 }
    10 			width:20px;
    10 
    11 			height:16px;
    11 .Ldt-floatList li {
    12 			float:left;
    12     float: left;
    13 		}
    13 }
    14 		
    14 
    15 		#Ldt-controler {
    15 
    16 			font-size: 62.5%;
    16 /* */
    17 			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    17 
    18 			background-color:#eeeeee;
    18 #demo-frame > div.demo { padding: 5px !important; };
    19 			height:35px;
    19 
    20 			padding:5px;
    20 button.ui-button-icon-only  {
    21 		}
    21   height:1.5em;
    22 		
    22   width:1.5em;
    23 		.Ldt-iri-chapter{
    23 }
    24 			padding-top:10px;
    24 
    25 			padding-bottom:5px;
    25 #Ldt-loader {
    26 			border-left:solid 1px #000;
    26     background:url(imgs/loader.gif) center no-repeat;
    27 			border-right:solid 1px #000;
    27     text-indent: -9999px;
    28 		}
    28     position: absolute;
    29 		
    29 }
    30 		.tooltip {
    30 
    31 			display:none;
    31 /* general class for all buttons */
    32 			background:transparent url(imgs/white_arrow_mini.png);
    32 .Ldt-button {
    33 			font-size:12px;
    33 
    34 			height:55px;
    34 }
    35 			width:180px;
    35 
    36 			padding:10px;
    36 .Ldt-SegmentsWidget {
    37 			padding-left:15px;
    37  /* overflow: auto; /* clear the floats */
    38 			padding-top:15px;
    38   margin-top: 1px;
    39 			padding-right:15px;
    39   padding-bottom: 8px; /* FIXME: only a temporary fix. This should be put into the layout manager. */
    40 			color:#000;	
    40 }
    41 			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    41 
    42 		}
    42 .Ldt-iri-chapter {
    43 		#Ldt-Root{
    43   position: absolute;
    44 			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    44   height: 10px;
    45 		}
    45   border-right: 1px solid white;
    46 		#Ldt-Hat{
    46 }
    47 			height:3px;
    47 
    48 		}
    48 .Ldt-SegmentPositionMarker {
    49 		#Ldt-Annotations{
    49   position: absolute;
    50 			padding-left:5px;
    50   z-index: 100;
    51 			width:470px;
    51   width: 1px;
    52 			float:left;
    52   height: 10px;
    53 			font-size: 62.5%;
    53   background-color: white;
    54 		}
    54 }
    55 		#Ldt-SaTitle{
    55 .tooltip {
    56 			padding-top:2px;
    56   display:none;
    57 			padding-bottom:5px;
    57   background:transparent url(imgs/white_arrow_mini.png);
    58 			font-size:18px;
    58   font-size:12px;
    59 			height:22p;
    59   height:55px;
    60 		}
    60   width:180px;
    61 		#Ldt-SaDescription{
    61   padding:10px;
    62 			font-size:12px;	
    62   padding-left:15px;
    63 		}
    63   padding-top:15px;
    64 		#Ldt-Show-Arrow-container{
    64   padding-right:15px;
    65 			margin-left:60px;
    65   color:#000;
    66 		}
    66   font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    67 		#Ldt-Show-Arrow{
    67 }
    68 			position:relative;
    68 #Ldt-Root{
    69 			background:url(imgs/grey_arrow_Show.png);
    69   font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    70 			width:27px;
    70 }
    71 			height:13px;
    71 #Ldt-Hat{
    72 			margin-top:12px;
    72   height:3px;
    73 			margin-left:-10px;
    73 }
    74 			z-index:999;
    74 
    75 		}
    75 .Ldt-AnnotationsWidget {
    76 
    76   font-size: 12px;
    77 		#Ldt-Show-Tags{
    77   font-family: "Arial",  "Verdana", "sans-serif";
    78 			position:relative;
    78   background-color:#eeeeee;
    79 			height:13px;
    79   background:url('imgs/wire_pattern.png') repeat scroll transparent ;
    80 			margin-top:-10px;
    80   border: 1px solid #b6b8b8;
    81 			border: solid 1px #000;
    81 }
    82 		}
    82 
    83 		#Ldt-ShowAnnotation-video{
    83 .Ldt-Annotation-DoubleBorder {
    84 			position:absolute;
    84   border: 1px solid white;
    85 			z-index: 999;
    85   overflow: auto;
    86 			padding:5px;
    86 }
    87 			background:url(imgs/transBlack.png);
    87 
    88 			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    88 .Ldt-AnnotationContent {
    89 			color:#FFF;	
    89   padding:5px;
    90 		}
    90   padding-left: 12px;
    91 		#Ldt-ShowAnnotation-audio{
    91 
    92 			position:relative;
    92 }
    93 			padding:5px;
    93 
    94 			background-color:#cfcfcf;
    94 .Ldt-fbShare {
    95 			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    95   display: block;
    96 			color:#4D4D4D;	
    96   float: left;
    97 		}
    97   width: 24px;
    98 		#Ldt-SaKeyword{
    98   height: 24px;
    99 			background-color:#b9b9b9;
    99   background:url('imgs/facebook.png');
   100 			color:#4D4D4D;
   100 }
   101 			padding:5px;
   101 
   102 			font-weight:bold;
   102 .Ldt-TwShare {
   103 			text-align:left;
   103   display: block;
   104 			float:left;
   104   float: left;
   105 			font-size:10px;
   105   width: 24px;
   106 		}
   106   height: 24px;
   107 		#Ldt-SaShareTools{
   107   background:url('imgs/twitter.png');
   108 			text-align:right;
   108 }
   109 			float:right;
   109 
   110 		}
   110 .Ldt-GplusShare {
   111 		
   111   display: block;
   112 		
   112   float: left;
   113 		#Ldt-PlaceHolder{
   113   width: 24px;
   114 			position:absolue;
   114   height: 24px;
   115 			float:none;
   115   background:url('imgs/google.png');
   116 		}
   116 }
   117 		
   117 
   118 		.Ldt-mode-radio{
   118 .Ldt-SaTitle{
   119 			visibility:hidden;
   119   padding-top:2px;
   120 			height:0px;
   120   padding-bottom:3px;
   121 			display:none
   121   font-size: 12pt;
   122 		}
   122   color : #0068c4;
   123 		
   123 }
   124 		.Ldt-Control1{
   124 
   125 			width:60px;
   125 .Ldt-SaDescription{
   126 			float:left;
   126   font-size:12px;
   127 		}
   127 }
   128 		.Ldt-Control2{
   128 
   129 			padding-left:10px;
   129 .Ldt-SaKeywords {  
   130 			width:60px;
   130   font-weight:bold;  
   131 			float:left;
   131   font-size:10px;
   132 		}
   132 }
   133 		.Ldt-cleaner {
   133 
   134 			clear:both;
   134 .Ldt-AnnotationShareIcons {
   135 		} 
   135   float:right;
   136 		.share {
   136   position: relative;
   137 			background:url('imgs/widget20.png') no-repeat scroll 0 0 transparent ;
   137 }
   138 			display:block;
   138 
   139 			height:16px;
   139 
   140 			line-height:16px !important;
   140 #Ldt-PlaceHolder{
   141 			overflow:hidden;
   141   position:absolue;
   142 			width:16px;
   142   float:none;
   143 			float:left;
   143 }
   144 			cursor:pointer;
   144 
   145 			margin:2px;
   145 .Ldt-Segments{
   146 		}
   146   float:left;
   147 		.shareFacebook{
   147   font-size: 62.5%;
   148 			background-position:0 -704px;
   148 }
   149 		}
   149 
   150 		.shareMySpace{
   150 .Ldt-mode-radio{
   151 			background-position:0 -736px;
   151   visibility:hidden;
   152 		}
   152   height:0px;
   153 		.shareTwitter{
   153   display:none
   154 			background-position:0 -1072px;
   154 }
   155 		}
   155 
   156 		.shareGoogle{
   156 /* player */
   157 			background-position:0 -752px;
   157 .Ldt-controler {
   158 		}
   158   font-size: 10px;
   159 		.shareDelicious{
   159   font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
   160 			background-position:0 -672px;
   160   background:url('imgs/player_gradient.png') repeat-x transparent ;
   161 		}
   161   height: 25px;
   162 		.shareJamesPot{
   162   border: 1px solid #b6b8b8;
   163 			background-position:0 -1808px;
   163   position: relative;
   164 		}
   164 }
   165 		
   165 
   166 		
   166 
       
   167 .Ldt-LeftPlayerControls {
       
   168   float:left;
       
   169 }
       
   170 
       
   171 .Ldt-RightPlayerControls {
       
   172   float: right;
       
   173 }
       
   174 
       
   175 .Ldt-Ctrl-button {
       
   176   float: left;
       
   177   width: 30px; height: 25px;
       
   178   background: url('imgs/player-sprites.png');
       
   179   cursor: pointer;
       
   180 }
       
   181 
       
   182 .Ldt-Ctrl-spacer {
       
   183     float: left; width: 1px; height: 25px; background: #b6b8b8;
       
   184 }
       
   185 
       
   186 .Ldt-CtrlPlay {
       
   187   margin: 0 15px;
       
   188 }
       
   189 
       
   190 .Ldt-CtrlPlay-PlayState {
       
   191   background-position: 0 0;
       
   192 }
       
   193 
       
   194 .Ldt-CtrlPlay-PlayState:hover {
       
   195   background-position: 0 -25px;
       
   196 }
       
   197 
       
   198 .Ldt-CtrlPlay-PlayState:active {
       
   199   background-position: 0 -50px;
       
   200 }
       
   201 
       
   202 .Ldt-CtrlPlay-PauseState {
       
   203   background-position: -30px 0;
       
   204 }
       
   205 
       
   206 .Ldt-CtrlPlay-PauseState:hover {
       
   207   background-position: -30px -25px;
       
   208 }
       
   209 
       
   210 .Ldt-CtrlPlay-PauseState:active {
       
   211   background-position: -30px -50px;
       
   212 }
       
   213 
       
   214 
       
   215 .Ldt-CtrlAnnotate {
       
   216   margin: 0 2px;
       
   217   background-position: -60px 0;
       
   218 }
       
   219 
       
   220 .Ldt-CtrlAnnotate:hover {
       
   221   background-position: -60px -25px;
       
   222 }
       
   223 
       
   224 .Ldt-CtrlAnnotate:active {
       
   225   background-position: -60px -50px;
       
   226 }
       
   227 
       
   228 .Ldt-CtrlSearch {
       
   229   margin: 0 2px;
       
   230   background-position: -90px 0;
       
   231 }
       
   232 
       
   233 .Ldt-CtrlSearch:hover {
       
   234   background-position: -90px -25px;
       
   235 }
       
   236 
       
   237 .Ldt-CtrlSearch:active {
       
   238   background-position: -90px -50px;
       
   239 }
       
   240 
       
   241 .LdtSearch {
       
   242   display: none;
       
   243   width: 165px;
       
   244   height: 25px;
       
   245   border: 1px;
       
   246   border-color: #CFCFCF;
       
   247   float: left;
       
   248   text-align: center;
       
   249 }
       
   250 
       
   251 .Ldt-Time {
       
   252   float: left;
       
   253   margin: 5px;
       
   254   font-size: 12px;
       
   255   font-family: Arial, Verdana, sans-serif;
       
   256 }
       
   257 
       
   258 .Ldt-ElapsedTime {
       
   259   float: left;
       
   260   color: #4a4a4a;
       
   261 }
       
   262 
       
   263 .Ldt-TimeSeparator {
       
   264   margin: 0 4px;      
       
   265   float: left;
       
   266 }
       
   267 
       
   268 .Ldt-TotalTime {
       
   269   float: left;
       
   270   color: #b2b2b2; 
       
   271 }
       
   272 
       
   273 .Ldt-CtrlSound {
       
   274   margin: 0 2px;
       
   275 }
       
   276 
       
   277 .Ldt-CtrlSound-Full {
       
   278   background-position: -120px 0;
       
   279 }
       
   280 
       
   281 .Ldt-CtrlSound-Full:hover {
       
   282   background-position: -120px -25px;
       
   283 }
       
   284 
       
   285 .Ldt-CtrlSound-Full:active {
       
   286   background-position: -120px -50px;
       
   287 }
       
   288 
       
   289 .Ldt-CtrlSound-Mute {
       
   290   background-position: -150px 0;
       
   291 }
       
   292 
       
   293 .Ldt-CtrlSound-Mute:hover {
       
   294   background-position: -150px -25px;
       
   295 }
       
   296 
       
   297 .Ldt-CtrlSound-Mute:active {
       
   298   background-position: -150px -50px;
       
   299 }
       
   300 
       
   301 .Ldt-CtrlSound-Half {
       
   302   background-position: -180px 0;
       
   303 }
       
   304 
       
   305 .Ldt-CtrlSound-Half:hover {
       
   306   background-position: -180px -25px;
       
   307 }
       
   308 
       
   309 .Ldt-CtrlSound-Half:active {
       
   310   background-position: -180px -50px;
       
   311 }
       
   312 
       
   313 .Ldt-Ctrl-Volume-Control {
       
   314     display: none;
       
   315   position: absolute;
       
   316   background:url('imgs/player_gradient.png') repeat-x transparent ;
       
   317   height: 25px;
       
   318   width: 100px; top: 25px; right: -1px; z-index: 100;
       
   319   padding: 0 2px;
       
   320   border: 1px solid #b6b8b8;
       
   321 }
       
   322 
       
   323 .Ldt-Ctrl-Volume-Bar { 
       
   324     height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px;
       
   325 }
       
   326 
       
   327 .Ldt-Ctrl-Volume-Cursor {
       
   328     position: absolute; top: 2px; width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px;
       
   329     cursor: pointer;
       
   330 }
       
   331 
       
   332 .Ldt-Ctrl-Volume-Control:hover .Ldt-Ctrl-Volume-Cursor {
       
   333      background: #F7268E;
       
   334 }
       
   335 
       
   336 .Ldt-cleaner {
       
   337   clear:both;
       
   338 }
       
   339 
       
   340 /* Arrow Widget */
       
   341 .Ldt-arrowWidget {
       
   342   position: relative;
       
   343 
       
   344   height:16px;
       
   345   width:27px;
       
   346   margin-bottom: -3px;
       
   347   z-index: 4;
       
   348   left: 0%;
       
   349 }
       
   350 
       
   351 .Ldt-arrowLeftEdge {
       
   352   background:url('imgs/left_edge_arrow.png') no-repeat scroll 0 0 transparent ;
       
   353 }
       
   354 
       
   355 .Ldt-arrowCenter {
       
   356   background:url('imgs/arrow.png') no-repeat scroll 0 0 transparent ;
       
   357 }
       
   358 
       
   359 .Ldt-arrowRightEdge {
       
   360   background:url('imgs/right_edge_arrow.png') no-repeat scroll 0 0 transparent ;
       
   361 }
       
   362 
       
   363 .cleaner {
       
   364   clear:both;
       
   365 }
       
   366 
       
   367 .share {
       
   368   background:url('imgs/widget20.png') no-repeat scroll 0 0 transparent ;
       
   369   display:block;
       
   370   height:16px;
       
   371   line-height:16px !important;
       
   372   overflow:hidden;
       
   373   width:16px;
       
   374   float:left;
       
   375   cursor:pointer;
       
   376   margin:2px;
       
   377 }
       
   378 .shareFacebook{
       
   379   background-position:0 -704px;
       
   380 }
       
   381 .shareMySpace{
       
   382   background-position:0 -736px;
       
   383 }
       
   384 .shareTwitter{
       
   385   background-position:0 -1072px;
       
   386 }
       
   387 .shareGoogle{
       
   388   background-position:0 -752px;
       
   389 }
       
   390 .shareDelicious{
       
   391   background-position:0 -672px;
       
   392 }
       
   393 .shareJamesPot{
       
   394   background-position:0 -1808px;
       
   395 }
       
   396 
       
   397 .tip{
       
   398   position: absolute;
       
   399   padding : 3px;
       
   400   z-index: 10000000000;
       
   401   max-width: 200px;
       
   402   background: transparent url("imgs/white_arrow_long.png");
       
   403   font-size: 12px;
       
   404   height: 115px;
       
   405   width: 180px;
       
   406   padding: 15px 15px 20px;
       
   407   color: black;
       
   408   font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
       
   409   overflow:hidden;
       
   410 }
       
   411 
       
   412 .tipcolor {
       
   413     float: left; margin: 2px 4px 2px 0;
       
   414 }
       
   415 
       
   416 .tip img {
       
   417     max-width: 140px; max-height: 70px; margin: 0 20px;
       
   418 }
       
   419 
       
   420 /* slider */
       
   421 .Ldt-SliderMinimized {
       
   422   height: 6px;
       
   423 }
       
   424 
       
   425 .Ldt-SliderMaximized {
       
   426   height: 11px;
       
   427 }
       
   428 
       
   429 .Ldt-sliderElementMinimized {
       
   430   width: 100%;
       
   431   height: 5px;
       
   432 }
       
   433 
       
   434 .Ldt-sliderElementMaximized {
       
   435   width: 100%;
       
   436   height: 10px;
       
   437 }
       
   438 
       
   439 .Ldt-sliderBackground  {
       
   440   background-color: #B6B8B8;
       
   441   position: absolute;
       
   442   z-index: 2;
       
   443   bottom: 1px;
       
   444   width: 100%;
       
   445   height: 5px;
       
   446 
       
   447 }
       
   448 
       
   449 .Ldt-sliderForeground  {
       
   450   background-color: #747474;
       
   451   z-index: 2;
       
   452   width: 0px;
       
   453   position: absolute;
       
   454   bottom: 1px;
       
   455   height: 5px;
       
   456 }
       
   457 
       
   458 .Ldt-sliderPositionMarker {
       
   459   position: absolute;
       
   460   z-index: 100;
       
   461   background-color: #f7268e;
       
   462   height: 5px;
       
   463   width: 5px;
       
   464   bottom: 1px;
       
   465   border-left: 1px solid white;
       
   466   border-right: 1px solid white;
       
   467 }
       
   468 
       
   469 /* tweet Widget */
       
   470 .Ldt-tweetWidget {
       
   471   font-size: 12px;
       
   472   font-family: "Arial",  "Verdana", "sans-serif";
       
   473   background:url('imgs/wire_pattern.png') repeat scroll transparent ;
       
   474   border: 1px solid #b6b8b8;
       
   475   border-top: none;
       
   476   overflow: auto;
       
   477 }
       
   478 
       
   479 .Ldt-tweet-DoubleBorder {
       
   480   border: 1px solid white;
       
   481   padding: 5px;
       
   482   overflow: auto;
       
   483 }
       
   484 
       
   485 .Ldt-tweetAvatar {
       
   486   float: left;
       
   487 }
       
   488 
       
   489 .Ldt-tweetAvatar-profileArrow {
       
   490   float: left;
       
   491   height: 48px;
       
   492   margin-left: 5px;
       
   493   margin-right: 5px;
       
   494   background:url('imgs/profile_arrow.png');
       
   495   background-position: 7 10px;
       
   496 }
       
   497 
       
   498 .Ldt-tweet_userHandle {
       
   499    float: left;
       
   500    color: #5c8df1;
       
   501 }
       
   502 
       
   503 .Ldt-tweet_realName {
       
   504   float: left;
       
   505   margin-left: 3px;
       
   506 }
       
   507 
       
   508 .Ldt-tweetContents {
       
   509 }
       
   510 
       
   511 .Ldt-tweet_date {
       
   512   float: left;
       
   513 }
       
   514 
       
   515 .Ldt-tweetWidgetKeepOpen {
       
   516   position: relative;
       
   517   float: right;
       
   518   height: 17px;
       
   519   width: 17px;
       
   520   margin-right: 1px;
       
   521   background:url('imgs/minimize.png');
       
   522 }
       
   523 
       
   524 .Ldt-tweetWidgetMinimize {
       
   525   position: relative;
       
   526   float: right;
       
   527   height: 17px;
       
   528   width: 17px;
       
   529   right: 9px;
       
   530   background:url('imgs/minimize.png');
       
   531 }
       
   532 
       
   533 .Ldt-tweetWidget * a:link {
       
   534   color: #729efa;
       
   535 
       
   536 }
       
   537 
       
   538 .Ldt-TweetReply {
       
   539   float: left;
       
   540   margin-left: 16px;
       
   541 }
       
   542 
       
   543 .Ldt-TweetReplyIcon {
       
   544   background:url('imgs/reply_sprite.png') no-repeat scroll 0 0 transparent ;
       
   545   width: 14px;
       
   546   height: 11px;
       
   547   float: left;
       
   548   margin-top: 2px;
       
   549 }
       
   550 
       
   551 .Ldt-TweetReplyIcon:hover {
       
   552   background-position: 0 -11px;
       
   553 }
       
   554 
       
   555 .Ldt-TweetReplyIcon:active {
       
   556   background-position: 0 -22px;
       
   557 }
       
   558 
       
   559 .Ldt-Retweet {
       
   560   float: left;
       
   561   margin-left: 16px;
       
   562 }
       
   563 
       
   564 .Ldt-RetweetIcon {
       
   565   background:url('imgs/retweet_sprite.png') no-repeat scroll 0 0 transparent ;
       
   566   width: 14px;
       
   567   height: 8px;
       
   568   float: left;
       
   569   margin-top: 3px;
       
   570 }
       
   571 
       
   572 .Ldt-RetweetIcon:hover {
       
   573   background-position: 0 -8px;
       
   574 }
       
   575 
       
   576 .Ldt-RetweetIcon:active {
       
   577   background-position: 0 -16px;
       
   578 }
       
   579 
       
   580 /* styling of a "++" in a tweet */
       
   581 .Ldt-PolemicPlusPlus {
       
   582   background-color: #1d973d;
       
   583 }
       
   584 
       
   585 /* styling of a "==" in a tweet */
       
   586 .Ldt-PolemicEqualEqual {
       
   587   background-color: #5c8df1
       
   588 }
       
   589 
       
   590 /* styling of a "--" in a tweet */
       
   591 .Ldt-PolemicMinusMinus {
       
   592   background-color: #ce0a15;
       
   593 }
       
   594 
       
   595 /* styling of a "??" in a tweet */
       
   596 .Ldt-PolemicQuestion {
       
   597   background-color: #c5a62d;
       
   598 }
       
   599 
       
   600 /* the styling of a spacer div */
       
   601 .Ldt-spacer {
       
   602   background-color:#eeeeee;
       
   603 }
       
   604 
       
   605 /* sparkline widget */
       
   606 .Ldt-sparklineWidget {
       
   607   position: relative;
       
   608   margin-bottom: 5px;
       
   609 }
       
   610 
       
   611 .Ldt-sparkLinePositionMarker {
       
   612   position: absolute;
       
   613   top: 0px;
       
   614   width: 0px;
       
   615   background-color: #333333;
       
   616   border-right: solid 1px pink;
       
   617   z-index: 3;
       
   618   opacity: 0.2;
       
   619 }
       
   620 
       
   621 .Ldt-sparkLine {
       
   622   position: absolute;
       
   623   top: 0px;
       
   624 }
       
   625 
       
   626 .Ldt-sparkLineClickOverlay {
       
   627   position: absolute;
       
   628   width: 640px;
       
   629   height: 60px;
       
   630   z-index: 4;
       
   631   top: 0px;
       
   632   opacity: 0.3;
       
   633 }
       
   634 
       
   635 .Ldt-sliceWidget {
       
   636   position: relative;
       
   637   width: 100%;
       
   638   height: 25px;
       
   639   margin-top: 3px;
       
   640 }
       
   641 
       
   642 .Ldt-sliceBackground {
       
   643   width: 100%;
       
   644   background-color: #b6b8b8;
       
   645   height: 12px;
       
   646 }
       
   647 
       
   648 .Ldt-sliceZone {
       
   649   position: absolute;
       
   650   top: 0px;
       
   651   background:url('imgs/wire_pattern.png') repeat scroll transparent;
       
   652   height: 12px;
       
   653   z-index: 2;
       
   654 }
       
   655 
       
   656 .Ldt-sliceLeftHandle {
       
   657   position: absolute;
       
   658   top: 0px;
       
   659   height: 25px;
       
   660   width: 7px;
       
   661   background:url('imgs/left_handle.gif') no-repeat scroll transparent;
       
   662   z-index: 2;
       
   663 }
       
   664 
       
   665 .Ldt-sliceRightHandle {
       
   666   position: absolute;
       
   667   top: 0px;
       
   668   height: 25px;
       
   669   width: 7px;
       
   670   background:url('imgs/right_handle.gif') no-repeat scroll transparent;
       
   671   z-index: 2;
       
   672 }
       
   673 
       
   674 .Ldt-createAnnotationWidget {
       
   675   font-size: 12px;
       
   676   font-family: "Arial",  "Verdana", "sans-serif";
       
   677   background-color:#eeeeee;
       
   678   background:url('imgs/wire_pattern.png') repeat scroll transparent ;
       
   679   border: 1px solid #b6b8b8;  
       
   680 }
       
   681 
       
   682 .Ldt-createAnnotation-DoubleBorder {
       
   683   border: 1px solid white;
       
   684   overflow: auto;
       
   685   padding: 7px;
       
   686 }
       
   687 
       
   688 .Ldt-createAnnotation-Title {
       
   689   font-size: 12pt;
       
   690   color : #0068c4;  
       
   691   float: left;
       
   692   margin-right: 5px;
       
   693 }
       
   694 
       
   695 .Ldt-createAnnotation-TimeFrame {
       
   696   font-size: 12pt;
       
   697   color : #ff5589;  
       
   698   float: left;
       
   699 }
       
   700 
       
   701 .Ldt-createAnnotation-Container {
       
   702   float: left; width: 100%; clear: both;
       
   703 }
       
   704 
       
   705 .Ldt-createAnnotation-userAvatar { 
       
   706   float: right; 
       
   707   width: 48px;
       
   708   height: 48px;
       
   709   margin: 7px 0;
       
   710   border: 1px solid #babcbc;
       
   711 }
       
   712 
       
   713 .Ldt-createAnnotation-userAvatar img { 
       
   714   float: right; 
       
   715   display: block;
       
   716   max-width: 100%;
       
   717   max-height: 100%;
       
   718 }
       
   719 
       
   720 .Ldt-createAnnotation-profileArrow {
       
   721   float: right;
       
   722   vertical-align: top;
       
   723   height: 48px;
       
   724   width: 15px;
       
   725   margin: 7px 5px;
       
   726   background:url('imgs/profile_arrow.png') center no-repeat;
       
   727 }
       
   728 
       
   729 .Ldt-createAnnotation-Description {
       
   730   float: left;
       
   731   width: 520px;
       
   732   height: 56px; padding: 2px;
       
   733   resize: none;
       
   734 }
       
   735 
       
   736 .Ldt-createAnnotation-btnblock {
       
   737    float: left; width: 450px;  margin: 5px 0;
       
   738 }
       
   739 
       
   740 .Ldt-createAnnotation-btnblock label {
       
   741     float: left; margin-left: 12px; margin: 2px 8px 2px 0; font-size: 12px;
       
   742 }
       
   743 
       
   744 .Ldt-createAnnotation-keyword-button {
       
   745   border: 1px solid #ffffff;
       
   746   background-color: #217bcb;
       
   747   color: #ffffff;
       
   748   padding: 3px 4px;
       
   749   cursor: pointer;
       
   750 }
       
   751 
       
   752 .Ldt-createAnnotation-active-button .Ldt-createAnnotation-keyword-button {
       
   753   background-color: #d93c71;
       
   754 }
       
   755 
       
   756 .Ldt-createAnnotation-submitButton {
       
   757   float: right;
       
   758   background-color: #d93c71;
       
   759   color: #ffffff;
       
   760   cursor: pointer;
       
   761   background-image: url('imgs/submit_annotation.png');
       
   762   background-repeat: no-repeat;
       
   763   height: 48px;
       
   764   width: 48px;
       
   765   position: relative;
       
   766   margin-top: 3px;
       
   767   padding: 28px 0 0;
       
   768   font-size: 13px;
       
   769   border: none;
       
   770   text-align: center;
       
   771 }
       
   772 
       
   773 .Ldt-createAnnotation-endScreen {
       
   774   background-color: #ffffff;
       
   775   margin-left: 5px;
       
   776   margin-right: 5px;
       
   777   border: 1px solid #d6d6d6;
       
   778   padding: 10px;
       
   779   font-size: 13px;
       
   780   font-weight: bold;
       
   781   color : #f7268e;
       
   782   text-align: center;
       
   783 }
       
   784 
       
   785 .Ldt-createAnnotation-errorMessage {
       
   786   color: #D93C71;
       
   787 }
       
   788 
       
   789 .Ldt-createAnnotation-Minimize {
       
   790   position: relative;
       
   791   float: right;
       
   792   height: 17px;
       
   793   width: 17px;
       
   794   right: 0px;
       
   795   background:url('imgs/minimize.png');
       
   796 }
       
   797 
       
   798 /* polemic tweet annotation buttons */
       
   799 
       
   800 .Ldt-createAnnotation-polemic-button {
       
   801   margin: 0;
       
   802   border: 0;
       
   803   padding: 0;
       
   804   margin-right: 2px;
       
   805   width: 38px;
       
   806   height: 26px;
       
   807   text-indent: -999px;
       
   808   background: url(imgs/polemic_buttons_sprite.png);
       
   809   cursor: pointer;
       
   810 }
       
   811 
       
   812 .Ldt-createAnnotation-polemic-positive:hover {
       
   813     background-position: 0 -26px;
       
   814 }
       
   815 .Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-positive {
       
   816     background-position: 0 -52px;
       
   817 }
       
   818 
       
   819 .Ldt-createAnnotation-polemic-negative {
       
   820     background-position: -38px 0;
       
   821 }
       
   822 .Ldt-createAnnotation-polemic-negative:hover {
       
   823     background-position: -38px -26px;
       
   824 }
       
   825 .Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-negative {
       
   826     background-position: -38px -52px;
       
   827 }
       
   828 
       
   829 .Ldt-createAnnotation-polemic-reference {
       
   830     background-position: -76px 0;
       
   831 }
       
   832 .Ldt-createAnnotation-polemic-reference:hover {
       
   833     background-position: -76px -26px;
       
   834 }
       
   835 .Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-reference {
       
   836     background-position: -76px -52px;
       
   837 }
       
   838 
       
   839 .Ldt-createAnnotation-polemic-question {
       
   840     background-position: -114px 0;
       
   841 }
       
   842 .Ldt-createAnnotation-polemic-question:hover {
       
   843     background-position: -114px -26px;
       
   844 }
       
   845 .Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-question {
       
   846     background-position: -114px -52px;
       
   847 }
       
   848 
       
   849 .Ldt-createAnnotation-spinner {
       
   850 	display: inline;
       
   851 	width: 16px;
       
   852 	height: 16px;
       
   853 	background-image('imgs/spinner.gif');
       
   854 }
       
   855 
       
   856 .Ldt-createAnnotation-endScreen-TweetLink {
       
   857 	width: 54px;
       
   858 	height: 20px;
       
   859 	background-image('imgs/tweet_button.png');
       
   860 }
       
   861 
       
   862 .Ldt-createAnnotation-endScreen-FbLink {
       
   863 	width: 55px;
       
   864 	height: 20px;
       
   865 	background-image('imgs/facebook_button.png');
       
   866 }
       
   867 
       
   868 .Ldt-createAnnotation-endScreen-GplusLink {
       
   869 	width: 50px;
       
   870 	height: 20px;
       
   871 	background-image('imgs/gplus_button.png');
       
   872 }
       
   873 /* AnnotationsListWidget */
       
   874 
       
   875 .Ldt-AnnotationsListWidget {
       
   876   font-size: 12px;
       
   877   font-family: "Arial",  "Verdana", "sans-serif";
       
   878   border: 1px solid #b6b8b8;
       
   879   overflow: auto;
       
   880   max-height: 480px;
       
   881 }
       
   882 
       
   883 ul.Ldt-AnnotationsList-ul {
       
   884   list-style: none;
       
   885   padding: 0 3px;
       
   886 }
       
   887 
       
   888 li.Ldt-AnnotationsList-li {
       
   889   cursor: pointer;
       
   890   float: left; width: 100%; clear: both;
       
   891   margin: 2px 0; padding: 2px 0;
       
   892 }
       
   893 
       
   894 .Ldt-AnnotationsList-li:hover {
       
   895   background-color: #e9e9e9;
       
   896 }
       
   897 
       
   898 .Ldt-AnnotationsList-highlight {
       
   899     background: #F7268E; color: #ffffff;
       
   900 }
       
   901 
       
   902 .Ldt-AnnotationsListWidget a {
       
   903   text-decoration: none;
       
   904 }
       
   905 
       
   906 .Ldt-AnnotationsList-Thumb-Placeholder {
       
   907   float: left;
       
   908   height: 64px;
       
   909   width: 64px;
       
   910   background-image: url('imgs/video_sequence.png');
       
   911 }
       
   912 
       
   913 .Ldt-AnnotationsList-Thumbnail {
       
   914     border: none;
       
   915     float: left;
       
   916     max-width: 64px;
       
   917     max-height: 64px;
       
   918 }
       
   919 
       
   920 .Ldt-AnnotationsList-Duration {  
       
   921   color : #f7268e;
       
   922   float: right; text-align: right;
       
   923 }
       
   924 
       
   925 .Ldt-AnnotationsList-Title {
       
   926   color: #0068c4;
       
   927   font-size: 13px;
       
   928   margin: 0 0 2px 64px;
       
   929 }
       
   930 
       
   931 .Ldt-AnnotationsList-Description {
       
   932     clear: both;
       
   933     margin: 2px 0;
       
   934 }
       
   935 
       
   936 ul.Ldt-AnnotationsList-Tags {
       
   937     width: 100%; list-style: none; clear: both; padding: 0; margin: 2px 0;
       
   938 }
       
   939 
       
   940 li.Ldt-AnnotationsList-Tag-Li {
       
   941     float: left; margin: 2px; background: #0068c4; color: #fff; padding: 4px;
       
   942 }
       
   943 
       
   944 li.Ldt-AnnotationsList-Tag-Li:hover {
       
   945     background: #F7268E;
       
   946 }
       
   947 
       
   948 /* Tagcloud */
       
   949 
       
   950 .Ldt-TagCloud {
       
   951     font-family: "PT Sans", Arial, Helvetica, sans-serif;
       
   952 }
       
   953 
       
   954 .Ldt-TagCloud ul {
       
   955     list-style: none; padding: 0; margin: 5px; text-align: center;
       
   956 }
       
   957 
       
   958 .Ldt-TagCloud li {
       
   959     display: inline-block; margin: 2px; cursor:pointer; cursor:hand;
       
   960 }
       
   961 
       
   962 .Ldt-TagCloud li:hover {
       
   963     color: #0099ff;
       
   964 }
       
   965 
       
   966 .Ldt-TagCloud-actif {
       
   967     color: #c000c0;
       
   968 }