/**
 * main.css - main site theming
 *
 * significantly cleaner version of the botsociety.co site theme
 */

/* general */

	* {
		box-sizing: border-box;
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		margin: 0;
		padding: 0;

		font-family: "IBM Plex Sans", arial;
		font-size: 10pt;

		color: var(--body-text);
		background: var(--body-bg);
	}

	a:link {
		color: var(--link-text);
		text-decoration: none;
	}

	a:active {
		color: var(--link-active);
		text-decoration: none;
	}

	a:visited {
		color: var(--link-visited);
		text-decoration: none;
	}

	a:hover {
		color: var(--link-hover-fg);
		text-decoration: none;
		background: var(--link-hover-bg);
	}

	a.nohovercolor {
		background-color: unset;
	}

	h1, h2, h3, h4, h5, h6 {
		margin-bottom: 4px;
		margin-top: 4px;
	}

	h1.light, h2.light, h3.light, h4.light, h5.light, h6.light {
		font-family: "IBM Plex Sans";
		/* font-weight: normal;*/
		font-weight: 300;
	}

	h1.small-margin, h2.small-margin, h3.small-margin, h4.small-margin, h5.small-margin, h6.small-margin {
		margin-top: 4px;
	}

	h1.no-margin, h2.no-margin, h3.no-margin, h4.no-margin, h5.no-margin, h6.no-margin {
		margin-top: 0;
		margin-bottom: 0;
	}

	h1.notop, h2.notop, h3.notop, h4.notop, h5.notop, h6.notop {
		margin-top: 0;
	}

	table {
		table-layout: fixed;
		width: 100%;
		/* font-size: 10pt;*/
	}

	td {
		vertical-align: top;
		padding-left: 4px;
		padding-right: 4px;
	}

	td.aright {
		text-align: right;
	}

	table.loginsignup td {
		vertical-align: middle;
	}

	table.loginsignup td.label {
		width: 35%;
	}

	img.bordered {
		border: 1px solid var(--img-bordered);
	}

	img.selfie {
		border-radius: 24px;

		margin-top: 6px !important;
		width: unset !important;
		height: 300px;
		max-height: 300px !important;

		object-fit: contain !important;
		object-position: unset !important;
	}

	img.image404 {
		width: 300px !important;
		object-position: center !important;
	}

	img.button88 {
		image-rendering: pixelated !important;
		width: 88px !important;
		height: 31px !important;
		border: none !important;
		/*border: 1px solid transparent;*/
	}

	a.button88 {
		text-decoration: none !important;
	}

	img.button88:hover {
		/*border-color: white;*/
	}

	div.lastmoddate {
		font-size: 10px;
	}

	ul {
		margin-top: 0;
	}

	.pulsate-opacity {
		animation: pulsate-opacity 2.5s infinite alternate;
	}

	.pulsate-opacity:hover {
		animation: none;
		opacity: 1.0;
	}

	a.nohoverbg:hover {
		background: initial;
	}

	.specialhoverbg:hover: {
		
	}

	span.hoverhint {
		text-decoration: underline;
		text-decoration-color: var(--quote-text);
		text-decoration-style: dotted;
		cursor: help;
	}

	span.errpage-refresh {
		font-style: italic;
		font-size: 10pt;
	}

@keyframes pulsate-opacity {
	100% {
		opacity: 1.0;
	}
	0% {
		opacity: 0.4;
	}
}

