body {
  margin: 0;
  border:0;
  background-color: #FFF;
}

body, td, .standardText {
  font-family: Trebuchet MS, Helvetica, sans-serif;
  color: #333333;
}

.mceContentBody, .editorBody {
   background: #FFF !important;
	 font-size: inherit;
   font-size:14px;
	 text-align:left;
	 padding:5px;
}

input, select {
  font-family: Trebuchet MS, Helvetica, sans-serif;
  font-size: smaller;
	margin: 2px;
	padding: 1px;
}

.pageCenterTitle {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 12px;
  display:block;
}

legend {
  font-size: 1.2em;
  font-weight: bold;
  padding:0 5px;
}

.navLinks {
  TEXT-ALIGN: center;
  padding-bottom: 20px;
  font-size: smaller;
}

.standout {
  color: #489CCB !important;
}

a:link, .standout {
  color: #489CCB;
}

a:visited {
  color: #489CCB;
}

a:active {
  color: #9CD0EB;
}

a:hover {
  color: #9CD0EB;
}


.secondary {
  color: #FFF;
  background-color: #2B377C;
}

.secondary .editableShow {
  border: 1px solid #FFF;
}

.strong {
  color: #FFFFFF;
  background-color: #489CCB;
}

.menuText {
  font-size: 10px;
  color: #FFF;
}

.menuText a:link, .menuText a:visited {
  color: #FFF;
  text-decoration: none;
}

.menuText a:hover {
  color: #489CCB;
}

.menuL1, .menuL2, .menuL3 {
  cursor: default;
}

.contentSectionHeader {
  background-color: #2B377C;
  text-align: center;
  font-weight: Bold;
  font-style: Italic;
  color: #FFF;
	margin: 8px 0px 8px 0px;
	display:block;
}

.fieldMessageArea {
  white-space: no-wrap;
  margin-left: 3px;
  font-weight: bold;
}

.ddDivider {
  background-color: beige;
  letter-spacing: .5px;
  font-weight: bold;
}

.ddControl {
  color: darkred;
}

.ddCurrent {
  color: darkred;
  font-weight: bold;
}

.ddFaded {
}

/*  Table styles  */

table.portalTable {
	width: 450px;
  margin-top: 4px;
	margin-bottom: 4px;
	border: 1px solid #333333;
	empty-cells: show;
  border-collapse: collapse;
}

.portalTable caption {
  font-size: 120%;
	font-weight: bold;
}

.portalTable thead td, .portalTable tfoot td {
	border-bottom: 1px inset #333333;
  background-color: #2B377C;
  font-size: .72em;
  font-weight: bold;
  color: #FFF;
  padding: 4px;
  white-space: nowrap;
	vertical-align: middle;
}

.portalTable thead td a:hover {
  cursor: pointer;
}

.portalTable td {
  font-size: .72em;
  vertical-align: top;
	padding: 4px;
}

.portalTableSectionLeft {
  font-size: 115%;
  float: left;
  display: inline;
}

.portalTableSectionRight {
  background-color: #FFF;
	color: #333333;
  float: right;
  display: inline;
  padding: 3px;
}

.portalTableSectionRight div {
  border-left: 4px solid #333333;
}

.portalTableName {
  text-align: right;
  vertical-align: top;
  border-bottom: 1px inset #333333;
}

.portalTableValue {
  border-bottom: 1px inset #333333;
  padding-left: 8px !important;
  text-align: left;
}

.portalTableValueRequired {
  border-left: 4px solid #333333;
  border-bottom: 1px inset #333333;
  text-align: left;
}

.portalTableValueStandout {
  border-bottom: 1px inset #333333;
  padding-left: 8px !important;
  color: #FFF;
  background-color: #2B377C;
}

.portalTableValue .fieldError, .portalTableValueRequired .fieldError {
	color: #489CCB;
	font-weight: bold;
}

.portalText, .portalTable textarea {
  color: #333333;
  border: 1px solid #333333;
  font-family: Trebuchet MS, Helvetica, sans-serif;
  font-size: 1.1em;
}

.portalTableValue>.portalText {
  font-size: 1em;
	padding: 1px;
}

.portalTable select, .portalSelect {
  color: #333333;
  border: 1px solid #333333;
	font-size: 1em;
}

.portalCheckbox {
  margin: 0px;
}

.portalButton, .portalSubmit, .submit {
  background-color: #2B377C;
  font-weight: bold;
  color: #FFF;
  border: 1px solid #FFF;
  margin: 10px 5px;
}

.portalButton:hover, .portalSubmit:hover, .submit:hover {
  background-color: #489CCB;
  color: #FFFFFF;
  border: 1px solid #2B377C;
}

.portalActions {
  text-align: left;
  font-weight: bold;
  vertical-align: top;
}

.portalTable .sorttable_nosort {
  white-space: nowrap;
}

.atb {
  border-bottom: 1px inset #2B377C;
  line-height: 1.5em;
}

/*  End Table Styles  */

.addNewItem {
  white-space: nowrap;
}

.center {
  text-align: center;
}

.message {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 300px;
  padding: 10px;
  margin-bottom: 15px;
  background-color: #2B377C;
  border: black solid 1px;
  font-weight: bold;
  font-size: 13px;
  color: #FFF;
}

#pageMessagesBox {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 500px;
  padding: 10px;
  margin-bottom: 15px;
  background-color: #2B377C;
  border: black solid 1px;
  font-size: 13px;
  color: #FFF;
}

.pageMessageError {
  margin:3px;
  margin-bottom:7px;
  text-align:left;
}

a.clicktoerror {
  text-decoration:underline;
  cursor:pointer;
  font-weight:bold;
}

a.clicktoerror:hover {
  text-decoration:none;
}

.error, .required {
color: #489CCB;
font-weight: bold;
font-size: .85em;
margin-left: 2px;
}

.note {
color: #489CCB;
font-size: .85em;
}

.formButtons {
text-align:center;
}

.comments {
  font-size: .85em;
  background-color: #2B377C;
  color: #FFF;
  margin: 20px;
  padding: 8px;
  border: 1px solid #FFF;
}

.rainbowbridgeTop, .browsekittensTop, .browseTop {
  margin: 5px;
}

.littlespace {
  margin: 8px;
}

.animalDetailBlock {
  margin-top: 15px;
  margin-bottom: 15px;
}

.animalDetailTitle {
  font-weight: bold;
}

.smallFormField {
  margin: 1px;
  padding: 1px;
  font-size: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

.flags {
  text-align: center;
}

.flags img {
  border: none;
  vertical-align: middle;
}

.translate {
  background-color: yellow;
  color: black;
  font-weight: bold;
  cursor: pointer;
}

.nowrap {
  white-space: nowrap;
}

.inline {
	display : inline;
}

.animalimg {
  text-decoration: none;
    border: 1px solid black;
}

.logoimg {
  border: none;
  margin: 5px;
}

.AnimalAd {
  border: none;
  text-align: center;
  font-size: x-small;
  margin:10px
}

.smaller, .boxedLinks {
  font-size: smaller;
}

.iGive {
  background-image: url(https://s3.amazonaws.com/imagesroot.rescuegroups.org/swingbags120.gif);
}

.noFormatting {
  margin: 10px;
}

.littleFont{
	font-size:0.65em;
}

.affiliate {
	text-align : center;
	font-size:0.65em;
	margin-left : auto;
	margin-right : auto;
	margin-top : 5px;
	width : 100%;
}

#affiliateVolunteerMatch {
	background-color:white;
	margin-left:auto;
	margin-right:auto;
	width:130px;
}

#affiliateUnitedWay {
	background-color:white;
	margin-left:auto;
	margin-right:auto;
	width:100px;
}

#affiliatePaypal {
  width: 73px;
  height: 44px;
  margin-right: auto;
  margin-left: auto;
  background: url(https://s3.amazonaws.com/imagesroot.rescuegroups.org/x-click-butcc-donate.gif);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

/*  Admin only styles  */

.adminMenu {
  width: 100%;
  background: #2B377C;
}

.adminOnly {
  font-weight: bold;
  color: #489CCB;
}

.QAHidden {
	font-size: smaller;
	display: none;
}
.QAVisible {
	font-size: smaller;
	display: block;
}

.completedFormQuestion {
  font-weight: bold;
}

.completedFormAnswer {
}

/* Styles for the Tigra Menu */
/* Style for a block - DIV */
.m0table {
	background: #489CCB;
	border: 1px none #489CCB;
}
/* Style for outer tag, mout (mouse out) state */
.m0mouto {
	background: #FFF;
}

.m0movero, .m0mdowno {
	background: #2B377C;
}

/* Style for inner tag, mover (mouse over) state */
.m0inner, .m0mouti, .m0moveri, .m0mdowni {
	font-family: Trebuchet MS, Helvetica, sans-serif;
	font-size: 12px;
	padding: 3px;
}

.m0mouti {
  background-color: #FFF;
  color: #333333;
}

.m0moveri {
  background-color: #2B377C;
  color: #FFF;
}

.m0mdowni {
  background-color: #489CCB;
  color: #FFFFFF;
}

#actionsButtonsBottom, #actionsButtonsTop {
  width: 525px;
	margin-left: auto;
	margin-right: auto;
}

