/*
File: styles/palweb.css
Ver 1.68 4/18/2023, added mastodon logo styling for profile link
Ver 1.19 3/7/2022, added Palindro styles
Ver 1.18 9/8/2021, changed link text hover colors for class ft_nav
Ver 1.17 9/7/2021, added classes for media page
Ver 1.16 4/29/2021, styles for ebook listings
Ver 1.00 1/31/2020 - created
Palindromedary website styling
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, hr, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0; -o-border: 0; -moz-border: 0; -webkit-border: 0;
	font-size: 100%;
	font-weight: normal;
	font: inherit;
	vertical-align: baseline
}
body {
	text-align: left;
	font-family: Verdana, Geneva, sans-serif; /* "Times New Roman", Times, serif; */
	font-size: 1em;
	color: #000;
	background: #eee
}

b {font-weight: bold}
i {font-style: italic}
h1 {font-size: 2.4em; font-weight: bold; line-height: 1.6em}
h2 {font-size: 2em; font-weight: bold; line-height: 2.1em}
h3 {font-size: 1.7em; font-weight: bold; line-height: 1.8em}
h4 {font-size: 1.5em; font-weight: normal; line-height: 1.6em}
@media screen and (max-width: 776px) {
  h1 {font-size: 1.7em}
  h2 {font-size: 1.5em}
  h3 {font-size: 1.3em}
  h4 {font-size: 1.1em}
  body {font-size: 1.2em} /* larger on small screens */
}

hr {
	border: 1px solid #ccc; -o-border: 1px solid #ccc; -moz-border: 1px solid #ccc; -webkit-border: 1px solid #ccc;
	width: 100%;
	margin: 2em 0 1em 0
}

table.table thead {font-weight: bold}

/* Base styles for UL/OL responsive columns */
ul {margin-bottom:0in; list-style: none}
ol {margin-bottom:0in}

ul.bullet_text {
	list-style: disc outside;
	margin: 2.0em
}
ul.bullet_text li {margin: .5em 0}
ul.circle_text {
	list-style: circle outside;
	margin: 2.0em
}
ul.circle_text li {margin: .5em 0}
ol.list_text {margin: 0 0 1.0em 2.6em}

.section_heading {}

/* list responsive columns: [max cols] [min width] */
.flowcol_one_word, .flowcol_two_words, .flowcol_many_words {margin-bottom: 100px}
.flowcol_one_word {
	-webkit-columns: 6 150px;
	-moz-columns: 6 150px;
	columns: 6 150px
}
.flowcol_two_words {
	-webkit-columns: 4 250px;
	-moz-columns: 4 250px;
	columns: 4 250px
}
.flowcol_many_words {
	-webkit-columns: 2 450px;
	-moz-columns: 2 450px;
	columns: 2 450px
}
.flowcol_two_med {
	-webkit-columns: 2 250px;
	-moz-columns: 2 250px;
	columns: 2 250px
}

/* bootstrap overrides */
.main {
	background: #fff;
	padding-top: 8px;
	padding-bottom: 16px;
	margin-bottom: 8px
}
.my_footer {
	/* Set the fixed height of the footer here */
	min-height: 60px;
	background-color: #f5f5f5;
	padding: 15px;
	margin: auto;
	margin-bottom: 100px;
	background: #eee
}

