@viewport {
  width: device-width;
  zoom: 1;
}

img, video, canvas {
  max-width: 100%;
}
body {
	background-image: url(images/Paper.jpg);
	margin-left: 7%;
	margin-right: 5%;
	font-family: Calibri, sans-serif;
	font-size: 16px;
	text-align: justify;
	font-style: normal;
	font-weight: normal;
	padding: 0;
	border: 0;
/*	overflow: hidden; */
	height: 100%; 
	max-height: 100%; 
}

#navcontent{
	position: absolute;
	top: 0;
	bottom: 0; 
	right: 0;
	width: 120px; /*Width of frame div*/
	height: 100%;
	overflow: hidden;
}

#navcontent a img {
	display:block;
	margin-left: auto;
	margin-right: auto;
}

#navcontent a:hover img{
/*	border: thick solid blue; */
	background-color: orange;
}

@media print {
	#navcontent { display: none; }
}

#maincontent{
	position: fixed;
	top: 0;
	left: 0;
	right: 120px; /*Set right value to #navcontent.width*/
	bottom: 0;
	overflow: auto; 
}

.innerframe {
	margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

#footer
{
}

blockquote
{
	font-family: Gill Sans, Lucida Bright, Times, Times New Roman, serif;
	font-style: italic;
	font-size: 1em;
	text-align: justify;
	margin: 1em 2em 1em 2em;
	font-weight: 100;
}

blockquote.bq {
	font-style: italic;
	font-family: Cambria, Times, Serif;
}

blockquote.bq:before {
	content: "“";
	float: left;
	font-size: 700%;
	color: silver;
	margin-top: -0.667ex;
	font-family: Serif;
	margin-left: -0.5em;
}

blockquote.bq + * {
	clear: both;
}

.mod {
	float: right;
	margin-top: 0;
	font-family: Cambria, serif;
	font-size: smaller;
}

.mod img {
	vertical-align: top;
}

h1.title {
	text-align: center
}

h1.title:before {
	content: url(images/ss-small.gif);
	float: left;
	width: 147;
	height: 86;
}

h1.title + * {
	clear: both;
}

div.links a
{
	display: block;
	text-align: center;
	font: bold 1ex sans-serif;
	padding: 5px 10px;
	margin: 0 1ex 2px 1ex;
	color: #411;
	width: 7em;
	float: right;
	text-decoration: none;
	vertical-align: middle;
	background-color: gold;
	border-color: green;
	border-style: outset;
	border-width: thick;
	line-height: 50%;
}

div.links a:hover {
	background-color: orange;
	border-style: inset;
	border-width: thick;
	color: #FFC;
	text-align: center;
	vertical-align: middle;
}

/* Remove the text "Home" button. It is replaced for @media which has small screens */
div.links.home {
	display: none;
}

.callout
{
border-right: thick purple solid;
border-left: thick purple solid;
margin-left: 2em;
padding-right: 2ex;
padding-left: 2ex;
}

div#toc
{
	display: block;
	border-top: medium black double;
	clear: both;
	font-size: 67%;
}
div#toc a {
	display: block;
}
div#toc a.toc1
{
	font-weight: bold;
}
div#toc a.toc2
{
	font-style: italic;
	padding-left: 1ex;
}
div#toc a.toc3
{
	font-size: 33%;
	font-weight: lighter;
	padding-left: 2ex;
}

dt
{
	font-style: italic;
	font-weight: bold;
}

#main {
	clear: both;
}

header
{
	display: block;
}

footer
{
	display: block;
	border-top: thin black solid;
	border-bottom: thin black solid;
}

/* Media for smaller devices */
@media screen and (max-width: 640px) {
	#navcontent {
		display: block;
		width: 100%;
		position: fixed;
		top: initial;
		bottom: 0; 
		right: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	#navcontent div.innerframe > a > img{
		display: none;
	}
	div.links.home{
		display:block;
	}
	
	div.links a{
		padding: 5px 5px;
	}
	
	div#toc {
		display:none;		/* No ToC for small screens. Some pages reenable this */
	}
	
	#maincontent {
		right: 0;
		position: fixed;
		top: 40px;
	}
}