/************/
/* ELEMENTS */
/************/


a:link {
  color: #03c;
}


a:visited {
  color: #909;
}


a:active {
  color: #f00;
}


blockquote, .address {
  font-style: italic;
  margin: 1em 2em;
}


body {
  color: #000;
  margin: 0em;
  padding: 1.2em 0 0 1.2em;
  background-color: #c6c3b5;
  font-size: 10px;
  font-family: Verdana, Arial, sans-serif;
  width: 94.8em;
}


caption {
  margin: 0 -1px -1.5em -1px;
  border: 2px #000 solid;
  border-bottom: none;
  padding: .2em;
  background-color: #fce9ad;
  font-weight: normal;
  text-align: center;
  font-family: 'Trebuchet MS', 'Bitstream Vera Sans', verdana, arial, sans-serif;
}


div {
  vertical-align: top;
}



dt {
  font-weight: bold;
  float: left;
  clear: left;
  margin-right: .5em;
}


fieldset {
  margin: 1.5em 0;
  padding: 1em;
  clear: both;
  border: 1px #800 solid;

}


em {
  font-style: italic;
}


fieldset p {
  clear: both;
  margin: .5em;
}


h2 {
  font-size: 150%;
}


h3 {
  font-size: 118.75%;
  color: #900;
  line-height: 1.2631;
  margin: 1.2631em 0;
}


html {
  background-color: #c6c3b5;
}


img {
  display: block;
  border: none;
}


label {
  display: block;
  float: left;
  width: 10em;
  margin-top: .2em;
}


form#scavenger_hunt label {
  display: inline;
  float: none;
  width: auto;
}


form#scavenger_hunt p {
  margin: .5em 0 1.5em 0;
}


legend {
  font-size: 125%;
  font-weight: bold;
  font-family: 'Trebuchet MS', verdana, sans-serif;
}


li {
  margin-bottom: .5em;
}


ol {
  list-style-image: none;
  margin-left: 2em;
  padding-left: 0;
}


p, h4 {
  font-size: 100%;
  line-height: 1.5;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}


pre {
  /* I hate Internet Explorer, Microsoft, its employees,
     their children, and their children's children.  */
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
}


table {
  margin: 0;
  width: 100%;
  margin: 1.5em 0 1.5em 0;
  border: 2px #000 solid;
  border-collapse: collapse;
}


td {
  border: 2px #000 solid;
  padding: .3em;
  text-align: left;
  vertical-align: top;
}


td, th {
  font-size: 91.667%;
}


textarea {
  clear: both;
  display: block;
  margin-top: .5em;
}


th {
  padding: .3em;
  background-color: #fc6;
  text-align: center;
  font-weight: bold;
  border: 2px #000 solid;
}


th.section_header {
  background-color: #fce9ad;
}


ul, ol, dl {
  margin: 1.5em 0 1.5em 2em;
  padding: 0;
  line-height: 1.5;
  margin-left: 2em;
}


ul {
  list-style-image: url('/images/paw_bullet.png');
}


ul h4 {
  font-weight: bold;
  font-size: 110%;
  color: #000;
  padding: 0;
  margin-top: 2em;
}


/***********/
/* CLASSES */
/***********/


.article_heading h1 {
  font-size: 140%;
}


.article_heading h2 {
  font-size: 110%;
}


.article_heading h3 {
  font-size: 100%;
}


.article_heading h3 {
  margin: 0;
  padding: 0;
}


.franky_fund_featured {
  background-color: #fffce7;
  border: 1px #f6f0f2 solid;
  clear: both;
  padding: 1em;
  margin: 0 0 1em 1em;
}


.franky_fund_featured description {
  float: left;
  text-align: justify;
}


.franky_fund_featured img {
  float: right;
  margin-left: 1em;
}


.big {
  font-size: 110%;
}


.bordered {
  padding: 3px;
  margin: 2em;
  border: 1px #ececec solid;
}


.box {
  font-size: 87.5%;
  width: 12em;
  height: 13em;
  margin: 0 auto;
  padding: .2em;
  text-align: center;
  background-position: 50% 2em;
  background-repeat: no-repeat;
}


.box a {
  display: block;
  width: 100%;
  height: 100%;
  font-family: Arial, Verdana, sans-serif;
  font-weight: bold;
  color: #900;
}


.centered {
  display: block;
  margin: 0 auto;
}


.centered_text {
  text-align: center;
}


