/* html, body */
html, body {
	margin: 0;
	padding: 0;
	background-color:black;
}
* {
	/* stop all ipad/iphone highlight on click or a-links */
    -webkit-tap-highlight-color: transparent;
}

/* design sudoku board */
.sudoku-board {
	position: relative;	/* tile erlauben absolut zu positionieren! */
	margin: 0 auto;		/* board zentrieren */
	border: 4px solid #666;	/* außenrahmen. @todo berechnung */
}

/* design sudoku board section (odd/even) */
.sudoku-section-odd {
	position: absolute;
	box-sizing: border-box;	/* w/h inkl. rahmen */
	border: 1px solid #777;
	background-color: #ddd;
}

.sudoku-section-even {
	position: absolute;
	box-sizing: border-box;
	border: 1px solid #777;
	background-color: white;
}
/* design sudoku board section input */
.sudoku-section-odd-input,
.sudoku-input-odd {
	position:absolute;
	background-color: #bbb;
}
.sudoku-section-even-input,
.sudoku-input-even {
	position:absolute;
	background-color: #eee;
	-background-color: red;
}
/* design board check/valid/invalid */
.sudoku-matrix-check,
.sudoku-valid-check {
	border-color:blue;
}
.sudoku-matrix-fail,
.sudoku-valid-fail {
	border-color:red;
}
.sudoku-matrix-ok,
.sudoku-valid-ok {
	border-color:green;
}
/* design input error, disabled @todo */
/* INPUTERROR only if it allow to enter fail values. */
.sudoku-input-error {
	background: #ffc9d7 !important;
}

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

/* design sudoku-tile text */
.sudoku-tile,
.tile {
	/* text-color und umrahmung */
	color: black;
	/*
	text-shadow:  1px  1px 1px white,
	              1px -1px 1px white,
	             -1px  1px 1px white,
	             -1px -1px 1px white;
    */
}
/* design sudoku-tile */
.sudoku-tile,
.tile {
	border: 1px solid #777;
	-height: 40px;
	-width: 40px;
	box-sizing: border-box;	/* tile inkl rahmen!! */
	border-radius:4px;
	text-align:center;
	vertical-align:middle;
	-line-height:40px;
	-font-size:40px;
    BAK---box-shadow: 1px 2px 2px #888888;
    cursor:pointer;
    NO-background:url('image/wood1.jpg');
    overflow:hidden;	/* einzelne tiles sollen nicht überlaufen */
}
/* animation für tiles */
.sudoku-tile,
.tile {
	/*
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
    */
}

/* unterschiedliches aussehen fuer
   die verschiedenen eigenschaften. */
.sudoku-tile.select-avail,
.tile.select-avail {
    border-color: #5f93c6;
    background-color:#aed5fc;
    -background-color:#4ca2ff;
}
.sudoku-tile.select-avail-rc,
.tile.select-avail-rc {
	border-color: #5f93c6;
    BAK---box-shadow: 1px 2px 2px #225093,
            		0 0 10px #225093;
}
/* eine vorhandene zahl markiert. grüne umrahmung. */
.sudoku-tile.select-green,
.tile.select-green {
	border-color: #80ff00;
    background-color:#60dd00;
}
.sudoku-tile.select-green-rc,
.tile.select-green-rc {
	border-color: #80ff00;
    BAK---box-shadow: 1px 2px 2px #407700,
            		0 0 10px #407700;
}

/* hover-version */
/*
.sudoku-tile:hover,
.tile:hover {
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
}
*/

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

/* design sudoku scoreboard */
.sudoku-scoreboard {
    width:100%;
    -background-color:#fff;
    -background:rgba(0,0,0,.5);
    border:0;
    display:table;
	box-sizing: border-box;
    padding:0.5em 0.4em;
    -font-size:22px;
    
color:white;
text-shadow:  1px  1px 1px black,
	              1px -1px 1px black,
	             -1px  1px 1px black,
	             -1px -1px 1px black;

    
    height:56px;
	    
}
.sudoku-scoreboard div {
    display:table-cell;
    white-space:nowrap;
    vertical-align:middle;
}
.sudoku-scoreboard div:nth-child(1) { width:12%; text-align:left; }
.sudoku-scoreboard div:nth-child(2) { width:20%; text-align:left; }
.sudoku-scoreboard div:nth-child(3) { width:20%; text-align:left; }
.sudoku-scoreboard div:nth-child(4) { width:8%; text-align:center; }
.sudoku-scoreboard div:nth-child(5) { width:20%; text-align:center; }
.sudoku-scoreboard div:nth-child(6) { width:8%; text-align:right; }
.sudoku-scoreboard div:nth-child(7) { width:12%; text-align:right; }

