Masonry.css

/**
 * This CSS file supplements MediaWiki:Common.css
 * Currently, this file only has the Masonry-specific CSS
 * This controls how the blocks behave
 */
/** 
 * This first section is a web kit feature used to round the corners, 
 * but it also has a slight effect on the vector skin tabs (Read, Edit, etc)
 * by making part of the division lines not appear.
{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*/

body { font-family: sans-serif; }

.masonry {
  max-width: 2800px;
}

.masonry .item {
  float: left;
}

/* item is invisible, but used for layout */
.item,
.item-content {
/*    background: #eee;*/
}

.item {width: 300px; 
  border: none;
  background: transparent;
  margin: 0px 10px 10px 0px;
}

.item.w2 { width: 610px; }

/* item-content is visible, and transitions size */
.item-content {
/* Commented out height so blocks can be different sized heights */
/*  height: 200px;*/
  width: 100%;
  padding: 0px 0px 0px 0px;
 /* background: #eee;*/
  border: 0px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
/* Commented out rounded corners
  border-radius: 10px;
  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
*/
}

/* COMMENTED OUT HOVER COLOR CHANGING
.item:hover .item-content {
  border-color: white;
  background: #A2C;
  cursor: pointer;
}*/


/* COMMENTED OUT RESIZING FUNCTIONALITY
.item.is-expanded,
.item.is-expanded .item-content {
  width: 620px;
}

.item.is-expanded {
  z-index: 2;
}

.item.is-expanded .item-content {
  background: #F90;
}
*/

/* Boxes like "Featured Article", "Random OCAD" and "Tutorials" on main page, default is green */
table.main-page-box {
  width:       100%;
  border:     1px solid #cef2e0;
  background: #f5fffa;
  margin:     0 1% 0 0;
  padding:    5px;
}
table.main-page-box th {
  color:      black;
  padding:    10px 7px 10px 7px;
  background: #cef2e0;
  border:     1px solid #a3bfb1;
  text-align: left;
  font-size:  130%;
}
table.main-page-box td {
  padding:    8px 2px 0px 2px;
  font-size:      110%;
  vertical-align: top;
}
table.main-page-box-green {
  border:       1px solid #cef2e0;
  background:   #f5fffa;
}
table.main-page-box-green th {
  background:   #cef2e0;
  border:       1px solid #a3bfb1;
}
table.main-page-box-orange {
  border:       1px solid #ffcc99;
  background:   #fff5eb;
}
table.main-page-box-orange th {
  background:   #ffc299;
  border:       1px solid #cc5200;
}
table.main-page-box-yellow {
  background:   #FFFBCC;
  border:       1px solid #FFF25A;
}
table.main-page-box-yellow th {
  background:   #FFF582;
  border:       1px solid #FFF25A;
}
table.main-page-box-blue {
  border:       1px solid #cedff2;
  background:   #f5faff;
}
table.main-page-box-blue th {
  background:   #cedff2;
  border:       1px solid #a3b0bf;
}
table.main-page-box-white {
  border:       1px solid #aaaaaa;
  background:   #f7f7fb;
}
table.main-page-box-white th {
  background:   #eeeeee;
  border:       1px solid #cccccc;
}
table.main-page-box-purple {
  border:       1px solid #9988aa;
  background:   #f7f7fb;
}
table.main-page-box-purple th {
  background:   #9999cc;
  border:       1px solid #9988cc;
}