table.centered_text td {
  text-align: center;
  vertical-align: middle;
}


.cleared {
  clear: both;
}


.clearfix {
  display: block;
}


.clearfix:after {
  content: "."; 
  display: block; 
  height: 0em; 
  clear: both; 
  visibility: hidden;
}


.columnar {
  padding-left: 1em;
  padding-right: 1em;
}


.donate_column1 {
  width: 14em;
}


.donate_column2 {
  width: 36em;
}


.fancy {
  text-align: center;
  font-size: 125%;
  font-variant: small-caps;
  font-family: georgia, 'Trebuchet MS', sans-serif;
  letter-spacing: .09em;
}


h3.fancy {
  font-size: 150%;
  margin: 4em 0 2em 0;
}


/* Any div containing the "Featured Pet" script */
.featured_pet {
  clear: both;
  margin-top: 0em;
  margin-bottom: 1em;
  padding: 1em;
  border: 1px #000 solid;
  background-color: #fce9ad;
}


.featured_pet p {
  margin-top: 0em;
}


.featured_pet a {
  font-weight: bold;
}


/* An underline was showing on the BR.
   I don't know about the block display. */
.featured_pet br {
  display: block;
  text-decoration: none;
}


.featured_pet font {
  font-size: 80%;
}


.floating_icon {
  text-decoration: none;
}


/* IE refuses to center an inline element vertically,
   so we go through a lot of trouble to make the link
   a block element and not screw everything else up. */
.floating_icon_link {
  display: block;
  float: right;
  font-style: italic;
  line-height: 48px;
  font-size: 110%;
  padding-left: .3em;
}


.form_errors {
  border: 1px #e3e3e3 solid;
  background-color: #ffd;
  padding: 1em 2em;
  margin: 1em 0;
}


.form_errors h3 {
  color: #ae0b0a;
}


/* A Happy Tail div */
.happy_tail {
  border: 1px #ffdd78 solid;
  background-color: #fce9ad;
  margin: .5em;
  text-align: center;
  width: 200px;
}


.happy_tail .caption {
  padding: .5em;
  font-size: 80%;
}


.happy_tail .caption a {
  display: block;
  color: #900;
}


.happy_tail img {
  border-bottom: 1px #ffdd78 solid;
}


.hover_underline {
  text-decoration: none;
}


.hover_underline:hover {
  text-decoration: underline;
}


/* A left-floating Happy Tail */
.ht_left {
  float: left;
  margin-left: 0em;
}


/* A right-floating Happy Tail */
.ht_right {
  float: right;
  margin-right: 0em;
}


.indented {
  padding-left: 2em;
}


.invisible {
  display: none;
}


.left_aligned {
  float: left;
  margin-left: 0;
}


.left_aligned.columnar {
  padding-left: 0;
}


.lower {
  margin-top: 4em;
}


/* The caption, or title, of a news item */
.news_caption {
  font-family: verdana, arial, sans-serif;
  color: #444;
  letter-spacing: .2em;
  border-bottom: 2px #b3ac8d solid;
  font-weight: bold;
  padding: .2em 0 .2em .5em;
  position: relative;
  left: -.5em;
  right: -.5em;
}


/* The date that is below a news caption */
.news_date {
  color: #444;
  font-family: verdana, arial, sans-serif;
  font-size: 80%;
  padding: .2em 0;
}


/* Wraps around a whole news entry */
.news_item {
  margin: 1.5em 0;
  padding: 0 2em 0 .5em;
}


.no_decoration {
  text-decoration: none;
}


.notice {
  background-color: #fffce7;
  padding: 1em;
  border: 1px #f6f0f2 solid;
  clear: both;
}


div.notice {
  margin-top: 1em;
  margin-bottom: 1em;
}

  
form.paypal {
  display: inline;
}


form.donate {
  position: relative;
  top: 1px;
}


/* The link text that goes beside the photo
   gallery image */
.photo_gallery_link {
  /* Height of image-x-generic.png */
  min-height: 22px;
  line-height: 16px;
}


.photo_gallery_link a {
  color: #900;
}


.photo_gallery_link a img {
  display: inline;
}


.photos a {
  text-decoration: none;
}

  
.photos img {
  margin: .1em;
  display: inline;
}


.preformatted {
  white-space: pre;
}


.radio_buttons label {
  float: none;
  display: inline;
  margin-right: 2em;
}


.required_indicator {
  color: #f00;
  font-weight: normal;
}


