body {
	margin: 0;
	font-family: Arial Narrow,sans-serif;
	overflow:hidden;
	height:100vh;
}

p {
	margin: 0;
	height: 100%;
}

.instructions .btn {
	margin:1em auto;
}
.instructions .boardBlocks {
	margin:.5em 25%;	
}
.instructions .col.span4of12 {
	clear:both;	
}
.instructions .col p {
	margin: .8em 0 0 1em;
	padding:0;
}
.instructions .col p + p {
	margin: 0 0 0 1em;
}
.instructions .col h3 {
	margin: 1em 1em 0 15px;
	padding:0;
}
.instructions .col h3 span {
	font-size:.7em;
}
.instructions .col h3 + p {
	margin: 0 1em 0 15px;
	padding:0;
}
.instructions .col h4 {
	margin: 1em 1em 0 15px;
	padding:0;
}
.instructions p.help {
	margin:.5em 2em .5em 1.5em;
}
.instructions #notesButton {
	margin:.5em 7% 0 4em;;
	padding:0;
	float:left;
}
.instructions #notations {
	margin:0 13% .2em 1em;
	padding:0;
	float:right;
} 
.instructions #showMatching {
	margin:0 6% .2em 1em;
	padding:0;
	float:right;
}
.instructions #matchingOn {
	margin:1em 0 2em 2em;
	padding:0;
	float:left;
}
.settingsBlock#instructionsSettings {
/*	border-top:1px solid #666;*/
/*	-webkit-box-shadow: 0px -2px 22px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px -2px 22px -4px rgba(0,0,0,0.75);
	box-shadow: 0px -2px 22px -4px rgba(0,0,0,0.75);*/	
}
header#instructionsHeader {
	
}
.sudoku-table {
	width: 95vh;   /* 100 vh*/
	height: 90vh;  /* 100 vh */
	margin: auto;
	border-spacing: 0;
	border-collapse: collapse;
	position: relative;
	z-index: 1;
}

.sudoku-table .sudoku-data {
	text-align: center;
	/*font-size: 8vh;*/
	vertical-align: top;
	padding: 0;
	z-index: -2;
}

.box-border-row .grid-input {
	border-top: 6px solid black;  /* may 24 4px */
}

.sudoku-table tr:last-child .grid-input {
	border-bottom: 6px solid black;   /* may 24 4px */
}

.box-border-col .grid-input {
	border-left: 6px solid black;  /* may 24 4px */
}

.sudoku-table td:last-child .grid-input {
	border-right: 6px solid black; /* may 24 4px */
}

.box00 .grid-input,
.box02 .grid-input,
.box11 .grid-input,
.box20 .grid-input,
.box22 .grid-input {
/* 	background: rgba(250, 250, 250, .50);  may 25*/
	background:none;  /* white; */
}

.box01 .grid-input,
.box10 .grid-input,
.box12 .grid-input,
.box21 .grid-input {
	background:none; /* may 26 was white; /* may 25 #b0b0fa;  /* may 24 rgba(175, 175, 175, .50);  */
}

.box00 .grid-input:disabled,
.box02 .grid-input:disabled,
.box11 .grid-input:disabled,
.box20 .grid-input:disabled,
.box22 .grid-input:disabled {
/*	background: rgba(230, 230, 230, .50); may 25*/
	background:none;
}

.box01 .grid-input:disabled,
.box10 .grid-input:disabled,
.box12 .grid-input:disabled,
.box21 .grid-input:disabled {
/*	background: rgba(155, 155, 155, .50);  may 25*/
	background:white;
}


.sudoku-table tr.guide,
.sudoku-table td.guide,
.guide-box00 .box00,
.guide-box02 .box02,
.guide-box11 .box11,
.guide-box20 .box20,
.guide-box22 .box22,
.guide-box01 .box01,
.guide-box10 .box10,
.guide-box12 .box12,
.guide-box21 .box21 {
	background: #cce3ff; /* may 26 was white, may 25 was #b0b0fa;  /* may 24, changed to lavender blue; */
	color: black ; /* may 24 white; */
}

.grid-input {
	color: inherit;
	font-size: 8vh;
	text-align: center;
	background: none;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	border: 1px solid black;
	box-sizing: border-box;
	z-index: 2;
	position: relative;
	border-radius: 0;
/*	background:white;  /* new may 24 */
	color:black;
}

.grid-input.sudoku-alert:not(.focused) {
/*	background: rgba(255, 0, 0, .75); */
	background: rgba(236, 16, 16, .85)!important;
	color:black;  /* matching */
}

