﻿.connectfour-board {
    background-color: blue;
    display: flex;
    flex-direction: row;
    max-width: 490px;
}

.connectfour-column {
    min-width: 60px;
    min-height: 60px;
    height: 100%;
}

.connectfour-gamepiece {
    border: solid 1px black;
    margin: 5px;
    min-height: 60px;
    min-width: 60px;
    border-radius: 50px;
}

.connectfour-red {
    background-color: red;
}

.connectfour-yellow {
    background-color: yellow;
}

.connectfour-blank {
    background-color: white;
}


.minesweeper-game div {
    line-height: 0;
    font-size: 0;
    float: left;
}

.minesweeper-board {
    display: inline-block;
    font-family: Arial;
    background-color: silver;
}

.minesweeper-medium {
    width: 276px;
    height: 318px;
}

.minesweeper-board div {
    background-image: url(../images/minesweeper/sprite100.gif);
}

.minesweeper-gamepiece {
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    font-size: 0px;
}

.minesweeper-unrevealed {
    background-position: 0px -39px;
}

.minesweeper-flagged {
    background-position: -16px -39px;
}

.minesweeper-mine {
    background-position: -64px -39px;
}

.minesweeper-mine-smiley {
    background-image: url("../smiley-small.png");
}

.minesweeper-0 {
    background-position: 0px -23px;
}

.minesweeper-1 {
    background-position: -16px -23px;
}

.minesweeper-2 {
    background-position: -32px -23px;
}

.minesweeper-3 {
    background-position: -48px -23px;
}

.minesweeper-4 {
    background-position: -64px -23px;
}

.minesweeper-5 {
    background-position: -80px -23px;
}

.minesweeper-6 {
    background-position: -96px -23px;
}

.minesweeper-7 {
    background-position: -112px -23px;
}

.minesweeper-8 {
    background-position: -128px -23px;
}

.minesweeper-border-jointleft {
    background-position: -56px -81px;
    width: 10px;
    height: 10px
}

.minesweeper-border-jointright {
    background-position: -66px -81px;
    width: 10px;
    height: 10px
}

.minesweeper-border-horizontal {
    background-position: -40px -81px;
    width: 16px;
    height: 10px;
}

.minesweeper-border-vertical {
    background-position: -134px -39px;
    width: 10px;
    height: 16px;
}

.minesweeper-border-vertical-long {
    background-position: -134px -39px;
    width: 10px;
    height: 32px;
}

.minesweeper-border-bottomleft {
    background-position: -20px -81px;
    width: 10px;
    height: 10px;
}

.minesweeper-border-bottomright {
    background-position: -30px -81px;
    width: 10px;
    height: 10px;
}

.minesweeper-border-topleft {
    background-position: 0px -81px;
    width: 10px;
    height: 10px;
}

.minesweeper-border-topright {
    background-position: -10px -81px;
    width: 10px;
    height: 10px;
}

.minesweeper-time-0 {
    background-position: 0 0;
    width: 13px;
    height: 23px;
}

.minesweeper-time-1 {
    background-position: -13px 0;
    width: 13px;
    height: 23px;
}

.minesweeper-time-2 {
    background-position: -26px 0;
    width: 13px;
    height: 23px;
}

.minesweeper-time-3 {
    background-position: -39px 0;
    width: 13px;
    height: 23px;
}

.minesweeper-time-4 {
    background-position: -52px 0;
    width: 13px;
    height: 23px;
}

.minesweeper-time-5 {
    background-position: -65px 0;
    width: 13px;
    height: 23px;
}

.minesweeper-time-6 {
    background-position: -78px 0;
    width: 13px;
    height: 23px;
}

.minesweeper-time-7 {
    background-position: -91px 0;
    width: 13px;
    height: 23px;
}

.minesweeper-time-8 {
    background-position: -104px 0;
    width: 13px;
    height: 23px;
}

.minesweeper-time-9 {
    background-position: -117px 0;
    width: 13px;
    height: 23px;
}

.minesweeper-time-blank {
    background-position: -130px 0;
    width: 13px;
    height: 23px;
}

.minesweeper-board #mines_hundreds {
    margin: 4px 0 5px 6px;
}

.minesweeper-board #mines_tens {
    margin: 4px 0 5px 0px;
}

.minesweeper-board #mines_ones {
    margin: 4px 0 5px 0px;
}

.minesweeper-board #seconds_hundreds {
    margin: 4px 0 5px 0;
}

.minesweeper-board #seconds_tens {
    margin: 4px 0 5px 0;
}

.minesweeper-board #seconds_ones {
    margin: 4px 6px 5px 0;
}

.minesweeper-board #face {
    margin-top: 3px;
    margin-bottom: 3px;
}

.minesweeper-board .minesweeper-face-smile {
    background-position: 0px -55px;
    width: 26px;
    height: 26px;
}

.minesweeper-board .minesweeper-face-dead {
    background-position: -78px -55px;
    width: 26px;
    height: 26px;
}

.minesweeper-board .minesweeper-face-oooh {
    background-position: -52px -55px;
    width: 26px;
    height: 26px;
}

.minesweeper-board .minesweeper-face-win {
    background-position: -104px -55px;
    width: 26px;
    height: 26px;
}