/* UTF8 Icons for Scoreboard */
.sudoku-scoreboard #sbTipp:before {
	content: "\1F4A1"; /* light */
	/* text-shadow: 0 0 6px #FFFF00;	/* glow light */
}
.sudoku-scoreboard #sbTimer:before {
	content: "\23F1"; /* stop-watch */
}
.sudoku-scoreboard #sbScore:before {
	content: "\1F4B0"; /* moneybag */
}

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

/* design sudoku numbers */
/* #numbers ist eine tabelle mit zellen da die breite benötigt wird.
   eine table-row wird nicht benötigt. */
/* 540x608*/
.sudoku-numbers,
#numbers,
.numbers {
	margin:0 auto;
	box-sizing: border-box;
}

/* die tiles in den einzelnen zellen zentrieren. */
.numbers .tile {
	display: inline-block;
	background: #e5d290;
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
}
.numbers.mode-edit .tile {
	background: #f7f7f7 !important;
}

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

/* Score-Up-Animation */
.sudoku-score-up {
	-webkit-transform: translate3d(0,0,0);
	position:absolute;
	color:white;
	font-size:30px;
	/*
	text-shadow:  1px  1px 1px black,
	              1px -1px 1px black,
	             -1px  1px 1px black,
	             -1px -1px 1px black;
	*/
	transform: translate(0,-30px) scale(1,1);
	-webkit-transform:translate3d(0,-30px,0) scale3d(1,1,1);
	
    pointer-events:none;          /* unclickable: THIS IS THE TRICK YOU SEEK */
}
.sudoku-score-up.animate {
  	-webkit-transition: all 1.6s ease-out;
  	        transition: all 1.6s ease-out;
	transform: translate(0,-120px) scale(2.2,2.2);
	-webkit-transform:translate3d(0,-120px,0) scale3d(2.2,2.2,1);
	opacity:0.1;
}

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


