body { margin: 0; background: #fff; font: normal 13px arial, sans-serif; color: #333; }
#tnavbar .inner, #head, #main, #leftcol, #head, #ttabs, #catsout, #head, #qlinks { width: 1000px; margin: 0 auto; }
#head,#ttabs,#catsout,h1,h2,h3,h4,.inote,.clr,.cityanchors { clear: both; }

b { font-weight: bold }
a { color: #333; background-color: #fff; }
p { margin-top: 0; margin-bottom: 12px; }
a:hover { color: #800; background-color: #fff; }
h1,h2,h3,h4 { margin: 0; padding: 0; background-color: #fff; color: #222; }
h1 { font-size: 18px; padding-top: 8px; }
h2 { font-size: 16px; padding-top: 8px; padding-bottom: 2px; color: #333; font-weight: normal; border-bottom: 1px solid #ccc; margin-bottom: 2px; }
h3 { font-size: 14px; margin-top: 25px; }
h4 { font-size: 13px; margin-top: 20px; margin-bottom: 4px; }
i { color: #444; font-weight: normal; }
a img { border: 0px; }
.left { float: left; }
.right { float: right; }

input,textarea,select,div.fakeinput {
	border: 1px solid #aaa;
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	padding: 1px 3px 2px 3px;
	margin: 1px 0 1px 0;
	color: #555;
	font-size: 13px;
}
input.val { display: none; }
input.button { background: #F0D4D6; }
input.checkbox { border: 0; }
input.submit {
	border-top: 1px solid #fff;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	border-left: 1px solid #fff;
	padding: 1px 8px 2px 8px;
	background-color: #AB0C12;
	color: #fff;
}
input.submit:active { 
	border-bottom: 1px solid #fff;
	border-left: 1px solid #333;
	border-top: 1px solid #333;
	border-right: 1px solid #fff;
	background-color: #7E080D;
}

/* Two-section header (2026-08-04, Don's call): logo scoped to its own
   size on the left, search fills whatever's left. Top-right banner slot
   dropped entirely -- not mobile-only, a permanent simplification. */
#head { display: flex; align-items: center; padding: 10px; }
#head .left { flex: 0 0 auto; }
/* Tagline under the logo removed entirely (Don's call, 2026-08-04). */
#head .tag { display: none; }
#head .left b { font-weight: normal; font-size: 12px; color: #555; }

/* Centered within the space to the RIGHT of the logo, not the whole
   header (Don's correction, 2026-08-04 -- absolute-centering on #head's
   full width let the search box overlap the logo once the logo ate a
   bigger share of a narrower header). flex:1 1 auto claims the leftover
   row space after the logo; max-width caps how big the box gets; the
   auto margins then split whatever's left over on either side of it,
   so it can never encroach on the logo's column. */
/* Guaranteed minimum gap (Don's call, 2026-08-04): the auto-margin
   centering above can compute to 0 when the leftover space is close to
   max-width, letting the visible search bar butt right up against the
   logo or the outer edge. Padding here is a floor that holds regardless
   of what the auto margins land on. */
#search {
	flex: 1 1 auto;
	max-width: 480px;
	margin: 0 auto;
	padding: 0 12px;
	box-sizing: border-box;
	text-align: left;
	font-size: 16px;
}
#search div {
	background: #eee url('/images/tnav/searchbg.png') repeat left top;
	color: #333;
	margin-top: 3px;
	padding: 3px 4px 3px 4px;
	border: 1px solid #999;
	display: flex;
}
#search form { margin: 0; display: flex; width: 100%; }
#search .terms {
	background: #fff url('/images/tnav/minimag.png') no-repeat 3px 3px;
	padding-left: 20px;
	flex: 1 1 auto;
	width: auto;
}

#ttabs div {
	background: #fff url('/images/tnav/gtab.png') no-repeat left top;
	height: 33px;
	width: 156px;
	display: block;
	float: left;
	text-align: center;
}
#ttabs div.dir { margin-left: 10px; }
#ttabs div.on { background: #fff url('/images/tnav/ytab.png') no-repeat left top; }
#ttabs div a {
	display: block;
	text-decoration: none;
	background: transparent;
	padding-top: 10px;
	font-size: 14px;
	color: #222;
}
#ttabs span { margin: 13px 5px 0 0; font-size: 14px; float: right; }

/* Simplified 2026-08-04 (Don's call) -- plain text breadcrumb, no bar
   chrome, sits directly above the page heading inside #content instead of
   its own separate styled bar. */
#catsin {
	padding: 4px 0 10px 0;
	font-size: 12px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 10px;
}
#catsin span { display: inline; color: #999; }
#catsin span a {
	color: #555;
	text-decoration: none;
}
#catsin span a:hover { text-decoration: underline; }
#catsin span:not(:last-child):not(.right)::after { content: " \203A "; color: #999; }
/* "+ Get Listed" -- shown as just a small + right after the category name
   instead of a separate floated button (Don's call, 2026-08-04). Real link
   text ("+ Get Listed") stays in the markup for accessibility/SEO; visually
   replaced with just the +. */
