/* constants */
:root {
	--blue: #8080ff;
	--bluish: #8f8fff; /* 90 percent of blue */
	--bluer: #3030ff; /* 30 percent of blue */
	--pale: #33a2ff; /* 80 percent of dark */
	--shade: slategrey;
	--white: white;
	--gold: #d4af37;
	--grey: #606060;
	--greenie: #f8fff8;
	--rosie: #fff8f8;

	--wmax-wide: 960px;
	--wmax-normal: 880px;
}

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body {
	font-family: arial, helvetica;
	font-size: 15px;
	-webkit-text-size-adjust: none;
	line-height: 1.4;
	color: var(--grey);
	background-color: #f0f0f0;
}

a, a:hover {text-decoration: none; color: var(--blue);}
a:link, a:visited, a:active {text-decoration: underline;}
a:link:hover, a:visited:hover, a:link:active:hover {color: var(--pale);}

a.plain:link, a.plain:visited, a.plain:active {text-decoration: none;}


ul {
	padding: 0px 1em;
}

input, textarea {
	font-family: inherit;
	font-size: inherit;
	padding: 2px;
}

select {
	font-family: inherit;
	font-size: inherit;	
}

#content {
	position: relative;
	width: var(--wmax-wide);
	background-color: white;
	padding: 0px 10px;
	margin: 0px auto;
}

header {
	/*font-size: 14px;*/
}

header nav {
	font-size: 110%;
}

header, main, footer {
	margin: 0px auto;
}

header {
	/*max-width: var(--wmax-wide); */
	width: 100%;
	display: flex;
	border-bottom: 2px solid var(--blue);
	padding-top: 6px;
	padding-bottom: 6px;
	margin-bottom: 20px;
}

header nav {
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: right;
}

main {
	/*max-width: var(--wmax-normal);*/
	position: relative;
	width: 100%;
	font-size: 110%;
	/*margin-bottom: 20px;*/
}

article section {
	padding-bottom: 20px;
}

article section:not(:last-of-type) {
	border-bottom: 1px solid silver;
	margin-bottom: 20px;
}

section.duplex {
	display: flex;
}

section.duplex summary {
	flex-grow: 1;
}

section.duplex figure {
	width: 400px;
	margin-left: 20px;
}

main h2 {
	font-size: 125%;
	margin: 1em 0px;
}

main h3 {
	font-size: 110%;
	margin: 1em 0px;
}

section h2 {
	font-weight: bold;
	color: var(--gold);
	text-align: left;
text-transform: uppercase;
}

#catalog h2 {
	margin-bottom: 6px;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

footer {
	/*max-width: var(--wmax-wide);*/
	position: relative;
	width: calc(100% + 20px);
	color: var(--white);
	background-color: var(--shade);
	padding: 10px 10px;
	margin-left: -10px;
}

footer summary {
	display: flex;
}

footer nav {
	display: flex;
	flex-grow: 1;
	margin-left: 80px;
}

footer nav ul {
	margin-right: 60px;
}

footer nav a {
	color: white !important;
	font-weight: bold;
	padding: 2px;
}

footer nav a:link:hover, footer nav a:visited:hover {
	color: gainsboro !important;
}

p, dl, ul {
	margin-bottom: 10px;
}

dl {
	margin-left: 2em;
}

dt {
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 8px;
}

dd {
	margin-bottom: 10px;
}

hr {
	border-top: 1px solid var(--grey);
	border-bottom: none;
	margin: 0.4em 0px;
}

/* utility classes */

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.right {
	text-align: right;
}

.centered {
	text-align: center;
}

.centering {
	justify-content: center;
}

.relative {
	position: relative;
}

.lfloat {
	float: left;
}

.rfloat {
	float: right;
}

