/*------------------------mobile first css------------------------*/
/*---globalnav (fixed mobile menu and suckerfish) are at the bottom--*/

body {
    font-family: arial, sans-serif; /*--old site arial--*/
    font-size: 19px; /*--old site 16--*/
    line-height: 1.5em; /*--base line height for small screens--*/
    color: #000; /*--overall font color--*/
    font-weight: 500;
    padding: 0;
    margin: 0;
-webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 960px) {
body {
    background-color: #dbf3ff; /*--adds color to the two flanking columns, lightest blue is dbf3ff, then caedff or b6dbff, original 9cceff--*/
}
}
@media screen and (min-width: 501px) {
body {
    line-height: 1.6em; /*--greater line height for larger screens--*/
}
}


/*--the master div that includes banner, navigation, article, article2, footer; centers the page, limits the width to 960--*/
#container {
    max-width: 960px;
    background-color: white;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
} 

/*--breadcrumbs are within the container div, but outside the article div--*/
#breadcrumbs {
    font-size: 80%;
    font-family: arial, sans-serif;
    line-height: 160%;
    padding-top: 80px; /*--between breadcrumbs and navbar--*/
    padding-right: 5px; /*--between bc and right margin--*/
    padding-bottom: 30px; /*--between bc and h1--*/
    padding-left: 10px; /*--between bc and left margin--*/
}
@media screen and (min-width: 501px) {
#breadcrumbs {
    padding-top: 40px;
}
} /*--end media query--*/


/*--article div comprises everything after breadcrumbs and before copyright, media queries increase the margins for shorter lines and readability--*/
#article {
    margin: 0 10px 20px 10px;
    /*--margins around the overall page, 0 between breadcrumbs and h1, 10px left and right, 20px between related articles and copyright--*/ 
}
@media screen and (min-width: 850px) {
#article {
	margin-left: 5%;
	margin-right: 5%;
}
}
@media screen and (min-width: 890px) {
#article {
	margin-left: 10%;
	margin-right: 10%;
}
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/*---------------links----------------*/

a:link {
    text-decoration: none; /*--default is NO underline, looks good in menus, toc, books, related, footer--*/
    color: #0044cc; /*--0000ff basic blue, other blues 2200cc and 0044cc--*/
    }
a:visited {
    color: #800080; /*--purple--*/
    }
a:hover {
    color: #ff0000; /*--red--*/ 
    }
a:active {
    color: #800080; /*--purple for touch screens on which hover doesn't work--*/
}

/*-------article2 div--------------*/
/*--comprises everything between the toc and author box, it is primarily used to underline links and to style lists--*/

