





body {
 background: black;
 min-width: 1120px;
}

.clearB{
 clear:both;
}

.MainMenu{
 list-style: none;
 z-index: 12;
 position: absolute;
 top: 88px;
 margin-left: 0;
}

.MainMenu > li{
 position: absolute;
 display: block;
 height: 24px;
 white-space: nowrap;
}

.MainMenu li.CSS3 div.DropDown div{
 
-moz-transition: margin-top 0.6s  ;
-webkit-transition: margin-top 0.6s  ; -webkit-backface-visibility: hidden; -o-transition: margin-top 0.6s  ;
transition: margin-top 0.6s  ;
;
}

.MainMenu li div.DropDown {
 position: relative;
 top: 0;
 overflow: hidden;
}

.MainMenu li div.DropDown div {
 width: 149px;
 background: url('http://www.runescape.com/img/global/header/nav/DropDownBg.png') bottom left no-repeat;
 margin-top: -186px;
 left: 0;
 z-index: 2;
 position: relative;
 letter-spacing: .02em;
}

.MainMenu > li:hover.CSS3 div.DropDown div{
 margin-top: 0;
 
-moz-transition: margin-top 0.6s  ;
-webkit-transition: margin-top 0.6s  ; -webkit-backface-visibility: hidden; -o-transition: margin-top 0.6s  ;
transition: margin-top 0.6s  ;
;
}

.MainMenu li div.DropDown ul{
 list-style: none;
 position: relative;
 z-index: 4;
 margin-left: 0;
 padding: 5px 0 15px 0;
 background: url('http://www.runescape.com/img/global/header/nav/DropDownFlourish.png') 4px 2px no-repeat;
}

.MainMenu li div.DropDown ul li{
 line-height: 24px;
 font-size: 16px;
 margin: 0;
 position: relative;
}

.MainMenu li div.DropDown li a{
 
-moz-transition: color 300ms  ;
-webkit-transition: color 300ms  ; -webkit-backface-visibility: hidden; -o-transition: color 300ms  ;
transition: color 300ms  ;
;
 z-index: 3;
 top: 0;
 left: 0;
 display: block;
 padding: 0 0 0 17px;
}

.MainMenu li div.DropDown li a:hover{
 color: white;
 
-moz-transition: color 100ms  ;
-webkit-transition: color 100ms  ; -webkit-backface-visibility: hidden; -o-transition: color 100ms  ;
transition: color 100ms  ;
;
 text-decoration: none;
}

.MainMenu > li.navGameInfo{
 left: 130px;
 z-index: 20;
}

 .MainMenu > li.navGameInfo > a{
  width: 124px;
  height: 38px;
 }

.MainMenu > li.navGameMedia{
 left: 254px;
 z-index: 22;
}

 .MainMenu > li.navGameMedia > a{
  width: 154px;
  height: 38px;
 }

.MainMenu > li.Community{
 left: 711px;
 z-index: 24;
}

 .MainMenu > li.Community > a{
  width: 139px;
  height: 38px;
 }

.MainMenu > li.navMembership{
 left: 850px;
 z-index: 24;
}

 .MainMenu > li.navMembership > a{
  width: 135px;
  height: 38px;
 }

.MainMenu > li.Forum .DropDown{
 left: -5px;
}

.MainMenu li .Mask{
 height: 5px;
 top: 36px;
 position: absolute;
 width: 160px;
 background: url('http://www.runescape.com/img/global/header/nav/NavMask.png') top left repeat-x;
 z-index: 10;
 display: block;
 left: 3px;
 
-moz-transition: opacity 0.2s  0.2s;
-webkit-transition: opacity 0.2s  0.2s; -webkit-backface-visibility: hidden; -o-transition: opacity 0.2s  0.2s;
transition: opacity 0.2s  0.2s;
;
 opacity: 0.0; filter: alpha(opacity=0);
;
}

