style.css

/* 
    Created on : Mar 3, 2017, 10:51:33 AM
    Author     : rjones52
*/
@font-face {
    font-family: "D7MBI";
    src: url("./fonts/DSEG/fonts/DSEG7-Modern/DSEG7Modern-BoldItalic.woff") format('woff');
}

html {
    position: relative;
    min-height: 100%;
}
body {
  /* Margin bottom by footer height */
    margin-bottom: 50px;
    background-color: #396DA6;
    
    user-select: none;/*disable text highlight*/
    cursor: default; /* disable cursor change*/
}

/*Gameboard controls*/
#gameBoard {
    line-height: 0px;
    font-size: 0px;
    /*margin: 25px auto;*/
    margin: 0 0 0 0;
    margin: 0 auto;
    margin-top: 6px;

    /*border controls*/
    border-top: 3px solid #a0a0a0;
    border-left: 3px solid #a0a0a0;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    box-sizing: content-box;
}
#wholeGame {
    border: 6px solid #c3c3c3;
    box-sizing: content-box;
    box-shadow:0px 0px 5px 1px rgba(0,0,0,0.68);
    padding:0;
    margin: 0 auto;
    background-color: #c3c3c3;
    position:absolute;
    left:100px;
    top:100px;
    z-index: 100;
}

/* load sprite sheet and tile size/position*/
.tile {
	background-image: url(sprite.png);
    height:18px;
    width:18px;
    border: white solid 1px;
    background-position: 0 -20px;
    border:0;
    display: inline-block;
    color:white;
    text-align: center;
}

/*Positions of pictures on the sprite sheet*/
.pressed {
    background-position: 0 0;
}
.show0 {
    background-position: 0 0;
}
.show1 {
    background-position: -20px 0;
}
.show2 {
    background-position: -40px 0;
}
.show3 {
    background-position: -60px 0;
}
.show4 {
    background-position: -80px 0;
}
.show5 {
    background-position: -100px 0;
}
.show6 {
    background-position: -120px 0;
}
.show7 {
    background-position: -140px 0;
}
.show8 {
    background-position: -160px 0;
}

.bomb {
	/*flag*/
    background-position: -80px -20px;
}
.flag {
    background-position: -20px -20px;
}
.flagPress { /*same tile as normal flag. I dont like the look of a pressed flag button */
    background-position: -20px -20px;
}
.killer {
    background-position: -60px -20px;
}
.badGuess {
    background-position: -100px -20px;
}
.guess {
    background-position: -120px -20px;
}
.guessPress {
    background-position: -140px -20px;
}


#scoreWrapper {
    float: left;
    margin:4px 0 4px 4px;
}

#secondsWrapper {
    float: right;
    margin:4px 4px 4px 0;
}

#secondsWrapper, #scoreWrapper {
    background-color: black;
    font-family: "D7MBI";
    /*margin: 0 auto;*/
    width:97px;
    height:26px;
    /*user-select: none;
    cursor: default;*/
    
    color: rgba(255,0,0,0.35);
    position: relative;
    display: inline-block;
    /*border: 1px solid black;*/
    width: auto;
    /*margin:4px auto;*/
}

#seconds, #score {
    position: absolute;
    right: 0px;
    color: red;
}

#gameHeader {
    /*border:2px solid #a0a0a0;*/
    border-top: 3px solid #a0a0a0;
    border-left: 3px solid #a0a0a0;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    box-sizing: border-box;
    margin:1px auto;
}

#newGame {
	background-image: url(sprite.png);
    width:26px;
    height:26px;
    display: inline-block;
    margin: 4px 2px -3px 2px;
    right:1px;
    background-position: 0px -40px;
}

.radio-inline{
    width:100%;
    text-align:left;
}

.rdo {
    visibility:hidden;
}

.gameOptions {
    margin:5px;
}

#helpMenu {
    margin-left: 10px;
}

.emptyLabel {
    color: rgba(0,0,0,0);
}

#diffEasy, #diffMedium, #diffHard {
    padding: 0 35px;
}

#width, #height, #mines {
    width:50px;
    margin: 0px 10px;
}

.footer {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 50px;
  background-color: #eee;
  padding:15px;
  color: #fff;
}

.times {
    font-size: 0.8em;
}

/*CSS Github ribbon found from https://github.com/simonwhitaker/github-fork-ribbon-css*/
.github-ribbon {
    width: 12.1em;
    height: 12.1em;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    font-size: 13px;
    text-decoration: none;
    text-indent: -999999px;
}



.github-ribbon:before {
    content: "";
    padding: .38em 0;
    background-color: #333;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    -webkit-box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}
.github-ribbon:after {
    content: attr(title);
    color: #fff;
    font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.54em;
    text-decoration: none;
    text-shadow: 0 -0.08em rgba(0, 0, 0, 0.5);
    text-align: center;
    text-indent: 0;

    padding: .15em 0;
    margin: .15em 0;

    border-width: .08em 0;
    border-style: dotted;
    border-color: rgba(255, 255, 255, 0.7);
}

.github-ribbon:before, .github-ribbon:after {
    position: absolute;
    display: block;

    width: 15.38em;
    height: 1.54em;

    top: 3.23em;
    left: -3.23em;

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}