body {
background-color: #E4E4E4; /*-----pale gray color of the outermost columns----*/
font-size: small;
font-family: Verdana, Arial, Sans-Serif;
color: black; /*-----overall font color----*/
padding: 0px;
margin: 0px;
}


a {color: blue;}
a:visited {color: purple;}
a:hover {color: green;}
a:active {color: green;}

.name { color: black; }


p {
padding: 10px 20px 10px 20px; /*--Top, right, bottom, left. The top and bottom padding of 10px gives space between paragraphs. The right and left padding of 20px gives enough space between paragraphs and the edges of the columns. --*/
margin: 0px;
}


li {
padding: 0px 20px 15px 5px; /*--- The top padding of 0 means the first list item is close to any subheader above it. The bottom padding of 15 gives a little space between list items. The right padding of 20 matches the <p> padding above, for consistency. The left padding of 5 nudges the left side of the list close enough to the bullet to look good. ---*/
}


dt {
padding: 5px 20px 5px 20px; /*--- The top and bottom padding of 5px gives a little space between list items. The right and left padding of 20px matches the <p> padding above, for consistency. ---*/
}


dd {
padding: 0px 20px 5px 20px; /*--- The top padding butts the definition tightly against the term. The bottom padding of 5px gives a little space between list items. The left padding indents the definition. The right padding matches the <p> padding above. ---*/
}




h1 {
font-size: 170%;
color: #00852C; /*-----dark green font----*/
padding: 10px 20px 10px 20px; /*------padding from the margins, consistent with p attribute above-----*/
margin: 0px;
}



h2 {
font-size: 130%;
color: #00852C; /*-----dark green font----*/
padding: 10px 20px 10px 20px; /*------padding from the margins, consistent with p attribute above-----*/
margin: 0px;
}



h3 {
font-size: 110%;
color: #00852C; /*-----dark green font----*/
padding: 10px 20px 10px 20px; /*------padding from the margins, consistent with p attribute above-----*/
margin: 0px;
}



.divider {
border-bottom: 1px dotted gray;
margin-left: 20px;
width: 600px;
margin-bottom: 20px;
}


.yellowboxL {
background-color: #FFFFCC; /*-----pale yellow----*/
border: 1px solid black;
padding: 5px 10px 10px 10px; /*----The upper padding doesn't seem to need as much as the padding on the sides and bottom---*/
margin: 20px 150px 0px 150px; /*---The top margin of 20px drops the box down from the text above it. The right and left margins make the box smaller and center it.---*/
}


.yellowboxM {
background-color: #FFFFCC; /*-----pale yellow----*/
border: 1px solid black;
padding: 5px 10px 10px 10px; /*----The upper padding doesn't seem to need as much as the padding on the sides and bottom---*/
margin: 20px 175px 0px 175px; /*---The top margin of 20px drops the box down from the text above it. The right and left margins make the box smaller and center it.---*/
}


.yellowboxS {
background-color: #FFFFCC; /*-----pale yellow----*/
border: 1px solid black;
padding: 5px 10px 10px 10px; /*----The upper padding doesn't seem to need as much as the padding on the sides and bottom---*/
margin: 20px 200px 0px 200px; /*---The top margin of 20px drops the box down from the text above it. The right and left margins make the box smaller and center it.---*/
}



.centeredgreen {
font-size: 130%;
color: #00852C; /*-----dark green font----*/
text-align: center;
padding: 10px 0px 20px 0px;
}


.centeredred {
font-size: 130%;
color: red; /*-----dark green font----*/
text-align: center;
padding: 10px 0px 20px 0px;
}


.centeredblack {
font-size: 130%;
text-align: center;
padding: 10px 0px 20px 0px;
}



img.floatleft {
float: left;
margin: 10px 40px 10px 0px;
}


img.floatright {
float: right;
margin: 10px 0px 0px 40px;
}



/* --------------centers the layout and defines the width---- */
#container {
width: 960px;
padding: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
} 



/* ----------banner-------------- */
#banner {
background-color: #84CE9C; /*-------light green----*/
padding: 10px 0px 10px 0px; /*--creates some space ABOVE and BELOW the logo, so the background color can show--*/
margin: 0px;  /*-------butts the banner tightly against the navigation bar----*/
}

table#logo {
padding-left: 5px; /*--pulls the logo slightly away from the left margin--*/
}

