.js-banner{
  position: absolute;
  top: 108px;
}

#pageTitle {
    background-color: #222222;
}

#pageTitle h1 {
  font-family: 'PT Serif', serif;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  display: inline-block;
  line-height: 33px;
  margin: 0;
  padding: 32px 0 37px 5px;
  width: 500px;
}

#pageTitle .timeline-description {
  border-left: 1px solid #676767;
  display: inline-block;
  font-family: Source Sans Pro;
  font-style: italic;
  font-size: 16px;
  color: #a8a8a8;
  line-height: 20px;
  margin: 24px 0 27px 20px;
  padding: 10px 0 12px 21px;
  width: 385px;
}

#pageTitle .page-title-split {
  margin: 0 auto;
  width: 950px;
}

#topBanner {
    width: 100%;
}

#topBanner img {
    margin: 0px auto;
    text-align: center;
    display: block;
}

#timeline-nav {
    width: 957px;
    height: 46px;
    margin: 12px auto 0 auto;
     position: relative;
     left: 0px;
     background: url(/images/webtimeline/Navigation_sprite.png) -3px -7px no-repeat;
}

#timeline-nav a, #timeline-nav span.selected {
    display: inline-block;
    position: relative;
    background: url(/images/webtimeline/Navigation_sprite.png) 0 0 no-repeat transparent;
    width: 157px;
}

#timeline-nav a {
    height: 45px;
    top: -8px;
    outline: none;
}

div#timeline-nav span.selected {
    height: 54px;
    position: relative;
     z-index: 30;
     top: -1px;
}

#timeline-nav #tab2, #timeline-nav #tab3, #timeline-nav #tab4, #timeline-nav #tab5, #timeline-nav #tab6 {
    margin-left: -1px;
}

#timeline-nav #tab1 {
    background-position: -3px -8px;
    width: 182px;
}

#timeline-nav a#tab1:hover {
    background-position: -3px -64px;
}

#timeline-nav span#tab1.selected {
    background-position: -2px -126px;
}

#timeline-nav a#tab2 {
    background-position: -183px -8px;
}

#timeline-nav a#tab2:hover {
    background-position: -183px -64px;
}

#timeline-nav span#tab2.selected {
    background-position: -183px -126px;
}

#timeline-nav a#tab3 {
    background-position: -340px -8px;
}

#timeline-nav a#tab3:hover {
    background-position: -340px -64px;
}

#timeline-nav span#tab3.selected {
    background-position: -340px -126px;
}

#timeline-nav a#tab4 {
    background-position: -496px -8px;
}

#timeline-nav a#tab4:hover {
    background-position: -496px -64px;
}

#timeline-nav span#tab4.selected {
    background-position: -496px -126px;
}

#timeline-nav a#tab5 {
    background-position: -650px -8px;
}

#timeline-nav a#tab5:hover {
    background-position: -650px -64px;
}

#timeline-nav span#tab5.selected {
    background-position: -650px -126px;
}

#timeline-nav a#tab6 {
    background-position: -808px -8px;
    width: 152px;
}

#timeline-nav a#tab6:hover {
    background-position: -808px -64px;
}

#timeline-nav span#tab6.selected {
    background-position: -808px -126px;
    width: 152px;
}

#timeline-head {
    width: 947px;
    height: 90px;
    margin: 5px auto 0 auto;
    -moz-box-shadow: 0 0 7px #ccc;
    -webkit-box-shadow: 0 0 7px #ccc;
    box-shadow: 0 0 7px #ccc;
    border: 1px solid #cfcfcf;
    background: -moz-linear-gradient(center top , #fff 40%, #ededed 100%) repeat scroll 0 0 transparent !important;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(.40, #fff), color-stop(1, #ededed));
     position: relative;
     z-index: 20;
}

#timeline-head img {
    position: relative;
    top: 23px;
    left: 4px;
}

#timeline-content {
    width: 947px;
    margin: -1px auto 25px auto;
    background-color: #fff;
    -moz-box-shadow: 0 0 7px #ccc;
    -webkit-box-shadow: 0 0 7px #ccc;
    box-shadow: 0 0 7px #ccc;
    border: 1px solid #ddd;
    padding-bottom: 65px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#timeline-content h2 {
    color: #444;
    font-size: 20px;
    font-weight: 400;
    border-bottom: 1px solid #ddd;
    width: 805px;
    padding-bottom: 4px;
    margin: 0 auto;
    clear: both;
    padding-top: 45px;
}
#timeline-content h2.first {
    padding-top: 45px;
}

