/* Devious Fish Web Design - Header layout
 * Copyright 2007-2022 Perette Barella.
 * All rights reserved.
*/

BODY {
	background: #CDF;
}

ACRONYM {
	border-bottom: thin dotted blue;
}

/* Classes for header at top of page */
HEADER {
	display: flex;
	flex-flow: row nowrap:
	margin-bottom: 1ex;
}
IMG.headerlogo {
	border: 0;
}
.stackoverflow {
	display: block;
	margin-left: auto;
	border: 0;
}
@media (max-width: 75ex) {
	.stackoverflow {
		display: none;
	}
}
@media handheld {
	IMG.logo {
		display: none;
	}
}
		
/* ========== Page header ========== */
DIV.pagename {
	font-family: papyrus, "Noto serif", serif;
	font-size: 180%;
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1;
}
DIV.pagename SMALL {
	font-size: 70%;
	font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
	font-weight: bold;
}

DIV.letterhead {
	text-align: right;
	float: right;
	font-family: "Arial Narrow", "Arial", sans-serif;
	margin-bottom: 1ex;
}
SPAN.principal {
	font-family: "Arial Rounded MT Bold","Arial", sans-serif;
	font-weight: bold;
}

/* ========== Navigation bar setup ========== */

@media only screen and (max-width: 480px) {
	BODY > *:first-child {
		margin-top: 3em;
	}
	#navibar {
		background: #ABF;
	}
}

/* ========== Navigation menu setup ========== */
UL#navigation {
	background: none;
}

UL#navigation > LI.text {
	font-style: normal;
	text-align: left;
}
UL#navigationbar > LI > UL {
	white-space: nowrap;
}



/* ========== Shared Navigation color setup ========== */
UL#navigation > LI.group,
UL#navigation > LI > A {
	background: #ABF;
}


/* ============== Social media crap ========== */
UL#navigationbar > LI.social {
        margin-left: auto;
        border: none;
        margin: 0 1ex;
}
UL#navigationbar > LI.social > A {
        display:inline;
        padding: 0;
        margin: 0;
}
UL#navigationbar > LI.social IMG {
	display: inline-grid;
	align-items: center;
        width:26px;
}



/* ==========  ========== */
P.imagecaption {
	font-style: italic;
}
IMG.screenshot {
	min-width:350px;
	height:auto;
	border-left: thick solid transparent;
	border-bottom: thick solid transparent;
}
IMG.screenshot.left,
IMG.screenshot.right {
	max-width:50%;
}
DIV.dampicture {
	width:25em;
	float:right;
	border-left: thick solid transparent;
	border-bottom: thick solid transparent;
}
DIV.dampicture IMG {
	width:100%;
	height:auto;
}
ADDRESS {
	padding-left: 2em;
}
P.platform {
	margin-top: 0;
	font-style: italic;
}

P.legal, OL.legal {
	font-size: 80%;
}
P.legal STRONG {
	text-transform: uppercase;
	font-weight: normal;
}

OL.legal LI {
	font-weight: bold;
	margin-bottom: 0;
	text-transform: uppercase;
}
OL.legal LI P {
	margin-top: 0;
	font-weight: normal;
}
OL.legal LI * {
	text-transform: none;
}
OL.legal OL {
	list-style-type: none;
	counter-reset: subitem;
}
OL.legal OL LI:before {
	content: "(" counter(subitem, lower-alpha) ") ";
	counter-increment: subitem;
}

DT {
	font-weight: bold;
}