button {
margin: 5px 0 0 60px;
width: 120px;
padding: 5px;
color: yellow;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
border: solid 2px #882d13;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background-color: red;
}





/* ----------global navigation in gray table-------------- */
table#globalnav {
    background-color:#EEEEEE;
}

table#globalnav td {
    padding: 4px;
    border: solid #000 1px;
    text-align: center;
    font-size: small;
    font-family: Verdana, Arial, Sans-Serif;
}

table#globalnav a {
    text-decoration: none;
}



/* ----------blue navigation bar-------------- */
#navbar {
background-color: #9CCEFF; /*-----light blue----*/
font-size: small;
font-family: Verdana, Arial, Sans-Serif;
padding: 8px 25px 8px 0px;
margin: 0px;
text-align: right;
}

#navbar a {
text-decoration: none;
}





/*-------outer and inner borders are equal to the width of the navigation----*/
#outer { 
border-left: 200px solid #9CCEFF;  /*-------width and light blue color of the left column---*/ 
background-color: white;  /*-----color of the content column----------------*/
} 

#inner {margin:0; width:100%;}
/*-------inner border is needed for IE Explorer. Inner contains div-left and div-content. The LEFT position of div-left must be negative to the value of the border width of content-div. Hence, div-left shifts succinctly over div-content's wide border.-------------*/



/* --------------left column------------- */
#left {
 width:200px; 
 float:left; 
 position: relative; 
 margin-left: -200px; 
 margin-right: 1px;
 }



/* ----------yellow metabox-------------- */
#metabox {
background-color: #FFFFCC; /*-----pale yellow----*/
border: 1px solid black;
padding: 5px;
margin: 0px 10px 10px 10px; /* -----puts space on the right and left sides of the box, and the bottom, but NOT the top, so the box will butt tightly against the navigation bar--- */
}



/* ----------books in left column-------------- */
.ebookphoto {
margin: 20px 20px 20px 20px; /*---The 20px on the top and bottom provides space above and below. The 20px on the right and left centers it in the blue column. To add a title close below, set the bottom margin to 0px.--*/
}

.bookphoto {
margin: 0 20px 0px 10px;
}

.bookphoto a {
font-size: 90%;
font-weight: bold;
text-decoration: none;
}

.columnbox {
background-color: #FFFFCC; /*-----pale yellow----*/
border: 1px solid black;
padding: 5px;
margin: 0px 10px 10px 10px; /* -----puts space on the right and left sides of the box, and the bottom, but NOT the top, so the box will butt tightly against the benefits list above it--- */
}








/* ----------local navigation in left column, for breed subpages-------------- */

#navcontainer ul {
margin-left: 0;
padding-left: 15px;
list-style-type: none;
}

#navcontainer a {
display: block;
padding: 5px; /*-----puts some space between links-----------*/
text-decoration: none;
background-color: #9CCEFF; /*-----light blue to match column, can be set to any color-----*/
}




/* ----------list of health problems in left column, for lifespan pages-------------- */

#hp h3 {
font-size: 100%;
color: green;
padding: 12px;
}

#hp ul {
padding-left: 35px;
}

#hp p {
padding: 10px 10px 0 10px;
}

#hp li {
padding: 0 10px 0 0;
}







hr {
border: 0;
color: #00852C; /*-----dark green----*/
background-color: #00852C; /*-----dark green----*/
height: 1px;
width: 60%;
text-align: center;
}





/* -----------------content in the right column--------------------- */
#content { 
position: relative; 
margin: 0px;
padding: 10px 20px 10px 20px; /*---padding from the margins, consistent with p attribute above---*/
}



#breadcrumbs {
font-size: x-small;
padding: 10px 5px 20px 5px; /*-- The 10px puts some space between the navbar and the breadcrumbs. The 5px on the right allows the breadcrumbs to get as close as necessary to the right margin. The 20px on the bottom puts space between the breadcrumbs and the headline. And the 5px on the left snugs the beginning of the breadcrumbs close to the left margin.--*/
}



#byline {
font-size: 90%;
font-style: italic;
margin-left: 30px;
}





/*  ----------------home page---------------------- */ 

	/* ------table of general topics------- */
table#topics {
    background-color:#FFFFCC;
    padding: 0px 0px 0px 15px;
}

table#topics td {
    padding: 10px;
    border: solid #000 1px;
    text-align: center;
    font-weight: bold;
    font-size: medium;
    font-family: Verdana, Arial, Sans-Serif;
}

