/* --------------------------------------------------------------
   screen.css
   * Custom styles to build on top of base styles

   * Copyright - 2010.Rokkan
   * Date Created: Date file is created
   * Last Updated: Date file is last modified before pushed live
-------------------------------------------------------------- */

/* Reset browser defaults and apply base styles and colors
-------------------------------------------------------------- */
@import url(base.css);


/* Structure
-------------------------------------------------------------- */
html, body {
    background-color: #000000;
    margin:0;
    padding:0;
    border:0;
    width:100%;
    height:100%;
    color:#fff;
    min-width:1000px;
}
h2 {font-family: 'Times New Roman'}
#flashcontent {
    position: relative;
    height:90%;
    overflow: hidden;
    z-index:5;
}
.hasJS #flashcontent {
    position: relative;
    height:720px;
    overflow: hidden;
    z-index:5;
}
#wrapper {
    display: block;
    overflow: hidden;
    clear: both;
    margin: 0 auto ;
    width: 100%;
    display:block;
}
#container {
    clear: both; float: none;
    margin: 0 auto;
    text-align: left;
    width: 971px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display:block;
}
#header {
    float: left;
    height: 98px; width: 100%;
}



/* Branding */
#branding {
    float: left;
    height: 98px; width:248px;
    padding: 0;
    position: relative;
     position: static !important;
}
#branding h1 a {
    background: url(../imgs/layout/Metroid_m_logo.jpg) no-repeat 0 0;
    height: 98px;
    width:248px;
    float: none;
    display: block;
    margin: 0;
    text-indent: -9999em;
    overflow: hidden;
}
#header #audio-toggle {
    float: left;
    position: relative;
    height: 18px; width: 18px;
    padding:8px 0 0 2px;
}
#header #audio-toggle a {
    float: left;
    background: url(../imgs/btns/icon_audio.png) no-repeat 0 0;
    height: 18px; width: 18px;
    overflow: hidden;
    text-indent: -9999em;
}
#header #audio-toggle a.off {background: url(../imgs/btns/icon_audio_off.png) no-repeat 0 0;}

div#wrapper-lang h4 {width: 65px;overflow: hidden;margin: 0;padding-top:12px;}
/* Main-Nav */
#main-nav {
    float: left;
    height: 120px; width: 723px;
    padding: 0;
    margin:0;
    font-weight: bold;
    text-align: center;
}
#main-nav ul {
    float: none;
    list-style: none;
    margin: 41px 0 0 17px; padding: 0;
    width: 724px;
}
#main-nav ul li {
    float: left;
    width: auto;
    height: 20px;
    margin: 0;
    padding: 11px 20px 0;
    position: relative;
    text-align: center;
}
#main-nav ul li.last {margin-right: 0;}
#main-nav ul li a {
    color: #fff;
    font-size: 16px;
    float: left;
    width: auto;
    text-decoration: none;
    text-align: center;
    font-weight:400;
    text-transform: uppercase;
    letter-spacing: .04em;

}
#main-nav ul li a:hover {color:#645988}
#main-nav ul li a.current {color: #645988;}

/* Content
------------------------------------------------------------------------------ */
#content {
    clear: both; float: left;
    margin: 30px 0 0;
    width: 971px;
    height:560px;
    position: relative;
}
#home #content {
    background: url(../imgs/layout/metroid_home_bg.jpg) no-repeat 0 0;
    float: left;
    height: 589px; width: 971px;
    position: relative;
    margin: 0;
}
#stages #content {
    clear: both; float: left;
    margin: 30px 0 0 0;
    width: 971px;
    height:631px;
    position: relative;
}
#story #content {
    clear: both; float: left;
    margin: 30px 0 0;
    width: 971px;
    height:500px;
    position: relative;
}
#media #content {
    height:704px;
    margin:0;
    background: url(../imgs/layout/metroid_bg.jpg) no-repeat 0 bottom;
}
#home #content .story-button {
    margin: 20px 0 0;
    width:132px;
    height:48px;
    position: relative;
}
#home #content .story-button a {
    background: url(../imgs/btns/btn_the_story.jpg) no-repeat 0 0;
    width:132px;
    height:48px;
    position: absolute;
    top:400px;
    left:410px;
    z-index: 10;
    text-indent: -999em;
    cursor:pointer;
}
#home #content .story-button a:hover {
    background: url(../imgs/btns/btn_the_story_rollover.jpg) no-repeat 0 0;
    width:132px;
    height:48px;
    position: absolute;
    top:400px;
    left:410px;
    z-index: 10;
}
#home #content .intro {
    position: absolute;
    width:619px;
    top:290px;
    left:176px;
    z-index: 5;
}
#home #content .intro p {
    text-align: center;
    line-height: 1.3em;
    margin-bottom: 20px;
    font-size: 14px;
}
#gradient #content {
    clear: both; float: left;
    margin: 10px 0 0 0;
    width: 971px;
    height:680px;
    position: relative;
    background: url(../imgs/layout/metroid_bg.jpg) no-repeat 0 bottom;
}
#characters #content {
    clear: both; float: left;
    margin: 10px 0 0 0;
    width: 971px;
    height:630px;
    position: relative;
    background: url(../imgs/layout/metroid_bg.jpg) no-repeat 0 0;
}
#abilities #content {
    clear: both; float: left;
    margin: 30px 0 0 0;
    width: 971px;
    height:595px;
    position: relative;
    background:#000;
}
#sub #content {
    clear: both; float: left;
    margin: 30px 0 0 0;
    width: 971px;
    height:964px;
    position: relative;
    background: url(../imgs/layout/metroid_fade_black_bg.jpg) no-repeat 0 top;
}
#sub #content.short { height:690px;}

