/*
small	= 13px = 0.813rem
medium	= 16px = 1rem
large	= 18px = 1.125rem
*/

/************************************************************************
** nav menus
*************************************************************************/
	.menu {list-style-type: none; margin: 0; padding: 0; overflow: hidden;}
	.menu_item_horiz {float: left;}
	.menu_item_vert {display: block; text-align: right; margin-right: 0.5rem;}
	.menu_item_horiz a, .menu_item_vert a {display: inline-block; color: black; font-weight: bold; text-decoration: none; font-size: small; padding: 0.25rem 0.5rem 0.25rem 0; margin: 0;}
	.menu_item_horiz a:hover, .menu_item_vert a:hover {text-decoration: underline;}
	.menu_400_a {display: none;}
	.menu_400_b {display: block;}

	.nav_ul_footer {list-style-type: none; margin: 0; padding: 0; overflow: auto;}
	.nav_li_footer {display: inline-block; text-align: center;}
	.nav_li_footer a {display: block; color: black; font-weight: bold; text-decoration: none; font-size: small; padding: 0.4rem 0.5rem 0.4rem 0; margin: 0;}
	.nav_li_footer a:hover {text-decoration: underline;}

	.nav400 {display: none;}
	.nav400_menu {display: block;}
	.light_yellow {background-color: #ffffcc;}

/************************************************************************
** styles for every page
*************************************************************************/

	html, body, p, a, div {
		-moz-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	@counter-style bracketed {system: extends decimal; prefix: ' ('; suffix: ') ';}
	@counter-style bracketed_alpha {system: extends lower-alpha; prefix: ' ('; suffix: ') ';}

	img {border: 0;}

	.error_image {float: right; margin: 0 0 2rem 2rem; width: 100px; height: auto;}

	.grayscale {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		filter: grayscale(100%);
	}

	/* odd problem in Chrome, if *solid* isn't there, then sometimes the stray edge appears - overridden as required */
	table {border: 1px solid transparent; background-color: transparent; color: black;}
	tr, td {background-color: transparent;}

	strong {font-weight: bold;}

	/* override the default line height for clearer reading */
	html {line-height: 1.5 !important;}
	html {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1rem;}
	body, a, p, textarea, input, select, button {font-family: inherit;}

	/* adds a hidden skip to content for keyboard users */
	.skiptocontent {position: absolute; top: -100px; left: 0px;}
	.skiptocontent:focus {top: 0px;}

	/* main logo at top of page */
	.bb_logo {line-height: 0; display: block; width: 256px; height: auto; max-width: 420px; margin: 1rem; border: 0;}
	.bb_logo {width: 80vw;}

	/* sets the width of all pages */
	.main_content, .header_content, .footer_content {width: 100%; margin: auto; max-width: 960px;}
	.testers_small {display: block;}
	.testers_large {display: none;}

	hr {border: 1px solid black; line-height: 0;}
	.hr_silver {border-color: #bfbfbf;}
	.hr_puzzles {display: inline-block; width: 100%; height: 1px; background-color: #bfbfbf;}

	h1 {margin: 0; font-size: 1.125rem;}
	h2 {margin: 0; font-size: 1.125rem;}
	ol, ul {list-style-position: outside;}

	.border1 {border: 1px solid black;}
	.border2 {border: 2px solid black;}
	.border3 {border: 3px solid black;}
	.border1_flat {border: 1px solid black;}
	.border2_flat {border: 2px solid black;}
	.border3_flat {border: 3px solid black;}

	.sharelink {font-size: 0.8rem; white-space: normal; word-break: break-word; overflow-wrap: anywhere;}
	.big {font-size: larger;}
	.nobr {white-space: nowrap;}
	.nobr_puzzles {display: inline-block; white-space: normal; max-width: 100%;}
	.hide {display: none;}
	.image_preload {display: none; width: 1px; height: 1px;}

	/* space around all tick boxes, so they're easier to check */
	input[type=checkbox] {margin: 0.5rem;}

	input[type=submit] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	input[type=button] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	/* when listing today's puzzles, on all pages that do so, give them space to breathe */
	.puzzle_list_margin {margin: 0 0 0 0.75rem;}

	/* anywhere a 50x50 thumb appears */
	.item_outer {display: table; margin-bottom: 1rem; min-height: 5rem;}
	.item_thumb {display: table-cell; width: 50px; vertical-align: top; padding: 0.25rem 1rem 1rem 1rem;}
	.item_details {display: table-cell; vertical-align: top;}
	.item_puzzles {line-height: 2;}
	.thumbs_new, .thumbs_logic, .thumbs_illusions, .thumbs_funstuff, .thumbs_favourites {border: 1px solid black;}
	.illusion_answer {width: 6rem; margin: auto; text-align: center;}

	/* spacers - in quarters */
	.spacer_1 {width: 0.25rem; height: 0.25rem;}
	.spacer_2 {width: 0.5rem; height: 0.5rem;}
	.spacer_3 {width: 0.75rem; height: 0.75rem;}
	.spacer_4 {width: 1rem; height: 1rem;}
	.spacer_5 {width: 1.25rem; height: 1.25rem;}
	.spacer_6 {width: 1.5rem; height: 1.5rem;}
	.spacer_7 {width: 1.75rem; height: 1.75rem;}
	.spacer_8 {width: 2rem; height: 2rem;}

	.clear {clear: both; margin: 0; padding: 0; line-height: 0;}

	/* move some text to the right - emulate block quote */
	/* _li and _ol are the default increased by the margin on the respective .li_  */
	.move_text_right {margin-left: 0.5rem;}
	.move_text_right_li {margin-left: 1.5rem;}
	.move_text_right_ol {margin-left: 3rem;}

	/* hide the settings option until the page has loaded */
	.hide_until_loaded {opacity: 0.25;}

/************************************************************************
** some generic styling
*************************************************************************/

	pre, .ff {font-family: Consolas, Menlo, monospace, monospace, "Courier New"; font-size: 1.05rem;}
	.b {font-weight: bold;}
	.sb {font-size: small; font-weight: bold;}
	.s {font-size: small;}
	.c {text-align: center;}
	.copyright, .copyright_nolink {font-size: small; font-weight: bold; text-decoration: none; color: black;}
	.copyright:hover {text-decoration: underline;}
	.puzzle_code {overflow-wrap: break-word; word-wrap: break-word;}
	.long_link {overflow-wrap: break-word; word-wrap: break-word;}
	.sgreen{font-size: small; color: green;}
	.sred {font-size: small; color: #ee0000;}
	.red {color: #ee0000;}
	.r {text-align: right;}
	.dashed {border: 2px solid black; border-style: dashed;}

	/* the text against each Japanese puzzle */
	#showtext,.showtext {font-size: small; font-weight: bold;}

	.grey_box {border: dashed 2px gray;}
	.contact_box_red {border: 2px solid; padding: 0.5rem; border-color: #ee0000;}
	.contact_box_normal {border: 0;}

	.padding_all {padding: 0.5rem;}
	.padding_top {padding-top: 0.5rem;}
	.padding_right {padding-right: 0.5rem;}
	.padding_left {padding-left: 0.5rem;}
	.padding_bottom {padding-bottom: 0.5rem;}

	.about_image {width: 250px; height: auto;}

/************************************************************************
** styles used on the puzzle selection pages
*************************************************************************/

	.select_page_left {float: left; margin: 0 1rem 0 0;}
	.select_page_right {float: left; margin: 0 0 0 0;}

	/* padding to the left of the selects */
	.select_page_padding {padding: 1rem 2.5rem 1rem 2.5rem;}
	.select_page_label {display: block;}
	.select_page_select {margin: 0.25rem 0 0 1rem; padding: 0.25rem; border-radius: 0.4rem;}

	/* the 150x150 small image */
	.puzzle150 {margin: 1rem 0 1rem 1rem; float: right; display: none;}

	.funstuff150 {margin: 0 0 0.5rem 0.5rem; border: 0; float: right;}
	.border {border: 1px solid black;}

/************************************************************************
** styles used on the show puzzle page
*************************************************************************/

	/* give some space for the list of today's puzzles */
	.show_puzzle_list {margin: 1rem;}
	.show_puzzle_list_calling {margin: 1rem;}

	/* most pages have the puzzle on the left, and a bank of buttons on the right */
	.left_puzzle {float: left; margin: 1rem 0 0 0;}
	.right_puzzle {float: left; margin: 1rem 0 0 0.5rem; display: none;}

	/* two types of text tag */
	.text_tag {display: block; margin-top: 1rem;}
	.texttop_tag {display: block;}

	/* the keyboard options are left aligned, within a centered block */
	.keyboard_options {display: inline-block; text-align: left;}

	/* pseudo <li> for puzzles */
	.li_ol {margin-left: 2.5rem;}
	.li_li {margin-left: 1rem;}
	.li_li, .li_ol, .li_none {display: list-item; list-style-position: outside;}
	.li_ol {list-style-type: decimal; list-style: bracketed;}
	.li_none {list-style-type: none;}

	.puzzle_spacer, .puzzle_spacer_dark {padding-left: 0; padding-right: 0; position: relative;}

	/* for puzzles that are narrower than the buttons, we get some odd stripes without this */
	#puzzlediv {background-color: white;}
	#puzzledivdark {background-color: white;}

	/* spacer, used in fractions */
	.fraction_spacer {display: inline-block; width: 5px;}

	/* puzzle image with a border*/
	.puzzle_border {border: 1px solid black;}

	/* divs required for the floating puzzle div */
	.puzzle_rhs_image {
		width: 80px;
		height: auto;
		margin-top: 1.5rem;
	}

	.diff_float_r {
		position: relative;
		float: right;
		margin: 0 0 0.25rem 0.25rem;
	}

	.diff_outer {
		top: 0;
		right: 0;
		border: 1px solid black;
		display: inline-block;
		position: absolute;
		margin-top: 0;
	}

	.diff_inner {
		border-width: 2px;
		border-style: solid;
		display: inline-block;
		font-weight: bolder;
		font-size: 1.25rem;
		padding: 0.25rem 0.5rem 0.25rem 0.5rem;
		text-align: center;
		min-width: 3rem;
		padding: 0;
	}

	.easy {border-color: darkgreen; background-color: #e5ffe5;}
	.medium {border-color: orange; background-color: #fff6e5;}
	.hard {border-color: red; background-color: #ffe5e5;}

/************************************************************************
** these HR emulate a horizontal line
*************************************************************************/

	.hr1 {clear: both; height: 1px; border: 0; background-color: #003399; padding: 0; margin: 0.25rem 0 0 0;}
	.hr2 {clear: both; height: 1px; border: 0; background-color: orange; padding: 0; margin: 0 0 0.25rem 0;}

	.hr_b1 {height: 1px; border: 0; background-color: #003399; padding: 0; margin: 0.25rem 0 0 0;}
	.hr_b2 {height: 1px; border: 0; background-color: orange; padding: 0; margin: 0 0 0.25rem 0;}

/************************************************************************
** used to format the help files
*************************************************************************/

	.help_image {display: inline-block; text-align: left; margin: 1rem 0 1rem 2rem; padding: 0; line-height: 0;}
	.help_image_new {text-align: left; margin: 1rem 0 1rem 2rem; border: 1px solid black; padding: 0; line-height: 0;}
	.help_text {margin: 0 0 1rem 0;}
	.qrhunt_image {padding: 0; margin: 0; background-color: white;}

	/* where there isn't a HR above, needs outer div and some tweaks due to the float*/
	.help_outer_nohr {margin-top: 1rem;}
	.help_image_nohr {text-align: left; margin: 0 0 0 2rem;}
	.help_text_nohr {margin: 1rem 0 0 0;}

	.sudoku_help_image {width: 260px; height: auto;}
	.basic_ideas {float: left; margin: 0 1rem 1rem 1rem;}

/************************************************************************
** all buttons
*************************************************************************/

	.button, .bbwords_number {
		display: inline-block;
		color: black;
		background-color: #F5F5F5;
		border: 0.1rem solid black;
		margin: 0.3rem 0.1rem 0.1rem 0.1rem;
		padding: 0.1rem 0.4rem 0.1rem 0.4rem;
		border-radius: 0.4rem;
		box-shadow: 0.15rem 0.15rem gray;
		font-size: small;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		line-height: 1.5rem;
	}
	.button:focus {box-shadow: 0.3rem 0.3rem gray;}
	.button:hover {box-shadow: 0.3rem 0.3rem gray;}

	.button_help {
		display: inline-block;
		color: black;
		background-color: #F5F5F5;
		border: 0.1rem solid black;
		padding: 0rem 0.5rem 0rem 0.5rem;
		border-radius: 0.4rem;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
	}

	
	.show_loading {position: relative;}
	.loading_outer {position: absolute; left: 50%; top: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: 9999;
			padding: 1.5rem 3.5rem 1.5rem 3.5rem;
			text-align: center;
			background-color: white;
			border: 6px double black;
			font-weight: bold;
		}
	.loading_a, .loading_a:visited {color: black;}

	/* remove rouding for bbwords*/
	.bbwords_number {border-radius: 0; box-shadow: 0 0 black;}

	.yellowbutton {
		color: black;
		background-color: yellow;
	}
	.greenbutton {
		color: black;
		background-color: #66ff66;
	}

	/* the bank of buttons on the right are the same width */
	.button_fixed_width {width: 4rem; margin-bottom: 0.5rem;}

/************************************************************************
** used on index.asp and today.asp
*************************************************************************/

	/* two columns of puzzles */
	.left {width: 100%;}
	.right {width: 100%;}
	.show_when_narrow {display: block;}
	.hide_when_narrow {display: none;}
	.updated {font-size: small; font-weight: bold;}

	/* treat the puzzle boxes as tables, and give some space at the bottom */
	.list_of_thumbs {display: grid; grid-template-columns: 100%; margin-top: 1rem;}

	.index_new_a {display: none; float: right; margin: 0 0 0.5rem 0.5rem;}
	.index_new_b {display: inline-block;}

/************************************************************************
** used in safe puzzles and morse puzzles in the brain teasers
*************************************************************************/

	.safe_table {border-collapse: collapse; border: 0px solid black; border-spacing: 0; margin-left: 0;}
	.safe_td {width: 30px; height: 30px; padding: 0; border: 1px solid black; text-align:center; font-size: small; font-weight:bold; line-height: 0;}
	.safe_p {text-align:center; font-size: small; font-weight:bold; line-height: 0;}
	.safe_e {background-color: #b3b3b3;}
	.safe_noborder {border-width: 0;}
	.morse {width: 100%; height: auto; max-width: 604px;}
	.transparent_box {border: solid 2px transparent;}
	.hint_answer {font-size: 1.125rem; font-weight: bold;}
	.reason_check {font-weight: bold;}
	.pi {font-size: larger;}

	/* Note: needs the p_n before the table cells */
	.p_n {border: 0; padding: 0; margin: 0; text-align:center; background-color: transparent; font-size: 22px; width:30px; height:30px; color: black;}
	.p_silver {background-color: silver;}
	.p_table {border-collapse: collapse; border: 0.2rem black solid; padding:0; margin: 0 0 0 2.5rem;}
	.p_table_s {width: 30px; height: 30px; border: 1px black solid; padding:0; margin: 0; text-align:center; line-height: normal;}
	.p_table_stop {width: 30px; height: 30px; border-width: 0.2rem 1px 1px 1px; border-style: solid; border-color: black; padding:0; margin: 0; text-align:center; line-height: normal;}
	.p_table_sright {width: 30px; height: 30px; border-width: 1px 0.2rem 1px 1px; border-style: solid; border-color: black; padding:0; margin: 0; text-align:center; line-height: normal;}
	.p_table_stopright {width: 30px; height: 30px; border-width: 0.2rem 0.2rem 1px 1px; border-style: solid; border-color: black; padding:0; margin: 0; text-align:center; line-height: normal;}
	.p_tr {background-color: white;}
	.math_square {background-color: #dddddd;}

	.workings {
		border: 1px solid black;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		font-size: larger;
	}

	.hint_div {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		border: 1px solid black;
		box-shadow: 3px 3px 3px gray;
	}

	.hint_div_1 {background-color: #e5ffe5;}
	.hint_div_2 {background-color: #fff6e5;}
	.hint_div_3 {background-color: #ffe5e5;}
	.hint_div_4 {background-color: #ffe5e5;}

/************************************************************************
** update some bits and bobs for large screens
*************************************************************************/
	@media only screen and (min-width: 350px) {
		.kns_logo {margin: 1rem 0 1rem 2rem;}
	}

	@media only screen and (min-width: 375px) {
		.button, .bbwords_number {
			margin: 0.4rem 0.1rem 0.4rem 0.1rem;
			padding: 0.1rem 0.6rem 0.1rem 0.6rem;
			font-size: medium;
		}
		.illusion_answer {width: 6.5rem;}
	}

	@media only screen and (min-width: 400px) {
		.bb_logo {width: 320px}
		.bb_logo {width: 80vw;}
		.puzzle_rhs_image {width: 105px;}
		.diff_float_r {margin: 0 0 0.5rem 0.5rem;}
		.sudoku_help_image {width: 308px;}
		.nav400 {display: block;}
		.nav400_menu {display: none;}
		.about_image {width: 300px;}
		.error_image {width: 120px;}
		.move_text_right {margin-left: 1rem;}
		.move_text_right_li {margin-left: 2rem;}
		.move_text_right_ol {margin-left: 3.5rem;}
		.sharelink {font-size: 1rem;}
	}

	@media only screen and (min-width: 450px) {
		.menu_400_b {display: none;}
		.menu_400_a {display: block;}
	}

	@media only screen and (min-width: 500px) {
		.menu_item_horiz a, .menu_item_vert a {
			font-size: 0.9rem; padding: 0.25rem 0.5rem 0.25rem 0;
			}
		.index_new_a {display: block;}
		.index_new_b {display: none;}
		.bb_logo {width: 420px}
		.bb_logo {width: 80vw;}
		.puzzle_rhs_image {width: 114px;}
		.move_text_right {margin-left: 1.5rem;}
		.move_text_right_li {margin-left: 2.5rem;}
		.move_text_right_ol {margin-left: 4rem;}
		.puzzle_spacer, .puzzle_spacer_dark {padding-left: 1rem; padding-right: 1rem;}
		.puzzle150, .puzzle150_dark {display: block;}
		.p_n {font-size: 30px; width:45px; height:45px;}
		.p_table_s {width: 45px; height: 45px;}
		.p_table_stop {width: 45px; height: 45px;}
		.p_table_sright {width: 45px; height: 45px;}
		.p_table_stopright {width: 45px; height: 45px;}
		.error_image {width: 140px;}
		.list_of_thumbs {grid-template-columns: 50% 50%;}
		.safe_table {margin-left: 1rem;}
		.safe_td {width: 45px; height: 45px; padding: 0; font-size: medium;}
		.safe_p {font-size: medium;}
		.button, .bbwords_number {
			margin: 0.4rem 0.25rem 0.4rem 0.25rem;
			padding: 0.1rem 0.8rem 0.1rem 0.8rem;
			font-size: medium;
		}
		.illusion_answer {width: 8rem;}
	}

	@media only screen and (min-width: 600px) {
		.menu_item_horiz a, .menu_item_vert a {
			font-size: medium; padding: 0.25rem 1rem 0.25rem 0;
			}
		.puzzle_rhs_image {width: 137px;}
		.error_image {width: 160px;}
		.move_text_right {margin-left: 2rem;}
		.move_text_right_li {margin-left: 3rem;}
		.move_text_right_ol {margin-left: 4.5rem;}
	}

	@media only screen and (min-width: 700px) {
		.puzzle_rhs_image {width: 160px;}
		.help_image {float: left; text-align: left; margin: 1rem;}
		.help_image_new {float: left; text-align: left; margin: 1rem;}
		.help_text {margin: 1rem 0 1rem 0}
		.help_image_nohr {float: left; text-align: left; margin: 0 1rem 0 0; padding: 0;}
		.help_text_nohr {margin: 0 0 0 0; padding: 0 0 0 0;}
		.error_image {width: 180px;}
		.move_text_right {margin-left: 2.5rem;}
		.move_text_right_li {margin-left: 3.5rem;}
		.move_text_right_ol {margin-left: 5rem;}
	}

	@media only screen and (min-width: 750px) {
		.list_of_thumbs {grid-template-columns: 33% 33% 33%;}
		.safe_table {margin-left: 2.5rem;}
		.safe_td {width: 55px; height: 55px; padding: 0.25rem; font-size: large;}
		.safe_p {font-size: large;}
	}

	/* left and right are both set to 48% on wider screen, and one floats left, the other right */
	@media only screen and (min-width: 800px) {
		.menu_item_horiz a, .menu_item_vert a {
			font-size: large; padding: 0.25rem 1.25rem 0.25rem 0;
			}
		.left, .right {width: 48%;}
		.left {float: left;}
		.right {float: right;}
		.show_when_narrow {display: none;}
		.hide_when_narrow {display: block;}
		.puzzle_list_margin {margin: 0.2rem 0rem 0.2rem 0.75rem;}
		.testers_small {display: none;}
		.testers_large {display: block;}
		.error_image {width: 200px;}
		.move_text_right {margin-left: 3rem;}
		.move_text_right_li {margin-left: 4rem;}
		.move_text_right_ol {margin-left: 5.5rem;}
		.p_n {font-size: 36px; width:53px; height:53px;}
		.p_table_s {width: 53px; height: 53px;}
		.p_table_stop {width: 53px; height: 53px;}
		.p_table_sright {width: 53px; height: 53px;}
		.p_table_stopright {width: 53px; height: 53px;}
	}

/************************************************************************
** show the dark mode div
*************************************************************************/
.dark_mode_on {display: none;}
@media (prefers-color-scheme: dark) {

	.dark_mode_on {display: block;}
}

/************************************************************************************/
/** print help **/
/************************************************************************************/
@media print {
    .print_hide {
        display: none
    }
}

/************************************************************************************/
/** puzzles, etc **/
/************************************************************************************/