body {background-color:#69c;
font-family: arial;
font-size: 100%;}

#banner{
background: url(images/banner2.jpg);
background-repeat:no-repeat;
text-align:left;
height:129px;
}

#banner a { 
display: block; 
height: 100%; 
} 

#content {
padding-bottom:0px;
background-color:#fff;
}

#content div {
float:left;
}

#menu {
background-color:#eee;
z-index:1;
position:relative;
display: inline;
float:right;
top:-20px;
}

#content-right {
width:200px;
background-color:#fff;
}

#content-right p {
margin-left: 10px;
}

#content-main {
width:580px;
padding:10px 10px 10px 10px;
background-color:#fff;
}

#news {
width:200px;
background-color:#98bce1;
}

#newstext {
font-size:80%;
padding-left:6px;
padding-bottom:10px;
}

#moreinfo {
font-size:80%;
padding-left:6px;
padding-bottom:10px;
width:194px;
background-color:#eee;
}

#standard {
width:570px;
padding-bottom:20px;
}

#standard dd {
font-size:80%;
}

#standard dt {
font-size:90%;
font-weight:bold;
}

#footer {
background: url(images/footerlines.jpg);
background-repeat:repeat-x;
padding:25px 0 10px 0;
float:left;
border:none;
width:800px;
height:50px;
text-align:center;
clear:both;
}

#bottom {
clear:both;
text-align:right;
background-color:#fff;
}

#wrapper {
background-color:#fff;
width: 800px;
border:solid;
border-width:0.250em;
margin:0px auto;
overflow: auto; 
}

img {border:none;
}

img.left {padding:5px;
float:left;
}

img.right {padding:5px;
float:right;
}

li.footer {
display:inline;
padding: 1em; 
vertical-align:middle;
}

a {
text-decoration:none;
}

dl.badfoods {
font-size:90%;
}

dl.badfoods dd {
margin-bottom:10px;
}

dt {
font-weight:bold;
}

dd {
font-size:90%;
margin: 0; 
padding: 0; 
}

p.shortline {
line-height:1px;
font-size:80%;
}

.centertext {
text-align:center;
}

div.desc {text-align: center;
font-size: 0.7em;
width: 170px;
margin: 1px 1px 0 1px;}

div.greybox {
background-color:#eee;
margin:0px auto;
margin-bottom:10px;
border: solid 2px;
padding:5px;
width:550px;
}

div.img {padding: 3px;
margin: 2px 2px 0px 2px;
border: none;
height: auto;
width: auto;
float: left;
text-align: center;}

p.smalltext {
font-size:90%;
}

p.bottomborder {
border-bottom:1px solid;
padding-bottom:10px;
}

p.pugapalooza {
text-align: center;
font-size: 175%;
}

/* lightbox */

#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	}

/* buttons */

.rssbutton{
background-color: #eee;
border: 1px #eee outset;
padding: 0 2px;
color: white;
text-decoration: none;
font: bold 10px Verdana;
}

.rssbutton:visited, .rssbutton:hover, .rssbutton:active{
color: white;
}

.cssbutton{
background-color: #ccc;
border: 2px #ccc outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.cssbutton:visited{
color: black;
}

.cssbutton:hover{
border-style: inset;
background-color: #eee;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}

.cssbutton:active{
color: black;
}


/* Image Map */
/* set the size of the definition list <dl> and add the background image */
#imap {
  display:block;
  width:550px;
  height:550px;
  background:url(images/pugstandard.jpg) no-repeat;
  position:relative;
  }



/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {
  display:block;
  width:550px;
  height:0;
  padding-top:550px;
  overflow:hidden;
  position:absolute;
  left:0;
  top:0;
  background:transparent url(images/pugstandard_hover.jpg) no-repeat 550px 550px;
  cursor:default;
  }
/* the hack for IE pre IE6 */
* html #imap a#title {
  height:550px;
  he\ight:0;
  }

/* the <dt><a> hover style to move the background image to position 0 0 */
#imap a#title:hover {
  background-position: 0 0;
  z-index:10;
  }


/* place the <dd>s in the correct absolute position */
#imap dd {
  position:absolute;
  padding:0;
  margin:0;
  }
#imap #pich {
  left:378px;
  top:42px;
  z-index:20;
  }
#imap #picb {
  left:396px;
  top:111px;
  z-index:20;
  }
#imap #picn {
  left:282px;
  top:116px;
  z-index:20;
  }
#imap #picf {
  left:263px;
  top:313px;
  z-index:20;
  }
#imap #picr {
  left:65px;
  top:261px;
  z-index:20;
  }
#imap #picc {
  left:129px;
  top:132px;
  z-index:20;
  }
#imap #pics {
  left:370px;
  top:247px;
  z-index:20;
  }
#imap #picg {
  left:198px;
  top:195px;
  z-index:20;
  }


/* style the <dd><a> links physical size and the background image for the hover */
#imap a#head, #imap a#bite, #imap a#neck, #imap a#fore, #imap a#hind, #imap a#coat, #imap a#size, #imap a#genapp, {
  display:block;
  width:85px;
  height:85px;
  background:transparent url(images/hover.gif) -100px -100px no-repeat;
  text-decoration:none;
  z-index:20;
  }

/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {
  display:none;
  }

/* move the link background image to position 0 0 when hovered */
#imap a#head:hover, #imap a#bite:hover, #imap a#neck:hover, #imap a#fore:hover, #imap a#hind:hover, #imap a#coat:hover, #imap a#size:hover, #imap a#genapp:hover, {
  background-position:0 0;
  }

/* define the common styling for the span text */
#imap a:hover span {
  position:absolute;  
  width:500px; 
  display:block; 
  font-family:arial; 
  font-size:12px; 
  background:#fff; 
  color:#000; 
  border:1px solid #000; 
  padding:5px;
  }
/* the hack for IE pre IE6 */
* html #imap a:hover span {
  width:400px; w\idth:388px;
  }

/* move the span text to a common position at the bottom of the image map */
#imap a#head:hover span {
  left:-378px; 
  top:358px;
  }
#imap a#bite:hover span {
  left:-396px;
  top:289px;
  }
#imap a#neck:hover span {
  left:-282px; 
  top:284px;
  }
#imap a#fore:hover span {
  left:-263px; 
  top:87px;
  }
#imap a#hind:hover span {
  left:-65px; 
  top:139px;
  }
#imap a#coat:hover span {
  left:-129px; 
  top:268px;
  }
#imap a#size:hover span {
  left:-370px; 
  top:153px;
  }
#imap a#genapp:hover span {
  left:-198px; 
  top:205px;
  }

/* add the style for the link span text - first line */
#imap a span:first-line {
  font-weight:bold; 
  font-style:italic;
  }