#character-detail #content {
    clear: both; float: left;
    margin: 20px 0 0;
    width: 971px;
    height:593px;
    position: relative;
}

#content .page-title {
    width:auto;
    height: auto;
    float:left;
    position: relative;
}
#content .page-title.right {
    float:right;
    margin-right: 10px;
}
#content h1 {
    color:#fff;
    font-size: 56px;
    font-family: 'Times New Roman';
    margin-bottom: 30px;
}
#content h1.small {
    color:#fff;
    font-size: 49px;
    font-family: 'Times New Roman';
    margin-bottom: 21px;
}

/* Modules - horizonal content */
#content .module {
    float:left;
    width:971px;
    margin:25px 0 0 0;
    position: relative;
}
#content .soon {
    float:left;
    width:971px;
    top:350px;
    z-index: 5;
    left:450px;
    position: absolute;
}
#content .soon p {font-size: 16px;}
#content .module.less-margin {
    margin:15px 0 0 0;
}
#content .module.no-margin {
    margin:0;
}
#content .module.btm-margin {
    margin:0 0 15px;
}
#content .module .intro {
    float:left;
    position: relative;
    width:450px;
    margin:20px 0 0;
}
#content .module .intro.no-margin {
    margin:0;
}
#content .module .intro h2, #content #dynamic-content .intro h2 {
    float:left;
    width:400px;
    color:#645989;
    font-family: 'Times New Roman';
    font-size: 28px;
    padding:0 0 20px;
}
#sub #content .module h2 {
    width:971px;
    color:#645989;
    font-family: 'Times New Roman';
    font-size: 28px;
    padding:0 0 20px;
    float: left;
}
#sub #content .module .intro {
    width:800px;
    margin:0;
}
#media #content .page-title {
    width:100%;
}
#media #content .page-title img {
    float:right;
}
#media #content .page-title h2 {
     float:left;
    width:430px;
    color:#645989;
    font-family: 'Times New Roman';
    font-family: 28px;
    margin:77px 0 0 51px;
}

#content .module .intro  p, #content #dynamic-content .intro p {
    font-size: 14px;
    margin-bottom: 20px;
}

#content .module .image-list {
    float:right;
    position: relative;
    width:500px;
}
#content .module .image-list ul {
    list-style: none;
    width:100%;
}
#content .module .image-list li {
    float:left;
    position: relative;
    width: 140px;
    height:123px;
    padding-left:19px;
}
#content .image-caption-holder {
    float:left;
    position: relative;
    width:460px;
    height:300px;
    margin:0 40px 0 0;
}
#content .image-caption-holder.last {
    margin-right: 0;
}
#content .image-caption-holder p {
    font-size: 16px;
    padding:10px 0
}
#content .promos {
    z-index:99;
    position:absolute;
    top:456px;
    width:300px;
}


/* Modules */
#content .module.vertical {
    float: left;
    margin: 0 0 24px;
    width: 481px;
    height:auto;
    position: relative;
}
#stages #content .module.vertical {
    width: 430px;
    height:auto;
    position: relative;
    float:left;
    top:0;
}
#content .module.vertical.wide {
    width: 532px;
}
#content .module.vertical.top-margin {
    margin-top:30px;
}
#abilities #content .module.vertical.top-margin {
    margin-top:60px;
    width:430px;
}
#abilities #content .module.vertical.top-margin .intro {
    margin-top:40px;
}
#content .module.vertical .intro {
    float:left;
    position: relative;
    width:400px;
    margin:20px 0 0;
}
#content .module.vertical .intro.short {
    margin: 0;
}
#content .module.vertical a.btn-prev {
    float:right;
    background:url(../imgs/btns/btn_prev.gif) no-repeat 0 0;
    width: 107px; height: 48px;
    text-indent: 999em;
    margin:15px 10px 0 0;
}
#content .module.vertical a.btn-prev:hover {
    background:url(../imgs/btns/btn_prev_rollover.gif) no-repeat 0 0;

}
#content .module.vertical a.btn-next {
    float: right;
    background:url(../imgs/btns/btn_next.gif) no-repeat 0 0;
    width: 107px; height: 48px;
    text-indent: 999em;
    margin:15px 0 0;
}
#content .module.vertical a.btn-next:hover {
    background:url(../imgs/btns/btn_next_rollover.gif) no-repeat 0 0;
}

/*Character Pages*/

