/*
  FFDoku is a Sudoku game primarily designed for the Firefox OS
  Copyright (C) 2012-2013 Erwan GUYADER <taratatach@mozfr.org>, Antoine DUPARAY <antoine.duparay@mozfr.org>

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

html {
  font: 10px 'Feura Sans', Sans-serif;
}

body {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: #FBFBF9;
}

input {
    box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
    border: none;
    min-width: 90px;
    margin: 0px 0.75%;
    padding: 5px;
}

input:active {
    border: 1px solid black;
}

input.text {
    font-weight: bold;
}

/* ------ La barre de titre ------ */

/*section[role="region"] > header > h1 {
    padding-top: 0.5rem;
    font-size: 3rem;
}*/


/* --------- */

#drawer {
    background-color: white;
    height: 100%;
    left: 0rem !important;
    padding-left: 0rem !important;
}

#content {
    background-color: white;
    position: relative;
    text-align: center;
    width: 30rem;
    height: 30rem;
    margin: auto;
    margin-top: 5rem;
    left: -0.2rem;
}

#grid, #commands, #about {
    border-collapse: collapse;
    border: 2px solid black;
}

/* ------ La grille ----- */

#grid {
    position: absolute;
    height: 100%;
    width: 100%;
    box-shadow: 0px 0px 2px black;
    -webkit-box-shadow: 0px 0px 2px black;
    -moz-box-shadow: 0px 0px 2px black;
}

#grid td {
    width: 11.11%;
    height: 11.11%;
    border: 2px solid black;
}

#grid td.borderRight {
    border-right: 3px solid black;
}


#grid td.borderBottom {
    border-bottom: 3px solid black;
}

.number, .cell {
    text-align: center;
}

/* ------ La barre de menu en bas ----- */

/*footer > div[role="toolbar"], footer > div[role="toolbar"] button {
    height: 4rem;
}*/

footer > div[role="toolbar"] {
  z-index: 1;
}

.icon-new {
  background-image: url(../shared/style/headers/images/icons/add.png) !important;
}

.icon-reset {
  background-image: url(images/refresh.png) !important;
}

.icon-about {
  background-image: url(../shared/style/headers/images/icons/user.png) !important;
}


/* ------ Les cases pré remplies ------ */
.number {
    background-color: #BBBBBB;
    font-weight: bold
}

.selected {
    box-shadow:inset 0px 0px 5px 1px rgba(0,0,0,.5);
    -webkit-box-shadow:inset 0px 0px 5px 1px rgba(0,0,0,.5);
    -moz-box-shadow:inset 0px 0px 5px 1px rgba(0,0,0,.5);
}

.wrong {
    background-color: red;
}

/* ------ Le panneau de commandes ----- */

#commands {
    background-color: white;
    width: 50%;
    height: auto;
    box-shadow:0px 0px 10px 3px rgba(0,0,0,.5);
    -webkit-box-shadow:0px 0px 10px 3px rgba(0,0,0,.5);
    -moz-box-shadow:0px 0px 10px 3px rgba(0,0,0,.5);
}

#commands table {
    border-collapse: collapse;
    width: 95%;
    margin: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    height: 11rem;
}

#commands table td {
    border: 2px solid black;
    padding: 3px;
    padding-top: 6px;
}

#erase {
    width: auto !important;
    height: 2rem !important;
    line-height: 2rem !important;
}

/* ------ Panneau d'affichage du about ------ */

#about {
    width: 25rem;
    font-size: 1.6rem;
    padding-right: 7px;
    padding-left: 7px;
    background-color: white;
    box-shadow:0px 0px 10px 3px rgba(0,0,0,.5);
    -webkit-box-shadow:0px 0px 10px 3px rgba(0,0,0,.5);
    -moz-box-shadow:0px 0px 10px 3px rgba(0,0,0,.5);
}

#about button {
    width: 30% !important;
    height: 3rem !important;
    line-height: 2rem !important;
}

/* ------ New Game dialog ------ */

#gameInfos {
  z-index: 2;
}

/* ------------------------------------------ */

.hidden {
  display: none;
}

.displayed {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    top: 25%;
    z-index: 1;
}

form[role="dialog"][data-type="action"] > header:first-child {
  font-size: 3rem !important;
  padding-top: 6rem !important;
  height: 11rem !important;
}

form[role="dialog"][data-type="action"] {
  bottom: 4rem !important;
}