#timeline-content .cell {
    width: 370px;
    margin-left: 67px;
    margin-top: 25px;
    padding: 1px;
    position: relative;
}

#timeline-content .big a img {
    margin-bottom: 77px;
}

#timeline-content .cell.right {
    margin-left: 10px;
    margin-right: 75px;
}

a.attr {
    position: absolute;
}

.cell img {
    float: left;
}

.cell img  {
    margin-right: 16px;
    margin-bottom: 0px;
    width: 77px;
    height: 77px;
}

#timeline-content .cell h3 {
    font-size: 15px;
    font-weight: bold;
    color: #444;
    margin-top: 2px;
    margin-left: 93px;
    margin-bottom: 3px;
    line-height: 18px;
}

#timeline-content .cell h3.nosub {
    font-size: 15px;
    font-weight: normal;
    font-style: italic;
}

#timeline-content .cell h3 a {
    color: #444;
    cursor: default;
    font-size: 15px;
    font-style: normal;
}

#timeline-content .cell h3.nosub a {
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
}

#timeline-content .cell h3 a[href]:hover {
    color: #db0303;
    cursor: pointer;
}

#timeline-content .cell h4 {
    color: #333;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    margin: 3px 0 0;
    margin-left: 93px;
}

#timeline-content .cell p {
    color: #777;
    font-size: 12px;
    margin-top: 7px;
    margin-left: 93px;
    line-height: 16px;
}

#timeline-content .cell p a {
    color: #f39400;
}

#timeline-content .cell p a:hover {
    color: #db0303;
}

#timeline-footer {
   border-top: 1px solid #ddd;
   display: flex;
   color: #555;
   height: 53px;
   width: 100%;
   /*text-align: right;*/
   background-color: #f8f8f8;
   padding-right: 15px;
   clear: both;
   position: relative;
   top: 65px;
}

#timeline-shift {
   flex: 3;
   text-align: right;
   white-space: nowrap;
}

#timeline-shift a, #timeline-shift span {
   color: #555;
   font-weight: bold;
   position: relative;
   top: 20px;
   font-size: 14px;
}

#timeline-shift span {
   padding: 0 4px;
}
#timeline-shift a:hover {
   color: #000;
}

#timeline-feedback {
  font-family: Arial;
  font-size: 13px;
  font-weight: bold;
  flex: 10;
  line-height: 25px;
  white-space: nowrap;
}

#timeline-feedback p {
  color: #555;
  margin: 0;
  padding: 14px 0 15px 27px;
}

#timeline-feedback a {
  color: #e17f02;
  top: 0;
}

#timeline-feedback a:hover {
  color: #db0303;
}

#timeline-feedback .feedback {
   margin-left: 5px;
}

#timeline-feedback .feedback-icon {
   border: 0;
   height: 24px;
   vertical-align: middle;
   width: 26px;
}

#timeline-order {
    margin: 0 auto;
    width: 960px;
    margin-bottom: 25px;
}

#timeline-order #ad {
    background: url(/images/webtimeline/TimelineAd_Image_Poster.png) 0 0 no-repeat;
    height: 292px;
}
#timeline-order #blog {
    display: inline-block;
    background: url(/images/webtimeline/TimelineAd_Image_Mid.png) 0 0 repeat-y;
    width: 100%;
    padding-bottom: 25px;
}
#timeline-order .poster-section-header {
    position: relative;
    display: inline-block;
    right: 39px;
    left: 45px;
    font-family: Arial;
    font-weight: bold;
    font-size: 17px;
    color: #f39400;
    margin-bottom: 10px;
}
#timeline-order h4 {
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    left: 45px;
    line-height: 16px;
    position: relative;
    display: inline-block;
    right: 39px;
}

#timeline-order p {
    color: #555;
    font-size: 11px;
    left: 45px;
    float: left;
    position: relative;
    line-height: 17px;
    margin-top: 13px;
    font-size: 12px;
    word-spacing: 2px;
    width: 481px;
}


#timeline-order a.order {
    float: right;
    padding: 9px 25px 9px 25px;
    border-radius: 3px;
    margin-right: 38px;
    background-color: #F39400;
    color: #FFF;
    font-family: Arial;
    font-size: 17px;
}

#timeline-order a:hover {
    background-position: 0 -32px;
}