/*--within the article2 div, all links become underlined using the configurable border-bottom attribute, to better stand out to the reader---*/
    .article2 a:link { border-bottom: 1px solid #0044cc; }
    .article2 a:visited { border-bottom: 1px solid #800080; }
    .article2 a:hover { border-bottom: 1px solid #ff0000; }
    .article2 a:active { border-bottom: 1px solid #800080; }

/*--within the article2 div, this removes the underline from a link--*/ 
    .article2 .clean { text-decoration: none; border-bottom: none; }

/*--to underline any link outside the article2 div, attach the underline-border class to the controlling p or li or whatever--*/
    .underline-border a:link { border-bottom: 1px solid #0044cc; }
    .underline-border a:visited { border-bottom: 1px solid #800080; }
    .underline-border a:hover { border-bottom: 1px solid #ff0000; }
    .underline-border a:visited { border-bottom: 1px solid #800080; }

/*--or to add a traditional underline to a link outside the article2 div, attach this class to the a--*/
    .underline { text-decoration: underline; }

/*--to remove the underline from a link outside the article2 div--*/ 
    .clean { text-decoration: none; border-bottom: none; }



/*----------UNordered list within article2 div----------*/

.article2 ul li {
    padding-top: 0; /*--- places the first list item close to any subheader above it--*/
    padding-bottom: 20px; /*--- provides space between list items--*/
    padding-left: 0; /*--- nudges the list item close to its bullet--*/
    padding-right: 10px; /*--- keeps the lines shorter and easier to read--*/
}
@media screen and (min-width: 800px) {
.article2 ul {
    margin-left: 30px; /*--increases the indent for the list as a whole--*/
    }
.article2 ul li {
    padding-right: 100px; /*--increases padding for easier reading--*/
}
.article2 li li {
    padding-right: 30px; /*--for a list within a list, the above 100px of right padding gets doubled, which is too great for larger screens, this 30px overrides the second 100--*/
}
} /*--end media query--*/



/*----------ORdered list within article2 div----------*/

.article2 ol li {
    padding-top: 0; /*--- places the first list item close to any subheader above it--*/
    padding-bottom: 20px; /*--- provides space between list items--*/
    padding-left: 0; /*--- nudges the list item close to its number--*/
    padding-right: 10px; /*--- keeps the lines shorter and easier to read--*/
}
@media screen and (min-width: 800px) {
.article2 ol {
    margin-left: 30px; /*--increases the indent for the list as a whole--*/
    }
.article2 ol li {
    padding-right: 50px; /*--increases padding on the right for shorter lines and easier reading--*/
}
} /*--end media query--*/



/*----------Definition list within article2 div----------*/

.article2 dl dd {
    padding-top: 0; /*--- places the first list item close to any subheader above it--*/
    padding-bottom: 20px; /*--- provides space between list items--*/
    padding-left: 0; /*--- nudges the list item close to its number--*/
    padding-right: 10px; /*--- keeps the lines shorter and easier to read--*/
}
@media screen and (min-width: 800px) {
.article2 dl {
    margin-left: 30px; /*--increases the indent for the list as a whole--*/
    }
.article2 dl dd {
    padding-right: 50px; /*--increases padding on the right for shorter lines and easier reading--*/
}
} /*--end media query--*/


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


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

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

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

.h1-diams	{
	color: #ff7c00;
	font-size:	165%;
	font-family:  arial, helvetica;
	margin:   0px;
}

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


h1, h2, h3, h4 {
    font-family: arial, sans-serif;
    font-weight: normal;
    line-height: 140%;
    color: #00852C; /*--green to match logo--*/
    margin: 0;
    padding-top: 0; /*--headers have 0 padding above--*/
    padding-bottom: 0; /*--headers have 0 padding below--*/
    padding-left: 10px; /*--headers indented from the left same as paragraph--*/
    padding-right: 20px;
}
@media screen and (min-width: 800px) {
h1, h2, h3, h4 {
    padding-left: 30px; /*--increases the indents to match paragraph--*/
    padding-right: 30px;
}
} /*--end media query--*/

h1 { font-size: 165%; text-align: center; }
h2 { font-size: 150%; }
h3 { font-size: 130%; }

h4 {
    font-size: 110%;
    font-style: italic; /*--different from the other headers--*/
    padding-top: 20px;
    padding-bottom: 0;
    margin-bottom: 0;
    }
h4.good-bad {
    color: red; /*---used on review pages for pro-con lists--*/
    font-weight: 600;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/*----------paragraphs----------*/

p {
    padding-top: 0; /*--keep the first paragraph closer to any h above it--*/
    padding-bottom: 5px; /*--separates paragraphs from each other---*/
    padding-left: 10px; /*--paragraphs are indented from margins--*/
    padding-right: 20px;
}
@media screen and (min-width: 800px) {
p {
    padding-left: 30px; /*--increases padding for shorter lines, easier reading--*/
    padding-right: 30px;
}
} /*--end media query--*/


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*----------colored boxes----------*/

/*--------yellowbox------*/
.yellowbox {
    background-color: #ffffcc;
    border: 1px solid gray;
    padding: 5px 5px 10px 10px; /*--padding inside the box--*/
    margin-left : 10px;
    margin-right: 10px;
}
@media screen and (min-width: 800px) {
.yellowbox {
    margin-left: 60px; /*--increases margin for shorter lines, easier reading--*/
    margin-right: 60px;
}
} /*--end media query--*/


/*--------purplebox------*/
.purplebox {
    background-color: #ccccff;
    border: 1px solid gray;
    padding: 5px 5px 10px 10px; /*--padding inside the box--*/
    margin-left : 10px;
    margin-right: 10px;
}
@media screen and (min-width: 800px) {
.purplebox {
    margin-left: 60px; /*--increases margin for shorter lines, easier reading--*/
    margin-right: 60px;
}
} /*--end media query--*/


/*--------rosebox------*/
.rosebox {
    background-color: #ffcccc;
    border: 1px solid gray;
    padding: 5px 5px 10px 10px; /*--padding inside the box--*/
    margin-left : 10px;
    margin-right: 10px;
}
@media screen and (min-width: 800px) {
.rosebox {
    margin-left: 60px; /*--increases margin for shorter lines, easier reading--*/
    margin-right: 60px;
}
} /*--end media quer


/*--------greenbox------*/
.greenbox {
    background-color: #ccffcc;
    border: 1px solid gray;
    padding: 5px 5px 10px 10px; /*--padding inside the box--*/
    margin-left : 10px;
    margin-right: 10px;
}
@media screen and (min-width: 800px) {
.greenbox {
    margin-left: 60px; /*--increases margin for shorter lines, easier reading--*/
    margin-right: 60px;
}
} /*--end media query--*/


/*--------bluebox------*/
.bluebox {
    background-color: #ccffff;
    border: 1px solid gray;
    padding: 5px 5px 10px 10px; /*--padding inside the box--*/
    margin-left : 10px;
    margin-right: 10px;
}
@media screen and (min-width: 800px) {
.bluebox {
    margin-left: 60px; /*--increases margin for shorter lines, easier reading--*/
    margin-right: 60px;
}
} /*--end media query--*/




/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/*--------blockquote------*/
.blockquote {
    margin: 20px 20px 20px 20px; /*--pulls the paragraph in on both sides---*/
    border-left: 3px solid #9cceff; /*--makes a vertical line, 9cceff is blue, bbb is light gray--*/
    padding-left: 15px; /*-- snugs the text closer to the vertical line--*/
}
.blockquote-noborder {
    margin: 20px 20px 20px 20px; /*--pulls the paragraph in on both sides---*/
}

@media screen and (min-width: 800px) {
.blockquote {
    margin: 20px 55px 10px 55px; /*--greater indents on larger screens---*/
}
.blockquote-noborder {
    margin: 20px 55px 10px 55px; /*--greater indents on larger screens---*/
}
} /*--end media query--*/


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*-------font colors, styles, sizes----------*/
.red { color: red; }
.crimson { color: crimson; }
.purple { color: purple; }
.green { color: green; }
.black { color: black; }

.bold { font-weight: bold;  font-weight: 600; /*--less heavy than the default 700--*/}
.italic { font-style: italic; }


/*----------font sizes----------*/
.font-size50 { font-size: 50%; }
.font-size60 { font-size: 60%; }
.font-size70 { font-size: 70%; }
.font-size80 { font-size: 80%; }
.font-size90 { font-size: 90%; }
.font-size100 { font-size: 100%; }
.font-size110 { font-size: 110%; }
.font-size120 { font-size: 120%; }
.font-size130 { font-size: 130%; }
.font-size140 { font-size: 140%; }
.font-size150 { font-size: 150%; }
.font-size160 { font-size: 160%; }
.font-size170 { font-size: 170%; }
.font-size180 { font-size: 180%; }
.font-size190 { font-size: 190%; }
.font-size200 { font-size: 200%; }


/*----------line heights----------*/
.line-height110 { line-height: 110%; }
.line-height120 { line-height: 120%; }
.line-height130 { line-height: 130%; }
.line-height140 { line-height: 140%; }
.line-height150 { line-height: 150%; }
.line-height160 { line-height: 160%; }
.line-height170 { line-height: 170%; }
.line-height180 { line-height: 180%; }


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*----------floats----------*/
.floatleft { float: left; }
.floatright { float: right; }

.clear { clear: both; }
.clear-left { clear: left; }
.clear-right { clear: right; }


#byline {
    text-align: center;
    font-family: arial, sans-serif;
    font-size: 90%;
    line-height: 160%;
    margin-left: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
}


/*---read time, estimated by read-o-meter at niram dot org slash read slash--*/ 
.read-time {
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    font-family: arial, sans-serif;
    font-size: 90%;
    text-align: center;
}


/*---date of last update, automatically generated by a jscript--*/ 
.update {
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 20px;
}

.centertext {
    text-align: center;
    margin-right: 6%;
    margin-left: 6%;
}

.divider { 
    border-bottom: 1px dotted gray;
    margin-left: 6%;
    margin-right: 6%;
    margin-bottom: 30px;
}


.blueboxheader {
    background-color: #9cceff;
    font-size: 110%;
    padding: 5px;
    margin: 10px 15px;
}

/*-----shadowbox----*/
.shadowbox {
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
width: auto;

border: 3px solid #d1d1d1;
padding: 10px;

  -webkit-border-radius: 5px; /*---rounds the corners of the box---*/
  -moz-border-radius: 5px;
  border-radius: 5px;

  -webkit-box-shadow: #999 10px 10px 10px; /*---color, horizontal offset (positive number puts shadow on right, negative on left), vertical offset (positive above box, negative below box, blur radius (0 is a sharp shadow, higher is more blurred)---*/
  -moz-box-shadow: #999 10px 10px 10px;
  box-shadow: #999 10px 10px 10px;

background-color: white;
position: relative;
behavior: url(http://www.bridgebears.com/PIE.htc); /*---for IE---*/
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*-----------------------INDEX PAGES----------------------------*/

/*----div-index contains the article titles and blurbs---*/ 
.index p {
    padding-bottom: 25px; /*--spaces the articles--*/
}
.index img {
	margin-right: 5px; /*--space between image and text--*/
}	
@media screen and (min-width: 700px) {
.index p {
    padding-right: 10%; /*--decreases line length for easier reading on larger screens--*/
}
} /*--end media query--*/


/*----in article blurbs, removes underlines for a cleaner look----*/
.index a:link {
    text-decoration: none;
    border-bottom: none;
}


/*--on training-health indexes, a button link to the review page--*/
.review-page-button {
    position: -webkit-sticky; /*--needed for safari--*/
    position: sticky;
    top: 53px; /*--just below the fixed mobile menu of 52px height--*/
    cursor: pointer; /*--makes the cursor appear as a pointer so it looks like a link--*/
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
      -webkit-border-radius: 28;
      -moz-border-radius: 28;
      border-radius: 28px;
    font-family: arial, sans-serif;
    color: #fff;
    font-size: 19px;
    line-height: 150%;
    padding: 5px 15px 5px 15px;
    text-decoration: none;
    text-align: center;
}
.review-page-button a:link {
    color: white;
    text-decoration: none;
    border-bottom: none;
}
.review-page-button a:visited {
    color: #ffcc66;
}

.review-page-button:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}
/*--on larger screens, sticks the button against the top of the screen--*/
@media screen and (min-width: 501px) {
    .review-page-button {
        top: 0;
     }
} /*--end media query--*/	    



/*--------------------------ARTICLES----------------------------*/

/*--table of contents box at top of article--*/
#toc-article {
    background-color: #e0eeee;
    padding: 10px;
}
#toc-article p {
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 15px;
    padding-left: 30px;
}
#toc-article a {
    text-decoration: none;
    border-bottom: none;
}

/*--chapter boxes throughout article--*/
.chapter {
    background-color: #dbf3ff; /*--light blue is dbf3ff, light green is e0eeee--*/
    font-size: 210%;
    color: green;
    line-height: 130%;
    text-align: center;
    margin-bottom: 20px;
}


/*--expandable divs per w3c--*/
.collapsible {
    background-color: #ccffcc; /*--light green, light blue dbf3ff--*/
    color: blue;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border-bottom: 1px dotted green;
    border-right: none;
    text-align: left;
    outline: none;
    font-family: arial, sans-serif;
    font-size: 19px;
}
.active, .collapsible:hover {
    background-color: #ccffe6; /*--aqua--*/
}
.collapsible-answer {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}


/*--class points to a single article, text only--*/
.related-text {
    font-family: verdana, arial, sans-serif;
    font-size: 110%;
}
.related-text a:link {
    text-decoration: none;
    border-bottom: none;
}


/*--gallery of related articles with pic and title--*/
.gallery-header {
font-size: 130%;
padding-left: 5px;
padding-bottom: 15px;
}

div.gallery {
  border: 1px solid #ccc;
}
div.gallery:hover {
  border: 1px solid #000;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
  color: #0044cc;
  cursor: pointer;
}
.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
  box-sizing: border-box;
}
@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}



/*--------------------------REVIEW PAGES----------------------------*/

/*---Cycle2 photo gallery slideshow---*/

.cycle-slideshow {
    width: 100%; /*--makes the container as wide as possible--*/
    margin-left: auto; /*--centers the container--*/
    margin-right: auto; /*--centers the container--*/
}
.cycle-slideshow img {
    width: 100%; /*--makes the width of the image fill the container--*/
    height: auto; /*--makes the height of the image dependent on its width, ie responsive--*/
}

/*--media queries shrink the container percentage as screen size increases--*/
@media screen and (min-width:500px) {
.cycle-slideshow {
    width: 90%;
}
}/* -- end of media query -- */
@media screen and (min-width:600px) {
.cycle-slideshow {
    width: 80%;
}
}/* -- end of media query -- */

@media screen and (min-width:700px) {
.cycle-slideshow {
    width: 70%;
}
}/* -- end of media query -- */
@media screen and (min-width:800px) {
.cycle-slideshow {
    width: 60%;
}
}/* -- end of media query -- */
@media screen and (min-width:900px) {
.cycle-slideshow {
    width: 50%;
}
}/* -- end of media query -- */

.slideshow-caption {
    font-family: verdana, helvetica, sans-serif;
    font-size: 85%;
    line-height: 140%;
    font-style: italic;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*----------midpage-navbar-small----------*/

/* --first need to hide the larger navbar on smaller screens-- */
@media screen and (max-width: 889px) {
	.hide-on-smaller-screens { display: none; }
}

/*-- sticks the mobile navbar up against the sticky mobile menu--*/
.midpage-navbar-small {
    position: -webkit-sticky; /*--needed for safari--*/
    position: sticky;
    top: 53px; /*--was 3.3rem, just below the fixed mobile menu of 52px height--*/
    margin-top: 0px; /*--space between navbar and toc--*/
    margin-bottom: 10px;
}

/*--on larger screens, sticks the mobile navbar up against the top of the screen--*/
@media screen and (min-width: 501px) {
    .midpage-navbar-small {
        top: 0px;
     }
} /*--end media query--*/	    

#suckerfishnav2 {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #1f3e9f; /*--medium blue color of the bar--*/
    float: left; /*--when absent, the blue bar vanishes--*/
}

/* ---- puts a box around Jump To ---- */
#suckerfishnav2 .box {
    border: 1px solid black;
    padding-top: 6px; /*---within the blue box---*/
    padding-bottom: 6px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #ccf2ff; /*--light blue--*/
}
#suckerfishnav2 li {
    height: 20px; /*-------height of the blue bar-------------*/
    line-height: 20px; /*--centers the blue box vertically within the bar, should match the height value above--*/
    padding-left: 0px; /*---positions the blue box close to the left edge of the blue bar---*/
    padding-top: 8px; /*--positions the box close to the top of the blue bar---*/
    padding-bottom: 8px; /*--positions the box close to the bottom of the blue bar---*/
    font-family: arial, sans-serif;
    font-size: 18px; /*----19 size of of Jump To----*/
    font-weight: normal;
    color: black; /*--color of Jump To--*/
    list-style-type: none; /*--no list bullet for Jump To--*/
    cursor: pointer; /*--makes the cursor appear as a pointer so it looks like a link--*/
}
#suckerfishnav2 a {
    text-decoration: none; /*--link is not underlined--*/
}


/*-------- dropdown----------*/
#suckerfishnav2 li ul {
    width: 160px; /*--180 width of the whole dropdown box--*/
    margin: 0; /*--lines up the dropdown box directly beneath its main topic--*/ 
    background-color: #ccf2ff; /*--light blue background, 99cccc old smoky blue--*/
    border: 1px solid #666666; /*--outside border of the box --*/
    border-top: 0; /*--no border on the top--*/
    padding: 0; /*--snugs the list of links to the left--*/
    position: absolute; /*-- ???? --*/
    left: -999em; /*-- ???? --*/
}
#suckerfishnav2 li ul li a {
    display: block;
    border-bottom: 1px dotted gray; /*---horizontal line separating topics---*/
    width: 145px; /*--120 sets the width of the links (and their colored hover box)--*/
    padding: 6px; /*--5 the padding around each colored hover box--*/    
    font-size: 16px;
    font-weight: normal;
    font-family: arial, sans-serif;
    color: #0044cc; /*---topics are blue to look like links---*/
}
#suckerfishnav2 a:visited {
    color: #800080; /*--purple--*/
}
#suckerfishnav2 li li:hover a {
    color: #ff0000; /*--links turn red on hover--*/
    background-color: #ccffdd; /*--light green box appears--*/
}

