/* There are some layout features included in this document.  Each line applying to each one
  is marked as follows (in case you need to remove them).  When changing the value of properties marked 
  with these tags you should leave the original value in a comment so changes can be easily scanned.
  
  	[cfw] Centred fixed width page
 	[sf] Sticky footer (without the footer being sticky, just keeping page full window height)

*/




/*****************************************************************************************
 *			Imports
 ****************************************************************************************/

@import url("standard.css");
@import url("primary-navigation.css");
@import url("secondary-navigation.css");



/*****************************************************************************************
 *			Main document sections layout
 ****************************************************************************************/

html, body {
	height: 100%; /* [sf] these need to be 100% for Mozilla to expand to the full window height when the content doesn't push it there [sf] */
}

body {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
	font-size: 75%;
	background: #566438 left top repeat;
	color: #3b2816;
	text-align: center; /* center the #page element in IE5/win [cfw] */
}

#page {
	position: relative; /* lets us position the #footer absolute relative to #page [sf] */
	min-height: 100%; /* minimum #page height for Modern Browsers [sf] */
	height: auto !important; /* make the height auto for Modern Browsers (IE doesn't do !important) [sf] */
	height: 99.9%; /* For IE, IE treats height exactly like min-height, so just give it that [sf] */
	width: 900px; /* max page width to not scroll at 800x600 [cfw] */
	text-align: left; /* reset the text alignment after IE5/win hack above [cfw] */
	margin: 0 auto; /* ceneter the #page element in all but IE5/win [cfw] */
	position: relative; zoom: 1;
}

#page #header {
	position: relative; zoom: 1;
	height: 130px;
}

#page #primary-navigation {
	position: absolute;
	top: 0px;
	left: 300px;
	z-index: 200;
}

#page #breadcrumb {
	width: 0;
	height: 0;
	float: left;
}

#page #breadcrumb ol {
	margin: 0;
	padding: 0;
	left: 304px;
	top: 134px;
	width: 510px;
	position: absolute;
}


#page #footer {
	min-height: 49px;
	_height: 49px;
	clear: both;
}


/************************
 * secondary nav and content columns
 ************************/
 
#page #content {
	_height: 345px;
	min-height: 345px;
}

body.home-page #page #content {
	position: relative;
}

body.has-breadcrumb #page #content {
	padding-top: 3em;
}

#page #content-inner {
	padding: 0 25px 0 25px;
	margin: 0 0 20px 0;
}

body.has-secondary-navigation #page #content {
	float: right; display: inline;
	width: 100%;
	margin-left: -320px;
}

body.has-secondary-navigation #page #content-inner {
	padding-left: 280px;
	margin-left: 25px;
}

body.has-secondary-navigation #page #secondary-navigation {
	width: 210px;
	margin: 0 0 0 25px;
	padding: 0 20px;
	position: relative;
	z-index: 20;
}




/*****************************************************************************************
 *			Page layout / styles
 ****************************************************************************************/

#page {
	background: url(../images/backgrounds/bg_content_repeat.jpg) #fff left top repeat-y;
	z-index: 1;
}

#page-inner {
	margin: 0 30px;
	z-index: 1;
	position: relative;
	_height: 0;
}

#extra1 {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background: url(../images/backgrounds/bg_content.jpg) transparent left top no-repeat;
	z-index: 0;
}

#extra2,
#extra3 {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
	background: url(../images/backgrounds/bg_sides.jpg) transparent left top repeat-x;
	z-index: 0;
}

#extra2 {
	background-position: 100% 0;
	margin-left: -450px;
	left: 0;
}

#extra3 {
	left: 50%;
	background-position: 448px -2px;
}




/*****************************************************************************************
 *			Header internal layout / styles
 ****************************************************************************************/

#header {
	position: relative; zoom: 1;
	background: #fff;
}

#header #logo {
	position: absolute;
	left: 0;
	top: 0;
}




/*****************************************************************************************
 *			Footer internal layout / styles
 ****************************************************************************************/

#footer {
	background: url(../images/backgrounds/bg_footer.gif) transparent left top no-repeat;
	color: #e9e4ba;
} 


/************************
 * Copyright statement
 ************************/
 
#footer #copyright {
	line-height: 17px; /*should be the height of the areeba logo*/
	float: left;	
	display: inline;
	margin: 15px 0 0 25px;
	vertical-align: middle;
}


/************************
 * Site by Areeba Link
 ************************/
 