#catsin span.right { display: inline; float: none; margin-left: 4px; }
#catsin span.right a {
	font-size: 0;
	color: #999;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 1px 5px;
}
#catsin span.right a::before { content: "+"; font-size: 13px; }
#catsin span.right a:hover { text-decoration: none; border-color: #999; }

/* Get-listed link now lives in the H1 (Software moved it out of the
   breadcrumb, 2026-08-04). Styled as a small badge -- shows whatever real
   text the publisher set (GETLISTED_TEXT, defaults to "+"), not hardcoded,
   since a publisher can customize it to real words instead of the plus. */
#ptitle h1 a {
	font-size: 12px;
	font-weight: normal;
	color: #999;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 1px 6px;
	vertical-align: middle;
	margin-left: 6px;
	text-decoration: none;
}
#ptitle h1 a:hover { border-color: #999; text-decoration: none; }

/* Same color and height as #navToggle (Don's call, 2026-08-04) -- the
   gray bar with a small red tab used to look like a different
   component than the solid red hamburger bar it turns into once the
   jump-to links stop fitting; padding/line-height match #navToggle's
   exactly so the two never visibly jump in height. */
#qlinks {
	background-color: #AB0C12;
}
#qlinks td {
	border-right: 1px solid rgba(255,255,255,0.2);
	text-align: center;
}
#qlinks td.jumpto {
	color: #fff;
	width: 44px;
	font-size: 12px;
	font-weight: bold;
	padding: 6px 6px 6px 2px;
	line-height: 20px;
}
#qlinks td a {
	display: block;
	text-decoration: none;
	background-color: transparent;
	padding: 6px 2px;
	line-height: 20px;
	color: #fff;
	font-size: 12px;
}
#qlinks td a:hover {
	background-color: #7E080D;
}
/* Flexbox instead of fixed-width floats (2026-08-04, Don's call) --
   #content shrinks fluidly to whatever space is left as the viewport
   narrows; #lside/#rside hold their width. flex-wrap is OFF by default
   (2026-08-04, Design/Leo bug fix): a flex item's min-width defaults to
   its content's natural width, not its flex-basis, so the two-column
   .dlinkin table could force the row wider than our 750px breakpoint
   expected and trigger an uncontrolled implicit wrap before our own
   rules fired -- the exact glitch Don caught (ads relocating before the
   nav collapsed, then jumping). Wrapping only happens where we
   explicitly turn it back on, at the 570px breakpoint below. */
#main {
	display: flex;
	flex-wrap: nowrap;
	padding-top: 5px;
}
/* Light gray background (Don's call, 2026-08-04) -- this is the panel
   that collapses into the hamburger first, so it reads as its own
   distinct block now that the Top bar is solid brand color instead of
   gray. */
#lside {
	flex: 0 0 165px;
	background-color: #f2f2f2;
	border-right: 1px solid #ddd;
	padding: 8px;
	box-sizing: border-box;
}
#content {
	flex: 1 1 300px;
	min-width: 0;
	padding: 1px 15px 50px 15px;
}

