/*
Copyright 2014 Google Inc. All rights reserved.

Use of this source code is governed by The MIT License.
See the LICENSE file for details.
*/

/***
 * colors
 *
 * link standard:  4E5A92  (78,90,146)
 * link hover: 6271B6  (98,113,182)
 * progress bar: 45C2FF  (69,194,255)
 * code background: F0F0F0  (240,240,240)
 * ornament color: 8A94C8  (138,148,200)
 ***/


/*** site elements ***/

a,
a:visited,
a:hover {
  color: #4E5A92;
}
a:hover {
 color: #6271B6;
}

.button--primary,
.button--primary:visited {
  background-color: #4E5A92;
  border-color: #4E5A92;
  color: #FFFFFF;
}
.button--secondary,
.button--secondary:visited {
  color: #4E5A92;
}
.button--primary:hover,
.button--primary:focus,
.button--primary:active,
.button--secondary:hover,
.button--secondary:focus,
.button--secondary:active {
  background-color: #6271B6;
  border-color: #4E5A92;
  color: #FFFFFF;
}

.button--primary .icon,
.button--secondary .icon {
  margin: 0 0.2em;
}

.theme--spf .themed--background,
table thead {
  background-color: #4E5A92;
}

@media screen and (min-width: 620px) {
  .article-nav-link::before,
  .article-nav-link:visited::before {
    background-color: #4E5A92;
    color: #FFFFFF;
  }
  .article-nav-link:hover::before,
  .article-nav-link:focus::before,
  .article-nav-link:active::before {
    background-color: #6271B6;
    color: #FFFFFF;
  }
}

blockquote {
  padding-left: 2em;
  padding-bottom: 1em;
}
blockquote::before {
  content: '!';
  font-style: normal;
  display: block;
  float: left;
  font-size: 4em;
  height: 1em;
  margin-top: 0.5em;
  margin-left: -0.5em;
  font-family: 'Roboto Condensed', Helvetica, sans-serif;
  font-weight: 700;
  color: #8A94C8;
}

pre {
  line-height: 1.3;
}
code {
  font-family: Inconsolata, monospace;
  font-weight: 400;
  background-color: #F0F0F0;
  padding: 0 0.3em;
}
pre code {
  padding: 0;
}


/*** main layout ***/

.app-bar {
  background: #4E5A92 url(../images/bg-990x320.jpg) no-repeat top center;
  background-size: cover;
  box-shadow: none;
  z-index: 1;
}
.home .app-bar {
  background: none;
}
.app-bar,
.navdrawer {
  -webkit-transition: background-color 0.2s ease-out;
          transition: background-color 0.2s ease-out;
}
.app-bar-container {
  background: none;
  height: 60px;
  justify-content: space-between;  /* change the flex layout */
}
.navdrawer-container {
  background: #3f4254;
}
.navdrawer-container h4 {
  height: 60px;
  color: #3f4254;
}
.navdrawer-container a,
.app-bar .logo {
  font-family: 'Roboto', 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
  text-transform: uppercase;
}
.navdrawer-container a {
  text-transform: uppercase;
}
.app-bar .logo {
  font-size: 23px;
  line-height: 60px;
  background: url(../images/logo-white-48x48.png) no-repeat center left;
  color: #FFFFFF;
  flex: inherit;  /* reset the flex box to center */
}
.app-bar .logo a {
  padding-left: 55px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
#menu {
  background-image: url(../images/hamburger-white.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 24px 24px;
}
.app-bar-actions {
  visibility: hidden;
}
.app-bar-actions a {
  display: inline-block;
  padding: 0 20px;
  font-size: 17px;
  line-height: 60px;
  font-weight: 300;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000;
}
.app-bar-actions a .icon {
  vertical-align: middle;
  color: #6271B6;
}


.scrolled .app-bar {
  color: #000000;
  background: #FFFFFF;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.scrolled .app-bar .logo {
  color: #000000;
  background-image: url(../images/logo-black-48x48.png);
}
.scrolled #menu {
  background-image: url(../images/hamburger-black.svg);
}
.scrolled .app-bar-actions {
  visibility: visible;
}
.scrolled .app-bar button:hover,
.scrolled .app-bar-actions a:hover {
  background-color: rgba(78,90,146, 0.1);
}
.scrolled .app-bar button:focus,
.scrolled .app-bar-actions a:focus {
  background-color: rgba(78,90,146, 0.2);
}
.scrolled .app-bar button:active,
.scrolled .app-bar-actions a:active {
  background-color: rgba(78,90,146, 0.4);
}

main {
  padding-top: 60px;
}

footer {
  padding: 16px;
  margin: 0 auto;
}

