body {
background-color: #dce9f7;/*-- #84CE9C; -- #9CCEFF; ---light blue----*/     /*-- #FFF8DC; ---pale buff color of the outermost columns----*/
font-size: medium;

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: 0px 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;
font-size: medium;
}

#navigation {
font-size: small;
}



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. ---*/
font-size: medium;
}


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



.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-weight: bold;
font-size: 130%;
color: #00852C; /*-----dark green font----*/
text-align: center;
padding: 20px 0px 20px 0px;
}


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


.centeredblack {
font-weight: bold;
font-size: 130%;
text-align: center;
padding: 20px 0px 20px 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: 0px 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: 20px; /*--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: 90%;
font-family: Verdana, Arial, Sans-Serif;
padding: 8px 80px 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 Explorder. 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;
 font-size: small;
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--- */
}




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




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





/*  ----------------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: 110%;
font-weight: bold;
padding: 5px;
margin: 10px 15px 10px 15px; /*---The top and bottom padding of 10px provides some upper and lower spacing, while the 15px makes the box consistent with all the text on the page---*/
}

.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; /*-----light blue----*/
border: 1px solid black;
padding: 5px;
margin: 10px;
}

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

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

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


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

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




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




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

#footer a {
text-decoration: none;
font-size: 75%;
}




/*  ----------------this begins bridge specific css code-------------------------------------------------- */ 




em	{
	font-style: italic;
	font-weight:   bold;
}


.SHDC	{	/*--this is global symbols for suits--*/
	text-align:	center;	
	font-size:	200%;
	padding-top:   20px;
} 

.spades	{
	color: blue;
	font-size:	125%;
	font-family:  arial, helvetica;
	margin:   0px;
}

.hearts	{
	color: red;
	font-size:	125%;
	font-family:  arial, helvetica;
	margin:   0px;
}

.diams	{
	color: #FF7C00;
	font-size:	125%;
	font-family:  arial, helvetica;
	margin:   0px;
}

.clubs	{
	color: green;
	font-size:	125%;
	font-family:  arial, helvetica;
	margin: 	0px;
}

.clear	{ 
	clear: left;  
}


table.fourhands  {
	border-color:  blue;
	border-width:  4px;
	border-style:  double; 
	margin:	0px 20px 10px 20px;
	background-color: white;
	padding:   10px 0px 10px 10px;
	text-align:   left;
	line-height: 1.3em;
	height:	200px;	
	width:	400px;
	border-collapse:   separate;
	border-spacing:  0px;
	float:  left;	
	background-color:  #FFFAF0;    /*--#FFFAF0;           #E0EEE0; greenish--*/
}

.fourhands>caption  {
	text-align:    left; 
	padding:  0px  0px  5px 20px;
	font-size:  110%;
	color:  green;
}


.declarerdummy  {
	border-color:  green;
	border-width:  4px;
	border-style:  double; 
	background-color: white;
	padding: 5px 5px 15px 15px;
	margin: 0px 20px 20px 20px;
	width: 140px;
	height: 250px;
	text-align:  left;	
	clear:  both;
	float:  left;
}
		


.onehand {
	border-color:  green;
	border-width:  4px;
	border-style:  double; 
	background-color: white;
	padding: 5px 5px 15px 10px;
	margin: 0px 20px 20px 20px;
	width: auto;
	height: 100px;
	text-align:  left;	
	line-height: 1.3em;
	clear:  none;
	float:  left;
	caption-side:	top;
	background-color: #FFFAF0;  /*-- #FFFAF0; floral white --*/
}




.onehand>caption  {
	text-align:  left;
	font-size:  90%;
	padding: 0px 0px 0px 15px;
	color:  black;
}

	
.twohands {
	
	border-color:  green;
	border-width:  4px;
	border-style:  double; 
	background-color: white;
	padding: 5px 5px 15px 15px;
	margin: 0px 20px 20px 20px;
	height: 140px;
	width: 140px;
	text-align:  left;
line-height: 1.3em;
	clear:  both;
	float:  left;
}
.caption  {
	text-align:  left;
	font-size:  90%;
	padding: 0px 0px 0px 30px;
	color:  black;
	clear: none;
}


