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:90%;
height:0.1em;
clear:both;
padding:0;
margin:0;
background:#00ccee;
}

h1,h2,h3,h4 {
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;
}

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

#header {float:left;width:100%;margin:0;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 0 0 0;margin:0;background-color:#ffffff;}

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


[id^=modal] {
  display: none;
  border: 0.1em solid #ff3300;
  position: fixed;
  z-index: 1; /* Sit on top */
  top:0;
  width:90%;
  overflow:auto;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

#modal1:target {
  display: block;
  background-color: #ececec;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 0.5em;
  border: 0.1em solid #666666;
  width: 70%; /* Could be more or less, depending on screen size */
  }
#modal2:target {
  display: block;
    background-color: #ececec;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 0.5em;
    border: 0.1em solid #666666;
  width: 70%; /* Could be more or less, depending on screen size */
  }

[id^=modal] a {
  float: right;
  }

/* The Close Button */
.close {
  color: #ff3300;
  float: right;
  font-size: 2em;
  font-weight: bold;
}

/*make outer tip div universal - this contains the info symbol*/

.tipdiv {position:relative;width:2em;display:inline-block;text-align:center;}
.tipdiv a {color:#ff3300;font-weight:bold;}
/*set position of tooltip box for email*/

.emailtip {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  width:20em;
  padding:0.3em;
  left:-20em;
  top:-5em;
  background-color:#ececec;
  margin-top:-0.5em;
  border:0.1em solid #0000cc;
  border-radius:0.5em;
  font-weight:normal;
  font-size:0.8em;
}

.tipdiv:hover .emailtip {
  visibility: visible;
}

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

#mainmid {
clear:both;
width:95%;
font-size:0.8em;
padding:0.8em 1.0em 0.2em 1.0em;
margin:0.2em auto 0em auto;
color:#000000;
background-color:#ffffff;
text-align:left;
}

#topnav {clear:both;width:95%;margin:0em auto;padding:0em;text-align:center;}
#topnav a:link {color: #0000cc;}
#topnav a:visited {color: #0000cc;}
#topnav a:hover {color: #ff3300;}
#topnav a {text-decoration:none;}

#topnav1 {
width:35%;display:inline-block;margin:0em auto;padding:0.1em 0em;
border:0.1em solid #008035;border-top-left-radius:0.4em;
border-top-right-radius:0.4em;border-bottom:none;
}

#topnav2,#topnav3,#topnav4 {
width:25%;display:inline-block;margin:0em auto;padding:0.1em 0em;
border:0.1em solid #008035;border-top-left-radius:0.4em;
border-top-right-radius:0.4em;border-bottom:none;
}

#formholder {clear:both;width:100%;margin:0;padding:0;border:0.2em solid #008035;border-radius:0.5em;text-align:center;}
#formintro {
clear:both;
padding:0em 0.2em 0em 0.2em;
width:95%;
text-align:left;
margin:0em auto;
padding:0.3em;
border-bottom:0.2em solid #008035;
background-color:#ffffff;
}

#forminput {width:95%;text-align:left;clear:both;margin:0.2em auto;font-family: verdana, arial, sans-serif;}
.subbut {color:#000000;background-color:#ffffff;border:0.2em solid #008035;border-radius:0.5em;padding:0.2em 0.3em;font-size:1.0em;}
input[type=text] {font-size:1.0em;color:#000000;}
input[type=date] {font-size:1.0em;color:#000000;}
input[type=submit] {font-size:1.0em;color:#000000;}
textarea {font-size:1.0em;font-family:verdana, arial, sans-serif;width:95%;margin:0.2em 0;}

#forminput p {margin:0.1em 0;padding:0;}
.inputdiv {clear:both;float:left;width:95%;margin:0.2em 0;}
.radio {display: inline-flex;align-items: center;}

#name,#title,#subtype,#contactname,#contactmail,#description,#emailadd,#fburl,#location,#phoneno,#website,#repeat,#dayname,#frequency {float:left;width:95%;margin:0.5em 0;}

#enqdetails {display:inline-block;width:90%;margin:0.2em 0;}

#pagefooter {font-size:0.8em;}

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


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

/* mobile landscape */
@media only screen
and (min-width: 481px)
and (max-width: 768px)
and (orientation:landscape)
{
body { font-size:130%;}
#headbotmid {padding-top:0.5em;}
#headbotright {padding-top:1.0em;}
}

/* ipads etc */
@media only screen
and (min-width: 481px)
and (max-width: 768px)
and (orientation:portrait)
{
body { font-size:130%;}
#headbotmid {padding-top:0.5em;}
#headbotright {padding-top:0em;}
#titleright {padding-top:0em;}
}


/* most desktops */
@media only screen
and (min-width: 770px)
and (max-width: 1024px)
{
body { font-size:150%;}
#headbotmid {font-size:1.2em;padding-top:0.5em;}
#headbotright {padding:1.5em 0 0 0;}
#contact {margin-top:0.5em;}
#titleright {padding-top:0.8em;}


#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.5em;padding-top:0.5em;}
#headbotright {padding:2.0em 0 0 0;}
#contact {margin-top:0.5em;}
#titleright {padding-top:0.8em;}

#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;}
}