Buttons

Default Button

Usage: For general actions and secondary actions.

Buttons that follow other buttons automatically get left margin for nice spacing. If you don't want this behavior, add class no-autospace to any buttons that you don't want margin-left automatically applied.

Add the class danger for buttons with irreversible/dangerous actions.

<button>Default Button</button>
<button class="disabled">Disabled Default Button</button>
<div style="margin-top: 1em;">
  <button>Button</button>
  <button class="no-autospace">Button</button>
  <button class="danger">Danger button</button>
</div>

Key Button

Usage: Add an associated color to a button. For use with graph controls, where the button's color is associated with the color of a data point.

Add the class active if the button is activated.

To set a color, name-space the button and style the border-top-color and .active background-color. You may also need to set the .active color to #333 (or @clr-text) if the color you're using is too light for white text.

Example:

button.my-button-class {
  border-top-color: green;
  &.active,
  &:active {
    background-color: green;
  }
}
<button class="key">Show Data Point</button>
<button class="key active">Data Point Showing</button>

Primary Button

Usage: Only for the "next logical step", such as "save", "next", etc. Only one per view.

The user should expect that they can reliably click this to progress without having to really read it.

Add the class danger to make a red primary button. For when an action is irreversible/dangerous.

<button class="primary">Primary Button</button>
<button class="primary disabled">Disabled Primary Button</button>
<button class="primary danger">Dangerous Primary Button</button>

Special Action Button

Usage: Rarely used. Only for actions that trigger a journey, such as "+ New Survey". Only 1 per view (if any).

<button class="special-action">Special Action Button</button>
<button class="special-action disabled">Disabled Special Action Button</button>

Text Button

Usage: Indicates a supporting action, typically inside of a tab or accordion menu.

This may also be used for an icon only button, otherwise always accompany a text button with an icon to differentiate from a standard link.

Add the class flush to remove button padding.

Add the class flush-sides to remove only the left/right padding.

<button class="text icon-add">Text Button</button>
<button class="text icon-add disabled">Disabled Text Button</button>
<button class="text icon-add flush">Flush Text Button</button>
<button class="text icon-add flush-sides">Sides Flushed Text Button</button>
<button class="text icon-add flush-icon"><span class="sr-only">Add</span></button>

Clear Button

Usage: For "remove" or "cancel" actions.

Add the class flush to remove button padding.

Add the class flush-icon to remove the icon's default margin.

<button class="clear">Cancel</button>
<button class="clear disabled">Cancel</button>
<button class="clear icon-remove flush-icon"><span class="sr-only">Remove</span></button>

Button Group

Usage: For toggle controls.

Add class active to the activated button option.

<div class="btn-group">
  <button>Option 1</button>
  <button>Option 2</button>
  <button class="active">Option 3</button>
  <button>Option 4</button>
</div>
<div class="btn-group">
  <button class="key option-one">Option 1</button>
  <button class="key option-two active">Option 2</button>
  <button class="key option-three">Option 3</button>
  <button class="key option-four">Option 4</button>
</div>

Button Sizes

<button class="small">Small Button</button>
<button>Normal</button>
<button class="large">Large Button</button>
<button class="block">Block Button</button>

Accordions

We use the accordion from ng2-bootstrap with our own custom styles.

Basic Accordions

Usage:

You may need to set a greater max-height (defaults to 25em) on .panel-collapse.in and .panel-body if your accordion content is really long.

Dynamic Group Header - 1
Dynamic Group Body - 1
Dynamic Group Header - 2
Dynamic Group Body - 2

Accordions with Buttons

For accordions with buttons, add a custom accordion-heading inside the <accordion-group> element. Add the .w-controls class and the .accordion-controls container for your button controls.

<div accordion-heading class="w-controls">
  <p>Header Text</p>
  <div class="accordion-controls">
    <button class="clear icon-remove flush">
      <span class="sr-only">Delete Item</span>
    </button>
  </div>
</div>

Header Text

Dynamic Group Body - 1

Cards

