﻿/********************************************
  COLOR SCHEMA                                
*********************************************
  These are basic colors only. They include
  a range from near-black to near-white, an
  orangey red called Dirt, and a gaggle of
  pastels.             
********************************************/


/***********
  CENTRALS
***********/

.tx-paper { color: hsla(0, 0%, 95%, 1); }
.tx-silver { color: hsla(0, 0%, 75%, 1); }
.tx-gray { color: hsla(0, 0%, 55%, 1); }
.tx-steel { color: hsla(0, 0%, 35%, 1); }
.tx-charcoal { color: hsla(0, 0%, 15%, 1); }

.tx-shadow { text-shadow: 0 0.03em 0.03em hsla(0, 0%, 15%, 0.3); -moz-text-shadow: 0 0.03em 0.03em hsla(0, 0%, 15%, 0.3); -webkit-text-shadow: 0 0.03em 0.03em hsla(0, 0%, 15%, 0.3); }

.bg-paper { background: hsla(0, 0%, 95%, 1); }
.bg-silver { background: hsla(0, 0%, 75%, 1); }
.bg-gray { background: hsla(0, 0%, 55%, 1); }
.bg-steel { background: hsla(0, 0%, 35%, 1); }
.bg-charcoal { background: hsla(0, 0%, 15%, 1); }

.bg-paper-film { background: hsla(0, 0%, 95%, 0.7); }
.bg-silver-film { background: hsla(0, 0%, 75%, 0.7); }
.bg-gray-film { background: hsla(0, 0%, 55%, 0.7); }
.bg-steel-film { background: hsla(0, 0%, 35%, 0.7); }
.bg-charcoal-film { background: hsla(0, 0%, 15%, 0.7); }

.bg-paper-glass { background: hsla(0, 0%, 95%, 0.3); }
.bg-silver-glass { background: hsla(0, 0%, 75%, 0.3); }
.bg-gray-glass { background: hsla(0, 0%, 55%, 0.3); }
.bg-steel-glass { background: hsla(0, 0%, 35%, 0.3); }
.bg-charcoal-glass { background: hsla(0, 0%, 15%, 0.3); }

[class*="br-paper"] { border-color: hsla(0, 0%, 95%, 1); }
[class*="br-silver"] { border-color: hsla(0, 0%, 75%, 1); }
[class*="br-gray"] { border-color: hsla(0, 0%, 55%, 1); }
[class*="br-steel"] { border-color: hsla(0, 0%, 35%, 1); }
[class*="br-charcoal"] { border-color: hsla(0, 0%, 15%, 1); }


/********************************
  RED EARTH VARIATIONS           
*********************************
  Main:  hsla(15, 100%, 40%, 1)  
********************************/

.tx-dirt { color: hsla(15, 100%, 40%, 1); }
.tx-dirt-dark { color: hsla(15, 100%, 30%, 1); }
.tx-dirt-bright { color: hsla(15, 100%, 50%, 1); }
.tx-dirt-dull { color: hsla(15, 80%, 40%, 1); }
.tx-dirt-dim { color: hsla(15, 50%, 40%, 1); }

a.tx-dirt:hover { color: hsla(15, 100%, 50%, 1); }
a.tx-dirt:visited { color: hsla(15, 100%, 30%, 1); }

.bg-dirt { background: hsla(15, 100%, 40%, 1); }
.bg-dirt-film { background: hsla(15, 100%, 40%, 0.7); }
.bg-dirt-glass { background: hsla(15, 100%, 40%, 0.3); }
.bg-dirt-bright { background: hsla(15, 100%, 50%, 1); }
.bg-dirt-bright-film { background: hsla(15, 100%, 50%, 0.7); }
.bg-dirt-bright-glass { background: hsla(15, 100%, 50%, 0.3); }
.bg-dirt-dark { background: hsla(15, 100%, 30%, 1); }
.bg-dirt-dark-film { background: hsla(15, 100%, 30%, 0.7); }
.bg-dirt-dark-glass { background: hsla(15, 100%, 30%, 0.3); }

[class*="br-dirt"] { border-color: hsla(15, 100%, 40%, 1); }
[class*="br-dirt-dark"] { border-color: hsla(15, 100%, 30%, 1); }
[class*="br-dirt-bright"] { border-color: hsla(15, 100%, 50%, 1); }
[class*="br-dirt-dull"] { border-color: hsla(15, 80%, 40%, 1); }
[class*="br-dirt-dim"] { border-color: hsla(15, 50%, 40%, 1); }


/******************
  SHADED NEUTRALS  
******************/

.tx-ivory { color: hsla(60, 100%, 97%, 1); }
.tx-sand { color: hsla(50, 100%, 97%, 1); }
.tx-mint { color: hsla(130, 100%, 97%, 1); }
.tx-dogwood { color: hsla(330, 100%, 97%, 1); }
.tx-foam { color: hsla(250, 100%, 97%, 1); }

.bg-ivory { background: hsla(60, 100%, 97%, 1); }
.bg-sand { background: hsla(50, 100%, 97%, 1); }
.bg-mint { background: hsla(130, 100%, 97%, 1); }
.bg-dogwood { background: hsla(330, 100%, 97%, 1); }
.bg-foam { background: hsla(250, 100%, 97%, 1); }

.bg-ivory-glass { background: hsla(60, 100%, 90%, 0.3); }
.bg-sand-glass { background: hsla(50, 100%, 90%, 0.3); }
.bg-mint-glass { background: hsla(130, 100%, 90%, 0.3); }
.bg-dogwood-glass { background: hsla(330, 100%, 90%, 0.3); }
.bg-foam-glass { background: hsla(250, 100%, 90%, 0.3); }

[class*="br-ivory"] { border-color: hsla(60, 100%, 97%, 1); }
[class*="br-sand"] { border-color: hsla(50, 100%, 97%, 1); }
[class*="br-mint"] { border-color: hsla(130, 100%, 97%, 1); }
[class*="br-dogwood"] { border-color: hsla(330, 100%, 97%, 1); }
[class*="br-foam"] { border-color: hsla(250, 100%, 97%, 1); }