body {
	margin: 0;
	padding: 0;
	background-color: white;
	text-align: center;
	width: 100%;
	font-family: Optima, sans-serif;
}

a:link {
	color: blue;
}

a:visited {
	color: purple;
}

header {
	text-align: center;
	padding: 0.25em 0 0.25em 0;
	background-color: white; 
	color: black; 
	border-bottom: 5px solid #055;
}

#topnav {
	position: absolute;
	top: 0; right: 0; 
	display: inline;
	border-bottom: 1px solid black;
	width: 100%; 
	background-color: red;
	padding: 0.5em;
}
	
#topnav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: inline; 
	text-align: center;
}

#topnav li {
	display: inline; 
	padding-left: 2em;
	margin-left: 2em;
}	

#topnav li a {
	color: white;
	padding: 5px;
}
	
main  { 
	padding: 1em 1em 1em 1em; 
}

ul { 
	list-style-type: none;
}

article  {
	position: absolute;
	right: 0;
	width: 70%;
	border-left: 2px solid black;
	background-color: white;
	padding: 1em 1em;
	overflow-y: scroll;
}

/* Container holding the image and the text */
.container {
    position: relative;
    text-align: center;
    color: white;
}

/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

/* Top left text */
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
	font-size: 40px;
	font-family: Palatino, 'Palatino Linotype', serif;
	color: white;
	}

/* Top right text */
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

/* Bottom right text */
.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Bottom-centered text */
.bottom-center {
	position: absolute;
	bottom: 20px;
	left: 50%;
	font-size: 38px;
	font-family: Palatino, 'Palatino Linotype', serif;
	color: white;
}
	
.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#sidenav {
	position: float;
	list-style-type: none;
	float: left;
	width: 25%;
	margin: 0;
	padding: 0;
}

#sidenav ul { 
	list-style-type: none;
	margin: 0 0 0 0;
}
 
#sidenav ul a {
	display: block;
	color: black;
	padding: 5px;
	/*padding: 12px 2px;*/
}
/*change link colour on hover 
li a:hover {
    background-color: green;
    color: white;
}*/

 
.button {
	background-color: yellow;
	color: black;
	border: 2px solid black;
	border-radius: 6px;
    padding: 16px 16px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	/*background-image: url("leafbutton.png");
	background-size: 210px 28px;
	background-repeat: no-repeat;
	background-position: bottom;
	<img src="leafleft.gif" style="height: 30px; vertical-align: middle">
	<img src="leafright.gif"style="height: 30px; vertical-align: middle" >
	backround-size: 270px 41px;*/
}

h1 {
	font-size: 32px;
	font-family: Palatino, 'Palatino Linotype', serif;
	color: blue;
}

h2 {
	font-size: 26px;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 16px;
}

h6 {
	font-size: 12px;
}

p {
	font-size: 16px;
}


footer {
	position: float;
	bottom: 0; 
	background-color: white;
	clear: left;
	text-align: left;
	padding: 0.5em 0.5em;
	font-size: 10px;
}

footer p {
	padding: 0.25em;
}