.timeline-default
{
    overflow-x: hidden;
    overflow-y: scroll;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #0000FF;
}

.footnotes
{
    background: #eee;
    padding: 0.25em;
}

.controls
{
    margin: 1em 0;
    padding: 0.5em;
}

.timeline-duration-event
{
    position: absolute;
    overflow: hidden;
    border: 1px solid blue;
}

.timeline-instant-event2
{
    position: absolute;
    overflow: hidden;
    border-left: 1px solid blue;
    padding-left: 2px;
}

.timeline-instant-event
{
    position: absolute;
    overflow: hidden;
}


.timeline-event-bubble-title
{
    font-weight: bold;
    border-bottom: 1px solid #888;
    margin-bottom: 0.5em;
}


.timeline-event-bubble-wiki
{
    margin: 0.5em;
    text-align: right;
    color: #A0A040;
}
.timeline-event-bubble-wiki a
{
    color: #A0A040;
}


.timeline-event-bubble-image
{
    float: right;
    padding-left: 5px;
    padding-bottom: 5px;
}
.timeline-container
{
    position: relative;
    overflow: hidden;
}

.timeline-copyright
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    cursor: pointer;
}

.timeline-message-container
{
    position: absolute;
    top: 30%;
    left: 35%;
    right: 35%;
    z-index: 1000;
    display: none;
}
.timeline-message
{
    font-size: 120%;
    font-weight: bold;
    text-align: center;
}
.timeline-message img
{
    vertical-align: middle;
}

.timeline-band
{
    position: absolute;
    background: #eee;
    z-index: 10;
}

.timeline-band-inner
{
    position: relative;
    width: 100%;
    height: 100%;
}

.timeline-band-input
{
    position: absolute;
    width: 1em;
    height: 1em;
    overflow: hidden;
    z-index: 0;
}
.timeline-band-input input
{
    width: 0;
}

.timeline-band-layer
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.timeline-band-layer-inner
{
    position: relative;
    width: 100%;
    height: 100%;
}




/*------------------- Horizontal / Vertical lines ----------------*/

/* style for ethers */
.timeline-ether-lines
{
    border-color: #666;
    border-style: dotted;
    position: absolute;
}
.timeline-horizontal .timeline-ether-lines
{
    border-width: 0 0 0 1px;
    height: 100%;
    top: 0;
    width: 1px;
}
.timeline-vertical .timeline-ether-lines
{
    border-width: 1px 0 0;
    height: 1px;
    left: 0;
    width: 100%;
}



/*---------------- Weekends ---------------------------*/
.timeline-ether-weekends
{
    position: absolute;
    background-color: #FFFFE0;
}

.timeline-vertical .timeline-ether-weekends
{
    left: 0;
    width: 100%;
}
.timeline-horizontal .timeline-ether-weekends
{
    top: 0;
    height: 100%;
}


/*-------------------------- HIGHLIGHT DECORATORS -------------------*/
/* Used for decorators, not used for Timeline Highlight              */
.timeline-highlight-decorator, .timeline-highlight-point-decorator
{
    position: absolute;
    overflow: hidden;
}

/* Width of horizontal decorators and Height of vertical decorators is
   set in the decorator function params */
.timeline-horizontal .timeline-highlight-point-decorator, .timeline-horizontal .timeline-highlight-decorator
{
    top: 0;
    height: 100%;
}

.timeline-vertical .timeline-highlight-point-decorator, .timeline-vertical .timeline-highlight-decorator
{
    width: 100%;
    left: 0;
}

.timeline-highlight-point-decorator
{
    background-color: #ff5;
}



/*---------------------------- LABELS -------------------------*/
.timeline-highlight-label
{
    position: absolute;
    overflow: hidden;
    font-size: 200%;
    font-weight: bold;
    color: #000000;
}


/*---------------- VERTICAL LABEL -------------------*/
.timeline-horizontal .timeline-highlight-label
{
    top: 0;
    height: 100%;
}
.timeline-horizontal .timeline-highlight-label td
{
    vertical-align: middle;
}
.timeline-horizontal .timeline-highlight-label-start
{
    text-align: right;
}
.timeline-horizontal .timeline-highlight-label-end
{
    text-align: left;
}


/*---------------- HORIZONTAL LABEL -------------------*/
.timeline-vertical .timeline-highlight-label
{
    left: 0;
    width: 100%;
}
.timeline-vertical .timeline-highlight-label td
{
    vertical-align: top;
}
.timeline-vertical .timeline-highlight-label-start
{
    text-align: center;
}
.timeline-vertical .timeline-highlight-label-end
{
    text-align: center;
}


/*-------------------------------- DATE LABELS --------------------------------*/

/* horizontal */
.timeline-horizontal .timeline-date-label
{
    padding-left: 2px;
}
.timeline-horizontal .timeline-date-label
{
    border-width: 0 0 0 1px;
}
.timeline-horizontal .timeline-date-label-em
{
    height: 2em;
}

/* vertical */
.timeline-vertical .timeline-date-label
{
    padding-top: 2px;
}
.timeline-vertical .timeline-date-label
{
    border-width: 1px 0 0;
}
.timeline-vertical .timeline-date-label-em
{
    width: 7em;
}


/* horizontal */
.timeline-horizontal .timeline-date-label
{
    padding-left: 2px;
}
.timeline-horizontal .timeline-date-label
{
    border-width: 0 0 0 1px;
}
.timeline-horizontal .timeline-date-label-em
{
    height: 2em;
}

/* vertical */
.timeline-vertical .timeline-date-label
{
    padding-top: 2px;
}
.timeline-vertical .timeline-date-label
{
    border-width: 1px 0 0;
}
.timeline-vertical .timeline-date-label-em
{
    width: 7em;
}


/*------------------------------- Ether.highlight -------------------------*/
.timeline-ether-highlight
{
    position: absolute;
    background-color: #000000;
}
.timeline-horizontal .timeline-ether-highlight
{
    top: 2px;
}
.timeline-vertical .timeline-ether-highlight
{
    left: 2px;
}


/*------------------------------ EVENTS ------------------------------------*/
.timeline-event-icon, .timeline-event-label, .timeline-event-tape
{
    position: absolute;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: normal;
}

.timeline-event-tape, .timeline-small-event-tape, .timeline-small-event-icon
{
    background-color: #58A0DC;
    overflow: hidden;
}

.timeline-small-event-tape, .timeline-small-event-icon
{
    position: absolute;
}

.timeline-small-event-icon
{
    width: 1px;
    height: 6px;
}


/*--------------------------------- TIMELINE-------------------------*/
.timeline-ether-bg
{
    width: 100%;
    height: 100%;
}
.timeline-band-2 .timeline-ether-bg
{
    background-color: #0000ff;
}
.timeline-band-3 .timeline-ether-bg
{
    background-color: #ffffff;
}