/* Everything in here blends into #lside's own gray panel background
   instead of sitting in separate hardcoded-white boxes (Don's call,
   2026-08-04 -- "the left hand side looks crazy" once the panel went
   gray but the headers/links underneath were still white). Hover is
   the one thing that should pop, so it goes white against the gray. */
#lside .box { margin-bottom: 10px; }
#lside .box .boxtop {
	background-color: transparent;
	padding: 5px;
	font-weight: bold;
	color: #777;
}
#lside .box ul { padding: 4px 4px 4px 0; margin: 0px; list-style-type: none; }
#lside .box ul li { padding-left: 8px; color: #222; line-height: 18px; }
#lside .box li span.boxtop { color: #555; padding: 2px 0 2px 4px; margin: 1px 0 1px 0; }
#lside .box li a { text-decoration: none; display: block; background-color: transparent; color: #555; width: 100%; padding: 2px 0 2px 4px; margin: 1px 0 1px 0; }
#lside .box li span.myprofiles { text-decoration: underline; color: #999; padding: 1px 0 2px 4px; margin: 1px 0 1px 0; }
#lside .box li a:hover { text-decoration: none; background-color: #fff; color: #000; }
#lside .box li a.active { background-color: #e0e0e0; color: #333; }
#lside .box li a.active:hover { background-color: #fff; }

#lside .boxtop a.acctadd, #lside .box li a.acctadd {
	float: right;
	background-color: transparent;
	color: #777;
	text-decoration: none;
	font-weight: normal;
	font-size: 11px;
}
#lside .boxtop a.acctadd:hover, #lside .box li a.acctadd:hover {
	color: #333;
	text-decoration: underline;
	background-color: transparent;
}

#content .box, #content .probox {
	margin-bottom: 6px;
	border: 1px solid #aaa;
}

.dlinkout { 
	border-top: 1px solid #AB0C12;
	border-bottom: 1px solid #ddd;
	margin-bottom: 25px;
	clear: both;
}
.dlinkin {
	background-color: #eee;
	border-top: 1px solid #AB0C12;
	border-bottom: 1px solid #fff;
	padding: 10px 0;
}
.dlinkin ul {
	list-style-type: none;
	margin: 0;
}
.dlinkin a {
	background: #eee url('/images/rarr.png') no-repeat left 5px;
	padding-left: 12px;
	padding-right: 2px;
	line-height: 24px;
	font-size: 15px;
	color: #333;
}
/* Listing count "( N )" -- keep it from wrapping onto its own line as the
   column narrows (Don's call, 2026-08-04, try nowrap before removing it). */
.dlinkin i { white-space: nowrap; }
div.sectionheading {
	background: #eee; 
	color: #147; 
	width: 100%;
	padding-left: 10px;
	border-color: #147;
	border-width: 1px 0px 1px 0px;
	border-style: solid solid solid solid;
}

.county-list { background-color: #fff; border: 1px dashed #aa9; padding: 10px; margin-top: 100px; }

.inote { background-color: #eee; border: 1px dashed #aa9; margin-bottom: 10px; line-height: 16px; }
.inote a { background-color: #eee; }
.inote { text-align: center; padding: 20px; font-size: 16px; }

/* NEW LISTING CSS */
#list { font-size: 14px; margin-bottom: 40px; }
#list div { margin-bottom: 20px; }
#list a { font-size: 15px; }
#list h2 { font-size: 16px; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 8px; color: #888; border-bottom: 1px solid #ccc; }

/* PREMIUM SECTION ALTERATIONS */
#list .sponsor td { vertical-align: top; }
#list .sponsor a { font-weight: bold; }
#list .sponsor td { padding-bottom: 10px; }
#list .sponsor td p { margin: 0; background-image: none; padding-left: 0; } 
#list .sponsor td img { padding: 0 10px 10px 10px; border: 0; }
#list .sponsor img.dex {
	margin: 0; padding: 0; border: 0; 
	display: inline;
	margin-bottom: -2px;
	margin-left: 2px;
	vertical-align: bottom;
}

#list .basic { border: 0; padding: 0; }
#list .basic p {
	list-style-type: none;
	/* background: url('http://images.rtplinks.com/images/dex.gif'); removed 2026-07-28 */
	background-repeat:no-repeat;
	background-position: 4px 4px;
	vertical-align:top;
	margin: 0 20px 0 0;
	/* padding: 2px 10px 10px 30px; */
	padding: 2px 10px 10px 4px;
	color: #666;
}
#list .basic i { color: #666; }
#list .basic a { color: #444; }
#list .basic a:hover { text-decoration: underline; }

#list .promo { background-color: #FBEDEE; border: 1px solid #F0D4D6; }
#list .promo ul { margin: 0; padding: 0 0 0 16px; }
#list .promo li {
	list-style-type: none;
	/* background: url('http://images.rtplinks.com/images/dex.gif'); removed 2026-07-28 */
	background-repeat:no-repeat;
	background-position: 0 2px;
	vertical-align:top;
	/* padding-left: 24px; */
	padding-left: 4px;
	padding-bottom: 15px;
	margin: 0 20px 0 0;
}

