@media (scripting: enabled) {
    div.files ul ul {
	display: none;
    }
}
@media all {
    #logo { 
	display: none;
    }
    body {
	margin: 0;
	padding: 0;
    }
    .page h1, 
    .page h2 {
	margin: 0 0 3pt 0;
    }
    div.files ul {
	padding-left: 1em;
    }
    .adobe img { 
	display: block;
	margin: 1em auto 0;
    }
    div.fyi {
	margin: 0;
    }
    object {
	display: block;
	width: 100%;
	height: 3in;
    }
    div.fyi, 
    div.pane, 
    object {
	-moz-border-radius: 3pt;
	-webkit-border-radius: 3pt;
	-ms-border-radius: 3pt;
	border-radius: 3pt;
    }
    div.page {
	border: solid 1px transparent;
    }
}
@media all and (min-width: 576px) {
    h1 { font-size: 1.6em }
    h2 { font-size: 1.2em }
    body {
	min-width: 9.5in;
    }
    div.page { 
	position: relative;
	padding: 0.5in; 
	margin: 0.25in;
    }
    div.pane,
    div.body { 
 	padding: 0;
	margin: 0;
	margin-top: 0.5in;
    }
    div.pane { 
	width: 35%;
	margin-left: 65%;
	min-width: 3in;
    }
    div.body { 
	width: 65%;
	float: left;
    }
    div.head,
    div.foot {
	padding: 0;
	margin: 0;
	clear: both;
    }
    div.main,
    div.callout, 
    div.intro {
	margin: 0.25in 0.75in 0.25in 0;
	padding: 0;
    }
    div.files, 
    div.adobe {
	margin: 0.25in;
	padding: 0;
    }
    div.adobe {
	border-top: solid 1px gray;
    }
    div.intro {
	text-align: justify;
    }
    div.files ul {
	list-style-position: outside;
	margin: 0.4em 0 1em 0;
    }
    div.files ul ul {
	padding-left: 0;
    }
    div.files ul ul>li {
	list-style-type: none;
    }
    div.files ul li {
	margin-top: 2pt;
    }
    div.files ul a {
	text-decoration: none;
    }
    div.page {
	-ms-box-shadow: 0 2px 8px rgba(0,0,0,0.8);
	-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.8);
	-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.8);
	box-shadow: 0 2px 8px rgba(0,0,0,0.8);
    }
    div.fyi {
	padding: 1em 1em 0;
    }
}
@media screen and (max-width: 576px) {
    h1 { font-size: 1.2em }
    h2 { font-size: 1.0em }
    div.page {
	margin: 0.25em; 
	padding: 0.5em; 
    }
    div.body,
    div.pane {
 	padding: 0;
	margin: 0;
	margin-top: 1em;
    }
    div.pane,
    div.fyi {
	padding: 0.5em; 
    }
    div.intro {
	text-align: left;
    }
    div.fyi {
	padding: 0.5em 0.5em 0;
    }
}
@media print {
    body { 
	background-color: transparent; 
	min-width: 0;
    }
    div.page { 
	background-color: transparent; 
	border: none;
	margin: 0;
	padding: 0;
    }
    div.page {
	-ms-box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
    }
    div.pane {
	min-width: 0;
    }
}

/* update page */
@media all {
    form ul {
	padding-left: 0;
    }
    form li, form lh {
	display: flex;
	align-items: stretch;
	position: relative;
	margin-top: 6pt;
    }
    form li > * {
	flex: none;
    }
    form textarea,
    form input[type=text] {
	flex: 1 auto;
    }
    form label {
	display: inline-block;
	width: 16em;
	font-size: 0.92em;
	text-align: right;
    }
    form li label::after {
	content: ' --';
    }
    form textarea {
	min-height: 18em;
	resize: vertical;
    }
    form label,
    form select {
	margin-right: 0.8em;
    }
    form li b {    
	padding-left: 0.5em;
    }
    form code {
	display: block;
	width: 21em;
	position: absolute;
	bottom: 0;
    }
    form code p {
	margin: 0;
	margin-top: 0.5em;
	line-height: 1.5;
	text-align: left;
    }
    form h4 {
	text-align: center;
    }
    form h4 em {
        background-color: yellow;
	font-style: normal;
	padding: 0.5em;
    }
}

/* tweaks */
@media all {
    body { font-family: 'Atkinson Hyperlegible', Helvetica, Arial, sans-serif }
    #notices div.main > h1 { font-variant: small-caps }
    #notices div.item object { margin-top: 3pt }
}
@media all and (min-width: 576px) {
    #index .callout { margin: -0.25in 0.75in 0 0 }
    #notices div.main > h1 { margin: -0.5in 0 0.25in }
}

/* some more customizing, fancy callout */
@media all_IGNORE_THIS {
    /* order is important here! */
    a, a:link, a:visited { color: navy }
    a:hover  { background-color: steelblue; color: white }
    a:active { color: white }

    div.files li  { color: firebrick }
    div.files a>i { color: black }
    /* order is important here! */
    div.files a, div.files a:link, div.files a:visited { color: navy }
    div.files a:hover  { background-color: steelblue; color: white }
    div.files a:active { color: white }
    div.files li.file a>i { font-size: 1.1em }
}
@media all and (min-width: 576px) {
/*
    .head h1 { font-size: 28pt }
    .head h2 { font-size: 14pt }
*/
    .page h5 { font-size: 12pt }

    #index .callout div.fyi {
	padding: 1em;
	background-color: ivory;
	border: 1px solid orangered;
	border-left: 12pt solid orangered;
	-ms-border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
    }
}