/* Minesweeper Clone Styles 
 * Copyright 2005 Tom W.M.  All rights reserved.
 */

div.mns-window {
 font-size: 16px;
 display: inline-block;
 position: relative;
 border: .1em solid rgb(220,220,220);
 border-color: rgb(240,240,240) rgb(128,128,128) rgb(128,128,128) rgb(240,240,240);
 background-color: rgb(220,220,220);
 padding: .4em;
 min-width: 10em;
 text-align: left;
 cursor: default;
 -moz-user-select: none;
}

div.mns-controls {
 position: relative;
 background-color: rgb(220,220,220);
 border: .1em inset rgb(220,220,220);
 margin-bottom: .4em;
}

div.mns-nummines {
 position: relative;
 margin-left: .4em;
 top: .4em;
 margin-bottom: .8em;
 font-size: 1.4em;
 width: 2.5em;
 border: .05em solid rgb(220,220,220);
 border-color: rgb(220,220,220) rgb(128,128,128) rgb(128,128,128) rgb(220,220,220);
}

div.mns-smiley {
 position: absolute;
 width: 1.4em;
 height: 1.4em;
 top: .4em;
 left: -.8em;
 _left: -1.6em; /* IE fix */
 margin-left: 50%;
 border: .1em outset rgb(220,220,220);
 border-color: rgb(240,240,240) rgb(128,128,128) rgb(128,128,128) rgb(240,240,240);
}

/* states for the smiley */
/* happy */
div.mnshappy {
 background-image: url(smiley-happy.png);
 background-position: 50% 50%;
 background-repeat: no-repeat;
}
/* scared */
div.mnsscary {
 background-image: url(smiley-scary.png);
 background-position: 50% 50%;
 background-repeat: no-repeat;
}
/* dead */
div.mnsdead {
 background-image: url(smiley-dead.png);
 background-position: 50% 50%;
 background-repeat: no-repeat;
}
div.mnssmileydown {
 border-color: rgb(128,128,128) rgb(240,240,240) rgb(240,240,240) rgb(128,128,128);
 background-position: 55% 55%;
}

div.mns-timedisp {
 position: absolute;
 right: .4em;
 _margin-right: .4em; /* IE fix */
 font-size: 1.4em;
 width: 2.5em;
 top: .4em;
 border: .05em inset rgb(220,220,220);
}

div.mns-container {
 position: relative;
 border: .1em solid rgb(220,220,220);
 border-color: rgb(128,128,128) rgb(240,240,240) rgb(240,240,240) rgb(128,128,128);
 line-height: .95em;
 font-family: "courier new";
 font-weight: bold;
 margin-left: auto;
 margin-right: auto;
}

div.mns-cell {
 position: absolute;
 background-color: rgb(220,220,220);
 border: .1em solid rgb(220,220,220);
 border-color: rgb(240,240,240) rgb(128,128,128) rgb(128,128,128) rgb(240,240,240);
 width: .8em;
 height: .8em;
 text-align: center;
 _overflow: hidden;
}

div.mnscell1 {color: blue;}
div.mnscell2 {color: green;}
div.mnscell3 {color: red;}
div.mnscell4 {color: violet;}
div.mnscell5 {color: orange;}
div.mnscell6 {color: yellow;}
div.mnscell7 {color: aqua;}
div.mnscell8 {color: magenta;}

div.mnsfocused,
div.checked {
 border-color: rgb(220,220,220);
}

div.mnsmine {
 background-image: url(mine.png);
 background-position: 50% 50%;
 background-repeat: no-repeat;
 border-color: rgb(220,220,220);
}

div.mnsminehit {
 background-image: url(mine.png); /* This image is duplicated here so that it shows immediately. */
 background-position: 50% 50%;
 background-repeat: no-repeat;
 background-color: red;
 border-color: red;
}

div.mnsflagged-flag,
div.xflags div.mnsflagged-trueflag {
 background-image: url(flag.png);
 background-position: 50% 50%;
 background-repeat: no-repeat;
}

div.mnsflagged-unknown {
 background-image: url(unknown.png);
 background-position: 50% 50%;
 background-repeat: no-repeat;
}

div.xflags div.mnsflagged-flag {
 background-image: url(xmine.png);
 background-position: 50% 50%;
 background-repeat: no-repeat;
 border-style: solid;
}


/******************************/
/***** LED Display styles *****/
/******************************/

div.led-display {
 height: 1em;
 background-color: black;
 width: 2.1em;
}

div.led-display * {
 _display: none; /* hide from IE, which /really/ messes things up */
}

div.led-digit {
 float: left;
 height: 1em;
 width: .7em;
 position: relative;
}
div.led-digit + div.led-digit {
 margin-right: -.01em;
}

div.led-digit div {
 position: absolute;
 border-style: solid;
 border-width: 0;
}
 
div.led-digit div.on {
 background-color: red;
 border-color: red;
}

div.led-digit div.off {
 background-color: rgb(100,0,0);
 border-color: rgb(100,0,0);
}
/*
  ----1----
 |         |
 2         3
 |         |
  ----4----
 |         |
 5         6
 |         |
  ----7----
*/
div.digit-bar1 {
 left: .2em;
 top: .1em;
 right: .2em;
 height: .1em;
}

div.digit-bar2 {
 left: .1em;
 top: .2em;
 width: .1em;
 height: .25em;
}

div.digit-bar3 {
 right: .1em;
 top: .2em;
 width: .1em;
 height: .25em;
}

div.digit-bar4 {
 left: .2em;
 right: .2em;
 top: .45em;
 height: .1em;
}

div.digit-bar5 {
 left: .1em;
 bottom: .2em;
 width: .1em;
 height: .25em;
}

div.digit-bar6 {
 right: .1em;
 bottom: .2em;
 width: .1em;
 height: .25em;
}

div.digit-bar7 {
 left: .2em;
 bottom: .1em;
 right: .2em;
 height: .1em;
}