/**** Copyright (c) 2006-2007 West Suburban Humane Society ****/

body {
  font: 76% "Arial","Helvetica",sans-serif;
  line-height: 160%;
  border: 1px solid black;
  margin: 8px 8px 20px 8px;
  min-width: 42em;
}

h1,h2,h3,h4,h5,h6 {
  padding-bottom: 0;
  margin: 0.75em 0 0.25em 0;
}

h1,h3,h5 {
  color: #b53532;
}

h1 {
  font: bold italic 1.5em "Times New Roman","Times",serif;
}

h2 {
  font: bold 1.25em "Arial","Helvetica",sans-serif;
}

h3,h4 {
  margin-top: 1.25em;
}

h3,h4,h5,h6 {
  font: bold 1em "Arial","Helvetica",sans-serif;
}

h1 span {
  font-size: 0.8em;
}

p {
  font-size: 1em;
  margin: 0.25em 0 1em 0;
}

a {
  color: #b53532;
  text-decoration: underline;
}
a:hover {
  background-color: #e6e6e6;
}

hr {
  clear: both;
  margin: 1em 0;
  color: #504d4d;
  background-color: #504d4d;
}

ul {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  font: bold italic 1em "Times New Roman","Times",serif;
  color: white;
  background-color: #b53532;
  text-align: left;
  padding: 1px 4px;
}

td {
  padding: 1px 4px;
  border: 1px solid #ccc;
  vertical-align: top;
}


/************** Page Layout Elements *************/

div#header {
  color: white;
  background-image: url(../img/background.gif);
}
div#admin {
  text-align: right;
  margin-right: 4em;
}
div#admin a {
  color: white;
}
div#admin a:hover {
  color: black;
  background-color: transparent;
}

div#logo {
  width: 100%;
  height: 112px;
  position: relative;
}
div#logo img {
  position: absolute;
  top: 0;
}
img#logo_left {
  left: 5px;
  border: 0;
}
img#logo_text {
  left: 10%;
  border: 0;
}
img#logo_dogs {
  left: 66%;
  border: 0;
}
img#logo_right {
  right: 5px;
  border: 0;
}

div#menu {
  background-color: black;
  color: white;
  padding: 2px 125px 2px 85px;
  margin: 0;
}
div#menu table {
  width: 100%;
  border-collapse: separate;
}
div#menu table td {
  text-align: center;
  font-weight: bold;
  font-size: 0.92em;
  padding: 0;
  border: none;
}
div#menu a {
  text-transform: uppercase;
  text-decoration: none;
  color: white;
}
div#menu a:hover {
  text-decoration: underline;
  color: #b53532;
  background-color: transparent;
}

div#main {
  margin-top: 5px;
  padding-left: 14em;
  padding-right: 14em;
}
div#cntr_col {
  position: relative;
  float: left;
  width: 100%;
  padding: 8px 0;
}
div#left_col {
  position: relative;
  float: left;
  width:12em;
  padding: 8px 1em;
  right: 14em;
  margin-left: -100%;
}
/* CSS-compliant browsers ignore styles preceded by "* html",
 * but MS Internet Explorer doesn't so this is an IE fix: */
* html div#left_col { left: 14em; }
div#right_col {
  position: relative;
  float: left;
  width:12em;
  padding: 8px 1em;
  margin-right: -14em;
}

div#margins {
  padding: 0 1.5em;
}

div#address {
  clear: both;
  font-weight: bold;
  font-size: 0.95em;
  text-align: center;
  color: white;
  background-color: black;
  padding: 4px 0;
}

div#footer {
  font-size: 0.9em;
  text-align: center;
  color: white;
  background-color: transparent;
  background-image: url(../img/background.gif);
  padding: 4px 0;
}
div#footer hr {
  width: 100%;
  height: 1px;
  margin: 0 0 4px 0;
  color: white;
  background-color: white;
  border: none;
}
div#footer a {
  color: white;
  background-color: transparent;
}
div#footer a:hover {
  color: black;
  background-color: transparent;
}
img.badge {
  float: right;
  margin-top: 2px;
  border: 0;
}

/************************ NAV LISTS **********************/
#left_col ul.nav {
  margin: 0;
  padding: 0;
}

ul.nav {
  margin-top: 0;
  padding-left: 0;
}

ul.nav li {
  list-style: square inside url(../img/bullet.gif);
}

/************************ RED BOXES **********************/
div.box {
  border: 1px solid #b53532;
  margin: 0 0 8px 0;
  font-size: 0.95em;
  line-height: 140%;
}
div.box h1 {
  font: italic bold 1.1em "Times New Roman","Times",serif;
  color: white;
  background-color: #b53532;
  margin: 0;
  padding: 2px 0.3em;
}
/* IE fix: */
* html div.box h1 {
  color: #b53532;
  background-color: transparent;
  margin-bottom: 1px;
}
div.box h1.news {
  font: bold 1.1em "Arial","Helvetica",sans-serif;
  color: white;
  background-color: #b53532;
  margin: 0;
  padding: 2px 0.3em;
}
/* IE fix: */
* html div.box h1.news {
  color: #b53532;
  background-color: transparent;
  margin-bottom: 1px;
}
div.box h1 a {
  color: white;
  text-decoration: none;
}
div.box h1 a:hover {
  color: #e6e6e6;
  background-color: transparent;
  text-decoration: underline;
}
div.box h2 {
  font: bold 0.95em "Arial","Helvetica",sans-serif;
  color: #b53532;
  margin: 8px 0 0 0;
  padding: 0 0.5em;
}
div.box h3 {
  font: normal 0.95em "Arial","Helvetica",sans-serif;
  margin: 8px 0;
  padding: 0 0.5em;
}
/* IE fix: */
* html div.box h1 {
  color: #b53532;
  background-color: transparent;
  margin-bottom: 1px;
}
div.box p {
  color: #504d4d;
  margin: 0;
  padding: 0 0.5em;
  font-size: 0.95em;
}
div.box li {
  font-size: 0.95em;
}
div.box p.news {
  color: #8e8e8e;
}
div.box img {
  border: none;
  vertical-align: top;
}
div.box img.bullet {
  vertical-align: text-top;
}
div.box img.wide {
  width: 100%;
}
div.box hr {
  margin: 2px 0 0 0;
  width: 100%;
  height: 3px;
  color: #b53532;
  background-color: #b53532;
  border: none;
}
/* IE fix: */
* html div.box hr {
  display: none;
}