.onesuitdiagram  {
	border-color:  green;
	border-width:  4px;
	border-style:  double; 
	background-color: white;
	padding: 5px 5px 5px 5px;
	margin: 0px 20px 5px 20px;
	height: 140px;
	width: 140px;
	float:  left;
	clear:  both;       
	text-align: center;
	caption-side:	top;
	background-color: #FFFAF0;
}
.onesuitdiagram>caption  {
	text-align:  left;
	font-size:  90%;
	padding: 0px 0px 0px 10px;
	color:  black;
}

.played  {
	font-weight:  bold;
	text-decoration:  underline;	
}

.seat	{
	font-size: 80%;
	font-style: italic;	
	padding-top:  10px;
}

.bidding  {
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	border: thin solid black;
	caption-side: top;
	text-align: center;
	width: 250px;
	padding: 5px;
	color: cc6600;
	font-size: 90%;
}

button	{
	background-color:   #9AFF9A; 
	border: solid blue 2px;
	font-size:  small;
	font-weight: bold;
	padding 2px, 10px, 2px, 10px;
}

			/*---this begins the section of code which styles collapsible divs---*/
.greenbutton	{
	background-color:   #9AFF9A; 
	border: solid blue 2px;
	padding: 0px 15px 2px 15px;
	margin-left: 20px;
	margin-bottom: 10px;
	font-size: medium;
	font-family:  verdana;
}

.bluebutton	{
	background-color:   #C1F0F6; 
	border: solid blue 2px;
	padding: 0px 15px 2px 15px;
	margin-left: 20px;
	margin-bottom: 10px;
	font-size: medium;
	font-family:  verdana;
}

.yellowbutton	{
	background-color:   #FFFF7E; 
	border: solid blue 2px;
	padding: 0px 15px 2px 15px;
	margin-left: 20px;
	margin-bottom: 10px;
	font-size: medium;
	font-family:  verdana;
}

.pinkbutton	{
	background-color:   #FFCCCC;  
	border: solid blue 2px;
	padding: 0px 15px 2px 15px;
	margin-left: 20px;
	margin-bottom: 10px;
	font-size: medium;
	font-family:  verdana;
}

.tanbutton	{
	background-color:    #FEE5AC;  /*--color name: honey--*/
	border: solid blue 2px;
	padding: 0px 15px 2px 15px;
	margin-left: 20px;
	margin-bottom: 10px;
	font-size: medium;
	font-family:  verdana;
}


.slide	{
	width: 400px;
	overflow: hidden;
	margin-right: 80px;
 	margin-left: auto; 
	margin-top: 0px;
	padding:  0px 5px 0px 15px;
	display: none;
}	

.greenslide	{
	width: 400px;
	overflow: hidden;
	margin-right: 80px;
 	margin-left: auto; 
	margin-top: 0px;
	padding:  0px 5px 0px 15px;
	display: none;
	background-color: #9AFF9A;
}

.blueslide	{
	width: 400px;
	overflow: hidden;
	margin-right: 80px;
 	margin-left: auto; 
	margin-top: 0px;
	padding:  0px 5px 0px 15px;
	display: none;
	background-color: #C1F0F6;
}

.pinkslide	{
	width: 400px;
	overflow: hidden;
	margin-right: 80px;
 	margin-left: auto; 
	margin-top: 0px;
	padding:  0px 5px 0px 15px;
	display: none;
	background-color: #FFCCCC;
}

.yellowslide	{
	width: 400px;
	overflow: hidden;
	margin-right: 80px;
 	margin-left: auto; 
	margin-top: 0px;
	padding:  0px 5px 0px 15px;
	display: none;
	background-color: #FFFF7E;
}

.tanslide	{
	width: 400px;
	overflow: hidden;
	margin-right: 80px;
 	margin-left: auto; 
	margin-top: 0px;
	padding:  0px 5px 0px 15px;
	display: none;
	background-color: #FEE5AC;    /*--#FFCC99;--*/
}




.clean	{			/*---.clean is used to make links inside buttons without underlining or color changes---*/
	text-decoration: none;
	color: black;
	/*---font-weight:  bold;---*/
}



.collapse  {
	background-color:  #FFFF7E;  <!--#FFF68F better color?? -->
	border:  solid 1px blue;
	width:  350px; 
	padding:  10px; 
	display:  none;
}

					/*---this ends the section of code which styles collapsible divs---*/



/*  ----------------this ends bridge specific css code---------------------- */