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: red;}
a:active {color: red;}


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;
}




/* --------------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--*/
}




/* ----------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;
}



/* -----------------content--------------------- */
#content { 
position: relative;
background-color: white;
margin: 0px;
padding: 10px 30px 0px 0px; /*---The 10px at the top sets the header down a bit from the blue navbar. The 30px on the right allows space between the text and the right margin. The 0 on the bottom allows no white to show below the blue footer. And the 0 on the left butts the photo up against the left margin.---*/
}




#breadcrumbs {
font-size: x-small;
padding: 10px 0px 20px 15px; /*-- The 10px puts some space between the navbar and the breadcrumbs. The 20px on the bottom puts space between the breadcrumbs and the headline. The 5px on the left allows a left margin.--*/
}




/*  ----------------headers---------------------- */ 

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


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;
}



/* ----------dogbreeds index - size table-------------- */
table.size {
    margin-left: 15px;
}

table.size td {
    padding: 10px;
    border: solid #000 1px;
    text-align: center;
    font-size: small;
    font-family: arial, Verdana, Arial, Sans-Serif;
    background-color: #b3d9ff;
}

table.size a {
    text-decoration: none;
}

table.size span {
     font-size: 90%;
}


/* ----------dogbreeds index - breed table-------------- */
table.breeds {
    width: 960px;
    padding: 5px;
}

table.breeds td {
    width: 230px;
    padding: 4px;
    border: solid #000 1px;
    text-align: left;
    font-size: small;
    font-family: Verdana, Arial, Sans-Serif;
}

table.breeds a {
    text-decoration: none;
}

table.breeds span {
     font-size: 80%;
}





/*  ----------------TYD - squirrels---------------------- */ 

.yellowboxL {
background-color: #FFFFCC; /*-----pale yellow----*/
border: 1px solid gray;
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 20px 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.---*/
}


table.learn {
border:1px solid #c3c3c3;
border-collapse:collapse;
}

table.learn th {
background-color:#efefef;
border:1px solid #c3c3c3;
padding:10px;
vertical-align:top;
font-size: 140%;
font-weight: bold;
}

table.learn td {
border:1px solid #c3c3c3;
padding:10px 10px;
vertical-align:top;
font-size: 120%;
color: #303030;
}

span.learn {
font-weight: bold;
color: #395769;
}



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

#yourdogwilllearn li {
display: block;
padding: 5px; /*-----puts some space between list items-----------*/
}





/*  ----------------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;
}