/* dropdown menu item background color on hover
Dark	#99ccff	(153, 204, 255) from logo palette, blue sky
Pale	#aaddff	(170, 221, 255)	*/
a.dropdown-item:hover, a.dropdown-item:focus {
	background-color: #aaddff;
	background-image: -webkit-linear-gradient(top, #aaddff 0%, #99ccff 100%);
	background-image: -o-linear-gradient(top, #aaddff 0%, #99ccff 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#aaddff), to(#99ccff));
	background-image: linear-gradient(to bottom, #aaddff 0%, #99ccff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaddff', endColorstr='#99ccff', GradientType=0);
	background-repeat: repeat-x
}
.dd_group {background-color: #ccc; text-align: center}


/* UserSpice navigation  */

/* text classes */
.text_content {margin: 0 0.6em 0.4em 0.6em}
.text_content p, p.text_content, ol.text_content {margin-bottom: 1.0em}
.text_ebook {font-size: 1.2em; border: 2px solid darkred; min-height: 260px; padding: 0.5em; margin: 0.5em}

/* image classes */
.img_center {display:block; margin:auto}
.img_home {max-width:640px}
.img_responsive {max-width: 100%; height: auto}
.img_wrap_rt {float: left; margin: 0 0.5em 0.5em 0}
.img_wrap_lft {float: right; margin: 0 0 0.5em 0.5em}

/* image styles, responsive */
.img_container
{
	margin: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	max-width: 100%;
	height: auto;
	border: 2px solid #b00
}
.med_emoji {font-size: 1.7em}
.big_emoji {font-size: 2em}
.mastodon-bg {background-color: white; border: 2px solid white; border-radius: 6%}

figure {
	border: 2px firebrick solid;
	padding: 8px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1em
}
figcaption {
	background-color: darkred;
	color: white;
	padding: 6px;
	margin-top: 8px;
	text-align: center
}

/* Palindrome List Pages */
/* New styling for palindrome item cards, 7/2/2020 */
.palindrome_card {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin: 24px 0
}
.palindrome_author {margin-left: 24px}
.palindrome_box {
	background-color: #ffff99;
	background-image: -webkit-linear-gradient(top, #ffff99 0%, #ffcc66 100%);
	background-image: -o-linear-gradient(top, #ffff99 0%, #ffcc66 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffff99), to(#ffcc66));
	background-image: linear-gradient(to bottom, #ffff99 0%, #ffcc66 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff99', endColorstr='#ffcc66', GradientType=0);
	background-repeat: repeat-x;
	padding: 12px;
	margin: 0;
	width: 100%;
	display: inline-block
}
.palindrome_link {vertical-align: top; display: inline-block}
.palindrome_quote {display: inline-block}
.palindrome_story {width: 100%; padding: 12px}
/* this wraps text in a pre block */
pre {
	overflow-x: auto;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -webkit-pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word
}

/* From W3C Tutorial https://www.w3schools.com/howto/howto_css_custom_checkbox.asp  */
/* Customize the label (the container) - used by palnew.php */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #efe;
  border: 1px solid black
}

.bad_text, .invalid_text, .is-invalid {color: red}
.good_text {color: darkgreen}
.bold_text {font-weight: bold}

.good_hlt {background-color: paleturquoise}
.warn_hlt {background-color: yellow}
.bad_hlt {background-color: red}

/* Label wizard */
.lbl_next {
/*	display: inline-block; */
	margin: 0.25em 0.5em;
	padding: 0.25em 0.5em;
	border: 1px solid #ccc; -o-border: 1px solid #ccc; -moz-border: 1px solid #ccc; -webkit-border: 1px solid #ccc;
	border-radius: 10%; -moz-border-radius: 10%; -webkit-border-radius: 10%;
	font-size: 1.2em;
	font-family: "Verdana", sans-serif;
	background-color: paleturquoise
}
.lbl_plain {font-weight: bold}


/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}
/* End W3C Tutorial  */

/* List nav */
.btn_nav {
	display: inline-block;
	margin: 0.25em;
	font-size: 1.2em;
	font-family: "Verdana", sans-serif
}
.nav_current_page {
	display: inline-block;
	background-color: #ddd;
	text-align: center;
	padding: 6px;
	border-radius: 20%; -moz-border-radius: 20%; -webkit-border-radius: 20%;
	font-size: 1.2em;
	font-family: "Verdana", sans-serif
}
@media screen and (max-width: 776px) {
	.btn_nav, .nav_current_page {
		margin: 0.15em;
		font-size: 1em
	}
}

/*  Footer nav #dddddd  */
.ft_nav {
	display: inline-block;
	background-color: #37b; /* #e4e4e4 */
	color: #fff; /* #99a */
	text-decoration: none;
	text-align: center;
	padding: 6px;
	margin: 0.4em;
	border-radius: 10%; -moz-border-radius: 10%; -webkit-border-radius: 10%;
	font-size: 1.0em;
	font-family: "Verdana", sans-serif
}
a.ft_nav:hover {background-color: #aaddff; color: #000}

/* List Search */
* {
	box-sizing: border-box
}

/* Style the search field */
form.searchform input[type=text] {
	display: inline-block;
	padding: 10px;
	margin: 0.4em 0;	/*  0.4em 0.25em */
	font-size: 17px;
	border: 1px solid grey;
	float: left;
	width: 84%;
	background: #f1f1f1
}

/* Style the submit button */
form.searchform button {
	float: left;
	width: 10%;	/* 40px */
	padding: 10px;
	margin: 0.4em 0.4em 0.4em 0;
	background: #2196F3;
	color: white;
	font-size: 17px;
	border: 1px solid grey;
	border-left: none; /* Prevent double borders */
	cursor: pointer
}

form.searchform button:hover {
	background: #0b7dda
}

/* Clear floats */
form.searchform::after {
	content: "";
	clear: both;
	display: table
}
/*
@media screen and (max-width: 776px) {
	form.searchform input[type=text] {margin-left: : .15em}
}*/


/* Home  */
.home_text {width: 70%; margin: auto}
.h2_home {margin: 0.6em 0}

/* Misc  */
label:focus {outline: none}

.section_heading {margin-top:2em}
.page_break {page-break-before:always}

.headings_subsection {display: inline-block; min-width: 40%}
.inline_block {display: inline-block}
.btn_spacing {margin: 0.4em}
.btn_hdr_spacing {margin: 0.4em; margin-top: 1.4em}

.mydata_anth_row {margin: 1em; padding: 1em; border: 4px solid lightgreen}
.mydata_anth_in_blk {width: 12.6%; display: inline-block}
a figure.download_obj:hover {background-color: #cfebff}
.media_anth_in_blk {width: 30%; display: inline-block}
.media_anth_in_blk img {width: 100%; display: inline-block}

.photo_credit {max-width: 80%; margin: auto}

.underlined {border-bottom: 1px solid dimgray}
.number_align {text-align: right}

.ifr_box {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%
}
.ifr_resp {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%
}

/* override std toggle color */
.custom-control-input:checked~.custom-control-label::before {
	border-color: #2aabd2;
	background-color: #2aabd2
}
div.custom-switch {margin-top: 0.5em}

/* palindro styles */
.palindro_color_turq {color: #5cb85c}
.palindro_play_box {
	border: 2px solid graytext;
	border-radius: 4px;
	background-color: #ffff99;
	background-image: -webkit-linear-gradient(top, #ffff99 0%, #ffcc66 100%);
	background-image: -o-linear-gradient(top, #ffff99 0%, #ffcc66 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffff99), to(#ffcc66));
	background-image: linear-gradient(to bottom, #ffff99 0%, #ffcc66 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff99', endColorstr='#ffcc66', GradientType=0);
	background-repeat: repeat-x;
	padding: 1em;
	margin-bottom: 1em
}

form.palindro_play_blocks div {display: inline-block} /* make form fields responsive */
.palindro_ltr_field {
	width: 1.6em;
	min-height: 1.8em;
	text-align: center;
	border: 0;
	border-radius: 4px;
	border-top: 1px solid #ddd;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #666;
	border-left: 1px solid #ddd;
	background-color: #ffff99;
	margin-bottom: 2em
}