/*-----don't know what this does--*/
#suckerfishnav2 li:hover ul, #suckerfishnav2 li li:hover ul,  #suckerfishnav2 li.sfhover ul, #suckerfishnav2 li li.sfhover ul {
    left: auto; /*--?????--*/
    margin-top: 5px; /*--pushes dropdown box just below navbar so it lines up perfectly--*/
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*------similar breeds---------*/

.similar-breeds {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.similar-breeds img {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}
@media screen and (max-width: 501px) {
	.similar-breeds img {
	width: 35%;
	}
}	
.similar-breeds p {
    font-family: arial; sans-serif;
    font-size: 100%;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*----------author bio box for bridgebears----------*/
/*--------removes absolute positioning of ypp box--------*/

#authorbio {
width: auto;
margin-left: auto;
margin-right: auto;
font-family: arial, sans-serif;
font-size: 90%;
line-height: 150%;
max-width: 650px;

padding-top: 10px;
padding-right: 0;
padding-left: 15px;
padding-bottom: 10px;

background-color: #ffe5cc; /*--light orange beige, also ffe1ff pinkish lavender, ffcccc rose, ccffcc green, ccccff lilac purple, FFC0CB pink, FFC1C1 peach or rosy brown, B0E0E6 powder blue, C6E2FF slategray--*/ 
border: 3px solid #d1d1d1; /*--the border around the box, light gray--*/

  -webkit-border-radius: 5px; /*---rounds the corners of the box---*/
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: #999 10px 10px 10px; /*---color, horizontal offset (positive number puts shadow on right, negative on left), vertical offset (positive above box, negative below box, blur radius (0 is a sharp shadow, higher is more blurred)---*/
  -moz-box-shadow: #999 10px 10px 10px;
  box-shadow: #999 10px 10px 10px;
behavior: url(http://www.bridgebears.com/PIE.htc); /*---for older IE---*/

margin-bottom: 70px; /*--puts some space between the bio box and what's below it--*/
margin-top: 30px;
}

#authorbio img {
margin-right: 5px;
padding-right: 5px;
margin-bottom: 0;
padding-bottom: 0;
margin-top: 0;
padding-top: 0;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*----- addthis----------*/ 
.share-links {
max-width: 960px;
/*--width: 100%; can't be used when addthis is floated beside an img--*/
text-align: center;
margin-left: auto;
margin-right: auto;
    height: 30px; /*-- matches the height of the icon --*/
    overflow: hidden;
}


/*----------my books----------*/
.mybooks {
    float: left;
    margin-left: 20px; 
    max-width: 700px;
    margin-bottom: 30px;
    font-family: arial, sans-serif;
    font-size: 95%;
    line-height: 150%;
}
.mybooks img {
    float: left;
    width: 110px; /*--standardizes the width of img--*/
    height: 147px; /*--standardizes the height, which keeps the floats functioning properly--*/
    padding-right: 20px;
    padding-bottom: 10px;
}


/*----------related articles----------*/
.relatedarticles {
    float: left;
    width: 300px;  /*--small enough to fit on the smallest 320 screen--*/
    margin-left: 20px;
    max-width: 100%;   /*--just in case additive margins would make the div too large for 320 screen--*/
    margin-bottom: 30px;
    font-family: arial, sans-serif;
    font-size: 90%;
    line-height: 160%;
}
.relatedarticles > img {
    float: left;
    width: 150px; /*--standardizes the width of img--*/
    height: 141px; /*--standardizes the height, which keeps the floats functioning properly--*/
    padding-right: 10px;
    padding-bottom: 10px;
}

/*----------copyright----------*/
#copyright  {
    font-size: 80%;
    font-family: verdana, arial, sans-serif;
    text-align: center;
    line-height: 140%;
    padding-top: 30px;
}


/*----------footer----------*/ 
#footer {
    font-size: 85%;
    font-family: verdana, arial, sans-serif;
    text-align: center;
    background-color: #9cceff;
    padding: 12px;
    margin: 0;
}