span.newlink {
	color: #800;
	background-color: #fff;
	font-style: italic;
	font-weight: bold;
}

#pagenav { text-align: center; border: 1px solid #ddd; background-color: #eee; padding: 5px; }

a.ws { text-decoration: underline; }

#rsban {
	float: left;
	width: 160px;
	border: 1px solid #333;
	text-align: right;
}

div.lt {
	background-color: #eee;
	border: 1px solid #efe;
	padding: 2px;
}

div.lt {
	border: 1px solid #ccc;
	padding: 2px;
}

a.lt {
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	color: #468;
	background-color: #fff;
}

.footer {
	text-align: center;
	border-top: 1px solid #ccc;
	line-height: 16px;
	padding: 5px; 
}

a.formtip { text-decoration: none; }
a.formtip:hover { text-decoration: underline; } 

a.pts {
	font-style: normal;
	text-decoration: none;
	color: #666;
	background-color: #fff;
}
a.small { 	
	color: #003; 
	background-color: #fff;
}

p,li,dt {
	color: #333; 
	font-weight: normal;
	font-style: normal;
}

p { text-align: justify; }

p.quote {
	text-indent: 0;
	color: #333; 
	text-align: left; 
	font-weight: normal;
	font-style: normal;
}

div.center { text-align: center; }

div.formbox { 
	background-color: #eee;
	color: #333; 
	border: 1px solid #357;
	border: 1px solid #357;
	padding: 10px; 
	margin-top: 0px;
}
div.formbox a { 
	background-color: #eee;
	color: #333;
}
.formboxtab {
	background-color: #147;
	color: #fff;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 1px;
	padding-bottom: 1px;
	text-decoration: none;
	font-weight: bold;
}

ul.short li { padding-bottom: 3px; }

