<NME> main.css
<BEF> /*
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)
 * hover: 6271B6  (98,113,182)
 *
 * progress: 45C2FF  (69,194,255);
 ***/



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;
  margin-left: -0.5em;
  font-family: 'Roboto Condensed', Helvetica, sans-serif;
  font-weight: 700;
  color: #f0f0f0;
}




/*** 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 ***/
  height: 320px;
  background: #4E5A92 url(../images/bg-990x320.jpg) no-repeat center center;
  background-size: cover;
  color: #fff;
  text-align: center;
}
.stage h1 {
}
.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;
    height: 585px;
    background: #4E5A92 url(../images/bg-1600x585.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    text-align: left;
  }
  .stage h1 {
}
.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 {
  font-weight: 700;
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold');
}
.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');
}

<MSG> Website: Use Inconsolata as the font for all code samples.

<DFF> @@ -12,6 +12,8 @@ See the LICENSE file for details.
  * hover: 6271B6  (98,113,182)
  *
  * progress: 45C2FF  (69,194,255);
+ *
+ * code background: F0F0F0;
  ***/
 
 
@@ -86,7 +88,17 @@ blockquote::before {
   margin-left: -0.5em;
   font-family: 'Roboto Condensed', Helvetica, sans-serif;
   font-weight: 700;
-  color: #f0f0f0;
+  color: #6271B6;
+}
+
+code {
+  font-family: Inconsolata, monospace;
+  font-weight: 400;
+  background-color: #F0F0F0;
+  padding: 0 0.3em;
+}
+pre code {
+  padding: 0;
 }
 
 