.MainMenu li:hover .Mask {
 opacity: 1; filter: alpha(opacity=100);
;
 
-moz-transition: opacity 0.1s  ;
-webkit-transition: opacity 0.1s  ; -webkit-backface-visibility: hidden; -o-transition: opacity 0.1s  ;
transition: opacity 0.1s  ;
;
}

#topBarWrapper,
#topBarShadow {
 width: 100%;
}

#topBarWrapper {
 background: url(http://www.runescape.com/img/main/splash/topBarWrapper_bg.jpg) repeat-x center top;
 height: 43px;
 position: relative;
 z-index: 2;
 min-width: 1120px;
}

 #topBar {
  width: 979px;
  margin: auto;
  z-index: 2;
  position: relative;
 }

  #registerLoginTab {
   display: none;
   background: url(http://www.runescape.com/img/main/splash/topBarTab_bg.png) no-repeat top center;
   height: 55px;
   position: absolute;
   left: 201px;
   top: 1px;
   width: 160px;
   opacity: 0.0; filter: alpha(opacity=0);

   z-index: 1;
  }

  .js #registerLoginTab {
   display: block;
  }

  #topBar #jagexLogo {
   background: url(http://www.runescape.com/img/main/splash/jagexLogo_bg.png) no-repeat left top;
   display: inline-block;
   margin: 0 4px 0 0;
   float: left;
  }

   #topBar #jagexLogo a {
    margin: 8px 16px 18px 14px;
    display: block;
   }

  #topBarNav {
   float: left;
   margin: 13px 0 0;
   z-index: 2;
   position: relative;
   list-style: none;
   
  }

   #topBarNav li {
    float: left;
    text-align: center;
   }

   #topBarNav li:first-child {
    width: 76px;
   }

   #topBarNav li:last-child {
    width: 121px;
   }

    #topBarNav li a {
     color: #d4d4d4;
     text-decoration: none;
    }

     #topBarNav li a span {
      color: #878788;
     }

    #topBarNav li a:hover {
     color: #f3b13f;
    }

  #topBarRight {
   float: right;
   margin: 2px 8px 0 0;
  }

   #playerCount {
    width: 273px;
    height: 42px;
    background: url(http://www.runescape.com/img/main/splash/playerCount_bg.png) no-repeat left top;
    float: left;
   }

    #playerCount > div {
     float: left;
     margin: 7px 0 6px 16px;
     color: white;
    }

     #playerCount > div span {
      color: #ffb619;
     }

    #playerCount a {
     float: right;
     width: 98px;
     height: 41px;
     margin: -2px 15px 0 0;
    }

   #languageSelector {
    float: right;
    margin: 3px 0 0 9px;
   }

  #runescapeLogoTop {
   background: url("http://www.runescape.com/img/main/splash/runescapeLogoTop.png") no-repeat center top;
   width: 315px;
   left: 330px;
   position: absolute;
   top: 0px;
   height: 43px;
   z-index: 3;
  }

  #topBarLanguage {
   position: relative;
  }

  #registrationLoginWrapper {
   display: none;
   clear: both;
   height: 80px;
   top: 43px;
   z-index: 3;
   overflow: hidden;
   position: absolute;
   width: 1016px;
   left: -18px;
  }

   #registrationForm,
   #loginForm {
    position: absolute;
    top: 10px;
   }

    #registrationForm {
     width: 500px;
     left: 7px;
    }

    #loginForm {
     right: 2px;
     width: 458px;
    }

    #registrationForm #submitEmailWrapper,
    #loginForm #loginWrapper {
     height: 29px;
     overflow: hidden;
     position: absolute;
     top: 20px;
    }

     #registrationForm #submitEmailWrapper {
      left: 349px;
      width: 95px;
     }

     #registrationForm button,
     #loginForm button {
      width: 100%;
      height: 100%;
     }

   #registrationLoginWrapper label {
    color: #F0B166;
    font-size: 16px;
    left: 0;
    position: absolute;
    top: -24px;
   }

   #registrationLoginWrapper .inputWrapper,
   #loginWrapper .inputWrapper {
    background: url("http://www.runescape.com/img/main/splash/inputBoxLeft.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    height: 28px;
    left: 9px;
    line-height: 28px;
    position: absolute;
    top: 20px;
   }

   #registrationLoginWrapper #emailInputWrapper {
    width: 322px;
   }

   #registrationLoginWrapper input {
    padding: 6px;
    color: #878788;
    border: none;
    width: 100%;
    font: 12px/14px MuseoSans500,Times New Roman,serif;
   }

   #registrationLoginWrapper .inputWrapper .Input_right {
    background: url("http://www.runescape.com/img/main/splash/inputBoxRight.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    height: 28px;
    width: 6px;
    position: absolute;
    right: -6px;
    top: 0;
   }

   #loginForm #loginWrapper {
    right: 0;
    width: 76px;
   }

   #loginForm #usernameWrapper,
   #loginForm #passwordWrapper {
    width: 168px;
   }

   #loginForm #passwordWrapper {
    left: 197px;
   }

   #passwordWrapper input[type="text"] {
    background: url("http://www.runescape.com/img/main/splash/inputBoxLeft.jpg") no-repeat scroll 0 0 transparent;
    width: 150px;
    font-family: Tahoma;
    font-style: italic;
   }

   #passwordInfo,
   #fbLogin {
    right: 277px;
    font-size: 10px;
    position: absolute;
    text-align: right;
    top: 51px;
    color: #eaeaea;
   }

   #passwordInfo {
    right: 88px;
   }




