* {margin: 0; padding: 0; cursor: default;}
html, body {height: 100%;}
body {text-align: center; background: #000;}
a {text-decoration: none; outline: none; cursor: pointer;}
div, span, a, img, p {border: none;}

#header, #footer {width: 980px; margin: 0 auto; text-align: left;}
#footer {position: relative; top: -120px;}
#copyright {float: right; color: #555; font-family: Arial; font-size: 8px;}
#scroll {clear: both; width: 1178px; height: 1px;}
#atlas_tag {display: none;}

#swf{position: relative; width: 100%; height: 100%; clear: both; text-align: left; z-index: 1;}
#pad {float: left; width: 100%; height: 40%; margin-top: -200px; visibility: hidden;}


#alt {position: relative; clear: left; width: 100%; height: 560px; overflow: hidden; text-align: center;}
#alt .container {display: table; margin: 0 auto; text-align: center;}
#alt #stories {position: relative; display: table; height: 465px;}
#alt .story {position: relative; float: left; top: 60px; width: 88px; height: 345px;}
#alt .story img {position: absolute; float: left; left: 0px; width: 88px; height: 345px; z-index: 3;}
#alt #drives {position: relative; top: -320px; height: 165px; margin: 0 auto; padding: 0 5px; overflow: hidden; z-index: 10;}
#alt .drive {position: relative; top: 20px; display: block; float: left; width: 196px; height: 125px;}
#alt .drive {font-family: Serif; font-weight: bold; font-size: 22px; color: #fff; background: #000;}
#alt .drive .story_links {display: none;}
#alt .drive div {position: absolute; left: 0px; width: 100%; height: 100%; overflow: hidden; background: url("../images/drive_bg.gif") center center no-repeat; cursor: pointer;}
#alt .drive div h2 {margin-top: -7777px; font-size: 10px; cursor: pointer;}
#alt .drive div h2 span {display: block; width: 166px; height: 50px; margin: 7742px auto 0 auto; cursor: pointer;}
#alt .drive div h2.title span {margin-top: 7785px;}


#alt2 {background: url("../images/main_bg.jpg") center center no-repeat;}
#alt2 {position: relative; clear: left; width: 100%; height: 560px; text-align: left;}
#alt2 #footer {top: 0px;}
#alt2 .container {display: table; margin: 0 auto; text-align: center;}
#alt2 .container a div:hover {opacity: 1;}
#alt2 .container .arrow {float: left; width: 45px; height: 65px; margin: 200px 10px 0 10px; opacity: 0.5; cursor: pointer;}
#alt2 .container .arrow#prev {background: #141414 url("../images/arrow_prev.gif") 10px center no-repeat;}
#alt2 .container .arrow#next {background: #141414 url("../images/arrow_next.gif") 15px center no-repeat;}
#alt2 .container .arrow#none {background: none; cursor: default;}
#alt2 #drive {position: relative; overflow: hidden; float: left; width: 262px; height: 159px; margin-top: 160px; background: url("../images/drive_bg.gif") center center no-repeat;}
#alt2 #drive h2 {position: relative; margin-left: -777px;}
#alt2 #drive {font-family: Serif; font-weight: bold; color: #fff;}
#alt2 #drive span {position: absolute; display: block; top: 0px; width: 210px; height: 60px; margin: 30px auto 0 807px;}
#alt2 #stories {float: left; height: 465px;}
#alt2 #stories a {float: left;}
#alt2 #stories .story {position: relative; width: 114px; height: 465px; cursor: pointer;}
#alt2 #stories .story img {position: absolute; left: 0px; cursor: pointer;}
#alt2 #stories .story div {position: absolute; display: none; left: -5px; top: 160px; width: 124px; height: 159px; overflow: hidden; cursor: pointer;}
#alt2 #stories .story div .bg {display: block; position: absolute; top: 0px; width: 124px; height: 100%; background: #666; opacity: 0.7; cursor: pointer;}
#alt2 #stories .story div .title {display: block; width: 100px; margin: 20px auto; color: #ccc; font-family: Arial; font-size: 10px; font-weight: bold; text-transform: uppercase; cursor: pointer;}
#alt2 #stories .story div h2 {margin: 0 0 0 -777px; color: #666; cursor: pointer;}
#alt2 #stories .story div h2 span {display: block; position: absolute; top: 0px; width: 104px; height: 140px; margin: 33px 0 0 787px; z-index: 1; cursor: pointer;}


#alt3 {position: relative; clear: left; width: 100%; height: 600px; text-align: left;}
#alt3 #header {width: 860px; height: 50px;}
#alt3 #footer {top: 0px; margin: 35px auto;}
#alt3 .container {position: relative; display: block; width: 1125px; height: 541px; margin: 0 auto; overflow: hidden; text-align: center;}
#alt3 .container .story {width: 114px; height: 465px; margin: 56px 0 0 0; background: #555; cursor: pointer;}
#alt3 .container .story#prev {float: left;}
#alt3 .container .story#next {float: right;}
#alt3 .container .story#none {background: none;}
#alt3 .container .story_nav {opacity: 0.5;}
#alt3 .container #stage {float: left; width: 897px; height: 505px; margin: 36px 0 0 0;}
#alt3 .container #stage #close {position: relative; float:right; width: 63px; height: 27px; opacity: 0.6; background: url("../images/close.gif") no-repeat; cursor: pointer;}
#alt3 .container #stage #close:hover {opacity: 0.9;}
#alt3 .container #drive {position: relative; left: 180px; width: 361px; height: 75px; background: #22201f;}
#alt3 .container #drive h2 {position: absolute; margin-left: -7777px; line-height: 10px;}
#alt3 .container #drive span {position: absolute; display: block; width: 351px; height: 75px; margin: 10px 0 0 7797px;}
#alt3 .container #drive div {position: absolute; right: 0; width: 19px; height: 75px; background: url("../images/arrow3_next.gif") no-repeat; opacity: 0.8; cursor: pointer;}
#alt3 .container #drive div:hover {opacity: 1;}
#alt3 .container #copy_box {position: absolute; left: 180px; top: 492px; width: 351px; height: 49px; text-align: left; opacity: 0.7; background: #fff;}
#alt3 .container #copy_box .title {position: relative; height: 49px; margin: 0 0 0 15px; overflow: hidden; font-family: Serif; font-size: 18px;}
#alt3 .container #copy_box .title h2 {position: absolute; height: 49px; margin-left: -7777px; line-height: 14px;}
#alt3 .container #copy_box .title h2 span {display: block; width: 350px; height: 49px; margin-left: 7777px;}
#alt3 .container #copy_box .desc {position: relative; height: 84px; margin: 0 15px; font-family: Arial; font-size: 11px;}
#alt3 .container #copy_box .explore {margin: 0 0 0 15px; font-family: Arial; font-size: 13px;}
#alt3 .container #copy_box p {float: left; margin: 10px 0 0 15px;}
#alt3 .container #copy_box p a {padding:3px; color: #666; border: 1px solid #ddd; font-family: Arial; font-size: 12px; font-weight: bold; background: #ddd;}
#alt3 .container #copy_box p a:hover {color: #333; background: #eee; border: 1px solid #ccc;}
#alt3 .container #social_box {position: absolute; left: 351px; top: 147px; width: 0px; height: 40px; overflow: hidden; background: #fff url("../images/shareIcon.gif") center center no-repeat; border-left: 1px solid #999;}
#alt3 .container #social_box .social {display: block; float: right; width: 24px; height: 22px; margin: 9px 1px 0; color: #ccc; font-family: Arial; font-size: 12px; font-weight: bold;}
#alt3 .container #social_box .social#twitter_share {margin: 9px 14px 0 0;}
#alt3 .container #social_box .social#twitter_share:hover {background: url("../images/twitterBtn.gif") no-repeat;}
#alt3 .container #social_box .social#fb_share:hover {background: url("../images/facebookBtn.gif") no-repeat;}
#alt3 .container a.small {position: absolute; display: none; top: 160px; width: 143px; height: 159px; margin: 20px;}
#alt3 .container a.small .arrSubTitle {position: relative; width: 100%; height: 100%; cursor: pointer;}
#alt3 .container a.small .arrSubTitle h2 {margin-left: -7777px; position: absolute; z-index: 100; cursor: pointer;}
#alt3 .container a.small .arrSubTitle h2 span {display: block; width: 104px; height: 100px; margin: 0 0 0 7807px; cursor: pointer; background-position: center;}
#alt3 .container a.small .arrSubTitle .bg {position: absolute; display: block; width: 100%; height: 100%; opacity: 0.7; background: #bbb;}
#alt3 .container a.small .arrSubTitle #fix {height: 160px; left: -10px; position: absolute; width: 10px; z-index: 500;}
#alt3 .container a.small.prev {left: 94px;}
#alt3 .container a.small.next {left: 848px;}
#alt3 .container a.small.next h2 span {margin-left: 7793px;}
#alt3 .container .arrow {position: absolute; display: block; top: 50px; width: 27px; height: 56px; cursor: pointer; z-index: 101;}
#alt3 .container .arrow#prev {background: url("../images/arrow2_prev.gif") no-repeat;}
#alt3 .container .arrow#next {left: 116px; background: url("../images/arrow2_next.gif") no-repeat;}
#alt3 .container .arrow#none {background: none; cursor: default;}


#error {position: relative; clear: left; width: 100%; height: 260px; margin-top: 160px;}
#error .container {display: table; margin: 0 auto; text-align: center; width: 355px;}
#error .container div {margin: 30px auto;}
#error div a img {cursor: pointer;}
#error #footer {width: 200px; margin: 0 auto; text-align: center; top: 0;}
#error #footer #copyright {float: none;}