#character-detail #content .module.vertical {
    float: left;
    margin: 0 0 24px;
    width: 552px;
    height:auto;
    position: relative;
}
#character-detail #content .module.vertical img {
    float: right;
}
#character-detail #content .module.vertical.narrow {
    float: left;
    margin:40px 0 24px;
    width: 412px;
    height:auto;
    position: relative;
}
#character-detail #content .module.vertical.narrow .character-nav {
    float:left;
    position: relative;
    width:100%;
    height:65px;
    margin:0 0 20px;
}
#character-detail #content .module.vertical.narrow .character-nav a.btn-next {
    float: left;
    background:url(../imgs/btns/btn_next.gif) no-repeat 0 0;
    width: 107px; height: 48px;
    text-indent: 999em;
    margin:15px 0 0 10px;
     overflow: hidden;
}
#character-detail #content .module.vertical.narrow .character-nav a.btn-next:hover {
    background:url(../imgs/btns/btn_next_rollover.gif) no-repeat 0 0;
}
#character-detail #content .module.vertical.narrow a.btn-prev {
    float: left;
    background:url(../imgs/btns/btn_prev.gif) no-repeat 0 0;
    width: 107px; height: 48px;
    text-indent: 999em;
    margin:15px 0 0;
    overflow: hidden;
}
#character-detail #content .module.vertical.narrow .character-nav a.btn-prev:hover {
    background:url(../imgs/btns/btn_prev_rollover.gif) no-repeat 0 0;
}
#character-detail #content .module.vertical.narrow .character-nav a.btn-close {
    background: url(../imgs/btns/btn_close.gif) no-repeat 0 0;
    float: right;
    height: 20px; width: 85px;
    position: relative;
    margin:26px 0 0;
    text-indent: -9999em; overflow: hidden;
}
#character-detail #content .module.vertical.narrow .character-nav a.btn-close:hover {
    background: url(../imgs/btns/btn_close_hover.gif) no-repeat 0 0;

}
#character-detail #content .module.vertical.narrow .img-nav {
    float: left;
    position:relative;
    width:100%;
    margin:20px 0 0;
}
#character-detail #content .module.vertical.narrow .img-nav.short {margin-top:10px;}
#character-detail #content .module.vertical.narrow .img-nav ul {
    list-style: none;
    width: 100%;
    margin:0;
    padding:0;
}
#character-detail #content .module.vertical.narrow .img-nav li {
    width:198px;
    float:left;
    margin: 0 8px 3px 0;
}
#character-detail #content .module.vertical.narrow .img-nav li a {
    float:left;
    position: relative;
    border:3px solid #000;
}
#character-detail #content .module.vertical.narrow .img-nav li.last {
    margin-right: 0 ;
}
#character-detail #content .module.vertical.narrow .img-nav li.current a  {
    border:3px solid #645989;
}

/*Story Pages*/
#story #content .module.vertical .intro {
    margin: 30px 0 0;
    height:185px;
}
#content .module.vertical .button-nav {
    float:left;
    width: 400px;
    height:48px;
    overflow: hidden;
    top:0;
}

#content .module.vertical .button-nav a.btn-prev {
    float:right;
    background:url(../imgs/btns/btn_prev.gif) no-repeat 0 0;
    width: 107px; height: 48px;
    text-indent: 999em;
    margin:0 10px 0 0;
    overflow: hidden;
}
#content .module.vertical .button-nav a.btn-prev:hover {
    background:url(../imgs/btns/btn_prev_rollover.gif) no-repeat 0 0;

}
#content .module.vertical .button-nav a.btn-next {
    float: right;
    background:url(../imgs/btns/btn_next.gif) no-repeat 0 0;
    width: 107px; height: 48px;
    text-indent: 999em;
    margin:0 0 0;
    overflow:hidden;
}
#content .module.vertical .button-nav a.btn-next:hover {
    background:url(../imgs/btns/btn_next_rollover.gif) no-repeat 0 0;
}

#timeline {
    float: left;
    width:100%;
    height: 31px;
    position: relative;
    background: url(../imgs/content/story/story_timeline_bg.png) repeat-x 0 0;
}

#timeline ul {
    list-style: none;
    margin: 0 auto; padding: 0;
    width: 971px;
    position: relative;
    height:31px;
}
#timeline ul li {
    float: left;
    width: auto;
    height: 22px;
    margin: 0;
    position: relative;
    text-align: right;
    cursor:pointer;
    background: url(../imgs/content/story/story_timeline_btn.png) no-repeat 0 0;
    width:231px; height:30px;
}
#timeline ul li a {
    color: #999999;
    font-size: 10px;
    width: 100%;
    text-decoration: none;
    height:30px;
    display: block;
    padding-top:2px;
}

#timeline ul li.full {
    background: url(../imgs/content/story/story_timeline_btn_full.png) no-repeat 0 0;
    width:260px; height:30px;
    text-align: right;

}
#timeline ul li.single {
    background: url(../imgs/content/story/story_timeline_btn_single.png) no-repeat 0 0;
    width:203px; height:30px;
}
#timeline ul li.right {
    background: url(../imgs/content/story/story_timeline_btn_single_right.png) no-repeat 0 0;
    width:231px; height:30px;
}
#timeline ul li.current {
    background: url(../imgs/content/story/story_timeline_btn_rollover_full.png) no-repeat 0 0;
    width:260px; height:30px;
    text-align: right;
}