.dataTableForm {
  display: inline;
}

#PageFooter {
  margin-top: 15px;
}

#PageHeader {
  margin-bottom: 15px;
}

.hiddenNotification {
  display: none;
}

.visibleNotification {
  font-size: .7em;
  background-color: #2B377C;
  color: #FFF;
  border: 1px solid #FFF;
  width: 250px;
  padding: 3px;
  white-space: nowrap;
  margin-left: auto;
  cursor: pointer;
	font-weight: bold;
	text-align: center;
  position: fixed;
  _position: absolute;
  top: 0px;
	_top:expression(eval(document.body.scrollTop));
  right: 0px;
}

html>body>.visibleNotification {
  position: fixed;
}

.copyright {
  text-align: center;
	margin: 15px;
	font-size:.65em;
}

.poweredby {
  text-align: center;
	margin: 15px;
}

.browsePicture{
float:left !important;
height:auto;
margin-right:15px;
overflow : hidden;
text-align:center !important;
width:260px;
}

.browseInfo{
text-align:left !important;
float : left !important;
width : 200px;
height:auto;
}

.browse{
text-align:left !important;
height:auto;
overflow : hidden;
width: 480px;
font-size: smaller;
margin-bottom : 15px;
margin-right : auto;
margin-left : auto;
}

.browseNoPicture {
border-bottom:2px solid black;
border-top:2px solid black;
float:left !important;
height:auto;
margin-right:15px;
overflow:hidden;
text-align:center !important;
width:260px;
}

.browseContainer {
text-align : center;
}

.npLinks {
  text-align: center;
	padding: 30px;
  /*clear: both;
  //margin: 20px;*/
}

.highlighted {
margin: 5px auto 15px auto;
text-align:left !important;
height:auto;
overflow : hidden;
width: 100%;
font-size: smaller;
}

.highlightedPicture {
float:left !important;
height:auto;
margin-right:15px;
text-align:center !important;
width:110px;
}

.highlightedInfo{
text-align:left !important;
float : left !important;
width : 380px;
height:auto;
}

.hightlightedReadMore {
font-size:smaller;
}

.lastUpdatedDT {
	text-align : center;
	font-size : 8pt;
}

.tinyMCEfontSize1 {
	font-size : 8pt;
}

.tinyMCEfontSize2 {
	font-size : 10pt;
}

.tinyMCEfontSize3 {
	font-size : 12pt
}

.tinyMCEfontSize4 {
	font-size : 14pt;
}

.tinyMCEfontSize5 {
	font-size : 18pt;
}

.tinyMCEfontSize6 {
	font-size : 24pt;
}

.tinyMCEfontSize7 {
	font-size : 36pt;
}

/*New Admin Menu Styles*/
/* Style for a block - DIV */
.m0table {
	background: #2B377C;
	border: 1px none #2B377C;
}
/* Style for outer tag, mout (mouse out) default state */
.m0default {
	background: #FFF;
}
/* Style for outer tag, mover (mouse over) state */
.m0hover {
	background: #2B377C;
}
/* Style for outer tag, mdown (mouse down) state */
.m0clicked {
	background: #2B377C;;
}
/* Style for inner tag */
.m0inner {
	font-family: Trebuchet MS, Helvetica, sans-serif;
	font-size: 12px;
	padding: 3px;
	color : #333333;
}
.m0innerhover {
	font-family: Trebuchet MS, Helvetica, sans-serif;
	font-size: 12px;
	padding: 3px;
	color : #FFF;
}
.m1table {
	background: #2B377C;
	border: 1px none #2B377C;
}
/* Style for outer tag, mout (mouse out) default state */
.m1default {
	background: #FFF;
}
/* Style for outer tag, mover (mouse over) state */
.m1hover {
	background: #2B377C;
}
/* Style for outer tag, mdown (mouse down) state */
.m1clicked {
	background: #2B377C;;
}
/* Style for inner tag */
.m1inner {
	font-family: Trebuchet MS, Helvetica, sans-serif;
	font-size: 12px;
	padding: 3px;
	color : #333333;
}

.m2table {
	background: #2B377C;
	border: 1px none #2B377C;
}
/* Style for outer tag, mout (mouse out) default state */
.m2default {
	background: #FFF;
}
/* Style for outer tag, mover (mouse over) state */
.m2hover {
	background: #2B377C;
}
/* Style for outer tag, mdown (mouse down) state */
.m2clicked {
	background: #2B377C;;
}
/* Style for inner tag */
.m2inner {
	font-family: Trebuchet MS, Helvetica, sans-serif;
	font-size: 12px;
	padding: 3px;
	color : #333333;
}

.helpPopupLink {
  text-decoration: none;
	font-weight: bold;
}

.helpPopupLink span {
	color: #489CCB;;
}

.bd {
  letter-spacing: .4px;
  font-size: 130%;
  color:#336699;
  text-align:center;
}

.bd img {
 vertical-align:middle;
}

#closePopUp{
	text-align:right;
}

#closePopUp a, #closePopUp a:link, #closePopUp a:visited, #closePopUp a:hover{
	color:#333;
	text-decoration:none;
	font-weight:bold;
	font-size:1.2em;
	text-transform:uppercase;
}

.yui-skin-sam .mask {
  background-color:#000000 !important;
  opacity:0.75 !important;
}

.yui-panel-container, .shadow {

}

.mask{

background-color:#000000 !important;
  opacity:0.75 !important;
}

.yui-skin-sam .yui-panel .hd {
  background:#F7F7F7 url('') !important;
  background-image:none !important;
  background-color:#F7F7F7 !important;
}

.yui-skin-sam .yui-panel .ft {
  background:#F7F7F7 url('') !important;
  background-image:none !important;
  background-color:#F7F7F7 !important;
}

#dogTimeSAD {
display:block;
text-align:center;
}

#dogTimeSAD img {
border:0px;
}

#dogTimeSAC {
display:block;
text-align:center;
}

#dogTimeSAC img {
border:0px;
}

.sparky {
height:350px;
width:170px;
margin-left:auto;
margin-right:auto;
padding:3px;
text-align:center;
}

/* Sytles for new grid animal list */

.animalBrowsePanel {
font-size:12px;
width:auto;
text-align:center;
}

.animalBrowsePanel hr {
  border: solid #489CCB 0;
  border-top-width: 1px;
  height: 0;
  color: #489CCB;
  margin:3px 0;
}

.animalGrid {
	margin-left:auto;
	margin-right:auto;
	width:760px;
}

.animalGrid .searchResultsCell {
    width: 253px;
  height: 110px;
  font: 12px Arial;
  padding: 0 6px;
  vertical-align: top;
  text-align:left;
}

.animalGrid .border {
	 border-right: 1px inset #489CCB;
}

.animalGrid .searchResultsCell img {
  border: 1px solid #2B377C;
}

.animalGrid .petName {
	display:block;
	width:100%;
	text-align:center;
	padding:6px 0 ;
	margin:3px 0 7px;
	background-color:#489CCB;
	color:#FFFFFF;
}

.animalGrid .petName a, .animalGrid .petName a:link, .animalGrid .petName a:hover,.animalGrid .petName a:visited {
	color:#FFFFFF;
}

.animalGrid .petNameBottom {
	display:block;
	width:100%;
	text-align:center;
	padding:3px 0 ;
	margin:3px 0 2px;
}

.animalGrid .petName,.animalGrid .petNameBottom,.animalGrid  .petBreed {
  font-weight: bold;
}

.animalGrid .noBorder {
  border-right: 0;
}

.animalBrowsePanel .pageLinks {
  margin-top: 12px;
  margin-bottom: 2px;
  background-color: #FFF;
  color:#333333;
  text-align: center;
  padding: 4px;
}

.animalBrowsePanel .pageLinks a, .animalBrowsePanel .pageLinks a:visited, .animalBrowsePanel .pageLinks a:active {
  border: 1px solid #2B377C;
  padding:0 4px 1px;
  color: #2B377C;
  margin: 0 4px;
}

.animalBrowsePanel .pageLinks a:hover {
  border: 1px solid #489CCB;
}

.animalBrowsePanel .pageLinksActive {
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #2B377C;
  padding:0 4px 1px;
}

.animalGrid .petPicLink {
  display: inline-block;
  text-align:center;
  float:left;
  margin:0 7px 3px;
  width:120px;
  height:120px;
}

* html .animalGrid .petPicLink {
  width:120px;
  height:120px;
}

.animalGrid .petPicLink a:hover {
  background-color: transparent;
}

.animalGrid .petDetails {
	text-align:left;
	display:inline-block;
	margin-top:1em;
	vertical-align:top;
	width:auto;
	float:left;
}

.animalGrid .petDetails span {
	display:inline-block;
	padding:2px;
}

.animalGrid .petDetails .petDescription {
	margin-top:10px;
}

#animalDetails.yui-panel .hd {
	display:none;
}
#animalDetails.yui-panel .ft {
	display:none;
}
#animalDetails.yui-panel .container-close {
	display:none;
}
#animalDetails.yui-panel .bd #closeAnimalDetails {
position:absolute;
bottom:5px;
right:7px;
font-size:12px;
letter-spacing:0px;
}

