/*
	Client Customization CSS file

	NetBenefits 3.0

	TEMPLATE VARIABLES:

	id: 177;
	profile_id: 164;
	client_id: 000701683;
	// utility stuff
	utilityBackgroundColor: #000;
	utilityTextColor: #fff;
	utilityLinkColor:  #fff;
	// body stuff
	bodyBackgroundType: image;
	bodyBackgroundColor: #000;
	bodyBackgroundGradientTop: #ffffff;
	bodyBackgroundGradientBottom: #295200;
	bodyBackgroundImage: ../../images/css/000701683_bg.png;
	bodyBackgroundPosition: 0 63px;
	bodyBackgroundRepeat: repeat-x;
	bodyBackgroundAttachment: scroll;
	bodyBackgroundImageColor: #000000;
	// masthead
	mastheadBackgroundType: color;
	mastheadBackgroundColor: #FFFFFF;
	mastheadBackgroundGradientTop: #fff;
	mastheadBackgroundGradientBottom: #295200;
	mastheadBackgroundImage: none;
	mastheadBackgroundPosition: 0 0;
	mastheadBackgroundRepeat: repeat;
	mastheadBackgroundImageColor: #ffffff;
	// logo images (non-css)
	mastheadPrimaryLogoImage: img/fidelity.gif;
	mastheadSecondaryLogoImage: img/powered-by.gif;
	mastheadMessage: Employee Benefits;
	mastheadMessageColor: dark;
	mastheadMessageTextColor: #666666;
	mastheadMessageTextShadowColor: #ffffff;
	// toc menu (base)
	menuBaseColor: #e7e3cd;
	menuBaseBottomColor: #b2b1a9;
	menuBaseTextColor: #000000;
	menuBaseTextShadowColor: #ffffff;
	// toc menu (selected)
	menuSelectedColor: #856822;
	menuSelectedBottomColor: #6a541b;
	menuSelectedTextColor: #ffffff;
	menuSelectedTextShadowColor: #000000;
	// toc menu (hover)
	menuHoverColor: #b6a678;
	menuHoverBottomColor: #898067;
	menuHoverTextColor: #ffffff;
	menuHoverTextShadowColor: #000000;
	// toc menu borders
	menuBorderTopColor: #eee;
	menuBorderRightColor: #999;
	menuBorderBottomColor: #999;
	menuBorderLeftColor: #999;
	// base
	menuBaseBorderRightColor: #856822;
	menuBaseBorderLeftColor: #856822;
	// hover
	menuHoverBorderRightColor: #000;
	menuHoverBorderLeftColor: #333;
	// selected
	menuSelectedBorderRightColor: #e7e3cd;
	menuSelectedBorderLeftColor: #e7e3cd;
	// heading color
	contentHeading2Color: #856822;
	// Mobile Icons
	mobileMenuIcon: static/images/menu_small.png,;
	mobileMenuIconDark: static/images/menu_dark_small.png,;
	mobileBackArrowIcon: static/images/back_small.png,;
	mobileBackArrowIconDark: static/images/back_small_dark.png,;
	// Mobile button borders
	mobileBtnBorderColorDark: rgba(0,0,0,0.5),;
	mobileBtnBorderColorLight: rgba(200,200,200,0.5),;
	// Mobile button shading
	mobileBtnBoxShadowLight: 0 1px rgba(200,200,200,0.5),;
	// Mobile Text Colors
	mobileWelcomeMsgColor: #000,;
	// Mobile content
	mobileWelcomeMessage: Access your account information anytime, anywhere.,;
	// Mobile high-res logo
	highresMobileLogo: ,;
	// Mobile header color override
	mobileHeaderColor: ,;
	mobileHeaderBottomColor: ,;
	mobileHeaderTextColor: ,;
	mobileHeaderTextShadowColor: ,;
	// Mobile highlight/top border override
	mobileHighlightColor: ;
	//
	tileBaseColor: #856822; 				// default to menuBaseColor
	tileBaseTextColor: #ffffff;
	tileBaseTextShadowColor: #000000;
	tileBaseBorderColor: #ffffff;

	tileHoverColor: #b6a678;
	tileHoverTextColor: #ffffff;
	tileHoverTextShadowColor: #000000;
	tileHoverBorderColor: #ffffff;

	tileActiveColor: #b6a678;
	tileActiveTextColor: #000000;
	tileActiveTextShadowColor: #ffffff;
	tileActiveBorderColor: #000000;

	htocSelectedColor: #856822;
	htocSelectedTextColor: #ffffff;

	engagerBackgroundColor: #6088AA;
	engagerTextColor: #ffffff;
	engagerCallToActionColor: #ffffff;
	
*/


