dawn's cdrl categories

by mrjordy

HTML

<div class = "CdrlSubsTable">
  <div class = "Box One">
    <div class = "Title">Meetings Library</div>
      <span class = "cdrls">A001</span>
      <span class = "cdrls">A002</span>
      <span class = "cdrls">A003</span>
  </div>
  <div class = "Box Two">
    <div class = "Title">Cost Library</div>
      <span class = "cdrls">A005</span>
      <span class = "cdrls">A007</span>
      <span class = "cdrls">A008</span>
      <span class = "cdrls">A009</span>
  </div>
  <div class = "Box Three">
    <div class = "Title">RFC Library</div>
      <span class = "cdrls">A015</span>
  </div>
  <div class = "Box Four">
    <div class = "Title">Installation Tech<br>Documentation &amp; Plan Library</div>
      <span class = "cdrls">A019</span>
  </div>
  <div class = "Box Five">
    <div class = "Title">Testing Library</div>
      <span class = "cdrls">A020</span>
      <span class = "cdrls">A021</span>
      <span class = "cdrls">A022</span>
  </div>
  <div class = "Box Six">
    <div class = "Title">CASE Information Library</div>
      <span class = "cdrls">A044</span>
  </div>
  <div class = "Box Seven">
    <div class = "Title">Transition Library</div>
      <span class = "cdrls">A001*</span>
      <span class = "cdrls">A002*</span>
      <span class = "cdrls">A003*</span>
      <span class = "cdrls">A052</span>
      <span class = "cdrls">A053</span>
      <span class = "cdrls">A054</span>
      <span class = "cdrls">A055</span>
      <span class = "cdrls">A056</span>
<span class = "note">* Transition Specific</span>
  </div>
  <div class = "Box Eight">
    <div class = "Title">Other Library</div>
      <span class = "cdrls">A004</span>
      <span class = "cdrls">A006 </span>
      <span class = "cdrls">A010 — A014</span>
      <span class = "cdrls">A016 — A018</span>
      <span class = "cdrls">A023 — A043</span>
      <span class = "cdrls">A045 — A051</span>
      <span class = "cdrls">A057 — A061</span>
  </div>
</div>

CSS

body {
  background: #F5F5F3;
}
.CdrlSubsTable {
  width: 100%;
  height: auto;
  position: relative;
  font-family: sans-serif;
  font-size: 14px;
}
@media (min-width: 1250px) {
.CdrlSubsTable > .Box {
    margin-right: calc(12.5% - 156px);
}
}
@media (max-width: 670px) {
.CdrlSubsTable > .Box {
    display: block !important;
}
}
.CdrlSubsTable > .Box > .Title {
  text-align: center;
  border-bottom: 1px solid #999;
  border-left: 2px solid #999;
  padding: 3px 3px;
  font-weight: bold;
}
.CdrlSubsTable > .Box {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 6px 10px;
  vertical-align: top;
}
.Box > .cdrls {
  display: block;
}
.Box > .cdrls:before {
    content: '\2520';
    font-size: 18px;
    line-height: 17px;
    color: #999;
}
.Box > .cdrls:last-child:before {
    content: '\2516';
}
.Box > .note {
  display: block;
  color: #666;
  padding-top: 5px;
}