/*
/*  staff.css
*/

#staff {
  position: relative;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 12px;
  line-height: 18px;
  margin: 20px 0;
}

#staff h3, #staff h4, #staff p {
  margin: 0;
}

#staff h3 {
  font-size: 16px;
}

#staff h4 {
  color: #7f7f7f;
}

#staff p {
  color: #7f7f7f;
  margin: 18px 0 0;
}

#staff p.foot {
  font-size: 10px;
}

#staff .photo {
  width: 656px;
  background: #fff;
  border: 2px solid #d1ccaf;
}

#staff .photo img {
  display: block;
  margin: 0;
  border: 8px solid #fff;
}

#staff .photo .mask {
  position: absolute;
  display: block;
  top: 10px; left: 10px;
  width: 640px; height: 220px;
}

#staff .photo #mask-1 { background: url("images/mask-1.png"); }
#staff .photo #mask-2 { background: url("images/mask-2.png"); }
#staff .photo #mask-3 { background: url("images/mask-3.png"); }
#staff .photo #mask-4 { background: url("images/mask-4.png"); }
#staff .photo #mask-5 { background: url("images/mask-5.png"); }

#staff ul {
  list-style: none;
  margin: 0;
  padding: 0;
  visibility: hidden;
}

#staff li {
  position: absolute;
  top: 210px;
  width: 168px;
  padding: 12px 14px;
  background: #fff;
  border: 2px solid #d1ccaf;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
}

#staff li .arrow {
  position: absolute;
  display: block;
  top: -12px; left: 50%;
  width: 20px; height: 12px;
  margin-left: -10px;
  background: url("images/arrow.png") no-repeat;
}

#staff #group-1 { left: 30px; }
#staff #group-2 { left: 130px; }
#staff #group-3 { left: 230px; }
#staff #group-4 { left: 330px; }
#staff #group-5 { left: 430px; }

#staff #group-1 .arrow { left: 30%; }
#staff #group-2 .arrow { left: 40%; }
#staff #group-3 .arrow { left: 55%; }
#staff #group-4 .arrow { left: 55%; }
#staff #group-5 .arrow { left: 60%; }