/* -------------------------------------------------------------- 
  
   CSS Starter Kit
   Web Design & Development by Studio 24 Ltd
   www.studio24.net - (0870) 241 6159
     
-------------------------------------------------------------- */

@import "reset.css";


body {
}


/* =CONTAINERS
-------------------------------------------------------------- */
div#container { /* set as 'standard' width, centred container for 1024x768 site - 960px wide inc. 20px padding left and right */
	width: 955px;
	margin: 0 auto;
	padding:0;
}

/* =NAV-PRIMARY
-------------------------------------------------------------- */

ul#nav-primary {
	background: #227a64;
	float: left;
	width: 175px;
	margin: 0;
	padding: 15px 0;
	list-style-type: none;
}

ul#nav-primary li {
	margin: 0;
	padding: 0;
	border: 1px solid #227a64;
}

ul#nav-primary li a:link, ul#nav-primary li a:visited, ul#nav-primary li a:focus, ul#nav-primary li a:active {
	display: block;
	padding: 4px 10px;
	color: #fff;
	width: 153px;
}

ul#nav-primary li a:hover,
ul#nav-primary li ul.submenu a:hover {
	background: #1b6252;
	text-decoration: none;
}

ul#nav-primary li.active a:link, ul#nav-primary li.active a:visited, ul#nav-primary li.active a:focus, ul#nav-primary li.active a:active {
	background: #399c88;
}

ul#nav-primary ul.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#nav-primary ul.submenu li {
    border: none;
}

ul#nav-primary ul.submenu a:link, ul#nav-primary ul.submenu a:visited, ul#nav-primary ul.submenu a:focus, ul#nav-primary ul.submenu a:active {
    background: #227a64;
    padding-left: 25px;
    width: 138px;
}

/* =BREADCRUMB
-------------------------------------------------------------- */
ul#nav-breadcrumb {
    float: left;
    width: 760px;
    margin: 1em 10px;
    padding: 5px 0;
    list-style: none;
    border-bottom: 1px solid #ccc;
    display: inline;
}

body.home ul#nav-breadcrumb {
    display: none;
}

ul#nav-breadcrumb li {
    float: left;
    margin-right: 5px;
}

ul#nav-breadcrumb li a:link, ul#nav-breadcrumb li a:visited, ul#nav-breadcrumb li a:focus, ul#nav-breadcrumb li a:active {
    background: url(/assets/img/icons/breadcrumb-divider.gif) 100% 50% no-repeat;
    padding-right: 10px;
}


/* =CONTENT CONTAINERS
-------------------------------------------------------------- */

div#content {
	background: url(../img/layout/bg.gif) 0 0 repeat-y;
	float: left;
	clear: both;
	width: 955px;
}

div#content-wrapper {
	float: left;
	width: 780px;
}

div#content-primary {
	float: left;
	margin: 0;
	padding: 10px 10px 0 10px;
	border-right: 1px solid #ccc;
}

div#content-primary.two-col {
	width: 574px;
}

div#content-primary.one-col {
	width: 765px;
	border: none;
}

div.tour div#content-primary {
    width: 439px;
}

body.virtual-tour div#content-primary {
    border-right: 0;
    padding-right: 0;
}

div#content-secondary {
	float: left;
	width: 165px;
	margin: 0;
	padding: 10px;
}

div.tour div#content-secondary {
    width: 300px;
}

div#content-secondary ul {
	list-style: none;
	margin: 0;
	padding: 0;
} 

div#content-secondary ul li {
    margin-bottom: 10px;
}

div#content-secondary div.dates ul li {
    margin-bottom: 0;
}

div#content-secondary ul li a:link, div#content-secondary ul li a:visited, div#content-secondary ul li a:focus, div#content-secondary ul li a:active {
    font-style: italic;
    font-size: 1.3em;
}

div#content-tertiary {
	float: left;
	clear: both;
	width: 780px;
	margin: 0;
	padding: 20px 0;
}