#timeline-order #posterContent {
    display: inline-block;
    background: url(/images/webtimeline/TimelineAd_Image_Mid.png) 0 0 repeat-y;
    width: 100%;
    padding-top: 25px;
}

#timeline-order #sep {
    background: url(/images/webtimeline/TimelineAd_Image_Mid.png) 0 0 repeat-y;
    width: 100%;
}

#timeline-order .poster-section-header #blog-icon {
    display: inline-block;
    background: url(/images/webtimeline/TimelineAd_Image_BlogIcon.png) 0 0 no-repeat;
    height: 19px;
    width: 15px;
    margin-right: 5px;
    margin-left: 3px;
}

#timeline-order .poster-section-header #order-icon {
    display: inline-block;
    background: url(/images/webtimeline/TimelineAd_Image_ShoppingIcon.png) 0 0 no-repeat;
    width: 23px;
    height: 20px;
    margin-right: 2px;
}

#timeline-order #sep-line {
   border-bottom: 1px solid #ccc;
   margin-left: 43px;
   margin-right: 38px;
}

#timeline-order #posterBottom {
    display: inline-block;
    background: url(/images/webtimeline/TimelineAd_Image_Bottom.png) 0 0 no-repeat;
    height: 35px;
    width: 100%;
}

#timeline-order #posterTop {
    display: inline-block;
    height: 35px;
    width: 100%;
    margin-bottom: -2px;
    background: url(/images/webtimeline/TimelineAd_Image_Top_2.png) 0 0 no-repeat;
}

#adv-data-civ {
   color: #838383;
   font-size: 13px;
   line-height: 25px;
   margin: 46px auto 18px;
   text-align: center;
 }
 
 #adv-data-civ a {
   color: #e17f01;
 }
 
 
.hoverpod {
    position: absolute;
    width: 339px;
    left: -173px;
    top: 40px;
    padding-left: 12px;
    display: none;
    background: url(/images/webtimeline/Hover_mid1px.png) 1px 0 repeat-y;
}
.hoverpod .top, .hoverpod .bot {
    background: url(/images/webtimeline/Hover.png) 0 0 no-repeat;
    width: 350px;
    height: 34px;
    top: -34px;
}

.hoverpod .bot {
    background-position: 0 -39px;
    height: 16px;
    bottom: -16px;
    top: auto;
}

.full {
    width: 10px;
}

.half {
    width: 5px;
}

.hover-contain  {
    height: 10px;
    position: absolute;
    top: 35px;
    cursor: pointer;
}

.hover-contain:hover .hoverpod {
    display: block;
}

.hoverpod a {
    font-size: 14px;
    color: #333;
    width: 291px;
    padding: 10px;
    display: block;
    background-color: #fff;
    line-height: 18px;
    margin-left: 10px;
    color: #777777;
    font-size: 12px;
    line-height: 16px;
    position: relative;
}

.hoverpod a:hover .title {
    color: #555;
}

.hoverpod .title {
    font-weight: bold;
    position: relative;
    font-size: 14px;
    color: #444;
}

.hoverpod .nosub {
    font-size: 13px;
    font-weight: normal;
    font-style: italic;
}

.hoverpod span {
    display: block;
        font-size: 14px;
    position: relative;
    left: 60px;
    width: 225px;
}

.hoverpod span span{
    display: inline;
    position: static;
    left: 0;
    width: auto;
}

.hoverpod .title span {
    color: #444444;
    font-style: normal;
}

.hoverpod .sub{
    color: #666;
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
    margin: 2px 0 0;
}

.hoverpod .desc{
    font-size: 12px;
    margin: 4px 0 0;
}

#timeline-head .hoverpod a img {
    height: 55px;
    width: 55px;
    float: left;
    position: absolute;
    margin-right: 11px;
    background-color: #fff;
    left:7px;
    top: 8px;
}

#h1-1 {
    left: 50px;
}

#h1-2 {
    left: 132px;
}

#h1-3 {
    left: 318px;
}

#h1-4 {
    left: 325px;
}

#h1-5 {
    left: 331px;
}

#h1-6 {
    left: 391px;
}

#h1-7 {
    left: 401px;
}

#h1-8 {
    left: 463px;
}

