/*reset css*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display reset*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* end */
@font-face {
  font-family: "Segoe UI";
  src: local("Segoe UI"), url("/shell/SegoeUI-Regular-final.woff") format("woff"), url("/shell/SegoeUI-Regular-final.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Segoe UI Light";
  src: local("Segoe UI Light"), url("/shell/SegoeUI-Light-final.woff") format("woff"), url("/shell/SegoeUI-Light-final.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
html {
  -webkit-text-size-adjust: none;
  /* Prevent font scaling in landscape */ }

body:lang(ja), h1:lang(ja), h2:lang(ja), h3:lang(ja), h4:lang(ja), h5:lang(ja),
textarea:lang(ja), button:lang(ja), input[type=submit]:lang(ja), *:lang(ja), select:lang(ja) {
  font-family: Meiryo, 'Yu Gothic', Arial, Sans-Serif, 'Segoe UI' !important;
  /* Japan needs this to avoid alignment issues with mixed character sets */ }

body:lang(zh-Hans), h1:lang(zh-Hans), h2:lang(zh-Hans), h3:lang(zh-Hans), h4:lang(zh-Hans), h5:lang(zh-Hans),
textarea:lang(zh-Hans), button:lang(zh-Hans), input[type=submit]:lang(zh-Hans), *:lang(zh-Hans), select:lang(zh-Hans) {
  font-family: "Microsoft YaHei UI", SimSun, "Segoe UI", Arial, Sans-Serif !important; }

body:lang(zh-Hant), h1:lang(zh-Hant), h2:lang(zh-Hant), h3:lang(zh-Hant), h4:lang(zh-Hant), h5:lang(zh-Hant),
textarea:lang(zh-Hant), button:lang(zh-Hant), input[type=submit]:lang(zh-Hant), *:lang(zh-Hant), select:lang(zh-Hant) {
  font-family: "Microsoft Jhenghei UI", PMingLiU, "Segoe UI", Arial, Sans-Serif !important; }

body:lang(ko), h1:lang(ko), h2:lang(ko), h3:lang(ko), h4:lang(ko), h5:lang(ko),
textarea:lang(ko), button:lang(ko), input[type=submit]:lang(ko), *:lang(ko), select:lang(ko) {
  font-family: "Malgun Gothic", Gulim, "Segoe UI", Arial, Sans-Serif  !important; }

body {
  font-size: 16px;
  font-family: 'Segoe UI', 'Helvetica', Arial, Sans-Serif;
  margin: 0;
  color: #636468;
  word-wrap: break-word;
  background-color: #FFFFFF; }

header, footer, nav, article, section {
  display: block; }

a {
  color: #77BB44;
  font-weight: bold;
  text-decoration: none; }
  a img {
    border: none; }

textarea {
  width: 100%;
  height: 100px;
  font-family: 'Segoe UI', 'Helvetica', Arial, Sans-Serif;
  font-size: 16px;
  color: #636468;
  padding: 5px 7px;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

::-webkit-input-placeholder, :-moz-input-placeholder {
  font-style: italic; }

.clearfix {
  clear: both; }

button, input[type=submit] {
  background-color: #77BB44;
  border: 1px solid White;
  color: White;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  height: 25px;
  min-width: 95px;
  overflow: visible;
  padding: 0 20px; }

body > header {
  color: #FFFFFF;
  background: #333132;
  min-height: 32px;
  border-bottom: 4px solid #77BB44; }
  body > header .xboxBrandedLogo {
    float: left;
    display: block;
    height: 100%;
    width: 100px; }
    body > header .xboxBrandedLogo .icon {
      height: 21px;
      width: 67px;
      background: url("../images/shell/mobile/xbox_logo_white.png") no-repeat transparent;
      margin-top: 14px;
      margin-left: 10px;
      background-size: 100% 100%; }

.menu {
  display: block;
  float: right;
  height: 50px;
  width: 50px; }

#modalDialog {
  clear: both; }

.modalDialogOpen #headerBar, .modalDialogOpen #pageMarker, .modalDialogOpen section.body, .modalDialogOpen footer {
  display: none; }
.modalDialogOpen #modalHeaderBar, .modalDialogOpen #modalDialog {
  display: block; }

section.body {
  clear: both;
  padding: 0px;
  min-height: 100px; }

body > footer {
  clear: both; }
  body > footer .primaryContent {
    height: 32px;
    min-width: 320px;
    border-top: 3px solid #666666;
    padding: 8px 0px 9px 0px;
    position: relative;
    background: #292929;
    /* Old browsers */
    background: -moz-linear-gradient(top, #292929 0%, #333333 48%, #333333 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(48%, #333333), color-stop(100%, #333333));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #292929 0%, #333333 48%, #333333 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #292929 0%, #333333 48%, #333333 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #292929 0%, #333333 48%, #333333 100%);
    /* IE10+ */
    background: linear-gradient(top, #292929 0%, #333333 48%, #333333 100%);
    /* W3C */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#292929, endColorstr=#333333)";
    /*IE8-9*/
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#292929", endColorstr="#333333", GradientType=0);
    /* IE6-7 */ }
  body > footer .secondaryContent {
    background-color: #231f20;
    min-height: 26px;
    min-width: 320px;
    padding: 4px 0px 0px 0px; }
  body > footer .logoAndCopyright {
    float: left; }
  body > footer .copyrightText {
    font-size: 10px;
    color: #acabac;
    text-align: right;
    height: 100%;
    line-height: 21px; }
  body > footer .secondaryContent ol {
    text-align: right; }
    body > footer .secondaryContent ol a.spread {
      background: url(../images/glyph-pipe.png) no-repeat 0px center;
      padding-left: 10px; }
  body > footer .changeLocale {
    font-size: 12px;
    color: #fff;
    line-height: 31px; }
  body > footer ol {
    color: #d8d8d8;
    list-style-type: none;
    margin: 0px;
    padding: 0;
    line-height: 22px;
    text-align: center;
    font-size: 10px; }
  body > footer li {
    display: inline;
    padding: 5px; }
  body > footer a {
    color: #d8d8d8;
    text-decoration: none;
    font-weight: normal;
    white-space: nowrap; }

footer .pageTypeIcon {
  font-size: 0px;
  width: 32px;
  height: 32px;
  display: block;
  float: right; }
footer .iconDesktopPassive {
  background: url("../images/spritesheetv2.mobile.png") no-repeat -574px -701px transparent; }
footer .iconMobileActive {
  background: url("../images/spritesheetv2.mobile.png") no-repeat -278px -701px transparent; }
footer .pageTypeSeparator {
  width: 26px;
  height: 32px;
  display: block;
  float: right;
  background: url("../images/mobile_shell_sprites_v2.png") no-repeat -4px -232px transparent; }

/* END V1 */
.mobileHeaderCenter {
  width: 320px;
  margin: 0 auto; }

.mobileFooterCenter {
  width: 300px;
  margin: 0 auto;
  padding: 0px 10px; }

body > header {
  height: 48px;
  border-bottom-style: none; }

#headerBar {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 48px;
  background: #107c10;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }

#navMenuButton.active:after, #searchButton.active:after {
  position: absolute;
  content: "\a0";
  bottom: -16px;
  left: 0px;
  display: block;
  width: 48px;
  height: 16px;
  background-image: url("../images/shell/mobile/carat.png");
  background-size: 48px 48px; }

#navMenuButton {
  min-width: 48px;
  width: 48px;
  height: 48px;
  background-color: transparent;
  float: right;
  cursor: pointer;
  border: none;
  padding: 0px;
  position: relative;
  overflow: visible;
  background-image: url("../images/shell/mobile/btn_menu.png");
  background-size: 100% 100%; }
  #navMenuButton.active {
    background-image: url("../images/shell/mobile/btn_menu_active.png"); }

#searchButton {
  min-width: 48px;
  width: 48px;
  height: 48px;
  background-color: transparent;
  float: right;
  cursor: pointer;
  border: none;
  padding: 0px;
  position: relative;
  overflow: visible;
  background-image: url("../images/shell/mobile/btn_search.png");
  background-size: 100% 100%; }
  #searchButton.active {
    background-image: url("../images/shell/mobile/btn_menu_active.png"); }

