style.css

/* Styles go here */

* {
	background-color: white;
}

h1 {
    font-family: FontAwesome, serif;
}

h1 a {
	text-decoration: none;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

td {
	border: 1px solid black;
	width: 18px;
	height: 20px;
	text-align: center;
	border-radius: 3px;
	background-color: gray;
    cursor: default;
}

.hidden-cell:hover {
	background-color: lightgray;
}

.revealed-cell {
	background-color: white;
}

.bomb-cell {
	background-color: red;
}

.blocked-cell {
    background-color: green;
    -webkit-animation: rotating 0.5s alternate 0s 1 ease-in-out;
    -moz-animation: rotating 0.5s alternate 0s 1 ease-in-out;
    -o-animation: rotating 0.5s alternate 0s 1 ease-in-out;
    animation: rotating 0.5s alternate 0s 1 ease-in-out;
}

@-webkit-keyframes rotating {
    0% { 
        -webkit-transform: rotate(0deg);
    } 75% { 
        -webkit-transform: rotate(90deg);
    } 100% {
        -webkit-transform: rotate(0deg);
    }
}

@-moz-keyframes pressing {
    0% { 
        -moz-transform: rotate(0deg);
    } 75% { 
        -moz-transform: rotate(90deg);
    } 100% {
        -moz-transform: rotate(0deg);
    }
}

@keyframes rotating {
    0% { 
        transform: rotate(0deg);
    } 75% { 
        transform: rotate(90deg);
    } 100% {
        transform: rotate(0deg);
    }
}

.highlight-cell {
    opacity: 0.9;
    -webkit-animation: pressing 0.5s alternate 0s infinite ease-in-out;
    -moz-animation: pressing 0.5s alternate 0s infinite ease-in-out;
    -o-animation: pressing 0.5s alternate 0s infinite ease-in-out;
    animation: pressing 0.5s alternate 0s infinite ease-in-out;
}

@-webkit-keyframes pressing {
    0% { 
        opacity: 0.9;
        -webkit-transform: scale(1);
    } 100% { 
        opacity: 0.6;
        -webkit-transform: scale(0.75);
    }
}

@-moz-keyframes pressing {
    from {
        opacity: 0.9;
        transform: scale(1);
    } to { 
        opacity: 0.6;
        transform: scale(0.75);
    }
}

@keyframes pressing {
    from { 
        opacity: 0.9;
        transform: scale(1);
    } to { 
        opacity: 0.6;
        transform: scale(0.75);
    }
}

.alarm-cell {
    color: red;
    font-weight: bold;
    -webkit-animation: alarming 0.5s alternate 0s 2 ease-in-out;
    -moz-animation: alarming 0.5s alternate 0s 2 ease-in-out;
    -o-animation: alarming 0.5s alternate 0s 2 ease-in-out;
    animation: alarming 0.5s alternate 0s 2 ease-in-out;

}

@-webkit-keyframes alarming {
    0% { 
        -webkit-transform: scale(1);
    } 100% { 
        -webkit-transform: scale(2) rotate(30deg);
    }
}

@-moz-keyframes alarming {
    from { 
        transform: scale(1);
    } to { 
        transform: scale(2) rotate(30deg);
    }
}

@keyframes alarming {
    from { 
        transform: scale(1);
    } to { 
        transform: scale(2) rotate(30deg);
    }
}

.minefield-board {
    border: 20px solid transparent;
    position: relative;
    left: -20px;
    top: -20px;
}

.minefield-board tbody{
	background-color: lightgray;
}

#control-panel {
	margin-top: 5px;
}

button {
	background-color: lightgray;
}

button:hover {
	background-color: gray;
}

.display {
	margin-top: 5px;
}

.display-text{
	background-color: lightgray;
}

.bug-icon-cell {
    background-color: transparent;
}