.right_aligned {
  float: right;
  margin-right: 0;
}


.right_text {
  text-align: right;
}


.short_labels label {
  width: 8em;
}


.smaller {
  font-size: 80%;
}


img.sponsor {
  margin: 2em auto;
}


.photos img.sponsor {
  margin: .2em 1em;
}


.sub_nav {
  margin: 1em 0;
  text-align: center;
}


.sub_nav li {
  display: inline;
  margin: 0 2em;;
}


.sub_nav li a {
  color: #700;
  padding-left: 20px;
  background-image: url('/images/jump.gif');
  background-repeat: no-repeat;
  font-family: 'Trebuchet MS', verdana, sans-serif;
  font-style: italic;
}


.submit_button {
  display: block;
  margin: 2em auto 1em auto;
  width: 50%;
}


/* Used only for Franky Fund featured animals. Internet Explorer
   doesn't support multiple classes, of course. */
.thin {
  width: 200px;
}


/* A table of thumbnails */
.thumbnails {
  border: 2px #000 solid;
  margin: 0 auto;
}


.thumbnails td {
  padding: .2em;
  vertical-align: middle;
  text-align: center;
}


.thumbnails td img {
  display: inline;
}


/* hCard stuff */

.vcard .type {
  display: none;
}


.vet {
  margin-top: 2em;
  text-align: center;
}


/* A compliance icon */
.w3icon {
  display: inline;
  height: 31px;
  width: 88px;
  padding: .4em;
}


.warning {
  /* Height of warning.png */
  line-height: 22px;
  font-style: italic;
  color: #e00;
}


.warning img {
  display: inline;
}


/* A "Wish List" table, from the donations page */
.wish_list {
  margin: 0 auto;
  margin-top: 2em;
}


/*******/
/* IDS */
/*******/


/* The box on the left under the nav menu */
#barcstoberfest_nav_box {
  background-color: #eff3d6;
  border: 1px #000 solid;
  height: auto;
  margin-bottom: 1em;
  padding: 5px 0;
  width: auto;
}


#barcstoberfest_poster_thumbnail {
  float: right;
  margin: 0 0 0 1em;
}


/* The BAWA logo is an absolute positioning hack to get the list
   of members to line up right and be linked without using tables
   or image maps. */
#bawa_logo_wrapper {
  width: 343px;
  position: relative;
  margin-bottom: 6em; 
}


#bawa_members {
  margin: 0;
  list-style: none;
  position: absolute;
  top: 58px;
  left: 123px;
  width: 30em;
  font-size: 90%;
  line-height: 1;
}


/* Wraps everything in the body element. Allows us
   to set a pixel width based on the body's font size
   without having a tiny 10px font (like the body does). */
#body_wrapper {
  font-size: 120%;
}


/* The page text */
#content_area {
  padding: 1.5em 3em 2.5em 3em;
  border: 1px #000 solid;
  border-top: none;
  background-color: #fff;
  margin-bottom: 1em;
}


/* Holds the page_title, content_area, and disclaimer */
#content_column {
  float: right;
  /* Body width is 960px.
     Nav column with 1em margins on both sides is 15.4em.
     Font size inside the body is 120% = 12pt by default.
     960 - (15.4 * 12)) / 16 = 48.45 */
  font-size: 16px;
  width: 48.45em;
}


#directions ul {
  padding-left: 0em;
  margin-left: 2em;
}


#directions ul li {
  margin-bottom: 1em;
}


/* The disclaimer at the bottom of every page */
#disclaimer {
  margin-bottom: 2em;
  border: 1px #000 solid;
  background-color: #fff;
  padding: 1em;
  font-size: 75%;
  text-align: center;
}


#disclaimer p {
  margin: 0;
  padding: 0;
}


#donation_subscriptions td input {
  width: 40%;
  margin: .5em;
}


#hills_ad {
  border: 1px #000 solid;
  margin: 1em auto;
}


/* A div containing the logo at the top */
#logo_container {
  position: relative;
  background-color: #ffdd78;
  border: 1px #000 solid;
  margin-bottom: 1em;
  padding: .5em;
  clear: both;
}


#logo_container .url {
  color: #009;
  text-decoration: none;
}


#logo_container img {
  float: left;
}


#logo_container h1, #logo_container .vcard {
  font-family: "Arial Black", "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: right;
}


#logo_container h1 {
  font-size: 200%;
}