/* sidebar|content template */
	.page-container {
		max-width: 760px;
		margin: 0 auto;
		padding: 0 5px;
	}

	.page-sidebar {
		position: sticky;
		/*top: 50px;*/
		width: 30%;
		float: left;
		flex: 1;
		border-radius: 10px;
		border: 1px solid;
		margin-bottom: 12px;
		background-size: cover;
		background-position: center;

		padding-bottom: 4px;
		
		border-color: var(--page-sidebar-border);
		background-color: var(--page-sidebar-bg);
	}

	.page-sidebar .headerbox {
		padding: 4px 10px;
		/*font-family: "IBM Plex Sans";*/
		text-align: center;
		margin-top: 10px;
	}

	.page-sidebar .headerbox .site-title {
		color: var(--body-text);
	}

	.page-sidebar .headerbox p.caption {
		padding-bottom: 4px;
		margin: 0;
		font-size: 10pt;
		/*font-family: "IBM Plex Sans";*/
		color: var(--sb-logocaption-color);
	}

	.page-sidebar .headerbox img.dp {
		width: 96px;
		height: 96px;

		border-radius: 48px;
		object-fit: cover;
	}

	.page-sidebar .headerbox img.dp img.bordered {
		border: 1px #cccccc solid;
	}

	.page-sidebar .taglinebox {
		padding: 4px 10px;
		border: 1px solid;

		border-color: var(--sb-taglinebox-border);
		background: var(--sb-taglinebox-bg);
		color: var(--sb-taglinebox-fg);
	}

	.page-sidebar .navbox {
		padding: 4px 10px;
		border: 1px solid;

		border-color: var(--sb-navbox-border);
		background-color: var(--sb-navbox-bg);
		color: var(--sb-navbox-fg);
	}

	.page-sidebar .navbox a {
		display: block;
		padding: 10px 12px;
		color:  var(--sb-navbox-linktext);
	}

	.page-sidebar .navbox a.withimage {
		display: flex;
		width: 100%;
		text-align: left;
	}

	.page-sidebar .navbox a.withimage img {
		width: 24px;
		height: 24px;
		margin-right: 1em;
		border-radius: 4px;
	}

	.page-sidebar .navbox a.withimage span {
		padding-top: 2px;
	}

	.page-sidebar .navbox a:hover {
		background: var(--sb-navbox-linkhoverbg);
		color: var(--sb-navbox-linkhoverfg);
		border-radius: 10px;
	}

	.page-sidebar .navbox a.normallink {
		padding: unset;
		display: unset;
		color: var(--link-text);
		border-radius: unset;
	}

	.page-sidebar .navbox a.normallink:hover {
		color: var(--link-hover-fg);
		text-decoration: none;
		background: var(--link-hover-bg);
	}

	.page-sidebar hr {
		border: solid 1px var(--sb-navbox-hr);
	}

	.page-content {
		float: left;
		margin: 0;
		padding-left: 10px;
		width: 70%;
		/*margin-top: -5px;*/
	}

	.page-sidebar .mobile-collapsable-control {
		display: none;
	}

	.page-sidebar .mobile-collapsable {

	}

	.page-sidebar .footer {
		color: var(--sb-footer-fg);
    	line-height: initial;
    	padding: 0 10px;
    	font-size: 12px;
	}

	.page-sidebar .navbox img.menuicon {
		display: inline;
		vertical-align: middle;
		width: 12pt;
	}

	/* navbox show/hidhe animation */
	.page-sidebar .mobile-collapsable.show {
		visibility: unset;
		height: initial;
		opacity: unset;
	}

	/* large screens */
	@media only screen and (min-width: 1000px) {
		.page-container {
			max-width: 1000px;
		}

		.page-sidebar {
			width: 25%;
		}
	}

	/* sidebar|content - mobile formatting rules */
	@media only screen and (max-width: 760px) {
		.page-sidebar {
			float: none;
			width: 100%;
			padding: 2px;
		}

		.page-content {
			float: none;
			width: 100%;
			padding: 2px;
		}
		
		.page-sidebar .mobile-collapsable-control {
			display: block;
		}

		.page-sidebar .mobile-collapsable {
			transition: all 0.33s;
		}

		.page-sidebar .mobile-collapsable {
			/*display: none;*/
			visibility: hidden;
			height: 0;
			opacity: 0;
		}
	}

/* two column containers and content */
	div.twocol-container {
		max-width: 100%;
		margin: 0 auto;
		padding: 0 0px;
	}

	div.twocol-container.single {
		max-width: 100%;
		margin: 0 auto;
		padding: 0 0px;

		border-style: solid;
		border-width: 1px;
		/*border-top: 4px solid;*/
		/*border-bottom: 4px solid;*/
		border-radius: 10px;
		padding-top: 5px;
		/*padding-left: 10px;
		padding-right: 10px;*/
		padding-bottom: 5px;
		margin-bottom: 20px; /*6px;*/

		border-color: var(--container-border);
		background: var(--container-bg);

		margin-top: 5px;
		display: flex;
	}

	div.twocol-container.extheader {
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}

	div.twocol-column {
		width: 50%;

		float: left;
		flex: 1;

		margin-bottom: 12px;
	}

	div.twocol-container.single div.twocol-column {
		padding-left: 10px;
		padding-right: 10px;
	}

	div.twocol-column.padright {
		padding-right: 10px;
	}

	div.twocol-column.padleft {
		padding-left: 10px;
	}

	@media only screen and (max-width: 760px) {
		div.twocol-column {
			float: none;
			width: 100%;
			padding: 2px;
		}

		div.twocol-container.single {
			display: block;
		}
	}