#footer #site-by-areeba-link {
	display: inline;
	float: right;
	margin: 15px 25px 0 0;
}

#footer #site-by-areeba-link a,
#footer #site-by-areeba-link a:hover span {
	text-decoration: none;
	color: #e9e4ba;
}

#footer #site-by-areeba-link span {
	vertical-align: middle;
	text-decoration: underline;
}

#footer #site-by-areeba-link img {
	vertical-align: middle;
}




/*****************************************************************************************
 *		 	Breadcrumb internal layout / styles
 ****************************************************************************************/

#breadcrumb ol li {
	background-image: url(../images/bullets/bul_breadcrumb.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	border: none;
	padding: 0 7px 0 8px;
	margin: 0 7px 0 -8px;
}

#breadcrumb ol li:first-child {
	background-image: none;
}

#breadcrumb a {

}



/*****************************************************************************************
 *		 	Page Title internal layout / styles
 ****************************************************************************************/
#page-title {

}

#page-title h1 {

}



/*****************************************************************************************
 *		 	Content area internal layout
 ****************************************************************************************/

#content {
	background: url(../images/backgrounds/bg_content_overlay.jpg) white left bottom no-repeat;
}

body.has-secondary-navigation #content-inner {
	background: url(../images/backgrounds/bg_subnav.jpg) transparent left bottom no-repeat;
}

/************************
 * No sub content
 ************************/

#content #main {
	min-height: 370px;
	_height: 370px;
}


/************************
 * Top of page Link
 ************************/
 
#top-page-link {
	padding-top: 3em;
	clear: both;
}

#top-page-link a {

}




/*****************************************************************************************
 *			Content styles for custom classes and id's
 ****************************************************************************************/

/************************
 * More Link
 ************************/
 
.more-link {

} 

.more-link a {

}
 

/************************
 * USER NOTES (message box type stuff)
 ************************/
.important, .success, .error, .cancelled {
	padding: 20px 20px 20px 88px;
	margin: 1em 0;
	background-position: 20px 20px;
	background-repeat: no-repeat;
}

.important {
	color:#725A00;
	background-image: url(../images/icons/ico_note.gif);
	background-color: #FFFAE6;
	border: 1px solid #FAC71E;
}

.success {
	color:#2d8228; 
	background-image: url(../images/icons/ico_success.gif);
	background-color: #f4fcf4;
	border: 1px solid #51cd49;
}

.error {
	color: #FF0000;
	background-image: url(../images/icons/ico_error.gif);
	background-color: #fff1f1;
	border: 1px solid #f9221d;
}

.cancelled {
	color: #FF0000;
	background-image: url(../images/icons/ico_cancelled.gif);
	background-color: #fff1f1;
	border: 1px solid #f9221d;
}

/************************
 * Form prompt text
 ************************/
input.displayingPromptValue {
	color: #666;
}





/*****************************************************************************************
 *			Content page styles
 ****************************************************************************************/

#main img {
	float: left;
	border: 5px solid white;
	margin: -3px 12px 7px -5px;
}

dl.title-overview-list dt {
	font-size: 1.17em;
	margin-top: 1em;
}

dl.title-overview-list dd {
	margin: 0;
	padding: 0;
}



/*****************************************************************************************
 *			Animal listing page styles
 ****************************************************************************************/

dl.animal-list {
	padding-left: 175px;
}

dl.animal-list dt {
	font-size: 1.17em;
	margin-top: 1em;
	clear: left;
	float: right;
	width: 100%;
}

dl.animal-list dd {
	margin: 0;
	padding: 0 0 1em 0;
	clear: right;
}

dl.animal-list dd.thumbnail {
	float: left; display: inline;
	margin: 1em 0 0 -175px;
	clear: none;
}

#main dl.animal-list dd.thumbnail img {
	width: 150px;
	height: 112px;
	border: 0;
	margin: 0;
	cursor: pointer;
	cursor: hand;
}


/*****************************************************************************************
 *			Home page styles
 ****************************************************************************************/

/* undo img hack above */
body.home-page #main img {
	float: none;
	border: none;
	margin: 0;
}


body.home-page #home-text {
	float: left; display: inline;
	width: 260px;
	padding: 0 20px 20px 20px;
	background: url(../images/backgrounds/bg_subnav.jpg) white left bottom repeat-x;
}

body.home-page #home-text dl dd {
	margin: 0;
	padding: 0;
}


body.home-page #splash-photos {
	margin-left: 318px;
}