#navMenu .gamertag {
  color: #5dc21e;
  font-weight: normal;
  font-size: 24px;
  padding: 8px 0px 4px 20px; }
#navMenu .gamerscore {
  padding: 0px 20px 12px 0px;
  padding-left: 20px;
  font-size: 14px;
  font-weight: normal;
  color: #6b6b6b; }

.gamerscore:before {
  content: '';
  height: 16px;
  width: 16px;
  display: inline-block;
  float: left;
  background: url("../images/shell/mobile/icon_Gamerscore.png") no-repeat;
  margin-right: 3px; }

#gamerPicArea {
  padding: 0px;
  border: 0px none;
  background-color: #3a3a3a;
  -webkit-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.2); }

header a.profile {
  padding: 0px;
  margin: 0px;
  display: block;
  width: 100%;
  min-height: 70px;
  font-size: 12px;
  /* IE6-9 */
  border-bottom: 1px solid #3a3a3a; }
  header a.profile:hover, header a.profile:focus, header a.profile:active {
    background: #e2e2e2;
    /* Old browsers */
    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(31%, #dbdbdb), color-stop(43%, #dddddd), color-stop(67%, #e3e3e3), color-stop(100%, whitesmoke));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
    /* IE10+ */
    background: linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#f5f5f5',GradientType=0 );
    /* IE6-9 */
    border-bottom: 1px solid #3a3a3a; }
header .profile img {
  float: right;
  height: 70px;
  width: 70px; }
header .menu {
  position: absolute;
  display: none;
  z-index: 95;
  top: 48px;
  padding: 15px 0 15px 0;
  width: 100%;
  height: auto; }
  header .menu > * {
    display: block;
    min-height: 26px;
    /* 50 - (padding-top + padding-bottom) */
    color: #636468;
    font-size: 18px;
    font-weight: normal;
    text-decoration: none;
    padding: 12px 18px 12px 18px;
    margin: 0 15px 0 15px;
    background: #f8f8f8; }

.mobileCookieBannerWrapper {
  display: none;
  width: 100%;
  background-color: #646464; }
  .mobileCookieBannerWrapper .cookieBanner {
    position: relative;
    width: 320px;
    margin: 0 auto; }
    .mobileCookieBannerWrapper .cookieBanner .alertDescription {
      padding: 8px 0;
      width: 280px;
      color: white;
      font: 11px/15px "Segoe UI", Arial, Sans-Serif; }
    .mobileCookieBannerWrapper .cookieBanner .linkWrapper {
      text-align: right;
      padding: 0 13px 8px; }
      .mobileCookieBannerWrapper .cookieBanner .linkWrapper a, .mobileCookieBannerWrapper .cookieBanner .linkWrapper a:visited {
        color: white;
        font: 11px/10px "Segoe UI Semibold", Arial, Sans-Serif; }
    .mobileCookieBannerWrapper .cookieBanner img {
      cursor: pointer;
      position: absolute;
      top: 5px;
      right: 13px;
      width: 16px;
      height: 16px; }

#signInArea, #signOutArea {
  text-align: center;
  text-decoration: none;
  background-color: #3a3a3a; }

#signInButton {
  min-width: 100px;
  min-height: 36px;
  background: #107c10;
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 2.4;
  padding: 0px;
  margin: 0px 5px; }

#signUpButton {
  min-width: 100px;
  min-height: 36px;
  background: #107c10;
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 2.4;
  padding: 0px;
  margin: 0px 5px; }

#signOutButton {
  width: 248px;
  min-height: 34px;
  background: #107c10;
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 2.4;
  padding: 0px;
  margin: 0px 5px; }

@media screen and (max-width: 479px) {
  #signOutButton {
    width: auto;
    min-width: 80%;
    margin: 0 auto; } }
#searchArea {
  position: relative;
  z-index: 95;
  top: 48px;
  display: none;
  background-color: #222222;
  margin: 0 auto;
  width: 320px; }

