Usuario:Hasley/sandbox/styles.css

/* https://metroui.org.ua/v0/tiles.php */

.tile {
  display: block;
  float: left;
  background-color: #525252;
  width: 200px;
  height: 200px;
  cursor: pointer;
  box-shadow: inset 0px 0px 1px #FFFFCC;
  text-decoration: none;
  color: #ffffff;
  position: relative;
  font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 11pt;
  letter-spacing: 0.02em;
  line-height: 14pt;
  margin: 0 10px 10px 0;
  overflow: hidden;
}

.tile-content {
  width: 100%;
  height: 100%;
  padding: 0;
  padding-bottom: 30px;
  vertical-align: top;
  padding: 10px 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 9pt;
  line-height: 11pt;
  color: #000000;
  color: #ffffff;
  line-height: 16px;
}

.tile-double {
   display: block;
  float: left;
  background-color: #525252;
  width: 310px;
  height: 200px;
  cursor: pointer;
  box-shadow: inset 0px 0px 1px #FFFFCC;
  text-decoration: none;
  color: #ffffff;
  position: relative;
  font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 11pt;
  letter-spacing: 0.02em;
  line-height: 14pt;
  margin: 0 10px 10px 0;
  overflow: hidden;
}
.tile-image {
position: absolute;
  width: 64px;
  height: 64px;
  top: 50%;
  left: 50%;
  margin-left: -32px;
  margin-top: -32px;
}
/*
.tile .bg-color-blue {
  background-color: #2d89ef !important;
}
.tile .bg-color-blueLight {
  background-color: #eff4ff !important;
}
.tile .bg-color-blueDark {
  background-color: #2b5797 !important;
}
.tile .bg-color-green {
  background-color: #00a300 !important;
}
.tile .bg-color-greenLight {
  background-color: #99b433 !important;
}
.tile .bg-color-greenDark {
  background-color: #1e7145 !important;
}
.tile .bg-color-red {
  background-color: #b91d47 !important;
}
.tile .bg-color-yellow {
  background-color: #ffc40d !important;
}
.tile .bg-color-orange {
  background-color: #e3a21a !important;
}
.tile .bg-color-orangeDark {
  background-color: #da532c !important;
}
.tile .bg-color-pink {
  background-color: #9f00a7 !important;
}
.tile .bg-color-pinkDark {
  background-color: #7e3878 !important;
}
.tile .bg-color-purple {
  background-color: #603cba !important;
}
.tile .bg-color-darken {
  background-color: #1d1d1d !important;
}
.tile .bg-color-lighten {
  background-color: #d5e7ec !important;
}
.tile .bg-color-white {
  background-color: #ffffff !important;
}
.tile .bg-color-grayDark {
  background-color: #525252 !important;
}
.tile .bg-color-magenta {
  background-color: #ff0097 !important;
}
.tile .bg-color-teal {
  background-color: #00aba9 !important;
}
.tile .bg-color-redLight {
  background-color: #ee1111 !important;
}
*/