.menu 
	{
	color: white;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 900;
	font-size: 8pt;
	line-height: 2.4em;
	background-color: #003399;
	position: fixed;
	top: 0px;
	z-index: 10;
	width: 100%;
	}
	.menu-button {
		display: none;
	color: white;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 900;
	line-height: 2.4em;
	background-color: #003399;
		position: fixed;
		z-index: 9;
	}
/* This will  match phones and iPad (1024) */
/*
@media only screen and (max-device-width: 1024px) {
	.menu a {
		padding: 10pt;
		font-size: 20pt;
	}
	img {
		padding-top: 36pt;
	}
	p.dropcap {
		padding-top: 5em;
	}
}
*/
/* This will match tablets and cell phones (mostly). */
@media only screen and (max-device-width: 1024px) {
    /* Put your iPhone styles in here */ 
	.menu {
		display: none;
		width: auto;
		animation-name: expand;
		margin-right: 0.5em;
		animation-duration: 0.3s;
	}
	.menu a {
		padding: 10pt;
		font-size: 20pt;
		background-color: #003399;
		display: block;
	}

	.menu-button {
		display: block;
		font-size: 20pt;
	line-height: 2.4em;
		color: white;
		text-decoration: none;
		font-weight: 900;
		white-space: nowrap;
		background-color: #003399;
		z-index: 9;
		position: fixed;
	}
	.menu-button a {
		font-size: 20pt;
	color: white;
	text-decoration: none;
	font-weight: 900;
	white-space: nowrap;
	border: 1px solid orange;
	padding: 0.5em;
	}
	.menu-button a:link
	{
	color: white;
	}
	.menu-button a:visited
	{
	color: white;
	}
	.menu-button a:active
	{
	color: orange;
	}
	.menu-button a:hover
	{
	color: orange;
	}
	.menu-button a.current
	{
		color: orange;
	}
}
@keyframes expand {
	0% {width: 0; height: 0;}
	100% {width: 36em; height: auto;}
}
.menu a {
	color: white;
	text-decoration: none;
	font-weight: 900;
	white-space: nowrap;
	border: 1px solid orange;
	padding: 0.5em;
	margin-right: -0.5em;
}
	.menu a:link
	{
	color: white;
	}
	.menu a:visited
	{
	color: white;
	}
	.menu a:active
	{
	color: orange;
	}
	.menu a:hover
	{
	color: orange;
	}
	.menu a.current
	{
		color: orange;
	}
	.positioning
	{
	font-style: italic;
	font-size: 10pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	body
	{
	height: 100%;
	margin: 0 0 0 0;
	background-color: #ccffee;
	font-size: 9pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 0px;
	}
	img {
		margin-top: 36pt;
	}
	.heading
	{
	position: absolute;
	top: 3em;
	}
	a
	{
	color: #003399;
	font-size: 9pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	h1
	{
	color: #003399;
	font-size: 20pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 6px 30px 0px 0px;
	padding: 0px;
	}
	h3
	{
	color: #003399;
	font-size: 14pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 6px 30px 0px 0px;
	padding: 0px;
	}
	p
	{
	font-size: 9pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 8px;
	}
	.caption 
	{
	font-style: italic;
	font-size: 11pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 900;
	}
	.dropcap:first-letter
	{
	color: red;
	font-size: 160%;
	font-weight: 900;
	}
	p.dropcap {
	padding-top: 5em;
	}
	.portfolio
	{
	clear: none;
	float: left;
	width: 200;
	max-width: 200;
	height:255;
	max-height: 255;
	margin: 7px 0;
	text-align: center;
	font-size: 8pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	white-space: normal;
	}
	.portfolio td {
	    vertical-align: top;
	    padding-left: 1em;
	    padding-right: 1em;
	}
/*	.portfolio img {
		width: 100px;
		height: 100px;
	}*/