#footer a {
    text-decoration: none;
}


/* -- on small screens, hides desktop versions of content ----  */
@media screen and (max-width: 500px) {
	.hide-mobile { display: none; }
}
/* ---on larger screens, hides mobile versions of content----- */
@media screen and (min-width: 501px) {
	.hide-desktop {display: none; }
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*-----------------------images and captions--------------------*/

/*---on review pages, this class is used above a headline as a filler, so jumplinks will properly display the headline on a mobile screen beneath two sticky menus that would otherwise cut off the headline--*/

.review-icon {
    padding-top: 10px;
    padding-bottom: 10px;
}


/*----------small images under 160px---------*/

/*--These classes are for small images without captions (generally <160px) where the image stays the same size and floats on all screen sizes because there's room for text beside it even on a 320 screen.---*/

img.sm-floatleft {
    float: left;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 0;
}
img.sm-floatright {
    float: right;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 20px;
}
@media screen and (min-width: 700px) {
img.sm-floatleft {
    padding-right: 15px;
    margin-left: 20px;
    }
img.sm-floatright {
    padding-left: 15px;
    margin-right: 20px;
    }
} /*---end media query--*/



/*----------larger images over 160px---------*/

 /*----These 3 positioning classes are for images (generally >160px) that will remain their native size (unless they're larger than the screen width, whereupon they will be shrunken to fit the screen by the style max-width (100% on mobiles, 50% on 700+ screens). These images are centered on mobiles because there's no room for text to flow beside them on the smallest 320 screen. They float on larger screens because there's room for text to flow beside them.---*/

/*---If an image has no caption, this class attaches to img. Wih a caption, this class attaches to a div that enwraps both image and caption.------*/   

.centered-floatleft {
    display: block; 
    margin: auto;      
    height: auto;
    max-width: 100%; /*--restricts divs (when attached to a div) or images (when attached to an img) to the available size of the screen; otherwise for example, a 350px div or img on a 320 screen would create a 30px scroll bar, but the 100% makes the browser shrink the div or img to fit the 320 screen--*/
}
.centered-floatright {
    display: block; 
    margin: auto;      
    max-width: 100%;
    height: auto;
}
.centered {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
}
@media screen and (min-width: 700px) {
.centered-floatleft {
    float: left;
    margin: 10px 35px 10px 20px;
    height: auto;
    max-width: 50%; /*--if the sharing size of a div (when attached to a div) or image (when attached to an img) is less than 50% of the screen, it will be displayed at its sharing size; otherwise, on smaller screens max-width shrinks the div or img to 50% so there's room for text to fit beside it--*/
}
.centered-floatright {
    float: right;
    margin: 10px 20px 10px 35px;
    height: auto;
    max-width: 50%;
}
/*-- this class is especially useful for large images (maybe 380+) that you don't want reduced to 50% (which is what the two classes above do) --*/
.centered {
    display: block;
    float: none; /* --- this is unnecessary, just here as a reminder --- */
    margin: auto;
    max-width: 90%; /*--prevents large images from creating a scroll bar on intermediate size screens--*/
    height: auto;
}
} /*--end media query--*/


/*---- When the 3 positioning classes above have reduced an img (with no caption) for mobiles, but the img looks too small, the following classes enlarge the image to the full width of the screen. If the enlarged image looks too big at the specified 100% (especially check a 480 screen), create a new class (mobile80, mobile70, etc.) to make it fill whatever space looks good.--*/

.mobile100 {
    width: 100%;
    height: auto;
    margin: auto;
}


/*---When the 3 positioning classes above (centered-floatleft, etc.) are attached to a div, the div is restricted to 100% (when centered on small screens), 50% (when floated on large screens), or 90% (when centered on large screens). But the img within also needs to be restricted to 100% of its div so it doesn't overflow the div. The following 3 classes do that. Note that when the classes above are instead attached to an img, the following 3 classes are not used by the browser.---*/

	div.centered-floatleft img { max-width: 100%; }
	div.centered-floatright img { max-width: 100%; }
	div.centered img { max-width: 100%; }


/*---When the 3 positioning classes above (.centered-floatleft, etc.) are attached to a div, the div needs to be given a width corresponding to the image width.-- */
	.width170px { width: 170px; }
	.width180px { width: 180px; }
	.width190px { width: 190px; }
	.width200px { width: 200px; }
	.width210px { width: 210px; }
	.width220px { width: 220px; }
	.width230px { width: 230px; }
	.width240px { width: 240px; }
	.width250px { width: 250px; }
	.width260px { width: 260px; }
	.width270px { width: 270px; }
	.width280px { width: 280px; }
	.width290px { width: 290px; }
	.width300px { width: 300px; }

 /*--allows some margin to avoid a scrollbar on small devices--*/
	.width310px { width: 310px; max-width: 96%; }
	.width320px { width: 320px; max-width: 96%; } 
	.width330px { width: 330px; max-width: 96%; } 
	.width340px { width: 340px; max-width: 96%; } 
	.width350px { width: 350px; max-width: 96%; } 
	.width360px { width: 360px; max-width: 96%; } 
	.width370px { width: 370px; max-width: 96%; } 
	.width380px { width: 380px; max-width: 96%; } 
	.width390px { width: 390px; max-width: 96%; } 
	.width400px { width: 400px; max-width: 96%; } 
	.width410px { width: 410px; max-width: 96%; } 
	.width420px { width: 420px; max-width: 96%; } 
	.width430px { width: 430px; max-width: 96%; } 
	.width440px { width: 440px; max-width: 96%; } 
	.width450px { width: 450px; max-width: 96%; } 
	.width460px { width: 460px; max-width: 96%; } 
	.width470px { width: 470px; max-width: 96%; } 
	.width480px { width: 480px; max-width: 96%; } 
	.width490px { width: 490px; max-width: 96%; } 
	.width500px { width: 500px; max-width: 96%; } 
	.width600px { width: 500px; max-width: 96%; } 

 /*--the max-width restriction above is removed for larger screens--*/
 @media screen and (min-width: 700px) {
	.width310px { width:310px; }
	.width320px { width:320px; }
	.width330px { width:330px; }
	.width340px { width:340px; }
	.width350px { width:350px; }
	.width360px { width:360px; }
	.width370px { width:370px; }
	.width380px { width:380px; }
	.width390px { width:390px; }
	.width400px { width:400px; }
	.width410px { width:400px; }
	.width420px { width:400px; }
	.width430px { width:400px; }
	.width440px { width:400px; }
	.width450px { width:450px; }
	.width460px { width:400px; }
	.width470px { width:400px; }
	.width480px { width:400px; }
	.width490px { width:400px; }
	.width500px { width:500px; }
} /*----end media query---*/



/*-------------------------captions--------------------------*/

/*---The caption class attaches to a p below an image. Both are surrounded by a div, which is usually floated using one of the three positioning classes above.---*/

.caption-pic {
    font-family: verdana, helvetica, sans-serif;
    font-size: 80%;
    line-height: 140%;
    font-style: italic;
    padding: 0 5px 15px 5px; /*--0 puts the caption close to its image--*/
}
@media screen and (min-width: 700px) {
.caption-pic { 
    font-size: 75%;
    padding-left: 10px;
    padding-right: 0;
}
} /*----end media query---*/



/*----------------- end css for images and captions--------------- */


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*----------special css for larger screens (min-width: 501px)----------*/

/* -------full width banner for larger screens --------*/

@media screen and (min-width: 501px) {
.banner {
    width: 100%;
    max-width: 960px;
    height: auto;
    border: 0;
    margin: 0;
    padding: 0;
}
} /*---end media query--*/


/*
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*----------special css for larger screens (min-width: 890px)----------*/

/*----------midpage-navbar for larger screens----------*/

@media screen and (min-width: 890px) {

.hide-on-larger-screens {
    display: none; /* --hide the smaller navbar on larger screens-- */
}

/*--when the article div had its margins increased to make shorter lines for readability, the margins and width of the large navbar needed to be adjusted--*/
.midpage-navbar-large {
    background-color: #19499e; /*--medium blue--*/
    max-width: 960px;
    margin-left: -65px; /*--was auto--*/
    margin-right: 1px; /*--was auto--*/
    position: -webkit-sticky; /*--needed for safari--*/
    position: sticky;
    top: 1px; /*--sticks the large bar against the top of the screen--*/
    width: 118%; /*--was 100--*/
}

.midpage-navbar-box {
    position: relative;
    display: block;
    color: white;
    font-family: arial, sans-serif;    
    font-size: 85%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.midpage-navbar-box:hover {
    background-color: green;
}

.midpage-navbar-box+.midpage-navbar-box {
    border-left: 1px solid white;
}

.flex { /*--makes the boxes horizontal--*/
    display: flex;
}
.flex a:link { color: white; padding-left: 16px; padding-right: 16px; }
.flex a:visited { color: #ffcc66; } /*--orangey--*/
.flex a:hover { color: #ccffdd; } /*--light green--*/


} /* --- end media query for larger screens (min-width: 890px) --- */


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*------------------------Fixed Mobile Dropdown Menu----------------------*/

.banner-placeholder  {
    padding-top: 40px; /*--this has been commented out on the mega review pages, it had been used to allow the mobile navbar to fit above the H1; it needed to be OVERRIDDEN to 0 on responsive-sales.css due to no navbar--*/
}

@media screen and (max-width: 500px) {

.fixed-nav-bar {
    position: fixed; /*--stops nav bar from scrolling--*/
    width: 100%;
    height: 85px; /*--52, height of the navbar--*/
    background-color: white; /*---9cceff light blue---*/
    border-bottom: 1px solid green; /*--line under the navbar--*/
    top: 0;  /*---- don't know what this does---*/
    z-index: 9999; /*--or this--*/
}

/*--------logo-------------*/
.fixed-nav-bar img {
    float: left;
    padding-left: 15px;
}

.fixed-nav-bar ul {
    list-style-type: none;
    padding: 0 20px 0 15px; /*--overall padding of the main list within the navbar box--*/
    margin-top: 0; /*--overrides some mystery margin-top somewhere which would otherwise push the 3 topics to the bottom of the navbar--*/
}

/*----tagline ha styles honest advice, ad styles about dogs, the only difference between them is that ha adds top padding and line height---*/
.fixed-nav-bar ul li p.learnhowto {
	font-size: 110%;
	font-family: arial, sans-serif;
	color: green;
	margin: 0;
	padding: 0;
	padding-left: 30px;
	line-height: 130%;
	padding-top: 5px;
}
.fixed-nav-bar  ul li p.playbridge {
	font-size: 110%;
	font-family: arial, sans-serif;
	color: green;
	margin: 0;
	padding: 0;
	padding-left: 30px;
}
.fixed-nav-bar  ul li p.better {
	font-size: 110%;
	font-family: arial, sans-serif;
	color: green;
	margin: 0;
	padding: 0;
	padding-left: 30px;
}
.fixed-nav-bar ul li p a {
	color: green!important;
}

.fixed-nav-bar  ul li {
    display: inline;
    float: left;
    padding: 0; /*--was 0, only affects the Menu box, keeps it within the navbar, otherwise drops into the page--*/
}

#breed-5 {
    padding: 14px 6px; /*--14px 6px positions the Menu box in the right corner--*/
}

/*----- styles the word Menu----*/
.fixed-nav-bar ul li a { 
display: block;
    text-decoration: none;
    color: #333 !important;
    font-weight: normal;
    line-height: normal;
    text-shadow: 0 0;
    text-decoration: none;
}

/* ---- creates and styles the blue box around Menu and the V arrow ---- */
/*--in the html, these two classes are in spans, put them on one continuous line--*/
.box {
    border: 1px solid black;
    padding: 4px;
    background-color: #ccf2ff; /*--very light blue--*/
}
/* ---- size of the special character down triangle ---- */
.small {
    font-size: 12px;
}


/*---dropdown menus.....I don't know what much of it means---*/
/*--seems like it should snug the dropdown menu tight against the fixed navbar but it doesn't seem to work nor to be responsive to change--*/
#breed-6 { 
    padding-top: 0;
    margin-top: 0;
}
.fixed-nav-bar.hide-desktop ul ul {
    background-color: #ccf2ff; /*--light blue color of dropdown boxes, 99cccc orig bluegreen--*/
    padding-left: 0;
    display: none;
    left: 0;
    margin-top: 0; /*---THIS snugs the dropdown against the fixed navbar--*/
    position: absolute;
    width: 100%;
    transition: all 0.2s linear 0s;
}
.fixed-nav-bar.hide-desktop ul ul li {
    display: block;
    float: none;
    text-align: left;
    border-bottom: 1px solid;
    margin: 0 10px!important; /*--left and right margin of text within each dropdown rectangle--*/
    padding: 11px;  /* --space all around the text in each drop down list-- */
}
.fixed-nav-bar.hide-desktop ul ul li a {
    font-family: arial, sans-serif;
    font-size: 18px;
    line-height: 150%;
    margin: 0 0 0 6px;
}

.fixed-nav-bar ul ul li a { /*why must this selector be separated from the one above?--*/
    color:#000 !important;
}

.fixed-nav-bar ul ul li a:hover {
    color: blue!important; /*--dropdown menu, text color upon hover --*/ 
}

} /*--end max-500 media query--*/

/* --- end Mobile Menu except for the following media query which shrinks font size and spacing to make the menu fit the smallest phones 320-360  --- */

@media screen and (max-width: 360px) {
.fixed-nav-bar > ul li {
    margin: 0 0 15px 0;
}
.fixed-nav-bar > ul li a {
    font-size: 12px;
}
} /*----------end of media query max-width 360----------*/




/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*--------------------Suckerfish Global Menu For Large Screens---------------*/

#suckerfishnav {
    background: #1f3e9f url("http://www.bridgebears.com/Graphics/suckerfish_blue.png") repeat-x;
    float: left; /*--when absent, the blue bar vanishes?!--*/
    width: 100%;
    margin: 0; /*--snugs the bar against the edge of the page--*/
    padding: 0; /*--snugs the main topics into the corner of the bar--*/
    font-size: 13px; /*--for topics, media query increases it later--*/
    font-weight: bold;
    color: #ddd;
    cursor: pointer; /*--makes the cursor appear as a pointer so it looks like a link--*/
}

#suckerfishnav li {
    float: left; /*--makes the main topics horizontal--*/
    list-style-type: none; /*--no bullets--*/
    padding: 10px 15px; /*--spacing between main topics--*/
    height: 20px; /*--height of the blue bar--*/
    line-height: 20px; /*--centers main topics vertically within the bar, needs to match value above--*/
    font-family: arial, sans-serif;
}

