/* BASE STYLES
-----------------------------------------------------------------------------*/

#wrapper {
	position: relative;
	min-width: 980px;
	}

#contentbody {
	background: #fff url("/images/content_drop_shadow.gif") repeat-x;
	margin: 0px;
	padding: 20px 15px 15px 15px;
	border: 0px;
	}

	
/* GLOBAL STYLES
-----------------------------------------------------------------------------*/

p {
	font-family: arial, helvetica, geneva, verdana;
	color: #000;
	background: transparent;
	margin: 10px 0 0 0px;
	padding: 0px;
	font-size: 12px;
	font-weight: normal;
	line-height: 16px;
	text-align: justify;
	}

td {
	font-family: arial, helvetica, geneva, verdana;
	font-size: 12px;
	}

li {
	line-height: 16px;
	}

a {
	text-decoration: underline;
	color: #00577F;
	}

a:hover {
	text-decoration: none;
	color: #ff1909;
	}

a:visited {
	text-decoration: underline;
	color: #006FA3;
	}

a:visited:hover {
	text-decoration: none;
	color: #ff1909;
	}

h1 {
	background: transparent;
	font-family: arial, helvetica, geneva, verdana;
	font-size: 22px;
	color: #000000;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	}

h2 {
	background: transparent;
	font-family: arial, helvetica, geneva, verdana;
	font-size: 18px;
	color: #000000;
	font-weight: bold;
	margin: 20px 0 0 0px;
	padding: 0px;
	}

h3 {
	background: transparent;
	font-family: arial, helvetica, geneva, verdana;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
	margin: 20px 0 0 0px;
	padding: 0px;
	}

h4 {
	background: transparent;
	font-family: arial, helvetica, geneva, verdana;
	font-size: 13px;
	color: #000000;
	font-weight: bold;
	margin: 20px 0 0 0px;
	padding: 0px;
	}

input {
	font-family: arial, helvetica, geneva, verdana;
	color: #000000;
	font-size: 12px;
	}

textarea {
	font-family: arial, helvetica, geneva, verdana;
	color: #000000;
	font-size: 12px;
	}

select {
	font-family: arial, helvetica, geneva, verdana;
	color: #000000;
	font-size: 12px;
	}

.header_long {
	background: #164E7F url("/images/header_edge.gif") top right no-repeat;
	width: 589px;
	}
	
.header_short {
	background: #164E7F url("/images/header_edge.gif") top right no-repeat;
	width: 287px;
	}
	
#articles {
	float: left;
	width: 307px;
	padding-top: 20px;
	}
	
.articles_wrap {
	clear: both;
	padding-top: 16px;
	}
	
.articles_wrap h1 {
	font-size: 16px;
	font-weight: bold;
	margin: 0 10px 0 10px;
	padding: 0px;
	}

.articles_wrap h3 {
	font-size: 12px;
	font-weight: bold;
	margin: 0 10px 0 10px;
	padding: 0px;
	}

.articles_wrap p {
	margin: 0 10px 0 10px;
	line-height: 17px;
	}
	
.articles_wrap .thumb {
	float: left;
	margin: 4px 10px 0 10px;
	border: 1px solid #164E7F;
	}
	
#entries_small {
	width: 223px;
	padding-right: 2px;
	text-align: center;
	}
	
#entries {
	float: right;
	width: 452px;
	padding-top: 20px;
	}
	
.entries_wrap {
	clear: both;
	width: 225px;
	padding-top: 7px;
	}
	
.entries_wrap p {
	margin: 0 10px 0 10px;
	line-height: 17px;
	text-align: left;
	}
	
.entries_wrap .thumb {
	float: left;
	margin: 4px 10px 0 10px;
	border: 1px solid #164E7F;
	}

#browse {
	clear: both;
	padding-top: 10px;
	padding-bottom: 20px;
	}
	
#browse p {
	padding-left: 10px;
	font-size: 12px;
	line-height: 12px;
	width: 136px;
	}	
		
