html,body,div,form,fieldset,label,input,span,p,ul,li,img,a,strong,small {
	margin:0;
	padding:0;
}

body,input {
	font-family:'Mouse Memoirs';
	font-weight: normal;
	font-size:20px;
	color:#ffffff;
}

body {
	background: url(../images/bg_1920.jpg) no-repeat center center fixed #000000;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	text-align: center;
	 letter-spacing: 0.1em;
}

.grid { margin:0px; padding: 0px 0px 0px 0px; width:100%; min-width: 320px; min-height:100%; }
.g1440 { margin:0; max-width:1440px; width:100%; }
.row { width:100%; margin:0 auto; }
.c1 { width:8.33333333%; }
	.c2 { width:16.66666666%; }
	.c3 { width:25.0%; }
	.c4 { width:33.33333333%; }
	.c5 { width:41.66666666%; }
	.c6 { width:50.0%; }
	.c7 { width:58.33333333%; }
	.c8 { width:66.66666666%; }
	.c9 { width:75.0%; }
	.c10 { width:83.33333333%; }
	.c11 { width:91.66666666%; }
	.c12 { width:100%; min-height:1px; float:left; position:relative; }
	.c1-5 { width:20%; }
	.c1-8 { width:12.5%; }
	.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c1-5,.c1-8 { min-height:1px; float:left; padding-left:0px; padding-right:0px; position:relative; }
	.c1.first,.c2.first,.c3.first,.c4.first,.c5.first,.c6.first,.c7.first,.c8.first,.c9.first,.c10.first,.c11.first,.c1-5.first,.c1-8.first { padding-left: 0; position:relative; }
	.c1.last,.c2.last,.c3.last,.c4.last,.c5.last,.c6.last,.c7.last,.c8.last,.c9.last,.c10.last,.c11.last,.c1-5.last,.c1-8.last { padding-right: 0; position:relative; }
	.demo { background-color: aqua; }
	.centered { float: none; margin: auto; }

	a,a:link,a:active,a:visited,a:hover { color:#0000ff; text-decoration:none; }

	._tt img { width: 100%; height: auto; max-width: 310px; }
	._inst { width: 100%; text-align: center; }
	._inst h1 { width: 100%; text-align: center; font-size: 32px; line-height: 26px; font-weight: 700; line-height:1.2em; letter-spacing: 0.08em; color:#ffd800; text-shadow: -2px -2px 0 #cb0000, 2px -2px 0 #cb0000, -2px 2px 0 #cb0000, 2px 2px 0 #cb0000, -3px 0px 0 #cb0000, 3px 0px 0 #cb0000, 0px -3px 0 #cb0000, 0px 3px 0 #cb0000; }
	._inst p { width: 100%; text-align: center; font-size: 26px; line-height: 20px; color: #000000; text-shadow: 1px 1px 6px #ffffff;}

	button { margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; width: 100%; max-width: 400px; text-align: center; font-family:'Mouse Memoirs'; font-weight: 700; font-size: 24px; letter-spacing: 0.1em; line-height: 24px; color: #ffd800; background-color: #cb0000; border: 2px solid #ffd800; border-radius:10px; cursor: pointer; }
	button:hover { color: #cb0000; background-color: #ffd800; border: 2px solid #cb0000; }

	#div_config { display: none; position: absolute; top: 20px; left: 0; right: 0; margin: 0px auto 20px auto; padding: 40px 10px 20px 10px; width: 100%; max-width: 650px; background: rgba(0,0,0,0.6); border-radius:10px; z-index: 999; }
	#btn_close { position: absolute; top:20px; right: 20px; width:30px; height:30px; cursor: pointer; }
	#btn_close img { width:100%; height:auto; }
	#div_config form p { margin: 30px 0px 20px 0px; width: 100%; text-align: center; font-size: 20px; line-height: 20px; color: #ffffff; text-shadow: 1px 1px 6px #000000; }


	/* The container must be positioned relative: */
	.txt_select { position: relative; margin: 10px auto;  width: 100%; max-width: 400px; height: 40px; font-family: 'Mouse Memoirs'; font-weight: 700; color: #ffffff; text-shadow: 0px 0px 8px #666666; background-color: #03037b; border-radius:10px; }
	.txt_select select { display: none; /*hide original SELECT element: */ }

	.select-selected { background-color: #0000ff; height: 20px; }

	/* Style the arrow inside the select element: */
	.select-selected:after { position: absolute; content: ""; top: 15px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #ffffff transparent transparent transparent; }

	/* Point the arrow upwards when the select box is open (active): */
	.select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; }

/* style the items (options), including the selected item: */
.select-items div, .select-selected {
 color: #ffffff;
 padding: 4px 16px 10px 16px;
 border: 1px solid transparent;
 border-color: transparent transparent rgba(0, 0, 0, 0.0) transparent;
 cursor: pointer;
 border-radius:10px;
}

/* Style items (options): */
.select-items {
 position: absolute;
 background-color: #1e90ff;
 top: 100%;
 left: 0;
 right: 0;
 z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
 display: none;
}

.select-items div:hover, .same-as-selected {
 background-color: rgba(0, 0, 0, 0.1);
}


input[type=radio] { display:none; }

input#th1[type=radio] + label { background-image: url("../images/th1.jpg"); }
input#th2[type=radio] + label { background-image: url("../images/th2.jpg"); }
input#th3[type=radio] + label { background-image: url("../images/th3.jpg"); }
input#th4[type=radio] + label { background-image: url("../images/th4.jpg"); }
input#th5[type=radio] + label { background-image: url("../images/th5.jpg"); }
input#th6[type=radio] + label { background-image: url("../images/th6.jpg"); }
input#th7[type=radio] + label { background-image: url("../images/th7.jpg"); }
input#th8[type=radio] + label { background-image: url("../images/th8.jpg"); }
input#th9[type=radio] + label { background-image: url("../images/th9.jpg"); }
input#th10[type=radio] + label { background-image: url("../images/th10.jpg"); }
input#th11[type=radio] + label { background-image: url("../images/th11.jpg"); }
input#th12[type=radio] + label { background-image: url("../images/th12.jpg"); }
input#th13[type=radio] + label { background-image: url("../images/th13.jpg"); }
input#th14[type=radio] + label { background-image: url("../images/th14.jpg"); }
input#th15[type=radio] + label { background-image: url("../images/th15.jpg"); }
input#th16[type=radio] + label { background-image: url("../images/th16.jpg"); }

input#th1[type=radio] + label, input#th2[type=radio] + label, input#th3[type=radio] + label, input#th4[type=radio] + label, input#th5[type=radio] + label, input#th6[type=radio] + label, input#th7[type=radio] + label, input#th8[type=radio] + label, input#th9[type=radio] + label, input#th10[type=radio] + label, input#th11[type=radio] + label, input#th12[type=radio] + label, input#th13[type=radio] + label, input#th14[type=radio] + label, input#th15[type=radio] + label, input#th16[type=radio] + label { display:inline-block; margin: 1px; padding: 0px; width: 144px; height: 111px; border: 2px solid #000000; cursor:pointer; }

input#th1[type=radio]:checked + label, input#th2[type=radio]:checked + label, input#th3[type=radio]:checked + label, input#th4[type=radio]:checked + label, input#th5[type=radio]:checked + label, input#th6[type=radio]:checked + label, input#th7[type=radio]:checked + label, input#th8[type=radio]:checked + label, input#th9[type=radio]:checked + label, input#th10[type=radio]:checked + label, input#th11[type=radio]:checked + label, input#th12[type=radio]:checked + label, input#th13[type=radio]:checked + label, input#th14[type=radio]:checked + label, input#th15[type=radio]:checked + label, input#th16[type=radio]:checked + label { border: 2px solid #0000ff; }




	#content { display: none; position: relative; margin: 30px auto 40px auto; padding: 10px; width: 100%; max-width: 620px;  background: rgba(0,0,0,0.6); border: 0px solid #000000; border-radius: 10px; }
	#puz1_alert { display: none; position:absolute; top:250px; left: 0; right: 0; margin: 0px auto; padding:20px; width: 80%;  background-color: #0000ff; border:1px solid #0000ff; border-radius: 10px; z-index: 999;}
	#puz1_alert h1 { width: 100%; text-align: center; font-size: 26px; line-height: 26px; color: #ffffff; /*text-shadow: 1px 1px 6px #000000;*/ }
	#puz1_alert h1 { width: 100%; text-align: center; font-size: 26px; line-height: 26px; color: #ffffff; /*text-shadow: 1px 1px 6px #000000;*/ }
	#puz1_alert p { width: 100%; text-align: center; font-size: 20px; line-height: 20px; color: #000000; /*text-shadow: 1px 1px 6px #ff6600;*/  }

	#puz1_inst { width: 100%; text-align: center; font-size: 14px; line-height: 20px; color: #999999; }
	/* Parent element that contains puzzle game */
	.puzelm {
	position:relative;
	margin:1px auto;
	padding:1px;
	text-align:center;
	}

	/* Canvas with puzzle */
	.puzcnv {
	display:block;
	margin:2px auto 29px auto;
	}

	/* Mini-image that shows original image */
	.puzimg {
	position:absolute;
	left:15px;
	right:0;
	left:0;
	bottom:0;
	margin:0 auto 0 2px;
	width:72px;
	height:56px;
	cursor: nesw-resize;
	border:1px solid #0000ff;
	}
	.puzimg:hover {
	width:450px;
	height:auto;
	background:#fff;
	border:1px solid #0000ff;
	}

	/* Button that auto-solves the puzzle */
	.puzsolve { display:block; margin: 5px 0px 5px auto; padding: 5px; width: 100%; max-width: 250px; text-align: center; font-family:'Mouse Memoirs'; font-weight: 400; font-size: 20px; line-height: 20px; color: #ffffff; text-shadow: 0px 0px 8px #666666; background-color: #0000ff; border: 2px solid #03037b; cursor: pointer; }



		@media only screen and (max-width: 1440px) {
			body { background: url(../images/bg_1440.jpg) no-repeat center center fixed #000000; }
		}

		@media only screen and (max-width: 1024px) {
			body { background: url(../images/bg_1024.jpg) no-repeat center center fixed #000000; }
		}

		@media only screen and (max-width: 800px) and (orientation:portrait) {
			body { background: url(../images/bg_800_p.jpg) no-repeat center center fixed #000000; }
		}

		@media only screen and (max-width: 800px) and (orientation:landscape) {
			body { background: url(../images/bg_800_l.jpg) no-repeat center center fixed #000000; }
		}

		@media only screen and (max-width: 650px) {
			._inst { width: 90%; }
			._inst h1 { width: 100%; text-align: center; font-size: 26px; line-height: 26px; color: #ffffff; text-shadow: 1px 1px 6px #000000; }
			._inst p { width: 100%; text-align: center; font-size: 20px; line-height: 24px; color: #0000ff; text-shadow: 1px 1px 6px #000000;  }

			button { width: 90%; }

		}