/* reset EVERYTHING from meyerweb.com/eric/tools  v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	}

body {
	line-height: 1.0;
	}

blockquote, q {
	quotes: none;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}

/* remember to define focus styles! */
:focus {
	outline: 0;
	}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
	}

del {
	text-decoration: line-through;
	}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
	}

/* end reset EVERYTHING */
/*						*/

body {
	width: 950px;
	margin: 10px;
	padding: 0;
	font-family: arial, helvetica, sans-serif;
	font-size: 80%;
	}

p {
	margin: 0 0 15px 0;
	font-size: 1.3em;
	line-height: 1.2em;
	}

blockquote {
	 margin: 0 30px;
	}

h1 {
	font-size: 250%;
	text-align:center;
	margin-bottom: 1em;
	}

h2 {
	color:#222288;
	font-size: 200%;
	margin-bottom:.5em;
	}

h3 {
	color:#222288;
	font-size: 150%;
	line-height:normal;
	margin-bottom:.5em;
	}

h4 {
	color:#222288;
	font-size: 125%;
	line-height:normal;
	margin-bottom:.5em;
	}

#main ul {
	margin-bottom:0.5em;
	font-size: 1.3em;
	line-height: 1.1em;
	list-style-position:outside;
	list-style-type:disc;
	}

#main ol {
	margin-bottom:0.5em;
	font-size: 1.3em;
	line-height: 1.1em;
	list-style-position:outside;
	list-style-type:decimal;
	}

#main li {
	margin-bottom:0.5em;
	}

#sidemenu a {
	text-align:center;
	color:#0000FF;
	display:block;
	padding-top: 6px;
	height: 24px;
	text-decoration:none;
	}

#sidemenu p {
	margin: 4px;
	font-size: 1.1em;
	line-height: 1.1em;
	}

/* rollover buttons, four states, one image */
/* button is 160 * 30 for each */

#sidemenu ul {
	list-style: none;
	margin:0;
	padding:0;
	}

#sidemenu ol {
	list-style: none;
	margin:0;
	padding:0;
	}

#sidemenu ul li {
	height: 30px;
	font-weight:bold;
	font-family: Verdana, Arial, sans-serif;
	margin:0;
	padding:1px;
	}

#sidemenu ol li {
	height: 30px;
	font-weight:bold;
	font-family: Verdana, Arial, sans-serif;
	margin:0;
	padding:1px;
	}

/* span in UL makes font smaller to allow lines of text on verbose buttons */
#sidemenu ul span {
	position: relative;
	top: -4px;
	font-size:11px;
	line-height: 0.9;
	}

/* span in OL moves text to the right to stay centered on sub-type buttons    */
/* also forces formatting for two lines of text, so remember to use two lines */
#sidemenu ol span {
	position: relative;
	left:10px;
	top: -4px;
	font-size:11px;
	line-height: 0.9;
	}

/* for all NORMAL list items (use UL), grab the blank image and show the top part */
#sidemenu ul a:link, #sidemenu ul a:visited {
	display: block;
	float: left;
	width: 160px;
	height: 23px;
	background-image:url(images/buttons/sidebutton30x160-all-B.jpg);
	background-repeat:no-repeat;
	}

/* for all INDENTED list items (use OL), grab the blank indented image and show the top part */
#sidemenu ol a:link, #sidemenu ol a:visited {
	display: block;
	float: left;
	width: 160px;
	height: 23px;
	background-image:url(images/buttons/subsidebutton30x140-all-B.jpg);
	background-repeat:no-repeat;
	}

/* for all links, if hovering, slide to the second chunk of the image you're using */
#sidemenu a:hover {
	background-position: 0 -30px;
	}

/* for all links, if clicking, slide to the third chunk of the image you're using */
#sidemenu a:active {
	background-position: 0 -60px;
	padding-top: 9px;
	height: 21px;
	color:#222288;
	}