@@ -338,7 +350,7 @@ footer {
   height: 320px;
   background: #4E5A92 url(../images/bg-990x320.jpg) no-repeat center center;
   background-size: cover;
-  color: #fff;
+  color: #FFFFFF;
   text-align: center;
 }
 .stage h1 {
@@ -361,7 +373,7 @@ footer {
     height: 585px;
     background: #4E5A92 url(../images/bg-1600x585.jpg) no-repeat center center;
     background-size: cover;
-    color: #fff;
+    color: #FFFFFF;
     text-align: left;
   }
   .stage h1 {
@@ -619,3 +631,9 @@ main nav {
   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');
+}

{'commit': 'diff --git a/web/_includes/styles.liquid b/web/_includes/styles.liquid\nindex d82da7e..2ab63c5 100644\n--- a/web/_includes/styles.liquid\n+++ b/web/_includes/styles.liquid\n@@ -1,4 +1,4 @@\n-<link rel="stylesheet" name="roboto" href="//fonts.googleapis.com/css?family=Roboto:300,600,900|Roboto+Condensed:300,300italic,400,700">\n+<link rel="stylesheet" name="roboto" href="//fonts.googleapis.com/css?family=Roboto:300,600,900|Roboto+Condensed:300,300italic,400,700|Inconsolata:400">\n <link rel="stylesheet" name="wsk" href="{{ site.baseurl }}/assets/vendor/wsk/0.4.0/styles/wsk.css">\n <link rel="stylesheet" name="octicons" href="{{ site.baseurl }}/assets/vendor/octicons/2.1.2/octicons.css">\n <link rel="stylesheet" name="main" href="{{ site.baseurl }}/assets/styles/main.css?t={{ site.time | date_to_xmlschema | cgi_escape }}">\ndiff --git a/web/assets/styles/main.css b/web/assets/styles/main.css\nindex a130a9a..1e2719c 100644\n--- a/web/assets/styles/main.css\n+++ b/web/assets/styles/main.css\n@@ -12,6 +12,8 @@ See the LICENSE file for details.\n  * hover: 6271B6  (98,113,182)\n  *\n  * progress: 45C2FF  (69,194,255);\n+ *\n+ * code background: F0F0F0;\n  ***/\n \n \n@@ -86,7 +88,17 @@ blockquote::before {\n   margin-left: -0.5em;\n   font-family: \'Roboto Condensed\', Helvetica, sans-serif;\n   font-weight: 700;\n-  color: #f0f0f0;\n+  color: #6271B6;\n+}\n+\n+code {\n+  font-family: Inconsolata, monospace;\n+  font-weight: 400;\n+  background-color: #F0F0F0;\n+  padding: 0 0.3em;\n+}\n+pre code {\n+  padding: 0;\n }\n \n \n@@ -338,7 +350,7 @@ footer {\n   height: 320px;\n   background: #4E5A92 url(../images/bg-990x320.jpg) no-repeat center center;\n   background-size: cover;\n-  color: #fff;\n+  color: #FFFFFF;\n   text-align: center;\n }\n .stage h1 {\n@@ -361,7 +373,7 @@ footer {\n     height: 585px;\n     background: #4E5A92 url(../images/bg-1600x585.jpg) no-repeat center center;\n     background-size: cover;\n-    color: #fff;\n+    color: #FFFFFF;\n     text-align: left;\n   }\n   .stage h1 {\n@@ -619,3 +631,9 @@ main nav {\n   font-weight: 700;\n   src: local(\'Roboto Condensed Bold\'), local(\'RobotoCondensed-Bold\');\n }\n+@font-face {\n+  font-family: \'Inconsolata\';\n+  font-style: normal;\n+  font-weight: 400;\n+  src: local(\'Inconsolata Regular\'), local(\'Inconsolata-Regular\');\n+}\n', 'commit_subject': 'Website: Use Inconsolata as the font for all code samples.', 'repo_name': 'youtube/spfjs', 'committer': {'name': 'Alex Nicksay', 'email': '7c2b58e326787f100693e0a135d10e022088ae3e@google.com', 'time_sec': '1421443638', 'tz_offset': '-300', 'date': {'seconds': '1421443638'}}, 'commit_tree': '28696e5614573408a6cbdee60e19ef7b077d7e6a', 'commit_message': 'Website: Use Inconsolata as the font for all code samples.\n', 'language_name': 'JavaScript', 'license': 'mit', 'hunks': "@@ -12,6 +12,8 @@ See the LICENSE file for details.\n  * hover: 6271B6  (98,113,182)\n  *\n  * progress: 45C2FF  (69,194,255);\n+ *\n+ * code background: F0F0F0;\n  ***/\n \n \n@@ -86,7 +88,17 @@ blockquote::before {\n   margin-left: -0.5em;\n   font-family: 'Roboto Condensed', Helvetica, sans-serif;\n   font-weight: 700;\n-  color: #f0f0f0;\n+  color: #6271B6;\n+}\n+\n+code {\n+  font-family: Inconsolata, monospace;\n+  font-weight: 400;\n+  background-color: #F0F0F0;\n+  padding: 0 0.3em;\n+}\n+pre code {\n+  padding: 0;\n }\n \n \n@@ -338,7 +350,7 @@ footer {\n   height: 320px;\n   background: #4E5A92 url(../images/bg-990x320.jpg) no-repeat center center;\n   background-size: cover;\n-  color: #fff;\n+  color: #FFFFFF;\n   text-align: center;\n }\n .stage h1 {\n@@ -361,7 +373,7 @@ footer {\n     height: 585px;\n     background: #4E5A92 url(../images/bg-1600x585.jpg) no-repeat center center;\n     background-size: cover;\n-    color: #fff;\n+    color: #FFFFFF;\n     text-align: left;\n   }\n   .stage h1 {\n@@ -619,3 +631,9 @@ main nav {\n   font-weight: 700;\n   src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold');\n }\n+@font-face {\n+  font-family: 'Inconsolata';\n+  font-style: normal;\n+  font-weight: 400;\n+  src: local('Inconsolata Regular'), local('Inconsolata-Regular');\n+}\n", 'addition_count': 21, 'deletion_count': 3, 'src_file': 'a/web/assets/styles/main.css', 'tgt_file': 'b/web/assets/styles/main.css', 'file_extension': '.css', 'before_file': "/*\nCopyright 2014 Google Inc. All rights reserved.\n\nUse of this source code is governed by The MIT License.\nSee the LICENSE file for details.\n*/\n\n/***\n * colors\n *\n * link standard:  4E5A92  (78,90,146)\n * hover: 6271B6  (98,113,182)\n *\n * progress: 45C2FF  (69,194,255);\n ***/\n\n\n\na,\na:visited,\na:hover {\n  color: #4E5A92;\n}\na:hover {\n color: #6271B6;\n}\n\n.button--primary,\n.button--primary:visited {\n  background-color: #4E5A92;\n  border-color: #4E5A92;\n  color: #FFFFFF;\n}\n.button--secondary,\n.button--secondary:visited {\n  color: #4E5A92;\n}\n.button--primary:hover,\n.button--primary:focus,\n.button--primary:active,\n.button--secondary:hover,\n.button--secondary:focus,\n.button--secondary:active {\n  background-color: #6271B6;\n  border-color: #4E5A92;\n  color: #FFFFFF;\n}\n\n.button--primary .icon,\n.button--secondary .icon {\n  margin: 0 0.2em;\n}\n\n.theme--spf .themed--background,\ntable thead {\n  background-color: #4E5A92;\n}\n\n@media screen and (min-width: 620px) {\n  .article-nav-link::before,\n  .article-nav-link:visited::before {\n    background-color: #4E5A92;\n    color: #FFFFFF;\n  }\n  .article-nav-link:hover::before,\n  .article-nav-link:focus::before,\n  .article-nav-link:active::before {\n    background-color: #6271B6;\n    color: #FFFFFF;\n  }\n}\n\nblockquote {\n  padding-left: 2em;\n  padding-bottom: 1em;\n}\nblockquote::before {\n  content: '!';\n  font-style: normal;\n  display: block;\n  float: left;\n  font-size: 4em;\n  height: 1em;\n  margin-top: 0.5em;\n  margin-left: -0.5em;\n  margin-left: -0.5em;\n  font-family: 'Roboto Condensed', Helvetica, sans-serif;\n  font-weight: 700;\n  color: #f0f0f0;\n}\n\n\n\n\n/*** main layout ***/\n\n.app-bar {\n  background: #4E5A92 url(../images/bg-990x320.jpg) no-repeat top center;\n  background-size: cover;\n  box-shadow: none;\n  z-index: 1;\n}\n.home .app-bar {\n  background: none;\n}\n.app-bar,\n.navdrawer {\n  -webkit-transition: background-color 0.2s ease-out;\n          transition: background-color 0.2s ease-out;\n}\n.app-bar-container {\n  background: none;\n  height: 60px;\n  justify-content: space-between;  /* change the flex layout */\n}\n.navdrawer-container {\n  background: #3f4254;\n}\n.navdrawer-container h4 {\n  height: 60px;\n  color: #3f4254;\n}\n.navdrawer-container a,\n.app-bar .logo {\n  font-family: 'Roboto', 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;\n  text-transform: uppercase;\n}\n.navdrawer-container a {\n  text-transform: uppercase;\n}\n.app-bar .logo {\n  font-size: 23px;\n  line-height: 60px;\n  background: url(../images/logo-white-48x48.png) no-repeat center left;\n  color: #FFFFFF;\n  flex: inherit;  /* reset the flex box to center */\n}\n.app-bar .logo a {\n  padding-left: 55px;\n  font-weight: 700;\n  -webkit-font-smoothing: antialiased;\n  font-smoothing: antialiased;\n}\n#menu {\n  background-image: url(../images/hamburger-white.svg);\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 24px 24px;\n}\n.app-bar-actions {\n  visibility: hidden;\n}\n.app-bar-actions a {\n  display: inline-block;\n  padding: 0 20px;\n  font-size: 17px;\n  line-height: 60px;\n  font-weight: 300;\n  text-transform: uppercase;\n  text-decoration: none;\n  color: #000000;\n}\n.app-bar-actions a .icon {\n  vertical-align: middle;\n  color: #6271B6;\n}\n\n\n.scrolled .app-bar {\n  color: #000000;\n  background: #FFFFFF;\n  box-shadow: 0 5px 10px rgba(0,0,0,0.2);\n}\n.scrolled .app-bar .logo {\n  color: #000000;\n  background-image: url(../images/logo-black-48x48.png);\n}\n.scrolled #menu {\n  background-image: url(../images/hamburger-black.svg);\n}\n.scrolled .app-bar-actions {\n  visibility: visible;\n}\n.scrolled .app-bar button:hover,\n.scrolled .app-bar-actions a:hover {\n  background-color: rgba(78,90,146, 0.1);\n}\n.scrolled .app-bar button:focus,\n.scrolled .app-bar-actions a:focus {\n  background-color: rgba(78,90,146, 0.2);\n}\n.scrolled .app-bar button:active,\n.scrolled .app-bar-actions a:active {\n  background-color: rgba(78,90,146, 0.4);\n}\n\nmain {\n  padding-top: 60px;\n}\n\nfooter {\n  padding: 16px;\n  margin: 0 auto;\n}\n\n@media screen and (min-width: 990px) {\n  .app-bar,\n  .navdrawer {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    -webkit-transition: background-color 0.2s ease-out;\n            transition: background-color 0.2s ease-out;\n  }\n  .app-bar-container,\n  .navdrawer-container {\n    height: 60px;\n  }\n\n  .app-bar-actions {\n    display: none;\n  }\n\n  .navdrawer {\n    z-index: 2;\n  }\n  .navdrawer-container {\n    position: absolute;\n    padding: 0 16px;\n    width: 864px;\n    height: 0;\n    top: 0;\n    bottom: auto;\n    left: 50%;\n    margin-left: -432px;\n    overflow: visible;\n  }\n  .navdrawer-container ul {\n    float: right;\n    display: inline;\n  }\n  .navdrawer-container ul li {\n    display: inline;\n  }\n  .navdrawer-container ul li a {\n    display: inline-block;\n    padding: 0 20px;\n    font-size: 17px;\n    line-height: 60px;\n    font-weight: 300;\n    text-transform: uppercase;\n  }\n\n\n  .scrolled .navdrawer-container ul li a {\n    color: #000000;\n  }\n  .scrolled .navdrawer-container ul li a:hover {\n    background-color: rgba(78,90,146, 0.2);\n  }\n  .scrolled .navdrawer-container ul li a:focus {\n    background-color: rgba(78,90,146, 0.3);\n  }\n  .scrolled .navdrawer-container ul li a:active {\n    background-color: rgba(78,90,146, 0.4);\n  }\n\n\n  #nav .index {\n    display: none;\n  }\n  footer {\n    max-width: 864px;\n  }\n}\n\n\n/*** progress ***/\n\n@-webkit-keyframes pulse {\n   30% { opacity: 0.6; }\n   60% { opacity: 0; }\n  100% { opacity: 0.6; }\n}\n@keyframes pulse {\n   30% { opacity: 0.6; }\n   60% { opacity: 0; }\n  100% { opacity: 0.6; }\n}\n\n#progress {\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  left: -6px;\n  width: 0%;\n  height: 2px;\n  background: #45C2FF;\n  border-radius: 1px;\n  /* the following transition times are overridden by JS */\n  -webkit-transition: width 150ms ease-out;\n  transition: width 150ms ease-out;\n}\n#progress.done {\n  opacity: 0;\n}\n\n#progress dd,\n#progress dt {\n  position: absolute;\n  top: 0;\n  height: 2px;\n  box-shadow: #45C2FF 1px 0 6px 1px;\n  border-radius: 100%;\n}\n#progress dd {\n  opacity: 0.6;\n  width: 20px;\n  right: 0;\n  clip: rect(-6px, 22px, 14px, 10px);\n}\n#progress dt {\n  opacity: 0.6;\n  width: 180px;\n  right: -80px;\n  clip: rect(-6px, 90px, 14px, -6px);\n}\n\n#progress.waiting dd,\n#progress.waiting dt {\n  -webkit-animation: pulse 2s ease-out 0s infinite;\n  animation: pulse 2s ease-out 0s infinite;\n}\n\n\n/*** home ***/\n  height: 320px;\n  background: #4E5A92 url(../images/bg-990x320.jpg) no-repeat center center;\n  background-size: cover;\n  color: #fff;\n  text-align: center;\n}\n.stage h1 {\n}\n.stage a {\n  color: #FFFFFF;\n}\n.stage h1,\n.stage p {\n  position: relative;\n  top: 22px;\n}\n.stage h1 {\n  padding: 150px 0 0 0;\n  background: url(../images/logo-white-150x150.png) no-repeat top center;\n  font-family: 'Roboto', 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;\n  font-weight: 300;\n  line-height: 1;\n  text-transform: uppercase;\n    height: 585px;\n    background: #4E5A92 url(../images/bg-1600x585.jpg) no-repeat center center;\n    background-size: cover;\n    color: #fff;\n    text-align: left;\n  }\n  .stage h1 {\n}\n.stage h1 span {\n  font-size: 20px;\n}\n.stage p {\n  padding: 0;\n  line-height: 2;\n}\n@media screen and (min-width: 800px) {\n  .stage {\n    height: 360px;\n  }\n  .stage h1 span {\n    font-size: 42px;\n  }\n}\n@media screen and (min-width: 990px) {\n  .stage {\n    height: 585px;\n    background: #4E5A92 url(../images/bg-1600x585.jpg) no-repeat center center;\n    background-size: cover;\n    color: #FFFFFF;\n    text-align: left;\n  }\n  .stage h1,\n  .stage p {\n    top: 140px;\n  }\n  .stage h1 {\n    height: 280px;\n    padding: 0 15px;\n    background: url(../images/logo-white-280x280.png) no-repeat center right;\n    line-height: 1;\n    font-size: 40px;\n  }\n  .stage h1 abbr,\n  .stage h1 span {\n    width: 25%;\n  }\n  .stage h1 abbr {\n    font-weight: 900;\n    font-size: 80px;\n  }\n  .stage p {\n    text-align: right;\n    margin-top: -290px;\n  }\n  .stage p a {\n    display: inline-block;\n    width: 280px;\n    padding: 290px 15px 0;\n    text-align: center;\n    /* mimic nav links */\n    transition: background-color 0.2s ease-out;\n  }\n  .stage p a:hover {\n    background-color: rgba(255,255,255,0.2);\n  }\n  .stage p a:focus {\n    background-color: rgba(255,255,255,0.3);\n    outline: 0;\n  }\n  .stage p a:active {\n    background-color: rgba(255,255,255,0.4);\n  }\n}\n\n\n.home .app-bar .logo {\n  visibility: hidden;\n}\n.home.scrolled .app-bar .logo {\n  visibility: visible;\n}\n\n.home main .container {\n  text-align: center;\n}\n.home main h2 {\n  color: #6271B6;\n  font-weight: 400;\n  padding: 3em 5% 0;\n  clear: left;\n}\n.home main h2:first-child {\n  font-weight: 300;\n  padding-top: 0;\n}\n@media screen and (min-width: 620px) {\n  .home main h2 {\n    padding-left: 15%;\n    padding-right: 15%;\n  }\n}\n@media screen and (min-width: 990px) {\n  .home main h2 {\n    padding-top: 2.5em;\n  }\n  .home main h2:first-child {\n    padding-top: 1em;\n  }\n}\n\n.home main ol li::before {\n  background: url(../images/hex-73x84.gif) no-repeat center center;\n  width: 84px;\n  height: 84px;\n  line-height: 84px;\n  color: #FFFFFF;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  margin-left: -42px;\n}\n.home main ol {\n  overflow: auto;\n  width: 100%;\n  padding-left: 5%;\n  padding-right: 5%;\n}\n.home main ol li {\n  padding: 84px 0 1.5em 0;\n}\n.home main ol li img {\n  margin-top: 0.5em;\n}\n@media all and (min-width: 620px) {\n  .home main ol li {\n    float: left;\n    width: 50%;\n    padding-bottom: 0;\n  }\n}\n.home main blockquote::before {\n  display: none;\n}\n.home main blockquote {\n  width: 75%;\n  margin: 0 auto;\n  padding: 0 0 1.5em 0;\n}\n@media screen and (min-width: 620px) {\n  .home main blockquote {\n    float: left;\n    width: 33.3333%;\n    margin: 0;\n    padding-bottom: 0;\n  }\n}\n.home main blockquote strong {\n  text-transform: uppercase;\n  font-size: 400;\n}\n.home main blockquote p {\n  padding-left: 5%;\n  padding-right: 5%;\n}\n.home main ul {\n  text-align: left;\n  font-size: 17px;\n  padding-left: 5%;\n  padding-right: 5%;\n}\n\n.home-promo {\n  margin-top: 52px;\n  margin-bottom: 52px;\n}\n\n\n/*** pages ***/\n\n.toc {\n  margin-top: 0;\n}\n/* hide the toc sidebar on narrow viewports */\n@media screen and (max-width: 619px) {\n  .toc {\n    display: none;\n  }\n}\n@media screen and (max-width: 1219px) {\n  .download .toc {\n    display: none\n  }\n}\n\n.pagetoc .toc__title,\n.pagetoc ul {\n  font-size: 16px;\n  border-bottom: 1px solid #e0e0e0;\n  padding-bottom: 13px;\n}\n.pagetoc li {\n  padding-left: 0;\n}\n.pagetoc li::before {\n  display: none;\n}\n\n/* expand the layout on wide viewports */\n@media screen and (min-width: 1220px) {\n  .toc {\n    margin-left: -22.2%;\n    margin-right: 0;\n  }\n  article.g-wide--3,\n  section.g-wide--3 {\n    width: 99.9%;\n    margin-left: 0;\n  }\n  .pagetoc {\n    position: fixed;\n    z-index: 1;\n    top: 60px;\n    right: 0;\n    width: 18.5%;\n    margin-right: 0;\n  }\n  .pagetoc .toc__title,\n  .toc .pagetoc ul {\n    padding-left: 3.7%;\n    max-width: 190px;\n  }\n  .pagetoc .toc__title {\n    padding-top: 29px;\n    padding-bottom: 16px;\n    margin-bottom: 16px;\n  }\n  .toc .pagetoc > ul {\n    margin-bottom: 1.3em\n  }\n}\n\n.toc__title a {\n  text-decoration: none;\n}\n.toc ul,\n.toc ol,\n.toc__list {\n  padding-top: 0;\n  padding-left: 0;\n}\n.toc ul ul,\n.toc ol ol,\n.toc__list .toc__list {\n  border-bottom: none;\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n.toc__list li {\n  font-weight: 700;\n  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold');\n}\n.article-nav {\n  margin-top: 4em;\n}\n.article-nav-description {\n  font-size: 16px;\n}\n\n.download .page-header__excerpt:last-child {\n  padding-bottom: 0;\n}\n.download-promo {\n  margin-top: 26px;\n  margin-bottom: 52px;\n}\n.download-promo span {\n  min-width: 8em;\n  display: inline-block;\n}\n\n.feedback {\n  clear: both;\n  padding-top: 6em;\n  overflow: hidden;\n  max-width: 70%;\n  margin: auto;\n}\n.feedback footer {\n  border: 1px solid #D7DBEC;\n  border-width: 1px 0;\n  padding-top: 0;\n  padding-bottom: 1.6250em;\n}\n.feedback p {\n  font-size: 16px;\n}\n\n.api hr {\n  margin-top: 60px;\n}\n.api .container p,\n.api .container ul,\n.api .container ol {\n  padding-top: 0.40625em;\n}\n.api .container li p {\n  padding-top: 0;\n}\n\n\n/* h2/h3 scroll targets need to accommodate the navbar */\narticle h2[id],\narticle h3[id] {\n  padding-top: 80px;\n}\n\n\n\n/*** fonts ***/\n\n/* These will be re-defined by the Google Fonts stylesheet to use webfonts. */\n/* When adding a font, also update the <link> tag in styles.liquid */\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 300;\n  src: local('Roboto Light'), local('Roboto-Light');\n}\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 700;\n  src: local('Roboto Bold'), local('Roboto-Bold');\n}\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 900;\n  src: local('Roboto Black'), local('Roboto-Black');\n}\n@font-face {\n  font-family: 'Roboto Condensed';\n  font-style: normal;\n  font-weight: 300;\n  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light');\n}\n@font-face {\n  font-family: 'Roboto Condensed';\n  font-style: italic;\n  font-weight: 300;\n  src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic');\n}\n@font-face {\n  font-family: 'Roboto Condensed';\n  font-style: normal;\n  font-weight: 400;\n  src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular');\n}\n@font-face {\n  font-family: 'Roboto Condensed';\n  font-style: normal;\n  font-weight: 700;\n  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold');\n}\n@font-face {\n  font-family: 'Inconsolata';\n  font-style: normal;\n  font-weight: 400;\n  src: local('Inconsolata Regular'), local('Inconsolata-Regular');\n}\n", 'message': 'Website: Use Inconsolata as the font for all code samples.\n', 'author_name': 'Alex Nicksay', 'lang': 'css'}