div#content-tertiary ul {
	list-style: none;
	margin: 0;
	padding: 0;
} 

div#content-tertiary ul li {
	float: left;
	margin-left: 10px;
}

/* =SITE-INFO / FOOTER
-------------------------------------------------------------- */

div#site-info {
	float: left;
	clear:both;
	width: 955px;
	margin: 20px 0 0 0;
	font-size: 0.85em;
	
}

div#site-info p {
	margin-bottom: 0.5em;
}

div#site-info div#reg-info {
	float: left;
	width: 500px;
	margin: 0;
	padding: 0 20px;
}

div#site-info div#terms {
	float: right;
	width: 250px;
	margin: 0;
	padding: 0 20px;
	text-align: right;
}



/* =BASIC TYPOGRAPHY
-------------------------------------------------------------- */

html {
	font-size: 100%; /* 100% = the default font size of the browser, usually 16px -> DON'T CHANGE THIS */
}

/**
 * Font sizing: 
 *
 * To calculate the percentage font-size to use in the body tag use the following calculation:
 *
 * (16px / Required body font-size) x 100
 *
 * Examples below:
 * 16px = 100%
 * 14px = 87.5%
 * 12px = 75%
 * 10px = 62.5%
 *
 */

body {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 75%; /* Set the base font-size (75% sets a size of 1em = 12px) */
    line-height: 1.4em;
    color: #707170;
}

/* =HEADINGS */
h1, h2, h3, h4 {
	line-height:1.5em;
	margin-bottom: 0.5em;
}

/* 1em = body font-size, so we can calculate our other font-sizes based on this:
   for example, if we want a font-size of 32px, in ems 32px = (32 / 12) = 2.6em */

h1 {
	font-size: 1.66em; /* 20px */
	font-style: italic;
}

h2 {
	font-size: 1.33em; /* 16px */
}

h3 {
    font-size: 1.16em; /* 14px */
}

h4 {
	font-size: 1.6em; /* 20px */
}


p {
	margin: 0 0 1em 0; 
}


/* =OTHER TEXT ELEMENTS
-------------------------------------------------------------- */

blockquote {
	font-style: italic; 
	font-family: serif;
	font-size: 2em;
}

pre, code {
	margin: 0 0 1em 0;
}

img.left {
    float: left;
    margin: 0 1em 1em 0;
}

img.right {
    float: right;
    margin: 0 0 1em 1em;
}


/* =LINKS
-------------------------------------------------------------- */

a:link, a:visited, a:focus, a:active {
	text-decoration: none;
	font-weight: bold;
	color: #1C6353;
}

a:hover {
	text-decoration: underline;
}

p#skip-link { 
	position:absolute;
	left:-9000px;
	top:0; 
	z-index:20;
} 


