@import "reset.css";

body {
  font:.85em/1.5 "trebuchet ms", arial, sans-serif;
  color:#fff;
  background:#a2bd07;
  overflow-x:hidden;
}
a:focus {
  outline:none;
}
img {
  vertical-align:middle;
}
.wrap {
  position:relative;
  width:840px;
  margin:0 auto;
}

header {
  background:#fff url('../images/header/bg.png') no-repeat 50% 0;
}
header .wrap {
  height:203px;
  background:url('../images/header/claim.png');
}
header strong {
  display:block;
  padding:40px 0 0 18px;
}
header strong ~ * {
  position:absolute;
  top:-8000px;
}

#works {
  height:407px;
  margin-top:25px;
}
#works h1 {
  font-size:2.2em;
  text-align:center;
  padding-top:1em;
}
#works p {
  width:634px;
  height:387px;
  margin-left:18px;
  padding:10px 0 0 13px;
  background:url('../images/works/bg/supersize.png');
}
#works p a {
  position:absolute;
  padding:8px 0 0 11px;
  z-index:1;
  opacity:.9;
}
#works p a:hover {
  opacity:1;
}
#works p a:active {
  margin-top:1px;
}
#works p em {
  position:absolute;
  width:185px; /* 245 */
  height:92px; /* 110 */
  padding:18px 25px 0 35px;
  margin:10px 0 0 32px;
  background:url('../images/works/bg/work_desc.png');
  color:#222;
  font-size:.8em;
  font-style:normal;
}
#works nav {
  position:absolute;
  width:147px;
  top:1px;
  right:21px;
  background:url('../images/works/bg/thumbnails.png') no-repeat;
}
#works nav ul {
  margin-left:-1px;
  padding-top:8px;
}
#works nav li {
  float:left;
  margin:0 0 11px 10px;
}
#works nav img[src*=tooltips] {
  position:absolute;
  margin-top:-25px;
}
#works nav .active:before {
  content:url('../images/works/selection.png');
  position:absolute;
  margin:-5px 0 0 -7px;
}
#works nav .active.stupidFF30:before {
  content:none;
}
#works img[src*=loader] {
  margin:170px 0 0 310px;
}
#works nav em a {
  position:absolute;
  width:135px;
  height:49px;
  top:236px;
  right:4px;
  z-index:1;
  background:url('../images/works/behance.png') no-repeat;
  text-indent:-8000px;
}
#works nav em a:hover {
  background-position:0 -49px;
}
#works > img {
  position:absolute;
  right:84px;
  bottom:0;
}

#contact {
  height:400px;
  background:url('../images/about.png');
}
#about, #contact h1, #contact hgroup, #contact .tel {
  position:absolute;
  top:-8000px;
}
#contact .email a {
  position:absolute;
  left:165px;
  bottom:62px;
  width:120px;
  height:20px;
  text-indent:-8000px;
}
#contact .email a[href*=belinda] {
  left:490px;
}
#contact .email a[href*=didier] {
  left:652px;
}
#contact .email a:hover {
  background:#fff;
  opacity:.4;
}

footer {
  height:116px;
  margin-top:-7px;
  background:url('../images/footer/bg.png') no-repeat 50% 100%;
}
footer strong {
  display:block;
  width:181px;
  padding:37px 27px 0 4px;
  background:url('../images/footer/vr.png') no-repeat 100% 92%;
}
.off footer strong img {
  visibility:hidden;
}
footer li {
  position:absolute;
  left:228px;
  list-style:none;
}
footer span {
  position:absolute;
  top:-8000px;
}
footer li:first-child {
  top:1px;
  padding-top:63px;
  background:url('../images/footer/bird/on.png') no-repeat;
}
.off footer li:first-child {
  background:none;
}
footer li:first-child + li {
  top:78px;
  padding-right:325px;
  background:url('../images/footer/tva_adr.png') no-repeat 100% 0;
}
footer a {
  z-index:3;
}
footer ul a {
  display:block;
  text-indent:-8000px;
  position:relative;
  -webkit-transition:opacity .2s linear;
}
footer ul a:hover {
  opacity:.7;
}
footer em a {
  width:203px;
  height:12px;
  background:url('../images/footer/followus.png') no-repeat 0 0;
}
.off footer em a {
  background-position:0 -12px;
}
footer a[href*=conditions] {
  width:156px;
  height:12px;
  background:url('../images/footer/conditions.png');
}
footer div > a {
  position:absolute;
  top:67px;
  right:18px;
}
footer div > a img[src*=off] {
  margin-top:1px;
}

#mask {
  position:absolute;
  width:100%;
  background:#292429;
  z-index:2;
}

#off-logo {
  position:absolute;
  right:50%;
  margin-right:235px;
  z-index:3;
}

#flying-bird {
  position:absolute;
  left:50%;
  margin-left:-190px;
  top:1012px;
  z-index:4;
}