grid.css

.apps {
  width: 100%;
  height: 100%;
	z-index: 1;
}

/* pages */
.apps > div {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 0 auto;
  display: none;
}

/* Here users can view the clock while grid is loading -> better experience */
#landing-page {
  display: block;
}

.apps ol {
  width: -moz-calc(4 * 8rem);
  padding: 0;
  list-style-type: none;
  display: block;
  margin: 0 auto;
	margin-top: .3rem;
}

.apps ol > li {
  position: relative;
  width: 8rem;
  display: inline-block;
  float: left;
  text-align: center;
}

/* Maximum 16 icons for page */
.apps ol > li:nth-child(17) {
  display: none;
}

/* Option to delete apps */
.apps ol > li span.options {
  position: absolute;
  top: 4.6rem;
  left: 0;
  width: 90%;
  height: 2.6rem;
  z-index: 2;
  background: url(../resources/images/delete.png) no-repeat right top;
}

/* Container -> icon + label */
.apps ol > li > div {
  height: 100%;
  width: 100%;
	margin-top: .5rem;
	margin-bottom: .5rem;
  pointer-events: none; /* NO touchable area */
}

/* Handling the case where the status bar is double size */
/* XXX remove when the homescreen layout gets more dynamic */
@media screen and (max-height: 440px) {
  .apps ol > li > div {
    margin-top: .2rem;
  }
}

/* label wrapper */
.apps ol > li > div > span {
  overflow: hidden; /* We cut the text to avoid messing up the grid */
  word-wrap: break-word;
}

/* text label */
.apps ol > li > div > span > span {
  font-size: -moz-calc(5.75 * 0.226rem); /* was 5pt */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.labelWrapper {
  color: #fff; /* App label color */
  white-space: nowrap; /* NO new lines */
  display: block;
  width: 94%; /* At least 6% of margin between labels of different apps */
  position: relative;
  height: 1.6rem; /* 15px in otoro */
  margin: 0 auto;
  font-family: 'MozTT', sans-serif;
  font-weight: 500;
}

/* Alternative icons when an app is being installed */
.loading:after {
  margin: 8px;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 30000;
  width: 6rem;
  height: 6rem;
  background: url('/style/images/loading_spinner.png');
  animation: rotate 2.25s linear infinite;
}

body[data-transitioning] .loading:after {
  animation-name: none;
}

.loading img {
  margin-top: 0.4rem;
  margin-left: -0.4rem;
}

@keyframes rotate {
  from {
    transform: rotate(1deg)
  }
  to {
    transform: rotate(360deg)
  }
}