/* icon links */
a.icon:link, a.icon:visited, a.icon:focus, a.icon:active, a.icon:hover {
	padding:2px 0 4px 20px;
	background-color: transparent;
	background-position:0 0;
	background-repeat: no-repeat;
} 
a.pdf:link, a.pdf:visited, a.pdf:focus, a.pdf:active, a.pdf:hover {
	background-image:url(../img/icons/pdf.png);
}
a.word:link, a.word:visited, a.word:focus, a.word:active, a.word:hover {
	background-image:url(../img/icons/word.png);
}
a.excel:link, a.excel:visited, a.excel:focus, a.excel:active, a.excel:hover {
	background-image:url(../img/icons/excel.png);
}
a.txt:link, a.txt:visited, a.txt:focus, a.txt:active, a.txt:hover {
	background-image:url(../img/icons/txt.png);
}
a.flash:link, a.flash:visited, a.flash:focus, a.flash:active, a.flash:hover {
	background-image:url(../img/icons/flash.png);
}
a.video:link, a.video:visited, a.video:focus, a.video:active, a.video:hover {
	background-image:url(../img/icons/video.png);
}
a.podcast:link, a.podcast:visited, a.podcast:focus, a.podcast:active, a.podcast:hover {
	background-image:url(../img/icons/podcast.png);
}
a.pub:link, a.pub:visited, a.pub:focus, a.pub:active, a.pub:hover {
	background-image:url(../img/icons/pub.png);
}
a.rss:link, a.rss:visited, a.rss:focus, a.rss:active, a.rss:hover {
	background-image:url(../img/icons/rss-feed.png);
}
a.print:link, a.print:visited, a.print:focus, a.print:active, a.print:hover {
	background-image:url(../img/icons/print.png);
}
a.friend:link, a.friend:visited, a.friend:focus, a.friend:active, a.friend:hover {
	background-image:url(../img/icons/friend.png);
}
a.help:link, a.help:visited, a.help:focus, a.help:active, a.help:hover {
	background-image:url(../img/icons/help.png);
}
a.info:link, a.info:visited, a.info:focus, a.info:active, a.info:hover {
	background-image:url(../img/icons/info.png);
}
a.email:link, a.email:visited, a.email:focus, a.email:active, a.email:hover {
	background-image:url(../img/icons/email.png);
}
a.vcard:link, a.vcard:visited, a.vcard:focus, a.vcard:active, a.vcard:hover {
	background-image:url(../img/icons/vcard.png);
}
a.plus:link, a.plus:visited, a.plus:focus, a.plus:active, a.plus:hover {
	background-image:url(../img/icons/plus.png);
}
a.minus:link, a.minus:visited, a.minus:focus, a.minus:active, a.minus:hover {
	background-image:url(../img/icons/minus.png);
}
	
	
/* =LISTS
-------------------------------------------------------------- */

ul {
	margin: 0 0 1em 2em;
}

ol { 
	margin: 0 0 1em 2em;
}

dl {
	margin: 0 0 1em 2em;
}

dt {
	font-weight: bold;
}

dt, dd {
	margin: 0 0 0.5em 0 ;
}


/* =TABLES
-------------------------------------------------------------- */

table {
	width: auto;
	margin: 0 0 1em 0;
}

table.border {
    border-top:1px solid #ddd;
	border-left:1px solid #ddd;
}

th,td {
	/* padding: 0.3em 0.4em 0.2em 0.4em; */
}

table.border th, table.border td {
    border-bottom:1px solid #ddd;
	border-right:1px solid #ddd;
}

th {
	font-weight:bold;
	/* background-color: #ccffcc; */
	background-color: #247A64;
	color: #fff;
}

tr:nth-child(odd) { /* CSS3 zebra row solution - only works in Opera & Safari */
  /* background-color: #edf3fe; */
}

tr.alt { /* Hardcoded zebra row solution - use this class on every other <tr> for a zebra effect */
	background-color: #edf3fe;
}


/* -------------------------------------------------------------- 
   -------------------------------------------------------------- 
	     				FORMS
   -------------------------------------------------------------- 
   -------------------------------------------------------------- */
/* form warning message */
form div.message p {
	color:#000;
}
   
/* fieldset messages - before the relevant field */
form div em {
	display: none;
}

form div.problem em {
	display: inline;
	color:red;
}

   
   
/* =SIMPLE-FORM
----------------------------------------------- */

form.simple-form fieldset {
	margin:1em 0;
	padding:1em;
	border:solid 1px #ccc;
	background-color:#eee;
}

form.simple-form legend {
	font-weight: bold;
}

form.simple-form div {
	position:relative;
	padding:6px;
	margin-bottom: 0.5em;
}

form.simple-form label {
	display: block;
}

form.simple-form input {
	width:200px;
}

form.simple-form textarea {
	width:300px;
	height:100px;
}

form.simple-form div.radio input, form.simple-form div.checkbox input, form.simple-form input.submit {
	width:auto;
}
   
form.simple-form div.radio label, form.simple-form div.checkbox label {
	display: inline;
}

/* fieldset messages - before the relevant field */
form.simple-form div.problem {
	background-color: #ffefef;
	border:solid 1px #ff7f7f;
}

