html
{
	scroll-padding-top: 60px;
}

body
{
	color:black;
	background-color:white;
	font: 15px "Arial";
	line-height:1.25;
	padding-bottom:100px
}

.navtop
{
	margin-bottom:2px;
	background: white;
	border-bottom:thin solid #DDD;
	width:100%;
	position:fixed;
	top:0;
	opacity:0.9;
}

.navchain
{
	font-size:75%;
}

.navchain a
{
	text-decoration:none;
}

.navbuttons
{
	margin-top:2px;
	margin-bottom:5px;
	font-size:90%;
	line-height:24px;
}

.navbottom
{
	margin-top:20px;
	margin-left:5px;
	padding-top:5px;
	border-top:thin solid #DDD;
}

.navbuttons a
{
	border-radius: 6px;
	margin:2px;
	display:inline-block;
	text-decoration:none;
	border:1px solid #DDD;
	background-color:#F8F8F8;
	padding:5px 7px 1px 7px;
}

.navbuttons a.previous::before
{
	content: url(Figures/previous.png);
	float:left;
	padding-right:5px;
}

.navbuttons a.next::after
{
	content: url(Figures/next.png);
	float:right;
	padding-left:5px;
}


a { white-space:nowrap; }

.nowrap { white-space:nowrap; }

ol
{
	padding-left:20px;
}

table
{
	border:1px solid;
	border-spacing:0;
	box-shadow:3px 3px 3px gray;
	width:90%;
	margin:auto;
}
th
{
	background-color:#EEE;
	border:1px solid;
	text-align:left;
	padding:5px;
}

td
{
	vertical-align:top;
	text-align:left;
	border:1px solid;
	padding:5px;
	overflow:auto;
}

dt
{
	font-weight:bold;
}

dd
{
	padding-bottom:1em;
}

th.header
{
	background-color:#CCC;
}

th.header2
{
	background-color:#DDD;
}

.bullets ul
{
	margin:0;
	padding-left:20px;
}

table.inset
{
	width:90%;
	box-shadow:none;
	border-spacing:0;
}

table.borderless
{
	box-shadow:none;
	border:none;
}
table.borderless td
{
	border:none;
}
table.borderless th
{
	border:none;
}

.note
{
	border:1px solid navy;
	border-radius:10px;
	box-shadow:2px 2px 2px gray;
	background:#DEF url(Figures/note.png) no-repeat 5px 7px;
	color:black;
	margin:20px 40px 20px 40px;
	padding:5px 5px 7px 30px
}

.warn
{
	border:1px solid red;
	border-radius:10px;
	box-shadow:2px 2px 2px gray;
	background:#FFF0F0 url(Figures/warn.png) no-repeat 5px 7px;
	color:black;
	margin:20px 40px 20px 40px;
	padding:5px 5px 7px 30px
}

p.in { margin-left:20px }

.location
{
	border-radius:10px;
	font-size:14px;
	border:1px solid #8F8;
	background:#EFE url(Figures/where.png) no-repeat 5px 6px;
	box-shadow:2px 2px 2px gray;
	margin:1em 0px 1em 0px;
	padding:8px 5px 7px 35px
}

.steps
{
	background:url(Figures/steps.png) no-repeat 1px 0.5em;
	margin:1em 0px 1em 0.5em;
	padding:5px 0px 1px 2em;
	border-left:solid medium lightgray;
	border-radius:1.5em;
}

.example
{
	background:url(Figures/example.png) no-repeat 1px 0.5em;
	margin:1em 0px 1em 0.5em;
	padding:5px 0px 1px 2em;
	border-left:solid medium lightgray;
	border-radius:1.5em;
}

img.screenshot
{
	margin:auto;
	display:block;
	width:auto;
	max-width:100%;
}

img.smallshot
{
	width:auto;
	min-width:200px;
	max-width:95%;
}

img.presetbtn, img.previewbtn
{
	width:18px;
	height:18px;
	vertical-align:top;
	background:#CCC url(Figures/btnback.png) repeat-x;
	border-top:solid 1px #EEE;border-left:solid 1px #EEE;
	border-right:solid 1px #888;border-bottom:solid 1px #888;
}

img.btn, img.btnlarge
{
	vertical-align:middle;
	text-align:center;
	background:#EEE url(Figures/btnback.png) repeat-x;
	border-top:solid 1px #EEE;border-left:solid 1px #EEE;
	border-right:solid 1px #888;border-bottom:solid 1px #888;
	width:20px;
	height:20px;
}
img.btnlarge
{
	width:32px;
	height:32px;
	margin:2px 10px 2px 10px;
}

.rows
{
	display:flex;
	flex-flow: row wrap;
	justify-content:space-around;
}
.column
{
	flex: 1 0 150px;
	padding:0px;
	margin:10px;
}

.blacklinktitle
{
	color:black;
	font-size:125%;
	text-decoration:none;
	border:none
}

div.backimg, div.control
{
	margin:auto;
	text-align:center;
	position:relative;
	background-repeat:no-repeat;
}

div.control
{
	background:url(Figures/control.png) no-repeat;
	width:340px;
	height:497px;
}

.center { margin:auto; text-align:center }
div.in { margin-left:20px }
div.exp { text-align:center;font-family:monospace }

var
{
	font-family:monospace;
	font-style:normal;
	background-color:#EEE;
	padding:0px 4px 0px 4px;
	border:solid 1px #CCC;
	border-radius:5px;
	white-space:nowrap;
	overflow:auto;
}

var a
{
	text-decoration:none;
}

pre
{
	margin-left:20px;
	overflow:auto;
}

h1, h2
{
	text-align:center;
	color:black;
	border-radius: 10px;
}

h1 { background-color:#8BE; margin:100px 0px 20px 0px; padding:8px 0px 8px 0px }
h2 { background-color:#ADF; margin:80px 0px 20px 0px; padding:6px 0px 6px 0px; border-left:solid 1em #8BE; }

h3, h4
{
	text-align:left;
	color:black;
	margin:60px 0px 20px 0px;
	padding:4px 5px 4px 10px;
	border-radius: 7px;
}
h3 { background-color:#D0EAFF; border-left:solid 2em #ADF; }
h4 { background-color:#E0F2FF; border-left:solid 3em #D0EAFF; }

span.stip, span.ttip
{
	font-size:10pt;position:absolute;
	background-color:rgb(255, 240, 192);
	border:solid 1px black;
	padding:1px 5px 1px 5px;
	border-radius:5px;
	box-shadow:3px 3px 3px #444;
}

span.ttip
{
	background-color: rgba(255,240,192,0.75);
}