/** wordlestart.com
 * 
 * common/default.css -
 * CSS settings for the site
 */

body {
	margin: 0;
	padding: 0;
	text-align: center;
	background: #fff;
}

/* img { display: block; } */

body.home {
	margin: 0;
	padding: 0;
	background: #ffc0cb url('../images/newback.jpg');
}

body.dev {
	background-color: #f0fab8;
}

body.show_game {
	background-color: #d1ffd9;
}

body.hits {
	background: #eee;
}

body.login {
	margin: 0;
	padding: 0;
	background: #fff url('../images/pbfrontback.gif');
}

body.comments {
	margin: 0;
	padding: 0;
	background-color: #eff;
}

body.enter_page {

	background-color: #eee;
}

body.enter_page2 {

	background-color: #eee;
}

.hidden {
	display: none;
}

.site_fonts { font-family: "Source Serif Pro",garamond,serif; }

input[type=button],input[type=radio],input[type=checkbox],input[type=submit],input[type=reset],select {

	cursor: pointer;
}

label { cursor: pointer; }

.pw_eye {
	width: 18px;
	height: 12px;
	margin-left: -24px; 
	display: inline; 
	vertical-align: middle;
}

#tb_link_ul {

	width: 15px;
	height: 15px;
	position: absolute;
	left: 0;
	top: 0;
}

#tb_link_ur {

	width: 15px;
	height: 15px;
	position: absolute;
	right: 0;
	top: 0;
}

#tb_link_ll {

	width: 15px;
	height: 15px;
	position: absolute;
	left: 0;
	bottom: 0;
}

#tb_link_lr {

	width: 15px;
	height: 15px;
	position: absolute;
	right: 0;
	bottom: 0;
}

#tb_link_lm {

	width: 29px;
	height: 25px;
	position: absolute;
	left: 275px;
	bottom: 20px;

}

#content {
	position: relative;
}

#content_100pct { text-align:center; width:60%; margin:-3px auto 10px auto; }

table.center { margin-left: auto; margin-right: auto; }
div.center { margin-left: auto; margin-right: auto; }
p.center { margin-left: auto; margin-right: auto; }
h2.center { margin-left: auto; margin-right: auto; }

