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.9em;}
h4 {font-size:0.8em;}

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

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


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

#topnav {clear:both;width:95%;color:#0000cc;margin:0em auto;padding:0em;text-align:center;}
#topnavleft {width:40%;margin:0em auto;padding:0.1em 0em;display:inline-block;border:0.1em solid #008035;border-top-left-radius:0.4em;border-top-right-radius:0.4em;border-bottom:none;}
#topnavright {width:50%;margin:0em auto;padding:0.1em 0em;display:inline-block;border:0.1em solid #008035;border-top-left-radius:0.4em;border-top-right-radius:0.4em;border-bottom:none;}
#topnav a {text-decoration:none;}

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

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

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


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

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

#titlearea {float:left;clear:both;width:100%;text-align:center;margin:0em auto 0.2em auto;padding:0;}
#titlemid {width:95%;margin:auto;display:flex;align-items:center;justify-content: center;font-size:0.7em;font-weight:bold;}
#titlemid img {display:block;height:auto;margin:0.1em 0.5em;}
#titleintro {width:95%;font-size:0.6em;margin:0 auto;font-weight:bold;}

.textvalign {display:flex;align-items:center;width:95%;}

#manage{clear:both;width:95%;margin:0em auto;padding:0;border:0.2em solid #008035;border-radius:0.5em;text-align:center;}
#managetable{clear:both;width:95%;text-align:left;margin:0.2em auto;border-bottom:0.1em solid #008035;}

.pagelink {width:90%;text-align:center;padding:0em;background-color:#ffffff;margin:1em auto;clear:both;}
.linkbut {text-align:center;width:70%;margin:1em auto 1em auto;padding:0.5em;color:#0000cc;font-weight:bold;background-color:#ffffff;border:0.2em solid #008035;border-radius:0.5em;}

#formholder {clear:both;width:95%;margin:0em auto;padding:0;border:0.2em solid #008035;border-radius:0.5em;text-align:center;}
#formintro {clear:both;width:95%;text-align:left;margin:0.2em auto;border-bottom:0.1em solid #008035;}
#forminput {clear:both;float:left;width:98%;text-align:left;margin:0.5em auto 0.5em 0.2em;font-family: verdana, arial, sans-serif;}


#forminput p {margin:0.1em 0;padding:0;}
.formnotes {clear:both;float:left;width:95%;font-size:0.8em;text-align:left;margin:0.5em auto;padding:0.5em;}
.formsub {clear:both;float:left;width:95%;margin:1.5em auto 0.5em auto;padding:0.2em;}
.cbox {clear:both;float:left;width:95%;}
.radio {display:inline-flex;align-items: center;}

input[type=checkbox] {transform: scale(1.5);}

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

#mainmid input[type=file]{font-size:1.0em;}
#mainmid input[type=button]{font-size:1.0em;}


textarea {font-size:1.0em;font-family:verdana, arial, sans-serif;color:#008035;}
textarea {width:90%;margin:0.2em 0;}



#uname {float:left;width:95%;margin:0.2em 0;}
#pword {float:left;width:95%;margin:0.2em 0;}
#name {float:left;clear:both;width:95%;margin:0.3em 0;}
#thiscat {float:left;clear:both;width:100%;margin:0.3em 0;}
#description {float:left;width:95%;margin:0.3em 0;}
#price {float:left;width:90%;margin:0.3em 0;}
#fburl {float:left;width:95%;margin:0.3em 0;}
#itemname {float:left;width:95%;margin:0.3em 0;}
#location {float:left;width:95%;margin:0.3em 0;}
#imagef {float:left;clear:both;width:95%;margin:0.4em 0;}
#contactmail {float:left;width:95%;margin:0.3em 0;}
#messenger {float:left;width:95%;margin:0.3em 0;}
#emailadd {float:left;width:95%;margin:0.3em 0;}
#phoneno {float:left;width:95%;margin:0.3em 0;}


#mainmid .imageform{
width:100%;
clear:both;
margin:0.5em auto 0.3em auto;
background-color:#ececec;
text-align:center;
}

#mainmid .imageform .mainform{
clear:both;
width:90%;
padding-top:0.5em;
}

#mainmid .imageform .formleft{
width:90%;
float:left;
text-align:left;
margin:0.2em auto 0.2em 1em;
}

#mainmid .imageform .formright{
width:90%;
float:left;
text-align:left;
margin:0.2em auto 0.2em 1em;
}


#intro {
clear:both;
padding:0em 0.2em 0em 0.2em;
width:100%;
margin:0em;
text-align:center;
font-weight:bold;
font-size:0.7em;
}


/* 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.5em;}
.pagelink {width:50%;text-align:center;padding:0em;background-color:#ffffff;margin:1em auto;clear:both;}
.linkbut {text-align:center;width:70%;margin:1em auto 1em auto;padding:0.5em;color:#0000cc;font-weight:bold;background-color:#ffffff;border:0.2em solid #008035;border-radius:0.5em;}

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

.pagelink {width:70%;text-align:center;padding:0em;background-color:#ffffff;margin:1em auto;clear:both;}
.linkbut {text-align:center;width:60%;margin:1em auto 1em auto;padding:0.5em;color:#0000cc;font-weight:bold;background-color:#ffffff;border:0.2em solid #008035;border-radius:0.5em;}

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