#timeline ul li.last {margin-right: 0;}

#timeline ul li.current a, #timeline ul li.full a, #timeline ul li.right a {
     padding:2px 0 0;
     width: 230px;
}
#timeline ul li.right a {width:201px;}
#timeline ul li:hover a {color: #645988}

#timeline ul li.current a {
    color: #645988;
     font-size: 10px;
}


/* Stages Pages  ---------------- */

#content #dynamic-content {
    width: 971px;
    height:450px;
    position: relative;
    float:left;
    overflow: hidden;
    z-index: 1;
    top:-180px;
}
#content #dynamic-content .intro {
    float:left;
    position: relative;
    width:400px;
    margin:170px 0 0;
}
#content #dynamic-content .stg-image {
    float:right;
    position:relative;
    width: 528px;
    height: 450px;
}
#content #dynamic-content .stg-image img {
    background-color: #000;

}

#stages #content .module {
    top: -180px;
}

#content .module ul.img-nav {
    float: left; clear: both;
    list-style: none;
    width: 971px;
    margin:0 0 30px;
}
#content .module ul.img-nav li {
    float: left;
    overflow: hidden;
    margin: 0 3px 0 0;
    width: 233px;
    height:103px;
    border:3px solid #000;
}
#content .module ul.img-nav li a {
     display: block
}
#content .module ul.img-nav li.current  {
    border:3px solid #645989;
}
.hidden {display:none;}

 /*Abilities Pages*/

#abilities #content .module ul.img-nav {
    float: left; clear: both;
    list-style: none;
    width: 971px;
    margin:0 ;
}
#abilities #content .module ul.img-nav li {
    float: left;
    overflow: hidden;
    margin: 0 9px 0 0;
    width: 180px;
    height:126px;
    font-size: 16px;
    color: #645989;
    font-weight: 500;
    border:none;
}
#abilities #content .module ul.img-nav li a {
     display: block;
     border:3px solid #000;
     margin-top: 3px;
}
#abilities #content .module ul.img-nav li a:hover {
     border:3px solid #645989;
}
#abilities #content .module ul.img-nav li.current {
    border:none;
}

#content .module .small-module {
    background: url(../imgs/layout/small_module_bg.gif) repeat-x 0 0;
    width: 280px;
    height:309px;
    float: left;
    border-right:1px solid #303030;
    border-top:1px solid #303030;
    padding: 20px;
}
#content .module .small-module.last {
    border-right:none;
}

#content .module .small-module img {
    width:281px;
    height:181px;
    margin-bottom: 20px;
}
#content .module .small-module h4 {
    font-size: 16px;
    color: #645989;
    padding-bottom: 10px;
    text-transform: uppercase;
}
#content .module .small-module p {
    font-size: 12px;
}
#content .module .btn-back  {
    width: 100px;
    height:16px;
    float:left;
    margin-bottom: 25px;
}
#content .module .btn-back a.back {
    width: 54px;
    height:16px;
    background: url(../imgs/btns/btn_back.gif) no-repeat 0 0;
    text-indent: -999em;
    display: block;
}
#content .module .btn-back a.back:hover {
    background: url(../imgs/btns/btn_back_hover.gif) no-repeat 0 0;
}

/* Media Pages  ---------------- */

#media #content .module #gallery {
  float:left;
  position: relative;
  width:960px;
}
#media #content .module #gallery .controls {
    position:absolute;
    width:100%;
    z-index: 5;
}
#media #content .module #gallery #thumbs {
    position:relative;
    float:left;
    width:960px;
    margin:0 ;
}
#media #content .module #gallery #thumbs a.prev {
    background: url(../imgs/content/media/slideshow_prev.png) no-repeat 0 0;
    position:absolute;
    left:0;
    top:15px;
    width:48px;
    height:48px;
    text-indent:-999em;
}
#media #content .module #gallery #thumbs a.next {
    background: url(../imgs/content/media/slideshow_next.png) no-repeat 0 0;
    position:absolute;
    right:2px;
    top:15px;
    width:46px;
    height:48px;
    text-indent:-999em;
}
#media #content .module #gallery #thumbs a.prev:hover {
    background: url(../imgs/content/media/slideshow_prev_hover.png) no-repeat 0 0;
}
#media #content .module #gallery #thumbs a.next:hover {
    background: url(../imgs/content/media/slideshow_next_hover.png) no-repeat 0 0;
}

#media #content .module #gallery #thumbs ul.img-list {
    float: left; clear: both;
    list-style: none;
    width: 864px;
    margin:0 48px 30px;
}
#media #content .module #gallery #thumbs ul.img-list li {
    float: left;
    overflow: hidden;
    margin: 0;
    width: 144px;
    height:80px;
}
#media #content .module #gallery #thumbs ul.img-list li a {
     display: block
}
#media #content .module #gallery .slideshow {
    position:relative;
    float:left;
    margin:0;
    margin:0 0 0 44px;
    z-index: 5;
}
#media #content .module #gallery .slideshow a:hover {
    color:#000;
}