#logo_container .vcard .adr, #logo_container .vcard .tel {
  font-size: 120%;
}


#logo_container .vcard p {
  text-align: right;
  margin-bottom: 0;
  padding-bottom: 0;
  font-family: Verdana, Arial, sans-serif;
}


#logo_container #new_hours {
  position: absolute;
  left: 275px;
  bottom: 10px;
  font-style: italic;
}


/* The box containing the nav button list */
#nav_area {
  background-color: #eff3d6;
  text-align: center;
  border: 1px #000 solid;
  margin-bottom: 1em;
}


#nav_area * {
    /* I don't know why, but without the z-index set here,
     the Paypal buttons on the donate page appear above
     the popup menus. */
  z-index: 1;
}


/* The list of links in the nav_area */
#nav_area ul {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}


#nav_area ul li {
  position: relative;
  display: block;
  margin: 0;
  border-top: 1px #000 solid;
}


#nav_area ul li a {
  display: block;
  padding: .5em;
  line-height: 1.5em;
  text-decoration: none;
  font-weight: bold;
  background-color: #eff3d6;
  color: #700;
}


#nav_area ul li a em {
  color: #f00;
  font-style: normal;
}


#nav_area ul li a:hover {
  background-color: #ffdd78;
}


#nav_area ul li a:hover {
  color: #002d54;
}


/* This style will be set on the link button
   that represents the current page. */
#nav_area ul li a.selected {
  border-top-color: #000;
  border-bottom-color: #000;
  background-color: #ffdd78;
  color: #000;
}


#nav_area ul ul {
  width: 13.4em;
  display: none;
  position: absolute;
  top: -1px; /* Offset for the top border */
  left: 100%;
  border-right: 1px #000 solid;
  border-bottom: 1px #000 solid;
}


#nav_area ul ul li a {
  border-left: 4px #700 solid;
}


#nav_area ul ul li a.selected {
  border-left: 4px #000 solid;
}


#nav_area ul ul li a:hover {
  border-left: 4px #004d74 solid;
}


#nav_area ul li:hover ul {
  display: block;
}


/* Contains the nav_area and featured_pet boxes */
#nav_column {
  float: left;
  width: 13.4em;
}


/* The "Menu" header for nav_area */
#nav_header {
  height: 1.5em;
  background-color: #eff3d6;
  color: #036;
  font-family: "Arial Black", "Trebuchet MS", Verdana, Arial, sans-serif;
  font-size: 200%;
  text-align: center;
}


/* The box containing the title of the current page;
   it goes right at the top of content_area */
#page_title {
  height: 1.5em;
  background-color: #fce9ad;
  border: 1px #000 solid;
  color: #036;
  font-family: "Arial Black", "Trebuchet MS", Verdana, Arial, sans-serif;
  font-size: 200%;
  text-align: right;
  padding-right: 1em;
}


#pet_junkie_ad {
  border: 1px #777 solid;
  margin: 1em auto;
}

/* The Petpoint iframe */
#petpoint {
  border: 1px #a00 dotted;
  display: block;
  height: 700px;
  width: 100%;
}


#pets911 {
  margin: 1em 0;
  width: 100px;
}


#pets911 * {
  border: none;
  padding: 0;
  margin: 0;
}


#pets911 td {
  border: 1px #000 solid;
}


#please_donate {
  float: right;
  background-image: url('/images/heart.png');
}


#please_donate_franky_fund {
  background-image: url('/images/franky_fund_dog.png');
  /* The text is two lines, so the background needs to be down farther. */
  background-position: 50% 3em;
}


/* Again, be over-specific to override the values
   specified for the .box class */
#nav_column #please_donate_franky_fund {
  background-position: 50% 95%;
}


#nav_column #please_donate_franky_fund .hover_underline {
  font-size: 95%;
}


/* The map from the directions section */
#shelter_map {
  margin-top: 1em;
  margin-bottom: 1em;
}


/* The floating "View Our Pets" box
   underneath the navigation */
#view_our_pets {
  float: left;
  background-image: url('/images/animal_search.png');
}



#volunteer_positions h4 {
  color: #000;
  margin-bottom: 25px;
}


#volunteer_positions h4 img {
  display: inline;
  position: relative;
  left: 25px;
  top: 10px;
}


#volunteer_positions p {
  margin-top: -1em;
  margin-bottom: 3em;
}



/* A div containing the W3C icons in the disclaimer */
#w3icons {
  float: right;
}