chickenCoop.css

/*
 * This file is part of Poulailler - a browser-revival
 * of famous Nintendo's Game & Watch Mickey Mouse.
 *
 * Copyright 2012 Emmanuel Gaillot (emmanuel.gaillot@gmail.com)
 *
 * Poulailler is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Poulailler is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Poulailler.  If not, see <http://www.gnu.org/licenses/>.
 *
 */


body {
  background: #151515 url("resources/images/background-pattern.png");
  margin: 0 auto;
  width: 800px;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  text-decoration: underline;
}

footer {
  margin: 100px;
  color: white;
  text-align: center;
}

.game-wrapper {
  background: url("resources/images/casing.png");
  width: 576px;
  height: 416px;
  margin: 30px auto;
}

.screen {
  position: relative;
  background: url("resources/images/screen.png");
  box-shadow: inset 0px 0px 7px grey;
  width: 312px;
  height: 221px;
  top: 121px;
  margin: 0 auto;
}

.game-infos {
  position: absolute;
  top: 23px;
  left: 160px;
}

.sprites > * {
  display: none;
  position: absolute;
}

[class^="line-"] {
  width: 24px;
  height: 24px;
  text-indent: -9999em;
}

.line-0.egg-0 {
  background: url('resources/images/eggs.png');
  top: 66px;
  left: 32px;
}

.line-0.egg-1 {
  background: url('resources/images/eggs.png') -24px 0;
  top: 73px;
  left: 40px;
}

.line-0.egg-2 {
  background: url('resources/images/eggs.png') -48px 0;
  top: 82px;
  left: 50px;
}

.line-0.egg-3 {
  background: url('resources/images/eggs.png') -72px 0;
  top: 87px;
  left: 60px;
}

.line-0.egg-4 {
  background: url('resources/images/eggs.png') -96px 0;
  top: 96px;
  left: 70px;
}

.line-1.egg-0 {
  background: url('resources/images/eggs.png') 0 -24px;
  top: 69px;
  left: 274px;
}

.line-1.egg-1 {
  background: url('resources/images/eggs.png') -24px -24px;
  top: 76px;
  left: 262px;
}

.line-1.egg-2 {
  background: url('resources/images/eggs.png') -48px -24px;
  top: 81px;
  left: 251px;
}

.line-1.egg-3 {
  background: url('resources/images/eggs.png') -72px -24px;
  top: 89px;
  left: 240px;
}

.line-1.egg-4 {
  background: url('resources/images/eggs.png') -96px -24px;
  top: 101px;
  left: 231px;
}

.line-2.egg-0 {
  background: url('resources/images/eggs.png') 0 -48px;
  top: 119px;
  left: 30px;
}

.line-2.egg-1 {
  background: url('resources/images/eggs.png') -24px -48px;
  top: 126px;
  left: 41px;
}

.line-2.egg-2 {
  background: url('resources/images/eggs.png') -48px -48px;
  top: 132px;
  left: 50px;
}

.line-2.egg-3 {
  background: url('resources/images/eggs.png') -72px -48px;
  top: 140px;
  left: 62px;
}

.line-2.egg-4 {
  background: url('resources/images/eggs.png') -96px -48px;
  top: 144px;
  left: 71px;
}

.line-3.egg-0 {
  background: url('resources/images/eggs.png') 0 -72px;
  top: 116px;
  left: 273px;
}

.line-3.egg-1 {
  background: url('resources/images/eggs.png') -24px -72px;
  top: 123px;
  left: 263px;
}

.line-3.egg-2 {
  background: url('resources/images/eggs.png') -48px -72px;
  top: 129px;
  left: 251px;
}

.line-3.egg-3 {
  background: url('resources/images/eggs.png') -72px -72px;
  top: 138px;
  left: 240px;
}

.line-3.egg-4 {
  background: url('resources/images/eggs.png') -96px -72px;
  top: 148px;
  left: 230px;
}

[class$="-sequence"], [class^="bucket-"] {
  text-indent: -9999em;
}

.bucket-0 {
  background: url("resources/images/bucket-0.png");
  top: 87px;
  left: 76px;
  width: 101px;
  height: 111px;
}

.bucket-1 {
  background: url("resources/images/bucket-1.png");
  top: 95px;
  left: 147px;
  width: 102px;
  height: 103px;
}

.bucket-2 {
  background: url("resources/images/bucket-2.png");
  top: 90px;
  left: 74px;
  width: 103px;
  height: 108px;
}

.bucket-3 {
  background: url("resources/images/bucket-3.png");
  top: 96px;
  left: 147px;
  width: 100px;
  height: 102px;
}

#broken-0 {
  background: url("resources/images/broken-egg-sequences.png");
  width: 64px;
  height: 32px;
  top: 187px;
  left: 62px;
}

#broken-1 {
  background: url("resources/images/broken-egg-sequences.png") -64px 0;
  width: 32px;
  height: 32px;
  top: 159px;
  left: 51px;
}

#broken-2 {
  background: url("resources/images/broken-egg-sequences.png") -96px 0;
  width: 32px;
  height: 32px;
  top: 172px;
  left: 41px;
}

#broken-3 {
  background: url("resources/images/broken-egg-sequences.png") -128px 0;
  width: 32px;
  height: 32px;
  top: 175px;
  left: 20px;
}

#broken-4 {
  background: url("resources/images/broken-egg-sequences.png") -160px 0;
  width: 32px;
  height: 32px;
  top: 175px;
  left: 2px;
}

#broken-5 {
  background: url("resources/images/broken-egg-sequences.png") 0 -32px;
  width: 64px;
  height: 32px;
  top: 186px;
  left: 202px;
}

#broken-6 {
  background: url("resources/images/broken-egg-sequences.png") -64px -32px;
  width: 32px;
  height: 32px;
  top: 157px;
  left: 238px;
}

#broken-7 {
  background: url("resources/images/broken-egg-sequences.png") -96px -32px;
  width: 32px;
  height: 32px;
  top: 172px;
  left: 254px;
}

#broken-8 {
  background: url("resources/images/broken-egg-sequences.png") -128px -32px;
  width: 32px;
  height: 32px;
  top: 170px;
  left: 272px;
}

#broken-9 {
  background: url("resources/images/broken-egg-sequences.png") -160px -32px;
  width: 32px;
  height: 32px;
  top: 171px;
  left: 287px;
}

.game-over {
  color: white;
  background: black;
  border: solid 1px;
  padding: 10px;
  width: 80px;
  text-align: center;
  margin: 94px 104px;
}

.minnie {
  background: url('resources/images/minnie.png');
  width: 63px;
  height: 65px;
  text-indent: -9999em;
  top: 9px;
  left: 40px;
}