Backgrounds

<!-- bg black -->
<div class="u-bg-black">
  <p>Black</p>
</div>

<!-- bg red -->
<div class="u-bg-red">
  <p>Red</p>
</div>
	
<!-- bg red dark 10 -->
<div class="u-bg-red-dark-10">
  <p>Red Dark 10</p>
</div>
	
<!-- bg red dark 20 -->
<div class="u-bg-red-dark-20">
  <p>Red Dark 20</p>
</div>

<!-- bg blue -->
<div class="u-bg-blue">
  <p>Blue</p>
</div>
	
<!-- bg blue dark 10 -->
<div class="u-bg-blue-dark-10">
  <p>Blue Dark 10</p>
</div>
	
<!-- bg blue dark 20 -->
<div class="u-bg-blue-dark-20">
  <p>Blue Dark 20</p>
</div>
	
<!-- bg light blue -->
<div class="u-bg-light-blue">
  <p>Light Blue</p>
</div>

<!-- bg light gray -->
<div class="u-bg-light-gray">
  <p>Light Gray</p>
</div>
	
<!-- bg gray -->
<div class="u-bg-gray">
  <p>Gray</p>
</div>
	
<!-- bg medium gray -->
<div class="u-bg-medium-gray">
  <p>Medium Gray</p>
</div>
	
<!-- bg dark gray -->
<div class="u-bg-dark-gray">
  <p>Dark Gray</p>
</div>

<!-- bg black overlays -->
<div class="u-bg-black-overlay-10"><p>Black Overlay 10</p></div>
<div class="u-bg-black-overlay-20"><p>Black Overlay 20</p></div>
<div class="u-bg-black-overlay-30"><p>Black Overlay 30</p></div>
<div class="u-bg-black-overlay-40"><p>Black Overlay 40</p></div>
<div class="u-bg-black-overlay-50"><p>Black Overlay 50</p></div>
<div class="u-bg-black-overlay-60"><p>Black Overlay 60</p></div>
<div class="u-bg-black-overlay-70"><p>Black Overlay 70</p></div>
<div class="u-bg-black-overlay-80"><p>Black Overlay 80</p></div>
<div class="u-bg-black-overlay-90"><p>Black Overlay 90</p></div>

<!-- bg blue overlays -->
<div class="u-bg-blue-overlay-10"><p>Blue Overlay 10</p></div>
<div class="u-bg-blue-overlay-20"><p>Blue Overlay 20</p></div>
<div class="u-bg-blue-overlay-30"><p>Blue Overlay 30</p></div>
<div class="u-bg-blue-overlay-40"><p>Blue Overlay 40</p></div>
<div class="u-bg-blue-overlay-50"><p>Blue Overlay 50</p></div>
<div class="u-bg-blue-overlay-60"><p>Blue Overlay 60</p></div>
<div class="u-bg-blue-overlay-70"><p>Blue Overlay 70</p></div>
<div class="u-bg-blue-overlay-80"><p>Blue Overlay 80</p></div>
<div class="u-bg-blue-overlay-90"><p>Blue Overlay 90</p></div>

<!-- bg red overlays -->
<div class="u-bg-red-overlay-10"><p>Red Overlay 10</p></div>
<div class="u-bg-red-overlay-20"><p>Red Overlay 20</p></div>
<div class="u-bg-red-overlay-30"><p>Red Overlay 30</p></div>
<div class="u-bg-red-overlay-40"><p>Red Overlay 40</p></div>
<div class="u-bg-red-overlay-50"><p>Red Overlay 50</p></div>
<div class="u-bg-red-overlay-60"><p>Red Overlay 60</p></div>
<div class="u-bg-red-overlay-70"><p>Red Overlay 70</p></div>
<div class="u-bg-red-overlay-80"><p>Red Overlay 80</p></div>
<div class="u-bg-red-overlay-90"><p>Red Overlay 90</p></div>

<!-- bg transparent -->
<div class="u-bg-transparent">
  <p>Transparent</p>
</div>

<!-- bg danger -->
<div class="u-bg-danger">
  <p>Danger</p>
</div>
	
<!-- bg info -->
<div class="u-bg-info">
  <p>Info</p>
</div>
	
<!-- bg success -->
<div class="u-bg-success">
  <p>Success</p>
</div>
	
<!-- bg warning -->
<div class="u-bg-warning">
  <p>Warning</p>
</div>

<!-- bg quarter transparent to white -->
<div class="u-bg-gradient-quarter-transparent-to-white">
  <p>Quarter Transparent to White</p>
</div>
	
<!-- bg half black to transparent -->
<div class="u-bg-gradient-half-black-to-transparent">
  <p>Half Black to Transparent</p>
</div>

<!-- bg chevrons -->
<div class="u-bg-chevrons">
  <p>Chevrons</p>
</div>
	
<!-- bg gradient over chevrons -->
<div class="u-bg-gradient-over-chevrons">
  <p>Gradient over Chevrons</p>
</div>
	
<!-- bg blue over chevrons -->
<div class="u-bg-blue-over-chevrons">
  <p>Blue over Chevrons</p>
</div>
	
<!-- bg red over chevrons -->
<div class="u-bg-red-over-chevrons">
  <p>Red over Chevrons</p>
</div>
	
<!-- bg yellow over chevrons -->
<div class="u-bg-yellow-over-chevrons">
  <p>Yellow over Chevrons</p>
</div>

<!-- bg pies -->
<div class="u-bg-chevrons">
  <p>Pies</p>
</div>
	
<!-- bg gradient over pies -->
<div class="u-bg-gradient-over-pies">
  <p>Gradient over Pies</p>
</div>
	
<!-- bg blue over pies -->
<div class="u-bg-blue-over-pies">
  <p>Blue over Pies</p>
</div>
	
<!-- bg red over pies -->
<div class="u-bg-red-over-pies">
  <p>Red over Pies</p>
</div>
	
<!-- bg yellow over pies -->
<div class="u-bg-yellow-over-pies">
  <p>Yellow over Pies</p>
</div>

<!-- bg stars -->
<div class="u-bg-stars">
  <p>Stars</p>
</div>
	
<!-- bg gradient over stars -->
<div class="u-bg-gradient-over-stars">
  <p>Gradient over Stars</p>
</div>
	
<!-- bg blue over stars -->
<div class="u-bg-blue-over-stars">
  <p>Blue over Stars</p>
</div>
	
<!-- bg red over stars -->
<div class="u-bg-red-over-stars">
  <p>Red over Stars</p>
</div>
	
<!-- bg yellow over stars -->
<div class="u-bg-yellow-over-stars">
  <p>Yellow over Stars</p>
</div>

<!-- bg black stripe -->
<div class="u-bg-black-stripe">
  <p>Black Stripe</p>
</div>

<!-- bg blue stripe -->
<div class="u-bg-blue-stripe">
  <p>Blue Stripe</p>
</div>

<!-- bg checkered -->
<div class="u-bg-checkered">
  <p>Checkered</p>
</div>

<!-- bg seal image -->
<div class="u-bg-image-seal">
  <p>Image - Seal</p>
</div>
	
<!-- bg gradient over seal image -->
<div class="u-bg-gradient-over-image-seal">
  <p>Gradient over Image - Seal</p>
</div>
	
<!-- bg black over seal image -->
<div class="u-bg-black-over-image-seal">
  <p>Black over Image - Seal</p>
</div>