#browse h4 {
	background: transparent;
	font-family: arial, helvetica, geneva, verdana;
	font-size: 13px;
	color: #000000;
	font-weight: bold;
	margin: 10px 0 0 0;
	padding: 0;
	}	

.breadcrumbs {
	padding-bottom: 10px;
}

.breadcrumbs h3 {
	margin: 0;
}
		
/* TOP STYLES
-----------------------------------------------------------------------------*/

#topbanner {
	margin: 17px 0 0 0;
	height: 90px;
	vertical-align: center;
	text-align: center;
	}

#navigation {
	width: 100%;
	background: #000 url("/images/framework/topnav-bg.jpg") repeat-x;
	}

#topnav {
	position: relative;
	top: 0px;
	left: 0px;
	padding: 0 20px 0 20px;
}

#userbar {
	height: 31px;
	width: 100%;
	border-bottom: 1px #88BCE6 solid;
	}

#userbar td.links {
	line-height: 31px;
	height: 31px;
	vertical-align: center;
	text-align: center;
	color: #fff;
	font-family: tahoma, arial, helvetica, geneva, verdana;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	}

#userbar a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 0 10px 0 10px;
	}

#userbar a:hover {
	display: block;
	color: #fff;
	text-decoration: none;
	background-color: #F9180D;
	}

#searchbox {
	position: relative;
	float: right;
	/*padding: 20px 20px 0 0!important;*/
	width: 430px;
	height: auto !important;	/* was 26px !important - the Google PSE widget is taller and overflowed down onto the logo */
	margin: 9px 10px 0 0;		/* vertically centers the 44px pill in the 61px gray header band */
	background: none !important;
	border: none !important;
	z-index: 5;			/* was 1000 - keep the search box from painting over the logo */
	}

#searchbox div.gsc-control-cse {
	background: none !important;
	border: none !important;
}

/* Loupe AI search bar — prominent pill (header + search page) */
.sm-aisearch {
	display: flex;
	align-items: stretch;
	height: 40px;
	background: #fff;
	border: 2px solid #c20000;
	border-radius: 22px;
	box-shadow: 0 2px 10px rgba(0,0,0,.15);
	overflow: hidden;
}
.sm-ai-badge {
	display: flex;
	align-items: center;
	white-space: nowrap;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .4px;
	color: #fff;
	background: linear-gradient(135deg, #e11b1b 0%, #8a0000 100%);
	padding: 0 11px;
}
.sm-ai-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	font-size: 14px;
	color: #222;
	padding: 0 12px;
}
.sm-ai-input::placeholder { color: #8a8a8a; font-style: italic; }
.sm-ai-btn {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	background: #c20000;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	padding: 0 18px;
}
.sm-ai-btn:hover { background: #8a0000; }


#mainlogo {
	padding: 14px 0 11px 10px;
	height: 36px;
	background: #3C3C3C;
	}
	
#mainlogo a {
	color: #fff;
	font-size: 30px;
	text-decoration: none;
	font-weight: 700;
	}
	
#mainnavbuttons {
	height: 28px;
	border-top: 1px #88BCE6 solid;
	background: #235E96;
	text-transform: uppercase;
	}

#mainnavbuttons a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 0 12px 0 12px;
	}

#mainnavbuttons a:hover {
	display: block;
	color: #fff;
	text-decoration: none;
	background-color: #F9180D;
}
	
#mainnavbuttons td.first {
	border-right: 1px #88BCE6 solid;
	border-left: none;
	padding-left: 8px;
	}

#mainnavbuttons td.last {
	border-left: 1px #1A537F solid;
	border-right: none;
	}

#mainnavbuttons td {
	vertical-align: center;
	text-align: center;
	color: #fff;
	font-family: tahoma, arial, helvetica, geneva, verdana;
	font-size: 12px;
	font-weight: bold;
	line-height: 32px;
	border-left: 1px #1A537F solid;
	border-right: 1px #88BCE6 solid;
	}



	
	
