@media screen {
	/**
	 * NoScript
	 **/
	noscript div{
		width:100%;
		height:100%;
		position:fixed;
		color: #fff;
		background-color:#000;
		z-index:999;
	}

    /**
	 * msgbox
	 **/
	div#msg{
		display:none;
		width:300px;
		height:64px;
		top:15%;
		left:50%;
		margin: 0 -32px 0 -150px;
		position:fixed;
		background-color:rgb(200,0,0);
		color: white;
		border: 2px solid red;
		box-shadow: 4px 4px 8px 2px #a00;
		z-index:25;
	}
	 
	div#msg img{width:62px;height:62px;float:left;}
	div#msg span{width:236px;height:62px;display:table-cell;vertical-align:middle;}
	
	#copyright{display:none;}
	
	*:focus {outline: none;}
}

@media print {
	#content{width:800px !important;}
	nav{display:none !important;}
	#msg{display:none !important;}
	footer{display:none;}
	.pagebreak{page-break-before:always;}
}
  
@media screen, print {
	html{
		background: url('bg.jpg') no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		font-family: Times, serif;
		font-weight:bold;
	}
	nav{
		z-index:2;
		left:0;
		position: fixed;
		top: 0;
		height: 10px;
		width: 100%;
		background: #8B8878;
		box-shadow: 0px 0px 25px 20px #8B8878;
	}

	footer{
		z-index:2;
		left:0;
		position: fixed;
		bottom: 0;
		width: 100%;
		line-height: 1.5em;
		text-align: center;
		background: #8B8878;
		height:25px;
		box-shadow: 0px 0px 25px 20px #8B8878;
	}
	#generateTime{
		position: absolute;
		left:0px;
		font-size:16px;
	}
	
	div#spacer{
		height:50px;/*75px;*/
	}
	
	input[type=button], input[type=submit] {
		width:26px;
		background-color:#e8e8e8;
		border: 1px solid #707070;
	}
	input[type=button]:hover  ,input[type=submit]:hover{
		background-color:#a6f4ff;
		border: 1px solid #26a0da;
	}
	input[type=button].pressed {
		background-color:#34b4e3;
		border: 1px solid #0089b4;	
	}
	input[type=submit] {
		width:234px;
	}

	.link{
		text-decoration:none;
		color: black;
	}
	.link:hover{color:#c00;text-shadow: black 1px 1px 3px;}
	.link:after{
		content: ' ' url(./link.png);
	}
	
	/*************************************************/
	/**
	 * Äußere tabelle
	 **/
	table.tblotr{
		font-size:36px; 
		border-collapse:collapse;
		border-spacing:0px;
		margin: 0 auto;
	}
	table.tblotr div{
		border:1px solid #444;
	}

	/**
	 * Innere Tabelle
	 **/
	.tblinr{
		border-collapse:seperate; /*collapse;*/
		border-spacing:0;
		padding:0;
		margin: 0;
		border:1px solid #666;
		background-color:red;/*#999;*/
	}

	/**
	 * zellen innere tabelle
	 **/
	.sodtr{
		width:72px;
		height:72px;
		text-align:center;
		vertical-align:center;
		margin:0px;
		background-color: #ded;
		color:grey;
		border:1px solid #999;
		padding:0px;
		margin: 0;
		
	}
	td.sodtr input{
		width:69px;
		height:67px;
		border:0px;
		background-color:transparent;/*#ded;*/
		text-align:center;
		/*font-family: Times, serif;*/
		font-weight:bold;
		font-size:36px;
		color:black;
	}


	/**
	 * # trennramen
	 **/
	/*vertikal*/
	td#V11,td#V12,td#V13{
		border-right: 2px solid grey !important;
	}
	td#V31,td#V32,td#V33{
		border-left: 2px solid grey !important;
	}
	td#V21,td#V22,td#V23{
		border-left: 2px solid grey !important;
		border-right: 2px solid grey !important;
	}

	/*horizontal*/
	td#V11,td#V21,td#V31{
		border-bottom: 2px solid grey !important;
	}
	td#V13,td#V23,td#V33{
		border-top: 2px solid grey !important;
	}
	td#V12,td#V22,td#V32{
		border-top: 2px solid grey !important;
		border-bottom: 2px solid grey !important;
	}

	/**
	 * überabstände erzeugen
	 **/
	td#V11,td#V12,td#V13{
	 padding-left:36px;
	}
	td#V11,td#V21,td#V31{
	 padding-top:36px;
	}
	td#V31,td#V32,td#V33{
	 padding-right:36px;
	}
	td#V13,td#V23,td#V33{
	 padding-bottom:36px;
	}

	div[id="1_1"] table{
		/*test*/
	}

	nav div#new{float:right; margin-right:10px;}
	nav div#new a{
		text-decoration:none;
		/*margin top right bottom left */
		//position: relative;
		padding: 0px 10px 5px 10px;
		//top: 50px;
		float:left;
		margin:0px 2px 0px 2px;
		border: 5px solid #8B8878;
		border-top: 0px;
		border-radius: 0px 0px 5px 5px;
		background-color: #8B8878;
		color: #fff;
		border-bottom:1px solid #c00;
	}
	nav div#new a:hover{
		border: 5px solid #fff;
		background-color: #fff;
		color: #000;
	}
	nav div#opt{float:right;margin-right:15px;}
	nav div#opt a{
		text-decoration:none;
		padding: 0px 10px 5px 10px;
		margin:0px 2px 0px 2px;
		border: 5px solid #8B8878;
		float:left;
		border-top: 0px;
		border-radius: 0px 0px 5px 5px;
		background-color: #8B8878;
		color: #fff;
		border-bottom:1px solid #c00;
	}
	nav div#opt a:hover{
		border: 5px solid #fff;
		background-color: #fff;
		color: #000;
	}
	nav div#alg {float:left;margin-left:10px;}
	nav div#alg a{
		text-decoration:none;
		padding: 0px 10px 5px 10px;
		margin:0px 2px 0px 2px;
		border: 5px solid #8B8878;
		float:left;
		border-top: 0px;
		border-radius: 0px 0px 5px 5px;
		background-color: #8B8878;
		color: #fff;
		border-bottom:1px solid #c00;
	}
	nav div#alg a:hover{
		border: 5px solid #fff;
		background-color: #fff;
		color: #000;
	}
	

	#content{
		font-family: Arial, sans-serif;
		z-index:1;
	}
	
	/**
	 * Selectoren
	 **/
	 
	 /**http://ilikepixels.co.uk/drop/bubbler/**/
	.bubble , .bubbleTOP
	{
		display:none;
		position: relative;
		width: 244px; /*250*/
		height: 110px; /*120*/
		padding: 0px;
		background: #8B8878;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}

	.bubble:after 
	{
		content: "";
		position: absolute;
		bottom: -11px;
		left: 110px;
		border-style: solid;
		border-width: 11px 15px 0;
		border-color: #8B8878 transparent;
		display: block;
		width: 0;
		z-index: 1;
	}
	
	.bubbleTOP:after 
	{
		content: "";
		position: absolute;
		top: -11px;
		left: 110px;
		border-style: solid;
		border-width: 0 15px 11px;
		border-color: #8B8878 transparent;
		display: block;
		width: 0;
		z-index: 1;
	}



	#alert {
		position: relative;
	}
	#alert:hover:after {
		background: hsla(0,0%,0%,.8);
		border-radius: 3px;
		color: #f6f6f6;
		content: 'Zeitaufwendige Berechnung!';
		font: bold 12px/30px sans-serif;
		height: 60px; /*30px*/
		left: 50%;
		margin-left: -60px;
		position: absolute;
		text-align: center;
		top: 50px;
		width: 120px;
	}
	#alert:hover:before {
		border-bottom: 10px solid hsla(0,0%,0%,.8);
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		content: '';
		height: 0;
		left: 50%;
		margin-left: -10px;
		position: absolute;
		top: 40px;
		width: 0;
	}
	#alert:target {
		display: none;
	}


	.overlay {
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background-color:rgba(0, 0, 0, 0.85);
		background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
		z-index:9999;
		color:white;
	}
	.overlay.txt {
		display: inline-block;
		vertical-align: middle;
		padding: 10px 15px;
		position:relative;
		font-weight:bold;
	}


	/**
	 * Help Areal
	 **/
	div.help{
		z-index:1;
		position:relative; 
		width:758px; 
		left:50%; 
		margin-left: -379px;
		background-color: rgba(255,255,255,0.6);
		padding: 10px;
		margin-bottom:20px; /*70px*/
		-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
		font-family: Arial, sans-serif;
		font-weight:normal;

	}

	/*.help:before, .help:after
	{
		position: absolute;
		width: 40%;
		height: 10px;
		content: ' ';
		left: 12px;
		bottom: 12px;
		background: transparent;
		-webkit-transform: skew(-5deg) rotate(-5deg);
		-moz-transform: skew(-5deg) rotate(-5deg);
		-ms-transform: skew(-5deg) rotate(-5deg);
		-o-transform: skew(-5deg) rotate(-5deg);
		transform: skew(-5deg) rotate(-5deg);
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		z-index: -1;
	}
	div.help:after
	{
		left: auto;
		right: 12px;
		-webkit-transform: skew(5deg) rotate(5deg);
		-moz-transform: skew(5deg) rotate(5deg);
		-ms-transform: skew(5deg) rotate(5deg);
		-o-transform: skew(5deg) rotate(5deg);
		transform: skew(5deg) rotate(5deg);
	}*/


	.help h1, .help h2, .help h3 {
		font-family: Times, serif;
		font-weight:bold;
		color: #777;
		text-shadow: #777 1px 1px 2px;
	}

	.help img{
		border: 5px solid rgba(128,128,128,0.5);
		border-radius: 5px;
		box-shadow:5px 5px 9px -5px;
	}
	
	#japanSudoku{position: relative;}
	#japanSudoku:hover:after {
		background: hsla(0,0%,0%,.8);
		border-radius: 3px;
		color: #f6f6f6;
		content: 'SuDoKu';
		font: bold 12px/30px sans-serif;
		height: 30px;
		left: 50%;
		margin-left: -60px;
		position: absolute;
		text-align: center;
		top: 50px;
		width: 120px;
	}
	#japanSudoku:hover:before {
		border-bottom: 10px solid hsla(0,0%,0%,.8);
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		content: '';
		height: 0;
		left: 50%;
		margin-left: -10px;
		position: absolute;
		top: 40px;
		width: 0;
	}
	#japanSudoku:target {
		display: none;
	}
}


/*http://www.ct-mitmachen.de/browserdemo/nyanct/*/