#media #content .module #gallery .caption-holder  {
    position:relative;
    float:left;
    margin:12px 0 0 44px;
    width:960px;
    height:50px;
    color: #4d4d4d;
}



/* Horizontal image list  ---------------- */

#content .module ul.img-list {
    float: left; clear: both;
    list-style: none;
    width: 971px;
    margin:0 0 30px;
}
#content .module ul.img-list li {
    float: left;
    overflow: hidden;
    margin: 0 9px 15px 0;
    width: 233px;
    height:103px;
}
#content .module ul.img-list li a {
     display: block
}
#content .module ul.img-list li.current img {
    width:227px; height:96px;
    border:3px solid #645989;
}
#content .module ul.img-list li.last, #abilities #content .module ul.img-nav li.last {margin-right: 0;}
#content .module ul.img-list li p {
    float: left; clear: both;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    margin: 0 0 4px;
    width: 100%;
}



/* Global Elements
------------------------------------------------------------------------------ */
.hr-solid {
    background: #e9eaeb;
    clear: both; float: left;
    height: 3px; width: 100%;
    margin: 6px 0 34px;
}
.hr-solid.extra{
    margin-top: 24px;
}
.hr-solid hr {text-indent: -9999em; overflow: hidden; position: absolute; left: -9999em;}




/* Promo Sub-Nav Menu
------------------------------------------------------------------------------------------ */
#quotes-wrapper {
    display:none;
    position: absolute;
    top:550px;
    right:17px;
    height:108px;
    width:302px;
}
#quotes-wrapper ul#quotes {
    height: 108px;
    width:302px;
    margin:0;
}
#quotes-wrapper ul#quotes li {
     height: 108px;
    width:302px;
    margin:0;
    list-style: none;
}
#quotes-wrapper ul#quotes li img {
    position: absolute;
    top:0;
    left:0;
    height:108px;
    width:302px;
}



/* Promo Sub-Nav Menu
------------------------------------------------------------------------------------------ */
#promo-nav {
    float: left;
    width:100%;
    height: 31px;
    position: relative;
    background: url(../imgs/layout/promo_bg.gif) repeat-x 0 0;
    z-index:10;
}
#promo-nav ul {
    list-style: none;
    margin: 0 auto; padding: 0;
    width: 971px;
    position: relative;
    height:31px;
    padding:0;
}
#promo-nav ul li {
    float: left;
    width: auto;
    height: 22px;
    margin: 0;
    padding: 8px 45px;
    position: relative;
    text-align: center;
}
#promo-nav ul li.new {
    background:url(../imgs/btns/icon_new.png) no-repeat 130px 4px;
    float:left;
    width: auto;
    height: 22px;
    margin: 0;
    padding: 8px 58px;
    position: relative;
    text-align: center;
}
#promo-nav ul li.last {padding-right: 0;}
#promo-nav ul li.first {padding-left: 0;}
#promo-nav ul li.first a {color:#fff;}
#promo-nav ul li a {
    color: #999999;
    font-size: 12px;
    float: left;
    width: 100%;
    text-decoration: none;
    text-align: center;
    font-weight:400;
    text-transform: uppercase;
}
#promo-nav ul li a:hover {color: #645988}
#promo-nav ul li a.current {color: #645988;}
#promo-nav ul li .promo-holder {
    position: absolute;
    z-index: 10;
}
#promo-nav ul li .promo-holder a {
     text-align: left;
    text-transform: none;
    display:block;
}
#promo-nav ul li .promo-holder h3, #promo-nav ul li .promo-holder a h3 {
    float:left;
    width:100px;
    color:#645989;
    font-size: 14px;
    margin:0;
    line-height: 1.2em;
    display: inline;
}

