*{margin:0; padding:0}

body{background:#222; font-family:Georgia,serif; color:#fff; font-size:14px}

@font-face{    font-family:'OpenSansCondensedBold';     src:url('../fonts/opensans-condbold-webfont.eot');     src:url('../fonts/opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'),         url('../fonts/opensans-condbold-webfont.woff') format('woff'),         url('../fonts/opensans-condbold-webfont.ttf') format('truetype'),         url('../fonts/opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg');     font-weight:normal;     font-style:normal}

a{color:#ffc; text-decoration:none; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; transition:0.5s}
a:hover, 
a.selected{color:#fc0}

h1, h2, h4, h5, h6{text-align:left; color:#ccc; text-shadow:#000 1px 1px 2px; margin-bottom:5px}
h1{font-size:18px}
h2{font-size:14px}

#branding{margin:0px auto 0; text-align:center; background:url(http://www.square-enix-ocean.com/wp-content/themes/square-enix-ocean-v6/images/bg_sprite.jpg) repeat-x; height:157px}
#branding h1{color:#fff; font-size:50px; text-transform:uppercase; font-family:OpenSansCondensedBold; text-decoration:none; display:inline-block; text-shadow:#000 1px 1px 2px; margin-top:20px}
#branding .description{margin-top:35px; font-style:italic; color:#dadada}
#footer{width:800px; margin:40px auto 0; text-align:center}

.sociales{text-align:center; margin-bottom:20px}

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

#issues{width:800px; /*height:350px; */overflow:hidden}
#issues li{width:800px; /*:350px; */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:35px 30px 10px 70px; background:transparent; -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#0FFFF,endColorstr=#0FFFF)"; /* IE 8 */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0FFFF,endColorstr=#0FFFF); /* IE 6 &7 */ zoom:1; border:1px solid #b4b4b4; /*-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 div img{margin-top:13px}
#issues li h2{color:#0faedb; font-size:30px; text-transform:uppercase; font-family:OpenSansCondensedBold; text-decoration:none; margin:20px 0 17px; text-shadow:#000 1px 1px 2px}
#issues li p{font-size:14px; margin-right:20px; font-weight:normal; line-height:20px; text-shadow:#000 1px 1px 2px; padding:0 53px; text-align:justify; margin-bottom:10px}

#grad_left, 
#grad_right{width:50px; height:100%; position:absolute; top:0}
#grad_left{        left:0;         background:url('../images/grad_left.png') repeat-y}
#grad_right{        right:0;         background:url('../images/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('../images/next.png')}
#prev{left:0; background-image:url('../images/prev.png')}
#next.disabled, 
#prev.disabled{opacity:0.2}

.remake{font-weight:bold; text-decoration:underline;color:#bcfb25;}