/* CSS Created at 6/2/2026 11:33:16 AM */
/* # 1 global_inc\site_templates\global_base.css */


/* 1: BASIC ELEMENTS */
/* test */
/* 1: END */

/* 2. SPECIAL PURPOSE AND TEMPLATE CLASSES */

.FirstAutoCompleteItem
{
	font-style: italic;
	color: gray;
}

.ui-autocomplete-category 
{
	font-weight:bold;
	padding:.2em .4em;
	margin:.8em 0 .2em;
	line-height:1.5;		
}

.ui-corner-all 
{
    border-radius: 4px 4px 4px 4px;
}

.ui-widget-content 
{
    border: 1px solid #AAAAAA;
    color: #222222;
}

.ui-widget 
{
    font-family: inherit;
    font-size: .9em;
}

.ui-menu 
{
    display: block;
    list-style: none outside none;
    margin: 0;
    padding: 2px;
	width: 18%;
}

.ui-autocomplete 
{
    cursor: default;
    position: relative;
	z-index: 5 !important;
}

#ui-active-menuitem 
{ 
	background-color: #eee; 
}

.ui-menu .ui-menu-item 
{
    margin: 0;
    padding: 0;
    width: 100%;
}

.ui-widget-content 
{
    color: #222222;
}
.ui-widget 
{
    font-size: 1.1em;
}
.ui-menu 
{
    list-style: none outside none;
}
.ui-autocomplete 
{
    cursor: default;
}

.ui-menu .ui-menu-item a 
{
    display: block;
    line-height: 1.5;
    padding: 0.2em 0.4em;
    text-decoration: none;
}

.ui-autocomplete  li
{
	list-style-image: none !important; 
}

.ui-widget-content a {
}

.ui-corner-all 
{
    border-radius: 4px 4px 4px 4px;
	display: block;
}

#FlexiMenu
{
	display: none;
}

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

.optionChild
{
    padding-left:15px;
}

.CustomFormTable td,Remy
.CustomFormTable th,
.CustomFormResponseTable td,
.CustomFormResponseTable th,
.CustomFormResponseAttachmentsTable td,
.CustomFormResponseAttachmentsTable th
{
	padding:5px 3px 5px 3px;
	text-align:left;
}

.CustomFormTable td.break,
.CustomFormResponseTable td.break
.CustomFormResponseAttachmentsTable td.break
{
	height:20px;
}

.CustomFormTable th,
.CustomFormResponseTable th,
.CustomFormResponseAttachmentsTable th
{
	background-color:Transparent;
	font-weight:bold;
	line-height:21px;
	vertical-align:top;
}

.CustomFormTable th div,
.CustomFormTable th span,
.CustomFormResponseTable th div,
.CustomFormResponseTable th span,
.CustomFormResponseAttachmentsTable th span
{
	line-height:13px;
}

.CustomFormTable th.center,
.CustomFormResponseTable th.center
.CustomFormResponseAttachmentsTable th.center
{
	text-align:center;
}

.DotNetPager
{
	font-weight:bold;
}
.DotNetPager a
{
	font-weight:normal;
	text-decoration:underline;
}
.DotNetPager .pgNavigation /* Reset */
{
    border-spacing: 0px
}
.DotNetPager .pgNavigation td
{
    padding: 0px 1px;
}
.DotNetPager td
{
	padding-top:15px;
}

.DisplayInline label {
    display: inline;
}

.FormTable1 td.label
{
	font-weight:bold;
}
.FormTable1 div
{
	font-weight:normal;
	text-align:left;
}

.ForumAttachments
{
	clear:both;
	padding:0px 4px 8px 4px;
}
	.ForumAttachments div.ForumAttachmentImg
	{
		margin:8px 4px 0px 4px;
		vertical-align:top;
		line-height: 15px;
	}
	.ForumAttachments div.ForumAttachmentImg,
	.ForumAttachments div input
	{
		display: inline-block;
	}

	.ForumAttached div.ForumAttachmentFile
	{
		display: inline-block;
		white-space: nowrap;
	}

	.ForumAttachments div.ForumAttachmentImg input
	{
		vertical-align: top;
	}
	.ForumAttached div.ForumAttachmentFile input
	{
		vertical-align: text-top;
	}

.ForumTopicScore label,
.ForumTopicScore .ScoreControl
{
	display:block;
	float:left;
}
.ForumTopicScore label
{
	margin:4px 0px 13px 0px;
}
.ForumTopicScore .ScoreControl
{
	margin:2px 0px 13px 0px;
}
.ForumTopicScore .ScoreControl .ScoreControl_reset
{
	margin-left:2px;
}

.MemberControlPanel
{
	float:left;
	position: relative;
	width:49.9%;
	height:80px;
}
.MemberControlPanel_Container,
.MemberControlPanel_Container:hover
{
	display:block;
	text-decoration:none;
	padding:8px 8px 10px 8px;
}
.MemberControlPanel_Container:hover
{
	background-color:#eee;
}
.MemberControlPanel_Divider
{
	border-top:dotted 1px #ccc;
	padding-top:16px;
}
.MemberControlPanel_Image
{
	border:0px none;
	display:inline-block;
	margin-right:8px;
}
.MemberControlPanel_ImageDouble
{
	border: 0px none;
	display: inline-block;
	margin-right: 20px;
	/*padding:0px 20px 15px 0px;*/
	vertical-align: top;
}
.MemberControlPanel_Title
{
	font-size:14px;
}
.MemberControlPanel_Description
{
	line-height:14px;
}

.MemberControlPanel_Double
{
	float: left;
	width: 99.8%;
	/*height: 120px;*/
}

.MicroBlog td
{
border-bottom: 1px dashed #dddddd;
}
.MicroBlog td .MicroBlog_FirstPost
{
font-size: 16px;
}

.ordinalPositioner
{
	width:51px;
}

.ordinalPositioner .ordinalPositionerL
{
	float:left;
}
.ordinalPositioner .ordinalPositionerL input
{
	border-width:1px;
	font-size:12px;
	height:22px;
	padding-top:2px;
	text-align:center;
	width:30px;
}

.ordinalPositioner .ordinalPositionerR
{
	float:right;
}
.ordinalPositioner .ordinalPositionerR input
{
	height:10px;
	width:11px;
	padding:2px 0;
}

.ScoreControl_bias
{
	color:Gray;
	display:inline-block;
	font-size:14px;
	font-weight:bold;
	line-height:16px;
	text-align:center;
	vertical-align:top;
	width:30px;
}

.ScoreControl_biasUp { color:Green }
.ScoreControl_biasDn { color:Red }

.SearchItemSynopsis
{
	color:#555555;
	padding:6px 0px 6px 0px;
}
.SearchItemSynopsis .HitHighlight
{
	background-color:#FFFFAA;
	color:#000000;
}
.TabBar
{
	border-bottom:1px solid #dddddd;
}
.TabBar a
{
	display:block;
	font-size:14px;
	text-align:center;
	padding:3px 8px 2px 8px;
}
.TabBar div
{
	float:left;
	margin-right:2px;
}
.TabBar div a
{
	background-color:#eeeeee;
	color:#aaaaaa;
}
.TabBar div a:hover
{
	background-color:#cccccc;
	color:White;
	text-decoration:none;
}
.TabBar div.activeTab
{
	border-bottom:0px none;
	border-top:1px solid #dddddd;
	border-right:1px solid #dddddd;
	border-left:1px solid #dddddd;
	margin-bottom:-1px;
}
.TabBar div.activeTab a,
.TabBar div.activeTab a:hover
{
	background-color:#ffffff;
	color:#333333;
	padding-top:2px;
	padding-bottom:3px;
}
.TabBar div.clearBottom
{
	clear:both;
	display:block;
	float:none;
}
/* 2: END */

/* 3. GENERAL CLASSES AND OVERRIDES */
.ComboBox
{
	border:solid 1px #cccccc;
}
.ComboBoxList
{
	background-color:White;
	overflow:auto;
	white-space:nowrap;
}
.ComboBoxList input
{
	margin-bottom:0px;
}

.ComboBoxListItem
{
	font-size:11px;
	height:20px;
	line-height:20px;
}

div.ContributedContent
{
	overflow:auto;
	overflow-x:auto;
	overflow-y:visible;
	width:564px;
}

input.disabled
{
	background-color:#dddddd;
}

ul.fixedpad
{
	margin:5px 5px 0px 5px;
	padding-left:15px;
}

.FacebookProfilePhoto
{
	margin:2px 0px 2px 0px;
}

.ForumBreadcrumbs
{
	padding: 4px 8px;
}

.ForumModerators
{
	padding: 4px 8px !important;
}

.ForumThreadScore
{
	padding: 4px 8px;
}

.ForumAttached
{
	font-size:11px;
	padding: 8px 0px 0px 0px;
	font-style:italic;
	font-weight:bold;	
}

.ForumBody
{
	padding:10px 0px 20px 0px;
}
.ForumQuote
{
	border: 1px solid #666;
	padding: 5px 5px 5px 5px;
	margin-top: 5px;
	background-color: rgba(0, 0, 0, 0.05);
}

.ForumSignature
{
	border-top: 1px solid #999;
}

.ForumSubject
{
	font-size:11px;
	padding:0px 0px 10px 0px;
	
}

.forumPost
{
	width: 100%;
	margin-bottom: 4px;
}

.forumPostHeader
{
	width: 99%;
	background-color: #336699;
	padding: 6px 4px;
	color: white;
}

.forumPosterData
{
	width: 104px;
	vertical-align: top;
	padding: 0 !important;
}

.forumPosterHeadshot
{
	width: 100px;
}

.forumPosterHeadshotImg
{
	width: 100px;
}

.forumPosterInfo
{
	padding: 8px;
}

.forumPosterName
{
	font-size: 10pt;
	font-weight: bold;
}

.forumPosterRole
{
	font-size: 9pt;
	font-weight: bold;
	font-style: italic;
}

.forumPosterPostCount
{
	font-size: 8pt;
}

.forumPostData
{
	display: inline-block;
	width: 82%;
}

.forumPostSubject
{
	width: 100%;
	height: 18px;
	font-weight: bold;
	color: #336699 !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	padding-left: 12px !important;
}

.postAction
{
	float: right;
	height: 16px;
	margin-left: 4px;
}
	.postAction img
	{
		vertical-align: top;
	}

.forumPostBody
{
	min-height: 120px;
	padding: 4px 0 4px 10px !important;
	vertical-align: top;
}
	.forumPostBody iframe
	{
		max-width: 548px;
	}

.forumPostDateLastEdited
{
	float: right;
}

.ForumPrevNextThreads
{
	margin-top: 8px;
	margin-bottom: 8px;
}

.forumQuickReply
{
	margin-top: 12px;
	padding: 4px 0 8px 0;
}


.greenalert
{
	color:Green;
}

.HitHighlight
{
	background-color:Yellow;
	color:Black;
}

.lineitem td
{
	border-bottom:dashed 1px #ccc;
	padding:8px 0px 8px 0px;
}

.RTE_ResMgrLink
{
	background:#D0D4DD;
	padding:4px;
	text-align:right;
}

.ScrollBox
{
	overflow:auto;
}

.securesubmit
{
	height:17px;
	width:16px;
	vertical-align:text-top;
}

.invoice {
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
}
.invoice th {
	background-color: #cccccc;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	font-weight: normal;
	font-family: Arial;
	font-size: 12px;
	text-align: center;
	color: #000000;
	padding: 5px;
}
.invoice td {
	border-left: 1px #000000 solid;
	padding: 5px;
}
.invoice td.lined {
	border-top: 1px #000000 solid;
	padding: 5px;
}

.EventRegistrationPrint {
	border-right: 1px #000000 solid;
	border-bottom: 0px #000000 solid;
}
.EventRegistrationPrint th {
	padding: 4px 0px 4px 8px;
	background-color: #ffffff;
	border-top: none;
	border-left: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	font-weight: bold;
	font-family: Arial;
	font-size: 12px;
	text-align: left;
	color: #000000;
}

.EventRegistrationPrint th.head {
	background-color: #cccccc;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	font-weight: bold;
	font-family: Arial;
	font-size: 12px;
	text-align: left;
	color: #000000;
}

.EventRegistrationPrint td {
	padding: 4px 0px 4px 8px;
	background-color: #ffffff;
	border-top: 0px #000000 solid;
	border-left: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	font-family: Arial;
	font-size: 12px;
	text-align: left;
	color: #000000;
}
/* 3: END */

/* 4. COMMON DOCUMENT OBJECTS */
#ContextualHelp .bd {
	background-color: #ffffff;
}

#FormErrors ul
{
	margin:5px;
	padding-left:15px;
}


#SearchDialogBody
{
	white-space:nowrap;
}

#SearchDialogForm_bst
{
	height:21px;
	width:190px;
}

#SearchDialogForm_btnSubmit
{
	height:21px;
	margin-left:5px;
	width:60px;
}

#SpNavBarSub div.bd
{
	padding-left:0px;
	padding-right:0px;
}
#SpNavBarSub div.bd a,
#SpNavBarSub div.bd a:hover,
#SpNavBarSub div.bd label
{
	background-color:transparent;
	background-image:none;
	clear:both;
	color:#545465;
	display:block;
	line-height:22px;
	padding:0px 10px 0px 10px;
	text-decoration:none;
}
#SpNavBarSub div.bd a {}
#SpNavBarSub div.bd a:hover
{
	background-color:#797986;
	color:White;
}
#SpNavBarSub div.bd a img
{
	margin:2px 5px 2px 0px;
}
#SpNavBarSub div.bd #MoreMenuCustomPages
{
	border-top:1px dashed #797986;
	margin-top:10px;
	padding-top:8px;
}
#SpNavBarSub div.bd #MoreMenuCustomPages a
{
	overflow:hidden;
	padding-bottom:1px;
	padding-top:2px;
	white-space:nowrap;
}

#TopAlertBar
{
	height: 21px;
	background:#666;
	border-top:solid 1px #525252;
	width:100%;
	position:fixed;
    bottom:0;
    left: 0;
    z-index: 10000;
}

#TopAlertBar a
{
	color:#fff;
	text-decoration:none;
}
#TopAlertBar a:hover
{
	text-decoration:underline;
}

#TopAlertBarText
{
	color:#fff;
	height:20px;
	font-size:11px;
	line-height:20px;
	text-align:center;
	overflow:hidden;
	padding:0px 6px 0px 6px;
}

/* Profile progress bar */
#profileProgressBar
{
	background-image: none;
    border: medium none;
    border-radius: 5px 5px 5px 5px;
    height: 22px;
    width: 160px;
    z-index: 4;
    padding-right: 10px;
    padding-left: 10px;
}

#datagrid1 .ui-progressbar 
{
	width: 160px;
	-webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	background-size: 30px 30px;			
	background-image: -webkit-gradient(linear, left top, right bottom,
						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
						to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent); 
	background-color:#ddd;
	border:1px solid #bfbfbf!important;
	height: 22px!important;
	padding: 3px;		
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	-moz-box-shadow:    inset 0 0 5px #999;
   -webkit-box-shadow: inset 0 0 5px #999;
   box-shadow:         inset 0 0 5px #999;         
}

#datagrid1 .ui-progressbar div 
{
	display: inline-block;
	border:1px solid #54b61a;
	height: 20px!important;	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
    -o-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;     
}

/*end profile view styles*/


#ProgressToolBar 
{
    background: url("/global/global_graphics/TopToolBar_bg.gif") repeat-x scroll center bottom #F2F5F9;
    border: 1px solid #c2c2c2;
	border-top:none;
    height: 45px;
    left: 0;
    position: fixed;
    top: 0;
    width: auto;
	border-radius: 0 0 15px 15px;
	background-clip:content-box;
}

#progressBar 
{
    border: medium none;
    border-radius: 5px 5px 5px 5px;
	float: left;
    height: 32px;
    margin-top: 2px;
    width: 300px;
    z-index: 4;
}
	
.ui-progressbar-value 
{
    border-right: medium none;
    margin: 0px;
}

#ProgressBarText 
{
	/*background: url("/global_graphics/bg-currentlvl.png") no-repeat scroll right center transparent;*/
    color: Black;
    display: inline-block;
    float: left;
    font-size: 11px;
    font-weight:bold;
	margin-left:10px; 
    margin-top: 15px!important;
    min-width: 30px;
	padding-right:12px; 
    text-transform: uppercase;
	width:auto; 
}
	
#NextProgressBarText 
{
	/*background: url("/global_graphics/bg-nextlvl.png") no-repeat scroll left center transparent;*/
    color: Black;
    display: inline-block;
    float: left;
    font-size: 11px;
    margin-top: 15px!important;
    margin-right: 10px;
    font-weight:bold;
    min-width: 50px;
	padding-left:12px; 
    text-transform: uppercase;
	width:auto; 
	}

.ui-progressbar 
{
-webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	background-size: 30px 30px;			
	background-image: -webkit-gradient(linear, left top, right bottom,
						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
						to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent); 
	background-color:#ddd;
	border:1px solid #bfbfbf!important;
	height: 32px;
	padding: 3px;
	width: 350px;
	/*margin: 50px 0;			*/
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	-moz-box-shadow:    inset 0 0 5px #999;
   -webkit-box-shadow: inset 0 0 5px #999;
   box-shadow:         inset 0 0 5px #999;     
}

.ui-progressbar div 
{
	display: inline-block;
	border:1px solid #54b61a;
	height: 30px!important;	
	float: left;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
    -o-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;    
}

.ui-progressbar.ui-widget div 
{
	background-color: #a5df41;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
	background-image: -webkit-linear-gradient(top, #a5df41, #8ec72c);
	background-image: -moz-linear-gradient(top, #a5df41, #8ec72c);
	background-image: -ms-linear-gradient(top, #a5df41, #8ec72c);
	background-image: -o-linear-gradient(top, #a5df41, #8ec72c);
	background-image: linear-gradient(top, #a5df41, #8ec72c);   

}

.ui-progressbar.ui-widget-content div 
{
	/*-webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	background-size: 30px 30px;			
	background-image: -webkit-gradient(linear, left top, right bottom,
						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
						to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);            
	
	-webkit-animation: animate-stripes 3s linear infinite;
	-moz-animation: animate-stripes 3s linear infinite;       		
	animation: animate-stripes 3s linear infinite;    */   		
}


@-webkit-keyframes animate-stripes { 
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

@-moz-keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}



#TopToolBar
{
	background:#E9E9E9 url('/global/global_graphics/TopToolBar_bg.gif') repeat-x;
	border-top:1px solid #D7DCE1;
	width:100%;
	height: 25px;
	position:fixed;
    bottom:0;
	left:0;
}


#TopToolBar a
{
	border-right:1px solid #cdd1d6;
	color:Black;
	padding:6px 6px 7px 6px;
	text-decoration:none;
	white-space:nowrap;
}
#TopToolBar a:hover
{
	background-color:#F2F6F9;
	color:Black;
}

#TopToolBar label
{
	padding:6px 8px 7px 0px;
	border-right:1px solid #cdd1d6;
}

#TopToolBarText
{
	color:#6b849d;
	height:24px;
	font-size:11px;
	line-height:23px;
	overflow:hidden;
	padding:0px 6px 0px 6px;
	text-align:left;

}
/* 4: END */

/* 5. PAGE-SPECIFIC DOCUMENT OBJECTS */
#CustomPageBody
{
	overflow:auto;
	overflow-x:auto;
	overflow-y:visible;
}

#MediaGallery
{
	width:100%;
}

#MediaGallery td
{
	border:solid 2px #eeeeee;
	background-color:#eeeeee;
	height:100px;
	text-align:left;
	vertical-align:top;
	width:33%;
}
#MediaGallery td.placeholder
{
	background-color:Transparent;
	border:none;
}
#MediaGallery td.selected
{
	border-color:Red;
}

#MediaGallery td a.slideshow
{
	display:block;
	float:right;
}

#MediaGallery td div.photo
{
	margin:8px;
}

#MediaGallery td div.selectPhoto
{
	float:right;
}

#PageBase_RaiseAlert
{
	text-align:left;
}

#PhotoCaption
{
	font-style:italic;
	text-align:left;
}

#PhotoMain
{
	overflow:hidden;
	width:552px;
}

#PhotoMatte
{
	background:#eeeeee;
	padding:10px;
}

#PhotoNav
{
	background:#eeeeee;
	padding:5px 0px 5px 0px;
	width:110px;
}
#PhotoNav div
{
	margin:0px 5px 0px 5px;
}
#PhotoNav #PhotoNext
{
	line-height:18px;
	margin-top:5px;
	text-align:right;
}
#PhotoNav #PhotoPrev
{
	line-height:18px;
	margin-bottom:5px;
	text-align:left;
}
#PhotoNav .NoPhoto
{
	border:solid 1px #cccccc;
	color:#aaaaaa;
	padding:18px 0px 17px 0px;
	text-align:center;
}

.AVD_StatusBox {
    text-align: center;
    font-size: 10px;
}

/*.AVD_StatusText {
    font-size: 12px;
    font-weight: bold;
    padding: 4px 4px 4px 4px;
}*/

.AVD_StatusText A {
    font-size: 10px;
    text-decoration: underline;
}

.AVD_StatusImage {
    
}

#TweetWrapper
{
    width: 134px;
    height: 125px;
    overflow: hidden;
    padding: 5px 5px 5px 5px;
}

#TweetWrapper #TweetText
{
    line-height: normal;
}

#TweetWrapper #TweetDate
{
    text-align: right;
}
/* 5: END */

/* Group homepage */
.groupInfobox
{
	margin-top:8px;
	margin-bottom:5px;
}
.groupTableHeadCell
{
}
.groupTableZone1
{
	padding-right:6px;
}
.groupTableZone2
{
	padding-left:6px;
	border-left:dotted 1px #CCC;
}
.groupTableSeperatorLine
{
}
.photoGallery td
{
	vertical-align:middle;
	text-align: left;
}
.photoGalleryCentered td
{
	text-align:center;
	vertical-align:bottom;
}
.photoGalleryImage
{
	padding:3px 3px 8px 3px;
	/*border:solid 2px #DEDEDE;*/
	max-width:100px;
	width: auto !important;
	width:100px;
}
.WallPost{
	padding:5px 0px 5px 0px;
	border-bottom:1px dashed #ccc;
}
#GroupHompageLayout .zone
{
    min-height:300px; /*ff*/
    height: auto !important; /*ie7 */
    height: 300px; /*ie6 */

}
#GroupHompageLayout .zonebox
{
    border:dotted 1px #666666;
    margin:0 0 10px 0;
    padding:5px;
    
    min-height:300px; /*ff*/
    height: auto !important; /*ie7 */
    height: 300px; /*ie6 */
}

#GroupHompageLayout .headzone
{
    max-width:100%;
    width: auto !important;
    width:100%;
    
    min-height:100px; /*ff*/
    height: auto !important; /*ie7 */
    height: 100px; /*ie6 */
}
#tdZone1 .zonebox
{
    margin-right: 5px;
}
#tdZone2 .zonebox
{
    margin-left: 5px;
}

#GroupHompageLayout .ctrl
{
    border:solid 3px #666666;
    margin:5px;
    padding:5px;
    max-width:100%;
    cursor:move;
    background-color:#FFFFFF;
}
#GroupHompageLayout .placeholder 
{
    height:100px;
    width:100%;
    background: #f0f0f0;
    border:1px dashed #ddd;
    visibility: visible !important; 
}

#GroupAdminBarSub div.bd
{
	padding-left:0px;
	padding-right:0px;
}
#GroupAdminBarSub div.bd a,
#GroupAdminBarSub div.bd a:hover,
#GroupAdminBarSub div.bd label
{
	background-color:transparent;
	background-image:none;
	clear:both;
	color:#545465;
	display:block;
	line-height:22px;
	padding:0px 10px 0px 10px;
	text-decoration:none;
}
#GroupAdminBarSub div.bd a {}
#GroupAdminBarSub div.bd a:hover
{
	background-color:#797986;
	color:White;
}
#GroupAdminBarSub div.bd a img
{
	margin:2px 5px 2px 0px;
}


.GroupWidget
{
    margin:8px 0 0 0;
    border-bottom:dotted 1px #CCC;
}
.PhotoWidgetControls
{
    margin:8px 0 0 0;
    border-top:dotted 1px #CCC;
    text-align:right;   
}

.ContentTopDivider
{
	border-top:dotted 1px #CCC;
}


.slide-panel h1 {
	font-family: 'Rock Salt', arial, serif;
	color: #00384f;
	font-size:34px;
	line-height: 59px;
	margin:25px 0px 0px 30px;
	text-shadow: #fff 0 0 1px;
	font-style:normal;
	font-weight:normal;
}

.slide-panel h1.space {
	margin:50px 0px 0px 30px;
}

.slide-panel h1 span {
	color:#ce6e19;
}

.slide-panel h1 span.small {
	color: #00384f;
	font-size:16px;
	line-height:14px;
	}

.slide-panel p {
		width: 475px;
		margin: 40px 0px 0px 30px;
		color:#00384f;
}

.slide-panel img {
	vertical-align:middle;
	text-align:center;
}

/* AddThis / ShareThis override */
#at15s_head {
  color: #4c4c4c;
}

/* YUI Tooltip override */
.yui-skin-sam .yui-tt .bd {
	background-color: #ffffff !important;
	border: solid 1px #aaaaaa !important;
	font-size: 11px;
}

/*Non-YUI Tooltip*/
label.tooltip {outline:none; }
label.tooltip:hover {outline:none;} 

label.tooltip span {
    display:none;
	padding:10px;
	position:relative;
	text-align:left;
    width:270px;
	z-index:999;
}

label.tooltip:hover span{
    display:block; 
	position:absolute; 
    border:1px solid #808080; 
	background:#f2f2f2;}

label.tooltip span
{
    border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;   
    -moz-box-shadow: 5px 5px 8px #CCC;
    -webkit-box-shadow: 5px 5px 8px #CCC;
    box-shadow: 1px 1px 3px #CCC;
}

/* Custom Form Tooltips */
label.cform_tooltip
{
	outline: none;
}

	label.cform_tooltip:hover
	{
		outline: none;
	}

	label.cform_tooltip span
	{
		display: none;
		padding: 10px;
		position: relative;
		text-align: left;
		width: 270px;
		z-index: 999;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		-moz-box-shadow: 5px 5px 8px #CCC;
		-webkit-box-shadow: 5px 5px 8px #CCC;
		box-shadow: 1px 1px 3px #CCC;
	}

	label.cform_tooltip:hover span
	{
		display: block;
		position: absolute;
		border: 1px solid #808080;
		background: #f2f2f2;
	}

/* Vertical Gauge chart */
.VGaugeCont1 {	
	border: 2px solid #EBEBEB;
	padding: 5px 8px 3px 8px;
}

.VGaugeContOver {
	
}

.VGaugeCont {
    background-image: url("/global/global_graphics/vg_bg03.png");
    font-family: Arial;
    font-size: 10px;
    width: 180px;
}
.VGaugeCont td {
	height: 235px;
}
.VGaugeBar {
    background: url("/global/global_graphics/vg_bar.png") repeat scroll 0 0 transparent;
    color: #FFFFFF;
    display: block;
    height: 225px;
    text-align: center;
    width: 50px;
    font-size: 10px;
}
.VGaugeBarCont {
	overflow: hidden;
	height: 225px;
}
.VGaugeRcvd {
    background: url("/global/global_graphics/vg_arrow.png") no-repeat scroll center top transparent;
    color: #FFFFFF;
    display: block;
    height: 235px;
    text-align: center;
    width: 65px;
    font-size: 10px;
}
.VGaugeGoal {
    background: url("/global/global_graphics/vg_arrow02.png") no-repeat scroll center top transparent;
    color: #FFFFFF;
    display: block;
    height: 235px;
    padding-left: 0px;
    text-align: center;
    width: 65px;
    font-size: 10px;
}

#RadiusSearchContainer
{
	border: solid 1px #CCCCCC;
	padding: 10px;
}

#RadiusSearchHeader
{
	margin-bottom: 0px;
}

.RadiusSearchAddress
{
	padding-left:15px !important;
}

#RadiusSearchAddressPicker
{
	border-color: #CCCCCC;
	border-width: 1px 0px 1px 0px;
	border-style:solid;
}

/* Month View Calendar Styles */
#EventCalendarLegend
{
	margin:4px;padding:8px;
	border:solid 1px #999999;
	width:750px;
	text-align:left;
	line-height: 180%;
}

#EventCalendarLegend span.colorbox
{
	border:solid 1px #BBBBBB;
}

#EventCalendarLegend span.category
{
	margin-right:6px;
	padding:2px;
	display:inline-block;
}

#EventCalendarLegend span.selected
{
	border: solid 1px #999999;
}

/* Custom Field 'Response' styles */
/* Custom Field 'Response' styles */
.CstmFldRow td {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.CstmFldLbl {
	color:#555555;
}
.CstmFldVal { }


/* Recent Activity Widget */
#RecentActivityWidget
{
}

#RecentActivityWidget #RecentActivityWidgetHead
{
	font-size:120%;
	font-weight:bold;
}

#RecentActivityWidget .RecentActivityHead
{
	font-weight:bold;
	margin-top:8px;
}

#RecentActivityWidget .RecentActivityContent
{
	
}
/* END Recent Activity Widget */


/* 
	-- Drop Menu Styles  --
	Implimented in /global_inc/js/DropMenu.js
*/

.dropmenu {
    display: inline;
}
.dropmenu .dropmenu_button {
    cursor: pointer;
    width: auto;
    display: inline-block;
    padding-left: 7px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 22px;
    font-weight: bold;
    color: #717780;
    line-height: 16px;
    text-decoration: none !important;
    background: white url("/global/global_graphics/dropmenu_arrow.png") no-repeat 100% -1px;
    vertical-align:bottom;
}
.dropmenu .dropmenu_button:hover {
    color: #4C6899;
    background: #BFD4FF url("/global/global_graphics/dropmenu_arrow.png") no-repeat 100% -1px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 2px;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    border-radius: 2px 2px 2px 2px;
}            
.dropmenu.open .dropmenu_button {
    border: 1px solid #3B5998;
    color: white;
    background: #6D84B4 url("/global/global_graphics/dropmenu_arrow.png") no-repeat 100% -27px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 2px 2px 0px 0px;
    border-radius: 2px 2px 0px 0px;
    border-bottom-color: #6D84B4;
}
.dropmenu .dropmenu_button img {
    height: 14px;
    margin-top: 1px;
    margin-bottom: 1px;
    float: left;
    margin-right: 5px;
}
.dropmenu .dropmenu_content {
    display: none;
    position: absolute;
    border: 1px solid #777;
    padding: 0px;
    background: white;
    
}
.dropmenu.open .dropmenu_content {
    display: block;
}
.dropmenu .dropmenu_content li {
    list-style: none;
    margin-left: 0px;
    line-height: 16px;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    margin-top: 0px;
    margin-bottom: 0px;
}
.dropmenu .dropmenu_content li:hover {
    border-top-color: #3B5998;
    border-bottom-color: #3B5998;
    background: #6D84B4;
}
.dropmenu .dropmenu_content li a {
    display: block;
    padding: 2px 7px;
    padding-right: 15px;
    color: black;
    text-decoration: none !important;
}
.dropmenu .dropmenu_content li:hover a {
    color: white;
    text-decoration: none !important;
}
.dropmenu .dropmenu_content li img {
    height: 14px;
    margin-top: 1px;
    margin-bottom: 1px;
    float: left;
    margin-right: 5px;
    border: none;
}
/* End Drop Menu */

/* 
	-- jQuery UI Accordion Styles  --
*/
/* For an h3-header'd accordion */
#accordion h3 {
	height: 26px !important;
}

/* text of the header */
#accordion h3 .header {
	font-size: 14px;
	line-height: 24px;
	padding-left: 18px;
	margin-left: 5px
}

/*target the first div in <div id="accordion"> after a <h3> (i.e. our accorion container but no other divs) */
.ui-accordion .ui-accordion-content, #accordion > div {
	height:100%;
	border-color: #e3e0d4;
	/*width:100%;*/
	padding: 0px 0px 5px 0px;
}

/* For a div-header'd accordion */
#accordionDivHeaded div.header {
	height: 26px !important;
	font-size: 14px;
	line-height: 24px;
	padding-left: 26px;
}

/*target the second div in <div id="accordion"> (i.e. our accorion container but no other divs) */
#accordionDivHeaded:nth-child(2) {
	height:100%;
	border-color: #e3e0d4;
	/*width:100%;*/
	padding: 0px 0px 5px 0px;
}

/* Common to both header types */
.ui-widget-header {
	display:none;
}

.ui-dialog .ui-dialog-content {
	height: 100% !important;
}



#full-slider-wrapper {
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
#full-slider {
    display: block;
    height: 100%;
    left: 0;
    margin: 0 auto;
    position: relative;
    top: 0;
    width: 100%;
}
#full-slider-nav-left {
    float: left;
    position: relative;
	left: 15px;
	bottom:0;
    z-index: 4 !important;
    cursor: pointer;
	 /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

  /* IE 5-7 */
  filter: alpha(opacity=60);

  /* Netscape */
  -moz-opacity: 0.6;

  /* Safari 1.x */
  -khtml-opacity: 0.6;

  /* Good browsers */
  opacity: 0.6;
}
	
#full-slider-nav-right {
    float: right;
    position: relative;
	bottom:0;
    right: 15px;
    z-index: 4 !important;
    cursor: pointer;
		 /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

  /* IE 5-7 */
  filter: alpha(opacity=60);

  /* Netscape */
  -moz-opacity: 0.6;

  /* Safari 1.x */
  -khtml-opacity: 0.6;

  /* Good browsers */
  opacity: 0.6;
}
#full-slider-nav-left:hover, #full-slider-nav-right:hover {
		 /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  /* IE 5-7 */
  filter: alpha(opacity=100);

  /* Netscape */
  -moz-opacity: 1;

  /* Safari 1.x */
  -khtml-opacity: 1;

  /* Good browsers */
  opacity: 1;
  }
.full-slider-nav {
     height: 50px;
    position: relative;
    right: 0;
    top: 45%;
}

#full-slider .slide-panel {
    position: absolute;
    visibility: hidden;
    vertical-align:middle;
}

#full-slider .slide-panel.active {
    visibility: visible;
}

#full-slider .slide-panel.notactive {
    left: -1000px;
}



#full-slider .slide-panel {
    color: #00384f;
	font-family: 'Droid Sans', arial, serif;
	font-size: 12px;
}

/* End jQuery UI Accordion */

/* Custom Form Paging */

.CustomFormPageHeader
{
	font-size: large;
	font-weight: bold;
	margin-top: 10px;
}

#CustomFormPager div,
#CustomFormPagerLegend div
{
	width: 16px;
	height: 16px;
	line-height: 16px;
	padding: 3px;
	border: solid 1px #333;
	margin: 3px 3px 3px 3px;
	display: -moz-inline-stack;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	*display: inline;
}

#CustomFormPager .valid,
#CustomFormPagerLegend .valid
{
	background-color: #8AEB8A;
}

#CustomFormPager .invalid,
#CustomFormPagerLegend .invalid
{
	background-color: #FB5252;
}

#CustomFormPager .invalid a,
#CustomFormPagerLegend .invalid a
{
	color: #FFF;
}

#CustomFormPager .current,
#CustomFormPagerLegend .current
{
	background-color: #000;
}

#CustomFormPager .current a,
#CustomFormPagerLegend .current a
{
	color: #FFF;
}

/* End Custom Form Paging */

/*Captcha Box elements*/

.CaptchaQuestion
{
    display: block;
}

.CaptchaAnswer
{
    width:25px !important;
}

/*This class is used by the row that displays the available quantity in the View Order page
In order for a client to hide this value, just add "display: none;"  */
.QuantityAvailable
{
    
}

/* Idea Box */

.ideatitle
{
	font-size: 130%;
	font-weight: bold;
}

.ideastatus
{
	font-size: 130%;
	font-weight: bold;
	color: Gray;
}

.ideavote
{
	font-size: 130%;
	font-weight: bold;
}

.votebutton
{
	height:22px; 
	line-height:20px; 
	background: #fefefe url('/global/global_graphics/bg-votebtn.png') repeat-x bottom;
	border:1px solid #a0a0a0;
	padding: 3px 5px 3px 5px;
	border-radius: 5px;
}
.votebutton:hover
{
	background-color: #EEE;
}
.votebutton img
{
	margin: 0px 5px -3px 0;
	border: none;
}

.ideadates
{
	font-size: smaller;
}

/* End Idea Box */

/* Slide-show fix for IE8 */
#FeatureSlides {
    text-align: left !important;
}
/* Slide-show fix */


/* ---------------------------------------------------
	Store
/* --------------------------------------------------- */
/* GRID VIEW */
.productTileGrid
{
	width: 264px;
	height: 264px;
	background-color: #EBEBEB;
	border: solid 1px #CCC;
	margin: 10px;
	overflow: hidden;
	position: relative;
}
.productTileGrid:hover
{
	border-color: #EBEBEB;
}
.productTileGrid img
{
	width: 264px;
	overflow: hidden;
	text-align: center;
}

.productTileGridData
{
	width: 264px;
	height: 85px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	padding: 0 10px 0 10px;
	text-align: left;
}
.productTileGridDataFade
{
	width: 264px;
	height: 85px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	background-color: #000;
	padding: 0 10px 0 10px;
	opacity: 0.5;
	
	/* IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	
	/* IE5-7 */
	filter:alpha(opacity=50);
}

.productNameGrid
{
	width: 232px;
	color: White;
	font-size: 16px;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	z-index: 3;
	border-bottom: solid 1px #333;
	padding: 8px 6px 1px 6px;
	text-shadow: 1px 1px 0 #000;
}
.productNameGrid a
{
	color: #EBEBEB;
}
.productNameGrid a:hover
{
	color: White;
}

.productDescGrid
{
	width: 232px;
	z-index: 3;
	border-top: solid 1px #EBEBEB;
	padding: 5px 6px 2px 6px;
}

.productPriceGrid
{
	width: 142px;
	color: White;
	font-size: 11px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #000;
	line-height: 14px;
}
.productPriceGrid img
{
	width: auto;
	border: none;
	vertical-align: top;
	position: relative;
	right: 0;
}
.priceStrikeOut
{
	color: #AAA;
	font-style: italic;
	text-decoration: line-through;
}

.percentCorner
{
	position: absolute;
	left: 0;
	top: 0;
	width: 0px;
	height: 0px;
	border-top: 55px solid red;
	border-right: 55px solid transparent;
	z-index: 4;
	opacity: 0.9;
	filter:alpha(opacity=90);
}
.percentText
{
	position: absolute;
	left: 0px;
	top: 8px;
	text-transform: uppercase;
	color: White;
	font-size: 12pt;
	font-weight: bold;
	z-index: 5;
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-sand-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* LIST VIEW */
#ProductListTable tr td
{
	padding:12px !important;
}
.productPriceList {
    font-size: 11px;
    font-weight: bold;
    vertical-align: top;
    width: 130px;
	white-space: nowrap;
}

.productTileList {
    border-top: 1px solid #AAAAAA;
    height: auto;
    padding: 20px;
}
.productTileListAlt {
    background-color: #EBEBEB;
    border-top: 1px solid #AAAAAA;
    height: auto;
    padding: 20px;
}

.productNameList {
    font-size: 14pt;
    font-weight: bold;
    white-space: normal;
}
.productDescList {
    font-size: 14px;
    height: auto;
}

.productImageList
{
	width: 100px;
	height: 100px;
	background-color: White;
	border: solid 1px #AAA;
	text-align: center;
}
.productImageList img
{
	width: 100px;
	height: 100px;
	text-align: center;
}

.productDataList
{
	vertical-align: top;
	padding: 10px 6px 0px 6px;
}


/* Paging */
.storePaging
{
	margin: 0px 0px 10px 0px;
}
.storePageNumbers 
{
	margin: 8px 4px 4px 4px;
	padding: 4px;
}
.storePageNumbers.current
{
	font-weight: bold;
	border: solid 1px #DDD;
}


    /* Store Hompage GRID VIEW */ 
.categoryTileGrid 
{ 
width: 264px; 
height: 264px; 
background-color: #EBEBEB; 
border: solid 1px #AAA; 
margin: 10px; 
overflow: hidden; 
position: relative; 
float:left;
} 
.categoryTileGrid:hover 
{ 
background-color: #F9F9F9; 
border-color: #EBEBEB;
} 
.categoryTileGrid img 
{ 
width: 264px; 
overflow: hidden; 
text-align: center; 
} 

.categoryTileGridData 
{ 
width: 264px; 
height: 75px; 
position: absolute; 
bottom: 0; 
z-index: 3; 
padding: 0 10px 0 10px; 
} 
.categoryTileGridDataFade 
{ 
width: 264px; 
height: 75px; 
position: absolute; 
bottom: 0; 
z-index: 2; 
background-color: #000; 
opacity: 0.5; 
filter:alpha(opacity=50); 
padding: 0 10px 0 10px; 
} 

.categoryNameGrid 
{ 
width: 232px; 
color: White; 
font-size: 16px; 
font-weight: bold; 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
z-index: 3; 
padding: 8px 6px 1px 6px; 
} 
.categoryNameGrid a 
{ 
color: #EBEBEB; 
} 
.categoryNameGrid a:hover 
{ 
color: White; 
} 

.categoryDescGrid 
{ 
width: 232px; 
z-index: 3; 
padding: 5px 6px 2px 6px; 
} 

.categoryPriceGrid 
{ 
width: 230px;
height: 32px;
color: White; 
font-size: 12px; 
font-weight: bold; 
} 

	
/* Store Hompage List View */
.storeCategoryElement {clear:both; background-color: #EEE; padding:8px; margin-bottom: 8px; min-height: 125px; }
.storeCategoryElement h3 { margin-top: 8px; font-size: 16px; }
.storeCategoryElement span { float:left;height:115px; overflow:hidden; margin:8px 8px 8px 16px; display:block; }
.storeCategoryElement span img { width:115px; border:solid 1px #DDD; }
.storeCategoryElement .itembox {  }
.storeCategoryElement .itembox ul { height:85px; list-style: none; padding: 10px 0 0 0; margin: 0;  }
.storeCategoryElement .itembox ul li { float: left; display:inline; margin: 0 0px 0 10px; padding: 1px; text-align:center; width:75px; }

.productthumb { border:solid 2px #DDD; margin: 0 auto 0 auto; width: 75px; height: 75px; overflow:hidden; }
.productthumb img { width: 75px; }

/* Store Search Nav Callout */
.store-callout
{
	background: #f1f1f1;
	border:1px solid #ccc!important;
}
.store-callout input, 
.store-callout select
{
	height:26px;
	line-height:24px;
	border:1px solid #ccc;
	padding-top: 0;
	padding-bottom:0;
    padding-left: 2px;
    padding-right: 2px;
}
.store-callout select
{
	padding:3px;
}
	
.store-callout .formbutton, 
.productDescGrid .formbutton,
.productPriceList .formbutton
{
	display:block;
	height:24px;
	line-height:24px;
	cursor:pointer;
	padding: 0 7px;
	border-radius:4px;
	background: #000 url('/global/global_graphics/store-button.jpg') repeat-x top;
	border:1px solid #000;
	color:#fff;
	text-shadow:1px 1px #000;
	text-align: center;
	font-size: 11px;
}

.store-callout .formbutton:hover, 
.productDescGrid .formbutton:hover,
.productPriceList .formbutton:hover
{
	background: #333;
	text-decoration:none;
	font-size: 11px;
}
/* ---------------------------------------------------
	END Store
/* --------------------------------------------------- */


/*Address Validation PopUp Selector Styles*/
/*#AVD_InvalidAddress {
    background-color: #EEEEEE;
    border: solid 1px #DDDDDD;
    padding: 4px;
}

.ADV_Sug_Radio {
    border:solid 1px #DDD;
}

.ADV_Sug_Radio:hover {
    border:solid 1px #AAA;
    background-color: #cccccc;
}

.ADV_Sug_Radio input {
    display: none;
}

#AVD_ButtonRow td {
    text-align:right;
    padding: 20px;
    margin: 10px;
}

.ADV_Sug_Radio_Selected {
    background-color:#FFFFFF;
}*/

/* Fixes layering issues in the right rail of the FX templates */
#right .zone { clear:both; }

#sub-snapshots .zone-content-surveys,
#sub-snapshots .zone-content-news,
#sub-snapshots .zone-content-featured,
#sub-snapshots .zone-content-calendar {
    width:23%;
    margin-left:1.5%;
    float:left;
}

/* Handle notification bubbles on Member Profile page */
.noti_bubble {
        font-family:sans-serif;
	font-size:14px;
	font-weight:bold;
	position:absolute; 
	display:block; 
	height: 20px;
    line-height: 20px;
    padding: 2px 8px;
	border:none;
	width:auto; 
	top:22px;
	left: -3px;
	text-align:center;  
	color:#fff;
	border-radius: 20px;
	background: #43c6f7;
	/* BEGIN ANIMATION */
	-webkit-animation: trans-notification .5s infinite linear;
	-moz-animation: trans-notification .5s infinite linear;
	-o-animation: trans-notification .5s infinite linear;
	-ms-animation: trans-notification .5s infinite linear;
	animation: trans-notification .5s infinite linear;
	/* BEGIN EASING */
	-webkit-transition: all .25s ease-out 0.1s;
	-moz-transition: all .25s ease-out 0.1s;
	-o-transition: all .25s ease-out 0.1s;
	-ms-transition: all .25s ease-out 0.1s;
	transition: all .25s ease-out 0.1s;
}


.noti_bubble_store {
    font-family:sans-serif;
	font-size:12px;
	font-weight:bold;
	position:absolute; 
	display:block; 
	height: 18px;
    line-height: 18px;
    padding: 2px 8px;
	border:none;
	width:auto; 
	top:-5px;
	left: -15px;
	text-align:center;  
	color:#fff;
	border-radius: 18px;
	background: #FF9933;
	/* BEGIN ANIMATION */
	-webkit-animation: trans-notification-store .5s infinite linear;
	-moz-animation: trans-notification-store .5s infinite linear;
	-o-animation: trans-notification-store .5s infinite linear;
	-ms-animation: trans-notification-store .5s infinite linear;
	animation: trans-notification-store .5s infinite linear;
	/* BEGIN EASING */
	-webkit-transition: all .25s ease-out 0.1s;
	-moz-transition: all .25s ease-out 0.1s;
	-o-transition: all .25s ease-out 0.1s;
	-ms-transition: all .25s ease-out 0.1s;
	transition: all .25s ease-out 0.1s;
}


@keyframes trans-notification {
	0%       {}
	50%		{background:#18a2d6;}
	100%     {}
}

@keyframes trans-notification-store {
	0%       {}
	50%		{background:#F6AC62;}
	100%     {}
}

/* Innova editor workaround */
.isdd_over h1,
.isdd_over h2,
.isdd_over h3,
.isdd_over h4,
.isdd_over h5,
.isdd_over h6,
.isdd_over p,
.isdd_over pre,
.isdd_over div
{
    color: white !important
}

/*Styles for category based search results grids*/
#SearchResultsGridView,
#SearchResultsGridView tr td
{
	border: none;
	border-collapse:collapse;
	width: 100%;
}

.categoryRow
{
	padding: 5px;
}

.category-header a
{
	float: right;
	color: #286287;
	text-decoration: none;
	font-weight: normal;
	font: 14px Arial bold;
	text-transform: none;
	text-shadow: none;	
}

.CategoryResult
{
	border-bottom:dashed 1px #ccc;
	padding: 5px;
}

/* Styles for new Product Details page (all divs)*/
#dvItemOptions
{
	float: right;
	line-height: 27px;
	width: 275px;
}

.dvPriceLabel
{
	/*float: left;*/
	font-weight: bold;
	/*vertical-align: top;*/
	width: 85px;
	white-space: nowrap;
}

.ItemIndent
{
	float: left;
	margin-left: 42px;
	position: relative;
}

.ItemPriceNote {
	padding-left: 20px;
}

.dvPercentDown
{
	clear: both;
}

.dvStatusLabel, .dvQuantityLabel
{
	/*float: left;*/
	font-weight: bold;
	/*vertical-align: top;*/
	width: 85px;
}

.QuantityTextBox
{
	text-align:center;
}

.dvColorLabel, .dvSizeLabel, .dvCustomLabel
{
	/*float: none;
	clear: both;*/
	font-weight: bold;
	/*vertical-align: top;*/
}

#tdViewProduct
{
	/*float: left;*/
	width:350px;
}

#dvAdditionalImages
{
	background: none repeat scroll 0 0 #EEEEEE;
    padding: 5px 0;
    width: auto;
}

#dvAdditionalImages img
{
	padding:0;
	margin: 4px 0px 0px 2px;
	border: solid 2px #eee;
	opacity: 0.8;
}

#dvAdditionalImages img:hover
{
	opacity: 1;
	cursor: pointer;
}

#AddItemRow
{
	float:right;
	margin-top:8px;
	margin-bottom: 8px;
}


.module:after
{
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

/* float clearing for IE6 */
* html .module
{
	height: 1%;
	overflow: visible;
}

/* float clearing for IE7 */
* + html .module
{
	min-height: 1%;
}

/* Breadcrumb Styles
 ---------------------------------------------------------------------*/

.breadCrumb
{
	margin: 0 0 0 8px;
	
	float: left;
	display: block;
	height: 21px;
	padding:5px;
	/*border:solid 1px #dedede;*/
	background:#fff;
    text-align:left;
    padding-left:0px;
}
.breadCrumb ul
{
	margin: 0;
	padding: 0;
	height: 21px;
	display: block;
}
.breadCrumb ul li
{
	display: block;
	float: left;
	position: relative;
	height: 21px;
	
	line-height: 21px;	
}

.breadCrumb ul li span.bc-separator
{
	display: block;
	overflow: hidden;
    font-weight:bolder;
    height: 21px;
	line-height: 21px;
	
	float: left;
    padding-right:5px;
    padding-left:5px;
}
.breadCrumb ul li a
{
	display: block;
	position: relative;
	height: 21px;
	line-height: 21px;
	
	float: left;
}

	/*----- Shopping Cart -------*/
	#shopping-cart
	{
		float: right;
		margin: 0 10px;
		padding: 3px 10px;
		position: relative;
	}

		#shopping-cart.hover
		{
		}

		#shopping-cart .arrow
		{
			display: none;
		}

		#shopping-cart.hover .arrow
		{
			background: url('/global/global_graphics/icons/shoppingcartarrow.png') no-repeat 50% 0;
			content: '';
			display: block;
			height: 15px;
			left: 0;
			position: absolute;
			top: 100%;
			width: 100%;
			z-index: 999999;
		}

		#shopping-cart i
		{
			font-size: 16px;
		}

		#shopping-cart .counter
		{
		}

			#shopping-cart .counter b
			{
			}

	#shopping-cart-details
	{
		background: #fff;
		border: 1px solid #888;
		border-radius: 6px;
		box-shadow: 0px 1px 6px -1px rgba(0,0,0,0.3);
		display: none;
		left: 0;
		margin: 9px -185px;
		overflow: hidden;
		position: absolute;
		top: 100%;
		width: 300px;
		z-index: 9999;
		-moz-border-radius: 6px;
		-moz-box-shadow: 0px 1px 6px -1px rgba(0,0,0,0.3);
		-webkit-border-radius: 6px;
		-webkit-box-shadow: 0px 1px 6px -1px rgba(0,0,0,0.3);
		color: #333;
	}


		#shopping-cart-details .shopping-cart-list
		{
			margin-top: 10px;
			overflow: auto;
		}

		#shopping-cart-details .shopping-cart-list a
		{
			color: #666;
			line-height:12px;
		}
		#shopping-cart-details .shopping-cart-list a:hover
		{
			color: #999;
		}

		#shopping-cart-details .shopping-cart-item
		{
			border-bottom: 1px dashed #eee;
			clear: both;
			padding: 0 10px;
            height: 50px;
		}

		

			#shopping-cart-details .shopping-cart-item .image
			{
				float: left;
				padding: 0 10px 10px 0;
			}

				#shopping-cart-details .shopping-cart-item .image img
				{
					height: auto;
					max-height: 45px;
					max-width: 45px;
					width: auto;
				}

			#shopping-cart-details .shopping-cart-item .itemdescription
			{
				overflow: hidden;
                margin-bottom: 5px;
			}

				#shopping-cart-details .shopping-cart-item .itemdescription a
				{
                    margin: 0px;
                    padding-left: 0px;
				}

					#shopping-cart-details .shopping-cart-item .itemdescription a:hover
					{
                        color: #898989;
					}

			#shopping-cart-details .shopping-cart-item .quantity
			{
                margin-bottom: 5px;
			}

		#shopping-cart-details .cart-show-button
		{
			text-align: center;
			margin-bottom:5px;
            margin-top:0px;
		}

			#shopping-cart-details .cart-show-button input.formbutton
			{
				margin: 10px;
			}

	#shopping-cart .imgcart
	{
		margin: 7px 0px;
        vertical-align: bottom;
	}


table.tblCTACG, table.tblCTOther
{
	width: 800px;
}

table.tblCTACG td.tdGroupHeader
{
	color: #286287;
	font: 18px bold;
}

table.tblCTACG th, table.tblCTOther th
{
	color: #286287;
	font: 14px bold;
	text-align: left;
}

table.tblCTACG td.tdSubTotal
{
	color: #286287;
	font: 14px bold;
	text-align: right;
}

table.tblCTACG td.tdSubTotal span.CreditTypeName
{
	color: #333;
}


.validatorerror
{
    background-color: #CC0000;
}

.FavoriteControl
{
	float: right;
}

/*Social*/
.btn-connect.facebook {
    background-color: #3d5998;
    color: #fff;
    font-weight: normal!important;
    margin-bottom:10px;
}

.btn-connect.facebook:hover {
    background-color: #2a447e;
    color: #fff;
}

.btn-connect.linkedin {
    background-color: #007bb6;
    color: #fff;
    font-weight: normal!important;  
}

.btn-connect.linkedin:hover {
    background-color: #0070a6;
    color: #fff;
}

.btn-connect {
    -moz-user-select: none;
    background-image: none;
    border: medium none;
    border-radius: 4px;
    color: #3e76da;
    cursor: pointer;
    display: table;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    padding: 4px 10px 4px 5px;
    text-decoration: none !important;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.btn-secure {
    -moz-user-select: none;
    background-image: none;
    border: medium none;
    border-radius: 4px;
    color: #fff;
    background-color: #898989;
    cursor: pointer;
    display: table;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
    padding: 12px 10px 13px 5px;
    text-decoration: none !important;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}

#LoginForgot, #LoginRegister
{
    margin-bottom:10px;
}

.securelogin-icon{
    display: table-cell;
    text-align: center;
    width: 25px;
    height: 15px;
    line-height: 16px;
}

.facebook-icon, .linkedin-icon {
    display: table-cell;
    padding: 6px 10px 6px 6px;
    text-align: center;
    width: 24px;
}

.btn-connect img {
    height: 18px;
    vertical-align: middle;
}

.facebook-text, .linkedin-text, .securelogin-text {
    display: table-cell;
    font-family: Arial,Helvetica,Verdana,sans-serif;
    font-size: 14px;
    color: #fff !important; 
}

.or-option {
    display: block;
    text-align: center;
    width: 100%;
    margin: 10px 0;
}  

/* Back to engagement community CSS - sitewide */
.backToCommunity {
    padding-top: 42px;
}
#back_to_platform {
	background: #f1f1f1;
	position: absolute;
	top: 0;
	width: 100%;
	padding: 12px 15px;
	border-bottom: 2px solid #e5e5e5;
	box-sizing: border-box;
	height: 42px;
	line-height: 16px;
    text-align: left;
}
#back_to_platform .fa {
	margin-right: 5px;
	font-size: 15px;
}
#back_to_platform a {
	color: #777777;
	text-decoration: none;
	font-size: 13px;
	font-family: Arial;
}
#back_to_platform a:hover {
	color: #418bca;
	text-decoration: none;
}

.privacy-widget {
    position: fixed;
    bottom: 0;
    margin: 0;
    padding: 25px;
    z-index: 100000;
    width:100%;
    background: #f4f4f4;
    border-top: 4px solid #C7C7C7;
    color: #333;
    font-size: 14px;
}

/* Directory Styles */
:root {
    --directory-results-primary-color: 85, 85, 85; /*#555555*/
    --directory-results-secondary-color: 148, 136, 148; /*#948894*/
}


/* # 2 global_inc\dhtmlcalendar.css */

/*	Begin Calendar Popup Styles */

.Style1_cpContainer
	{
	position:absolute;
	visibility:hidden;
	background-color:#f5f5f5;
	layer-background-color:#f5f5f5;
	z-index:2;
	}
.Style1_cpYearNavigation,
.Style1_cpMonthNavigation
	{
	background-color:#DDDDDD;
	text-align:center;
	vertical-align:center;
	text-decoration:none;
	color:#444444;
	font-weight:normal;
	}
.Style1_cpDayColumnHeader,
.Style1_cpYearNavigation,
.Style1_cpMonthNavigation,
.Style1_cpCurrentMonthDate,
.Style1_cpCurrentMonthDateDisabled,
.Style1_cpOtherMonthDate,
.Style1_cpOtherMonthDateDisabled,
.Style1_cpCurrentDate,
.Style1_cpCurrentDateDisabled,
.Style1_cpTodayText,
.Style1_cpTodayTextDisabled,
.Style1_cpText
	{
	font-family:Tahoma,Verdana,Arial,Helvetica,sans-serif;
	font-size:8pt;
	}
TD.Style1_cpDayColumnHeader
	{
	text-align:right;
	border:solid thin #CCCCCC;
	border-width:0 0 1 0;
	}
.Style1_cpCurrentMonthDate,
.Style1_cpOtherMonthDate,
.Style1_cpCurrentDate
	{
	text-align:right;
	text-decoration:none;
	}
.Style1_cpCurrentMonthDateDisabled,
.Style1_cpOtherMonthDateDisabled,
.Style1_cpCurrentDateDisabled
	{
	color:#D0D0D0;
	text-align:right;
	text-decoration:line-through;
	}
.Style1_cpCurrentMonthDate A
.Style1_cpCurrentMonthDate A:active,
.Style1_cpCurrentMonthDate A:hover,
.Style1_cpCurrentMonthDate A:link,
.Style1_cpCurrentMonthDate A:visited
	{
	color:#000000;
	font-weight:normal;
	}
.Style1_cpCurrentDate
	{
	color:#000000;
	font-weight:bold;
	}
.Style1_cpOtherMonthDate A,
.Style1_cpOtherMonthDate A:active,
.Style1_cpOtherMonthDate A:hover,
.Style1_cpOtherMonthDate A:link,
.Style1_cpOtherMonthDate A:visited
	{
	color:#999999;
	}
TD.Style1_cpCurrentDate
	{
	background-color:White;
	border:solid 1px #444444;
	}
TD.Style1_cpCurrentDate A
TD.Style1_cpCurrentDate A:active,
TD.Style1_cpCurrentDate A:hover,
TD.Style1_cpCurrentDate A:link,
TD.Style1_cpCurrentDate A:visited
	{
		color:#000000;
	}
TD.Style1_cpCurrentDateDisabled
	{
	border-width:1;
	border:solid thin #FFAAAA;
	}
TD.Style1_cpTodayText,
TD.Style1_cpTodayTextDisabled
	{
	border:solid thin #CCCCCC;
	border-width:1 0 0 0;
	}
A.Style1_cpTodayText,
SPAN.Style1_cpTodayTextDisabled
	{
	height:20px;
	}
A.Style1_cpTodayText,
A:active.Style1_cpTodayText,
A:hover.Style1_cpTodayText,
A:link.Style1_cpTodayText,
A:visited.Style1_cpTodayText
	{
	color:#000000;
	font-weight:normal;
	text-decoration:underline;
	text-transform:uppercase;
	}
SPAN.Style1_cpTodayTextDisabled
	{
	color:#D0D0D0;
	}
.Style1_cpBorder
	{
	}
			
/*	End Calendar Popup Styles */


/* # 3 global_inc\site_templates\HTML_5\YM-FX-02-A\base.css */

@charset "utf-8";
/* CSS Document */

.container {
    padding-left:8px;
    padding-right: 8px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    padding-left: 8px;
    padding-right: 8px;
    position: relative;
}

.row {
    margin-right: -8px!important;
    margin-left: -8px!important;
}

#itoolbar_bg {
    background-color: #333;
    min-height: 35px;
    height: auto;
}

#itoolbar a {
    font-size: 12px;
    line-height: 33px;
    text-decoration: none;
}

#isearch {
    height: auto;
    min-height:35px;
}

#isearch .btn {
    padding: 3px 10px;
    font-size: 12px;
}

#isearch .input-group {
    margin-top: 4px;
}

#isearch .form-control {
    font-size: 11px;
    height: 25px;
    padding: 3px 8px;
}

#header {
    height:100px;
    background-color: #f1f1f1;
}

#mainmenu {
    background-color: #333;
    height: 50px;
    line-height: normal;
} 

#islideshow {
    background-color: #666666;
    height: 0;
    padding-bottom: 32%;
}

#hp-main .content {
    padding: 15px;
}

#LoginForm .small {
    background: #fff;
    border: medium none;
    border-radius: 0;
    color: #999;
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    margin: 0;
    padding: 0 15px;
    width: 100%;
}

.formbutton {
    background: #000 none repeat scroll 0 0;
    border: 1px solid #ccc;
    color: #fff;
    cursor: pointer;
    height: auto;
    line-height: 18px;
    padding: 5px 15px;
    text-align: center;
}

#hp-left {
    height:auto;
    min-height:180px;
}



#hp-main .zone {
    background-color: #f1f1f1;
    height:auto;
    min-height: 250px;
    padding: 0;
}

#right .zone {
    background-color: #f1f1f1;
    height:auto;
    padding: 0;
}

.irailhead {
    background-color: #000;
    color:#fff;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    text-align: left;
}

.irailcontent {
    padding: 15px;
    text-align: left;
}

.LatestNewsItemDate {
    display: block;
}

#bottomcontentarea {
    background-color: #d1d1d1;
    padding: 20px;
}

#FooterContentArea {
    background-color: #666;
	height:auto;
	min-height:35px;
}

#icopyright {
    background-color: #333;
    padding: 10px;
}

#copyright-inner {
    color: #fff;
    text-align: center;
}

#SpTitleBar {
    background: #ebebeb;
    font-size: 24px;
    height:auto;
    padding: 15px;
}

#SpContent {
    padding: 15px;
    width: 100%;
}

#SpContent_Container {
    padding: 15px;
}

.breadCrumb ul {
    list-style: none;
}

.breadCrumb ul li {
    display: inline-block;
    height: 21px;
    line-height: 21px;
    position: relative;
}

#right {
    padding-left: 15px;
}

.navbar-toggle {
    background-color: #999;
    background-image: none;
    border: medium none;
    border-radius: 4px;
    float: right;
    margin-bottom: 8px;
    margin-right: 15px;
    margin-top: 8px;
    padding: 9px 10px;
    position: relative;
}

.navbar-toggle .icon-bar {
    background-color: #fff;
}

.mtop-0 {margin-top: 0px;}
.mtop-5 {margin-top: 5px;}
.mtop-10 {margin-top: 10px;}
.mtop-15 {margin-top: 15px;}
.mtop-20 {margin-top: 20px;}
.mtop-25 {margin-top: 25px;}
.mbottom-0 {margin-bottom: 0px;}
.mbottom-5 {margin-bottom: 5px;}
.mbottom-10 {margin-bottom: 10px;}
.mbottom-15 {margin-bottom: 15px;}
.mbottom-20 {margin-bottom: 20px;}
.mbottom-25 {margin-bottom: 25px;}
.mbottom-30 {margin-bottom: 30px;}
.mright-5 {margin-right: 5px;}
.mright-10 {margin-right: 10px;}
.mright-15 {margin-right: 15px;}
.mright-20 {margin-right: 20px;}
.mright-25 {margin-right: 25px;}
.mleft-5 {margin-left: 5px;}
.mleft-10 {margin-left: 10px;}
.mleft-15 {margin-left: 15px;}
.mleft-20 {margin-left: 20px;}
.mleft-25 {margin-left: 25px;}
.ptop-15 {padding-top: 15px;}
.pleft-15 {padding-left: 15px;}
.pright-0 {padding-right: 0;}
.pleft-0 {padding-left: 0;}
@media (min-width:768px) {
	.container {
		width: 750px;
	}
}
@media (min-width:960px) {
	.container {
		width: 900px;
	}
}
@media (min-width:1200px) {
	.container {
		width: 1016px;
	}
}
@media (max-width: 1200px) {
	.calloutbox table.filtertable td {
		float: left;
		margin-bottom: 5px;
		width: 100%;
	}
	#ProductListTable tr td {
		display: block;
		padding: 12px !important;
		width: 100%;
	}
	#tblProduct td {
		display: block;
		width: 100%;
	}
	.CustomFormTable td {
		float: left;
		width: 100% !important;
	}
	.CustomFormTable th {
		float: left;
		width: 100%;
	}
	.CustomFormTable th label {
		width: 100% !important;
	}
	.CustomFormTable td input[type="text"], .CustomFormTable td select, .CustomFormTable td textarea {
		width: 100% !important;
	}
}

@media (max-width: 991px) {
    .MemberControlPanel {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .container {
		padding-left: 15px;
		padding-right: 15px;
    }
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
		min-height: 1px;
		padding-left: 15px;
		padding-right: 15px;
		position: relative;
	}
	.row {
		margin-right: -15px!important;
		margin-left: -15px!important;
	}
    .FormTable1 td {
        display: block;
        width: 100%;
    }
	.zone .yui-skin-sam {
		display: none;
	}
}

@media (max-width: 600px) {
	.calloutbox.store-callout table td {
		display: block;
		margin-bottom: 10px;
		width: 100%;
	}

	.calloutbox.store-callout td img {
		display: none;
	}
}

@media (max-width: 480px) {
    .FormTable1 td input[type="text"], .FormTable1 td select, .FormTable1 td textarea {
            width: 100%!important;
    }
    .FormTable1 td .calloutbox input[type="text"] {
        width: auto!important;
    }  
}

input[type="radio"], input[type="checkbox"] {
	line-height: normal;
	margin: 4px 4px 0 0;
}

/* 0. Begin Template Styles */
/*********************************************/

a img {border:none;}


/* Toolbar & search styling */

#itoolbar {
    color: #FFFFFF;
}
#itoolbar a {
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
}
#itoolbar a:hover {
    color: #999999;
}

#PrintPage img {
	display:none;
}

.navbar-collapse {
    background-color: #333;
    border-top: medium none !important;
    position: relative;
    z-index: 999999;
    max-height: 600px;
}
.navbar-nav .open .dropdown-menu > li > a {
    color: #428bca;
    line-height: 20px;
}
/* Begin main menu styling */

/* Begin Public Menu Style */
.RadMenu_YMPublic
{
	width: 100%;
	height: inherit;
	cursor: pointer;
}

.RadMenu_YMPublic .rootGroup .item
{
	width: 14%;
	text-align: center;
	cursor:pointer;
	display: inline-block;
}

.RadMenu_YMPublic .rootGroup .link
{
	color: #fff;
	padding:0;
	margin:0;
	line-height: 60px;
	height:60px;
	font-size: 100%;
	cursor:pointer;
	text-decoration: none;
}
.RadMenu_YMPublic .link:hover,
.RadMenu_YMPublic .focused,
.RadMenu_YMPublic .expanded
{
	background-color: #666 !important;
}
.radmenu a.link {
	cursor:pointer!important;
}
/*    Fly-out Menu */
.RadMenu_YMPublic .group
{
	width:auto;
	min-width:160px;
}
.RadMenu_YMPublic .group .item {
	min-width:184px;
	width:auto;
}
.RadMenu_YMPublic .group .link
{
    min-width: 160px;
	width:auto;
	text-align:left;
	padding:0 12px;
	line-height: 36px;
    color: #fff;
	background-color: Black;
}
.RadMenu_YMPublic .group .link:hover,
.RadMenu_YMPublic .group .focused,
.RadMenu_YMPublic .group .expanded
{
    background-color: #ccc;
}
/* End Public Menu Style */
.FeaturedMemberTile a {
	display:block;
}

/* Slideshow styling */

#full-slider-wrapper
{
	width: 100% !important;
	height:0px!important;
	padding-bottom:32% !important;
}
.slide-panel
{
	width: inherit;
}
.slide-panel .active
{
	width: inherit;
}

/* Begin Hp/Sp zone styling */

.LatestNewsItemDate {
	display:block;
}

#RememberMe input {
	margin-right:5px;
}

#members img {
	margin-right:10px;
	margin-bottom:8px;
	}
#members .FeaturedMemberTile {
	font-size:11px;
	clear:both;
	display:block;
	margin-top:15px;
	}
#members .FeaturedMemberTile a {
	font-weight:bold; 
	margin: 5px 0; 
	font-size:12px;
	}

/* Subpage title and navbar styling */

#SpNavBar form {
    float: left;
}
#SpNavBar select {
    margin-right: 5px;
}
#SpNavBar {
   background: none repeat scroll 0 0 #FFFFFF;
    height: 30px;
    line-height: 23px;
    padding: 5px 10px;
}
#SpNavBar a {
   font-size: 11px;
   float:left;
   color: #000;
   margin: 0 5px;
}

#SpNavBar a:hover {
	color:#999;
	}
	
#SpNavBar img {
	margin-right:5px;
}
#SpSubHead
{
	width: 100%;
	margin:0 auto;
}
#GroupPagesMenuLink
{
	float: left;
}
#GroupMoreMenuLink
{
	float: left;
}

/* These are bars in member pg content + */

.datagrid1 tr.header td
{
    background-color: #fff;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    text-transform: none;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    height: 30px;
	line-height:30px;
	padding:0 5px 0 5px;
}
.datagrid1 tr.header a
{
    color: #000;
    text-decoration: none;
    text-transform: none;
    font-size: 10px;
    padding: 7px 4px 7px 4px;
}
.datagrid1 tr.header a:hover
{
    text-decoration: none;
    color: #999;
    background-color: #fff;
}

.datagrid1 tr.item td
{
    background-color: #ebebeb;
	padding:5px;
}

.datagrid1 tr.altitem td
{
    background-color: #fff;
	padding:5px;
}
.datagrid1 td {
	height:auto!important;
}

.ForumSubject {
    font-size: 12px !important;
}
.FormTable1 th
{
    background-color: #fff;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    text-transform: none;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    height: 30px;
	line-height:30px;
}
.FormTable1 th a
{
    color: #000;
    text-decoration: none;
    text-transform: none;
    font-size: 10px;
    padding: 7px 4px 7px 4px;
}
.FormTable1 th a:hover
{
    text-decoration: none;
    text-transform: none;
    font-size: 10px;
    padding: 7px 4px 7px 4px;
    color: #999;
    background-color: #fff;
}

.FormTable1 tr td {
    padding-bottom: 15px;
}

/* These are bars in latest news & calendar content + */

ViewTable1 {
    margin-bottom: 10px;
}

.ViewTable1 th
{
    background-color: #fff;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    text-transform: none;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    height: 30px;
	line-height:30px;
}
.ViewTable1 th a
{
    color: #000;
    font-size: 10px;
    text-decoration: none;
}
.ViewTable1 th a:hover
{
    color: #999;
    font-size: 10px;
    text-decoration: none;
}

.ViewTable1 tr td {
    padding: 6px 0;
}

/* Button & Callout Styling */

.specialContent, .specialcontent, .SpecialContent
{
    background-color: #ebebeb;
    border: 0 none;
}
.formbutton
{
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 0 5px 0 5px;
}
.formbutton:hover {
	background: #666;
	}

.calloutbox, .infobox
{
    background-color: #ebebeb;
    border: 0 none;
    padding: 12px 15px;
}

#classyears .bigyear {
    background: none repeat scroll 0 0 #DDDDDD!important;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 0;
    padding: 5px;
}

#classyears .main {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD!important;
    font-size: 12px;
    height: 100%;
}
#frmWallPost #btnSubmitWallPost {
}


#strWallText, #ctl00_PageContent_ctl01_txtWallText {border:1px solid #ccc!important;}

#ctl00_PageContent_ctl01_txtWallText {margin-bottom:5px;}

/* TabBar Styling (Search and Member Profile)  */
				   
.TabBar div.activeTab a, .TabBar div.activeTab a:hover 
{
background-color: #FFFFFF;
color: #9C1E08 !important;
padding-bottom: 3px;
padding-top: 2px;
}
.TabBar div a 
{
background-color: #EEEEEE;
color: #AAAAAA;
}

#Calendar th.Head 
{
  font-size: 18px;
 padding: 5px;
 text-align:center;
}
#Calendar td.MonthPrevNext 
{
 
}

.MemberControlPanel:hover,.MemberControlPanel_Container:hover {
	background-color:#eee;
}

.CaptchaQuestion {
    white-space: normal;
}

/* Begin Custom Form Styles */

#CustomFormPager .current, #CustomFormPagerLegend .current {
    background-color: #000000;
}
 
#CustomFormPager .invalid, #CustomFormPagerLegend .invalid {
    background-color: #FB5252;
}
 
#CustomFormPager .valid, #CustomFormPagerLegend .valid {
    background-color: #8AEB8A;
}
#CustomFormPager div, #CustomFormPagerLegend div {
    border: 1px solid #333333;
    cursor: pointer;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    margin: 3px;
    padding: 3px;
    text-align: center;
    vertical-align: middle;
    width: 16px;
}
#CustomPageBody {
	width: auto;
	clear:both;
}
#full-slider-nav-left {
	margin-top:15%;	
}

#full-slider-nav-right {
	margin-top:15%;	
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
	.datagrid1 table.pgNavigation,
	.datagrid1 table.pgNavigation thead,
	.datagrid1 table.pgNavigation tbody,
	.datagrid1 table.pgNavigation th,
	.datagrid1 table.pgNavigation td,
	.datagrid1 table.pgNavigation tr
	{
		display:inline;
	}
	.datagrid1 table.pgNavigation td:before { content: ""; }
	.datagrid1 td.td_pgNavigation:before { content: "" !important; }

	/* Force table to not be like tables anymore */
	table.datagrid1:not(.nonresponsive),
	 .datagrid1:not(.nonresponsive) thead,
	 .datagrid1:not(.nonresponsive) tbody,
	 .datagrid1:not(.nonresponsive) th,
	 .datagrid1:not(.nonresponsive) td,
	 .datagrid1:not(.nonresponsive) tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.datagrid1:not(.nonresponsive) thead tr, .datagrid1:not(.nonresponsive) tr.header, .datagrid1:not(.nonresponsive) tr.altheader, .datagrid1:not(.nonresponsive).altheader {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.datagrid1:not(.nonresponsive) tr.header { border: 1px solid #ccc; }

	.datagrid1:not(.nonresponsive) tr.item td, .datagrid1:not(.nonresponsive) tr.altitem td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
		text-align:left !important;
		width: auto !important;
	}

	.datagrid1:not(.nonresponsive) tr.item td::before, .datagrid1:not(.nonresponsive) tr.altitem td::before {
		background: inherit;
		color: inherit;
		font-weight: bold;
		text-align: left;
		left: 0;
		padding: 6px 10px 7px 6px;
		position: absolute;
		top: 0;
		white-space: nowrap;
		width: 45%;
	}

	.datagrid1:not(.nonresponsive) tr.item td, .datagrid1:not(.nonresponsive) tr.altitem td {
		border-color: transparent;
	}
}

/* mobile menu */
.mobile-menu {
    color: #fff;
    font-size: 15px;
    line-height: 15px;
}
.mobile-icon {
    margin-top: 1px;
}
.caret.navbar-toggle.sub-arrow,
.navbar-nav.sm-collapsible .caret,
.navbar-nav.sm-collapsible ul .caret {
	background: transparent none repeat scroll 0 0;
    border: medium none;
    color: inherit;
}
.navbar-nav.sm-collapsible .caret::before {
	content: "\f107";
	font-family: FontAwesome;
	font-weight: bold;
}
.navbar-nav.sm-collapsible .open > a > .caret:before {
	content: '\f107';
	font-weight: normal;
}

/* correct image size for slider */
div.slide-panel > img {
    width: 100%;
}

#ContextualHelp {
    width: 100% !important;
	max-width: 400px !important;
}


/* #  global_inc\site_templates\HTML_5\YM-FX-02-A\sp.css */




/* # 4 /styles/custom.css */
/* Root Variables */
:root {
    --directory-results-primary-color: 75, 168, 72;
    --directory-results-secondary-color: 207, 38, 48;
}


@charset "utf-8";
/* CSS Document */
body{
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 16px;
	font-weight:300;
    color: #666;
    letter-spacing: .3px;
	}
p {
    margin: 0 0 10px;
    line-height: 26px;
}
.container {
    padding-left:8px;
    padding-right: 8px;
}
input, button, select, textarea{
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 5px 10px;
	}
a{
		color: #54C9F3;
	}
a:hover{
	color:#666;
	text-decoration:none;
	}
h1, h2, h3, h4, h5{
	margin:10px 0 15px;
	}
h1{
	font-size: 32px;
    line-height: 36px;
    color: #666;
    font-weight: 400;
	}
h2{
	font-size:30px;
	line-height:34px;
	color: #666;
	font-weight:400;
	}
h3{
	font-size: 28px;
    line-height: 32px;
    color: #333;
    font-weight: 400;
	}
h4{
	font-size:26px;
	line-height:30px;
	 color: #666;
	font-weight:400;
	}
h5{
	font-size:24px;
	line-height:28px;
	color:#000;
	font-weight:400;
	}
.container {
    padding-left:8px;
    padding-right: 8px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    padding-left: 8px;
    padding-right: 8px;
    position: relative;
}

.row {
    margin-right: -8px!important;
    margin-left: -8px!important;
}
.toolbar-out {
	background: #fff;
    border-bottom: none;
	/*
	Uncoment bottom codefor sticky header
	======================================*/
	position:fixed;
	top:0;
	z-index:98;
	width:100%;
}


	


.toolbar-out .container{
	width: 100%;
	padding:0 55px;
	}
	
.header-out .container {
    width: 100%;
	padding:0 55px;
}
	
#itoolbar_bg {
    background-color: transparent;
    min-height: 45px;
    height: auto;
    padding-top: 0;
}

#itoolbar {
	color: #FFFFFF;
    font-size: 0;
    padding-top: 0;
}
#itoolbar a:nth-child(3)::before {
    content: "\f007";
    position: absolute;
    visibility: visible;
    top: 4px;
    font-family: FontAwesome;
    right: 71px;
    padding-right: 8px;
}
#itoolbar a:nth-child(3) {
    background-color: #A34698;
    color: #fff;
    border-radius: 0;
    padding-left: 36px;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
}
#itoolbar a:nth-child(3):hover {
    background: #54C9F3;
    color: #fff;
}
#itoolbar a {
	color: #666;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 400;
    display: inline-block;
    padding: 0 12px;
    font-size: 12px;
    text-transform: uppercase;
}

#itoolbar a:hover {
	color: #54C9F3;
}


#isearch {
    height: auto;
    min-height:35px;
}

#isearch .btn {
    padding: 3px 10px;
    font-size: 21px;
    border-color: none;
    color: #bbb;
    border-radius: 0;
    border: none;
    height: 34px;
    background: transparent;
    -webkit-transition: all 225ms ease-in 0s;
    -moz-transition: all 225ms ease-in 0s;
    -o-transition: all 225ms ease-in 0s;
    transition: all 225ms ease-in 0s;
}
#isearch .btn:hover{
	background-color:transparetn;
    border-color:none;
    color: #54C9F3;
	}
#isearch .input-group {
    margin-top: 0;
}

#isearch .form-control {
    font-size: 14px;
    height: 34px;
    color: #333;
    padding: 3px 8px;
    border-radius: 0;
    font-weight: 100;
    box-shadow: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid #E6E6E6;
}
.header-out {
    background: #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,0.3);
    position: relative;
    z-index: 55;
    position: fixed;
    top: 40px;
    z-index: 99;
    width: 100%;
}
#header {
    height: 78px;
    background-color: transparent;
    position: relative;
}
#logo {
	position: absolute;
    top: -20px;
    left: 0;
}
.head-social {
    position: absolute;
    right: 8px;
    top: 31px;
}
.head-social a {
    font-size: 24px;
    margin-left: 13px;
}
#social {
    position: absolute;
    right: 10px;
    top: 20px;
}

#social a{
	display: inline-block;
    height: 36px;
    width: 36px;
    font-size: 22px;
    color: #fff;
    background-color: #0B6666;
    text-align: center;
    line-height: 34px;
    border: 1px solid #666;
    border-radius: 2px;
    box-shadow: 0 8px 7px -6px rgba(0,0,0,.2);
	margin-left: 10px;
	}
	
#social a:hover{
	opacity:.7;
	}
	
.slogan {
    position: absolute;
    right: 0;
    bottom: 6px;
    font-size: 20px;
    color: #333;
	font-weight: bold;
}

.mainmenu-out {
    background: transparent;
    border-bottom: none;
    position: fixed;
    top: 105px;
    z-index: 100;
    width: 100%;
}
.mainmenu-out .container{
     width: 100%;
    padding: 0 55px;
	}
	
#mainmenu {
    background-color:transparent;
    height: 0;
    line-height: normal;
} 
.islideshow-out {
	background: #f1f1f1;
    background-repeat: repeat-x;
    padding: 150px 0 30px;
    border-bottom: none;
	display:none;
}
#islideshow {
    background-color: #666666;
    height: 0;
    padding-bottom: 32%;
    -webkit-box-shadow: 0 7px 6px -6px #888;
    -moz-box-shadow: 0 7px 6px -6px #888;
    box-shadow: 0 7px 6px -6px #888;
}

#hp-main {
       padding-top: 114px;
}
#sp-main{
	    padding-top: 114px;
	}
	
#sp-main:before {
    content: " ";
    width: 100%;
    height: 130px;
    background: url(https://cdn.ymaws.com/cmstudies.site-ym.com/graphics/hero.jpg);
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
}

#hp-main .login {
    display: none;
}



#left {
    margin-top: 31px;
}

#hp-main .content {
	padding: 0;
	display:table;
	width:100%;
}

.hp-center-out {
    position: relative;
    /*height: 650px;
    background: url(https://cdn.ymaws.com/cmstudies.site-ym.com/graphics/hero.jpg);
    background-size: 100%;
    background-repeat: no-repeat;*/
}
.hp-center-out .container {
    width: 100%;
    padding: 0;
}
#hp-center {
    display: table;
	margin-bottom: 0;
}

#hp-center .content {
    padding: 0;
    display: table;
	height: auto;
	position: relative;
}




#heroSlider .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
    top:10%;
    text-align: left;
}

#heroSlider .carousel-caption h1{
	font-size: 60px;
    line-height: 72px;
    color: #fff;
    font-weight: 300;
	}
#heroSlider .carousel-caption p{
	font-size: 22px;
    color: #eee;
    line-height: 41px;
	}
/*#hp-center .content #heroChev {
    font-size: 40px;
    color: #fff;
    position: absolute;
    bottom: 40px;
}	*/

.customeBTN {
	color: #fff;
    display: inline-block;
    background: #4BA848;
    margin-top: 30px;
    border: 2px solid #4BA848;
    padding: 10px 30px;
    border-radius: 0;
    text-transform: uppercase;
    -webkit-transition: all 225ms ease-in 0s;
    -moz-transition: all 225ms ease-in 0s;
    -o-transition: all 225ms ease-in 0s;
    transition: all 225ms ease-in 0s;
}
.customeBTN:hover{
	background:#A24997;
	border-color:#A24997;
	color:#fff;
	}
.col-5{
	text-align:center;
	}
.col-5:before{
	content: " ";
    width: 50%;
    height: 2px;
    background: #4BA848;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
	}
	
.col-5:after{
	content: " ";
    width: 50%;
    height:2px;
    background: #4BA848;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	}

.col-5 h5 {
    color: #666;
    margin-top: 22px;
    font-size: 20px;
}

.col-5 a {
    display: block;
    text-align: center;
}
.col-5 a:hover{
	opacity:.7;
	}
	
.col-5 i {
	font-size: 74px;
    color: #666;
}
#ctaOut {
    margin-bottom: 80px;
}
#ctaOut p {
    color: #333;
    line-height: 24px;
    padding-top: 20px;
    margin: 20px 0;
}
#aboutOut {
    background: url("https://via.placeholder.com/1920x600")no-repeat center center;
    padding: 135px 0;
    text-align: left;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}

#aboutOut:before {
    content: " ";
    position: absolute;
    top: 0;
    background: url(https://cdn.ymaws.com/cmstudies.site-ym.com/graphics/triangle.png);
    height: 21px;
    width: 51px;
    left: 0;
    right: 0;
    margin: auto;
}	
.calendar {
    display: none;
}

.bottom-left-out {
  background: #fff;
  border-bottom: 1px solid #ddd;
}
#bottom-left {
    width: 100%;
    float: right;
    background: transparent;
    border: 0px transparent solid;
}
#bottom-left .zone {
    background: transparent !important;
    border: solid 0px #eee !important;
    box-shadow: none !important;
}
.news-block {
  background: #eee;
  padding: 0;
}
.news-img {
  background: url("https://via.placeholder.com/400x300") no-repeat center center;
  height: 200px;
}
.news-date {
  position: absolute;
  left: -15px;
  top: 50px;
  background: #4BA848;
  padding-top: 10px;
  z-index: 2;
  width: auto;
  text-align: center;
  color: #fff;
  font-size: 19px;
}
.news-block-outer {
  padding-right: 15px;
  padding-left: 15px;
}
.news-content {
  padding: 15px;
}
.news-block h3 {
  font-size: 22px;
  line-height: 30px;
}
.news-content p {
    font-size: 15px;
}
.news-link a {
    background: #A34698;
    text-align: center;
    padding: 15px 30px !important;
    color: #fff !important;
    font-size: 18px !important;
}
.news-link {
  text-align: center;
  margin-top: 45px;
}
.news-link a:hover {
    background: #54C9F3 !important;
    color: #fff !important;
}


.news {
    width: 40%;
}

#LoginForm .small {
    background: #f1f1f1;
    border: medium none;
    border-radius: 0;
    color: #666;
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    margin: 0;
    padding: 0 15px;
    width: 100%;
}


#sp-main #LoginForm .small{
	    background: #fff;
	}

.hp-left-out {
    padding: 80px 0 0;
    position: relative;
}

.hp-left-out .container {
    width: 100%;
}

#hp-left {
    height: auto;
    min-height: auto;
    width: 100%;
	margin:0;
}

#bottom-left #infoImageWrap {
    padding: 0;
    margin-bottom: 20px;
    border: 2px solid #666;
}


#bottom-left #contentWrap {
    padding: 0 30px;
}

#hp-left h1{
	 margin-bottom: 30px;
	 margin-top: 0;
	}
#hp-left a.readMore {
    font-weight: bold;
    color: #ffaa4e;
    float: left;
    margin-top: 10px;
    font-size: 14px;
}

#hp-left a.readMore:hover{
	color:#d87622;
	}
	
#bTitle {
    padding: 0 31px;
    margin: auto;
    display: block;
    text-align: center;
}
#bCont h5{
    margin: 0;
}
#bTitle h1{
	 margin-top:0;
	 font-weight:300;
	}
#bCont .small{
	color: #666;
    font-weight: bold;
	}
#bCont .readMore {
    color: #4BA848;
}
#hp-main .zone {
	background-color: rgba(255,255,255,.95);
    height: auto;
    min-height: 416px;
    padding: 0 0 40px 0;
    box-shadow: inset 0 0 0 1px #fff;
    border: 1px solid #aaa;
    display: table;
}

#right .zone {
    background-color: #f9f9f9;
    box-shadow: inset 0 0 0 1px #fff;
    border: 1px solid #ddd;
    height: auto;
    padding: 0;
}
#hp-main #news{
	width:100%;
	}
#hp-main #login{
	background-color: transparent;
    height: auto;
    min-height: 280px;
    padding: 0;
    box-shadow: none;
	border:none;
    border-left: 1px solid #aaa;
	}

.irailhead {
    background-color: transparent;
    color: #666;
    height: auto;
    line-height: normal;
    padding: 16px 15px 0;
    text-align: left;
    font-size: 27px;
    text-transform: capitalize;
    text-shadow: none;
}
.irailhead a{
	font-size: 12px;
    line-height: 31px;
    display: block;
    background: #4BA848;
    padding: 0 10px;
    border-radius: 0;
    border: none;
    color: #fff;
    text-shadow: none;
    font-weight: lighter;
    text-transform: lowercase;
    box-shadow: none;
	}
.irailhead a:hover{
	 background: #666;
	}
.irailcontent {
    padding: 15px;
    text-align: left;
    color: #666;
    display: table;
}

.irailcontent a{
    font-style: normal;
    font-weight:400;
    padding: 4px 0;
    font-size: 14px;
	color:#666;
	}
.irailcontent a:hover{
	color: #54C9F3;
	}
.LatestNewsItemDate {
    display: block;
}

.bottomcontentarea-out {
    padding: 40px 0;
}
	
	
.bottomcontentarea-out .container{
	/*width:100%;
	padding:0 80px;*/
	}

#bottomcontentarea {
    background-color: #fff;
    padding: 0;
    margin-bottom: 0;
}

#FooterContentArea {
	background-color: #333;
    height: auto;
    min-height: 35px;
    padding: 80px 0px 40px;
    color: #bbb;
}
#FooterContentArea a{
	color:#fff;
	}
#FooterContentArea a:hover{
	color:#54C9F3;
}
#col2 a {
    display: block;
}
#col3 a {
    color: #4BA848;
    margin: 4px;
    font-size: 20px;
}

.col {
    margin-bottom: 80px;
}
.inCol {
		float: left;
		width: 50%;
	}
.inCol a{
	display: block;
    margin-bottom: 10px;
    color: #fff;
	}
#icopyright {
    background-color: #222;
    padding: 20px 0px 20px;
    font-size: 12px;
}



#copyright-inner {
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 0 55px;
}

#copyright-inner a {
    color: #fff;
}

#copyright-inner a:hover{
	 color:#003455;
	}
#SpTitleBar {
    background: transparent;
    font-size: 43px;
    height: auto;
    padding: 15px;
    margin-bottom: 50px;
    margin-top: 0px;
    display: table;
    color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,.9);
}

#SpContent {
    padding: 15px;
    width: 100%;
    table-layout: fixed;
}

#SpContent_Container {
    padding: 15px;
}

.breadCrumb ul {
    list-style: none;
}

.breadCrumb ul li {
    display: inline-block;
    height: 21px;
    line-height: 21px;
    position: relative;
}

#right {
    padding-left: 15px;
    margin-top: 148px;
}

.navbar-toggle {
    background-color: #666;
    background-image: none;
    border: medium none;
    border-radius: 4px;
    float: right;
    margin-bottom: 8px;
    margin-right: 15px;
    margin-top: 8px;
    padding: 9px 10px;
    position: relative;
}

.navbar-toggle .icon-bar {
    background-color: #fff;
}


/* 0. Begin Template Styles */
/*********************************************/

a img {border:none;}


/* Toolbar & search styling */
#PrintPage img {
	display:none;
}
.navbar-left {
	float: right !important;
    margin: -40px -17px 0 0;
}
.navbar-nav>li>a{
	 color: #666;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 300;
    padding: 15px 16px;
    border-bottom: 4px solid transparent;
	}
.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus{
	background-color:transparent;
	color: #54C9F3;
	border-bottom:2px solid #54C9F3;
	}
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus{
	background-color:transparent;
	color: #54C9F3;
	border-bottom:2px solid #54C9F3;
	}
.dropdown-menu{
	background-color:#fff;
	min-width:250px !important;
	border:none;
	border-radius:0;
	}
.navbar-collapse {
    background-color:transparent;
    border-top: medium none !important;
    position: relative;
    z-index: 999999;
    max-height: 600px;
}
.navbar-nav .open .dropdown-menu > li > a {
	background-color:tranparent;
    color: #1B1819;
    line-height: 20px;
	border-bottom:none;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus  {
	background-color:transparent;
	color: #ffaa4e;
	border-bottom:none;
	}

/* End Public Menu Style */
.FeaturedMemberTile a {
	display:block;
}

/* Slideshow styling */

#full-slider-wrapper
{
	width: 100% !important;
	height:0px!important;
	padding-bottom:32% !important;
}
.slide-panel
{
	width: inherit;
}
.slide-panel .active
{
	width: inherit;
}

/* Begin Hp/Sp zone styling */

.LatestNewsItemDate {
	display:block;
}

#RememberMe input {
	margin-right:5px;
}

#members img {
	margin-right:10px;
	margin-bottom:8px;
	}
#members .FeaturedMemberTile {
	font-size:11px;
	clear:both;
	display:block;
	margin-top:15px;
	}
#members .FeaturedMemberTile a {
	font-weight:bold; 
	margin: 5px 0; 
	font-size:12px;
	}

/* Subpage title and navbar styling */

#SpNavBar form {
    float: left;
}
#SpNavBar select {
    margin-right: 5px;
}
#SpNavBar {
   background: none repeat scroll 0 0 #FFFFFF;
    height: 30px;
    line-height: 23px;
    padding: 5px 10px;
}
#SpNavBar a {
   font-size: 11px;
   float:left;
   color: #000;
   margin: 0 5px;
}

#SpNavBar a:hover {
	color:#666;
	}
	
#SpNavBar img {
	margin-right:5px;
}
#SpSubHead
{
	width: 100%;
	margin:0 auto;
}
#GroupPagesMenuLink
{
	float: left;
}
#GroupMoreMenuLink
{
	float: left;
}

/* These are bars in member pg content + */

.datagrid1 tr.header td
{
    background-color: #333;
    color: #fff;
    font-size: 14px !important;
    font-weight: bold;
    text-transform: none;
    border-top: transparent;
    border-bottom: transparent;
    height: 30px;
    line-height: 30px;
    padding: 0 5px 0 5px;
}
.datagrid1 tr.header a
{
    color: #eee;
    text-decoration: none;
    text-transform: none;
    font-size: 14px;
    padding: 7px 4px 7px 4px;
}
.datagrid1 tr.header a:hover
{
    text-decoration: none;
    color: #666;
    background-color: transparent;
}

.datagrid1 tr.item td
{
    background-color: #ebebeb;
	padding:5px;
}

.datagrid1 tr.altitem td
{
    background-color: #fff;
	padding:5px;
}
.datagrid1 td {
	height:auto!important;
}
.ForumSubject {
    font-size: 12px !important;
}
.FormTable1 th
{
    background-color: #333;
    color: #fff;
    font-size: 14px !important;
    font-weight: bold;
    text-transform: none;
    border-top: transparent;
    border-bottom: transparent;
    height: 30px;
    line-height: 30px;
    padding: 5px;
}
.FormTable1 th a
{
    color: #eee;
    font-size: 14px;
    text-decoration: none;
}
.FormTable1 th a:hover
{
    text-decoration: none;
    text-transform: none;
    font-size: 14px;
    padding: 7px 4px 7px 4px;
    color: #666;
    background-color: transparent;
}

.FormTable1 tr td {
    padding-bottom: 10px;
	padding-top: 10px;
}

/* These are bars in latest news & calendar content + */

ViewTable1 {
    margin-bottom: 10px;
}

.ViewTable1 th
{
    background-color: #333;
    color: #fff;
    font-size: 14px !important;
    font-weight: bold;
    text-transform: none;
    border-top: transparent;
    border-bottom: transparent;
    height: 30px;
    line-height: 30px;
    padding: 5px;
}
.ViewTable1 th a
{
    color: #eee;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
}
.ViewTable1 th a:hover
{
    color: #666;
    font-size: 14px;
    text-decoration: none;
}

.ViewTable1 tr td {
    padding: 6px 0;
}

/* Button & Callout Styling */

.specialContent, .specialcontent, .SpecialContent
{
    background-color: #ebebeb;
    border: 0 none;
}
.formbutton
{
    background-color: #4BA848;
    color: #fff;
    text-align: center;
    padding: 6px 45px;
    border: none;
    line-height: normal;
    box-shadow: none;
    text-transform: uppercase;
    font-size: 13px;
    border-radius: 0;
}
.formbutton:hover {
	background: #666;
	border:none;
	color:#fff;
	}

.calloutbox, .infobox
{
    background-color: #eee;
	border: 1px solid #ddd;
    box-shadow: inset 0 0 0 1px rgba(255,255,255, .6);
    padding: 12px 15px;
}

#classyears .bigyear {
    background: none repeat scroll 0 0 #DDDDDD!important;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 0;
    padding: 5px;
}

#classyears .main {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD!important;
    font-size: 12px;
    height: 100%;
}
#frmWallPost #btnSubmitWallPost {
	font-size: 11px !important;
    padding: 5px 20px !important;
}


#strWallText, #ctl00_PageContent_ctl01_txtWallText {border:1px solid #ccc!important;}

#ctl00_PageContent_ctl01_txtWallText {margin-bottom:5px;}

/* TabBar Styling (Search and Member Profile)  */
				   
.TabBar div.activeTab a, .TabBar div.activeTab a:hover 
{
	background-color: #CF2630;
    color: #fff !important;
    padding-bottom: 3px;
    padding-top: 2px;
}
.TabBar div a 
{
	background-color:#4BA848; 
	color: #fff;
}
.TabBar div a:hover{
	background-color: #CF2630;
	color: #fff;
	}
#Calendar th.Head 
{
  font-size: 18px;
 padding: 5px;
 text-align:center;
}
#Calendar td.MonthPrevNext 
{
 
}

.MemberControlPanel:hover{
	background-color:transparent !important;
	}
.MemberControlPanel_Container:hover {
	background-color:#f1f1f1;
	box-shadow:inset 0 0 0 1px #ddd;
    height:65px;
}
.deemphasize{
	color:#333;
	}
	
.CaptchaQuestion {
    white-space: normal;
}

/* Begin Custom Form Styles */

#CustomFormPager .current, #CustomFormPagerLegend .current {
    background-color: #000000;
}
 
#CustomFormPager .invalid, #CustomFormPagerLegend .invalid {
    background-color: #FB5252;
}
 
#CustomFormPager .valid, #CustomFormPagerLegend .valid {
    background-color: #8AEB8A;
}
#CustomFormPager div, #CustomFormPagerLegend div {
    border: 1px solid #333333;
    cursor: pointer;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    margin: 3px;
    padding: 3px;
    text-align: center;
    vertical-align: middle;
    width: 16px;
}
#CustomPageBody {
	width: auto;
	clear:both;
}
#full-slider-nav-left {
	margin-top:15%;	
}

#full-slider-nav-right {
	margin-top:15%;	
}
#DisplayCurrMenu_c {
    left: -60px !important;
}

#GalleryFormsPanel {
    max-width: 680px;
    width: 100% !important;
}

#JournalEntryFormPanel {
    max-width: 640px;
    width: 100% !important;
}

#JournalEntryFormPanel_c {
    left: 40px !important;
}

#ctl00_PageContent_isTwitterEnabled {
    max-width: 400px;
    width: 100% !important;
}

.DescriptionPanel.yui-module.yui-overlay.yui-panel {
    max-width: 350px;
    width: 100% !important;
}

.FeaturedMemberTile {
    clear: both;
    min-height: 80px;
    padding-bottom: 10px;
}

.FeaturedMemberTile a {
    display: block;
    margin-bottom: 5px;
}

.FeaturedMemberTile img {
    margin-bottom: 10px;
    margin-right: 10px;
}

#tblBasicSearch td, .FormTable1 td {
    text-align: left;
}

.redalert {
    color: #d9534f;
}

.mtop-0 {margin-top: 0px;}
.mtop-5 {margin-top: 5px;}
.mtop-10 {margin-top: 10px;}
.mtop-15 {margin-top: 15px;}
.mtop-20 {margin-top: 20px;}
.mtop-25 {margin-top: 25px;}
.mbottom-0 {margin-bottom: 0px;}
.mbottom-5 {margin-bottom: 5px;}
.mbottom-10 {margin-bottom: 10px;}
.mbottom-15 {margin-bottom: 15px;}
.mbottom-20 {margin-bottom: 20px;}
.mbottom-25 {margin-bottom: 25px;}
.mbottom-30 {margin-bottom: 30px;}
.mright-5 {margin-right: 5px;}
.mright-10 {margin-right: 10px;}
.mright-15 {margin-right: 15px;}
.mright-20 {margin-right: 20px;}
.mright-25 {margin-right: 25px;}
.mleft-5 {margin-left: 5px;}
.mleft-10 {margin-left: 10px;}
.mleft-15 {margin-left: 15px;}
.mleft-20 {margin-left: 20px;}
.mleft-25 {margin-left: 25px;}
.ptop-15 {padding-top: 15px;}
.pleft-15 {padding-left: 15px;}
.pright-0 {padding-right: 0;}
.pleft-0 {padding-left: 0;}
#Form1 td {
    padding: 5px;
}
#SpPopup_Container {
    background: #fff;
    vertical-align: top;
	height:1500px;
}
.navbar-toggle{
	background-color:#5D9158;	
}
#ctl00_PageContent_fpb_pForumsQuickSearch{
	margin: 0px 25px 0px 6px !important;
}
#SpPopup_Container #SpTitleBar{
	padding-left:15px;
}	
#Calendar th{
	text-align:center;
	}
table.FormTable1 .label {
    color: #333;
}

.col-5{
	width:20%;
	float:left;
	display:table;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	padding:8px;
	position: relative;
	}
.myContainer{
	margin: 0 auto;
    padding: 0 8px;
    height: auto;
    display: table;
	}

@media (min-width:768px){.container{width:750px} .myContainer{width:750px}}
@media (min-width:960px){.container{width:900px} .myContainer{width:900px}}
@media (min-width:1200px){.container{width:1016px} .myContainer{width:1016px}}


@media (max-width: 1500px) {
	.footNav {
		position: absolute;
		top: 15px;
		left: 0;
		text-align: center;
		right: 0;
		display: table;
		margin: auto;
		float: none;
		width: 100%;
	}
	#FooterContentArea {
		padding: 40px 0px 53px;
	}
	#footNavOut {
		width: 100%;
	}
	#copyright-inner {
		text-align: center;
	}
	}

@media (max-width: 1200px) {
	.navbar-nav>li>a {
    	padding: 15px 11px;
	}
	#itoolbar a {
		padding: 0 5px;
		font-size: 12px;
	}
	#SearchForm td{
		width:100%;
		float:left;
   		}
	#heroSlider .carousel-caption .col-sm-8 {
		width: 100%;
		top: 0;
	}	
	#hp-center .content h1 {
		font-size: 50px;
		line-height: 58px;
	}
	#hp-center .content p {
		font-size: 18px;
		color: #eee;
		line-height: 25px;
	}
	.customeBTN {
		color: #fff;
		display: inline-block;
		margin-top: 30px;
		padding: 8px 20px;
	}
	
	#SearchForm td input{
		width:100%;
		float:left;
		}
	#HelpLink_SEARCH_SYNTAX {
		display: block;
	}
   
}

@media (max-width: 991px) {
    .MemberControlPanel {
        width: 100%;
    }
    #CustomFormForm th, #CustomFormForm td, .CustomFormTable th, .CustomFormTable td {
        display: block;
        width: 100% !important;
    }
    #CustomFormForm th label {
        width: 100% !important;
    }
    #CustomFormForm td input[type="text"], #CustomFormForm td select, #CustomFormForm td textarea, .CustomFormTable td input[type="text"] {
        width: 100% !important;
    }
    .CustomFormTable .nameRow input[type="text"] {
        margin-bottom: 15px;
    }
}
@media (max-width: 960px) {
	.navbar-nav>li>a {
		font-size: 15px;
		padding: 15px 12px;
	}
	.header-out .container, .toolbar-out .container, .mainmenu-out .container{
		padding: 0 15px;
	}	
	
	#hp-center .content h1 {
		font-size: 35px;
		line-height: 40px;
	}
	#heroSlider .carousel-caption{
		text-align:center;
		top:0;
		left: 10%;
	    right: 10%;
		}
	.customeBTN {
	    font-size: 12px;
		margin-top:0;
	}
	.carousel-indicators {
		bottom: 0;
	}
	#FooterContentArea .container {
		width: 100%;
		padding: 0 15px;
	}
	.footNav{
		top: 1px;
		}
	}
@media (max-width: 767px) {
	
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
	#hp-center .content #heroChev{
		display:none;
	}
	#header{
		  height: 100px;
		}
	#hp-center .content{
    	text-align: center;
	  }
	#hp-center .content{
		height: auto; 
		  }
  	#hp-main #login{
		border:none;  
	  }
	  #hp-center .content p{
		  display:none;
		  }
	  .col-5 {
    	 width: 32%;
	  }
	  .col-5:nth-child(4) {
			width: 50%;
	   }
	  .col-5:nth-child(5) {
			width: 50%;
		}
	 .col-5:before{
		 display:none;
		 }
		 
	
	.toolbar-out, .header-out, .mainmenu-out{
		position:inherit;
		}
    .islideshow-out{
		padding: 40px 0 30px;
		}
	#sp-main, #hp-main{
		padding-top:0;
		}
	#abCont {
		margin-bottom: 20px;
	}
	#isearch {
		padding: 0;
	}
	#logo {
		top: 11px;
	}
	#hp-left #contentWrap {
		padding: 0;
	}
	#hp-left{
		padding:0;
		}
	#abCont {
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
	}
	#abCont .col-md-offset-6 {
		width: 100%;
	}
	#aboutImgWrap {
		width: 100%;
	}
	#aboutImg {
		width: 100%;
	}
	#aboutImg img {
		margin: 0 auto;
	}
	.news {
		width: 100%;
	}
	#bottom-left {
		width: 100%;
		float: none;
	}
	.navbar-toggle {
		background-color: #4BA848;
		margin-top: -50px;
	}
	.navbar-left{
		float: none !important;
   		 margin: 0;
		}
	#hp-main .zone{
		min-height:auto;
		}
	.navbar-collapse{
		background-color:#fff;
		}
	.navbar-nav>li>a:hover,
	.navbar-nav>li>a:focus{
		background-color:transparent;
		color: #ffaa4e;
		}
	.nav .open>a,
	.nav .open>a:hover,
	.nav .open>a:focus{
		background-color:transparent;
		color: #ffaa4e;
		}
	.navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-nav .open .dropdown-menu > li > a:focus  {
		background-color:transparent;
		color: #ffaa4e;
	}
	
	.news-content {
    padding: 15px;
    text-align: center;
	}
	
.news-date {
    left: 0;
    top: 10px;
    background: #4BA848;
    padding-top: 6px;
    z-index: 2;
    width: 45%;
    text-align: center;
    color: #fff;
    font-size: 19px;
    right: 0;
    margin: auto;
    margin-bottom: 20px;
}
	.news-block-outer {
    margin-bottom: 30px;
}
	.news-block {
    background: #eee;
    padding: 0;
	}
	.news-block h3 {
    font-size: 20px;
    line-height: 30px;
    }

element {

}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {

    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;

}
	
	#FooterContentArea{
		text-align:center;
		padding: 20px 0px;
		}
	.inCol {
		float: none;
		width: 100%;
	}
	.inCol a {
		background: rgba(255,255,255,.1);
		padding: 10px 0;
		margin-bottom: 20px;
		display: block;
	}
    .container {
    padding-left:15px;
    padding-right: 15px;
    }





	.row {
		margin-right: -15px!important;
		margin-left: -15px!important;
	}
    .FormTable1 td {
        display: block;
        width: 100%;
    }
   .irailcontent{
		padding: 16px;
		}
	#bottom-left #contentWrap{
		padding:0;
		}
	
	#right {
		padding-left: 15px;
		margin-top:0;
	}
#ctaOut .col-5 {
    min-height: 400px;
}
}

@media (max-width: 600px) {
    .productNameList {
     word-break: break-all;
}

#ctl00_PageContent_divUpload .nonresponsive td {
        float: left;
        width: 100%;
    }
}

@media (max-width: 480px) {
	.col-5:nth-child(5) {
	    width: 50%;
		margin: 0 auto;
		float: none;
		}
    .customeBTN {
		font-size: 12px;
		margin-top: 0;
		display: none;
	}
	.news-date {
    width: 75%;
    }
	.news-block h3 {
    font-size: 16px;
    line-height: 24px;
	}
	.news-content p {
    font-size: 14px;
    line-height: 20px;
	}	
	#infoImageWrap {
		display: none;
	}
	.navbar-toggle{
		margin-right: 0;
		}
	.hp-left-out {
		padding: 40px 0 30px;
		box-shadow: 0 -1px 2px rgba(0,0,0,.5);
		position: relative;
	}
	.col-5 {
    	 width:50%;
	  }
	span.mobile-menu.pull-left {
		display: none;
	}
	.mobile-icon.pull-left.mleft-10 {
		margin-left: 0;
	}
	.footSocial a {
		display: block;
		margin-bottom: 10px;
		margin-right:0;
	}
	.footSocial {
    	width: auto;
	}
	.head-social {
		left: 0;
		right: auto;
		top: auto;
		bottom: -42px;
		background: rgba(255,255,255, .8);
		padding-right: 13px;
	}
	#itoolbar a {
		font-size: 9px;
		line-height: 33px;
		text-decoration: none;
		padding: 0 9px;
	}
	#itoolbar a:nth-child(3)::before {
    top: 0px;
    right: 59px;
    }
	#itoolbar a:nth-child(3) {
    padding-left: 26px;
    padding-top: 0px;
    padding-right: 12px;
    padding-bottom: 0px;
    }
    .FormTable1 td input[type="text"], .FormTable1 td select, .FormTable1 td textarea {
            width: 100%!important;
    }
    .FormTable1 td .calloutbox input[type="text"] {
        width: auto!importnat;
    }
    #CustomFormForm th label {
        width: 100% !important;
        max-width: 280px;
    }
#ctaOut .col-5 {
    min-height: 410px;
}
}

@media (max-width: 380px) {
#ctaOut .col-5 {
    width: 100%;
    min-height: auto;
}
.news-date {
    width: 100%;
}
}
/* # 5 CLIENT - DEFINED STYLES */
@charset "UTF-8";

/* =============================================================================
   SCMS WEBSITE — CUSTOM STYLESHEET (Cleaned & Reorganized)
   Last reviewed: June 2026 (rev 007 — Fixed A36 .forumActionsDropdown pill:
                            overrode inline width:108px, height:24px, and
                            line-height:24px constraining the button. Collapsed
                            internal float:left arrow image div so "Forum
                            Actions" text centers cleanly in the pill.)
   Previously:    June 2026 (rev 006 — Fixed A36 breadcrumbs/moderators:
                            removed all white-text scoping; links use site blue.)
   --------------------------------------------------------------------------
   HOW THIS FILE IS ORGANIZED
     Part A — ACTIVE STYLES   (the canonical, current styling for the site)
     Part B — LEGACY STYLES   (kept for backwards compatibility while content
                               is migrated; scheduled for removal — see the
                               MIGRATION PLAN comment at the top of Part B)

   BRAND TOKENS
     Purple (primary):  #a54399
     Blue (accent):     #00aeef   Button blue: #2babe2
     Green (hover/CTA): #49a942
     Red (alerts):      #d2232a / #ed1c24
     Light blue (bg):   #b2e7fa / #cceffc / #abe4fa

   FONTS
     Body / UI:        Roboto, Roboto Condensed
     Headings / Nav:   Overpass
   ============================================================================= */


/* =============================================================================
   ============================================================================
                          PART A  —  ACTIVE STYLES
   ============================================================================
   ============================================================================= */


/* -----------------------------------------------------------------------------
   A1. DESIGN TOKENS (CSS Custom Properties)
   Define once, reference everywhere. Scoped to :root so anything on the page
   can use them.
   ----------------------------------------------------------------------------- */

:root {
  /* Brand colors */
  --scms-purple:       #a54399;
  --scms-blue:         #00aeef;
  --scms-blue-btn:     #2babe2;
  --scms-blue-btn-hover: #1e95cc;
  --scms-green:        #49a942;
  --scms-green-hover:  #3d9236;
  --scms-red:          #d2232a;
  --scms-red-bright:   #ed1c24;

  /* Surfaces */
  --scms-bg-light-blue:   #b2e7fa;
  --scms-bg-pale-blue:    #cceffc;
  --scms-bg-heading-blue: #abe4fa;
  --scms-bg-page:         #f7f7f7;
  --scms-bg-card:         #ffffff;

  /* Neutrals */
  --scms-text:      #000000;
  --scms-text-muted:#555555;
  --scms-divider:   #c4c4c4;
  --scms-divider-light: #dddddd;

  /* Typography */
  --scms-font-body:    Roboto, "Roboto Regular", sans-serif;
  --scms-font-heading: Overpass, sans-serif;

  /* Elevation / radius */
  --scms-radius-btn:  8px;
  --scms-radius-card: 12px;
  --scms-shadow-btn:  0 0 4px 0 rgba(0, 0, 0, 0.79);
  --scms-shadow-card: 0 0 6px 0 rgba(0, 0, 0, 0.79);

  /* Button sizing */
  --scms-btn-max-width: 300px;
  --scms-btn-padding:   8px 0;

  /* Yellow (highlight boxes only — not a core brand color) */
  --scms-yellow:        #f9f6ca;
  --scms-yellow-title:  #f9e812;
  --scms-yellow-border: #d4c040;

  /* Gray (highlight boxes only — two-tone, for low-emphasis notices
     such as disclaimers and fine print) */
  --scms-gray-light:    #e8e8e8;   /* light fill                 */
  --scms-gray-mid:      #5a5a5a;   /* mid stroke + title bar     */
  --scms-gray-text:     #3a3a3a;   /* readable body text on fill */

  /* Highlight-box component */
  --scms-hlbox-stroke:    6px;          /* border width for stroked variants */
  --scms-hlbox-radius:    10px;
  --scms-hlbox-padding:   16px 20px;
  --scms-hlbox-margin:    20px 6px;     /* 6px horizontal inset so the card's
                                           drop shadow has room to render at
                                           the container edge instead of being
                                           clipped against it */
}


/* -----------------------------------------------------------------------------
   A2. THIRD-PARTY / DATE PICKER OVERRIDES
   Forces the SitePlug/Community date-picker calendar widget to use Roboto.
   These class names come from the vendor and cannot be changed.
   ----------------------------------------------------------------------------- */

.Style1_cpDayColumnHeader,
.Style1_cpYearNavigation,
.Style1_cpMonthNavigation,
.Style1_cpCurrentMonthDate,
.Style1_cpCurrentMonthDateDisabled,
.Style1_cpOtherMonthDate,
.Style1_cpOtherMonthDateDisabled,
.Style1_cpCurrentDate,
.Style1_cpCurrentDateDisabled,
.Style1_cpTodayText,
.Style1_cpTodayTextDisabled,
.Style1_cpText {
  font-family: var(--scms-font-body);
  font-size: 8pt;
}


/* -----------------------------------------------------------------------------
   A3. FORM TABLES
   Styles for two kinds of form tables on the site:
     1. CMS-rendered custom forms (.CustomFormTable, .CustomFormResponseTable,
        .CustomFormResponseAttachmentsTable) — built via the CMS form builder.
     2. YM system-generated forms (.FormTable1) — used by donations, event
        registration, news/email subscription, member directory search, and
        other built-in YM pages. The markup is platform-generated and not
        editable, so styling here is the only way to bring these pages into
        the SCMS visual system.

   The .FormTable1 styling is modeled on the News & Events page: clean
   sans-serif body text in cells, bold dark section headings (like the
   "General News" / "Featured News" treatment), SCMS-styled inputs that
   match the news-filter and section-jump dropdowns, and blue pill buttons
   for form actions. The goal is for every form page on the site —
   donations, event registration, signup forms — to read as part of the
   same visual system as the editorial pages.
   (The stray "Remy" selector from the original file has been removed — it
    was a typo with no matching markup.)
   ----------------------------------------------------------------------------- */

/* CMS custom-form tables — editable forms built in the CMS form builder. */
.CustomFormTable td,
.CustomFormTable th,
.CustomFormResponseTable td,
.CustomFormResponseTable th,
.CustomFormResponseAttachmentsTable td,
.CustomFormResponseAttachmentsTable th {
  font-family: var(--scms-font-body);
  font-size: 14px;
  font-weight: normal;
  padding: 5px 3px;
  text-align: left;
}

/* YM system-generated forms (.FormTable1) — donations, registration, news
   signups, etc. Match the News & Events page's typography so all forms on
   the site read as one system with the editorial pages. Kill the default
   table border/background so the form reads as clean content on white,
   not as a fenced grid. */
.FormTable1 {
  border: 0 !important;
  background: transparent !important;
  border-collapse: collapse;
  width: 100%;
}

.FormTable1 td,
.FormTable1 th {
  font-family: var(--scms-font-body);
  font-size: 14px;
  font-weight: normal;
  padding: 8px 6px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  background: transparent !important;
  border: 0;
}

/* Section headers — <th> rows like "Campaign/Fund Information", "Donation
   Information", "Billing Information". The YM template assigns unique IDs
   to each <th> (e.g. #thCampaignFundInfo, #thDonationInfo) and styles them
   individually, which beats normal class-level selectors. Use !important
   on the typographic properties to brute-force these into matching the
   News & Events page's section-heading treatment ("General News"): heavy
   dark text on the white page surface, no background fill, generous top
   space between sections. */
.FormTable1 th {
  font-family: var(--scms-font-heading) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--scms-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 28px 0 12px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  line-height: 1.2 !important;
}

/* Bold labels in the left column ("Donation Amount *", "First Name *", etc.)
   already use <b> tags inside the cell; bump them slightly for hierarchy. */
.FormTable1 td b {
  font-weight: 700;
  color: var(--scms-text);
}

/* Required-field asterisk — the platform wraps it in <span class="redalert">.
   Make it actually red and keep it from looking like a typo. */
.FormTable1 .redalert,
.redalert {
  color: #c0392b;
  font-weight: 700;
}

/* Form inputs inside YM forms — bring them in line with the rest of the
   site's input styling (matches the .scms-news-filter and #SpNavBar
   selects). */
.FormTable1 input[type="text"],
.FormTable1 input[type="email"],
.FormTable1 input[type="tel"],
.FormTable1 input[type="password"],
.FormTable1 input[type="number"],
.FormTable1 select,
.FormTable1 textarea {
  font-family: var(--scms-font-body);
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--scms-divider);
  border-radius: var(--scms-radius-btn);
  background-color: #fff;
  line-height: 1.4;
}

.FormTable1 input[type="text"]:focus,
.FormTable1 input[type="email"]:focus,
.FormTable1 input[type="tel"]:focus,
.FormTable1 input[type="password"]:focus,
.FormTable1 input[type="number"]:focus,
.FormTable1 select:focus,
.FormTable1 textarea:focus {
  outline: none;
  border-color: var(--scms-blue-btn);
  box-shadow: 0 0 0 2px rgba(43, 171, 226, 0.25);
}

/* Form action buttons (Submit, Cancel, Continue, etc.). The platform
   applies .formbutton; we keep a light, clear button style matched to
   the SCMS button system. */
.formbutton,
input.formbutton,
button.formbutton {
  font-family: var(--scms-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 8px 18px;
  border-radius: var(--scms-radius-btn);
  border: 1px solid var(--scms-blue-btn);
  background-color: var(--scms-blue-btn);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.formbutton:hover,
.formbutton:focus,
input.formbutton:hover,
input.formbutton:focus,
button.formbutton:hover,
button.formbutton:focus {
  background-color: var(--scms-purple);
  border-color: var(--scms-purple);
}

.backToCommunity {
  padding-top: 0 !important;
}


/* -----------------------------------------------------------------------------
   A4. BASE / BODY
   ----------------------------------------------------------------------------- */

body {
  font-family: var(--scms-font-body);
  font-size: 16px;
  font-weight: normal;
  color: var(--scms-text);
  letter-spacing: 0;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}


/* -----------------------------------------------------------------------------
   A5. TYPOGRAPHY — HEADINGS
       h2  : Major section headings                (Overpass 900)
       h3  : Subsection headings, blue left accent (Overpass 700)
       h4  : Minor headings                        (Roboto bold)
       h5  : Small display headings                (Overpass 700)
   Variants:
       h2.BIGHEAD     — tighter line-height, less top margin
       h3.EventList   — blue event-listing title (no border, no background)
       h4.MEM         — membership heading (red)
   ----------------------------------------------------------------------------- */

h2 {
  color: var(--scms-text);
  font-family: var(--scms-font-heading);
  font-size: 1.833em;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -1px;
  margin: 48px 0 8px;
}

h3 {
  color: var(--scms-text);
  background-color: #e5f7fd;
  font-family: var(--scms-font-heading);
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.25;
  padding: 12px 0 8px 16px;
  margin: 42px 0 16px;
  border-left: 12px solid var(--scms-blue);
  border-radius: 0;
  /* Light, small drop shadow to set the heading off from the body. */
  box-shadow: 2px 2px 4px #99def9;
}

/* Links inside an h3 inherit the heading's color (no purple) and drop the
   underline — overrides the generic `a` rule in section A9. Applied to every
   link state so hover/focus/active don't pull the heading color back to
   green/red/blue. */
h3 a,
h3 a:link,
h3 a:visited,
h3 a:hover,
h3 a:focus,
h3 a:active {
  color: inherit;
  text-decoration: none;
}

h4 {
  color: var(--scms-text);
  font-family: var(--scms-font-body);
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: 1.3;
  margin: 32px 0 12px;
}

h5 {
  font-family: var(--scms-font-heading);
  font-size: 1.33em;
  font-weight: 700;
  letter-spacing: -0.7px;
  margin: 24px 0 0;
  padding-bottom: 0;
}

/* Links inside an h5 keep the purple primary brand color but drop the
   underline. Hover/focus/active cycle through the other brand colors —
   matches the spirit of the generic `a` rule in section A9 but without
   the text-decoration. */
h5 a,
h5 a:link,
h5 a:visited {
  color: var(--scms-purple);
  text-decoration: none;
}
h5 a:hover  { color: var(--scms-green); text-decoration: none; }
h5 a:focus  { color: var(--scms-red);   text-decoration: none; }
h5 a:active { color: var(--scms-blue);  text-decoration: none; }

/* h2 variant — bold, tight, less top margin */
h2.BIGHEAD {
  line-height: 0.9;
  margin: 18px 0 0;
}

/* h3 variant — blue event-listing title, no background, no accent border */
h3.EventList {
  background-color: transparent;
  border-left: none;
  border-radius: 0;
  padding-left: 0;
  color: var(--scms-blue);
  font-size: 1.2em;
  font-weight: 700;
}

/* h4 variant — membership heading (red) */
h4.MEM {
  color: var(--scms-red-bright);
  font-family: var(--scms-font-heading);
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  text-align: left;
}

/* Page title bar */
#SpTitleBar {
  font-family: var(--scms-font-heading);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
}

/* Hero/banner title (white text over dark image) */
#bTitle h1 {
  font-family: var(--scms-font-heading);
  font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
}


/* -----------------------------------------------------------------------------
   A6. TYPOGRAPHY — BODY TEXT & LISTS
   ----------------------------------------------------------------------------- */

li {
  font-size: 16px;
  line-height: 1.5 !important;
}

ul li {
  color: var(--scms-text);
  font-family: var(--scms-font-body);
  margin: 7px 0 0 4px;
  padding-left: 4px;
}

ol li {
  color: var(--scms-text);
  font-family: var(--scms-font-body);
  list-style: decimal outside;
  margin: 7px 0 0 4px;
  padding-left: 4px;
}

/* Nested ordered list items use alpha (a, b, c...) */
ol li li {
  list-style-type: lower-alpha;
  margin-left: 24px;
}

/* The YM base stylesheet applies a left border to li elements inside the
   main content column. This scoped rule owns the full left offset for
   prose lists in that context — both margin-left and padding-left are
   set here explicitly so the global ul li rule above stays minimal and
   the total indent (margin + padding = 20px) is auditable in one place.
   The disc marker sits flush against the text rather than floating away. */
#SpContent_Container ul li {
  margin-left: 12px;
  padding-left: 8px;
}

label {
  font-weight: normal;
  font-size: 1em;
  padding-right: 5px;
}

input {
  color: #403F72;   /* Dark violet — historical brand input color */
  font-family: var(--scms-font-body);
  font-weight: normal;
}

/* -----------------------------------------------------------------------------
   A7. NAVIGATION
   Bootstrap navbar customized to SCMS brand.
   ----------------------------------------------------------------------------- */

.navbar-nav > li > a {
  color: var(--scms-text);
  font-family: var(--scms-font-body);
  font-size: 0.8em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-left: 0;
    text-decoration: none;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
  color: var(--scms-purple);
  border-bottom: 2px solid var(--scms-blue);
  padding-left: 0;
        text-decoration: none;
}

/* Open dropdown nav-item state.
   IMPORTANT: do NOT set padding-left here. The submenu parent (e.g.
   "Officers" when its flyout is open) inherits its horizontal padding
   from `.dropdown-menu > li > a` below. Overriding padding-left in this
   state caused the opened item to jump leftward while siblings stayed
   indented — adjust the shared padding on `.dropdown-menu > li > a`
   instead if you want to retune the column. */
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: transparent;
  color: var(--scms-purple);
  border-bottom: 4px solid var(--scms-blue);
  text-decoration: none;
}

/* Dropdown menu items.
   !important is used on the hover/focus rules because Bootstrap defines a
   matching `.dropdown-menu > li > a:hover` rule with identical specificity,
   and depending on stylesheet load order it can win over ours. Bumping
   specificity by scoping to `.navbar` didn't take in this case, so we
   force it. If a future Bootstrap upgrade removes the conflict, the
   !important can come off.

   Layout-stability trick: bold glyphs are wider than regular ones, so
   switching font-weight on hover causes the text (and anything after it)
   to shift horizontally. To prevent this, we simulate bold with a
   text-shadow stack instead of changing font-weight on hover. This keeps
   glyph widths identical between states, so items don't jiggle left or
   right when the cursor moves over them. */
.dropdown-menu { list-style-type: none; }

.dropdown-menu > li > a {
  color: var(--scms-text);
  font-family: "Roboto Condensed", sans-serif;
  font-weight: normal;
  padding: 2px 8px 2px 4px;
  text-decoration: none;
  /* Allow long menu items to wrap to a second line. Bootstrap defaults to
     white-space: nowrap which forces single-line. */
  white-space: normal;
  line-height: 1.25;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: var(--scms-text) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  /* Simulate bold without changing font-weight (which would widen glyphs
     and shift surrounding text). Stacking the shadow on both sides of
     each glyph thickens strokes to read as bold. */
  text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

/* Note: the previous stylesheet had two orphan #SpNavBar rules sitting at the
   end of A7 (transparent background + font on the select). Those have been
   folded into section A7.6 below, which is now the single source of truth
   for #SpNavBar styling. */


/* -----------------------------------------------------------------------------
   A7.5 TOP UTILITY TOOLBAR (#itoolbar)
   The "Contact | Donate | My Profile | Sign Out" strip above the main nav
   (or "Contact | Donate | Sign In" when the member is signed out). The YM
   template ships this as plain <a> tags separated by inline " | " text
   nodes, AND injects extra decorative/status elements (avatar badges next
   to Donate, a separate purple block next to My Profile, etc.) that we
   don't want. This section takes full ownership:

     1. Hides the inline pipe separators with a font-size:0 / restore trick.
     2. Hides any non-anchor child of #itoolbar (template-injected spans,
        divs, decorative blocks), plus any child of the anchors themselves
        (avatars, icons, badges).
     3. Roboto Condensed bold, uppercase, uniform 14px across all links.
     4. Default treatment: SCMS button-blue text on the white toolbar
        background with a pale-blue hover/focus tint.
     5. Carveout for the auth-state links — My Profile (signed-in) and
        Sign In (signed-out) — which get the inverse: white text on a
        solid SCMS button-blue pill in every state. The pill background
        is applied directly to the <a>, replacing whatever wrapper the
        YM template was using.

   All rules use !important and scope from .toolbar-out so they reliably
   beat the YM template's own link styling.
   ----------------------------------------------------------------------------- */

/* Container — kill the inline-text pipes by zeroing font-size on the
   wrapper; children restore a real size below. */
.toolbar-out #itoolbar {
  font-family: "Roboto Condensed", sans-serif !important;
  font-size: 0 !important;
  line-height: 1.4 !important;
  padding: 8px 0 !important;
}

/* All four toolbar links — uniform appearance in every state. Scoped from
   .toolbar-out for high specificity, with !important to defeat the YM
   template's own link rules. */
.toolbar-out #itoolbar a,
.toolbar-out #itoolbar a:link,
.toolbar-out #itoolbar a:visited,
.toolbar-out #itoolbar a:hover,
.toolbar-out #itoolbar a:focus,
.toolbar-out #itoolbar a:active {
  font-family: "Roboto Condensed", sans-serif !important;
  font-size: 14px !important;
  font-weight: bold !important;
  display: inline-block !important;
  color: var(--scms-blue-btn) !important;
  text-decoration: none !important;
  padding: 4px 14px !important;
  margin: 0 2px !important;
  border-radius: var(--scms-radius-btn) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Subtle pale-blue hover/focus tint for the white-background links. */
.toolbar-out #itoolbar a:hover,
.toolbar-out #itoolbar a:focus {
  background-color: var(--scms-bg-pale-blue) !important;
}

/* Blue-pill links — My Profile (signed-in) and Sign In (signed-out).
   These get a solid blue background with white text in every state.
   The YM template's own purple block was rendering as a separate element
   next to the link; here we apply the background directly to the <a>
   itself so the text and background stay together. */
.toolbar-out #itoolbar a[href*="/members/"],
.toolbar-out #itoolbar a[href*="/members/"]:link,
.toolbar-out #itoolbar a[href*="/members/"]:visited,
.toolbar-out #itoolbar a[href*="/members/"]:hover,
.toolbar-out #itoolbar a[href*="/members/"]:focus,
.toolbar-out #itoolbar a[href*="/members/"]:active,
.toolbar-out #itoolbar a[href*="login.aspx" i],
.toolbar-out #itoolbar a[href*="login.aspx" i]:link,
.toolbar-out #itoolbar a[href*="login.aspx" i]:visited,
.toolbar-out #itoolbar a[href*="login.aspx" i]:hover,
.toolbar-out #itoolbar a[href*="login.aspx" i]:focus,
.toolbar-out #itoolbar a[href*="login.aspx" i]:active {
  color: #ffffff !important;
  background-color: var(--scms-blue-btn) !important;
}

/* Hide everything inside #itoolbar that ISN'T one of our four anchor links.
   The YM template injects extra elements — avatar/badge spans, decorative
   purple blocks, member-status indicators — that we don't want in this
   simplified strip. Anchors stay visible; everything else (spans, divs,
   images, SVGs, <i> tags) is hidden. */
.toolbar-out #itoolbar > *:not(a) {
  display: none !important;
}

/* Kill anything nested inside the toolbar anchors too — icons, badges,
   avatars, spans the template may inject as children of the <a>. */
.toolbar-out #itoolbar a > * {
  display: none !important;
}

/* Kill any icon the YM template injects inside any toolbar link when the
   member is signed in — we want a text-only strip. */
#itoolbar > a > i,
#itoolbar > a img { display: none !important; }


/* -----------------------------------------------------------------------------
   A7.6 TITLE BAR + "MORE IN THIS SECTION" DROPDOWN (#SpSubHead)
   The page title (#SpTitleBar) and the section-jump dropdown (#SpNavBar)
   live in a single <table id="SpSubHead"> inside a YM-template-provided
   dark, full-width band wrapper. Attempts to scope the dark to just the
   title row broke the full-width effect, since the dark band is painted
   on an outer wrapper we don't control.

   So instead of fighting the wrapper, this section accepts that the title
   AND dropdown both sit inside the dark band, and styles the dropdown so
   it reads as an intentional part of the band rather than a stray control.

   Steps:
     1. Reset table/row spacing so the markup doesn't add extra height.
     2. Contain the floated bookmark icon (#FavoriteControl) inside the
        title cell with overflow: hidden, so the cell sizes to the actual
        title height regardless of line count.
     3. Style the <select> to look intentional inside the dark band:
        white background, dark border, comfortable padding.
     4. Pad the dropdown row top/bottom so the control has breathing room
        above the title and below the band's bottom edge.
   ----------------------------------------------------------------------------- */

#SpSubHead,
#SpSubHead tbody,
#SpSubHead tr {
  width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Title cell — contain the floated bookmark icon so the cell sizes to the
   full title height. Font/size/weight set in section A5 (Typography —
   Headings). Top/bottom padding is intentionally modest so the title sits
   close to the top of the dark band, which keeps mobile wrapping from
   making the band too tall. */
#SpTitleBar {
  display: block;
  overflow: hidden;     /* establishes a BFC that contains the float */
  line-height: 1.1;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Bookmark icon — keep it floated but pull it tight to the title baseline.
   Adjust the top margin if it sits too high/low next to the text. */
#SpTitleBar #FavoriteControl {
  float: right;
  margin: 6px 0 0 12px;
}

/* Dropdown row — sits inside the dark band, below the title. The top
   padding gives breathing room between the title text and the dropdown;
   the bottom padding gives the dark band a clean bottom edge below the
   control. */
#SpNavBar {
  display: block;
  background-color: transparent !important;
  padding: 36px 0 20px !important;
  margin: 0 !important;
  border: 0 !important;
}

#SpNavBar select {
  font-family: var(--scms-font-body);
  font-weight: normal;
}

#SpNavBar form[name="CustomPageJump"] {
  margin: 0 !important;
  padding: 0 !important;
}

#SpNavBar form[name="CustomPageJump"] select {
  font-size: 15px;
  padding: 6px 10px;
  border: 1px solid var(--scms-divider);
  border-radius: var(--scms-radius-btn);
  background-color: #fff;
  max-width: 420px;
  width: 100%;
  cursor: pointer;
}

#SpNavBar form[name="CustomPageJump"] select:focus {
  outline: none;
  border-color: var(--scms-blue-btn);
  box-shadow: 0 0 0 2px rgba(43, 171, 226, 0.25);
}


/* -----------------------------------------------------------------------------
   A8. SIDEBAR (Right Zone)
   Light-blue card with drop shadow.
   ----------------------------------------------------------------------------- */

#right .zone {
  background-color: var(--scms-blue);
  height: auto;
  padding: 0;
  display: block;
  box-sizing: border-box;
  /* Drop shadow offset down and to the right only (not radiating evenly). */
  box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
  border-radius: var(--scms-radius-card);
}


/* -----------------------------------------------------------------------------
   A9. LINKS & BUTTONS
   Canonical link colors + the modern .btn / .btn--blue / .btn--green button
   system. Old .bluebutton / .greenbutton are retained in Part B for now.
   ----------------------------------------------------------------------------- */

/* Global body-text link styling. Buttons (.btn, .btn--*, .calloutbox,
   .bluebutton, .greenbutton) and header logo/nav links have their own
   explicit color and decoration rules and don't inherit from these.
   Headings (h3 a, etc.) set color: inherit, so they're also unaffected.

   Behavior: blue + bold, no underline by default; underline appears on
   hover/focus while keeping blue + bold so the link doesn't shift color
   under the cursor. Focus uses red as a high-contrast keyboard cue. */
a          { color: var(--scms-blue); text-decoration: none; font-weight: 700; }
a:hover    { color: var(--scms-blue); text-decoration: underline; font-weight: 700; }
a:focus    { color: var(--scms-red);  text-decoration: underline; font-weight: 700; }
a:active   { color: var(--scms-blue); }

/* Event-listing link */
a.EventList {
  background-color: transparent;
  color: var(--scms-blue);
  font-size: 1.2em;
  font-weight: 300;
}

/* --- Modern button system --- */

/* Standalone button (no .btn-group wrapper): full width up to 300px, block-
   level so consecutive buttons stack. Inside a .btn-group the display and
   sizing are overridden to allow side-by-side layout. */
a.btn {
  display: block;
  width: 100%;
  max-width: var(--scms-btn-max-width);
  /* Symmetrical 20px top/bottom — gives the button consistent breathing
     room above and below when used standalone in body content. When the
     button is nested inside a wrapper like .sig-cta-block, that wrapper
     overrides these margins so the button doesn't double-stack spacing. */
  margin: 20px auto;
  padding: 8px 20px;    /* vertical + horizontal breathing room for label */
  border: none;
  border-radius: var(--scms-radius-btn);
  box-shadow: var(--scms-shadow-btn);
  box-sizing: border-box;
  font-family: var(--scms-font-body);
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

a.btn:hover  { transform: translateY(-1px); }
a.btn:active { transform: translateY(0); }

/* Allow button labels to wrap to a second line. Bootstrap's .btn class
   defaults to white-space: nowrap which forces single-line. */
a.btn {
  white-space: normal;
  line-height: 1.3;
}

/* Keep button text white across all link states — overrides the generic
   a:hover / a:focus / a:active color rules at the top of this section. */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:focus,
a.btn:active {
  color: #fff;
}

a.btn--blue         { background-color: var(--scms-blue-btn); }
a.btn--blue:hover   { background-color: var(--scms-blue-btn-hover); }

/* Inline modifier — overrides the block/full-width defaults so multiple
   buttons can sit side by side in a line of text or a centered paragraph.
   USAGE: <a class="btn btn--blue btn--inline" href="...">Label</a> */
a.btn--inline {
  display: inline-block;
  width: auto;
  margin: 8px 6px;
}

a.btn--green        { background-color: var(--scms-green); }
a.btn--green:hover  { background-color: var(--scms-green-hover); }

a.btn--red          { background-color: var(--scms-red); }
a.btn--red:hover    { background-color: #a81b21; }   /* ~12% darker */

a.btn--purple        { background-color: var(--scms-purple); }
a.btn--purple:hover  { background-color: #8a3580; }  /* ~12% darker */

/* Hero button modifier — for high-visibility button groups on the homepage
   (or any feature page). Pair with an existing color modifier:
       class="btn btn--purple btn--hero"
       class="btn btn--blue   btn--hero"
       class="btn btn--green  btn--hero"

   Overrides from the base .btn:
     - Taller padding for a chunky, clickable presence
     - Overpass bold with tight negative letter-spacing for impact
     - Slightly squarer radius (6px vs 8px) — grounded, not pill-like
     - Semi-transparent bottom border creates depth on any background color
       without gradients or hardcoded shadows
     - Lifts 3px on hover (vs 1px for standard buttons) */
a.btn.btn--hero {
  font-family: var(--scms-font-heading);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.03em;
  padding: 18px 28px;
  border-radius: 6px;
  border-bottom: 4px solid rgba(0, 0, 0, 0.22);
  line-height: 1.2;
}

a.btn.btn--hero:hover  { transform: translateY(-3px); }
a.btn.btn--hero:active { transform: translateY(1px); border-bottom-width: 2px; }

/* Equal-width hero buttons inside a group: override the default flex: 1 1 0
   with an explicit equal basis so all buttons match the widest label.
   flex: 1 1 0 already distributes space equally when buttons are in a row,
   but setting min-width: 0 and letting flex do the work can still leave
   buttons at different intrinsic widths if the row wraps. The explicit
   flex-basis: 0 + flex-grow: 1 combination on a non-wrapping group forces
   true equal widths. For wrapping layouts on small screens, buttons fall
   back to full-width naturally. */
.scms-btn-group a.btn.btn--hero {
  flex: 1 1 0;
  min-width: 0;
}

/* Centered wrapper for button groups */
.button-center,
div.button-center {
  text-align: center;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* Button group: horizontal by default, wraps to next line on narrow screens.
   Use .scms-btn-group--stacked to force vertical layout.
   NOTE: Renamed from .btn-group to avoid collision with Bootstrap's own
   .btn-group component. The old name is kept in Part B during migration. */
.scms-btn-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  margin: 24px 0 10px;   /* full line above for clear separation from preceding content */
}

/* Buttons inside an .scms-btn-group share width equally regardless of label
   length. flex: 1 1 0 makes each button take an equal share of available
   space; min-width keeps them readable if the row wraps. The border-radius
   override is no longer strictly needed (Bootstrap's .btn-group rule doesn't
   target this class), but it's kept defensively in case a wrapper higher up
   ever applies similar styling. */
.scms-btn-group a.btn {
  flex: 1 1 0;
  width: auto;
  min-width: 140px;
  margin: 0;
  border-radius: var(--scms-radius-btn);
}

/* Opt-in modifier: stack vertically inside a group (old behavior). */
.scms-btn-group.scms-btn-group--stacked {
  flex-direction: column;
  gap: 4px;
}

.scms-btn-group.scms-btn-group--stacked a.btn {
  flex: 0 0 auto;
  width: 100%;
}

/* News date badge (purple pill, positioned over news card image) */
.news-date {
  background-color: var(--scms-purple);
  color: #fff;
  font-family: var(--scms-font-heading);
  font-size: 19px;
  font-weight: 700;
  position: absolute;
  left: -15px;
  top: 200px;
  width: 180px;
  max-width: 180px;
  text-align: center;
  padding: 8px 0;
  margin: 10px 10px 20px 0;
  z-index: 2;
  text-decoration: none;
  border: none;
  border-radius: var(--scms-radius-btn);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: var(--scms-shadow-btn);
}


/* -----------------------------------------------------------------------------
   A10. NEWS & EVENTS
   ----------------------------------------------------------------------------- */

.news-block {
  background: #333;
  padding: 0;
  height: 420px;
}

.news-content        { margin-top: 20px; }
.news-content p      { font-family: var(--scms-font-body); font-weight: normal; }

.LatestNewsItemDate {
  color: var(--scms-text);
  font-family: var(--scms-font-heading);
  font-weight: normal;
  letter-spacing: -1px;
}


/* -----------------------------------------------------------------------------
   A11. DIRECTORY / MEMBER RESULTS
   Light-blue theme for member-directory cards and search toolbar.
   The --directory-results-secondary-color custom property is consumed by
   the directory widget component to derive hover tints.
   ----------------------------------------------------------------------------- */

#directories-toolbar {
  background-color: var(--scms-bg-pale-blue);
  --directory-results-secondary-color: 171, 228, 250;
}

/* Scoped to directory results only — the original file had this on every
   div.col-sm-12 site-wide, which was overly broad. */
.directory-results .col-sm-12,
div.memb-result-item,
div.memb-img-wrap {
  background-color: var(--scms-bg-pale-blue);
  --directory-results-secondary-color: 171, 228, 250;
}

.MemberControlPanel_Title {
  color: var(--scms-purple);
  font-weight: bold;
}

.MemberControlPanel_Description {
  color: var(--scms-text);
  font-family: var(--scms-font-body);
  font-weight: normal;
}


/* -----------------------------------------------------------------------------
   A12. CUSTOM CONTENT CLASSES
   Reusable classes applied inline in the CMS page editor.
   ----------------------------------------------------------------------------- */

/* Sidebar / inline callout-box text */
.calloutbox {
  color: var(--scms-text);
  font-family: var(--scms-font-body);
  font-size: 1em;
  line-height: 1.25;
}

a.calloutbox {
  color: var(--scms-purple);
  font-weight: bold;
}

/* Railhead / intro label.
   Transparent so the parent zone color shows through; white text. 6px
   light-blue accent border runs full width along the bottom. */
.irailhead {
  color: #ffffff;
  background-color: transparent;
  border-bottom: 6px solid var(--scms-bg-light-blue);
  font-family: var(--scms-font-heading);
  font-weight: 900;
  letter-spacing: -1px;
}

/* Rail content panel — base text color is light-blue. (Links override to
   white below.) Scoped under #right to outweigh the older
   `.irailcontent { color:#666 }` rule still living in the combined stylesheet. */
#right .irailcontent {
  color: var(--scms-bg-light-blue);
}

/* Links inside .irailcontent — bold white, no underline; light-blue on hover.
   Scoped under #right to outweigh the older `.irailcontent a { color:#666 }`
   rule still living in the combined stylesheet. */
#right .irailcontent a,
#right .irailcontent a:link,
#right .irailcontent a:visited {
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}
#right .irailcontent a:hover { color: var(--scms-bg-light-blue); }

/* Ordinal position input (small number field) */
.ordinalPositioner .ordinalPositionerL input { width: 40px; }

/* --- Listing-page components ------------------------------------------------
   Reusable pieces for "directory" pages that list a series of subgroups —
   caucuses, SIGs, coordinating committees, task forces, etc. The original
   caucus page applied these patterns inline (`<h4 style="border-bottom:..">`,
   `<p style="text-indent:-20px; margin-left:20px">`); these classes
   centralize that styling so every listing page renders identically and
   the CMS markup stays clean.

   USAGE — typical listing entry

     <h4 class="scms-listing-heading">Asian/Pacific American Caucus</h4>
     <p class="scms-link-pair">
       <a href="/page/caucus_asian">Caucus Homepage ></a>
       <a href="/group/asian">Members' Caucus Group Page / Join Now ></a>
     </p>
     <p class="scms-contact-list">
       Contacts:<br />
       <a href="mailto:...">Person Name</a><br />
       <a href="mailto:...">Other Person</a> (Role)
     </p>
   ----------------------------------------------------------------------------- */

/* Section heading for a single entry inside a listing page. Light blue
   underline accent ties visually to the h3 left-border accent and the
   sidebar/zone color, but the heading itself stays lightweight (no
   background fill) so a long page of these doesn't feel overstyled. */
.scms-listing-heading {
  border-bottom: 1px solid var(--scms-blue-btn);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

/* Pair of related links shown on one line as small pill buttons in the
   site's light-blue / blue palette. Modeled on .sig-logo-block__downloads
   (which uses the purple equivalent for JPG/PDF download chips on SIG
   pages); this is the blue-family counterpart for caucus/SIG listings.

   No separator between the pills — horizontal margin on each pill
   provides the spacing. Wraps cleanly on narrow screens (each pill can
   drop to its own line). */
.scms-link-pair {
  margin: 4px 0 8px;
  line-height: 1.8;
}

.scms-link-pair a {
  display: inline-block;
  background: var(--scms-bg-light-blue);   /* pale blue tint */
  color: var(--scms-blue-btn);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.3px;
  text-decoration: none;
  padding: 3px 10px;
  margin: 0 4px 0 0;
  border-radius: 999px;
  border: 1px solid #a0d8eb;               /* slightly darker than the fill */
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.scms-link-pair a:hover,
.scms-link-pair a:focus {
  background: var(--scms-blue-btn);
  color: #fff;
  border-color: var(--scms-blue-btn);
}

/* Contact list — name + role lines using a hanging indent so wrapped
   second lines align under the first character of the name rather than
   the "Contacts:" label. Replaces the inline
   `style="text-indent:-20px; margin-left:20px"` hack. */
.scms-contact-list {
  margin: 4px 0 16px 20px;
  text-indent: -20px;
  line-height: 1.5;
}


/* --- Highlight boxes --------------------------------------------------------
   Call-out content blocks applied inline in the CMS page editor.

   USAGE
     <div class="highlight-box highlight-box--red">
       Optional: <p class="highlight-box__title">Heads up</p>
       Body text...
     </div>

   VARIANTS
     --red      Heavy red stroke, white fill   (alerts / warnings)
     --purple   Heavy purple stroke, white fill (SCMS primary brand)
     --blue     Heavy blue stroke, white fill   (info / links out)
     --green    Heavy green stroke, white fill  (success / confirmation)
     --yellow   Solid yellow fill, no stroke    (notes / reminders)
     --gray     Two-tone gray, smaller text     (disclaimers / fine print)

   The --red variant is the modern replacement for the legacy .redbar class.
   ----------------------------------------------------------------------------- */

.highlight-box {
  margin: var(--scms-hlbox-margin);
  /* Remove horizontal padding — the title bar needs to run edge-to-edge.
     Body content gets its padding via the direct-child rule below. */
  padding: 0;
  border-radius: var(--scms-hlbox-radius);
  background-color: #fff;
  color: var(--scms-text);
  font-family: var(--scms-font-body);
  font-size: 16px;
  line-height: 1.5;
  box-shadow: var(--scms-shadow-card);
  overflow: hidden;   /* clip the title bar's corners to the box radius */
}

/* Pad every direct child of the box so content stays inset even though the
   box itself no longer has padding. The title bar overrides this to go
   edge-to-edge. */
.highlight-box > * {
  padding-left: 20px;
  padding-right: 20px;
}

/* Add top/bottom breathing room on the first/last child since the box
   itself no longer has vertical padding. */
.highlight-box > :first-child { margin-top: 0;   padding-top: 16px; }
.highlight-box > :last-child  { margin-bottom: 0; padding-bottom: 16px; }

/* Bold title/lead line inside a highlight box. Rendered as a solid colored
   bar with white text, matching the box's accent color. */
.highlight-box__title {
  font-family: var(--scms-font-heading);
  font-weight: 900;
  font-size: 1.15em;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 14px;   /* breathing room between title bar and body content */
  /* Edge-to-edge colored bar — overrides the generic child padding above. */
  padding: 10px 20px !important;
}

/* When a title is the first child, cancel the first-child top padding so
   the colored bar sits flush against the top edge. */
.highlight-box > .highlight-box__title:first-child { padding-top: 10px; }

/* Lists inside a highlight box: indent the bullets/numbers well inside
   the content column, and tighten vertical rhythm between items so the
   list reads as a compact group rather than loose paragraphs.

   Note: the .highlight-box > * rule sets padding-left: 20px on direct
   children, but this more-specific selector overrides it. The 44px
   value is chosen so it visually clears the 20px content inset and
   adds a further indent for the list markers. */
.highlight-box ul,
.highlight-box ol {
  padding-left: 44px;     /* full indent: clears the 20px box inset + 24px list indent */
  margin: 0 0 14px;       /* match title bar's bottom spacing; no top margin */
}

.highlight-box ul li,
.highlight-box ol li {
  margin-bottom: 0;       /* no gap between items — rely on line-height alone */
  line-height: 1.35;      /* tighter than the box's 1.5 default */
}

/* Nested lists: drop the bottom margin so the parent item doesn't get
   extra space below it. */
.highlight-box ul ul,
.highlight-box ul ol,
.highlight-box ol ul,
.highlight-box ol ol {
  margin: 0;
}

/* --- Stroked variants (white fill, heavy colored border + colored title bar) --- */

.highlight-box--red {
  border: var(--scms-hlbox-stroke) solid var(--scms-red);
}
.highlight-box--red .highlight-box__title { background-color: var(--scms-red); }

.highlight-box--purple {
  border: var(--scms-hlbox-stroke) solid var(--scms-purple);
}
.highlight-box--purple .highlight-box__title { background-color: var(--scms-purple); }

.highlight-box--blue {
  border: var(--scms-hlbox-stroke) solid var(--scms-blue);
}
.highlight-box--blue .highlight-box__title { background-color: var(--scms-blue); }

.highlight-box--green {
  border: var(--scms-hlbox-stroke) solid var(--scms-green);
}
.highlight-box--green .highlight-box__title { background-color: var(--scms-green); }

/* --- Solid variant (yellow fill, no stroke) --- */

.highlight-box--yellow {
  background-color: var(--scms-yellow);
  border: 1px solid var(--scms-yellow-border);  /* subtle edge for definition */
}
/* Yellow keeps dark title text (better contrast than white on yellow) but
   gets an edge-to-edge darker-yellow title bar like the stroked variants. */
.highlight-box--yellow .highlight-box__title {
  background-color: var(--scms-yellow-title);
  color: var(--scms-text);
  /* Reset to the default edge-to-edge title-bar padding (overrides any
     inset padding from the generic .highlight-box > * rule). */
  padding: 10px 20px !important;
  margin: 0 0 14px;
}

/* --- Two-tone gray variant (light fill, mid-gray title bar, smaller text) ---
   Intended for low-emphasis notices like disclaimers and fine print. Uses two
   tones of gray (light fill + mid-gray title bar/border) and steps the body
   font size down from the box's default 16px to 13px. */

.highlight-box--gray {
  background-color: var(--scms-gray-light);
  border: 1px solid var(--scms-gray-mid);
  color: var(--scms-gray-text);
  font-size: 13px;
}
/* Gray title bar — same edge-to-edge treatment as the stroked variants,
   but at a smaller size to match the reduced body text. */
.highlight-box--gray .highlight-box__title {
  background-color: var(--scms-gray-mid);
  color: #fff;
  font-size: 14px;
  padding: 8px 20px !important;
  margin: 0 0 12px;
}


/* -----------------------------------------------------------------------------
   A13. PRICE & DATA TABLES
   ----------------------------------------------------------------------------- */

table.PRICES {
  border-collapse: collapse;
  border: 0 solid var(--scms-text);
  margin: 4px 0 -4px;
}

td.PRICES {
  border: 1px solid var(--scms-text);
  padding: 4px;
  vertical-align: top;
}

td.MEM {
  border: 0;
  padding: 20px;
  vertical-align: middle;
}

tr.PRICES {
  page-break-after: auto;
  page-break-before: auto;
}

td.HEADER { border: 0; padding: 6px 2px 4px; vertical-align: bottom; }
td.PRICE  { border: 0; padding: 6px 2px 4px; vertical-align: top; }
td.TEXT   { border: 0; padding: 9px 2px 5px; vertical-align: top; }

/* View-table header row */
.ViewTable1 th {
  font-family: var(--scms-font-heading);
  font-size: 21px;
  font-weight: bold;
  letter-spacing: -1px;
  height: 30px;
  line-height: 30px;
}


/* -----------------------------------------------------------------------------
   A14. BOARD / AWARDS / RATES LAYOUT
   CSS table-based layout used on board-member, award-winner, and rates pages.
   ----------------------------------------------------------------------------- */

/* Board of Directors */
.board-row        { display: table-row; }
.board-cell       { display: table-cell; padding: 3px 10px; vertical-align: middle; width: 600px; }
.board-cell-photo { display: table-cell; padding: 3px 10px; vertical-align: middle; width: 200px; }

/* Awards */
.awards-row        { display: table; padding: 10px; width: 100%; }
.awards-cell       { display: table-cell; width: 70%; padding-bottom: 10px; vertical-align: middle; }
.awards-cell-photo { display: table-cell; width: 30%; padding-bottom: 10px; vertical-align: middle; }

/* Award cells (inside real <table> elements) */
td.awardphoto  { width: 33%; vertical-align: middle; text-align: center; padding: 20px 10px; }
td.awardwinner { width: 67%; vertical-align: middle; text-align: left;   padding: 20px 10px; }

/* Rates grid -----------------------------------------------------------------
   Label-on-left / value-on-right rate table styled to match the rest of the
   site (purple heading, zebra striping, soft card shadow).

   Implementation notes:
     - `border-collapse: separate` + `border-spacing: 0` is required so the
       rounded corners on the outer .rates element actually clip the inner
       rows; `border-collapse: collapse` would override the radius.
     - `:nth-of-type(even)` works on `display: table-row` elements the same
       way it does on real <tr> elements, so we get zebra striping without
       any HTML changes.
     - The heading targets BOTH `.rates-heading` (which is a single cell in
       the current markup) and any `.rates-row:first-child` cells, so this
       still looks right whether the heading row uses `.rates-heading` cells
       or just the first row of `.rates-cell` cells.
   ----------------------------------------------------------------------------- */

.rates {
  display: table;
  width: 60%;
  max-width: 500px;                           /* don't get huge on wide pages */
  margin: 16px auto;                          /* center horizontally */
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--scms-radius-card);
  box-shadow: var(--scms-shadow-card);
  overflow: hidden;                           /* clip rows to rounded corners */
  font-family: var(--scms-font-body);
  font-size: 16px;
  line-height: 1.4;
}

.rates-body { display: table-row-group; }
.rates-row  { display: table-row; }

/* Column widths — label takes ~65%, value (price) takes ~35%. CSS tables
   share column widths across all rows, so setting these on the first row's
   cells cascades to body rows. Without this the browser auto-sizes columns
   to content, which can make the price column feel cramped. */
.rates .rates-row:first-child > :first-child { width: 65%; }
.rates .rates-row:first-child > :last-child  { width: 35%; }

/* Default cell — first cell in a row is the label, last cell is the value. */
.rates-cell {
  display: table-cell;
  padding: 10px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--scms-divider-light);
}

/* Right-align the value column (last cell in each row). */
.rates-row .rates-cell:last-child {
  text-align: right;
  font-weight: 500;
}

/* Optional helper for prominent price display in a value cell — bumps the
   size and weight so the dollar amount stands out. Combine with span.USD
   (defined in section A6) for the small-caps currency suffix:
       <td class="rates-cell rates-price">$350 <span class="USD">USD</span></td>
*/
.rates-price {
  font-family: var(--scms-font-body);
  font-size: 1.25em;
  font-weight: 700;
  white-space: nowrap;
}

/* Zebra striping on body rows (skips the heading via :not). */
.rates-body .rates-row:nth-of-type(even) .rates-cell {
  background-color: var(--scms-bg-page);
}

/* Drop the bottom border on the last row so it doesn't sit just inside the
   rounded corner. */
.rates-body .rates-row:last-child .rates-cell {
  border-bottom: none;
}

/* Heading row — purple with white text. Covers both possible markup shapes:
     1) cells with class="rates-heading"
     2) the first row of a body that just uses .rates-cell                */
.rates-heading,
.rates .rates-row:first-child .rates-cell {
  display: table-cell;
  background-color: var(--scms-purple);
  color: #fff;
  font-family: var(--scms-font-heading);
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 0.3px;
  padding: 12px 16px;
  border-bottom: none;
}

/* Right-align the value-column heading to match its column. */
.rates .rates-row:first-child .rates-cell:last-child,
.rates-row .rates-heading:last-child {
  text-align: right;
}


/* -----------------------------------------------------------------------------
   A15. GENERIC GRID, COVER CARDS, AND LINK LISTS
   Reusable layout components applied inline in the CMS page editor. Built
   on CSS Grid (instead of display:table) so columns are properly responsive
   and the components can be combined or used standalone.

   COMPONENTS

     .scms-grid                     Base grid wrapper (single column by default)
     .scms-grid--2col               Modifier: 2 equal columns
     .scms-grid--3col               Modifier: 3 equal columns
     .scms-grid--4col               Modifier: 4 equal columns
     .scms-grid__cell               Direct child of .scms-grid (one cell)

     .scms-cover-card               Image-with-caption card (sits inside a cell)
     .scms-cover-card--video        Modifier: landscape video-thumbnail variant
     .scms-cover-card__image        The clickable image/link wrapper
     .scms-cover-card__caption      Caption below the image

     .scms-portrait-card            Circular-photo card for people listings
     .scms-portrait-card__photo     The clickable circular portrait
     .scms-portrait-card__caption   Name + supporting text block
     .scms-portrait-card__name      Person's name (block-level, bold)
     .scms-portrait-card__sub       Sub-line (e.g., "interviewed by ...")
     .scms-portrait-card__actions   Row of action icons below caption

     .scms-award-list               Wrapper for a group of award entries
     .scms-award                    One award entry (photo + body row)
     .scms-award--no-photo          Modifier: hides the photo column entirely
     .scms-award__photo             Photo wrapper with purple top accent
     .scms-award__body              Right-side text block
     .scms-award__badge             Purple pill badge ("Winner", "1st", etc.)
     .scms-award__name              Recipient's name
     .scms-award__dates             Optional life-span dates ("1947–2024")
     .scms-award__affiliation       Institution + work paragraph

     .scms-year-card                Clickable year tile (browse-by-year pages)
     .scms-year-card__year          Large year display (block-level)
     .scms-year-card__sub           Optional subtitle (city, edition, etc.)

     .scms-role-badge               Eye-catching pill for role/position metadata
     .scms-role-badge--green        Green variant (default for board archive)
     .scms-role-badge--purple       Purple variant
     .scms-role-badge--blue         Blue variant

     .scms-bio-photo                Floated headshot for bio pages

     .scms-feature-grid             3-column wrapper for feature cards
     .scms-feature-card             Homepage hero card (image + tab + body)
     .scms-feature-card--{color}    Modifier: purple/blue/green/red tab
     .scms-feature-card__image      Image link wrapper (top of card)
     .scms-feature-card__tab        Floating colored tab (overlaps image)
     .scms-feature-card__body       Dark content panel below image
     .scms-feature-card__title      Optional title inside the dark panel

     .scms-link-list                Multi-column flowing list of links

     .scms-footer                   Site footer (3-column layout)
     .scms-footer__col              One column inside the footer grid
     .scms-footer__heading          Column heading (blue, Overpass 700)
     .scms-footer__links            Two-column link list (Quick Links)
     .scms-footer__link             Individual footer link
     .scms-footer__contact          Contact-info paragraph
     .scms-footer__social           Social icon row

   USAGE — Conference cover grid

     <div class="scms-grid scms-grid--3col">
       <div class="scms-grid__cell">
         <div class="scms-cover-card">
           <a class="scms-cover-card__image" href="program.pdf">
             <img src="cover.jpg" alt="2026">
           </a>
           <p class="scms-cover-card__caption">2026 Chicago</p>
         </div>
       </div>
       ...
     </div>

   USAGE — Multi-column link list

     <ul class="scms-link-list">
       <li><a href="...">1994 Syracuse</a></li>
       <li><a href="...">1992 Pittsburgh</a></li>
       ...
     </ul>
   ----------------------------------------------------------------------------- */

/* --- Base grid (single column by default) --- */

.scms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px 32px;   /* row gap > column gap so caption blocks breathe between rows */
  margin: 24px 0;
  /* 6px horizontal inset gives the leftmost/rightmost cards' drop shadows
     room to render at the grid's outer edge instead of being clipped
     against the container. Cards in the middle of a multi-column grid
     are fine — the 32px column gap already exceeds the shadow blur. */
  padding: 0 6px;
}

.scms-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scms-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scms-grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.scms-grid__cell {
  /* Cells fill their grid track; content alignment is up to the consumer. */
  min-width: 0;   /* prevents long-word overflow from blowing out the column */
}

/* Responsive: collapse multi-column grids on tablet/mobile.
   3-col and 4-col drop straight to a single column at ≤768px (covers
   phones and small tablets); 2-col stays 2-up until the 480px breakpoint. */
@media (max-width: 768px) {
  .scms-grid--3col,
  .scms-grid--4col { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .scms-grid--2col { grid-template-columns: 1fr; }
}


/* --- Cover card (image + caption, with hover frame) --- */

.scms-cover-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 240px;       /* keep cards a comfortable size on wide screens */
  margin: 0 auto;         /* center within their grid cell */
}

/* The image wrapper is the link; its border appears on hover as a colored
   frame to signal "click me". Padding accommodates the border without
   shifting the image when the hover state activates. */
.scms-cover-card__image {
  display: inline-block;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: var(--scms-shadow-card);
  transition: border-color 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
  /* Cancel the generic underline on link images. */
  text-decoration: none;
  line-height: 0;   /* removes the inline-block descender gap under the img */
}

.scms-cover-card__image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 150px;     /* uniform cover height — overrides inline `height` attrs */
}

/* Video-thumbnail variant: landscape 16:9 thumbs need a wider card and the
   image's natural aspect ratio (no fixed height crop). */
.scms-cover-card--video {
  max-width: 280px;
}

.scms-cover-card--video .scms-cover-card__image img {
  height: auto;
  width: 100%;
}

.scms-cover-card__image:hover,
.scms-cover-card__image:focus {
  border-color: var(--scms-purple);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

/* Caption sits below the image as a highlighted bar — purple background with
   white text, edge-to-edge across the card width. Ties visually to the
   purple hover frame and the highlight-box title bars. */
.scms-cover-card__caption {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 8px 10px;
  background-color: var(--scms-purple);
  color: #fff;
  font-family: var(--scms-font-heading);
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
  border-radius: var(--scms-radius-btn);
  box-sizing: border-box;
}


/* --- Portrait card (circular photo + multi-line caption + action icons) ----
   Used for people-listing pages: round portrait at top, name + supporting
   text below, small action icons (e.g. video/audio/transcript) at the
   bottom. Designed to drop into a .scms-grid--3col like the cover cards.

   USAGE
     <div class="scms-grid__cell">
       <div class="scms-portrait-card">
         <a class="scms-portrait-card__photo" href="...">
           <img src="..." alt="Person Name">
         </a>
         <p class="scms-portrait-card__caption">
           <strong class="scms-portrait-card__name">Person Name</strong>
           <span class="scms-portrait-card__sub">interviewed by Someone</span>
         </p>
         <p class="scms-portrait-card__actions">
           <a href="..."><img src="video-icon.png" alt="VIDEO"></a>
           <a href="..."><img src="transcript-icon.png" alt="TRANSCRIPT"></a>
         </p>
       </div>
     </div>
   ----------------------------------------------------------------------------- */

.scms-portrait-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 220px;
  margin: 0 auto;
}

/* Circular photo wrapper. Uses aspect-ratio: 1 + object-fit: cover so any
   source image becomes a clean circle. The wrapper itself carries the
   transparent ring that becomes purple on hover. */
.scms-portrait-card__photo {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 3px solid transparent;
  background-color: #fff;
  overflow: hidden;
  box-shadow: var(--scms-shadow-card);
  transition: border-color 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
  text-decoration: none;
  line-height: 0;
}

.scms-portrait-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.scms-portrait-card__photo:hover,
.scms-portrait-card__photo:focus {
  border-color: var(--scms-purple);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

/* Caption block — name on top line, supporting text below. Uses the body
   font so it reads naturally as descriptive text. Force any inline <br>
   inside __caption to take effect (some CMS editors strip extra whitespace
   around them). */
.scms-portrait-card__caption {
  margin: 14px 0 0;
  font-family: var(--scms-font-body);
  font-size: 0.95em;
  line-height: 1.35;
  color: var(--scms-text);
}

.scms-portrait-card__name {
  display: block;
  font-family: var(--scms-font-heading);
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: -0.2px;
  color: var(--scms-text);
}

.scms-portrait-card__sub {
  display: block;
  font-style: italic;
  color: var(--scms-text-muted);
  margin-top: 2px;
}

/* Action icons row (video / audio / transcript). Centered, with consistent
   spacing between icons and a subtle hover lift. */
.scms-portrait-card__actions {
  margin: 10px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.scms-portrait-card__actions a {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
  opacity: 0.85;
}

.scms-portrait-card__actions a:hover,
.scms-portrait-card__actions a:focus {
  transform: translateY(-1px);
  opacity: 1;
  text-decoration: none;
}

.scms-portrait-card__actions img {
  display: block;
  height: 20px;
  width: auto;
}


/* --- Award entry (photo + caption row, e.g. annual awards pages) ----------
   Used for award winner listings: photo on the left, badge + name +
   affiliation/work on the right. Stacks vertically and centers on phones.

   USAGE — single recipient

     <div class="scms-award-list">
       <div class="scms-award">
         <div class="scms-award__photo">
           <img src="..." alt="Person Name">
         </div>
         <div class="scms-award__body">
           <span class="scms-award__badge">Winner</span>
           <h5 class="scms-award__name">Person Name</h5>
           <p class="scms-award__affiliation">
             Institution<br>
             <em>Title of Work</em> (Publisher, Year)
           </p>
         </div>
       </div>
     </div>

   USAGE — multiple recipients sharing one photo (e.g. co-authors)
   Repeat .scms-award__name + .scms-award__affiliation pairs inside __body.

   CONVENTION — rank/recognition variants within a single award
   The .scms-award__badge accepts any short label. When an award has multiple
   tiers of recognition (First/Second/Third Place, Winner/Honorable Mention,
   Winner/Runner-Up, etc.), list ALL recipients as sibling .scms-award entries
   inside ONE .scms-award-list under ONE <h3>. The badge alone communicates
   the tier — do NOT create separate <h3> subsections like
   "Dissertation Award — Honorable Mention". Keeps the section tidy and the
   visual hierarchy consistent across award types.
   ----------------------------------------------------------------------------- */

.scms-award-list {
  /* Vertical spacing between award entries within a section. */
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 24px 0;
}

.scms-award {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

/* Modifier for awards without photos (e.g. preview pages before photos are
   taken). Hides the photo column and lets the body span full width. */
.scms-award--no-photo .scms-award__photo { display: none; }
.scms-award--no-photo { gap: 0; }

/* Photo column — fixed width on desktop, full image responsive within it.
   The wrapper carries the visual treatment (rounded corners, shadow, purple
   top accent) so it looks consistent even when source images vary in
   aspect ratio. */
.scms-award__photo {
  flex: 0 0 180px;
  width: 180px;
  border-top: 4px solid var(--scms-purple);
  border-radius: 4px;
  background-color: #fff;
  box-shadow: var(--scms-shadow-card);
  overflow: hidden;
  line-height: 0;
}

.scms-award__photo img {
  display: block;
  width: 100%;
  height: auto;
  /* Cancel any inline width/height attributes from legacy markup. */
  max-width: 100%;
}

/* Body column — takes remaining space. */
.scms-award__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Rank/tier badge — purple pill above the name. Inline-block so it sizes
   to its content rather than stretching across the body column. */
.scms-award__badge {
  display: inline-block;
  background-color: var(--scms-purple);
  color: #fff;
  font-family: var(--scms-font-heading);
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--scms-radius-btn);
  margin-bottom: 10px;
}

/* Recipient name — heading style. Reset margin so it sits cleanly under
   the badge (or at the top of the body when there's no badge). */
.scms-award__name {
  margin: 0 0 4px;
  font-family: var(--scms-font-heading);
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--scms-text);
  line-height: 1.2;
}

/* Optional dates line (e.g., life-span "1947–2024") — sits between the
   name and the affiliation/tribute paragraph as a muted subtitle. */
.scms-award__dates {
  margin: 0 0 10px;
  font-family: var(--scms-font-body);
  font-size: 0.95em;
  font-style: italic;
  color: var(--scms-text-muted);
  line-height: 1.2;
}

/* Affiliation + work block. When multiple recipients share a body, the
   bottom margin separates each name/affiliation pair. */
.scms-award__affiliation {
  margin: 0 0 16px;
  font-family: var(--scms-font-body);
  font-size: 1em;
  line-height: 1.4;
}

/* Last affiliation in a body shouldn't add bottom margin — the award-list
   gap handles spacing to the next award. */
.scms-award__body > .scms-award__affiliation:last-child {
  margin-bottom: 0;
}

/* Responsive: stack photo above body and center everything on phones. */
@media (max-width: 768px) {
  .scms-award {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  /* Center the badge (which is inline-block, so text-align on the parent
     doesn't always do it cleanly — explicit margin-auto is safer). */
  .scms-award__body {
    width: 100%;
  }
  .scms-award__badge {
    margin-left: auto;
    margin-right: auto;
  }
}


/* --- Ballot cards (election voting page) ------------------------------------
   Clickable cards for the Regular and Student member ballots. Visual language
   borrows from .scms-award: purple top accent bar, white surface, box shadow.
   The entire card is a link — no button inside.

   Structure:
     .scms-ballot-grid              Horizontal flex row of ballot cards
     .scms-ballot-card              One clickable card (wraps the <a>)
     .scms-ballot-card a            Full-card link — spans the entire surface
     .scms-ballot-card__badge       Purple pill — "Regular Member" / "Student Member"
     .scms-ballot-card__label       Large action label — "Cast Your Ballot"
     .scms-ballot-card__arrow       Chevron/arrow hint

   USAGE
     <div class="scms-ballot-grid">
       <div class="scms-ballot-card">
         <a href="/surveys/?id=RegularElection2026">
           <span class="scms-ballot-card__badge">Regular Member</span>
           <span class="scms-ballot-card__label">Cast Your Ballot</span>
           <span class="scms-ballot-card__arrow">→</span>
         </a>
       </div>
       <div class="scms-ballot-card">
         <a href="/surveys/?id=StudentElection2026">
           <span class="scms-ballot-card__badge">Student Member</span>
           <span class="scms-ballot-card__label">Cast Your Ballot</span>
           <span class="scms-ballot-card__arrow">→</span>
         </a>
       </div>
     </div>
   -------------------------------------------------------------------------- */

.scms-ballot-grid {
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin: 28px 0;
  justify-content: center;
}

.scms-ballot-card {
  flex: 0 1 280px;
  border-top: 4px solid var(--scms-purple);
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--scms-shadow-card);
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-top-color 0.18s ease;
}

.scms-ballot-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
  transform: translateY(-2px);
  border-top-color: var(--scms-blue);
}

.scms-ballot-card a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 24px 20px;
  text-decoration: none;
  color: inherit;
  height: 100%;
  box-sizing: border-box;
}

.scms-ballot-card a:hover {
  text-decoration: none;
}

.scms-ballot-card__badge {
  display: inline-block;
  background-color: var(--scms-purple);
  color: #fff;
  font-family: var(--scms-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--scms-radius-btn);
}

.scms-ballot-card__label {
  font-family: var(--scms-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--scms-text);
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.scms-ballot-card__arrow {
  font-size: 20px;
  color: var(--scms-blue);
  margin-top: 4px;
  transition: transform 0.15s ease;
}

.scms-ballot-card:hover .scms-ballot-card__arrow {
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .scms-ballot-grid {
    flex-direction: column;
    align-items: center;
  }

  .scms-ballot-card {
    width: 100%;
    max-width: 340px;
    flex: none;
  }
}


/* --- Feature card (homepage hero cards: image + floating tab + dark panel) -
   Used for the homepage three-card promo area. Each card has a hero image
   on top with a floating colored "tab" button overlapping the bottom of the
   image, then a dark content panel below.

   Three cards in a row auto-cycle through purple / blue / green via
   :nth-child rules. To force a specific color, add an explicit modifier
   (--purple, --blue, --green, --red).

   USAGE
     <div class="scms-feature-grid">
       <article class="scms-feature-card">
         <a class="scms-feature-card__image" href="/donate">
           <img src="..." alt="">
         </a>
         <a class="scms-feature-card__tab" href="/donate">Donate to SCMS</a>
         <div class="scms-feature-card__body">
           <h3 class="scms-feature-card__title">Optional Title</h3>
           <p>Body copy explaining the card.</p>
         </div>
       </article>
       ... two more cards ...
     </div>

   IMAGE NOTES
     - Recommended source: 720 × 480 px (3:2 landscape), JPG ~85% quality.
     - Display crop is 240px tall, full card width (~360px on desktop).
     - The bottom ~80px gets a dark gradient overlay; keep important
       subject matter in the top two-thirds of the photo (top ~160px).
   ----------------------------------------------------------------------------- */

.scms-feature-grid {
  display: grid;
  /* minmax(0, 1fr) instead of just 1fr — prevents grid columns from
     expanding based on intrinsic content width (which is what makes
     columns appear uneven when image dimensions or long words push
     past the calculated column size). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 40px auto;
}

.scms-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.scms-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22);
}

/* Image area — wraps an <img> so the CMS image picker can swap it visually.
   Fixed display height keeps cards uniform regardless of source aspect. */
.scms-feature-card__image {
  display: block;
  position: relative;
  height: 240px;
  overflow: hidden;
  text-decoration: none;
  line-height: 0;
}

.scms-feature-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark gradient overlay at bottom of image — adds polish and ensures the
   floating tab reads cleanly even on light photos. */
.scms-feature-card__image::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
  pointer-events: none;
}

/* Floating colored tab — sits at the bottom of the image, overlapping into
   the body slightly. Uses left: -12px so the tab "punches out" the side.
   Text is right-aligned so longer labels read toward the visible (right)
   edge of the tab rather than getting clipped by the off-screen left edge. */
.scms-feature-card__tab {
  position: absolute;
  left: -12px;
  /* Anchor to the bottom of the image area (240px) minus the tab's own
     height. Using top instead of bottom lets the tab sit consistently
     regardless of body content length. */
  top: 185px;
  z-index: 2;
  width: 65%;
  padding: 20px 24px;   /* taller, with balanced horizontal padding for centered text */
  background: var(--scms-purple);   /* default; overridden by color modifiers */
  color: #fff;
  font-family: var(--scms-font-body);
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 0.2px;
  text-align: center;
  text-decoration: none;
  /* Allow long labels to wrap to a second line gracefully rather than
     getting clipped or overflowing. */
  white-space: normal;
  line-height: 1.25;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover slides the tab to the right and deepens its shadow. */
.scms-feature-card:hover .scms-feature-card__tab {
  transform: translateX(8px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
}

/* Keep tab text white AND bold in every link state — the generic a:hover
   etc. would otherwise pull color to green/red/blue, and a non-bold default
   weight could leak in from a parent style. */
.scms-feature-card__tab,
.scms-feature-card__tab:link,
.scms-feature-card__tab:visited,
.scms-feature-card__tab:hover,
.scms-feature-card__tab:focus,
.scms-feature-card__tab:active {
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none;
}

/* Dark content panel below the image. flex:1 makes all cards in a row
   match heights even when copy lengths vary. */
.scms-feature-card__body {
  flex: 1 1 auto;
  background: #000;
  color: #fff;
  padding: 34px 24px 30px;
  text-align: center;
}

.scms-feature-card__title {
  margin: 0 0 12px;
  font-family: var(--scms-font-heading);
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #fff;
  /* Override the global h3 styling (light-blue bar + blue left border)
     since we're inside a dark panel. */
  background: transparent;
  border-left: none;
  border-radius: 0;
  padding: 0;
  line-height: 1.2;
}

.scms-feature-card__body p {
  margin: 12px 0;
  line-height: 1.45;
  color: #fff;
}

/* Inline links in the body — keep them visible on dark background. The
   global a:hover/etc. rules would tint them off-brand colors, so we
   override across all states. */
.scms-feature-card__body a,
.scms-feature-card__body a:link,
.scms-feature-card__body a:visited {
  color: #fff;
  text-decoration: underline;
}
.scms-feature-card__body a:hover,
.scms-feature-card__body a:focus {
  color: #fff;
  text-decoration: none;
}

/* --- Auto color cycling for tabs ----------------------------------------
   When three cards sit in a row with no explicit color modifier, cycle
   through purple → blue → green for visual rhythm. Explicit modifiers
   below override this. */
.scms-feature-grid > .scms-feature-card:nth-child(3n+1) .scms-feature-card__tab { background: var(--scms-purple); }
.scms-feature-grid > .scms-feature-card:nth-child(3n+2) .scms-feature-card__tab { background: var(--scms-blue); }
.scms-feature-grid > .scms-feature-card:nth-child(3n+3) .scms-feature-card__tab { background: var(--scms-green); }

/* --- Explicit color modifiers (override the auto-cycle) --- */
.scms-feature-card.scms-feature-card--purple .scms-feature-card__tab { background: var(--scms-purple); }
.scms-feature-card.scms-feature-card--blue   .scms-feature-card__tab { background: var(--scms-blue); }
.scms-feature-card.scms-feature-card--green  .scms-feature-card__tab { background: var(--scms-green); }
.scms-feature-card.scms-feature-card--red    .scms-feature-card__tab { background: var(--scms-red); }

/* Responsive: collapse to single column on smaller screens. The tab also
   widens slightly so the label has room to breathe at narrower widths. */
@media (max-width: 900px) {
  .scms-feature-grid { grid-template-columns: 1fr; }
  .scms-feature-card__tab { width: 55%; }
}


/* --- Year card (clickable year tile with optional subtitle) ---------------
   Used for browse-by-year listings (e.g. past award winners). The whole
   card is one clickable link — year displayed prominently, optional sub-
   line below for context (city, edition, etc.).

   USAGE
     <div class="scms-grid scms-grid--3col">
       <div class="scms-grid__cell">
         <a class="scms-year-card" href="/page/2024_awards">
           <span class="scms-year-card__year">2024</span>
           <span class="scms-year-card__sub">Boston</span>
         </a>
       </div>
       ...
     </div>
   ----------------------------------------------------------------------------- */

.scms-year-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  background-color: #fff;
  border: 2px solid transparent;
  border-radius: var(--scms-radius-card);
  box-shadow: var(--scms-shadow-card);
  text-decoration: none;
  color: var(--scms-text);
  transition: border-color 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
  /* Ensures cards in the same row share equal height regardless of subtitle
     length. */
  height: 100%;
  min-height: 110px;
  box-sizing: border-box;
}

.scms-year-card:hover,
.scms-year-card:focus {
  border-color: var(--scms-purple);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: var(--scms-text);
}

.scms-year-card__year {
  display: block;
  font-family: var(--scms-font-heading);
  font-size: 2.2em;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--scms-purple);
}

.scms-year-card__sub {
  display: block;
  margin-top: 6px;
  font-family: var(--scms-font-body);
  font-size: 0.95em;
  font-weight: 500;
  color: var(--scms-text-muted);
  line-height: 1.2;
}

/* Hover changes the year color to match the brand frame. */
.scms-year-card:hover .scms-year-card__year,
.scms-year-card:focus .scms-year-card__year {
  color: var(--scms-purple);
}


/* --- Role badge (large eye-catching pill for position/title metadata) -----
   Used on bio pages (board archive, officers, committee chairs) to display
   the person's role/title prominently — bigger and more impactful than the
   smaller .scms-award__badge.

   USAGE
     <p class="scms-role-badge">Member, Board of Directors, 2023–2025</p>

   Default color is green; use --purple or --blue modifiers for other tiers
   or roles.
   ----------------------------------------------------------------------------- */

.scms-role-badge {
  display: block;
  width: fit-content;
  margin: 0 0 16px auto;  /* auto left margin pushes the pill to the right */
  padding: 10px 22px;
  background-color: var(--scms-green);
  color: #fff;
  font-family: var(--scms-font-heading);
  font-weight: 700;
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
  border-radius: var(--scms-radius-btn);
  /* Subtle shadow gives it some lift, matching the visual language of the
     other elevated components (highlight boxes, year cards). */
  box-shadow: var(--scms-shadow-btn);
}

/* Color modifiers for different role tiers/types. */
.scms-role-badge.scms-role-badge--purple { background-color: var(--scms-purple); }
.scms-role-badge.scms-role-badge--blue   { background-color: var(--scms-blue); }
.scms-role-badge.scms-role-badge--green  { background-color: var(--scms-green); }


/* --- Bio photo helper (floated headshot for board archive / officer bios) -
   Used on personal bio pages where the photo sits to the left of the bio
   text. Adds rounded corners, soft shadow, and subtle purple top accent
   (matching the .scms-award__photo treatment for visual consistency).

   USAGE
     <img class="scms-bio-photo" src="..." alt="Person Name">

   Stacks centered above the body content on phones.
   ----------------------------------------------------------------------------- */

.scms-bio-photo {
  float: left;
  width: 180px;
  max-width: 100%;
  margin: 0 24px 16px 0;
  border-top: 4px solid var(--scms-purple);
  border-radius: 4px;
  background-color: #fff;
  box-shadow: var(--scms-shadow-card);
  display: block;
}

/* On phones, drop the float and center the photo above the text. */
@media (max-width: 600px) {
  .scms-bio-photo {
    float: none;
    margin: 0 auto 20px;
  }
}

/* --- Right-float variant for election candidate pages (and similar contexts
   where the photo traditionally sits on the right of the bio text).
   All other visual treatment — border, radius, shadow — inherits from
   .scms-bio-photo above.

   USAGE
     <img class="scms-bio-photo scms-bio-photo--right" src="..." alt="Name">
   -------------------------------------------------------------------------- */
.scms-bio-photo--right {
  float: right;
  margin: 0 0 16px 24px;
}

@media (max-width: 600px) {
  .scms-bio-photo--right {
    float: none;
    margin: 0 auto 20px;
  }
}


/* --- Link list (multi-column flowing list) --- */

/* Flows the list into multiple columns based on available width. The
   `column-width` value is the *minimum* column width; the browser fits as
   many as will go and balances them automatically. */
.scms-link-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  column-width: 200px;
  column-gap: 32px;
}

.scms-link-list li {
  /* Override the global `ul li` rules from section A6 — those add disc
     bullets and indented margin that don't suit a column layout. */
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  /* Keep each link on its own line; prevent items splitting across columns. */
  break-inside: avoid;
  page-break-inside: avoid;
}

.scms-link-list li a {
  display: inline-block;
  padding: 2px 0;
  font-family: var(--scms-font-body);
  font-size: 0.95em;
}

/* --- Accented variant ------------------------------------------------------
   Adds a subtle left-border accent bar on each link so the list reads as a
   structured directory rather than a bare run of underlined text. The
   accent echoes the blue-bar h3 section heading above and gives each item
   a tactile target without the visual weight of a full card grid. Use for
   directory pages where each link is a destination (committees, resources,
   policy pages, etc.) and the names are short enough that a full card
   would feel overpadded.

   The base .scms-link-list still controls column flow and item spacing;
   this modifier only restyles the link itself. Column-width is widened
   slightly so 1-line items don't break to 2 lines as often.

   USAGE
     <ul class="scms-link-list scms-link-list--accented">
       <li><a href="...">Committee name</a></li>
       ...
     </ul> */
.scms-link-list--accented {
  column-width: 240px;
  column-gap: 16px;
}

.scms-link-list--accented li {
  /* Tighter inter-item gap so the accented blocks form a continuous
     ribbon of items rather than a list of floating chips. */
  margin: 0 0 8px;
}

.scms-link-list--accented li a {
  display: block;
  padding: 8px 12px;
  background: var(--scms-bg-card);
  border: 1px solid transparent;
  border-left: 3px solid var(--scms-blue);
  border-radius: 6px;
  color: var(--scms-text);
  text-decoration: none;
  line-height: 1.3;
  transition: border-color 0.18s ease,
              background-color 0.18s ease,
              color 0.18s ease,
              transform 0.12s ease;
}

.scms-link-list--accented li a:hover,
.scms-link-list--accented li a:focus {
  border-color: var(--scms-divider-light);
  border-left-color: var(--scms-purple);
  background: var(--scms-bg-pale-blue);
  color: var(--scms-purple);
  text-decoration: none;
  transform: translateX(2px);
}


/* --- Site footer ---------------------------------------------------------
   Three-column footer layout: Quick Links (wider, two-column link grid),
   Contact info, and Social icons. Sits inside the dark host-template
   footer chrome — text is white throughout, headings are SCMS blue.

   USAGE
     <div class="scms-footer">
       <section class="scms-footer__col">
         <h4 class="scms-footer__heading">Quick Links</h4>
         <div class="scms-footer__links">
           <a class="scms-footer__link" href="/">Home</a>
           ... more links ...
         </div>
       </section>
       <section class="scms-footer__col">
         <h4 class="scms-footer__heading">Contact Us</h4>
         <p class="scms-footer__contact">...</p>
       </section>
       <section class="scms-footer__col">
         <h4 class="scms-footer__heading">Connect</h4>
         <div class="scms-footer__social">
           <a href="..."><img ...></a>
         </div>
       </section>
     </div>
   ----------------------------------------------------------------------------- */

.scms-footer {
  display: grid;
  /* Quick Links wider, Contact medium, Connect narrow — proportions match
     the original col-sm-6 / col-sm-4 / col-sm-2 split. */
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) minmax(0, 2fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px;
  color: #fff;
  font-family: var(--scms-font-body);
}

.scms-footer__col {
  min-width: 0;   /* allow columns to shrink without long-content overflow */
}

.scms-footer__heading {
  margin: 0 0 16px;
  color: var(--scms-blue);
  font-family: var(--scms-font-heading);
  font-weight: 700;
  font-size: 1.25em;
  /* Cancel any global h4 styling that might leak in (margins, color). */
  letter-spacing: 0.2px;
  line-height: 1.2;
}

/* Quick Links grid — two columns of stacked links. Row gap is tight
   (2px) so the links sit close together as a compact list; column gap
   stays roomy so the two columns read as separate. */
.scms-footer__links {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px 24px;
}

/* Individual footer link — block-level, white in every state. The
   !important is here because the global a:hover/etc. rules in section A9
   would otherwise pull link color to green/red/blue against the dark
   footer background. Vertical padding is minimal (1px) to keep the
   stacked list tight without sacrificing tap target on mobile (line-
   height carries the rest of the click area). */
.scms-footer__link,
.scms-footer__link:link,
.scms-footer__link:visited,
.scms-footer__link:hover,
.scms-footer__link:focus,
.scms-footer__link:active {
  display: block;
  color: #fff !important;
  text-decoration: none;
  padding: 1px 0;
  font-size: 0.95em;
  line-height: 1.25;
}

.scms-footer__link:hover,
.scms-footer__link:focus {
  text-decoration: none;
}

/* Contact info paragraph — white text, slightly looser line-height for
   readability of multi-line addresses. Inline links inside also stay white. */
.scms-footer__contact {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.6;
}

.scms-footer__contact a,
.scms-footer__contact a:link,
.scms-footer__contact a:visited,
.scms-footer__contact a:hover,
.scms-footer__contact a:focus,
.scms-footer__contact a:active {
  color: #fff !important;
  text-decoration: none;
}

.scms-footer__contact a:hover,
.scms-footer__contact a:focus {
  text-decoration: none;
}

/* Social icon row — flex so icons sit in a tidy line with consistent gap.
   Slight opacity at rest, full opacity on hover. */
.scms-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.scms-footer__social a {
  display: inline-block;
  line-height: 0;
  opacity: 0.85;
  transition: opacity 0.18s ease, transform 0.15s ease;
}

.scms-footer__social a:hover,
.scms-footer__social a:focus {
  opacity: 1;
  transform: translateY(-2px);
}

.scms-footer__social img {
  display: block;
  width: 48px;
  height: auto;
}

/* Responsive: stack columns on tablet and below. Once the layout is
   single-column, the social icons also center themselves as a horizontal
   row so they read as a tidy block under the "Connect" heading rather
   than left-aligned against the edge of the column. */
@media (max-width: 768px) {
  .scms-footer {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .scms-footer__social {
    justify-content: center;
    gap: 16px;
  }
}

/* Single-column links list on phones — two-column grid feels cramped at
   narrow widths. */
@media (max-width: 480px) {
  .scms-footer__links {
    grid-template-columns: 1fr;
  }
}


/* -----------------------------------------------------------------------------
   A16. MISCELLANEOUS
   ----------------------------------------------------------------------------- */

#SpContent { margin-top: 50px; }

#bTitle {
  padding-top: 0;
  --directory-results-secondary-color: 0, 174, 239;
}

#sp-main:before { background: #333; }

#FooterContentArea { padding: 40px 0 20px; }

/* Homepage left column wrapper — reduce default top padding inherited from
   the host template so homepage content sits closer to the hero banner. */
div.hp-left-out { padding-top: 30px; }

hr {
  border-top: 6px solid var(--scms-divider);
  margin: 32px 0 16px;
}

.ForumBreadcrumbs { padding: 20px 8px 4px; }

/* Logo default + responsive size. Block + auto margins center the logo
   inside its container regardless of the parent's text-align. */
img.logo {
  width: 70%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* -----------------------------------------------------------------------------
   A17. RESPONSIVE OVERRIDES
   ----------------------------------------------------------------------------- */

/* Tablet and below (≤768px): stack board/awards/rates cells */
@media (max-width: 768px) {
  .board-cell,
  .awards-cell {
    display: block;
    width: 100%;
    padding-bottom: 15px;
  }
  .board-row,
  .awards-row {
    display: block;
    width: 100%;
    padding-bottom: 0;
  }

  /* Rates table — at narrow widths the two-column CSS table doesn't have
     room to breathe, so we restructure each row as a stack. Data rows put
     the label on top and the price below it (right-aligned, matching
     desktop). The heading row stays as a single horizontal bar with the
     label on the left and "Dues" on the right.                          */
  .rates {
    width: 100%;
  }
  .rates-row {
    display: block;
    width: 100%;
  }
  .rates-cell {
    display: block;
    width: 100%;
    padding: 10px 16px;
  }

  /* Heading row: flex so label and "Dues" sit on one line. The purple
     background goes on the ROW (not the cells) so the gap created by
     justify-content: space-between doesn't show as a white stripe.
     Cells inside the heading row drop their own background and shrink
     to content width.                                                   */
  .rates .rates-row:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background-color: var(--scms-purple);
  }
  .rates .rates-row:first-child .rates-cell,
  .rates .rates-row:first-child .rates-heading {
    display: inline-block;
    width: auto;
    background-color: transparent;
  }
  .rates .rates-row:first-child .rates-cell:last-child,
  .rates-row .rates-heading:last-child {
    text-align: right;
  }
}

/* Mobile (≤480px): narrow fixed-width board card, centered */
@media (max-width: 480px) {
  .board-cell {
    display: block;
    width: 200px;
    vertical-align: top;
    padding: 0 10px 15px;
    margin: 0 auto;
  }
  .board-row {
    display: block;
    padding-bottom: 0;
    margin: 0 auto;
  }
  .board-cell-photo {
    display: table-cell;
    padding: 3px 10px 0;
    vertical-align: bottom;
    width: 200px;
    margin: 0 auto;
  }
  img.logo { width: 100%; }
}




/* -----------------------------------------------------------------------------
   A18. SHARE-NEWS HERO CAROUSEL
   Multi-image rotating banner used at the top of /sharenews/ to showcase
   member achievements (book covers, podcast logos, headshots, flyers).

   Built on Swiper 11 (loaded via CDN on the page itself). Replaces the
   legacy single-image Bootstrap 3 carousel that used `#heroSlider` markup —
   any remaining `#heroSlider` blocks should be migrated to the markup
   shown below.

   USAGE
     <div class="swiper scms-news-carousel">
       <div class="swiper-wrapper">
         <div class="swiper-slide">
           <img src="/resource/resmgr/sharenews/cover.jpg" alt="Book title">
         </div>
         ...more slides...
       </div>
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
       <div class="swiper-pagination"></div>
     </div>

   BEHAVIOR
     - 3 slides visible on desktop, 2 on tablet, 1 on phone
       (configured in the page-level Swiper JS, not in CSS)
     - Auto-advances; pauses on hover/focus
     - Arrows + dots use SCMS purple to match the brand

   We scope every selector under .scms-news-carousel so the Swiper defaults
   on this page never bleed into any other Swiper instance that might be
   added to the site later.
   ----------------------------------------------------------------------------- */

.scms-news-carousel {
  width: 100%;
  /* Bottom padding leaves room for the pagination dots without overlapping
     the slide images. Top padding gives the focus ring on the first slide
     somewhere to live. */
  padding: 8px 0 36px;
  margin: 16px 0 24px;
  /* Swiper's default position is `relative` already, but make it explicit
     so the absolutely-positioned arrows/dots anchor to this element. */
  position: relative;
}

/* Each slide is a fixed 16:9 frame with rounded corners and the same
   light card shadow used elsewhere on the site (see --scms-shadow-card
   in section A1). */
.scms-news-carousel .swiper-slide {
  background-color: var(--scms-bg-pale-blue);
  border-radius: var(--scms-radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* Swiper sets each slide to `display: flex` already; reinforce it so the
     image centers correctly even if a slide is briefly empty. */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--scms-shadow-card);
}

.scms-news-carousel .swiper-slide img {
  width: 100%;
  height: 100%;
  /* `cover` matches the behavior of the legacy .rotator class — fill the
     frame and crop edges as needed rather than letterboxing. */
  object-fit: cover;
  display: block;
}

/* --- Navigation arrows ---
   Swiper renders the arrows as ::after pseudo-elements with a built-in
   chevron glyph. We recolor them to SCMS purple and give them a soft
   white circle background so they remain readable over both light and
   dark cover images. */
.scms-news-carousel .swiper-button-prev,
.scms-news-carousel .swiper-button-next {
  color: var(--scms-purple);
  background-color: rgba(255, 255, 255, 0.85);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Swiper's defaults position the arrow text at the top — center it
     vertically inside our circle. */
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;   /* override Swiper's default negative margin-top */
  box-shadow: var(--scms-shadow-btn);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.scms-news-carousel .swiper-button-prev:hover,
.scms-news-carousel .swiper-button-next:hover {
  background-color: #fff;
  color: var(--scms-green);   /* matches the link hover color in section A9 */
}

/* Shrink the chevron glyph itself so it sits comfortably inside the 40px
   circle. Swiper's default is 44px which would overflow. */
.scms-news-carousel .swiper-button-prev::after,
.scms-news-carousel .swiper-button-next::after {
  font-size: 18px;
  font-weight: 900;
}

/* --- Pagination dots ---
   Sit below the slides. Inactive dots are pale grey; the active dot uses
   the SCMS purple primary brand color. */
.scms-news-carousel .swiper-pagination {
  /* Push the dots into the bottom padding we reserved on the container. */
  bottom: 8px;
}

.scms-news-carousel .swiper-pagination-bullet {
  background-color: var(--scms-divider);
  opacity: 1;          /* override Swiper's default 0.2 opacity */
  width: 10px;
  height: 10px;
  margin: 0 5px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.scms-news-carousel .swiper-pagination-bullet:hover {
  background-color: var(--scms-blue);
}

.scms-news-carousel .swiper-pagination-bullet-active {
  background-color: var(--scms-purple);
  transform: scale(1.15);
}

/* --- Responsive ---
   On narrow viewports, shrink the arrows and tuck them slightly inward so
   they don't crowd the slide content on small phones. */
@media (max-width: 640px) {
  .scms-news-carousel .swiper-button-prev,
  .scms-news-carousel .swiper-button-next {
    width: 32px;
    height: 32px;
  }
  .scms-news-carousel .swiper-button-prev::after,
  .scms-news-carousel .swiper-button-next::after {
    font-size: 14px;
  }
  .scms-news-carousel .swiper-button-prev { left: 6px; }
  .scms-news-carousel .swiper-button-next { right: 6px; }
}


/* -----------------------------------------------------------------------------
   A19. SIG PAGE COMPONENTS
   Reusable building blocks for Scholarly Interest Group (SIG) landing pages
   like /animated_media, /media_industries, etc. Each class is independent —
   pages can opt into any subset.

   COMPONENTS
     .sig-logo-block          Centered SIG logo with a "founded in YYYY"
                              tagline (.sig-logo-block__founded, soft gray
                              Overpass) and a download line of muted gray
                              text with small pill-button JPG/PDF links.
     ol.sig-principles        Replaces a plain <ol> on Mission / Goals /
                              Bylaws lists. Each item becomes a white card
                              with a chunky purple Overpass numeral and a
                              thin purple left border. Nested <ol> reverts
                              to a normal indented list.
     .sig-cta-block           Centered, padded wrapper for the "Visit
                              Members' Group Page" button so it doesn't sit
                              orphaned mid-page.
     .sig-social              Pill-style social-link row (Twitter, Facebook,
                              etc.) with an inline brand icon and hover lift.
                              Mirrors the spirit of .scms-footer__social but
                              styled for in-page use rather than the dark
                              footer.
     .sig-layout              Two-column SIG body wrapper. Body content on
                              the left, .sig-layout__photos column on the
                              right; collapses to stacked rows below 720px.
     .sig-photo               Figure base for inline photos with captions.
                              Caption is small, bold, centered.
     .sig-photo--card         White-card photo treatment: SCMS card radius
                              and shadow, caption inside on a pale-blue
                              strip. Combine with .sig-photo.

   USAGE EXAMPLE
     <div class="sig-logo-block">
       <img src="/resource/resmgr/logos/siglogos/example-900px.jpg" alt="..." />
       <p class="sig-logo-block__founded">
         Example SIG was founded in
         <span class="sig-logo-block__founded-year">YYYY</span>
       </p>
       <p class="sig-logo-block__downloads">
         Right (control) Click to Download Logo
         <a href="...">JPG</a><a href="...">PDF</a>
       </p>
     </div>

     <ol class="sig-principles">
       <li>...</li>
       <li>...</li>
     </ol>

     <div class="sig-cta-block">
       <a href="/group/example" class="btn btn--purple">Visit Members' Group Page to Join</a>
     </div>

     <div class="sig-social">
       <span class="sig-social__label">Follow us:</span>
       <a href="..."><span class="sig-social__icon sig-social__icon--x"></span>@handle</a>
       <a href="..."><span class="sig-social__icon sig-social__icon--fb"></span>Facebook Group</a>
     </div>

     <div class="sig-layout">
       <div class="sig-layout__body">
         <p>Body copy, headings, principle lists, CTA...</p>
       </div>
       <aside class="sig-layout__photos">
         <figure class="sig-photo sig-photo--card">
           <img src="..." alt="..." />
           <figcaption><em>Title</em>, Artist, Year</figcaption>
         </figure>
       </aside>
     </div>
   ----------------------------------------------------------------------------- */

/* --- Logo block: centered logo + soft download line with pill links --- */
.sig-logo-block {
  display: block;
  text-align: center;
  margin: 8px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--scms-divider-light);
}

.sig-logo-block img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.sig-logo-block__downloads {
  font-size: 13px;
  color: var(--scms-text-muted);
  margin: 12px 0 0;
}

/* JPG / PDF links rendered as small light pill buttons */
.sig-logo-block__downloads a {
  display: inline-block;
  background: #f0e8ee;            /* very light purple tint */
  color: var(--scms-purple);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.3px;
  text-decoration: none;
  padding: 3px 10px;
  margin: 0 2px;
  border-radius: 999px;
  border: 1px solid #e2d3df;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sig-logo-block__downloads a:hover,
.sig-logo-block__downloads a:focus {
  background: var(--scms-purple);
  color: #fff;
  border-color: var(--scms-purple);
}

/* "Founded in" tagline that sits just under the SIG logo, above the
   download chips. Overpass at full body size, bold, in a soft light
   gray that sits quietly under the logo without competing with the
   h3s below. Slightly tightened tracking for a tidier look. The year
   is wrapped in .sig-logo-block__founded-year so it can be emphasized. */
.sig-logo-block__founded {
  font-family: var(--scms-font-heading);
  font-size: 1em;
  font-weight: 700;
  color: #c9c9c9;
  letter-spacing: -0.2px;
  margin: 14px 0 4px;
  line-height: 1.3;
}

.sig-logo-block__founded-year {
  font-weight: 800;
}


/* --- Principle list: numbered cards with big purple numerals --- */
ol.sig-principles {
  list-style: none;
  counter-reset: sig-principle;
  margin: 16px 0;
  padding: 0;
}

ol.sig-principles > li {
  counter-increment: sig-principle;
  list-style: none;
  position: relative;
  background: var(--scms-bg-card);
  border-left: 4px solid var(--scms-purple);
  border-radius: 0 var(--scms-radius-card) var(--scms-radius-card) 0;
  margin: 14px 0 0 0;
  padding: 16px 20px 16px 72px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 16px;
  line-height: 1.55;
}

ol.sig-principles > li::before {
  content: counter(sig-principle);
  position: absolute;
  top: 12px;
  left: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--scms-font-heading);
  font-size: 26px;
  font-weight: 900;
  color: var(--scms-purple);
  letter-spacing: -1px;
}

/* Nested ordered lists inside a principle card revert to a normal
   indented list with lower-alpha markers (a, b, c…). The parent <li>
   already has generous left padding for the big purple numeral badge,
   so the nested list only needs a small extra indent to clear the
   parent text. */
ol.sig-principles ol {
  list-style: lower-alpha outside;
  margin: 8px 0 0 24px;
  padding: 0;
}

ol.sig-principles ol li {
  font-size: 15px;
  margin: 4px 0;
  padding-left: 4px;
}

/* Nested unordered lists inside a principle card use standard disc
   bullets. Mirrors the nested <ol> rule above EXACTLY (same list-style
   position, margins, and padding) so a card mixing ordered and
   unordered sub-lists has identical indentation and wrap behavior —
   `outside` markers give both a proper hanging indent where wrapped
   lines align under the text, not under the marker. */
ol.sig-principles ul {
  list-style: disc outside;
  margin: 8px 0 0 24px;
  padding: 0;
}

ol.sig-principles ul li {
  list-style: disc outside;
  font-size: 15px;
  margin: 4px 0;
  padding-left: 4px;
}


/* --- CTA block: centers the join button with breathing room --- */
.sig-cta-block {
  text-align: center;
  /* The wrapper owns the spacing around the CTA so the button's own
     margins don't double-stack on top of the padding here. */
  padding: 8px 0 12px;
  margin: 16px 0;
  background: linear-gradient(180deg, transparent 0, #fafafa 50%, transparent 100%);
}

/* When a button lives inside the CTA block, the wrapper provides the
   surrounding breathing room — strip the button's own vertical margin
   so the gradient spotlight stays tight around the button rather than
   inflating with the button's standalone 20px top/bottom. */
.sig-cta-block a.btn {
  margin-top: 0;
  margin-bottom: 0;
}


/* --- SIG social row: pill-style social links with brand icons --- */
.sig-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 12px 0 0;
}

.sig-social__label {
  font-family: var(--scms-font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--scms-text);
  margin-right: 4px;
}

.sig-social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--scms-bg-card);
  border: 1px solid var(--scms-divider-light);
  border-radius: 999px;
  text-decoration: none;
  color: var(--scms-purple);
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.15s ease, border-color 0.18s ease;
}

.sig-social a:hover,
.sig-social a:focus {
  transform: translateY(-2px);
  border-color: var(--scms-purple);
}

.sig-social a .sig-social__icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  background: var(--scms-purple);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Per-network icon glyphs (CSS masks — color follows the .sig-social__icon
   background, which inherits brand purple). Add additional networks here
   on the same pattern: define a new .sig-social__icon--{name} with the
   appropriate SVG mask. */
.sig-social__icon--x {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2H21.5l-7.31 8.353L23 22h-6.828l-5.34-6.978L4.71 22H1.45l7.82-8.937L1 2h6.99l4.83 6.39L18.244 2zm-1.197 18h1.83L7.06 4h-1.96l11.947 16z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2H21.5l-7.31 8.353L23 22h-6.828l-5.34-6.978L4.71 22H1.45l7.82-8.937L1 2h6.99l4.83 6.39L18.244 2zm-1.197 18h1.83L7.06 4h-1.96l11.947 16z'/></svg>");
}

.sig-social__icon--fb {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12z'/></svg>");
}


/* --- Two-column SIG layout: body text on the left, photo column on the right.
   Collapses to a wrapped row of photos below the body on narrow screens. --- */
.sig-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin: 16px 0;
}

.sig-layout__body {
  flex: 1 1 420px;
  min-width: 0;
}

.sig-layout__photos {
  flex: 0 1 240px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* --- Inline photo figure: image + caption. Caption is small and bold,
   centered under the image by default. Combine with .sig-photo--card for
   the card treatment below. --- */
.sig-photo {
  margin: 0;
  text-align: center;
}

.sig-photo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.sig-photo figcaption {
  font-family: var(--scms-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--scms-text);
}


/* --- Card photo treatment: white card with the SCMS card radius and shadow,
   caption sits inside the card on a pale-blue strip. Re-uses the same card
   tokens as the rest of the site so cover cards, login cards, and SIG photos
   all read as part of the same family. --- */
.sig-photo--card {
  background: var(--scms-bg-card);
  border-radius: var(--scms-radius-card);
  box-shadow: var(--scms-shadow-card);
  overflow: hidden;
}

.sig-photo--card img {
  width: 100%;
}

.sig-photo--card figcaption {
  background: var(--scms-bg-pale-blue);
  padding: 8px 10px;
}


/* --- Responsive: at narrow widths, drop the right-hand photo column under
   the body and lay the photos out as a wrapped row instead of a stack. --- */
@media (max-width: 720px) {
  .sig-layout__photos {
    flex-basis: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .sig-photo { flex: 0 1 200px; }
}




/* -----------------------------------------------------------------------------
   A20. AFFILIATE ORGANIZATIONS
   Responsive 2-column card grid for the Affiliate Organizations page. Each
   card holds a partner logo plus the organization's name; the whole card
   is the click target when an outbound URL exists. Collapses to one column
   on narrow screens.

   STRUCTURE
     .scms-affiliates              Grid wrapper
     .scms-affiliate               One card (always a <div> — see note below)
     .scms-affiliate__logo         Fixed-height logo box (logos vary wildly
                                     in aspect ratio, so the box is fixed
                                     and the <img> is contained inside)
     .scms-affiliate__name         Org name; wrap the text in an inline <a>
                                     when the org has a homepage
     .scms-affiliate__note         Optional small note under the name
     .scms-affiliate--pending      Modifier: gray border, for orgs whose
                                     link isn't yet available

   USAGE (linked card)
     <div class="scms-affiliate">
       <div class="scms-affiliate__logo">
         <img src="..." alt="Example Org logo">
       </div>
       <p class="scms-affiliate__name">
         <a href="https://example.org/">Example Organization</a>
       </p>
     </div>

   USAGE (unlinked card — no homepage)
     <div class="scms-affiliate">
       <div class="scms-affiliate__logo">
         <img src="..." alt="Example Org logo">
       </div>
       <p class="scms-affiliate__name">Example Organization</p>
     </div>

   IMPORTANT — DO NOT wrap the whole card in an <a>. The SCMS CMS strips
   <a> tags that contain block-level children (<div>, <p>, <img>), which
   would split each card's logo and name into two separate boxes. The
   inline <a> inside the .scms-affiliate__name <p> uses a CSS ::after
   overlay to make the entire card clickable while keeping the markup
   CMS-safe.
   ----------------------------------------------------------------------------- */

.scms-affiliates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
  list-style: none;
  padding: 0;
}

/* Collapse to one column on narrow screens. 640px is the point at which
   a two-column layout starts squeezing the logo box uncomfortably. */
@media (max-width: 640px) {
  .scms-affiliates {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* One affiliate card. Uses .scms-bg-card / .scms-radius-card tokens so
   it stays in the same family as cover cards, login cards, SIG photo
   cards (see A19), etc. The hover state lifts the card slightly and
   tints the border in brand purple.

   STRUCTURE NOTE — CMS-SAFE WRAPPER
   --------------------------------
   The card is ALWAYS a <div>, never an <a>, because the SCMS CMS strips
   <a> tags that wrap block-level content (img, div, p). Instead the
   link is an inline <a> inside the .scms-affiliate__name <p>, and CSS
   uses ::after on the link to overlay the entire card as a click
   target. This pattern survives CMS sanitizers and keeps the whole
   card clickable.

   SIZING
   ------
   Cards have a FIXED height (not min-height) and rigid internal zones
   so every card in the grid is visually identical regardless of logo
   aspect ratio or org-name length. The grid gives every column the
   same width; the fixed height makes every row line up. Content is
   centered vertically so one-line names don't sit awkwardly at the
   bottom of the card.

     Total card height        = 110px
       padding-top            12px
       logo zone (fixed)      50px
       gap                     8px
       name zone (auto)       up to 36px (2 lines)
       padding-bottom         12px
                            ------
                              up to 118px, centered in 110px
*/
.scms-affiliate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  background: var(--scms-bg-card);
  border-radius: var(--scms-radius-card);
  padding: 12px 16px;
  border: 1px solid var(--scms-divider-light);
  color: var(--scms-text);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  height: 110px;
  box-sizing: border-box;
  overflow: hidden;
}

/* The name's inline <a> is the only link in the card. Its ::after
   pseudo-element is stretched to fill the entire card, making the
   whole card clickable while keeping the underlying markup CMS-safe.
   z-index: 1 sits the overlay above the logo and name text so clicks
   anywhere on the card hit the link.

   The card's :hover/:focus-within rules (below) react to interaction
   on the inline <a> and style the parent card. */
.scms-affiliate__name a,
.scms-affiliate__name a:link,
.scms-affiliate__name a:visited {
  color: inherit;
  text-decoration: none;
}

.scms-affiliate__name a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* Card-level hover state, driven by the inline <a>. :hover on the
   card itself works for mouse users; :focus-within propagates focus
   from the inline <a> for keyboard users. */
.scms-affiliate:hover,
.scms-affiliate:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
  border-color: var(--scms-purple);
}

.scms-affiliate__name a:focus-visible {
  outline: 2px solid var(--scms-purple);
  outline-offset: 4px;
}

/* Fixed-height logo wrapper. Logos in the affiliate set range from square
   (ACLS) to tall (SFC) to extra-wide (MeCCSA); locking the box height and
   using object-fit: contain keeps all the cards on a row at the same
   visual height regardless of native aspect ratio. flex: 0 0 50px is
   used (instead of just height) so the box can't shrink or grow if the
   name underneath wraps to fewer lines than expected.

   max-width: 90% allows wide wordmark logos to take most of the card's
   horizontal space while still leaving a small visual buffer at the
   edges; the height cap still rules for tall logos. */
.scms-affiliate__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 0 0 50px;
}

.scms-affiliate__logo img {
  max-height: 50px;
  max-width: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Org name. Two-line clamp keeps the grid tidy without making the cards
   tall enough to fit the rare 3-line outliers (e.g., "Media,
   Communications and Cultural Studies Association"). The full title
   stays in the markup for screen readers and tooltips. Margin is zeroed
   to override the global p { margin } from the base stylesheet. */
.scms-affiliate__name {
  font-family: var(--scms-font-body);
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  color: inherit;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Optional small note under the name (e.g., "link coming soon"). */
.scms-affiliate__note {
  font-family: var(--scms-font-body);
  font-size: 0.85em;
  color: var(--scms-text-muted);
  margin: 6px 0 0;
  line-height: 1.3;
}

/* --- Pending variant ---------------------------------------------------------
   For affiliates whose homepage link isn't available yet (e.g., conference-
   contingent partners). Replaces the blue top accent with the neutral
   divider color, drops a bit of opacity, and hides the empty logo box so
   the card doesn't show a phantom gap. */
.scms-affiliate--pending {
  border-top-color: var(--scms-divider);
  opacity: 0.85;
  justify-content: center;
}

.scms-affiliate--pending .scms-affiliate__logo { display: none; }


/* -----------------------------------------------------------------------------
   A21. CONFERENCE PROPOSAL GUIDE
   Readability layer for long, list-heavy guide pages — initially built for
   "Submitting a Proposal for the SCMS Annual Conference" but reusable for any
   text-heavy how-to page with the same structure (intro prose, repeating
   h4 + ol blocks, bolded lead sentences inside list items, single CTA at the
   bottom).

   How to apply: add `class="scms-proposal-guide"` to a wrapper around the
   page body content (or to <body> if the CMS allows). All rules below are
   scoped so they don't affect other pages.

   What it does, without changing any content:
     1. Section counters on the h4 headings so readers get a sense of place
        ("3 / 6 sections in").
     2. A subtle accent bar / generated badge under each h4 to separate the
        five guidance sections from each other.
     3. A "lead paragraph" treatment on the opening prose so dense intro
        text reads with a softer entry point.
     4. Highlights the leading <strong> in each ordered-list item — the
        actionable takeaway — so readers can scan the rules without parsing
        every sentence.
     5. More breathing room between list items so each rule reads as its
        own beat.
     6. A standout CTA panel around the final "Conference Portal" button so
        the destination feels like a destination, not a footnote.
   ----------------------------------------------------------------------------- */

/* Scope: every rule below is qualified with .scms-proposal-guide so it does
   not bleed into other pages that use the same base tags. */

.scms-proposal-guide {
  counter-reset: proposal-section;
  /* Slightly looser line-height across the whole guide for long-read comfort.
     Inherits, so list items and paragraphs both benefit. */
  line-height: 1.6;
}

/* --- Intro / lead paragraph -------------------------------------------------
   The first <p> in the guide is the framing paragraph (mission + audience).
   Bump its size and color it slightly muted so it reads as an "intro" rather
   than another body paragraph. */
.scms-proposal-guide > p:first-of-type {
  font-size: 1.075em;
  line-height: 1.6;
  color: var(--scms-text);
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--scms-divider-light);
  margin-bottom: 20px;
}

/* --- Section headings (h4 as section delimiters) ----------------------------
   The page uses h4 to break the guide into five sections. Default h4 styling
   (Roboto 17px bold, no visual separator) is too quiet for that job. Promote
   them visually with a numbered badge + a colored underline so each section
   feels like a deliberate stop. */
.scms-proposal-guide h4 {
  counter-increment: proposal-section;
  position: relative;
  font-family: var(--scms-font-heading);
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--scms-text);
  margin: 44px 0 16px;
  padding: 0 0 10px 52px;
  border-bottom: 2px solid var(--scms-bg-light-blue);
}

/* Numbered badge in the gutter to the left of each h4. Purple circle with
   white numeral — matches the news date badge / SIG color treatments
   elsewhere in the stylesheet. */
.scms-proposal-guide h4::before {
  content: counter(proposal-section);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--scms-purple);
  color: #fff;
  font-family: var(--scms-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* --- Ordered lists ----------------------------------------------------------
   The four numbered lists are the heart of the guide — each item starts with
   a bolded takeaway ("Deadlines are firm.") followed by an explanation. Give
   each item room to breathe and a subtle left border so the list reads as a
   stack of self-contained tips rather than a wall of numbers. */
.scms-proposal-guide ol {
  padding-left: 28px;
  margin: 0 0 12px;
}

.scms-proposal-guide ol > li {
  margin: 16px 0 0 0;
  padding: 12px 16px 14px 12px;
  background-color: var(--scms-bg-page);
  border-left: 4px solid var(--scms-bg-light-blue);
  border-radius: 0 6px 6px 0;
  /* Reset the base ol li margin-left so the bullet number aligns cleanly
     against the new left border. */
  margin-left: 0;
}

.scms-proposal-guide ol > li:first-child {
  margin-top: 8px;
}

/* On hover, deepen the accent so the item the user is reading is anchored
   visually. Subtle — this isn't a clickable item, just a focus aid. */
.scms-proposal-guide ol > li:hover {
  border-left-color: var(--scms-purple);
  background-color: #fff;
}

/* The bolded lead sentence inside each list item is the actionable rule.
   Bump it to display-block so it sits on its own line above the explanation,
   and color it purple so it pops without needing a heavier weight. Applies
   only to the FIRST <strong> child of each item — long items occasionally
   bold a word mid-sentence and we don't want those promoted too. */
.scms-proposal-guide ol > li > strong:first-child {
  display: block;
  color: var(--scms-purple);
  font-family: var(--scms-font-heading);
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}

/* Nested lists (sub-bullets inside a numbered item, e.g. the workshops/
   roundtables note) drop the card treatment so they read as a continuation
   of their parent, not a new item. */
.scms-proposal-guide ol > li ul,
.scms-proposal-guide ol > li ol {
  margin-top: 8px;
}

.scms-proposal-guide ol > li ul > li,
.scms-proposal-guide ol > li ol > li {
  background: transparent;
  border-left: none;
  padding: 0;
  margin: 6px 0 0 12px;
  border-radius: 0;
}

.scms-proposal-guide ol > li ul > li:hover,
.scms-proposal-guide ol > li ol > li:hover {
  background: transparent;
}

/* --- Body paragraphs (the "what is this kind of proposal" section) ---------
   The paragraphs between the first two h4s explain proposal types. They're
   long; a slightly larger max-width via padding keeps the line length
   readable on wide screens. */
.scms-proposal-guide > p {
  margin: 12px 0;
}

/* The closing send-off paragraph ("SCMS wishes you luck...") leads into the
   CTA button. Center it and bump the size so it reads as a closing line,
   not another body paragraph. */
.scms-proposal-guide > p:has(+ a.btn--blue):last-of-type,
.scms-proposal-guide > p.scms-proposal-guide__closing {
  text-align: center;
  font-size: 1.05em;
  margin: 36px auto 12px;
  max-width: 720px;
}

/* --- Final CTA panel --------------------------------------------------------
   The page funnels everything toward the "Conference Portal" button. Wrap
   the trailing button in a light panel so it reads as a destination. Targets
   the bare `a.btn.btn--blue` that sits at the end of the guide. */
.scms-proposal-guide > a.btn.btn--blue:last-child {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 8px auto 32px;
  padding: 14px 0;
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* --- Inline links inside the guide ------------------------------------------
   Several list items link to the Conference Bulletin Board, FAQ, etc. The
   default link styling is fine, but inside the highlighted list-item cards
   it can blend in. Add an underline so links are unambiguous against the
   card background. */
.scms-proposal-guide ol > li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Responsive: tighten the badge gutter on phones -------------------------
   On narrow screens, a 52px left-padding on h4 wastes horizontal space.
   Shrink the badge and the padding together so the heading still reads
   comfortably. */
@media (max-width: 600px) {
  .scms-proposal-guide h4 {
    padding-left: 42px;
    font-size: 1.2em;
  }
  .scms-proposal-guide h4::before {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
  .scms-proposal-guide ol {
    padding-left: 22px;
  }
  .scms-proposal-guide ol > li {
    padding: 10px 12px 12px 10px;
  }
}


/* -----------------------------------------------------------------------------
   A22. FLOATING TABLE OF CONTENTS
   In-page navigation for long-read guide pages. Built as a fixed-position
   pill button at the lower-right that expands into a panel listing every
   section heading. The .scms-toc component is intentionally generic — drop
   it on any page with a sequence of section headings to get jump links +
   active-section highlighting.

   Pages currently using this widget:
     - Conference Proposal Guide   wrapper .scms-proposal-guide, h4 sections
                                   (file: Submitting_a_Proposal_for_SCMS_Annual_Conference_v4.html)
     - FAQs                        wrapper .scms-faq-page,        h3 sections
                                   (file: FAQs_v527.html)
     - Conference Guidelines       wrapper .scms-conference-guide, h3 sections
                                   (file: General_Conference_Guidelines_and_Procedures_v527.html)

   ANCHOR STRATEGY (important — keep consistent across pages)
   ----------------------------------------------------------
   Section IDs are assigned at RUNTIME by the inline <script> that ships with
   the widget, NOT hand-authored in the HTML. The script slugifies each
   heading's text content (lowercase, alphanumerics + hyphens, capped at 60
   chars, with collision suffixing). This keeps the underlying page HTML
   clean and means editors can rename or reorder sections without having to
   maintain id attributes by hand. Two consequences:

     1. Do NOT add id="..." to the sectioning headings in the page HTML.
        If an id already exists the script honors it, but the convention is
        to let the script generate them.
     2. The scroll-margin-top rule below MUST list every page scope that
        adopts the widget, so jump targets land below the sticky site
        header. Add a new selector here when adopting the widget on a new
        page.

   Per-page wiring (only three things differ between adopting pages):
     - the wrapper class queried by the script  (e.g. .scms-faq-page)
     - the heading level queried by the script  (h3, h4, etc.)
     - the selector listed in the scroll-margin rule below

   States:
     .scms-toc                 — root nav element (closed by default)
     .scms-toc--open           — panel expanded (toggled by JS)
     .scms-toc__toggle         — the pill button
     .scms-toc__panel          — the dropdown-style list panel
     .scms-toc__list           — the <ol> of section links
     .scms-toc__link           — individual section link
     .scms-toc__link--active   — currently-visible section (set by JS via
                                 IntersectionObserver)
   ----------------------------------------------------------------------------- */

/* Root container — fixed to the lower-right corner so it floats above the
   page content. Pointer-events:none on the root lets clicks pass through
   the empty space around the button; the button itself re-enables them. */
.scms-toc {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  font-family: var(--scms-font-body);
  pointer-events: none;
}

.scms-toc > * {
  pointer-events: auto;
}

/* --- Toggle button ----------------------------------------------------------
   Pill-shaped button with an icon + label. Purple to match the proposal
   guide's section badges (visual consistency). */
.scms-toc__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--scms-purple);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px 12px 16px;
  font-family: var(--scms-font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.scms-toc__toggle:hover,
.scms-toc__toggle:focus {
  background-color: #8c3582;     /* darker purple — derived from --scms-purple */
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  outline: none;
}

.scms-toc__toggle:focus-visible {
  outline: 3px solid var(--scms-blue);
  outline-offset: 2px;
}

/* Icon inside the toggle — three horizontal lines representing the TOC.
   Implemented as a flex column of spans so we don't need an SVG/icon font. */
.scms-toc__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
}

.scms-toc__icon::before,
.scms-toc__icon::after,
.scms-toc__icon span {
  content: "";
  display: block;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
}

.scms-toc__icon::before { width: 100%; }
.scms-toc__icon span    { width: 75%;  }
.scms-toc__icon::after  { width: 50%;  }

/* Close-state icon flip — when the panel is open, the toggle shows an X
   instead of the lines. */
.scms-toc--open .scms-toc__icon::before {
  transform: rotate(45deg) translate(3px, 4px);
  width: 100%;
}
.scms-toc--open .scms-toc__icon span {
  opacity: 0;
}
.scms-toc--open .scms-toc__icon::after {
  transform: rotate(-45deg) translate(3px, -4px);
  width: 100%;
}

.scms-toc__icon::before,
.scms-toc__icon::after,
.scms-toc__icon span {
  transition: transform 0.2s ease, opacity 0.15s ease, width 0.2s ease;
}

/* --- Panel ------------------------------------------------------------------
   Sits above the toggle button, anchored to the right edge. Hidden by
   default (opacity + transform + visibility) so it can animate in. */
.scms-toc__panel {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 48px);
  max-height: 70vh;
  overflow-y: auto;
  background-color: var(--scms-bg-card);
  border-radius: var(--scms-radius-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
              0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 16px 8px 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.scms-toc--open .scms-toc__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scms-toc__heading {
  font-family: var(--scms-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--scms-text-muted);
  margin: 0 0 8px 12px;
  padding: 0;
}

/* --- List -------------------------------------------------------------------
   Ordered list of section links. Resets the generic ol/li styling from A6
   so the TOC doesn't inherit indentation/decimal markers (the numbering
   comes from a CSS counter on the links themselves, matching the section
   badges in A21). */
.scms-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-item;
}

.scms-toc__list li {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-increment: toc-item;
}

/* --- Links ------------------------------------------------------------------
   Each section link is a full-width block with a number badge on the left
   matching the in-page section badges (visual continuity). */
.scms-toc__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--scms-text);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.35;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.scms-toc__link::before {
  content: counter(toc-item);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--scms-bg-light-blue);
  color: var(--scms-text);
  font-family: var(--scms-font-heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.scms-toc__link:hover,
.scms-toc__link:focus {
  background-color: var(--scms-bg-page);
  color: var(--scms-purple);
  text-decoration: none;
  outline: none;
}

.scms-toc__link:focus-visible {
  outline: 2px solid var(--scms-blue);
  outline-offset: -2px;
}

/* Active state — applied by JS as the user scrolls past each section. The
   active link gets a purple number badge and bold purple text. */
.scms-toc__link--active {
  background-color: var(--scms-bg-page);
  color: var(--scms-purple);
  font-weight: 600;
}

.scms-toc__link--active::before {
  background-color: var(--scms-purple);
  color: #fff;
}

/* --- Anchor scroll offset ---------------------------------------------------
   When the user clicks a TOC link, the browser jumps so the heading sits
   below the SCMS sticky site header (~72px) plus a comfortable cushion.
   Adjust this value if the header height ever changes.

   IDs on these headings are generated at runtime by the TOC script (see the
   anchor strategy notes at the top of A22). The selector list below must
   include the sectioning headings for every page that adopts the widget,
   so the runtime-assigned ids resolve to jump targets that land cleanly. */
.scms-proposal-guide h4,
.scms-faq-page h3,
.scms-conference-guide h3 {
  scroll-margin-top: 116px;
}

/* --- Responsive: mobile adjustments -----------------------------------------
   On phones, the toggle pill stays in the corner but shrinks slightly and
   loses its text label (icon only) to preserve real estate. The panel
   widens toward full-screen. */
@media (max-width: 600px) {
  .scms-toc {
    bottom: 16px;
    right: 16px;
  }

  .scms-toc__toggle {
    padding: 12px;
    font-size: 0;       /* hides the label text */
    gap: 0;
  }

  .scms-toc__toggle .scms-toc__icon {
    width: 18px;
  }

  .scms-toc__panel {
    width: calc(100vw - 32px);
    right: 0;
    max-height: 65vh;
  }
}

/* --- Print: hide the TOC ---------------------------------------------------
   The floating widget is interactive scaffolding, not page content. Strip
   it from printed output. */
@media print {
  .scms-toc { display: none; }
}


/* -----------------------------------------------------------------------------
   A23. CAUCUS / SIG FUNDING REQUEST PAGE
   Page-scoped enhancements for the Caucus/SIG Funding Request page. The page
   is a long-form policy document followed by an embedded Jotform iframe. The
   most important data on the page is the two dollar amounts in "Funding
   Limits" — these get pulled out of the body bullet list and shown as
   high-emphasis stat cards. Section <hr> rules are softened from the global
   6px slab to a thin centered divider so the page reads as one connected
   request guide rather than six disconnected slabs. The embedded form is
   wrapped in a subtle white card so it sits as a recognizable destination
   at the bottom of the page rather than floating loose under the last
   paragraph.

   All rules are scoped under .scms-fund-page so they don't leak elsewhere.

   COMPONENTS

     .scms-fund-page                Root wrapper for the funding-request page
     .scms-fund-section             One <h4>-headed policy block (optional;
                                    only used to tighten heading rhythm)

     .scms-fund-limits              Modifier on .scms-grid for the two
                                    funding-limit stat cards (tighter gap)
     .scms-fund-card                Funding-amount stat card (one per cell)
     .scms-fund-card__label         Group name (Caucuses / SIGs)
     .scms-fund-card__amount        Large dollar amount (the focal element)
     .scms-fund-card__note          Small qualifier line below the amount

     .scms-fund-form-frame          White card wrapper for the Jotform iframe

   USAGE — Funding-limit stat cards

     <div class="scms-grid scms-grid--2col scms-fund-limits">
       <div class="scms-grid__cell">
         <div class="scms-fund-card">
           <span class="scms-fund-card__label">Caucuses</span>
           <span class="scms-fund-card__note">May request a maximum allocation of</span>
           <span class="scms-fund-card__amount">$600</span>
         </div>
       </div>
       ...
     </div>
   ----------------------------------------------------------------------------- */

/* Root wrapper. Holds page-scoped overrides so the softened <hr> and
   tightened heading rhythm only apply to this page. */
.scms-fund-page {
  /* Nothing on the wrapper itself — it's a scope hook. */
}

/* Softer dividers between policy sections. The global <hr> is a 6px
   gray slab that, repeated six times on this page, dominates the layout.
   Inside the funding page we render a thin two-tone rule with extra
   vertical breathing room so each section feels like a chapter break
   rather than a hard wall. */
.scms-fund-page hr {
  border: 0;
  border-top: 1px solid var(--scms-divider-light);
  margin: 28px 0 4px;
  height: 0;
}

/* Tighten the gap between an <hr> and the next <h4>. The global h4 has
   margin-top:32px; combined with the hr's bottom margin that pushes
   section headings too far from their divider. */
.scms-fund-page hr + .scms-fund-section > h4:first-child,
.scms-fund-page hr + h4 {
  margin-top: 20px;
}

/* Funding-limit stat cards -------------------------------------------------- */

/* Tighter gap than the default 36px/32px grid spacing — the two cards
   read as a paired set. */
.scms-fund-limits {
  gap: 20px;
  margin: 12px 0 20px;
}

/* The card itself. Visual model is .scms-year-card (centered column with
   a large focal element), but rendered as a static stat block rather
   than a clickable tile, and with the SCMS purple as the amount color
   to echo the brand. */
.scms-fund-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 18px 24px;
  height: 100%;
  min-height: 150px;
  background-color: var(--scms-bg-card);
  border: 2px solid var(--scms-bg-light-blue);
  border-radius: var(--scms-radius-card);
  box-shadow: var(--scms-shadow-card);
  box-sizing: border-box;
}

/* Group label sits at the top of the card. Larger and heavier than the
   note line below it so it reads as a true card header — but still
   subordinate to the dollar amount which is the visual focal point. */
.scms-fund-card__label {
  display: block;
  font-family: var(--scms-font-heading);
  font-size: 1.2em;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--scms-text);
  line-height: 1.2;
}

/* Qualifier line — sits between the label and the amount as a small
   connective phrase. Muted text, slightly smaller than body. */
.scms-fund-card__note {
  display: block;
  margin-top: 6px;
  max-width: 36ch;
  font-family: var(--scms-font-body);
  font-size: 0.85em;
  font-weight: 500;
  color: var(--scms-text-muted);
  line-height: 1.3;
}

/* Hero element — the dollar amount. Sized and weighted like the year on
   .scms-year-card, colored brand purple. Source-order is intentionally
   last so the amount visually anchors the bottom of the card. */
.scms-fund-card__amount {
  display: block;
  margin-top: 6px;
  font-family: var(--scms-font-heading);
  font-size: 2.6em;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--scms-purple);
}

/* Embedded Jotform iframe wrapper ------------------------------------------ */

/* The Jotform iframe ships unframed, which leaves it floating at the
   bottom of the page with no visual home. Wrap it in a white card that
   matches the surrounding component aesthetic (same radius, same shadow
   token, light blue edge to echo the funding-limit cards above). 6px of
   horizontal margin gives the drop shadow room to render at the page
   margins rather than being clipped against them. */
.scms-fund-form-frame {
  margin: 28px 6px 16px;
  padding: 18px;
  background-color: var(--scms-bg-card);
  border: 2px solid var(--scms-bg-light-blue);
  border-radius: var(--scms-radius-card);
  box-shadow: var(--scms-shadow-card);
}

.scms-fund-form-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Responsive: pull the cards in a touch on small screens so the dollar
   amount stays the focal element without crowding. */
@media (max-width: 480px) {
  .scms-fund-card { min-height: 130px; padding: 18px 14px 20px; }
  .scms-fund-card__amount { font-size: 2.2em; letter-spacing: -1.5px; }
}


/* -----------------------------------------------------------------------------
   A24. DONATION FUNDS PAGE
   Page-scoped enhancements for /donations/ (the "Donation Funds" landing
   page). The CMS markup is fixed and unstylable at the source: each fund
   is an inline-styled <div style="padding: 10px 0px 10px 0px;"> containing
   an <h2> (with an inline "Donate Online" anchor) followed by a description
   text node, with sibling <div style="border-bottom:dotted 1px #dddddd;">
   hairlines between funds. We can't add classes, so every selector here
   targets that inline-style pattern under #SpContent.

   GOALS
     1. Promote each fund block into a recognizable white card.
     2. Hide the noisy dotted hairlines (card gaps replace them).
     3. Neutralize the dashed phantom border the CMS injects on
        #content-fullArea via an inline <style> tag.
     4. Pull the inline "Donate Online" anchor out of the <h2> visually and
        present it as a green CTA button, using the existing brand tokens.
     5. Polish the intro paragraph, the fund-selector dropdown, and the
        "My Donation History" link in the sub-nav.

   All rules are scoped under #SpContent (or #SpNavBar for the dropdown row)
   so they don't leak to other CMS pages that share these IDs.
   ----------------------------------------------------------------------------- */

/* --- Neutralize the inline dashed border the CMS wraps around the content.
   The page ships an inline <style> setting a 1px dashed transparent border
   on #content-fullArea. It's invisible but offsets layout by 2px and is
   pure noise; flatten it. -------------------------------------------------- */
#SpContent #content-fullArea {
  border: 0 !important;
  max-width: 100% !important;
}

/* --- Intro paragraph: a little more room and a touch more line-height than
   default body copy, since it's the page's lede. ---------------------------- */
#SpContent #idy6 {
  font-size: 1.0625em;
  line-height: 1.55;
  margin: 8px 0 24px;
  color: var(--scms-text);
}

/* --- Fund card: target the inline-styled wrapper that holds each fund's
   <h2> + description. The attribute selector matches the exact inline
   style the CMS emits ("padding: 10px 0px 10px 0px;"). ---------------------- */
#SpContent div[style*="padding: 10px 0px 10px 0px"] {
  background-color: var(--scms-bg-card);
  border: 1px solid var(--scms-divider-light);
  border-left: 6px solid var(--scms-purple);
  border-radius: var(--scms-radius-card);
  padding: 20px 24px 22px !important;   /* override inline padding */
  margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

#SpContent div[style*="padding: 10px 0px 10px 0px"]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
}

/* --- Hide the dotted-hairline divs between cards. They were the original
   visual separator; the card gap now does that job. ------------------------- */
#SpContent div[style*="border-bottom:dotted 1px"],
#SpContent div[style*="border-bottom: dotted 1px"] {
  display: none;
}

/* --- Card heading: shrink the page-global <h2> down to a card-appropriate
   size, kill its big top margin (each h2 is the first child of its card
   now), and lay out the title + inline "Donate Online" anchor as a flex row
   so the anchor can be styled as a button pinned to the right. -------------- */
#SpContent div[style*="padding: 10px 0px 10px 0px"] > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 1.375em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
  margin: 0 0 10px;
  color: var(--scms-text);
}

/* Hide the "»" character that sits between the title text and the
   anchor inside the <h2>. The character is a bare text node so we can't
   target it directly; instead we visually trim it by overriding the h2's
   inner whitespace and using the anchor's own background to cover. Easiest
   path: shrink the gap and let the anchor button visually separate. We
   keep the » in the DOM (no HTML change), but make it a muted, smaller
   inline marker. This is achieved by styling siblings via the anchor.    */

/* --- Promote the inline "Donate Online" anchor inside the <h2> to a
   green CTA button. The anchor is the only <a> directly inside the card's
   <h2>, so we can target it without a class. -------------------------------- */
#SpContent div[style*="padding: 10px 0px 10px 0px"] > h2 > a {
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--scms-font-body);
  font-size: 0.75em;        /* relative to h2's 1.375em -> ~14px */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background-color: var(--scms-green);
  padding: 9px 16px;
  border-radius: var(--scms-radius-btn);
  transition: background-color 0.15s ease;
}

#SpContent div[style*="padding: 10px 0px 10px 0px"] > h2 > a:hover,
#SpContent div[style*="padding: 10px 0px 10px 0px"] > h2 > a:focus {
  background-color: var(--scms-green-hover);
  color: #fff;
  text-decoration: none;
}

/* --- The "»" character lives as a bare text node between the title text
   and the anchor. We can't select a text node directly, but we can collapse
   its visual weight by tightening the h2's letter-spacing for that gap and
   muting it via the title's color. As a practical workaround, set the h2's
   font-feature so the » blends in. This is cosmetic only — the » stays in
   place but reads as a quiet separator rather than a loud arrow. ------------ */
#SpContent div[style*="padding: 10px 0px 10px 0px"] > h2 {
  /* Give the » a calmer presence by riding on the same heading color but
     leaning on the button to do the visual heavy lifting. No selector
     change needed; this block exists for documentation. */
}

/* --- Sub-nav row: the fund-selector <select> and "My Donation History"
   link sit in #SpNavBar above the card list. Give them a quiet card of
   their own so the page has a clear top "controls" zone. -------------------- */
#SpNavBar form[name="DonateNow"] {
  display: inline-block;
  margin: 0 16px 0 0;
  vertical-align: middle;
}

#SpNavBar form[name="DonateNow"] select {
  font-family: var(--scms-font-body);
  font-size: 15px;
  padding: 8px 12px;
  border: 1px solid var(--scms-divider);
  border-radius: var(--scms-radius-btn);
  background-color: #fff;
  min-width: 280px;
  cursor: pointer;
}

#SpNavBar form[name="DonateNow"] select:focus {
  outline: none;
  border-color: var(--scms-blue);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2);
}

#SpNavBar a[href*="DonationHistory"] {
  display: inline-block !important;
  margin: 0 !important;
  padding: 7px 14px !important;
  border: 2px solid var(--scms-blue-btn) !important;
  border-radius: var(--scms-radius-btn) !important;
  background-color: #fff !important;
  color: var(--scms-blue-btn) !important;
  font-family: var(--scms-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

#SpNavBar a[href*="DonationHistory"]:hover,
#SpNavBar a[href*="DonationHistory"]:focus {
  background-color: var(--scms-blue-btn) !important;
  color: #fff !important;
  text-decoration: none !important;
}

#SpNavBar a[href*="DonationHistory"] img {
  display: none !important;
}

/* --- Mobile: stack the donate button under the title so neither piece
   is squeezed, and tighten card padding. ------------------------------------ */
@media (max-width: 600px) {
  #SpContent div[style*="padding: 10px 0px 10px 0px"] {
    padding: 16px 16px 18px !important;
  }
  #SpContent div[style*="padding: 10px 0px 10px 0px"] > h2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 1.25em;
  }
  #SpContent div[style*="padding: 10px 0px 10px 0px"] > h2 > a {
    align-self: stretch;
    text-align: center;
  }
  #SpNavBar form[name="DonateNow"] select { min-width: 0; width: 100%; }
  #SpNavBar form[name="DonateNow"] {
    display: block;
    margin: 0 0 12px;
  }
}


/* -----------------------------------------------------------------------------
   A25. NEWS & EVENTS PAGE
   Page-scoped enhancements for /news/ (the "News & Events" landing). The CMS
   renders each news item as a table row with this fixed shape:

       <tr>
         <td style="padding-top:10px; padding-bottom:10px;">
           <a name="NEWS_xxxx"></a>
           <div class="small"><b>Date string</b>
             [optional: <i>(N Comments - <a>view/add</a>)</i><br>]
           </div>
           <div style="padding-left:10px;">
             <a href="/news/...">Title &raquo;</a><br>
             <div class="small">Teaser text…</div>
           </div>
         </td>
       </tr>

   Section dividers are <tr><th>Category Name</th></tr> rows, and per-section
   "View more in …" links are <tr><td><div class="calloutbox"><a>…</a></div>…
   No classes, no IDs on the items themselves — so we hook on the inline
   padding style and structural position. All rules scoped under
   #SpContent .ViewTable1 (the news listing table) or #SpNavBar (the filter
   row) so nothing leaks to other pages.

   GOALS
     1. Make dates the visual anchor (uppercase, condensed, brand-blue tag).
     2. Promote headlines to large, weighty, no-underline links.
     3. Tighten teaser styling and indent.
     4. Give section headers (<th>) real presence and rhythm.
     5. Add a subtle left accent rail per item — visual rhythm without cards.
     6. Hide the "(N Comments — view/add)" cruft (always 0 in practice).
     7. Hide the trailing "»" on title links (the link itself signals action).
     8. Style the "View more in …" callout as a right-aligned section CTA.
     9. Polish the filter row (select + RSS link) and the pager.
   ----------------------------------------------------------------------------- */

/* --- Intro paragraph: the CMS wraps the intro in a nested <p><p>...</p></p>,
   so we target the first paragraph inside the content cell. ---------------- */
#SpContent_Container > p:first-child {
  font-size: 1.0625em;
  line-height: 1.55;
  color: var(--scms-text);
  margin: 8px 0 20px;
}

/* --- Filter row (top): tidy the "Filter news by category:" label, the
   <select>, and the RSS link. ---------------------------------------------- */
#SpNavBar form[name="news_category"] {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

#SpNavBar form[name="news_category"] b {
  font-family: var(--scms-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--scms-text-muted);
  margin-right: 8px;
  letter-spacing: 0.2px;
}

#SpNavBar form[name="news_category"] select {
  font-family: var(--scms-font-body);
  font-size: 15px;
  padding: 8px 12px;
  border: 1px solid var(--scms-divider);
  border-radius: var(--scms-radius-btn);
  background-color: #fff;
  min-width: 240px;
  cursor: pointer;
}

#SpNavBar form[name="news_category"] select:focus {
  outline: none;
  border-color: var(--scms-blue);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2);
}

#SpNavBar #divRssLink {
  margin-top: 0;
  float: right !important;
}

#SpNavBar #divRssLink a,
#SpNavBar #divRssLink a:link,
#SpNavBar #divRssLink a:visited {
  display: inline-block !important;
  padding: 7px 14px !important;
  border: 2px solid var(--scms-blue-btn) !important;
  border-radius: var(--scms-radius-btn) !important;
  background-color: #fff !important;
  color: var(--scms-blue-btn) !important;
  font-family: var(--scms-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

#SpNavBar #divRssLink a:hover,
#SpNavBar #divRssLink a:focus {
  background-color: var(--scms-blue-btn) !important;
  color: #fff !important;
  text-decoration: none !important;
}

#SpNavBar #divRssLink img {
  display: none !important;
}

/* --- Section headers (<th>General News</th>, etc.).
   The existing .ViewTable1 th rule (A13) sets Overpass 21px bold, but the
   underlying YourMembership combined.css ships its own .ViewTable1 th rule
   that ALSO targets these cells and wins on the cascade — we can see this
   in the rendered page where the headers render at ~14px in Roboto, not
   the 21px Overpass we asked for. To beat the vendor, we (a) boost
   specificity by chaining body+content IDs, and (b) use !important on the
   typography properties the vendor sets. These headers are the page's
   primary wayfinding between content groups, so they need to clearly
   dominate the 20px headlines below them. -------------------------------- */
body#PageBody #SpContent table.ViewTable1 tr th {
  font-family: var(--scms-font-heading) !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  text-align: left !important;
  padding: 32px 0 12px !important;
  background: transparent !important;
  border-bottom: 3px solid var(--scms-blue);
  color: var(--scms-text) !important;
  height: auto !important;
  line-height: 1.2 !important;
}

/* The very first <th> in the table shouldn't have a huge top margin; the
   pager already provides spacing above it. ---------------------------------- */
body#PageBody #SpContent table.ViewTable1 tr:first-child th {
  padding-top: 8px !important;
}

/* --- News item row. Each item's <td> carries an inline padding style we
   can hook on. Convert it into a left-rail layout: thin blue stripe down
   the left, generous internal padding, a quiet bottom hairline between
   items. ------------------------------------------------------------------- */
#SpContent .ViewTable1 td[style*="padding-top:10px"] {
  padding: 18px 4px 18px 18px !important;
  border-left: 3px solid var(--scms-bg-light-blue);
  border-bottom: 1px solid var(--scms-divider-light);
  transition: border-left-color 0.18s ease, background-color 0.18s ease;
}

/* On hover, brighten the left rail to brand blue and add a faint wash so
   the whole row feels like a target. ---------------------------------------- */
#SpContent .ViewTable1 td[style*="padding-top:10px"]:hover {
  border-left-color: var(--scms-blue);
  background-color: #fafcfe;
}

/* --- Date line: the CMS wraps the date in <div class="small"><b>Date</b>.
   Inside an item <td>, this is always the first .small child. Promote it to
   a small uppercase tag in brand blue. ------------------------------------- */
#SpContent .ViewTable1 td[style*="padding-top:10px"] > .small:first-of-type {
  font-family: var(--scms-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--scms-blue);
  margin: 0 0 8px;
  line-height: 1.2;
}

/* The <b> inside the date div doesn't need to add additional weight — the
   container is already 700; reset it so the date sits clean. ---------------- */
#SpContent .ViewTable1 td[style*="padding-top:10px"] > .small:first-of-type b {
  font-weight: inherit;
}

/* --- Hide the "(N Comments - view/add)" inline italics. It's always 0 on
   SCMS news posts and adds noise. The <i> sits inside the date .small and
   is followed by a <br>; hide both so the date stays a clean one-liner. --- */
#SpContent .ViewTable1 td[style*="padding-top:10px"] > .small:first-of-type i,
#SpContent .ViewTable1 td[style*="padding-top:10px"] > .small:first-of-type i + br {
  display: none;
}

/* --- Title + teaser wrapper. The CMS gives this a padding-left:10px inline
   style; flatten that since we have our own indent system now. ------------- */
#SpContent .ViewTable1 td[style*="padding-top:10px"] > div[style*="padding-left:10px"] {
  padding-left: 0 !important;
}

/* --- Title link. It's the only direct anchor child of the title wrapper
   (the teaser sits in a nested div). Promote to a large, weighty,
   no-underline headline. --------------------------------------------------- */
#SpContent .ViewTable1 td[style*="padding-top:10px"] > div[style*="padding-left:10px"] > a {
  display: inline-block;
  font-family: var(--scms-font-heading);
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3;
  color: var(--scms-purple);
  text-decoration: none;
  margin: 0 0 4px;
}

#SpContent .ViewTable1 td[style*="padding-top:10px"] > div[style*="padding-left:10px"] > a:hover,
#SpContent .ViewTable1 td[style*="padding-top:10px"] > div[style*="padding-left:10px"] > a:focus {
  color: var(--scms-green);
  text-decoration: underline;
}

/* --- The "»" sits as a bare text node after the title's link text but
   still inside the anchor (per CMS source: <a>Title &raquo;</a>). It's
   visually redundant with the bigger headline treatment + hover underline;
   keep it but shrink+mute it so it reads as a quiet trailing marker. We
   can't select the text node, but we can apply a font-feature on the
   anchor that nudges the » into the same color/weight as the rest, which
   it already inherits — so this block is intentionally empty and exists
   for documentation only. -------------------------------------------------- */

/* --- Teaser text. It's the nested .small inside the title wrapper. ------- */
#SpContent .ViewTable1 td[style*="padding-top:10px"] > div[style*="padding-left:10px"] > .small,
#SpContent .ViewTable1 td[style*="padding-top:10px"] > div[style*="padding-left:10px"] .small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--scms-text-muted);
  margin: 4px 0 0;
  font-family: var(--scms-font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* The <br> between the title link and the teaser div adds an awkward gap;
   the teaser's own margin handles that spacing now. ------------------------ */
#SpContent .ViewTable1 td[style*="padding-top:10px"] > div[style*="padding-left:10px"] > br {
  display: none;
}

/* --- "View more in 'Category Name' »" callout row. The .calloutbox class
   already has base typography (A12); we just need to right-align and add
   a CTA-link feel inside the News context. -------------------------------- */
#SpContent .ViewTable1 .calloutbox {
  text-align: right;
  margin: 8px 0 4px;
  padding: 8px 4px;
}

#SpContent .ViewTable1 .calloutbox a {
  display: inline-block;
  font-family: var(--scms-font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--scms-blue);
  text-decoration: none;
  text-transform: uppercase;
}

#SpContent .ViewTable1 .calloutbox a em {
  font-style: normal;
}

#SpContent .ViewTable1 .calloutbox a:hover,
#SpContent .ViewTable1 .calloutbox a:focus {
  color: var(--scms-green);
  text-decoration: underline;
}

/* --- Pager (above and below the listing). The CMS emits this in two
   different wrapper structures across the site:

     News page:  <div class="pager"><div class="small">…</div></div>
     Blog page:  <div class="pager">…</div>      (no .small wrapper)

   To support both, we apply the bare-text-collapse trick at the .pager
   level and target page-number pills via `.pager b, .pager a` (which
   matches in both wrapped and bare structures). The "Page X of Y"
   preface (the leading <b> that sits above the numbers) is hidden via
   :first-child of either the .pager itself OR its .small wrapper.

   Center it, hide the preface, and turn the page numbers into pill-
   style targets. ----------------------------------------------------- */
#SpContent .pager {
  font-size: 0;                  /* collapses bare " |&nbsp;" text nodes between pills */
  text-align: center;
  margin: 20px 0;
  color: var(--scms-text);
}

#SpContent .pager .small {
  font-size: 0;
  padding: 0 !important;
}

/* Hide the leading "Page X of Y" preface <b> in both structures. */
#SpContent .pager > b:first-child,
#SpContent .pager > b:first-child + br,
#SpContent .pager .small > b:first-child,
#SpContent .pager .small > b:first-child + br {
  display: none;
}

/* Current page (rendered as <b> or <B>) — solid blue pill. */
#SpContent .pager b {
  display: inline-block;
  font-size: 14px;
  min-width: 32px;
  padding: 6px 10px;
  margin: 0 2px;
  border-radius: var(--scms-radius-btn);
  background-color: var(--scms-blue);
  color: #fff;
  font-weight: 700;
  text-align: center;
}

/* Other page anchors — ghosted pill. */
#SpContent .pager a {
  display: inline-block;
  font-size: 14px;
  min-width: 32px;
  padding: 6px 10px;
  margin: 0 2px;
  border-radius: var(--scms-radius-btn);
  background-color: #fff;
  border: 1px solid var(--scms-divider);
  color: var(--scms-purple);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#SpContent .pager a:hover,
#SpContent .pager a:focus {
  background-color: var(--scms-bg-pale-blue);
  border-color: var(--scms-blue);
  color: var(--scms-blue);
}

/* --- Mobile: tighten internal padding, shrink the section headers. ------- */
@media (max-width: 600px) {
  body#PageBody #SpContent table.ViewTable1 tr th {
    font-size: 24px !important;
    padding-top: 24px !important;
  }
  #SpContent .ViewTable1 td[style*="padding-top:10px"] {
    padding: 14px 0 14px 12px !important;
  }
  #SpContent .ViewTable1 td[style*="padding-top:10px"] > div[style*="padding-left:10px"] > a {
    font-size: 1.125em;
  }
  #SpNavBar form[name="news_category"] select {
    min-width: 0;
    width: 100%;
  }
  #SpNavBar form[name="news_category"] {
    display: block;
    margin: 0 0 10px;
  }
  #SpNavBar #divRssLink {
    float: none !important;
    margin-top: 0;
  }
}


/* -----------------------------------------------------------------------------
   A26. RIGHT-RAIL BUTTONS
   The right rail (#right) holds CMS-generated panels — Sign In, Latest News,
   Calendar — each on a brand-blue (#00aeef) zone with a drop shadow. Inside
   those panels, three button-like elements ship from the vendor:

     1. The Sign In submit button:   <input type="submit" class="formbutton">
        inside <p id="LoginSubmit">. Renders by default as a browser-native
        green-ish submit button. Restyle to match the canonical .btn--green
        visual (same color, radius, shadow, hover) without touching the
        body-content .btn class.

     2. The "more" link in each panel header:
        <a class="pull-right" href="/news/">more</a>
        inside <div class="irailhead">. It sits inside the white-on-blue
        railhead, so a full-size button would dwarf the title. Style it as
        a small green PILL — same color system, ~12px text, tight padding,
        no shadow.

     3. The "Forgot your password?" / "Haven't registered yet?" links inside
        #LoginForgot and #LoginRegister. They inherit the global purple link
        color, which is unreadable on the blue rail. Push them to white with
        a light-blue hover, matching the .irailcontent link convention in A12.

   Note: the social-login buttons (.btn-connect.facebook / .btn-connect.linkedin)
   are deliberately LEFT ALONE. They use brand-mandated colors (Facebook blue,
   LinkedIn blue) that users scan for when looking for SSO; rebranding them to
   SCMS palette would reduce recognition and trust. The vendor's styling stays.

   All rules scoped under #right so they don't leak to body content where the
   canonical a.btn system (A9) lives. Specificity boosted + !important on the
   key properties to defeat the YourMembership combined.css vendor rules, in
   the same pattern established by A25's section-header fix.
   ----------------------------------------------------------------------------- */

/* --- Sign In submit button ------------------------------------------------ */
#right #LoginSubmit input.formbutton,
#right #LoginSubmit input[type="submit"] {
  display: inline-block !important;
  padding: 9px 22px !important;
  border: none !important;
  border-radius: var(--scms-radius-btn) !important;
  box-shadow: var(--scms-shadow-btn) !important;
  background-color: var(--scms-green) !important;
  color: #ffffff !important;
  font-family: var(--scms-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

#right #LoginSubmit input.formbutton:hover,
#right #LoginSubmit input[type="submit"]:hover {
  background-color: var(--scms-green-hover) !important;
  transform: translateY(-1px);
}

#right #LoginSubmit input.formbutton:active,
#right #LoginSubmit input[type="submit"]:active {
  transform: translateY(0);
}

/* The SSL padlock icon sits inline next to the submit button as an <img
   class="securesubmit">. Pull it visually away from the button so it reads
   as a status indicator, not a stuck-on appendage. ----------------------- */
#right #LoginSubmit .securesubmit {
  margin-left: 10px;
  vertical-align: middle;
  opacity: 0.85;
}

/* --- "more" pill in panel headers --------------------------------------- */
#right .irailhead a.pull-right {
  display: inline-block !important;
  padding: 3px 12px !important;
  margin-top: 2px !important;
  border-radius: 999px !important;     /* full pill */
  background-color: var(--scms-green) !important;
  color: #ffffff !important;
  font-family: var(--scms-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: background-color 0.18s ease;
}

#right .irailhead a.pull-right:hover,
#right .irailhead a.pull-right:focus {
  background-color: var(--scms-green-hover) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* --- "Forgot password?" / "Haven't registered yet?" links --------------- */
#right #LoginForgot,
#right #LoginRegister {
  margin-top: 8px;
}

#right #LoginForgot a,
#right #LoginForgot a:link,
#right #LoginForgot a:visited,
#right #LoginRegister a,
#right #LoginRegister a:link,
#right #LoginRegister a:visited {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}

#right #LoginForgot a:hover,
#right #LoginForgot a:focus,
#right #LoginRegister a:hover,
#right #LoginRegister a:focus {
  color: var(--scms-bg-light-blue) !important;
  text-decoration: underline;
}

/* --- "Remember Me" checkbox label on the blue rail. The vendor renders
   this as black-on-blue (unreadable). Bump to white. --------------------- */
#right #RememberMe,
#right #RememberMe label {
  color: #ffffff !important;
  font-size: 13px;
}


/* -----------------------------------------------------------------------------
   A27. CALENDAR PAGE
   Page-scoped enhancements for /events/event_list.asp (the calendar listing).
   The CMS ships an INLINE <style> block in the page body that styles
   #EventList td with dotted gray borders, gray "head"/"dayhead"/"view"
   bars, and cramped padding — leftover 2008-vintage CMS defaults. We can't
   delete the inline block (it's CMS-generated), but we can outweigh every
   one of its rules via higher specificity (body#PageBody #EventList ...) and
   !important.

   GOAL: bring this page in line with the News & Events page. Same section
   headers (the table already has class="ViewTable1", so our A25 32px
   Overpass header rule applies automatically to <th>Upcoming Events</th>
   and <th>Past Events</th>). Same date-tag treatment (blue uppercase
   Overpass 13px). Same blue-left-rail item layout with hover wash. Same
   purple→green headline links.

   The repeating event markup is TWO <tr>s per event:

     <tr>                                   <-- DATE HEADING ROW
       <td><h3 style="margin:0px;"><i>Thursday, March 26, 2026</i></h3></td>
       <td>&nbsp;</td>
     </tr>
     <tr>                                   <-- EVENT DETAIL ROW
       <td valign="top">
         <div style="margin-left:10px;">
           <span id="EventList…"><a><b style="font-size:14px">Title</b></a></span><br>
           Date range text<br>
           <div class="small" style="font-style:italic">
             <b>Location:</b> X  <b>Time:</b> Y
           </div>
         </div>
       </td>
       <td>thumbnail image OR &nbsp;</td>
     </tr>

   We restyle each row in place — no markup changes possible.
   ----------------------------------------------------------------------------- */

/* --- Neutralize the inline <style> block's #EventList td baseline.
   The inline rule sets dotted-gray top borders and tight padding. Strip
   them — our row-level rules below provide rhythm via blue rails and
   bottom hairlines instead. -------------------------------------------- */
body#PageBody #SpContent #EventList td {
  border-top: 0 !important;
  padding: 0 !important;
}

/* The inline block also styles #EventList td.head / .view / .dayhead as
   gray bars — kill those too in case any get rendered. ----------------- */
body#PageBody #SpContent #EventList td.head,
body#PageBody #SpContent #EventList td.view,
body#PageBody #SpContent #EventList td.dayhead {
  background-color: transparent !important;
  color: var(--scms-text) !important;
  font-weight: normal !important;
  padding: 0 !important;
  border: 0 !important;
}

/* --- Filter row: Upcoming | Past | Month View. The CMS ships these as
   bare <a> tags with floated icons. Style them as a clean inline group. - */
#SpNavBar #FilterForm {
  display: none;                            /* hidden form, not a control */
}

#SpNavBar a[onclick*="goToUpcomingPast"],
#SpNavBar a[onclick*="openPopup"] {
  display: inline-block !important;
  margin: 0 6px 0 0 !important;
  padding: 7px 14px !important;
  border: 2px solid var(--scms-blue-btn) !important;
  border-radius: var(--scms-radius-btn) !important;
  background-color: #fff !important;
  color: var(--scms-blue-btn) !important;
  font-family: var(--scms-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

#SpNavBar a[onclick*="goToUpcomingPast"]:hover,
#SpNavBar a[onclick*="goToUpcomingPast"]:focus,
#SpNavBar a[onclick*="openPopup"]:hover,
#SpNavBar a[onclick*="openPopup"]:focus {
  background-color: var(--scms-blue-btn) !important;
  color: #fff !important;
  text-decoration: none !important;
}

#SpNavBar a[onclick*="goToUpcomingPast"] img,
#SpNavBar a[onclick*="openPopup"] img {
  display: none !important;
}

/* --- Date heading row.
   The CMS emits this as <h3 style="margin:0px;"><i>Date</i></h3> in a
   standalone <tr>. Restyle the <h3> in place to look like the news page's
   blue uppercase Overpass date tag. Strip the global h3 styling we set
   in A5 (blue background, left border, drop shadow) since we want a
   clean tag, not a section header. Also kill the italic. -------------- */
body#PageBody #SpContent #EventList tr > td > h3 {
  font-family: var(--scms-font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--scms-blue) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 24px 0 6px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  font-style: normal !important;
}

body#PageBody #SpContent #EventList tr > td > h3 i {
  font-style: normal !important;
}

/* --- Event detail row.
   The first <td> uses valign="top" — and in this table that's exclusively
   the event detail cells (date heading rows use unattributed <td>s). So
   we can hook on the valign attribute alone, without needing :has().
   This keeps the rule compatible with older browsers too. -------------- */
body#PageBody #SpContent #EventList td[valign="top"] {
  padding: 14px 4px 18px 18px !important;
  border-left: 3px solid var(--scms-bg-light-blue) !important;
  border-bottom: 1px solid var(--scms-divider-light) !important;
  vertical-align: top !important;
  transition: border-left-color 0.18s ease, background-color 0.18s ease;
}

body#PageBody #SpContent #EventList td[valign="top"]:hover {
  border-left-color: var(--scms-blue) !important;
  background-color: #fafcfe !important;
}

/* Flatten the inline 10px margin on the event content wrapper. */
body#PageBody #SpContent #EventList td > div[style*="margin-left:10px"] {
  margin-left: 0 !important;
}

/* Event title link. The actual title is wrapped: <span id="EventList…">
   <a href="…"><b style="font-size:14px">Title</b></a></span>. We restyle
   both the <a> and the inline-styled <b> so the title reads as a news-
   style headline regardless of which one the browser hands to layout. -- */
body#PageBody #SpContent #EventList span[id^="EventList"] > a {
  font-family: var(--scms-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  color: var(--scms-purple) !important;
  text-decoration: none !important;
  font-size: 1.25em !important;
}

body#PageBody #SpContent #EventList span[id^="EventList"] > a:hover,
body#PageBody #SpContent #EventList span[id^="EventList"] > a:focus {
  color: var(--scms-green) !important;
  text-decoration: underline !important;
}

/* Some events use <span><b>Title</b></span> WITHOUT a link (e.g. archived
   "Election Ends" entries). Style the bare <b> to match the linked title
   so the visual rhythm holds. ------------------------------------------ */
body#PageBody #SpContent #EventList span[id^="EventList"] > b {
  font-family: var(--scms-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  color: var(--scms-text) !important;
  font-size: 1.25em !important;
}

/* The CMS hard-codes font-size:14px inline on the <b> inside the link.
   That conflicts with our 1.25em above; the !important + 1.25em chain
   wins, but kill the inline size explicitly via the attribute hook so
   the cascade is unambiguous. ----------------------------------------- */
body#PageBody #SpContent #EventList b[style*="font-size:14px"],
body#PageBody #SpContent #EventList b[style*="font-size: 14px"] {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

/* --- Event meta line (date range text node + <br> sequence below title).
   The date range like "3/26/2026 &raquo; 3/29/2026" sits as a bare text
   node, no class, between two <br>s. We can't select bare text nodes
   directly, so we shape its surroundings: the wrapping <div> gets size
   and color rules that the bare text inherits. ----------------------- */
body#PageBody #SpContent #EventList td > div[style*="margin-left:10px"] {
  font-size: 14px;
  line-height: 1.5;
  color: var(--scms-text);
}

/* --- Location / Time metadata row. It's <div class="small" style=
   "font-style:italic"> containing <b>Location:</b> X <b>Time:</b> Y.
   Kill the italic, mute the color, tidy the spacing. ----------------- */
body#PageBody #SpContent #EventList .small {
  font-family: var(--scms-font-body) !important;
  font-style: normal !important;
  font-size: 13px !important;
  color: var(--scms-text-muted) !important;
  margin: 4px 0 0 !important;
  line-height: 1.5 !important;
}

body#PageBody #SpContent #EventList .small b {
  color: var(--scms-text) !important;
  font-weight: 700 !important;
  margin-right: 4px;
}

/* --- Event thumbnail in the third <td>.
   When present, it's wrapped in <div style="float:right"><img></div>;
   when absent, the cell holds only "&nbsp;". Float right doesn't reach
   the previous td (different table cell), so just frame the image
   cleanly: small rounded corners, max-width so wide images don't blow
   out the layout, and right-align. The sibling cell also needs the
   matching bottom hairline so the row line is continuous across cells. */
body#PageBody #SpContent #EventList td[valign="top"] + td {
  border-bottom: 1px solid var(--scms-divider-light) !important;
  padding: 14px 4px 18px 8px !important;
  vertical-align: top !important;
}

body#PageBody #SpContent #EventList td > div[style*="float:right"] {
  float: none !important;
  text-align: right;
}

body#PageBody #SpContent #EventList td > div[style*="float:right"] img,
body#PageBody #SpContent #EventList td img {
  max-width: 140px;
  height: auto;
  border-radius: var(--scms-radius-btn);
  margin: 0;
}

/* --- Intro text sits as a bare text node directly in #SpContent_Container,
   not in a <p>. Wrap it visually by giving the immediate text some breath
   — easiest hook is the container's first child line. Since the bare
   text node has no element, we approximate by adding generous top-padding
   above the EventList table itself. --------------------------------- */
body#PageBody #SpContent #EventList {
  margin-top: 24px !important;
}


/* -----------------------------------------------------------------------------
   A28. COMMUNITY GROUPS PAGE
   Page-scoped enhancements for /members/group_select.asp ("Community Groups").
   The CMS renders the six group types as a bare <ul> of <li><h2><a> items,
   with empty placeholder <div>s as siblings of the <li>s. The global h2
   styling (A5: 1.833em / 900 / 48px top margin) hammers each label into a
   wall of giant purple text. Above that, an inline sub-nav row mixes a
   filter <select>, a text <input>, and a Search submit button — all wrapped
   in floated divs with a 2008-vintage font-size:10px inline.

   GOALS
     1. Turn the <ul> of group types into a clean responsive GRID OF BUTTONS
        — 2 columns on tablet+, single column on mobile. Each cell is a large
        tap target with brand-blue left rail on hover, matching the visual
        language of the News/Calendar item rails.
     2. Hide the empty <div> placeholder siblings between <li>s (they're
        only there to add bottom padding, which our grid gap replaces).
     3. Clean up the "Filter by Type" / "Find a Group" sub-nav row: drop
        the font-size:10px, unfloat the divs, style the select + input +
        Search button consistently.
     4. Polish the intro paragraph in the double-<P><P></P></P> CMS wrap.

   The hook for the group-button grid is #SpContent_Container > ul > li
   with > h2 inside. That selector pattern doesn't appear on any other
   SCMS page (verified by grep), so the rule won't bleed.

   The inline <style> block at the top of the page targets #classyears IDs
   that appear on the *secondary* page (after a type filter is applied) —
   see A29 below for the styling that handles that view.
   ----------------------------------------------------------------------------- */

/* --- Intro paragraph (the CMS emits <P></P><P>Welcome...</P> — a
   leading EMPTY <P> followed by the real one). The real paragraph is
   the second <p> in the container, so target it specifically rather
   than affecting all <p>s on the page. ------------------------------ */
#SpContent_Container > p:nth-of-type(2) {
  font-size: 1.0625em;
  line-height: 1.55;
  color: var(--scms-text);
  margin: 0 0 24px;
}

/* --- Sub-nav row: strip the inline font-size:10px and let the form
   elements breathe. ------------------------------------------------- */
#SpNavBar[style*="font-size:10px"] {
  font-size: 14px !important;
}

/* The two forms (FilterForm and SearchForm) need to sit on one row with
   their inner floated divs aligned. Flatten the floats and use a clean
   inline flex flow. ------------------------------------------------- */
#SpNavBar form[name="FilterForm"],
#SpNavBar form#SearchForm {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 16px 8px 0;
  vertical-align: middle;
}

#SpNavBar form[name="FilterForm"] > div[style*="float:left"],
#SpNavBar form#SearchForm > div[style*="float:left"] {
  float: none !important;
  display: inline-flex;
  align-items: center;
}

#SpNavBar form[name="FilterForm"] b,
#SpNavBar form#SearchForm b {
  font-family: var(--scms-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--scms-text-muted);
  letter-spacing: 0.2px;
}

/* The filter select. */
#SpNavBar form[name="FilterForm"] select {
  font-family: var(--scms-font-body);
  font-size: 15px !important;          /* override inline option font-size:10px */
  padding: 8px 12px;
  border: 1px solid var(--scms-divider);
  border-radius: var(--scms-radius-btn);
  background-color: #fff;
  min-width: 240px;
  cursor: pointer;
}

#SpNavBar form[name="FilterForm"] select option {
  font-size: 15px !important;          /* override inline option font-size:10px */
}

#SpNavBar form[name="FilterForm"] select:focus {
  outline: none;
  border-color: var(--scms-blue);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2);
}

/* The find-a-group text input. */
#SpNavBar form#SearchForm input[type="text"] {
  font-family: var(--scms-font-body);
  font-size: 14px !important;          /* override inline font-size:11px */
  padding: 8px 12px;
  border: 1px solid var(--scms-divider);
  border-radius: var(--scms-radius-btn);
  background-color: #fff;
  min-width: 220px;
  box-sizing: border-box;
}

#SpNavBar form#SearchForm input[type="text"]:focus {
  outline: none;
  border-color: var(--scms-blue);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2);
}

/* The Search submit button — restyle to match the canonical .btn--blue. */
#SpNavBar form#SearchForm input[type="submit"] {
  display: inline-block;
  padding: 8px 18px;
  border: none;
  border-radius: var(--scms-radius-btn);
  background-color: var(--scms-blue-btn);
  color: #fff;
  font-family: var(--scms-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

#SpNavBar form#SearchForm input[type="submit"]:hover {
  background-color: var(--scms-blue-btn-hover);
  transform: translateY(-1px);
}

#SpNavBar form#SearchForm input[type="submit"]:active {
  transform: translateY(0);
}

/* --- The group-type list: turn the bare <ul> into a responsive grid.
   The CMS emits:
     <ul>
       <li><h2><a href="?type=6047">Caucus &raquo;</a></h2></li>
       <div style="padding:0px 0px 10px 10px"><i></i></div>
       <li><h2><a href="?type=6048">Graduate Student Org...</a></h2></li>
       <div style="padding:0px 0px 10px 10px"><i></i></div>
       ...
     </ul>
   Note the <div> siblings of the <li>s are malformed HTML but browsers
   render them. Hide them.

   The :has(> h2) guard on the li rules is critical: other pages (e.g.
   /general/register_member_type.asp) also emit a bare <ul> as a direct
   child of #SpContent_Container, but their <li>s contain plain text, not
   an <h2>. Without :has(), those prose lists get card-grid styling too.
   -------------------------------------------------------------------- */
#SpContent_Container > ul:has(> li > h2) {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 24px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

/* Hide the empty placeholder <div>s that sit between <li>s. */
#SpContent_Container > ul > div[style*="padding:0px 0px 10px 10px"] {
  display: none !important;
}

/* Each <li> that contains a direct-child <h2> becomes a button cell.
   Prose <li>s without an <h2> are unaffected. */
#SpContent_Container > ul > li:has(> h2) {
  list-style: none !important;
  background-color: #fff;
  border: 1px solid var(--scms-divider-light);
  border-left: 6px solid var(--scms-blue);
  border-radius: var(--scms-radius-card);
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-left-color 0.18s ease;
}

#SpContent_Container > ul > li:has(> h2):hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
  border-left-color: var(--scms-purple);
}

/* The <h2> inside each <li> — reset the global h2 styling and let the
   anchor below do the work. We use !important on the properties the
   global rule sets, since #SpContent_Container > ul > li > h2 has lower
   specificity than the global h2 rule. ------------------------------ */
#SpContent_Container > ul > li > h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-weight: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The anchor inside each <h2> — this is the actual button face. Block-
   level, large tap target, weighty heading-style label, no underline.
   The CMS appends "&raquo;" to each label as a bare text node inside the
   anchor; we leave it in place and let it read as a natural trailing
   chevron that picks up the link color (and the hover-green change). - */
#SpContent_Container > ul > li > h2 > a {
  display: block;
  padding: 22px 24px;
  font-family: var(--scms-font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3;
  color: var(--scms-purple);
  text-decoration: none !important;
  transition: color 0.18s ease;
}

#SpContent_Container > ul > li > h2 > a:hover,
#SpContent_Container > ul > li > h2 > a:focus {
  color: var(--scms-green);
  text-decoration: none !important;
}

/* --- Mobile: single column, slightly tighter padding. ------------- */
@media (max-width: 600px) {
  #SpContent_Container > ul:has(> li > h2) {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #SpContent_Container > ul > li > h2 > a {
    padding: 18px 20px;
    font-size: 18px;
  }
  #SpNavBar form#SearchForm input[type="text"] {
    min-width: 0;
    width: 100%;
  }
  #SpNavBar form[name="FilterForm"] select {
    min-width: 0;
    width: 100%;
  }
}


/* -----------------------------------------------------------------------------
   A29. COMMUNITY GROUPS — GROUP LIST (filtered/secondary view)
   When a user picks a type on /members/group_select.asp (e.g. ?type=6047
   for Caucus), the CMS renders the list of individual groups in that
   category using #classyears — a single-column table where each <tr>
   contains a "group card" built from three nested divs:

     <table id="classyears">
       <tr>
         <td class="left" valign="bottom" width="100%">
           <div class="main">                          <-- card surface
             <div class="bigyear">                     <-- header row
               <a href="/members/group.aspx?id=NNNN">Group Name &raquo;</a>
             </div>
             <div class="content">                    <-- body row
               <p>Description...</p>                  <-- can be empty
               <div class="counts">                   <-- member count
                 <a href="/search/search.asp?y=NNNN">359</a>
               </div>
               &nbsp;Registered&nbsp;Members           <-- bare label text
             </div>
           </div>
         </td>
       </tr>
       ...
     </table>

   The inline <style> block at the top of the page styles this with 1px
   dashed gray borders, a gray header bar with 14px bold black text, tiny
   12px body text, and a floated-left member count. Pure 2008.

   DESIGN MOVE: promote the member count into a giant numeric badge on
   the RIGHT side of each card. The group name + description sits left;
   a colored pill on the right shows the count prominently. This both
   looks cool AND solves real user problems:
     - Empty descriptions stop looking awkward (the right badge anchors
       the card regardless of left content length).
     - Variable description length doesn't break alignment.
     - The two embedded links (group name + count) get distinct visual
       treatments: title = primary nav, count badge = secondary nav for
       "see who's in this group."
     - Members deciding which caucus to join can SEE at a glance how
       active each group is — 777 vs 28.

   Each card uses CSS flexbox for the left/right split. Specificity is
   boosted (body#PageBody #SpContent #classyears ...) plus !important
   to outweigh the inline <style> block — same armor pattern as A25/A27.
   ----------------------------------------------------------------------------- */

/* --- Reset the inline <style> block's #classyears td and inner classes.
   The inline rules set dashed borders, gray bars, tight padding, floats.
   Strip them all so we start from a clean surface. ------------------- */
body#PageBody #SpContent #classyears,
body#PageBody #SpContent #classyears tbody,
body#PageBody #SpContent #classyears tr {
  display: block !important;
  width: 100% !important;
}

body#PageBody #SpContent #classyears td {
  display: block !important;
  width: 100% !important;
  padding: 0 0 14px 0 !important;
  border: 0 !important;
  height: auto !important;
}

/* --- Card surface: white bg, light gray border with a brand-blue left
   rail. We use position:relative + padding-right to reserve space for
   the absolutely-positioned member-count badge on the right side. --- */
body#PageBody #SpContent #classyears .main {
  background: #fff !important;
  border: 1px solid var(--scms-divider-light) !important;
  border-left: 6px solid var(--scms-blue) !important;
  border-radius: var(--scms-radius-card) !important;
  font-size: inherit !important;
  height: auto !important;
  display: block !important;
  position: relative;
  padding-right: 130px;                 /* room for the right-side badge */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-left-color 0.18s ease;
}

body#PageBody #SpContent #classyears .main:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
  border-left-color: var(--scms-purple) !important;
}

/* --- Title row: the .bigyear holds the group-name link. Reset the
   inline gray bar styling, promote to a card-header treatment. ----- */
body#PageBody #SpContent #classyears .bigyear {
  background: transparent !important;
  color: var(--scms-text) !important;
  margin: 0 !important;
  padding: 18px 22px 4px !important;
  font-family: var(--scms-font-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
}

body#PageBody #SpContent #classyears .bigyear a {
  color: var(--scms-purple) !important;
  text-decoration: none !important;
  transition: color 0.18s ease;
}

body#PageBody #SpContent #classyears .bigyear a:hover,
body#PageBody #SpContent #classyears .bigyear a:focus {
  color: var(--scms-green) !important;
}

/* --- Description body. The CMS sometimes emits an empty <p></p>; hide
   those so they don't add an awkward gap. The bare " Registered
   Members" text node after .counts is collapsed via font-size:0
   on .content (restored on the visible <p> below). ---------------- */
body#PageBody #SpContent #classyears .content {
  padding: 0 22px 18px !important;
  clear: none !important;
  font-size: 0 !important;             /* collapses bare "Registered Members" text */
  line-height: 1.5 !important;
  color: var(--scms-text-muted) !important;
}

body#PageBody #SpContent #classyears .content > p {
  margin: 0 0 8px !important;
  font-size: 14px !important;          /* restore on the description */
}

body#PageBody #SpContent #classyears .content > p:empty {
  display: none !important;
}

/* --- Member-count badge: absolute-positioned on the right side of the
   card, vertically centered. The bare "Registered Members" text inside
   .content is invisible (font-size:0 above), and we add our own
   "members" label below the number via ::after on .counts. -------- */
body#PageBody #SpContent #classyears .counts {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 76px;
  padding: 10px 14px !important;
  background-color: var(--scms-bg-pale-blue);
  border: 1px solid var(--scms-bg-light-blue);
  border-radius: var(--scms-radius-card);
  text-align: center;
  font-weight: normal !important;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

body#PageBody #SpContent #classyears .main:hover .counts {
  background-color: var(--scms-bg-light-blue);
  border-color: var(--scms-blue);
}

body#PageBody #SpContent #classyears .counts a {
  display: block;
  font-family: var(--scms-font-heading) !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
  color: var(--scms-blue) !important;
  text-decoration: none !important;
}

body#PageBody #SpContent #classyears .counts a:hover,
body#PageBody #SpContent #classyears .counts a:focus {
  color: var(--scms-purple) !important;
}

body#PageBody #SpContent #classyears .counts::after {
  content: "members";
  display: block;
  font-family: var(--scms-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--scms-text-muted);
  margin-top: 4px;
  line-height: 1;
}

/* --- Mobile: stack the count badge BELOW the content on narrow screens
   so the card doesn't get crushed. ----------------------------------- */
@media (max-width: 600px) {
  body#PageBody #SpContent #classyears .main {
    padding-right: 0 !important;
    padding-bottom: 80px;
  }
  body#PageBody #SpContent #classyears .counts {
    top: auto;
    bottom: 16px;
    right: 16px;
    transform: none;
    min-width: 80px;
    min-height: 60px;
  }
  body#PageBody #SpContent #classyears .counts a {
    font-size: 26px !important;
  }
  body#PageBody #SpContent #classyears .bigyear {
    font-size: 18px !important;
    padding: 16px 18px 4px !important;
  }
  body#PageBody #SpContent #classyears .content {
    padding: 0 18px 14px !important;
  }
}


/* -----------------------------------------------------------------------------
   A30. BLOG / IN MEMORIAM PAGE
   Page-scoped enhancements for /blogpost/* — the CMS's blog listing view.
   Used for In Memoriam, but the same template handles any community blog.

   The CMS emits each post as THREE separate <tr>s inside <table class=
   "blogTable">:

     <tr class="blog_item|blog_altitem">
       <td id="PostTitle">
         <h2 style="margin:0px"><a href="...">Post Title</a></h2>
       </td>
     </tr>
     <tr class="blog_item|blog_altitem">
       <td id="InfoRow" style="font-style:italic; padding-bottom:20px;">
         Posted By <b>SCMS</b>, Thursday, March 12, 2026<br />
         [Updated: ...]
       </td>
     </tr>
     <tr class="blog_item|blog_altitem">
       <td id="PostContent">
         <div id="Post517892">
           <div class="ContributedContent"><p>...</p></div>
           <p><img src="..."></p>
           <p style="font-style:italic"><b>Tags:</b>&nbsp;<a>tag</a></p>
         </div>
         <a href="...">Permalink</a> |&nbsp;<a href="...">Comments (0)</a>
         <div style="border-top:solid 1px #cccccc; ...">&nbsp;</div>
       </td>
     </tr>

   Note: every post repeats the same #PostTitle, #InfoRow, #PostContent
   IDs. That's invalid HTML but a CMS reality; selectors on those IDs
   match all posts.

   DESIGN MOVE: Each post becomes a substantial WHITE ARTICLE CARD with
   the same blue left rail as news/calendar/groups. The three rows are
   visually unified because they share the same row class (blog_item or
   blog_altitem); we hook on those to draw a continuous left rail down
   all three rows of one post. The title is promoted to a 26px magazine-
   headline. The byline is reshaped into an uppercase Overpass date tag
   matching news/calendar dates. Body content gets readable 16px Roboto
   at 1.65 line-height. Tags become small pills. The CMS-drawn bottom
   divider is hidden; card geometry replaces it.

   Also: the sub-nav row (Blog Home / All Blogs / RSS) and the intro
   .calloutbox (which holds 3 paragraphs of intro + a Search form +
   Top tags) both get treatments matching the news/groups page style
   conventions established in A25/A28.

   The pager rule in A25 has been refactored to work for this page too
   (the blog pager omits the .small wrapper that the news pager has).
   ----------------------------------------------------------------------------- */

/* --- Sub-nav row: "Blog Home" / "All Blogs" with icons, and RSS floated
   right. Same icon-link pattern as the news page. ------------------- */
#SpNavBar a[href*="blog_view.asp"],
#SpNavBar a[href*="blogs.asp"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
  font-size: 14px;
  color: var(--scms-purple);
  text-decoration: none;
}

#SpNavBar a[href*="blog_view.asp"]:hover,
#SpNavBar a[href*="blogs.asp"]:hover {
  color: var(--scms-green);
  text-decoration: underline;
}

#SpNavBar a[href*="blog_view.asp"] img,
#SpNavBar a[href*="blogs.asp"] img {
  float: none !important;
  margin: 0 !important;
  vertical-align: middle;
}

/* The RSS link is already styled by A25 (#SpNavBar #divRssLink), so it
   carries over here without additional rules. */

/* --- Intro .calloutbox: this holds three paragraphs of intro text, a
   Search form, and a "Top tags" inline list. The base .calloutbox rule
   in A12 sets a sidebar-context typography that's too tight for an
   intro block on a primary content page. Page-scope an override. - */
#SpContent_Container > .calloutbox {
  background-color: var(--scms-bg-pale-blue);
  border: 1px solid var(--scms-bg-light-blue);
  border-radius: var(--scms-radius-card);
  padding: 22px 26px;
  margin: 0 0 24px;
  color: var(--scms-text);
  font-size: 15px;
  line-height: 1.6;
}

#SpContent_Container > .calloutbox > p {
  margin: 0 0 12px;
}

#SpContent_Container > .calloutbox > p:last-of-type {
  margin-bottom: 0;
}

/* The CMS sometimes emits empty spacer paragraphs as <p><br></p>. Hide
   those — they add nothing but visual gap. (Note: <p>&nbsp;</p> spacers
   can't be hidden via CSS since pure CSS can't introspect text content;
   the 12px paragraph margin above keeps their gap modest.) ----------- */
#SpContent_Container > .calloutbox > p > br:only-child {
  display: none;
}

#SpContent_Container > .calloutbox > p:has(> br:only-child) {
  display: none;
}

/* Search form INSIDE the calloutbox. The CMS wraps it in a <table> — we
   flatten that into a flex row with our standard input + button styling.
   The pattern matches news/groups search forms. ------------------- */
#SpContent_Container > .calloutbox form#SearchForm {
  margin: 16px 0;
}

#SpContent_Container > .calloutbox form#SearchForm table,
#SpContent_Container > .calloutbox form#SearchForm tbody,
#SpContent_Container > .calloutbox form#SearchForm tr {
  display: block;
  width: 100%;
}

#SpContent_Container > .calloutbox form#SearchForm td {
  display: inline-flex;
  align-items: center;
  padding: 0;
  vertical-align: middle;
}

#SpContent_Container > .calloutbox form#SearchForm td b {
  font-family: var(--scms-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--scms-text-muted);
  margin-right: 10px;
  letter-spacing: 0.2px;
}

#SpContent_Container > .calloutbox form#SearchForm input[type="text"] {
  font-family: var(--scms-font-body);
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--scms-divider);
  border-radius: var(--scms-radius-btn);
  background-color: #fff;
  min-width: 220px;
  margin-right: 8px;
  box-sizing: border-box;
}

#SpContent_Container > .calloutbox form#SearchForm input[type="text"]:focus {
  outline: none;
  border-color: var(--scms-blue);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2);
}

#SpContent_Container > .calloutbox form#SearchForm input[type="submit"].formbutton {
  display: inline-block;
  padding: 8px 18px;
  border: none;
  border-radius: var(--scms-radius-btn);
  background-color: var(--scms-blue-btn);
  color: #fff;
  font-family: var(--scms-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

#SpContent_Container > .calloutbox form#SearchForm input[type="submit"].formbutton:hover {
  background-color: var(--scms-blue-btn-hover);
  transform: translateY(-1px);
}

#SpContent_Container > .calloutbox form#SearchForm input[type="submit"].formbutton:active {
  transform: translateY(0);
}

/* "Top tags" inline list (after the search form). The label <b> and the
   tag anchors are bare children of .calloutbox. Restyle the tags as
   small pills. ------------------------------------------------------- */
#SpContent_Container > .calloutbox > b {
  font-family: var(--scms-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--scms-text-muted);
  margin-right: 8px;
  letter-spacing: 0.2px;
}

#SpContent_Container > .calloutbox > a[id^="Tag_Blog"] {
  display: inline-block;
  padding: 4px 12px;
  margin: 0 4px 4px 0;
  border-radius: 999px;
  background-color: #fff;
  border: 1px solid var(--scms-bg-light-blue);
  color: var(--scms-purple) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#SpContent_Container > .calloutbox > a[id^="Tag_Blog"]:hover,
#SpContent_Container > .calloutbox > a[id^="Tag_Blog"]:focus {
  background-color: var(--scms-blue);
  border-color: var(--scms-blue);
  color: #fff !important;
}

/* --- The blogTable wrapper itself. Flatten table layout so each row
   reads as a block-level card section. -------------------------- */
.blogTable,
.blogTable tbody {
  display: block;
  width: 100%;
}

.blogTable tr.blog_item,
.blogTable tr.blog_altitem {
  display: block;
  background-color: #fff;
}

.blogTable tr.blog_item > td,
.blogTable tr.blog_altitem > td {
  display: block;
  width: 100%;
  padding: 0;
}

/* --- Each post is THREE consecutive rows sharing the same class. We
   visually unify them as a single card by applying card-segment styling
   to each <td> (which we can target by its repeated ID). The CMS uses
   the same #PostTitle, #InfoRow, #PostContent IDs for every post — that
   is invalid HTML, but CSS selectors on those IDs match each
   occurrence, which is exactly what we need.

   The left rail is drawn on each <td> independently. Since they stack
   vertically, the rails visually form one continuous line. The top
   td gets top corners + top border; the bottom td gets bottom corners
   + bottom border + shadow + margin-to-next-post. The middle td just
   sits between them with the rail and side borders. ------------- */
.blogTable tr.blog_item,
.blogTable tr.blog_altitem {
  /* Row is a pure container; all visual styling sits on the td. */
}

.blogTable tr.blog_item > td,
.blogTable tr.blog_altitem > td {
  border-left: 6px solid var(--scms-blue);
  border-right: 1px solid var(--scms-divider-light);
  padding-left: 28px;
  padding-right: 28px;
  background-color: #fff;
}

/* First segment per post: title row. */
.blogTable td#PostTitle {
  border-top: 1px solid var(--scms-divider-light);
  border-top-left-radius: var(--scms-radius-card);
  border-top-right-radius: var(--scms-radius-card);
  padding-top: 24px;
}

/* Last segment per post: content row. Adds bottom edge + shadow +
   gap to next post. Internal padding is set in the consolidated
   rule below. */
.blogTable td#PostContent {
  border-bottom: 1px solid var(--scms-divider-light);
  border-bottom-left-radius: var(--scms-radius-card);
  border-bottom-right-radius: var(--scms-radius-card);
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* --- Post title (#PostTitle). Promote to a magazine headline. The
   inline style="margin:0px" on the <h2> already defeats the global
   h2's 48px top margin. We restyle the h2 below. ----------------- */
.blogTable td#PostTitle h2 {
  margin: 0 !important;
  padding: 0;
  font-family: var(--scms-font-heading);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.blogTable td#PostTitle h2 a {
  color: var(--scms-purple) !important;
  text-decoration: none !important;
  transition: color 0.18s ease;
}

.blogTable td#PostTitle h2 a:hover,
.blogTable td#PostTitle h2 a:focus {
  color: var(--scms-green) !important;
  text-decoration: none !important;
}

/* --- Byline row (#InfoRow). The CMS emits "Posted By <b>SCMS</b>,
   Thursday, March 12, 2026<br />[Updated: ...]" inside an italicized,
   bottom-padded <td>. Reshape into a clean magazine-style byline:
   small Overpass in primary dark text (legible at this size — blue
   washed out too much), sentence case. Strip the italic and the inline
   padding-bottom. --------------------------------------------------- */
.blogTable td#InfoRow {
  font-style: normal !important;
  /* Keep the cell-level horizontal padding (28px each side) so the byline
     aligns with the title and body. */
  padding: 8px 28px 18px !important;
  font-family: var(--scms-font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--scms-text);
  line-height: 1.5;
}

.blogTable td#InfoRow b {
  font-weight: 700;
  color: inherit;
}

/* --- Post body (#PostContent). Long-form reading needs comfortable
   typography. Padding shorthand here also defines the bottom card edge:
   top 4px (tight to byline above), both sides 28px (align with title
   and byline), bottom 28px (card foot). ----------------------------- */
.blogTable td#PostContent {
  padding: 4px 28px 28px !important;
}

.blogTable td#PostContent .ContributedContent {
  font-size: 16px;
  line-height: 1.65;
  color: var(--scms-text);
  font-family: var(--scms-font-body);
}

.blogTable td#PostContent .ContributedContent p {
  margin: 0 0 16px;
}

.blogTable td#PostContent .ContributedContent p:last-child {
  margin-bottom: 0;
}

/* --- Embedded post images.
   Match the .scms-award__photo treatment used on the awards pages:
   capped at 180px wide, white background, 4px purple top accent,
   rounded corners, card shadow. The CMS wraps each image in its own
   <p>; we hook on :has(> img) to grab any such paragraph inside
   #PostContent and float it right so the tags line below wraps
   cleanly. ----------------------------------------------------------- */
.blogTable td#PostContent p:has(> img) {
  float: right;
  clear: right;
  width: 180px;
  margin: 0 0 14px 20px;
  padding: 0;
}

.blogTable td#PostContent img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background-color: #fff;
  border-top: 4px solid var(--scms-purple);
  border-radius: 4px;
  box-shadow: var(--scms-shadow-card);
  margin: 0;
}

/* --- Tags row at the bottom of each post: <p style="font-style:italic">
   <b>Tags:</b> <a>tag</a></p>. Restyle as a clean meta line with pill
   tags matching the calloutbox top-tags. ---------------------------- */
.blogTable td#PostContent p[style*="font-style:italic"],
.blogTable td#PostContent p[style*="font-style: italic"] {
  font-style: normal !important;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--scms-divider-light);
  font-size: 13px;
  color: var(--scms-text-muted);
  text-align: left;
}

.blogTable td#PostContent p[style*="font-style:italic"] b,
.blogTable td#PostContent p[style*="font-style: italic"] b {
  font-family: var(--scms-font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--scms-text-muted);
  margin-right: 8px;
  letter-spacing: 0.2px;
}

.blogTable td#PostContent p[style*="font-style:italic"] a[id^="A"],
.blogTable td#PostContent p[style*="font-style: italic"] a[id^="A"] {
  display: inline-block;
  padding: 3px 10px;
  margin: 0 4px 4px 0;
  border-radius: 999px;
  background-color: var(--scms-bg-pale-blue);
  border: 1px solid var(--scms-bg-light-blue);
  color: var(--scms-purple) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.blogTable td#PostContent p[style*="font-style:italic"] a[id^="A"]:hover,
.blogTable td#PostContent p[style*="font-style: italic"] a[id^="A"]:hover {
  background-color: var(--scms-blue);
  border-color: var(--scms-blue);
  color: #fff !important;
}

/* --- Permalink / Comments meta line. These sit as bare anchors at the
   bottom of #PostContent, with a "|&nbsp;" bare text separator
   between them. Style as a small muted meta line. The bare separator
   is collapsed via font-size:0 on the cell's trailing region — but
   that's complicated because the ContributedContent div above also
   inherits font-size. Simpler: target the Permalink anchor directly
   by its href pattern. ---------------------------------------- */
.blogTable td#PostContent > a[href*="/blogpost/"] {
  display: inline-block;
  clear: both;
  margin: 14px 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--scms-blue);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.blogTable td#PostContent > a[href*="/blogpost/"]:hover,
.blogTable td#PostContent > a[href*="/blogpost/"]:focus {
  color: var(--scms-green);
  text-decoration: underline;
}

/* The "|&nbsp;" separator between Permalink and Comments is a bare
   text node and can't be selected directly. We leave it visible — it
   reads as a quiet separator between two small meta links and doesn't
   hurt readability. */

/* --- Hide the hand-drawn bottom divider the CMS emits at the end of
   each post: <div style="border-top:solid 1px #cccccc; line-height:
   20px; margin:27px 0px 0px 0px">&nbsp;</div>. The card geometry
   replaces it. ------------------------------------------------ */
.blogTable td#PostContent > div[style*="border-top:solid 1px"],
.blogTable td#PostContent > div[style*="border-top: solid 1px"] {
  display: none !important;
}

/* The <div style="clear:both"> just above the divider is harmless;
   leave it. */

/* --- Pager (bottom of the listing). The blog pager structure differs
   from the news pager: <div class="pager"> contains a leading <b>Page
   1 of 3</b><br> followed by alternating <b>currentPage</b> +
   "&nbsp|&nbsp" bare-text separators + <a>otherPage</a> anchors. No
   .small wrapper. The inline <style> block sets .pager { margin: 0 5px }
   which we override.

   Same visual treatment as the news pager: hide the "Page X of Y"
   preface, render numbers as pills (current = filled blue, others =
   ghosted), collapse the bare-text "|&nbsp;" separators via the
   parent-font-size:0 ghost trick. ----------------------------------- */
#SpContent .blogTable + .pager,
#SpContent_Container > .pager {
  text-align: center;
  margin: 24px 0 8px !important;       /* override inline .pager margin */
  font-size: 0;                        /* collapses bare "|&nbsp;" text */
}

/* Hide the "Page 1 of 3" preface — the pills convey it. The <br> right
   after it would otherwise leave a blank line; hide that too. ------ */
#SpContent .blogTable + .pager > b:first-child,
#SpContent .blogTable + .pager > b:first-child + br,
#SpContent_Container > .pager > b:first-child,
#SpContent_Container > .pager > b:first-child + br {
  display: none;
}

/* Current page pill (rendered as <b> or <B>). */
#SpContent .blogTable + .pager b,
#SpContent_Container > .pager b {
  display: inline-block;
  font-family: var(--scms-font-body);
  font-size: 14px;
  font-weight: 700;
  min-width: 32px;
  padding: 6px 10px;
  margin: 0 2px;
  border-radius: var(--scms-radius-btn);
  background-color: var(--scms-blue);
  color: #fff;
  text-align: center;
}

/* Other-page anchor pills, ghosted. */
#SpContent .blogTable + .pager a,
#SpContent_Container > .pager a {
  display: inline-block;
  font-family: var(--scms-font-body);
  font-size: 14px;
  font-weight: 600;
  min-width: 32px;
  padding: 6px 10px;
  margin: 0 2px;
  border-radius: var(--scms-radius-btn);
  background-color: #fff;
  border: 1px solid var(--scms-divider);
  color: var(--scms-purple);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#SpContent .blogTable + .pager a:hover,
#SpContent .blogTable + .pager a:focus,
#SpContent_Container > .pager a:hover,
#SpContent_Container > .pager a:focus {
  background-color: var(--scms-bg-pale-blue);
  border-color: var(--scms-blue);
  color: var(--scms-blue);
}

/* --- Mobile: tighten card padding and shrink the title. The desktop
   rule uses padding shorthand with !important, so longhand overrides
   here must also be !important to win. -------------------------------- */
@media (max-width: 600px) {
  .blogTable tr.blog_item > td,
  .blogTable tr.blog_altitem > td {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .blogTable td#PostTitle {
    padding-top: 18px !important;
  }
  .blogTable td#InfoRow {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .blogTable td#PostContent {
    padding-bottom: 22px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-bottom: 18px;
  }
  .blogTable td#PostTitle h2 {
    font-size: 22px;
  }
  .blogTable td#PostContent .ContributedContent {
    font-size: 15px;
  }
  /* Smaller photos on mobile so they don't dominate the narrower column. */
  .blogTable td#PostContent p:has(> img) {
    width: 140px;
    margin-left: 14px;
  }
  #SpContent_Container > .calloutbox {
    padding: 18px 18px;
  }
  #SpContent_Container > .calloutbox form#SearchForm input[type="text"] {
    min-width: 0;
    width: 100%;
    margin: 0 0 8px;
  }
}


/* -----------------------------------------------------------------------------
   A31. SUPPORT SCMS PAGE — .scms-support-card
   Card component for the "Support the Society" page (/page/support or
   similar). Replaces the flat paragraph + <hr> layout with white cards
   that use a solid colored title bar matching the existing .btn color
   system, a white body area, and the standard .sig-cta-block CTA.

   USAGE

     <div class="scms-support-card scms-support-card--blue">
       <p class="scms-support-card__title">Become a Member</p>
       <div class="scms-support-card__body">
         <p>Body copy here...</p>
       </div>
       <div class="sig-cta-block">
         <a href="..." class="btn btn--blue">Button Label</a>
       </div>
     </div>

   COLOR MODIFIERS (title bar color — pick the one that matches the btn)
     .scms-support-card--blue    Blue title bar   → use with .btn--blue
     .scms-support-card--purple  Purple title bar → use with .btn--purple
     .scms-support-card--green   Green title bar  → use with .btn--green

   NOTES
   - The .sig-cta-block inside a card has its gradient spotlight cleared
     so it sits cleanly against the white card background.
   - 6px horizontal margin (matching --scms-hlbox-margin) keeps the card
     shadow from being clipped at the container edge.
   ----------------------------------------------------------------------------- */

.scms-support-card {
  background: var(--scms-bg-card);
  border-radius: var(--scms-radius-card);
  box-shadow: var(--scms-shadow-card);
  margin: 0 6px 24px;
  padding: 0;
  overflow: hidden;
}

/* Title bar — full-width colored strip with white Overpass text. */
.scms-support-card__title {
  font-family: var(--scms-font-heading);
  font-size: 1.15em;
  font-weight: 900;
  letter-spacing: -0.3px;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  padding: 12px 20px;
  /* Fallback color if no modifier is applied. */
  background-color: var(--scms-blue-btn);
}

/* Color modifiers — set on the card wrapper, target the title bar. */
.scms-support-card--blue   .scms-support-card__title { background-color: var(--scms-blue-btn); }
.scms-support-card--purple .scms-support-card__title { background-color: var(--scms-purple); }
.scms-support-card--green  .scms-support-card__title { background-color: var(--scms-green); }

/* Body area — padded, readable, no bottom padding (button wrapper takes over). */
.scms-support-card__body {
  padding: 18px 20px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--scms-text);
}

.scms-support-card__body p {
  margin: 0;
}

/* CTA block inside a card — clear the gradient spotlight from .sig-cta-block
   so it sits cleanly against the white card background. Keep horizontal
   padding aligned with the body text above it. */
.scms-support-card .sig-cta-block {
  background: none;
  padding: 14px 20px 20px;
  margin: 0;
}


/* -----------------------------------------------------------------------------
   A32. CONVERSATIONS WITH THE ARCHIVES (CWA) PAGE
   Scoped to #cwa-page to avoid collisions with global styles (especially
   the A5 h2 blue-bar treatment, which is reset here via scoped selectors).

   COMPONENTS
     .cwa-header           Centered header image, capped at 630px wide
     .cwa-cards            3-up navigation card grid; collapses to 1 col
                           on screens ≤ 720px
     .cwa-card             Individual nav card: colored accent bar on top,
                           white body, hover lift
     .cwa-card--purple     Purple bar  (→ matches .btn--purple)
     .cwa-card--green      Green bar   (→ matches .btn--green)
     .cwa-card--blue       Blue bar    (→ matches .btn--blue)
     .cwa-card__link       Absolutely-positioned empty <a> — a direct child
                           of .cwa-card with no block-level descendants, so
                           the YM CMS will not strip it. Covers the entire
                           card (inset:0) and sits at z-index 0; card body
                           is z-index 1 so text remains selectable.
     .cwa-section          White panel card for each edition's video + text.
                           Large radius and soft shadow match the nav cards.
     .cwa-video            Responsive 16:9 Vimeo embed wrapper (padding-top
                           trick keeps the iframe intrinsically sized).

   HEADING OVERRIDES (scoped to #cwa-page)
     h2 inside .cwa-section carries the global A5 treatment: light-blue
     background bar, blue left border, box-shadow, and a 42px top margin.
     All of that is reset here so the section titles render as plain bold
     headings inside the card panels.
   ----------------------------------------------------------------------------- */

/* --- Scoped custom properties --- */
#cwa-page {
  --cwa-radius:       18px;
  --cwa-shadow:       0 10px 30px rgba(0, 0, 0, 0.10);
  --cwa-shadow-hover: 0 14px 44px rgba(0, 0, 0, 0.14);
  --cwa-muted:        #5a5f6a;
}

/* --- Heading overrides --- */
/* Strip the global A5 h2 blue bar inside this page scope. */
#cwa-page h2 {
  background:   transparent;
  border-left:  none;
  box-shadow:   none;
  padding:      0;
  margin:       0 0 0.6em;
  line-height:  1.2;
}

/* Tighten the global h4 top margin (32px → 1.25em) inside the page. */
#cwa-page h4 {
  margin: 1.25em 0 0.5em;
}

/* Tighten paragraph rhythm inside the page. */
#cwa-page p {
  margin: 0 0 1em;
}

/* Body-text links inside section panels get visible underlines since they
   sit in prose rather than in nav/button contexts. */
#cwa-page .cwa-section a {
  text-decoration:        underline;
  text-underline-offset:  0.15em;
}

/* Divider line between the nav cards and the intro paragraphs. */
#cwa-page hr {
  border:     0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  margin:     1.25em 0;
}


/* --- Header image --- */
#cwa-page .cwa-header {
  display:    block;
  max-width:  630px;
  margin:     0 auto 25px;
  height:     auto;
}


/* --- Navigation card grid --- */
.cwa-cards {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   1em;
  margin:                1.25em 0 2em;
  align-items:           stretch;   /* all three cards fill the tallest row height */
}

@media (max-width: 720px) {
  .cwa-cards {
    grid-template-columns: 1fr;
  }
}


/* --- Individual nav card --- */
.cwa-card {
  position:   relative;
  background: var(--scms-bg-card);
  border-radius: var(--cwa-radius);
  box-shadow: var(--cwa-shadow);
  border:     1px solid rgba(0, 0, 0, 0.06);
  overflow:   hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.cwa-card:hover,
.cwa-card:focus-within {
  transform:  translateY(-2px);
  box-shadow: var(--cwa-shadow-hover);
  filter:     saturate(1.05);
}


/* Colored accent bar — color is set by the modifier class below. */
.cwa-card__bar {
  height: 20px;
}

.cwa-card--purple .cwa-card__bar { background-color: var(--scms-purple); }
.cwa-card--green  .cwa-card__bar { background-color: var(--scms-green); }
.cwa-card--blue   .cwa-card__bar { background-color: var(--scms-blue); }


/* Full-card overlay anchor.
   This is an empty <a> placed as a direct child of .cwa-card (no block
   descendants → the YM CMS will not strip it). Positioned absolutely with
   inset:0 it covers the whole card; z-index 0 keeps it behind the text.
   .cwa-card__body is z-index 1 so labels/desc remain selectable.

   Keyboard focus on the overlay triggers :focus-within on the card,
   which fires the hover lift. */
.cwa-card__link {
  position: absolute;
  inset:    0;
  z-index:  1;   /* above static card body — makes entire card surface clickable */
  /* Visually hidden but still focusable. */
  overflow:    hidden;
  white-space: nowrap;
  text-indent: -9999px;
}

/* Keep link text white/unstyled in all states — the generic a:hover would
   otherwise shift color or add underline on the invisible text. */
.cwa-card__link,
.cwa-card__link:link,
.cwa-card__link:visited,
.cwa-card__link:hover,
.cwa-card__link:focus,
.cwa-card__link:active {
  color:           transparent;
  text-decoration: none;
}


/* Card body — static (no z-index), so the z-index:1 overlay sits above it
   and the entire card surface is clickable. */
.cwa-card__body {
  padding: 1.1em 1.1em 1.2em;
}

/* Label: bold edition name. Matches .cwa-label from the original. */
.cwa-card__label {
  display:     block;
  font-weight: 700;
  margin:      0 0 0.55em;
  line-height: 1.35;
  color:       var(--scms-text);
}

/* Description: muted supporting text. */
.cwa-card__desc {
  margin:    0;
  color:     var(--cwa-muted);
  font-size: 0.9em;
}

.cwa-card__desc span {
  opacity: 0.9;
}


/* --- Edition content panels --- */
/* Named anchor elements sit immediately BEFORE each .cwa-section div —
   the same freestanding pattern used on TOC pages. Clicking a nav card
   scrolls to just above the section card so the whole panel is visible.
   scroll-margin-top offsets the SCMS sticky site header. */
#cwa-page a[name] {
  display:           block;
  height:            0;
  overflow:          hidden;
  scroll-margin-top: 116px;
}

/* --- Election candidate pages: named anchor scroll offset ----------------
   Freestanding <a name="..." id="..."> elements placed before each
   candidate <h3> use the same pattern. scroll-margin-top clears the
   sticky site header so the candidate name lands visibly below the nav
   rather than hidden behind it.
   Scoped to #SpContent_Container so it doesn't bleed to other a[name]
   uses elsewhere on the site. */
#SpContent_Container a[name] {
  display:           block;
  height:            0;
  overflow:          hidden;
  scroll-margin-top: 116px;
}

.cwa-section {
  background:    var(--scms-bg-card);
  border-radius: var(--cwa-radius);
  box-shadow:    0 8px 24px rgba(0, 0, 0, 0.08);
  border:        1px solid rgba(0, 0, 0, 0.06);
  padding:       1.25em 1.25em 1.35em;
  margin:        0 0 1em;
}

/* Last section needs no bottom margin. */
.cwa-section:last-child {
  margin-bottom: 0;
}


/* --- Responsive 16:9 video embed --- */
.cwa-video {
  position:      relative;
  padding-top:   56.25%;     /* 9 ÷ 16 = 56.25% */
  margin-bottom: 1.5em;
}

.cwa-video iframe {
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
  height:   100%;
  border:   0;
}


/* -----------------------------------------------------------------------------
   A33. CAREER CENTER & NEWS ARTICLE — #SpNavBar LINK BUTTONS
   Career Center pages (/networking/): Search Openings, Résumé/CV Search,
   Submit an Opening, Subscribe. News article pages: Email to a Friend.

   APPROACH: Match exactly how A27 (Calendar) handles its Upcoming/Past/Month
   View buttons — style the anchors directly as white pill buttons using href
   or href-pattern attribute selectors. Do NOT touch #sp-main::before or any
   layout properties. A7.6's existing padding: 36px 0 20px on #SpNavBar
   already provides the vertical spacing that makes the Calendar look correct;
   the same spacing applies here automatically.

   Career Center links are direct > a children of #SpNavBar (no wrapper div).
   News article "Email to a Friend" is wrapped in a <div> inside #SpNavBar.
   Both patterns are covered below.
   ----------------------------------------------------------------------------- */

/* --- Career Center: all four nav links as white pills. -------------------- */
#SpNavBar > a[href*="opening_search"],
#SpNavBar > a[href*="resume_search"],
#SpNavBar > a[href*="submit.asp"],
#SpNavBar > a[href*="subscribe.asp"],
#SpNavBar > a[href*="opening_search"]:link,
#SpNavBar > a[href*="resume_search"]:link,
#SpNavBar > a[href*="submit.asp"]:link,
#SpNavBar > a[href*="subscribe.asp"]:link,
#SpNavBar > a[href*="opening_search"]:visited,
#SpNavBar > a[href*="resume_search"]:visited,
#SpNavBar > a[href*="submit.asp"]:visited,
#SpNavBar > a[href*="subscribe.asp"]:visited {
  display: inline-block !important;
  margin: 0 6px 0 0 !important;
  padding: 7px 14px !important;
  border: 2px solid var(--scms-blue-btn) !important;
  border-radius: var(--scms-radius-btn) !important;
  background-color: #fff !important;
  color: var(--scms-blue-btn) !important;
  font-family: var(--scms-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

#SpNavBar > a[href*="opening_search"]:hover,
#SpNavBar > a[href*="resume_search"]:hover,
#SpNavBar > a[href*="submit.asp"]:hover,
#SpNavBar > a[href*="subscribe.asp"]:hover,
#SpNavBar > a[href*="opening_search"]:focus,
#SpNavBar > a[href*="resume_search"]:focus,
#SpNavBar > a[href*="submit.asp"]:focus,
#SpNavBar > a[href*="subscribe.asp"]:focus {
  background-color: var(--scms-blue-btn) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* --- Hide GIF icons inside Career Center links. --------------------------- */
#SpNavBar > a[href*="opening_search"] img,
#SpNavBar > a[href*="resume_search"] img,
#SpNavBar > a[href*="submit.asp"] img,
#SpNavBar > a[href*="subscribe.asp"] img {
  display: none !important;
}

/* --- Career Center RSS link: push right, purple text, green on hover. ----- */
#SpNavBar > a[href*="opening_search"] ~ #divRssLink,
#SpNavBar > a[href*="resume_search"] ~ #divRssLink {
  float: right !important;
}

/* --- News article: "Email to a Friend" (wrapped in a <div>). -------------- */
#SpNavBar > div > a[href*="members/send.asp"],
#SpNavBar > div > a[href*="members/send.asp"]:link,
#SpNavBar > div > a[href*="members/send.asp"]:visited {
  display: inline-block !important;
  margin: 0 !important;
  padding: 7px 14px !important;
  border: 2px solid var(--scms-blue-btn) !important;
  border-radius: var(--scms-radius-btn) !important;
  background-color: #fff !important;
  color: var(--scms-blue-btn) !important;
  font-family: var(--scms-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

#SpNavBar > div > a[href*="members/send.asp"]:hover,
#SpNavBar > div > a[href*="members/send.asp"]:focus {
  background-color: var(--scms-blue-btn) !important;
  color: #fff !important;
  text-decoration: none !important;
}

#SpNavBar > div > a[href*="members/send.asp"] img {
  display: none !important;
}




/* -----------------------------------------------------------------------------
   A34. RESOURCE CARD GRID  —  .scms-card-grid / .scms-card
   A reusable 3-column card grid for resource listing pages (Film/Media
   Journals, Affiliate Organizations fallback, etc.). Each card has a title
   link, optional description text, and a hover lift effect.

   MARKUP PATTERN:
   <div class="scms-card-grid">
     <div class="scms-card">
       <p class="scms-card__name"><a href="..." target="_blank">Title</a></p>
       <p class="scms-card__desc">Description text.</p>
     </div>
     ...
   </div>

   The grid is self-contained and can be dropped into any #SpContent page.
   Columns: 3 on wide, 2 on ≤800px, 1 on ≤540px.
   ----------------------------------------------------------------------------- */

.scms-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.scms-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  padding: 18px 18px 14px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.scms-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  border-color: var(--scms-blue);
  transform: translateY(-2px);
}

/* --- Card title: purple, bold Overpass, turns blue on hover. -------------- */
.scms-card__name {
  font-family: 'Overpass', 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
}

.scms-card__name a,
.scms-card__name a:link,
.scms-card__name a:visited {
  color: var(--scms-purple, #5b2d8e) !important;
  text-decoration: none !important;
}

.scms-card__name a:hover,
.scms-card__name a:focus {
  color: var(--scms-blue, #00aeef) !important;
  text-decoration: underline !important;
}

/* --- Card description: small, muted, fills remaining card height. --------- */
.scms-card__desc {
  font-family: var(--scms-font-body, 'Open Sans', sans-serif);
  font-size: 13px;
  line-height: 1.55;
  color: #555;
  margin: 0;
  flex: 1;
}

/* --- Responsive breakpoints. ---------------------------------------------- */
@media (max-width: 800px) {
  .scms-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .scms-card-grid {
    grid-template-columns: 1fr;
  }
}


/* -----------------------------------------------------------------------------
   A35. 404 ERROR PAGE  —  .scms-404
   A self-contained page layout for the CMS 404 / "page not found" error.
   Paste the matching HTML template into the YM 404 page slot; the styles
   here handle everything — no inline style="" overrides needed.

   Structure:
     .scms-404                      Full-page centering wrapper
     .scms-404__logo-bar            Purple header strip (SCMS brand + icon)
     .scms-404__card                White content card (rounded bottom corners)
     .scms-404__error-number        Giant "404" in SCMS purple
     .scms-404__film-strip          Decorative cinema-film row of frames
     .scms-404__film-frame          Individual film cell
     .scms-404__film-frame--active  Filled (purple) cell variant
     .scms-404__headline            "Page not found" heading
     .scms-404__body                Apology / bookmark-update paragraph
     .scms-404__divider             Blue horizontal rule accent
     .scms-404__help-grid           Two-column grid of help blocks
     .scms-404__help-block          Individual help card (icon + copy + link)
     .scms-404__btn-home            Green CTA button → homepage
     .scms-404__footer-note         Small muted domain credit line
     .scms-404__accent-bar          Blue bottom stripe (mirrors logo-bar top)
   ----------------------------------------------------------------------------- */

.scms-404 {
  font-family: var(--scms-font-body);
  background: var(--scms-bg-page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
  text-align: center;
}

/* Purple logo / brand header strip */
.scms-404__logo-bar {
  width: 100%;
  max-width: 680px;
  background: var(--scms-purple);
  border-radius: 12px 12px 0 0;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
}

.scms-404__logo-icon {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scms-404__logo-icon svg {
  display: block;
}

.scms-404__logo-text {
  font-family: var(--scms-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

/* White content card */
.scms-404__card {
  width: 100%;
  max-width: 680px;
  background: #fff;
  border-radius: 0 0 12px 12px;
  border: 1px solid var(--scms-divider);
  border-top: none;
  padding: 48px 48px 40px;
  box-sizing: border-box;
}

/* Giant 404 numeral */
.scms-404__error-number {
  font-family: var(--scms-font-heading);
  font-size: 96px;
  font-weight: 700;
  color: var(--scms-purple);
  line-height: 1;
  margin: 0 0 4px;
  letter-spacing: -2px;
}

/* Film-strip decorative element */
.scms-404__film-strip {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 28px;
}

.scms-404__film-frame {
  width: 28px;
  height: 20px;
  border: 2px solid var(--scms-purple);
  border-radius: 2px;
  background: var(--scms-bg-page);
  position: relative;
  opacity: 0.4;
}

.scms-404__film-frame--active {
  background: var(--scms-purple);
  opacity: 1;
}

/* Sprocket holes — left and right nubs on each frame */
.scms-404__film-frame::before,
.scms-404__film-frame::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 4px;
  background: #fff;
  border-radius: 1px;
  top: 50%;
  transform: translateY(-50%);
}

.scms-404__film-frame::before { left: -1px; }
.scms-404__film-frame::after  { right: -1px; }

.scms-404__film-frame--active::before,
.scms-404__film-frame--active::after {
  background: var(--scms-purple);
  border: 1px solid #fff;
}

/* Headline and body copy */
.scms-404__headline {
  font-family: var(--scms-font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--scms-text);
  margin: 0 0 10px;
}

.scms-404__body {
  font-size: 15px;
  color: var(--scms-text-muted);
  line-height: 1.7;
  margin: 0 auto 32px;
  max-width: 460px;
}

/* Blue horizontal rule accent */
.scms-404__divider {
  width: 60px;
  height: 3px;
  background: var(--scms-blue);
  border-radius: 2px;
  margin: 0 auto 32px;
}

/* Two-column help block grid */
.scms-404__help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 32px;
}

.scms-404__help-block {
  background: var(--scms-bg-page);
  border: 1px solid var(--scms-divider);
  border-radius: 10px;
  padding: 20px 18px;
  text-align: left;
}

.scms-404__help-block-icon {
  font-size: 22px;
  color: var(--scms-purple);
  margin-bottom: 8px;
  display: block;
}

.scms-404__help-block-title {
  font-family: var(--scms-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--scms-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 6px;
}

.scms-404__help-block p {
  font-size: 13px;
  color: var(--scms-text);
  line-height: 1.6;
  margin: 0;
}

.scms-404__help-block a {
  color: var(--scms-blue-btn);
  text-decoration: none;
  font-weight: 700;
}

.scms-404__help-block a:hover {
  text-decoration: underline;
}

/* Green homepage CTA button — reuses .btn base but defined standalone
   so the 404 page works even if .btn isn't loaded in this context */
.scms-404__btn-home {
  display: inline-block;
  font-family: var(--scms-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--scms-green);
  border-radius: var(--scms-radius-btn);
  padding: 12px 32px;
  text-decoration: none;
  letter-spacing: 0.3px;
}

.scms-404__btn-home:hover {
  background: var(--scms-green-hover);
  text-decoration: none;
  color: #fff;
}

/* Small muted domain line at the foot of the card */
.scms-404__footer-note {
  margin-top: 28px;
  font-size: 12px;
  color: var(--scms-divider);
}

/* Blue stripe below the card — mirrors the logo-bar top accent */
.scms-404__accent-bar {
  height: 4px;
  background: var(--scms-blue);
  width: 100%;
  max-width: 680px;
  border-radius: 0 0 4px 4px;
  margin-top: -1px;
}

/* Responsive: stack help blocks on narrow viewports */
@media (max-width: 540px) {
  .scms-404__card {
    padding: 32px 24px 28px;
  }

  .scms-404__error-number {
    font-size: 72px;
  }

  .scms-404__help-grid {
    grid-template-columns: 1fr;
  }
}


/* -----------------------------------------------------------------------------
   A36. FORUMS & NETWORKING PAGE  —  /forums/
   Covers both the forum index (/forums/Default.aspx) and topic-list subpages
   (/forums/Topics.aspx?forum=...).

   INDEX PAGE:  #SpNavBar.forumPagingBar contains Top Posters link + search.
                Topic table is table.datagrid1.forumgrid.

   SUBPAGES:    #SpNavBar.forumPagingBar contains pager + Forum Actions + search.
                Topic table is table#tblForum.datagrid1 (no .forumgrid class).
                .ForumBreadcrumbs and .ForumModerators render inside #SpSubHead
                (dark band) — they need white/light treatment.

   #SpNavBar here also carries .forumPagingBar — scoping our overrides to
   #SpNavBar.forumPagingBar avoids collisions with A27 (Calendar) and A33
   (Career Center) which also style #SpNavBar.

   LAYOUT: The inline style sets .forumPagingBar height: 26px and gray bg.
   A7.6's padding: 36px 0 20px on #SpNavBar pushes the toolbar below the
   dark band. We only kill the gray bg and fixed height — do NOT override
   padding or the toolbar collapses back into the dark band.
   ----------------------------------------------------------------------------- */

/* --- Toolbar: kill the inline gray bg and fixed 26px height only. ---------- */
#SpNavBar.forumPagingBar {
  background-color: transparent !important;
  height: auto !important;
}

/* --- "Top Posters" link (index page): blue-outlined pill. ------------------ */
#SpNavBar.forumPagingBar a[href*="forum_posters"],
#SpNavBar.forumPagingBar a[href*="forum_posters"]:link,
#SpNavBar.forumPagingBar a[href*="forum_posters"]:visited {
  display: inline-block !important;
  margin: 0 6px 0 0 !important;
  padding: 7px 14px !important;
  border: 2px solid var(--scms-blue-btn) !important;
  border-radius: var(--scms-radius-btn) !important;
  background-color: #fff !important;
  color: var(--scms-blue-btn) !important;
  font-family: var(--scms-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

#SpNavBar.forumPagingBar a[href*="forum_posters"]:hover,
#SpNavBar.forumPagingBar a[href*="forum_posters"]:focus {
  background-color: var(--scms-blue-btn) !important;
  color: #fff !important;
  text-decoration: none !important;
}

#SpNavBar.forumPagingBar a[href*="forum_posters"] img {
  display: none !important;
}

/* --- Forum Actions dropdown (subpages): blue-outlined pill. ---------------- */
.forumActionsDropdown {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  padding: 7px 14px !important;
  border: 2px solid var(--scms-blue-btn) !important;
  border-radius: var(--scms-radius-btn) !important;
  background-color: #fff !important;
  color: var(--scms-blue-btn) !important;
  font-family: var(--scms-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.forumActionsDropdown:hover {
  background-color: var(--scms-blue-btn) !important;
  color: #fff !important;
}

/* Collapse the floated arrow image div inside Forum Actions. */
.forumActionsDropdown > div {
  display: none !important;
  float: none !important;
}

/* --- Search textbox: match site input style. -------------------------------- */
.forumSearchTextbox {
  height: auto !important;
  padding: 7px 28px 7px 10px !important;
  border: 1px solid var(--scms-divider) !important;
  border-radius: var(--scms-radius-btn) !important;
  color: var(--scms-text-muted) !important;
  font-family: var(--scms-font-body) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}

.forumSearchTextbox:focus {
  border-color: var(--scms-blue-btn) !important;
  outline: none !important;
  color: var(--scms-text) !important;
}

/* --- Breadcrumbs: plain <td> rows in #SpSubHead — always on white bg.
   #SpTitleBar is the only row with the dark band background.
   Style links as standard site blue on all forum page types. -------------- */
.ForumBreadcrumbs {
  font-style: normal !important;
}

.ForumBreadcrumbs a,
.ForumBreadcrumbs a:link,
.ForumBreadcrumbs a:visited {
  color: var(--scms-blue-btn) !important;
  text-decoration: none !important;
  font-style: normal !important;
}

.ForumBreadcrumbs a:hover,
.ForumBreadcrumbs a:focus {
  color: var(--scms-purple) !important;
  text-decoration: underline !important;
}

/* --- Moderators line: also on white. --------------------------------------- */
.ForumModerators {
  color: var(--scms-text-muted) !important;
  font-size: 13px !important;
}

.ForumModerators a,
.ForumModerators a:link,
.ForumModerators a:visited {
  color: var(--scms-blue-btn) !important;
  text-decoration: none !important;
}

.ForumModerators a:hover,
.ForumModerators a:focus {
  color: var(--scms-purple) !important;
  text-decoration: underline !important;
}

/* --- Pager (subpage toolbar): page number links and nav arrows. ------------ */
.forumPaging,
.pagerNumbers {
  font-size: 14px !important;
  font-family: var(--scms-font-body) !important;
  line-height: normal !important;
  color: var(--scms-text-muted) !important;
}

.forumPaging a,
.pagerPages a,
.pagingDelimiter {
  color: var(--scms-blue-btn) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.forumPaging a:hover,
.pagerPages a:hover {
  text-decoration: underline !important;
  color: var(--scms-purple) !important;
}

#pagingCurrentPage {
  color: var(--scms-text) !important;
  font-weight: 700 !important;
}

/* --- Forum index listing table (table.datagrid1.forumgrid). ---------------- */
table.datagrid1.forumgrid {
  border-collapse: collapse !important;
  width: 100% !important;
  margin-bottom: 20px !important;
  font-family: var(--scms-font-body) !important;
}

/* --- Subpage topic listing table (table#tblForum.datagrid1). --------------- */
table#tblForum.datagrid1 {
  border-collapse: collapse !important;
  width: 100% !important;
  margin-bottom: 20px !important;
  font-family: var(--scms-font-body) !important;
}

/* Section heading rows — shared by both table variants. */
table.datagrid1 tr.header td {
  background-color: var(--scms-bg-heading-blue) !important;
  color: var(--scms-text) !important;
  font-family: var(--scms-font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  border-bottom: 2px solid var(--scms-blue) !important;
}

/* White data rows */
table.datagrid1 tr.item td {
  background-color: #fff !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--scms-divider-light) !important;
  font-size: 14px !important;
  vertical-align: top !important;
}

/* Alternating data rows */
table.datagrid1 tr.altitem td {
  background-color: var(--scms-bg-page) !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--scms-divider-light) !important;
  font-size: 14px !important;
  vertical-align: top !important;
}

/* Topic / forum name links */
table.datagrid1 tr.item td a,
table.datagrid1 tr.altitem td a {
  color: var(--scms-blue-btn) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

table.datagrid1 tr.item td a:hover,
table.datagrid1 tr.altitem td a:hover {
  text-decoration: underline !important;
}

/* Member name links in Author / Latest Post columns */
table.datagrid1 tr.item td a[href*="/members/"],
table.datagrid1 tr.altitem td a[href*="/members/"] {
  color: var(--scms-purple) !important;
  font-weight: 700 !important;
}

/* Thread-type icon: constrain so it doesn't push row height. */
table.datagrid1 tr.item td img,
table.datagrid1 tr.altitem td img {
  vertical-align: middle !important;
}

/* --- Post/thread view page (/forums/Posts.aspx?topic=...) ------------------ */

/* "Page X of Y" text above the toolbar on post pages */
#SpContent_Container > .forumPaging,
#SpContent_Container .pager {
  font-family: var(--scms-font-body) !important;
  font-size: 14px !important;
  color: var(--scms-text-muted) !important;
  margin-bottom: 8px !important;
}

/* Post timestamp heading */
.PostDate,
#SpContent_Container .PostDate {
  font-family: var(--scms-font-body) !important;
  font-size: 13px !important;
  color: var(--scms-text-muted) !important;
  margin: 20px 0 8px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--scms-divider-light) !important;
}

/* Permalink link on each post */
a[id*="hlPermalink"],
a[href*="Posts.aspx"][href*="#post_"] {
  color: var(--scms-text-muted) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

a[id*="hlPermalink"]:hover {
  color: var(--scms-purple) !important;
  text-decoration: underline !important;
}

/* Post author name link (left column) */
.PostAuthorName a,
.PostAuthorName a:link,
.PostAuthorName a:visited,
#SpContent_Container td.PostAuthor a,
#SpContent_Container td.PostAuthor a:link,
#SpContent_Container td.PostAuthor a:visited {
  color: var(--scms-blue-btn) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.PostAuthorName a:hover,
#SpContent_Container td.PostAuthor a:hover {
  text-decoration: underline !important;
  color: var(--scms-purple) !important;
}

/* "Posts: N" label under author name */
.PostAuthorDetails,
#SpContent_Container td.PostAuthor .small {
  font-size: 12px !important;
  color: var(--scms-text-muted) !important;
}


/* =============================================================================
   ============================================================================
                          PART B  —  LEGACY STYLES
   ============================================================================
   =============================================================================

   MIGRATION PLAN
   --------------------------------------------------------------------------
   Everything below is kept ONLY so existing CMS pages keep rendering while
   content is migrated to the active styles in Part A. Once a class has been
   replaced everywhere, delete it from this file.

   Status key:
     [DEPRECATED]  — replacement exists; migrate existing pages, then remove.
     [REVIEW]      — no confirmed usage; verify not in use, then remove.

   1. [DEPRECATED] a.bluebutton       → replace with  a.btn.btn--blue
   2. [DEPRECATED] a.greenbutton      → replace with  a.btn.btn--green
   3. [REVIEW]     p.TX               (red body text) — no confirmed usage
   4. [REVIEW]     h3.HEAD            (red alert heading) — no confirmed usage
   5. [DEPRECATED] .redbar            → replace with  .highlight-box.highlight-box--red
   6. [REVIEW]     button (bare tag)  50px flex block — overly opinionated,
                                      affects every <button>; remove once it is
                                      confirmed unused
   7. [REVIEW]     a.has-submenu      blue + bold; selector and visual both
                                      look unintentional
   8. [REVIEW]     .page-wrapper,
                   .card, .card__body,
                   .card__note,
                   .divider-label     login/standalone component — verify page
   9. [DEPRECATED] .btn-group         → replace with  .scms-btn-group
                                      (renamed to avoid Bootstrap collision;
                                      .btn-group--stacked → .scms-btn-group--stacked)
  10. [REVIEW]     All-caps named element classes
                                      span.BOLD, span.USD,
                                      p.Q, p.NOTE, p.NOTE-left, p.PRICES,
                                      p.TABLE, p.SMALL,
                                      li.BL, li.NL
                                      Holdover from an older convention.
                                      Some are still likely in use on
                                      archival YM pages; verify and migrate
                                      to modern utility/component classes,
                                      then remove.

   See MIGRATION_PLAN.md (shipped alongside this file) for the list of CMS
   pages to update and the exact find/replace for each deprecated class.
   ============================================================================= */


/* --- B1. [DEPRECATED] Old button classes -------------------------------------
   Replace every `<a class="bluebutton">`  with  `<a class="btn btn--blue">`
   Replace every `<a class="greenbutton">` with  `<a class="btn btn--green">`
   ----------------------------------------------------------------------------- */

a.bluebutton {
  background-color: var(--scms-blue-btn);
  width: 100%;
  max-width: var(--scms-btn-max-width);
  color: #fff;
  font-family: var(--scms-font-body);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  padding: var(--scms-btn-padding);
  border: none;
  border-radius: var(--scms-radius-btn);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: var(--scms-shadow-btn);
  margin-bottom: 10px;
}

a.greenbutton {
  background-color: var(--scms-green);
  width: 100%;
  max-width: var(--scms-btn-max-width);
  color: #fff;
  font-family: var(--scms-font-body);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  padding: var(--scms-btn-padding);
  border: none;
  border-radius: var(--scms-radius-btn);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: var(--scms-shadow-btn);
  margin-bottom: 10px;
}


/* --- B2. Red alert typography ----------------------------------------------
   h3.HEAD, p.TX  — [REVIEW] No confirmed usage on current live pages. Verify
                    (search CMS page HTML for `class="TX"`, `class="HEAD"`)
                    then remove.
   .redbar        — [DEPRECATED] Replace with .highlight-box.highlight-box--red
                    (modern stroked variant) wherever it appears.
   ----------------------------------------------------------------------------- */

/* Red alert heading (h3 variant, no background) */
h3.HEAD {
  color: var(--scms-red-bright);
  background-color: #fff;
  border-left: none;
  border-radius: 0;
  padding-left: 0;
  font-family: var(--scms-font-heading);
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
  margin: 24px 0 0;
  text-align: left;
}

/* Red body-text paragraph */
p.TX {
  color: var(--scms-red);
  font-family: var(--scms-font-body);
  font-size: 16px;
  line-height: 1.3;
  margin: 16px 0 0;
}

/* Full-width red alert banner */
.redbar {
  text-align: center;
  color: #fff;
  background-color: #f00;
  padding: 7px 0;
}


/* --- B3. [REVIEW] Bare <button> override ------------------------------------
   This forces every native <button> element to a fixed 50px flex block.
   It is very opinionated and likely breaks default form buttons. Leaving in
   place until confirmed the design actually depends on it.
   ----------------------------------------------------------------------------- */

button {
  vertical-align: middle;
  line-height: 1;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  padding: 20px;
}


/* --- B4. [REVIEW] Submenu link --------------------------------------------
   The original comment flagged this as probably unintentional (bright blue,
   bold, no hover state). Verify the nav still uses `.has-submenu` before
   removing.
   ----------------------------------------------------------------------------- */

a.has-submenu {
  color: #00f;
  font-weight: bold;
}


/* --- B5. [DEPRECATED] Old .btn-group class ---------------------------------
   Renamed to .scms-btn-group to avoid colliding with Bootstrap's own
   .btn-group component (which strips corner radii from buttons to create
   a connected bar). Behavior here is identical to .scms-btn-group; once
   all CMS pages have been migrated, delete this block.

   Find/replace:
     class="btn-group"          →  class="scms-btn-group"
     class="btn-group--stacked" →  class="scms-btn-group--stacked"
   ----------------------------------------------------------------------------- */

.btn-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  margin: 12px 0 10px;
}

.btn-group a.btn {
  flex: 1 1 0;
  width: auto;
  min-width: 140px;
  margin: 0;
  border-radius: var(--scms-radius-btn);
}

.btn-group.btn-group--stacked {
  flex-direction: column;
  gap: 4px;
}

.btn-group.btn-group--stacked a.btn {
  flex: 0 0 auto;
  width: 100%;
}


/* --- B6. [REVIEW] Standalone card / login-page component -------------------
   These rules appear to belong to a single standalone page layout (login or
   similar). They include a universal `*` reset — kept scoped conceptually
   here but NOT re-applied globally, since doing so wipes out spacing set
   in Part A. Verify whether the .card / .page-wrapper markup is still on
   any live page; if not, remove this block entirely.
   ----------------------------------------------------------------------------- */

.page-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}

.card {
  background: var(--scms-bg-card);
  border-radius: var(--scms-radius-card);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  max-width: 540px;
  width: 100%;
  padding: 40px 44px;
}

.card__body {
  font-size: 16px;
  color: var(--scms-text);
  margin-bottom: 28px;
}

.card__note {
  font-size: 14px;
  color: var(--scms-text-muted);
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--scms-divider-light);
}

.card__note a {
  color: var(--scms-blue-btn);
  text-decoration: none;
}

.card__note a:hover { text-decoration: underline; }

.divider-label {
  font-size: 13px;
  color: #aaa;
  text-align: center;
  position: relative;
  margin: 6px 0;
}

.divider-label::before,
.divider-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: var(--scms-divider-light);
}

.divider-label::before { left: 0; }
.divider-label::after  { right: 0; }


/* --- B10. [REVIEW] All-caps named element classes ----------------------------
   Holdover from an earlier convention where common element variants were
   labeled with all-caps single-word classes (p.Q for a question lead-in,
   span.USD for a price suffix, li.BL for a bulleted list item, etc.).
   These remain here because older YM-templated pages may still reference
   them; verify usage in the CMS and migrate to modern utility/component
   classes (e.g., p.Q → a dedicated FAQ component; p.NOTE → highlight-box
   gray variant) before removing.
   ----------------------------------------------------------------------------- */

/* --- Inline span utilities --- */

span.BOLD { font-weight: bold; }

/* Small caps for USD labels inside price displays */
span.USD {
  font-size: 0.8em;
  font-weight: normal;
}

/* --- Named paragraph classes --- */

/* Bold question label (FAQ / Q&A format) */
p.Q {
  font-family: var(--scms-font-body);
  font-size: 1em;
  font-weight: bold;
  line-height: 1.25;
  margin: 20px 0 0;
}

/* Small centered footnote / disclaimer */
p.NOTE {
  font-family: var(--scms-font-body);
  font-size: 0.9em;
  line-height: 1;
  margin: 10px 0 0;
  text-align: center;
}

/* Left-aligned footnote variant */
p.NOTE-left {
  font-family: var(--scms-font-body);
  font-size: 0.9em;
  line-height: 1;
  margin: 6px 0 0;
}

/* Large price / dollar amount display */
p.PRICES {
  font-family: var(--scms-font-body);
  font-size: 1.417em;
  font-weight: bold;
  line-height: 0.882;
  margin: 10px 0 0;
}

/* Table introductory paragraph */
p.TABLE {
  font-family: var(--scms-font-body);
  font-size: 1em;
  line-height: 1.25;
  margin: 18px 0 9px;
}

/* Fine print / small print */
p.SMALL {
  font-family: var(--scms-font-body);
  font-size: 0.8em;
  line-height: 1.5;
  margin: 10px 0 0;
}

/* --- Named list-item classes --- */

/* Standard bullet list item */
li.BL {
  color: var(--scms-text);
  font-family: var(--scms-font-body);
  font-size: 16px;
  line-height: 1.3;
  list-style: disc outside;
  margin: 7px 0 0 12px;
}

/* Standard numbered list item */
li.NL {
  color: var(--scms-text);
  font-family: var(--scms-font-body);
  font-size: 16px;
  line-height: 1.3;
  list-style: decimal outside;
  margin: 8px 0 0 12px;
  text-align: left;
}


/* =============================================================================
   END OF FILE
   When Part B is fully migrated, delete everything below the "PART B" banner
   and update the file header comment.
   ============================================================================= */

/* # 6 global_inc\RadControls\Menu\Scripts\4_3_2\menu.css */

.radmenu
{
	white-space:nowrap;
	float:left;
	position:relative;
}


.radmenu:after 
{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.radmenu ul.horizontal,
.radmenu ul.vertical
{
	margin:0;
	padding:0;
	display:none;
	position:relative;
	left:0;
	float:left;
}

.radmenu .item
{
	float:left;
	position:relative;
	list-style-image: none;
	list-style-position:outside;
	list-style:none;	
	_display:inline;
}


.radmenu .horizontal .item
{
	clear:none;
}

.radmenu .vertical .item
{
	clear:both;
}


.radmenu ul.active,
.radmenu ul.rootGroup
{
	display:block;
}

.radmenu .slide, 
.contextMenu
{
	position:absolute;
	overflow:hidden;
	display:none;
	_height:1px;
	float:left;
}

.contextMenu
{
	z-index:1000;
}

.radmenu .text
{
	display:block;
}

.radmenu a.link
{
	cursor:default;
	display:block;	
}


.scrollWrap
{
	position:absolute;
	float:left;
	overflow:hidden;
}

.radmenu .leftArrow,
.radmenu .topArrow,
.radmenu .bottomArrow,
.radmenu .rightArrow
{
	position:absolute;
	z-index:2000;
	text-indent:-1000em;
}

.radmenu .leftArrowDisabled,
.radmenu .topArrowDisabled,
.radmenu .bottomArrowDisabled,
.radmenu .rightArrowDisabled
{
	display:none;
	text-indent:-1000em;
}

.radmenu .leftImage
{
	border:0;
	float:left;
}

.rtl
{
	float:right;
}

.rtl ul.horizontal,
.rtl ul.vertical
{
	float:right;
}

.rtl .item
{
	float:right;	
}

.rtl .leftImage,
.rtlcontext .leftImage
{
	border:0;
	float:right;
}

.radmenu ul.rootGroup
{
	float:none;
	_float:left;
}

.radmenu .link
{
	width:auto;
}

/* #  YADMIN-CUSTOM CSS */
a.btn-connect.linkedin {display: none;} 
a.btn-connect.facebook {display: none;} 
#LoginForm .or-option {display: none;} 
#RegSocial {display: none;}