#searchWidget {
  padding: 23px 0px;
  width: 282px;
  margin-left: 23px; }

#SearchTextBox {
  width: 240px;
  height: 30px;
  border: 0px none;
  padding: 0px;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px; }

#searchNowButton {
  min-width: 32px;
  width: 32px;
  height: 32px;
  background-image: url("../images/shell/mobile/btn_search_small.png");
  background-repeat: no-repeat;
  border-width: 0;
  vertical-align: bottom;
  margin: 0;
  padding: 0;
  background-size: 100% 100%; }

#modalScreen {
  display: none;
  position: fixed;
  z-index: 90;
  top: 48px;
  bottom: 0;
  left: 0;
  right: 0; }

#modalHeaderBar {
  display: none;
  z-index: 100;
  width: 100%;
  background-color: #393738;
  -moz-border-image: -moz-linear-gradient(top, black 0%, white 100%) 0 0 100% 0 repeat repeat;
  -webkit-border-image: -webkit-linear-gradient(top, black 0%, white 100%) 0 0 100% 0 repeat repeat;
  -webkit-border-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, white), color-stop(0%, black)) 0 0 100% 0 repeat repeat;
  -webkit-border-image: -webkit-linear-gradient(top, black 0%, white 100%) 0 0 100% 0 repeat repeat;
  -o-border-image: -o-linear-gradient(top, black 0%, white 100%) 0 0 100% 0 repeat repeat;
  -ms-border-image: -ms-linear-gradient(top, black 0%, white 100%) 0 0 100% 0 repeat repeat;
  border-image: linear-gradient(top, black 0%, white 100%) 0 0 100% 0 repeat repeat;
  border-width: 0 0 5px 0;
  -webkit-box-shadow: 0 2px 6px 0 rgba(1, 1, 1, 0.3);
  box-shadow: 0 2px 6px 0 rgba(1, 1, 1, 0.3); }

#modalHeaderCloseButton {
  float: right;
  width: 28px;
  height: 28px;
  background-image: url("/shell/images/mobile_shell_sprites_v2.png");
  background-position: -5px -137px;
  background-repeat: no-repeat;
  margin: 5px 12px; }

#modalHeaderLabel {
  float: none;
  padding: 5px;
  color: #BDBEC1;
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

#modalDialog {
  display: none; }

#pageMarker {
  position: relative;
  color: #BDBEC1;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  padding: 0px 12px 0px 12px;
  white-space: nowrap;
  overflow: hidden;
  height: 22px;
  line-height: 21px;
  letter-spacing: 1px;
  background: #252424;
  /* Old browsers */
  background: -moz-linear-gradient(top, #252424 0%, #302e2f 14%, #383637 33%, #393738 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #252424), color-stop(14%, #302e2f), color-stop(33%, #383637), color-stop(100%, #393738));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #252424 0%, #302e2f 14%, #383637 33%, #393738 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #252424 0%, #302e2f 14%, #383637 33%, #393738 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #252424 0%, #302e2f 14%, #383637 33%, #393738 100%);
  /* IE10+ */
  background: linear-gradient(top, #252424 0%, #302e2f 14%, #383637 33%, #393738 100%);
  /* W3C */
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#252424', endColorstr='#393738',GradientType=0 );
  /* IE6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#252424', endColorstr='#393738',GradientType=0 );
  /* IE6-9 */
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }

#pageMarkerText {
  position: absolute; }