#animalDetails.yui-panel .bd #closeAnimalDetails a {
color:#489CCB;
}

.musicPlayer {
	position:fixed;
	*position:absolute;
	*left:expression(document.body.scrollLeft+document.body.clientWidth-this.clientWidth-2);
  *top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight-2);
	bottom:2px;
	right:3px;
	padding:5px;
	background-color:#FFF;
	border:1px solid #333333;
	width:190px;
}

.musicPlayer .control {
	position:absolute;
	top:3px;
	right:3px;
	z-index:10;
	cursor: pointer;
}

#mceTemplatePreview table td {
border:2px dotted #CCC;
}

#mceTemplatePreview table tbody td {
height:150px;
}

.sidebarBox {
text-align:left;
margin:10px auto;
border:1px solid #333333;
background-color:#FFF;
padding:5px;
}

.sidebarBox .heading {
	font-weight:bold;
	background-color:#2B377C;
	color:#FFF;
	border:1px solid #333333;
	font-size:1.15em;
	margin:1px;
	padding:3px;
	display:block;
}

.contentBoxBody {
text-align:left;
margin:10px auto;
border:1px solid #333333;
padding:5px;
color:#333333;
}

.contentBoxBody .heading {
	font-weight:bold;
	background-color:#2B377C;
	color:#FFF;
	border:1px solid #333333;
	font-size:1.15em;
	margin:1px;
	padding:3px;
	display:block;
}

.contentBoxStrong {
text-align:left;
margin:10px auto;
border:1px solid #333333;
padding:5px;
background-color:#489CCB;
	color:#FFFFFF;
}

.contentBoxStrong .heading {
	font-weight:bold;
	background-color:#2B377C;
	color:#FFF;
	border:1px solid #FFFFFF;
	font-size:1.15em;
	margin:1px;
	padding:3px;
		display:block;
}

.contentBoxStrong td {
	color:#FFFFFF;
	background-color:#489CCB;
}

.contentBoxStrong a{
	 color:#FFFFFF;
}
.contentBoxStrong a:link{
	 color:#FFFFFF;
}
.contentBoxStrong a:visited{
	 color:#FFFFFF;
}
.contentBoxStrong a:active{
	 color:#489CCB;
}
.contentBoxStrong a:hover{
	 color:#489CCB;
}

.contentBoxSecondary {
	text-align:left;
	margin:10px auto;
	border:1px solid #333333;
	padding:5px;
	background-color:#2B377C;
	color:#FFF;
}

.contentBoxSecondary td {
	color:#FFF;
	background-color:#2B377C;
}

.contentBoxSecondary .heading {
	font-weight:bold;
	background-color:#489CCB;
	color:#FFFFFF;
	border:1px solid #FFF;
	font-size:1.15em;
	margin:1px;
	padding:3px;
		display:block;
}

.contentBoxSecondary a{
	 color:#FFF;
}
.contentBoxSecondary a:link{
	 color:#FFF;
}
.contentBoxSecondary a:visited{
	 color:#FFF;
}
.contentBoxSecondary a:active{
	 color:#9CD0EB;
}
.contentBoxSecondary a:hover{
	 color:#9CD0EB;
}

.shopCategory {
text-align:center;
position:relative;
left:50%;
width:400px;
margin-left:-200px;
clear:left;
}

.shopPage {
text-align:center;
}

.siteSearchForm {
    border: 1px solid;
    font-size: 90%;
    margin: 5px 5px 10px;
    padding: 3px;
}

.siteSearchFormInline {
    border: 0px solid;
}

.hiddenElement {
  display:none;
}

#sponsorAnimalMainImage {
  float: left;
  margin: 0px 10px 0px 0px; 
  overflow: visible;
}

#sponsorAnimalSummary {
  text-align: left; 
  width: auto;
}

#animalSummary {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: larger;
  letter-spacing: 1.2px;
}

.message {
  color: #FFFFED;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  width: 300px;
  padding: 10px;
  margin-bottom: 15px;
  background-color: #336699;
  border: 1px solid #BBDBE6;
  margin-left: auto;
  margin-right: auto;
}

.message a {
  color: #FFFFED;
}

.pageMessageError {
	text-align: left;
	color: #900;
	margin-bottom: 2px;
	margin-left: 5px;
}
 
.pageMessageWarning {
	text-align: left;
	margin-bottom: 2px;
	margin-left: 5px;
}
 
.pageMessageInformational {
	text-align: left;
	margin-bottom: 2px;
	margin-left: 5px;
}

/* Override some styles from style_common.inc */
input, select {
  font-size: inherit;
}

.navLinks {
  font-size: inherit;
}

.portalTable caption {
  font-size: 1.2em;
}

.portalTable thead td, .portalTable tfoot td {
  font-size: inherit;
}

.portalTable td {
  font-size: inherit;
}

.portalTableSectionLeft {
  font-size: 1.1em;
}

.portalText, .portalTable textarea {
  font-size: 1.1em;
}

.portalTableValue>.portalText {
  font-size: 1em;
}

.portalTable select, .portalSelect {
	font-size: 1em;
}

.message {
  font-size: inherit;
}

.comments {
  font-size: .85em;
}

.animalSummary {
  font-size: inherit;
}

.smaller, .boxedLinks {
  font-size: .85em;
}

.affiliate {
	font-size:1em;
}

.QAHidden {
	font-size: .85em;
}
.QAVisible {
	font-size:.85em;
}

.visibleNotification {
  font-size: .85em;
}

html>body>.visibleNotification {
  position: fixed;
}

.copyright {
  text-align: center;
	margin: 15px;
	font-size:.85em;
}

.browse, .highlightedInfo{
font-size:14px;
}

.highlighted {
font-size:14px;
}

.highlightedPicture {
margin-top: -15px;
}

.hightlightedReadMore {
font-size:14px;
}

.lastUpdatedDT {
	text-align : center;
	font-size:14px;
}

.bd {
  font-size:inherit;
}

#closePopUp a, #closePopUp a:link, #closePopUp a:visited, #closePopUp a:hover{
	font-size:14px;
}

.littlespace {
	font-size:1em;
}

.littleFont {
	font-size:1em;
}

#sideBarHits{
	text-align:center;
	margin-top:5px;
}

#sideBarHits img {
	vertical-align:middle;
}

.portalTable tbody td {
	background : #FFF none repeat scroll 0 0;
}

body, td {
	font-size:14px;
	color:#333333;
  line-height:1.4em;
}


.portalTableValueStandout {
	background-color:#2B377C !important;
	border-bottom:1px inset #FFF !important;
	color:#FFF !important;
	padding-left:8px !important;
}

.secondary {
  color:#FFF;
  background-color:#2B377C;
}

.secondary a{
	 color:#FFF;
}
.secondary a:link{
	 color:#FFF;
}
.secondary a:visited{
	 color:#FFF;
}
.secondary a:active{
	 color:#9CD0EB;
}
.secondary a:hover{
	 color:#9CD0EB;
}

.contentSectionHeader {
	color:#333333;
	background-color:#FFF;
	text-align:left;
	font-size:1.25em;
	font-style:normal;
	border-bottom:2px solid #2B377C;
	padding-bottom:3px;
}
.contentSectionHeader a{
	 color:#489CCB;
	 text-decoration:none;
}
.contentSectionHeader a:link{
	 color:#489CCB;
}
.contentSectionHeader a:visited{
	 color:#489CCB;
}
.contentSectionHeader a:active{
	 color:#9CD0EB;
}
.contentSectionHeader a:hover{
	 color:#9CD0EB;
}

.portalTable thead td a, .portalTable tfoot td a{
	 color:#FFF;
}
.portalTable thead td a:link, .portalTable tfoot td a:link{
	 color:#FFF;
}
.portalTable thead td a:visited, .portalTable tfoot td a:visited{
	 color:#FFF;
}
.portalTable thead td a:active, .portalTable tfoot td a:active{
	 color:#9CD0EB;
}
.portalTable thead td a:hover, .portalTable tfoot td a:hover{
	 color:#9CD0EB;
}

.portalTableValueStandout a{
	 color:#FFF;
}
.portalTableValueStandout a:link{
	 color:#FFF;
}
.portalTableValueStandout a:visited{
	 color:#FFF;
}
.portalTableValueStandout a:active{
	 color:#9CD0EB;
}
.portalTableValueStandout a:hover{
	 color:#9CD0EB;
}

.message a{
	 color:#FFF;
}
.message a:link{
	 color:#FFF;
}
.message a:visited{
	 color:#FFF;
}
.message a:active{
	 color:#9CD0EB;
}
.message a:hover{
	 color:#9CD0EB;
}

.comments a{
	 color:#FFF;
}
.comments a:link{
	 color:#FFF;
}
.comments a:visited{
	 color:#FFF;
}
.comments a:active{
	 color:#9CD0EB;
}
.comments a:hover{
	 color:#9CD0EB;
}

.portalTableSectionRight a, .portalTableSectionRight a:link, .portalTableSectionRight a:visited {
	color:#489CCB !important;
}

.portalTableSectionRight a:hover {
	color:#9CD0EB;
}

#storiesPageLinks {
	padding-right:20px;
}