.tictactoe-board {
    background-color: white;
    display: flex;
    flex-direction: row;
    max-width: 490px;
}

.tictactoe-column {
    min-width: 60px;
    min-height: 60px;
    height: 100%;
}

.tictactoe-gamepiece {
    border: solid 1px black;
    min-height: 60px;
    min-width: 60px;
}

.tictactoe-x {
    background-image: url("../images/tictactoe/letter-x.png");
    background-repeat: no-repeat;
}

.tictactoe-o {
    background-image: url("../images/tictactoe/letter-o.png");
    background-repeat: no-repeat;
}

.tictactoe-blank {
    background-image: none;
}

.gameoflife-container div {
    background-image: url(../images/gameoflife/gameoflife-sprites.png);
    width: 40px;
    height: 40px;
}

.gameoflife-deadcell-faces {
    background-position: 0px 0px;
}

.gameoflife-alivecell-faces {
    background-position: -41px 0px;
}

.gameoflife-deadcell-cats {
    background-position: -82px 0px;
}

.gameoflife-alivecell-cats {
    background-position: -122px 0px;
}

.gameoflife-deadcell-aliens {
    background-position: 0px -40px;
}

.gameoflife-alivecell-aliens {
    background-position: -41px -40px;
}

.gameoflife-deadcell-boxes {
    background-position: -82px -40px;
}

.gameoflife-alivecell-boxes {
    background-position: -122px -40px;
}

.blackjack-drawdeck {
    height:190px;
    width:140px;
    float:left;
}

.blackjack-drawdeck:not(:first-child) {
    margin-left: -130px;
}

.blackjack-card {
    height: 190px;
    width: 140px;
    float: left;
}

.blackjack-card:not(:first-child) {
    margin-left: -100px;
}

.tetris-container {
    display:table;
    width:240px;
}

.tetris-row {
    display:table-row;
    height:24px;
    width:240px;
}

.tetris-cell {
    display:table-cell;
    background-color:#000000;
    width:24px;
    height:24px;
    border:solid 1px #242323;
}

.tetris-piece {
    border-top:solid 1px white;
    border-right:solid 1px gray;
    border-left:solid 1px gray;
    border-bottom:solid 1px black;
}

.tetris-red-cell {
    background-image: url(../images/tetris/tetromino-red.png);
}

.tetris-lightblue-cell {
    background-image: url(../images/tetris/tetromino-lightblue.png);
}

.tetris-purple-cell {
    background-image: url(../images/tetris/tetromino-purple.png);
}

.tetris-yellow-cell {
    background-image: url(../images/tetris/tetromino-yellow.png);
}

.tetris-green-cell {
    background-image: url(../images/tetris/tetromino-green.png);
}

.tetris-orange-cell {
    background-image: url(../images/tetris/tetromino-orange.png);
}

.tetris-darkblue-cell {
    background-image: url(../images/tetris/tetromino-darkblue.png);
}

.tetris-block-display {
    background-image: url(../images/tetris/tetromino-block.png);
    width:48px;
    height:48px;
}

.tetris-straight-display {
    background-image: url(../images/tetris/tetromino-straight.png);
    width:96px;
    height:24px;
}

.tetris-tshaped-display {
    background-image: url(../images/tetris/tetromino-tshaped.png);
    width:72px;
    height:48px;
}

.tetris-leftzigzag-display {
    background-image: url(../images/tetris/tetromino-leftzigzag.png);
    width: 72px;
    height: 48px;
}

.tetris-rightzigzag-display {
    background-image: url(../images/tetris/tetromino-rightzigzag.png);
    width: 72px;
    height: 48px;
}

.tetris-reverselshaped-display {
    background-image: url(../images/tetris/tetromino-reverselshaped.png);
    width: 72px;
    height: 48px;
}

.tetris-lshaped-display {
    background-image: url(../images/tetris/tetromino-lshaped.png);
    width: 72px;
    height: 48px;
}

.tetris-display-row {
    padding: 10px;
}

@keyframes fadeOut {
    0% { background-color: white }
    50% { background-color: gray }
    100% { background-color: black }
}

@-webkit-keyframes fadeOut {
    0% { background-color: white }
    50% { background-color: gray }
    100% { background-color: black }
}

@-moz-keyframes fadeOut {
    0% { background-color: white }
    50% { background-color: gray }
    100% { background-color: black }
}

.tetris-clear-row {
    border: solid 1px gray;
    animation-name: fadeOut;
    animation-duration: 1s;
    -webkit-animation-name: fadeOut;
    -webkit-animation-duration: 1s;
    -moz-animation-name: fadeOut;
    -moz-animation-duration: 1s;
}

.solitaire-drawdeck {
    height: 190px;
    width: 140px;
    float: left;
}

.solitaire-drawdeck:not(:first-child) {
    margin-left: -130px;
}

.solitaire-can-drop {
    border: 2px dashed green;
}

.solitaire-discards {
    height: 190px;
    width: 140px;
    float: left;
}

.solitaire-discards:not(:first-child) {
    margin-left: -110px;
}

.solitaire-drawdeck {
    width: 140px;
    vertical-align:top;
}

.solitaire-stackpile:not(:first-child) {
    margin-top: -130px;
}