/*
THIS IS THE HANDHELD STYLE SHEET
ÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐ
*/


/*
WHOLE SITE SETTINGS
ÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐ
*/

body {
	padding: 0px;
	margin: 0px;
	background: #605D58;
}

img {
	border: none;
}

* {
	margin: 0;
	padding: 0;
}






/*
BASIC ELEMENTS
ÐÐÐÐÐÐÐÐÐÐÐÐÐÐ
*/


p {
	font-family: "Arial", sans-serif;
	font-weight: normal;
	color: #605D58;
	font-size: 75%;
	line-height: 130%;
	padding: 5px 0px 5px 0px;
	}

h1{
/* Used for all major page headings */
	font-family: "Arial", sans-serif;
	font-weight: bold;
	font-size: 1.6em;
	color: #778E1E;
	padding: 10px 0px 5px 0px;
	}

h2 {	
/* Used for all secondary page headings */
	font-family: "Arial", sans-serif;
	font-weight: bold;
	font-size: 1em;
	color: #605D58;
	padding: 10px 0px 5px 0px;
	}

h3 {
/* Used for all tertiary page headings */
	font-family: "Arial", sans-serif;
	font-weight: bold;
	color: #404040;
	font-size: 12px;
	line-height: 130%;
	padding: 5px 0px 0px 0px;
	}

h4 {
/* Used for tagline in header */
	font-family: "Arial", sans-serif;
	font-weight: bold;
	color: #8E9F6B;
	font-size: 12px;
	line-height: 1em;
	padding: 10px 0 0 0;
	letter-spacing: -0.2px;
	/*logo used kerned font - so reduced letter spacing so that compares with logo heading*/
	}

h5 {	
/* Used for leftpane menu options page headings and photo captions*/
	font-family: "Arial", sans-serif;
	font-weight: bold;
	color: #605D58;
	font-size: 75%;
	line-height: 130%;
	padding: 0px 0px 15px 10px;
	}

h6 {	
/* Used for the URL*/
	font-family: "Arial", sans-serif;
	font-weight: bold;
	color: #DFD5BB;
	font-size: 75%;
	line-height: 130%;
	padding: 5px 0px 0 10px;
	}
	
/*Originally used a h7 for the footer and breadcrumbs - which worked fine on firefox, safari but not on IE. Looked up The Ultimate HTML reference (Ian Lloyd) and found that heading levels only go to 6. So instead of using h7, I added a p style to the footer and the breadcrumbs.*/

a:link {
	color: #00336C;
	font-weight: bold;
	}
a:visited {
	color: #769CB2;
	font-weight: normal;
	}
a:hover {
	color: #990000;
	}
a:active {
	color: #769CB2;
	}



/*
MAIN CONTAINERS
-----------------
*/
/* Most of the main containers are not required to format, although the content inside them is required to display*/

/*#wrapper {
	width: 100%;
	margin: 4px;
	}*/

	
#container {
/*	width: 992px;
	padding: 0px;
	margin: 0 auto 0 auto;
	border: 2px solid #444444;*/
	background: #FBFDF5;
	}

/*#shadow1 {
	border: 3px solid #363636;
	}*/
	
/*#shadow2 {
	border: 3px solid #292929;
	}*/

#header {
	width: 100%;
/*	height: 130px;*/
	}

/*#mainnav {
	background-image: url("images/template/tag2.png");
	background-repeat: no-repeat;
	background-position: right top;
	width: 100%;
	height: 65px;
	background-color: #8E9F6B;
	margin: 0px;
	padding: 0px;
	}*/
	
/* Some of the divs, I don't want content to display in the handheld device - the user doesn't need to scroll past a whole lot of images to get to their content*/
#photos {
	width: 980px;
	height: 110px;
	margin: 10px 0 0 0;
	display: none;
	}
	
#content {
	width: 100%;
	}
	
#footer {
	position: relative;
	bottom: 0;
	border-top: 30px solid #778E1E;
/*	width: 970px;*/
	height: 18px;    
	padding: 0 0 3px 10px;
	}
#footer p {	
	font-size: 0.6em;
	}	

/*
HEADER DIVS
-----------------
*/

#leftheader {
	float: left;
	width: 270px;
	height: 130px;
	margin: 30px 0 0px 10px;
	}

/*#rightheader {
	float: right;
	width: 600px;
	margin: 10px;
	}*/

#utility {
	float: right;
	max-width: 500px;
	min-width: 100%;
	margin: 0 10px 0 0;
/*	height: 15px; */
	}

#url {
	position: absolute;
	top: 0;
	right: 20px;
	width: 100px;
	height: 30px;
	margin: 5px 0 0 0;
/*	text-align: right;*/
/*	padding: 10px 0 0 0;*/
	display: inline;
	}

#tag1 {
	float: right;
	width: 500px;
	height: 10px;
	text-align: right;
	margin: 0 10px 30px 0;
	}

#tag2 {
	height: 35px;
	width: 100%
	}

#tabs {
/*	float: left;
	width: 825px;
	position: relative;
	bottom: 0;
	height: 30px;
	text-align: center;*/
	}
	

/*
CONTENT DIVS
-----------------
*/
#leftpane {
	float: left;
	width: 220px;
	margin: 10px 0 10px 0;
	}
#centre {
/*	float: left;
	width: 410px;*/
	margin: 10px 0 10px 10px;
	padding: 0 10px;
	clear: both;
	}
#rightpane {
	float: left;
	width: 300px;
	margin: 10px 0 10px 10px;
	display: none;
	}
#centreright {
	width: 100%;
	text-align: right;
	display: none;
	}


/*
TABLES
-----------------
*/
table {
	background: #DFD5BB;
	padding: 2px;
	width: auto;
	}
