/* ////////// Pillar 1 ////////// */

.color-a{display:block}
.color-a *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#ff6633}
.color-a1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #ffbda7;
  border-right:1px solid #ffbda7;
  background:#ff8c66}
.color-a2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #ffefea;
  border-right:1px solid #ffefea;
  background:#ff8359}
.color-a3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #ff8359;
  border-right:1px solid #ff8359;}
.color-a4{
  border-left:1px solid #ffbda7;
  border-right:1px solid #ffbda7}
.color-a5{
  border-left:1px solid #ff8c66;
  border-right:1px solid #ff8c66}
.color-afg{
  background:#ff6633}
  
/* ////////// Pillar-2 ////////// */

.color-b{display:block}
.color-b *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#336699}
.color-b1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #a7bdd3;
  border-right:1px solid #a7bdd3;
  background:#668cb2}
.color-b2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #eaeff4;
  border-right:1px solid #eaeff4;
  background:#5983ac}
.color-b3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #5983ac;
  border-right:1px solid #5983ac;}
.color-b4{
  border-left:1px solid #a7bdd3;
  border-right:1px solid #a7bdd3}
.color-b5{
  border-left:1px solid #668cb2;
  border-right:1px solid #668cb2}
.color-bfg{
  background:#336699}

/* ////////// Pillar-3 ////////// */

.color-c{display:block}
.color-c *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#669933}
.color-c1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #bdd3a7;
  border-right:1px solid #bdd3a7;
  background:#8cb266}
.color-c2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #eff4ea;
  border-right:1px solid #eff4ea;
  background:#83ac59}
.color-c3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #83ac59;
  border-right:1px solid #83ac59;}
.color-c4{
  border-left:1px solid #bdd3a7;
  border-right:1px solid #bdd3a7}
.color-c5{
  border-left:1px solid #8cb266;
  border-right:1px solid #8cb266}
.color-cfg{
  background:#669933}
  
/* ////////// #A17952 ////////// */

.color-d{display:block}
.color-d *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#a17952}
.color-d1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #d6c5b4;
  border-right:1px solid #d6c5b4;
  background:#b89a7d}
.color-d2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #f5f1ed;
  border-right:1px solid #f5f1ed;
  background:#b29272}
.color-d3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #b29272;
  border-right:1px solid #b29272;}
.color-d4{
  border-left:1px solid #d6c5b4;
  border-right:1px solid #d6c5b4}
.color-d5{
  border-left:1px solid #b89a7d;
  border-right:1px solid #b89a7d}
.color-dfg{
  background:#a17952}

/* ////////// #CCCC99 ////////// */

.color-e{display:block}
.color-e *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#CCCC99}
.color-e1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #e9e9d3;
  border-right:1px solid #e9e9d3;
  background:#d8d8b2}
.color-e2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #f9f9f4;
  border-right:1px solid #f9f9f4;
  background:#d5d5ac}
.color-e3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #d5d5ac;
  border-right:1px solid #d5d5ac;}
.color-e4{
  border-left:1px solid #e9e9d3;
  border-right:1px solid #e9e9d3}
.color-e5{
  border-left:1px solid #d8d8b2;
  border-right:1px solid #d8d8b2}
.color-efg{
  background:#CCCC99}

/* ////////// #CCCC99 (Background #E0E0E0) ////////// */

.color-f{display:block}
.color-f *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#CCCC99}
.color-f1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #d7d7c1;
  border-right:1px solid #d7d7c1;
  background:#d1d1aa}
.color-f2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #deded8;
  border-right:1px solid #deded8;
  background:#cfcfa6}
.color-f3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #cfcfa6;
  border-right:1px solid #cfcfa6;}
.color-f4{
  border-left:1px solid #d7d7c1;
  border-right:1px solid #d7d7c1}
.color-f5{
  border-left:1px solid #d1d1aa;
  border-right:1px solid #d1d1aa}
.color-ffg{
  background:#CCCC99}
  
/* ------- HTML Code: ------- //

////////// Pillar 1 //////////

<div>
  <b class="color-a">
  <b class="color-a1"><b></b></b>
  <b class="color-a2"><b></b></b>
  <b class="color-a3"></b>
  <b class="color-a4"></b>
  <b class="color-a5"></b></b>

  <div class="color-afg">
    <!-- content goes here -->
  </div>

  <b class="color-a">
  <b class="color-a5"></b>
  <b class="color-a4"></b>
  <b class="color-a3"></b>
  <b class="color-a2"><b></b></b>
  <b class="color-a1"><b></b></b></b>
</div>

////////// Pillar 2 //////////

<div>
  <b class="color-b">
  <b class="color-b1"><b></b></b>
  <b class="color-b2"><b></b></b>
  <b class="color-b3"></b>
  <b class="color-b4"></b>
  <b class="color-b5"></b></b>

  <div class="color-bfg">
    <!-- content goes here -->
  </div>

  <b class="color-b">
  <b class="color-b5"></b>
  <b class="color-b4"></b>
  <b class="color-b3"></b>
  <b class="color-b2"><b></b></b>
  <b class="color-b1"><b></b></b></b>
</div>

////////// Pillar 3 //////////

<div>
  <b class="color-c">
  <b class="color-c1"><b></b></b>
  <b class="color-c2"><b></b></b>
  <b class="color-c3"></b>
  <b class="color-c4"></b>
  <b class="color-c5"></b></b>

  <div class="color-cfg">
    <!-- content goes here -->
  </div>

  <b class="color-c">
  <b class="color-c5"></b>
  <b class="color-c4"></b>
  <b class="color-c3"></b>
  <b class="color-c2"><b></b></b>
  <b class="color-c1"><b></b></b></b>
</div>

////////// #999966 //////////

<div>
  <b class="color-d">
  <b class="color-d1"><b></b></b>
  <b class="color-d2"><b></b></b>
  <b class="color-d3"></b>
  <b class="color-d4"></b>
  <b class="color-d5"></b></b>

  <div class="color-dfg">
    <!-- content goes here -->
  </div>

  <b class="color-d">
  <b class="color-d5"></b>
  <b class="color-d4"></b>
  <b class="color-d3"></b>
  <b class="color-d2"><b></b></b>
  <b class="color-d1"><b></b></b></b>
</div>

////////// #A17952 //////////

<div>
  <b class="color-d">
  <b class="color-d1"><b></b></b>
  <b class="color-d2"><b></b></b>
  <b class="color-d3"></b>
  <b class="color-d4"></b>
  <b class="color-d5"></b></b>

  <div class="color-dfg">
    <!-- content goes here -->
  </div>

  <b class="color-d">
  <b class="color-d5"></b>
  <b class="color-d4"></b>
  <b class="color-d3"></b>
  <b class="color-d2"><b></b></b>
  <b class="color-d1"><b></b></b></b>
</div>

////////// #CCCC99 //////////

<div>
  <b class="color-e">
  <b class="color-e1"><b></b></b>
  <b class="color-e2"><b></b></b>
  <b class="color-e3"></b>
  <b class="color-e4"></b>
  <b class="color-e5"></b></b>

  <div class="color-efg">
    <!-- content goes here -->
  </div>

  <b class="color-e">
  <b class="color-e5"></b>
  <b class="color-e4"></b>
  <b class="color-e3"></b>
  <b class="color-e2"><b></b></b>
  <b class="color-e1"><b></b></b></b>
</div>

////////// #CCCC99 (Background #E0E0E0) //////////

<div>
  <b class="color-f">
  <b class="color-f1"><b></b></b>
  <b class="color-f2"><b></b></b>
  <b class="color-f3"></b>
  <b class="color-f4"></b>
  <b class="color-f5"></b></b>

  <div class="color-ffg">
    <!-- content goes here -->
  </div>

  <b class="color-f">
  <b class="color-f5"></b>
  <b class="color-f4"></b>
  <b class="color-f3"></b>
  <b class="color-f2"><b></b></b>
  <b class="color-f1"><b></b></b></b>
</div>

*/