src/css/LdtPlayer.css
branchpopcorn-port
changeset 534 0e6477a03ca9
parent 532 5249bb0cd964
child 537 61fd3968ab06
equal deleted inserted replaced
533:7cc5988bb9a1 534:0e6477a03ca9
     1     #demo-frame > div.demo { padding: 5px !important; };
     1 #demo-frame > div.demo { padding: 5px !important; };
     2 
     2 
     3     button.ui-button-icon-only  {
     3 button.ui-button-icon-only  {
     4       height:1.5em;
     4   height:1.5em;
     5       width:1.5em;
     5   width:1.5em;
     6     }
     6 }
     7 
     7 
     8     #Ldt-loader {
     8 #Ldt-loader {
     9       background:url(imgs/loader.gif) no-repeat;
     9   background:url(imgs/loader.gif) no-repeat;
    10       width:20px;
    10   width:20px;
    11       height:16px;
    11   height:16px;
    12       float:left;
    12   float:left;
    13     }
    13 }
    14 
    14 
    15    /* general class for all buttons */
    15 /* general class for all buttons */
    16    .Ldt-button {
    16 .Ldt-button {
    17 
    17 
    18    }
    18 }
    19 
    19 
    20     .Ldt-SegmentsWidget {
    20 .Ldt-SegmentsWidget {
    21      /* overflow: auto; /* clear the floats */
    21  /* overflow: auto; /* clear the floats */
    22       margin-top: 1px;
    22   margin-top: 1px;
    23       padding-bottom: 8px; /* FIXME: only a temporary fix. This should be put into the layout manager. */
    23   padding-bottom: 8px; /* FIXME: only a temporary fix. This should be put into the layout manager. */
    24     }
    24 }
    25 
    25 
    26     .Ldt-iri-chapter {
    26 .Ldt-iri-chapter {
    27       position: absolute;
    27   position: absolute;
    28       height: 10px;
    28   height: 10px;
    29       border-right: 1px solid white;
    29   border-right: 1px solid white;
    30     }
    30 }
    31 
    31 
    32     .Ldt-SegmentPositionMarker {
    32 .Ldt-SegmentPositionMarker {
    33       position: absolute;
    33   position: absolute;
    34       z-index: 100;
    34   z-index: 100;
    35       width: 1px;
    35   width: 1px;
    36       height: 10px;
    36   height: 10px;
    37       background-color: white;
    37   background-color: white;
    38     }
    38 }
    39     .tooltip {
    39 .tooltip {
    40       display:none;
    40   display:none;
    41       background:transparent url(imgs/white_arrow_mini.png);
    41   background:transparent url(imgs/white_arrow_mini.png);
    42       font-size:12px;
    42   font-size:12px;
    43       height:55px;
    43   height:55px;
    44       width:180px;
    44   width:180px;
    45       padding:10px;
    45   padding:10px;
    46       padding-left:15px;
    46   padding-left:15px;
    47       padding-top:15px;
    47   padding-top:15px;
    48       padding-right:15px;
    48   padding-right:15px;
    49       color:#000;
    49   color:#000;
    50       font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    50   font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    51     }
    51 }
    52     #Ldt-Root{
    52 #Ldt-Root{
    53       font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    53   font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    54     }
    54 }
    55     #Ldt-Hat{
    55 #Ldt-Hat{
    56       height:3px;
    56   height:3px;
    57     }
    57 }
    58 
    58 
    59     .Ldt-AnnotationsWidget {
    59 .Ldt-AnnotationsWidget {
    60       font-size: 12px;
    60   font-size: 12px;
    61       font-family: "Arial",  "Verdana", "sans-serif";
    61   font-family: "Arial",  "Verdana", "sans-serif";
    62       background-color:#eeeeee;
    62   background-color:#eeeeee;
    63       background:url('imgs/wire_pattern.png') repeat scroll transparent ;
    63   background:url('imgs/wire_pattern.png') repeat scroll transparent ;
    64       border: 1px solid #b6b8b8;
    64   border: 1px solid #b6b8b8;
    65     }
    65 }
    66 
    66 
    67     .Ldt-Annotation-DoubleBorder {
    67 .Ldt-Annotation-DoubleBorder {
    68       border: 1px solid white;
    68   border: 1px solid white;
    69       overflow: auto;
    69   overflow: auto;
    70     }
    70 }
    71 
    71 
    72     .Ldt-AnnotationContent {
    72 .Ldt-AnnotationContent {
    73       padding:5px;
    73   padding:5px;
    74       padding-left: 12px;
    74   padding-left: 12px;
    75 
    75 
    76     }
    76 }
    77 
    77 
    78     .Ldt-SaTitle{
    78 .Ldt-SaTitle{
    79       padding-top:2px;
    79   padding-top:2px;
    80       padding-bottom:3px;
    80   padding-bottom:3px;
    81       font-size: 12pt;
    81   font-size: 12pt;
    82       color : #0068c4;
    82   color : #0068c4;
    83     }
    83 }
    84 
    84 
    85     .Ldt-SaDescription{
    85 .Ldt-SaDescription{
    86       font-size:12px;
    86   font-size:12px;
    87     }
    87 }
    88 
    88 
    89     .Ldt-SaKeyword{
    89 .Ldt-SaKeyword{
    90       background-color:#b9b9b9;
    90   background-color:#b9b9b9;
    91       color:#4D4D4D;
    91   color:#4D4D4D;
    92       padding:5px;
    92   padding:5px;
    93       font-weight:bold;
    93   font-weight:bold;
    94       text-align:left;
    94   text-align:left;
    95       float:left;
    95   float:left;
    96       font-size:10px;
    96   font-size:10px;
    97     }
    97 }
    98 
    98 
    99     .Ldt-AnnotationShareIcons {
    99 .Ldt-AnnotationShareIcons {
   100       float:right;
   100   float:right;
   101       position: relative;
   101   position: relative;
   102     }
   102 }
   103 
   103 
   104 
   104 
   105     #Ldt-PlaceHolder{
   105 #Ldt-PlaceHolder{
   106       position:absolue;
   106   position:absolue;
   107       float:none;
   107   float:none;
   108     }
   108 }
   109 
   109 
   110     .Ldt-Segments{
   110 .Ldt-Segments{
   111       float:left;
   111   float:left;
   112       font-size: 62.5%;
   112   font-size: 62.5%;
   113     }
   113 }
   114 
   114 
   115     .Ldt-mode-radio{
   115 .Ldt-mode-radio{
   116       visibility:hidden;
   116   visibility:hidden;
   117       height:0px;
   117   height:0px;
   118       display:none
   118   display:none
   119     }
   119 }
   120 
   120 
   121     /* player */
   121 /* player */
   122     .Ldt-controler {
   122 .Ldt-controler {
   123       font-size: 62.5%;
   123   font-size: 62.5%;
   124       font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
   124   font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
   125       background:url('imgs/player_gradient.png') repeat-x transparent ;
   125   background:url('imgs/player_gradient.png') repeat-x transparent ;
   126       height: 25px;
   126   height: 25px;
   127       border-top: 1px solid #b6b8b8;
   127   border-top: 1px solid #b6b8b8;
   128       border-bottom: 1px solid #b6b8b8;
   128   border-bottom: 1px solid #b6b8b8;
   129     }
   129 }
   130 
   130 
       
   131 
       
   132 .Ldt-LeftPlayerControls {
       
   133   float:left;
       
   134 }
       
   135 
       
   136 .Ldt-RightPlayerControls {
       
   137   float: right;
       
   138 }
       
   139 
       
   140 .Ldt-button {
       
   141   border-left: 1px solid #b6b8b8;
       
   142   float: left;
       
   143   cursor: pointer;
   131  
   144  
   132     .Ldt-LeftPlayerControls {
   145 }
   133       float:left;
   146 
   134     }
   147 .Ldt-CtrlPlay {
   135 
   148   background:url('imgs/play_sprite.png') no-repeat transparent ;
   136     .Ldt-RightPlayerControls {
   149   background-position: 0 0;
   137       float: right;
   150   width: 59px;
   138     }
   151   height: 25px;
   139 
   152 }
   140     .Ldt-button {
   153 
   141       border-left: 1px solid #b6b8b8;
   154 .Ldt-CtrlPlay:hover {
   142       float: left;
   155   background-position: 0 -25px;
   143       cursor: pointer;
   156 }
   144      
   157 
   145     }
   158 .Ldt-CtrlPlay:active {
   146 
   159   background-position: 0 -50px;
   147     .Ldt-CtrlPlay {
   160 }
   148       background:url('imgs/play_sprite.png') no-repeat transparent ;
   161 
   149       background-position: 0 0;
   162 .Ldt-CtrlAnnotate {
   150       width: 59px;
   163   background:url('imgs/annotate_sprite.png') no-repeat scroll 0 0 transparent ;
   151       height: 25px;
   164   width: 33px;
   152     }
   165   height: 25px;
   153 
   166   border-right: 1px solid #b6b8b8;
   154     .Ldt-CtrlPlay:hover {
   167   float: left;
   155       background-position: 0 -25px;
   168 }
   156     }
   169 
   157 
   170 .Ldt-CtrlAnnotate:hover {
   158     .Ldt-CtrlPlay:active {
   171   background-position: 0 -25px;
   159       background-position: 0 -50px;
   172 }
   160     }
   173 
   161 
   174 .Ldt-CtrlAnnotate:active {
   162     .Ldt-CtrlAnnotate {
   175   background-position: 0 -50px;
   163       background:url('imgs/annotate_sprite.png') no-repeat scroll 0 0 transparent ;
   176 }
   164       width: 33px;
   177 
   165       height: 25px;
   178 .Ldt-CtrlSearch {
   166       border-right: 1px solid #b6b8b8;
   179   background:url('imgs/search_sprite.png') no-repeat scroll 0 0 transparent ;
   167       float: left;
   180   width: 33px;
   168     }
   181   height: 25px;
   169 
   182   border-right: 1px solid #b6b8b8;
   170     .Ldt-CtrlAnnotate:hover {
   183   float: left;
   171       background-position: 0 -25px;
   184   border-left: none;
   172     }
   185 }
   173 
   186 
   174     .Ldt-CtrlAnnotate:active {
   187 .Ldt-CtrlSearch:hover {
   175       background-position: 0 -50px;
   188   background-position: 0 -25px;
   176     }
   189 }
   177 
   190 
   178     .Ldt-CtrlSearch {
   191 .Ldt-CtrlSearch:active {
   179       background:url('imgs/search_sprite.png') no-repeat scroll 0 0 transparent ;
   192   background-position: 0 -50px;
   180       width: 33px;
   193 }
   181       height: 25px;
   194 
   182       border-right: 1px solid #b6b8b8;
   195 
   183       float: left;
   196 .Ldt-Time {
   184       border-left: none;
   197   position: inherit;
   185     }
   198   float: left;
   186 
   199   border-right: 1px solid #b6b8b8;
   187     .Ldt-CtrlSearch:hover {
   200   height: 25px;
   188       background-position: 0 -25px;
   201   padding-right: 2px;
   189     }
   202   font-size: 12px;
   190 
   203   font-family: Arial, Verdana, sans-serif;
   191     .Ldt-CtrlSearch:active {
   204 }
   192       background-position: 0 -50px;
   205 
   193     }
   206 .Ldt-ElapsedTime {
   194 
   207   margin-top: 4px;
   195 
   208   margin-right: 2px;
   196     .Ldt-Time {
   209   float: left;
   197       position: inherit;
   210   color: #4a4a4a;
   198       float: left;
   211 }
   199       border-right: 1px solid #b6b8b8;
   212 
   200       height: 25px;
   213 .Ldt-TimeSeparator {
   201       padding-right: 2px;
   214   margin-top: 4px;      
   202       font-size: 12px;
   215   float: left;
   203       font-family: Arial, Verdana, sans-serif;
   216   padding-left: 1px;
   204     }
   217   padding-right: 1px;
   205     
   218 }
   206     .Ldt-ElapsedTime {
   219 
   207       margin-top: 4px;
   220 .Ldt-TotalTime {
   208       margin-right: 2px;
   221   margin-top: 4px;
   209       float: left;
   222   margin-left: 2px;
   210       color: #4a4a4a;
   223   float: left;
   211     }
   224   color: #b2b2b2; 
   212     
   225 }
   213     .Ldt-TimeSeparator {
   226 
   214       margin-top: 4px;      
   227 .Ldt-CtrlSound {
   215       float: left;
   228   background:url('imgs/sound_sprite.png') no-repeat scroll 0 0 transparent ;
   216       padding-left: 1px;
   229   width: 33px;
   217       padding-right: 1px;
   230   height: 25px;
   218     }
   231   border-right: 1px solid #b6b8b8;
   219 
   232   float: right;
   220     .Ldt-TotalTime {
   233   border-left: none;
   221       margin-top: 4px;
   234 }
   222       margin-left: 2px;
   235 
   223       float: left;
   236 .Ldt-CtrlSound:hover {
   224       color: #b2b2b2; 
   237   background-position: 0 -25px;
   225     }
   238 }
   226 
   239 
   227     .Ldt-CtrlSound {
   240 .Ldt-CtrlSound:active {
   228       background:url('imgs/sound_sprite.png') no-repeat scroll 0 0 transparent ;
   241   background-position: 0 -50px;
   229       width: 33px;
   242 }
   230       height: 25px;
       
   231       border-right: 1px solid #b6b8b8;
       
   232       float: right;
       
   233       border-left: none;
       
   234     }
       
   235 
       
   236     .Ldt-CtrlSound:hover {
       
   237       background-position: 0 -25px;
       
   238     }
       
   239 
       
   240     .Ldt-CtrlSound:active {
       
   241       background-position: 0 -50px;
       
   242     }
       
   243 /*
   243 /*
   244     .Ldt-CtrlSound {
   244 .Ldt-CtrlSound {
   245       float: right;
   245   float: right;
   246       border-left: none;
   246   border-left: none;
   247       height: 25px;
   247   height: 25px;
   248       top: 7px;
   248   top: 7px;
   249       position: inherit;
   249   position: inherit;
   250     }
   250 }
   251 */    
   251 */    
   252     .Ldt-cleaner {
   252 .Ldt-cleaner {
   253       clear:both;
   253   clear:both;
   254     }
   254 }
   255 
   255 
   256     /* Arrow Widget */
   256 /* Arrow Widget */
   257     .Ldt-arrowWidget {
   257 .Ldt-arrowWidget {
   258       position: relative;
   258   position: relative;
   259       background:url('imgs/arrow.png') no-repeat scroll 0 0 transparent ;
   259   background:url('imgs/arrow.png') no-repeat scroll 0 0 transparent ;
   260       height:16px;
   260   height:16px;
   261       width:27px;
   261   width:27px;
   262       margin-bottom: -3px;
   262   margin-bottom: -3px;
   263       z-index: 4;
   263   z-index: 4;
   264       left: 0%;
   264   left: 0%;
   265     }
   265 }
   266  
   266 
   267     .cleaner {
   267 .cleaner {
   268       clear:both;
   268   clear:both;
   269     }
   269 }
   270 
   270 
   271     .share {
   271 .share {
   272       background:url('imgs/widget20.png') no-repeat scroll 0 0 transparent ;
   272   background:url('imgs/widget20.png') no-repeat scroll 0 0 transparent ;
   273       display:block;
   273   display:block;
   274       height:16px;
   274   height:16px;
   275       line-height:16px !important;
   275   line-height:16px !important;
   276       overflow:hidden;
   276   overflow:hidden;
   277       width:16px;
   277   width:16px;
   278       float:left;
   278   float:left;
   279       cursor:pointer;
   279   cursor:pointer;
   280       margin:2px;
   280   margin:2px;
   281     }
   281 }
   282     .shareFacebook{
   282 .shareFacebook{
   283       background-position:0 -704px;
   283   background-position:0 -704px;
   284     }
   284 }
   285     .shareMySpace{
   285 .shareMySpace{
   286       background-position:0 -736px;
   286   background-position:0 -736px;
   287     }
   287 }
   288     .shareTwitter{
   288 .shareTwitter{
   289       background-position:0 -1072px;
   289   background-position:0 -1072px;
   290     }
   290 }
   291     .shareGoogle{
   291 .shareGoogle{
   292       background-position:0 -752px;
   292   background-position:0 -752px;
   293     }
   293 }
   294     .shareDelicious{
   294 .shareDelicious{
   295       background-position:0 -672px;
   295   background-position:0 -672px;
   296     }
   296 }
   297     .shareJamesPot{
   297 .shareJamesPot{
   298       background-position:0 -1808px;
   298   background-position:0 -1808px;
   299     }
   299 }
   300 
   300 
   301     .tip{
   301 .tip{
   302     /* why not absolute instead of fixed ? because the div containing the tooltip widget is not a subdiv of its parent
   302 /* why not absolute instead of fixed ? because the div containing the tooltip widget is not a subdiv of its parent
   303                            widget */
   303                        widget */
   304       /*position : fixed;  */
   304   /*position : fixed;  */
   305       position:fixed;
   305   position:fixed;
   306       padding : 3px;
   306   padding : 3px;
   307       z-index: 10000000000;
   307   z-index: 10000000000;
   308       max-width: 200px;
   308   max-width: 200px;
   309       background: transparent url("imgs/white_arrow_long.png");
   309   background: transparent url("imgs/white_arrow_long.png");
   310       font-size: 12px;
   310   font-size: 12px;
   311       height: 125px;
   311   height: 125px;
   312       width: 180px;
   312   width: 180px;
   313       padding: 10px;
   313   padding: 10px;
   314       padding-left: 15px;
   314   padding-left: 15px;
   315       padding-top: 15px;
   315   padding-top: 15px;
   316       padding-right: 15px;
   316   padding-right: 15px;
   317       color: black;
   317   color: black;
   318       font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
   318   font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
   319       overflow:hidden;
   319   overflow:hidden;
   320     }
   320 }
   321 
   321 
   322     /* slider */
   322 /* slider */
   323     .Ldt-SliderMinimized {
   323 .Ldt-SliderMinimized {
   324       height: 6px;
   324   height: 6px;
   325     }
   325 }
   326 
   326 
   327     .Ldt-SliderMaximized {
   327 .Ldt-SliderMaximized {
   328       height: 11px;
   328   height: 11px;
   329     }
   329 }
   330 
   330 
   331     .Ldt-sliderElementMinimized {
   331 .Ldt-sliderElementMinimized {
   332       width: 100%;
   332   width: 100%;
   333       height: 5px;
   333   height: 5px;
   334     }
   334 }
   335 
   335 
   336     .Ldt-sliderElementMaximized {
   336 .Ldt-sliderElementMaximized {
   337       width: 100%;
   337   width: 100%;
   338       height: 10px;
   338   height: 10px;
   339     }
   339 }
   340 
   340 
   341     .Ldt-sliderBackground  {
   341 .Ldt-sliderBackground  {
   342       background-color: #B6B8B8;
   342   background-color: #B6B8B8;
   343       position: absolute;
   343   position: absolute;
   344       z-index: 2;
   344   z-index: 2;
   345       bottom: 1px;
   345   bottom: 1px;
   346       width: 100%;
   346   width: 100%;
   347       height: 5px;
   347   height: 5px;
   348  
   348 
   349     }
   349 }
   350 
   350 
   351     .Ldt-sliderForeground  {
   351 .Ldt-sliderForeground  {
   352       background-color: #747474;
   352   background-color: #747474;
   353       z-index: 2;
   353   z-index: 2;
   354       width: 0px;
   354   width: 0px;
   355       position: absolute;
   355   position: absolute;
   356       bottom: 1px;
   356   bottom: 1px;
   357       height: 5px;
   357   height: 5px;
   358     }
   358 }
   359 
   359 
   360     .Ldt-sliderPositionMarker {
   360 .Ldt-sliderPositionMarker {
   361       position: absolute;
   361   position: absolute;
   362       z-index: 100;
   362   z-index: 100;
   363       background-color: #f7268e;
   363   background-color: #f7268e;
   364       height: 5px;
   364   height: 5px;
   365       width: 5px;
   365   width: 5px;
   366       bottom: 1px;
   366   bottom: 1px;
   367       border-left: 1px solid white;
   367   border-left: 1px solid white;
   368       border-right: 1px solid white;
   368   border-right: 1px solid white;
   369     }
   369 }
   370 
   370 
   371     /* tweet Widget */
   371 /* tweet Widget */
   372     .Ldt-tweetWidget {
   372 .Ldt-tweetWidget {
   373       font-size: 12px;
   373   font-size: 12px;
   374       font-family: "Arial",  "Verdana", "sans-serif";
   374   font-family: "Arial",  "Verdana", "sans-serif";
   375       background:url('imgs/wire_pattern.png') repeat scroll transparent ;
   375   background:url('imgs/wire_pattern.png') repeat scroll transparent ;
   376       border: 1px solid #b6b8b8;
   376   border: 1px solid #b6b8b8;
   377       border-top: none;
   377   border-top: none;
   378       overflow: auto;
   378   overflow: auto;
   379     }
   379 }
   380 
   380 
   381     .Ldt-tweet-DoubleBorder {
   381 .Ldt-tweet-DoubleBorder {
   382       border: 1px solid white;
   382   border: 1px solid white;
   383       padding: 5px;
   383   padding: 5px;
   384       overflow: auto;
   384   overflow: auto;
   385     }
   385 }
   386 
   386 
   387     .Ldt-tweetAvatar {
   387 .Ldt-tweetAvatar {
   388       float: left;
   388   float: left;
   389     }
   389 }
   390 
   390 
   391     .Ldt-tweetAvatar-profileArrow {
   391 .Ldt-tweetAvatar-profileArrow {
   392       float: left;
   392   float: left;
   393       height: 48px;
   393   height: 48px;
   394       margin-left: 5px;
   394   margin-left: 5px;
   395       margin-right: 5px;
   395   margin-right: 5px;
   396     }
   396 }
   397 
   397 
   398     .Ldt-tweet_userHandle {
   398 .Ldt-tweet_userHandle {
   399        float: left;
   399    float: left;
   400        color: #5c8df1;
   400    color: #5c8df1;
   401     }
   401 }
   402 
   402 
   403     .Ldt-tweet_realName {
   403 .Ldt-tweet_realName {
   404       float: left;
   404   float: left;
   405       margin-left: 3px;
   405   margin-left: 3px;
   406     }
   406 }
   407 
   407 
   408     .Ldt-tweetContents {
   408 .Ldt-tweetContents {
   409     }
   409 }
   410 
   410 
   411     .Ldt-tweet_date {
   411 .Ldt-tweet_date {
   412       float: left;
   412   float: left;
   413     }
   413 }
   414 
   414 
   415     .Ldt-tweetWidgetKeepOpen {
   415 .Ldt-tweetWidgetKeepOpen {
   416       position: relative;
   416   position: relative;
   417       float: right;
   417   float: right;
   418       height: 17px;
   418   height: 17px;
   419       width: 17px;
   419   width: 17px;
   420       margin-right: 1px;
   420   margin-right: 1px;
   421     }
   421 }
   422 
   422 
   423     .Ldt-tweetWidgetMinimize {
   423 .Ldt-tweetWidgetMinimize {
   424       position: relative;
   424   position: relative;
   425       float: right;
   425   float: right;
   426       height: 17px;
   426   height: 17px;
   427       width: 17px;
   427   width: 17px;
   428       right: 9px;
   428   right: 9px;
   429     }
   429 }
   430 
   430 
   431     .Ldt-tweetWidget * a:link {
   431 .Ldt-tweetWidget * a:link {
   432       color: #729efa;
   432   color: #729efa;
   433 
   433 
   434     }
   434 }
   435 
   435 
   436     .Ldt-TweetReply {
   436 .Ldt-TweetReply {
   437       float: left;
   437   float: left;
   438       margin-left: 16px;
   438   margin-left: 16px;
   439     }
   439 }
   440 
   440 
   441     .Ldt-TweetReplyIcon {
   441 .Ldt-TweetReplyIcon {
   442       background:url('imgs/reply_sprite.png') no-repeat scroll 0 0 transparent ;
   442   background:url('imgs/reply_sprite.png') no-repeat scroll 0 0 transparent ;
   443       width: 14px;
   443   width: 14px;
   444       height: 11px;
   444   height: 11px;
   445       float: left;
   445   float: left;
   446       margin-top: 2px;
   446   margin-top: 2px;
   447     }
   447 }
   448 
   448 
   449     .Ldt-TweetReplyIcon:hover {
   449 .Ldt-TweetReplyIcon:hover {
   450       background-position: 0 -11px;
   450   background-position: 0 -11px;
   451     }
   451 }
   452 
   452 
   453     .Ldt-TweetReplyIcon:active {
   453 .Ldt-TweetReplyIcon:active {
   454       background-position: 0 -22px;
   454   background-position: 0 -22px;
   455     }
   455 }
   456 
   456 
   457     .Ldt-Retweet {
   457 .Ldt-Retweet {
   458       float: left;
   458   float: left;
   459       margin-left: 16px;
   459   margin-left: 16px;
   460     }
   460 }
   461 
   461 
   462     .Ldt-RetweetIcon {
   462 .Ldt-RetweetIcon {
   463       background:url('imgs/retweet_sprite.png') no-repeat scroll 0 0 transparent ;
   463   background:url('imgs/retweet_sprite.png') no-repeat scroll 0 0 transparent ;
   464       width: 14px;
   464   width: 14px;
   465       height: 8px;
   465   height: 8px;
   466       float: left;
   466   float: left;
   467       margin-top: 3px;
   467   margin-top: 3px;
   468     }
   468 }
   469 
   469 
   470     .Ldt-RetweetIcon:hover {
   470 .Ldt-RetweetIcon:hover {
   471       background-position: 0 -8px;
   471   background-position: 0 -8px;
   472     }
   472 }
   473 
   473 
   474     .Ldt-RetweetIcon:active {
   474 .Ldt-RetweetIcon:active {
   475       background-position: 0 -16px;
   475   background-position: 0 -16px;
   476     }
   476 }
   477 
   477 
   478     /* styling of a "++" in a tweet */
   478 /* styling of a "++" in a tweet */
   479     .Ldt-PolemicPlusPlus {
   479 .Ldt-PolemicPlusPlus {
   480       background-color: #1d973d;
   480   background-color: #1d973d;
   481     }
   481 }
   482 
   482 
   483     /* styling of a "==" in a tweet */
   483 /* styling of a "==" in a tweet */
   484     .Ldt-PolemicEqualEqual {
   484 .Ldt-PolemicEqualEqual {
   485       background-color: #5c8df1
   485   background-color: #5c8df1
   486     }
   486 }
   487 
   487 
   488     /* styling of a "--" in a tweet */
   488 /* styling of a "--" in a tweet */
   489     .Ldt-PolemicMinusMinus {
   489 .Ldt-PolemicMinusMinus {
   490       background-color: #ce0a15;
   490   background-color: #ce0a15;
   491     }
   491 }
   492 
   492 
   493     /* styling of a "??" in a tweet */
   493 /* styling of a "??" in a tweet */
   494     .Ldt-PolemicQuestion {
   494 .Ldt-PolemicQuestion {
   495       background-color: #c5a62d;
   495   background-color: #c5a62d;
   496     }
   496 }
   497 
   497 
   498     /* the styling of a spacer div */
   498 /* the styling of a spacer div */
   499     .Ldt-spacer {
   499 .Ldt-spacer {
   500       background-color:#eeeeee;
   500   background-color:#eeeeee;
   501     }
   501 }
   502     
   502 
   503     /* sparkline widget */
   503 /* sparkline widget */
   504     .Ldt-sparklineWidget {
   504 .Ldt-sparklineWidget {
   505       position: relative;
   505   position: relative;
   506       margin-bottom: 5px;
   506   margin-bottom: 5px;
   507     }
   507 }
   508     
   508 
   509     .Ldt-sparkLinePositionMarker {
   509 .Ldt-sparkLinePositionMarker {
   510       position: absolute;
   510   position: absolute;
   511       top: 0px;
   511   top: 0px;
   512       width: 0px;
   512   width: 0px;
   513       background-color: #333333;
   513   background-color: #333333;
   514       border-right: solid 1px pink;
   514   border-right: solid 1px pink;
   515       z-index: 3;
   515   z-index: 3;
   516       opacity: 0.2;
   516   opacity: 0.2;
   517     }
   517 }
   518     
   518 
   519     .Ldt-sparkLine {
   519 .Ldt-sparkLine {
   520       position: absolute;
   520   position: absolute;
   521       top: 0px;
   521   top: 0px;
   522     }
   522 }
   523     
   523 
   524     .Ldt-sparkLineClickOverlay {
   524 .Ldt-sparkLineClickOverlay {
   525       position: absolute;
   525   position: absolute;
   526       width: 640px;
   526   width: 640px;
   527       height: 60px;
   527   height: 60px;
   528       z-index: 4;
   528   z-index: 4;
   529       top: 0px;
   529   top: 0px;
   530       opacity: 0.3;
   530   opacity: 0.3;
   531     }
   531 }