/*
    I know, I know. It ain't LESS or SASS.
    But I ain't got time for yo' SASS!
*/

/*
    ################
    # Sudoku Board #
    ################
*/

.sudokuGrid {
    background-color: rgba(255,255,255,0.37);
    width: 100%;
    height: 100%;
}

.sudokuRow {
    padding: 0px;
    margin: 0px;
}

.sudokuCell {
    width: 33.3%;
    height: 33.3%;
    padding: 0px;
    margin: 0px;
}

.sudokuCellColumn {
    width:33.3%;
    height:33.3%;
    background-color: rgba(255,255,255,0.66);
    padding: 0px;
}

.sudokuInput {
    font-family: inherit;
    font-size: 100%;
    text-decoration: none;
    border-radius: 2px;
    width:100%;
    height:100%;
}

.sudokuInput,
.sudokuNumberBarItem.activeBarItem,
.resetSelectedButton.activeBarItem {
    cursor: pointer;
}

.staticSudoku {
    cursor: default;
}

.staticSudokuBackground {
    width: 100%;
    height: 100%;
    margin: -1px;
    background-color: rgba(55, 55, 100, 0.1);
}

.selectedInput {
    background-color: rgba(100, 100, 255, 0.3);
}

/*
    ##############
    # Bottom Bar #
    ##############
*/

#sudokuNumberInputBar {
    width: auto;
    max-width: 498px;
    margin: 10px auto;
    padding: 4px 1px;
    background: rgba(255, 255, 255, 0.37);
}

/* Hack to make floated divs maintain height */
#sudokuNumberInputBar:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

.sudokuNumberBarItemContainer {
    float: left;
    padding: 0px 2px;
}

/* When it's a valid move (user can click) */
.sudokuNumberBarItem.activeBarItem,
    .resetSelectedButton.activeBarItem {
    background-color: rgba(255, 255, 255, 0.6);
    color: black;
}

.sudokuNumberBarItemRow {
    clear: both;
}

.resetSelectedContainer {
    padding: 0px 3px 0px 3px;
    max-width: 160px;
}

.resetSelectedButton, .newGameButton {
    float: left;
    width: 100%;
    list-style:none;
    text-align:center;
    min-height: 52px;
    line-height: 50px;
    color: #77778A;
    background-color: rgba(140, 140, 160, 0.3);
    cursor: default;
}

.newGameButton {
    background-color: rgba(255, 255, 255, 0.6);
    color: black;
    cursor: pointer;
    display: block;
}

.newGameButton:hover,
    .sudokuNumberBarItem.activeBarItem:hover,
    .resetSelectedButton.activeBarItem:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.newGameButton:active,
    .sudokuNumberBarItem.activeBarItem:active,
    .resetSelectedButton.activeBarItem:active {
    background-color: rgba(255, 255, 255, 0.8);
}

.alignBarItemRight {
    margin: 0px 5px 0px 1px;
}

.alignBarItemLeft {
    margin: 0px 1px 0px 5px;
}

.bottomBarItem {
    margin-bottom: 0px;
}

.sudokuNumberBarItem {
    width: 52px;
    float: left;
    list-style:none;
    text-align:center;
    margin: 0px 1px 2px 1px;
    height: 52px;
    line-height: 50px;
    color: #77778A;
    background-color: rgba(140, 140, 160, 0.3);
    cursor: default;
}

.newGameSelect {
    padding: 3px 3px 6px 3px;
    margin: 0;
    background: #f8f8f8;
    color: #888;
    border: none;
    outline: none;
    display: inline-block;
    -webkit-appearance: none;

    /*
        This doesn't work in firefox 30+ for
        removing the right-hand arrow in selects...
        Arg! Bootstrap hacks around this with some neat
        javascript. Solution is to implement said
        clever js... Todo.
    */
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    cursor: pointer;
    height: 52px;
    width: 100%;
    font-size: 12pt;
}

.newGameContainer {
    margin-left: 3px;
    margin-right: 3px;
}

.newGameButtonContainer {
    margin-top: 2px;
}

.bottomActionContainer {
    width:auto;
    height: 100%;
    overflow:hidden;
}

/* Used for our simple 2-column grid 
   for handling a responsive-ish layout. */
.rightContainer {
    float: right;
    position: relative;
    width: 50%;
}

.leftContainer {
    float: left;
    position: relative;
    width: 50%;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .newGameSelect {
        padding-right: 18px;
    }
}

.newGameSelectWrapper {
    position: relative;
}

.newGameSelectWrapper:after {
    content: '<>';
    font: 11px "Consolas", monospace;
    color: #aaa;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 8px; 
    top: 2px;
    padding: 0px 0px 2px 0px;
    margin: 2px 0px 0px 0px;
    border-bottom: 1px solid #ddd;
    position: absolute;
    pointer-events: none;
}

.newGameSelectWrapper:before {
    content: '';
    right: 6px;
    top: 0px;
    width: 20px; 
    height: 20px;
    background: #f8f8f8;
    position: absolute;
    pointer-events: none;
    display: block;
}

/*
    ####################
    # Responsive Stuff #
    ####################
*/

@media all and (max-width: 499px) and (min-width: 300px) {
    div.cellItemContainer {
        text-align: center;
        height: 45px;
    }

    .sudokuCellGrid {
        height: 122px;
        width: 100%;
    }

    .staticSudoku, .sudokuInput, .sudokuNumberBarItem {
        font-size:20pt;
    }

    .newGameButton:before {
        content: "NEW";
    }

    .resetSelectedButton:before {
        content: "RESET";
    }

    .sudokuNumberBarItem {
        width: 46px;
        height: 46px;
        line-height: 40px;
    }
}

@media all and (min-width: 500px) {
    div.cellItemContainer {
        text-align: center;
        height: 52px;
    }

    .sudokuCellGrid {
        height: 158px;
        width: 100%;
    }

    .staticSudoku, .sudokuInput, .sudokuNumberBarItem {
        font-size:24pt;
    }

    .newGameButton:before {
        content: "NEW GAME";
    }

    .resetSelectedButton:before {
        content: "RESET TILE";
    }
}

/*
    #################
    # Miscellaneous #
    #################
*/

#maincontainer {
    width: 100%;
    max-width: 500px;
}

body {
    /* Image from -> 
       http://wallpaperscraft.com/download/spring_garden_flowering_trees_pink_30537/3840x2400 */
    background: url('../img/sudoku-background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

* {
    font-family: "Open Sans";
    font-weight: 400;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.overlay {
    width: 100%;
    max-width: 500px;
    height: 500px;
    text-align: center;
    font-size:50pt; 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: rgba(255,255,255,0.37);
}

.v {
    margin-left: 8px;
    margin-right: 8px;
}

.h {
    margin-top: 8px;
    margin-bottom: 8px;
}

.centered {
    margin: 0 auto;
}