/* CONTENT & SIDEBAR STYLES
-----------------------------------------------------------------------------*/

#contenttable {
	width: 100%;
	}
	
#sidebar {
	background: #124874 url("/images/framework/rightbar-bg.jpg") top right repeat-x;
	}
	
#sidebar img {
	margin: 7px 7px 0 7px;
	}
	
#sidebar span {
	margin: 7px 0 0 0;
	}


	
		
/* FOOTER STYLES
-----------------------------------------------------------------------------*/

#footer {
	position: relative;
	background: #124874 url("/images/footer_background.gif") top right repeat-x;
	width: 100%;
	height: 35px;
	}

#footer .bug  {
	position: absolute;
	bottom: 8px;
	right: 6px;
	width: 40px;
	height: 19px;
	}

#footercopy {
	padding: 7px 0 7px 0;
	position: relative;
	width: 100%;
	text-align: center;
	}
	
#footercopy #nav {
	padding: 7px 0 5px 0;
	}

#footercopy a {
	color: #fff;
	text-decoration: none;
	}
	
#footercopy a:visited:hover {
	color: #88BCE6;
	}
	
#footercopy a:visited {
	color: #fff;
	text-decoration: none;
	}
	
#footercopy a:hover {
	color: #88BCE6;
	}
	
#footercopy .first a {
	border: 0;
	padding-left: 18px;
	}

#footercopy .copy {
	color: #88BCE6;
	font-size: 10px;
	margin: 1px;
	padding: 0;
	}
	
#featured_sponsors {
	width: 100%;
	background-color: #124874;
	margin: 0;
	padding: 0 0 12px 0;
	}

#featured_sponsors #copy {
	text-align: center;
	color: #fff;
	font-size: 10px;
	padding: 3px;
	}
	
#featured_sponsors #banner {
	padding: 5px;
}
	
#featured_sponsors #images {
	text-align: center;
}
	
	
		
/* HEADINGS, COLUMNS, & TITLES
-----------------------------------------------------------------------------*/

.tableHead {
	background: #164E7F url("/images/framework/tablehead.jpg") repeat-x;
	COLOR: #FFFFFF;
	padding: 6px;
	FONT-FAMILY: arial, helvetica, geneva, verdana;
	FONT-SIZE: 14px;
	FONT-WEIGHT: bold;
	}

.tableHead A {
	COLOR: #FFFFFF;
	TEXT-DECORATION: underline;
	}

.tableHead A:hover {
	COLOR: #ffff00;
	TEXT-DECORATION: none;
	}

.tableHead A:visited {
	COLOR: #FFFFFF;
	TEXT-DECORATION: underline;
	}

.tableHead A:visited:hover {
	COLOR: #ffff00;
	TEXT-DECORATION: underline;
	}

.tableHead2 {
	BACKGROUND-COLOR: #3D78AC;
	COLOR: #FFFFFF;
	padding: 6px;
	FONT-FAMILY: arial, helvetica, geneva, verdana;
	FONT-SIZE: 13px;
	FONT-WEIGHT: bold;
	}

.tableHead2 A {
	COLOR: #FFFFFF;
	TEXT-DECORATION: underline;
	}

.tableHead2 A:hover {
	COLOR: #ffff00;
	TEXT-DECORATION: none;
	}

.tableHead2 A:visited {
	COLOR: #FFFFFF;
	TEXT-DECORATION: underline;
	}

.tableHead2 A:visited:hover {
	COLOR: #ffff00;
	TEXT-DECORATION: underline;
	}

.tableHead3 {
	BACKGROUND-COLOR: #999;
	COLOR: #FFFFFF;
	padding: 6px;
	FONT-FAMILY: arial, helvetica, geneva, verdana;
	FONT-SIZE: 12px;
	FONT-WEIGHT: bold;
	}

