/*
 * Screen style for RSPCA
 * Patrick Litherland, 2005
 */

/*
 * Light blue is #0077a7;
 * Dark  blue is #021f72;

/* defaults */
html {
  background-color: #0077a7;
  color: black;
  font-size: 100%;
  font-family: Arial, Helvetica, Geneva, sans-serif;
  }

body {
  font-size: 80%;
  }

/* headings */
h6 { font-size: 110%; font-style: oblique; }
h5 { font-size: 120%; font-style: oblique; }
h4 { font-size: 140%; font-style: oblique; }
h3 { font-size: 160%; font-variant: small-caps; }
h2 { font-size: 180%; color: #021f72; }
h1 { font-size: 220%; color: #021f72; text-align: left;}

/* Title strip (top) */
div#top {
/*   border: thin blue groove;*/
   padding-left: 25%;
   padding-top: 0;
   padding-bottom: 3%;
   background: #0077a7 url(../img/montage-washed.jpeg) no-repeat;
   background-position: 60% 0%;
}

#top {
   background-color:#0077a7;
   color: black;
}

#top p.bradford {
  margin-top: 0; padding-top: 1em;
  font-size: 300%;
  color: #021f72;
  text-align: left;
  color: #021f72; padding-left: 3em;
}

#top p.crueltyline {
  float: right;
  margin: 0 2em 0 2em;
  text-align: center;
  font-weight: bold;
  font-size: 110%;
  text-transform: uppercase;
}


/* sidebar */
#sidebar {
  background-color: #0077a7;
  color: white;
  }

div#sidebar {
  width: 20%;
  float: left;
  clear: left;
  height: 100%;
  position: absolute;
}

#sidebar {
  text-align: center;
}

#sidebar li {
  display: block;
  list-style-type: none;
}

#buttons a {
  display: block;
  margin-left: 0;
  width: 100%;
/*  line-height: 4;*/
  border-left: medium #a0a0a0 solid;
  border-top:  medium #a0a0a0 solid;
  border-right:  medium black solid;
  border-bottom:  medium black solid;
  background: gray url(../img/mainbutton.png) repeat-y;
  padding-top: 5%;
  padding-bottom: 5%;
 }

#buttons a:link {
  color: black;
  font-weight: bold;
}

#buttons a:visited {
  color: black;
  font-weight: bold;
}

#buttons a:hover {
  color: black;
  font-weight: bold;
  background: white url(../img/selbutton.png) repeat-y;
}

#buttons a:active {
  color: black;
  font-weight: bold;
}


#buttons a.deadlink, deadlink a {
  color: black;
  font-weight: bold;
  background: white url(../img/selbutton.png) repeat-y;
}

/* Submenus within the sidebar */
#buttons ul ul {
  text-align: center;
/*  width: 20em;*/
  background: gray;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  border-top: medium black solid;
  border-left: none;
  border-right: medium black solid;
  }

#buttons ul ul li {
  display: block;
  list-style-type: none;
  width: 80%;
  padding-right: 0;
  margin-right: 10%;
  padding-left: 0;
  margin-left: 10%;
  padding-top: .25em;
  padding-bottom: .25em;
  }

#buttons ul ul li a {
  display: block;
/*  width: 10em;*/
/*  line-height: 2;*/
  border-left: thin #00a0f0 solid;
  border-top:  thin #00a0f0 solid;
  border-right:  thin black solid;
  border-bottom:  thin black solid;
  background: #0077a7;
}

#buttons ul ul li a:link {
  color: white;
  font-weight: bold;
}

#buttons ul ul li a:visited {
  color: #d0d0d0;
  font-weight: bold;
  background-color: #0077a7;
}

#buttons ul ul li a:hover {
  color: #0077a7;
  font-weight: bold;
  background-color: white;
  background-image: none;
}

#buttons ul ul li a:active {
  color: yellow;
  font-weight: bold;
  background-color: #0077a7;
}

#buttons ul ul li a.deadlink {
  background-color: #0077a7;
  background-image: none;
  color: black;
  font-weight: bold;
}


/* Irrelevant, I think, now that
 *  we are marking the anchor,
 * not the li, as "deadlink"
 *
#sidebar ul ul li.deadlink {
  border-left: thin black solid;
  border-top:  thin black solid;
  border-right:  thin #00a0f0 solid;
  border-bottom:  thin #00a0f0 solid;
  background: #0077a7;
  color: #ffbb00;
  font-weight: bold;
  margin-left: 5em;
  padding-top: 5%;
  padding-bottom:  5%;
  }
*/

div#main {
     padding-left: 25%;
     background-color: white;
     padding-top: 3%;
     margin-left: 25%;
     padding-left: 5%;
     margin-right: 5%;
     padding-right: 5%;
     border: thin  inset #021f82;
/* IE does not like position relative here */
/*     position: relative;*/
}


/*
 * For the actual content
 */
#main {
  color: black;
 }

#main ul {
  position: relative;
  margin-left: 1%;
}

#main ul li {
  padding-top: .15em;
  padding-bottom: .15em;
  margin-bottom: .25em;
  list-style: url(../img/paw.png) circle;
}

#main ul ul li {
  padding-top: .15em;
  padding-bottom: .15em;
  list-style-type: circle;
  list-style-image: none;
}

#main ol li {
  margin-bottom: .4em;
}

#main a:link {
  background: white;
  color: #4000f0;
  text-decoration: underline;