/* ===================================================================
	BEGIN Section A: Utility Nav
=================================================================== */

/* background of bar */
#container-utility,#layout-utility { background-color: #000; }
/* multi client label color */
#layout-utility .collapsed-client-selector label{color:#fff;}
/* linked text active color */
#navbar-tabs a:active{ color: #fff !important; }
#navbar-tabs a:focus{ color: #fff !important; }
/* unlinked text color */
#layout-utility .left,
#layout-utility .right { color:#fff; }
/* linked text color */
#layout-utility .right li a:link,
#layout-utility .right li a:visited { color: #fff; }
/* background color for li */
#layout-utility .right li { background-color: #000; }

/* ===================================================================
	END Section A: Utility Nav
=================================================================== */

/* ===================================================================
	BEGIN Section B: Wallpaper/Background Color
=================================================================== */

/*
	The customization options are:
		Background COLOR
		Background IMAGE
		Background POSITION (default origin point: Immediately below the utility bar: 63px)
		Background REPEAT
		Background ATTACHMENT (default: Scrolls with content; option is FIXED)
*/
body,#navbar-tabs,#navbar-modal {
	background-color: #000000;
	background-image: url('../../images/css/000701683_bg.png');
	background-position: 0 63px;
	background-repeat: repeat-x;
	background-attachment: scroll;
}

/* ===================================================================
	END Section B: Wallpaper/Background Color
=================================================================== */

/* ===================================================================
	BEGIN Section C: Masthead
=================================================================== */

/*
	The customization options for the Masthead Background are:
		Background COLOR
		Background IMAGE
		Background POSITION
		Background REPEAT
*/
#container-masthead {
	background-color: #FFFFFF;
	background-image: none;
	background-position: 0 0;
	background-repeat: repeat;
}

/*
	The customization options for the title text are:
		Text color
		Text shadow (light or dark)
*/

#container-masthead .text {
	color:#666;
	text-shadow:0 1px 0 #fff;
}

/*
	The customization options for masthead element positions are managed by a menu outlined in documentation. Below are the editable parameters for positioning elements.
*/

#container-masthead {
	padding-left: 28px;
	padding-right: 28px;
}
#container-masthead .layout-primary-logo {
	float:left;
	margin:0 48px 0 0;
}
#container-masthead .text {
	display: block;
	float: left;
}
#container-masthead .layout-secondary-logo {
	display: block;
	float: right;
}

/* ===================================================================
	END Section C: Masthead
=================================================================== */

/* ===================================================================
	BEGIN Section D: Nav Bar
=================================================================== */

/*
	Menu tab background and foreground colors
	See the following page to generate CSS properties:
	http://contentbos1.fmr.com:12690/archived/templates/Next_Generation_HTML_Template/NetBenefits-3_0/homepage/demo/menu-tab-color.shtml
*/
#layout-toc li a{
color: #000000 !important;
text-shadow: 0 1px #ffffff;
}