#promo-nav ul li .promo-holder a span {
        display: block;    
}
#promo-nav ul li .promo-holder p, #promo-nav ul li .promo-holder a p {
    float:left;
    width:120px;
    color:#fff;
    font-size: 12px;
    margin:5px 0;
    line-height: 1.2em;

}
#promo-nav ul li .promo-holder.preorder {
   background: url(../imgs/content/promo_bg_preorder.gif) no-repeat 0 0;
   width:250px;
   height:94px;
   top:-133px;
   left:0;
   padding: 42px 0 0 12px;
   display:block;
}
#promo-nav ul li .promo-holder.preorder.hidden {display:none;}
#promo-nav ul li .promo-holder.iwata {
   background: url(../imgs/content/promo_bg_iwata.png) no-repeat 0 0;
   width:350px;
   height:95px;
   top:-109px;
   left:-80px;
   padding: 15px 0 0 12px;
}
#promo-nav ul li .promo-holder.console {
   background: url(../imgs/content/promo_bg_virtual_console_metroid.png) no-repeat 0 0;
   width:350px;
   height:95px;
   top:-109px;
   left:-76px;
   padding: 15px 0 0 12px;
}
#promo-nav ul li .promo-holder.console.super {
   background: url(../imgs/content/promo_bg_virtual_console_super_metroid.png) no-repeat 0 0;

}
#promo-nav ul li .promo-holder.console .text, #promo-nav ul li .promo-holder.iwata .text {
    float:left;
    position: relative;
    width:120px;
    text-align: left;
}
#promo-nav ul li .promo-holder.guide .text {
    float:left;
    position: relative;
    width:112px;
    text-align: left;
}
#promo-nav ul li .promo-holder.console .promo-btns, #promo-nav ul li .promo-holder.guide .promo-btns {
    float: left;
    position: relative;
    width:122px;
}
#promo-nav ul li .promo-holder.iwata .promo-btns {
    float: left;
    position: relative;
    width:122px;
    padding-left:14px;
}
#promo-nav ul li .promo-holder.console .promo-btns p, #promo-nav ul li .promo-holder.guide .promo-btns p {
    float:left;
    width:120px;
    color:#fff;
    font-size: 12px;
    margin:3px 0 0;
    line-height: 1.2em;
    text-align: left;
}
#promo-nav ul li .promo-holder.console .promo-btns p a.console, #promo-nav ul li .promo-holder.iwata .promo-btns p a.part1, #promo-nav ul li .promo-holder.iwata .promo-btns p a.part2, #promo-nav ul li .promo-holder.guide .promo-btns p a.console {
    text-transform: none;
    color:#fff;
    font-size: 12px;
    margin:0;
    text-align: left;
    padding:5px 0 0 10px;
}
#promo-nav ul li .promo-holder.console .promo-btns a.console, #promo-nav ul li .promo-holder.guide .promo-btns a.console, #promo-nav ul li .promo-holder.guide .promo-btns a.console {
    background: url(../imgs/btns/btn_console.gif) no-repeat 0 0;
    width: 110px;
    height:28px;
    float: left;
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
}
#promo-nav ul li .promo-holder.console .promo-btns a.console:hover, #promo-nav ul li .promo-holder.guide .promo-btns a.console:hover {
    background: url(../imgs/btns/btn_console_hover.gif) no-repeat 0 0;
}
#promo-nav ul li .promo-holder.iwata .promo-btns a.part1 {
    background: url(../imgs/btns/btn_iwata_part1.gif) no-repeat 0 0;
    width: 90px;
    height:24px;
    float: left;
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
}
#promo-nav ul li .promo-holder.iwata .promo-btns a.part1:hover {
    background: url(../imgs/btns/btn_iwata_part1_hover.gif) no-repeat 0 0;
}
#promo-nav ul li .promo-holder.iwata .promo-btns a.part2 {
    background: url(../imgs/btns/btn_iwata_part2.gif) no-repeat 0 0;
    width: 90px;
    height:24px;
    float: left;
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
}
#promo-nav ul li .promo-holder.iwata .promo-btns a.part2:hover {
    background: url(../imgs/btns/btn_iwata_part2_hover.gif) no-repeat 0 0;
}

#promo-nav .toggle-footer {
    width:43px;
    height:11px;
    background:#1a1a1a;
    padding:5px;
    float:left;
    position:relative;
    margin: 10px 0 0;
    font-size: 10px;
}
#promo-nav ul li .promo-holder.download {
   background: url(../imgs/content/promo_bg_download.png) no-repeat 0 0;
   width:270px;
   height:95px;
   top:-109px;
   left:-17px;
   padding: 15px 0 0 12px;
}
#promo-nav ul li .promo-holder.newsletter {
   background: url(../imgs/content/promo_bg_newsletter.png) no-repeat 0 0;
   width:270px;
   height:95px;
   top:-109px;
   left:-24px;
   padding: 15px 0 0 12px;
}
#promo-nav ul li .promo-holder.newsletter h3, #promo-nav ul li .promo-holder.newsletter p {
    width:130px;
}
#promo-nav ul li .promo-holder.guide {
   background: url(../imgs/content/promo_bg_guide.gif) no-repeat 0 0;
   width:350px;
   height:127px;
   top:-126px;
   right:-11px;
   padding: 35px 0 0 12px;
}


/* Global Footer
------------------------------------------------------------------------------------------ */

#global-footer-holder {
    background: #000 url(../imgs/layout/footer_bg.gif) repeat-x 0 0;
    float: left; clear: both;
    width: 100%;
    height:130px;
}
#global-footer {
    float: none; clear: both;
    margin: 15px auto; padding: 0;
    width:980px;
    position: relative;
    z-index: 10;
}
#global-footer ul {
    float: left;
    list-style: none;
    margin: 0; padding: 0;
    width: 980px;
}
#global-footer ul li {
    color: #7b7b7b;
    float: left;
    vertical-align: middle;
    margin:10px 14px 0 0;
}
#global-footer ul li.last {margin-right: 0;}
#global-footer ul li a {
    color: #777;
    font-size: 11px;
    text-decoration: none;
    display:block;
}
#global-footer p.copy {
    color: #939597;
    font-size: 10px;
    clear: both; float: none;
    margin: 0;
    padding: 5px 0 ;
    text-align:center;
    width:980px;
    line-height:1.2em;
    height:15px;
}
#global-footer .footer-esrb {
    position: relative;
    text-transform: uppercase;
    width: auto;
    margin-top: -10px;

}
#global-footer .footer-esrb a {
    width: auto;
    display: block;
    font-size: 8px;
    word-spacing: -.5px;
}
#global-footer .footer-esrb img a {
    width: auto;
    padding-left:10px;

}
#global-footer .footer-esrb a:hover {
    color: #645988;
}
#global-footer .footer-info {
    background: url(../imgs/footer/important_info_box.jpg) no-repeat 0 0;
    width:323px;
    height:80px;
    position: relative;
    margin: -12px 0 0 15px;
    padding:0;
}
#global-footer .footer-info a{
    display: block;
    width:323px;
    height:80px;
    font-size: 9px;
    line-height: 12px;
    text-indent: -999em;
}
#global-footer .footer-info span.heading {
    text-transform: uppercase;
    color:#fff;
}

