.Tl-Main {
    border: 1px solid #ccc;
}

.Tl-TopBar {
    height: 25px; border-style: solid none; border-color: #ccc; border-width: 1px;
    background: url(../img/barbgd.png);
}

.Tl-TopBar-Button {
    float: left; background: url(../img/barbgd.png); cursor: pointer;
}

.Tl-TopBar-TextBtn {
    font-size: 12px; height: 15px; padding: 5px;
}

.Tl-TopBar-Button.active, .Tl-TopBar-Button:hover {
    background-position: 0 -25px;
}

.Tl-Border-Right {
    border-right: 1px solid #ccc;
}

.Tl-Border-Left {
    border-left: 1px solid #ccc;
}

.Tl-TopBar-Spacer {
    float: left; height: 25px; width: 25px;
}

.Tl-TopBar-AddButton {
    width: 25px; height: 25px; background: url(../img/sprites.png); background-position: -50px 0;
}

.Tl-TopBar-AddButton.active, .Tl-TopBar-AddButton:hover {
    background-position: -50px -25px;
}

.Tl-TopBar-PreviousButton {
    width: 25px; height: 25px; background: url(../img/sprites.png); background-position: -100px 0;
}

.Tl-TopBar-PreviousButton.active, .Tl-TopBar-PreviousButton:hover {
    background-position: -100px -25px;
}

.Tl-TopBar-NextButton {
    width: 25px; height: 25px; background: url(../img/sprites.png); background-position: -75px 0;
}

.Tl-TopBar-NextButton.active, .Tl-TopBar-NextButton:hover {
    background-position: -75px -25px;
}

.Tl-TopBar-SyncButton {
    width: 25px; height: 25px; background: url(../img/sprites.png); background-position: 0 0;
}

.Tl-TopBar-SyncButton.active, .Tl-TopBar-SyncButton:hover {
    background-position: 0 -25px;
}

.Tl-TopBar-TimeSpan {
    float: left; width: 120px; text-align: center;
}

.Tl-BottomPart {
    position: relative;
}

.Tl-MainPart {
    position: absolute; right: 0; top: 0; bottom: 0; border-left: 1px solid #ccc; right: 0; top: 0; bottom: 0; overflow: hidden;
}

.Tl-UniversLabels {
    list-style: none; margin: 0; padding: 0; border: none;
}

.Tl-Line-Even {
    background: #e0e0e0;
}

.Tl-Layer {
    position: absolute; top: 0; left: 0; height: 100%;
}

.Tl-Grid-Column {
    position: absolute; top: 0; height: 100%; border-left: 1px solid #999;
}
/*
.Tl-Grid-Major {
    z-index: 3; border-left: 1px solid #999;
}
*/
.Tl-Grid-Label {
    position: absolute; height: 12px; bottom: 0; left: 1px; font-size: 10px; z-index: 4; width: 80px;
}

.Tl-Grid-Now {
    position: absolute; top: 0; height: 100%; margin-left: -1px; width: 2px; background: #f000ff;
}

.Tl-Occurrence, .Tl-Cluster {
    position: absolute; width: 19px; height: 22px; background: url(../img/sprites.png); margin-left: -9px; margin-top: -1px; cursor: pointer;
}

.Tl-Occnarrative {
    background-position: 0 -50px;
}

.Tl-Occproduction {
    background-position: -19px -50px;
}

.Tl-Occnarrative.Tl-Editing {
    background-position: 0 -72px;
}

.Tl-Occproduction.Tl-Editing {
    background-position: -19px -72px;
}

.Tl-Occboth {
    background-position: -38px -50px;
}

.Tl-ClusterCount {
    position: absolute; right: 0; top: 0; border: 1px solid #999999; background: #333333;
    padding: 1px 2px; font-size: 9px; color: #ffffff; border-radius: 5px;
}

.Tl-Overlay-Container {
    position: absolute; top: 0;
}

.Tl-Overlay-Box {
    position: absolute; width: 0; height: 0; display: none;
}

.Tl-Overlay {
    position: absolute; left: -105px; bottom: 0; width: 210px;
}

.Tl-Overlay-Main {
    width: 190px; padding: 10px 10px 0; background: url(../img/tooltip.png) top;
}

.Tl-Overlay-Tip {
    width: 210px; height: 20px; background: url(../img/tooltip.png) bottom;
}