* { margin: 0; padding: 0; } body { background: #222; font-family: Georgia, serif; color: #fff; font-size: 14px; } #dates a { color: gray; text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; font-size: 12px; } #dates a:hover, #dates a.selected { color: red; font-size: 18px; } /* h1,h2,h4,h5,h6 { text-align: center; color: #ccc; text-shadow: #000 1px 1px 2px; margin-bottom: 5px; } h1 { font-size: 18px; } h2 { font-size: 14px; } .sociales { text-align: center; margin-bottom: 20px; } */ #timeline { width: 95%; height: 500px; overflow: hidden; margin: 100px auto; position: relative; } #dates { width: 800px; height: 60px; overflow: hidden; background: url('timeline/dot.gif') left 45px repeat-x; } #dates li { list-style: none; float: left; width: 100px; height: 50px; font-size: 24px; text-align: center; background: url('timeline/biggerdot.png') center bottom no-repeat; } #dates a { line-height: 18px; padding-bottom: 10px; } #dates .selected { font-size: 18px; } #issues { width: 800px; height: 500px; overflow: hidden; } #issues li { width: 900px; height: 500px; 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 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s 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 h1 { font-size: 48px; margin: 20px 0; color: red; /*text-shadow: #000 1px 1px 2px;*/ } #issues li p { font-size: 14px; margin-right: 70px; font-weight: normal; line-height: 22px; /* text-shadow: #000 1px 1px 2px;*/ } #grad_left, #grad_right { width: 100px; height: 500px; position: absolute; top: 0; } #grad_left { left: 0; /* background: url('timeline/grad_left.png') repeat-y;*/ } #grad_right { right: 0; /* background: url('timeline/grad_right.png') repeat-y;*/ } #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('timeline/next.png'); } #prev { left: 0; background-image: url('timeline/prev.png'); } #next.disabled, #prev.disabled { opacity: 0.2; }