/* Americana color scheme
      (background) off white D4D4BF
      (foreground) red B22222
      (foreground strong) blue 003B8B
      (alt background) light blue bfcee2
*/

body { background-color:white; color:black;
       font-family: Verdana, Arial, sans-serif;
}

h2 { color: #003b8b;
     background-color: gray;
     border: 3px solid black;
}


p { color: black;
}

a { color: #003b8b;
    background-color: white;
}

img { border: 0;
      padding: 10px;
}


ul.nav { list-style-type: none;
         margin-left: 0;
         padding-left: 0;
         background-color: #bfcee2;
}

ul.nav li { margin: 0 10px 1em 10px;
            padding: 0.5em;
            text-align: center;
            background-color: #003B8B;
}

ul.nav li a { text-decoration: none;
              font-weight: bold;
              background-color: #003B8B;
}
ul.nav li a:link { color: white; }
ul.nav li a:visited { color: white; }
ul.nav li a:hover { color: yellow; }


.bluebox2 { clear: both; background-color: #bfcee2; background-image:  url(https://www.google.com/maps/place/Menard+Activity+Center/@41.7289605,-87.7680443,17z/data=!3m1!4b1!4m5!3m4!1s0x880e3a101c0dc3e9:0x15748d7a871fc772!8m2!3d41.7289565!4d-87.7658556?hl=en); font-size: 0.5em; background-repeat: repeat-n; padding: 3px 6px; margin-top: 6px; 
}

.boxtext { margin-top: 10px;
           border: solid 1px black;
           padding: 10px;
           width: 100%;
}

.category { background-color:white; color:#003B8B;
            font-weight: bold;
            font-size: 1.1em;
            margin-top: 1.5em;
}

.classlocations {padding: 0px 0px 3px 20px; line-height: 13px; background-image: url(classlocations.gif); background-repeat: no-repeat; font-size:11px; 
}

.equation { background-color:#bfcee2; color:#b22222;
            margin-left: 30px;
            border: outset navy;
            width: 45%;
}

	
You can create these easily using the floating ability of CSS, for example. I have created a small example on Jsfiddle over here, all the related css and html is also provided there.

.foo {
  float: left;
  width: 30px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}




.greenbox2 { clear: both; background-color: #fff; background-image: url(../images/greenbx2bkgd.gif); background-repeat: repeat-y; padding: 6px 12px; margin-top: 12px; }



.img-circle {border-radius: 50%;
}

.super { vertical-align: super;
         font-size: 0.5em;
}

.numerator { text-decoration: underline;
}

.lineabove { text-decoration: overline;
}

.myRow { margin-top: 10px;
         width: 96%;
}

.pageref { font-weight: bold;
           color: #003b8b;
           text-decoration: underline;
}

a.pageref:hover { background-color: yellow;
}

#promotions { border: 2px solid #00008B;
             border-collapse: collapse;
             margin: 1em 0 1em 12em;
}

#promotions th { border: 1px solid #003B8B;
                padding: 10px;
                color: white;
                background-color: #483d8b;
}

#promotions td { border: 1px solid #003B8B;
                padding: 10px;
}


#tutorials { border: 2px solid #00008B;
             border-collapse: collapse;
             margin: 1em 0 1em 0;
}

#tutorials th { border: 1px solid #003B8B;
                padding: 10px;
                color: white;
                background-color: #B22222;
}

#tutorials td { border: 1px solid #003B8B;
                padding: 10px;
}

#resources { border: 0;
             border-collapse: collapse;
             margin: 1em 0 1em 0;
}

#resources th { padding: 10px;
                color: white;
                background-color: #B22222;
}

#resources td { padding: 10px;
}

#resources td img {
                margin-bottom: 20px;
                text-align: center;
}

#resources td p {
                margin-bottom: 20px;
}

.resourcename { font-weight: bold;
                color: #003b8b;
}

#container { width: 88%;
             margin-left: auto;
             margin-right: auto;
}

#header { float: top;
          width: 100%;
          background-color: #bfcee2;
}

#header img { background-color: #bfcee2;
              display: inline;
}

#footer { font-size: 1.1em;
          font-style: italic;
          margin: 2em 0 3em 170px;
}

#leftcolumn { float: left;
              width: 140px;  
              background-color: #bfcee2;
              margin: 0;
}

#rightcolumn { margin-left: 170px;
}

#myComment { width: 100%;
             height: 6em;
}