table#topics a {
    text-decoration: none;
}


	/* ---table of site description with checkmarks--- */

table#description td {
    padding: 10px 15px 10px 0px;
    text-align: left;
    font-size: small;
    font-family: Verdana, Arial, Sans-Serif;
}





/* --------- index pages for each breed (health, training, buying)------------ */

#index img {
float: left;
padding-right: 25px;
}

.indexheading {
font-size: 110%;
font-weight: bold;
margin: 0px;
}






/* --------- FAQ pages ------------ */

.faq_questions {
font-size: 110%;
font-weight: bold;
color: #00852C; /*-----dark green font----*/
}





/* --------- review pages ------------ */

.rightforyou {
font-size: 110%;
font-weight: bold;
color: red;
text-align: center;
}

#concerns {
font-size: 110%;
font-weight: bold;
color: red;
}

.blueboxheader {
background-color: #9CCEFF;
font-size: 120%;
font-weight: bold;
padding: 5px;
margin: 10px 15px 10px 0px; /*---The top and bottom padding of 10px provides some upper and lower spacing---*/
}

.blockquote {
margin: 0px 45px 10px 15px; /*--pulls the paragraph in on both sides---*/
}

#consultation {
background-color: #FFFFCC; /*-----pale yellow----*/
border: 1px solid black;
padding: 5px 10px 10px 10px; /*----The upper padding doesn't seem to need as much as the padding on the sides and bottom---*/
margin: 20px 170px 0px 170px; /*---The top margin of 20px drops the box down from the text above it. The right and left margins make the box smaller and center it.---*/
}





/*  ----------------sitemap page---------------------- */ 
.indent1 {
margin: 0px 40px;
}

.indent2 {
margin: 0px 75px;
}






/* ----------article pages-------------- */
.bluebox {
background-color: #CCFFFF;
border: 1px solid black;
padding: 5px;
margin: 10px;
}

.rosebox {
background-color: #FFCCCC;
border: 1px solid black;
padding: 5px;
margin: 10px;
}

.greenbox {
background-color: #CCFFCC;
border: 1px solid black;
padding: 5px;
margin: 10px;
}

.purplebox {
background-color: #CCCCFF;
border: 1px solid black;
padding: 5px;
margin: 10px;
}

.orangebox {
background-color: #FFCC99;
border: 1px solid black;
padding: 5px;
margin: 10px;
}




.testimonial-name {
font-weight: bold;
padding: 20px 10px 0px 10px;
}

.testimonial {
padding: 0px 10px 20px 10px;
}


.deflist {
font-size: 110%;
font-weight: bold;
color: green;
}




/*  ----------------sales---------------------- */ 

#sales a {
text-decoration: none;
}




/*  ----------------related articles---------------------- */ 

table#relatedarticles {
background-color: #efefef;
margin: 0px;
padding: 5px;
border: 1px solid gray;
-moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    -khtml-border-radius: 1em;
    border-radius: 1em;

}

table#relatedarticles th {
text-align: left;
color: #800040;
font-size: 120%;
font-weight: bold;
padding-bottom: 10px;
}

table#relatedarticles .maintopic {
font-size: 120%;
font-weight: bold;
}

table#relatedarticles td {
width: 250px;
font-size: 85%;
}

table#relatedarticles a {
text-decoration: none;
line-height: 110%;
}

table#relatedarticles p {
padding: 5px 20px 5px 20px; /*--The top and bottom padding of 10px gives space between paragraphs. The right and left padding of 20px gives enough space between paragraphs and the edges of the columns. --*/
}





/*  ----------------copyright---------------------- */ 
#copyright {
font-size: 75%;
text-align: center;
}




/*  ----------------footer---------------------- */ 
#footer {
text-align: center;
background-color: #9CCEFF;
/*border-top: 1px solid black;
border-bottom: 1px solid black;*/
padding: 8px;
margin: 0px;
}

#footer a {
text-decoration: none;
}






/* NOT CURRENTLY USING

----------if we ever add search, this section goes just above navigation bar--------------
#search {
float:right;
text-align: right;
margin: 10px 10px 0 0;
}

and this code goes just above the navigation bar code on the HTML page:
<!-- This is the search box pushed to the far right of the blue navigation bar -->

<div id="search">
<input type="text" size="35" name="search" /><input type="submit" value="Search" />
</div>
<!--end search-->

*/