@font-face {
    font-family: 'GothicMedium';
    src: url('../fonts/gothammedium.ttf');
}

#timeline {
    padding:10px;
    width:940px;
    position: relative;
    float:left;
    font-family: 'GothicMedium', 'Helvetica', sans-serif;
}

#timeline-container{
    overflow:hidden;
    height:615px;
    position: relative;
    width:906px;
    padding-left:20px;
    padding-top:5px;
    padding-right:20px;
    margin:0px 0 0 10px;
    background-image: url("../images/interactive-timeline/background.png");
}

#view-timeline {
    margin:0px;
    position: relative;
    cursor: pointer;
}

#top-details{
    padding-top:10px;
    width:100%;
    height:305px;
    margin-left:-20px;
}

#bottom-details{
    padding-top:30px;
    width:100%;
    height:305px;
    margin-left:-20px;
}

#directions{
    position:absolute;
    width:900px;
    font-family: 'GothicMedium', 'Helvetica', sans-serif;
    text-align: center;
    margin-top:100px;
    color:#527487;
}

#directions h1{
    font-family: 'GothicMedium', 'Helvetica', sans-serif;
    font-size:30px;
}

.timeline-item {
    display:inline;
    float:left;
    border:0;
}

.timeline-marker {
    position:absolute;
    cursor: pointer;
}

#marker-1925{
    margin:-5px 0 0 14px;
}

#marker-1920s{
    margin:18px 0 0 69px;
    z-index:999999;
}

#marker-1935{
    margin:-5px 0 0 133px;
}

#marker-1945{
    margin:18px 0 0 236px;
    z-index:999999;
}

#marker-1950{
    margin:-5px 0 0 347px;
}

#marker-1960{
    margin:18px 0 0 370px;
    z-index:999999;
}

#marker-1980s{
    margin:18px 0 0 563px;
    z-index:999999;
}

#marker-2000s{
    margin:-5px 0 0 603px;
}

#marker-2005{
    margin:-5px 0 0 639px;
}

#marker-2007{
    margin:18px 0 0 751px;
    z-index:999999;
}

#marker-2010{
    margin:-5px 0 0 793px;
}

.item-details {
    display:inline;
    float:left;
    border:0;
    position:absolute;
}

#details-1920s{
    margin:-9px auto auto 20px;
}


#details-1935{
    margin:163px auto auto 140px;
}


#details-1945{
    margin:-9px auto auto 200px;
}

#details-1950{
    margin:21px auto auto 242px;
}

#details-1960{
    margin:-9px auto auto 380px;
}

#details-1980s{
    margin:-9px auto auto 565px;
}

#details-2000s{
    margin:30px auto auto 434px;
}

#details-2005{
    margin:95px auto auto 630px;
}

#details-2007{
    margin:-9px auto auto 755px;
}

#details-2010{
    margin:18px auto auto 810px;
}

.bottom {
    clear: both;
}