#suckerfishnav a {
    text-decoration: none; /*--links are not underlined--*/
    color: white;
}


/*-------- dropdowns----------*/

#suckerfishnav li ul {
    width: 100%;
    width: 248px; /*--248 forms the dropdown box--*/
    margin: 0; /*--lines up the dropdown box directly beneath its main topic--*/ 
    background: #99cccc; /*--smoky blue background of dropdown box--*/
    border-left: 1px solid #666666; /*-- outside border of the box (none on top) --*/
    border-right: 1px solid #666666; /*-- outside border of the box (none on top) --*/
    border-bottom: 1px solid #666666; /*-- outside border of the box (none on top) --*/
    z-index: 9999; /* -- stops Add This icons from showing through the drop downs -- */
    position: absolute; /*-- ???? --*/
    left: -999em; /*-- ???? --*/
    padding: 0; /*--snugs the entire list of links to the left--*/
}


#suckerfishnav li li {
    border-bottom: 1px solid #666666; /*--separates dropdown cells with a horizontal line--*/
}

/*-----I don't know why this padding and margin by Wassim are necessary but they are------*/
#suckerfishnav li ul li {
    padding: 0 0; /*--?????--*/
    margin: 0 0; /*--?????--*/
    height: auto; /*--makes the dropdown box tall enough for its content--*/
}

