.Tl-Main {
font-family: Arial, Helvetica, sans-serif; text-align: left;
position: relative;
}
.Tl-TopBar {
height: 20px; width: 100%;
}
.Tl-Border-Right {
border-right: 1px solid #ccc;
}
.Tl-Border-Left {
border-left: 1px solid #ccc;
}
.Tl-BottomPart {
position: absolute; bottom: 0; left: 0; right: 0;
}
.Tl-MainPart {
float: left; height: 100%; overflow: hidden; position: relative;
}
.Tl-AnotherGroup {
float: left; height: 100%;
}
.Tl-UniversLabels {
list-style: none; margin: 0; padding: 0; border: none;
font-size: 13px; width: 54px; float: left; height: 100%;
}
.Tl-UniversLabels li {
position: relative; float: left; clear: both; width: 100%;
}
.Tl-UniversLabels li:before {
content: "."; position: absolute; height: 1px; text-indent: -9999px;
width: 760px; top: 0; background: #DEDEDE; z-index: 5;
background: -moz-linear-gradient(to right, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
background: -webkit-linear-gradient(left, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
}
.Tl-UniversLabels li:after {
content: "."; position: absolute; height: 0; text-indent: -9999px;
width: 0; right: -8px; top: 50%; margin-top: -6px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid #ffffff; z-index: 5;
}
.Tl-UniversText {
margin-right: 2px;
}
.Tl-Grid {
position: absolute; top: 0; bottom: 0; overflow: hidden;
background: -moz-linear-gradient(to right, #cccccc 0, #f8f8f8 10%, #ffffff 20%, #ffffff 80%, #f8f8f8 90%, #cccccc 100% );
background: -webkit-linear-gradient(left, #cccccc 0, #f8f8f8 10%, #ffffff 20%, #ffffff 80%, #f8f8f8 90%, #cccccc 100% );
}
.Tl-Grid-Column {
position: absolute; top: 20px; bottom: 0; border-left: 1px solid #ccc;
}
.Tl-Grid-Major {
top: 10px; border-left: 1px solid #999;
}
.Tl-Grid-Label {
position: absolute; height: 12px; line-height: 12px; top: -15px; left: 0; font-size: 11px;
z-index: 4; width: 80px; color: #666666;
}
.Tl-Grid-Major .Tl-Grid-Label {
font-weight: bold; color: #000000; top: -5px; left: -5px; background: url(../img/croix.png) left center no-repeat; padding-left: 10px;
}
.Tl-Grid-Now {
position: absolute; top: 0; height: 100%; margin-left: -1px; width: 2px; background: #f000ff;
}
.Tl-Grid-Editing {
position: absolute; top: 0; bottom: -20px; margin-left: -1px; width: 2px; background: #c00000;
}
.Tl-Occurrence {
width: 32px; height: 32px; cursor: pointer; border: 2px solid rgba(255,255,255,.9);
}
.Tl-Occurrence img {
max-width: 100%; max-height: 100%;
}
.Tl-Editing {
border-color: #c00000; z-index: 3;
}
.Tl-OccOnGrid {
position: absolute; margin-left: -2px; margin-top: 8px; background: rgba(0,0,0,.9);
}
.Tl-Overlay-Container {
position: absolute; top: 0;
}
.Tl-Overlay-Box {
position: absolute; width: 0; height: 0; display: none;
}
.Tl-Overlay {
position: absolute; z-index: 6; top: 8px;
}
.Tl-Overlay-Main {
width: 75px; padding: 2px 2px 2px 4px; background: #ffffff;
border: 1px solid #cccccc; box-shadow: 2px 2px 0 #cccccc;
}
.Tl-Overlay-Main:before {
content: "."; position: absolute; height: 0; text-indent: -9999px;
width: 0; left: -8px; top: 25%;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 8px solid #cccccc; z-index: 7;
}
.Tl-Overlay-Main:after {
content: "."; position: absolute; height: 0; text-indent: -9999px;
width: 0; left: -7px; top: 25%;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 8px solid #ffffff; z-index: 8;
}
.Tl-Tooltip-Title {
font-size: 11px; font-weight: bold; color: #000000; line-height: 12px;
}
/**************/
.Tl-Detail {
border: 1px solid #cccccc; margin: 10px 36px 0 54px; padding: 10px; text-align: left;
min-height: 135px; font-size: 12px;
}
.Tl-Detail-Image {
float: left;
}
.Tl-Detail-Title {
font-size: 18px; font-weight: bold; margin-left: 145px;
}
.Tl-Detail-Description {
margin: 5px 0 5px 145px;
}
.Tl-Detail-Bottom {
margin-left: 145px; text-align: right;
}
.Tl-Detail-Date {
float: left; color: #666666;
}
.Tl-Detail-Read {
text-decoration: none; color: #000000;
}
.Tl-Detail-Read:hover {
text-decoration: underline;
}
.Tl-Slider-Container {
width: 36px; float: left; height: 100%;
}
.Tl-Slider-Zoom-In, .Tl-Slider-Zoom-Out {
display: block; width: 20px; height: 20px; margin: 0 8px; background: url(../img/plus-minus.png);
}
.Tl-Slider-Zoom-In:hover {
background-position: -20px 0;
}
.Tl-Slider-Zoom-Out {
background-position: 0 -20px;
}
.Tl-Slider-Zoom-Out:hover {
background-position: -20px -20px;
}
.Tl-Slider {
height: 152px; background: url(../img/slider-bg.png); width: 6px; margin: 6px 15px; border-radius: 0; border: none;
}
.Tl-Slider .ui-slider-handle {
background: #000000; border-radius: 0; margin-bottom: -4px; width: 8px; height: 8px; left: -1px;
border: none;
}