Merge pull request #475 from google/generate-device-sprites
Adds device symbol sprites.
diff --git a/index.html b/index.html
deleted file mode 100644
index 60804c1..0000000
--- a/index.html
+++ /dev/null
@@ -1,409 +0,0 @@
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="initial-scale=1, width=device-width"/>
- <link href="//fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet" type="text/css">
- <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic" rel="stylesheet" type="text/css">
- <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
- <link rel="stylesheet" type="text/css" href="www/css/material.css">
- <title>Material icons guide - Google design</title>
- </head>
- <body class="icons-docs">
- <header>
- <div class="header-wrapper">
- <div class="header-title">
- <span class="section-title">Material icons guide</span>
- </div>
- </div>
- </header>
-
- <div id="page-container">
- <div id="page-inner-container">
-
-
- <p>An overview of material icons—where to get them and how to integrate them with your projects.</p>
-
- <nav class="toc">
- <h1>Contents</h1>
- <ul>
- <li><a href="#what-are-material-icons">What are material icons</a></li>
- <li><a href="#getting-icons">Getting icons</a></li>
- <li><a href="#icon-font-for-the-web">Icon font for the web</a></li>
- <li><a href="#icon-images-for-the-web">Icon images for the web</a></li>
- <li><a href="#icons-for-android">Icons for Android</a></li>
- <li><a href="#icons-for-ios">Icons for iOS</a></li>
- </ul>
- </nav>
-
- <h1 id="what-are-material-icons">What are material icons</h1>
-<p>Material design system icons are simple, modern, friendly, and sometimes
-quirky. Each icon is created using our design guidelines to depict in simple
-and minimal forms the universal concepts used commonly throughout a UI.
-Ensuring readability and clarity at both large and small sizes, these icons
-have been optimized for beautiful display on all common platforms and display
-resolutions.</p>
-<p>See the full set of material design icons at the <a href="https://www.google.com/design/icons/">material icons library</a>.</p>
-<div class="img"><a href="https://www.google.com/design/icons/"><img src="www/images/icons-library.png" alt="alt text"></a></div>
-
-<h1 id="getting-icons">Getting icons</h1>
-<p>The icons are available in several formats and are suitable for different types
-of projects and platforms, for developers in their apps, and for designers in
-their mockups or prototypes.</p>
-<h2 id="licensing">Licensing</h2>
-<p>We have made these icons available for you to incorporate them into your
-products under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Common Attribution 4.0 International License (CC-BY 4.0)</a>. Feel free to remix and re-share these icons and documentation in your
-products. We'd love attribution in your app's <em>about</em> screen, but it's not required. The only thing we ask is that you not re-sell
-the icons themselves.</p>
-<h2 id="browsing-and-downloading-individual-icons">Browsing and downloading individual icons</h2>
-<p>The complete set of material icons are available on the <a href="https://www.google.com/design/icons/">material icon library</a>. The icons are available for download in SVG or PNGs, formats that are
-suitable for web, Android, and iOS projects or for inclusion in any designer
-tools.</p>
-<h2 id="downloading-everything">Downloading everything</h2>
-<p>Grab the <a href="https://github.com/google/material-design-icons/releases/download/2.0.0/material-design-icons-2.0.0.zip">latest stable zip archive</a> (~57MB) of all icons or the <a href="https://github.com/google/material-design-icons/archive/master.zip">bleeding-edge version from master.</a></p>
-<h2 id="git-repository">Git Repository</h2>
-<p>The material icons are available from the <a href="https://github.com/google/material-design-icons">git repository</a> which contains the complete set of icons including all the various formats we
-are making available.</p>
-<pre><code>$ git clone http://github.com/google/material-design-icons/
-</code></pre><h2 id="installing-icons-from-bower">Installing icons from bower</h2>
-<p>Install the icons using the <a href="http://bower.io/">Bower</a> package manager.</p>
-<pre><code>$ bower install material-design-icons
-</code></pre><h2 id="installing-icons-from-npm">Installing icons from npm</h2>
-<p>Install the icons using <a href="http://npmjs.io/">npm</a> package manager.</p>
-<pre><code>$ npm install material-design-icons
-</code></pre><p><hr></p>
-<h1 id="icon-font-for-the-web">Icon font for the web</h1>
-<p>The material icon font is the easiest way to incorporate material icons with
-web projects. We have packaged all the material icons into a single font that
-takes advantage of the typographic rendering capabilities of modern browsers so
-that web developers can easily incorporate these icons with only a few lines of
-code.</p>
-<p>Using the font is not only the most convenient method, but it is efficient and
-looks great:</p>
-<ul>
-<li>750+ icons all from a single download.</li>
-<li>Served from Google Web Font servers or can be self hosted.</li>
-<li>Supported by all modern web browsers.</li>
-<li>Colored, sized and positioned entirely with CSS.</li>
-<li>Vector-based: Looks great at any scale, retina displays, low-dpi display
-screens.</li>
-</ul>
-<p>The icon font contains 750+ icons and weighs in at only 40KB (woff2 format). In
-comparison, a ZIP file of these in SVGs will be more than 50% larger.</p>
-<h2 id="setup-method-1-using-via-google-web-fonts">Setup Method 1. Using via Google Web Fonts</h2>
-<p>The easiest way to set up icon fonts for use in any web page is through <a href="https://developers.google.com/fonts/">Google Web Fonts</a>. All you need to do is include a single line of HTML:</p>
-<pre><code><link href="https://fonts.googleapis.com/icon?family=Material+Icons"
- rel="stylesheet">
-</code></pre><p>Similar to other Google Web Fonts, the correct CSS will be served to activate
-the 'Material Icons' font specific to the browser. An additional CSS class will
-be declared called <code>.material-icons</code>. Any element that uses this class will have the correct CSS to render these
-icons from the web font.</p>
-<h2 id="setup-method-2-self-hosting">Setup Method 2. Self hosting</h2>
-<p>For those looking to self host the web font, some additional setup is necessary.
-Host the <a href="https://github.com/google/material-design-icons/tree/master/iconfont">icon font</a> in a location, for example <code>https://example.com/material-icons.woff</code> and add the
-following CSS rule:</p>
-<pre><code>@font-face {
- font-family: 'Material Icons';
- font-style: normal;
- font-weight: 400;
- src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
- src: local('Material Icons'),
- local('MaterialIcons-Regular'),
- url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
- url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
- url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
-}
-</code></pre><p>In addition, the CSS rules for rendering the icon will need to be declared.
-These rules are normally served as part of the Google Web Font stylesheet, but
-will need to be included manually in your projects when self-hosting the font:</p>
-<pre><code>.material-icons {
- font-family: 'Material Icons';
- font-weight: normal;
- font-style: normal;
- font-size: 24px; /* Preferred icon size */
- display: inline-block;
- width: 1em;
- height: 1em;
- line-height: 1;
- text-transform: none;
- letter-spacing: normal;
-
- /* Support for all WebKit browsers. */
- -webkit-font-smoothing: antialiased;
- /* Support for Safari and Chrome. */
- text-rendering: optimizeLegibility;
-
- /* Support for Firefox. */
- -moz-osx-font-smoothing: grayscale;
-
- /* Support for IE. */
- font-feature-settings: 'liga';
-}
-</code></pre><h2 id="using-the-icons-in-html">Using the icons in HTML</h2>
-<p>It’s easy to incorporate icons into your web page. Here’s a small example:</p>
-<div class="icons-preview-code">
-
- <div class="icons-preview"><i class="material-icons">face</i></div>
-
- <div class="icons-code"><code><i
-class="material-icons">face</i></code></div>
-
-<p></div></p>
-<p>This example uses a typographic feature called <a href="http://alistapart.com/article/the-era-of-symbol-fonts">ligatures</a>, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.</p>
-<p>This feature is supported in most modern browsers on both desktop and mobile
-devices.</p>
-<table>
- <tr>
- <td><strong>Browser</strong></td>
- <td><strong>Version supporting ligatures</strong></td>
- </tr>
- <tr>
- <td>Google Chrome</td>
- <td>11</td>
- </tr>
- <tr>
- <td>Mozilla Firefox</td>
- <td>3.5</td>
- </tr>
- <tr>
- <td>Apple Safari</td>
- <td>5</td>
- </tr>
- <tr>
- <td>Microsoft IE</td>
- <td>10</td>
- </tr>
- <tr>
- <td>Opera</td>
- <td>15</td>
- </tr>
- <tr>
- <td>Apple MobileSafari</td>
- <td>iOS 4.2</td>
- </tr>
- <tr>
- <td>Android Browser</td>
- <td>3.0</td>
- </tr>
-</table>
-
-<p>For browsers that do not support ligatures, fall back to specifying the icons
-using numeric character references like the example below:</p>
-<div class="icons-preview-code">
-
- <div class="icons-preview"><i class="material-icons"></i></div>
-
- <div class="icons-code"><code><i
-class="material-icons">&#xE87C;</i></code></div>
-
-<p></div></p>
-<p>Find both the icon names and codepoints on the <a href="https://www.google.com/design/icons/">material icons library</a> by selecting any icon and opening the icon font panel. A <a href="https://github.com/google/material-design-icons/blob/master/iconfont/codepoints">codepoints index</a> is also available on our git repository which shows the complete set of names
-and character codes.</p>
-<h2 id="styling-icons-in-material-design">Styling icons in material design</h2>
-<p>These icons were designed to follow the <a href="https://www.google.com/design/spec/style/icons.html">material design guidelines</a> and they look best when using the recommended icon sizes and colors. The styles below make it easy to apply our recommended sizes, colors, and activity states.</p>
-<pre><code>// Rules for sizing the icon.
-.material-icons.md-18 { font-size: 18px; }
-.material-icons.md-24 { font-size: 24px; }
-.material-icons.md-36 { font-size: 36px; }
-.material-icons.md-48 { font-size: 48px; }
-
-// Rules for using icons as black on a light background.
-.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
-.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
-
-// Rules for using icons as white on a dark background.
-.material-icons.md-light { color: rgba(255, 255, 255, 1); }
-.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
-</code></pre><h3 id="sizing">Sizing</h3>
-<p>Although the icons in the font can be scaled to any size, in accordance with <a href="https://www.google.com/design/spec/style/icons.html#icons-system-icons">material design icons guidelines</a>, we recommend them to be shown in either 18, 24, 36 or 48px. The default being
-24px.</p>
-<p>CSS rules for the standard material design sizing guidelines:</p>
-<pre><code>.material-icons.md-18 { font-size: 18px; }
-.material-icons.md-24 { font-size: 24px; }
-.material-icons.md-36 { font-size: 36px; }
-.material-icons.md-48 { font-size: 48px; }
-</code></pre><p>Material icons look best at 24px, but if an icon needs to be displayed in an
-alternative size, using the above CSS rules can help:</p>
-<div class="icons-preview-code">
-
- <div class="icons-preview"><i class="material-icons md-18">face</i><div
-class="icon-caption">18px</div></div>
-
- <div class="icons-code"><code><i class="material-icons
-md-18">face</i></code></div>
-
-<p></div></p>
-<div class="icons-preview-code">
-
- <div class="icons-preview"><i class="material-icons md-24">face</i><div
-class="icon-caption">24px</div></div>
-
- <div class="icons-code"><code><i class="material-icons
-md-24">face</i></code></div>
-
-<p></div></p>
-<div class="icons-preview-code">
-
- <div class="icons-preview"><i class="material-icons md-36">face</i><div
-class="icon-caption">36px</div></div>
-
- <div class="icons-code"><code><i class="material-icons
-md-36">face</i></code></div>
-
-<p></div></p>
-<div class="icons-preview-code">
-
- <div class="icons-preview"><i class="material-icons md-48">face</i><div
-class="icon-caption">48px</div></div>
-
- <div class="icons-code"><code><i class="material-icons
-md-48">face</i></code></div>
-
-<p></div></p>
-<h3 id="coloring">Coloring</h3>
-<p>Using the icon font allows for easy styling of an icon in any color.
-In accordance with <a href="https://www.google.com/design/spec/style/icons.html#icons-system-icons">material design icon guidelines</a>, for active icons we recommend using either black at 54% opacity or white at
-100% opacity when displaying these on light or dark backgrounds, respectively.
-If an icon is disabled or inactive, using black at 26% or white at 30% for
-light and dark backgrounds, respectively.</p>
-<p>Here are some examples, using the material CSS styles described above:</p>
-<pre><code>.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
-.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
-
-.material-icons.md-light { color: rgba(255, 255, 255, 1); }
-.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
-</code></pre><p>Example for drawing an icon on a light background with a dark foreground color:</p>
-<div class="icons-preview-code">
-
- <div class="icons-preview"><i class="material-icons md-dark">face</i><div
-class="icon-caption">Normal</div></div>
-
- <div class="icons-code"><code><i class="material-icons
-md-dark">face</i></code></div>
-
-<p></div></p>
-<div class="icons-preview-code">
-
- <div class="icons-preview"><i class="material-icons md-dark
-md-inactive">face</i><div class="icon-caption">Disabled</div></div>
-
- <div class="icons-code"><code><i class="material-icons
-md-dark md-inactive">face</i></code></div>
-
-<p></div></p>
-<p>Example for drawing an icon on a dark background with a light foreground color:</p>
-<div class="icons-preview-code">
-
- <div class="icons-preview icons-dark-bg"><i class="material-icons
-md-light">face</i><div class="icon-caption">Normal</div></div>
-
- <div class="icons-code"><code><i class="material-icons
-md-light">face</i></code></div>
-
-<p></div></p>
-<div class="icons-preview-code">
-
- <div class="icons-preview icons-dark-bg"><i class="material-icons md-light
-md-inactive">face</i><div class="icon-caption">Disabled</div></div>
-
- <div class="icons-code"><code><i class="material-icons
-md-light md-inactive">face</i></code></div>
-
-<p></div></p>
-<p>To set a custom icon color, define a CSS rule specifying the desired color for
-the font:</p>
-<pre><code>.material-icons.orange600 { color: #FB8C00; }
-</code></pre><p>and then use the class when referring to the icon:</p>
-<div class="icons-preview-code">
-
- <div class="icons-preview"><i class="material-icons orange600">face</i><div
-class="icon-caption">Normal</div></div>
-
- <div class="icons-code"><code><i class="material-icons
-orange600">face</i></code></div>
-
-<p></div></p>
-<p><hr></p>
-<h1 id="icon-images-for-the-web">Icon images for the web</h1>
-<p>Material icons are also available as regular images, both in PNG and SVG
-formats.</p>
-<h2 id="svg">SVG</h2>
-<p>The material icons are provided as SVGs that are suitable for web projects.
-Individual icons are downloadable from the <a href="https://www.google.com/design/icons/">material icons library</a>. The SVGs are also available from the material design icons <a href="https://github.com/google/material-design-icons/">git repository</a> under the path:</p>
-<pre><code>material-design-icons/*/svg/production/
-</code></pre><p>For example, icons for maps are in <a href="https://github.com/google/material-design-icons/tree/master/maps/svg/production">maps/svg/production</a>:</p>
-<pre><code>material-design-icons/maps/svg/production/
-</code></pre><p>If multiple icons are in use on a web site, creating spritesheets out of the
-images is recommended. For more information, refer to the documentation in the <a href="https://github.com/google/material-design-icons/tree/master/sprites">sprites directory of the git repository</a>.</p>
-<h2 id="png">PNG</h2>
-<p>PNG is the most traditional way to display icons on the web. Our downloads from
-the <a href="https://www.google.com/design/icons/">material icons library</a> provide both single and double densities for each icon. They are referred to
-as <code>1x_web</code> and <code>2x_web</code> respectively in the download. Icons are also available in the git repository
-under:</p>
-<pre><code>material-design-icons/*/1x_web/
-material-design-icons/*/2x_web/
-</code></pre><p>If multiple icons are in use on a web site, creating spritesheets out of the
-images is recommended. For more information, refer to recommendations in the <a href="https://github.com/google/material-design-icons/tree/master/sprites">sprites directory in the git repository</a>.</p>
-<p><hr></p>
-<h1 id="icons-for-android">Icons for Android</h1>
-<p>PNGs suitable for Android are available from the <a href="https://www.google.com/design/icons/">material icons library</a>. These come in all the supported screen densities so they should look good on
-any device.</p>
-<p>The icons are also available in the <a href="https://github.com/google/material-design-icons">material design icons git repository</a> in the same combination of colors and sizes named as follows:</p>
-<pre><code>*/drawable-{{density}}/ic_{{name}}_{{color}}_{{size}}dp.png
-</code></pre><p>A density-independent VectorDrawable is provided which is supported from
-Android Lollipop and later:</p>
-<pre><code>*/drawable-anydpi-v21/ic_{{name}}_black_24dp.xml
-</code></pre><p>The Vector Drawable is currently only available as a black 24dp icon. This is
-for compatibility with our most standard icon size. To render the icon in a
-different color, use <a href="https://developer.android.com/training/material/drawables.html">drawable tinting available on Android Lollipop</a>.</p>
-<p>When using the Vector Drawable, it may not be necessary to include the xxxhdpi
-density PNG since it is unlikely a device supporting that screen density does
-not support Vector Drawables.</p>
-<p><hr></p>
-<h1 id="icons-for-ios">Icons for iOS</h1>
-<p>Material icons also work well within iOS apps. In both the <a href="https://www.google.com/design/icons/">material icons library</a> and <a href="http://github.com/google/material-design-icons/">git repository</a>, these icons are packaged up in <a href="https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/AddingImageSets.html">Xcode imagesets</a> which will work easily with <a href="https://developer.apple.com/library/mac/recipes/xcode_help-image_catalog-1.0/Recipe.html">Xcode Asset Catalogs</a> (xcassets). These imagesets can be added to any Xcode Asset Catalogs by
-dragging them into Xcode on to the asset catalog or by copying the folder into
-the xcasset folder.</p>
-<div class="img"><img src="www/images/ios-imageset.png" alt="alt text"></div>
-
-<p>The imageset contains the single, double and triple density images (1x, 2x, 3x)
-so they work on all known iOS screen densities. Both black and white icons are
-provided, but we recommend using <a href="https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIImage_Class/#//apple_ref/occ/instm/UIImage/imageWithRenderingMode:">UIImage's imageWithRenderingMode</a> with <a href="https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIImage_Class/#//apple_ref/c/tdef/UIImageRenderingMode">UIImageRenderingModeAlwaysTemplate</a> which will allow the image to be used as an alpha mask that can be tinted to
-any possible color.</p>
-<p>Objective-C example:</p>
-<pre><code>UIButton *button = [[UIButton alloc] init];
-UIImage *closeImage =
- [[UIImage imageNamed:@"ic_close"]
- imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
-button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
-[button setImage:closeImage forState:UIControlStateNormal];
-</code></pre><p>Swift Example:</p>
-<pre><code>let button = UIButton()
-let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
- UIImageRenderingMode.AlwaysTemplate)
-button.tintColor = UIColor(white:0, alpha:0.54)
-button.setImage(closeImage, forState:UIControlState.Normal)
-</code></pre>
-
- </div><!-- page-inner-container -->
- </div><!-- page-container -->
- <!-- footer -->
- <footer>
- <div class="logo"><a href="https://www.google.com/"><img class="google-logo" alt="Google" src="www/images/google-logo.png"></a></div>
- <div class="links right">
- <a href="https://www.google.com/intl/en/about/">About</a><span class="dot">·</span>
- <a href="https://www.google.com/intl/en/policies/">Privacy & Terms</a>
- </div>
- </div>
- </footer>
- <script>
- (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
- (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
- m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
- ga('create', 'UA-51798601-4', 'auto');
- ga('send', 'pageview');
-
-</script>
- </body>
-</html>
diff --git a/www/css/material.css b/www/css/material.css
deleted file mode 100644
index 7a5fb55..0000000
--- a/www/css/material.css
+++ /dev/null
@@ -1,2350 +0,0 @@
-/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- * user zoom.
- */
-html {
- font-family: sans-serif;
- /* 1 */
- -ms-text-size-adjust: 100%;
- /* 2 */
- -webkit-text-size-adjust: 100%;
- /* 2 */ }
-
-/**
- * Remove default margin.
- */
-body {
- margin: 0; }
-
-/* HTML5 display definitions
- ========================================================================== */
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
- display: block; }
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-audio, canvas, progress, video {
- display: inline-block;
- /* 1 */
- vertical-align: baseline;
- /* 2 */ }
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-audio:not([controls]) {
- display: none;
- height: 0; }
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
- */
-[hidden], template {
- display: none; }
-
-/* Links
- ========================================================================== */
-/**
- * Remove the gray background color from active links in IE 10.
- */
-a {
- background: transparent; }
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-a:active, a:hover {
- outline: 0; }
-
-/* Text-level semantics
- ========================================================================== */
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-abbr[title] {
- border-bottom: 1px dotted; }
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-b, strong {
- font-weight: bold; }
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-dfn {
- font-style: italic; }
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-h1 {
- font-size: 2em;
- margin: 0.67em 0; }
-
-/**
- * Address styling not present in IE 8/9.
- */
-mark {
- background: #ff0;
- color: #000; }
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-small {
- font-size: 80%; }
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-sub, sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline; }
-
-sup {
- top: -0.5em; }
-
-sub {
- bottom: -0.25em; }
-
-/* Embedded content
- ========================================================================== */
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-img {
- border: 0; }
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-svg:not(:root) {
- overflow: hidden; }
-
-/* Grouping content
- ========================================================================== */
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-figure {
- margin: 1em 40px; }
-
-/**
- * Address differences between Firefox and other browsers.
- */
-hr {
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- height: 0; }
-
-/**
- * Contain overflow in all browsers.
- */
-pre {
- overflow: auto; }
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-code, kbd, pre, samp {
- font-family: monospace, monospace;
- font-size: 1em; }
-
-/* Forms
- ========================================================================== */
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-/**
- * 1. Correct color not being inherited.
- * Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-button, input, optgroup, select, textarea {
- color: inherit;
- /* 1 */
- font: inherit;
- /* 2 */
- margin: 0;
- /* 3 */ }
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-button {
- overflow: visible; }
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-button, select {
- text-transform: none; }
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- * and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- * `input` and others.
- */
-button, html input[type="button"], input[type="reset"], input[type="submit"] {
- -webkit-appearance: button;
- /* 2 */
- cursor: pointer;
- /* 3 */ }
-
-/**
- * Re-set default cursor for disabled elements.
- */
-button[disabled], html input[disabled] {
- cursor: default; }
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-button::-moz-focus-inner, input::-moz-focus-inner {
- border: 0;
- padding: 0; }
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-input {
- line-height: normal; }
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-input[type="checkbox"], input[type="radio"] {
- box-sizing: border-box;
- /* 1 */
- padding: 0;
- /* 2 */ }
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
- height: auto; }
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
- * (include `-moz` to future-proof).
- */
-input[type="search"] {
- -webkit-appearance: textfield;
- /* 1 */
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- /* 2 */
- box-sizing: content-box; }
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none; }
-
-/**
- * Define consistent border, margin, and padding.
- */
-fieldset {
- border: 1px solid #c0c0c0;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em; }
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-legend {
- border: 0;
- /* 1 */
- padding: 0;
- /* 2 */ }
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-textarea {
- overflow: auto; }
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-optgroup {
- font-weight: bold; }
-
-/* Tables
- ========================================================================== */
-/**
- * Remove most spacing between table cells.
- */
-table {
- border-collapse: collapse;
- border-spacing: 0; }
-
-td, th {
- padding: 0; }
-
-button, input[type="submit"] {
- -webkit-font-smoothing: antialiased;
- background-color: #477DCA;
- border-radius: 0.1875em;
- color: white;
- display: inline-block;
- font-size: 1em;
- font-weight: bold;
- line-height: 1;
- padding: 0.75em 1em;
- text-decoration: none; }
- button:hover, input[type="submit"]:hover {
- background-color: #2c5999;
- color: white; }
- button:disabled, input[type="submit"]:disabled {
- cursor: not-allowed;
- opacity: 0.5; }
-
-body {
- -webkit-font-smoothing: antialiased;
- background-color: white;
- color: #333;
- font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif;
- font-size: 1em;
- line-height: 1em; }
-
-h1, h2, h3, h4, h5, h6 {
- font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif;
- line-height: 1.25;
- margin: 0;
- text-rendering: optimizeLegibility; }
-
-h1 {
- font-size: 2.25em; }
-
-h2 {
- font-size: 2em; }
-
-h3 {
- font-size: 1.75em; }
-
-h4 {
- font-size: 1.5em; }
-
-h5 {
- font-size: 1.25em; }
-
-h6 {
- font-size: 1em; }
-
-p {
- margin: 0 0 0.75em; }
-
-a {
- -webkit-transition: color 0.1s linear;
- -moz-transition: color 0.1s linear;
- transition: color 0.1s linear;
- color: #0277bb;
- text-decoration: none; }
- a:hover {
- color: #01476f; }
- a:active, a:focus {
- color: #01476f;
- outline: none; }
-
-hr {
- border-bottom: 1px solid #DDD;
- border-left: none;
- border-right: none;
- border-top: none;
- margin: 1.5em 0; }
-
-img, picture {
- margin: 0;
- max-width: 100%; }
-
-blockquote {
- border-left: 2px solid #DDD;
- color: #595959;
- margin: 1.5em 0;
- padding-left: 0.75em; }
-
-cite {
- color: #737373;
- font-style: italic; }
- cite:before {
- content: "\2014 \00A0"; }
-
-fieldset {
- background: #f7f7f7;
- border: 1px solid #DDD;
- margin: 0 0 0.75em 0;
- padding: 1.5em; }
-
-input, label, select {
- display: block;
- font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
- font-size: 1em; }
-
-label {
- font-weight: bold;
- margin-bottom: 0.375em; }
- label.required:after {
- content: "*"; }
- label abbr {
- display: none; }
-
-textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-transition: border-color;
- -moz-transition: border-color;
- transition: border-color;
- background-color: white;
- border-radius: 3px;
- border: 1px solid #DDD;
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
- font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
- font-size: 1em;
- margin-bottom: 0.75em;
- padding: 0.5em 0.5em;
- width: 100%; }
- textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover {
- border-color: #c4c4c4; }
- textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
- border-color: #477DCA;
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(55, 112, 192, 0.7);
- outline: none; }
-
-textarea {
- resize: vertical; }
-
-input[type="search"] {
- -webkit-appearance: none;
- -moz-appearance: none;
- -ms-appearance: none;
- -o-appearance: none;
- appearance: none; }
-
-input[type="checkbox"], input[type="radio"] {
- display: inline;
- margin-right: 0.375em; }
-
-input[type="file"] {
- padding-bottom: 0.75em;
- width: 100%; }
-
-select {
- margin-bottom: 1.5em;
- max-width: 100%;
- width: auto; }
-
-table {
- border-collapse: collapse;
- margin: 0.75em 0;
- table-layout: fixed;
- width: 100%; }
-
-th {
- border-bottom: 1px solid #b7b7b7;
- font-weight: bold;
- padding: 0.75em 0;
- text-align: left; }
-
-td {
- border-bottom: 1px solid #DDD;
- padding: 0.75em 0; }
-
-tr, td, th {
- vertical-align: middle; }
-
-ul, ol {
- margin: 0;
- padding: 0;
- list-style-type: none; }
-
-dl {
- margin-bottom: 0.75em; }
- dl dt {
- font-weight: bold;
- margin-top: 0.75em; }
- dl dd {
- margin: 0; }
-
-button, input[type="submit"] {
- -webkit-appearance: none;
- -moz-appearance: none;
- -ms-appearance: none;
- -o-appearance: none;
- appearance: none;
- border: none;
- cursor: pointer;
- user-select: none;
- vertical-align: middle;
- white-space: nowrap; }
-
-/* Neat 1.7.0
- * http://neat.bourbon.io
- * Copyright 2012-2014 thoughtbot, inc.
- * MIT License */
-html {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box; }
-
-*, *:before, *:after {
- -webkit-box-sizing: inherit;
- -moz-box-sizing: inherit;
- box-sizing: inherit; }
-
-html {
- font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif;
- overflow-x: hidden; }
- html body {
- background-color: #f9f9f9;
- color: #212121;
- -webkit-font-smoothing: antialiased;
- -webkit-text-size-adjust: 100%;
- text-rendering: optimizeLegibility; }
-
-:focus {
- outline: none; }
-
-@media screen and (max-width: 1240px) {
- ul, ol {
- padding-left: 20px; } }
-
-h1 {
- font-size: 34px;
- font-weight: 400;
- line-height: 40px;
- margin-bottom: 30px; }
- @media screen and (max-width: 820px) {
- h1 {
- font-size: 24px;
- line-height: 32px;
- margin-bottom: 42px; } }
- @media screen and (max-width: 360px) {
- h1 {
- padding: 20px 16px 0 16px; } }
-
-h2 {
- font-size: 24px;
- font-weight: 400;
- line-height: 32px;
- margin-bottom: 30px;
- overflow: hidden;
- border-top: none;
- padding-top: 48px; }
- @media screen and (max-width: 820px) {
- h2 {
- border-top: 1px solid rgba(0, 0, 0, 0.12);
- font-size: 20px;
- line-height: 28px;
- margin-bottom: 0px;
- padding-bottom: 12px;
- padding-top: 16px; } }
- @media screen and (max-width: 360px) {
- h2 {
- margin-bottom: 0px;
- padding: 15px 16px; } }
-
-h3, h4, h5 {
- color: #212121;
- font-weight: 500;
- padding-top: 48px;
- margin-bottom: 30px; }
- @media screen and (max-width: 360px) {
- h3, h4, h5 {
- padding-left: 16px;
- padding-right: 16px; } }
-
-h3 {
- font-size: 20px;
- line-height: 24px; }
- @media screen and (max-width: 1240px) {
- h3 {
- font-size: 20px;
- line-height: 24px; } }
-
-h4, h5 {
- font-size: 13px;
- font-weight: 700;
- line-height: 24px; }
- @media screen and (max-width: 1240px) {
- h4, h5 {
- font-size: 14px; } }
-
-h1, h2, h3, h4, h5, h6 {
- clear: both; }
-
-ol, ul {
- margin-bottom: 20px;
- padding-left: 32px; }
-
-ul li {
- list-style-type: disc; }
- @media screen and (max-width: 1240px) {
- ul li {
- font-size: 13px; } }
-
-a {
- color: #0277bb; }
-
-p {
- margin-bottom: 20px; }
- p:last-child {
- margin-bottom: 0; }
- @media screen and (max-width: 1240px) {
- p {
- font-size: 14px; } }
-
-h3, h4, h5, h6 {
- font-size: inherit;
- line-height: inherit;
- margin-bottom: 20px; }
-
-video {
- display: block;
- height: auto;
- width: 100%; }
-
-pre {
- white-space: pre;
- font-family: 'Roboto Mono', 'Menlo', monospace; }
-
-code {
- font-family: 'Roboto Mono', 'Menlo', monospace; }
-
-pre, blockquote {
- background-color: #fff;
- padding: 16px 24px; }
-
-/* base styles */
-/* layout */
-.module-body, blockquote, pre {
- border: none;
- display: inline-block;
- overflow: hidden;
- margin-bottom: 30px;
- width: 760px;
- box-sizing: border-box; }
- @media screen and (max-width: 1240px) {
- .module-body, blockquote, pre {
- width: 560px; } }
- @media screen and (max-width: 820px) {
- .module-body, blockquote, pre {
- width: 360px;
- margin-bottom: 40px; } }
- @media screen and (max-width: 360px) {
- .module-body, blockquote, pre {
- width: 100%;
- padding-left: 16px;
- padding-right: 16px; } }
- .module-body h4, blockquote h4, pre h4 {
- margin-bottom: 0; }
-
-/* style */
-@media screen and (max-width: 1240px) {
- .module-body {
- font-size: 14px; } }
-
-/* layout */
-.figure-group {
- width: 1160px;
- margin-top: 16px;
- display: block; }
- .figure-group:after {
- content: "";
- display: table;
- clear: both; }
- .figure-group figure {
- width: 1160px;
- float: left;
- margin: 0;
- margin-bottom: 24px; }
- @media screen and (max-width: 1240px) {
- .figure-group figure {
- width: 760px; } }
- @media screen and (max-width: 820px) {
- .figure-group figure {
- margin-bottom: 40px; } }
- .figure-group figure figcaption {
- color: #757575;
- font-size: 13px;
- line-height: 24px;
- width: 560px;
- box-sizing: border-box; }
- @media screen and (max-width: 820px) {
- .figure-group figure figcaption {
- width: 360px; } }
- @media screen and (max-width: 360px) {
- .figure-group figure figcaption {
- width: 100%; } }
- .figure-group figure img {
- display: block;
- margin-bottom: 0;
- width: 100%; }
- .figure-group figure:last-child {
- margin-bottom: 0; }
- @media screen and (max-width: 820px) {
- .figure-group figure:last-child {
- margin-bottom: 24px; } }
- .figure-group figure figure:last-of-type figcaption {
- margin-bottom: 0; }
- @media screen and (max-width: 1240px) {
- .figure-group {
- width: 760px; } }
-
-@media screen and (max-width: 1240px) {
- .module_2_col {
- margin-bottom: 40px; } }
-@media screen and (max-width: 820px) {
- .module_2_col {
- margin-bottom: 40px; } }
-.module_2_col .module-body {
- width: 360px;
- float: left; }
- @media screen and (max-width: 1240px) {
- .module_2_col .module-body {
- padding-right: 0;
- width: 560px; } }
- @media screen and (max-width: 820px) {
- .module_2_col .module-body {
- padding-right: 0;
- width: 360px; } }
- @media screen and (max-width: 360px) {
- .module_2_col .module-body {
- padding-right: 0;
- width: 100%; } }
-.module_2_col .figure-group {
- float: right;
- margin-left: 40px;
- width: 760px;
- box-sizing: border-box; }
- @media screen and (max-width: 1240px) {
- .module_2_col .figure-group {
- margin-left: 0; } }
- @media screen and (max-width: 820px) {
- .module_2_col .figure-group {
- width: 360px; } }
- .module_2_col .figure-group figure {
- width: 760px; }
- @media screen and (max-width: 820px) {
- .module_2_col .figure-group figure {
- width: 360px; } }
- .module_2_col .figure-group figure img {
- margin-bottom: 10px; }
- .module_2_col .figure-group figure figcaption {
- width: 560px;
- margin-bottom: 50px; }
- @media screen and (max-width: 820px) {
- .module_2_col .figure-group figure figcaption {
- margin-bottom: 60px;
- width: 360px; } }
- @media screen and (max-width: 360px) {
- .module_2_col .figure-group figure figcaption {
- width: 100%; } }
-
-.module_3_col .figure-group {
- width: 1160px; }
- .module_3_col .figure-group figure {
- width: 360px;
- margin-left: 40px; }
- .module_3_col .figure-group figure img {
- margin-bottom: 10px; }
- .module_3_col .figure-group figure:first-child {
- margin-left: 0; }
- @media screen and (max-width: 1240px) {
- .module_3_col .figure-group figure:last-child figcaption {
- padding-bottom: 0; } }
- .module_3_col .figure-group figure:nth-of-type(3n+1) {
- clear: left;
- margin-left: 0; }
- .module_3_col .figure-group figure figcaption {
- padding-top: 0;
- width: 360px; }
- @media screen and (max-width: 360px) {
- .module_3_col .figure-group figure figcaption {
- width: 100%; } }
- @media screen and (max-width: 1240px) {
- .module_3_col .figure-group figure:last-child {
- margin-left: 0; }
- .module_3_col .figure-group figure:nth-of-type(3n+1) {
- clear: none;
- margin-left: 40px; }
- .module_3_col .figure-group figure:nth-of-type(2n+1) {
- clear: left;
- margin-left: 0; }
- .module_3_col .figure-group figure:nth-of-type(2n) {
- margin-left: 40px; } }
- @media screen and (max-width: 820px) {
- .module_3_col .figure-group figure {
- margin-left: 0; }
- .module_3_col .figure-group figure:nth-of-type(3n+1) {
- margin-left: 0; }
- .module_3_col .figure-group figure:nth-of-type(2n+1) {
- margin-left: 0; }
- .module_3_col .figure-group figure:nth-of-type(2n) {
- margin-left: 0; } }
- @media screen and (max-width: 1240px) {
- .module_3_col .figure-group {
- width: 760px; } }
-
-.module_3_col_text_image_image .module-body {
- padding-right: 38px; }
- @media screen and (max-width: 1240px) {
- .module_3_col_text_image_image .module-body {
- padding-right: 0;
- width: 560px; } }
- @media screen and (max-width: 820px) {
- .module_3_col_text_image_image .module-body {
- padding-right: 0;
- width: 360px; } }
- @media screen and (max-width: 360px) {
- .module_3_col_text_image_image .module-body {
- padding-right: 16px;
- width: 100%; } }
-.module_3_col_text_image_image div.figure-group {
- width: 760px;
- margin-left: 40px; }
- @media screen and (max-width: 1240px) {
- .module_3_col_text_image_image div.figure-group {
- margin-left: 0; } }
- .module_3_col_text_image_image div.figure-group figure {
- margin-left: 40px;
- width: 360px; }
- .module_3_col_text_image_image div.figure-group figure:nth-child(2n+1) {
- clear: left;
- margin-left: 0; }
- .module_3_col_text_image_image div.figure-group figure figcaption {
- width: 360px; }
- @media screen and (max-width: 360px) {
- .module_3_col_text_image_image div.figure-group figure figcaption {
- width: 100%; } }
- @media screen and (max-width: 820px) {
- .module_3_col_text_image_image div.figure-group figure {
- margin-left: 0; } }
-
-.module_3_col_text_image_image .figure-group {
- float: right; }
-
-.article-list .modulettes {
- margin-top: -20px; }
-
-.article-list section .modulettes {
- margin-top: 0;
- margin-bottom: 20px; }
-
-h4.related {
- margin-top: 0px;
- margin-bottom: 32px;
- color: #757575;
- line-height: 24px;
- font-size: 13px;
- font-weight: 500; }
-
-/*
-.module_1_col,
-.module_2_col,
-*/
-.module_3_col h4.related, .module_3_col_text_image_image h4.related {
- margin-top: 48px; }
-
-.modulettes {
- margin-bottom: 40px;
- margin-top: 40px;
- width: 360px; }
- .modulettes .modulette {
- display: block;
- margin-bottom: 24px; }
- .modulettes .modulette .icon {
- float: left;
- height: 24px;
- margin: 0;
- width: auto; }
- .modulettes .modulette .download-icon {
- opacity: 0.54; }
- .modulettes .modulette .callout-icon {
- opacity: 0.54; }
- .modulettes .modulette .info {
- font-size: 13px;
- line-height: 24px;
- margin-left: 40px;
- padding-top: 1px; }
- @media screen and (max-width: 1240px) {
- .modulettes .modulette .info {
- font-size: 14px; } }
- .modulettes .modulette .info .subtitle {
- color: #757575; }
- .modulettes .modulette .info .title {
- font-weight: 700; }
- .modulettes .modulette.default, .modulettes .modulette.android, .modulettes .modulette.polymer {
- background-color: #eee;
- border: 1px solid #eee;
- position: relative; }
- .modulettes .modulette.default .icon, .modulettes .modulette.android .icon, .modulettes .modulette.polymer .icon {
- position: absolute;
- top: 50%;
- margin-top: -12px;
- left: 16px; }
- .modulettes .modulette.default .info, .modulettes .modulette.android .info, .modulettes .modulette.polymer .info {
- margin-left: 56px;
- background-color: #fff;
- padding: 24px; }
- .modulettes .modulette.default .callout-icon {
- opacity: 0.26; }
- .modulettes .modulette.android .callout-icon, .modulettes .modulette.polymer .callout-icon {
- opacity: 1; }
- @media screen and (max-width: 360px) {
- .modulettes {
- width: 100%; } }
-
-table.tabular-table td {
- vertical-align: top;
- font-size: 13px;
- border: none;
- padding-right: 3%; }
-
-table.tabular-table td p {
- margin-bottom: 16px !important; }
-
-table.tabular-table {
- margin-bottom: 1em; }
-
-/* .module_1_col, */
-/* .module_2_col, */
-.module_3_col .figure-group, .module_3_col_text_image_image .figure-group {
- float: left;
- display: block; }
- .module_3_col .figure-group:after, .module_3_col_text_image_image .figure-group:after {
- content: "";
- display: table;
- clear: both; }
- .module_3_col .figure-group figure, .module_3_col_text_image_image .figure-group figure {
- float: left;
- margin: 0;
- margin-bottom: 24px; }
- .module_3_col .figure-group figure img, .module_3_col_text_image_image .figure-group figure img {
- display: block;
- margin-bottom: 0;
- width: 100%; }
- @media screen and (max-width: 820px) {
- .module_3_col .figure-group figure, .module_3_col_text_image_image .figure-group figure {
- margin-bottom: 40px; } }
- .module_3_col .figure-group figure:last-child, .module_3_col_text_image_image .figure-group figure:last-child {
- margin-bottom: 0; }
- @media screen and (max-width: 820px) {
- .module_3_col .figure-group figure:last-child, .module_3_col_text_image_image .figure-group figure:last-child {
- margin-bottom: 24px; } }
- .module_3_col .figure-group figure:last-of-type figcaption, .module_3_col_text_image_image .figure-group figure:last-of-type figcaption {
- margin-bottom: 0; }
- .module_3_col .figure-group figcaption, .module_3_col_text_image_image .figure-group figcaption {
- color: #757575;
- font-size: 13px;
- line-height: 24px;
- box-sizing: border-box; }
- @media screen and (max-width: 820px) {
- .module_3_col .figure-group figcaption, .module_3_col_text_image_image .figure-group figcaption {
- font-size: 14px;
- margin-bottom: 10px; }
- .module_3_col .figure-group figcaption .caption-title, .module_3_col_text_image_image .figure-group figcaption .caption-title {
- font-size: 13px;
- font-weight: 500;
- line-height: 24px; }
- @media screen and (max-width: 1240px) {
- .module_3_col .figure-group figcaption .caption-title, .module_3_col_text_image_image .figure-group figcaption .caption-title {
- font-size: 14px;
- line-height: 24px; } }
- @media screen and (max-width: 820px) {
- .module_3_col .figure-group figcaption .caption-title, .module_3_col_text_image_image .figure-group figcaption .caption-title {
- font-size: 14px; } }
- @media screen and (max-width: 820px) {
- .module_3_col .figure-group figcaption, .module_3_col_text_image_image .figure-group figcaption {
- width: 760px; } }
- @media screen and (max-width: 360px) {
- .module_3_col .figure-group figcaption, .module_3_col_text_image_image .figure-group figcaption {
- padding-left: 16px;
- padding-right: 16px;
- width: 100%; } } }
- @media screen and (max-width: 360px) {
- .module_3_col .figure-group figcaption, .module_3_col_text_image_image .figure-group figcaption {
- margin-bottom: 0;
- padding: 0 16px; } }
- .module_3_col .figure-group figcaption .caption-title, .module_3_col_text_image_image .figure-group figcaption .caption-title {
- font-weight: 500;
- margin-bottom: 20px; }
- @media screen and (max-width: 820px) {
- .module_3_col .figure-group figcaption .caption-title, .module_3_col_text_image_image .figure-group figcaption .caption-title {
- font-size: 14px; } }
- .module_3_col .figure-group figcaption .caption-title:last-child, .module_3_col_text_image_image .figure-group figcaption .caption-title:last-child {
- margin-bottom: 0; }
- .module_3_col .figure-group figcaption h3, .module_3_col_text_image_image .figure-group figcaption h3 {
- margin-top: 40px; }
- .module_3_col .figure-group figcaption p, .module_3_col_text_image_image .figure-group figcaption p {
- margin-bottom: 20px; }
- .module_3_col .figure-group figcaption p:last-child, .module_3_col_text_image_image .figure-group figcaption p:last-child {
- margin-bottom: 0; }
-
-@media screen and (max-width: 820px) {
- .figure-group figure {
- width: 360px; } }
-@media screen and (max-width: 360px) {
- .figure-group figure {
- width: 100%; } }
-@media screen and (max-width: 820px) {
- .figure-group {
- width: 360px; } }
-@media screen and (max-width: 360px) {
- .figure-group {
- width: 100%; } }
-
-/*
- * In magazine terminology, this is the Intro, Deck, Standfirst or Kicker.
- *
- * This is the content paragraph right after a headline.
- */
-.page-intro {
- font-size: 20px;
- line-height: 32px;
- margin-bottom: 0;
- padding: 0 38px 40px 0;
- width: 960px; }
- @media screen and (max-width: 1240px) {
- .page-intro {
- width: 760px; } }
- @media screen and (max-width: 820px) {
- .page-intro {
- font-size: 20px;
- padding-right: 0;
- padding-bottom: 50px;
- width: 360px; } }
- @media screen and (max-width: 360px) {
- .page-intro {
- padding-right: 16px;
- padding-left: 16px;
- width: 100%; } }
- .page-intro p, .page-intro ul {
- margin: 0;
- margin-bottom: 32px; }
- .page-intro p:last-child, .page-intro ul:last-child {
- margin-bottom: 0; }
- .page-intro figure {
- margin: 0; }
- .page-intro figure img {
- margin-bottom: 10px; }
- .page-intro figure ol {
- list-style-position: inside; }
- .page-intro figure figcaption {
- color: #757575;
- font-size: 13px;
- line-height: 24px;
- margin-bottom: 50px;
- box-sizing: border-box; }
- @media screen and (max-width: 820px) {
- .page-intro figure figcaption {
- margin-bottom: 60px; }
- .page-intro figure figcaption .caption-title {
- font-size: 13px;
- font-weight: 500;
- line-height: 24px; }
- @media screen and (max-width: 1240px) {
- .page-intro figure figcaption .caption-title {
- font-size: 14px;
- line-height: 24px; } }
- @media screen and (max-width: 820px) {
- .page-intro figure figcaption {
- width: 760px; } }
- @media screen and (max-width: 360px) {
- .page-intro figure figcaption {
- padding-left: 16px;
- padding-right: 16px;
- width: 100%; } } }
- @media screen and (max-width: 820px) {
- .page-intro figure figcaption {
- margin-bottom: 0; } }
- .page-intro figure figcaption .caption-title {
- font-weight: 500;
- color: #212121; }
-
-body header {
- background-color: #4285F4; }
-body > nav button:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-body > nav button:active {
- outline: 0px; }
-body h1, body h2 {
- color: #4285F4; }
-body .toc {
- border-left-color: #C6DAFC; }
-body a {
- color: #4285F4; }
-body .footer-text {
- color: #fff; }
- body .footer-text span {
- color: rgba(255, 255, 255, 0.55); }
- body .footer-text:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-body.footer-L {
- background-color: #4285F4; }
-body.footer-R {
- background-color: #4285F4; }
-body .icon {
- fill: #4285F4; }
-body #side-nav nav a.nav_selected {
- color: #4285F4; }
-
-.footer-L, .footer-R {
- background-color: #03a9f4; }
-
-.page-black header {
- background-color: #212121; }
-.page-black > nav button:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-black > nav button:active {
- outline: 0px; }
-.page-black h1, .page-black h2 {
- color: #212121; }
-.page-black .toc {
- border-left-color: #f5f5f5; }
-.page-black a {
- color: #212121; }
-.page-black .footer-text {
- color: #fff; }
- .page-black .footer-text span {
- color: rgba(255, 255, 255, 0.55); }
- .page-black .footer-text:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-black.footer-L {
- background-color: #212121; }
-.page-black.footer-R {
- background-color: #212121; }
-.page-black .icon {
- fill: #212121; }
-.page-black #side-nav nav a.nav_selected {
- color: #212121; }
-
-.page-cyan header {
- background-color: #00bcd4; }
-.page-cyan > nav button:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-cyan > nav button:active {
- outline: 0px; }
-.page-cyan h1, .page-cyan h2 {
- color: #00bcd4; }
-.page-cyan .toc {
- border-left-color: #b2ebf2; }
-.page-cyan a {
- color: #00bcd4; }
-.page-cyan .footer-text {
- color: #fff; }
- .page-cyan .footer-text span {
- color: rgba(255, 255, 255, 0.55); }
- .page-cyan .footer-text:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-cyan.footer-L {
- background-color: #00bcd4; }
-.page-cyan.footer-R {
- background-color: #00bcd4; }
-.page-cyan .icon {
- fill: #00bcd4; }
-.page-cyan #side-nav nav a.nav_selected {
- color: #00bcd4; }
-
-.page-purple header {
- background-color: #9c27b0; }
-.page-purple > nav button:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-purple > nav button:active {
- outline: 0px; }
-.page-purple h1, .page-purple h2 {
- color: #9c27b0; }
-.page-purple .toc {
- border-left-color: #e1bee7; }
-.page-purple a {
- color: #9c27b0; }
-.page-purple .footer-text {
- color: #fff; }
- .page-purple .footer-text span {
- color: rgba(255, 255, 255, 0.55); }
- .page-purple .footer-text:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-purple.footer-L {
- background-color: #9c27b0; }
-.page-purple.footer-R {
- background-color: #9c27b0; }
-.page-purple .icon {
- fill: #9c27b0; }
-.page-purple #side-nav nav a.nav_selected {
- color: #9c27b0; }
-
-.page-teal header {
- background-color: #009688; }
-.page-teal > nav button:focus {
- outline: 1px solid rgba(0, 0, 0, 0.7); }
-.page-teal > nav button:active {
- outline: 0px; }
-.page-teal h1, .page-teal h2 {
- color: #009688; }
-.page-teal .toc {
- border-left-color: #b2dfdb; }
-.page-teal a {
- color: #009688; }
-.page-teal .footer-text {
- color: #fff; }
- .page-teal .footer-text span {
- color: rgba(0, 0, 0, 0.7); }
- .page-teal .footer-text:focus {
- outline: 1px solid rgba(0, 0, 0, 0.7); }
-.page-teal.footer-L {
- background-color: #009688; }
-.page-teal.footer-R {
- background-color: #009688; }
-.page-teal .icon {
- fill: #009688; }
-.page-teal #side-nav nav a.nav_selected {
- color: #009688; }
-
-.page-pink header {
- background-color: #c2185b; }
-.page-pink > nav button:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-pink > nav button:active {
- outline: 0px; }
-.page-pink h1, .page-pink h2 {
- color: #c2185b; }
-.page-pink .toc {
- border-left-color: #f8bbd0; }
-.page-pink a {
- color: #c2185b; }
-.page-pink .footer-text {
- color: #fff; }
- .page-pink .footer-text span {
- color: rgba(255, 255, 255, 0.55); }
- .page-pink .footer-text:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-pink.footer-L {
- background-color: #c2185b; }
-.page-pink.footer-R {
- background-color: #c2185b; }
-.page-pink .icon {
- fill: #c2185b; }
-.page-pink #side-nav nav a.nav_selected {
- color: #c2185b; }
-
-.page-indigo header {
- background-color: #3f51b5; }
-.page-indigo > nav button:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-indigo > nav button:active {
- outline: 0px; }
-.page-indigo h1, .page-indigo h2 {
- color: #3f51b5; }
-.page-indigo .toc {
- border-left-color: #c5cae9; }
-.page-indigo a {
- color: #3f51b5; }
-.page-indigo .footer-text {
- color: #fff; }
- .page-indigo .footer-text span {
- color: rgba(255, 255, 255, 0.55); }
- .page-indigo .footer-text:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-indigo.footer-L {
- background-color: #3f51b5; }
-.page-indigo.footer-R {
- background-color: #3f51b5; }
-.page-indigo .icon {
- fill: #3f51b5; }
-.page-indigo #side-nav nav a.nav_selected {
- color: #3f51b5; }
-
-.page-orange header {
- background-color: #ff9800; }
-.page-orange > nav button:focus {
- outline: 1px solid rgba(0, 0, 0, 0.7); }
-.page-orange > nav button:active {
- outline: 0px; }
-.page-orange h1, .page-orange h2 {
- color: #ff9800; }
-.page-orange .toc {
- border-left-color: #ffe0b2; }
-.page-orange a {
- color: #ff9800; }
-.page-orange .footer-text {
- color: #fff; }
- .page-orange .footer-text span {
- color: rgba(0, 0, 0, 0.7); }
- .page-orange .footer-text:focus {
- outline: 1px solid rgba(0, 0, 0, 0.7); }
-.page-orange.footer-L {
- background-color: #ff9800; }
-.page-orange.footer-R {
- background-color: #ff9800; }
-.page-orange .icon {
- fill: #ff9800; }
-.page-orange #side-nav nav a.nav_selected {
- color: #ff9800; }
-
-.page-blue-grey header {
- background-color: #455a64; }
-.page-blue-grey > nav button:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-blue-grey > nav button:active {
- outline: 0px; }
-.page-blue-grey h1, .page-blue-grey h2 {
- color: #455a64; }
-.page-blue-grey .toc {
- border-left-color: #cfd8dc; }
-.page-blue-grey a {
- color: #455a64; }
-.page-blue-grey .footer-text {
- color: #fff; }
- .page-blue-grey .footer-text span {
- color: rgba(255, 255, 255, 0.55); }
- .page-blue-grey .footer-text:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-blue-grey.footer-L {
- background-color: #455a64; }
-.page-blue-grey.footer-R {
- background-color: #455a64; }
-.page-blue-grey .icon {
- fill: #455a64; }
-.page-blue-grey #side-nav nav a.nav_selected {
- color: #455a64; }
-
-.page-light-blue header {
- background-color: #03a9f4; }
-.page-light-blue > nav button:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-light-blue > nav button:active {
- outline: 0px; }
-.page-light-blue h1, .page-light-blue h2 {
- color: #03a9f4; }
-.page-light-blue .toc {
- border-left-color: #b3e5fc; }
-.page-light-blue a {
- color: #03a9f4; }
-.page-light-blue .footer-text {
- color: #fff; }
- .page-light-blue .footer-text span {
- color: rgba(255, 255, 255, 0.55); }
- .page-light-blue .footer-text:focus {
- outline: 1px solid rgba(255, 255, 255, 0.55); }
-.page-light-blue.footer-L {
- background-color: #03a9f4; }
-.page-light-blue.footer-R {
- background-color: #03a9f4; }
-.page-light-blue .icon {
- fill: #03a9f4; }
-.page-light-blue #side-nav nav a.nav_selected {
- color: #03a9f4; }
-
-.qp-ui-peekaboo-placeholder {
- display: none;
- visibility: hidden; }
- .qp-ui-peekaboo-placeholder.qp-ui-peekaboo-active {
- display: block; }
-
-.noninitial-chapter {
- padding-top: 64px; }
- @media screen and (max-width: 820px) {
- .noninitial-chapter {
- padding-top: 56px; } }
-
-header {
- height: 256px;
- padding: 115px 16px 0; }
- @media screen and (max-width: 820px) {
- header {
- height: 128px;
- padding-top: 48px; } }
- @media screen and (max-width: 820px) {
- header {
- height: 128px;
- padding-top: 64px; } }
- .noninitial-chapter header, header.qp-ui-peekaboo.qp-ui-peekaboo-active {
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
- left: 0;
- right: 0;
- top: -192px;
- z-index: 1;
- position: fixed; }
- @media screen and (max-width: 820px) {
- .noninitial-chapter header, header.qp-ui-peekaboo.qp-ui-peekaboo-active {
- top: -72px; } }
-
-.header-wrapper {
- -webkit-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1);
- -moz-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1);
- transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); }
- @media screen and (max-width: 1479px) {
- .header-wrapper {
- padding-left: 0; } }
- .header-wrapper .header-title {
- color: #fff;
- font-size: 56px;
- font-weight: 400;
- line-height: 1.5;
- margin: 0 auto;
- overflow: hidden;
- width: 1160px;
- white-space: nowrap; }
- @media screen and (max-width: 1240px) {
- .header-wrapper .header-title {
- width: 760px; } }
- @media screen and (max-width: 820px) {
- .header-wrapper .header-title {
- font-size: 34px;
- padding-right: 32px;
- padding-left: 32px;
- width: auto; } }
- @media screen and (max-width: 360px) {
- .header-wrapper .header-title {
- font-size: 24px;
- padding-right: 16px;
- padding-left: 16px; } }
- .header-wrapper .header-title span {
- float: left; }
- .header-wrapper .chapter-title {
- display: none; }
- .noninitial-chapter .header-wrapper, .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active {
- height: 64px;
- left: 72px;
- right: 72px;
- top: 0;
- z-index: 2;
- position: fixed; }
- @media screen and (max-width: 820px) {
- .noninitial-chapter .header-wrapper, .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active {
- height: 56px;
- left: 56px;
- right: 56px; } }
- .noninitial-chapter .header-wrapper .header-title, .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active .header-title {
- font-size: 24px;
- line-height: 64px;
- width: 100%; }
- @media screen and (max-width: 820px) {
- .noninitial-chapter .header-wrapper .header-title, .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active .header-title {
- font-size: 20px;
- line-height: 56px; } }
- @media screen and (max-width: 820px) {
- .noninitial-chapter .header-wrapper .section-title, .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active .section-title {
- display: none; } }
- .header-wrapper #header-button-bar {
- position: absolute;
- height: 56px;
- width: 100%;
- top: 0;
- left: 0; }
-
-footer {
- clear: left;
- height: 96px;
- padding-left: 240px;
- position: relative;
- width: 100%;
- z-index: 0;
- -webkit-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1);
- -moz-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1);
- transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); }
- footer .footer-L {
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- width: 50.1%;
- z-index: -1;
- -webkit-transform: translateX(120px);
- -moz-transform: translateX(120px);
- -ms-transform: translateX(120px);
- -o-transform: translateX(120px);
- transform: translateX(120px);
- -webkit-transition: -webkit-transform 0.2s cubic-bezier(.4, 0, .2, 1);
- -moz-transition: -moz-transform 0.2s cubic-bezier(.4, 0, .2, 1);
- transition: transform 0.2s cubic-bezier(.4, 0, .2, 1); }
- @media screen and (max-width: 1479px) {
- footer .footer-L {
- -webkit-transform: translateX(0px);
- -moz-transform: translateX(0px);
- -ms-transform: translateX(0px);
- -o-transform: translateX(0px);
- transform: translateX(0px); } }
- @media screen and (max-width: 820px) {
- footer .footer-L {
- height: 96px;
- width: 56px;
- z-index: 1; } }
- footer .footer-R {
- float: left;
- height: 100%;
- position: absolute;
- right: 0;
- top: 0;
- width: 50%;
- z-index: -1;
- -webkit-transform: translateX(120px);
- -moz-transform: translateX(120px);
- -ms-transform: translateX(120px);
- -o-transform: translateX(120px);
- transform: translateX(120px);
- -webkit-transition: -webkit-transform 0.2s cubic-bezier(.4, 0, .2, 1);
- -moz-transition: -moz-transform 0.2s cubic-bezier(.4, 0, .2, 1);
- transition: transform 0.2s cubic-bezier(.4, 0, .2, 1); }
- @media screen and (max-width: 1479px) {
- footer .footer-R {
- -webkit-transform: translateX(0px);
- -moz-transform: translateX(0px);
- -ms-transform: translateX(0px);
- -o-transform: translateX(0px);
- transform: translateX(0px); } }
- @media screen and (max-width: 820px) {
- footer .footer-R {
- height: 96px;
- width: 100%;
- z-index: 0; } }
- footer .footer-grid {
- height: 100%;
- margin: auto;
- width: 1160px;
- z-index: 20; }
- footer .footer-grid .footer-grid-L {
- height: 100%;
- float: left;
- width: 50%; }
- @media screen and (max-width: 820px) {
- footer .footer-grid .footer-grid-L {
- z-index: 1; } }
- footer .footer-grid .footer-grid-L .footer-text {
- display: inline-block;
- font-size: 20px;
- font-weight: 500;
- -webkit-font-smoothing: antialiased;
- height: 100%;
- line-height: 24px;
- padding-top: 24px;
- width: 100%; }
- footer .footer-grid .footer-grid-L .footer-text img {
- float: left;
- margin-right: 10px;
- padding-top: 23px;
- width: 24px; }
- @media screen and (max-width: 820px) {
- footer .footer-grid .footer-grid-L .footer-text img {
- float: left;
- margin-right: 10px;
- width: 24px; } }
- footer .footer-grid .footer-grid-L .footer-text span {
- font-size: 15px;
- line-height: 18px;
- margin-bottom: 1px; }
- @media screen and (max-width: 820px) {
- footer .footer-grid .footer-grid-L .footer-text span {
- display: none; } }
- @media screen and (max-width: 820px) {
- footer .footer-grid .footer-grid-L .footer-text div {
- display: none; } }
- @media screen and (max-width: 820px) {
- footer .footer-grid .footer-grid-L {
- left: 16px;
- position: absolute; } }
- footer .footer-grid .footer-grid-R {
- height: 100%;
- float: right;
- text-align: right;
- width: 50%; }
- footer .footer-grid .footer-grid-R .footer-text {
- display: inline-block;
- font-size: 20px;
- font-weight: 500;
- -webkit-font-smoothing: antialiased;
- height: 100%;
- line-height: 24px;
- padding-top: 24px;
- width: 100%; }
- footer .footer-grid .footer-grid-R .footer-text img {
- float: right;
- margin-left: 10px;
- padding-top: 23px;
- width: 24px; }
- footer .footer-grid .footer-grid-R .footer-text span {
- font-size: 15px;
- line-height: 18px;
- margin-bottom: 1px; }
- @media screen and (max-width: 820px) {
- footer .footer-grid .footer-grid-R {
- position: absolute;
- right: 10px;
- width: 75%; } }
- @media screen and (max-width: 1479px) {
- footer .footer-grid {
- width: 1160px; } }
- @media screen and (max-width: 1240px) {
- footer .footer-grid {
- width: 760px; } }
- @media screen and (max-width: 820px) {
- footer .footer-grid {
- position: relative;
- width: 100%; } }
- @media screen and (max-width: 360px) {
- footer .footer-grid {
- padding-right: 10px;
- width: 100%; } }
- @media screen and (max-width: 1479px) {
- footer {
- padding-left: 0;
- z-index: 0; } }
- @media screen and (max-width: 820px) {
- footer {
- height: 92px; } }
- @media screen and (max-width: 360px) {
- footer {
- height: 80px; } }
-
-#side-nav {
- border-right: 1px solid rgba(0, 0, 0, 0.14);
- bottom: 0;
- background: #fff;
- color: #333;
- display: block;
- font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif;
- left: 0;
- position: fixed;
- top: 0;
- width: 240px;
- z-index: 4;
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -ms-transform-style: preserve-3d;
- -o-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transition-delay: 0.1s;
- -moz-transition-delay: 0.1s;
- transition-delay: 0.1s;
- -webkit-transition-duration: 0.2s;
- -moz-transition-duration: 0.2s;
- transition-duration: 0.2s;
- -webkit-transition-property: -webkit-transform;
- -moz-transition-property: -moz-transform;
- transition-property: transform;
- -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
- -moz-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
- transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
- #side-nav nav {
- font-size: 13px;
- padding: 12px 0 10px 0;
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0); }
- #side-nav nav span {
- cursor: pointer;
- display: inline-block;
- width: 100%; }
- #side-nav nav a {
- border-left: 2px solid transparent;
- color: #333;
- display: block;
- font-weight: 400;
- letter-spacing: 0.1px;
- padding: 10px 24px 10px 46px;
- white-space: nowrap; }
- html.touch #side-nav nav a {
- padding-top: 18px;
- padding-bottom: 17px; }
- #side-nav nav dl {
- margin-top: 0; }
- #side-nav nav dl dt {
- border-left: 2px solid transparent;
- color: #333;
- font-weight: 700;
- margin-top: 0;
- padding: 15px 0 15px 22px; }
- html.touch #side-nav nav dl dt {
- padding-top: 18px;
- padding-bottom: 17px; }
- #side-nav nav dl dd {
- color: #333; }
- #side-nav nav dl dd .nav_selected {
- font-weight: 500;
- letter-spacing: 0.1px; }
- #side-nav nav dt:focus, #side-nav nav a:focus {
- background-color: #eee;
- outline: 0; }
- #side-nav .google-only {
- display: none;
- margin-left: 4px; }
- #side-nav .google-only .desc {
- font-size: 10px;
- color: rgba(0, 0, 0, 0.45); }
- #side-nav #logo {
- border-bottom: 1px solid #e0e0e0;
- display: block;
- height: 64px;
- margin: auto;
- padding: 12px 24px 10px 24px;
- position: relative; }
- @media screen and (max-width: 820px) {
- #side-nav #logo {
- height: 56px; } }
- #side-nav #logo img {
- height: 40px;
- width: 90px; }
- @media screen and (max-width: 820px) {
- #side-nav #logo img {
- height: 35px;
- width: 78.75px; } }
- @media screen and (max-width: 1479px) {
- #side-nav {
- visibility: hidden;
- -webkit-transform: translateX(-241px);
- -moz-transform: translateX(-241px);
- -ms-transform: translateX(-241px);
- -o-transform: translateX(-241px);
- transform: translateX(-241px); } }
- #side-nav.qp-ui-side-nav-drawer-visible {
- visibility: visible;
- -webkit-transform: translateX(0);
- -moz-transform: translateX(0);
- -ms-transform: translateX(0);
- -o-transform: translateX(0);
- transform: translateX(0); }
-
-.side-nav-wrapper {
- min-height: 100%;
- padding-bottom: 96px;
- position: relative; }
- @media screen and (max-width: 820px) {
- .side-nav-wrapper {
- padding-bottom: 80px; } }
- .side-nav-wrapper .legal {
- border-top: 1px solid #e0e0e0;
- bottom: 0;
- color: #212121;
- font-size: 13px;
- height: 96px;
- line-height: 24px;
- padding: 24px;
- position: absolute;
- width: 100%; }
- @media screen and (max-width: 820px) {
- .side-nav-wrapper .legal {
- height: 80px;
- padding: 16px 24px; } }
- .side-nav-wrapper .copyright {
- margin: 0; }
-
-/*
- * Overall container for the page content, after the header and before the footer.
- */
-#page-container {
- background: #f9f9f9;
- float: left;
- min-height: 100%;
- padding-bottom: 100px;
- width: 100%;
- box-sizing: border-box;
- color: #212121;
- font-size: 13px;
- -webkit-font-smoothing: antialiased;
- letter-spacing: .1px;
- line-height: 24px;
- -webkit-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1);
- -moz-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1);
- transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); }
- @media screen and (max-width: 1479px) {
- #page-container {
- padding-left: 0; } }
- @media screen and (max-width: 820px) {
- #page-container {
- padding-bottom: 0; } }
- #page-container #page-inner-container {
- margin: auto;
- width: 1160px;
- *zoom: 1;
- padding-top: 80px;
- font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif;
- -webkit-font-smoothing: antialiased; }
- #page-container #page-inner-container:before {
- content: " ";
- display: table; }
- #page-container #page-inner-container:after {
- clear: both;
- content: " ";
- display: table; }
- #page-container #page-inner-container > p {
- width: 760px; }
- @media screen and (max-width: 820px) {
- #page-container #page-inner-container > p {
- width: auto; } }
- @media screen and (max-width: 1240px) {
- #page-container #page-inner-container {
- width: 760px; } }
- @media screen and (max-width: 820px) {
- #page-container #page-inner-container {
- padding-right: 32px;
- padding-left: 32px;
- width: auto;
- font-size: 20px; } }
- @media screen and (max-width: 360px) {
- #page-container #page-inner-container {
- padding-top: 40px;
- padding-right: 16px;
- padding-left: 16px; } }
-
-.preview-bar {
- background: #eee;
- padding-top: 16px;
- padding-bottom: 16px;
- padding-left: 256px;
- width: 100%;
- -webkit-transition-property: padding-left;
- -moz-transition-property: padding-left;
- transition-property: padding-left;
- -webkit-transition-duration: 0.2s;
- -moz-transition-duration: 0.2s;
- transition-duration: 0.2s;
- -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
- -moz-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
- transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
- @media screen and (max-width: 1479px) {
- .preview-bar {
- padding-left: 0; } }
- .preview-bar .preview-wrapper {
- margin: auto;
- width: 1160px; }
- @media screen and (max-width: 1240px) {
- .preview-bar .preview-wrapper {
- width: 760px; } }
- @media screen and (max-width: 820px) {
- .preview-bar .preview-wrapper {
- width: 360px;
- font-size: 34px; } }
- .preview-bar span {
- color: #212121;
- font-size: 13px;
- font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif;
- line-height: 16px; }
- @media screen and (max-width: 820px) {
- .preview-bar span {
- font-size: 13px; } }
-
-.toc {
- border-left: 5px solid;
- padding-left: 20px; }
- .toc h1 {
- font-size: 15px;
- line-height: 16px;
- padding-bottom: 12px;
- margin-bottom: 0;
- font-weight: 400;
- color: #757575; }
- .toc ul {
- list-style: none;
- list-style-type: none;
- margin-top: 0;
- padding-left: 0; }
- .toc li {
- font-size: 20px;
- line-height: 40px;
- list-style-type: none; }
- .toc li:last-child {
- line-height: 20px;
- padding-top: 10px; }
-
-.qp-ui-mask-modal {
- background-color: rgba(0, 0, 0, 0.5);
- height: 100%;
- left: 0;
- opacity: 0.1;
- top: 0;
- visibility: hidden;
- width: 100%;
- z-index: 3;
- position: fixed;
- -webkit-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(.4, 0, .2, 1);
- -moz-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(.4, 0, .2, 1);
- transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(.4, 0, .2, 1);
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0); }
- .qp-ui-mask-modal.qp-ui-mask-visible {
- opacity: 1;
- visibility: visible;
- -webkit-transition-delay: 0;
- -moz-transition-delay: 0;
- transition-delay: 0; }
-
-.qp-ui-mask-disable-scroll, .qp-ui-mask-disable-scroll body {
- overflow: hidden; }
-
-.qp-ui-side-nav-drawer {
- -webkit-overflow-scrolling: touch;
- overflow-x: hidden;
- overflow-y: auto; }
-
-.goog-zippy-header {
- cursor: pointer; }
-
-.qp-ui-video-player video {
- display: block;
- height: auto;
- width: 100%; }
-
-.qp-ui-video-player-mouse {
- cursor: pointer;
- position: relative; }
- .qp-ui-video-player-mouse:before {
- background: #000 url("//material-design.storage.googleapis.com/images/play.svg") no-repeat center center;
- background-size: 72px 72px;
- bottom: 0;
- content: '';
- left: 0;
- opacity: 0.5;
- position: absolute;
- right: 0;
- top: 0;
- -webkit-transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1);
- -moz-transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1);
- transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1); }
- @media screen and (max-width: 820px) {
- .qp-ui-video-player-mouse:before {
- background-size: 56px 56px; } }
- .qp-ui-video-player-mouse.qp-ui-video-player-playing:before {
- background-image: url("//material-design.storage.googleapis.com/images/pause.svg");
- opacity: 0;
- -webkit-transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1), background 0 ease 0.2s;
- -moz-transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1), background 0 ease 0.2s;
- transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1), background 0 ease 0.2s; }
- .qp-ui-video-player-mouse.qp-ui-video-player-playing.qp-ui-video-player-hover:before {
- opacity: .2; }
-
-.qp-ui-video-player-touch {
- height: 0;
- overflow: hidden;
- position: relative;
- padding-bottom: 36.84%; }
- .qp-ui-video-player-touch video {
- bottom: 0;
- height: 101%;
- left: 0;
- margin: auto 0;
- position: absolute;
- right: 0;
- top: 0; }
-
-.module_3_col_text_image_image .qp-ui-video-player-touch, .module_3_col .qp-ui-video-player-touch {
- padding-bottom: 100%; }
-
-body.icons-docs {
- font-family: Roboto, monospace;
- font-size: 16px;
- line-height: 28px;
- color: rgba(0, 0, 0, 0.7);
- /* icons listing */ }
- body.icons-docs .material-icons {
- width: 1em;
- height: 1em; }
- body.icons-docs .material-icons.md-18 {
- font-size: 18px; }
- body.icons-docs .material-icons.md-24 {
- font-size: 24px; }
- body.icons-docs .material-icons.md-36 {
- font-size: 36px; }
- body.icons-docs .material-icons.md-48 {
- font-size: 48px; }
- body.icons-docs .material-icons.md-dark {
- color: rgba(0, 0, 0, 0.54); }
- body.icons-docs .material-icons.md-dark.md-inactive {
- color: rgba(0, 0, 0, 0.26); }
- body.icons-docs .material-icons.md-light {
- color: white; }
- body.icons-docs .material-icons.md-light.md-inactive {
- color: rgba(255, 255, 255, 0.3); }
- body.icons-docs .material-icons.orange600 {
- color: #FB8C00; }
- body.icons-docs #page-container #page-inner-container {
- padding-top: 60px; }
- @media screen and (max-width: 360px) {
- body.icons-docs #page-container #page-inner-container {
- padding-top: 24px; } }
- body.icons-docs header {
- background: #03a9f4;
- font-family: 'Roboto', sans-serif; }
- body.icons-docs .noninitial-chapter .header-wrapper, body.icons-docs .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active {
- left: 32px; }
- body.icons-docs h1, body.icons-docs a {
- color: #03a9f4; }
- body.icons-docs h1 {
- font-size: 30px; }
- @media screen and (max-width: 360px) {
- body.icons-docs h1 {
- font-size: 24px; } }
- body.icons-docs h2 {
- font-size: 24px; }
- body.icons-docs h3 {
- font-size: 16px;
- font-weight: 500; }
- body.icons-docs h2, body.icons-docs h3 {
- color: #03a9f4;
- padding-top: 24px; }
- body.icons-docs pre {
- font-family: 'Roboto Mono', monospace;
- border: 1px solid #eee; }
- body.icons-docs h1, body.icons-docs h2, body.icons-docs h3, body.icons-docs h4, body.icons-docs .header-wrapper .header-title {
- max-width: 760px; }
- body.icons-docs h1, body.icons-docs h2, body.icons-docs h3, body.icons-docs h4, body.icons-docs p {
- margin: 0 auto 28px auto; }
- @media screen and (max-width: 820px) {
- body.icons-docs h1, body.icons-docs h2, body.icons-docs h3, body.icons-docs h4, body.icons-docs p {
- margin-left: 16px;
- margin-right: 16px; } }
- @media screen and (max-width: 360px) {
- body.icons-docs h1, body.icons-docs h2, body.icons-docs h3, body.icons-docs h4 {
- margin-left: 0;
- margin-right: 0;
- margin-bottom: 8px; } }
- body.icons-docs h1 {
- padding-top: 24px; }
- body.icons-docs p {
- color: rgba(0, 0, 0, 0.7);
- font-size: 16px;
- line-height: 28px; }
- @media screen and (max-width: 820px) {
- body.icons-docs p {
- font-size: 13px;
- line-height: 20px; } }
- body.icons-docs hr {
- margin: 24px 0;
- height: 64px;
- display: block; }
- body.icons-docs ul {
- font-size: 16px;
- line-height: 28px; }
- @media screen and (max-width: 360px) {
- body.icons-docs ul {
- font-size: 13px;
- line-height: 20px; } }
- body.icons-docs ul, body.icons-docs table, body.icons-docs pre, body.icons-docs .icons-preview-code {
- display: block;
- width: 760px;
- margin: 32px auto; }
- @media screen and (max-width: 820px) {
- body.icons-docs ul, body.icons-docs table, body.icons-docs pre, body.icons-docs .icons-preview-code {
- width: auto;
- margin: 40px 0 32px 0;
- overflow-x: scroll; } }
- @media screen and (max-width: 360px) {
- body.icons-docs ul, body.icons-docs table, body.icons-docs pre, body.icons-docs .icons-preview-code {
- width: 100%;
- margin: 16px 0 16px 0; } }
- body.icons-docs .img {
- max-width: 840px;
- margin: 40px auto 32px auto;
- display: block; }
- @media screen and (max-width: 360px) {
- body.icons-docs .img {
- margin: 40px 0 32px 0;
- width: 100%; } }
- body.icons-docs li, body.icons-docs ul {
- color: rgba(0, 0, 0, 0.7);
- font-size: 16px;
- line-height: 28px; }
- @media screen and (max-width: 360px) {
- body.icons-docs li, body.icons-docs ul {
- font-size: 13px;
- line-height: 20px; } }
- body.icons-docs code, body.icons-docs kbd, body.icons-docs pre, body.icons-docs samp {
- font-size: 16px;
- line-height: 28px; }
- @media screen and (max-width: 820px) {
- body.icons-docs code, body.icons-docs kbd, body.icons-docs pre, body.icons-docs samp {
- font-size: 12px;
- line-height: 18px; } }
- body.icons-docs table {
- background: white;
- border: 1px solid #eee;
- border-radius: 2px;
- margin-bottom: 32px;
- border-collapse: initial; }
- body.icons-docs table thead {
- font-size: 16px;
- font-weight: 500;
- color: rgba(0, 0, 0, 0.54);
- line-height: 56px; }
- @media screen and (max-width: 820px) {
- body.icons-docs table thead {
- font-size: 13px;
- line-height: 20px; } }
- body.icons-docs table tbody {
- font-size: 16px;
- line-height: 48px;
- color: rgba(0, 0, 0, 0.87); }
- @media screen and (max-width: 820px) {
- body.icons-docs table tbody {
- font-size: 13px;
- line-height: 20px; } }
- @media screen and (max-width: 820px) {
- body.icons-docs table tbody td {
- padding-top: 8px;
- padding-bottom: 8px; } }
- body.icons-docs th {
- border: none;
- border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
- body.icons-docs td, body.icons-docs th {
- padding: 0 24px; }
- body.icons-docs .toc {
- border: none;
- padding-left: 20px; }
- body.icons-docs .toc h1 {
- font-size: 16px;
- line-height: 28px;
- padding-bottom: 12px;
- margin-bottom: 0;
- font-weight: 400;
- color: #757575; }
- @media screen and (max-width: 360px) {
- body.icons-docs .toc h1 {
- margin-left: 8px; } }
- body.icons-docs .toc ul {
- list-style: none;
- list-style-type: none;
- margin-top: 0;
- padding-left: 16px;
- border-left: 5px solid #B3E5FC; }
- body.icons-docs .toc li {
- font-size: 16px;
- line-height: 30px;
- list-style-type: none;
- padding: 0; }
- body.icons-docs .toc li:last-child {
- line-height: 30px; }
- body.icons-docs footer {
- display: -webkit-box;
- /* OLD - iOS 6-, Safari 3.1-6 */
- display: -ms-flexbox;
- /* TWEENER - IE 10 */
- display: -webkit-flex;
- /* NEW - Chrome */
- display: flex;
- /* NEW, Spec - Opera 12.1, Firefox 20+ */
- flex-flow: row;
- -webkit-flex-flow: row;
- height: 114px;
- background: #eee;
- font-size: 16px; }
- @media screen and (max-width: 820px) {
- body.icons-docs footer {
- font-size: 13px;
- height: 72px; } }
- body.icons-docs footer .links {
- flex: 1 1 0;
- -webkit-flex: 1 1 0;
- justify-content: flex-end;
- -webkit-justify-content: flex-end;
- text-align: right;
- margin-top: 56px;
- margin-bottom: 32px;
- margin-right: 72px; }
- @media screen and (max-width: 820px) {
- body.icons-docs footer .links {
- margin-top: 24px;
- margin-bottom: 24px;
- margin-right: 32px; } }
- body.icons-docs footer .links .dot {
- display: inline-block;
- width: 24px;
- text-align: center; }
- @media screen and (max-width: 360px) {
- body.icons-docs footer .links .dot {
- width: 8px; } }
- body.icons-docs footer .links a {
- text-decoration: none;
- color: black;
- opacity: .54; }
- body.icons-docs footer .links a:hover {
- opacity: .8; }
- body.icons-docs footer .logo {
- flex: 0 1 auto;
- -webkit-flex: 0 1 auto;
- margin-top: 48px;
- margin-left: 72px; }
- @media screen and (max-width: 820px) {
- body.icons-docs footer .logo {
- margin-top: 24px;
- margin-left: 32px; } }
- body.icons-docs footer .google-logo {
- width: 90px;
- height: 36px; }
- @media screen and (max-width: 820px) {
- body.icons-docs footer .google-logo {
- width: 60px;
- height: 24px; } }
- body.icons-docs .icons-preview-code {
- display: -webkit-box;
- /* OLD - iOS 6-, Safari 3.1-6 */
- display: -ms-flexbox;
- /* TWEENER - IE 10 */
- display: -webkit-flex;
- /* NEW - Chrome */
- display: flex;
- /* NEW, Spec - Opera 12.1, Firefox 20+ */
- flex-flow: row;
- -webkit-flex-flow: row;
- border: 1px solid #f0f0f0;
- padding: 0;
- background-color: white; }
- body.icons-docs .icons-preview-code .icons-preview {
- display: -webkit-box;
- /* OLD - iOS 6-, Safari 3.1-6 */
- display: -ms-flexbox;
- /* TWEENER - IE 10 */
- display: -webkit-flex;
- /* NEW - Chrome */
- display: flex;
- /* NEW, Spec - Opera 12.1, Firefox 20+ */
- flex-flow: column;
- -webkit-flex-flow: column;
- flex: 0 1 auto;
- -webkit-flex: 0 1 auto;
- align-items: center;
- -webkit-align-items: center;
- background-color: #f9f9f9;
- width: 128px;
- padding: 16px; }
- @media screen and (max-width: 820px) {
- body.icons-docs .icons-preview-code .icons-preview {
- width: 72px;
- padding: 16px; } }
- body.icons-docs .icons-preview-code .icons-preview i {
- display: block; }
- body.icons-docs .icons-preview-code .icons-code {
- flex: 1 1 0;
- -webkit-flex: 1 1 0;
- background-color: white;
- padding: 16px; }
- body.icons-docs .icons-preview-code .icons-code pre, body.icons-docs .icons-preview-code .icons-code code {
- margin: 0;
- width: 100%; }
- body.icons-docs .icons-preview-code .icon-caption {
- font-size: 13px;
- margin-top: 8px; }
- @media screen and (max-width: 820px) {
- body.icons-docs .icons-preview-code .icon-caption {
- margin-top: 4px;
- font-size: 11px; } }
- body.icons-docs .icons-preview-code .icons-dark-bg {
- background-color: #333; }
- body.icons-docs .icons-preview-code .icons-dark-bg .icon-caption {
- color: #fff; }
- body.icons-docs .icon-list {
- padding: 0;
- margin-left: 0;
- width: 1000px;
- background-color: white; }
- body.icons-docs .icon-list .icon-list-header {
- padding-top: 16px;
- padding-bottom: 16px;
- border-bottom: 1px solid #ddd;
- font-weight: 500; }
- body.icons-docs .icon-list .icon-list-header .caption {
- display: block;
- text-align: center;
- font-size: 11px;
- width: 96px; }
- body.icons-docs .icon-list .icon-list-item {
- display: -webkit-box;
- /* OLD - iOS 6-, Safari 3.1-6 */
- display: -ms-flexbox;
- /* TWEENER - IE 10 */
- display: -webkit-flex;
- /* NEW - Chrome */
- display: flex;
- /* NEW, Spec - Opera 12.1, Firefox 20+ */
- list-style: none;
- align-items: center;
- -webkit-align-items: center;
- padding-left: 24px;
- border-bottom: 1px solid #f0f0f0; }
- body.icons-docs .icon-list .icon-list-item img, body.icons-docs .icon-list .icon-list-item i.material-icons {
- display: block;
- box-sizing: border-box;
- margin: 36px;
- width: 24px;
- height: 24px; }
- body.icons-docs .icon-list .icon-list-item img.svg48, body.icons-docs .icon-list .icon-list-item img.png48, body.icons-docs .icon-list .icon-list-item i.md-48 {
- display: block;
- box-sizing: border-box;
- width: 48px;
- height: 48px;
- margin: 24px; }
- body.icons-docs .icon-list .icon-list-item .svg, body.icons-docs .icon-list .icon-list-item .png {
- opacity: 0.7; }
- body.icons-docs .icon-list .icon-list-item .icon-name {
- flex: 1 1 0;
- -webkit-flex: 1 1 0;
- font-size: 11px;
- padding-left: 16px; }
- body.icons-docs .icon-list .icon-list-hidden {
- display: none; }
- body.icons-docs .crosshair.vertical {
- position: absolute;
- background-color: red;
- opacity: 0.5;
- height: 100%;
- width: 1px;
- user-select: none;
- pointer-events: none;
- top: 0;
- left: 0; }
- body.icons-docs .crosshair.horizontal {
- position: absolute;
- background-color: red;
- opacity: 0.5;
- height: 1px;
- width: 100%;
- user-select: none;
- pointer-events: none;
- top: 0;
- left: 0; }
diff --git a/www/images/google-logo.png b/www/images/google-logo.png
deleted file mode 100644
index 3c820f5..0000000
--- a/www/images/google-logo.png
+++ /dev/null
Binary files differ
diff --git a/www/images/icons-library.png b/www/images/icons-library.png
deleted file mode 100644
index c3d822e..0000000
--- a/www/images/icons-library.png
+++ /dev/null
Binary files differ
diff --git a/www/images/ios-imageset.png b/www/images/ios-imageset.png
deleted file mode 100644
index 8b11076..0000000
--- a/www/images/ios-imageset.png
+++ /dev/null
Binary files differ