.tyouter { border: 1px solid #999; padding: 10px; margin: 15px; background-color: #eee; margin-bottom: 200px; }
.tyinner { border: 1px solid #999; padding: 30px; margin: 15px; background-color: #fff; text-align: center; }
.tyinner h2 { border: 0; font-size: 17px; margin: 0; padding: 0 0 10px 0; }

#faq h3 { color: #333; background-color: #fff; font-size: 14px; border-left: 15px solid #336699; padding-left: 6px; }
#faq li { color: #666; background-color: #fff; }
#faq li b { color: #222; background-color: #fff; font-size: 14px; font-weight: normal; }

span.u { text-decoration: underline; }

.features th { background-color: #333; color: #fff; text-align: center; font-weight: bold; }
.features td { background-color: #fff; }
.features td.section {
	text-align: center;
	font-weight: bold;
}
.features td.val {
	color: green;
	background-color: #efe;
	text-align: center;
}
.features td.on {
	color: green;
	background-color: #efe;
	text-align: center;
	background-image: url('http://images.rtplinks.com/images/checkmark.png');
	background-repeat: no-repeat;
	background-position: center center;
}
td.gold {
	color: green;
	background-color: #eff;
	text-align: center;
	background-image: url('http://images.rtplinks.com/images/checkmark.png');
	background-repeat: no-repeat;
	background-position: center center;
}
.features td.off { color: #666; text-align: center; }

#updated {
	margin-top: 40px;
	border-top: 1px solid #ddd;
	padding-top: 4px;
	text-align: right;
	font-style: italic;
	color: #666;
}

.formbox .sep {
	border-top: 1px solid #eee;
	border-bottom: 1px solid #999;
	height: 1px;
	margin-top: 2px;
	margin-bottom: 4px;
}


.nomarg { margin: 0; }

#erank { display: table; float: left; border: 1px solid #999; background-color: #fff; }
#erank .left { width: 40px; border: 1px solid #999; height: 6px; margin-top: 2px; margin-left: 2px; }
#erank .left .bar { background-color: #AB0C12; height: 6px; }
#erank .right { width: 12px; text-align: center; padding: 0 4px 0 4px; border: 1px solid #ccc; margin-left: 3px; }
div.vote { float: left; margin-left: 2px; }

.box .social { margin-bottom: 0; padding-left: 6px; }
.box .social img { margin: 0; background-color: #fff; border: 1px solid #999; padding: 2px; }
.box .gallery { text-align: center; padding: 0; }
.box .gallery div { margin-top: 10px; margin-bottom: 0px; }
.details { padding: 20px 25px 30px 25px; }
.details h4 { font-size: 12px; margin-top: 20px; margin-bottom: 4px; }
.pmtcard { width: 50px; height: 33px; background-image: url(http://images.rtplinks.com/images/propage/icons_payment.gif); padding: 0; margin: 0; border: 1px solid #888; }
.photo { background-color: #fff; }
.photo img { border: 5px solid #999; margin: 0 20px 20px 20px; }


.photo .imgtop { 
	display: table;
	width: 500px;
	margin: 0;
	padding: 10px 20px 0px 20px;
}
.photo .imgtop .right { 
	margin-top: 10px;
}
.photo .imgtop .right a { 
	color: #900;
	background-color: #eee;
	border: 1px solid #ccc;
	padding: 2px 8px 2px 8px;
	font-weight: bold;
	font-size: 14px;
}

iframe { 
	width: 300px; 
	height: 15px; 
	border: 0; 
	margin: 0; 
	padding: 0; 
}

.bigbullets { 
	font-size: 14px;
}
.bigbullets li { 
	margin-bottom: 1px;
}

.toplink {
	text-align: right;	
	padding: 0;
	line-height: 0;
}
#content .basic .toplink a {
	font-size: 12px;
}

#emailerror {
	color: #880000;
	margin: 15px;
	padding: 10px;
	border: 1px solid #333333;
	background-color: yellow;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}
#emailerror ul { margin-top: 0; padding-top: 5px; text-align: left; margin-left: 50px; margin-bottom: 0; padding-bottom: 0; }
#emailerror ul li { color: #880000; }

#rside {
	flex: 0 0 250px;
}
#bam { 
	margin: 10px;
}
#bam div { 
	display: table;
	margin-bottom: 20px;
	color: #555;
	background-color: #fff;
	font-size: 12px;
}
#bam .url { 
	color: #999;
	font-weight: normal;
}
#bam div a { 
	font-weight: bold;
}
#bam div img { 
	border: 0;
	margin-right: 10px; 
}
#bam div.head { 
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	color: #999;
}

#ptitle {
	display: table;
	width: 100%;
	margin-bottom: 16px;
}
#ptitle h1 {
	float: left;
	position: relative;
	padding-left: 20px;
}
/* Pure-CSS triangle bullet (2026-08-04, Don's call) -- replaces the old
   ydot.png image bullet, no image request needed at all. Border trick:
   a zero-size box with transparent borders on 3 sides and a solid border
   on the 4th renders as a triangle pointing that direction. */
#ptitle h1::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 11px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 8px solid #AB0C12;
}
#ptitle div {
	position: relative;
	float: right;
	margin-top: 11px;
	background-color: #880000;
}
#ptitle div a { 
	color: #eee; background-color: #800; 
	padding: 4px 12px 4px 12px;
	border: 1px solid #333;
	border-bottom: 0;
}
#ptitle div a:hover { 
	color: #fff; 
	background-color: #C00; 
}


