/* ============ TIMELINER.JS ============= */

.timeline-container {

  border-left: 10px solid #e3e3e3;

  margin: 0px auto;

  width: 100%;

}

.timeline-toggle {

  background: #000;

  border-color: #161616;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  color: #ccc;

  cursor: pointer;

  float: right;

  font-size: 12px;

  margin-right: 0;

  padding: 3px 5px;

  white-space: nowrap;

}

.timeline-wrapper {

  clear: left;

  float: none;

  margin: 0 0 12px;

  width: 100%;

}

.timeline-wrapper h2 {

  background: url(../images/timeline_century_tick.gif) left center no-repeat;

  cursor: pointer;

  font-size: 3em;

  font-weight: 400;

  margin: 0 ;

  padding: 4px 4px 4px 20px;

}

.timeline-wrapper h2 span {

    background: #d97916;

    color: #ffffff;

    letter-spacing: 0.1em;

    line-height: 1.7em;

    padding: 3px 5px 1px;

    font-weight: 800;

    font-size: 41px;

}

.timeline-series {

  clear: left;

  float: none;

  margin: 0 12px 0 0;

  padding: 4px 4px 4px 0;

  position: relative;

  width: 100%;

}

.timeline-series.active {

    margin: 0 12px 0 0;

    padding: 20px 42px 20px 0;

    width: 100%;

    background: #f8f8f8;

    margin-left: 20px;

    border-radius: 8px;

}

.timeline-series dt {

  background: url(../images/timeline_decade_tick.gif) left center no-repeat;

  clear: left;

  font-size: 19px;

  list-style-type: none;

  line-height: 1.2em;

  margin: 0 0 12px;

  padding: 0 0 0 24px;

  white-space: nowrap;

}

.timeline-series dt a {

  color: #353535;

  cursor: pointer;

}

.timeline-series dt a .closed {

  color: #999;

  font-size: 1em;

  margin-left: 0;

}

.timeline-series dt a .open {

  color: #7DBADF;

}

.timeline-series dt a:hover {

  color: #d97916;

}

.timeline-series dd {

  padding-left: 24px;

  width: 100%;

}

.timeline-series .timeline-boxi{

	display: flex;

}

.timeline-series dd h3 {

  color: #999999;

  clear: both;

  float: left;

  font-size: 19px;

  margin: 0;

  white-space: nowrap;

}

.timeline-event-content {

  display: none;

}

.timeline-event-content p {

  clear: left;

  float: left;

  line-height: 1.5em;

  margin: 6px 0 10px;

  width: auto;

}

.timeline-event-content h4 {

      clear: left;

    float: none;

    font-size: 1.4em;

    font-weight: 400;

    margin: 0 0 10px 0;

    padding: 0;

}

.timeline-event-content blockquote {

  border-left: 2px solid #ccc;

  clear: left;

  float: left;

  font-size: 1.8em;

  margin-left: 0;

  padding: 0 30px;

  width: 400px;

}

.timeline-event-content blockquote .attribution {

  font-size: 0.7em;

  text-align: right;

}

.timeline-event-content .media {

  float: none;

  padding: 0 0 12px;

  width: auto;

  min-width: 412px;

  margin-left: 12px;

}

.timeline-event-content .media img {

  border: 2px solid #f0f0f0;

  margin: 0;

	width: 100%;

}

.timeline-event-content .media p {

  font-size: 1.2em;

  margin: 0;

  padding: 0;

}

.timeline-event-content .media a:link,

.timeline-event-content .media a:visited {

  color: #ab221b;

}

.timeline-event-content .media a:hover {

  color: #7DBADF;

}

.clear {

  clear: both;

}



/* Smartphones (landscape and portrait) ----------- */

@media screen and (max-width: 768px) {



    div.timelineToggle {

       float:none;

    }



    .timelineEvent div.media {

        display:none;

        float:none;

    }



    .timelineMinor dt {

       font-size:1.2em;

       white-space: normal;

    }



    .timelineMinor dd h3 {

       font-size:1em;

       white-space: normal;

    }



    div#timelineContainer {

    }



    .timelineMinor dd {

        margin-left:20px;

        padding-left:0;

        width:100%;

    }



    .timelineEvent .media p {

       font-size:1em;

    }



    dl.timelineMinor {

       float:none;

       max-width:80%;

    }



    .timelineEvent p {

       float:none;

       width:100%;

    }



    .timelineEvent blockquote {

       float:none;

       width:200px;

       font-size:1em;

    }

}