Cards are used to create area separation on the main stage of the app.

Make sure to use cards inside the grid for proper spacing around.

Add the class flush to card-body to clear the padding.

Basic Card Markup

The card-footer is optional and meant for supportive information like disclaimers and related info links.

Card Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repellendus modi, quod recusandae voluptate itaque nemo laudantium asperiores odit repudiandae?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatum.

Column

Column

<div class="card">
  <div class="card-header">
    <h2 class="card-title">Card Header</h2>
  </div>
  <div class="card-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repellendus modi, quod recusandae voluptate itaque nemo laudantium asperiores odit repudiandae?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatum.</p>
    <div class="row">
      <div class="col-xs-12">
        <p>Column</p>
      </div>
      <div class="col-xs-12">
        <p>Column</p>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <p><em>Some footer text.</em></p>
  </div>
</div>

Card Header with Flag

When card content is related to a provider, add a flag to make this context clear.

Usage:

  • Add the class flag to card-header.
  • Add a provider flag class (e.g. flag-benchmark) to card-header.

Provider Flags Available:

  • flag-benchmark
  • flag-google
  • flag-yelp
  • flag-facebook
  • flag-foursquare
  • flag-twitter

Card Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repellendus modi, quod recusandae voluptate itaque nemo laudantium asperiores odit repudiandae?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatum.

<div class="card">
  <div class="card-header flag flag-benchmark">
    <h2 class="card-title">Card Header</h2>
  </div>
  <div class="card-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repellendus modi, quod recusandae voluptate itaque nemo laudantium asperiores odit repudiandae?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatum.</p>
  </div>
</div>

Card Header with Supporting Information

When a card needs supporting information to the right of the header, such as a date.

Usage:

  • Add the class w-content to card-header.
  • Add a div in card-header for card-header-content
  • You'll likely want to override the max-width applied to the card-title. You want it to be as wide as possible without running into the content on the right, text that goes longer than that will be truncated with an ellipsis. To set the max-width, name-space the card and apply to the card-title: max-width: ~"calc(100% - 10em)"; where "10em" is a safe width away from the content on the right.

Card Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repellendus modi, quod recusandae voluptate itaque nemo laudantium asperiores odit repudiandae?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatum.

<div class="card">
  <div class="card-header w-content">
    <h2 class="card-title">Card Header</h2>
    <div class="card-header-content">
      <span class="icon-info"></span>
    </div>
  </div>
  <div class="card-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repellendus modi, quod recusandae voluptate itaque nemo laudantium asperiores odit repudiandae?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatum.</p>
  </div>
</div>

Grid

We use a 24col Bootstrap grid. Learn more at the Bootstrap docs.

Usage:

  • We do not use container or container-fluid.
  • Rows have a margin-top applied by default for proper spacing in the app's <main> container and to space cards nicely. Add the class no-space to the row if you need to strip this margin.
  • Add the class no-gutters to the row if you need to strip all the column gutter spacing.

8

8

8

8 offset by 8

12

12

12

12

<!-- Example specific styles. -->
<style>
  .row p {
    text-align: center;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
  }
</style>
<!-- Grid Markup -->
<div class="row">
  <div class="col-sm-8"><p>8</p></div>
  <div class="col-sm-8"><p>8</p></div>
  <div class="col-sm-8"><p>8</p></div>
</div>
<div class="row">
  <div class="col-xs-8 col-xs-offset-8"><p>8 offset by 8</p></div>
</div>
<div class="row no-gutters">
  <div class="col-sm-12"><p>12</p></div>
  <div class="col-sm-12"><p>12</p></div>
</div>
<div class="row no-space">
  <div class="col-sm-12"><p>12</p></div>
  <div class="col-sm-12"><p>12</p></div>
</div>

Icons

Use only as implied by the icon's name.

Consistent use of icons in the form of a visual language is key to the user being able to successfully interpret them with as little cognitive load as possible. Otherwise just show them text if it becomes cryptic, the user should never have to guess.

Add the class flush-icon to remove the default margin-right on an icon.