#pageMessage {
margin-top:20px;
}

.lastUpdatedDT {
	display:inline;
	float:right;
	font-size:1em;
}

.sparky {
	z-index:0;
}

.portalTable thead td, .portalTable tbody td, .portalTable tfoot td, .portalTable td, {
	font-size:14px;
}

#sidebarSparky {
	text-align:center;
	width:auto;
}

.sparky {
	height:300px;
	margin-top:7px;
}

/*Start Layout Specific Styles*/
body{
	text-align : center;
}

#adminMenuContainer .adminMenu{
	text-align : left !important;
	border-bottom : 2px solid #333333;
}

body {
	background-color : #333;
}

.siteWidth {
	width : 1050px;
}

#bodyContainer {
	margin:10px 0 5px 0;
	margin-left : auto;
	margin-right : auto;
	text-align : left;
	background-color : #FFF;
	font-size:inherit;
}

#header {
	margin: 0 0 0 0;
	color: #FFFFFF;
}

#headerContent {
  background-color : #489CCB;
  color:#FFFFFF;
  padding:10px;
}

#headerContent a{
   color:#FFFFFF;
}
#headerContent a:link{
   color:#FFFFFF;
}
#headerContent a:visited{
   color:#FFFFFF;
}
#headerContent a:active{
   color:#489CCB;
}
#headerContent a:hover{
   color:#489CCB;
}

#headerContainer a{
   color:#FFFFFF;
}
#headerContainer a:link{
   color:#FFFFFF;
}
#headerContainer a:visited{
   color:#FFFFFF;
}
#headerContainer a:active{
   color:#489CCB;
}
#headerContainer a:hover{
   color:#489CCB;
}

#headerLogo{
  }

#headerTitle{
  padding-left:5px;
  text-align:left;
  font-size:2em;
  font-weight:bold;
  color:#FFFFFF;
  letter-spacing:2px;
  white-space:nowrap;
}

#headerContact{
  padding-left:5px;
  text-align:left;
  color:#FFFFFF;
  font-weight:bold;
  white-space:nowrap;
}

#headerContact span{
  display:block;
  white-space:nowrap;
}


#editableHeader {
	display:inline;
}

#orgName {
	font-size:28px;
	margin-top:10px;
}

#slogan {
	font-size:18px;
	margin-top:5px;
}

#headerCustomText .boxedLinks {
	display:none;
}

.sidebarBox {
text-align:left;
margin:10px auto 20px auto;
}

.sidebarBox .heading {
	font-weight:bold;
	background-color:#2B377C;
	color:#FFF;
	border:1px solid #333333;
	font-size:1.15em;
	margin:1px;
	padding:3px;
}

.sidebarBox form {
	padding:3px 0 3px 20px;
}

.sidebarBox form .portalSubmit, .sidebarBox form .offCenter {
	margin-left:-20px;
}

.sidebarBox .menuL1 {
	padding:3px;
	margin:5px 0 5px 10px;
	font-weight:bold;
	background-color:#FFF;
	color:#333333;
	border:0px solid #333333;
	font-size:1.05em;
}

.sidebarBox .menuL2, .sidebarBox .menuL3 {
padding:1px 0px 1px 20px;
}

#footerAffiliates {
	padding:3px;
	text-align:center;
}

#footerAffiliates div {
	display:inline;
	*display:inline;
	padding:3px;
}

#footer td a{
	 color:#FFFFFF;
}
#footer td a:link{
	 color:#FFFFFF;
}
#footer td a:visited{
	 color:#FFFFFF;
}
#footer td{
	 color:#489CCB;
}
#footer td a:hover{
	 color:#489CCB;
}

#footerContent {
	background : #489CCB;
	color: #FFFFFF;
	min-height:200px;
}

#footerContent {
  padding:15px;
  color: #FFFFFF;
}

#footerContent td {
  color: #FFFFFF;
}

#footerMenu {
		padding:10px;
    text-align:center;
}

#footercopyright {
  text-align:center;
}

#copyright {
  width:600px;
  margin:auto;
}

.menuBottom, .menuBottomfirst {
	display:inline;
}

.menuBottom a, .menuBottomfirst a{
	 color:#FFF;
}
.menuBottom a:link, .menuBottomfirst a:link{
	 color:#FFF;
}
.menuBottom a:visited, .menuBottomfirst a:visited{
	 color:#FFF;
}
.menuBottom a:active, .menuBottomfirst a:active{
	 color:#9CD0EB;
}
.menuBottom a:hover, .menuBottomfirst a:hover{
	 color:#9CD0EB;
}


#sidebarmiddle {
	text-align:left;
}

#hitCounter {
	text-align:center;
}

.pageCenterTitle {
	text-align:left;
	font-size:1.55em;
}

#headerMenu {
  background-color: #2B377C;
  border-top:1px solid #FFF;
  border-bottom:1px solid #FFF;
}

#headerMenu a {
	display:inline-block;
	*display:inline;
	padding:3px;
}

#headerAffiliates {
	padding:3px;
	text-align:right;
	vertical-align:middle;
}

#headerAffiliates div {
	float:right;
	*float:none;
	padding:0 3px;
	display:inline;
}

#headerAffiliates div .littlespace {
	float:right;
	padding:0 3px;
	margin:0;
}

#headerMenu {
	vertical-align:bottom;
}

table#content {
margin-top:20px;
margin-bottom:20px;
background-color:#FFF;
}

#content tbody td {
	vertical-align:top;
}

#content tbody td#left, #content tbody td#right {
	padding: 10px 5px 5px;
	width:220px;
	*width:230px;
	text-align:center;
}

#content tbody td#center {
	padding: 0px 20px;
}

#subFooter, #subFooter a, #subFooter a:Link, #subFooter a:Hover, #subFooter a:Visited, #subFooter a:Active{
	color:#FFF;
}

/* Styles for the Tigra Menu */
/* Style for a block - DIV */
.menuLevel0 {
  background: #2B377C;
	border: 0px none #333333;
	margin-left:auto;
	margin-right:auto;
}

/* Style for outer tag, mout (mouse out) state */
.menuLevel0OuterOut, .menuLevel0OuterOver, .menuLevel0OuterDown {
  /*border: 1px solid #FFF;*/
  text-align:center;
  padding: 0px;
}

/* Style for inner tag, mover (mouse over) state */
.menuLevel0InnerOut, .menuLevel0InnerOver, .menuLevel0InnerDown {
  font-family: Trebuchet MS, Helvetica, sans-serif;
  font-size:15.4px;
  /*white-space:nowrap;*/
  background-color: #2B377C;
  color: #FFF;
    padding: 0px;
  text-align:center;
}

.menuLevel0InnerOut {
}

.menuLevel0InnerOver {
  background-color: #489CCB;
  color: #FFFFFF;
}

.menuLevel0InnerDown {
  background-color: #489CCB;
  color: #FFFFFF;
}

.menuLevel1 {
  background: #2B377C;
  border: 0px none #333333;
  margin-left:auto;
  margin-right:auto;
  padding: 0px;
}

.menuLevel1OuterOut, .menuLevel1OuterOver, .menuLevel1OuterDown {
  border: 0px solid #FFF;
  text-align:left;
  padding: 0px 0px 0px 0px;
  border-left: 3px solid #2B377C;
}

.menuLevel1InnerOut, .menuLevel1InnerOver, .menuLevel1InnerDown {
  font-family: Trebuchet MS, Helvetica, sans-serif;
  font-size:15.4px;
  white-space:nowrap;
  background-color: #2B377C;
  color: #FFF;
    padding: 0px;
  border-left: 0px solid #2B377C;
}

.menuLevel1InnerOut {
}

.menuLevel1InnerOver, .menuLevel1OuterOver {
  background-color: #489CCB;
  color: #FFFFFF;
  padding:0px;
  border-left: 3px solid #489CCB;
}

.menuLevel1InnerDown, .menuLevel1OuterDown {
  background-color: #489CCB;
  color: #FFFFFF;
  padding:0px;
  border-left: 3px solid #489CCB;
}




/* ============================================================================
   IBOK Rescue — Customizations (DO NOT EDIT THIS FILE)
   ----------------------------------------------------------------------------
   Built from docs/ui/css/src/customizations.css via scripts/build_css.sh.
   This is the CUSTOMIZATIONS TAIL only — paste into RG admin > Website >
   Cascading Style Sheets, replacing the entire field. RG prepends their
   platform CSS server-side to produce the final deployed site/313.css.

   Built: 2026-05-26 12:11:56
   ============================================================================ */

/* ============================================================================
   IBOK Rescue — Customizations (paste into RG admin > Website > CSS)
   ----------------------------------------------------------------------------
   This file is the EDITABLE CUSTOMIZATIONS TAIL of the deployed site/313.css.
   RG concatenates their ~1924-line platform CSS server-side, then this file,
   to produce the file served from S3. We can only edit this half.

   Cascade: source order. Rules later in this file beat earlier rules at
   equal specificity. Platform rules (RG-controlled) lose to anything we
   declare here at equal specificity.

   When working in this file:
     - See css/INHERITANCE.md for architecture rationale and cascade model
     - See css/platform/platform-reference.css to know what the platform sets
     - See html/arch.md for HTML selector inventory
     - See css/checkpoints/ for known-good rollback snapshots
   ============================================================================ */