.tableHead3 A {
	COLOR: #FFFFFF;
	TEXT-DECORATION: underline;
	}

.tableHead3 A:hover {
	COLOR: #ff1909;
	TEXT-DECORATION: none;
	}

.tableHead3 A:visited {
	COLOR: #FFFFFF;
	TEXT-DECORATION: underline;
	}

.tableHead3 A:visited:hover {
	COLOR: #ff1909;
	TEXT-DECORATION: underline;
	}

.tableHead4 {
	BACKGROUND-COLOR: #ccc;
	COLOR: #FFFFFF;
	padding: 6px;
	FONT-FAMILY: arial, helvetica, geneva, verdana;
	FONT-SIZE: 12px;
	FONT-WEIGHT: bold;
	}

.tableColumn {
	BACKGROUND-COLOR: #e0e0e0;
	COLOR: #000000;
	padding: 4px;
	FONT-FAMILY: arial, helvetica, geneva, verdana;
	FONT-SIZE: 12px;
	FONT-WEIGHT: bold;
	}

.tableColumn2 {
	text-align:				center;
	background-color:		#99CCFF;
	color:					#000000;
	padding:				4px;
	}

.tableColumn2 A {
	color:					#000000;
	text-decoration:		underline;
	}

.tableColumn2 A:hover {
	color:					#ff1909;
	text-decoration:		underline;
	}

.tableColumn2 A:active {
	color:					#000000;
	text-decoration:		underline;
	}

.tableColumn2 A:visited {
	color:					#000000;
	text-decoration:		underline;
	}

.clubheader {
	font-family: verdana, arial, helvetica, geneva;
	font-weight: bold;
	font-size: 16px;
	color: #006FA3;
	padding-left: 5px;
	text-transform: uppercase;
	text-align: center;
	}

.navheader {
	font-family: verdana, arial, helvetica, geneva;
	font-weight: bold;
	font-size: 16px;
	color: #ffffff;
	text-align: center;
	text-transform: uppercase;
	}

	
		
/* BORDERS, PADDING, ETC.
-----------------------------------------------------------------------------*/

.padded {
	padding:				4px;
	}

.padded2 {
	padding:				2px;
	}

.content {
	background-color:		#e6e6e6;
	}

.detailBorder {
	border-right:			1px #666666 solid;
	border-top:				1px #666666 solid;
	border-bottom:			1px #666666 solid;
	border-left:			1px #666666 solid;
	}

.detailBox {
	text-align: center;
	font-family: arial, helvetica, geneva, verdana;
	color: #000;
	background: transparent;
	margin: 10px 0 0 0px;
	padding: 0px;
	font-size: 12px;
	font-weight: normal;
	line-height: 16px;
	}

.grayLeftBorder {
	BORDER-LEFT: 1px #666 solid;
	}

.grayRightBorder {
	BORDER-RIGHT: 1px #666 solid;
	}

.grayTopBorder {
	BORDER-TOP: 1px #666 solid;
	}

.grayBottomBorder {
	BORDER-BOTTOM: 1px #666 solid;
	}

	
		
/* HIGHLIGHTS
-----------------------------------------------------------------------------*/

.navhighlight {
	background-color:#F9180D;
}

.highlight {
	background-color:#FFCACA;
	font-weight: bold;
	border-top: 1px #FF8E8E solid;
	border-bottom: 1px #FF8E8E solid
}

.background1 {
	background-color:		#C5E2FD;
	}

.background2 {
	background-color:		#99CCFF;
	}

.background3 {
	background-color:		#55BBEB;
	}

.background4 {
	background-color:		#329CCE;
	}

.navhighlight {
	font-weight:			bold;
	color:					red;
	}

.error {
	font-family:			arial, helvetica, geneva, verdana;
	font-size:				11px;
	font-weight:			bold;
	color:					red;
	}