div.error { color: #c03; font-weight: bold; }
td.error { color: #c03; font-weight: bold; }
th.error { color: #c03; font-weight: bold; }
span.error { color: #c03; font-weight: bold; }

.errornb { color: #c03; }
div.errornb { color: #c03; }
th.errornb { color: #c03; }
td.errornb { color: #c03; }
span.errornb { color: #c03; }

div.errornb2 { color: #ccc; }
th.errornb2 { color: #ccc; }
td.errornb2 { color: #ccc; }
span.errornb2 { color: #ccc; }

#std_error_div {
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	text-align: center;
	width: 410px; 
	border: 2px solid #472400; 
	border-radius: 10px; 
	background-color: white; 
	padding: 40px 35px 30px 35px;
}

.back_btn {
	display: block;
	margin-top: 20px;
}

.bold    { font-weight: bold; }
.nobold  { font-weight: normal; }
.italic  { font-style: italic; }
.vtop    { vertical-align: top; }
.center_text  { text-align: center; }
.red     { color: #c03; }
.highlight { background-color: yellow }

.back_arrow_link {
	display: block;
	margin: 16px 0 24px 0;
}

.back_arrow_img { 

	width: 60px;
	height: 24px;
}

.back_to_home_div {
	margin: 15px 0 6px 0;
	font-size: clamp(1.1rem,2.5vw,1.15rem);
}

.admin_box {
	position: fixed;
	top: 0;
	left: 1px;
	width: 100px;
	height: 100px;
	background-image: url(/resources/images/admin_corner.gif);
}

#admin_box1 {
	z-index: 50000;
	clip-path: polygon(39% 0%,64% 24.75%,24.75% 64%,0% 39%);
}

#admin_box2 {
	cursor: pointer;
	z-index: 51000;
	clip-path: polygon(0% 37.5%,24.75% 64%,0% 89%);
}

#admin_box3 {
	z-index: 51000;
	clip-path: polygon(37.5% 0%,89% 0%,64% 24.75%);
}

.admin_box img {
	margin-top: 0;
	width: 100px;
	height: 100px;
}

a:link { color: #00008b; font-weight: bold; }
a:visited { color: #00008b; font-weight: bold; }
a:hover { color: #00f; font-weight: bold; }
a:active { color: #00f; font-weight: bold; }

.dev 	a:link { color: purple; font-weight: bold; }
.dev 	a:visited { color: purple; font-weight: bold; }
.dev 	a:hover { color: #90f; font-weight: bold; }
.dev 	a:active { color: #90f; font-weight: bold; }

.change_log_date a:link    { color: #000; text-decoration: none; }
.change_log_date a:visited { color: #000; text-decoration: none; }
.change_log_date a:hover   { color: #555; text-decoration: none; }
.change_log_date a:active  { color: #555; text-decoration: none; }

.home a:link    { color: white; }
.home a:visited { color: white; }
.home a:hover   { color: #8b4513; }
.home a:active  { color: #8b4513; }

.login a:link { color: #8b4513; }
.login a:visited { color: #8b4513; }
.login a:hover { color: #300; }
.login a:active { color: #300; }

#send_activation {
	display: inline;
}

#send_activation_btn {
	display: inline;
	padding: 4px 8px;
	font-size: 0.88rem;
	color: #f03;
	font-weight: bold;
}

div.activation {
	margin: -10px auto 0 auto;
	width: 87%;
	padding-right: 18px;
	padding-left: 18px;
	text-align: justify;
}

div.activation2 {
	margin: 0px auto 0 auto;
	width: 250px;
	text-align: center;
}

div.activation p {
	line-height: 150%;
}

figure.activation {
	float: left; 
	clear: both; 
	margin: 3px 25px 5px 0px;
}

#main_div {
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	margin-top: 10px;
	font-size: 1.28rem;
	width: 98vw;
	max-width: 780px;
	min-width: 310px;
}

#login_maindiv  { 
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	padding-top: 20px;
	padding-bottom: 18px;
	width: 98%;
	max-width: 580px;
	min-width: 344px;
	background-color: #f4fff4;
	outline: 2px solid #430;
	border-radius: 6px;
	box-sizing: border-box;
}

#login_maindiv h3 { 
	margin-top: 0;
	margin-bottom: 0;
	font-size: clamp(1.8rem,2.5vw,1.95rem);
}

#login_maindiv.editor {
	padding-bottom: 7px;
}

#logged_in_name_div {
	padding-right: 9px;
}

#logged_in_name_div span {
	font-size: 1.6rem;
	font-weight: bold;
}

.logged_in_links_div {
	margin-top: 18px;
}

.login_sess_stats {
	margin: 22px 0 16px 0; 
	font-size: 0.95rem; 
	color: green; 
	line-height: 140%; 
}

#login_banned {
	padding-top: 20px;
	padding-bottom: 15px;
	font-size: 1.25rem;
}

.login_error {
	color: #c03;
	font-size: 1rem;
	padding-top: 10px;
}

.login_error2 {
	color: #c03;
	font-size: 1.05rem;
	padding-top: 8px;
}

.login_error3 {
	margin-top: 3px; 
	margin-bottom: 2px; 
	color: #c03; 
	font-size: 0.98rem;
}

.login_error4 {
	margin-top: -6px; 
	margin-bottom: 4px; 
	color: #c03; 
	font-size: 0.95rem;
}

.restart_login {
	font-size: 1.5rem;
}

.login_expired_div p {
	font-size: 1.5rem;
	margin-bottom: 15px;
}

.login_tbl {
	margin-left: auto;
	margin-right: auto;
	margin-top: 14px;
	text-align: left;
	color: #00008b;
	width: 88%;
	max-width: 400px;
	border-collapse: collapse; 
	border-spacing: 0;
}

.login_tbl th {
	text-align: left;
	font-size: clamp(1.05rem,2.5vw,1.15rem);
}

.login_tbl td {
	width: calc(115px + 0vw);
	padding-top: 3px;
}

.login_input {
	width: 160px;
	font-size: 1rem;
	padding: 3px 5px;
	border-radius: 3px;
	border: 1px solid #444;
}

.privacy_pol {
	font-size: clamp(1.04rem,2.5vw,1.12rem);
}

.fb_div {
	outline: 1px solid green;
	margin-top: 8px;
	padding-top: 0;
	width: 188px;
}

.login_tbl2 {
	margin-left: auto;
	margin-right: auto;
	margin-top: 14px;
	width: 260px; 
	border-collapse: collapse; 
	border-spacing: 0;
}

.login_tbl2 tr {
	vertical-align: top;
}

.login_tbl2 th {
	font-weight: normal;
	padding-right: 8px;
	padding-top: 10px;
	font-size: 1rem;
}

.login_tbl2 td {
	padding-top: 6px;
	text-align: left;
}

.login_tbl2 td.submit_btn {
	padding-top: 0px;
	text-align: center;
}

.login_input2 {
	width: 170px;
}

.login_tbl3 {
	margin-left: auto;
	margin-right: auto;
	margin-top: 14px;
	width: 290px; 
	border-collapse: collapse; 
	border-spacing: 0;
}

.login_tbl3 tr {
	vertical-align: top;
}

.login_tbl3 th {
	font-weight: normal;
	padding-right: 8px;
	padding-top: 10px;
	font-size: 1rem;
}

.login_tbl3 td {
	padding-top: 6px;
	text-align: left;
	width: 188px;
}

.totp_tbl {
	width: 80%;
	max-width: 350px;
	margin: 14px auto 10px auto;
}

.totp_tbl tr:nth-child(2) td {
	padding-top: 8px;
}

.input_totp {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 170px;
	height: 52px;
	font-size: 1.92rem;
	padding: 9px 10px 6px 10px;
	text-align: center;
	letter-spacing: 3px;
	border-radius: 3px;
	border: 1px solid #444;
	box-sizing: border-box;
}

.totp_text {
	padding: 0 42px;
	font-size: 1.2rem;
}

.comment_btn {
	font-size: 0.92rem;
	margin-top: 4px;
	width: 120px;
}

.need_login {
	margin: 8px auto;
	width: 85%;
	max-width: 480px;
	font-size: 0.95rem;
	text-align: justify;
}

.width_max_580 {
	margin-left: auto;
	margin-right: auto;
	width: 94vw;
	max-width: 580px;
	min-width: 344px;
	padding: 25px 30px;
	box-sizing: border-box;
}

.need_acct {
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	background-color: #fbfffb;
	text-align: justify;
	line-height: 140%;
	border: 1px solid #555;
	border-radius: 6px;
	padding: 14px 21px;
	width: 98.4%;
	max-width: 580px;
	min-width: 344px;
	display: block;
	box-sizing: border-box;
}

.need_acct a {
	font-size: 1rem;
}

.delete_tbl {
	margin-left: calc(15px + 8vw);
	font-size: 1.2rem;
	width: 315px;
	max-width: 345px;
}

.delete_tbl th {
	font-size: clamp(0.95rem,2.5vw,1.10rem);
}

.delete_submit_btn {
	width: 145px;
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 0.9rem;
}

.pw_update_tbl {
	width: 340px;
}

.pw_update_tbl th, .pw_update_tbl td {
	padding-bottom: 6px;
}

th.pw_update {
	padding-top: 8px;
	font-size: 1rem;
	width: 150px;
}

th.pw_reset {
	padding-bottom: 8px;
	font-size: 1rem;
}

th.pw_update2 {
	padding-top: 8px;
	font-size: 1rem;
}	

th.pw_reset2 {
	padding-top: 8px;
	font-size: 0.95rem;
}

#disclaimer {
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	width: 75%;
	text-align: justify;
	font-size: clamp(1.05rem,2.5vw,1.15rem);
}

.forgot_pass_tbl {
	width: 265px;
	margin-bottom: 14px;
}

.forgot_pass_tbl th {
	padding-right: 8px;
	padding-top: 7px;
	font-size: clamp(1.2rem,2.6vw,1.35rem);
}

.forgot_pass_submit {
	font-size: 0.82rem;
	width: 150px;
	padding: 2px 0px;
}

.forgot_pass_submit:hover {
	font-weight: bold;
}

.login_link {
	font-weight: bold;
	color: #00008b;
	text-decoration: none;
}

.user_info_tbl {
	width: 340px;
	max-width: 360px;
	box-sizing: border-box;
}

.user_info_tbl th {
	font-size: clamp(1.02rem,2.5vw,1.12rem);
}

.user_info_tbl > tbody > tr > th:first-child {
	width: 5px;
}

.user_info_tbl td {
	font-size: clamp(1.02rem,2.5vw,1.12rem);
	width: 42%;
}

.user_info_details {
	margin-top: 16px;
	font-size: clamp(1.08rem,2.5vw,1.18rem);
	box-sizing: border-box;
}

.user_name_span {
	font-size: 1.4rem;
}

#upduserpassword {
	width: 170px;
}

.comment_user_name_span {
	font-size: 1.2rem;
}

.login_nav_div {
	margin-top: 18px;
	font-size: clamp(1.05rem,2.5vw,1.18rem);
}

.login_submit_btn {
	margin-top: 18px;
	font-size: 0.96rem;
	width: 120px;
	padding-top: 3px;
	padding-bottom: 3px;
}

.pw_update_btn {
	width: 145px;
}

.failed_logins_wait {
	margin-bottom: 25px;
}

.login_text_div {
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	width: 80%; 
	max-width: 470px;
	padding-top: 14px;
	font-size: clamp(1.1rem,2.5vw,1.25rem);
}

.login_text_div_center {
	margin-left: auto;
	margin-right: auto;
	width: 80%; 
	max-width: 470px;
	padding-top: 14px;
	padding-bottom: 14px;
	font-size: clamp(1.1rem,2.5vw,1.25rem);
	line-height: 150%;
	text-align: justify;
}

.login_req_fields_div {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 80%; 
	padding-top: 14px;
	font-size: 1rem;
}

.login_small_text {
	height: 30px;
	vertical-align: bottom;
	font-size: 1.02rem;
}

.ulevel_tbl {
	width: 100%;
	max-width: 860px;
	box-sizing: border-box;
}

.ulevel_tbl tr {
	vertical-align: top;
}

.ulevel_tbl th {
	width: 145px;
	padding-right: 12px;
	text-align: left;
}

#password_strength_div {
	margin-left: auto;
	margin-right: auto;
	margin-top: 18px;
	width: 50%; 
	max-width: 280px; 
	text-align: center; 
	font-weight: bold;
}

#password_str_bar {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px; 
	width: 280px; 
	height: 14px; 
	font-weight: bold; 
	z-index: 5;
}

#password_str_bar2 {
	position: absolute; 
	width: 100%; 
	height: 16px; 
	left: 0; 
	top: 0; 
	outline: 2px solid black; 
	background-color: white; 
	z-index: 5;
}

#password_weak_div {
	position: absolute; 
	left: -51px; 
	color: orange; 
	font-size: 0.96rem;
}

#strength_div {
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 1%; 
	height: 15px; 
	padding-top: 1px; 
	color: white; 
	text-align: center; 
	background-color: orange; 
	font-size: 0.8rem; 
	z-index: 10;
}

#password_strong_div {
	position: absolute; 
	left: 288px; 
	color: green; 
	font-size: 0.96rem;
}

@media screen and ( max-width: 1000px ) {
	#password_str_bar  { width: 180px; }
	#password_strong_div { left: 188px;}
}

#pwd_explain_text {
	margin-left: auto;
	margin-right: auto;
	font-family: "Source Serif Pro"; 
	text-align: left; 
	font-weight: bold; 
	margin-top: 30px;
	width: 70%; 
	max-width: 388px;
}

#pw_force_update_div {
	margin-left: auto;
	margin-right: auto;
	margin-top: 16px;
	margin-bottom: 16px;
	color: #654321; 
	font-weight: bold; 
	text-align: left; 
	width: 370px; 
}

.comment_div  { 
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	padding-top: 20px;
	padding-bottom: 18px;
	width: 94vw;
	max-width: 580px;
	min-width: 344px;
	background-color: #f4fff4;
	outline: 2px solid #430;
	border-radius: 6px;
	box-sizing: border-box;
}

.comment_div h3 { 
	margin-top: 0;
	margin-bottom: 0;
	font-size: clamp(1.9rem,2.5vw,2.2rem);
}

.comment_expl {
	margin: 14px auto 10px auto;
	width: 80%;
	max-width: 550px;
	font-size: clamp(0.98rem,2.5vw,1.05rem);
	text-align: justify;
	box-sizing: border-box;
}

.comment_title {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 90%; 
	max-width: 470px;
	padding-top: 14px;
	font-size: 1.2rem;
}

#comment_textarea {
	width: 85%;
	max-width: 450px;
	height: 180px;
	border-radius: 6px;
	resize: vertical;
	max-height: 240px;
	min-height: 30px;
	padding: 10px;
	font-size: clamp(1rem,2.5vw,1.05rem);
	box-sizing: border-box;
}

#char_counter_div {
	width: 88%;
	max-width: 450px;
	margin: -2px auto 16px auto;
	text-align: right;
	padding-right: 10px;
	font-size: calc(0.1em + 83%);
}

.main_text {
	margin-left: auto;
	margin-right: auto;
	margin-top: 6px;
	width: 98%;
	max-width: 672px;
	min-width: 300px;
	padding: 12px calc(17px + 01.542vw) 18px calc(17px + 1.542vw);
	text-align: justify;
	background-color: white;
	box-sizing: border-box;
}

.main_text h3 {
	width: 95%;
	margin: 0 auto;
	padding-top: 12px;
	padding-bottom: 2px;
	font-size: calc(1.1em + 0.5vw);
}

.main_text h4 {
	width: 95%;
	margin: 0 auto;
	padding-top: 12px;
	padding-bottom: 2px;
	font-size: 1.1rem;
}

.main_text p, .main_text ul {
	margin: 5px auto 12px auto;
	width: 95%;
	font-size: 1.08rem;
	line-height: 140%;
}

.compare_figure_div {
	width: 290px;
	margin: 0 auto;
	padding: 10px 12px 12px 12px;
	text-align: center;
}

.wordle_compare {
	display: inline-block;
	width: 250px;
	height: 239px;
}

figcaption.small_text {
	margin-left: auto;
	margin-right: auto;
	padding-top: 8px;
	width: 250px;
	font-size: 0.88rem;
	line-height: 125%;
}

p.explain {
	margin: 0 auto;
	width: 97%;
	max-width: 620px;
	text-align: justify;
	font-size: 0.88rem;
	line-height: 125%;
}

div.error_page {
	margin: 0 auto;
	margin-top: 10px;
	width: 320px;
	font-size: 1.4rem;
}

div.error_page a {
	font-size: 0.88rem;
	color: #003a8b;
}

.specs a:link { color: #8b4513; }
.specs a:visited { color: #8b4513; }
.specs a:hover { color: #300; }
.specs a:active { color: #300; }
.specs { color: #8b4513; font-weight: bold; }

.hits_data_tbl td a:link { color: #2e8b17; text-decoration: none; }
.hits_data_tbl td a:visited { color: #2e8b17; text-decoration: none; }
.hits_data_tbl td a:hover { color: #145f88; text-decoration: none; }
.hits_data_tbl td a:active { color: #145f88; text-decoration: none; }

.hits_data_tbl {
	
	margin: 15px auto;
	font-size: calc(0.9em + 0.2vw);
	background-color: white;
	padding: 5px 10px;
	border-radius: 6px;
	outline: 1px solid #444;
}

#hits_nav_tbl td a:link { color: #2e8b17; text-decoration: none; }
#hits_nav_tbl td a:visited { color: #2e8b17; text-decoration: none; }
#hits_nav_tbl td a:hover { color: #145f88; text-decoration: none; }
#hits_nav_tbl td a:active { color: #145f88; text-decoration: none; }

#hits_nav_tbl {

	margin: 20px auto;
	width: 460px; 
}

#hits_nav_td1 {

	width: 13%; 
}

#hits_nav_td2 {

	width: 26%; 
}

#hits_nav_td3 {

	width: 29%; 
}

#hits_nav_td4 {

	width: 32%; 
}

.datepicker_tbl1 {
	position: fixed;
	left: 50%;
	transform: translate(-50%,0);
	top: 285px;
	background-color: #c5f2c6;
	text-align: center;
	font-size: 1.3rem;
	outline: 2px solid #444;
	padding: 8px;
	border-radius: 6px;
	box-shadow: 3px 3px 6px #444;
	z-index: 390;
	min-width: 310px;
	width: 310px;
	box-sizing: border-box;
}

.datepicker_tbl1 th {
	font-weight: normal;
	font-size: 0.7rem;
}

.datepicker_tbl1 td {
	padding: 5px 9px;
}

.datepicker_tbl1 tr td {
}

.datepicker_tbl1 tr:first-child td {
	background-color: #c5f2c6;
	padding-bottom: 12px;
}

.datepicker_tbl1 tr:last-child td {
	background-color: #c5f2c6;
	padding-top: 8px;
	padding-bottom: 4px;
	border-radius: 4px;
}

.datepicker_tbl1 tr:last-child td input[type=button] {
	font-size: 0.88rem;
}

.datepicker_tbl1 tr:first-child td > div {
	display: inline-block;
	font-size: 0.92rem;
	margin: 0 6px;
}

#cal_month1, #cal_year1 {
	padding: 2px;
	border-radius: 4px;
	font-size: 0.88rem;
}

.datepicker_tbl2 {
	position: fixed;
	left: 50%;
	transform: translate(-50%,0);
	top: 170px;
	background-color: #c5f2c6;
	text-align: center;
	font-size: 0.78rem;
	outline: 2px solid #444;
	padding: 4px;
	border-radius: 5px;
	box-shadow: 3px 3px 6px #444;
	z-index: 390;
	box-sizing: border-box;
}

.datepicker_tbl2 th {
	font-size: 0.88rem;
}

.datepicker_tbl2 td {
	padding: 3px 5px;
}

.td_cursor {
	cursor: pointer;
}

.datepicker_tbl2 select {
	font-size: 1.3rem;
}

.datepicker_tbl2 tr:first-child td {
	background-color: #c5f2c6;
	padding-bottom: 7px;
}

.datepicker_tbl2 tr:first-child td > div {
	display: inline-block;
	font-size: 1.02rem;
	margin: 0 4px;
}

.datepicker_tbl2 tr:last-child td {
	background-color: #c5f2c6;
	border-radius: 3px;
	padding-top: 8px;
	padding-bottom: 4px;
}

.datepicker_tbl2 tr:last-child td input[type=button] {
	font-size: 0.88rem;
}

#cal_month2, #cal_year2 {
	padding: 2px;
	border-radius: 4px;
	font-size: 0.78rem;
}

.input_date input[type=text] {
	padding: 4px 14px 3px 1px;
	font-size: 0.96rem;
	transform: translate(1px,0);
	width: 104px;
	text-align: center;
}

.cal_link_img {
	width: 20px;
	height: 20px;
	vertical-align: bottom;
	transform: translate(0,-3px);
	display: inline-block;
	margin-left: 1px;
}

.calendar_bg {
	background-color: white;
}

.calendar_highlight {
	background-color: #add8e6;
}

.calendar_selected {
	background-color: #a3c7a3;
}

.hidden_cal1, .hidden_cal2 {
	display: none;
}

.material-symbols-outlined.calendar {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24;
	transform: translate(0,6px);
	font-size: 1.6rem;
	width: 25.61px;
	height: 25.59px;
}

.material-symbols-outlined.calendar2 {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24;
	font-size: 1.6rem;
}

.today_link {
	padding: 0;
	text-align: right;
	vertical-align: bottom;
}

.today_link img {
	width: 20px;
	transform: translate(0,4px);
}

.today_link1 img {
	height: 20px;
}

.today_link2 img {
	height: 10px;
}

.searchnav { color: #0b7; font-weight: bold; }

.searchnav td { width: 18px; text-align: right; }
.searchnav_active_page { font-size: 1.02rem; }

.searchnav a:link { color: #063; font-weight: bold; font-size: 1.02rem; }
.searchnav a:visited { color: #063; font-weight: bold; font-size: 1.02rem; }
.searchnav a:hover { color: #0c6; font-weight: bold; font-size: 1.02rem; }
.searchnav a:active { color: #0c6; font-weight: bold; font-size: 1.02rem; }

.admin_links 	a:link    { color: blue; }
.admin_links 	a:visited { color: blue; }
.admin_links 	a:hover   { color: blue; }
.admin_links 	a:active  { color: blue; }

table.admin_links {
	margin-top: 10px; 
	line-height: 200%;
}

h3.admin, h2.admin { 
	font-size: 1.76rem; 
	margin: 10px 0 4px 0; 
	padding: 0; 
}

.blockquote {
	font-style: italic;
}

.loading { font-family: arial; font-size: 1.3rem; color: #678595; line-height: 1.2rem; }
.nameloading { font-family: arial; font-size: 1.9rem; color: #528191; line-height: 1.4rem; }

.keep_centered { 
	position: absolute; 
    	left: 50%;         	
/* Start with top left in the center */ 
    	top: 1%; 
    	width: 400px;  	 		/* The fixed width... */ 
    	height: 1px;    		/* ...and height */ 
    	margin-left: -210px;   	/* Shift over half the width */ 
    	margin-top:  -1px;     	/* Shift up half the height */ 
}

img[usemap], map area{
    outline: none;
}

.dragclass {
	position: relative;
	cursor: grab;
}

.dragclass2 {
	cursor: grab;
}

.dragclass3 {
}

.shadow 	{ box-shadow: 3px 4px 12px #333; }
.shadow2 	{ box-shadow: 13px 14px 32px 2px #333; }
.shadow3	{ box-shadow: 8px 8px 22px #333; }
.shadow4	{ box-shadow: 5px 5px 16px #333; }
.shadow5	{ box-shadow: 13px 13px 36px #333; }
.shadow6	{ box-shadow: 8px 8px 26px #333; }

.snav		{ border: 0; }

/* Guides */

.gbg_label	{ font-size: 0.96rem; color: #7c4102; }
.gbg_label_small { font-size: 0.85rem; color: #7c4102; }

.corner_link {
	display: block;
	position: absolute;  
	top: 0; 
	opacity: 0;
	z-index: 25;
}

.corner_link20 {
	width: 20px; 
	height: 20px;
}

.corner_link30 {
	width: 30px; 
	height: 30px;
}

.corner_link40 {
	width: 40px; 
	height: 40px;
}

#corner_back_link {
	left: 0; 
}

#corner_home_link {
	right: 0; 
}

#guide_back_link {
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 30px; 
	height: 30px;
	z-index: 100000;
}

#guide_home_link {
	position: absolute; 
	right: 0; 
	top: 0; 
	width: 30px; 
	height: 30px;
	z-index: 100000;
}

.guide_nav_link_img {
	width: 100%;
	height: 100%;
}

.guide_field_tr {
	font-size: 1.2rem; 
	color: #00008b;
}

.guide_field_label_td {
	padding-top: 10px;
}

/* Admin section */

table#users_tbl {
	font-size: 0.88rem;
}

table#users_tbl th { 
	padding-top: 6px; 
	padding-bottom: 6px;
	text-align: center; 
}

table.failed_logins_tbl {
	text-align: left; 
	width: 100%;
	max-width: 1000px; 
	background-color: #f1feff;
}

table.failed_logins_tbl a {
	text-decoration: none;
}

.failed_logins_tbl_header {
	background-color: #58d;
}

table.failed_logins_tbl th { 
	width: 103px;
	padding-left: 7px;
	padding-top: 6px; 
	padding-bottom: 6px;
}

table.failed_logins_tbl th a { 
	color: white;
}

table.failed_logins_tbl td { 
	padding: 3px 3Px 3px 7px; 
}

.failed_logins_div {
	outline: 1px dashed blue;
	display: inline-block;
	width: 350px;
	display: none;
}

.failed_logins_div a {
	text-decoration: none;
}

.failed_logins_div .div_td1 {
	width: 60%;
}

.failed_logins_div:nth-child(even) {
	background-color: #f1feff;
}

.title_block {
	width: 90%;
	text-align: left;
}

.google_intro {
	padding: 10px 0;
	font-size: 0.88rem;
}

.site_parent {
	display: flex;
	height: 400px;
	justify-content: center;
	align-items: flex-start;
	padding: 5px; 
}

.guide_item {
	width: 210px;
	height: 400px;
	text-align: left;
	margin: 0 50px;
}

.diagnostics_div {
	margin-left: auto;
	margin-right: auto;
	width: 700px; 
	text-align: left; 
	margin-top: 28px; 
}

.diag_pdo {
	color: blue;
}

.diag_mysqli {
	color: #984a31;
}

.diag_font_code {
	font-family: courier; 
	font-size: 0.88rem;
}

.admin_container {
	position: relative;
	margin-left: auto; 
	margin-right: auto;
	margin-top: -5px;
	max-width: 580px; 
	text-align: left;
	background-color: white;
	padding: 5px 30px 30px 30px;
	outline: 2px solid black;
	border-radius: 5px;
	box-sizing: border-box;
}

.logged_in_span {
	font-size: 18px;
}

.diag_holder {
	margin-left: 50px;
	margin-top: 10px;
}

.diag_holder > div, .diag_holder > img {
	display: inline-block;
	margin-top: 10px;
	vertical-align: bottom;
	font-size: 1.65rem;
}

.diag_holder > div:first-child {
	width: 280px;
	text-align: left;
}

.diag_holder > div:nth-child(2) {
	width: 175px;
	margin-top: -4px;
	text-align: left;
}

.diag_holder img {
	width: 24px;
	height: 24px;
	transform: translate(0,6px);
}

.diag_holder a {
	font-size: clamp(1.1rem,2.5vw,1.15rem);
	text-decoration: none;
}

.toggle_css {
	font-size: 1.1rem;
}

a:link.toggle_mysqli_en { color: green; }
a:visited.toggle_mysqli_en { color: green; }
a:hover.toggle_mysqli_en { color: blue; }
a:active.toggle_mysqli_en { color: blue; }

a:link.toggle_mysqli_dis { color: #c03; }
a:visited.toggle_mysqli_dis { color: #c03; }
a:hover.toggle_mysqli_dis { color: blue; }
a:active.toggle_mysqli_dis { color: blue; }

a:link.toggle_pdo_en { color: green; }
a:visited.toggle_pdo_en { color: green; }
a:hover.toggle_pdo_en { color: blue; }
a:active.toggle_pdo_en { color: blue; }

a:link.toggle_pdo_dis { color: #c03; }
a:visited.toggle_pdo_dis { color: #c03; }
a:hover.toggle_pdo_dis { color: blue; }
a:active.toggle_pdo_dis { color: blue; }

.admin_page_title {
	margin-left: auto;
	margin-right: auto;
	width: 340px;
	padding-bottom: 6px;
	text-align: center;
	font-size: clamp(1.7rem,2.6vw,1.9rem);
	display: none;
}

.admin_nav_links, .admin_nav_links_small {
	margin-top: 6px;
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(1.05rem,2.6vw,1.12rem);
	font-family: arial;
	text-align: center;
	max-width: 750px;
}

.admin_nav_links > div {
	display: inline-block;
	width: clamp(160px,10vw,190px);
	height: 34px;
	line-height: 34px;
	box-sizing: border-box;
}

.admin_nav_links_small > div {
	display: inline-block;
	margin: 0 5px 0 5px;
	height: 34px;
	line-height: 34px;
}

#admin_user_info_name {
	margin-top: 0px; 
	margin-bottom: 10px; 
	margin-left: 3px; 
	font-size: 1.9rem; 
}

#admin_user_info_tbl {
	text-align: left; 
	width: 98%; 
	margin-top: 10px;
}

#admin_user_info_tbl th {
	padding: 3px;
	text-align: left;
	min-width: 180px;
	width: 40%;
}

#admin_user_info_tbl td {
	padding: 3px;
	text-align: left;
}

.user_info_fs {
	font-size: 1.06rem;
}

#admin_visit_tbl {
	margin-top: 20px; 
	margin-left: 3px;
	width: 100%;
	text-align: left;
}

#admin_visit_tbl th {
	min-width: 180px;
	width: 44%;
	text-align: left;
}

#admin_legend_div {
	text-align: center;
	max-width: 660px; 
	margin-top: 5px; 
	margin-left: auto;
	margin-right: auto;
}

.legend_cont {
	padding: 3px;
	display: inline-block;
}

.admin_legend_color {
	margin-top: 6px; 
	width: 10px; 
	height: 10px;
	float: left; 
	margin-left: 18px;
}

.admin_legend_label {
	padding-left: 5px;
	padding-right: 10px; 
	float: left;
}

#admin_user_info_links_div {
	margin-left: 6px; 
	margin-top: 18px;
	font-size: clamp(1rem,2.5vw,1.15rem);
}

/* GUIDE SECTION */

.guide_container {
	position: relative;
	margin-top: -10px;
	left: 50%;
	transform: translate(-50%,0);
	width: 98%;
	max-width: 674px; 
	border: 2px solid #654321; 
	background-color: white; 
	text-align: justify;
	border-radius: 6px;
	box-sizing: border-box;
}

.guide_container h1 {
	width: 100%;
	margin: 16px auto 8px auto; 
	text-align: center;
	font-size: clamp(1.54rem,2.5vw,2.2rem);
	color: #00008b; 
}

.guide_container h3 {
	font-size: clamp(1.15rem,2.5vw,1.2rem);
}

.guide_img_div {
	position: relative;
}

.guide_container p {
	font-size: clamp(1.05rem,2.5vw,1.15rem);
}

.guide_cont_padding {
	padding-top: 2px; 
	padding-right: calc(25px + 3.4%); 
	padding-bottom: 10px; 
	padding-left: calc(25px + 3.4%); 
}

.ptext, .code_div {
	padding-left: 20px;
	padding-bottom: 8px;
}

.ptext2 {
	text-align: left;
}

div.code {
	display: inline-block;
	font-family: courier; 
	text-align: left;
	font-size: 1rem;
	font-weight: bold;
	color: #00008b;
}

.guide_group_top {
	display: block; 
}

.guide_group_bottom {
	display: block; 
	padding-top: 8px;
}

.er_symbol {
	vertical-align: bottom;
}

.p_symbol {
	margin-bottom: 0;
	height: 4px;
	transform: translate(0,-20px);
	vertical-align: bottom;
}

#opening_div, .main_text, #display_tbl {
	border-radius: 6px;
}

.footer {
	margin: 0 auto;
	max-width: 600px;
	width: 80%;
	font-family: "Source Serif Pro";
}

.footer > div > div {
	display: inline-block;
	padding: 10px 10px 0px 10px;
	font-size: 1rem;
}

#copyright {
	padding-top: 20px;
}

/* Facebook */

.fb-login-button {
	margin-top: 10px;
}

.short_br, .short_br2 {
	display: none;
}

.er_symbol {
	vertical-align: bottom;
}

.picker1_hidden, .picker2_hidden {
	
}

@media screen and ( max-width: 700px ) {	
	.short_br2 { display: inline; }
}

@media screen and ( max-width: 550px ) {

	.container { margin-top: 10px; }
	.admin_container { width: 94vw; padding: 5px 20px 40px 20px; }

	.short_br { display: inline; }
	.short_br2 { display: none; }

	#password_str_bar { width: 66%; }
}

@media screen and ( min-width: 551px ) {	
	.picker2_hidden { display: none; }
}

@media screen and ( max-width: 550px ) {	
	.picker1_hidden { display: none; }
}