/**/
button, h1 {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ---------------- */
.dialog,
.dialog-overlay,
.dialog__overlay {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.dialog {
	position: fixed;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	pointer-events: none;
}
.dialog-overlay,
.dialog__overlay {
	position: absolute;
	z-index: 1;
	background: rgba(55, 58, 71, 0.9);
	background: rgba(55, 58, 71, 0.4);
	opacity: 0;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	-webkit-backface-visibility: hidden;
}
.move-in .dialog-overlay,
.dialog--open .dialog__overlay
{
	opacity: 1;
	pointer-events: auto;
}
.dialog__content {
	width: 100%;
	max-width: 560px;
	min-width: 290px;
	background: #fff;
	padding: 4em;
	text-align: center;
	position: relative;
	z-index: 5;
	opacity: 0;
	
	padding:0;
	margin:0;

	min-width:460px;
	max-width:560px;
	
	min-height:180px;
	height:auto;
	max-height:860px;
	
	box-sizing: border-box;
	padding: 0;
	border-radius:1em;
	border:2px solid black;
	overflow:hidden;
	box-shadow: 4px 4px 4px #333;
}
.dialog--open .dialog__content {
	pointer-events: auto;
}
/* animations for dialog */ 
.dialog-overlay,
.dialog.dialog__overlay {
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}
.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content,
.dialog.dialog--close2 .dialog__content {
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.dialog.dialog--open .dialog__content {
	-webkit-animation-name: anim-open;
	animation-name: anim-open;
	-webkit-animation-timing-function: cubic-bezier(0.6,0,0.4,1);
	animation-timing-function: cubic-bezier(0.6,0,0.4,1);
}
.dialog.dialog--close .dialog__content {
	-webkit-animation-name: anim-close;
	animation-name: anim-close;
}
.dialog.dialog--close2 .dialog__content {
	-webkit-animation-name: anim-close2;
	animation-name: anim-close2;
}
/* keyframes for dialog animation [anim-open, anim-close, anim-close2] */
@-webkit-keyframes anim-open {
	0% { 
		opacity: 0;
		transform: scale(0, 0);
		-webkit-transform: scale3d(0, 0, 1);
	}
	80% {
		opacity: 1;
		transform: scale(1.1, 1.1);
		-webkit-transform: scale3d(1.1, 1.1, 1);
	}
	100% {
		opacity: 1;
		transform: scale(1,1);
		-webkit-transform: scale3d(1, 1, 1);
	}
}
@keyframes anim-open {
	0% {
		opacity: 0;
		transform: scale(0, 0);
		-webkit-transform: scale3d(0, 0, 1);
	}
	80% {
		opacity: 1;
		transform: scale(1.1, 1.1);
		-webkit-transform: scale3d(1.1, 1.1, 1);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
		-webkit-transform: scale3d(1, 1, 1);
	}
}
@-webkit-keyframes anim-close {
	0% { opacity: 1; }
	100% {
		opacity: 0;
		transform: scale(0.5, 0.5);
		-webkit-transform: scale3d(0.5, 0.5, 1);
	}
}
@keyframes anim-close {
	0% { opacity: 1; }
	100% {
		opacity: 0;
		transform: scale(0.5, 0.5);
		-webkit-transform: scale3d(0.5, 0.5, 1);
	}
}
@-webkit-keyframes anim-close2 {
	0% { opacity: 1; }
	100% {
		opacity: 0;
		transform: scale(1.5, 1.5);
		-webkit-transform: scale3d(1.5, 1.5, 1);
	}
}
@keyframes anim-close2 {
	0% { opacity: 1; }
	100% {
		opacity: 0;
		transform: scale(1.5, 1.5);
		-webkit-transform: scale3d(1.5, 1.5, 1);
	}
}
/* ----------------------------------------------- */

/* Sparkle */
@-webkit-keyframes anim-sparkle-rotate /* Safari and Chrome */ {
  0% {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(-180deg) scale(3,3);
    -o-transform: rotate(-180deg) scale(3,3);
    transform: rotate(-180deg) scale(3,3);
  }
  20% {
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes anim-sparkle-rotate {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  5% {
    -ms-transform: rotate(-180deg) scale(3,3);
    -moz-transform: rotate(-180deg) scale(3,3);
    -webkit-transform: rotate(-180deg) scale(3,3);
    -o-transform: rotate(-180deg) scale(3,3);
    transform: rotate(-180deg) scale(3,3);
  }
  10% {
    -ms-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.sparkle--rotate {
  -webkit-animation: anim-sparkle-rotate 30s linear infinite;
  -moz-animation: anim-sparkle-rotate 30s linear infinite;
  -ms-animation: anim-sparkle-rotate 30s linear infinite;
  -o-animation: anim-sparkle-rotate 30s linear infinite;
  animation: anim-sparkle-rotate 30s linear infinite;
}
.sparkle {
    border:0;
}

/* EndOfFile CSS *//**
 * Animation Rotate
 * wird zum routieren der input felder genutzt.
 */
@-webkit-keyframes jumping /* Safari and Chrome */ {
  0% {
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
  }
  50% {
    -webkit-transform: scale(1.5,1.5);
    -o-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);
  }
  100% {
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
  }
}
@keyframes jumping {
  0% {
	-ms-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
  }
  50% {
    -ms-transform: scale(1.5,1.5);
    -moz-transform: scale(1.5,1.5);
    -webkit-transform: scale(1.5,1.5);
    -o-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);
  }
  100% {
    -ms-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
  }
}
.jumping {
  -webkit-animation: jumping .6s ease-out 1;
  -moz-animation: jumping .6s ease-out 1;
  -ms-animation: jumping .6s ease-out 1;
  -o-animation: jumping .6s ease-out 1;
  animation: jumping .6s ease-out 1;
}
/**
 * Keyframe-Animation Swing
 * Schüttelt ein Stein, wenn dieser nicht möglich oder falsch ist.
 */
@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.swing {
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
/**
 * Animation dflip
 * Development für End-Animationen
 */
@-webkit-keyframes dflip /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes dflip {
  from {
	-ms-transform: rotate(0deg) rotateY(0deg);
    -moz-transform: rotate(0deg) rotateY(0deg);
    -webkit-transform: rotate(0deg) rotateY(0deg);
    -o-transform: rotate(0deg) rotateY(0deg);
    transform: rotate(0deg) rotateY(0deg);

  }
  50% {
    transform: rotate3d(-1, 1, 0, 180deg);
  }
  to {
    -ms-transform: rotate(360deg) rotateY(360deg);
    -moz-transform: rotate(360deg) rotateY(360deg);
    -webkit-transform: rotate(360deg) rotateY(360deg);
    -o-transform: rotate(360deg) rotateY(360deg);
    transform: rotate(360deg) rotateY(360deg);
  
    transform: rotate3d(1, 1, 0, 360deg);
  }
}
.dflip
{
       -webkit-animation: dflip 5s ease;
       animation: dflip 1s ease;
       -webkit-animation-iteration-count: 1;
       animation-iteration-count: 1;
} 
/**
 * Animation Rotate
 * wird zum routieren der input felder genutzt.
 */
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
	-ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  /*
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  */
  -webkit-animation: rotating .6s ease-out 1;
  -moz-animation: rotating .6s ease-out 1;
  -ms-animation: rotating .6s ease-out 1;
  -o-animation: rotating .6s ease-out 1;
  animation: rotating .6s ease-out 1;
}