#container {
  max-width: 1024px;
  margin: 0 auto;
  zoom: 0.8;    
}
#menu > div {
  display: inline-block;
  text-align: center;
  width: 33%;
  height: 400px;
}
#menu > div a {
  width: 396px;
  height: 400px;
  display: inline-block;
}

#menu.small {
  zoom: 0.5;
}
#menu.small > div {
  width: 16%;
  vertical-align: bottom;
}

.center {
  text-align: center;
}

#showreel a {
  background: url(pic/sprites.jpg) 0 0 no-repeat;
}
#showreel a:hover, .touch #showreel a {
  background: url(pic/sprites.jpg) -396px 0 no-repeat;
}

#animation a {
  background: url(pic/sprites.jpg) 0 -1596px no-repeat;
}
#animation a:hover, .touch #animation a {
  background: url(pic/sprites.jpg) -396px -1590px no-repeat;
}

#illustration a {
  background: url(pic/sprites.jpg) 0 -399px no-repeat;
}
#illustration a:hover, .touch #illustration a {
  background: url(pic/sprites.jpg) -396px -399px no-repeat;
}

#impressum a {
  background: url(pic/sprites.jpg) 0 -1197px no-repeat;
}
#impressum a:hover, .touch #impressum a {
  background: url(pic/sprites.jpg) -394px -1199px no-repeat;
}

#friends a {
  background: url(pic/sprites.jpg) 0 -797px no-repeat;
}
#friends a:hover, .touch #friends a {
  background: url(pic/sprites.jpg) -396px -797px no-repeat;
}

#aboutme a {
  background: url(pic/sprites.jpg) 0 -1995px no-repeat;
}
#aboutme a:hover, .touch #aboutme a {
  background: url(pic/sprites.jpg) -396px -1988px no-repeat;
}

@media screen and (max-width: 1024px) {
  #menu > div {
    width: 49%;
  }
  #menu.small > div {
    width: 33%;
  }
}
@media screen and (max-width: 768px) {
  #menu.small {
    zoom: 0.33;
  }
  #menu > div {
    width: 100%;
  }
  #menu.small > div {
    width: 49%;
  }
}
body, select, input, textarea {
background-color:white;
color: black;
background-color: white;
font-family:'Signika', sans-serif; }

a { color:#73b3ce; text-decoration: none;}
a:active { color: #990000; outline: none; }
a:visited { color: #CCC; }
a:hover { color:#73b3ce; }