html { scroll-behavior: smooth; }

body {
	margin: 24px;
	background: #f7f5e5 url("alu.jpg") repeat fixed;
	font: normal 24px Veranda; color: #000000;
}

a.idx, div.dropdown {
	color: #ffffff; padding: 2px 6px;
	border-radius: 8px;
}

a.idx {
	text-align: center; text-decoration: none;
	background-image: linear-gradient(#880088, #440044);
}

a.idx:hover {
	background-image: linear-gradient(#005500, #00aa00);
	background-color: #009900;	/* MSIE */
}
a.mlz { margin-left: 0; }

div.dropdown {
	display: inline-block; position: relative;
	background-image: linear-gradient(#0000ff, #440044);
	margin: 0 8px;
}

div.pagemenu {
	display: none; z-index: 1; border-radius: 8px; padding: 0px 8px 4px 8px;
	background-image: linear-gradient(#0000ff, 33%, #440044);
	white-space: nowrap; word-spacing: 3px;
}

div.pagemenu a {
	font-size: 18px; color: #ffffff;
	text-decoration: none; padding: 0 4px;
}
div.pagemenu a:hover {
	background-image: linear-gradient(-90deg, #003300, #009900);
}

div.dropdown:hover div.pagemenu { display: block; }

div.pmup   { position: absolute; bottom: 32px; left: 60px; }
div.pmdown { position: absolute; left: 70px; }

span.reduce { font-size: 90%; }

table.dtab { margin-left: 32px; border-collapse: collapse; }
table.dtab td { font-size: 24px; }
table.dtab td:first-child { padding-right: 18px; }

.bbl { color: #0000aa; }
.grn { color: #006600; font-weight: bold; }
.ppl { color: #700070; font-weight: bold; }
.brn { color: #863c00; font-weight: bold; }

div.hdr, div.hdrbb {
	display: inline-block; font-weight: bold; color: #3300cc;
}

div.hdrbb {
	margin-bottom: 8px; border-bottom: 4px double #700070;
	border-radius: 8px; word-spacing: 2px;
}

ul { list-style-type: none; margin: 0; padding: 0; }
ul.clist li:before { content: "\273a  "; }
ul.dlist li:before { content: "\25c8  "; color: #660000; }
ul.slist li:before { content: "\2756  "; color: #005500; }
/* "\2746  "; */

.fl { float: left; }
.fr { float: right; }
span.mml { margin-left: 12px; color: #000066; }
span.ihdr { font-weight: bold; font-variant: small-caps; color: #3300cc; }
div.ml { margin-left: 32px; }
div.doc { margin-left: 32px; font-family: "Courier New"; }
span.name::after { content: "cstartup"; }
span.ttu { text-transform: uppercase; }
.nw { white-space: nowrap; }
br.cb { clear: both; }
hr.qtr { width: 25%; text-align: left; margin: 0 auto 0 0; }
hr.mtb { margin: 24px 0; }

span.vsc { font-variant: small-caps; }
span.softul { border-bottom: 2px dotted #660066; }
span.uc { text-transform: uppercase; }
div.bdesc {
	color: #cfcfcf; font-size: 28px; font-variant: small-caps;
	background-image: linear-gradient(90deg, #0000cc, 33%, #660066);
	display: inline-block; box-sizing: border-box;
	padding: 4px 8px; margin-bottom: 12px; border-radius: 8px;
}

/* tooltip */
span.rc {
	position: relative; border-bottom: 2px dotted #660066;
	white-space: nowrap;
}
.rc:hover .rc-files { visibility: visible; }

.rc .rc-files {
	left: -20px; bottom: 22px; position: absolute; z-index: 1;
	background-color: #660066; color: #ffffff; visibility: hidden;
	border-radius: 4px; border: 1px solid #752B00;
	font-size: 18px; padding: 4px 8px; text-align: center;
}

/* sweep right */
.swrt {
	display: inline-block; position: relative;
	transform: perspective(1px) translateZ(0);
	transition-property: color; transition-duration: 0.25s;
	padding: 0 4px; border-radius: 4px;
}

.swrt:hover { color: #cfcfcf; text-decoration: none; }

.swrt:before {
	content: ""; position: absolute; z-index: -1;
	top: 0; right: 0; bottom: 0; left: 0;
	background-image: linear-gradient(90deg, #0000ff, 20%, #660066);
	transform: scaleX(0); transform-origin: 0 50%;
	transition-property: transform; transition-duration: 0.25s;
	transition-timing-function: ease-out;
	border-radius: 4px;
}

.swrt:hover:before { transform: scaleX(1); }

@keyframes reveal { 0% { opacity: 1; } 100% { opacity: 0; } }

div#reveal {
	margin: 0; padding: 0; width: 100%; height: 100%;
	background-color: #000000; opacity: 0;
	position: fixed; top: 0; left: 0;
	animation: reveal 1.5s;
}

div#test { display: none; }