td {
	font-family: "Arial", sans-serif;
	font-weight: normal;
	padding: 2px 6px 2px 6px;
	border: 1px solid #ffffff;
	color: #404040;
	font-size: 75%;
	line-height: 130%;
	}
th {
	padding: 2px 6px 2px 6px;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	color: #DFD5BB;
	font-size: 75%;
	line-height: 130%;
	text-align: left;
	}

/*
LISTS AND LINKS
-----------------
*/
#content ol {
	margin: 0 0 0 20px;
	}
#content ul {
	list-style-image: url("images/template/paw.png");
	margin: 0 0 0 20px;
	}
#content li {
	font-family: "Arial", sans-serif;
	font-weight: normal;
	font-size: 75%;
	line-height: 130%;
	padding: 2px 0px 2px 5px;
	color: #605D58;
	}
#content ul.indent {
	list-style-image: url("images/template/pawdot.png");
	}
#content li.indent {
	font-family: "Arial", sans-serif;
	font-size: 75%;
	font-weight: normal;
	line-height: 130%;
	color: #605D58;
	}


#utility ul {
	list-style: none;
	}
#utility li {
	font-family: "Arial", sans-serif;
	font-weight: normal;
	font-size: 75%;
	line-height: 130%;
	padding: 5px 0px 5px 16px;
	color: #605D58;
	float: right;
	letter-spacing: 0.55px;
/*letter spacing added so that the links don't move the words significantly in the utility - links and hovers don't have the spacing.*/
	}
#utility a {
	color: #605D58;
	font-weight: bold;
	letter-spacing: 0;
	}
#utility a:hover {
	color: #605D58;
	text-decoration:underline;
	letter-spacing: 0;
	}


#tabs ul {
	list-style: none;
	margin: 0 0 0 5px;
	}
#tabs li {
/*	float: left;*/
	font-family: "Arial", sans-serif;
	font-size: 75%;
	line-height: 240%;
	color: #ffffff;
	clear: both;
	padding: 0 0 0 20px;
/*	width: 110px;
	background-image: url("images/template/tabs.png");
	background-repeat: no-repeat;
	background-position: right top;
	height: 30px;*/
}
#tabs li.current {
/*	background-image: url("images/template/tabactive.png");
	background-repeat: no-repeat;
	background-position: left top;*/
	color: #605D58;
	font-weight: bold;
	text-decoration: none;
	}
#tabs a {
	color: #00336C;
	font-weight: bold;
	text-decoration: underline;
	text-align: center;
	}
#tabs a:hover {
	color: #990000;
	text-decoration:underline;
	}

#subnav ul {
	list-style-image: url("images/template/paw.png");
	margin: 0 0 0 30px;
	}
#subnav li {
	font-family: "Arial", sans-serif;
	font-weight: normal;
	font-size: 75%;
	line-height: 130%;
	padding: 5px 0px 5px 5px;
	border-bottom: 0.1em solid #E2E2B5;
	}


/*
BANNER PHOTOS
-----------------
*/
#photo1 {
	float: left;
	width: 230px;
	text-align: left;
	display: inline;
	}
#photo2 {
	float: left;
	width: 440px;
	text-align: left;
	display: inline;
	}
#photo3 {
	float: left;
	width: 310px;
	text-align: left;
	display: inline;
	}
.d1p1 {
	background-image: url("images/header/d1p1.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d1p2 {
	background-image: url("images/header/d1p2.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d1p3 {
	background-image: url("images/header/d1p3.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d2p1 {
	background-image: url("images/header/d2p1.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d2p2 {
	background-image: url("images/header/d2p2.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d2p3 {
	background-image: url("images/header/d2p3.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d3p1 {
	background-image: url("images/header/d3p1.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d3p2 {
	background-image: url("images/header/d3p2.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d3p3 {
	background-image: url("images/header/d3p3.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d4p1 {
	background-image: url("images/header/d4p1.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d4p2 {
	background-image: url("images/header/d4p2.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d4p3 {
	background-image: url("images/header/d4p3.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d5p1 {
	background-image: url("images/header/d5p1.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d5p2 {
	background-image: url("images/header/d5p2.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d5p3 {
	background-image: url("images/header/d5p3.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d6p1 {
	background-image: url("images/header/d6p1.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d6p2 {
	background-image: url("images/header/d6p2.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d6p3 {
	background-image: url("images/header/d6p3.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d7p1 {
	background-image: url("images/header/d7p1.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d7p2 {
	background-image: url("images/header/d7p2.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d7p3 {
	background-image: url("images/header/d7p3.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d8p1 {
	background-image: url("images/header/d8p1.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d8p2 {
	background-image: url("images/header/d8p2.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}
.d8p3 {
	background-image: url("images/header/d8p3.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	height: 110px;
	}

/*
BANNER PHOTOS
-----------------
*/
.petphotos {
	border-top: 2px solid #778E1E;
	padding: 5px 0 5px 0;
	}

/*
LEFTPANE DIVS
-----------------
*/

#contact {
	float: left;
	background: #DFD6BC;
	width: 200px;
	text-align: left;
	padding: 10px;
	background-image: url("images/template/contactus.png");
	background-repeat: no-repeat;
	background-position: left top;
	display: none;
	}
#subnav {
	float: left;
	background: #E8EBBC;
	width: 200px;
	text-align: left;
	padding: 10px;
	background-image: url("images/template/inthissection.png");
	background-repeat: no-repeat;
	background-position: left top;
	}

/*
CONTENT DIVS
-----------------
*/

#breadcrumbs {
	margin-top: 0px;
	margin-bottom: 0px;
	}
#breadcrumbs p {	
	font-size: 0.6em;
	}