/*
   -----   Colorbox CSS - Buy Now/Buy Now Overlay  -------------------
*/

#overlay-content {
    width: 100px;
    display:none;
    overflow: hidden;
    position: absolute;
    top: -10000px;
}
#overlay-content h1 {
    text-indent:-999em;
}

/*  STEP ONE*/
.step1 {
    float: left;
    width:769px;
    height:391px;
    background: url(../imgs/content/overlay/buynow_bg.png) no-repeat 0 0;
}
.step1 .flags-wrapper {
    width:750px;
    height:250px;
    margin:100px 15px 0;
}
.step1 .flags-wrapper h3, .step2 .inside-content h3, .step3 .inside-content h3 {
    font-size: 18px;
    color:#f4f4f4;
    font-weight: 100;
}
.step1 .flags-wrapper .flags {
    margin-top:10px
}
.step1 .flags-wrapper .flags a.us {
    background: url(../imgs/content/overlay/metroid_m_us_products.png) no-repeat 0 0;
    width:366px;
    height:242px;
    display: block;
    float:left;
}
.step1 .flags-wrapper .flags a.us:hover {
    background: url(../imgs/content/overlay/metroid_m_us_products_rollover.png) no-repeat 0 0;
}
.step1 .flags-wrapper .flags a.canada {
    background: url(../imgs/content/overlay/metroid_m_canada_products.png) no-repeat 0 0;
    width:367px;
    height:242px;
    display: block;
    float:left;
}
.step1 .flags-wrapper .flags a.canada:hover {
    background: url(../imgs/content/overlay/metroid_m_canada_products_rollover.png) no-repeat 0 0;
}

/*  STEP TWO & THREE ------------PREORDER------------------*/
.step2 {
    float: left;
    width:769px;
    height:442px;
    background: url(../imgs/content/overlay/buynow_bg_two.png) no-repeat 0 0;
}
.step3 {
    float: left;
    width:769px;
    height:527px;
    background: url(../imgs/content/overlay/buynow_bg_three.png) no-repeat 0 0;
}
.step2 .inside-content, .step3 .inside-content {
    margin:165px 20px 0;
    width:730px;
    height:260px;
}
.step2 .inside-content .go, .step3 .inside-content .go {
   width:414px;
   height:117px;
   margin:14px 0 0;
   position: relative;
}

.step2 .inside-content .go a.buy, .step3 .inside-content .go a.buy {
    background: url(../imgs/content/overlay/btn_go_buy.gif) no-repeat 0 0;
    position: absolute;
    top:0;
    left:251px;
    width:117px;
    height: 68px;
    text-indent: -999em;
    display: block;
}
.step2 .inside-content .go a.buy:hover, .step3 .inside-content .go a.buy:hover {
    background: url(../imgs/content/overlay/btn_go_buy_rollover.gif) no-repeat 0 0;
}
.step2 .inside-content .go p, .step3 .inside-content .go p {
    color:#666666;
    font-size: 11px;
    padding: 78px 0 0 253px;
}
.step2 .inside-content .view-retailers, .step3 .inside-content .view-retailers {
  float:left;
  margin:28px 0 0;
  position: relative;
}
.step2 .inside-content .view-retailers .retail, .step3 .inside-content .view-retailers .retail {
    float:left;
    margin: 0;
    width:450px;
    height:48px
}
.step2 .inside-content .view-retailers .retail a.retailers, .step3 .inside-content .view-retailers .retail a.retailers {
    position: absolute;
    background: url(../imgs/content/overlay/btn_view_retailers.gif) no-repeat 0 0;
    width:187px;
    height: 60px;
    margin: 10px 0 0;
    text-indent: -999em;
}
.step2 .inside-content .view-retailers .retail a.retailers:hover, .step3 .inside-content .view-retailers .retail a.retailers:hover {
    background: url(../imgs/content/overlay/btn_view_retailers_rollover.gif) no-repeat 0 0;
}
.step3 .inside-content .view-retailers ul.retailers-list {
    float:left;
    width:435px;
    list-style: none;
    margin:10px 0 0 -5px;
}
.step3 .inside-content .view-retailers ul.retailers-list li {
    width:auto;
    height: auto;
    float: left;
    margin:0;
    padding:0;
    text-indent: -999em;
}
.step3 .inside-content .view-retailers ul.retailers-list li.toys { background: url(../imgs/content/overlay/retailers_toysrus.png) no-repeat 0 0; width:150px; height:70px;}
.step3 .inside-content .view-retailers ul.retailers-list li.best { background: url(../imgs/content/overlay/retailers_bestbuy.png) no-repeat 0 0;width:144px; height:70px;}
.step3 .inside-content .view-retailers ul.retailers-list li.sears { background: url(../imgs/content/overlay/retailers_sears.png) no-repeat 0 0;width:148px; height:71px;}
.step3 .inside-content .view-retailers ul.retailers-list li.amazon { background: url(../imgs/content/overlay/retailers_amazon.png) no-repeat 0 0;width:150px; height:71px;}
.step3 .inside-content .view-retailers ul.retailers-list li.future { background: url(../imgs/content/overlay/retailers_futureshop.png) no-repeat 0 0;width:144px; height:70px;}
.step3 .inside-content .view-retailers ul.retailers-list li.blank { background: url(../imgs/content/overlay/retailers_blank.png) no-repeat 0 0;width:150px; height:70px;}



