@font-face {
  font-family: 'u39';
  src: url('../type/u39.eot');
  src: url('../type/u39.eot?#iefix') format('embedded-opentype'),
  url('../type/u39.woff') format('woff'),
  url('../type/u39.ttf') format('truetype'),
  url('../type/u39.svg#u39') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
    font-family: 'u45';
    src: url('../type/u45.eot');
    src: url('../type/u45.eot?#iefix') format('embedded-opentype'),
         url('../type/u45.woff') format('woff'),
         url('../type/u45.ttf') format('truetype'),
         url('../type/u45.svg#u45') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'u57';
  src: url('../type/u57.eot');
  src: url('../type/u57.eot?#iefix') format('embedded-opentype'),
       url('../type/u57.woff') format('woff'),
       url('../type/u57.ttf') format('truetype'),
       url('../type/u57.svg#u57') format('svg');
  font-weight: normal;
  font-style: normal;
}

.web{
  width:1024px;
  height:690px;
  position:absolute;
}

.web_head{
  width:1024px;
  height:156px;
  float:left;
}

.web_buttons{
  width:664px;
  height:156px;
  position:absolute;
  padding-left:229px;
}

.web_buttons div{
  float:left;
  width:133px;
  height:67px;
  margin-top:81px;
  margin-left:-1px;
  background-color: #ccc;
  opacity:.5;
  border:1px solid #000;
  -moz-border-radius:5px 5px 0px 0px; 
  -webkit-border-radius:5px 5px 0px 0px; 
  border-radius:5px 5px 0px 0px;
}

.web_buttons p{
  padding-top:5px;
  text-align:center;
  font-family:u57;
  font-size:18px;
  color:#000;
  opacity:1;
}

.web_display{
  height:531px;
  width:1024px;
  float:left;
}

.web_display div{
  height:260px;
  width:506px;
  float:left;
  margin:2px;
  opacity:.5;
  border:1px solid #000;
  -moz-border-radius:5px 5px 5px 5px; 
  -webkit-border-radius:5px 5px 5px 5px; 
  border-radius:5px 5px 5px 5px;
  cursor:pointer;
}

.web_display div:active{
  opacity:1;
}