#h1-9 {
    left: 469px;
}
#h1-10 {
    left: 487px;
}
#h1-11 {
    left: 574px;
}
#h1-12 {
    left: 592px;
}
#h1-13 {
    left: 734px;
}
#h1-14 {
    left: 762px;
}
#h1-15 {
    left: 791px;
}
#h1-16 {
    left: 799px;
}
#h1-17 {
    left: 805px;
}
#h1-18 {
    left: 813px;
}
#h1-19 {
    left: 820px;
}
#h1-20 {
    left: 834px;
}
#h1-21 {
    left: 849px;
}
#h1-22 {
    left: 876px;
}
#h1-23 {
    left: 892px;
}

#h2-1{
    left: 63.41px;
}
#h2-2{
    left: 68.40px;
}
#h2-3{
    left: 82.28px;
}
#h2-4{
    left: 93.38px;
}
#h2-5{
    left: 107.25px;
}
#h2-6{
    left: 135.00px;
}
#h2-7{
    left: 212.70px;
}
#h2-8{
    left: 318.15px;
}
#h2-9{
    left: 329.25px;
}
#h2-10{
    left: 481.88px;
}
#h2-11{
    left: 556.80px;
}
#h2-12{
    left: 595.65px;
}
#h2-13{
    left: 626.73px;
}
#h2-14{
    left: 633.39px;
}
#h2-15{
    left: 691.11px;
}
#h2-16{
    left: 706.65px;
}
#h2-17{
    left: 745.50px;
}
#h2-18{
    left: 773.25px;
}
#h2-19{
    left: 802.66px;
}
#h2-20{
    left: 824.87px;
}
#h2-21{
    left: 830.41px;
}
#h2-22{
    left: 877.59px;
}
#h2-23{
    left: 902.01px;
}
#h2-24{
    left: 909.22px;
}

#h3-1{
    left: 32.88px;
}
#h3-2{
    left: 41.76px;
}
#h3-3{
    left: 86.16px;
}
#h3-4{
    left: 126.12px;
}
#h3-5{
    left: 143.88px;
}
#h3-6{
    left: 188.28px;
}
#h3-7{
    left: 246.00px;
}
#h3-8{
    left: 263.76px;
}
#h3-9{
    left: 285.96px;
}
#h3-10{
    left: 299.28px;
}
#h3-11{
    left: 312.60px;
}
#h3-12{
    left: 325.92px;
}
#h3-13{
    left: 396.96px;
}
#h3-14{
    left: 405.84px;
}
#h3-15{
    left: 410.28px;
}
#h3-16{
    left: 414.72px;
}
#h3-17{
    left: 610.08px;
}
#h3-18{
    left: 690.00px;
}
#h3-19{
    left: 703.32px;
}
#h3-20{
    left: 712.20px;
}
#h3-21{
    left: 769.92px;
}
#h3-22{
    left: 845.40px;
}
#h3-23{
    left: 849.84px;
}
#h3-24{
    left: 867.60px;
}
#h3-25{
    left: 876.48px;
}
#h3-26{
    left: 889.80px;
}
#h3-27{
    left: 894.24px;
}

#h4-1{
    left: 32.88px;
}
#h4-2{
    left: 41.76px;
}
#h4-3{
    left: 174.96px;
}
#h4-4{
    left: 290.40px;
}
#h4-5{
    left: 352.56px;
}
#h4-6{
    left: 370.32px;
}
#h4-7{
    left: 396.96px;
}
#h4-8{
    left: 414.72px;
}
#h4-9{
    left: 441.36px;
}
#h4-10{
    left: 459.12px;
}
#h4-11{
    left: 468.00px;
}
#h4-12{
    left: 485.76px;
}
#h4-13{
    left: 556.80px;
}
#h4-14{
    left: 601.20px;
}
#h4-15{
    left: 618.96px;
}
#h4-16{
    left: 627.84px;
}
#h4-17{
    left: 636.72px;
}
#h4-18{
    left: 663.36px;
}
#h4-19{
    left: 672.24px;
}
#h4-20{
    left: 698.88px;
}
#h4-21{
    left: 707.76px;
}
#h4-22{
    left: 716.64px;
}
#h4-23{
    left: 725.52px;
}
#h4-24{
    left: 734.40px;
}
#h4-25{
    left: 743.28px;
}
#h4-26{
    left: 752.16px;
}
#h4-27{
    left: 787.68px;
}
#h4-28{
    left: 805.44px;
}
#h4-29{
    left: 814.32px;
}
#h4-30{
    left: 823.20px;
}
#h4-31{
    left: 894.24px;
}

