/* 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;}

.menu_item_horiz a:visited {color: black;}
.menu_item_vert a:visited {color: black;}
.nav_li_footer a:visited {color: black;}

/* 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: 0;}
.skiptocontent:focus {top: 0;}

/* 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;}

/* 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;
	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;}

.options_line {display: inline-block; width: 4.5rem; height: 2px; vertical-align: middle; background-color: black;}
.options_line_keyboard {display: inline-block; width: 1.75rem; height: 2px; vertical-align: middle; background-color: black;}

/* 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;
	margin: 0 0 0 0.5rem;
	padding: 0 0.25rem 0 0.25rem;
	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: 0 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 0 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 ******************************************************************************/
.print_hide {display: none}
@media screen {
    .print_hide {display: block;}
}