@import url("../menu.css");
@import url("../dialogs.css");

@font-face {
    font-family: Digital;
    src: url('digital.ttf');
}

#timer {
    background-color: black;
    height: 25px;
    width: 44px;
    position: absolute;
    margin: 2px 5px 0 0;
    right: 0;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}

#timer-1, #timer-2, #timer-3 {
    float: left;
    margin-left: 2px;
    width: 12px;
    height: 25px;
    background-image: url(img/counter.png);
    background-position: 0 0px;
    -webkit-transition: background-position 1000s linear;
    -o-transition: background-position 1000s linear;
    -moz-transition: background-position 1000s linear;
    transition: background-position 1000s linear;
}
/* "Prevent" the counter from going back when the mouse leaves the window */
html:hover #timer1, html:hover #timer2, html:hover #timer3 {
    -webkit-transition: background-position 1000000000s cubic-bezier(1,0,1,0);
    -o-transition: background-position 1000000000s cubic-bezier(1,0,1,0);
    -moz-transition: background-position 1000000000s cubic-bezier(1,0,1,0);
    transition: background-position 1000000000s cubic-bezier(1,0,1,0);
}
/* It should be 180, 1800, 18000 so that the counter stop at "999". Instead,
   we do a whole loop from "000" to "000", so that browsers that don't support
   transitions will keep showing "000". */
html:hover #timer-1 {
    background-position: 0 -200px;
}
html:hover #timer-2 {
    background-position: 0 -2000px;
}
html:hover #timer-3 {
    background-position: 0 -20000px;
}

body {
    background-color: #008080;
    background-image: url(img/Windows95.jpg);
}

#game:active #new {
    background-position: 2px -17px;
}

td.bomb a.info:visited {
    background: url(img/mine.png) no-repeat;
    background-position: 1px 1px;
}

span.flag {
    background-image: url(img/flag.png);
    background-color: #c6c3c6;
    background-position: 4px 4px;
    width: 16px;
    height: 16px;
}

#game:target td.count input:checked ~ span.flag {
    background-image: url(img/mine-mistake.png);
    background-position: 1px 2px;
}


input:checked + span.flag {
    position: absolute;
    margin-left: -8px;
    margin-top: -17px;
}

article h1 {
    background-color: #0053e2;
    padding: 2px 4px;
    color: white;
    font-weight: bold;
    font-size: 10pt;
    font-family: "Luxi sans", "Lucida Grande", Lucida, "Lucida Sans Unicode", sans-serif;
    text-align: left;
    text-shadow: 1px 1px 1px #000;
}

#game h1 {
    padding-left: 22px;
    background-image: url(img/minesweeper.png);
    background-repeat: no-repeat;
}

#game a,
article h1 {
    cursor: default;
}
article {
    background-color: #c6c3c6;
    border: 1px solid black;
    border-left: 2px solid white;
    border-top: 2px solid white;
    border-bottom: 2px solid #888;
    border-right: 2px solid #888;
    -o-box-shadow: 5px 5px 5px #888;
    -icab-box-shadow: 5px 5px 5px #888;
    -khtml-box-shadow: 5px 5px 5px #888;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
}
#game {
    display: inline-block;
    position: relative;
    width: auto;
    overflow: visible;
    margin: 30px auto 0 auto;
}

a#new {
    margin-top: 2px;
    padding: 2px;
    display: inline-block;
    position: relative;
    width: 17px;
    height: 17px;
    background: #c0c0c0 url(img/smiley.png) no-repeat;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    background-position: 2px 2px;
}
a#new:active {
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    border-left: 2px solid #808080;
    border-top: 2px solid #808080;
}

a#new span {
    display: none;
}
#game:target a#new {
    background-position: 2px -36px;
}

/* The :target won't be permanent, but we have no other choice */
#game:target td.bomb {
    border: 1px solid transparent;
}

#game:target td.bomb a:focus,
#game:target td.bomb a:hover { /* This one is in case the 1st one doesn't work */
    background-color: #d00;
}

ul#menu {
    font-size: .7em;
    background-color: #bbb;
    padding: 3px;
    height: 1.2em;
    font-family: "Luxi sans", "Lucida Grande", Lucida, "Lucida Sans Unicode", sans-serif;
}
ul#menu li {
    padding: 3px 1ex;
    cursor: default;
}
ul#menu li:hover {
    background-color: #33c;
    color: white;
}

ul#menu li ul li a {
    color: black;
}
ul#menu li ul li:hover a {
    color: white;
}

ul#menu li:hover ul {
    z-index: 600; /* higher than the CSS counter */
    background-color: #c6c6c6;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
    border-top: 1px solid white;
    border-left: 1px solid white;
    left: 0;
    padding: 2px;
    margin: 2px 0 0 0;
    -o-box-shadow: 3px 3px 3px #888;
    -icab-box-shadow: 3px 3px 3px #888;
    -khtml-box-shadow: 3px 3px 3px #888;
    -moz-box-shadow: 3px 3px 3px #888;
    -webkit-box-shadow: 3px 3px 3px #888;
    box-shadow: 3px 3px 3px #888;
    opacity: 0.9;
}
ul#menu li ul li {
    padding: 1px 16px;
}

td.count a.info span {
    font-family: "Luxi sans", "Lucida Grande", Lucida, "Lucida Sans Unicode", sans-serif;
    font-weight: bold;
}
.count-1 a span { color: #0000ff; }
.count-2 a span { color: #008000; }
.count-3 a span { color: #ff0000; }
.count-4 a span { color: #000080; }
.count-5 a span { color: #800000; }
.count-6 a span { color: #008080; }
.count-7 a span { color: #840084; }
.count-8 a span { color: #008000; }

table {
    border-top: 3px solid #777;
    border-left: 3px solid #777;
    border-right: 3px solid white;
    border-bottom: 3px solid white;
    border-spacing: 0 0;
}
td {
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
}
td:hover a.info {
    background-color: #bbb;
}
td:hover .beach:visited ~ a.info,
td:hover a.info:visited {
    background-color: transparent;
}

/* Counter */
table:after {
    content: counter(bombs, decimal-leading-zero);
    position: absolute;
    top: 40px;
    left: 0;
    margin: 2px 0 0 5px;
    color: #f70001;
    font-family: digital, monospace;
    font-size: 25px;
    background-color: black;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    padding: 0 1px;
}
td.count .beach:visited ~ a.info span,
td.count a.info:visited span {
    border: 1px solid #c6c3c6;
    width: 18px;
    height: 18px;
    margin: -2px 0 0 -2px;
}

.dialog {
    background-color: #c6c3c6;
    font-size: .5em;
    text-align: justify;
}

#intro {
    margin: 15% 30%;
}

/* About */
#about {
    top: 0;
    left: 0;
    margin: 10% 25%;
}

.dialog h2 {
    margin: 1em 1ex;
    text-align: center;
}

.dialog p {
    margin: 1em 0;
}

#about h2 {
    background-image: url(img/minesweeper-64.png);
    background-repeat: no-repeat;
    background-position: 10px 0;
    margin: 10px 0;
    padding: 1em 80px;
    height: 70px;
}
#about h2 span {
    display: block;
    font-size: .85em;
}

.dialog li {
    list-style-type: none;
}
.dialog p,.dialog ul,.dialog li {
    margin-left: 2ex;
    margin-right: 2ex;
}
.dialog li:before {
    content: "- ";
}
.dialog code {
    display: block;
    text-align: center;
}
.close {
    background: url(img/close.png) no-repeat;
}
.minimize {
    background: url(img/minimize.png) no-repeat;
}