<div class="sg-header">
  Primary
</div>
<div class="sg-buttons">
  <a href="/" class="button">Button text</a>
  <button class="button">Button text</button>
  <input type="button" class="button" value="Button text">
</div>
<div class="sg-header">
  Reverse
</div>
<div class="sg-buttons sg-buttons--button-reverse">
  <a href="/" class="button-reverse">Button text</a>
  <button class="button-reverse">Button text</button>
  <input type="button" class="button-reverse" value="Button text">
</div>
<div class="sg-header">
  Cancel/Warning
</div>
<div class="sg-buttons">
  <a href="/" class="button-disable">Button text</a>
  <button class="button-disable">Button text</button>
  <input type="button" class="button-disable" value="Button text">
</div>
<div class="sg-header">
  Blog Image Buttons
</div>
<div class="sg-buttons">
  <div class="button-prev">
    <a href="/" class="button-prev__text">Prev Button</a>
  </div>
  <div class="button-prev">
    <button class="button-prev__text">Prev Button</button>
  </div>
  <div class="button-prev">
    <input type="button" class="button-prev__text" value="Prev Button">
  </div>
</div>
<div class="sg-buttons">
  <div class="button-next">
    <a href="/" class="button-next__text">Next Button</a>
  </div>
  <div class="button-next">
    <button class="button-next__text">Next Button</button>
  </div>
  <div class="button-next">
    <input type="button" class="button-next__text" value="Next Button">
  </div>
</div>
<div class="sg-buttons">
  <div class="button-top">
    <a href="/" class="button-top__text">Top Button</a>
  </div>
  <div class="button-top">
    <button class="button-top__text">Top Button</button>
  </div>
  <div class="button-top">
    <input type="button" class="button-top__text" value="Top Button">
  </div>
</div>
<div class="sg-buttons">
  <div class="button-bottom">
    <a href="/" class="button-bottom__text">Bottom Button</a>
  </div>
  <div class="button-bottom">
    <button class="button-bottom__text">Bottom Button</button>
  </div>
  <div class="button-bottom">
    <input type="button" class="button-bottom__text" value="Bottom Button">
  </div>
</div>
<div class="sg-header">
  Large Buttons
</div>
<div class="sg-buttons">
  <a href="/" class="button-large">Button text</a>
  <button class="button-large">Button text</button>
  <input type="button" class="button-large" value="Button text">
</div>

<ul class="sg-colors">
  <li class="sg-color color--blue"></li>
  <li class="sg-color color--brown"></li>
  <li class="sg-color color--light-blue"></li>
  <li class="sg-color color--green"></li>
  <li class="sg-color color--gray"></li>
</ul>

<form action="submit" class="form">
  <fieldset class="form__group">
    <fieldset class="form__fieldset">
      <label class="form__label" for="name">Name</label>
      <input type="text" class="form__input" name="name" value="" placeholder="*Required" required="">
    </fieldset>
    <fieldset class="form__fieldset">
      <label class="form__label" for="email">Email</label>
      <input type="email" class="form__input" name="email" value="" placeholder="*Required" required="">
    </fieldset>
  </fieldset>
  <fieldset class="form__group">
    <fieldset class="form__fieldset">
      <label class="form__label" for="address">Address</label>
      <input type="text" class="form__input" name="address" value="" placeholder="*Required" required="">
    </fieldset>
  </fieldset>
  <fieldset class="form__group">
    <fieldset class="form__fieldset">
      <label class="form__label" for="">Contact</label>
      <div class="form__radio">
        <input type="radio" class="form__radio" id="yes" name="contact">
        <label class="form__label" for="yes">Yes</label>
        <div class="check"></div>
      </div>
      <div class="form__radio">
        <input type="radio" id="off" name="contact">
        <label class="form__label" for="off">Off</label>
        <div class="check"></div>
      </div>
    </fieldset>
  </fieldset>
  <fieldset class="form__group">
    <fieldset class="form__fieldset">
      <label class="form__label" for="">Best time to contact you?</label>
      <div class="form__dropdown">
        <select class="form__select">
          <option class="form__option" value="morning">Morning</option>
          <option class="form__option" value="afternoon">Afternoon</option>
          <option class="form__option" value="evening">Evening</option>
        </select>
      </div>
    </fieldset>
  </fieldset>
</form>

<div class="sg-links">
  Clink on the <a href="/">link</a>!
</div>

<div class="sg-logos">
  <span class="sg-logo">
    <div class="sg-header">Black</div>
    <img src="https://s3.amazonaws.com/timberlinefinancial/logo-black.png">
  </span>
  <span class="sg-logo">
    <div class="sg-header">White</div>
    <img src="https://s3.amazonaws.com/timberlinefinancial/logo-white.png">
  </span>
  <span class="sg-logo">
    <div class="sg-header">Color</div>
    <img src="https://s3.amazonaws.com/timberlinefinancial/logo-color.png">
  </span>
</div>

<div class="sg-header">
  Main Menu
</div>
<div class="sg-buttons">
  <ul class="menu-circles" role="menu">
    <li data-item-id="1" class="menu-circles__item active" role="menuitem">
      <button class="menu-circles__icon" role="button"></button>
    </li>
    <li data-item-id="2" class="menu-circles__item" role="menuitem">
      <button class="menu-circles__icon" role="button"></button>
    </li>
    <li data-item-id="3" class="menu-circles__item" role="menuitem">
      <button class="menu-circles__icon" role="button"></button>
    </li>
    <li data-item-id="4" class="menu-circles__item" role="menuitem">
      <button class="menu-circles__icon" role="button"></button>
    </li>
    <li data-item-id="5" class="menu-circles__item" role="menuitem">
      <button class="menu-circles__icon" role="button"></button>
    </li>
  </ul>
</div>

<div class="sg-buttons">
  <span class="toggle-off">
    <a href="/" class="toggle-off__link">Inactive</a>
  </span>
  <span class="toggle-on">
    <a href="/" class="toggle-on__link">Active</a>
  </span>
</div>

<h1>This is a level one heading</h1>
<h2>This is a level two heading</h2>
<h3>This is a level three heading</h3>
<h4>This is a level four heading</h4>
<h5>This is a level five heading</h5>
<h6>This is a level six heading</h6>

<h6>Large Text, also default</h6>
<p class="text--large">Large text (20px) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt veritatis sequi nobis earum dicta vero impedit esse at, debitis doloremque eius inventore qui, et dolores eaque eos iste repellendus non.
</p>
<h6>Small Text</h6>
<p class="text--small">Default text (16px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h6>UL w/ circle</h6>
<ul class="circle">
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>
<h6>OL w/ numbers</h6>
<ol class="disc">
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ol>
<p>Otherwise, OL and UL are reset without list-type for use with floats</p>