body {background-color: #FFCC99; font-family: Arial}

p, td, li, a, h1, h2, h3 {font-family: Arial; font-style: normal; font-size: 1.05em; color: #D8B28C;} /*was 1em */
h1 {font-size: 2em; margin-top: 0px; padding-bottom: 12px; font-family: Arial; font-style: normal; font-weight: bold;} /* was 24pt */
h2 {font-size: 1.5em; margin-top: 0px; padding-bottom: 8px; font-family: Arial; font-style: normal; font-weight: bold;} /* was 18pt */
h3 {font-size: 1.2em; margin-top: 0px; padding-bottom: 6px; font-family: Arial; font-style: normal; font-weight: bold;} /* was 14pt */

td {vertical-align: top}

ul {margin-left: 0.3em; margin-top: 0.75em; margin-bottom: 0.75em; list-style-type: disc}

a:link {font-weight: bold; color: #FFCC99; text-decoration: underline}
a:visited {font-weight: bold; color: #FFCC99; text-decoration: underline}
a:hover {font-weight: bold; color: #FFFFCC; text-decoration: underline}
a:active {font-weight: bold; color: #FFFFCC; text-decoration: underline}

table {border-collapse: collapse; margin-left: auto; margin-right: auto; text-align: left;}
/* these margins will centre all tables, but retain a default left-alignment for cell content */

.border td {border: 1px solid; border-color: #CCCCCC} /* was table.border td */

table.cp0 td {padding: 0px} /* taking out 'table.' in front was a bad move */
table.cp1 td {padding: 1px}
table.cp2 td {padding: 2px}
table.cp3 td {padding: 3px}
table.cp4 td {padding: 4px}
table.cp5 td {padding: 5px}
table.cp6 td {padding: 6px}
table.cp7 td {padding: 7px}
table.cp8 td {padding: 8px}
table.cp10 td {padding: 10px}
table.cp12 td {padding: 12px}
table.cp15 td {padding: 15px}

.center {text-align: center}
/* this centres the element within its container, but does not centre the contents within the element itself */

.wrapper {max-width: 800px; background-color: #505050;} /* was 650px */
/* If this wrapper is a div, it would need to be centred. */
/* any styling of a wrapper td will affect all child tables */
/* padding has no effect on the wrapper, but can be applied to wrapper td */

.inner {width: 92%;} /* this is the inner container, but only kicks in if the wrapper width is not pushed out */  /* was 90% */
.inner td {padding-left: 10px; padding-right: 10px;} /* this padding is _inside_ the table perimeter */

.flex-container {display: flex; flex-wrap: wrap; justify-content: space-around;}
.flex-container > div {
  margin: 0px;
  text-align: center;
  vertical-align: middle;
  padding: 5px; /* padding = 'cellspacing' */
  margin-top: 2px;
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  background-color: #996633; /* For browsers that do not support gradients */
  background-image: linear-gradient(#bd7914, #6d4925);
  font-size: 1em;}  /*check the effect of changing this */

.mainnavbar {width: 100%; margin-left: auto; margin-right: auto; height: 30px;}
.mainnavbar td {
	padding: 2px; /* padding = 'cellspacing' */
	text-align: center;
	vertical-align: middle;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	background-color: #996633;}
.mainnavbar a {font-size: 1em;}

.subnavbar {margin-top: 30px; margin-right: auto; margin-bottom: 30px; margin-left: auto;}
.subnavbar td {
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 6px;
	padding-bottom: 6px;
	text-align: center;
	vertical-align: middle;
	background-color: #666666;}
.subnavbar a {font-size: 0.83em;}

img {border: none}

.clearboth {line-height: 0; height: 0; clear: both;}

.break {padding-top: 8px; padding-bottom: 8px; width: 100%}

.floatleft {float: left; margin-top: 0px; margin-right: 20px; margin-bottom: 20px;}
.floatright {float: right; margin-top: 0px; margin-bottom: 20px; margin-left: 20px;}

.swatch {width: 350px; height: 150px; box-sizing: border-box;}

.style1 {color: #FFCC99;} /* no longer used  */
.style2 {font-size: 1.3em; color: #f2f2f2;} /* was 16pt, #FFFFFF */
.style3 {color: #996633; font-weight: bold;} /* no longer used */
.style4 {color: #333333; font-weight: bold;} /* no longer used */
.style5 {color: #f2f2f2} /* was #FFFFFF */
.style6 {color: #FFCC66} /* no longer used */
.style7 {font-size: 1.35em; color: #CC9966;} /* was 16pt */
.style8 {color: #663300} /* no longer used  */
.style9 {color: #333333} /* no longer used */
.style10 {font-size: 0.9em} /* was 9pt */
.style11 {color: #CC6600} /* no longer used */
.style12 {font-size: 1.3em; color: #FFCC99;} /* was 16pt, used only on prot36.html, but colour looks good */
.style13 {color: #d9d9d9} /* was #CCCCCC */
.style14 {color: #CC3300} /* no longer used */
.style15 {color: #CC9933} /* no longer used */
.style16 {color: #999900} /* no longer used */
.style17 {color: #FF6600} /* no longer used */
.style18 {color: #FF9933} /* no longer used */
.style19 {color: #669999} /* no longer used */
.style20 {font-size: 1.2em; color: #f2f2f2; padding: 5px; background-image: linear-gradient(#bd7914, #6d4925); background-color: #996633;} /* For browsers that do not support gradients */ /* the padding command doesn't override the cp class! */ /* was 14pt */