/* an alternative scheme...*/
/*  background: #0077a7;*/
/*  color: #ffff00;*/
}

#main a:visited {
  background: white;
  color: #4020c0;
  text-decoration: underline;
/* the alternative...*/
/*  background: #0077a7;*/
/*  color: #aaff00;*/

}

#main a:hover {
  background: #0077a7;
  color: white;
  text-decoration: underline;
}

#main a:active {
  background: white;
  color: #4000f0;
  text-decoration: underline;
/* The alternative...*/
/*  background: #0077a7;*/
/*  color: #00ff00;*/

}

#main img {
  margin-left: 1%;
  margin-bottom: 1%;
}

.bradford {
text-align: center;
}

.charino {
text-align: center;
font-weight: bold;
}

/* page footer */
#footer {
  font-style: oblique;
  font-size: 95%;
  text-align: right;
  clear: both;
}


#footer address {
  margin-right: 5%; /*to match #main*/
}

/* Table layout for contact details */

table.dltable {
  margin-top: 2em;
  margin-bottom: 2em;
  width: 85%;
}

.dltable th {
  font-weight: bold;
  text-align: right;
  border-bottom: thin #0077a7 groove;
  width: 60%;
  padding-right: 10%;
  padding-bottom: 2%;
  }

.dltable td {
  text-align: left;
  border-bottom: thin #0077a7 groove;
  width: 40%;
  padding-left: 10%;
  padding-bottom: 2%;
  }

/* table for shops */
table.shoplist {
  width: 95%;
}

table.shoplist td, table.shoplist th {
  vertical-align: top;
  text-align: left;
}

table.shoplist * {
   margin-top: 0;
   padding-top: 0;
/*   margin-right: 50%;*/
}

table.shoplist td {
   border-bottom: 1px black solid;
}

table.shoplist td.partial {
   border-bottom: none;
}

/* Table for opening hours*/
table.hourstable {
  margin-top: 2em;
  margin-bottom: 2em;
  width: 85%;
}

.hourstable th {
  font-weight: bold;
  text-align: right;
  border-bottom: thin #0077a7 groove;
  width: 30%;
  padding-right: 10%;
  padding-bottom: 2%;
  }

.hourstable td {
  text-align: left;
  border-bottom: thin #0077a7 groove;
  width: 35%;
  padding-left: 10%;
  padding-bottom: 2%;
  }

table.dottedrows td {
  border-bottom: 1px dotted gray;
}

/* Positioning for the adoptable-animals lists */

.animals li {
 width: 80%;
 margin-right: 10px;
 clear: both;
}

ul.animals {
 clear: both;
}


.animals img {
  float: right;
  clear: both;
}


.animals h2 {
/*  font-size: 120%;*/
  font-size: 200%;
  font-variant: small-caps;
  font-weight: bold;
  font-style: italic;
}

.animals th h2 {
/*  font-size: 120%;*/
  font-size: 230%;
  font-variant: normal;
  font-weight: bold;
  font-style: italic;
  margin-bottom: 0;
  padding-bottom: 0;
  text-align: left;
}

.animals h3 {
  font-size: 200%;
  font-variant: small-caps;
  font-weight: bold;
  font-style: italic;
  color: #0077a7;
  margin-bottom: 0;
  padding-bottom: 0;
  text-align: left;
}

.animals td {
  padding-bottom: 1em;
  border-bottom: thin blue groove;
  padding-left: 5%;
}

.animals tr {
  padding-bottom: 1em;
  vertical-align: middle;
/*  border-bottom: thin white groove;*/
}

.animals table {
/*  width: 100%;*/
}

.animals table tr td p:first-letter {
  font-size: 150%;
  font-style: oblique;
  font-weight: bold;
  color: #021f72;
  background: white;
  }

.animals label {
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
  text-align: center;
}

ol li, ul ol li, #main ul ol li {
  list-style-type: decimal;
  list-style-image: none;
  }

.currency {
  text-align: right;
  padding-left: 15px;
}


/* hack to get parent element to "stretch" and fully enclose
 * floated elements within it. Thanks, complexspiral.com.
 */
hr.stretch {display: block; clear: both; visibility: hidden;}

/* misc styles */
.picturecaption {font-style: oblique; }

dt { font-weight: bold;   font-variant: small-caps;}
dt:after {content: ":"}
dd { font-style: oblique; }

.editorialcomment { font-style: italic; }

.envoi {font-style: italic; text-align: right;}

.age { font-style: italic; }

blockquote {
  margin-left: 1em;
  font-weight: bold;
  font-style: oblique;
  }

th.flash {
  background: #dd6060;
  color: black;
  font-size: 140%;
  font-weight: bold;
}

div.notice {
  border: 4px blue solid;
  margin: 10px 20px 10px 20px;
  padding: 10px;
  font-weight: bold;
  font-size: larger;
}

div.notice p {
  background: #f0f080;
  color: black;
  padding: 20px;
  margin: 2px;
}

#main div.notice p a:link {
  background: #f0f080 !important;
  color: black;
}

#main div.notice p a:visited {
  background: #f0f080;
  color: #202020;
}

#main div.notice p a:hover {
  background: black;
  color: #f0f080;
}

#main div.notice p a:active {
  background: #909090;
  color: black;
}

/*
 * suppress background changes when link is an image
 */
.imagelinks a:link,  .imagelinks a:visited,
.imagelinks a:hover, .imagelinks a:active {
  background: transparent ! important;
}