#suckerfishnav li ul li a {
    display: block;
    width: 224px; /* 224 sets the width of the dropdown link text (and the blue highlight box)--*/
    padding-left: 15px; /*--left padding of link text--*/
    padding-right: 10px; /*--right padding of link text--*/
    padding-top: 12px;  /*--provides space above the link text for clickability--*/
    padding-bottom: 12px; /*--provides space below the link text for clickability--*/
    font-size: 16px;
    font-weight: normal;
    font-family: 'arial, sans-serif;
    color: black;
}

#suckerfishnav li:hover {
    color: white; /*--turns main menu and dropdown links white upon hover--*/
}

#suckerfishnav li li:hover a {
    background: #5e7ad3; /*--adds darkish blue background on dropdown links--*/
}

#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul,  #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul {
    left: auto; /*--?????--*/
    margin-top: 10px; /*--pushes dropdown box just below navbar so it lines up perfectly--*/
}



/*-----styles the Recommended dropdown differently than the others------*/

#suckerfishnav li ul.recommended  {
width: 215px; /*--165 makes this dropdown box less wide--*/
margin-left: -5px; /*--lines up this dropdown box to the left of the main topic so it fits on smaller screens--*/ 
}

#suckerfishnav li ul li a.recommended {
width: 195px; /*-- 145 sets the width of the link text (and the blue highlight box)--*/
padding-left: 10px; /*--left padding of link text--*/
}


