@import "./custom.css";

browser-warning {
	opacity: 0;
}

@media screen and (min-width: 800px) {
	body {
		font-size: 3vmin;
	}

	td {
		font-size: 3vmin;
	}
	tr {
		font-size: 3vmin;
	}
	
	.logo img {
		height: 6em;
		width: auto;
	}
}

@media screen and (max-width: 800px) {
	body {
		font-size: calc(3 * (0.5vw + 0.5vh));
	}
	td {
		font-size: calc(3 * (0.5vw + 0.5vh));
	}
	tr {
		font-size: calc(3 * (0.5vw + 0.5vh));
	}
}

body {
	padding: 0px;
	margin: 0px;
	font-family: "Trebuchet MS", "Helvetica Neue", Arial, Helvetica, sans-serif;
	clear: both;
	
	background-image: var(--bgimg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.footer {
	background-color: var(--boxcolor2nd);
	width: calc(100% - 2em);
	padding: 1em;
	color: var(--txtcolor2nd);
}

#alert {
	background-color: var(--boxcolorurgent);
	width: calc(100% - 2em);
	border-radius: 1em 1em 1em 1em;
	padding: 1em;
	text-align: center;
	color: var(--txtcoloralert);
}

#notice {
	background-color: var(--boxcolornotice);
	width: calc(100% - 2em);
	border-radius: 1em 1em 1em 1em;
	padding: 1em;
	text-align: center;
	color: var(--txtcolornotice);
}

#sbs-left {
	width: calc(50% - 0.5em);
	margin-right: 0.5em;
	float: left;
}

#sbs-right {
	width: calc(50% - 0.5em);
	margin-left: 0.5em;
	float: right;
}

#tsbs {
	width: 40%;
}

#tsbs-small {
    width: 10%;
}

#end {
	clear: both;
}

.logo {
	background-color: var(--logobackdrop);
	text-align: center;
}

.primary-menu-bar {
	text-align: middle;
	align: middle;
}

.primary-menu-bar a {
	color: var(--menubartxt);
	background-color: var(--menubarbkg);
	border: 1px solid var(--menubarbordclr);
	padding: 1em 1em;
	margin: 0.25em 0.25em;
	cursor: pointer;
	float: left;
	text-decoration: none;
	border-radius: .25em;
	transition: background var(--menubarfadetime) ease-in;
}

.primary-menu-bar img {
	margin-left: auto;
	margin-right: auto;
	border: none;
}

.primary-menu-bar a:hover {
	background-color: var(--menubarhoverbkg);
}

.primary-menu-bar a:visited {
	color: var(--menubarvisitedtxt) ;
}

#main-body {
	background-color: var(--boxcolor);
	padding: 1em;
	color: var(--txtcolormain);
}

a {
	color: var(--linkcolor);
	text-decoration: underline;
}

table {
	color: var(--tableoutlinecolor);
	width: 100%;
}

td {
	border: 1em solid var(--tableseparatorcolor);
}

img {
	width: 100%;
	height: auto;
}

#pic {
	border-radius: 1em;
	box-shadow: 1em 1em rgba(0, 0, 0, 0.2);
}

#toc {
	background-color: var(--boxcolortoc);
	width: calc(100% - 2em);
	padding: 1em;
	color: var(--txtcolortoc);
}