/* ============================================================================
   DESIGN TOKENS
   ----------------------------------------------------------------------------
   Defined on :root so all later rules in this file can use them via var().
   Tokenization rule: only values used 3+ times across the file get tokens —
   single-use values stay as literal hex/px (one indirection layer is enough).

   The spacing scale is DATA-DERIVED from actual values in this file (not a
   geometric scale that would force every existing value to round).
   ============================================================================ */

:root {
   /* === COLOR === */
   --color-brand-primary: #2B377C;        /* navy — primary brand color (5 uses) */
   --color-brand-accent:  #489CCB;        /* light blue — links, body gutter (4 uses) */

   /* === SPACING (data-derived from actual repeated values) === */
   --space-xs:  5px;                      /* 12 uses across margin/padding */
   --space-sm:  10px;                     /* 10 uses */
   --space-md:  15px;                     /* 6 uses */
   --space-lg:  20px;                     /* 10 uses */
   --space-xl:  25px;                     /* 3 uses (borderline) */
   --space-2xl: 30px;                     /* 4 uses */
   --space-3xl: 50px;                     /* 6 uses */

   /* === LAYOUT WIDTH === */
   --width-sidebar:     220px;            /* td#right column AND browse card width */
   --width-content-max: 1192px;           /* .siteWidth cap */

   /* === MOBILE TYPE SCALE (only values 3+ uses in @media block) === */
   --font-mobile-body:  30px;             /* 12 uses in @media block */
   --font-mobile-label: 40px;             /* 3 uses in @media block */

   /* === BREAKPOINTS (documentation only — CSS spec disallows var() in @media conditions) ===
      --bp-md: 932px   tablet portrait / phone landscape threshold (matches our @media block)
      --bp-sm: 425px   phone portrait
      Reference these comments when adding/changing @media queries. */

   /* === TYPOGRAPHY === */
   --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --font-display: 'Lato', system-ui, -apple-system, 'Segoe UI Semibold', 'Helvetica Neue', Arial, sans-serif;

   /* === ACCESSIBILITY === */
   --color-focus-ring: #FFB547;   /* amber — 3.04:1 on white / 3.97:1 on navy (WCAG 1.4.11) */

   /* === CTA === */
   --color-cta-warm:       #E07856;   /* terracotta — 4.62:1 on white, 6.03:1 on navy (AA) */
   --color-cta-warm-hover: #C8633F;
}


/* ============================================================================
   ANIMAL SPONSOR LINK (legacy widget, may not render on most pages)
   ============================================================================ */

#animalSponsorLink a {
   font-size: 15px;
   border: thin dashed #333366;
   padding: var(--space-sm);
   background-color: white;
   font-weight: bold;
}


/* ============================================================================
   GENERAL SITE SETTINGS AND FONTS
   ============================================================================ */

.portalTable tbody td {
   padding: var(--space-sm);
   margin-right: var(--space-sm);
}

table.portalTable {
   /* F21: defeat platform's hardcoded width:450px so form tables fill their
      container instead of looking orphaned in wide layouts. */
   border: 0;
   width: auto;
   max-width: 100%;
}

.siteWidth {
   /* Fluid up to 1192px max. margin:auto centers when narrower (the only place
      that was implicitly centering us was #content's flex; #header and #footer
      need explicit margin:auto here too once we go fluid). */
   width: 100%;
   max-width: 1192px;
   margin-left: auto;
   margin-right: auto;
}

body {
   margin: 0;
   padding: 0;
   background-color: var(--color-brand-accent);
}


.yui-skin-sam {
   background-color: var(--color-brand-accent);
   margin: auto;
}


body,
td,
.standardText,
p {
   font-weight: 400;
   font-size: 16px;
   line-height: 1.95em;
   font-family: var(--font-sans);
   margin-top: var(--space-xs);
}

a:link,
a:visited,
a:active,
a:hover {
   /* Platform sets link color to #489CCB (= --color-brand-accent = body bg) → invisible.
      Override to navy here; higher-specificity rules (#footer td a, #headerContent a:link)
      still win where they apply. */
   color: var(--color-brand-primary);
   font-weight: 900;
   text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.pageCenterTitle,
.contentSectionHeader {
   font-family: var(--font-display);
   color: var(--color-brand-primary);   /* was #2A377C — 1-hex typo of brand navy, normalized */
}

.pageCenterTitle {
   font-weight: 700;
   font-size: 32px;
   letter-spacing: -0.01em;
   text-align: center;
   padding-bottom: 12px;
   position: relative;
}
.pageCenterTitle::after {
   content: "";
   display: block;
   width: 64px;
   height: 3px;
   margin: 10px auto 0;
   background-color: var(--color-brand-accent);
   border-radius: 2px;
}


h1 {
   margin-top: var(--space-xs);
   margin-bottom: 2px;
   padding: 0;
   text-align: center;
   font-size: 28px;
}

h2 {
   margin-top: var(--space-xs);
   margin-bottom: var(--space-xs);
   padding: 0;
}

h3 {}

H4 {
   font-size: 14px;
   text-transform: uppercase;
   word-spacing: 2px;

}

.contentSectionHeader {
   font-size: 24px;
   line-height: 30px;
   margin-top: var(--space-lg);
   padding-bottom: 10px;
   border-bottom: none;
   color: var(--color-brand-primary);
   font-weight: 700;
   letter-spacing: -0.005em;
   position: relative;
}
.contentSectionHeader::after {
   content: "";
   display: block;
   width: 56px;
   height: 3px;
   margin-top: 8px;
   background-color: var(--color-brand-accent);
   border-radius: 2px;
}

#animalDetailsMyRescueTable {
   display: none;
}

/* Centering chain for #content (do not break):
     body { margin: 0 } (L70-74)
     -> platform #bodyContainer { margin-left:auto; margin-right:auto } (platform L1580-1581)
     -> .siteWidth { margin-left:auto; margin-right:auto } on <table id="content"> (L60-68)
   DO NOT add `display: flex` here. Applying flex to a <table> kills the
   table-layout algorithm, causing platform's td#right { width: 220px }
   (platform L1849) to become inert and the sidebar column to collapse.
   See: https://www.w3.org/TR/css-display-3/#layout-specific-display */

.iframe-container {
  /* F23: was width:530px hard. With max-width:100% the iframe caps to its
     container on narrow viewports without needing a @media override. */
  position: relative;
  overflow: hidden;
  width: 530px;
  max-width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio (9÷16=0.5625) */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/* ============================================================================
   HEADER
   ============================================================================ */

.mobile-menu-icon {
display:none;
}
   #paypal {
      margin-bottom: var(--space-md);
   }

#header-top {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-lg);
margin-right: var(--space-3xl);
    margin-bottom: -10px;
}

#header-top > * {
align-self: center;
}

#headerContent h1,
#headerContent h2 {
   color: var(--color-brand-primary);
}

#headerContent {
   background-color: #fff;
   color: var(--color-brand-primary);   /* defeat platform's inherited color:#FFFFFF (white-on-white) */
   padding: 0px;
   background-image: url("");
   background-repeat: no-repeat;
}

.siteSearchForm {
   font-size: 1.95em;
}

#logo {
   margin-left: var(--space-3xl);
}

#headerSearch {
   margin-right: var(--space-2xl);
}

#Org {
   margin-right: var(--space-2xl);
   text-align: right;
}


/* Header anchors — bg is now white (L201), so accent #489CCB on white fails WCAG (2.85:1).
   Use brand-primary navy on white (9.4:1, passes AA). Hover uses accent for affordance. */
#headerContent a:visited,
#headerContent a:link {
   color: var(--color-brand-primary);
}

#headerContent a:hover {
   color: var(--color-brand-accent);
}

#mobileNav {
  display: none;
  visibility: hidden;
  flex-direction: column;
  justify-content: space-around;
  text-align: right;
  height: 100%; /* 100% Full-height */
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  right: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  /* F26: scoped to transform only (was `all` which animated visibility, color, etc.).
     Combined with the prefers-reduced-motion block below for a11y. */
  transition: transform 0.5s ease;
  background-color: white;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.65);
}

#mobileNav > * {
  margin-bottom: var(--space-lg);
  padding-right: 120px;
  font-size: 60px;
}

#mobileNav > a:first-child{
   margin-bottom: 0px;
}

/* ============================================================================
   FRONT PAGE TOP + BOTTOM (homepage hero, CTA tiles, announcement)
   ============================================================================ */

#front-page-announcement {
   width: 100%;
}

#front-top-top {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: stretch;
}

#front-top-top img {
   object-fit: fill;
   width: 100%;
   height: auto
}

#front-top-middle {
   display: flex;
   justify-content: center
}
#front-top-middle > * {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

#front-find-kitten {
   padding-top: var(--space-2xl);
   display: flex;
   flex-wrap: wrap;
   width:100%;
   justify-content: center;
}

#front-find-kitten-text {
    margin-right: var(--space-lg);
    max-width: 250px;
    text-align: left;
}