#headerWrapper {
 width: 1120px;
 height: 208px;
 margin: -78px auto 50px;
 position: relative;
 z-index: 1;
 background: url("http://www.runescape.com/img/main/splash/headerWrapper_bg.png") no-repeat 0px top;
}

 #headerB {
  height: 129px;
  margin: auto;
  position: relative;
  background: url("http://www.runescape.com/img/main/splash/header_bg.jpg") no-repeat 58px top;
 }




#PlayNowWrapper {
 height: 225px;
 width: 578px;
 top: 285px;
 position: absolute;
 left: 50%;
 padding: 0;
}



#contentWrapper {
 width: 100%;
 position: absolute;
 top: 394px;
 background: url(http://www.runescape.com/img/main/splash/contentWrapper_bg.png) no-repeat scroll center bottom transparent;
}

 #mediaWrapper {
  background: url("http://www.runescape.com/img/main/splash/mediaWrapper_bg.png") no-repeat scroll 5px bottom transparent;
  height: 211px;
  width: 1005px;
  margin: auto;
  position: relative;
  top: 5px;
 }

  #mediaWrapperPrevious,
  #mediaWrapperNext {
   display: none;
   position: absolute;
   width: 90px;
   height: 42px;
   bottom: 11px;
  }

  #mediaWrapperPrevious {
   left: 67px;
  }

  #PromoPoints {
   display: none;
   left: 214px;
   position: absolute;
   bottom: 23px;
  }

  .js #mediaWrapperPrevious,
  .js #mediaWrapperNext,
  .js #PromoPoints {
   display: block;
  }

  #mediaButtonExample {
   display: none !important;
  }

  #mediaWrapperNext {
   left: 468px;
  }

  #trailerWrapper {
   float: right;
   margin: 0 6px 0 0;
   height: 190px;
   width: 397px;
   position: relative;
   z-index: 2;
  }

   #trailerImage {
    position: absolute;
    left: 46px;
    top: 40px;
    width: 260px;
    height: 131px;
    z-index: 1;
   }

   #trailerOverlay {
    background: url(http://www.runescape.com/img/main/splash/trailerOverlay.png) repeat scroll 0 0 transparent;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
   }

   #trailerWatch {
    left: 44px;
    top: 40px;
    position: absolute;
    width: 262px;
    height: 154px;
    z-index: 3;
   }

 #middleWrapper {
  background: url(http://www.runescape.com/img/main/splash/screenshots/background.jpg) no-repeat center bottom;
  height: 241px;
  margin: auto auto -28px;
  position: relative;
  width: 957px;
 }

  #leftMiddleOverlap {
   background: url(http://www.runescape.com/img/main/splash/screenshots/left.png) no-repeat center bottom;
   height: 242px;
   left: -9px;
   position: absolute;
   top: 0;
   width: 12px;
  }

  #screenshotsTitle {
   float: left;
   margin: 6px 0 0 33px;
  }

  #screenshotsAllMedia {
   margin: 13px 30px 0 0;
   float: right;
  }

  #screenshotWrapper {
   position: absolute;
   left: 35px;
   top: 58px;
   height: 150px;
   overflow: hidden;
  }

   #screenshotWrapper a {
    position: relative;
    float: left;
    margin-right: 15px;
    width: 285px;
    height: 100%;
   }

    #screenshotWrapper span {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     background: url(http://www.runescape.com/img/main/splash/screenshots/overlay.png) left top no-repeat;
    }

    #screenshotWrapper.nojs a:hover span,
    .js #screenshotWrapper span.glow {
     background-position: right top;
    }

    #screenshotWrapper img {
     display: block;
     width: 100%;
     height: 100%;
    }

  #prevScreen,
  #nextScreen {
   display: none;
   position: absolute;
   top: 117px;
   width: 41px;
   height: 42px;
   overflow: hidden;
   z-index: 1;
  }

  #prevScreen {
   left: -10px;
  }

  #nextScreen {
   right: -10px;
  }

   #nextScreen a,
   #prevScreen a {
    position: absolute;
    width: 90px;
    height: 42px;
    left: 0;
   }

   #nextScreen a {
    left: auto;
    right: 0;
   }

  #rightMiddleOverlap {
   background: url(http://www.runescape.com/img/main/splash/screenshots/right.png) no-repeat center top;
   height: 316px;
   position: absolute;
   right: -29px;
   width: 32px;
   top: 5px;
  }

 #bottomWrapper {
  background: url("http://www.runescape.com/img/main/splash/bottomWrapper_bg.jpg") no-repeat center 354px;
  height: 1308px;
  margin: auto;
  position: relative;
  width: 951px;
  color: #B8B8B8;
 }

  #bottomWrapper #welcome {
   background: url(http://www.runescape.com/img/main/splash/welcome_sides.png) no-repeat center top;
  }

   #bottomWrapper #welcome > div {
    height: 287px;
    padding: 67px 67px 0 78px;
    overflow: hidden;
    background: url(http://www.runescape.com/img/main/splash/welcome_bg.jpg) no-repeat 40px top;
   }

    #bottomWrapper #welcome img {
     float: left;
     margin: 0 10px 0 0;
    }

    #bottomWrapper #welcome p {
     line-height: 23px;
     margin-top: 12px;
     width: 430px;
     margin-left:0;
    }

    #welcome #welcomePlay {
     position: absolute;
     right: 109px;
     top: 229px;
     height: 55px;
     width: 234px;
    }

    #bottomWrapper #welcome ul {
     clear: left;
     float: none;
     width: 400px;
    }

  #bottomWrapper #membersBenefits {
   bottom: 500px;
   height: 450px;
   left: 192px;
   position: absolute;
   width: 295px;
  }

   #bottomWrapper #membersBenefits h4, #welcome h4 {
    font-size: 24px;
    line-height: 110%;
   }

   #bottomWrapper #welcome ul,
   #bottomWrapper #membersBenefits ul {
    list-style: none;
    margin-left: 0;
   }

   #bottomWrapper #membersBenefits ul {
    position: absolute;
    top: 202px;
    width: 284px;
   }

    #bottomWrapper #membersBenefits li {
     line-height: 23px;
     background: url("http://www.runescape.com/img/main/splash/bulletPoint.png") no-repeat 0 1px;
     padding-left: 25px;
     margin-bottom: 8px;
    }

    .membersBenefitsTrailer {
     height: 99px;
     left: -9px;
     overflow: hidden;
     position: relative;
     top: 10px;
     width: 290px;
    }

     #video_thumb {
      background-color: blue;
     }

     #membersBenefitsTrailerOverlay {
      background: url("http://www.runescape.com/img/main/splash/membersBenefitsArrowOverlay.png") no-repeat;
      height: 99px;
      left: 0;
      position: absolute;
      top: -1px;
      width: 290px;
      z-index: 2;
     }

     #membersBenefitsArrowOverlay:hover {
      background-position: 0 -75px;
      color: #D4D4D4;
      text-decoration: none;
     }

      #membersBenefitsTrailerCTA {
       color: #D4D4D4;
       display: block;
       font-size: 19px;
       line-height: 24px;
       margin-left: 140px;
       margin-top: 11px;
       width: 160px;
      }

     #membersBenefitsUpgradeButton {
      bottom: -37px;
      height: 65px;
      left: -3px;
      position: absolute;
      width: 264px;
     }

     #membersBenefitsWatchNow {
      height: 41px;
      left: -25px;
      position: absolute;
      top: 153px;
      width: 272px;
      z-index: 2;
     }

     #membersBenefitsWatchNow .HoverImgJs {
       height: 100%;
       width: 100%;
     }

     #membersBenefitsWatchNow .Gradient_link2 * {
      letter-spacing: 0;
     }

  #bottomWrapper #sideNavigation {
   position: absolute;
   right: 139px;
   bottom: 465px;
   width: 265px;
  }

   #bottomWrapper #sideNavigation #benefitsTitle,
   #bottomWrapper #sideNavigation #benefitsTitle div {
    overflow: visible;
   }

   #bottomWrapper #sideNavigation #benefitsTitle {
    position: absolute;
    top: -73px;
    left: 0;
    width: 380px;
   }

   #bottomWrapper #sideNavigation p {
    line-height: 20px;
    margin-left: 10px;
   }

   #bottomWrapper #sideNavigation .Button {
    margin-left: 5px;
   }

   #bottomWrapper #sideNavigation div {
    overflow:hidden;
   }

    #sideNavigationBeginnersGuide {
     height: 150px;
    }

    #sideNavigationCommunitySite {
     height: 158px;
    }

     #sideNavigationCommunitySite h4 {
      margin-top: 30px;
     }

    #sideNavigationMembershipCards {
     height: 160px;
    }

     #sideNavigationMembershipCards h4 {
      margin-top: 35px;
     }

 .FootToBlack {
  display: none;
  text-shadow: 1px 1px 3px black;
 }

 #Footer {
  position: absolute;
  top: 970px;
 }

  .placeholder {
   font-family: Tahoma !important;
   font-style: italic !important;
  }

  .bottomMenu .HoverGradient {
   
-moz-transition: color 0.5s  ;
-webkit-transition: color 0.5s  ; -webkit-backface-visibility: hidden; -o-transition: color 0.5s  ;
transition: color 0.5s  ;
;
  }

  .bottomMenu a:hover .HoverGradient {
   color: white!important;
   text-decoration: none!important;
  }

 #promoPresenter {
  left: 0;
  top: 43px;
  z-index: -1;
  width: 100%;
 }

  #promoPresenter,
  #promoPresenter div {
   overflow: hidden;
   position: absolute;
   height: 1500px;
  }

  #promoPresenter div {
   left: 0;
   top:0;
   width: 100%;
   background-position: top center;
   background-repeat: no-repeat;
  }

  .js #promoPresenter div {
   width: 1800px;
   opacity: 0;
  }

#topBarWrapper .LanguageButtonSurround{
 left:610px;
 z-index: 20;
}

.logoLink {
 position: absolute;
 display: block;
 width: 254px;
 height: 66px;
 left: 433px;
 top: 89px;
 overflow: hidden;
 text-indent: -200px;
}