#pronav { padding: 4px 0 12px 0; }
#pronav a { text-decoration: none; }
#pronav a:hover { text-decoration: underline; }
#pronav span.contact, #pronav span.gallery, #pronav span.galleryOFF, #pronav span.specials, #pronav span.specialsOFF, #pronav span.links, #pronav span.linksOFF, #pronav span.info, #pronav span.infoOFF, #pronav span.editview {
	border: 1px solid #ddd;
	padding: 9px 12px 7px 38px; 
	font-size: 14px;
	color: #777;
}
#pronav span.contact  { background: #fff url('http://images.introlinks.net/images/propage/proicon-contact-card.png') no-repeat 3px 5px; }
#pronav span.gallery { background: #fff url('http://images.introlinks.net/images/propage/proicon-gallery.png') no-repeat 3px 5px; } 
#pronav span.galleryOFF { background: #fff url('http://images.introlinks.net/images/propage/proicon-galleryOFF.png') no-repeat 3px 5px; color: #999; } 
#pronav span.specials { background: #fff url('http://images.introlinks.net/images/propage/proicon-specials.png') no-repeat 5px 5px; padding-left: 35px; } 
#pronav span.specialsOFF { background: #fff url('http://images.introlinks.net/images/propage/proicon-specialsOFF.png') no-repeat 5px 5px; color: #999; padding-left: 35px; } 
#pronav span.info  { background: #fff url('http://images.introlinks.net/images/propage/proicon-info.png') no-repeat 3px 5px; }
#pronav span.infoOFF  { background: #fff url('http://images.introlinks.net/images/propage/proicon-infoOFF.png') no-repeat 3px 5px; }
#pronav span.links    { background: #fff url('http://images.introlinks.net/images/propage/proicon-links.png') no-repeat 3px 5px; }
#pronav span.linksOFF { background: #fff url('http://images.introlinks.net/images/propage/proicon-linksOFF.png') no-repeat 3px 5px; color: #999; }
#pronav span.editview { background: #fff url('http://images.introlinks.net/images/propage/proicon-editview.png') no-repeat 3px 5px;  }
#pronav span:hover    { background-color: #FDF5F5; border: 1px solid #AB0C12; color: #444; }
#pronav span.editmode { border: 1px solid gold; }

a.add { text-decoration: none; }
a.add span { 
	background: #fff url('http://images.introlinks.net/images/acctmgr/add.png') no-repeat 5px 6px; 
	padding: 6px 8px 6px 28px; 
	border: 1px solid #ddd;
	font-size: 14px;
	color: #777;
}
a.add span:hover { background-color: #efe; }

span.print-coupon, span.view-profile {
	border: 1px solid #ccc;
	font-size: 16px;
	color: #444;
}
span.print-coupon {
	background: #fff url('http://images.introlinks.net/images/propage/proicon-print.png') no-repeat right 2px;  
	padding: 5px 36px 5px 8px; 
}
span.view-profile {
	background: #fff url('http://images.introlinks.net/images/propage/proicon-info.png') no-repeat left 2px;  
	padding: 5px 8px 5px 36px; 
}

#profile-content, #profile-contact {
	clear: both; 
	padding: 5px;
	color: #333;
}
#profile-contact { padding-left: 0; }
#profile-content .fullpage_section { 
	margin: 5px; 
	padding: 10px; 
	border: 1px solid #fff; 
}
#profile-content .fullpage_section h4 { 
	font-size: 14px; 
	margin-top: 2px; 
	margin-bottom: 4px; 
	border-bottom: 1px solid #ccc; 
}
#profile-content .dashed-specials { 
	border: 2px dashed #999999; 
	padding: 10px; 
	text-align: center 
}
#profile-content .short-desc { 
	clear: both;
	border-top: 1px solid #ccc; 
	padding-top: 10px; 
}
#profile-contact-form { 
	border-bottom: 1px solid #ddd; 
	padding-bottom: 8px; 
}
#profile-content h2 {  
	color: #222;
	font-size: 18px;
	padding-top: 0;
}
#ptitle-h2 h2 {
	color: #222;
	font-size: 18px;
	padding-top: 0px;
}
h2 img { vertical-align: bottom; }

