/* common to all screens */
body, td {font-family:Arial, Verdana, sans-serif;text-align:justify;
	background-color:#fff;color:#003;margin:0px;padding:0px;font-size:100%;}

h1 {font-size:140%;color:#009;padding:4px;}
h2 {font-size:120%;color:#009;}
:visited, :active :link{color:#00a !important }
h1, h2, h3 {text-align:center}
figure {float:right;width:30%;margin:1% 0 1% 3%}
figure img {width:96%}
figcaption {font-size:85%;line-height:100%;text-align:center}

#outer {padding:0px 5px;margin-left:auto;margin-right:auto;max-width:1200px;
}
#heading { width: 100%; height:75px;background-image: url(mffbanner.png);background-size: 100% 100%;
     background-repeat: no-repeat;padding:3%;width:94%
	 }

#heading h1 {color:#fff;background-color: #00a;width:16em;margin:auto ;}
.trans {width:15em;margin:auto;
     background-color: #ffffff;
     opacity: 0.5;
     padding:0.5em;
     filter: alpha(opacity=60); /* For IE8 and earlier */
 }

#content li {padding-bottom:10px;text-align:left;}
#content {background-color:#efffff;
	border-radius: 15px;box-shadow: 5px 5px 2px #888888;}

/* styles for screens at least 700 wide */
@media only screen and (min-device-width:701px) {
	#content{width:94%;padding:3%;line-height:150%;margin:0 }
}

@media only screen and (max-device-width: 700px) and (min-device-width:481px)  {
	#heading {height:65px}
	#heading h1 {font-size:125%}
	#content {width:94%;padding:2%}
	.trans {font-size:80%;margin-top:-5px}
	#content {width:96%;padding:2%}
}

/* narrow screens only show one column */
@media only screen and (max-device-width: 480px) {
	#outer {width:100%;font-size:100%}
	#heading {height:70px}
	#heading h1 {font-size:115%}
	#content {width:94%;padding:2%}
	.trans {font-size:80%;margin-top:-10px}
	figcaption {font-size: 80%}
	}