/* CSS Document for Cali_FID Parrots and Exotics */


body {
	background: #639A32 url(images/bg-strip.jpg) repeat-x center top;
	color: #222222;
	padding: 0px 0px;
	margin-top: 10px; 
	margin-left: 0px;
}
h1 { font-size: 18px; font-family: Geneva, Arial, Helvetica, sans-serif; color: #4D2C1D; padding-bottom: 10px; }
h2 { font-size: 16px; font-family: Georgia, "Times New Roman", Times, serif; color: #FFB435; background-image:url(images/bg-h2.gif); background-repeat: no-repeat; }
h3, h3 a { font-size: 14px; font-family: Geneva, Arial, Helvetica, sans-serif; color: #4D2C1D; padding-bottom: 10px; text-decoration: none; }
h3 a:hover { text-decoration: underline; }

li { list-style-image: url(images/bullet.gif);  padding-bottom: 5px; }
li a { 	font-family:Arial, Helvetica, sans-serif;
	color: #4D2C1D; }
ul { padding-bottom: 0px; }
.caption-lg { 
	font-family:Arial, Helvetica, sans-serif; 
	font-size: 16px;
	color: #4D2C1D;
}	
#clear {  margin: 0;
    border: 0;
	padding: 0;
    font: inherit;
	line-height: 0;
	font-weight: normal; 
}
#form table { padding-left: 10px; padding-right: 10px; background-color: #CCCCCC; table-layout: fixed; }
#form td { padding: 3px; line-height: normal; }
#form table td input[type="text"] { width: 96%; }
#form table td textarea { width: 98%; }

.main-content {
	padding: 10px; 
	border-top: 8px solid #FFFFFF;
	background-color: #B6B6B6;
	font-family:Arial, Helvetica, sans-serif;
	color: #4D2C1D;
	font-size: 13px;
	line-height: 16px;
	font-weight: bold; 
}
.main-content a { 
	font-family:Arial, Helvetica, sans-serif;
	color: #4D2C1D;
	font-size: 13px;
	font-weight: bold; 
	text-decoration: underline; 
}	
.main-content a:hover { 
	font-family:Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: bold; 
	text-decoration: underline; 
}
.main-sidebar {
	padding: 10px; 
	border-top: 8px solid #FFFFFF;
	background-color: #FFB435;
}
.main-sidebar p, .main-sidebar li, .main-sidebar ul {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
}
.main-sidebar li { margin-left: -22px; }
/* structure */
#container {
	font-size: 1.3em;
	line-height: 1.3em;
	margin: 4px auto; 
	width: 832px;
}
/* ---------------ACCORDION-------------- */
/* (A) TABS CONTAINER */
.tab {
  position: relative;
  max-width: 600px;
}

/* (B) HIDE CHECKBOX */
.tab input { display: none; }

/* (C) TAB LABEL */
.tab label {
  display: block;
  margin-top: 10px;
  padding: 10px;
  color: #fff;
  font-weight: bold;
  background: #FFB435;
  cursor: pointer;
}

/* (D) TAB CONTENT */
.tab .tab-content {
  background: #d0d0d0;
  /* CSS ANIMATION WILL NOT WORK WITH AUTO HEIGHT */
  /* THIS IS WHY WE USE MAX-HEIGHT INSTEAD */
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
}
.tab .tab-content p { padding: 10px; }

/* (E) OPEN TAB ON CHECKED */
.tab input:checked ~ .tab-content { max-height: 100vh; }

/* (F) EXTRA - ADD ARROW INDICATOR */
.tab label::after {
  content: "\25b6";
  position: absolute;
  right: 10px;
  top: 10px;
  display: block;
  transition: all 0.4s;
}
.tab input:checked ~ label::after { transform: rotate(90deg); }

/* ---------------MENU STYLES-------------- */
#home
{
  display: block;
  width: 114px;
  height: 66px;
  background: url(images/menu/home.jpg) no-repeat 0 0;
}
#home:hover
{ 
  background-position: 0 -66px;
}
#home span
{
  position: absolute;
  top: -999em;
}
#about
{
  display: block;
  width: 114px;
  height: 66px;
  background: url(images/menu/about.jpg) no-repeat 0 0;
}
#about:hover
{ 
  background-position: 0 -66px;
}
#about span
{
  position: absolute;
  top: -999em;
}
#adopt
{
  display: block;
  width: 114px;
  height: 66px;
  background: url(images/menu/adopt.jpg) no-repeat 0 0;
}
#adopt:hover
{ 
  background-position: 0 -66px;
}
#adopt span
{
  position: absolute;
  top: -999em;
}
#donate
{
  display: block;
  width: 114px;
  height: 66px;
  background: url(images/menu/donate.jpg) no-repeat 0 0;
}
#donate:hover
{ 
  background-position: 0 -66px;
}
#donate span
{
  position: absolute;
  top: -999em;
}
#sponsor
{
  display: block;
  width: 116px;
  height: 66px;
  background: url(images/menu/sponsor.jpg) no-repeat 0 0;
}
#sponsor:hover
{ 
  background-position: 0 -66px;
}
#sponsor span
{
  position: absolute;
  top: -999em;
}
#photos
{
  display: block;
  width: 114px;
  height: 66px;
  background: url(images/menu/photos.jpg) no-repeat 0 0;
}
#photos:hover
{ 
  background-position: 0 -66px;
}
#photos span
{
  position: absolute;
  top: -999em;
}
#contact
{
  display: block;
  width: 114px;
  height: 66px;
  background: url(images/menu/contact.jpg) no-repeat 0 0;
}
#contact:hover
{ 
  background-position: 0 -66px;
}
#contact span
{
  position: absolute;
  top: -999em;
}