body {
margin:0;
text-align:center;
font-family: verdana, arial, sans-serif;
background:#ffffff;
}

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

* {box-sizing: border-box;}

#outer {
	width:100%;
	overflow-y:auto;
	overflow-x:hidden;
	text-align:center;
	padding:0em;
	margin:0;
	}

a:link {color: #0000cc;}
a:visited {color: #0000cc;}
a:hover {color: #ff3300;}
a:active {color: #ff3300;}

br.clear {
width:95%;
height:0.1em;
clear:both;
padding:0;
margin:0;
background:#00ccee;
}


h1,h2,h3,h4,h5 {
font-weight:bold;
margin:0.2em auto 0.2em auto;
text-align:center;
}

h1 {
font-size:1.2em;
}

h2 {
font-size:1.0em;
}

h3 {
font-size:0.8em;
}

h4 {
font-size:0.7em;
}

h5 {font-size:0.5em;}

p {
margin:0em;
padding:0em;
}

#header {float:left;width:100%;margin:0em auto 0.3em auto;padding:0;}
#headtop{width:100%;margin:0;padding:0;}
#headbot{float:left;width:100%;margin:0;padding:0;}

#headbotleft {width:20%;float:left;padding:0 0 0 5%;margin:0;background-color:#ffffff;}
#headbotmid {width:60%;float:left;font-weight:bold;margin:0;padding:0;background-color:#ffffff;}
#headbotright {width:20%;float:right;padding:0.5em 0 0 0;margin:0;background-color:#ffffff;}

#headbotmid h1 {font-size:1.0em;margin:0.2em auto 0em auto;}
#headbotmid h2 {font-size:0.7em;margin:0em auto 0em auto;}
#headbotmid h3 {font-size:0.6em;margin:0em auto 0em auto;}
#headbotmid h4 {font-size:0.6em;margin:0em auto 0em auto;}

.linkbut {text-align:center;width:90%;font-size:0.8em;margin:0em auto;padding:0.3em 0.2em 0.3em 0.2em;color:#0000cc;font-weight:bold;background-color:#ffffff;border:0.2em solid #008035;border-radius:0.5em;}
.linkbut a {text-decoration:none;color:#3c0084;font-size:0.8em;}

#areas1 {width:100%;float:left;padding:0;font-size:0.7em;margin:0;background-color:#ffffff;}
#areas2 {width:100%;float:left;padding:0;font-size:0.7em;background-color:#ffffff;margin:0;}

#contact {display:block;margin:0 0 0 0;padding:0em;font-size:0.8em;background-color:#ffffff;}
#about {display:block;margin:0 0 0 0;padding:0em;font-size:0.8em;background-color:#ffffff;}

#maincontent {
width:98%;
text-align:center;
padding:0;
margin:0em auto 0em auto;
border:0em solid #228b22;
border-top:0em;
}

#mainmid {
float:left;
width:100%;
font-size:0.8em;
padding:0.2em 0em 0em 0em;
margin:0;
background-color:#ffffff;
}

.introbox {width:90%;text-align:left;margin:2em auto;padding:0.3em 0.2em;border:0.2em solid #008035;border-radius:0.5em;}
.introbox p {margin-top:0.5em;}

#introholder {
float:left;
width:100%;
padding:0em;
margin:0.2em auto 0.2em auto;
text-align:center;
background-color:#ffffff;
}

#intro {
clear:both;
width:100%;
font-size:0.8em;
text-align:center;
color:#3c0084;
font-weight:bold;
background-color:#ffffff;
margin:0em auto 0em auto;
padding:0em;
}

#intro p{margin:0.2em;}

#mainnav {
clear:both;
width:95%;
margin:0em auto 0em auto;
border:0em solid #3c0084;
border-radius:0.5em;
}

.section {clear:both;width:100%;margin:0em;padding:0em;font-weight:bold;line-height:1.2;}
.section p{margin:0;padding:0;color:#3c0084;}
.section a{text-decoration:none;color:#3c0084;}
.left, .mid, .right {position:relative;text-align:center;width:33%;float:left;margin:0em;}
.lefttext, .midtext, .righttext {width:90%;padding:0;margin:0;color:#3c0084;position:absolute;left:50%;top:50%;transform:translate(-50%,-55%);}

#pagefooter {
width:95%;
font-size:0.8em;
margin:0em auto 0em auto;
}
#footcontact {
clear:both;float:left;width:35%;font-size:1em;
}
#footcontact a:link {
font-size:1.3em;
}
#footphone {
float:right;width:60%;
}

/* tiny mobile */
@media only screen
and (max-width: 379px)
and (orientation:portrait)
{
body { font-size:80%;}

}


/* mobile */
@media only screen
and (min-width: 380px)
and (max-width: 480px)
and (orientation:portrait)
{
body { font-size:100%;}

}

/* mobile landscape */
@media only screen
and (min-width: 481px)
and (max-width: 768px)
and (orientation:landscape)
{
body { font-size:130%;}


}

/* ipads etc */
@media only screen
and (min-width: 481px)
and (max-width: 760px)
and (orientation:portrait)
{
body { font-size:130%;}

#titleright {padding-top:0em;}
}


/* most desktops */
@media only screen
and (min-width: 761px)
and (max-width: 1024px)
{
body { font-size:140%;}
#intro {font-size:1em;} 
#headbotmid {font-size:1.2em;}
.linkbut {width:60%;}
#contact {margin-top:0.5em;}
.section {font-size:1.2em;}
#pagefooter {width:80%;}
#footcontact {float:left;width:40%;text-align:right;margin:0;}
#footcontact a:link {font-size:1.5em;}
#footphone {float:left;width:55%;margin:0;}
}

/* else */
@media only screen
and (min-width: 1025px)
{
body { font-size:150%;}
#headbotmid {font-size:1.4em;margin-top:0.5em;}
#areas1 {width:50%;float:left;padding:0;margin:0;text-align:right;}
#areas2 {width:50%;display:inline-block;padding:0;margin:0;text-align:left;}
#intro {font-size:1em;} 
.linkbut {width:60%;}
#contact {margin-top:0.5em;}

.section {font-size:1.5em;}
.section img{max-width:80%;}

#pagefooter {width:80%;}
#footcontact {float:left;width:40%;text-align:right;margin:0;}
#footcontact a:link {font-size:1.5em;}
#footphone {float:left;width:55%;margin:0;}
}