<cfset PageName="Home">
<cfinclude template="includes/head.cfm" />

<main id="styleGuide" class="main-content with-sidebar">

    <nav id="styleGuideNav" class="sidebar" data-sticky-container>
        <div class="card sticky" data-sticky data-sticky-on="large" data-anchor="styleGuide">
            <h4 class="card-header">Sections</h4>
            <ul class="menu card-content" data-magellan activeClass="active">
                <li><a href="#styleGuide-type">Typography</a></li>
                <li><a href="#styleGuide-buttons">Buttons</a></li>
                <li><a href="#styleGuide-cards">Cards</a></li>
                <li><a href="#styleGuide-table">Table</a></li>
                <li><a href="#styleGuide-form">Form</a></li>
            </ul>
        </div>
    </nav>

    <section id="styleGuide-type">
        <h1>h1. This is a very large header. <small>With small text</small></h1>
        <h2>h2. This is a large header. <small>With small text</small></h2>
        <h3>h3. This is a medium header. <small>With small text</small></h3>
        <h4>h4. This is a moderate header. <small>With small text</small></h4>
        <h5>h5. This is a small header. <small>With small text</small></h5>

        <p>Authentic tattooed tofu, PBR&amp;B williamsburg chicharrones migas DIY mumblecore chillwave asymmetrical fashion axe <a href="#">retro beard</a> direct trade.  Waistcoat whatever cred, sustainable meh poke unicorn direct trade  viral austin.  Shabby chic meh fixie paleo roof party listicle cold-pressed kitsch church-key lumbersexual.  Twee roof party scenester chillwave, lo-fi cardigan tofu four dollar toast YOLO intelligentsia.  Vexillologist pug iceland, neutra knausgaard ugh migas salvia hella celiac green juice kogi mlkshk succulents.  Typewriter keffiyeh truffaut, wayfarers lyft blue bottle echo park jean shorts gentrify knausgaard.  Squid af 90's, sustainable pop-up iceland edison bulb farm-to-table selvage distillery kombucha food truck humblebrag cardigan.</p>
    </section>

    <section id="styleGuide-buttons">
        <a class="button">Button</a>
        <a class="button primary">Primary Button</a>
        <a class="button success">Success Button</a>
        <a class="button alert">Alert Button</a>
        <a class="button warning">Warning Button</a>
        <a class="button" disabled>Disabled Button</a>
        <a class="button primary" disabled>Disabled Colored Button</a>
    </section>

    <section id="styleGuide-cards">
        <div class="card">
            <div class="card-content">
                <h3>This is a card</h3>
                <p>Sartorial chartreuse woke, pork belly crucifix hoodie meh flannel.  Cliche lomo try-hard, meggings health goth chartreuse vaporware.  Whatever bushwick ethical unicorn copper mug put a bird on it.  Bicycle rights lomo beard truffaut.  Vape raw denim try-hard, af lumbersexual asymmetrical venmo banh mi squid.  Seitan health goth hexagon, direct trade  vexillologist tattooed tilde succulents wayfarers flannel single-origin coffee mumblecore.  Organic lumbersexual sriracha, vexillologist tumblr synth tattooed cornhole hot chicken direct trade  man braid next level typewriter butcher.</p>
            </div>
        </div>

        <div class="card raised">
            <div class="card-content">
                <h3>This is a <em>raised</em> card</h3>
                <h4 class="subtitle">It adds depth.</h4>
                <p>Sartorial chartreuse woke, pork belly crucifix hoodie meh flannel.  Cliche lomo try-hard, meggings health goth chartreuse vaporware.  Whatever bushwick ethical unicorn copper mug put a bird on it.  Bicycle rights lomo beard truffaut.  Vape raw denim try-hard, af lumbersexual asymmetrical venmo banh mi squid.  Seitan health goth hexagon, direct trade  vexillologist tattooed tilde succulents wayfarers flannel single-origin coffee mumblecore.  Organic lumbersexual sriracha, vexillologist tumblr synth tattooed cornhole hot chicken direct trade  man braid next level typewriter butcher.</p>
            </div>
        </div>

        <div class="card raised ideal centered">
            <div class="card-content">
                <h3>This is an <em>ideal, centered,</em> raised card</h3>
                <h4 class="subtitle">It makes sure that the line length is ideal for reading.</h4>
                <p>Sartorial chartreuse woke, pork belly crucifix hoodie meh flannel.  Cliche lomo try-hard, meggings health goth chartreuse vaporware.  Whatever bushwick ethical unicorn copper mug put a bird on it.  Bicycle rights lomo beard truffaut.</p>
            </div>
        </div>
    </section>

    <section id="styleGuide-table" class="datatable-results">
        <table id="datatableExample" class="hover card raised" width="100%">
          <thead>
            <tr>
              <th><span class="text">CAS Number</span></th>
              <th><span class="text">Chemical Name</span> <span data-tooltip class="help has-tip" data-disable-hover="false" title="tool tip text"><svg class="icon" width="16" height="16" alt="More Info"><use xlink:href="#info-circle"></use></svg></span></th>
              <th><span class="text">Records</span></th>
              <th><span class="text">Publications</span></th>
              <th><span class="text">Year Min</span></th>
              <th><span class="text">Year Max</span></th>
              <th title="Column Visibility" class="colvis"></th>
            </tr>
          </thead>
          <tfoot class="filters">
            <tr>
              <td><input type="text" class="small"></td>
              <td><input type="text" class="small"></td>
              <td><input type="range" min="640" max="820" step="20"></td>
              <td><input type="range" min="20" max="34" step="2"></td>
              <td><input type="text" class="small"></td>
              <td><input type="text" class="small"></td>
              <td></td>
            </tr>
          </tfoot>
          <tbody>
            <cfloop from="1" to="25" index="i">
            <tr>
              <td>335671<cfoutput>#i#</cfoutput></td>
              <td>Perfluorooctane sulfonate potassium salt</td>
              <td class="num">640</td>
              <td class="num">20</td>
              <td class="num">2000</td>
              <td class="num">2015</td>
              <td class="actions"><a href="">></a></td>
            </tr>
            <tr>
              <td>335671<cfoutput>#i#</cfoutput></td>
              <td>Perfluorooctanoic acid</td>
              <td class="num">820</td>
              <td class="num">34</td>
              <td class="num">1990</td>
              <td class="num">2015</td>
              <td class="actions"><a href="">></a></td>
            </tr>
            </cfloop>
          </tbody>
        </table>

        <div class="dropdown-pane" id="chemicalNameHeaderHelp" data-dropdown data-auto-focus="true">
            <p>Salvia gochujang 90's kogi blue bottle, normcore meggings wayfarers franzen PBR&amp;B polaroid hashtag butcher.</p>
        </div>
    </section>

    <section id="styleGuide-form">
        <form>
          <label>Input Label
            <input type="text" placeholder="placeholder" aria-describedby="exampleHelpText">
          </label>
          <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
          <label>
            How many puppies?
            <input type="number" value="100">
          </label>
          <label>
            What books did you read over summer break?
            <textarea rows="5" placeholder="None"></textarea>
          </label>
          <label>Select Menu
            <select>
              <option value="husker">Husker</option>
              <option value="starbuck">Starbuck</option>
              <option value="hotdog">Hot Dog</option>
              <option value="apollo">Apollo</option>
            </select>
          </label>
          <fieldset>
            <legend>Choose Your Favorite</legend>
            <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
            <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
            <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
          </fieldset>
          <fieldset class="fieldset">
            <legend>Check these out</legend>
            <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
            <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
            <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
          </fieldset>
          <div class="input-group prepend append" tabindex="0">
            <input class="input-group-field" type="url">
            <span class="input-group-label">www.</span>
            <a class="input-group-button button">Go</a>
          </div>
          <div class="input-group prepend append" tabindex="0">
            <input class="input-group-field" type="number">
            <span class="input-group-label">$</span>
            <a class="input-group-button button primary">Submit</a>
          </div>
        </form>

        <label class="is-invalid-label">Number Required
            <input type="text" placeholder="1234" aria-describedby="exampleHelpText" required="" pattern="number" class="is-invalid-input" data-invalid="">
            <span class="form-error is-visible">
              Yo, you had better fill this out, it's required.
            </span>
        </label>
    </section>

</main>

<cfinclude template="includes/end.cfm" />
