html {
    height: 100%;
}

body {
    background: #FFF;
    margin: 0;
    padding: 0;
    touch-action: manipulation;
}

#container {
    margin: 0 auto;
    padding: 0;
    width: 800px;
}

#background {
    z-index: 0;
    float: left;
    display: block;
    width: 800px;
    height: 600px;
    border: 1px solid #006699;
}

#menu {
    z-index: 1;
    float: left;
    display: block;
    position: relative;
    width: 230px;
    height: 443px;
    top: -524px;
    left: 18px;
}

#grid {
    z-index: 2;
    float: left;
    position: relative;
    width: 510px;
    height: 415px;
    top: -522px;
    left: 44px;
}

#botButs {
    z-index: 1;
    float: left;
    position: relative;
    width: 250px;
    height: 80px;
    top: -512px;
    left: 175px;
}

.botButton {
    cursor: pointer;
}

#closeBut {
    z-index: 1;
    float: left;
    position: relative;
    width: 33px;
    height: 36px;
    top: -1003px;
    left: 275px;
    background: url(../assets/images/closeBtn.png);
    cursor: pointer;
}

#closeBut.hover:hover {
    background: url(../assets/images/closeBtnHover.png);
}

#printBut {
    z-index: 1;
    float: left;
    position: relative;
    width: 80px;
    height: 30px;
    top: -463px;
    left: 212px;
    background: url(../assets/images/print.png);
    cursor: pointer;
}

#printBut.hover:hover {
    background: url(../assets/images/printHover.png);
}

#copyright {
    position: relative;
    z-index: 1;
    float: left;
    font-size: 11px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    top: -470px;
    left: -465px;
    color: #FFF;
}

#startNumber {
    height: 77px;
    margin: 5px 7px 0;
}

#randNumber {
    margin: 5px 7px 7px;
    height: 77px;
}

#showMultiples {
    width: 120px;
    height: 280px;
    float: left;
    margin: 0 8px;
}

#shadeNum {
    width: 100px;
    margin: 5px 0 0 132px;
    height: 280px;
}

h1 {
    margin: 0;
    font-size: 12px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

h2 {
    margin: 0;
    font-size: 20px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    position: relative;
    top: -38px;
}

input {
    height: 25px;
    width: 105px;
    font-size: 16px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    margin: 5px 0 5px;
    padding: 0;
}

p {
    margin: 0 5px;
    font-size: 12px;
    font-style: italic;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

.updateBut {
    margin: 3px 0 0 112px;
    background: url(../assets/images/updateBut.png);
    width: 80px;
    height: 30px;
    position: absolute;
    cursor: pointer;
}

.updateBut.hover:hover {
    background: url(../assets/images/updateButHover.png);
}

#shadeYelBut {
    margin: 8px 0 0 33px;
    background: url(../assets/images/shadeYel.png);
    width: 31px;
    height: 31px;
    position: absolute;
    cursor: pointer;
}

#shadeRedBut {
    margin: 50px 0 0 33px;
    background: #FFF url(../assets/images/shadeRed.png) no-repeat;
    width: 31px;
    height: 32px;
    position: absolute;
    cursor: pointer;
}

#shadeBluBut {
    margin: 95px 0 0 33px;
    background: #FFF url(../assets/images/shadeBlu.png);
    width: 31px;
    height: 30px;
    position: absolute;
    cursor: pointer;
}

#eraseShadeBtn {
    background-clip: border-box;
    background-position: center center;
    box-sizing: border-box;
    border: solid 1px #FFF;
    margin: 135px 0 0 23px;
    background: url(../assets/images/eraseShade.png) no-repeat;
    width: 54px;
    height: 54px;
    position: absolute;
    cursor: pointer;
    border-radius: 8px;
}

#clearShadeBtn {
    margin: 195px 0 0 22px;
    background: url(../assets/images/clearAllShades.png) no-repeat;
    width: 55px;
    height: 55px;
    position: absolute;
    cursor: pointer;
}

#shadeYel {
    background: url(../assets/images/shadeYel.png);
    margin: 10px 0;
}

#shadeRed {
    border: solid 2px #F00;
    margin: 10px 0;
}

#okMultiBut {
    margin: 10px 0 0 15px;
    background: url(../assets/images/okBtn.png);
    width: 80px;
    height: 30px;
    position: absolute;
    cursor: pointer;
}

#okMultiBut.hover:hover {
    background: url(../assets/images/okBtnHover.png);
}

#multiNumNote{
    margin-top: 35px;
    text-align: center;
}

#shadeBlu {
    background: #FFF url(../assets/images/shadeBlu.png);
    margin: 10px 0;
}

#showAllNumBut {
    background: url(../assets/images/showAllBtn.png) no-repeat;
    width: 75px;
    height: 75px;
    margin: 5px 3px;
    position: absolute;
}

#clearAllNumBut {
    background: url(../assets/images/clearAllBtn.png) no-repeat;
    width: 75px;
    height: 75px;
    margin: 5px 5px 5px 88px;;
    float: left;
    position: absolute;
}

#clearNumBut {
    background: url(../assets/images/clearNumber.png) no-repeat;
    width: 75px;
    height: 75px;
    margin: 6px 5px 5px 173px;
    float: left;
    position: absolute;
    border-radius: 10px;
}

.gridRow {
    clear: both;
}

.gridCell {
    width: 49px;
    height: 40px;
    float: left;
    text-align: center;
    margin: 1px;
    background: #FFF;
    overflow: hidden;
}

.backImg{
    width:49px;
    height: 40px;
    overflow: hidden;
    background-color: #FFF;
}

/* Paths are different as .cur files are loaded from the Document level (HTML) not CSS level */

.defaultCursor {
    cursor: default;
}

.pointerCursor {
    cursor: pointer;
}

.curClear {
    cursor: url(assets/images/curClear.cur), auto; /* IE */
    cursor: url(../assets/images/curClear.png) 14 23, auto; /* Others */
}

.curEraser {
    cursor: url(assets/images/curEraser.cur), auto; /* IE */
    cursor: url(../assets/images/curEraser.png) 14 23, auto; /* Others */
}

.curShadeYel {
    cursor: url(assets/images/curShadeYel.cur), auto; /* IE */
    cursor: url(../assets/images/curShadeYel.png) 20 21, auto; /* Others */
}

.curShadeRed {
    cursor: url(assets/images/curShadeRed.cur), auto; /* IE */
    cursor: url(../assets/images/curShadeRed.png) 20 21, auto; /* Others */
}

.curShadeBlu {
    cursor: url(assets/images/curShadeBlu.cur), auto; /* IE */
    cursor: url(../assets/images/curShadeBlu.png) 20 21, auto; /* Others */
}

.curClear .pointerCursor,
.curEraser .pointerCursor,
.curShadeYel .pointerCursor,
.curShadeRed .pointerCursor,
.curShadeBlu .pointerCursor {
    cursor: inherit;
}

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

.toolSelected {
    box-shadow: -0px 0px 12px #000;
}

@media print {

    #background, #menu, #botButs, #closeBut, #printBut {
       display: none;
    }

    #grid_wrapper,
    #grid {
        width: 530px;
        height: 440px;
        top: 0px;
        left: 0px;
        border: 1px solid #000;
    }

    .gridCell {
        border: 1px solid #000;
    }

    #copyright{
        padding-top: 15px;
        color: #000;
        top: 0;
        left: 0;
    }

}