icon-spinner will automatically spin.

To add to or modify the icon font, checkout the readme.

icon-benchmark

icon-mark

icon-dashboard

icon-overview

icon-comments

icon-conversation

icon-sms-surveys

icon-time

icon-calendar

icon-survey

icon-location

icon-settings

icon-alert

icon-alert-empty

icon-user

icon-menu

icon-info

icon-intercom

icon-attention

icon-edit

icon-add

icon-search

icon-save

icon-print

icon-download

icon-close

icon-remove

icon-clear

icon-clear-text

icon-expand

icon-contract

icon-collapse

icon-expose

icon-go-to

icon-angle-left

icon-angle-right

icon-dropdown-angle

icon-down

icon-up

icon-level-down

icon-level-up

icon-spinner

icon-refresh

icon-like

icon-dislike

icon-facebook

icon-foursquare

icon-gplus

icon-twitter

icon-yelp

icon-linkedin

icon-github

icon-number

icon-accept

icon-star

icon-star-empty

icon-circle

icon-square

icon-drag

icon-checkbox

icon-check

icon-checkbox-empty

icon-radio

icon-text

icon-slider

icon-sign

icon-photo

Inputs

Text Inputs

These text input types are provided. Always provide a label above the input.

Inputs are full width by default, add the class inline for a shorter input. Otherwise you can constrain their width using the grid or setting a max-width.

For disabled inputs apply the class disabled to the label above the input and apply the disabled attribute to the input itself.

For error states, add the class error to the label above the input. If there is no label, add the class to the input itself.

<label for="unique-id">Text</label>
<input type="text" id="unique-id" placeholder="Input Text">
<label for="password-id">Password</label>
<input type="password" id="password-id" placeholder="Input Password">
<label for="date-id">Date</label>
<input type="date" id="date-id" placeholder="Input Date">
<label for="number-id">Number</label>
<input type="number" id="number-id" placeholder="Input Number">
<label for="email-id">Email</label>
<input type="email" id="email-id" placeholder="Input Email Address">
<label for="tel-id">Telephone Number</label>
<input type="tel" id="email-id" placeholder="Input Telephone Number">
<label for="textarea-id">Text Area</label>
<textarea id="textarea-id" placeholder="Input Long Text"></textarea>

<label for="unique-id2">Inline/Shorter Input</label>
<input type="text" class="inline" id="unique-id2" placeholder="Input Text">

<label for="unique-id3" class="disabled">Disabled Input</label>
<input disabled type="text" id="unique-id3" placeholder="Disabled">

<label for="unique-id4" class="error">Input with an Error</label>
<input type="text" id="unique-id4" placeholder="Error">

Inputs with Buttons

Two "text input with a button" types are available.

  1. An input with a standard button that only has an icon in it. Use the parent class input-w-button.
  2. An input with an inlaid button for search/filter inputs, etc. Use the parent class input-w-inlay with an .inlay button. For search fields, you'll likely want to make the .inlay have a .icon-search, then switch it to .icon-remove when text is in there so that the text can be cleared by clicking.

When disabled, add the class disabled to the top level container so that the label, input and button are all made disabled. Also add the disabled attribute to the input so it can't be entered by tabbing (might also add to the button as well).

When there's an error, add the class error to the top level container, just like disabled.

<div class="input-w-button">
  <label for="example">Input with a Button</label>
  <input type="text" id="example" placeholder="Text Input">
  <button class="icon-search">
    <span class="sr-only">Search</span>
  </button>
</div>
<div class="input-w-inlay">
  <label for="example">Input with a Clear Button</label>
  <input type="text" id="example" placeholder="Text Input">
  <button class="inlay icon-remove">
    <span class="sr-only">Clear Text</span>
  </button>
</div>

<div class="input-w-button disabled">
  <label for="example2">Disabled Input with a Button</label>
  <input disabled type="text" id="example2" placeholder="Text Input">
  <button class="icon-search" disabled>
    <span class="sr-only">Search</span>
  </button>
