/* CSS Created at 5/8/2026 1:33:39 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: May 2026
   --------------------------------------------------------------------------
   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;

  /* 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 0;
}


/* -----------------------------------------------------------------------------
   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 CMS-rendered custom form and form-response tables.
   (The stray "Remy" selector from the original file has been removed — it
    was a typo with no matching markup.)
   ----------------------------------------------------------------------------- */

.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;
}

.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 12px;
  padding-left: 9px;
}

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

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

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;
}

/* --- 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;
}


/* -----------------------------------------------------------------------------
   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 */
.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);
  padding-left: 0;
        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. */
.dropdown-menu { list-style-type: none; }

.dropdown-menu > li > a {
  color: var(--scms-text);
  font-family: "Roboto Condensed", sans-serif;
  font-weight: normal;
  padding: 4px 8px;
  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.3;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: var(--scms-blue) !important;
  background-color: transparent !important;
  font-weight: bold !important;
  text-decoration: none !important;
}

/* Navbar background — transparent; actual bg comes from theme/template */
#SpNavBar { background-color: transparent; }

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


/* -----------------------------------------------------------------------------
   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.
   ----------------------------------------------------------------------------- */

a          { color: var(--scms-purple); text-decoration: underline;}
a:hover    { color: var(--scms-green); }
a:focus    { color: var(--scms-red); }
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);
  margin: 24px auto 10px;   /* full line above for clear separation from preceding content */
  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); }

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 */

/* 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 with a vertical-bar separator
   (e.g. "Caucus Homepage > | Members' Caucus Group Page > "). The bar is
   generated via ::before on every link except the first, so the markup
   stays clean — no manual `|` characters in the HTML. Wraps cleanly on
   narrow screens (each link can drop to its own line; the bar disappears
   on the wrapped item via the first-child rule). */
.scms-link-pair {
  margin: 4px 0 8px;
  font-size: 0.95em;
  line-height: 1.5;
}

.scms-link-pair a + a::before {
  content: "|";
  color: var(--scms-divider);
  margin: 0 10px;
  /* The bar isn't a link — make sure it doesn't inherit any link state. */
  text-decoration: none;
  font-weight: normal;
}

/* 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)

   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;
}


/* -----------------------------------------------------------------------------
   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;
}

.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.
   ----------------------------------------------------------------------------- */

.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;
  }
}


/* --- 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;
  }
}


/* --- 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;
}


/* --- 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 download line of soft
                              gray text and 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.

   USAGE EXAMPLE
     <div class="sig-logo-block">
       <img src="/resource/resmgr/logos/siglogos/example-900px.jpg" alt="..." />
       <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>
   ----------------------------------------------------------------------------- */

/* --- 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);
}


/* --- 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 decimal/square list — they shouldn't get the card treatment */
ol.sig-principles ol {
  list-style: decimal outside;
  margin: 8px 0 0 20px;
}

ol.sig-principles ol li {
  list-style-type: square;
  font-size: 15px;
}


/* --- CTA block: centers the join button with breathing room --- */
.sig-cta-block {
  text-align: center;
  padding: 28px 0;
  margin: 32px 0;
  background: linear-gradient(180deg, transparent 0, #fafafa 50%, transparent 100%);
}


/* --- 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>");
}




/* =============================================================================
   ============================================================================
                          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)

   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; }


/* =============================================================================
   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;}