.errorDiv {
	font-family:			arial, helvetica, geneva, verdana;
	font-size:				11px;
	font-weight:			bold;
	color:					red;
	padding:				2px;
	border:					#cc6666 2px solid;
	background-color:		white;
	}

.bodyBold {
	FONT-WEIGHT:	bold;
	}

.bodyBoldHighlight {
	FONT-WEIGHT:	bold;
	color: red;
	}

.paddingLeft {
	padding-left: 7px;
	}

.paddingRight {
	padding-right: 7px;
	}

.paddingTop {
	padding-top: 7px;
	}

.paddingBottom {
	padding-bottom: 7px;
	}

.row0 {
	background-color:		#ffffff;
	padding-left:			2px;
	padding-right:			2px;
	}

.row1 {
	background-color:		#e0e0e0;
	padding-left:			2px;
	padding-right:			2px;
	}

.thumbnail a {
	color: #006fa2;
	border: 1px #006fa2 solid;
}

.thumbnail a:hover {
	color: #ff1909;
	border: 1px #ff1909 solid;
}

.thumbnail a:visited {
	color: #569BBA;
	border: 1px #569BBA solid;
}

.thumbnail a:visited:hover {
	color: #ff1909;
	border: 1px #ff1909 solid;
}

.std_thumbs_bg {
	display: inline-block;
	padding: 2px;
	border: 1px solid #ccc;
	/* 2026-06-02: removed dead background image (was http://dev.supermotors.net/...; file no longer exists + was blocked as mixed content on HTTPS) */
	min-width: 77px;
	height: 58px;
	margin: 0px 5px 7px 0px;
}

/* FORUMS, MESSAGES, ETC.
-----------------------------------------------------------------------------*/

.forumbody {
	font-family: arial, helvetica, geneva, verdana;
	font-size: 12px;
	font-weight: normal;
	line-height: 16px;
	color: #000000;
	padding: 6px;
	}

.forumSubHead {
	BACKGROUND-COLOR: #204D7A;
	COLOR: #FFFFFF;
	padding: 6px;
	FONT-FAMILY: arial, helvetica, geneva, verdana;
	FONT-SIZE: 11px;
	FONT-WEIGHT: normal;
	}

.forumSubHead A {
	COLOR: #FFFFFF;
	TEXT-DECORATION: underline;
	}

.forumSubHead A:hover {
	COLOR: #ff1909;
	TEXT-DECORATION: none;
	}

.forumRow0 {
	BACKGROUND-COLOR:#ffffff;
	border-bottom: 1px #999999 solid;
	}

.forumRow1 {
	BACKGROUND-COLOR:#efefef;
	border-bottom: 1px #999999 solid;
	}

.forumTopic {
	font-size: 12px;
	font-weight: bold;
	}

.forumRowHigh {
	CURSOR:hand;
	COLOR:#000000;
	BACKGROUND-COLOR:#FFFAAE;
	}

.forumFootnote {
	padding: 4px;
	FONT-FAMILY: geneva, arial, helvetica, verdana;
	FONT-SIZE: 9px;
	line-height: 12px;
	}

.forumPosted {
	BACKGROUND-COLOR: #e0e0e0;
	COLOR: #000000;
	padding: 4px;
	FONT-FAMILY: arial, helvetica, geneva, verdana;
	FONT-SIZE: 10px;
	border-right: 1px #999999 solid;
	border-left: 1px #999999 solid;
	}

.forumQuote {
	font-family: arial, helvetica, geneva, verdana;
	color: #444444;
	line-height: 125%;
	background-color: #FAFAFA;
	border: #999999;
	border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
	}


.forumCode {
	font-family: Courier, 'Courier New', sans-serif; font-size: 11px;
	color: #006600;
	background-color: #FAFAFA;
	border: #999999;
	border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
	}

input.forumButton {
	background-color : #CCCCCC;
	color : #000000;
	font-size: 11px; font-family: arial, helvetica, geneva, verdana;
	}