/*-----styles the About dropdown differently than the others------*/

#suckerfishnav li ul.about  {
width: 135px; /*--125 makes this dropdown box less wide--*/
margin-left: -40px; /*--lines up this dropdown box to the left of the main topic so it fits on smaller screens--*/ 
}

#suckerfishnav li ul li a.about {
width: 115px; /* 105 sets the width of the link text (and the blue highlight box)--*/
padding-left: 10px; /*--left padding of link text--*/
}

/*---enable this selector if we want just one item in the dropdown; it removes the horizontal separator line---*/
/*--also must add the about class to the li--*/
/*--#suckerfishnav li ul li.about {
border-bottom: none;
}--*/


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*---------------------Media Queries for Suckerfish Global Menu-------------*/

@media screen and (min-width:501px) {

#suckerfishnav li {
    padding: 10px 5px; /*--DECREASES spacing between main topics--*/
  }

#suckerfishnav li ul.recommended  {
margin-left: -40px; /*--repositions the dropdown to fit the screen--*/ 
}

#suckerfishnav li ul.about  {
margin-left: -80px; /*--repositions the dropdown to fit the screen--*/ 
}
  
}   /* -- end of media query -- */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


@media screen and (min-width:550px) {

#suckerfishnav {
      font-size: 14px; /*--increases font size of main topics on navbar--*/
    }
#suckerfishnav li ul.about  {
margin-left: -70px; /*--repositions the dropdown to fit the screen--*/ 
}
}   /* -- end of media query -- */


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


@media screen and (min-width:600px) {

#suckerfishnav {
    font-size: 15px; /*--increases font size of main topics on navbar--*/
  }

#suckerfishnav li ul.recommended  {
margin-left: -10px; /*--repositions the dropdown to fit the screen--*/ 
}

#suckerfishnav li ul.about  {
margin-left: -60px; /*--repositions the dropdown to fit the screen--*/ 
}

}   /* -- end of media query -- */


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


@media screen and (min-width:640px) {

#suckerfishnav {
    font-size: 16px; /*--increases font size of main topics on navbar--*/
  }

#suckerfishnav li {
    padding: 10px 8px; /*--increases spacing between main topics--*/
  }

#suckerfishnav li ul.about  {
margin-left: -50px; /*--repositions the dropdown to fit the screen--*/ 
}
  
}  /* --end of media query--- */


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


