Saddle Cloth Colors

by Charles Butler

HTML

<h1>
Thoroughbred Horse Racing Saddle Cloth Colors</h1>
<span class="n1"></span><span class="n2"></span><span class="n3"></span><span class="n4"></span><span class="n5"></span><span class="n6"></span><span class="n7"></span><span class="n8"></span><span class="n9"></span><span class="n10"></span><span class="n11"></span><span class="n12"></span><span class="n13"></span><span class="n14"></span><span class="n15"></span><span class="n16"></span><span class="n17"></span><span class="n18"></span><span class="n19"></span><span class="n20"></span><span class="n21"></span><span class="n22"></span><span class="n23"></span><span class="n24"></span>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
body {
  background: #FFF;
  font-family: 'Roboto', sans-serif;
}

span.n1,
span.n2,
span.n3,
span.n4,
span.n5,
span.n6,
span.n7,
span.n8,
span.n9,
span.n10,
span.n11,
span.n12,
span.n13,
span.n14,
span.n15,
span.n16,
span.n17,
span.n18,
span.n19,
span.n20,
span.n21,
span.n22,
span.n23,
span.n24 {
  font-family: 'Roboto', sans-serif;
  border-radius: 0px;
  width: 32px;
  height: 32px;
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.4);
  display: inline-block;
  margin: 2px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 2px 1px -2px rgba(0,0,0,0.2);
  cursor: default;
  border-radius: 24px;
}

span.n1 {
  background: #FF0000;
  color: #FFF;
}
span.n1:after {
  content: "1";
}
span.n2 {
  background: #f2f2f2;
  color: #000;
}
span.n2:after {
  content: "2";
}
span.n3 {
  background: #0000FF;
  color: #FFF;
}
span.n3:after {
  content: "3";
}

span.n4 {
  background: #FFFF00;
  color: #000;
}
span.n4:after {
  content: "4";
}
span.n5 {
  background: #008000;
  color: #FFF;
}
span.n5:after {
  content: "5";
}
span.n6 {
  background: #000;
  color: #FFFF00;
}
span.n6:after {
  content: "6";
}
span.n7 {
  background: #FF6600;
  color: #000;
}
span.n7:after {
  content: "7";
}
span.n8 {
  background: #FF99CC;
  color: #000;
}
span.n8:after {
  content: "8";
}
span.n9 {
  background: #00FFFF;
  color: #000;
}
span.n9:after {
  content: "9";
}
span.n10 {
  background: #800080;
  color: #FFF;
}
span.n10:after {
  content: "10";
}
span.n11 {
  background: #969696;
  color: #FF0000;
}
span.n11:after {
  content: "11";
}
span.n12 {
  background: #99CC00;
  color: #000;
}
span.n12:after {
  content: "12";
}
span.n13 {
  background: #281B04;
  color: #FFF;
}
span.n13:after {
  content: "13";
}
span.n14 {
  background: #5E0B0B;
  color: #FFFF00;
}
span.n14:after {
  content: "14";
}
span.n15 {
  background:...