.emoticons {
	height:200px;
	overflow:auto;
	}

	
		
/* BUTTONS
-----------------------------------------------------------------------------*/

.button {
	font-family:			arial, helvetica, geneva, verdana;
	font-size:				11px;
	font-weight:			bold;
	padding:				3px;
	}


.button1 {
	FONT-FAMILY: arial, helvetica, geneva, verdana;
	FONT-WEIGHT: bold;
	FONT-SIZE: 10px;
	CURSOR: hand;
	VERTICAL-ALIGN: bottom;
	PADDING: 2px;
	}

.buttonSmall1 {
	FONT-FAMILY: arial, helvetica, geneva, verdana;
	FONT-WEIGHT: normal;
	FONT-SIZE: 9px;
	CURSOR: hand;
	VERTICAL-ALIGN: bottom;
	}


.navbutton {
	position: relative;
	font-family: arial, helvetica, geneva, verdana;
	font-size: 11px;
	font-weight: normal;
	cursor: hand;
	color: #cccccc;
	background-color: #006FA2;
	border-top: #018FD1 thin solid;
	border-left: #018FD1 thin solid;
	border-right: #004D71 thin solid;
	border-bottom: #004D71 thin solid;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	height: 14px;
	vertical-align: middle;
	}

.navbutton a {
	text-decoration: none;
	color: #ffffff;
	}

.navbutton a:hover {
	text-decoration: none;
	color: #ff1909;
	}

.navbutton a:visited {
	text-decoration: none;
	color: #ffffff;
	}

.navbutton a:visited:hover {
	text-decoration: none;
	color: #ff1909;
	}

	
		
/* CONTENT, TEXT, ETC.
-----------------------------------------------------------------------------*/

.text1 {
	font-family: arial, helvetica, geneva, verdana;
	color: #000;
	background: transparent;
	font-size: 11px;
	line-height: 13px;
	font-weight: normal;
	}

.text2 {
	font-family: arial, helvetica, geneva, verdana;
	color: #000;
	background: transparent;
	font-size: 10px;
	line-height: 12px;
	font-weight: normal;
	}

.text3 {
	font-family: arial, helvetica, geneva, verdana;
	color: #000;
	background: transparent;
	font-size: 9px;
	line-height: 11px;
	font-weight: normal;
	}

BLOCKQUOTE{
	border-left: 1px dotted #BF3A07;
	padding-left: 10px;
}

blockquote.helpContents
{
	text-align: left;
	width:215px;
	font-family: arial, helvetica, geneva, verdana;
	font-size: 11px;
	margin: 0;
	padding: 5px;
	position: absolute;
	top: -1000px;
	left: -1000px;
	border: 1px solid #000;
	z-index: 100;
	background-color: #D4E6F5;
	-moz-border-radius: 5px;
	-moz-opacity: .85;
	/*
	These next two lines are how you set the level of opacity for the floating help layer.  Right it is at 85%,
	which means that 85% of the content behind it is blocked, but 15% makes it through.  To make the floating layer
	more transparent (less opaque), lower this value.  To make it less transparent (more opaque), raise it.
	*/
	opacity: .85;
	filter: alpha(opacity=85);

}
blockquote.helpContents a{
	font-family: Arial;
	color: #CC3300;
	font-weight: bold;
}
	
		
/* POSITIONING
-----------------------------------------------------------------------------*/

.pullleft {
	float: left;
	font-family: arial, helvetica, geneva, verdana;
	color: #000;
	background: transparent;
	padding: 5px 5px 0 5px;
	margin: 5px 0px 0 0;
	font-size: 12px;
	font-weight: normal;
	line-height: 16px;
	text-align: justify;
	}

.pullright {
	float: right;
	font-family: arial, helvetica, geneva, verdana;
	color: #000;
	background: transparent;
	padding: 5px 4px 0 10px;
	margin: 5px 0 0 0;
	font-size: 12px;
	font-weight: normal;
	line-height: 16px;
	text-align: justify;
	}

