/* Baseplate's only additions to the original 2016 site CSS: the text wordmark that takes the logo's place. */
.bp-wordmark {
  display: inline-block; height: 30px; line-height: 30px; vertical-align: middle;
  color: #fff; font: 600 22px/30px 'Source Sans Pro', 'Source Sans 3', Arial, sans-serif; letter-spacing: -0.2px;
  white-space: nowrap;
}
/* landing hero: the wordmark in the logo art's box */
.bp-landing-wordmark {
  color: #fff; font: 700 104px/1.1 'Source Sans Pro', 'Source Sans 3', Arial, sans-serif; letter-spacing: -2px;
  text-shadow: 0 3px 0 #b71c13, 0 6px 14px rgba(0,0,0,.35); text-align: center;
}
#MainLogoImage.bp-landing-wordmark { max-width: 100%; }
@media (max-width: 767px) { .bp-landing-wordmark { font-size: 92px; letter-spacing: -1.5px; } }
/* header: the square mark in the 30px logo-r box (shown below 1320px, like the 2016 logo pair) */
.rbx-header .bp-wordmark { width: 118px; background: none; }
.bp-mark {
  width: 30px; height: 30px; background: none; color: #fff; text-align: center;
  font: 700 26px/30px 'Source Sans Pro', 'Source Sans 3', Arial, sans-serif;
}
/* Angular 1.x injects this rule into every page it runs on; the signed-in pages' templates (client/src/site/ng.js)
   hide things with its ng-hide class the same way */
.ng-hide:not(.ng-hide-animate) { display: none !important; }
/* the emptied ad slots collapse (no ads on Baseplate) */
.abp, .leaderboard-abp, #Skyscraper-Abp-Right, #Leaderboard-Abp { display: none !important; }
/* develop hero: the text wordmark in the 492px box the wordmark art filled */
#StudioSplashScreen .header-container .bp-develop-wordmark {
  color: #fff; text-align: center; white-space: nowrap;
  font: 700 112px/1 'Source Sans Pro', 'Source Sans 3', Arial, sans-serif; letter-spacing: -2px;
}
@media (max-width: 991px) { #StudioSplashScreen .header-container .bp-develop-wordmark { font-size: 84px; } }
@media (max-width: 767px) { #StudioSplashScreen .header-container .bp-develop-wordmark { font-size: 56px; letter-spacing: -1px; } }
/* until /api/me answers, the account side of the header stays blank (2016 rendered it on the server, so it never
   flashed the wrong state); revealed anyway after 3s if the API is down */
html.bp-session-pending .rbx-navbar-right, html.bp-session-pending .rbx-nav-collapse, html.bp-session-pending #navigation {
  visibility: hidden; animation: bp-session-reveal 0s 3s forwards;
}
@keyframes bp-session-reveal { to { visibility: visible; } }

/* His call: the left nav stays pinned open on every desktop width, not only from 1688px up as the 2016 CSS did.
   Below 992px (phone/tablet header) the 2016 hamburger behaviour is unchanged. */
@media (min-width: 992px) {
  .rbx-header .rbx-nav-collapse { display: none !important; }
  .rbx-left-col, .no-gutter-ads .rbx-left-col { width: 175px; box-shadow: 0 0 3px rgba(25,25,25,0.3); }
  .rbx-left-col .rbx-scrollbar, .no-gutter-ads .rbx-left-col .rbx-scrollbar { width: 175px; }
  .nav-content.logged-in { margin-left: 175px; }
  /* newer page shell: centre the content column in the space right of the nav, never flush against it */
  .wrap.no-gutter-ads.logged-in { padding-left: 187px; padding-right: 12px; }
  .no-gutter-ads.logged-in .content { margin-left: auto; }
}