* { box-sizing: border-box; padding:0; margin:0; }

body {
  background:linear-gradient(#dbeaf8, #dbeaf8);
  color:#222;
	padding: 20px;
  font-family: verdana, arial, helvetica;
}

.wrapper {
  margin:30px auto;
  position:relative;
} 

.main:after {
 	clear:both;
  content:"";
  display:table;
}
 
.main li {
 	width:5.3%;
  height:5%;
  border:1px solid rgba(0,0,0,0.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
  position:relative;
  font-size:18px;
  float:left;
  padding:0 2px;
  margin:1px;
  cursor:pointer;
  padding-top:20px;
  overflow:hidden;
  transition:all .2s ease-in;
  text-shadow:0 1px 0 rgba(255,255,255,0.2);
}

.main li span {
  display:block;
  line-height:1;
  font-size:9px;
  color:black; 
  padding-top:7px;
}

.main .empty {
 	border:none; 
  box-shadow:none;
  cursor:default;
}


.main li:before,
.main li:after {
   position:absolute;
  top:3px;
  left:3px;
  color:black;
  font-size:8px;
  line-height:1;
}

.main li:after {
  content:attr(data-nb);
  left:auto;
  right:3px;
}


.cellAttributes { background:#4CAFFA; }