.grid-input.sudoku-alert:disabled {
/*	background: rgba(250, 50, 50, .75);  */
	background: rgba(236, 16, 16, .85)!important;
}
.guide .grid-input {
	/*color: #eee;*/  
/*	color: black;*/
/*	background-color:#cce3ff;   matching c7adea;  */
	background-color:rgba(204,227,255,.3);
/*	z-index:0; */
}
.quadGuide .grid-input {           /* matching */
/* 	background-color:#72a4df; */
	background-color:rgba(114,164,223,.5);   
/*	z-index:1; */
}
.guide .grid-input:disabled {
	/*color: #eee;*/
	color: black;
	background-color:#c5dff8;  /* matching new blue, redesign  color lavender c7adea, old a986d6; */
}
.takingNotes {
	background-color:#c5dff8;
	z-index:10;
}
.focused {
	border-color: #2668b6;    /* matching new blue, redesign purple  9258df*/
	outline: 0;
/* 	box-shadow: inset 0px 0px 30px rgba(250,250,0,.75),0px 0px 30px rgba(250,250,0,1); */
	box-shadow: inset 0px 0px 60px 10px rgba(20, 82, 155,.95);	  /* matching purple - inset 0px 0px 60px rgba(98, 38, 179,.85) */
}

.sudoku-menu {
	position: absolute;
	padding: 0 .5em;  /* matching new layout 10px; */
	/*z-index: 2; this attribute ruins days */
}
.sudoku-controls {
	position: absolute;
	top: 1em;
	width: 160px;
	right: 20px;  /* matching new layout, was -20px */ 
}
.sudoku-controls #newGame {
	margin:0;	
}
.btn.newLine {
	width:55%;   /* matching was 75 */
	padding:.2em .5em;	
	margin:.5em.4em 0 !important;  /* matching new layout, pull buttons closer together vertically */	
}
#sudoku-input-block { /* matching */
	position:absolute;
	margin:0;
	padding:0;	
    top: 120px;   /* 160 */
    left: 15px;		
/*	background-color:#6FF; */
}
/* matching new layout, new label for # buttons */
p.for-sudoku-input {
	margin:.5em 1em 0;
}
.sudoku-input {
	list-style: none;
	clear: both;
    margin: -.5em auto 0;  /* matching new layout, was 1em auto */ 	
}

.btn.sudoku-btn {
/*	margin-bottom: 5px;
	height: 50px;
	width: 50px;
	display: none;*/
	display: none;	
	padding: .2em 1.5em;
	background-color: #c33a0e;  /* matching magenta bd075f, f30f90;  /* orange red ea3c3c; */
	color:#ffffff;
	margin:.7em 0;  /* matching new layout, was 1em 0 */
}

/* matching matching-numbers - new layout */
#matching-numbers-block {
	position:absolute;
	margin:0;
	padding:0;
    top: 90px;
    right: -30px;	
/*	background-color:#FFC;	 */
}
.matching-numbers {
	list-style: none;
	clear: both;
    margin: -.5em auto 0; 
}
.btn.matching-btn {
	display: none;	
	padding: .2em 1.5em;
	background-color: #ffffff;  
	color:#a82f09;  /* c33a0e; */
	margin:.7em 0;	
	font-weight:bold;
	border:1px solid #a82f09;
    -webkit-box-shadow: 4px 4px 5px 1px rgba(50, 50, 50, 0.55);
    -moz-box-shadow:    4px 4px 5px 1px rgba(50, 50, 50, 0.55);
    box-shadow:         4px 4px 5px 1px rgba(50, 50, 50, 0.55);	
}
p.for-matching-numbers {
	margin:-0.3em 1em 1em 1em;	  /* top was 4.3em, way too much */
}

.input-9 .btn-9,
.input-6 .btn-6,
.input-4 .btn-4 {
	display: block;
}

.notes {
	position: absolute;
	font-size: 2.2vh;
	z-index: 0;
	color: rgba(128, 128, 128, 0);
}
input.grid-input.focused:focus .notes {
	z-index:3;	
}
.note-1-on .note-1,
.note-2-on .note-2,
.note-3-on .note-3,
.note-4-on .note-4,
.note-5-on .note-5,
.note-6-on .note-6,
.note-7-on .note-7,
.note-8-on .note-8,
.note-9-on .note-9 {
	color: rgba(128, 128, 128, 1); /* too light when the square is highlighted */
/*	color: rgba(0,0,0, 1);	 */
	z-index:10;
}

.quadGuide .notes.note-1-on .note-1,
.quadGuide .notes.note-2-on .note-2,
.quadGuide .notes.note-3-on .note-3,
.quadGuide .notes.note-4-on .note-4,
.quadGuide .notes.note-5-on .note-5,
.quadGuide .notes.note-6-on .note-6,
.quadGuide .notes.note-7-on .note-7,
.quadGuide .notes.note-8-on .note-8,
.quadGuide .notes.note-9-on .note-9 {
	color: rgba(0,0,0, 1);	
}
.guide .notes.note-1-on .note-1,
.guide .notes.note-2-on .note-2,
.guide .notes.note-3-on .note-3,
.guide .notes.note-4-on .note-4,
.guide .notes.note-5-on .note-5,
.guide .notes.note-6-on .note-6,
.guide .notes.note-7-on .note-7,
.guide .notes.note-8-on .note-8,
.guide .notes.note-9-on .note-9 {
	color: rgba(0,0,0, 1);	
}