div.box div.right {
  float: right;
}
div.box form {
  margin: 0.2em 0 0.2em 0;
}
div.box form input.box {
  padding: 2px;
  border: 1px solid #ccc;
  background-color: #eee;
}
div.box form input.submit {
  font-size: 0.9em;
}
div.box form img {
  vertical-align: baseline;
}

/************************ MISC CLASSES **********************/

@media screen {
  div.paws {
    margin: 1em 0;
    clear: both;
    height: 21px;
    background-image: url(../img/paw_gray.gif);
    background-repeat: repeat-x;
  }
  div.paws hr {
    display: none;
  }
}

ul.paws {
  padding-left: 0.5em;
}
ul.paws li {
  list-style: square inside url(../img/paw_black.gif);
  padding: 0.2em 0;
}
/* IE fix: */
* html ul.paws li a {
  padding-left: 0.2em;
}

img.bullet {
  border: none;
  vertical-align: baseline;
  width: 1em;
  height: 1em;
}

img.head {
  width: 25%;
  margin: 1em;
  padding: 2px;
  border: 1px solid #b53532;
}

img.portrait {
  width: 90%;
  margin: 0 10% 0 0;
  padding: 2px;
  border: 1px solid #b53532;
}

img.pledge {
  width: 90%;
  border: none;
  margin: 5%;
}

img.fullsize {
  width: 100%;
  border: none;
}

a.more {
  font: bold 0.9em "Arial","Helvetica",sans-serif;
}

.red {
  color: #b53532;
}
.gray {
  color: #8e8e8e;
}

.indent {
  margin: 0.5em 2em;
}

a.indent:hover {
  background-color: transparent;
}

br.left {
  clear: left;
}
br.right {
  clear: right;
}
br.both {
  clear: both;
}

/************************* TWO COLUMNS *********************/

div.pair div.left {
  float: left;
  width: 48%;
  margin-right: 2%;
}
div.pair div.right {
  float: left;
  width: 48%;
  margin-left: 2%;
}

/************************* Page-specific stuff *************/

div.animal {
  margin: 0.5em 0 1em 0;
}
div.list-head {
  position: relative;
  float: left;
  width: 25%;
}
div.list-head img {
  width: 100%;
  border: 1px solid #b53532;
}
div.list-head img.overlay {
  position: absolute;
  top: 0;
  left: 0;
}
div.list-text {
  position: relative;
  float: left;
  margin: 0 0 0 5%;
  width: 70%;
}
div.private {
  background-color: #ffc;
  border: 1px solid #44f;
}

div.box.feature {
  width: 12em;
  margin: 1em;
  float: left;
}

div.album {
  position: relative;
  margin: 0 0 0 30%;
  padding: 0;
}
img.album-cover {
  float: left;
  width: 25%;
  margin: 0;
  padding: 2px;
  border: 1px solid #b53532;
}

ul#thumbnails {
  float: left;
  list-style-type: none;
  text-align: center;
  margin: 0.5em 0 1.5em 0;
  padding: 0;
}

ul#thumbnails li {
  list-style-type: none;
  float: left;
  margin: 0.3em;
  padding: 0;
  width: 156px;
  height: 156px;
  vertical-align: top;
}

ul#thumbnails li img {
  padding: 2px;
  border: 1px solid #b53532;
}

#thumbnails a:hover {
  background-color: white;
}
#nohover a:hover {
  background-color: white;
}

cite.copyright {
  font: 0.6em "Arial","Helvetica",sans-serif;
}

/*********************** ShelterCare advert ************************/
div.ShelterCare {
  margin: 0.5em 1.5em;
}
div.ShelterCare img {
  width: 468px;
  height: 60px;
  border: 0;
  float: left;
  margin: 0 1em 0.2em 0;
}
div.ShelterCare p {
  font-size: 0.95em;
  line-height: 130%;
  color: #504d4d;
}

/*********************** Overlay Frame ***********************/
div#overlay_off {
  display: none;
}

div#overlay {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 80%;
  z-index: 1;
  color: white;
  padding: 1em;
  border: 4px outset white;
}

div#overlay img#bark {
  float: right;
  width: 35%;
  border: none;
}

div#overlay h1,div#overlay h2,div#overlay h3 {
  color: white;
  text-align: center;
}

div#overlay div#close_box {
  position: absolute;
  top: 3px;
  right: 3px;
  font-weight: bold;
  color: white;
  background-color: #800;
  border: 2px outset #800;
  cursor: pointer;
}
div#overlay h4#close_txt {
  text-align: center;
  padding: 2px;
  color: white;
  background-color: #800;
  border: 2px outset #800;
  cursor: pointer;
}
div#overlay a:hover {
  background-color: black;
}