/*  STEP TWO  ------------BUY NOW------------------*/


.step2 {
    float: left;
    width:769px;
    height:391px;
    background: url(../imgs/content/overlay/buynow_bg.png) no-repeat 0 0;
}
.step2 .inside-content {
    margin:106px 20px 0;
    width:736px;
    height:260px;
}
.step2 .inside-content .view-retailers{
  float:left;
  margin: 0;
  position: relative;
}
.step2 .inside-content .view-retailers ul.retailers-list {
    float:left;
    width:736px;
    list-style: none;
    margin:10px 0 0 -5px;
}
.step2 .inside-content .view-retailers ul.retailers-list li {
    width:auto;
    height: auto;
    float: left;
    margin:0;
    padding:0;
    text-indent: -999em;

}
.step2 .inside-content .view-retailers ul.retailers-list li a {display:block; width: 145px; height:120px;}

.step2 .inside-content .view-retailers ul.retailers-list li.toys { background: url(../imgs/content/overlay/buynow/retailers_large_toysrus.png) no-repeat 0 0; width:248px; height:124px;}
.step2 .inside-content .view-retailers ul.retailers-list li.best { background: url(../imgs/content/overlay/buynow/retailers_large_bestbuy.png) no-repeat 0 0;width:241px; height:124px;}
.step2 .inside-content .view-retailers ul.retailers-list li.amazon { background: url(../imgs/content/overlay/buynow/retailers_large_amazon.png) no-repeat 0 0;width:247px; height:124px;}
.step2 .inside-content .view-retailers ul.retailers-list li.future { background: url(../imgs/content/overlay/buynow/retailers_large_futureshop.png) no-repeat 0 0;width:248px; height:121px;}
.step2 .inside-content .view-retailers ul.retailers-list li.gamestop { background: url(../imgs/content/overlay/buynow/retailers_large_gamestop.png) no-repeat 0 0;width:241px; height:121px;}
.step2 .inside-content .view-retailers ul.retailers-list li.arch { background: url(../imgs/content/overlay/buynow/retailers_large_archambault.png) no-repeat 0 0;width:247px; height:121px;}

.step2 .inside-content .view-retailers ul.retailers-list li.toys:hover { background: url(../imgs/content/overlay/buynow/retailers_large_toysrus_rollover.png) no-repeat 0 0; width:248px; height:124px;}
.step2 .inside-content .view-retailers ul.retailers-list li.best:hover { background: url(../imgs/content/overlay/buynow/retailers_large_bestbuy_rollover.png) no-repeat 0 0;width:241px; height:124px;}
.step2 .inside-content .view-retailers ul.retailers-list li.amazon:hover { background: url(../imgs/content/overlay/buynow/retailers_large_amazon_rollover.png) no-repeat 0 0;width:247px; height:124px;}
.step2 .inside-content .view-retailers ul.retailers-list li.future:hover { background: url(../imgs/content/overlay/buynow/retailers_large_futureshop_rollover.png) no-repeat 0 0;width:248px; height:121px;}
.step2 .inside-content .view-retailers ul.retailers-list li.gamestop:hover { background: url(../imgs/content/overlay/buynow/retailers_large_gamestop_rollover.png) no-repeat 0 0;width:241px; height:121px;}
.step2 .inside-content .view-retailers ul.retailers-list li.arch:hover { background: url(../imgs/content/overlay/buynow/retailers_large_archambault_rollover.png) no-repeat 0 0;width:247px; height:121px;}



/* -------- COLORBOX CSS --------------------*/


#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

#cboxOverlay{background:#000; }
#colorbox{}
    #cboxContent{background: none;}
        #cboxLoadedContent{margin-bottom:0;}
        #cboxTitle{display: none;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(images/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(images/loading_background.png) center center no-repeat;}
        #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; top:20px; right:20px; background:url(../imgs/btns/btn_close.gif) no-repeat 0 0;  width:85px; height:20px; text-indent:-9999px;}
        #cboxClose.hover{background: url(../imgs/btns/btn_close_hover.gif) no-repeat 0 0;}

/*
    The following fixes png-transparency for IE6.
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition

    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.

    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background images are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}

/* End CSS */