.clear {
	clear: both;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.fullwidth {
	width: 100%;
}

.filler {
	flex-grow: 1;
}

.flex {
	display: flex;
}

.hidden {
	display: none;
}

.inverse {
	color: var(--white);
	background-color: var(--blue);
}

.red {
	color: red !important;
}

.crimson {
	color: crimson !important;
}

.gold {
	color: var(--gold) !important;
}

.smaller {
	font-size: 90%;
}

.petite {
	font-size: 85%;
}

.larger {
	font-size: 110%;
}

.notrans {
	transition: none !important;
}


nav {
}

nav .links {
	display: flex;
}

nav a {
	text-decoration: none !important;
}

header nav a {
	display: inline-block;
	align-self: flex-end;
	margin-left: 1.5em;
}

header nav a:not([href]) {
	color: var(--bluer);
	text-decoration: underline crimson 15% !important;
	text-underline-offset: 30%;
}

header nav .links a:first-child {
	margin-left: 0px;
}

button {
	font-family: arial, helvetica;
	font-size: 15px;
	font-weight: bold;
	color: white;
	background: var(--blue);
	border: none;
	border-radius: 6px;
	padding: 4px 8px;
}

button[disabled] {
	background: silver;
}

button:hover:not([disabled]) {
	cursor: pointer;
	background-color: var(--bluish);
}

button.order {
	position: absolute;
	bottom: 0px;
	padding: 10px 16px;
}

/*
header nav a.button {
	padding: 4px 9px;
	margin-left: 1.5em;
}

header nav a.button {
	margin-left: 5px;
	margin-right: 0px;
}

header nav .buttons {
	margin-left: 40px;
}

.buttons a.button {
	margin-left: 0px;
	margin-right: 5px;
}

a.button {
	display: inline-block;
	cursor: pointer;
	padding: 9px 19px;
	border: 1px solid var(--blue);
	border-radius: 10px;
	margin: 10px;
}

a.button, a.button:link, a.button:visited, a.button:active {
	text-decoration: none;
	color: var(--white);
	background-color: var(--blue);
}

a.button:hover {
	background-color: var(--pale);
}

a.button.bleached, a.button.bleached:link, a.button.bleached:visited, a.button.bleached:active {
	color: var(--blue);
	background-color: var(--white);
}
*/

img.logo {
	display: block;
}

.contacts {
	white-space: nowrap;
}

.attention {
	position: relative;
	display: none; /* initially hidden */
	color: white;
	background-color: crimson !important;
	background: url("/img/attention.png") no-repeat 10px center;
	margin-bottom: 20px;
}

body.processed .attention {
	display: block;
}

.attention .notice {
	text-align: center;
	margin: 0px 36px;
	padding: 6px 0px;
}

.attention img.button, .title img.button {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
}

img.button {
	display: block;
	cursor: pointer;
	height: 24px;
}

img.button:hover {
	opacity: 0.9;
}

.slideshow {
	width: 600px;
	text-align: center;
	margin: 10px auto;
	white-space: nowrap;
}

.slideview {
	position: relative;
	width: 100%;
	overflow-x: hidden;
}

.slideshow .butpause {
	position: absolute;
	display: block;
	width: 128px;
	height: 128px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 1s;
	background: white;
	border 8px solid white;
	border-radius: 50%;
}

.slideview:hover .butpause {
	opacity: 0.6;
}

.slider {
	width: 600px;
	font-size: 0px; /* remove whitespace gaps between pictures */
	transition: margin-left ease-in-out 1s;
}

.slider img {
	display: inline-block;
}


.slideshow .dotter {
}

.slideshow .dotter span {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: white;
	transition: background ease-in-out 1s;
	margin: 8px;
	border: 2px solid var(--blue);
	border-radius: 50%;
}

.slideshow .dotter span.current {
	background: var(--blue)
}

.slideshow.paused .dotter span.current {
	border-radius: 0px;
}

/* catalog */
#catalog .items table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

#catalog .items table td {
	padding-left: 6px;
	border: 1px solid lightgrey;
}

#catalog .items table img {
	display: block;
	width: 100px;
	height: 100px;
	cursor: zoom-in;
	margin: 0px auto;
	border-radius: 8px;
}

.items table img:hover, .items table img.zoomed {
	box-shadow: 0px 0px 10px var(--blue);
}

.bundles {
	margin-bottom: 24px;
}

.bundle {
	display: flex;
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid lightgrey;
}

.bundle h2 {
	font-size: 110%;
	color: inherit;
	text-transform: inherit;
}

.bundle img {
	display: block;
	width: 160px;
	cursor: zoom-in;
	margin-right: 10px;
	border-radius: 10px;
}

.bundle img:hover, .bundle img.zoomed {
	box-shadow: 0px 0px 10px var(--blue);
}

.bundle .detail {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	white-space: nowrap;
}

.bundle .detail table {
}

.bundle table td {
	padding-right: 16px;
}

.bundle .plus {
	font-size: 6em;
	color: var(--blue);
	align-self: center;
	padding: 10px;
}

.zoom {
	position: absolute;
	background: white;
}

.zoom img {
	width: 500px;
	height: 500px;
	outline: 4px solid var(--gold);
	border-radius: 10px;
}

.settings {
	position: absolute;
	right: 0px;
	bottom: 100%;
}

.popup {
	border: 1px solid silver;
	color: var(--grey);
	background: white;
}

.popup .title {
	color: white;
	background: var(--shade);
	font-weight: bold;
	text-align: center;
	padding: 6px;
}

.popup .pane {
	padding: 6px;
}

.message {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	color: white;
	text-align: center;
	background: darkslategrey;
	padding: 20px;
	border-radius: 6px;
	box-shadow: 0px 0px 12px darkslategrey;
	opacity: 1;
	-webkit-transition: opacity 500ms linear;
	transition: opacity 500ms linear;
}

#order {
	position: fixed;
	top: 100px; /*50%*/;
	left: 50%;
	transform: translate(-50%, -0%);
	width: 360px;
	background: ghostwhite;
	border: 2px solid var(--blue);
	border-radius: 10px;
	box-shadow: 0px 0px 12px grey;
}

#order.moved {
	transform: none;
}

#order .title {
	position: relative;
	color: white;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	cursor: move;
	background: var(--blue);
	padding: 4px;
}

#order dl {
	margin-left: 0px;
	padding: 10px 10px 0px 10px;
}

#order dt {
	font-size: 100%;
	font-weight: normal;
	margin-bottom: 4px;
}

#order label {
	display: block;
	font-size: 80%;
	color: var(--bluer);
	margin-bottom: 4px;
}

#order input {
	width: 100%;
}

#order .valid  {
	border-color: mediumseagreen !important;
	background: var(--greenie);
}

#order .invalid {
	border-color: red !important;
	background: var(--rosie);
}

#order .butpanel button {
	font-size: 20px;
}

#order .dates {
	display: flex;
	justify-content: space-between;
}

#order .dates input {
	width: 7em;
}

#order .dates span {
	position: relative;
	display: inline-block;
}

#order textarea {
	display: block;
	width: 100%;
	min-height: 120px;
	resize: none;
}

#order .butpanel {
	text-align: center;
	padding: 12px;
	border-top: 1px solid silver;
}

#calendarbox {
	position: absolute;
	top: 100%;
	border: 1px solid var(--grey);
}

#toc a {
	display: block;
}