#timeline-wrapper { background: #004a8f; color: #fff; position: relative; padding: 40px 0; margin-top: 50px; margin-bottom: 50px; margin-left: -9999px; margin-right: -9999px; padding-left: 9999px; padding-right: 9999px; }
#timeline { width: 100%; overflow: hidden; position: relative; background: url('../img/timeline/dateline_dot.png') left 45px repeat-x; }
#dates { width: 60%; height: 60px; margin: 0; padding: 0; list-style: none; overflow: hidden; }
#dates li { list-style: none; float: left;	width: 100px; height: 50px; font-size: 24px; text-align: center; background: url('../img/timeline/biggerdot.png') center bottom no-repeat; }
#dates a { line-height: 38px; outline: none; text-decoration: none; color: #fff; color: rgba(255,255,255,.6); padding-bottom: 10px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; }
#dates a:hover { color: #fff; }
#dates .selected { font-size: 40px; color: #fff; }

#issues { width: 100%; list-style: none; margin: 0; padding: 0; overflow: hidden; }	
#issues li { width: 100%; padding: 20px 0px 0px; list-style: none; float: left; }
#issues li .image { margin: 0px auto 20px; width: 100%; padding: 0 20px; text-align: center; }
#issues li.selected img { -webkit-box-shadow: 1px 3px 10px rgba(0,0,0,.6); -moz-box-shadow: 1px 3px 10px rgba(0,0,0,.6); box-shadow: 1px 3px 10px rgba(0,0,0,.6); -webkit-transform: scale(1.0,1.0); -moz-transform: scale(1.0,1.0); -o-transform: scale(1.0,1.0); -ms-transform: scale(1.0,1.0); transform: scale(1.0,1.0); }
#issues li .description { padding: 0 20px; text-align: center; }
#issues li img { padding: 10px; max-width: 100%; max-height: 100%; -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 h2 { display: none; color: #fff; font-size: 30px; font-weight: 900; font-style: italic; }
#issues li p { font-size: 18px; font-weight: normal; line-height: 1.4; }
#grad_left, #grad_right { width: 40px; position: absolute; top: 0; bottom: 0; pointer-events: none; }

#grad_left { left: 0;  background: -moz-linear-gradient(left,  rgba(0,74,143,1) 0%, rgba(0,74,143,1) 24%, rgba(0,74,143,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,74,143,1)), color-stop(24%,rgba(0,74,143,1)), color-stop(100%,rgba(0,74,143,0))); background: -webkit-linear-gradient(left,  rgba(0,74,143,1) 0%,rgba(0,74,143,1) 24%,rgba(0,74,143,0) 100%); background: -o-linear-gradient(left,  rgba(0,74,143,1) 0%,rgba(0,74,143,1) 24%,rgba(0,74,143,0) 100%); background: -ms-linear-gradient(left,  rgba(0,74,143,1) 0%,rgba(0,74,143,1) 24%,rgba(0,74,143,0) 100%); background: linear-gradient(to right,  rgba(0,74,143,1) 0%,rgba(0,74,143,1) 24%,rgba(0,74,143,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004a8f', endColorstr='#00004a8f',GradientType=1 ); }
#grad_right { right: 0; background: -moz-linear-gradient(left,  rgba(0,74,143,0) 0%, rgba(0,74,143,1) 76%, rgba(0,74,143,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,74,143,0)), color-stop(76%,rgba(0,74,143,1)), color-stop(100%,rgba(0,74,143,1))); background: -webkit-linear-gradient(left,  rgba(0,74,143,0) 0%,rgba(0,74,143,1) 76%,rgba(0,74,143,1) 100%); background: -o-linear-gradient(left,  rgba(0,74,143,0) 0%,rgba(0,74,143,1) 76%,rgba(0,74,143,1) 100%); background: -ms-linear-gradient(left,  rgba(0,74,143,0) 0%,rgba(0,74,143,1) 76%,rgba(0,74,143,1) 100%); background: linear-gradient(to right,  rgba(0,74,143,0) 0%,rgba(0,74,143,1) 76%,rgba(0,74,143,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00004a8f', endColorstr='#004a8f',GradientType=1 ); }
		
#next, #prev { position: absolute; outline: none; top: 0; font-size: 70px; top: 290px; width: 41px; height: 122px; opacity: .4; text-indent: -9999px; overflow: hidden; }
#next:hover, #prev:hover { opacity: 1; }
#next { right: 50%; margin-right: -750px; background: url('../img/timeline/next.png') left top no-repeat; }
#prev { left: 50%; margin-left: -750px; background: url('../img/timeline/prev.png') left top no-repeat; }
#next.disabled, #prev.disabled { display: none; }

@media screen and (min-width: 768px) {
	#grad_left, #grad_right { width: 60px; }
	#issue li .image { padding: 0px 40px; }
}
@media screen and (min-width: 992px) {
	#timeline-wrapper { padding-top: 100px; padding-bottom: 100px; }
	#issues li { padding-top: 40px 0 20px; }
	#issues li .image { float: left; margin: 0; margin-left: 50px; padding: 0; width: 520px; }
	#issues li .description { float: right; padding: 0; width: 320px; margin-right: 50px; }
	#issues li h2 { display: block; font-size: 50px; margin: 75px 0 0px; }
	#issues li p { font-size: 20px; line-height: 1.6; }
	#grad_left, #grad_right { width: 100px; }
}
@media screen and (min-width: 1200px) {
	#issues li .image { margin-left: 100px; width: 520px; }
	#issues li .description { width: 420px; margin-right: 100px; }
	#grad_left, #grad_right { width: 120px; }
}