@media screen and (orientation:portrait) {
	.sudoku-table {
		width: 100vw;
		height: 100vw;
	}

	.grid-input {
		font-size: 8vw;
	}

	.sudoku-controls{
		position: absolute;
		right: 21px;	
	}

	.sudoku-menu {
		width: 50px;
		bottom: 0;
		z-index: -1 !important;
	}

	.notes-label {
		display: none;
	}

	#notes-switch,
	.sudoku-input li {
		float: left;
	}
 }

 /** Modal Styles **/
.modal-overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;  /* 3 */
}

/*.hide {
	display: none;
}*/

/*.col-2 {
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0px 10px;
}
*/
/*.modal {
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0,0,0,.5);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: white;
	max-height: 100%;
	overflow: auto;
}*/
.modal {
    width: 1000px;
    height: 96%;
    max-height: 100%;	
    position: absolute;
    margin: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #337ab7;
    background-color: white;
}

.modal-header {
	padding: 6px 10px;
	border-bottom: 1px solid grey;
}

.modal-header h1 {
	margin: 0;
}

.modal-body {
	padding: 15px;
	overflow: hidden;
-webkit-box-shadow: inset 0px -1px 22px -4px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px -1px 22px -4px rgba(0,0,0,0.75);
box-shadow: inset 0px -1px 22px -4px rgba(0,0,0,0.75);	
}
.modal-body.instructions {
	height:70%;
	overflow:auto;	
}
.modal-body ul {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.modal-body li {
	list-style-type: none;
	margin-bottom: 10px;
	width: 100%;
}

.modal-footer {
	padding: 6px 10px;
	border-top: 1px solid #808080;
	overflow: hidden;
}

.new-game-modal {
	width: 400px;
	margin: auto;
}

.notes-label {
	text-align: center;
}

.solved-modal {
	width: 75%;
}
.modalSettings {
	
}

/**custom css for checkbox**/
.onoffswitch {
	position: relative;
	-webkit-user-select:none; 
	-moz-user-select:none; 
	-ms-user-select: none;
/*	padding: 0px 1em 4.5em 0;  new layout next line */
    padding: 0 0 1em .5em;  /* matching  */
}
.onoffswitch label {
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px 0px 0px 0.5em;	
}
.onoffswitch-checkbox {
	display: none;
}
.onoffswitch-label {
	display: block; 
	overflow: hidden; 
	cursor: pointer;
	border: 2px solid #999999; 
	border-radius: 15px;
	margin: auto;
	width: 9.5em;
	font-size:0.9em;
	height: 3em;
}
.onoffswitch-inner {
	display: block; 
	width: 200%; 
	margin-left: -100%;
	transition: margin 0.3s ease-in 0s;
	text-align: center;	
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
	display: block; 
	float: left; 
	width: 50%; 
	height: 50px; 
	padding: .2em 0; 
	margin:0;
/*	line-height: 25px;*/
	font-size: 1.5em;  /* 25px;  */
	color: white; 
	font-family: Trebuchet, Arial, sans-serif; 
	font-weight: bold;
	box-sizing: border-box;
/*	padding-top: 12px;*/
}
.onoffswitch-inner:before {
	content: "Notes On \270E";
	background-color: #e8e80b;  /* pink d46790;  /* red orange dark ffafcd;  /* red orange f54a4a; /* ea3c3c  34A7C1;  */
	color: #000000;  /* FFFFFF;  */
}
.onoffswitch-inner:after {
	content: "Notes Off \270F";	
	background-color: #faface;  /* pink ffafcd;  /* red orange light ffa2a2;  /* EEEEEE; */
	color: #555555;
}
/*.onoffswitch-switch {
	display: block; 
	width: 30px; 
	margin: -2.5px;
	background: #FFFFFF;
	position: absolute; 
	top: 0; 
	bottom: 0;
	right: 41px;
	padding.3em 0 0 0;
	border: 2px solid #999999; 
	border-radius: 15px;
	transition: all 0.3s ease-in 0s; 
}*/
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	right: 0px; 
}

/**button styling**/
button {
	border: 2px solid #999;
	border-radius: 25px;
	background: #34A7C1;
	color: white;
	width: 100%;
	box-sizing: border-box;
	padding: 6px 3px;
	font-size: 20px;
}

.sudoku-start {
/*	color: darkgreen!important;  */
	color:#CD4F00;  /* matching a84306;  /* 664300;  /* 000000; */
}

.sudoku-match,
.sudoku-match > input {
	background: #a1c3ed !important;  /*c5dff8 !important;  /* matching lightblue  */
}

.hide-notes td {
	color: transparent !important;
}