/* ------------------ Global ------------------ */


.shadow {
    display: none;
    position: absolute;
    top: 454px;
    left: -5px;
}

.preload {
    display: none;
    text-align: center;
}






/* ----------------- Timeline ----------------- */

/* -- Global -- */
#timeline_container {
    position:relative;
    background-color:#e9e9e9;
    opacity: 0;
}

#timeline {
    /* set your own css here, if needed */
}

#timeline .hidden {
    display: none;
}
/* -- End Global -- */



/* -- Viewport -- */
#timeline .viewport {
    overflow: hidden;
    position: relative;
    /*background: url(../images/background.jpg) no-repeat 0 0;*/
}

/*#timeline .circles {*/
    /*width: 940px;*/
    /*height: 265px;*/
    /*position: absolute;*/
    /*background: url(../images/circles.png) no-repeat 0 0;*/
    /*top: 0;*/
    /*left: 0;*/
/*}*/

#timeline .viewport .images {
    position: absolute;
    padding: 0px;
    margin: 0px;
}

#timeline .viewport .images img{
    float: left;
}
/* -- End Viewport -- */



/* -- Milestones -- */
#timeline .milestones {
    overflow: hidden;
    position: relative;
}

#timeline .milestones .content {
    position: absolute;
    padding: 0px;
    margin: 0px;
}

#timeline .column_first {
    float: left;
    margin: 0;
    padding: 20px 10px;
}

#timeline .column {
    float: left;
    height: 250px;
    margin: 0;
    padding: 20px 10px 20px 9px;
    border-left: 1px solid #ccc;
}

#timeline span {
    display: block;
}

#timeline .date {
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    color: #004799;

}

#timeline .txt {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4;
    color: #333333;
    margin: 8px 0px 0px 0px;
}

#timeline .thumb_description {
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
    color: #6f6f6f;
    clear: left;
}

#timeline .thumb {
    margin: 14px 0px 0px 0px;
}

#timeline .video_rollover, #timeline .image_rollover {
    position:relative;
    float:left;
}

#timeline .video_rollover span, #timeline .image_rollover span {
    left: 0px;
    top: 0px;
    display: none;
    position: absolute;
}
#timeline .video_rollover span, #timeline .image_rollover span {
    background: url('http://www.octapharma.com/fileadmin/templateBootstrap/images/thumb_video_hover.png') no-repeat;
    width: 113px;
    height: 67px;
}

#timeline .image_rollover span {
    /*background: url('../../images/thumb_image_hover.png') no-repeat;*/
    width: 113px;
    height: 67px;
}

#timeline .link {
    font-size: 14px;
    font-weight: normal;
}

#timeline .link a {
    color: #333;
}

#timeline .link a:hover {
    color: #999999;
    text-decoration: underline;
}

#timeline .big_link {
    font-size: 11px;
    font-weight: 700;
    margin: 10px 0px 0px 0px;
    padding: 1px 5px 2px 5px;
    float: left;
    background-color: #bbb;
}

#timeline .big_link a {
    color: #0096ff;
    text-decoration: none;
}

#timeline .big_link a:hover {
    color: #fff;
}

/* -- End Milestones -- */



/* -- Scrollbar -- */
#timeline .scrollbar{
    background: transparent url(http://www.octapharma.com/fileadmin/templateBootstrap/images/scrollbar_background.png) repeat 0 0;
    position: absolute;
}

#timeline .dragger {
    background: transparent url(http://www.octapharma.com/fileadmin/templateBootstrap/images/scrollbar_dragger.png) no-repeat 0 0;
    cursor: pointer;
    position: absolute;
}

#timeline .mark {
    background: transparent url(http://www.octapharma.com/fileadmin/templateBootstrap/images/scrollbar_mark.png) no-repeat 0 0;
    cursor: pointer;
    height: 30px;
    width: 18px;
    left: 600px;
    position: absolute;
    display: none;
    opacity: 0;
}
/* -- End Scrollbar -- */



/* -- Miscellaneous -- */
#timeline .drag_icon {
    cursor:url(../../images/drag_icon.png), e-resize;
}

#timeline .audio_player {
    position: absolute;
    top: 1px;
    right: 7px;
}

/* -- End Miscellaneous -- */

/* tipsy-CSS */

.tipsy { padding: 5px; font-size: 11px; font-weight: 700; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 3px 5px 3px 5px; background-color: white; color: grey; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
/*.tipsy-arrow { position: absolute; background: url('tipsy.gif') no-repeat top left; width: 9px; height: 5px; }*/
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }


/* bootstrap-specific */

.milestones .column ,
.milestones .column:before,
.milestones .column:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}