rollover over the interface buttons now works as expected.
Also changed the width of the buttons to the correct size.
Resized the width and height of the sprites to be the same as the boxes we display
them in.
#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;
}
/* general class for all buttons */
.Ldt-button {
}
.Ldt-AnnotationsWidget {
font-size: 62.5%;
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
background-color:#eeeeee;
padding:5px;
background:url('imgs/wire_pattern.png') repeat scroll transparent ;
border-color: #b6b8b8;
border-width: 1px;
border-style: solid;
}
.Ldt-SegmentsWidget {
background-color: #b6b8b7;
overflow: auto; /* clear the floats */
}
.Ldt-iri-chapter{
float: left;
height: 10px;
}
.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;
color : #0068c4;
}
#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-SaDescription{
font-size:12px;
}
#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-Segments{
float:left;
font-size: 62.5%;
}
.Ldt-mode-radio{
visibility:hidden;
height:0px;
display:none
}
/* player */
.Ldt-controler {
font-size: 62.5%;
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
background:url('imgs/player_gradient.png') repeat-x transparent ;
height: 25px;
border-top: 1px solid #b6b8b8;
border-bottom: 1px solid #b6b8b8;
}
.Ldt-LeftPlayerControls {
float:left;
}
.Ldt-RightPlayerControls {
float: right;
}
.Ldt-button {
border-left: 1px solid #b6b8b8;
float: left;
}
.Ldt-CtrlPlay {
background:url('imgs/play_sprite.png') no-repeat transparent ;
background-position: 0 0;
width: 59px;
height: 25px;
}
.Ldt-CtrlPlay:hover {
background-position: 0 -25px;
}
.Ldt-CtrlPlay:active {
background-position: 0 -50px;
}
.Ldt-CtrlAnnotate {
background:url('imgs/annotate_sprite.png') no-repeat scroll 0 0 transparent ;
width: 33px;
height: 25px;
border-right: 1px solid #b6b8b8;
float: left;
}
.Ldt-CtrlAnnotate:hover {
background-position: 0 -25px;
}
.Ldt-CtrlAnnotate:active {
background-position: 0 -50px;
}
.Ldt-CtrlSearch {
background:url('imgs/search_sprite.png') no-repeat scroll 0 0 transparent ;
width: 33px;
height: 25px;
border-right: 1px solid #b6b8b8;
float: left;
}
.Ldt-CtrlSearch:hover {
background-position: 0 -25px;
}
.Ldt-CtrlSearch:active {
background-position: 0 -50px;
}
.Ldt-Time {
position: inherit;
float: left;
border-right: 1px solid #b6b8b8;
height: 25px;
padding-right: 2px;
}
.Ldt-ElapsedTime {
margin-top: 5px;
float: left;
color: #4a4a4a;
}
.Ldt-TimeSeparator {
margin-top: 5px;
float: left;
}
.Ldt-TotalTime {
margin-top: 5px;
float: left;
color: #b2b2b2;
}
.Ldt-CtrlSound {
margin-top: 5px;
float: right;
height: 25px;
top: 7px;
position: inherit;
}
.Ldt-cleaner {
clear:both;
}
/* Arrow Widget */
.Ldt-arrowWidget {
position: relative;
background:url('imgs/arrow.png') no-repeat scroll 0 0 transparent ;
height:16px;
width:27px;
margin-bottom: -2px;
left: 0%;
}
.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 : fixed; /* why not absolute instead of fixed ? because the div containing the tooltip widget is not a subdiv of its parent
widget */
padding : 3px;
z-index: 10000000000;
max-width: 200px;
background: transparent url("http://www.polemictweet.com/images/white_arrow_long.png");
font-size: 12px;
height: 125px;
width: 180px;
padding: 10px;
padding-left: 15px;
padding-top: 15px;
padding-right: 15px;
color: black;
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
overflow:hidden;
}
/* 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: blue;
height: 5px;
width: 5px;
top: 0%;
bottom: 1px;
}
.positionMarker {
position: absolute;
z-index: 100;
width: 1px;
height: 20px;
background-color: white;
}
/* tweet Widget */
.Ldt-tweetWidget {
font-size: 62.5%;
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
background:url('imgs/wire_pattern.png') repeat scroll transparent ;
padding:5px;
overflow: auto;
}
.Ldt-tweetAvatar {
float: left;
}
.Ldt-tweetContents {
}
.Ldt-tweetWidgetMinimize {
float: right;
}
/* the styling of a spacer div */
.Ldt-spacer {
background-color:#eeeeee;
}