body.home-page #splash-photos img {
	position: absolute;
	bottom: 20px;
}
body.home-page #splash-photos  #image img {
	position: static;
	display: block;
	margin: 0;
	padding: 0;
}

body.home-page #splash-photos  #image {
	position: absolute;
	bottom: 39px;
	right: 39px;
}

body.home-page h2 {
	text-transform: uppercase;
	margin: 0.5em 0;
}

body.home-page ul#sales-links-list {
	padding: 0;
	list-style: none;
}

body.home-page ul#sales-links-list li {
	display: inline;
	margin: 0 15px 0 0;
}

body.home-page ul#sales-links-list li a {
	text-decoration: none;
}




/*****************************************************************************************
 *			Utility styles
 ****************************************************************************************/

/************************
 * PIPELIST: a list which is displayed inline with ' | ' as a seperator
 ************************/

.pipe-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pipe-list li {
	float:  left; display: inline;
	background-image: none;
	border-left: 1px solid black;
	padding: 0 5px 0 5px;
	margin: 0 5px 0 -5px;
}

.pipe-list li:first-child { 
	border-left: 0;
}


/************************
 *  BOX: a generic resizable (any direction) round cornered box
 ************************/

.box {
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url(../images/backgrounds/box_topLeft.gif);
}

.box-inner-one {
	background-position: right top;
	background-repeat: no-repeat;
	background-image: url(../images/backgrounds/box_topRight.gif);
}

.box-inner-two {
	background-position: left bottom;
	background-repeat: no-repeat;
	padding: 15px 0 0 15px;
	background-image: url(../images/backgrounds/box_bottomLeft.gif);
}

.box-inner-three {
	background-position: right bottom;
	background-repeat: no-repeat;
	padding: 0 15px 15px 0;
	background-image: url(../images/backgrounds/box_bottomRight.gif);
}

@media all {
	* html .box { zoom: 1; }
	* html .box-inner-three { height: 0; }
}

/* style the box content */
.box h2, .box h3 {
	margin-top: 0;
	margin-bottom: 0.5em;
}

.box p {
	margin: 0 0 0.5em 0;
}


/************************
 *  IMAGE-REPLACED: accessible text image replacement
 ************************/
/*
  Usage: <tag class="image-replaced">the text to replace<span></span></tag>
*/

.image-replaced {
	position: relative;
	overflow: hidden;
}


.image-replaced span{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-position: left top;
	background-repeat: no-repeat;
}


/************************
 * accessibility styles
 ************************/

/* hide items in a way still accessibly to screen readers (and unstyled browsers of course) */
.accessibility, hr {
	position: absolute !important;
	top: -1000em !important;
	left: -1000em !important;
}


/************************
 * collapsible regions
 ************************/
 
html.js #content .collapsible-body {
	overflow: hidden;
	margin-left: 10px;
}
html.js #content .collapsed .collapsible-body {
	display: none;
}
html.js #content .collapsible-heading {
  padding-left: 10px;
  background: url(../images/bullets/bul_collapsible-open.png) #FFF 0 50% no-repeat;
}
html.js #content .collapsed .collapsible-heading {
	background: url(../images/bullets/bul_collapsible-closed.png) #FFF 0 50% no-repeat;
}


/************************
 * clearfix, a class to clear floated elements
 ************************/
 
/* clearfix for good browsers */
html > body .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* clearfix for IE/mac */
.clearfix {
	display: inline-block;
}

/* Hides from IE-mac, clearfix for IE/win and reset for not IE/mac */
@media all {
	* html .clearfix {
		_height: 0;
	}
	
	.clearfix {
		display: block;
	}
}


/************************
 * footnotes for display during printing only
 ************************/

/* only mac ie \*//*/
 .print-only { display: none; }
/* end hack */

/* ie/mac doesn't understand this */
@media screen {
	.print-only {
	  display: none;
	}
}


/************************
 * sIFR
 ************************/

/* These are standard sIFR styles... do not modify */
@media screen {
	.sIFR-flash {
		visibility: visible;
		margin: 0;
	}
	
	.sIFR-replaced {
		visibility: visible;
	}
	
	span.sIFR-alternate {
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 0;
		display: block;
		overflow: hidden;
	}
}

.sIFR-hasFlash #page-title h1 {
	visibility: hidden;
	letter-spacing: -0.1em;
	_letter-spacing: -1px;
}

html.showing-thickbox #page-title .sIFR-flash {
	visibility: hidden !important;
}