#editableFrontPageTop {
   /* This makes less space between the front page top and highlighted animals*/
   margin-bottom: -30px;
   display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#editableFrontPageBottom {
   padding: var(--space-lg);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

div#editableFooter {
   margin-bottom: var(--space-xs);
}

#footer td a,
#footer td a:link,
#footer td a:visited {
   font-weight: 800;
   color: #fff;
}

#footer td a:hover,
#footer td a:active {
   color: var(--color-brand-accent);   /* was #486D95 (1.92:1 on navy — WCAG fail); #489CCB = 4.51:1, AA pass */
   text-decoration: underline;
}

#footerContent {
   background-color: var(--color-brand-primary);
   color: #fff;
   /* F15: full shorthand (top right bottom left) so cascade is unambiguous.
      Defeats platform L1747 `padding: 15px` which otherwise bleeds top/right. */
   padding: var(--space-md) var(--space-md) 0 var(--space-xl);
}

#footer td {
   color: #fff;
   padding: var(--space-xl);
}

#footer h2 {
   color: #fff;
   border: none;
}

/* ============================================================================
   SIDEBAR RIGHT (td#right column — adopt-me / donate banners)
   ============================================================================ */
#rightContainer img {
   /* F24: width:80% with height:auto preserves aspect ratio (per CSS spec,
      height:80% of an auto-height parent is undefined). */
   width: 80%;
   height: auto;
}


#content tbody td#right {
   padding: var(--space-lg);
   text-align: center;
   border-left: 1px solid #eee;
   background-color: #f5f8fb;
}

td#right h2 {
   color: #fff;
   font-weight: 700;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   font-size: 13px;
   margin-top: var(--space-sm);
   margin-bottom: var(--space-sm);
   padding: 8px 12px;
   background-color: var(--color-brand-primary);
   border-radius: 6px;
}

.sidebarBox {
   border: 0px;
   background-color: transparent;
}

.sidebarBox .heading {
   display: none;
}


/* ============================================================================
   FEATURED PET (.AnimalAd in sidebar)
   ============================================================================ */
#rightContainer .animalimg {
   /* F24-EXPANDED: cap image to sidebar column width (was 250px which forced
      td#right wider via table-auto-layout).
      F20-RESCOPED: drop platform's 1px solid black border (platform L420).
      Scope is intentional — F14 handles browse-grid .animalGrid img separately. */
   width: 100%;
   max-width: var(--width-sidebar);
   height: auto;
   border: 0;
}

.AnimalAd {
   font-size: 1em;
   text-align: center;
   line-height: 1.4em;
   font-weight: 700;
   padding: 14px 12px 16px;
   background-color: #fff;
   border-radius: 10px;
   box-shadow:
      0 1px 2px rgba(16, 24, 40, 0.05),
      0 4px 10px rgba(16, 24, 40, 0.06);
}


/* ============================================================================
   SOCIAL LINKS (apply .social class to use)
   ============================================================================ */

.social {
padding-right: var(--space-md);
}

.social > * {
padding: var(--space-xs);
}


/* ============================================================================
   CONTENT TABLE (table#content — left/center/right cells + #bodyContainer)
   ============================================================================ */
table#content {
   margin-top: 0;
   margin-bottom: 0;
}

#content tbody td#center {
   padding: var(--space-lg);
}

#bodyContainer {
   margin-top: 0px;
   margin-bottom: 0px;
   text-align: left;
   font-size: inherit;
   /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.65);*/
}

hr {
   border: 0;
   height: 1px;
   background: #9DD0EB;
}

/* ============================================================================
   ANIMAL BROWSE PAGE (.animalGrid, .browse*, .animalBrowsePanel)
   ============================================================================ */

/* ANIMAL BROWSE PAGE GRID */

.animalGrid .border {
   border-right: 0px;
}

.animalBrowsePanel hr {
   border: 0px;
}

.animalGrid .petNameBottom {
   margin: 8px 0 2px;
   padding: var(--space-sm) 0;
}

/* Bold uniform card treatment for browse-page cat photos.

   HTML structure (from html/original/animals-browse.html):
     <div class="petPicLink" style="float:none; margin-left:66.5px; margin-right:66.5px;">
       <a href="..."><img width="73" height="120" src="..."></a>
     </div>

   The inline style on .petPicLink sets 66.5px side margins — these have
   specificity (1,0,0,0) and require !important to defeat. The <img> has
   HTML presentational width/height attributes — author CSS beats these per
   spec but we use !important defensively.

   Every card renders as a fixed 220x220 square regardless of source image
   aspect ratio. object-fit:cover crops to fit, centering the subject. */

/* Tighten the vertical stack: page title → pagination → grid.
   Platform contributes padding/margin to each (browser h1 default + platform
   .pageCenterTitle padding + platform .pageLinks margin + border-spacing
   above grid) which compounds to ~100px of dead space if left alone. */
.animalBrowsePanel .pageCenterTitle,
.pageCenterTitle {
   margin: 0 0 8px;
   padding: 0;
}
.animalBrowsePanel .pageLinks {
   margin: 0 0 4px;
   padding: 4px 0;
}
.animalBrowsePanel .animalGrid {
   margin-top: 0;
}

.animalGrid {
   width: auto;
   max-width: 100%;
   margin: 0 auto;
   /* border-collapse:separate is required for border-spacing to apply.
      Horizontal 28px between cells; vertical 0 here — row gap comes from
      .petNameBottom margin below each photo (so first row has no extra
      top space stacking onto the pagination's bottom margin). */
   border-collapse: separate;
   border-spacing: 28px 0;
}

.animalGrid .searchResultsCell {
   width: auto;
   height: auto;
   /* Vertical padding on cells creates the row gap (24px between bottom of
      one row and top of the next, more pleasant than border-spacing because
      it doesn't add stacking above/below the whole grid). */
   padding: 0 0 24px;
   vertical-align: top;
   text-align: center;
}

.animalGrid .petPicLink {
   /* !important ONLY where inline style="margin-left:66.5px; margin-right:66.5px"
      on the .petPicLink div would otherwise win (inline = specificity 1,0,0,0).
      Other properties (width, height, float, display) compete only against
      platform's same-specificity rule and win via source order — no !important
      needed (F27: audit confirmed removable). */
   width: var(--width-sidebar);
   height: var(--width-sidebar);
   float: none;
   margin-left: auto !important;       /* defeats inline 66.5px margin */
   margin-right: auto !important;      /* defeats inline 66.5px margin */
   margin-top: 0;
   margin-bottom: 0;
   display: block;
   border-radius: 10px;
   overflow: hidden;
   background-color: #fff;
   box-shadow:
      0 1px 2px rgba(16, 24, 40, 0.06),
      0 4px 12px rgba(16, 24, 40, 0.08);
   transition: transform 180ms ease, box-shadow 180ms ease;
}

.animalGrid .petPicLink:hover {
   transform: translateY(-2px);
   box-shadow:
      0 2px 4px rgba(16, 24, 40, 0.08),
      0 10px 24px rgba(43, 55, 124, 0.18);
}

.animalGrid .petPicLink:focus-within {
   outline: 3px solid var(--color-brand-accent);
   outline-offset: 3px;
}

/* Make the <a> wrapper fill the .petPicLink box so the img can in turn fill the <a> */
.animalGrid .petPicLink > a {
   display: block;
   width: 100%;
   height: 100%;
}

.animalGrid .petPicLink img,
.animalGrid .petPicLink > a > img {
   transition: transform 320ms ease;
}
.animalGrid .petPicLink:hover img,
.animalGrid .petPicLink:hover > a > img {
   transform: scale(1.04);
}

.animalGrid .petPicLink img,
.animalGrid .petPicLink > a > img,
.animalGrid .searchResultsCell img {
   /* !important defeats the HTML width="73" height="120" presentational hints. */
   width: 100% !important;
   height: 100% !important;
   max-width: 100% !important;
   max-height: 100% !important;
   object-fit: cover;
   object-position: center;
   border: 0;
   padding: 0;
   display: block;
}

@media (prefers-reduced-motion: reduce) {
   /* F26-CONSOLIDATED: #mobileNav transition added here (was inline 0.5s on
      `transition: all` — animated everything including visibility). */
   html { scroll-behavior: auto; }   /* B17 guard */
   .animalGrid .petPicLink,
   .animalGrid .petPicLink img,
   .animalGrid .petPicLink > a > img {
      transition: none;
   }
   .animalGrid .petPicLink:hover,
   .animalGrid .petPicLink:hover img,
   .animalGrid .petPicLink:hover > a > img {
      transform: none;
   }
   .button,
   .button:hover,
   .orange,
   .orange:hover {
      transition: none;
      transform: none;
   }
   .animalGrid .petNameBottom a,
   #center a:not(.button):not(.petPicLink):not([class*="menu"]),
   input, select, textarea {
      transition: none;
   }
   #mobileNav {
      transition: none;
   }
}

.animalGrid .petName,
.animalGrid .petNameBottom {
   margin-top: 14px;
   padding: 0;
   font-family: var(--font-display);
   font-size: 17px;
   font-weight: 700;
   letter-spacing: 0.01em;
   line-height: 1.25;
}
.animalGrid .petNameBottom a {
   color: var(--color-brand-primary);
   text-decoration: none;
   border-bottom: 1px solid transparent;
   transition: border-color 160ms ease;
}
.animalGrid .petPicLink:hover + .petNameBottom a,
.animalGrid .petNameBottom a:hover,
.animalGrid .petNameBottom a:focus-visible {
   border-bottom-color: var(--color-brand-accent);
}