/* progressive enhancements for browsers beyond ie6 */
form.simple-form input:focus, form.simple-form textarea:focus {
	background-color: #ffc;
}

form.simple-form input[type="text"], form.simple-form textarea{
	border-top: solid 2px #999;
	border-right: solid 1px #999;
	border-bottom: solid 1px #999;
	border-left: solid 2px #999;
}

/* CSS rounded corners - no Opera support as of Aug 09 */
form.simple-form div.message,
form.simple-form div.problem,
form.simple-form fieldset {
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
}

 

/* =FLASH MESSAGES
----------------------------------------------- */

div.message {
	padding:10px;
}

div.message ul a:hover {
	text-decoration: none;
}

/* flash message - error */
div.error {
	border:solid 1px #ff7f7f;
	background-color: #ffefef;
}
div.error,
div.error a:link, 
div.error a:visited, 
div.error a:focus, 
div.error a:active  {
	color:red;
}

/* flash message - alert */
div.alert {
	border:solid 1px #FF8A00;
	background-color: #FCFFDF;
}
div.alert,
div.alert a:link, 
div.alert a:visited, 
div.alert a:focus, 
div.alert a:active  {
	color:#FF8A00;
}

/* flash message - success */
div.success {
	border:solid 1px #3FAF00;
	background-color: #EAFFDF;
}
div.success,
div.success a:link, 
div.success a:visited, 
div.success a:focus, 
div.success a:active  {
	color:#2D7F00;
}


/* =NON FLASH HEADER
------------------------------------------------------------------ */
div#header a#header-animal {
    float: left;
    width: 84px;
    height: 137px;
}

div#header div#pitch-img {
    float: left;
    height: 137px;
    width: 871px;
}

div#header div#donation {
    float: left;
    height: 73px;
    width: 220px;
    margin: 8px 0 0 6px;
    color: #1C6353;
}

div#header div#donation h3 {
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: -1px;
}

div#header div#donation p {
    margin: 0;
    font-size: 0.9em;
}

div#header form#search {
    float: right;
    width: 220px;
    height: 100px;
    margin: 8px 0 0 0;
}

div#header form#search input#search-term {
    width: 210px;
}

div#header form#search input#search-submit {
    display: none;
}

div#header form p {
    margin: 2px 0 0 0;
    font-size: 0.9em;
}

div#logo {
    float: left;
    width: 174px;
    height: 95px;
}


/* =REHOMING
-------------------------------------------------------------- */
ul.rehoming {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}

ul.rehoming li {
    float: left;
    margin-right: 10px;
}

form#filter-form {
    float: left;
    width: 574px;
    background: #E9EAE9;
    margin: 0 0 10px 0;
    padding: 10px 0;
}

form#filter-form dt, form#filter-form dd {
    /*float: left;*/
    display: inline;
    margin: 0 0 0 10px;
}

form#filter-form dt {
    display: none;
}

form#filter-form input {
    width: auto;
}

ul.animals {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    width: 574px;
}

ul.animals li {
    float: left;
    width: 287px;
    height: 150px;
    overflow: hidden;
    font-weight: bold;
    margin-bottom: 10px;
}

ul.animals li img {
    float: left;
}

ul.animals li p {
    float: right;
    width: 167px;
    margin: 0 10px 10px 10px;
}

p#message-count {
    text-align: center;
    font-weight: bold;
}

p.paginationControl {
    clear: both;
    text-align: center;
}

p.updated {
    text-align: center;
}

/* =REHOMING DETAIL PAGE
------------------------------------------------------------- */
div#animal {
    background: #E0E0E0;
    float: left;
}

div#animal h2 {
    background: #227A64;
    color: #fff;
    font-size: 2em;
    padding-left: 10px;
}

div#animal-detail {
    padding: 0 10px 10px 10px;
}

div#animal-detail img#animal-image {
    width: 250px;
    float: left;
    margin: 0 15px 10px 0;
}

div#animal-detail img.reserved {
    float: right;
}