#timeline {
	margin: 10px 0 15px;
	position: relative;
}

.scale_box{font-weight:700;height:67px;;font-size:11px;border-top:1px solid #999;text-align:left;padding:0 0 3px;background:url("../img/scale.gif") 8px 7px no-repeat;}
.table_right_border{border-right: 1px solid #999}

.ftimeline_td_last{border-right-width:1px;}
.ftimeline_th_last{border-right-width:1px;}
#ftimeline .group-fix{display:block;clear:both;visibility:hidden;line-height:0;height:0;}
#ftimeline{border-spacing:0;font-family:sans-serif;background:url("../img/bg.png") 0 54px;width:980px;}
#ftimeline thead th{border:1px solid #999;border-bottom:none;border-right-width:0;font-size:11px;height:54px;text-align:center;vertical-align:middle;width:100px;padding:0;background:url("../img/head.png") repeat-x;color:#000;cursor: w-resize}
#ftimeline thead th span{display:block; padding: 0 5px;}
#ftimeline thead th.first{width:47px;text-align:left;background:#fff;border-left:none;cursor: default}
#ftimeline tbody td.first{width:47px;text-align:left;border-left:none;cursor: default}
#ftimeline thead th.last{border-right-width:1px;}
#ftimeline thead th.selected{background:#666;border:2px solid #666;width:422px;border-top-width:1px;border-bottom:none;font-size:14px;text-align:left;padding-left:11px;color:#fff;}
#ftimeline thead th.selected+th{border-left-width:0;}
#ftimeline thead th.selected+th+th{border-left-width:1px;}
#ftimeline tbody th{height:67px;vertical-align:bottom;font-size:11px;border-top:1px solid #999;text-align:left;padding:0 0 3px;background:url("../img/scale.gif") 8px 7px no-repeat;}
#ftimeline tbody th.last{border-bottom:1px solid #999;}
#ftimeline tbody td{border:1px solid #999;border-top:none;border-right-width:0;font-size:11px;width:100px;vertical-align:top;cursor: w-resize}
#ftimeline tbody td.last{border-right-width:1px;}
#ftimeline tbody td.selected{border:2px solid #666;border-top:none;background:#fff;cursor: default}
#ftimeline tbody td.selected+td{border-left-width:0;}
#ftimeline tbody td.selected+td+td{border-left-width:1px;}
#ftimeline tbody td.selected .box{height:auto !important;margin:0 !important; min-width: 410px;}
#ftimeline tbody td.selected .box.first{border:none;}

#ftimeline tbody td.selected .box small{display:inline;font-size:11px;margin-right:13px;display:block;float:left;line-height:16px;}
#ftimeline tbody td.selected .box strong{font-size:12px;display:block;float:left;width:auto;}
#ftimeline tbody td.selected .box strong .info{font-family:sans-serif;font-size:11px;font-weight:400;display:block;}
#ftimeline tbody td.selected .box .info{visibility:visible;position:static;}
#ftimeline tbody td.selected .box .info p{color:#666;font-size:12px;line-height:130%;margin:5px 0;}
#ftimeline tbody td.selected .box .info img{float:left;margin:3px 8px 5px 0;}
#ftimeline tbody td.selected .box .info ul{list-style:none;padding:0;margin:5px 0;line-height:18px;}
#ftimeline tbody td.selected .box .info ul.float{float:left;width:52%;margin-right:1%;}
#ftimeline tbody td.selected .box .info ul.float.next{width:47%;margin-right:0;}
#ftimeline tbody td.selected .box .info ul.float+ul{width:47%;margin-right:0;}

#content #ftimeline tbody td.selected .box .info ul li {background:none;padding-left:0;}

#ftimeline tbody td.selected .box .info a{color:#333;font-weight:700;}
#ftimeline tbody td small{color:#000;font-size:10px;display:block;}
#ftimeline tbody td strong{color:#000;display:block;font-family:"Times New Roman";width:87px;}
#ftimeline tbody td .box{padding:5px;border-top:1px solid #999;margin-left:3px;width:87px;}/**/
#ftimeline tbody td .box.no-border{border-top:none;}
#ftimeline tbody td .box .info{visibility:hidden;position:absolute;}
#ftimeline .ui-resizable-handle{height:100%;position:absolute;}
#ftimeline .ui-resizable-w{cursor:w-resize;}
#ftimeline .ui-resizable-e{cursor:e-resize;}

/* Per-column heading, only used by the narrow stacked layout below. */
.timeline-col-title{display:none;}

/**
 * Narrow layout for the homepage timeline.
 *
 * The desktop timeline is an interactive, JS pixel-positioned table where the
 * six topic columns are read against a shared time scale. The desktop script
 * is disabled on narrow viewports (see timeline.js), so here the table is
 * linearised with CSS: each topic column becomes a stacked section with its
 * heading, and its entries are listed in their original (newest-first) order,
 * preserving the per-topic chronology.
 */
@media (max-width: 1023px) {
  #timeline {
    margin: 10px 0 15px;
  }

  #ftimeline,
  #ftimeline thead,
  #ftimeline tbody,
  #ftimeline tr,
  #ftimeline > tbody > tr > td {
    display: block;
    width: auto;
  }

  #ftimeline {
    background: none;
    border-spacing: 0;
  }

  /* Drop the column headers row and the time-scale ruler column. */
  #ftimeline thead,
  #ftimeline > tbody > tr > td.first {
    display: none;
  }

  /* Each topic column becomes a stacked section. */
  #ftimeline > tbody > tr > td,
  #ftimeline > tbody > tr > td.selected {
    width: auto !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    cursor: default !important;
  }

  /* Breathing room only under an expanded section. */
  #ftimeline > tbody > tr > td:not(.is-collapsed) {
    padding-bottom: 12px !important;
  }

  /* Collapsible topic header (accordion), collapsed by default. */
  #ftimeline .timeline-col-title {
    display: block;
    position: relative;
    margin: 0 0 3px;
    padding: 14px 40px 14px 12px;
    background: #666;
    color: #fff;
    font-family: "Times New Roman", Times, serif;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  #ftimeline .timeline-col-title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  /* Expanded state: chevron points up. */
  #ftimeline > tbody > tr > td:not(.is-collapsed) .timeline-col-title::after {
    transform: rotate(-135deg);
    margin-top: -2px;
  }

  /* Collapsed state: hide the entries. */
  #ftimeline > tbody > tr > td.is-collapsed .box {
    display: none !important;
  }

  /* Neutralise the JS pixel layout so entries flow naturally. */
  #ftimeline .box,
  #ftimeline td.selected .box {
    position: static !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border-top: 1px solid #ccc;
    cursor: default !important;
  }

  #ftimeline .box.first,
  #ftimeline .box.no-border {
    border-top: none;
  }

  #ftimeline .box small,
  #ftimeline tbody td.selected .box small {
    display: block;
    float: none;
    margin: 0 0 2px;
    color: #666;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
  }

  #ftimeline .box strong,
  #ftimeline tbody td.selected .box strong {
    display: block;
    float: none;
    width: auto !important;
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
  }

  /* Reveal the annotation and "More" link for every entry. */
  #ftimeline .box .info,
  #ftimeline td.selected .box .info {
    visibility: visible !important;
    position: static !important;
    display: block;
  }

  #ftimeline .box .info p {
    margin: 5px 0;
    color: #666;
    font-size: 13px;
    line-height: 1.45;
  }

  #ftimeline .box .info ul {
    list-style: none;
    padding: 0;
    margin: 5px 0;
  }

  #ftimeline .box .info ul.float,
  #ftimeline .box .info ul.float.next {
    float: none;
    width: auto;
    margin-right: 0;
  }

  #ftimeline .group-fix {
    display: none;
  }
}

/**
 * Narrow layout for the homepage hero box.
 */
@media (max-width: 1023px) {
  #hp-main-box {
    width: auto;
    max-width: 100%;
    height: auto;
    /* Photo as a full-width band at the top; its lower half is a dark hatch.
       The dark background-color continues that hatch tone below the image so
       the (white) text always sits on a dark backdrop, never on the photo. */
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-color: #555;
  }

  #hp-messages {
    width: auto;
    height: auto;
    /* Start the text on the hatched lower half, just below the photo
       (photo/hatch split is ~50% of the 980x344 image). */
    padding-top: 18%;
  }

  #hp-messages .hp-message1,
  #hp-messages .hp-message2 {
    float: none;
    width: auto;
    height: auto;
    padding: 8px 16px;
  }

  /* White text - it sits on the dark hatched backdrop. */
  #hp-main-box h1,
  #hp-main-box p,
  #hp-main-box a {
    color: #fff;
  }
}