* {
	margin:0;
	padding:0;
}
body {
	background-color:#FFFFE0;
	font-family:Tahoma, Verdana, Arial, Helvetica;
}
#wrapper {
	width:100%;
}
#header {
	height:180px;
	border-bottom: 4px solid #B89470;
}
#main {
	display:table;
	border-collapse:collapse;
	width:100%;
}
/* Set a width for the side columns to stop them 'stretching' beyond the point I want */
#navigation {
	display:table-cell;
	min-width:12em;
	font-size:100%;
}
#navigation ul {
	list-style-type:none;
	padding:0px;
	margin:0px;
	text-align:center;
}
#navigation li {
	font-size:100%;
}
#navigation li a {
	display:block;
	padding:20px 20px 20px 0.5em;
	text-decoration:none;
	background-image:url(images/groomingcat.gif);
	background-repeat:no-repeat;
	background-position:10px 12px; 
	padding-left:14px; 	
	color:#000000;
	border:1px solid #B89470;
}
#navigation li a:hover {
	background-color:#B89470;
	color:#FFFFE0;
	text-decoration:none;
}

/* Don't set a width for the main column & it will expand to fill the window */
#content {
	display:table-cell;
	padding:0 50px 5px 20px;
}
#footer {
	padding-left:10px;
	border-top: 4px solid #B89470;
}
h1 h2 h3 h4 h5 h6 {
	font-family:Tahoma, Verdana, Arial, Helvetica;
}
h1 img {
	float:left;
}
h2 {
	padding-top:40px;
}
h3 {
	font-size:1.5em;
	padding:20px 0 10px 0;
}
h4 {
	font-size:1.25em;
	padding:20px 0 10px 0;
}
p {
	padding-top:10px;
}
input {
	margin-left:20px;
	margin-right:20px;
	margin-bottom:15px;
}
img {
	border:0;
}
.left {
	float:left;
	padding-right:10px;
}
.right {
	float:right;
	padding-left:10px;
}
img.lists {
	padding-right:10px;
	border:0;
}
img.logos {
	vertical-align:middle;	
}
.welfare {
	float:left;
	padding:10px;
}
div.imgleft
  {
  margin:10px 10px 0 0;
  border:1px solid #B89470;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
}
div.imgleft img, div.imgright img {
  display:inline;
  margin:3px;
  border:1px solid #FFFFFF;
}
div.desc {
  text-align:center;
  width:auto;
  margin:2px;
}
div.imgright {
  margin:10px 0 0 10px;
  border:1px solid #B89470;
  height:auto;
  width:auto;
  float:right;
  text-align:center;
}
object.right {
	float:right;
	padding:10px 0 10px 10px;
}
table {
	background-color:#B89470;
	border:8px solid #D6C2AD;
	border-collapse:collapse;
	color:#FFFFE0;
	text-align:center;
}
td {
	width:17em;
	border:4px solid #D6C2AD;
	padding:8px;
	font-size:0.95em;
}
table img {
	padding:8px;
}
.image p {
	color:#FFFFE0;
	font-size:0.94em;
	text-align:center;
	padding-top:8px;
}
.clear {
	clear:both;
}
.wrappedtext {
	padding:15px 15px 15px 0;
}
a.links {
	color:#A0522D;
}
a.links:hover {
	color:#CD853F;
}
a.links:visited {
	color:#8B4513;
}
ul.membership {
	list-style-image: url(images/bullet3.gif);
	line-height: 1.5em;
	padding-left:20px;
}
table {
	margin-top:20px;
}
/*
#linkspage {
	list-style:none;
	line-height:200%;
	padding-top:30px;
}
ul.contact, li.contact {
	list-style:none;
	padding-top:30px;
}
*/
/* Important points to note: positioning elements within a table cell should be achievable with relative positioning but DOESN'T work.  2 possible solutions exist:

1) add a positioned child element to the cell where you want to control positioning of part of the content (i.e. add a <div class="childelementname"> immediately after the <div> tag for the start of the cell in question and enclose the rest of the content of the cell within that, then add a height declaration to the CSS of the class description of the cell and a new rule for the new class (for the child element) with position:relative; width:*; height:*;padding:*; where the stars are replaced by values

IF you don't know what the HEIGHT of the cell will need to be (for example, where dynamic content means that there could be differing numbers of items appearing in the cell at different times), you CAN specify a min-height:*; instead of a height, or you can go with option 2:

2) wrap the table in a block element.  To do this, add a <div class="outerwrapname"> around the whole table, and to the CSS, add a new rule for the new class for the wrapper with position:relative; width:*; where the star represents the width you want, adjust the padding of the cell the new content will appear in to provide space for the new items, and adjust the position of the CSS for the items to allow for the two-pixel border on the cell.  Now the cell will adjust to encompass the additional items no matter how many there are.

Hopefully the problem of relative positioning within a table cell not working will be dealt with in the future. */
/* CSS tables lack any concept of row or column spanning so it's more difficult to use one single layout structure when using CSS tables than it was when using HTML tables, but nested tables can be used to simulate these attributes. */

/* Take care to make sure anonymous table elements display the way you expect.  On occasion it may be necessary to actually specify elements that otherwise would have been left to be assumed. */

/* display:table-footer-group and display:table-header-group can be used to display horizontal navigation and the footer div as the table footer. */