#pageMarkerMask {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: transparent;
  background: -moz-linear-gradient(left, rgba(37, 36, 36, 0) 0%, #252424 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(37, 36, 36, 0)), color-stop(100%, #252424));
  background: -webkit-linear-gradient(left, rgba(37, 36, 36, 0) 0%, #252424 100%);
  background: -o-linear-gradient(left, rgba(37, 36, 36, 0) 0%, #252424 100%);
  background: -ms-linear-gradient(left, rgba(37, 36, 36, 0) 0%, #252424 100%);
  background: linear-gradient(left, rgba(37, 36, 36, 0) 0%, #252424 100%);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00252424', endColorstr='#FF252424',GradientType=1 );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00252424', endColorstr='#FF252424',GradientType=1 ); }

.shellButton {
  display: inline-block;
  background-color: #107c10;
  color: #ffffff;
  padding: 8px 20px 8px 20px;
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
  margin-left: 10px; }
  .shellButton:active {
    background-color: #2ca243; }

/* Context Menu for List Items */
.hasContextMenu {
  position: relative;
  border-left: 5px solid #7b4; }

.isContextMenu {
  position: relative; }

.hasContextMenu .item, .isContextMenu .item {
  padding-right: 37px;
  position: relative;
  z-index: 1;
  left: 0;
  -webkit-transition-property: left;
  -moz-transition-property: left;
  -o-transition-property: left;
  -ms-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 400ms;
  -moz-transition-duration: 400ms;
  -o-transition-duration: 400ms;
  -ms-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transition-timing-function: cubic-bezier(0.29, 0.58, 0.08, 0.96);
  -moz-transition-timing-function: cubic-bezier(0.29, 0.58, 0.08, 0.96);
  -o-transition-timing-function: cubic-bezier(0.29, 0.58, 0.08, 0.96);
  -ms-transition-timing-function: cubic-bezier(0.29, 0.58, 0.08, 0.96);
  transition-timing-function: cubic-bezier(0.29, 0.58, 0.08, 0.96);
  /* Force browser to allow usage of the GPU for consistent, smooth animation */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0); }

.hasContextMenu.sliding .item {
  -webkit-transition-duration: 0ms;
  -moz-transition-duration: 0ms;
  -o-transition-duration: 0ms;
  -ms-transition-duration: 0ms;
  transition-duration: 0ms; }
.hasContextMenu .handle {
  display: block;
  cursor: pointer;
  height: 100%;
  width: 27px;
  border-left: 1px solid #cbcbcb;
  position: absolute;
  right: 0;
  top: 0; }
  .hasContextMenu .handle:after {
    content: '';
    display: block;
    height: 16px;
    width: 27px;
    background: url(/shell/images/spritesheetv2.mobile.png) -281px -200px no-repeat;
    position: absolute;
    top: 45%;
    right: 0; }
.hasContextMenu.expanded .handle:after {
  background: url(/shell/images/spritesheetv2.mobile.png) -281px -150px no-repeat; }
.hasContextMenu .handle input {
  display: none; }

.contextMenu {
  background: #7b4;
  background: -moz-linear-gradient(top, #4c772b 0%, #558631 2%, #67a23b 4%, #70b140 6%, #77bb44 24%, #77bb44 77%, #70b040 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c772b), color-stop(2%, #558631), color-stop(4%, #67a23b), color-stop(6%, #70b140), color-stop(24%, #77bb44), color-stop(77%, #77bb44), color-stop(100%, #70b040));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #4c772b 0%, #558631 2%, #67a23b 4%, #70b140 6%, #77bb44 24%, #77bb44 77%, #70b040 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #4c772b 0%, #558631 2%, #67a23b 4%, #70b140 6%, #77bb44 24%, #77bb44 77%, #70b040 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #4c772b 0%, #558631 2%, #67a23b 4%, #70b140 6%, #77bb44 24%, #77bb44 77%, #70b040 100%);
  /* IE10+ */
  background: linear-gradient(top, #4c772b 0%, #558631 2%, #67a23b 4%, #70b140 6%, #77bb44 24%, #77bb44 77%, #70b040 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c772b', endColorstr='#70b040',GradientType=0 );
  /* IE6-9 */
  -webkit-box-shadow: inset 1px 0px 1px 0px #4d772d;
  -moz-box-shadow: inset 1px 0px 1px 0px #4d772d;
  box-shadow: inset 1px 0px 1px 0px #4d772d;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  height: 100%; }

.contextMenu-inner {
  display: table;
  height: 100%;
  margin: auto; }

.contextMenu ol {
  display: table-cell;
  vertical-align: middle; }
.contextMenu li {
  float: left;
  margin: 10px 10px 10px 0;
  width: 64px; }
  .contextMenu li:last-child {
    margin-right: 0; }
    .contextMenu li:last-child:after {
      content: ' ';
      float: none;
      clear: both; }
.contextMenu .action {
  display: block; }
.contextMenu .icon, .contextMenu .text {
  margin: auto;
  display: block;
  float: none;
  padding: 0;
  color: #fff;
  font-weight: normal;
  font-size: 12px;
  text-align: center;
  margin-top: 4px; }

/* /Context Menu for List Items */
a.actionButton {
  display: block;
  color: #fff;
  padding: 10px;
  min-height: 32px;
  font-weight: normal;
  background: #77bb44;
  /* Old browsers */
  background: -moz-linear-gradient(top, #77bb44 0%, #73b841 18%, #5ea731 73%, #57a22b 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #77bb44), color-stop(18%, #73b841), color-stop(73%, #5ea731), color-stop(100%, #57a22b));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #77bb44 0%, #73b841 18%, #5ea731 73%, #57a22b 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #77bb44 0%, #73b841 18%, #5ea731 73%, #57a22b 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #77bb44 0%, #73b841 18%, #5ea731 73%, #57a22b 100%);
  /* IE10+ */
  background: linear-gradient(top, #77bb44 0%, #73b841 18%, #5ea731 73%, #57a22b 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77bb44', endColorstr='#57a22b',GradientType=0 );
  /* IE6-9 */ }
a.actionBar {
  display: block;
  min-height: 50px;
  line-height: 50px;
  padding: 0 12px;
  font-weight: normal;
  color: white;
  background-color: #222222; }
  a.actionBar .actionBar-caption {
    float: left;
    color: #7b4;
    font-size: 18px;
    font-weight: normal; }
  a.actionBar .actionBar-icon {
    float: right;
    width: 32px;
    height: 32px;
    margin-top: 9px; }
  a.actionBar:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden; }

/* actionBar applied to "actionable" elements with fixed (at least 50px) height */
/* applied to elements that are clickable or actionable */
.actionable {
  background: white;
  /* Old browsers */
  background: -moz-linear-gradient(top, white 0%, #ebebeb 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #ebebeb));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, white 0%, #ebebeb 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, white 0%, #ebebeb 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, white 0%, #ebebeb 100%);
  /* IE10+ */
  background: linear-gradient(top, white 0%, #ebebeb 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 );
  /* IE6-9 */
  border-bottom: 1px solid #BDBEC1;
  display: block;
  padding: 15px 12px;
  color: #636468;
  font-size: 14px;
  font-weight: normal; }
  .actionable.disabled {
    background: white; }
  .actionable.selected {
    background: #e2e2e2;
    /* Old browsers */
    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(31%, #dbdbdb), color-stop(43%, #dddddd), color-stop(67%, #e3e3e3), color-stop(100%, whitesmoke));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
    /* IE10+ */
    background: linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#f5f5f5',GradientType=0 );
    /* IE6-9 */
    border-bottom: 1px solid #BDBEC1; }

a.actionable:hover, a.actionable:focus, a.actionable:active {
  background: #e2e2e2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(31%, #dbdbdb), color-stop(43%, #dddddd), color-stop(67%, #e3e3e3), color-stop(100%, whitesmoke));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
  /* IE10+ */
  background: linear-gradient(top, #e2e2e2 0%, #dbdbdb 31%, #dddddd 43%, #e3e3e3 67%, whitesmoke 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#f5f5f5',GradientType=0 );
  /* IE6-9 */
  border-bottom: 1px solid #BDBEC1; }

.actionable .boxArt {
  background-color: #ccc;
  width: 85px;
  height: 120px;
  float: left; }
.actionable .gamerpic {
  background-color: #ccc;
  width: 64px;
  height: 64px;
  float: left; }
.actionable h2 {
  font-size: 18px;
  font-weight: normal;
  color: #7B4;
  margin-bottom: 5px; }
.actionable .info {
  margin-left: 95px;
  padding-right: 27px;
  position: relative;
  min-height: 64px; }

a.navItem {
  display: block;
  font-weight: normal;
  min-height: 50px;
  line-height: 50px;
  padding: 0 12px;
  color: white;
  background-color: #222222; }
  a.navItem:hover, a.navItem:focus, a.navItem:active {
    background-color: #3a3a3a;
    border: 0px none; }

/*
 * Popover buttons
 */
a.button {
  display: block;
  height: 50px;
  color: white;
  width: 128px;
  line-height: 50px;
  font-weight: normal;
  font-size: 14px;
  background-color: #86858A;
  float: left;
  padding-left: 12px;
  margin-right: 5px;
  text-align: left; }

input[type=submit].positive, input[type=submit].negative {
  display: block;
  height: 50px;
  color: white;
  width: 128px;
  line-height: 50px;
  font-weight: normal;
  font-size: 14px;
  background-color: #86858A;
  float: left;
  padding-left: 12px;
  margin-right: 5px;
  text-align: left; }

button.positive, button.negative {
  display: block;
  height: 50px;
  color: white;
  width: 128px;
  line-height: 50px;
  font-weight: normal;
  font-size: 14px;
  background-color: #86858A;
  float: left;
  padding-left: 12px;
  margin-right: 5px;
  text-align: left; }

a.button.positive, input[type=submit].positive, button.positive {
  background: #77bb44;
  /* Old browsers */
  background: -moz-linear-gradient(top, #77bb44 0%, #73b841 18%, #5ea731 73%, #57a22b 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #77bb44), color-stop(18%, #73b841), color-stop(73%, #5ea731), color-stop(100%, #57a22b));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #77bb44 0%, #73b841 18%, #5ea731 73%, #57a22b 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #77bb44 0%, #73b841 18%, #5ea731 73%, #57a22b 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #77bb44 0%, #73b841 18%, #5ea731 73%, #57a22b 100%);
  /* IE10+ */
  background: linear-gradient(top, #77bb44 0%, #73b841 18%, #5ea731 73%, #57a22b 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77bb44', endColorstr='#57a22b',GradientType=0 );
  /* IE6-9 */ }

a.button.positive.disabled, input[type=submit].positive.disabled {
  background: #c7dcb7;
  /* Old browsers */
  background: -moz-linear-gradient(top, #c7dcb7 0%, #c3d9b2 22%, #b6d3a2 63%, #aece98 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c7dcb7), color-stop(22%, #c3d9b2), color-stop(63%, #b6d3a2), color-stop(100%, #aece98));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #c7dcb7 0%, #c3d9b2 22%, #b6d3a2 63%, #aece98 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #c7dcb7 0%, #c3d9b2 22%, #b6d3a2 63%, #aece98 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #c7dcb7 0%, #c3d9b2 22%, #b6d3a2 63%, #aece98 100%);
  /* IE10+ */
  background: linear-gradient(top, #c7dcb7 0%, #c3d9b2 22%, #b6d3a2 63%, #aece98 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c7dcb7', endColorstr='#aece98',GradientType=0 );
  /* IE6-9 */ }

button.positive.disabled, button.positive[disabled] {
  background: #c7dcb7;
  /* Old browsers */
  background: -moz-linear-gradient(top, #c7dcb7 0%, #c3d9b2 22%, #b6d3a2 63%, #aece98 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c7dcb7), color-stop(22%, #c3d9b2), color-stop(63%, #b6d3a2), color-stop(100%, #aece98));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #c7dcb7 0%, #c3d9b2 22%, #b6d3a2 63%, #aece98 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #c7dcb7 0%, #c3d9b2 22%, #b6d3a2 63%, #aece98 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #c7dcb7 0%, #c3d9b2 22%, #b6d3a2 63%, #aece98 100%);
  /* IE10+ */
  background: linear-gradient(top, #c7dcb7 0%, #c3d9b2 22%, #b6d3a2 63%, #aece98 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c7dcb7', endColorstr='#aece98',GradientType=0 );
  /* IE6-9 */ }

a.button.positive.selected, input[type=submit].positive.selected, button.positive.selected {
  background: #2b9646;
  /* Old browsers */
  background: -moz-linear-gradient(top, #2b9646 0%, #278e41 24%, #1a7631 73%, #166d2b 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b9646), color-stop(24%, #278e41), color-stop(73%, #1a7631), color-stop(100%, #166d2b));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #2b9646 0%, #278e41 24%, #1a7631 73%, #166d2b 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #2b9646 0%, #278e41 24%, #1a7631 73%, #166d2b 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #2b9646 0%, #278e41 24%, #1a7631 73%, #166d2b 100%);
  /* IE10+ */
  background: linear-gradient(top, #2b9646 0%, #278e41 24%, #1a7631 73%, #166d2b 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b9646', endColorstr='#166d2b',GradientType=0 );
  /* IE6-9 */ }

a.button.negative, input[type=submit].negative, button.negative {
  background: #848589;
  /* Old browsers */
  background: -moz-linear-gradient(top, #848589 0%, #808185 18%, #6b6d70 71%, #636568 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #848589), color-stop(18%, #808185), color-stop(71%, #6b6d70), color-stop(100%, #636568));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #848589 0%, #808185 18%, #6b6d70 71%, #636568 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #848589 0%, #808185 18%, #6b6d70 71%, #636568 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #848589 0%, #808185 18%, #6b6d70 71%, #636568 100%);
  /* IE10+ */
  background: linear-gradient(top, #848589 0%, #808185 18%, #6b6d70 71%, #636568 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#848589', endColorstr='#636568',GradientType=0 );
  /* IE6-9 */ }

a.button.negative.disabled, input[type=submit].negative.disabled {
  background: #e2e3e2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #e2e3e2 0%, #dfe0df 16%, #cecfcf 65%, #c5c6c7 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e3e2), color-stop(16%, #dfe0df), color-stop(65%, #cecfcf), color-stop(100%, #c5c6c7));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #e2e3e2 0%, #dfe0df 16%, #cecfcf 65%, #c5c6c7 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #e2e3e2 0%, #dfe0df 16%, #cecfcf 65%, #c5c6c7 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #e2e3e2 0%, #dfe0df 16%, #cecfcf 65%, #c5c6c7 100%);
  /* IE10+ */
  background: linear-gradient(top, #e2e3e2 0%, #dfe0df 16%, #cecfcf 65%, #c5c6c7 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e3e2', endColorstr='#c5c6c7',GradientType=0 );
  /* IE6-9 */ }

button.negative.disabled, button.negative[disabled] {
  background: #e2e3e2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #e2e3e2 0%, #dfe0df 16%, #cecfcf 65%, #c5c6c7 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e3e2), color-stop(16%, #dfe0df), color-stop(65%, #cecfcf), color-stop(100%, #c5c6c7));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #e2e3e2 0%, #dfe0df 16%, #cecfcf 65%, #c5c6c7 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #e2e3e2 0%, #dfe0df 16%, #cecfcf 65%, #c5c6c7 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #e2e3e2 0%, #dfe0df 16%, #cecfcf 65%, #c5c6c7 100%);
  /* IE10+ */
  background: linear-gradient(top, #e2e3e2 0%, #dfe0df 16%, #cecfcf 65%, #c5c6c7 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e3e2', endColorstr='#c5c6c7',GradientType=0 );
  /* IE6-9 */ }

a.button.negative.selected, input[type=submit].negative.selected, button.negative.selected {
  background: #4f4d4e;
  /* Old browsers */
  background: -moz-linear-gradient(top, #4f4d4e 0%, #4a4849 22%, #343333 84%, #312f30 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4f4d4e), color-stop(22%, #4a4849), color-stop(84%, #343333), color-stop(100%, #312f30));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #4f4d4e 0%, #4a4849 22%, #343333 84%, #312f30 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #4f4d4e 0%, #4a4849 22%, #343333 84%, #312f30 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #4f4d4e 0%, #4a4849 22%, #343333 84%, #312f30 100%);
  /* IE10+ */
  background: linear-gradient(top, #4f4d4e 0%, #4a4849 22%, #343333 84%, #312f30 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4d4e', endColorstr='#312f30',GradientType=0 );
  /* IE6-9 */ }

.hero {
  position: relative;
  overflow: hidden;
  height: 249px;
  background: black; }

.hero-counter > span {
  display: inline-block;
  width: 10px;
  height: 7px;
  background: url(/shell/images/spritesheetv2.mobile.png) -194px -4386px no-repeat; }
.hero-counter .hero-counter-selected {
  background: url(/shell/images/spritesheetv2.mobile.png) -493px -4386px no-repeat; }

.hero-asset {
  top: -21px;
  position: relative;
  width: 480px;
  height: 270px; }

.hero-grade {
  background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.1) 14%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.54) 57%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.55) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(14%, rgba(0, 0, 0, 0.1)), color-stop(39%, rgba(0, 0, 0, 0.39)), color-stop(57%, rgba(0, 0, 0, 0.54)), color-stop(60%, rgba(0, 0, 0, 0.55)), color-stop(100%, rgba(0, 0, 0, 0.55)));
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.1) 14%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.54) 57%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.55) 100%);
  background: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.1) 14%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.54) 57%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.55) 100%);
  background: -ms-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.1) 14%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.54) 57%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.55) 100%);
  background: linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.1) 14%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.54) 57%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.55) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#8c000000',GradientType=0 );
  /* IE6-9 */
  position: absolute;
  height: 191px;
  bottom: 0;
  width: 100%; }

.hero-text {
  font-weight: lighter;
  position: absolute;
  bottom: 46px;
  left: 12px;
  color: white; }
  .hero-text .hero-heading {
    font-size: 30px;
    margin-bottom: 15px; }
  .hero-text .hero-subHeading {
    font-size: 14px;
    margin-top: -6px;
    margin-bottom: 5px; }

.hero-callToAction {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: white;
  background: url(/shell/images/greenbar.png);
  font-size: 18px;
  font-weight: normal;
  padding: 0 23px 0 12px; }
  .hero-callToAction > span {
    display: block;
    float: left; }
  .hero-callToAction > div {
    background: url(/shell/images/spritesheetv2.mobile.png) -91px -2588px no-repeat;
    width: 8px;
    height: 40px;
    float: right;
    display: inline-block; }

/*
 * Sprites
 */
.sprite-addBeacon {
  background: url(/shell/images/spritesheetv2.mobile.png) -67px -700px no-repeat; }

.sprite-beacon {
  background: url(/shell/images/spritesheetv2.mobile.png) -484px 0px no-repeat;
  width: 16px;
  height: 16px; }

.disabled .sprite-beacon, .sprite-beacon.disabled {
  background: url(/shell/images/spritesheetv2.mobile.png) -284px 0px no-repeat; }

.sprite-toolbar-delete, .toolbar-delete .icon {
  width: 32px;
  height: 32px;
  background: url(/shell/images/spritesheetv2.mobile.png) -68px -1300px no-repeat; }

.sprite-toolbar-edit, .toolbar-edit .icon {
  width: 32px;
  height: 32px;
  background: url(/shell/images/spritesheetv2.mobile.png) -67px -1100px no-repeat; }

.sprite-toolbar-achievements, .toolbar-achievements .icon {
  width: 32px;
  height: 32px;
  background: url(/shell/images/spritesheetv2.mobile.png) -68px -1400px no-repeat; }

.sprite-toolbar-sendmessages, .toolbar-sendmessages .icon {
  width: 32px;
  height: 32px;
  background: url(/shell/images/spritesheetv2.mobile.png) -68px -1600px no-repeat; }

.sprite-toolbar-information, .toolbar-information .icon {
  width: 32px;
  height: 32px;
  background: url(/shell/images/spritesheetv2.mobile.png) -68px -1000px no-repeat; }

.sprite-toolbar-cancel, .toolbar-cancel .icon {
  width: 32px;
  height: 32px;
  background: url(/shell/images/spritesheetv2.mobile.png) -68px -2000px no-repeat; }

.sprite-toolbar-accept, .toolbar-accept .icon, .sprite-toolbar-addfriend, .toolbar-addfriend .icon {
  width: 32px;
  height: 32px;
  background: url(/shell/images/spritesheetv2.mobile.png) -68px -1500px no-repeat; }

.sprite-friends {
  background: url(/shell/images/spritesheetv2.mobile.png) -478px -4100px no-repeat;
  width: 22px;
  height: 22px; }
  .sprite-friends.disabled {
    background: url(/shell/images/spritesheetv2.mobile.png) -278px -4100px no-repeat; }

.sprite-messages {
  background: url(/shell/images/spritesheetv2.mobile.png) -478px -4197px no-repeat;
  width: 22px;
  height: 22px; }
  .sprite-messages.disabled {
    background: url(/shell/images/spritesheetv2.mobile.png) -278px -4197px no-repeat; }

.sprite-activity {
  background: url(/shell/images/spritesheetv2.mobile.png) -478px -4300px no-repeat;
  width: 22px;
  height: 22px; }

.disabled .sprite-activity, .sprite-activity.disabled {
  background: url(/shell/images/spritesheetv2.mobile.png) -278px -4300px no-repeat; }

#notificationArea {
  z-index: 200;
  position: absolute;
  top: -150px;
  width: 100%;
  cursor: pointer;
  -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.35);
  transition: top 1s;
  -ms-transition: top 1s;
  -moz-transition: top 1s;
  -webkit-transition: top 1s;
  -o-transition: top 1s;
  -webkit-transform: translateZ(0); }
  #notificationArea .topBorder {
    background: url(/shell/images/notification-header.png) 0px 0px repeat-x;
    height: 9px; }
    #notificationArea .topBorder.success {
      background-position: 0px -9px; }
  #notificationArea .content {
    background: -moz-linear-gradient(top, rgba(57, 55, 56, 0.96) 0%, rgba(65, 63, 64, 0.96) 9%, rgba(65, 63, 64, 0.96) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(57, 55, 56, 0.96)), color-stop(9%, rgba(65, 63, 64, 0.96)), color-stop(100%, rgba(65, 63, 64, 0.96)));
    background: -webkit-linear-gradient(top, rgba(57, 55, 56, 0.96) 0%, rgba(65, 63, 64, 0.96) 9%, rgba(65, 63, 64, 0.96) 100%);
    background: -o-linear-gradient(top, rgba(57, 55, 56, 0.96) 0%, rgba(65, 63, 64, 0.96) 9%, rgba(65, 63, 64, 0.96) 100%);
    background: -ms-linear-gradient(top, rgba(57, 55, 56, 0.96) 0%, rgba(65, 63, 64, 0.96) 9%, rgba(65, 63, 64, 0.96) 100%);
    background: linear-gradient(top, rgba(57, 55, 56, 0.96) 0%, rgba(65, 63, 64, 0.96) 9%, rgba(65, 63, 64, 0.96) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5383637', endColorstr='#F5413f40',GradientType=0); }
    #notificationArea .content.active {
      background: -moz-linear-gradient(top, rgba(43, 42, 42, 0.96) 0%, rgba(53, 52, 52, 0.96) 11%, rgba(79, 78, 79, 0.96) 73%, rgba(88, 87, 86, 0.96) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(43, 42, 42, 0.96)), color-stop(11%, rgba(53, 52, 52, 0.96)), color-stop(73%, rgba(79, 78, 79, 0.96)), color-stop(100%, rgba(88, 87, 86, 0.96)));
      background: -webkit-linear-gradient(top, rgba(43, 42, 42, 0.96) 0%, rgba(53, 52, 52, 0.96) 11%, rgba(79, 78, 79, 0.96) 73%, rgba(88, 87, 86, 0.96) 100%);
      background: -o-linear-gradient(top, rgba(43, 42, 42, 0.96) 0%, rgba(53, 52, 52, 0.96) 11%, rgba(79, 78, 79, 0.96) 73%, rgba(88, 87, 86, 0.96) 100%);
      background: -ms-linear-gradient(top, rgba(43, 42, 42, 0.96) 0%, rgba(53, 52, 52, 0.96) 11%, rgba(79, 78, 79, 0.96) 73%, rgba(88, 87, 86, 0.96) 100%);
      background: linear-gradient(top, rgba(43, 42, 42, 0.96) 0%, rgba(53, 52, 52, 0.96) 11%, rgba(79, 78, 79, 0.96) 73%, rgba(88, 87, 86, 0.96) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F52B2A2A', endColorstr='#F5585657',GradientType=0 ); }
  #notificationArea img {
    margin: 14px 0px 0px 20px;
    width: 32px;
    height: 32px;
    float: left; }
  #notificationArea .content.compact img {
    margin: 9px 0px 0px 12px; }
  #notificationArea .content.compact article {
    padding: 18px 20px 19px 56px; }
  #notificationArea article {
    padding: 14px 20px 10px 62px; }
    #notificationArea article h1 {
      font-size: 14px;
      font-weight: normal;
      color: #FFFFFF; }
    #notificationArea article p {
      color: #bdbec1;
      margin: 0px; }
    #notificationArea article section {
      padding: 3px 0px 9px 0px; }
      #notificationArea article section p {
        font-size: 12px; }
    #notificationArea article footer {
      padding: 6px 0px 9px 0px;
      border-top: 1px solid #4e4d4d; }
      #notificationArea article footer p {
        font-size: 10px; }

/* Change locale shared page*/
.changeLocaleBlock {
  margin: 0px;
  padding: 0px;
  list-style-type: none; }
  .changeLocaleBlock span {
    font-size: 10px;
    font-weight: bold;
    color: #636468;
    line-height: 24px;
    text-transform: uppercase;
    display: block;
    background: #bdbec1;
    border-top: 1px solid #fff;
    padding: 0px 12px 0px 12px; }

.cannotFindRegion h2 {
  font-size: 10px;
  font-weight: bold;
  color: #636468;
  line-height: 24px;
  text-transform: uppercase;
  display: block;
  background: #bdbec1;
  border-top: 1px solid #fff;
  padding: 0px 12px 0px 12px; }

.changeLocaleBlock ol {
  list-style-type: none;
  padding: 0px; }
.changeLocaleBlock .actionBar {
  font-size: 18px;
  color: #77BB44;
  /* these links have no icon - need to be "green" */ }

.cannotFindRegion .actionBar {
  font-size: 18px;
  color: #77BB44;
  /* these links have no icon - need to be "green" */ }