WIP - integrating sprites for the play button.
#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;
}
/* we need a container to contain our buttons because we want
them centered and there's no way to position them this way
while at the same time using sprites
*/
.Ldt-ButtonContainer {
width: 50px;
height: 25px;
border-left: 1px solid #b6b8b8;
border-right: 1px solid #b6b8b8;
float: left;
}
.Ldt-CtrlPlay {
background:url('imgs/play_sprite.png') no-repeat transparent ;
background-position: 0 0;
width: 16px;
height: 25px;
margin: 0 auto;
}
.Ldt-CtrlPlay:hover {
background:url('imgs/play_sprite.png') no-repeat transparent ;
background-position: 0 -25px;
width: 16px;
height: 25px;
margin: 0 auto;
}
.Ldt-CtrlNext {
background:url('imgs/play_sprite.png') no-repeat scroll 0 0 transparent ;
background-position: center;
width: 50px;
height: 25px;
border-right: 1px solid #b6b8b8;
float: left;
}
.Ldt-CtrlSearch {
background:url('imgs/search.png') no-repeat scroll 0 0 transparent ;
background-position: center;
width: 50px;
height: 25px;
border-right: 1px solid #b6b8b8;
float: left;
}
.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;
}