/*
 *    sudoku game css
 *    news.de 2013
 *
 *    @tableofcontent
 *     1. basic styles
 *    98. animations 
 *    99. ie fixes
 *
 */


/**
 *    @section 1. basic styles
 */

/* sprite */
.sudokuSprite { background: url(../../img/games/sudoku/sudokuSprite.png) }

/* presented by news.de */
.sudokuPresentedBy { padding: 20px 0 10px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.4); opacity: .7; cursor: default }

/* logo */
.sudokuLogo { width: 330px; height: 135px; margin: 0 auto; padding: 0 0 20px; background-position: 0 0 }

/* game board bg */
.sudokuGame { position: relative; background: #452a0c url(../../img/games/sudoku/sudokuWoodBg.jpg); border-radius: 5px }

/* game board */
.gameBoard { position: relative; margin: 0 20px; padding: 13px 26px; background: #b27f42 url(../../img/games/sudoku/sudokuWoodBgBright.jpg); border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 15px rgba(0,0,0,.5); cursor: default }
.gameBoardInner { overflow: hidden; border-radius: 4px; box-shadow: 0 1px 1px 2px rgba(255,255,255,.3), inset 0 0 10px rgba(0,0,0,.8) }
.gameFieldSmall { margin: 1px; background-color: rgba(255, 255, 255, .6); box-shadow: inset 0 0 10px rgba(0,0,0,.3) }
.gameFieldSmallest { display: block; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.7); border: 1px solid #c9a67b }
.gameBoard a { display: block; color: #555 }
.gameBoard a:hover { text-decoration: none; background-color: #fffee2; opacity: .3 }
.gameBox { font-size: 38px; font-weight: 700; text-align: center; line-height: 46px }

/* number layer */
.numberLayer { position: absolute; z-index: 99; width: 120px; margin-left: -33px }
.numberLayerInner { background: #b27f42 url(../../img/games/sudoku/sudokuWoodBgBright.jpg); border: 1px solid #97652c; border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,.5) }
.numberLayer:after { content: ''; position: absolute; top: -20px; left: 50%; display: block; width: 0; height: 0; margin-left: -10px; border-style: solid; border-width: 10px; border-color: transparent transparent #97652c transparent }
.numberLayerInner a { display: block; margin: 3px; font-size: 12px; line-height: 30px; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.2); background-color: rgba(255,255,255,.2); border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2) }
.numberLayerInner a:hover { opacity: .8 }

/* buttons */
.sudokuBtns { position: relative; min-height: 40px; margin: 0 20px; padding: 30px 0; text-align: center; color: #fff }
.sudokuBtn { display: inline-block; padding: 10px; color: #962900; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,.2); background-color: #f46f2d; background-image: -moz-linear-gradient(top, #f7a059, #f24204); background-image: -webkit-linear-gradient(top, #f7a059, #f24204); background-image: linear-gradient(top, #f7a059, #f24204); border: 1px solid #ba3500; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4); cursor: pointer }
.sudokuBtn:hover { background-color: #ff8d54; background-image: -moz-linear-gradient(top, #ffb83c, #f4601f); background-color: #ff8d54; background-image: -webkit-linear-gradient(top, #ffb83c, #f4601f); background-color: #ff8d54; background-image: linear-gradient(top, #ffb83c, #f4601f) }
.sudokuBtn:active { background-image: -moz-linear-gradient(top, #f24204, #f7a059) }
a.sudokuBtn { text-decoration: none }
.sudokuMoreBtn { display: inline-block; position: relative }
.sudokuMoreBtn:hover { display: inline-block !important /*kack header.css*/ }
.sudokuMoreBtn:hover .sudokuBtn { background: #fff; border-color: #fff; border-radius: 5px 5px 0 0 }
.sudokuMoreBtn ul { display: none; position: absolute; left: 0; top: 35px; text-align: left; background: #fff; border-radius: 0 5px 5px; box-shadow: 0 1px 1px rgba(0,0,0,.2) }
.sudokuMoreBtn:hover ul { display: block }
.sudokuMoreBtn ul a { display: inline-block; padding: 5px 10px; font-weight: 700; color: #962900; text-shadow: 0 1px 0 rgba(255,255,255,.2); white-space: nowrap }
.newGameBtn { display: none }

/* stop watch */
.stopwatch { position: absolute; right: 0; margin: 10px 0; cursor: default }

/* errors */
.vertErrors { position: absolute; top: 15px; right: -15px; height: 95% }
.vertErrors li { position: relative; height: 11.11%; font-size: 9px; line-height: 39px; color: transparent }
.horErrors { position: absolute; top: -25px; left: 26px; width: 90% }
.horErrors li { position: relative; float: left; width: 11.11%; font-size: 9px; text-align: center; color: transparent }
.gameFieldSmall.error { box-shadow: inset 0 0 5px red }
.vertErrors li.error span { display: block; padding: 2px; background: #b80000; color: #fff }
.vertErrors li.error span:after { content: ''; position: absolute; top: 50%; left: -16px; margin-top: -8px; border-width: 8px; border-style: solid; border-color: transparent #b80000 transparent transparent }
.horErrors li.error span { display: block; margin: 0 5px; padding: 2px; background: #b80000; color: #fff }
.horErrors li.error span:after { content: ''; position: absolute; left: 50%; bottom: -14px; margin-left: -8px; border-width: 8px; border-style: solid; border-color: #b80000 transparent transparent transparent }

/* message layer */
.gameMsg { top: 180px; bottom: 105px }

/* misc */
.redSign { color: red }
/*.greenSign { color: green }
.lightGreySign { color: lightgrey }*/


/**
 *    @section 98. animations
 */

/* nothing yet */

.gameFieldSmall.error { animation: blockError 2s linear infinite }
@keyframes blockError {
    0% { box-shadow: inset 0 0 1px 2px rgba(255,0,0,0) }
   50% { box-shadow: inset 0 0 1px 2px rgba(255,0,0,1) }
  100% { box-shadow: inset 0 0 1px 2px rgba(255,0,0,0) }
}


/**
 *    @section 99. ie fixes
 */

.ie7 .gameFieldSmall,
.ie8 .gameFieldSmall { background-color: #eee0c5 }
.ie7 .numberLayerInner a,
.ie8 .numberLayerInner a { background-color: #eee0c5 }
.ie7 .numberLayerInner a:hover,
.ie8 .numberLayerInner a:hover { background: #fffee2 }
.ie7 .sudokuMoreBtn,
.ie7 .sudokuMoreBtn li,
.ie7 .sudokuBtn { display: inline; zoom: 1 }
.ie7 .sudokuMoreBtn:hover { display: inline !important }
.ie7 .newGameBtn { display: none }

/* end of style sheet */