@font-face {
  font-family: "Maxlf";
  src: url("https://gorohov.name/fonts/max-light-webfont.eot");
  src: url("https://gorohov.name/fonts/max-light-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("https://gorohov.name/fonts/max-light-webfont.woff") format("woff"),
    url("https://gorohov.name/fonts/max-light-webfont.ttf") format("truetype"),
    url("https://gorohov.name/fonts/max-light-webfont.svg#Maxlf") format("svg");
  font-weight: normal;
  font-style: normal;
}

html,
body {
  height: 100%;
}

body {
  /* font: 12px Maxlf, Tahoma, Arial, sans-serif; */
  /*color: #c0b98f;*/
  /*background: #161a21 url(images/pattern.png) center -102px;*/
  margin: 0 auto;
  background-color: white;
}

#content {
  position: relative;
  width: 100%;
  height: 100%;
}

#page {
  height: 100%;
  min-height: 450px; /* data + footer */
  position: relative;
  overflow: hidden;
}

#data_wrapper {
  overflow: hidden;
  text-align: center;
  height: 550px;
  padding: 0 0 0 100%;
  position: relative;
}

#data_wrapper * {
  text-align: left;
}

#data {
  position: absolute;
  top: 0;
  left: 0;
  height: 550px;
  margin: 0 0 0 -530px;
  left: 50%;
  border: 0px solid;
}

#data .item {
  position: absolute;
  opacity: 0.3;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
}

#data .item.empty {
  padding: 6px 0 0 6px;
  display: none;
}

#data .item a,
#data .item span {
  display: block;
  width: 117px; /* 117 */
  height: 130px; /* 130 */
  padding: 6px 0 0 6px;
  cursor: pointer;
  background: url(images/cell.png) -1px 0 no-repeat;
}

#data .item a:hover,
#data .item.selected a {
  background-position: 0 -130px;
}

#data .item.selected a {
  background-position: 0 -260px;
  text-shadow: #09f1ef -1px -1px 0;
}

#data .item h3,
#data .item .date,
#data .item p {
  display: none;
}

/* 105 */
#data .item.r1 {
  top: 0;
}

#data .item.r2 {
  top: 100px;
}

#data .item.r3 {
  top: 200px;
}

#data .item.r4 {
  top: 300px;
}

#data .item.r5 {
  top: 400px;
}

#data .item.r6 {
  top: 500px;
}

#data .item.r7 {
  top: 600px;
}

#data .item.r8 {
  top: 700px;
}

#data .item.r9 {
  top: 800px;
}

#data .item.r10 {
  top: 900px;
}

#data .item.r11 {
  top: 1000px;
}

/* 115 */
#data .item.c1 {
  left: 0;
}

#data .item.c2 {
  left: 115px;
}

#data .item.c3 {
  left: 230px;
}

#data .item.c4 {
  left: 345px;
}

#data .item.c5 {
  left: 460px;
}

#data .item.c6 {
  left: 575px;
}

#data .item.c7 {
  left: 690px;
}

#data .item.c8 {
  left: 805px;
}

#data .item.c9 {
  left: 920px;
}

#data .item.c10 {
  left: 1035px;
}

/* 115 */
#data .item.even_row.c1 {
  left: 58px;
}

#data .item.even_row.c2 {
  left: 173px;
}

#data .item.even_row.c3 {
  left: 288px;
}

#data .item.even_row.c4 {
  left: 403px;
}

#data .item.even_row.c5 {
  left: 518px;
}

#data .item.even_row.c6 {
  left: 633px;
}

#data .item.even_row.c7 {
  left: 748px;
}

#data .item.even_row.c8 {
  left: 863px;
}

#data .item.even_row.c9 {
  left: 978px;
}

#data .item.even_row.c10 {
  left: 1093px;
}

#data .item.main {
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

#data .item.main a {
  background: url(images/pmaincell.png) -1px 0 no-repeat;
}

#data .item.main a:hover {
  background-position: 0px -130px;
}

#data .item.main.selected a {
  background-position: 0 -260px;
}

#data .item.main.create a {
  background-position: -117px 0;
}

#data .item.main.create a:hover {
  background-position: -117px -130px;
}

#data .item.main.create.selected a {
  background-position: -117px -260px;
}

#data .item.main.build a {
  background-position: -234px 0;
}

#data .item.main.build a:hover {
  background-position: -234px -130px;
}

#data .item.main.build.selected a {
  background-position: -234px -260px;
}

#data .item.main.test a {
  background-position: -351px 0;
}

#data .item.main.test a:hover {
  background-position: -351px -130px;
}

#data .item.main.test.selected a {
  background-position: -351px -260px;
}

#data .item.main.deploy a {
  background-position: -468px 0;
}

#data .item.main.deploy a:hover {
  background-position: -468px -130px;
}

#data .item.main.deploy.selected a {
  background-position: -468px -260px;
}

#data .item.main.monitor a {
  background-position: -588px 0;
}

#data .item.main.monitor a:hover {
  background-position: -588px -130px;
}

#data .item.main.monitor.selected a {
  background-position: -588px -260px;
}