#timeline {
    width: 1140px;
    position: relative;
    margin: 0;
    background: url('../img/dot.gif') left 55px repeat-x;
}
#dates {
    width: 1140px;
    height: 60px;
    overflow: hidden;
}
#dates li {
    list-style: none;
    float: left;
    width: 100px;
    height: 50px;
    font-size: 24px;
    text-align: center;
    background: url('../img/biggerdot.png') center bottom no-repeat;
}
#dates a {
    line-height: 38px;
    padding-bottom: 10px;
}
#dates .selected {
    font-size: 38px;
}

#issues {
    width: 1140px;
    overflow: hidden;
}   
#issues li {
    width: 1140px;
    list-style: none;
    float: left;
}
#issues li.selected img {
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}
#issues li img {
    float: left;
    margin: 10px 30px 10px 50px;
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */      
    zoom: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out;
    -webkit-transform: scale(0.7,0.7);
    -moz-transform: scale(0.7,0.7);
    -o-transform: scale(0.7,0.7);
    -ms-transform: scale(0.7,0.7);
    transform: scale(0.7,0.7);
}

#issues li p {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 18px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-right:30px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#issues .tl-title{
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    line-height: 22px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-top: 5px;
    margin-bottom: 15px;
}

#next,
#prev {
    position: absolute;
    top: 0;
    font-size: 70px;
    top: 170px;
    width: 22px;
    height: 38px;
    background-position: 0 0;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}
#next:hover,
#prev:hover {
    background-position: 0 -76px;
}
#next {
    right: 0;
    background-image: url('../img/next.png');
}
#prev {
    left: 0;
    background-image: url('../img/prev.png');
}
#next.disabled,
#prev.disabled {
    opacity: 0.2;
}



#timeline {
  width: 1140px;
  background: url(../img/bg-timeline.png) left 55px repeat-x;
  overflow-x: hidden;
}

#timeline a.selected {
  color: #e2001a;
}

#issues li {
  width: 1140px;
}

#dates {
  height: 100px;
  margin-bottom: 1px;
}

#dates a {
  line-height: 1;
  padding: 0 6px 48px 6px;
  outline: none;
}

#dates a:hover,#dates a:visited,#dates a:active {
  text-decoration: none;
  color:#404040;
}

#dates li {
  font-size: 13px;
  font-weight: 900;
  width: 170px;
  height: 64px;
  cursor: pointer;
  background: transparent;
  float: left;
}

#dates li a {
  background: url(../img/biggerdot.png) center bottom no-repeat;
  background-image: url("../img/biggerdot.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
   #dates li a {
    background-image: url("../img/biggerdot@2x.png");
    background-size: 36px 36px;
  }
}

#dates li a:hover, #dates li a.selected {
  background: url(../img/biggerdot-hover.png) center bottom no-repeat;
  background-image: url("../img/biggerdot-hover.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    #dates li a:hover, #dates li a.selected {
    background-image: url("../img/biggerdot-hover@2x.png");
    background-size: 36px 36px;
  }
}

#dates .selected {
  font-size: 13px;
}
#dates .selected:hover {
  color: #e2001a;
}

#next, #prev {
  height: 36px;
  width: 20px;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

#next:hover, #prev:hover {
  background-position: 0 -36px;
}

#issues li p {
  text-shadow: 0 0 0 transparent;
}


@media only screen and (min-width : 300px) {
  #timeline {
      width: 260px;
      margin: 0 auto;
  }
  #dates {
      width: 260px;
  }
  #dates li {
    width:80px;
  }
  #issues {
      width: 260px;
  }   
  #issues li {
      width: 260px;
  }
  #issues .tl-title,
  #issues li p {
      margin-right: 30px;
      margin-left: 30px;
  }
}

/*1200-992-768*/
@media only screen and (min-width : 480px) {
  #timeline {
      width: 430px;
      margin: 0 auto;
  }
  #dates {
      width: 430px;
  }
  #dates li {
    width:100px;
  }
  #issues {
      width: 430px;
  }   
  #issues li {
      width: 430px;
  }
  #issues .tl-title,
  #issues li p {
      margin-right: 30px;
      margin-left: 30px;
  }
}

@media only screen and (min-width : 768px) {
  #timeline {
      width: 720px;
  }
  #dates {
      width: 720px;
  }
  #issues {
      width: 720px;
  }   
  #issues li {
      width: 720px;
  }
}
@media only screen and (min-width : 992px) {
  #timeline {
      width: 940px;
  }
  #dates {
      width: 940px;
  }
  #issues {
      width: 940px;
  }   
  #issues li {
      width: 940px;
  }
}
@media only screen and (min-width : 1200px) {
  #timeline {
      width: 1140px;
  }
  #dates {
      width: 1140px;
  }
  #issues {
      width: 1140px;
  }   
  #issues li {
      width: 1140px;
  }
}