#h5-1{
    left: 24.00px;
}
#h5-2{
    left: 112.80px;
}
#h5-3{
    left: 127.60px;
}
#h5-4{
    left: 172.00px;
}
#h5-5{
    left: 216.40px;
}
#h5-6{
    left: 334.80px;
}
#h5-7{
    left: 408.80px;
}
#h5-8{
    left: 468.00px;
}
#h5-9{
    left: 482.80px;
}
#h5-10{
    left: 497.60px;
}
#h5-11{
    left: 542.00px;
}
#h5-12{
    left: 556.80px;
}
#h5-13{
    left: 571.60px;
}
#h5-14{
    left: 586.40px;
}
#h5-15{
    left: 601.20px;
}
#h5-16{
    left: 616.00px;
}
#h5-17{
    left: 645.60px;
}
#h5-18{
    left: 675.20px;
}
#h5-19{
    left: 690.00px;
}
#h5-20{
    left: 704.80px;
}
#h5-21{
    left: 719.60px;
}
#h5-22{
    left: 764.00px;
}
#h5-23{
    left: 778.80px;
}
#h5-24{
    left: 808.40px;
}
#h5-25{
    left: 823.20px;
}
#h5-26{
    left: 867.60px;
}
#h5-27{
    left: 897.20px;
}

#h6-1{
    left: 24.00px;
}
#h6-2{
    left: 53.60px;
}
#h6-3{
    left: 68.40px;
}
#h6-4{
    left: 83.20px;
}
#h6-5{
    left: 112.80px;
}
#h6-6{
    left: 127.60px;
}
#h6-7{
    left: 142.40px;
}
#h6-8{
    left: 172.00px;
}
#h6-9{
    left: 201.60px;
}
#h6-10{
    left: 216.40px;
}
#h6-11{
    left: 231.20px;
}
#h6-12{
    left: 260.80px;
}
#h6-13{
    left: 320.00px;
}
#h6-14{
    left: 349.60px;
}
#h6-15{
    left: 364.40px;
}
#h6-16{
    left: 379.20px;
}
#h6-17{
    left: 438.40px;
}
#h6-18{
    left: 453.20px;
}
#h6-19{
    left: 468.00px;
}
#h6-20{
    left: 482.80px;
}
#h6-21{
    left: 512.40px;
}
#h6-22{
    left: 527.20px;
}
#h6-23{
    left: 542.00px;
}
#h6-24{
    left: 556.80px;
}
#h6-25{
    left: 586.40px;
}
#h6-26{
    left: 601.20px;
}
#h6-27{
    left: 616.00px;
}
#h6-28{
    left: 630.80px;
}
#h6-29{
    left: 645.60px;
}
#h6-30{
    left: 660.40px;
}
#h6-31{
    left: 675.20px;
}
#h6-32{
    left: 734.40px;
}
#h6-33{
    left: 749.20px;
}
#h6-34{
    left: 793.60px;
}
#h6-35{
    left: 823.20px;
}
#h6-36{
    left: 867.60px;
}


.attrpopup {
    position: absolute;
    height: 189px;
    width: 189px;
    background: url(/images/webtimeline/attr/HoverBox.png) 0 0 no-repeat transparent;
    padding: 24px;
    top: -20px;
    left: -20px;
    z-index: 40;
}

.attrpopup .close {
    height: 20px;
    width: 20px;
    position: absolute;
    top: 14px;
    right: 5px;
    display: block;
}

#timeline-content .cell .attrpopup img {
    position: relative;
    top: 10px;
    left: 10px;
    height: 176px;
    width: 176px;
}

ul#posterImages {
    float: right;
    margin-top: 34px;
    margin-right: 57px;
}

ul#posterImages li {
    display: inline-block;
}

ul#posterImages li img {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition:    all 0.3s ease-in-out;
    -o-transition:      all 0.3s ease-in-out;
    transition:         all 0.3s ease-in-out;
    border: 1px solid #F7F7F7;


    border: 1px solid #F7F7F7;
}


ul#posterImages li img:hover {
    border: 1px solid #F77F00;
}

ul#posterImages li img {
    cursor: pointer;
}

#lightboxPoster1, #lightboxPoster2, #lightboxPoster3 {
    position: absolute;
    left: 50%;
    margin-left: -370px;
    height: 466px;
    padding: 8px;
    background: #F3F3F3;
}

.posterBox a.close {
    background: url(/images/lightbox-btn.png) no-repeat 0 0;
    height: 35px;
    width: 35px;
    position: absolute;
    right: -13px;
    top: -18px;
}