@media screen and (min-width:690px) {

#suckerfishnav {
    font-size: 17px; /*--increases font size of main topics on navbar--*/
  }

#suckerfishnav li ul.about  {
margin-left: -30px; /*--repositions the dropdown to fit the screen--*/ 
}

}   /* -- end of media query -- */


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


@media screen and (min-width:740px) {

#suckerfishnav {
    font-size: 18px; /*--increases font size of main topics on navbar--*/
  }
#suckerfishnav li {
    padding: 10px 12px; /*--increases spacing between main topics--*/
  }

#suckerfishnav li ul.about  {
margin-left: -30px; /*--repositions the dropdown to fit the screen--*/ 
}

}   /* -- end of media query -- */


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


@media screen and (min-width:800px) {

#suckerfishnav li {
    padding: 10px 20px; /*--increases spacing between main topics--*/
  }

#suckerfishnav li ul.recommended  {
margin-left: -1px; /*--repositions the dropdown to fit the screen--*/ 
}

#suckerfishnav li ul.about  {
margin-left: -10px; /*--repositions the dropdown to fit the screen--*/ 
}

} /* -- end of media query -- */


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


@media screen and (min-width:850px) {

#suckerfishnav li ul.recommended  {
margin-left: -1px; /*--repositions the dropdown to fit the screen--*/ 
}

#suckerfishnav li ul.about  {
margin-left: -1px; /*--repositions the dropdown to fit the screen--*/ 
}

} /* -- end of media query -- */



/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */



/* --------------------bridgebears specific---------------------- */ 

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

/*----makes links with no underline or color change---*/
.clean	{	
	text-decoration: none;
	color: black;
}


/*  --------home page, the 4 yellow boxes--------- */ 

.home-topics-title {
    font-size: 120%;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-bottom: 8px;
}
.home-topics-description {
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
    text-align: left;
}
.home-topics-float {
    display: block;
    margin: auto;
    height: auto;
    max-width: 100%; /*--restricts divs to the available size of the screen; otherwise for example, a 350px div on a 320 screen would create a 30px scroll bar, but the 100% makes the browser shrink the div to fit the 320 screen--*/
}
@media screen and (min-width: 600px) {
.home-topics-float {
    float: left;
    width: 40%; /*--shrinks the pics on larger screens, allowing them to slide up beside each other into two rows--*/
    margin-left: 20px;
    margin-bottom: 10px; /*--spacing between top and bottom boxes--*/
}
} /*--end media query--*/
@media screen and (min-width: 800px) {
.home-topics-float {
    margin-left: 40px;
}
} /*--end media query--*/



/*--------------suit symbols-------------------*/
.SHDC	{
	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;
}



/*---------------------hand diagrams------------*/

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

table.fourhands2  {
	border-color:  green;
	border-width:  4px;
	border-style:  double; 
	margin: 0 15px 10px 0;
	padding: 10px 0 10px 10px;
	line-height: 1.3em;
	font-size: 93%;
	float: left;	
	border-spacing: 0;
	background-color:  #fffaf0;
}


.onehand {
	border-color:  green;
	border-width:  4px;
	border-style:  double; 
	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;  /*--floral white--*/
}

.bidding  {
	border-color:  green;
	border-width:  4px;
	border-style:  double; 
	padding: 5px 5px 15px 10px;
	margin: 0px 20px 20px 20px;
	width: auto;
	text-align:  center;	
	line-height: 1.3em;
	clear:  none;
	float:  left;
	caption-side:	top;
	background-color: #fffaf0;  /*--floral white--*/
	width: 250px;
	font-size: 90%;
}

/*----styles the caption of the above hand diagrams---*/
.caption  {
	text-align:  left;
	font-size:  90%;
	padding: 0px 0px 0px 30px;
	color:  black;
	clear: none;
}



/*-------------collapsible divs, dynamic drive-------------*/

button	{
	font-size: 95%;	
	font-weight: bold;
	font-family: verdana, arial, sans-serif;
	padding: 3px, 15px, 3px, 10px;
	cursor:pointer;
}

.greenbutton	{
	background-color:   #9aff9a; 
	border: solid blue 2px;
	padding: 0px 15px 2px 15px;
	margin-left: 20px;
	margin-bottom: 10px;
}

.bluebutton	{
	background-color:   #c1f0f6; 
	border: solid blue 2px;
	padding: 0px 15px 2px 15px;
	margin-left: 20px;
	margin-bottom: 10px;
}

.yellowbutton	{
	background-color:   #ffff7e; 
	border: solid blue 2px;
	padding: 0px 15px 2px 15px;
	margin-left: 20px;
	margin-bottom: 10px;
}

.pinkbutton	{
	background-color:   #ffcccc;  
	border: solid blue 2px;
	padding: 0px 15px 2px 15px;
	margin-left: 20px;
	margin-bottom: 10px;
}

.tanbutton	{
	background-color:    #fee5ac;  /*--color name: honey--*/
	border: solid blue 2px;
	padding: 0px 15px 2px 15px;
	margin-left: 20px;
	margin-bottom: 10px;
}


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

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

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

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

.tanslide	{
	max-width: 500px;
	overflow: hidden;
 	margin-left: auto; 
 	margin-right: auto;
	margin-top: 0px;
	padding:  0px 5px 0px 15px;
	display: none;
	background-color: #fee5ac;    /*--#ffcc99;--*/
}


/*-------------collapsible divs, dynamic drive-------------*/

/*--a different kind of expandable div, per w3c code, a navigation module that lists all articles within Wintricks, Declarer, Defense, Bidding--*/
.expandable {
    background-color: #f0ffff; /*--f0ffff azure, dbf3ff light blue, ccffcc light green--*/
    color: black;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: 1px dotted blue;
    text-align: left;
    outline: none;
    font-family: arial, sans-serif;
    font-size: 80%;
}
.expandable-dropdown {
    padding: 0 18px;
    display: none;
    width: 90%;
    font-size: 90%;
    line-height: 120%;
    overflow: hidden;
    background-color: #f0ffff;  /*--f0ffff azure, dbf3ff light blue, f1f1f1 light gray--*/
}
@media screen and (min-width:600px) {
.expandable {
    width: 80%;
  }
 .expandable-dropdown {
    width: 73%;
  }
}
@media screen and (min-width:750px) {
.expandable {
    width: 70%;
  }
 .expandable-dropdown {
    width: 65%;
  }
}   /* -- end of media query -- */