#layout-toc li a:link,
#layout-toc li a:visited { /* Button link color rules */
    color: #000000 !important;
    text-shadow: 0 1px #ffffff;
    background-color: #e7e3cd;
    background: -o-linear-gradient(to bottom, #e7e3cd 50%,#b2b1a9 100%);
    background: -ms-linear-gradient(to bottom, #e7e3cd 50%,#b2b1a9 100%);
    background: -moz-linear-gradient(to bottom, #e7e3cd 50%,#b2b1a9 100%);
    background: -webkit-gradient(to bottom, #e7e3cd 50%,#b2b1a9 100%);
    background: -webkit-linear-gradient(top, #e7e3cd 0%, #e7e3cd 50%,#b2b1a9 100%);
    background: linear-gradient(to bottom, #e7e3cd 50%,#b2b1a9 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#e7e3cd",endColorstr="#b2b1a9",GradientType=0);
    -ms-filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#e7e3cd",endColorstr="#b2b1a9",GradientType=0);
}
#layout-toc li a:focus,
#layout-toc li a:hover { /* Button hover color rules */
    color: #ffffff !important;
    text-shadow: 0 -1px #000000;
    background-color: #b6a678;
    background: -o-linear-gradient(to bottom, #b6a678 50%,#898067 100%);
    background: -ms-linear-gradient(to bottom, #b6a678 50%,#898067 100%);
    background: -moz-linear-gradient(to bottom, #b6a678 50%,#898067 100%);
    background: -webkit-gradient(to bottom, #b6a678 50%,#898067 100%);
    background: -webkit-linear-gradient(top, #b6a678 0%, #b6a678 50%,#898067 100%);
    background: linear-gradient(to bottom, #b6a678 50%,#898067 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#b6a678",endColorstr="#898067",GradientType=0);
    -ms-filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#b6a678",endColorstr="#898067",GradientType=0);
}
#layout-toc li a:active,
#layout-toc li.selected a { /* Button active color rules */
    color: #ffffff !important;
    text-shadow: 0 -1px #000000;
    background-color: #856822;
    background: -o-linear-gradient(to bottom, #856822 50%,#6a541b 100%);
    background: -ms-linear-gradient(to bottom, #856822 50%,#6a541b 100%);
    background: -moz-linear-gradient(to bottom, #856822 50%,#6a541b 100%);
    background: -webkit-gradient(to bottom, #856822 50%,#6a541b 100%);
    background: -webkit-linear-gradient(top, #856822 0%, #856822 50%,#6a541b 100%);
    background: linear-gradient(to bottom, #856822 50%,#6a541b 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#856822",endColorstr="#6a541b",GradientType=0);
    -ms-filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#856822",endColorstr="#6a541b",GradientType=0);
}

/*
	Home Icon image position
 */
#layout-toc a.home span {
    background-position:0 0;  /* black */
}

#layout-toc a.home:hover span,
#layout-toc a.home:focus span {
     background-position:0 -18px; /* white */
}

#layout-toc a.home:active span,
#layout-toc li.selected a.home span {
    background-position:0 -18px; /* white */
}

/*
	Menu borders
	The only customizable value is color.
*/
#layout-toc {
	border-top-color:#eee;
	border-right-color:#999;
	border-bottom-color: #999;
	border-left-color:#999;
}
#layout-toc  a, #layout-toc a:link,
#layout-toc a:visited,#layout-toc a:hover,
#layout-toc a:focus,#layout-toc a:active,
#layout-toc li.selected a {
	border-bottom-color: #999;
}

/*
	Menu tab borders
	The only customizable value is color.
*/
#layout-toc li a,
#layout-toc li a:link,
#layout-toc li a:visited {
	border-right-color: #856822;
	border-left-color: #856822;
}

#layout-toc li a:focus,
#layout-toc li a:active,
#layout-toc li.selected a {
	border-right-color:#e7e3cd;
	border-left-color:#e7e3cd;
}
/* The HOME tab does not have a left border. The following rule must not be edited. */
#layout-toc li a.home:link,
#layout-toc li a.home:visited,
#layout-toc li a.home:hover,
#layout-toc li a.home:focus,
#layout-toc li a.home:active,
#layout-toc li.selected a.home {
	border-left:none;
}

/* Modal Navbar - text color*/
#navbar-modal #layout-toc .modal{
			color: #666666;
	}

/* ===================================================================
	END Section D: Nav Bar
=================================================================== */

/* ===================================================================
	BEGIN Section E: Content Area
=================================================================== */

/*
	Current option:
		Header color
*/
#outer-region-wrapper h1 {
	color:#000;
}

/* ===================================================================
	END Section E: Content Area
=================================================================== */

/* ===================================================================
	BEGIN Section F: TOC - Imported from 2.0
	TOC Header Background color
	TOC sub heading background color, color
	TOC componeent- border.
=================================================================== */

/*Customizable - (L) TOC Header  Element-Name:	Color (Hex value))*/
.toc-component .top-left-curve {background-color: #333333;}

/*Customizable - (M) Category Header Element-Name:	Color(Hex value))*/
.toc-component .sub-heading {background-color: #888888; color:#ffffff;}

/*Customizable - (N) Border Color Element-Name: Color(Hex value)) (or) (GIF file)*/
.toc-component .toc-wrapper {border-left: 1px solid #CCC8C5;border-right: 1px solid #CCC8C5;}
.toc-component .sub-heading {border-bottom: 1px solid #CCC8C5; border-top: 1px solid #CCC8C5;}


/* ===================================================================
	END Section F: TOC
=================================================================== */

/*===============================================================================
	BEGIN Section G:
	Page alignment options - Left Align
							 Center Align
	Default is center aligned - If the client needs left align pages
	and remove centering Enable below sections to have undo center rules
============================================================================ */
/*
#center-content-wrapper{
	margin-left: 4px;
	margin-right: 0px;
}
#layout-utility {
	margin-left: 4px;
	margin-right: 0px;
}
#container-masthead,#layout-toc {
	margin-left: 4px;
	margin-right: 0px;
}
*/
/* ===================================================================
	END Section G: Undo Centering
=================================================================== */

/* ======================================================================
	START : Reusable Utility Classes for branding based on template colors
=========================================================================*/

.base-bg{ background-color: #e7e3cd  !important;}
.base-bottom-bg {background-color: #b2b1a9 !important;}
.base-bg:hover{ background-color: #b6a678 !important; }
.base-bottom-bg:hover{background-color: #898067 !important;}
.base-text-color {color: #000000 !important;}
.base-bottom-text-color  { color: #ffffff !important; }
.base-border { border : 1px solid #999 !important;}
.base-bottom-border  {border : 1px solid #999;}

.selected-bg   {background-color: #856822  !important; }
.selected-bottom-bg  {background-color: #6a541b !important;}
.selected-text-color  {color: #ffffff !important;}
.selected-bottom-text  {color: #000000 !important;}
.selected-border  {border: 1px solid #e7e3cd !important;}
.selected-bottom-border  {border : 1px solid #999;}

.hover-bg {background-color: #b6a678 !important; }
.hover-bottom-bg  {background-color: #898067 !important; }
.hover-text {color: #ffffff !important;}
.hover-bottom-text  {color: #000000 !important;}
.hover-border{ border : 1px solid #000 !important;}
.hover-bottom-border { border-color : 1px solid #999 !important;}

/* Only two colors for text , border , border arrow  either white or grey */
.contrast-text  {color : #ffffff !important;}
.contrast-border  {border : 1px solid #ffffff !important;}
.text-shadow {text-shadow : 0 1px $stylesheet->tileBaseTextShadowColor; !important;}
.border-arrow {border-color: #ffffff transparent transparent !important;}
.border-arrow:hover {border-color: #ffffff transparent transparent !important;}

/* Available overrides if the client base background color is too dark or client-base-text color is too light */
.client-bg-hover{ background-color: #856822 !important; color: #ffffff !important;}
.client-bg-hover:hover, .client-bg-hover:focus{ background-color: #b6a678 !important; color: #ffffff !important;}
.client-bg-hover:active { background-color: #b2b1a9 !important; color: #000000 !important;}
.client-bg-active{ background-color: #b2b1a9 !important}

/* if no hover treatment needed for base background color */
.client-bg-only-color{ background-color: #856822 !important; color: #ffffff !important;}
.navbar .client-bg-only-color{ background-color: #e7e3cd !important; color: #ffffff !important;}
.client-text {color: #856822 !important;}
/* Horizontal TOC */
.client-sec-bg-only{ background-color: #856822 !important; color: #ffffff !important;}
a.client-sec-bg-only, a.client-sec-bg-hover:link, a.client-sec-bg-hover:hover, a.client-sec-bg-hover:visited{ background-color: #856822 !important; color: #ffffff !important;}
.client-sec-bg-hover{ background-color: #b6a678 !important; color: #ffffff !important;}
.client-sec-bg-hover:hover, .client-sec-bg-hover:focus{ background-color: #b6a678 !important; color: #ffffff !important;}

.client-only-hover:hover,.client-only-hover:focus {background-color: #b6a678 !important; color: #ffffff !important;}
.client-only-hover:active {background-color: #b2b1a9 !important; color: #000000 !important;}

/* h2 client color */
h2.client-heading { color: #856822; }

/* Need this for deframed pages to override legacy code styles */
#horz_region1 a.client-sec-bg-only,
#horz_region1 a.client-sec-bg-hover:link,
#horz_region1 a.client-sec-bg-hover:hover,
#horz_region1 a.client-sec-bg-hover:visited{ background-color: #856822 !important; color: #ffffff !important;}


/* Engager Background */
#nbt-engager .nbt-engager-color-blue { background-color: #6088AA } 
/* Engager Text */
#nbt-engager .nbt-engager-interior h2, 
#nbt-engager .nbt-engager-interior p, 
#nbt-engager .nbt-engager-interior a { color: #ffffff !important }
/* Engager Call to Action */
#nbt-engager a.nbt-engager-button:link, 
#nbt-engager a.nbt-engager-button:focus {color: #ffffff; border-color: #ffffff} 
#nbt-engager a.nbt-engager-button:hover {color: #ffffff; border-color: #ffffff}



/* ======================================================================
	END : Reusable Utility Classes for branding
=========================================================================*/

/* ===================================================================
	END NB3PO Template
=================================================================== */