/* ==========================================================================
   SKINS

   - Backgrounds
   - Colors
   - Border colors
   - SVG fills
   - SVG strokes

   ========================================================================== */

/* Backgrounds */

.bg-navy {    background-color: navy; }
.bg-blue {    background-color: blue; }
.bg-aqua {    background-color: aqua; }
.bg-teal {    background-color: teal; }
.bg-olive {   background-color: olive; }
.bg-green {   background-color: green; }
.bg-lime {    background-color: lime; }
.bg-yellow {  background-color: yellow; }
.bg-orange {  background-color: orange; }
.bg-red {     background-color: red; }
.bg-fuchsia { background-color: fuchsia; }
.bg-purple {  background-color: purple; }
.bg-maroon {  background-color: maroon; }
.bg-white {   background-color: white; }
.bg-gray {    background-color: gray; }
.bg-silver {  background-color: silver; }
.bg-black {   background-color: black; }

/* Colors */

.navy {       color: navy; }
.blue {       color: blue; }
.aqua {       color: aqua; }
.teal {       color: teal; }
.olive {      color: olive; }
.green {      color: green; }
.lime {       color: lime; }
.yellow {     color: yellow; }
.orange {     color: orange; }
.red {        color: red; }
.fuchsia {    color: fuchsia; }
.purple {     color: purple; }
.maroon {     color: maroon; }
.white {      color: white; }
.silver {     color: silver; }
.gray {       color: gray; }
.black {      color: black; }

/* Border colors 

   Use with another border utility that sets border-width and style 
   i.e .border { border-width: 1px; border-style: solid; }     
*/

.border--navy {    border-color: navy; }
.border--blue {    border-color: blue; }
.border--aqua {    border-color: aqua; }
.border--teal {    border-color: teal; }
.border--olive {   border-color: olive; }
.border--green {   border-color: green; }
.border--lime {    border-color: lime; }
.border--yellow {  border-color: yellow; }
.border--orange {  border-color: orange; }
.border--red {     border-color: red; }
.border--fuchsia { border-color: fuchsia; }
.border--purple {  border-color: purple; }
.border--maroon {  border-color: maroon; }
.border--white {   border-color: white; }
.border--gray {    border-color: gray; }
.border--silver {  border-color: silver; }
.border--black {   border-color: black; }

/* Fills for SVG */

.fill-navy {    fill: navy; }
.fill-blue {    fill: blue; }
.fill-aqua {    fill: aqua; }
.fill-teal {    fill: teal; }
.fill-olive {   fill: olive; }
.fill-green {   fill: green; }
.fill-lime {    fill: lime; }
.fill-yellow {  fill: yellow; }
.fill-orange {  fill: orange; }
.fill-red {     fill: red; }
.fill-fuchsia { fill: fuchsia; }
.fill-purple {  fill: purple; }
.fill-maroon {  fill: maroon; }
.fill-white {   fill: white; }
.fill-gray {    fill: gray; }
.fill-silver {  fill: silver; }
.fill-black {   fill: black; }

/* Strokes for SVG */

.strokes-navy {    stroke: navy; }
.strokes-blue {    stroke: blue; }
.strokes-aqua {    stroke: aqua; }
.strokes-teal {    stroke: teal; }
.strokes-olive {   stroke: olive; }
.strokes-green {   stroke: green; }
.strokes-lime {    stroke: lime; }
.strokes-yellow {  stroke: yellow; }
.strokes-orange {  stroke: orange; }
.strokes-red {     stroke: red; }
.strokes-fuchsia { stroke: fuchsia; }
.strokes-purple {  stroke: purple; }
.strokes-maroon {  stroke: maroon; }
.strokes-white {   stroke: white; }
.strokes-gray {    stroke: gray; }
.strokes-silver {  stroke: silver; }
.strokes-black {   stroke: black; }