BODY { font-family: arial, helvetica; margin-left: 10px; margin-right: 10px; }
A { color: #4C2192; }
HR { height: 1px; width: 100%; }
.centerbody { text-align: center; }
.centertable { margin-left:auto; margin-right:auto; }
.centertd { text-align: center; }
div.container {
    width:100%; 
  }
  table#outertable {
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
    width:800px;
	background-color: #E0D0E0;
  }
  table#headtable {
    text-align:center; 
    width:100%;
	background-color: #E0D0E0;
	border: 1px solid black; 
	background-color: #FFFFFF;
  }
  table#outertable td {
	text-align:left;
    padding: 10px;
  }
  table#headtable td {
	text-align:center;
    padding: 10px;
  }
  table#navtable td {
	text-align:left;
    padding: 0px;
	padding-left: 10px;
  }
  table#outertable tr {
text-align:left;  }
.centertr { text-align: center; }
.loginbutton { padding-left: 2px; padding-right: 2px; overflow: visible; }
.pbutton { font-weight: bold; color:#000000; font-family: arial, helvetica; background: #F0E0AA; text-align: center; }
.cpara { margin-left: 20px; margin-right: 20px; }
.cquotation { margin-left: 60px; margin-right: 60px; font-style: italic; }
.cpicture { text-align: center; font-weight: bold; }
.embelish { font-weight: bold; color: #000000; }
.navigation { font-weight: bold; vertical-align: top; background-color: #E0E0A0; padding: 10px; border: 1px solid black; }
.copyright { text-align: center; font-size: 70%; }
.outertable { border: none; width: 800px; background-color: #E0D0E0; }
.outertable td { padding: 10px; }
.headtable { width: 100%; border: 1px solid black; background-color: #FFFFFF; }
.headtable td { padding: 10px; }
.texttable { width: 100%; border: 1px solid black; background-color: #FFFFFF; }
.texttable td { padding: 10px; }
.navtable { width: 100%; color: #4C2192; border: 1px solid black; border-top: none; border-bottom: none; background-color: #D0C0D0; padding: 0px;}
.navtable td { padding: 10px; }
.navtable tr { height: 10px; padding: 0px;}
.logintable { width: 100%; color: #4C2192; border: 1px solid black; border-bottom: none; background-color: #D0C0D0; }
.loginform { display: inline; }
.textcell { vertical-align: top; }
.diaryiframe {border-width:0; width:100%; height:600px; frameborder:0px; overflow: hidden;}
.pubcoltable { width: 100%; border: 0px; background-color: #FFFFFF; }
.pubcoltable td { padding: 10px; }
.picwithcaption { text-align: center; font-weight: bold; font-size: smaller; }
H1 { color: #000000; }
H2 { color: #000000; }
H3 { color: #000000; }
.photoright {float: right; clear: both; padding: 10px 10px 10px 10px; margin: 0; font-size: 75%; color: #000000; width: 200px;}
.photoleft {float: left; clear: both; padding: 10px 10px 10px 10px; margin: 0; font-size: 75%; color: #000000; width: 200px;}
.photoright img {border: 1px solid #000000; padding:0; margin:0;}
.photoleft img {border: 1px solid #000000; padding:0; margin:0;}
.imagecellleft { width:25% }
div#LoginHelp { display: none; }
IMG { max-width:100%; border=0; }
.tendringlogo { max-width:11% }
.banner { max-width:63% }
.camralogo { max-width:8% }
.centerimg img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.pubbox { display:inline-block;
      text-align: center;
      vertical-align: top;
      width: 120px;
          height: 75px;
          margin: 5px;
      padding: 5px;
          border: 2px solid #000000;  }
@media only screen and (max-width: 800px) {
  BODY { font-family: arial, helvetica; width: 100%; margin-left: 0px; margin-right: 0px; }
  .outertable { border: none; width: 100%; background-color: #E0D0E0; }
    table#outertable {
    text-align:center; 
    width:100%;
	background-color: #E0D0E0;
  }
}