@charset "UTF-8";
/* ----------------------------------------------------------------------------
 * tetris.css
 * "DOM Tetris" Style Definition
 * Version 2.0
 * Copyright (C) 2005-2007 Taku Watabe
 * Time-stamp: <2007-09-09T00:24:38+09:00>
 * ------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
 * XHTML Elements
 * ------------------------------------------------------------------------- */
h1
{
  background-color : #666;
  color            : #fff;
  font-size        : 150%;
  text-align       : center;
  line-height      : 1.0;
  white-space      : nowrap;
  border-style     : solid;
  border-color     : #999;
  border-width     : 0 0 1px 0;
  margin           : 0;
  padding          : 1em 0;
}

p { text-indent : 0; }

kbd
{
  color            : #000;
  background-color : #ccc;
  border-color     : #fff #999 #999 #fff;
}


/* ----------------------------------------------------------------------------
 * Structures
 * ------------------------------------------------------------------------- */
#body
{
  position : relative;
}

#footer
{
  clear : both;
}

#version
{
  color       : #fff;
  line-height : 1.0;
  margin      : 0;
  padding     : 1.75em 0;
  position    : absolute;
  top         : 0;
  right       : 1em;
}

#stratum
{
  position : fixed;
  top      : 4.5em;
}

#copyright
{
  position : fixed;
  right    : 0.625em; /* 0.5 / 0.8em */
  bottom   : 0;
}


/* ----------------------------------------------------------------------------
 * Tetris
 * ------------------------------------------------------------------------- */
#tetris
{
  position : relative;
}


/* ----------------------------------------------------------------------------
 * TetrisGameField
 * ------------------------------------------------------------------------- */
#tetris-game_field
{
  border-style : solid;
  border-width : 1px;
  margin-top   : 2.5em;    /* 1.5em(stratum)+1em */
  margin-left  : -110px;
  position     : relative;
  left         : 50%;
  width        : 220px;    /* 22px*10cell */
  height       : 440px;    /* 22px*20cell */
  z-index      : 0;
}


/* ----------------------------------------------------------------------------
 * TetrisNextField
 * ------------------------------------------------------------------------- */
#tetris-next_field
{
  border-style : solid;
  border-width : 1px;
  margin-left  : 156px;    /* (22px*5cell)+1px+(22*2cell)+1px */
  position     : absolute;
  top          : 0;
  left         : 50%;
  width        : 88px;     /* 22px*4cell */
  height       : 88px;     /* 22px*4cell */
  z-index      : 0;
}


/* ----------------------------------------------------------------------------
 * TetrisTime
 * ------------------------------------------------------------------------- */
#tetris-time
{
  font-family  : monospace;
  border-style : solid;
  border-width : 1px;
  margin-left  : 156px;    /* (1+20+1px*5cell)+1px+(1+20+1px*2cell)+1px */
  padding      : 0.5em;
  position     : absolute;
  top          : 134px;    /* 1px+(22px*4cell)1px+(22px*2cell) */
  left         : 50%;
}


/* ----------------------------------------------------------------------------
 * TetrisCell
 * ------------------------------------------------------------------------- */
.tetris-cell
{
  float            : left;
  background-color : #eee;
  line-height      : 0;
  font-size        : 0;
  border-style     : solid;
  border-width     : 1px;
  border-color     : #ccc;
  width            : 20px;
  height           : 20px;
}

/* ゴースト */
.tetris-block-I.ghost,
.tetris-block-J.ghost,
.tetris-block-L.ghost,
.tetris-block-O.ghost,
.tetris-block-S.ghost,
.tetris-block-T.ghost,
.tetris-block-Z.ghost
{
  background-color : #ccc;
  border-color     : #999;
}

/* 形状別ブロック */
.tetris-block-I
{
  background-color : #3cc; /* cyan */
  border-color     : #6ff #099 #099 #6ff;
}
.tetris-block-J
{
  background-color : #33c; /* blue */
  border-color     : #66f #009 #009 #66f;
}
.tetris-block-L
{
  background-color : #909; /* purple */
  border-color     : #c0c #606 #606 #c0c;
}
.tetris-block-O
{
  background-color : #999; /* gray */
  border-color     : #ccc #666 #666 #ccc;
}
.tetris-block-S
{
  background-color : #390; /* green */
  border-color     : #6c0 #060 #060 #6c0;
}
.tetris-block-T
{
  background-color : #cc3; /* orange */
  border-color     : #ff6 #990 #990 #ff6;
}
.tetris-block-Z
{
  background-color : #c30; /* red */
  border-color     : #f60 #900 #900 #f60;
}


/* ----------------------------------------------------------------------------
 * TetrisMessage
 * ------------------------------------------------------------------------- */
.tetris-message
{
  display          : none;
  background-color : #000;
  color            : #fff;
  padding          : 1em 0;
  position         : absolute;
  top              : 20%;
  left             : 0;
  width            : 100%;
  z-index          : 1;
  opacity          : 0.6;
}


.pause #tetris-message-pause,
.help  #tetris-message-help,
.start #tetris-message-start,
.reset #tetris-message-reset,
.over  #tetris-message-over,
.error #tetris-message-error
{
  display : block;
}

#tetris-message-over,
#tetris-message-error
{
  background-color : #c00;
}

.tetris-message h2
{
  font-size   : 200%;
  text-align  : center;
  margin      : 0 0 1em 0;
}

.tetris-message p
{
  margin      : 0 2em;
  text-align  : center;
}

.tetris-message ul
{
  margin : 0 2em;
}

.tetris-message li
{
  margin : 0 0 0 1.25em;
}

.tetris-message dl
{
  margin : 0 2em;
}

.tetris-message dt
{
  float      : left;
  text-align : right;
  margin     : 0 0 0.5em 0;
  padding    : 0;
  width      : 40%;
  clear      : left;
}

.tetris-message dd
{
  float   : left;
  margin  : 0 0 0.5em 0;
  padding : 0;
  width   : 60%;
}

.tetris-message dd p
{
  text-align   : left;
  padding-left : 0.5em;
}