We have some default styles for the body: a background color, removing the padding/margin etc.

body {
   margin: 0;
   padding: 0;
   background: #EEE;
   font: 10px/13px 'Lucida Sans',sans-serif;
}

/* Here's the "wrapper" that holds all of our tiles. */

.wrap {
   overflow: hidden;   // The use of overflow:hidden allows us to apply floats to the tiles within.
   margin: 10px;

   text-align: center;
   margin-bottom: 20px;
}

.more {margin: 10px}

/* and styles for the desription boxes, etc. */

.hidden {display: none}
.viz    {display: inline-block}

#desc_container { }
#description p {
    line-height: 1.2em; 
    color: black;
    margin-bottom: 15px
}

#description {
    text-align: left;
    padding: 20px 20px 5px 20px; 
    margin: 10px 20px; 
    background-color: #cccccc; 
    border: 1px solid gray; 
    width: 70%;
    border-radius: 10px;
}

// from http://stackoverflow.com/questions/5367026/give-shadow-effect-using-jquery

.not-used-shadow {
    -moz-box-shadow: 3px 3px 4px #ccc;
    -webkit-box-shadow: 3px 3px 4px #ccc;
    box-shadow: 3px 3px 4px #ccc; /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cccccc')"; /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#cccccc');
}

.shadow
{
    -moz-box-shadow: 3px 3px 4px #ccc;
    -webkit-box-shadow: 5px 4px #666;
}

#close_button{ background-color: white; cursor: pointer; float:right; margin: -10px -10px 10px 10px}


/* this floating tiles treatment from:
   http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/
 */

/* Next up is the box (which corresponds to a tile).  */

.box {
//   float: left;		// The float creates the grid, by ensuring that tiles are automatically laid out in rows.
   position: relative;  // The relative positioning, used in conjunction with position:absolute on boxInner, makes the boxes remain square regardless of content.
   width: 20%;		// The width and padding-bottom are what determine the size of the box and make it square. 
   margin: 10px;
   display: inline-block;
   vertical-align: top;
}

/* This is the actual content area for each tile.  It is positioned with 10 pixels around each edge. */

.boxInner {
//   position: absolute;
   left: 10px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;

   width: 100%;
   background-color: #96b6D6;
   text-align: center;
   font-family:'Lato',sans-serif;
   padding: 15px 0px; 
}

/* We want our images (which are square) to fill the full tile width, so we use width:100% */

.boxInner img {   width: 100%;}
.boxInner p   {text-align: left; color: white}
.boxInner .inline-link { width: 100%;}
.boxInner ul  {list-style: initial; padding: 0px 0px 0px 40px}
.boxInner li  {display: list-item; color: white; text-align:left}

.boxInner:link,    .boxInner:link span    {color:#fff!important; cursor:pointer; font-weight:400;}
.boxInner:visited, .boxInner:visited span {color:#fff!important; cursor:pointer; font-weight:400;}
.boxInner:hover,   .boxInner:hover span   {color:#4679AC!important; cursor:pointer; text-decoration:none; font-weight:400;}
.boxInner:active,  .boxInner:active span  {color:#4679AC!important; cursor:pointer; text-decoration:none; font-weight:400;}

.inline-link { }

.title       { font-size:28px;     font-family: 'KaushanScript-Regular'; color: white!important; display: block}
.title:hover { color: #4679AC!important; }

.title:link,    .title:link span    { font-size:28px;     font-family: 'KaushanScript-Regular'; color: white!important; }
.title:visited, .title:visited span { font-size:28px;     font-family: 'KaushanScript-Regular'; color: white!important; }
.title:hover,   .title:hover span   { font-size:28px;     font-family: 'KaushanScript-Regular'; color: white!important; }
.title:active,  .title:active span  { font-size:28px;     font-family: 'KaushanScript-Regular'; color: white!important; }

@media screen and (max-width: 800px) and (min-width: 600px) {
    .title:link,    .title:link span    { font-size:20px;     font-family: 'KaushanScript-Regular'; color: white!important; }
    .title:visited, .title:visited span { font-size:20px;     font-family: 'KaushanScript-Regular'; color: white!important; }
    .title:hover,   .title:hover span   { font-size:20px;     font-family: 'KaushanScript-Regular'; color: white!important; }
    .title:active,  .title:active span  { font-size:20px;     font-family: 'KaushanScript-Regular'; color: white!important; }
    .title  { font-size: 20px; margin-top: auto; margin-bottom: auto; display:inline}
}

@media screen and (max-width: 599px) and (min-width: 100px) {
    .inline-link { display: inline-block; }
    .title:link,    .title:link span    { font-size:20px;     font-family: 'KaushanScript-Regular'; color: white!important; }
    .title:visited, .title:visited span { font-size:20px;     font-family: 'KaushanScript-Regular'; color: white!important; }
    .title:hover,   .title:hover span   { font-size:20px;     font-family: 'KaushanScript-Regular'; color: white!important; }
    .title:active,  .title:active span  { font-size:20px;     font-family: 'KaushanScript-Regular'; color: white!important; }
    .title  { font-size: 20px; margin-top: auto; margin-bottom: auto; display:inherit}
    .icon-general {margin-left: 60px; margin-right: 10px}
    .boxInner {text-align: left}
}

@media screen and (max-width: 500px) and (min-width: 100px) {
    .icon-general {margin-left: 10px;}
}

/* Here are the hover styles used to reveal the text box.  Note that we have separate styles for touch and non-touch environments; more on that in a moment. */

body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 0;
}

/* Here are our media queries to "snap" the number of tiles per row: */

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {
//      width: 100%;
      width: 250px;
      margin: 4px;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {
//      width: 50%;
      width: 350px;
      margin: 10px;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {
      width: 33.3%;
      margin: 10px;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
//      padding-bottom: 25%;

      margin: 5px;
   }
}

@media only screen and (min-width : 1291px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 20%;
//      padding-bottom: 20%;

      margin: 15px;
   }
}