﻿@charset "UTF-8";
br.clearer {
    clear: both;
    display: block;
}

.timeline {
    overflow: hidden;
    position: relative;
    margin-left: -40px;
    margin-right: -40px;
    margin-top: 40px;
    margin-bottom: -40px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2EzYzhlYyIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.8) 0%, rgba(163, 200, 236, 0.8) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(163, 200, 236, 0.8)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.8) 0%, rgba(163, 200, 236, 0.8) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0.8) 0%, rgba(163, 200, 236, 0.8) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.8) 0%, rgba(163, 200, 236, 0.8) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, rgba(163, 200, 236, 0.8) 100%);
    /* W3C */
}

.timeline * {
    padding: 0;
    margin: 0;
}

.timeline #left_arrow,
.timeline #right_arrow {
    z-index: 1;
    position: absolute;
    top: 100px;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

.timeline #left_arrow.disabled,
.timeline #right_arrow.disabled {
    opacity: .2;
    filter: alpha(opacity=20);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    cursor: default;
}

.timeline #left_arrow {
    left: -8px;
    background: url(../images/timeline/arrow_left.png) center center no-repeat;
}

.timeline #right_arrow {
    right: -8px;
    background: url(../images/timeline/arrow_right.png) center center no-repeat;
}

.decades_menu {
    background: #2a86d0;
    height: 78px;
    position: relative;
}

.decades_menu #decades-slider {
    position: absolute;
    top: 54px;
    left: 3%;
    width: 88.3%;
    height: 11px;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    width: 56px;
    height: 11px;
    background: url(../images/timeline/slider.png) no-repeat center center;
    cursor: pointer;
}

.decades_menu ul {
    background: url(../images/timeline/dot.png) 0 59px repeat-x;
    height: 45px;
    padding: 15px 20px 40px;
    margin: 0;
    display: table;
    width: 100%
}

.decades_menu ul li {
    display: table-cell;
}

.decades_menu ul li a {
    text-decoration: none;
    text-align: center;
    display: block;
    color: #fff;
}

.decades_menu ul li a.selected {
    color: #fff;
}

.decades_menu ul li a.selected,
.decades_menu ul li a:hover {
    text-decoration: underline;
}

.decades_menu ul li a.disabled,
.decades_menu ul li a.disabled:hover {
    text-decoration: none;
    color: #a3c8ec !important;
    cursor: default;
}

.years_container {
    margin-right: 45px;
    overflow: hidden;
}

.years {
    position: relative;
    width: 25000px;
}

.years .year {
    background: url(../images/timeline/dash.png) 38px 8px no-repeat;
    float: left;
    text-align: left;
    width: 300px;
    padding: 30px 0 0 36px;
}

.years .year h4,
.years .year p {
    margin-right: 12px;
}

.years .year p {
    font-size: 14px;
}

.years .year h3 {
    font-size: 26px;
    color: #2a86d0;
    font-weight: lighter;
    margin-bottom: 10px;
}

.years .year .event {
    margin-bottom: 15px;
    margin-left: 3px;
}

.years .year .event img {
    padding: 10px 0px 10px 0px;
    display: block;
}

.years .year .event blockquote {
    margin: 0;
    font-size: 30px;
    line-height: 90%;
    margin-top: 10px;
    text-indent: -10px;
}

.years .year h4 {
    font-size: 18px;
    font-weight: bold;
}

.years .year h3,
.years .year h4 {}

@media only screen and (max-width: 959px) {
    .decades_menu ul {
        padding-left: 30px;
        padding-right: 30px;
    }
    .decades_menu #decades-slider {
        left: 4%;
        width: 85.3%;
    }
    .years_container {
        margin-right: 140px;
    }
}

@media only screen and (max-width: 767px) {
    .timeline {
        margin: 20px 0 30px;
    }
    #left_arrow,
    #right_arrow {
        display: none;
    }
    .decades_menu {
        display: none;
    }
    .years_container {
        background: none;
    }
    .years {
        left: 0 !important;
        width: 100%;
    }
    .years .year {
        background: none;
        float: none;
        text-align: left;
        width: 100%;
        padding: 0;
    }
    .years .year h3 {
        font-size: 20px;
    }
    .years .year h4 {
        font-size: 16px;
        margin-bottom: 5px;
    }
    .years .year p {
        font-size: 16px;
    }
}