@charset "utf-8";

/*
Auteur:   Martin Robinson
Travail:  Travail Pratique CSS
Explication:    J'ai combiné le prototype d'un projet d'un autre cours que je
                devrai fair en PHP et j'ai produit le prototype d'interface qui
                sera peuplé éventuellement. J'ai aussi ajouter un interface de
                jeu pour expérimenter les spritesheets en css.
html:     xhtml 1.0
css:      2.1

     /
 ('<
(<=)
*/

/*
page
*/

.left
{
  float:left;
}

.right
{
  float:right;
}

*#page
{
  clear:both;
  margin-left: auto;
  margin-right: auto;
  width:80%;
}

/*
calendar
*/

table.calendar
{
  margin-left: auto;
  margin-right: auto;
  border-width:3px;
  border-style:solid;
  border-collapse:collapse;
  font-size:24px;
}

table.calendar tr th.month
{
  text-align:center;
  background-color:green;
  color:white;
}

table.calendar tr th.week
{
  border-width:2px;
  border-style:solid;
  padding:2px;
  margin:0px;
  background-color:orange;
}

table.calendar tr td
{
  border-width:1px;
  border-style:solid;
  padding:0px;
  margin:0px;
  text-align:center;
  background-color:blue;
  height:48px;
}

table.calendar tr td a.date
{
  color:cyan;
}

table.calendar tr td a.today
{
  color:white;
  border-style:solid;
  border-width:2px;
  border-color:cyan;
}

/*si la case parent est survolé*/
table.calendar tr td:hover > a
{
  border-color:red;
  border-style:solid;
  border-width:2px;
}

/*
todo list
*/

select.todolst
{
  width:100%;
  clear:right;
  margin-left:auto;
  margin-right:auto;
}

select.todolst option
{
  background-color:yellow;
}

select.todolst option:active
{
  background-color:blue;
  color:red;
}

/*
todo form
*/

form fieldset textarea
{
  width:100%;
  resize: none;
}

/*
game grid
*/
table#grid
{
  border-spacing:0;
  border-collapse:collapse;
  margin-left:auto;
  margin-right:auto;
}

table#grid tr td
{
  width:32px;
  margin:0px;
  padding:0px;
  line-height:0px;
}

/*
spritesheet
*/
table#grid tr td img
{
  width:32px;
  height:32px;
}

img.floor
{
  background:url(spritesheet.gif) -256px -672px;
}

img.vertical-wall
{
  background:url(spritesheet.gif) -960px -640px;
}

img.horizontal-wall
{
  background:url(spritesheet.gif) -992px -640px;
}

img.topleft-wall
{
  background:url(spritesheet.gif) -1024px -640px;
}

img.topright-wall
{
  background:url(spritesheet.gif) -1056px -640px;
}

img.bottomleft-wall
{
  width:32px;
  height:32px;
  background:url(spritesheet.gif) -1088px -640px;
}

img.bottomright-wall
{
  background:url(spritesheet.gif) -1120px -640px;
}

img.cross-wall
{
  background:url(spritesheet.gif) -1152px -640px;
}

img.invertT-wall
{
  background:url(spritesheet.gif) -1184px -640px;
}

img.T-wall
{
  background:url(spritesheet.gif) -1206px -640px;
}

img.cwT-wall
{
  background:url(spritesheet.gif) -1238px -640px;
}

img.ccwT-wall
{
  background:url(spritesheet.gif) 0px -672px;
}

img.closed-door
{
  background:url(spritesheet.gif) -160px -672px;
}

img.opened-door
{
  background:url(spritesheet.gif) -96px -672px;
}

img.ninja
{
  background:url(spritesheet.gif) -896px -288px;
}

img.chest
{
  background:url(spritesheet.gif) -832px -448px;
}

/*event*/
img.door
{
  background:url(spritesheet.gif) -160px -672px;
}
img.door:active
{
  background:url(spritesheet.gif) -96px -672px;
}

img.rainbow-man
{
  background:url(spritesheet.gif) -384px -160px;
}

img.rainbow-man:active
{
  background:url(spritesheet.gif) -96px -96px;
}

img.trap
{
  background:url(spritesheet.gif) -256px -672px;
}

img.trap:active
{
  background:url(spritesheet.gif) -96px -704px;
}