@media screen and (min-width: 990px) {
  .app-bar,
  .navdrawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transition: background-color 0.2s ease-out;
            transition: background-color 0.2s ease-out;
  }
  .app-bar-container,
  .navdrawer-container {
    height: 60px;
  }

  .app-bar-actions {
    display: none;
  }

  .navdrawer {
    z-index: 2;
  }
  .navdrawer-container {
    position: absolute;
    padding: 0 16px;
    width: 864px;
    height: 0;
    top: 0;
    bottom: auto;
    left: 50%;
    margin-left: -432px;
    overflow: visible;
  }
  .navdrawer-container ul {
    float: right;
    display: inline;
  }
  .navdrawer-container ul li {
    display: inline;
  }
  .navdrawer-container ul li a {
    display: inline-block;
    padding: 0 20px;
    font-size: 17px;
    line-height: 60px;
    font-weight: 300;
    text-transform: uppercase;
  }


  .scrolled .navdrawer-container ul li a {
    color: #000000;
  }
  .scrolled .navdrawer-container ul li a:hover {
    background-color: rgba(78,90,146, 0.2);
  }
  .scrolled .navdrawer-container ul li a:focus {
    background-color: rgba(78,90,146, 0.3);
  }
  .scrolled .navdrawer-container ul li a:active {
    background-color: rgba(78,90,146, 0.4);
  }


  #nav .index {
    display: none;
  }
  footer {
    max-width: 864px;
  }
}


/*** progress ***/

@-webkit-keyframes pulse {
   30% { opacity: 0.6; }
   60% { opacity: 0; }
  100% { opacity: 0.6; }
}
@keyframes pulse {
   30% { opacity: 0.6; }
   60% { opacity: 0; }
  100% { opacity: 0.6; }
}

#progress {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: -6px;
  width: 0%;
  height: 2px;
  background: #45C2FF;
  border-radius: 1px;
  /* the following transition times are overridden by JS */
  -webkit-transition: width 150ms ease-out;
  transition: width 150ms ease-out;
}
#progress.done {
  opacity: 0;
}

#progress dd,
#progress dt {
  position: absolute;
  top: 0;
  height: 2px;
  box-shadow: #45C2FF 1px 0 6px 1px;
  border-radius: 100%;
}
#progress dd {
  opacity: 0.6;
  width: 20px;
  right: 0;
  clip: rect(-6px, 22px, 14px, 10px);
}
#progress dt {
  opacity: 0.6;
  width: 180px;
  right: -80px;
  clip: rect(-6px, 90px, 14px, -6px);
}

#progress.waiting dd,
#progress.waiting dt {
  -webkit-animation: pulse 2s ease-out 0s infinite;
  animation: pulse 2s ease-out 0s infinite;
}


/*** home ***/

.stage {
  height: 300px;
  background: #4E5A92 url(../images/bg-990x320.jpg) no-repeat center center;
  background-size: cover;
  color: #FFFFFF;
  text-align: center;
}
.stage a {
  color: #FFFFFF;
}
.stage h1,
.stage p {
  position: relative;
  top: 22px;
}
.stage h1 {
  padding: 150px 0 0 0;
  background: url(../images/logo-white-150x150.png) no-repeat top center;
  font-family: 'Roboto', 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
}
.stage h1 abbr,
.stage h1 span {
    display: block;
}
.stage h1 abbr {
  font-weight: 700;
}
.stage h1 span {
  font-size: 20px;
}
.stage p {
  padding: 0;
  line-height: 2;
}
@media screen and (min-width: 800px) {
  .stage {
    height: 360px;
  }
  .stage h1 span {
    font-size: 42px;
  }
}
@media screen and (min-width: 990px) {
  .stage {
    height: 585px;
    background: #4E5A92 url(../images/bg-1600x585.jpg) no-repeat center center;
    background-size: cover;
    color: #FFFFFF;
    text-align: left;
  }
  .stage h1,
  .stage p {
    top: 140px;
  }
  .stage h1 {
    height: 280px;
    padding: 0 15px;
    background: url(../images/logo-white-280x280.png) no-repeat center right;
    line-height: 1;
    font-size: 40px;
  }
  .stage h1 abbr,
  .stage h1 span {
    width: 25%;
  }
  .stage h1 abbr {
    font-weight: 900;
    font-size: 80px;
  }
  .stage p {
    text-align: right;
    margin-top: -290px;
  }
  .stage p a {
    display: inline-block;
    width: 280px;
    padding: 290px 15px 0;
    text-align: center;
    /* mimic nav links */
    transition: background-color 0.2s ease-out;
  }
  .stage p a:hover {
    background-color: rgba(255,255,255,0.2);
  }
  .stage p a:focus {
    background-color: rgba(255,255,255,0.3);
    outline: 0;
  }
  .stage p a:active {
    background-color: rgba(255,255,255,0.4);
  }
}


