#timeline {
		width: 80%;
		height: 600px;
		overflow: hidden;
		margin:5vh auto;
		position: relative;
			background: url('../pics/dot.gif') 3px top repeat-y;

	}
	#timeline a{ color: #28292d;    }
		#dates {
			width: 250px;
			height: 600px;
			overflow: hidden;
			float:left;
			 padding:0;
		}

			#dates li {
				list-style: none;
				line-height: 100px;
				font-size: 24px;
				padding-left: 10px;
				background: url('../pics/biggerdot.png') left center no-repeat;
			}
				#dates a {
					line-height: 38px;
					padding-bottom: 10px;
					text-decoration: none;
				}
					#dates a:hover{ color: #edcc59; }
				#dates .selected {
			        font-size: 38px; color: #edcc59;
				}
		
		#issues {
			width: 80%;
			height: 600px;
			padding-top:10%;
			overflow: hidden;
			float: left;

		}
			#issues li {
				width: 100%;
				height: 600px;
				list-style: none;
				text-align: center;
				direction: rtl;

			}
				#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 {

				   padding: 10px;
					 width: 100%;
				   display: inline-block; width: 48%;

					zoom: 1;
					-webkit-transition: all 1.5s ease-in-out;
					-moz-transition: all 1.5s ease-in-out;
					-o-transition: all 1.5s ease-in-out;
					-ms-transition: all 1.5s ease-in-out;
					transition: all 1.5s 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 .side_holder { display: inline-block; width: 50%; text-align: right; padding-right:10%; vertical-align: top;}
				#issues li .logo img{ border-radius: 50%; width: 150px; position: relative;
				background-color: #fff;
				overflow: hidden;
				border:1px solid #ccc;

					-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 h1 {
					color: #ffcc00;
					font-size: 48px;
					text-align: center;

				}
				#issues li p {

					margin: 10px auto;
					font-weight: normal;
					line-height: 22px;
					padding:2.5% 0;



				}
		
		#grad_top,
		#grad_bottom {
			width: 100%;
			height: 80px;
			position: absolute;
		}
			#grad_top {
		        top: 0;
		        background: url('../pics/grad_top.png') repeat-x;
			}
			#grad_bottom {
		        bottom: 0;
		        background: url('../pics/grad_bottom.png') repeat-x;
			}
		
		#next,
		#prev {
			position: absolute;
			left: 0%; right:0;
			margin:0 auto;
			font-size: 70px;
			width: 38px;
			height: 22px;
			background-position: 0 -44px;
			background-repeat: no-repeat;
			text-indent: -9999px;
			overflow: hidden;
				-webkit-transition: all .5s ease-in-out;
					-moz-transition: all .5s ease-in-out;
					-o-transition: all .5s ease-in-out;
					-ms-transition: all .5s ease-in-out;
					transition: all .5s ease-in-out;
		}
			#next:hover,
			#prev:hover {
				background-position:  0 0;
			}
			#next {
				bottom: 0;
				background-image: url('../pics/next_v.png');
			}
			#prev {
				top: 0;
				background-image: url('../pics/prev_v.png');
			}
				#next.disabled,
				#prev.disabled {
					opacity: 0.5;
				}


@media screen and (min-width:100px) and (max-width:959px) {
#timeline{ width: 100%; height: 100%; }
#dates{ width: 20%; display: none; }
#dates .selected{ font-size: 10px; }
#dates li{ font-size: 10px;}
#dates li a{  line-height:10px;}
#issues{ width: 100%;padding:15px; text-align: center; padding-top:50px; }
#issues li .side_holder{ text-align: center; padding:0; }
#issues li img,#issues li .side_holder{ width: 100%; }
#issues li .logo img{ width: 75px; }

}