* {
  margin: 0; padding: 0;
}

html, body {
  height: 100%;
  text-align: center;
}

#distance {
  float:left;
  height:50%; width:1px;
  margin-bottom: -315px;
}

#wrapper {
  clear: left;
  width: 816px; height: 630px;
  margin: 0 auto;
}

#eucc-big {
  float: left;
  width: 419px; height: 339px;
  background: url(../images/eucc-big.gif);
}

#beton {
  float: left;
  width: 397px; height: 339px;
  background: url(../images/ecc-beton1.jpg);
  position: relative;
}

#beton a {
  display: block;
  width: 159px; height: 63px;
  position: absolute;
  bottom: 0; left: 0;
  background: url(../images/ecc-beton-button.png);
}
#beton a:hover {
  background: url(../images/ecc-beton-button-hover.png);
}

#construct {
  float: left;
  width: 397px; height: 291px;
  background: url(../images/consult-construct.jpg);
  position: relative;
}

#construct a {
  display: block;
  width: 159px; height: 67px;
  position: absolute;
  top: 0; left: 0;
  background: url(../images/construct-button.png);
}
#construct a:hover {
  background: url(../images/construct-button-hover.png);
}

#consult {
  float: left;
  width: 419px; height: 291px;
  background: url(../images/consult.jpg);
  position: relative;
}

#consult a {
  display: block;
  width: 146px; height: 67px;
  position: absolute;
  top: 0; right: 0;
  background: url(../images/consult-button.png);
}
#consult a:hover {
  background: url(../images/consult-button-hover.png);
}