.home .app-bar .logo {
  visibility: hidden;
}
.home.scrolled .app-bar .logo {
  visibility: visible;
}

.home main .container {
  text-align: center;
}
.home main h2 {
  color: #6271B6;
  font-weight: 400;
  padding: 3em 5% 0;
  clear: left;
}
.home main h2:first-child {
  font-weight: 300;
  padding-top: 0;
}
@media screen and (min-width: 620px) {
  .home main h2 {
    padding-left: 15%;
    padding-right: 15%;
  }
}
@media screen and (min-width: 990px) {
  .home main h2 {
    padding-top: 2.5em;
  }
  .home main h2:first-child {
    padding-top: 1em;
  }
}

.home main ol li::before {
  background: url(../images/hex-73x84.gif) no-repeat center center;
  width: 84px;
  height: 84px;
  line-height: 84px;
  color: #FFFFFF;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -42px;
}
.home main ol {
  overflow: auto;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}
.home main ol li {
  padding: 84px 0 1.5em 0;
}
.home main ol li img {
  margin-top: 0.5em;
}
@media all and (min-width: 620px) {
  .home main ol li {
    float: left;
    width: 50%;
    padding-bottom: 0;
  }
}
.home main blockquote::before {
  display: none;
}
.home main blockquote {
  width: 75%;
  margin: 0 auto;
  padding: 0 0 1.5em 0;
}
@media screen and (min-width: 620px) {
  .home main blockquote {
    float: left;
    width: 33.3333%;
    margin: 0;
    padding-bottom: 0;
  }
}
.home main blockquote strong {
  text-transform: uppercase;
  font-size: 400;
}
.home main blockquote p {
  padding-left: 5%;
  padding-right: 5%;
}
.home main ul {
  text-align: left;
  font-size: 17px;
  padding-left: 5%;
  padding-right: 5%;
}

.home-promo {
  margin-top: 52px;
  margin-bottom: 52px;
}


/*** pages ***/

.toc {
  margin-top: 0;
}
/* hide the toc sidebar on narrow viewports */
@media screen and (max-width: 619px) {
  .toc {
    display: none;
  }
}
@media screen and (max-width: 1219px) {
  .download .toc {
    display: none
  }
}

.pagetoc .toc__title,
.pagetoc ul {
  font-size: 16px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 13px;
}
.pagetoc li {
  padding-left: 0;
}
.pagetoc li::before {
  display: none;
}

/* expand the layout on wide viewports */
@media screen and (min-width: 1220px) {
  .toc {
    margin-left: -22.2%;
    margin-right: 0;
  }
  article.g-wide--3,
  section.g-wide--3 {
    width: 99.9%;
    margin-left: 0;
  }
  .pagetoc {
    position: fixed;
    z-index: 1;
    top: 60px;
    right: 0;
    width: 18.5%;
    margin-right: 0;
  }
  .pagetoc .toc__title,
  .toc .pagetoc ul {
    padding-left: 3.7%;
    max-width: 190px;
  }
  .pagetoc .toc__title {
    padding-top: 29px;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  .toc .pagetoc > ul {
    margin-bottom: 1.3em
  }
}

.toc__title a {
  text-decoration: none;
}
.toc ul,
.toc ol,
.toc__list {
  padding-top: 0;
  padding-left: 0;
}
.toc ul ul,
.toc ol ol,
.toc__list .toc__list {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.toc__list li {
  padding-left: 1.5em;
}



.guides-list__item {
  margin-right: auto; /* left-align the flex boxes */
}

.article-nav {
  margin-top: 4em;
}
.article-nav-description {
  font-size: 16px;
}

.download .page-header__excerpt:last-child {
  padding-bottom: 0;
}
.download-promo {
  margin-top: 26px;
  margin-bottom: 52px;
}
.download-promo span {
  min-width: 8em;
  display: inline-block;
}

.feedback {
  clear: both;
  padding-top: 6em;
  overflow: hidden;
  max-width: 70%;
  margin: auto;
}
.feedback footer {
  border: 1px solid #D7DBEC;
  border-width: 1px 0;
  padding-top: 0;
  padding-bottom: 1.6250em;
}
.feedback p {
  font-size: 16px;
}

.api hr {
  margin-top: 60px;
}
.api .container p,
.api .container ul,
.api .container ol {
  padding-top: 0.40625em;
}
.api .container li p {
  padding-top: 0;
}


/* h2/h3 scroll targets need to accommodate the navbar */
article h2[id],
article h3[id] {
  padding-top: 80px;
}



/*** fonts ***/

/* These will be re-defined by the Google Fonts stylesheet to use webfonts. */
/* When adding a font, also update the <link> tag in styles.liquid */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Black'), local('Roboto-Black');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold');
}
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: local('Inconsolata Regular'), local('Inconsolata-Regular');
}