/* settings for specific pieces of the slide system */
#websocket-reconnect { position: fixed; top: 0; right: 0; z-index: 10; }
#slideshow-join { position: fixed; top: 0; right: 4px; z-index: 9; font-size: 22px; }
.slideshow-address { font: 28px monospace; }
#navbuttons { position: fixed; left:0; bottom: 100px; z-index: 9; }
#navbuttons button {
	display: block; width: 75px; height: 100px;
	margin: 16px 0px;
	background-color: #000000A0; font-size: 14pt; color: white;
	touch-action:manipulation;
}
#nav_step { width: 100px !important; height: 300px !important; }
#presenternotes { position: fixed; z-index: 9; background-color: #000000A0; right: 0; bottom: 0; font-size: 14pt; }
ol.slides { margin: 0; padding: 0; list-style: none; }

/* baseline defaults for a slide-like environment */
html { margin: 0; padding: 0; }
body { margin: 0 0 -4em 0; padding: 0; }
table { border-collapse: collapse; }
ul, ol { list-style: outside; padding: 0px 0px 0px 1em; text-align:left; }
h1 { font-size: 150%; }
h2 { font-size: 130%; margin: .5em; }
h3 { font-size: 110%; margin: .5em; }
.slide {
	position: relative;
	text-align: center;
	padding: 10px;
	margin: auto;
	width: 1004px; /* -10px -10px padding */
	min-height: 556px; /* -10px -10px padding */
	font-size: 40px;
}
.slide.dense {
	font-size: 30px;
}
.slide > h1 { margin-top: .2em; }
.slide > ul, .slide > ol { display: inline-block; max-width: 80%; }
.slide > ul > li { margin-bottom: .5em; }
.slide > figure {
	position: relative;
	/* top:50%; left:50%; transform: translate(-50%,-50%); */
	display: inline-block; max-width: 80%; width: auto;
	margin: 0; padding: 0;
}
.slide > figure > figcaption {
	position: absolute;
	bottom: 0; left:50%; transform: translate(-50%,100%);
	display: block; white-space:nowrap;
	text-align: center;
}
.slide .notes { display: none; }

/* styles for this presentation */
body { background-color: #333; color: #DDD; }
body.high-contrast { background-color: #000; color: #FFF; }
th { vertical-align: baseline; text-align: left; }
td { vertical-align: baseline; text-align: left; }
table.data {
	font-size: 90%;
	font-family: sans-serif;
	border-collapse: separate;
	border-spacing: 8px;
}
table.data th { padding: 4px 8px; background-color: #222; }
.high-contrast table.data th { background-color: #151515; }
.high-contrast table.data td { background-color: #303030; }
li { margin-bottom: .2em; }

.chat-app { font-size: 14px; }
.chatlog {
	background-color: #EEE; color: black;
	text-align: left;
	width: 775px;
	height: 400px;
	padding: 4px;
	border: 1px solid black;
	font-family: courier, sans-serif, monospace;
	white-space: pre-wrap;
	overflow-y: scroll;
}
.chatline { width: 640px; }
.chatline input { display: inline-block; background-color: #EEE; color: black; width: 80%; }
.chatline button { display: inline-block; width: 15%; }
.slide pre { text-align: left; }
.slide code { white-space: pre; font-size: 20pt; line-height:26pt; margin:4px; text-align: left; }

h1.loud { font-size: 200%; }
h1.lesson { display:inline-block; white-space: nowrap; text-align:center; font-size: 150%; }
a { text-decoration: none; color: #DEF; }
figure.lesson { width: 90%; }
figure img { height: 10em; }
.slide figure.extern { min-height: 8em; }
.slide figcaption.small { font-size: 60%; }
figure pre { margin:0px; }
.slide figure.code { text-align: left; }
.slide figure.code.wider { width: 80%; }
.slide figure.code.wider code { font-size: 35%; }
.slide ul.bare li { list-style-type: none; }
.slide ul li.bare { list-style-type: none; }
.slide ul ul { padding-top: .4em; }