/* sidebar|content - content boxes */
	.container {
		border-style: solid;
		border-width: 1px;
		/*border-top: 4px solid;*/
		/*border-bottom: 4px solid;*/
		border-radius: 10px;
		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;
		margin-bottom: 20px; /*6px;*/

		border-color: var(--container-border);
		background: var(--container-bg);

		margin-top: 5px;
		display: flex;
	}

	.container.highlight {
		border-color: var(--container-hborder);
		border-top-width: 4px;
	}

	.container.extheader {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.headerbar {
		background: var(--container-headerbar-bg);
		/*font-weight: bold;*/
		font-weight: 300;
		font-size: 12pt;
		/*text-align: center;*/
		color: var(--container-headerbar-fg);

		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-color: var(--container-headerbar-border);
		border-top: 1px solid var(--container-headerbar-border-top);

		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;

		margin-bottom: -5px;
	}

	.headerbar img {
		width: 16px;
		vertical-align: middle;
		/*margin-right: -16px;*/
		position: relative;
		/*left: -16px;*/
		top: 2px;
		float: left;
	}

	.headerbar .text {
		position: relative;
		left: 18px;
	}

	.headerbar .text.centered {
		display: block;
		position: unset;
		left: unset;
		text-align: center;
	}

	.headerbar .text.nopad {
		/*position: unset;*/
		left: unset;
	}

	.headerbar .text.iconfix {
		position: relative;
		left: -8px;
	}

	.headerbar.highlight {
		border-color: var(--container-headerbar-hborder);
		background: var(--container-headerbar-hbg);
		color: var(--container-headerbar-hfg);
		border-top-color: var(--container-headerbar-hborder-top);
	}

	.container hr {
		border-style: solid;
		border-color: var(--container-hr);
	}

	.container hr.dotted {
		border-style: dotted;
		margin-top: 10px;
	}

	.container .icon {
		float: left;
		padding-right: 8px;
	}

	.container .icon img {
		border-radius: 4px;
		width: 32px;
		height: 32px;

		object-fit: cover;
	}

	.container .icon img.rounded {
		border-radius: 16px;
	}

	.container .icon img.contained {
		object-fit: contain;
	}

	.container .content, div.twocol-container.single div.twocol-column .content {
		flex: 1;
		/*margin-left: 10px;*/
		font-size: 13px;
	}

	.container .content .header, div.twocol-container.single div.twocol-column .content .header {
		font-weight: bold;
	}

	.container .content .body, div.twocol-container.single div.twocol-column .content .body {
		padding-top: 6px;
		font-size: 10pt;
		word-break: break-word;
	}

	.container .content .body .section-header,
	div.twocol-container.single div.twocol-column .content .body .section-header {
		font-size: 16pt;
	}

	.container .content .body .section-header-small,
	div.twocol-container.single div.twocol-column .content .body .section-header-small {
		font-size: 14pt;
	}

	.body.centered {
		text-align: center;
	}

	.container .content .body span.quote-text, div.twocol-container.single div.twocol-column .content .body span.quote-text {
		display: block;
		color: var(--quote-text);
	}

	.container .content .body hr, div.twocol-container.single div.twocol-column .content .body hr {
		border-style: solid;
		border-color: var(--container-body-hr);
		/*margin-top: 10px;*/
		margin-bottom: 0;
	}

	.container .content .body img, div.twocol-container.single div.twocol-column .content .body img {
		margin-top: 8px;
		width: 100%;
		max-height: 300px;

		object-fit: contain;
		object-position: left;
	}

	.container .content .body img:hover,
	.container .content .body a.post-image:hover,
	div.twocol-container.single div.twocol-column .content .body img:hover,
	div.twocol-container.single div.twocol-column .content .body a.post-image:hover {
		background-color: unset;
	}

	.faq-question {

	}

	.faq-answer {
		display: block;
		padding: 4px 4px;
		border: 1px dotted var(--container-body-hr);
		background: var(--container-headerbar-bg);
	}

	.faq-answer.hidden {
		display: none;
	}

/* side-by-side containers */
	.hp-signup-left {
		float: left;
		width: 42%;
	}

	.hp-signup-right {
		float: right;
		width: 55%;
	}

	.hp-signup-right-mobile {
		display: none;
		width: 100%;
	}

	@media only screen and (max-width: 760px) {
		.hp-signup-left, .hp-signup-right {
			float: none;
			width: 100%;
		}

		.hp-signup-right {
			display: none;
		}

		.hp-signup-right-mobile {
			display: block;
		}
	}

/* template classes */
	
	div.footer {
		color: var(--sb-footer-fg);
		font-size: 12px;
	}

	.alertbox {
		border-style: solid;
		border-width: 1px;
		border-top: 4px solid;
		border-bottom: 4px solid;
		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;
	
		border-color: var(--alertbox-border);
		color: var(--alertbox-fg);
		background-color: var(--alertbox-bg);
	}

	.warningbox {
		border-style: solid;
		border-width: 1px;
		border-top: 4px solid;
		border-bottom: 4px solid;
		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;

		border-color: var(--warningbox-border);
		color: var(--warningbox-fg);
		background-color: var(--warningbox-bg);
	}

/* modaldialog theming */
	/*located in ui.css*/