</div>

<div class="input-w-button error">
  <label for="example3">Error on Input with a Button</label>
  <input type="text" id="example3" placeholder="Text Input">
  <button class="icon-search">
    <span class="sr-only">Search</span>
  </button>
</div>

Radios & Checkboxes

Make sure to add the class input to the containing label for radios & checkboxes.

For disabling, add the .disabled class to the input and the disabled attribute to the input (so it can't be entered by tabbing).

Radios

Checkboxes

Disabled States

Error States

<h4>Radios</h4>
<label class="input">
  <input type="radio" name="uniqueRadioGroup" id="uniqueRadio1" value="radio1">
  Option 1
</label>
<label class="input">
  <input type="radio" name="uniqueRadioGroup" id="uniqueRadio2" value="radio2">
  Option 1
</label>
<label class="input">
  <input type="radio" name="uniqueRadioGroup" id="uniqueRadio3" value="radio3">
  Option 1
</label>

<h4>Checkboxes</h4>
<label class="input">
  <input type="checkbox" value="uniqueValue1">
  Option 1
</label>
<label class="input">
  <input type="checkbox" value="uniqueValue2">
  Option 2
</label>
<label class="input">
  <input type="checkbox" value="uniqueValue3">
  Option 3
</label>

<h4>Disabled States</h4>
<label class="input disabled">
  <input disabled type="checkbox" value="uniqueValue4">
  Disabled Option
</label>
<label class="input disabled">
  <input disabled type="radio" name="uniqueRadioGroup2" id="uniqueRadio4" value="radio4">
  Disabled Option
</label>

<h4>Error States</h4>
<label class="input error">
  <input type="checkbox" value="uniqueValue5">
  Option with Error
</label>
<label class="input error">
  <input type="radio" name="uniqueRadioGroup3" id="uniqueRadio5" value="radio5">
  Option with Error
</label>

Loading Indicator

Loading
<div class="loader">
  <div>
    <span class="icon-mark"></span>
    <span class="icon-mark"></span>
    <span class="icon-mark"></span>
  </div>
  <span>Loading</span>
</div>

Loading Cards

For when cards need time to load charts/data/etc. Cards with simple content do not need loading indicators as they should load on the first paint.

The card's contents will automatically be hidden until the class loaded is added to the top level .card.load.

Card with Loading Indicator

Loading

Card Body Content. Forced height to show that the indicator will center into whatever height of content is in the card-body.

<div class="card load"><!-- Add class .loaded to hide the loader and show content -->
  <div class="card-header">
    <h2 class="card-title">Card with Loading Indicator</h2>
  </div>
  <div class="card-body">
    <div class="loader">
      <div>
        <span class="icon-mark"></span>
        <span class="icon-mark"></span>
        <span class="icon-mark"></span>
      </div>
      <span>Loading</span>
    </div>
    <p style="height:200px;">Card Body Content. Forced height to show that the indicator will center into whatever height of content is in the card-body.</p>
  </div>
</div>

Modals

Basic modal markup.

We use ng2-modal for our modals. We use our own custom styles instead of bootstrap styles though.

<!-- Demo Specific Styles -->
<style>
  .example-container {
    position: relative;
  }
  .modal { position: relative !important; }
  .modal-backdrop { position: absolute !important; }
</style>
<!-- Modal Markup -->
<div class="example-container">
  <div class="modal in fade" role="dialog" style="display: block;">
    <div class="modal-dialog undefined">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close"><span>×</span></button>
          <modal-header>
            <h1>Modal header</h1>
          </modal-header>
        </div>
        <div class="modal-body">
          <modal-content>
           Hello Modal!
          </modal-content>
        </div>
        <div class="modal-footer">
          <modal-footer>
            <button class="clear">Close</button>
            <button class="primary">Save</button>
          </modal-footer>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-backdrop fade in"></div>
</div>

Warnings in Modals

For adding disclaimers, notices, warnings, etc. Form errors should appear above the form inputs, not in one of these.

<!-- Demo Specific Styles -->
<style>
  .example-container {
    position: relative;
  }
  .modal { position: relative !important; }
  .modal-backdrop { position: absolute !important; }
</style>
<!-- Modal Markup -->
<div class="example-container">
  <div class="modal in fade" role="dialog" style="display: block;">
    <div class="modal-dialog undefined">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close"><span>×</span></button>
          <modal-header>
            <h1>Modal with a Warning</h1>
          </modal-header>
        </div>
        <div class="modal-body">
          <modal-content>
           <div class="modal-warning">
             <p class="icon-attention">Here is a warning that you should know about.</p>
           </div>
           Hello Modal!
          </modal-content>
        </div>
        <div class="modal-footer">
          <modal-footer>
            <button class="clear">Close</button>
            <button class="primary">Save</button>
          </modal-footer>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-backdrop fade in"></div>
</div>

Modal with a Menu

For settings modals that need different internal views.

<!-- Demo Specific Styles -->
<style>
  .example-container {
    position: relative;
  }
  .modal { position: relative !important; }
  .modal-backdrop { position: absolute !important; }
</style>
<!-- Modal Markup -->
<div class="example-container">
  <div class="modal in fade" role="dialog" style="display: block;">
    <div class="modal-dialog undefined">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close"><span>×</span></button>
          <modal-header>
            <h1>Modal with a Menu</h1>
          </modal-header>
        </div>
        <div class="modal-body">
          <modal-content>
            <div class="modal-w-menu">
              <div class="modal-menu">
                <ul>
                  <li><button>Option 1</button></li>
                  <li><button class="active">Option 2</button></li>
                  <li><button>Option 3</button></li>
                  <li><button>Option 4</button></li>
                </ul>
              </div>
              <div class="modal-menu-stage">
                <div class="modal-body">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, et, repellendus! Obcaecati repellendus magni inventore ducimus dolor ea illo, ullam.</p>
                </div>
                <div class="modal-menu-footer">
                  <button class="clear">Cancel</button>
                  <button class="primary">Save</button>
                </div>
              </div>
            </div>
          </modal-content>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-backdrop fade in"></div>
</div>

Modal Sizes

There are 3 modal sizes available.

  • Small: Add the class small-modal to .modal-dialog.
  • Standard: This size is default.
  • Large: Add the class large-modal to .modal-dialog.

Launch a test modal:

Tables

Table markup is straight forward. You can make use of the helper classes for general alignment.

Add the class empty to a <th> that doesn't have a title.

Column 1 Column 2 Centered Right Aligned
1 2 3 4 5
a b c d
<table>
  <thead>
    <tr>
      <th class="empty"></th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Centered</th>
      <th class="right">Right Aligned</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td class="center">4</td>
      <td class="right">5</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td class="center">d</td>
      <td class="right"><button>Button</button></td>
    </tr>
  </tbody>
</table>

Responsive Tables

Add a div container .responsive-table to make tables scrollable left & right on small screens.

Column 1 Column 2 Centered Right Aligned
1 2 3 4 5
a b c d
<div class="responsive-table">
  <table>
    <thead>
      <tr>
        <th class="empty"></th>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Centered</th>
        <th class="right">Right Aligned</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td class="center">4</td>
        <td class="right">5</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td class="center">d</td>
        <td class="right"><button>Button</button></td>
      </tr>
    </tbody>
  </table>
</div>

Typography

Fonts

Benchmark uses Lato as it's base font, and Georgia as a serif font for written speach like SMS & Field Audit comments.

Lato Styles Available:

  • Lato Regular

  • Lato Bold

  • Lato Italic

  • Lato Light (font-weight: 300;)

Georgia Styles Available:

  • Georgia Regular

  • Georgia Bold

  • Georgia Italic

Paragraph Spacing

Paragraphs & header tags do not have margin unless they are followed by another paragraph or header.

Header w/no Following Content

Here is a paragraph in a div with no following paragraph. Notice how no margin is applied to the bottom of this <p> tag.

Here is a paragraph with another paragraph following it. Notice that natural paragraph spacing is added in the way of margin, but the bottom paragraph does not have bottom spacing.

This spacing technique allows paragraphs to fit nicely into containers, cards, tables, modals etc. The padding of the container can create the necessary spacing, although for this example no top or bottom padding has been applied.

Header Followed by Content

Here is some text after a header. It has no bottom spacing unless it's followed by another paragraph or header. Things fit nicely into boxes by themselves, but also have nice typography when written in a document.

Header After Content

Some paragraph content after the second header. Otherwise the header above would have no bottom spacing and fit flush with the bottom of this here box.

Helpers

A number of helper classes are provided for quick adjustment and alignment within a composition.

Left align.

Center

Right align.

Larger Font Size

Smaller Font Size

Set to

inline-block

Remove all margin.

<div style="text-align: right;">
  <p class="left">Left align.</p>
</div>
<p class="center">Center</p>
<p class="right">Right align.</p>
<p class="large">Larger Font Size</p>
<p class="small">Smaller Font Size</p>
<div>
  <h4 class="inline">Set to </h4>
  <h4 class="inline">inline-block</h4>
</div>
<h4 class="flush">Remove all margin.</h4>

Screen Reader Only

The sr-only class will hide text needed only for users of screen readers. This is useful for icon buttons and stuff screen readers would otherwise not be able to interact with.

<button class="text icon-add"><span class="sr-only">Add Something</span></button>

Color Palette

Leverage these color variables in the app by importing the _variables.less file provided in the npm benchmark-patterns package.

General Colors

white

#fff

No variable for white, just use browser default.

@clr-black

#1a1b21

@clr-bg

#e5e7ec

Main background color.

@clr-shade

#f8f8f8

Shaded foregrounds, table headers, etc.

@clr-frame

#bcbcbc

General borders.

@clr-frame-lt

#ddd

Dividers and borders that need to be lighter.

@clr-disabled

#888

@clr-remove

#777

Remove/cancel/close buttons.

@clr-shadow

rgba(0, 0, 0, 0.333)

General shadows. It is OK to make your own shadow though.

@clr-link

#3b81c3

@clr-title-bg

#2c3c4b

Card titles, modal headers, sidebar nav bg, etc.

@clr-blue

#15a3c2

Activated. Neutral sentiment.

@clr-red

#c21a15

Negative, error, danger, etc.

@clr-yellow

#ffef3d

Warning, be careful, etc.

@clr-green

#1fa015

Positive. Successful.

@clr-orange

#ffbc1a

Special buttons. Benchmark logo.

Social Providers

@clr-gplus

#e04a39

Google Plus

@clr-yelp

#db5326

@clr-facebook

#335dab

@clr-foursquare

#2f7fc2

@clr-twitter

#55acee

Grades

@grade-a

#1fa015 (@clr-green)

@grade-b

#b4bf00

@grade-c

#e3cd00

@grade-d

#e18429

@grade-f

#c21a15 (@clr-red)

Modular Scale

This is a modular scale based on a perfect 5th harmonic. These numbers are available for you when choosing px or em unit spacing and sizes. Instead of randomly choosing 10px or something, try using numbers from this list that have an intentional proportional relationship to something and let harmony reign in the kindom of benchmark devness.

Pixel Units Em Units
922.643 57.665
691.983 43.249
615.095 38.443
461.322 28.833
410.063 25.629
307.548 19.222
273.375 17.086
205.032 12.815
182.250 11.391
136.688 8.543
121.500 7.594
91.125 5.695
81.000 5.063
60.750 3.797
54.000 3.375
40.500 2.531
36.000 2.25
27.000 1.688
24.000 1.5
18.000 1.125
16.000 1
12.000 0.75
10.667 0.667
8.000 0.5
7.111 0.444
5.333 0.333
4.741 0.296
3.555 0.222
3.161 0.198
2.370 0.148
2.107 0.132
1.580 0.099
1.405 0.088
1.053 0.066