#list p.town-sponsor { background-color: #FBEDEE; }
#list p.town-sponsor a { background-color: #FBEDEE; font-weight: bold; }

.siblinks {
	padding: 5px 0 0 20px; 
	border: 1px solid #999;
}
.siblinks, .siblinks h2, .siblinks a {
	background-color: #AB0C12;
}
.siblinks b {
	font-size: 14px;
	font-weight: normal;
	color: #fff;
}
.siblinks a {
	color: #555;
	font-size: 14px; 
}
.siblinks a:hover {
	color: #222;
}

.cityanchors { 
	background: #fff url('/images/magplus.png') no-repeat left 5px;
	margin-bottom: 10px; color: #333; font-size: 14px; 
	text-align: left; 
	padding: 5px 0 0 60px;
	min-height: 50px;
}
.cityanchors a { background-color: #fff; color: #666; text-decoration: underline; font-size: 14px; }
.cityanchors a:hover { text-decoration: underline; color: #222; }

.stateanchors { 
	color: #999;
	text-align: center;
}

.newrow { margin-bottom: 10px; display: table; width: 100%; }
.newrow div.headrow { display: table; border-bottom: 1px solid #eee; width: 100%; }
.newrow div.trow { display: table; width: 100%; clear: both; backgrond-color: #eee; border-bottom: 1px solid #eee; }
.newrow .trow span { color: #666; font-size: 14px; float: left; }
.newrow .trow span i { color: #999; font-size: 13px; } 
.newrow .trow span a, .trow span span { text-decoration: underline; display: block; padding: 5px 0 3px 4px; }
.newrow .trow:hover { background-color: #eee; }
.newrow .trow:hover a { color: #222; }
.newrow .trow a { background-color: transparent; color: #666; text-decoration: none; }

div.fbox { background-color: #eee; border: 1px solid #999; padding: 0 10px 10px 10px; font-size: 12px; }
div.fbox div { clear: both; padding-bottom: 2px; }
div.fbox p { margin: 0; padding: 0 0 8px 3px; }
div.fbox h2 { clear: both; background-color: #eee; padding-top: 15px; margin-bottom: 5px; }
div.fbox div span {
	float: left;
	margin-right: 5px;
	width: 125px;
	text-align: right;
	padding-top: 5px;
}
div.fbox div input, div.fbox div textarea { width: 320px; }
div.fbox div textarea { height: 250px; }
div.fbox div.colrad input { width: 30px; margin-left: 20px; float: left; }
div.fbox div.colrad span { 
	text-align: left;
	width: auto;
	padding-top: 0;
	padding-bottom: 5px;
}

/* ============================================================
   RESPONSIVE / MOBILE (2026-08-04, Webster)
   Function-first pass per Don's direction -- re-development, not
   redesign. Fluid container + stacking columns + a hamburger toggle
   for the jump-to nav. Colors/decorative graphics untouched here;
   this section only reflows layout at smaller widths.
   ============================================================ */

/* Fluid container instead of a hard 1000px that causes horizontal
   scroll below that width. */
#tnavbar .inner, #head, #main, #leftcol, #ttabs, #catsout, #qlinks {
	max-width: 1000px;
	width: 100%;
	box-sizing: border-box;
}

/* Hamburger button -- hidden on desktop, shown at the mobile breakpoint.
   Toggles .open on #qlinks (see inline script in site.template). */
#navToggle {
	display: none;
	background: #AB0C12;
	color: #fff;
	border: 0;
	font-size: 14px;
	padding: 6px 14px;
	line-height: 20px;
	cursor: pointer;
}

/* Three-tier priority order (2026-08-04, Design/Leo spec, Don-approved):
   reclaim width for free before removing/relocating anything, lose pure
   navigation chrome before touching monetization space, and monetization
   (#rside) moves last and never fully disappears -- it demotes to below
   #content instead. Widest to narrowest: 950 (grid reflows) -> 750 (nav
   chrome collapses) -> 570 (ad column demotes). */

@media (max-width: 950px) {
	/* STEP 1, widest: two-column category grid (.dlinkin table) collapses
	   to one column. This reclaims real width for #content without
	   removing or relocating anything, so it needs to happen before
	   #lside collapses -- previously this was bundled into the 750px
	   block below, which is exactly why it fired at the same moment as
	   the nav collapse instead of getting its own earlier reflow step. */
	.dlinkin table, .dlinkin tbody, .dlinkin tr {
		display: block; width: 100%;
	}
	.dlinkin td { display: block; width: 100% !important; }
}

@media (max-width: 820px) {
	/* Top bar (unchanged, out of scope for the reorder): drop the least
	   business-directory-essential links (Community, Education --
	   flagged ".cat-shrink" in site.template) to buy it a little more
	   room before the 750px hand-off to the hamburger. */
	#qlinks td.cat-shrink { display: none; }
}

/* One concern per @media block from here on (2026-08-04, Design/Leo
   standing rule) -- even at a shared pixel value, separate blocks so a
   future single-item fix can never accidentally drag something
   unrelated along with it. These three all happen to fire at 750px but
   are otherwise independent. */

@media (max-width: 750px) {
	/* STEP 2: #lside moves into the hamburger -- pure navigation chrome,
	   nothing lost, the same category list is one tap away. By this
	   point #content is already down to one column (from 950px above),
	   so #lside is the next thing to go, not #rside. */
	#main { padding-top: 0; }
	#lside { order: 1; width: 100%; flex-basis: 100%; float: none; border-right: 0; box-sizing: border-box; display: none; }
	#lside.open { display: block; }
	#content { order: 2; padding: 10px; box-sizing: border-box; }
	#rside { order: 3; box-sizing: border-box; }
}

@media (max-width: 750px) {
	/* Header stays two-section (logo + centered search) down to 480px;
	   logo starts shrinking here so it doesn't eat into the search bar's
	   room. */
	#head .left img { max-width: 200px; height: auto; }
}

@media (max-width: 750px) {
	/* The hamburger opens the LEFT DIRECTORY nav (#lside: category list,
	   Help Desk, Advertising). The Top bar fully hands off to it here
	   too (having #lside collapse at one breakpoint while the Top bar
	   hung around until a different one read as two uncoordinated
	   breakpoints -- they switch over together). */
	#navToggle { display: block; width: 100%; text-align: left; }
	#qlinks { display: none !important; }
}

@media (max-width: 480px) {
	/* True phone width: search wraps underneath the logo instead of
	   squeezing beside it, and the logo shrinks further (Don's call,
	   2026-08-04). Search caps at 90% of the available width instead of
	   the full 100% (Don's call, 2026-08-04) so it doesn't run edge to
	   edge on a phone either. */
	#head { flex-wrap: wrap; }
	#head .left img { max-width: 150px; }
	#search { flex-basis: 90%; max-width: 90%; width: 90%; padding: 0; margin: 10px auto 0 auto; }
}

@media (max-width: 570px) {
	/* STEP 3, narrowest: #rside (the ad column -- revenue space, ~46% of
	   traffic is mobile) is the LAST thing to reflow, and even then it
	   only demotes to below #content, it never disappears. flex-wrap is
	   OFF everywhere else (see #main above) specifically so this is the
	   only place stacking can happen -- no implicit/uncontrolled wrap
	   anywhere above this breakpoint. */
	#main { flex-wrap: wrap; }
	#content, #rside { flex-basis: 100%; width: 100%; }
}

@media (max-width: 420px) {
	/* Breadcrumb shrinks further and wraps cleanly on narrow phones instead
	   of overflowing (Don's call, 2026-08-04). */
	#catsin { font-size: 11px; line-height: 1.6; }
	#catsin span.right { margin-left: 2px; }
	#catsin span.right a { padding: 0px 4px; }
}