text: 
  
  
  
  
  
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
    <link rel="dns-prefetch" href="https://github.githubassets.com">
    <link rel="dns-prefetch" href="https://avatars0.githubusercontent.com">
    <link rel="dns-prefetch" href="https://avatars1.githubusercontent.com">
    <link rel="dns-prefetch" href="https://avatars2.githubusercontent.com">
    <link rel="dns-prefetch" href="https://avatars3.githubusercontent.com">
    <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com">
    <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/">
  
  
  
    <link crossorigin="anonymous" media="all" integrity="sha512-G5IW3QX9jLeIufJaob0LkBXhXTZSiWUoXGNTvU9KgK4dfhMjKB3hfAy9hjsk5YYoN0GA3b0yekVqlMA5EYlDDA==" rel="stylesheet" href="https://github.githubassets.com/assets/frameworks-c567bfeb1cb9f4ac89533a5e03dbe623.css" />
    
      <link crossorigin="anonymous" media="all" integrity="sha512-5v4G7h0D7l4LzJAV5ZDxzCmB2bqr6u6GwZOBuLnpxLeh5tzwgG4JHHfIW05l3333JLycXT05cHmTgkwC9I4fNQ==" rel="stylesheet" href="https://github.githubassets.com/assets/github-89642c25e1c39ca29fd1d22a91c65558.css" />
      
      
      
      
  
    <meta name="viewport" content="width=device-width">
    
    <title>Metro-UI-CSS/loader.js at master · olton/Metro-UI-CSS</title>
      <meta name="description" content="Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style. - olton/Metro-UI-CSS">
      <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
    <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
    <meta property="fb:app_id" content="1401488693436528">
  
      
      <meta property="og:image" content="https://avatars1.githubusercontent.com/u/365108?s=400&amp;v=4" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="olton/Metro-UI-CSS" /><meta property="og:url" content="https://github.com/olton/Metro-UI-CSS" /><meta property="og:description" content="Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style. - olton/Metro-UI-CSS" />
  
    <link rel="assets" href="https://github.githubassets.com/">
    <link rel="web-socket" href="wss://live.github.com/_sockets/VjI6MzY3MjMxMzg4OmMyN2JlZDllZDkwZDUxZmRhOWUyZjY1ZThiZWQ3ZDMwNTY1MThmMGJiZjkzZjgzZWViMDYzMWI3MmIxODNjMWM=--0594191056a4a90d01a83e5fac529877030585e9">
    <meta name="pjax-timeout" content="1000">
    <link rel="sudo-modal" href="/sessions/sudo_modal">
    <meta name="request-id" content="7365:9811:1C9023A:2C7E8EF:5C90C8F8" data-pjax-transient>
  
  
    
  
    <meta name="selected-link" value="repo_source" data-pjax-transient>
  
        <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
      <meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
      <meta name="google-site-verification" content="GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc">
  
    <meta name="octolytics-host" content="collector.githubapp.com" /><meta name="octolytics-app-id" content="github" /><meta name="octolytics-event-url" content="https://collector.githubapp.com/github-external/browser_event" /><meta name="octolytics-dimension-request_id" content="7365:9811:1C9023A:2C7E8EF:5C90C8F8" /><meta name="octolytics-dimension-region_edge" content="sea" /><meta name="octolytics-dimension-region_render" content="iad" /><meta name="octolytics-actor-id" content="33232418" /><meta name="octolytics-actor-login" content="gnzlst" /><meta name="octolytics-actor-hash" content="080a00d4a5c5a45fea05f3cd2bbb294d16339b02d9872980b39835c294f1ad7c" />
  <meta name="analytics-location" content="/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show" data-pjax-transient="true" />
  
  
  
      <meta name="google-analytics" content="UA-3769691-2">
  
    <meta class="js-ga-set" name="userId" content="f0aeae4671cbfc54bbe76d177964e1fc">
  
  <meta class="js-ga-set" name="dimension1" content="Logged In">
  
  
  
    
  
        <meta name="hostname" content="github.com">
      <meta name="user-login" content="gnzlst">
  
        <meta name="expected-hostname" content="github.com">
      <meta name="js-proxy-site-detection-payload" content="YTYxNTBhMDE3ZjUxZDE5OGMyOWE2OGVlZTE1NjY1MjY5OTQ2ODVmZjQ5MTFmNzU5Y2RhMmQwNzNlNDNhOGY4NHx7InJlbW90ZV9hZGRyZXNzIjoiMTQuMjAzLjUxLjE4NyIsInJlcXVlc3RfaWQiOiI3MzY1Ojk4MTE6MUM5MDIzQToyQzdFOEVGOjVDOTBDOEY4IiwidGltZXN0YW1wIjoxNTUyOTkyNTA5LCJob3N0IjoiZ2l0aHViLmNvbSJ9">
  
      <meta name="enabled-features" content="UNIVERSE_BANNER,MARKETPLACE_SOCIAL_PROOF,MARKETPLACE_PLAN_RESTRICTION_EDITOR,NOTIFY_ON_BLOCK,RELATED_ISSUES">
  
    <meta name="html-safe-nonce" content="73202b317ef2a41ea50e6910b7087099ab197952">
  
    <meta http-equiv="x-pjax-version" content="654cdaf3b791c3b18a14dc0a447dceb4">
    
  
        <link href="https://github.com/olton/Metro-UI-CSS/commits/master.atom" rel="alternate" title="Recent Commits to Metro-UI-CSS:master" type="application/atom+xml">
  
    <meta name="go-import" content="github.com/olton/Metro-UI-CSS git https://github.com/olton/Metro-UI-CSS.git">
  
    <meta name="octolytics-dimension-user_id" content="365108" /><meta name="octolytics-dimension-user_login" content="olton" /><meta name="octolytics-dimension-repository_id" content="3671042" /><meta name="octolytics-dimension-repository_nwo" content="olton/Metro-UI-CSS" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="3671042" /><meta name="octolytics-dimension-repository_network_root_nwo" content="olton/Metro-UI-CSS" /><meta name="octolytics-dimension-repository_explore_github_marketplace_ci_cta_shown" content="false" />
  
  
      <link rel="canonical" href="https://github.com/olton/Metro-UI-CSS/blob/master/docs/js/loader.js" data-pjax-transient>
  
  
    <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
  
    <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
  
    <link rel="mask-icon" href="https://github.githubassets.com/pinned-octocat.svg" color="#000000">
    <link rel="icon" type="image/x-icon" class="js-site-favicon" href="https://github.githubassets.com/favicon.ico">
  
  <meta name="theme-color" content="#1e2327">
  
  
    <meta name="u2f-support" content="true">
  
  
    <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">
  
    </head>
  
    <body class="logged-in env-production page-blob">
      
  
    <div class="position-relative js-header-wrapper ">
      <a href="#start-of-content" tabindex="1" class="p-3 bg-blue text-white show-on-focus js-skip-to-content">Skip to content</a>
      <div id="js-pjax-loader-bar" class="pjax-loader-bar"><div class="progress"></div></div>
  
      
      
      
  
  
          
  <header class="Header  f5" role="banner">
    <div class="d-flex flex-justify-between px-3 ">
      <div class="d-flex flex-justify-between ">
        <div class="">
          <a class="header-logo-invertocat" href="https://github.com/" data-hotkey="g d"
    aria-label=&quot;Home page&quot;
    data-ga-click="Header, go to dashboard, icon:logo">
    <svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
  </a>
  
        </div>
  
      </div>
  
      <div class="HeaderMenu d-flex flex-justify-between flex-auto">
        <nav class="d-flex" aria-label="Global">
              <div class="">
                <div class="header-search scoped-search site-scoped-search js-site-search position-relative js-jump-to"
    role="combobox"
    aria-owns="jump-to-results"
    aria-label="Search or jump to"
    aria-haspopup="listbox"
    aria-expanded="false"
  >
    <div class="position-relative">
      <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-site-search-form" role="search" aria-label="Site" data-scope-type="Repository" data-scope-id="3671042" data-scoped-search-url="/olton/Metro-UI-CSS/search" data-unscoped-search-url="/search" action="/olton/Metro-UI-CSS/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
        <label class="form-control header-search-wrapper header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center js-chromeless-input-container">
          <input type="text"
            class="form-control header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable"
            data-hotkey="s,/"
            name="q"
            value=""
            placeholder="Search or jump to…"
            data-unscoped-placeholder="Search or jump to…"
            data-scoped-placeholder="Search or jump to…"
            autocapitalize="off"
            aria-autocomplete="list"
            aria-controls="jump-to-results"
            aria-label="Search or jump to…"
            data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations#csrf-token=gBUxtIDo6WtFbVb+PajEEjDWzFLD2LP3sA/Pp10mfg4xiwy6nPqnV22T+G/Y/EidpJFacBfi9U+ZlWFxBd++4Q=="
            spellcheck="false"
            autocomplete="off"
            >
            <input type="hidden" class="js-site-search-type-field" name="type" >
              <img src="https://github.githubassets.com/images/search-key-slash.svg" alt="" class="mr-2 header-search-key-slash">
  
              <div class="Box position-absolute overflow-hidden d-none jump-to-suggestions js-jump-to-suggestions-container">
                
  <ul class="d-none js-jump-to-suggestions-template-container">
    
  
  <li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-suggestion" role="option">
    <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="">
      <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
        <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
        <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
        <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg>
      </div>
  
      <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">
  
      <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
      </div>
  
      <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
        <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
          In this repository
        </span>
        <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
          All GitHub
        </span>
        <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
      </div>
  
      <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
        Jump to
        <span class="d-inline-block ml-1 v-align-middle">↵</span>
      </div>
    </a>
  </li>
  
  </ul>
  
  <ul class="d-none js-jump-to-no-results-template-container">
    <li class="d-flex flex-justify-center flex-items-center f5 d-none js-jump-to-suggestion p-2">
      <span class="text-gray">No suggested jump to results</span>
    </li>
  </ul>
  
  <ul id="jump-to-results" role="listbox" class="p-0 m-0 js-navigation-container jump-to-suggestions-results-container js-jump-to-suggestions-results-container">
    
  
  <li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-scoped-search d-none" role="option">
    <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="">
      <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
        <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
        <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
        <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg>
      </div>
  
      <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">
  
      <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
      </div>
  
      <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
        <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
          In this repository
        </span>
        <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
          All GitHub
        </span>
        <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
      </div>
  
      <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
        Jump to
        <span class="d-inline-block ml-1 v-align-middle">↵</span>
      </div>
    </a>
  </li>
  
    
  
  <li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-global-search d-none" role="option">
    <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="">
      <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
        <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
        <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
        <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg>
      </div>
  
      <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">
  
      <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
      </div>
  
      <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
        <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
          In this repository
        </span>
        <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
          All GitHub
        </span>
        <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
      </div>
  
      <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
        Jump to
        <span class="d-inline-block ml-1 v-align-middle">↵</span>
      </div>
    </a>
  </li>
  
  
      <li class="d-flex flex-justify-center flex-items-center p-0 f5 js-jump-to-suggestion">
        <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif" alt="Octocat Spinner Icon" class="m-2" width="28">
      </li>
  </ul>
  
              </div>
        </label>
  </form>  </div>
  </div>
  
              </div>
  
            <ul class="d-flex pl-2 flex-items-center text-bold list-style-none">
              <li>
                <a class="js-selected-navigation-item HeaderNavlink px-2" data-hotkey="g p" data-ga-click="Header, click, Nav menu - item:pulls context:user" aria-label="Pull requests you created" data-selected-links="/pulls /pulls/assigned /pulls/mentioned /pulls" href="/pulls">
                  Pull requests
  </a>            </li>
              <li>
                <a class="js-selected-navigation-item HeaderNavlink px-2" data-hotkey="g i" data-ga-click="Header, click, Nav menu - item:issues context:user" aria-label="Issues you created" data-selected-links="/issues /issues/assigned /issues/mentioned /issues" href="/issues">
                  Issues
  </a>            </li>
                <li class="position-relative">
                  <a class="js-selected-navigation-item HeaderNavlink px-2" data-ga-click="Header, click, Nav menu - item:marketplace context:user" data-octo-click="marketplace_click" data-octo-dimensions="location:nav_bar" data-selected-links=" /marketplace" href="/marketplace">
                     Marketplace
  </a>                  
                </li>
              <li>
                <a class="js-selected-navigation-item HeaderNavlink px-2" data-ga-click="Header, click, Nav menu - item:explore" data-selected-links="/explore /trending /trending/developers /integrations /integrations/feature/code /integrations/feature/collaborate /integrations/feature/ship showcases showcases_search showcases_landing /explore" href="/explore">
                  Explore
  </a>            </li>
            </ul>
        </nav>
  
        <div class="d-flex">
          
  <ul class="user-nav d-flex flex-items-center list-style-none" id="user-links">
    <li class="dropdown">
      <span class="d-inline-block  px-2">
        
      <a aria-label="You have no unread notifications" class="notification-indicator tooltipped tooltipped-s  js-socket-channel js-notification-indicator" data-hotkey="g n" data-ga-click="Header, go to notifications, icon:read" data-channel="notification-changed:33232418" href="/notifications">
          <span class="mail-status "></span>
          <svg class="octicon octicon-bell" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 12v1H0v-1l.73-.58c.77-.77.81-2.55 1.19-4.42C2.69 3.23 6 2 6 2c0-.55.45-1 1-1s1 .45 1 1c0 0 3.39 1.23 4.16 5 .38 1.88.42 3.66 1.19 4.42l.66.58H14zm-7 4c1.11 0 2-.89 2-2H5c0 1.11.89 2 2 2z"/></svg>
  </a>
      </span>
    </li>
  
    <li class="dropdown">
      <details class="details-overlay details-reset d-flex px-2 flex-items-center">
        <summary class="HeaderNavlink"
           aria-label="Create new…"
           data-ga-click="Header, create new, icon:add">
          <svg class="octicon octicon-plus float-left mr-1 mt-1" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"/></svg>
          <span class="dropdown-caret mt-1"></span>
        </summary>
        <details-menu class="dropdown-menu dropdown-menu-sw">
          
  <a role="menuitem" class="dropdown-item" href="/new" data-ga-click="Header, create new repository">
    New repository
  </a>
  
    <a role="menuitem" class="dropdown-item" href="/new/import" data-ga-click="Header, import a repository">
      Import repository
    </a>
  
  <a role="menuitem" class="dropdown-item" href="https://gist.github.com/" data-ga-click="Header, create new gist">
    New gist
  </a>
  
    <a role="menuitem" class="dropdown-item" href="/organizations/new" data-ga-click="Header, create new organization">
      New organization
    </a>
  
  
    <div class="dropdown-divider"></div>
    <div class="dropdown-header">
      <span title="olton/Metro-UI-CSS">This repository</span>
    </div>
      <a role="menuitem" class="dropdown-item" href="/olton/Metro-UI-CSS/issues/new" data-ga-click="Header, create new issue" data-skip-pjax>
        New issue
      </a>
  
  
        </details-menu>
      </details>
    </li>
  
    <li class="dropdown">
  
      <details class="details-overlay details-reset d-flex pl-2 flex-items-center">
        <summary class="HeaderNavlink name mt-1"
          aria-label="View profile and more"
          data-ga-click="Header, show menu, icon:avatar">
          <img alt="@gnzlst" class="avatar float-left mr-1" src="https://avatars1.githubusercontent.com/u/33232418?s=40&amp;v=4" height="20" width="20">
          <span class="dropdown-caret"></span>
        </summary>
        <details-menu class="dropdown-menu dropdown-menu-sw">
          <div class="header-nav-current-user css-truncate"><a role="menuitem" class="no-underline user-profile-link px-3 pt-2 pb-2 mb-n2 mt-n1 d-block" href="/gnzlst" data-ga-click="Header, go to profile, text:Signed in as">Signed in as <strong class="css-truncate-target">gnzlst</strong></a></div>
          <div role="none" class="dropdown-divider"></div>
  
          <div class="px-3 f6 user-status-container js-user-status-context pb-1" data-url="/users/status?compact=1&amp;link_mentions=0&amp;truncate=1">
            
  <div class="js-user-status-container user-status-compact" data-team-hovercards-enabled>
    <details class="js-user-status-details details-reset details-overlay details-overlay-dark">
      <summary class="btn-link no-underline js-toggle-user-status-edit toggle-user-status-edit width-full" aria-haspopup="dialog" role="menuitem" data-hydro-click="{&quot;event_type&quot;:&quot;user_profile.click&quot;,&quot;payload&quot;:{&quot;profile_user_id&quot;:365108,&quot;target&quot;:&quot;EDIT_USER_STATUS&quot;,&quot;user_id&quot;:33232418,&quot;client_id&quot;:&quot;1778999837.1546756930&quot;,&quot;originating_request_id&quot;:&quot;7365:9811:1C9023A:2C7E8EF:5C90C8F8&quot;,&quot;originating_url&quot;:&quot;https://github.com/olton/Metro-UI-CSS/blob/master/docs/js/loader.js&quot;}}" data-hydro-click-hmac="302adc334a6c6a8242651c6186dc99399b5253470999c74f804f90d0747b0d0e">
        <div class="f6 d-inline-block v-align-middle  user-status-emoji-only-header pl-0 circle lh-condensed user-status-header " style="max-width: 29px">
          <div class="user-status-emoji-container flex-shrink-0 mr-1">
            <svg class="octicon octicon-smiley" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4.81 12.81a6.72 6.72 0 0 1-2.17 1.45c-.83.36-1.72.53-2.64.53-.92 0-1.81-.17-2.64-.53-.81-.34-1.55-.83-2.17-1.45a6.773 6.773 0 0 1-1.45-2.17A6.59 6.59 0 0 1 1.21 8c0-.92.17-1.81.53-2.64.34-.81.83-1.55 1.45-2.17.62-.62 1.36-1.11 2.17-1.45A6.59 6.59 0 0 1 8 1.21c.92 0 1.81.17 2.64.53.81.34 1.55.83 2.17 1.45.62.62 1.11 1.36 1.45 2.17.36.83.53 1.72.53 2.64 0 .92-.17 1.81-.53 2.64-.34.81-.83 1.55-1.45 2.17zM4 6.8v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2H5.2C4.53 8 4 7.47 4 6.8zm5 0v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2h-.59C9.53 8 9 7.47 9 6.8zm4 3.2c-.72 1.88-2.91 3-5 3s-4.28-1.13-5-3c-.14-.39.23-1 .66-1h8.59c.41 0 .89.61.75 1z"/></svg>
          </div>
        </div>
        <div class="d-inline-block v-align-middle user-status-message-wrapper f6 lh-condensed ws-normal pt-1">
            <span class="link-gray">Set your status</span>
        </div>
  </summary>    <details-dialog class="details-dialog rounded-1 anim-fade-in fast Box Box--overlay" role="dialog" tabindex="-1">
        <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="position-relative flex-auto js-user-status-form" action="/users/status?compact=1&amp;link_mentions=0&amp;truncate=1" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="VK/HXrkXirH0PZfwdUimx5U16nd4S47moI36taTcRcWbXLx0klw4deWwUEq0eBoT0yZnXGzr/nAHNPzrbQqPcw==" />
          <div class="Box-header bg-gray border-bottom p-3">
            <button class="Box-btn-octicon js-toggle-user-status-edit btn-octicon float-right" type="reset" aria-label="Close dialog" data-close-dialog>
              <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
            </button>
            <h3 class="Box-title f5 text-bold text-gray-dark">Edit status</h3>
          </div>
          <input type="hidden" name="emoji" class="js-user-status-emoji-field" value="">
          <input type="hidden" name="organization_id" class="js-user-status-org-id-field" value="">
          <div class="px-3 py-2 text-gray-dark">
            <div class="js-characters-remaining-container js-suggester-container position-relative mt-2">
              <div class="input-group d-table form-group my-0 js-user-status-form-group">
                <span class="input-group-button d-table-cell v-align-middle" style="width: 1%">
                  <button type="button" aria-label="Choose an emoji" class="btn-outline btn js-toggle-user-status-emoji-picker bg-white btn-open-emoji-picker">
                    <span class="js-user-status-original-emoji" hidden></span>
                    <span class="js-user-status-custom-emoji"></span>
                    <span class="js-user-status-no-emoji-icon" >
                      <svg class="octicon octicon-smiley" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4.81 12.81a6.72 6.72 0 0 1-2.17 1.45c-.83.36-1.72.53-2.64.53-.92 0-1.81-.17-2.64-.53-.81-.34-1.55-.83-2.17-1.45a6.773 6.773 0 0 1-1.45-2.17A6.59 6.59 0 0 1 1.21 8c0-.92.17-1.81.53-2.64.34-.81.83-1.55 1.45-2.17.62-.62 1.36-1.11 2.17-1.45A6.59 6.59 0 0 1 8 1.21c.92 0 1.81.17 2.64.53.81.34 1.55.83 2.17 1.45.62.62 1.11 1.36 1.45 2.17.36.83.53 1.72.53 2.64 0 .92-.17 1.81-.53 2.64-.34.81-.83 1.55-1.45 2.17zM4 6.8v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2H5.2C4.53 8 4 7.47 4 6.8zm5 0v-.59c0-.66.53-1.19 1.2-1.19h.59c.66 0 1.19.53 1.19 1.19v.59c0 .67-.53 1.2-1.19 1.2h-.59C9.53 8 9 7.47 9 6.8zm4 3.2c-.72 1.88-2.91 3-5 3s-4.28-1.13-5-3c-.14-.39.23-1 .66-1h8.59c.41 0 .89.61.75 1z"/></svg>
                    </span>
                  </button>
                </span>
                <input type="text" autocomplete="off" data-maxlength="80" class="js-suggester-field d-table-cell width-full form-control js-user-status-message-field js-characters-remaining-field" placeholder="What's happening?" name="message" required value="" aria-label="What is your current status?">
                <div class="error">Could not update your status, please try again.</div>
              </div>
              <div class="suggester-container">
                <div class="suggester js-suggester js-navigation-container" data-url="/autocomplete/user-suggestions" data-no-org-url="/autocomplete/user-suggestions" data-org-url="/suggestions" hidden>
                </div>
              </div>
              <div style="margin-left: 53px" class="my-1 text-small label-characters-remaining js-characters-remaining" data-suffix="remaining" hidden>
                80 remaining
              </div>
            </div>
            <include-fragment class="js-user-status-emoji-picker" data-url="/users/status/emoji"></include-fragment>
            <div class="overflow-auto border-bottom ml-n3 mr-n3 px-3" style="max-height: 33vh">
              <div class="user-status-suggestions js-user-status-suggestions collapsed overflow-hidden">
                <h4 class="f6 text-normal my-3">Suggestions:</h4>
                <div class="mx-3 mt-2 clearfix">
                    <div class="float-left col-6">
                        <button type="button" value=":palm_tree:" class="d-flex flex-items-baseline flex-items-stretch lh-condensed f6 btn-link link-gray no-underline js-predefined-user-status mb-1">
                          <div class="emoji-status-width mr-2 v-align-middle js-predefined-user-status-emoji">
                            <g-emoji alias="palm_tree" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f334.png">🌴</g-emoji>
                          </div>
                          <div class="d-flex flex-items-center no-underline js-predefined-user-status-message" style="border-left: 1px solid transparent">
                            On vacation
                          </div>
                        </button>
                        <button type="button" value=":face_with_thermometer:" class="d-flex flex-items-baseline flex-items-stretch lh-condensed f6 btn-link link-gray no-underline js-predefined-user-status mb-1">
                          <div class="emoji-status-width mr-2 v-align-middle js-predefined-user-status-emoji">
                            <g-emoji alias="face_with_thermometer" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f912.png">🤒</g-emoji>
                          </div>
                          <div class="d-flex flex-items-center no-underline js-predefined-user-status-message" style="border-left: 1px solid transparent">
                            Out sick
                          </div>
                        </button>
                    </div>
                    <div class="float-left col-6">
                        <button type="button" value=":house:" class="d-flex flex-items-baseline flex-items-stretch lh-condensed f6 btn-link link-gray no-underline js-predefined-user-status mb-1">
                          <div class="emoji-status-width mr-2 v-align-middle js-predefined-user-status-emoji">
                            <g-emoji alias="house" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f3e0.png">🏠</g-emoji>
                          </div>
                          <div class="d-flex flex-items-center no-underline js-predefined-user-status-message" style="border-left: 1px solid transparent">
                            Working from home
                          </div>
                        </button>
                        <button type="button" value=":dart:" class="d-flex flex-items-baseline flex-items-stretch lh-condensed f6 btn-link link-gray no-underline js-predefined-user-status mb-1">
                          <div class="emoji-status-width mr-2 v-align-middle js-predefined-user-status-emoji">
                            <g-emoji alias="dart" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f3af.png">🎯</g-emoji>
                          </div>
                          <div class="d-flex flex-items-center no-underline js-predefined-user-status-message" style="border-left: 1px solid transparent">
                            Focusing
                          </div>
                        </button>
                    </div>
                </div>
              </div>
              <div class="user-status-limited-availability-container">
                <div class="form-checkbox my-0">
                  <input type="checkbox" name="limited_availability" value="1" class="js-user-status-limited-availability-checkbox" data-default-message="I may be slow to respond." aria-describedby="limited-availability-help-text-truncate-true" id="limited-availability-truncate-true">
                  <label class="d-block f5 text-gray-dark mb-1" for="limited-availability-truncate-true">
                    Busy
                  </label>
                  <p class="note" id="limited-availability-help-text-truncate-true">
                    When others mention you, assign you, or request your review,
                    GitHub will let them know that you have limited availability.
                  </p>
                </div>
              </div>
            </div>
            <include-fragment class="js-user-status-org-picker" data-url="/users/status/organizations"></include-fragment>
          </div>
          <div class="d-flex flex-items-center flex-justify-between p-3 border-top">
            <button type="submit" disabled class="width-full btn btn-primary mr-2 js-user-status-submit">
              Set status
            </button>
            <button type="button" disabled class="width-full js-clear-user-status-button btn ml-2 ">
              Clear status
            </button>
          </div>
  </form>    </details-dialog>
    </details>
  </div>
  
          </div>
          <div role="none" class="dropdown-divider"></div>
  
          <a role="menuitem" class="dropdown-item" href="/gnzlst" data-ga-click="Header, go to profile, text:your profile">Your profile</a>
          <a role="menuitem" class="dropdown-item" href="/gnzlst?tab=repositories" data-ga-click="Header, go to repositories, text:your repositories">Your repositories</a>
  
          <a role="menuitem" class="dropdown-item" href="/gnzlst?tab=projects" data-ga-click="Header, go to projects, text:your projects">Your projects</a>
  
          <a role="menuitem" class="dropdown-item" href="/gnzlst?tab=stars" data-ga-click="Header, go to starred repos, text:your stars">Your stars</a>
            <a role="menuitem" class="dropdown-item" href="https://gist.github.com/" data-ga-click="Header, your gists, text:your gists">Your gists</a>
  
          <div role="none" class="dropdown-divider"></div>
          <a role="menuitem" class="dropdown-item" href="https://help.github.com" data-ga-click="Header, go to help, text:help">Help</a>
          <a role="menuitem" class="dropdown-item" href="/settings/profile" data-ga-click="Header, go to settings, icon:settings">Settings</a>
          <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="logout-form" action="/logout" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="xpqr6K8P7lVYgHPcrBkZ14NinfXWqsLP9nckiIP79hqygey3ehDTnZWgWXif8J8hsBEV/Ge7yQSuoGnuttu5Xw==" />
            
            <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout" role="menuitem">
              Sign out
            </button>
  </form>      </details-menu>
      </details>
    </li>
  </ul>
  
  
  
          <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="sr-only right-0" action="/logout" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="KSKloKTXKklJVluc3ad/mxgvdnwULqxXfos71/gQYZZdOeL/ccgXgYR2cTjuTvltK1z+daU/p5wmXHaxzTAu0w==" />
            <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
              Sign out
            </button>
  </form>      </div>
      </div>
    </div>
  </header>
  
        
  
    </div>
  
    <div id="start-of-content" class="show-on-focus"></div>
  
      <div id="js-flash-container">
  
  </div>
  
  
  
    <div class="application-main " data-commit-hovercards-enabled>
          <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class="">
      <main id="js-repo-pjax-container" data-pjax-container >
        
  
  
    
  
  
  
  
  
  
    <div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav  ">
      <div class="repohead-details-container clearfix container">
  
        <ul class="pagehead-actions">
  
  
  
    <li>
          <!-- '"` --><!-- </textarea></xmp> --></option></form><form data-remote="true" class="js-social-form js-social-container" action="/notifications/subscribe" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="4Z05d28BTk1snB1ylO5qMkcSFhSRjTe/XWml13OBpvseee8Lw1FYaiKKnkWD1Sw5z7xL7+8TjZmY99s8/ixYvQ==" />      <input type="hidden" name="repository_id" id="repository_id" value="3671042" class="form-control" />
  
        <details class="details-reset details-overlay select-menu float-left">
          <summary class="btn btn-sm btn-with-count select-menu-button" data-hydro-click="{&quot;event_type&quot;:&quot;repository.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;WATCH_BUTTON&quot;,&quot;repository_id&quot;:3671042,&quot;client_id&quot;:&quot;1778999837.1546756930&quot;,&quot;originating_request_id&quot;:&quot;7365:9811:1C9023A:2C7E8EF:5C90C8F8&quot;,&quot;originating_url&quot;:&quot;https://github.com/olton/Metro-UI-CSS/blob/master/docs/js/loader.js&quot;,&quot;user_id&quot;:33232418}}" data-hydro-click-hmac="2d14be12c2cc0d5348064016ce6b6c37b1206c41da7a1493e37f30a376d5a32c" data-ga-click="Repository, click Watch settings, action:blob#show">          <span data-menu-button>
                <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
                Watch
            </span>
  </summary>        <details-menu class="select-menu-modal position-absolute mt-5" style="z-index: 99;">
            <div class="select-menu-header">
              <span class="select-menu-title">Notifications</span>
            </div>
            <div class="select-menu-list">
              <button type="submit" name="do" value="included" class="select-menu-item width-full" aria-checked="true" role="menuitemradio">
                <svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"/></svg>
                <div class="select-menu-item-text">
                  <span class="select-menu-item-heading">Not watching</span>
                  <span class="description">Be notified only when participating or @mentioned.</span>
                  <span class="hidden-select-button-text" data-menu-button-contents>
                    <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
                    Watch
                  </span>
                </div>
              </button>
  
              <button type="submit" name="do" value="release_only" class="select-menu-item width-full" aria-checked="false" role="menuitemradio">
                <svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"/></svg>
                <div class="select-menu-item-text">
                  <span class="select-menu-item-heading">Releases only</span>
                  <span class="description">Be notified of new releases, and when participating or @mentioned.</span>
                  <span class="hidden-select-button-text" data-menu-button-contents>
                    <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
                    Unwatch releases
                  </span>
                </div>
              </button>
  
              <button type="submit" name="do" value="subscribed" class="select-menu-item width-full" aria-checked="false" role="menuitemradio">
                <svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"/></svg>
                <div class="select-menu-item-text">
                  <span class="select-menu-item-heading">Watching</span>
                  <span class="description">Be notified of all conversations.</span>
                  <span class="hidden-select-button-text" data-menu-button-contents>
                    <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
                    Unwatch
                  </span>
                </div>
              </button>
  
              <button type="submit" name="do" value="ignore" class="select-menu-item width-full" aria-checked="false" role="menuitemradio">
                <svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"/></svg>
                <div class="select-menu-item-text">
                  <span class="select-menu-item-heading">Ignoring</span>
                  <span class="description">Never be notified.</span>
                  <span class="hidden-select-button-text" data-menu-button-contents>
                    <svg class="octicon octicon-mute v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 2.81v10.38c0 .67-.81 1-1.28.53L3 10H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l3.72-3.72C7.19 1.81 8 2.14 8 2.81zm7.53 3.22l-1.06-1.06-1.97 1.97-1.97-1.97-1.06 1.06L11.44 8 9.47 9.97l1.06 1.06 1.97-1.97 1.97 1.97 1.06-1.06L13.56 8l1.97-1.97z"/></svg>
                    Stop ignoring
                  </span>
                </div>
              </button>
            </div>
          </details-menu>
        </details>
        <a class="social-count js-social-count"
          href="/olton/Metro-UI-CSS/watchers"
          aria-label="588 users are watching this repository">
          588
        </a>
  </form>
    </li>
  
    <li>
        <div class="js-toggler-container js-social-container starring-container ">
      <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="starred js-social-form" action="/olton/Metro-UI-CSS/unstar" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="hGifvCDUCJDiZYpMR+XRUMLFGybXFUDounVZml0Ai5uOZPTqsYU/blas4Ktm/5WTzKgB6pxksNauK53ftzbsjA==" />
        <input type="hidden" name="context" value="repository"></input>
        <button type="submit" class="btn btn-sm btn-with-count js-toggler-target" aria-label="Unstar this repository" title="Unstar olton/Metro-UI-CSS" data-hydro-click="{&quot;event_type&quot;:&quot;repository.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;UNSTAR_BUTTON&quot;,&quot;repository_id&quot;:3671042,&quot;client_id&quot;:&quot;1778999837.1546756930&quot;,&quot;originating_request_id&quot;:&quot;7365:9811:1C9023A:2C7E8EF:5C90C8F8&quot;,&quot;originating_url&quot;:&quot;https://github.com/olton/Metro-UI-CSS/blob/master/docs/js/loader.js&quot;,&quot;user_id&quot;:33232418}}" data-hydro-click-hmac="1119d32fe8fdc67c9ac5eb8177720196b4df266d3e34b9b32ffee172932eb578" data-ga-click="Repository, click unstar button, action:blob#show; text:Unstar">        <svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg>
          Unstar
  </button>        <a class="social-count js-social-count" href="/olton/Metro-UI-CSS/stargazers"
             aria-label="6056 users starred this repository">
            6,056
          </a>
  </form>
      <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="unstarred js-social-form" action="/olton/Metro-UI-CSS/star" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="WX3lgQvhg5x54pFG3nYM05V+L7MnuINCcyE0wZtlUK59imp3PefLGn5p1HNURa38bBlVbI6skBUNV4NKecvF5Q==" />
        <input type="hidden" name="context" value="repository"></input>
        <button type="submit" class="btn btn-sm btn-with-count js-toggler-target" aria-label="Unstar this repository" title="Star olton/Metro-UI-CSS" data-hydro-click="{&quot;event_type&quot;:&quot;repository.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;STAR_BUTTON&quot;,&quot;repository_id&quot;:3671042,&quot;client_id&quot;:&quot;1778999837.1546756930&quot;,&quot;originating_request_id&quot;:&quot;7365:9811:1C9023A:2C7E8EF:5C90C8F8&quot;,&quot;originating_url&quot;:&quot;https://github.com/olton/Metro-UI-CSS/blob/master/docs/js/loader.js&quot;,&quot;user_id&quot;:33232418}}" data-hydro-click-hmac="e6894eb8ab55a9626e2ecd4b6de09808073df010643a0d9536ad76aeadc7e15e" data-ga-click="Repository, click star button, action:blob#show; text:Star">        <svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg>
          Star
  </button>        <a class="social-count js-social-count" href="/olton/Metro-UI-CSS/stargazers"
             aria-label="6056 users starred this repository">
            6,056
          </a>
  </form>  </div>
  
    </li>
  
    <li>
            <details class="details-reset details-overlay details-overlay-dark d-inline-block float-left"
              data-deferred-details-content-url="/olton/Metro-UI-CSS/fork?fragment=1">
              <summary class="btn btn-sm btn-with-count" data-hydro-click="{&quot;event_type&quot;:&quot;repository.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;FORK_BUTTON&quot;,&quot;repository_id&quot;:3671042,&quot;client_id&quot;:&quot;1778999837.1546756930&quot;,&quot;originating_request_id&quot;:&quot;7365:9811:1C9023A:2C7E8EF:5C90C8F8&quot;,&quot;originating_url&quot;:&quot;https://github.com/olton/Metro-UI-CSS/blob/master/docs/js/loader.js&quot;,&quot;user_id&quot;:33232418}}" data-hydro-click-hmac="7d5edca64b75da80e0e1c4246325599fa16fddd99aca7de0ff2a07d115f43c43" data-ga-click="Repository, show fork modal, action:blob#show; text:Fork" type="submit" title="Fork your own copy of olton/Metro-UI-CSS to your account" aria-label="Fork your own copy of olton/Metro-UI-CSS to your account">              <svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
                Fork
  </summary>            <details-dialog class="anim-fade-in fast Box Box--overlay d-flex flex-column">
                <div class="Box-header">
                  <button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog>
                    <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
                  </button>
                  <h3 class="Box-title">Fork Metro-UI-CSS</h3>
                </div>
                <div class="overflow-auto text-center">
                  <include-fragment>
                    <div class="octocat-spinner my-3" aria-label="Loading..."></div>
                    <p class="f5 text-gray">If this dialog fails to load, you can visit <a href="/olton/Metro-UI-CSS/fork">the fork page</a> directly.</p>
                  </include-fragment>
                </div>
              </details-dialog>
            </details>
  
      <a href="/olton/Metro-UI-CSS/network/members" class="social-count"
         aria-label="1952 users forked this repository">
        1,952
      </a>
    </li>
  </ul>
  
        <h1 class="public ">
    <svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
    <span class="author" itemprop="author"><a class="url fn" rel="author" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=365108" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/olton">olton</a></span><!--
  --><span class="path-divider">/</span><!--
  --><strong itemprop="name"><a data-pjax="#js-repo-pjax-container" href="/olton/Metro-UI-CSS">Metro-UI-CSS</a></strong>
  
  </h1>
  
      </div>
      
  <nav class="reponav js-repo-nav js-sidenav-container-pjax container"
       itemscope
       itemtype="http://schema.org/BreadcrumbList"
      aria-label="Repository"
       data-pjax="#js-repo-pjax-container">
  
    <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
      <a class="js-selected-navigation-item selected reponav-item" itemprop="url" data-hotkey="g c" aria-current="page" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /olton/Metro-UI-CSS" href="/olton/Metro-UI-CSS">
        <svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
        <span itemprop="name">Code</span>
        <meta itemprop="position" content="1">
  </a>  </span>
  
      <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
        <a itemprop="url" data-hotkey="g i" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /olton/Metro-UI-CSS/issues" href="/olton/Metro-UI-CSS/issues">
          <svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>
          <span itemprop="name">Issues</span>
          <span class="Counter">13</span>
          <meta itemprop="position" content="2">
  </a>    </span>
  
    <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
      <a data-hotkey="g p" itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_pulls checks /olton/Metro-UI-CSS/pulls" href="/olton/Metro-UI-CSS/pulls">
        <svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
        <span itemprop="name">Pull requests</span>
        <span class="Counter">0</span>
        <meta itemprop="position" content="3">
  </a>  </span>
  
  
      <a data-hotkey="g b" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /olton/Metro-UI-CSS/projects" href="/olton/Metro-UI-CSS/projects">
        <svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
        Projects
        <span class="Counter" >1</span>
  </a>
  
  
      <a class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors dependency_graph pulse alerts security people /olton/Metro-UI-CSS/pulse" href="/olton/Metro-UI-CSS/pulse">
        <svg class="octicon octicon-graph" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z"/></svg>
        Insights
  </a>
  
  </nav>
  
  
    </div>
  <div class="container new-discussion-timeline experiment-repo-nav  ">
    <div class="repository-content ">
  
      
      
  
  
  
    
      <a class="d-none js-permalink-shortcut" data-hotkey="y" href="/olton/Metro-UI-CSS/blob/bba9525037fa518db6e8587b06c0b5529ea3daf6/docs/js/loader.js">Permalink</a>
  
      <!-- blob contrib key: blob_contributors:v21:bfe7ceb943478c34174e8fa2637093b4 -->
  
      
  
      <div class="file-navigation">
        
  <details class="details-reset details-overlay select-menu branch-select-menu float-left">
    <summary class="btn btn-sm select-menu-button css-truncate"
             data-hotkey="w"
             
             title="Switch branches or tags">
      <i>Branch:</i>
      <span class="css-truncate-target">master</span>
    </summary>
  
    <details-menu class="select-menu-modal position-absolute" style="z-index: 99;" src="/olton/Metro-UI-CSS/ref-list/master/docs/js/loader.js?source_action=show&amp;source_controller=blob" preload>
      <include-fragment class="select-menu-loading-overlay anim-pulse">
        <svg height="32" class="octicon octicon-octoface" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"/></svg>
      </include-fragment>
    </details-menu>
  </details>
  
        <div class="BtnGroup float-right">
          <a href="/olton/Metro-UI-CSS/find/master"
                class="js-pjax-capture-input btn btn-sm BtnGroup-item"
                data-pjax
                data-hotkey="t">
            Find file
          </a>
          <clipboard-copy for="blob-path" class="btn btn-sm BtnGroup-item">
            Copy path
          </clipboard-copy>
        </div>
        <div id="blob-path" class="breadcrumb">
          <span class="repo-root js-repo-root"><span class="js-path-segment"><a data-pjax="true" href="/olton/Metro-UI-CSS"><span>Metro-UI-CSS</span></a></span></span><span class="separator">/</span><span class="js-path-segment"><a data-pjax="true" href="/olton/Metro-UI-CSS/tree/master/docs"><span>docs</span></a></span><span class="separator">/</span><span class="js-path-segment"><a data-pjax="true" href="/olton/Metro-UI-CSS/tree/master/docs/js"><span>js</span></a></span><span class="separator">/</span><strong class="final-path">loader.js</strong>
        </div>
      </div>
  
  
  
      <include-fragment src="/olton/Metro-UI-CSS/contributors/master/docs/js/loader.js" class="commit-tease commit-loader">
        <div>
          Fetching contributors&hellip;
        </div>
  
        <div class="commit-tease-contributors">
            <img alt="" class="loader-loading float-left" src="https://github.githubassets.com/images/spinners/octocat-spinner-32-EAF2F5.gif" width="16" height="16" />
          <span class="loader-error">Cannot retrieve contributors at this time</span>
        </div>
  </include-fragment>
  
  
  
  
      <div class="file ">
        
  <div class="file-header ">
  
    <div class="file-info float-left ">
        42 lines (36 sloc)
        <span class="file-info-divider"></span>
      1.04 KB
    </div>
  
    <div class="file-actions d-flex ">
  
      <div class="BtnGroup">
        <a id="raw-url" class="btn btn-sm BtnGroup-item" href="/olton/Metro-UI-CSS/raw/master/docs/js/loader.js">Raw</a>
          <a class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b" href="/olton/Metro-UI-CSS/blame/master/docs/js/loader.js">Blame</a>
        <a rel="nofollow" class="btn btn-sm BtnGroup-item" href="/olton/Metro-UI-CSS/commits/master/docs/js/loader.js">History</a>
      </div>
  
  
      <div>
              <a class="btn-octicon tooltipped tooltipped-nw "
                 href="https://desktop.github.com"
                 aria-label="Open this file in GitHub Desktop"
                 data-ga-click="Repository, open with desktop, type:windows">
                  <svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"/></svg>
              </a>
  
              <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="inline-form js-update-url-with-hash" action="/olton/Metro-UI-CSS/edit/master/docs/js/loader.js" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="3WfieYkjgQ/Gl1ulQiE02MLkfTTdjoleo9AAGVx2w1WUQZ7q3Q5YzX4mkTwWhvqxYDey3NYh/FKOiOUDHrC+zw==" />
                <button class="btn-octicon tooltipped tooltipped-nw" type="submit"
                  aria-label="Fork this project and edit the file" data-hotkey="e" data-disable-with>
                  <svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
                </button>
  </form>
            <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="inline-form" action="/olton/Metro-UI-CSS/delete/master/docs/js/loader.js" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="C+SsC7EaIz7qwDPhkhZUIZr5i/F1HKMBit2yRUYfbpM7bbYtFu7NkYp/jWpWUee6tlt2vFoyRR5wEYY6JsW7TQ==" />
              <button class="btn-octicon btn-octicon-danger tooltipped tooltipped-nw" type="submit"
                aria-label="Fork this project and delete the file" data-disable-with>
                <svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
              </button>
  </form>    </div>
    </div>
  </div>
  
        
  
    <div itemprop="text" class="blob-wrapper data type-javascript ">
        
  <table class="highlight tab-size js-file-line-container" data-tab-size="8">
        <tr>
          <td id="L1" class="blob-num js-line-number" data-line-number="1"></td>
          <td id="LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">insertAfter</span>(<span class="pl-smi">newNode</span>, <span class="pl-smi">referenceNode</span>) {</td>
        </tr>
        <tr>
          <td id="L2" class="blob-num js-line-number" data-line-number="2"></td>
          <td id="LC2" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">referenceNode</span>.<span class="pl-c1">parentNode</span>.<span class="pl-c1">insertBefore</span>(newNode, <span class="pl-smi">referenceNode</span>.<span class="pl-c1">nextSibling</span>);</td>
        </tr>
        <tr>
          <td id="L3" class="blob-num js-line-number" data-line-number="3"></td>
          <td id="LC3" class="blob-code blob-code-inner js-file-line">}</td>
        </tr>
        <tr>
          <td id="L4" class="blob-num js-line-number" data-line-number="4"></td>
          <td id="LC4" class="blob-code blob-code-inner js-file-line"><span class="pl-k">function</span> <span class="pl-en">insertBefore</span>(<span class="pl-smi">newNode</span>, <span class="pl-smi">referenceNode</span>) {</td>
        </tr>
        <tr>
          <td id="L5" class="blob-num js-line-number" data-line-number="5"></td>
          <td id="LC5" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">referenceNode</span>.<span class="pl-c1">parentNode</span>.<span class="pl-c1">insertBefore</span>(newNode, <span class="pl-smi">referenceNode</span>.<span class="pl-smi">previousSibling</span>);</td>
        </tr>
        <tr>
          <td id="L6" class="blob-num js-line-number" data-line-number="6"></td>
          <td id="LC6" class="blob-code blob-code-inner js-file-line">}</td>
        </tr>
        <tr>
          <td id="L7" class="blob-num js-line-number" data-line-number="7"></td>
          <td id="LC7" class="blob-code blob-code-inner js-file-line">
  </td>
        </tr>
        <tr>
          <td id="L8" class="blob-num js-line-number" data-line-number="8"></td>
          <td id="LC8" class="blob-code blob-code-inner js-file-line"><span class="pl-k">var</span> styles <span class="pl-k">=</span>  [</td>
        </tr>
        <tr>
          <td id="L9" class="blob-num js-line-number" data-line-number="9"></td>
          <td id="LC9" class="blob-code blob-code-inner js-file-line">    <span class="pl-s"><span class="pl-pds">&quot;</span>metro/css/metro-all.css<span class="pl-pds">&quot;</span></span>,</td>
        </tr>
        <tr>
          <td id="L10" class="blob-num js-line-number" data-line-number="10"></td>
          <td id="LC10" class="blob-code blob-code-inner js-file-line">    <span class="pl-s"><span class="pl-pds">&quot;</span>highlight/styles/github.css<span class="pl-pds">&quot;</span></span>,</td>
        </tr>
        <tr>
          <td id="L11" class="blob-num js-line-number" data-line-number="11"></td>
          <td id="LC11" class="blob-code blob-code-inner js-file-line">    <span class="pl-s"><span class="pl-pds">&quot;</span>docsearch/docsearch.min.css<span class="pl-pds">&quot;</span></span>,</td>
        </tr>
        <tr>
          <td id="L12" class="blob-num js-line-number" data-line-number="12"></td>
          <td id="LC12" class="blob-code blob-code-inner js-file-line">    <span class="pl-s"><span class="pl-pds">&quot;</span>css/site.css<span class="pl-pds">&quot;</span></span></td>
        </tr>
        <tr>
          <td id="L13" class="blob-num js-line-number" data-line-number="13"></td>
          <td id="LC13" class="blob-code blob-code-inner js-file-line">];</td>
        </tr>
        <tr>
          <td id="L14" class="blob-num js-line-number" data-line-number="14"></td>
          <td id="LC14" class="blob-code blob-code-inner js-file-line">
  </td>
        </tr>
        <tr>
          <td id="L15" class="blob-num js-line-number" data-line-number="15"></td>
          <td id="LC15" class="blob-code blob-code-inner js-file-line"><span class="pl-k">var</span> scripts <span class="pl-k">=</span> [</td>
        </tr>
        <tr>
          <td id="L16" class="blob-num js-line-number" data-line-number="16"></td>
          <td id="LC16" class="blob-code blob-code-inner js-file-line">    <span class="pl-s"><span class="pl-pds">&quot;</span>//cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js<span class="pl-pds">&quot;</span></span>,</td>
        </tr>
        <tr>
          <td id="L17" class="blob-num js-line-number" data-line-number="17"></td>
          <td id="LC17" class="blob-code blob-code-inner js-file-line">    <span class="pl-s"><span class="pl-pds">&quot;</span>js/jquery-3.3.1.min.js<span class="pl-pds">&quot;</span></span>,</td>
        </tr>
        <tr>
          <td id="L18" class="blob-num js-line-number" data-line-number="18"></td>
          <td id="LC18" class="blob-code blob-code-inner js-file-line">    <span class="pl-s"><span class="pl-pds">&quot;</span>metro/js/metro.js<span class="pl-pds">&quot;</span></span>,</td>
        </tr>
        <tr>
          <td id="L19" class="blob-num js-line-number" data-line-number="19"></td>
          <td id="LC19" class="blob-code blob-code-inner js-file-line">    <span class="pl-s"><span class="pl-pds">&quot;</span>js/pre-code.js<span class="pl-pds">&quot;</span></span>,</td>
        </tr>
        <tr>
          <td id="L20" class="blob-num js-line-number" data-line-number="20"></td>
          <td id="LC20" class="blob-code blob-code-inner js-file-line">    <span class="pl-s"><span class="pl-pds">&quot;</span>highlight/highlight.pack.js<span class="pl-pds">&quot;</span></span>,</td>
        </tr>
        <tr>
          <td id="L21" class="blob-num js-line-number" data-line-number="21"></td>
          <td id="LC21" class="blob-code blob-code-inner js-file-line">    <span class="pl-s"><span class="pl-pds">&quot;</span>js/clipboard.min.js<span class="pl-pds">&quot;</span></span>,</td>
        </tr>
        <tr>
          <td id="L22" class="blob-num js-line-number" data-line-number="22"></td>
          <td id="LC22" class="blob-code blob-code-inner js-file-line">    <span class="pl-s"><span class="pl-pds">&quot;</span>js/site.js<span class="pl-pds">&quot;</span></span></td>
        </tr>
        <tr>
          <td id="L23" class="blob-num js-line-number" data-line-number="23"></td>
          <td id="LC23" class="blob-code blob-code-inner js-file-line">];</td>
        </tr>
        <tr>
          <td id="L24" class="blob-num js-line-number" data-line-number="24"></td>
          <td id="LC24" class="blob-code blob-code-inner js-file-line">
  </td>
        </tr>
        <tr>
          <td id="L25" class="blob-num js-line-number" data-line-number="25"></td>
          <td id="LC25" class="blob-code blob-code-inner js-file-line"><span class="pl-k">var</span> src, script, style;</td>
        </tr>
        <tr>
          <td id="L26" class="blob-num js-line-number" data-line-number="26"></td>
          <td id="LC26" class="blob-code blob-code-inner js-file-line">
  </td>
        </tr>
        <tr>
          <td id="L27" class="blob-num js-line-number" data-line-number="27"></td>
          <td id="LC27" class="blob-code blob-code-inner js-file-line"><span class="pl-k">while</span> (src <span class="pl-k">=</span> <span class="pl-smi">styles</span>.<span class="pl-c1">shift</span>()) {</td>
        </tr>
        <tr>
          <td id="L28" class="blob-num js-line-number" data-line-number="28"></td>
          <td id="LC28" class="blob-code blob-code-inner js-file-line">    style <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">createElement</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>link<span class="pl-pds">&#39;</span></span>);</td>
        </tr>
        <tr>
          <td id="L29" class="blob-num js-line-number" data-line-number="29"></td>
          <td id="LC29" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">style</span>.<span class="pl-c1">rel</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">&quot;</span>stylesheet<span class="pl-pds">&quot;</span></span>;</td>
        </tr>
        <tr>
          <td id="L30" class="blob-num js-line-number" data-line-number="30"></td>
          <td id="LC30" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">style</span>.<span class="pl-c1">href</span> <span class="pl-k">=</span> src;</td>
        </tr>
        <tr>
          <td id="L31" class="blob-num js-line-number" data-line-number="31"></td>
          <td id="LC31" class="blob-code blob-code-inner js-file-line">    <span class="pl-en">console</span>.<span class="pl-c1">log</span>(src);</td>
        </tr>
        <tr>
          <td id="L32" class="blob-num js-line-number" data-line-number="32"></td>
          <td id="LC32" class="blob-code blob-code-inner js-file-line">    <span class="pl-en">insertBefore</span>(style, <span class="pl-c1">document</span>.<span class="pl-smi">head</span>.<span class="pl-c1">lastChild</span>);</td>
        </tr>
        <tr>
          <td id="L33" class="blob-num js-line-number" data-line-number="33"></td>
          <td id="LC33" class="blob-code blob-code-inner js-file-line">}</td>
        </tr>
        <tr>
          <td id="L34" class="blob-num js-line-number" data-line-number="34"></td>
          <td id="LC34" class="blob-code blob-code-inner js-file-line">
  </td>
        </tr>
        <tr>
          <td id="L35" class="blob-num js-line-number" data-line-number="35"></td>
          <td id="LC35" class="blob-code blob-code-inner js-file-line"><span class="pl-k">while</span> (src <span class="pl-k">=</span> <span class="pl-smi">scripts</span>.<span class="pl-c1">shift</span>()) {</td>
        </tr>
        <tr>
          <td id="L36" class="blob-num js-line-number" data-line-number="36"></td>
          <td id="LC36" class="blob-code blob-code-inner js-file-line">    script <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">createElement</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>script<span class="pl-pds">&#39;</span></span>);</td>
        </tr>
        <tr>
          <td id="L37" class="blob-num js-line-number" data-line-number="37"></td>
          <td id="LC37" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">script</span>.<span class="pl-smi">async</span> <span class="pl-k">=</span> <span class="pl-c1">false</span>;</td>
        </tr>
        <tr>
          <td id="L38" class="blob-num js-line-number" data-line-number="38"></td>
          <td id="LC38" class="blob-code blob-code-inner js-file-line">    <span class="pl-smi">script</span>.<span class="pl-smi">src</span> <span class="pl-k">=</span> src;</td>
        </tr>
        <tr>
          <td id="L39" class="blob-num js-line-number" data-line-number="39"></td>
          <td id="LC39" class="blob-code blob-code-inner js-file-line">    <span class="pl-en">console</span>.<span class="pl-c1">log</span>(src);</td>
        </tr>
        <tr>
          <td id="L40" class="blob-num js-line-number" data-line-number="40"></td>
          <td id="LC40" class="blob-code blob-code-inner js-file-line">    <span class="pl-en">insertAfter</span>(script, <span class="pl-c1">document</span>.<span class="pl-c1">body</span>.<span class="pl-c1">lastChild</span>);</td>
        </tr>
        <tr>
          <td id="L41" class="blob-num js-line-number" data-line-number="41"></td>
          <td id="LC41" class="blob-code blob-code-inner js-file-line">}</td>
        </tr>
  </table>
  
    <details class="details-reset details-overlay BlobToolbar position-absolute js-file-line-actions dropdown d-none" aria-hidden="true">
      <summary class="btn-octicon ml-0 px-2 p-0 bg-white border border-gray-dark rounded-1" aria-label="Inline file action toolbar">
        <svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM13 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/></svg>
      </summary>
      <details-menu>
        <ul class="BlobToolbar-dropdown dropdown-menu dropdown-menu-se mt-2" style="width:185px">
          <li><clipboard-copy role="menuitem" class="dropdown-item" id="js-copy-lines" style="cursor:pointer;" data-original-text="Copy lines">Copy lines</clipboard-copy></li>
          <li><clipboard-copy role="menuitem" class="dropdown-item" id="js-copy-permalink" style="cursor:pointer;" data-original-text="Copy permalink">Copy permalink</clipboard-copy></li>
          <li><a class="dropdown-item js-update-url-with-hash" id="js-view-git-blame" role="menuitem" href="/olton/Metro-UI-CSS/blame/bba9525037fa518db6e8587b06c0b5529ea3daf6/docs/js/loader.js">View git blame</a></li>
            <li><a class="dropdown-item" id="js-new-issue" role="menuitem" href="/olton/Metro-UI-CSS/issues/new">Reference in new issue</a></li>
        </ul>
      </details-menu>
    </details>
  
    </div>
  
      </div>
  
    
  
    <details class="details-reset details-overlay details-overlay-dark">
      <summary data-hotkey="l" aria-label="Jump to line"></summary>
      <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast linejump" aria-label="Jump to line">
        <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-jump-to-line-form Box-body d-flex" action="" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
          <input class="form-control flex-auto mr-3 linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line&hellip;" aria-label="Jump to line" autofocus>
          <button type="submit" class="btn" data-close-dialog>Go</button>
  </form>    </details-dialog>
    </details>
  
  
  
    </div>
    <div class="modal-backdrop js-touch-events"></div>
  </div>
  
      </main>
    </div>
    
  
    </div>
  
          
  <div class="footer container-lg width-full px-3" role="contentinfo">
    <div class="position-relative d-flex flex-justify-between pt-6 pb-2 mt-6 f6 text-gray border-top border-gray-light ">
      <ul class="list-style-none d-flex flex-wrap ">
        <li class="mr-3">&copy; 2019 <span title="0.37111s from unicorn-cfff6c87c-42465">GitHub</span>, Inc.</li>
          <li class="mr-3"><a data-ga-click="Footer, go to terms, text:terms" href="https://github.com/site/terms">Terms</a></li>
          <li class="mr-3"><a data-ga-click="Footer, go to privacy, text:privacy" href="https://github.com/site/privacy">Privacy</a></li>
          <li class="mr-3"><a data-ga-click="Footer, go to security, text:security" href="https://github.com/security">Security</a></li>
          <li class="mr-3"><a href="https://githubstatus.com/" data-ga-click="Footer, go to status, text:status">Status</a></li>
          <li><a data-ga-click="Footer, go to help, text:help" href="https://help.github.com">Help</a></li>
      </ul>
  
      <a aria-label="Homepage" title="GitHub" class="footer-octicon mx-lg-4" href="https://github.com">
        <svg height="24" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
  </a>
     <ul class="list-style-none d-flex flex-wrap ">
          <li class="mr-3"><a data-ga-click="Footer, go to contact, text:contact" href="https://github.com/contact">Contact GitHub</a></li>
          <li class="mr-3"><a href="https://github.com/pricing" data-ga-click="Footer, go to Pricing, text:Pricing">Pricing</a></li>
        <li class="mr-3"><a href="https://developer.github.com" data-ga-click="Footer, go to api, text:api">API</a></li>
        <li class="mr-3"><a href="https://training.github.com" data-ga-click="Footer, go to training, text:training">Training</a></li>
          <li class="mr-3"><a href="https://github.blog" data-ga-click="Footer, go to blog, text:blog">Blog</a></li>
          <li><a data-ga-click="Footer, go to about, text:about" href="https://github.com/about">About</a></li>
  
      </ul>
    </div>
    <div class="d-flex flex-justify-center pb-6">
      <span class="f6 text-gray-light"></span>
    </div>
  </div>
  
  
  
    <div id="ajax-error-message" class="ajax-error-message flash flash-error">
      <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg>
      <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
        <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
      </button>
      You can’t perform that action at this time.
    </div>
  
  
      
      <script crossorigin="anonymous" integrity="sha512-IZCdsT3BCdoe3zLHNBvhGH1FjbGHtj+WInKlc6pqAwOglygvSKUfOPyxxtJco1AAVsVk1ldvDmCJyuIYNZhy7g==" type="application/javascript" src="https://github.githubassets.com/assets/frameworks-b805de66.js"></script>
      
      <script crossorigin="anonymous" async="async" integrity="sha512-ScnmScO/jzVnXySogyQfC0UfuKIFipm/GKpRDt4RKKbBxPR3jAkAULvg73h21bbY7MUZyhP5Ti6Amcbd9fH4Gw==" type="application/javascript" src="https://github.githubassets.com/assets/github-bootstrap-0179ec3c.js"></script>
      
      
      
    <div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none">
      <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg>
      <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
      <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
    </div>
    <template id="site-details-dialog">
    <details class="details-reset details-overlay details-overlay-dark lh-default text-gray-dark" open>
      <summary aria-haspopup="dialog" aria-label="Close dialog"></summary>
      <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast">
        <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog>
          <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
        </button>
        <div class="octocat-spinner my-6 js-details-dialog-spinner"></div>
      </details-dialog>
    </details>
  </template>
  
    <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;" tabindex="0">
    <div class="Popover-message Popover-message--bottom-left Popover-message--large Box box-shadow-large" style="width:360px;">
    </div>
  </div>
  
    <div aria-live="polite" class="js-global-screen-reader-notice sr-only"></div>
  
    </body>
  </html>
  
  