/* ===== Ad sizing: leaderboard fixed 728x90 on desktop, fluid on mobile (zones 2 & 5) ===== */
.ad-lead { display:block; width:728px; height:90px; }

/* ===== Responsive layer — added 2026-06-01 (mobile linearization of the legacy 980px table layout) ===== */
@media (max-width: 767px) {
  html, body { width:auto !important; min-width:0 !important; overflow-x:hidden !important; }
  #wrapper { min-width:0 !important; width:100% !important; max-width:100% !important; }

  /* linearize the outer shell + main content/sidebar tables (classes are ONLY on layout tables) */
  .sm-shell, .sm-shell>tbody, .sm-shell>tbody>tr, .sm-shell>tbody>tr>td { display:block !important; width:100% !important; max-width:100% !important; }
  .sm-main, .sm-main>tbody, .sm-main>tbody>tr { display:block !important; width:100% !important; }
  .sm-content, .sm-aside { display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box; }

  /* navigation wrappers */
  #navigation { width:100% !important; max-width:100% !important; }
  #navigation > table { width:100% !important; max-width:100% !important; }

  /* userbar (login / logged-in links): stack + wrap, kill nowrap */
  #userbar, #userbar tbody, #userbar tr { display:block !important; width:100% !important; height:auto !important; }
  #userbar td { display:inline-block !important; width:auto !important; height:auto !important; white-space:normal !important; vertical-align:middle; }
  #userbar td.links { line-height:1.5 !important; height:auto !important; padding:6px 8px !important; }
  #userbar input[type=text], #userbar input[type=password] { width:90px !important; }

  /* main nav buttons: wrap into rows with finger-sized targets */
  #mainnavbuttons, #mainnavbuttons>tbody, #mainnavbuttons>tbody>tr { display:block !important; width:100% !important; max-width:100% !important; }
  #mainnavbuttons td { display:inline-block !important; width:auto !important; border:0 !important; white-space:normal !important; line-height:1.2 !important; }
  #mainnavbuttons td.first, #mainnavbuttons td.last { display:none !important; }
  #mainnavbuttons a { padding:11px 14px !important; line-height:1.2 !important; }

  /* logo + Google CSE search */
  #mainlogo { height:auto !important; padding:10px !important; }
  #mainlogo img { max-width:90% !important; height:auto !important; }
  #searchbox { float:none !important; position:static !important; width:100% !important; max-width:100% !important; margin:8px 0 4px !important; box-sizing:border-box; }
  #searchbox .gsc-control-cse, #searchbox table, #searchbox td { width:100% !important; max-width:100% !important; box-sizing:border-box; }
  .sm-aisearch { height:46px !important; }
  .sm-ai-input { font-size:16px !important; }   /* 16px = no iOS zoom-on-focus */

  /* content area */
  #contentbody { padding:12px !important; }
  #contentbody img { max-width:100%; height:auto; }
  #contentbody table { display:block !important; max-width:100% !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  #contentbody td { word-break:break-word; }
  #contentbody div { max-width:100% !important; }
  /* floated content columns (homepage etc.) -> stack full width */
  #articles, #entries { float:none !important; width:100% !important; box-sizing:border-box; margin-left:0 !important; margin-right:0 !important; }

  /* ad containers never force page width (real per-breakpoint ad sizing handled in ads.php) */
  #topbanner, #sidebar { width:100% !important; max-width:100% !important; overflow:hidden !important; height:auto !important; }
  .adsbygoogle { max-width:100% !important; }
  /* leaderboards go fluid full-width on phones */
  .ad-lead { width:100% !important; height:auto !important; }
}

@media (max-width: 767px) {
  /* minimal mobile ads: hide now-empty leaderboard + skyscraper containers (zones 2/3/5 suppressed server-side) */
  #topbanner, .sm-aside { display:none !important; }
}