body, html {
margin: 0;
padding: 0;
background-color: white;
max-width: 100%;
min-height: 100%;
height: 100%;
}

ol#myList_
{
list-style-type: none;
color: #FFFFFF;
font-size: 1.16em;
font-family: Arial;
margin-left: 10%;
margin-right: 10%; 
}	

ol#myList
{
list-style-type: upper-roman;
color: #FFFFFF;
font-size: 1.16em;
font-family: Arial;
margin-left: 10%;
margin-right: 10%; 
}	

p{margin-left: 10%; margin-right: 10%; font-size: 14; font-family: 'Lucida Sans Unicode'; color: #000000; text-align: left;}

H1{margin: 5%; font-size: 17; font-family: 'Lucida Sans Unicode'; color: #000000; font-style: regular; text-align: left;}

H2{font-size: 20; font-family: 'Lucida Sans Unicode'; color: #000000; font-style: regular; text-align: left;}

.bullet {margin-left: 15%; margin-right: 15%; list-style-type: disc; font-size: 14; text-align: left; font-family: 'Lucida Sans Unicode';}

.hyperlinkcolor A:link {text-decoration: underline; color: blue;}
.hyperlinkcolor A:visited {text-decoration: underline; color: blue;}
.hyperlinkcolor A:active {text-decoration: underline; color: blue;}
.hyperlinkcolor A:hover {text-decoration: underline; color: red;}

#content {
width: 100%;
margin: 0 auto;
}

#lowersection {
position: sticky;
width: 100%;
padding: 0;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
text-align: left;
height: auto;
}

.innertube {
padding: 15px;
}

#page {
	position: relative; /* Set the position property so z-index will apply */
	z-index: 20; /* Make sure this is higher than #menu */
	height: 100%;
}

#toggle-menu {
	position: absolute;
	top: -23px;
	padding: 10px;
	color: red;
	background-color: gold;
	border: 2px solid red;
	text-decoration: none;
	font-family: Arial;
}

#menu {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 135px;
	padding: 15px 25px;
	margin: 0;
	list-style: none;
	background: #333;
	z-index: 10; /* Make sure the z-index is lower than the #page */
}

#menu a {
	display: block;
	color: #FFFFFF;
	padding: 15px 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.05 );
	text-decoration: none;
	font-family: Arial;
}

/* Animations */

#page, #menu {
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

/* Hide the menu unless it's animating or visible */
.animating #menu, .menu-visible #menu {
	display: block;
}

/***
* If the animating class is present then apply
* the CSS transition to #page over 250ms.
*/
.animating #page {
	transition: transform .25s ease-in-out;
	-webkit-transition: -webkit-transform .25s ease-in-out;
}

/***
* If the left class is present then transform
* the #page element 240px to the left.
*/	
.animating.left #page {
	transform: translate3d( -240px, 0, 0 );
	-webkit-transform: translate3d( -240px, 0, 0 );
}

/***
* If the right class is present then transform
* the #page element 240px to the right.
*/
.animating.right #page {
	transform: translate3d( 240px, 0, 0 );
	-webkit-transform: translate3d( 240px, 0, 0 );
}

/***
* If the menu-visible class is present then
* shift the #page 240px from the right edge
* via position: absolute to keep it in the 
* open position. When .animating, .left and
* .right classes are not present the CSS
* transform does not apply to #page.
*/
.menu-visible #page {
	right: 240px;
}