#animalMainImage {
   border: 1px solid #E4E4E4;
   padding: 8px;
}

/* ////////  BROWSE PAGE  /////////////// */


.npLinks {
   clear: both;
}

#centerContainer .animalimg {
   width: 250px;
   height: auto;
}

/* Per-page #Page* overrides MOVED to the PAGE-SPECIFIC OVERRIDES section
   near the end of the file (before the @media block). They win over
   #centerContainer .animalimg via specificity (1,1,1 vs 1,0,1), so source
   order doesn't matter — relocation is for locatability, not cascade. */

.animalBrowsePanel {
   /* !important defeats platform's default float (verify against platform
      ~L885 if it ever stops working). */
   float: left !important;
}

.browseInfo {
   /* !important: defeats platform L612 `.browseInfo { float: left !important; text-align: left !important }`.
      Equal-specificity !important fight; source order wins. */
   float: none !important;
   height: auto;
   text-align: left !important;
   width: 680px;
   padding-left: var(--space-3xl);
}

.browsePicture {
   width: 300px;
   height: auto;
}


.browse {
   /* !important defeats platform L640 `.browse { text-align: left !important }`. */
   height: auto;
   clear: both;
   margin-bottom: var(--space-md);
   margin-left: auto;
   margin-right: auto;
   overflow: visible;
   text-align: left !important;
   width: 300px;
}

.browseNoPicture {
   width: 300px;
   height: auto;

}

/*.animalimg {
    border: 1px solid #000000;
}*/

/* ============================================================================
   HIGHLIGHTED (featured-pet blocks on homepage)
   ============================================================================ */

/*HIGHLIGHTED*/

.highlightedInfo {
   /* !important defeats platform L673-678 `.highlightedInfo { width:380px; float:left !important }`.
      Equal-specificity !important fight; source order wins. */
   text-align: left;
   width: 500px !important;
   float: none !important;
   margin-left: var(--width-sidebar);
}

.highlighted {
   margin: var(--space-lg);
}

.browse,
.highlightedInfo {
   font-size: 16px;
}

.highlightedPicture {
   margin-top: -25px;

}

/* ============================================================================
   MENU (#headerMenu + Tigra menu level 0/1)
   ============================================================================ */

#headerMenu {
   border-bottom: 0px;
   border-top: 0px;
   vertical-align: center;

}


/* Style for a block - DIV */
/* MENU LEVEL 0 */

.menuLevel0 thead th:nth-child(6) {
   color: red;
}


.menuLevel0 {

   border: 0px;
   margin-left: auto;
   margin-right: auto;
   font-size: 20px;
   text-align: left;
}

/* Style for outer tag, mout (mouse out) state */
.menuLevel0OuterOut,
.menuLevel0OuterOver,
.menuLevel0OuterDown {
   text-align: left;
   font-weight: 500;
   font-size: 20px;

}

/* Style for inner tag, mover (mouse over) state */
.menuLevel0InnerOut,
.menuLevel0InnerOver,
.menuLevel0InnerDown {
   text-align: center;
   text-transform: uppercase;
   white-space: nowrap;
   font-weight: 500;
   font-family: var(--font-display);
   padding: 0px;
}

.menuLevel0InnerOver,
.menuLevel0OuterOver {}

/* MENU LEVEL 1*/

.menuLevel1 {
   margin-left: auto;
   margin-right: auto;
   padding: var(--space-xs);
   border: 0px;

   font-weight: 500;
}

.menuLevel1OuterOut,
.menuLevel1OuterOver,
.menuLevel1OuterDown {
   border: 0px;
   text-align: left;
   padding: var(--space-xs);
   border-left: 0px;
   font-weight: 500;

}

.menuLevel1InnerOut,
.menuLevel1InnerOver,
.menuLevel1InnerDown {
   white-space: nowrap;
   border-left: 0px;
   padding: var(--space-xs);
   font-family: var(--font-display);
   font-weight: 500;

}

.menuLevel1InnerOver,
.menuLevel1OuterOver {
   border-left: 0px;
   padding: var(--space-xs);
   font-weight: 500;

}

.menuLevel1InnerDown,
.menuLevel1OuterDown {
   border-left: 0px;
   padding: var(--space-xs);
   font-weight: 500;
}


/* ============================================================================
   BUTTONS (.button + .orange variants; pattern based on
   http://www.webdesignerwall.com/demo/css-buttons.html#)
   ============================================================================ */

.button {
   display: inline-block;
   vertical-align: baseline;
   margin: 0 2px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.01em;
   line-height: 100%;
   padding: .65em 1.6em .7em;
   color: #fff;
   background-color: var(--color-brand-primary);
   border: 0;
   border-radius: 8px;
   box-shadow:
      0 1px 2px rgba(16, 24, 40, 0.08),
      0 2px 6px rgba(43, 55, 124, 0.18);
   transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.button:hover {
   text-decoration: none;
   color: #fff;
   background-color: #1f2960;
   transform: translateY(-1px);
   box-shadow:
      0 2px 4px rgba(16, 24, 40, 0.10),
      0 8px 18px rgba(43, 55, 124, 0.24);
}

.button:active {
   transform: translateY(0);
   box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10);
}

.bigrounded {
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius: 2em;
}

.medium {
   font-size: 12px;
   padding: .4em 1.5em .42em;
}

.small {
   font-size: 11px;
   padding: .2em 1em .275em;
}

/* COLOR STYLES
---------------------------------------------- */
/* orange */
.orange {
   color: #fef4e9;
   border: solid 1px #da7c0c;
   background: #f78d1d;
   background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
   background: -moz-linear-gradient(top, #faa51a, #f47a20);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

.orange:hover {
   background: #f47c20;
   background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
   background: -moz-linear-gradient(top, #f88e11, #f06015);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}

.orange:active {
   color: #fcd3a5;
   background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
   background: -moz-linear-gradient(top, #f47a20, #faa51a);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* B13 — lift + warm shadow on top of existing gradient identity */
.orange {
   box-shadow: 0 2px 6px rgba(224, 120, 86, 0.35);
   border-color: var(--color-cta-warm-hover);
   transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.orange:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(224, 120, 86, 0.45);
}
.orange:active {
   transform: translateY(0);
   box-shadow: 0 1px 3px rgba(224, 120, 86, 0.4);
}

.orange a:link,
.orange a:visited {
   color: #ffffff;
   text-decoration: none;
   font-weight: bold;
}


/* ============================================================================
   MISC ELEMENT DEFAULTS
   ============================================================================ */

pre {
   white-space: normal;
   padding: var(--space-sm);
}

hr {
   border: 0;
   height: 1px;
   background-color: var(--color-brand-accent);
   opacity: 0.3;
   margin: var(--space-lg) 0;
}


/* ============================================================================
   PAGE-SPECIFIC OVERRIDES
   ----------------------------------------------------------------------------
   Rules scoped to a single body#Page* live here, not scattered through
   component sections. Each rule wins over its base-component counterpart
   via specificity (#Page* + .class chain = 1,1,1 beats .class chain = 1,0,1).

   NOTE: page-ID rules INSIDE the @media block (e.g. #Page92, #Page86) stay
   inside the @media block — moving them out would lose the viewport guard.
   ============================================================================ */

/* Animal-detail pages (Page286 = detail w/ Adopt button) */
#Page286 #centerContainer .animalimg {
   width: auto;            /* let detail-page image use its natural width */
}
#Page286 .animalPhoto {
   background-color: #f5f8fb;
   border: 1px solid #dde6ef;
   border-radius: 8px;
   padding: 6px;
}
#Page286 .animalDetailTitle {
   color: var(--color-brand-primary);
}
#Page286 #animalAdoptMeSaying {
   font-style: italic;
   color: var(--color-brand-accent);
}

/* Homepage (Page184 = home) */
#Page184 #centerContainer .animalimg {
   width: 200px;
}

/* Page90 + Page87 — legacy / less-trafficked pages (kept; arch.md doesn't
   document these page IDs but rules are inexpensive and may apply on RG
   admin/preview routes not in our HTML snapshot). */
#Page90 #centerContainer .animalimg {
   width: 100px;
}
#Page87 #centerContainer .animalimg {
   width: 100px;
}

/* Adoption page (Page95) — TOC panel + "adopted in pairs" callout */
#Page95 #editableAdoptionInfo > ul {
   list-style: none;
   padding: var(--space-md) var(--space-lg);
   margin: var(--space-md) 0 var(--space-lg);
   background-color: #f5f8fb;
   border-radius: 8px;
   border: 1px solid #dde6ef;
}
#Page95 #editableAdoptionInfo > ul li {
   padding: 5px 0;
   border-bottom: 1px solid #dde6ef;
}
#Page95 #editableAdoptionInfo > ul li:last-child {
   border-bottom: none;
}