/* but for the link where the item matches the body class, */
/* use the fourth (gray) chunk, no matter what mouse state */
/* need one of these suckers for every item listed in the sidemenu */
/* and every page needs a matching ID on the BODY */
#about #sidemenu li.about a,
#adopt #sidemenu li.adopt a,
#blood #sidemenu li.blood a,
#calendars #sidemenu li.calendars a,
#contact #sidemenu li.contact a,
#donate #sidemenu li.donate a,
#events #sidemenu li.events a,
#foster #sidemenu li.foster a {
	background-position: 0 -90px;
	}

#igive #sidemenu li.igive a,
#index #sidemenu li.index a,
#links #sidemenu li.links a,
#ready #sidemenu li.ready a,
#wishlist #sidemenu li.wishlist a {
	background-position: 0 -90px;
	}


/* this set is for one-column pages, so rarely used */

#wrap {
	float: left;
	width: 100%;
	background: #EEF0FF;
	}

#content {
	margin: 0 auto;
	width: 900px;
	}

#main {
	float: right;
	padding: 10px 0;
	width: 100%;
	}

/* end one-column page stuff */

/* two-column pages */

.twocolumn #wrap {
/* see IE6/Win hack at bottom */
	background: #EEF0FF url(styles/twocolumn_bg.gif) repeat-y top center;
	}

.twocolumn #main {
	float: right;
	width: 710px;
	}

.twocolumn #sidemenu {
	float: left;
	clear: left;
	width: 165px;
	}

/* JFF - background-color sets bar for side links */

#sidemenu {
	color: #000000;
	background-color: #A4CDF7;
	padding: 1px;
	}


/* Styles for putting fancy schmancy boxes, mostly on the home page */
/* Billboard creates a wide backdrop */
/* spotlight1, 2, and 3 make individual boxes the right size for one, two, or three boxes */
/* divClear um, clears an otherwise empty div, so floats will stop floating */
/* As of Feb 2009, the main section was 710px wide */

.billboard {
	background-color: #A4CDF7;
	background-image: url(images/brindle-large-blue.jpg);
	background-position: bottom right;
	background-repeat: no-repeat;
	overflow: hidden;
	padding: 10px;
	width: 100%;
	margin-bottom: 20px;
	}

.spotlight1 {
	background-color: #A4CDF7;
	background-image: url(images/spot-bk5.jpg);
	background-repeat: repeat-x;
	width: 400px;
	margin: 15px 0px 15px 150px;
	padding: 10px;
	float: left;
	}

.spotlight2 {
	background-color: #A4CDF7;
	background-image: url(images/spot-bk5.jpg);
	background-repeat: repeat-x;
	width: 305px;
	margin: 15px;
	padding: 10px;
	float: left;
	}

.spotlight3 {
	background-color: #A4CDF7;
	background-image: url(images/spot-bk5.jpg);
	background-repeat: repeat-x;
	width: 216px;
	margin: 5px;
	padding: 5px;
	float: left;
	}

.divClear {
	clear:both;
	}

/* next three styles go in the header block, in logo.txt */

.masthead {
	width:100%;
	}


.logo {
	padding: 0 0 0 50px;
	float: left;
	}

.rotating {
	border-style: outset;
	border-width:5px;
	margin: 40px 50px 0px 50px;
	float: right;
	}

.stripe {
	clear:both;
	padding: 2px 0 0 0;
	}
	
	
/* boxes and photo placement */
.leftphoto {
  float: left;
  margin: 10px 10px 10px 0;
  padding: 0;
}

.rightphoto {
  float: right;
  margin: 10px 0px 10px 10px;
  padding: 0;
}

.alertbox {
  border: 3px solid gray;
  width: 35%;
  padding: 1em 1em 0em 1em;
  margin: 1em 1em 1em 2em;
  float: right;
}

.nobox {
  border: 0px;
  padding: 0em;
  margin: 0em 1em 0em 1em;
  float: left;
}

.hairlinebox {
  border: 1px solid black;
  padding: 2em 2em 1em 2em;
  margin: 2em;
}

/* styles for ready page bottom section (recently adopted) */
.adopted p {
	color:#999999;
	}

.adopted h3 {
	color:#009966;
	}