#Page95 #editableAdoptionInfo h2:first-of-type {
   background-color: #FFF8E8;
   border-left: 4px solid #FFB547;
   padding: 12px 16px;
   border-radius: 0 6px 6px 0;
   font-size: 18px;
   line-height: 1.45;
   font-weight: 700;
   color: var(--color-brand-primary);
}

/* Donate page (Page315) — collapse HTML-authored whitespace from <br> spacers
   (inside and outside <form>) and <h2> </h2> spacer rows. */
#Page315 #editableDonationInfo br { display: none; }
#Page315 #editableDonationInfo h2 {
   margin-top: var(--space-sm);
   margin-bottom: 0;
}
#Page315 form input[type="image"] {
   width: 220px;
   height: auto;
   cursor: pointer;
}

/* Donate sidebar — fix 295px-wide table + oversized em text overflowing 220px column */
#Page315 #rightContainer table  { width: 100% !important; }
#Page315 #rightContainer td     { width: auto !important; }
#Page315 #rightContainer img    { max-width: 100%; height: auto; }
#Page315 #rightContainer em     { line-height: 1.4; font-size: 13px; }


/* ============================================================================
   SELECTION (B2)
   ============================================================================ */

::selection      { background-color: var(--color-brand-accent); color: #fff; }
::-moz-selection { background-color: var(--color-brand-accent); color: #fff; }


/* ============================================================================
   FOCUS STATES (B3 — WCAG 2.4.7)
   ============================================================================ */

a:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[onclick]:focus-visible {
   outline: 3px solid var(--color-focus-ring);
   outline-offset: 2px;
   border-radius: 6px;
}


/* ============================================================================
   SCROLLBAR (B5 — progressive enhancement)
   ============================================================================ */

html {
   scrollbar-color: var(--color-brand-primary) #f5f8fb;
   scrollbar-width: thin;
   scroll-behavior: smooth;   /* B17 — paired with reduced-motion guard below */
}
::-webkit-scrollbar              { width: 10px; height: 10px; }
::-webkit-scrollbar-track        { background: #f5f8fb; }
::-webkit-scrollbar-thumb        { background-color: var(--color-brand-primary); border-radius: 5px; border: 2px solid #f5f8fb; }
::-webkit-scrollbar-thumb:hover  { background-color: #1F2A60; }


/* ============================================================================
   ANIMATED UNDERLINE LINKS IN #center (B15)
   ============================================================================ */

#center a:not(.button):not(.petPicLink):not([class*="menu"]) {
   background-image: linear-gradient(var(--color-brand-accent), var(--color-brand-accent));
   background-size: 0% 2px;
   background-position: 0 100%;
   background-repeat: no-repeat;
   transition: background-size 0.25s ease;
}
#center a:not(.button):not(.petPicLink):not([class*="menu"]):hover {
   background-size: 100% 2px;
}


/* ============================================================================
   FORM INPUTS (B16)
   ============================================================================ */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="password"],
select,
textarea {
   border: 1px solid #C9D2DF;
   border-radius: 6px;
   padding: 8px 10px;
   background-color: #fff;
   color: var(--color-brand-primary);
   font-family: var(--font-sans);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
   border-color: var(--color-brand-primary);
   box-shadow: 0 0 0 3px rgba(72, 156, 203, 0.25);
   outline: none;
}


/* ============================================================================
   PRINT
   ----------------------------------------------------------------------------
   F25-EXPANDED: avoid wasting ink on brand-color backgrounds and useless
   chrome (mobile nav drawer, hamburger). Expand link URLs inline so printed
   pages remain useful when read offline. Avoid breaking cards/rows across
   page boundaries.
   ============================================================================ */

@media print {
   body,
   #footerContent,
   #headerContent,
   #mobileNav,
   .mobile-menu-icon {
      background: white !important;
      color: black !important;
   }
   /* Hide nav chrome that has no print value */
   #mobileNav,
   .mobile-menu-icon,
   #headerMenu {
      display: none !important;
   }
   /* Inline link URLs so printed pages stay useful offline */
   a[href]::after {
      content: " (" attr(href) ")";
      font-size: 0.85em;
      color: #555;
   }
   /* Avoid mid-element page breaks on cards, rows, headings */
   .animalGrid tr,
   .animalGrid .searchResultsCell,
   .highlighted,
   h1, h2, h3, h4, h5, h6 {
      page-break-inside: avoid;
   }
   @page {
      margin: 1in;
   }
}


/* ============================================================================
   MOBILE / TABLET OVERRIDES
   ----------------------------------------------------------------------------
   F9: was `(max-device-width: 932px)` which is deprecated per MDN
   (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width)
   and matches the physical screen rather than the viewport. Switched to
   `(max-width: 932px)` — preserves the trigger threshold (so landscape
   phones at ~852 CSS px still get mobile cascade) while fixing the
   device-vs-viewport semantics. DevTools resize now correctly triggers.
   ============================================================================ */

@media only screen and (max-width: 932px) {
   /* `.siteWidth { width: 1700px }` was here — DELETED. It made the mobile
      layout WIDER than desktop, defeating the purpose. The base .siteWidth
      rule (fluid width:100%; max-width:1192px) handles all viewports now. */

   /* Mobile navigation: show hamburger, hide desktop nav.
      The hamburger triggers mobileMenu() JS (defined inline in every page
      HTML, around L212-221) which toggles #mobileNav display/visibility. */
   .mobile-menu-icon {
      display: inline-block;
      visibility: visible;
   }
   #headerMenu {
      display: none;
   }

   .highlighted {
      visibility: hidden;
      display: none;
   }

   /* Override the 730px fixed width (680px + 50px padding-left) that causes
      horizontal scroll on every animal-browse card row at narrow viewports. */
   .browseInfo {
      width: auto;
      max-width: 100%;
      padding-left: 0;
   }

#front-find-kitten-text {
    margin-right: 0px;
max-width: none;
    text-align: center;
}

.iframe-container {
  width: 100%
}


a {
      font-size: 30px;
      line-height: 36px;
   }

   p {
      font-size: 30px;
      line-height: 36px;
   }

   ul,
   li {
      font-size: 40px;
      line-height: 46px;
   }

   h1,
   .pageCenterTitle {
      font-size: 50px;
      line-height: 54px;
   }

   h2 {
      font-size: 40px;
      line-height: 34px;
   }

   h3 {
      font-size: 30px;
      line-height: 34px;
   }

   h4 {
      font-size: 28px;
      line-height: 30px;
   }


   pre {
      white-space: normal;
      font-size: 30px;
      line-height: 36px;
   }

   #Page92 .portalTable tbody td {
      font-size: 30px;
      line-height: 36px;
   }

#front-find-kitten {
   justify-content: center;
}


   #header-top {
      /*margin-bottom: -50px;*/
      margin-right: var(--space-3xl);
   }

   .social img {
      width: 80px;
      height:80px;
   }

   .browse,
   .highlightedInfo {
      font-size: 30px;
      line-height: 36px;
   }

   #Page86 .animalGrid .petNameBottom {
      font-size: 36px;
   }

   .animalBrowsePanel .pageLinks {
      /* Pages [ 1 ] , [ 2 ], etc  */
      font-size: 34px;
   }

   .animalDetail {
      font-size: 34px;
      line-height: 36px;
   }

   table#animalSummary {
      font-size: 30px;
      line-height: 34px;
   }

   table#animalDetailsAbout {
      font-size: 30px;
      line-height: 34px;
   }

   table#description {
      font-size: 30px;
      line-height: 36px;
   }

   div#editableAnimalDetailBottom {
      font-size: 30px;
      line-height: 36px;
   }

   div#qualities {
      font-size: 30px;
      line-height: 34px;
   }


   /* form elements */
   label {
      font-size: 40px;
      line-height: 44px;
   }

   input,
   select {
      font-size: 40px;
      line-height: 44px;
   }

   input[type='radio'] {
      transform: scale(2);
      margin-left: var(--space-sm);
      margin-right: var(--space-sm);
      padding: var(--space-sm);
   }

   input[type="checkbox" i] {
      transform: scale(3);
      font-size: 30px;
      line-height: 34px;
   }

   /* menu elements */

   .menuLevel0 {
      padding: var(--space-xs) 0px;
   }

   .menuLevel1 {
      margin-top: 40px;
   }

   .menuLevel0InnerOut,
   .menuLevel0InnerOver,
   .menuLevel0InnerDown {
      font-size: 30px;
      white-space: no-wrap;
padding: 0px 10px;
   }

   .menuLevel1InnerOut,
   .menuLevel1InnerOver,
   .menuLevel1InnerDown {
      font-size: 30px;
      padding-top: var(--space-md);
      padding-bottom: var(--space-md);
      padding-right: var(--space-md);
      white-space: no-wrap;
   }

   /* Detail page: unstack float so photo doesn't pin left on phones */
   #Page286 .animalPhoto {
      float: none;
      display: block;
      margin: 0 auto var(--space-md);
   }
   #Page286 table.portalTable {
      width: 100% !important;
   }

   /* All pages: Amazon Wishlist image is hardcoded width="402" in HTML */
   #rightContainer img[width="402"] {
      max-width: 100%;
      height: auto;
      width: auto !important;
   }
}   /* end @media (max-device-width: 932px) */