﻿/* 
	CSS Document 
	NESS Super - 16/11/12
*/

/* General styles */
body { background: #f0f0f0; font-family: Verdana, Arial; color: #333; }
body.mjol_body { background: #f0f0f0; font-family: Helvetica, Arial, sans-serif; color: #333; font-size:14px; }

a:link { color: #8dc73f; text-decoration: underline; outline: none; }
a:visited { color: #8dc73f; text-decoration: underline; outline: none; }
a:hover { color: #8dc73f; text-decoration: none; outline: none; }
a:active { color: #8dc73f; text-decoration: underline; outline: none; }
.accountLinks ul a:hover, p a:hover, a.standardLink:hover { color: #8dc73f; text-decoration: none; }

h1 { border-bottom: none; color: #8dc73f; font-size: 2em; margin: 20px 0;  *margin: 20px 0 10px 0;}
.pageHeader h1 { color: #8dc73f; margin: 45px 25px 0 0; }
h2 { color: #8dc73f; font-size: 1.4em; }
.mjol_body h2 { color: #8dc73f; font-size: 1.4em !important; }
h3 { color: #8dc73f; font-size: 1.25em; }

ul { list-style-position: inside; padding: 5px; }
ul li { padding: 2px 0; }

input, select, textarea { padding: 1px; border: 2px solid #a9a9a9; }
.mjol_body input[type="text"], .mjol_body select, .mjol_body textarea, .mjol_body input[type="password"] { padding: 10px 5px !important; border: 1px solid #ddd !important; width: 100% !important; max-width:300px;}

.mjol_body #mjolContainer .fiElem { max-width: 400px; width: 100%;}
.mjol_body .fiElem { position:relative;}
.mjol_body .fiElem img { vertical-align: middle; padding-bottom: 3px;}
.mjol_body #mjolContainer h2 {border-bottom: none !important;}

table th { text-align: left; background: #666666; color: #fff; }

#validationSummary { background: #eee; color: #000; border: 2px solid red; }
.mjol_body #validationSummary { border: none; background: #fff;}
.mjol_body #validationSummary li { color: #ff0000;}
.mjol_body #mjolContainer .error { outline: none; border-color: #ff0000 !important; border: none;}
.mjol_body DIV.errorContainer UL, #validationSummary UL { padding-left: 7px;}
div.filterContainer { padding: 1em; background: #eaeaea; }

/* layout */
div#wrapper {width: 1015px; margin:0 auto; text-align: left; background-color: #FFFFFF; border: 2px solid #eaeaea; padding-bottom: 0;}
#content { padding-top: 0; }
.mjol_body #content { padding-top: 0; border-top: none !important;}

#mainContent.subPanelled { /*margin-left: -40px;*/width: 670px; *margin-left: 0px;}


/* headers */
.pageHeader { background: #8DC73D url(Images/NESS-header.jpg) no-repeat -57px 0; position: relative; height: 94px;border-bottom: 1px solid #fff; }
A#homeLink { background: transparent/*url(Images/ness-logo.png) no-repeat center left*/; display: block; left: 0; top: 0px; width: 246px; height: 123px; }
.mjol_body .pageHeader { background: #09347a; border:none;}
.mjol_body A#homeLink { background: url(Images/ness-super-logo.png) no-repeat center left; display: block; left: 0; top: 0px; width: 171px; height: 76px; margin: 17px; }

#topMenu { right: 20px; }
#topMenu select { font-size: 1em; padding: 2px; }
#topMenu li a { color: #fff; }
.mjol_body #topMenu li a { color: #fff;  padding: 2px 0 4px; text-decoration:none; border-bottom: 1px solid transparent; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.mjol_body #topMenu li a:hover { border-bottom: 1px solid #fff; padding: 2px 0 2px;}
#topMenu div.dropDownListControl li:hover { background: #333 }
#topMenu div.dropDownListControl li a { color:#333; }
#topMenu div.dropDownListControl li a:hover { color:#FFF; }
.mjol_body .jfontsize-button { font-weight: 700; padding: 2px 5px 4px !important; color: #000; border: none; border-bottom: 1px solid transparent; display: inline-block; text-decoration: none !important; width: 12px; text-align: center;  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.mjol_body .jfontsize-button:hover { text-decoration: none; background: none; padding: 2px 5px 2px !important; color: #fff!important; border: none; border-bottom: 1px solid #fff;}


/* Buttons */
.oc-button { height: 30px; background: #8dc73f !important; border: 1px solid #CCC; text-align: center; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
.oc-button:hover { background: #eaeaea !important; }
.oc-button span { background: none; padding: 5px 15px; margin-right: 0; color: #FFFFFF; }
.oc-button span:hover { color: #000000; }
.mjol_body .oc-button { height: inherit; background: #8dc73f; border: none; text-align: center; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding: 5px 10px !important;  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.mjol_body .oc-button:hover { background: #06327b; }
.mjol_body .oc-button span { background: none; padding: 5px 15px; margin-right: 0; color: #FFFFFF !important; }
.mjol_body .oc-button span:hover { color: #fff; }
.mjol_body #btnCancel { border: none !important;}
.mjol_body #btnCancel:hover { text-decoration: none;}

a.btnLinkToSubmenuPage, a#btnEventsSeeMore { color:  #8dc73f; text-decoration: underline; font-weight: normal; }


/* Nav styles */
#mainMenu { background: #8dc73f; height: 26px; width: 100% }

div.tabs { position: relative; top: 0; left: 0; _margin: 0;}
#tabsMainContent { padding-top: 3.5em; *padding-top: 4.5em; }

div.tabs ul li, 
div.tabs ul li.active { margin: 0; border-right: 1px solid #FFF; }

div.tabs ul li a { background: none !important; }
div.tabs ul li a span { background: none !important; font-size: 1.1em; color: #fff; padding:6px 10px 0 10px; margin: 0 !important; }
div.tabs ul li a:visited { background: none !important; }
div.tabs ul li a:visited span { background: none !important; }
div.tabs ul li a:hover { background: #06327b !important; }
div.tabs ul li a:hover span { background: #06327b !important; }
div.tabs ul li a:active { background: none !important; }
div.tabs ul li a:active span { background: #06327b !important; }

div.tabs ul li.active, div.tabs ul li.active a { height: 26px; }
div.tabs ul li.active a span { height: 20px; background: #06327b !important; color: #FFF;}
div.tabs ul li.active a { background: #06327b !important; }
div.tabs ul li.active a:visited { background: #06327b; }
div.tabs ul li.active a:visited span { background: #06327b; }
div.tabs ul li.active a:hover { background: #06327b; }
div.tabs ul li.active a:hover span { background: #06327b; }
div.tabs ul li.active a:active { background: #06327b; }
div.tabs ul li.active a:active span { background: #06327b; }

div.tabs ul ul.tabSubLinks { width: 1015px; margin: 0; border-bottom: none; background: #f8f8f8; padding: 17px 0 0 0;}
div.tabs ul ul.tabSubLinks li a { color: #06327b; text-decoration: none; background: none;}
div.tabs ul ul.tabSubLinks li a:visited { color: #06327b; text-decoration: none; background: none;}
div.tabs ul ul.tabSubLinks li a:hover { color: #06327b; text-decoration: underline; background: none !important; }
div.tabs ul ul.tabSubLinks li a:active { color: #06327b; text-decoration: none; background: #f8f8f8;}
div.tabs ul ul.tabSubLinks li.active a { text-decoration: underline; font-weight: normal; background: none;}



/* Login styles */
#mainLoginPage  h1{ border-bottom: none;}
#mainLoginPage div.pageBlurb { float: left; line-height: 1.8em; }
div.maintenanceMessages { margin: 2em 0 1em; background: white; }

#siteEntryPoints { margin-bottom: 1em; float: right; width: 400px; border-left: 1px solid #000000;  }

#loginEntry { border: none; padding: 0.8em 2em 2em 2em; float: right }
#loginEntry h2 { color: #8dc73f; font-size: 22px; border-bottom: none; }
#loginEntry div.fiLabel { width: 90px; padding-top: 6px; color: #000; font-weight:bold;}
#loginEntry div.fiElem input { border: 1ps solid #ccc; padding: 5px; width: 240px;}
#loginEntry div.formAction a { color: #8dc73f; text-decoration: underline; }
#loginEntry div.formAction a:hover { text-decoration: none; }
#loginEntry div.formAction #lnkForgottenPassword { float: left; margin-top: 6px }
#loginEntry div.formAction a#btnLogin { float: right; background: #8dc73f; color: #fff }
#loginEntry div.formAction a#btnLogin:hover { background:#eaeaea;}
#loginEntry div.formAction a#btnLogin span { color: #fff} 
#loginEntry div.formAction a#btnLogin span:hover {color: #000}


#registrationEntry { padding: 0.8em 2em 2em 2em; width: 350px; }
#registrationEntry h2 { border-bottom: none;  }

#mainLoginPage,
#registrationWizard,
#forgottenPassword { padding-top: 0; }





/* Terms and Conditions */
#termsAndConditionsContainer .content { width: 98%; }

/*Registration */
#userReg h3 { color: #666666; font-size: 1.6em; }
#userReg .termsConditions { border: 1px solid #28344E; padding: 5px; margin: 20px 0; }

/* Subpages styles */
#subPanel { margin: 60px 0 0 15px; }
#subPageBody .pageBlurb { margin: 0 0 1em; width: 100%; }

/* Styling of dashboard */
#dashboard .dashboardBoxSmall { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: url(Images/green-top.jpg) repeat-x top left;}
#dashboard .dashboardBoxLarge { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: url(Images/green-top.jpg) repeat-x top left;}

#dashboard .title { width: 100%; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 1.3em; color: #818285; font-weight: bold; margin: 5px 0px; }
#dashboard .controlHeader { width: 100%; color: #fff; font-weight: bold; margin: 0 0 15px 0; }
#activityTable td { padding: 4px 2px 4px 0px }
#activityTable { margin-bottom: 10px}
.highcharts-axis-labels tspan { color: #818285; fill: #818285; }
#dashboard .chartLegendTable td.col2 { text-align: right; }
#dashboard .chartLegendTable td.col3 span { float: right; }
#chart1 #currentBalanceText { font-size: 1.3em; }
#activityTable,
#eventTable { text-align: right; }
#activityTable td.date,
#activityTable td .description,
#eventTable td.date,
#eventTable td.description { text-align: left; }
#eventsAccordion h3 { background: #CCCCCC; color: #333; }
#eventsAccordion .header .title { color: #333; }
/* Action Link */
	#dashboard .dashboardBoxSmall #retirementButton.actionLinkContainer { margin: 35px 20px; background-color: transparent; float: none; padding: 0; width: auto; }
	#dashboard .dashboardBoxSmall #retirementButton.actionLinkContainer a { background: #096309; color: #FFF; text-decoration: none; padding: 10px; font-weight: bold; border: 1px solid #fff; }
	#dashboard .dashboardBoxSmall .actionLinkContainer,
	#dashboard .dashboardBoxLarge .actionLinkContainer { background-color: #096309; }
	#dashboard .dashboardBoxSmall .actionLinkContainer a,
	#dashboard .dashboardBoxLarge .actionLinkContainer a { background: #096309; color:#FFF; }


/* Member Profile */
div.form { padding: 0; border: none; background: none; }
fieldset { padding: 0; border: none; margin: 0; width: 320px;  *width: auto;
margin-bottom: 1em; }
#AccountSummaryRightContainer { margin-left: 20px; }
* HTML #AccountSummaryRightContainer { margin-left: 0; }
#AccountSummaryLeftContainer a,
#AccountSummaryRightContainer a { position: absolute; right: 0px; top: 7px; }
legend { font-weight: bold; font-size: 1.2em; width: 310px; color: #666; border-bottom: 1px solid #666666; padding: 7px 0px; margin-bottom: 0.5em; }
.accountsummarydetailcontainer { padding-top: 5px; }
.accountsummarydetailcontainer th { background: none; color: #818285; }
fieldset div.fiLabel { width: 32%;  *width: 100px;
}
#updateMemberProfile FIELDSET { display: inline-block; margin-right: 20px;  *margin-right: 10px;
vertical-align: top; }
*+HTML #updateMemberProfile FIELDSET { display: inline; zoom: 1; }
* HTML #updateMemberProfile FIELDSET { display: inline; zoom: 1; }
#updateMemberProfile .form > div.formItem { border: 1px solid #666; background: #f0f0f0; padding: 1em;}
#updateMemberProfile .form > div.formAction { border: none; background: none; padding: 0;}
#membershipdetails .fiLabel { width: 120px; }
#membershipdetails .fiElem { width: 190px; text-align: right; }
#beneficiarydetails .benePercentage { text-align: right; }
.header { border: none; }

/* Beneficiaries */
#beneficiaries th { text-align: left; background: #666666; color: #fff; }
#beneficiaries td { border: none; }
#beneficiaries td.benefit { text-align: right; width: 60px; }
#beneficiaries td.benePercentage { text-align: right; }
#beneficiaries td.benefit #benePercentTotal { float: right; }
#beneOverviewContainer #beneficiaries td.benefit #benePercentTotal { float: none; padding: 0; }
#beneficiaries td.benefit input { text-align: right; width: 50px; }
#beneficiaries td.tableActions { font-size: 0.8em; }
#beneUpdatedMsg { background: none; border: 1px dotted #FF4F4F; color: #FF4F4F; }
tr.total td,
tr.noRecords td { border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; }

/* Payment Options */
#paymentOptionFilters { text-align: left; background: #eaeaea; color: #333; padding: 1em; border: 1px solid #ccc; font-size: 1.2em; font-weight: bold; }
#paymentOptions .paymentOptionImage { height: 50px; }
#paymentOptionFilters .oc-radiogroupex li { font-weight: bold; padding-right: 10px; }
#paymentOptions td { padding: 5px; }
#currentPaymentType { color: #333; font-size: 1.3em; }
.aPayment table { border-bottom: 1px solid #ddd; }
#paymentOptions td b { }
td.paymentImageEft,
td.paymentImageChq { background: url(images/CHQ-3.gif) no-repeat 0 5px; width: 30px; }
td.paymentImageBpay { background-position: 5px 5px; height: 45px; }

/* Balance Enquiry */

input.filterRadio { vertical-align: baseline; }
#chartTitle { font-size: 1.6em; color: #666666; }
#balanceEnquiryAccountBalanceTable tr.header th,
#balanceEnquiryPreservationTable tr th,
#balanceEnquiryAssetDetailsTable tr.header td { background: #666666; color: #fff; padding: 1em; border: none; }
#balanceEnquiryFilter { text-align: left; color: #333; font-size: 1.2em; font-weight: bold; }
#balanceEnquiryPreservationTable tr td.preservedAmt { width: 235px; }
#balanceEnquiryFilter div.filterItem { margin:0; }
#balanceEnquiryFilter .dropdown { vertical-align: middle; }
.legendTitle { font-size: 1.3em; }
#balanceEnquiryAccountBalanceTable td,
#balanceEnquiryPreservationTable td,
#balanceEnquiryAssetDetailsTable td { border: none; }
tr.total td { border-top: 1px solid #CCC !important; border-bottom: 1px solid #CCC !important; }



/* Benefit Quote */
#benefitQuote .sectionTitle { font-size: 1.6em; color: #666666; }
#quoteDate { font-size: 1.25em; }
th.net { width: 70px; }
th.lumpSum,
th.gross { width: 150px; }
th.benefitType,
th.preservationType,
th.taxType { padding: 1em 0.5em; }
#benefitQuote tr.header td { font-weight: bold; color: #333; }
#benefitQuote tr.footer td { font-weight: bold; border-top: 1px solid #CCC !important; border-bottom: 1px solid #CCC !important; }
#benefitQuote tr.lineItem td { padding-left: 20px; }
.summaryBenefit { background: #666666; margin-top: 7px; }
.summaryBenefit table { background: #fff; clear: both; }
.summaryBenefit div { padding: 0.5em; color: #fff; }


/* Transaction History */
#gview_transactionHistoryGrid th { background: #666666; padding: 0.5em; border: none; }
#gview_transactionHistoryGrid th div { color: white; }
#gview_transactionHistoryGrid th div:hover { text-decoration: underline; }


/* Investment Enquiry */
#investmentOptions th.ioInvestOptions,
#investmentOptions th.ioFutureTrans { padding: 0 1em; }
#investmentOptions .edit th.ioInvestOptions,
#investmentOptions .edit th.ioFutureTrans { padding: 1em; }
#investmentOptions th.ioBalanceSplitLast { padding: 0 1em; width: 110px; }
th.ioBalanceSplit,
th.ioFutureTrans,
th.ioValue,
th.ioBalanceSplitLast,
.ioUnits,
.ioUnitPrice { text-align: right; }
DIV.currentInvestments TH.ioValue { width: 80px; }
DIV.currentInvestments TH.ioUnits { width: 80px; }
DIV.currentInvestments TH.ioUnitPrice { width: 70px; }
TABLE.view th.ioBalanceSplit,
TABLE.view th.ioFutureTrans { width: 50px; }
#investmentEnquiryFilter .filterItem { text-align: left; color: #333; padding: 0.7em 0; border: none; }
#investmentEnquiryFilter .filterItem li { font-size: 1.2em; font-weight: bold; }
div.currentInvestments th.ioInvestOptions { /*width: 160px;*/ 
}
#investmentOptions tr.metaHeading span { border-bottom: 1px dashed #333; }
#investmentOptions tr.metaHeading th { color: #333; }
#investmentOptions tr.rowHeading td { background: #E8F6F9; }
#investmentOptions input { text-align: right; }


/* Insurance Details */
.ui-jqgrid .ui-jqgrid-htable { margin: 0; }
#gview_insuranceCoverGrid th { background: #666666; border: none; }
#gview_insuranceCoverGrid th td { border: none; }
#gview_insuranceCoverGrid .ui-jqgrid-htable th div { color: white; }
#gview_insuranceCoverGrid .ui-jqgrid-htable th div:hover { text-decoration: underline; }
#gview_insuranceCoverDetailGrid th { background: #666666; border: none; }
#gview_insuranceCoverDetailGrid .ui-jqgrid-htable th div { color: white; }
#gview_insuranceCoverDetailGrid .ui-jqgrid-htable th div:hover { text-decoration: underline; }

/* Unit Prices */
.unitPricesGenerateButtonMargin { margin: 10px 0 0 3px; }

/* Messages */
#gview_MessageGrid th { background: #666666; border: none; padding: 0.5em; }
#gview_MessageGrid th td { border: none; }
#gview_MessageGrid .ui-jqgrid-htable th div { color: white; }
#gview_MessageGrid .ui-jqgrid-htable th div:hover { text-decoration: underline; }
ul.messageNavBar li,
#messageNavBar ul li { display: inline; margin: 0 10px 0 0; }
ul.messageNavBar li a,
#messageNavBar ul li a { color: #333; text-decoration: none; }
ul.messageNavBar li a:hover,
#messageNavBar ul li a:hover { text-decoration: underline; cursor: pointer; }
#messagesContainter .topBar ul li a { background: #28344E; }
#messageHeader { color: #666666; }

/* Correspondence */
#gbox_correspondenceGrid {border: none; margin-top: 20px;}
#gview_correspondenceGrid th { background: #666666; border: none; padding: 0.5em;}
#gview_correspondenceGrid th td {  border: none; }
#gview_correspondenceGrid div.ui-jqgrid-sortable {  color: white;}
#gview_correspondenceGrid .ui-jqgrid-htable th div:hover { text-decoration: underline;}
#gview_correspondenceGrid th#correspondenceGrid_Title { width: auto !important;}
#correspondenceContainter div.ftElem {font-weight: bold; font-size: 1.2em; margin-left: 0;}

/*Consolidate & Supermatch 2*/
#superFundAccordion .ui-state-hover, #superFundAccordion .ui-state-active,
#accountCollapsibleContentSuperMatch .ui-state-hover, #accountCollapsibleContentSuperMatch .ui-state-active {color: #8dc73f !important} 
#superFundAccordion .ui-accordion .ui-state-focus, #accountCollapsibleContentSuperMatch .ui-state-focus {color: #666 !important}
#btnContinueToDashboard span {border-bottom: none !important}

#btnContinueToDashboard span {border-bottom: none !important}


/* RHS styles */
#messageAccordion.ui-accordion .ui-accordion-header, 
#alertAccordion.ui-accordion .ui-accordion-header { background: #c00000; border: 1px solid #cccccc; border-bottom: 0; color: #FFF; font-weight: bold; margin-top: 0 }
#messageAccordion .ui-accordion .ui-icon,
#alertAccordion .ui-accordion .ui-icon { background-image: url("Images/ui-icons_469bdd_256x240.png"); }
#messageAccordion .ui-icon-circle-arrow-e, 
#alertAccordion .ui-icon-triangle-1-e  { background-image: url("Images/ui-icons_469bdd_256x240.png"); background-position: 0px -192px;}
#messageAccordion .ui-icon-triangle-1-s, 
#alertAccordion .ui-icon-triangle-1-s { background-image: url("Images/ui-icons_469bdd_256x240.png"); background-position: -16px -192px;}

#alertBox .ui-widget-content { /*border: 1px solid #666666;*/ }
.campaignSection { border: 1px solid #666666; }
.campaignSectionHeader { background-color: #666666; }
.collapsibleContainerTitle { border-bottom: 1px solid #666666; color: #333; background: #eeeeee }

/* contact us */
.feedbackHeader .label { color: #8dc73f; }

/* Footer */
#footer { background: #8dc73f; height: 50px; font-size: 10px; color: #fff; line-height: 50px; text-align: left; border: none; } 
ul.footer li { color: #FFFFFF; }
.mjol_body #footer { background: #8dc73f; height: 50px; font-size: 10px; color: #999; line-height: 50px; text-align: left; border: none; } 
.mjol_body ul.footer li { color: #FFFFFF; font-size: 12px;}
ul.footer li a { color: #FFFFFF !important; }

/* Pension */
.moduleSummaryContainer table .fiLabel {width: 35%;display: inline-block;}
.moduleSummaryContainer table .fiElem {width: 60%;display: inline-block;}
.ttpolContainer #breadcrumb .activeStep{background: #8000ff !important;}
.scroll_tabs_container .scroll_tab_right_button, .scroll_tabs_container .scroll_tab_left_button{color:#8dc73f }
.scroll_tabs_container{border-bottom: 2px solid #8dc73f}
.ttpolContainer #breadcrumb .step{background: #f4eaff; color: #8000ff;}
.ttpolContainer #breadcrumb .visitedStep{background:#ba75ff; color: #fff;}
span.step.activeStep{color: #fff !important;}


/* MJOL */
#mjolNavBar li 
{
    padding: 11px 8px 11px 8px;
    *padding: 11px 6px 11px 5px; /* IE6/7 */
    /*color: #fff;*/
    background: #8dc73f;
    border-left: solid 1px #fff;
    color: #fff; 
}
    @media all and (min-width:0) { #mjolNavBar li { padding: 11px 8px 11px 8px \0/; } /* IE9-IE10pp4 */ }
    @-moz-document url-prefix() { #mjolNavBar li { padding: 11px 9px 11px 8px; } /* FIREFOX */ }

.mjol_body #mjolButtonContainer { margin: 20px 20px 20px 0;}

.mjol_body #mjolNavBar li 
{
    padding: 16px 8px;
    *padding: 16px 8px 16px 8px; /* IE6/7 */
    background: #8dc73f;
    border-left: 0;
    color: #fff; 
    width: 150px;
    display: inline-block;
    border-radius: 4px 4px 0 0;
    font-size:14px;
    text-align: center;
}
    @media all and (min-width:0) { .mjol_body #mjolNavBar li { padding: 16px 8px 16px 8px \0/; } /* IE9-IE10pp4 */ }
    @-moz-document url-prefix() { .mjol_body #mjolNavBar li { padding: 16px 8px 16px 8px; } /* FIREFOX */ }

#mjolNavBar li.highlight { background-color: #06327b; color: #fff; }
.mjol_body #mjolNavBar li:nth-child(3) { width: 285px; }
.mjol_body #mjolNavBar li.highlight { background-color: #06327b; color: #fff; background-image: none; }
#mjolContainer h1 { /*color: #005B82 !important;*/ }
.stepHeader {text-transform: none;}

table .td1 img { display: none; }
table .td1 { width: 10px; background: url(/images/icons/pdf.gif) 0px 4px no-repeat; }
.mjol_body table .td1, .mjol_body #stepContainer .iconCell { width: 10px; background: url(/images/icons/pdf.gif) no-repeat; background-position: center 7px; }

table .iconCell img { display: none; }
table .iconCell { background: url(/images/icons/pdf.gif) 0px 4px no-repeat; }

DIV#wrapper { _padding-right: 11px; /** IE6 wapper white space fix **/ }

#forcePasswordChangeContainer .buttonPanel { text-align: left; margin-left: 200px; }

#NE .modalCloseImg.simplemodal-close { display: block !important; }

.insuranceCaption { }
#insuranceOptions .insuranceValue { margin-left: 0; font-weight: bold; }
div#confirmPasswordUnmatch { width: auto !important; vertical-align: bottom; }
.mjol_body div#confirmPasswordUnmatch { width: inherit !important; padding-left: 10px !important; vertical-align:inherit;}

.mjol_body .mjolModule { background: none; border: none; padding: 0 20px;}
.mjol_body input[type="radio"] { margin-top: 7px !important;}
.mjol_body input[type="radio"]:hover, .mjol_body input[type="checkbox"]:hover { cursor: pointer;}
.mjol_body .mjolModule #divFollowUpContent { background: #f0f0f0; border: solid 1px #e4e4e4;}
.mjol_body form#frmDeclaration { margin-bottom: 40px;}
.mjol_body #mjolContainer #frmDeclaration td { padding: 5px !important;}
.mjol_body .declaration-outro { padding-bottom: 0;}
.mjol_body .mjolDoc,
.mjol_body div#divMemberDocs a,
.mjol_body div#divAdditionalDocs a {border-bottom: 1px solid transparent; text-decoration: none !important; padding-bottom: 4px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.mjol_body .mjolDoc:hover,
.mjol_body div#divMemberDocs a:hover,
.mjol_body div#divAdditionalDocs a:hover { border-bottom: 1px solid; padding-bottom: 2px; color: #09347a;}
.mjol_body #subscriptionContainer .subscriptionText { margin-top: 10px;}


.mjol_body form#frmCaptcha .intro { margin-bottom: 10px;}

.mjol_body #mjolMemberProfileSummaryContainer .dataGroup, .mjol_body div#mjolCommunicationDetails { width: auto; margin-right: inherit; padding: 15px; min-height: inherit; height: inherit; border: 1px solid #dfdfdf; margin-bottom: 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.mjol_body #mjolMemberProfileSummaryContainer .dataGroup:hover, .mjol_body div#mjolCommunicationDetails:hover { background: #f4f4f4;}
.mjol_body #mjolMemberProfileSummaryContainer .dataGroup .formItem, .mjol_body div#mjolCommunicationDetails .group { padding: 0 0 10px;}
.mjol_body #mjolMemberProfileSummaryContainer .dataGroup .formItem:last-child, .mjol_body div#mjolCommunicationDetails .group:last-child { padding-bottom: 0; margin-bottom: 0; }
.mjol_body a#btnPrev { float: left; margin-right: 4px;}
.mjol_body .summaryEditContainer .mjolEditButton { padding-right: 10px;}




/* Password 
----------------------------------*/
.mjol_body #mjolContainer .pwdHint { margin-top: 6px; left: 86%; top: 0; position: absolute;}


/* MJOL Calendar 
----------------------------------*/
.ui-datepicker-calendar th { background: #06327b; color: #fff !important; }
.ui-datepicker-week-col { background: none repeat scroll 0 0 #06327b; color: #fff !important; text-align: center; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus  { border: 0; background: #8dc73f; color: #fff !important; }
.ui-datepicker .ui-datepicker-prev-hover { left: 2px; top: 2px; }
.ui-datepicker .ui-datepicker-next-hover { right: 2px; top : 2px; }
.ui-datepicker-next.ui-corner-all.ui-state-hover.ui-datepicker-next-hover, .ui-datepicker-prev.ui-corner-all.ui-state-hover.ui-datepicker-prev-hover { background: transparent; }
.ui-state-default, .ui-widget-content .ui-state-default { color: #666; }
.mjol_body .ui-datepicker-calendar th { background: #09347a; color: #fff !important; }
.mjol_body .ui-state-highlight, .mjol_body .ui-widget-content .ui-state-highlight, .mjol_body .ui-widget-header .ui-state-highlight, .mjol_body .ui-state-hover, .mjol_body .ui-widget-content .ui-state-hover, .mjol_body .ui-state-focus, .mjol_body .ui-widget-content .ui-state-focus  { border: 0; background: #8dc73f !important; color: #fff !important; }
.mjol_body .ui-datepicker .ui-datepicker-title select { width: 49% !important;}
.mjol_body .ui-datepicker .ui-datepicker-prev-hover { left: 2px; top: 11px; }
.mjol_body .ui-datepicker .ui-datepicker-next-hover { right: 2px; top : 11px; }
.mjol_body .ui-datepicker .ui-datepicker-prev, .mjol_body .ui-datepicker .ui-datepicker-next{top: 11px; !important}
.mjol_body .ui-datepicker .ui-datepicker-prev:hover, .mjol_body .ui-datepicker .ui-datepicker-next:hover{cursor:pointer;}
.mjol_body .ui-state-default, .mjol_body .ui-widget-content .ui-state-default {font-weight: 300; outline: none; padding: 6px; text-align: center; color:#666; border: none; background:#fff;}
.mjol_body .ui-datepicker td {padding: 0;}
.mjol_body div#ui-datepicker-div { border: 1px solid #e4e4e4; border-top: 0; padding: 0; border-radius: 0 !important;}
.mjol_body .ui-datepicker table { margin: 0;font-family: Helvetica, Arial, sans-serif;}
.mjol_body img.ui-datepicker-trigger { margin-top: 10px;}
.mjol_body .ui-state-active, .mjol_body .ui-widget-content .ui-state-active, .mjol_body .ui-widget-header .ui-state-active { border: none; background: #662d91; color: #fff !important;}

/* MJOL Beneficiaries table 
----------------------------------*/
#frmBeneficiaries #beneDetailsContainer #beneficiariesTable thead th { background: #666666; border-color: #8499bc; }
#frmBeneficiaries #beneDetailsContainer #beneficiariesTable tfoot th { border-top: 1px solid #8499bc; }
.dt-button.buttons-selected.buttons-edit, a.dt-button.buttons-selected.buttons-remove { padding: 5px 15px; height: 32px;  border: 1px solid #ccc; text-align: center; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
.dt-button.buttons-selected.buttons-edit span, a.dt-button.buttons-selected.buttons-remove span { line-height: 20px; font-family: Arial, sans-serif; font-size: 12px; }
.dt-button.buttons-selected.buttons-edit, a.dt-button.buttons-selected.buttons-remove { background: #8dc73f; color: #fff; border-color: #ccc !important; }
button.dt-button.disabled, div.dt-button.disabled, a.dt-button.disabled, a.dt-button.buttons-selected.buttons-edit.disabled, a.dt-button.buttons-selected.buttons-remove.disabled  { background: #f9f9f9 !important; color: #999 !important; border: 1px solid #d0d0d0 !important; }
.dt-button.buttons-selected.buttons-edit:hover span .dt-button.buttons-selected.buttons-edit span:hover,.dt-button.buttons-selected.buttons-edit:hover span, a.dt-button.buttons-selected.buttons-remove span:hover { color: #000; }
a.dt-button.buttons-selected.buttons-edit:hover, .dt-button.buttons-selected.buttons-remove:hover { background: #eaeaea; }
a.dt-button.buttons-selected.buttons-edit.disabled:hover span, a.dt-button.buttons-selected.buttons-remove.disabled:hover span { color: #999 !important; }


/* MJOL Beneficiaries Lightbox
----------------------------------*/
.DTED_Lightbox_Content { box-shadow: none !important; border: 0 !important; }
.DTE div.DTE_Header { background: #f8f8f8; }
.DTE_Header_Content { color: #8dc73f; font-family: Verdana, Arial; font-weight: bold; font-size: 17px; }
.DTE_Header_Content { color: #8dc73f; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 17px; }
.DTED_Lightbox_Wrapper div.DTED_Lightbox_Container div.DTED_Lightbox_Content_Wrapper div.DTED_Lightbox_Content div.DTED_Lightbox_Close { background-color: #06327b !important; }
.DTE div.DTE_Footer { background-color: #f8f8f8; }
.DTE button.btn, div.DTE div.DTE_Form_Buttons button { font-size: 12px; font-weight: normal; height: 30px; background: #8dc73f !important;; border: 1px solid #ccc !important; text-align: center; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; box-shadow: none !important; }
.DTE button.btn:hover, div.DTE div.DTE_Form_Buttons button:hover { background: #eaeaea !important; color: #000; }
.DTE button.btn:hover, div.DTE div.DTE_Form_Buttons button:hover { background: #06327b !important; color: #fff; }
.DTE_Body div.DTE_Body_Content div.DTE_Field:hover { background-color: #f9f9f9; border: 1px solid #f3f3f3; background: #fff; border-color: #fff; }
.DTE_Form_Content div:hover { background: transparent !important; border-color: transparent !important; }

/* MJOL TFN
----------------------------------*/
#tfnButtonContainer .oc-button {height: 30px;text-align: center;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;border: 0;width: 100% !important;margin: 0 0 10px 0 !important;padding: 0 !important;}
#tfnButtonContainer .oc-button span {background: #8dc73f;text-align: center;box-sizing: border-box;width: 100% !important;}
.mjol_body #tfnButtonContainer .oc-button {background: #8dc73f; height: inherit;text-align: center;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;border: 0;width: 100% !important;margin: 0 0 10px 0 !important;padding: 5px 10px !important;}
.mjol_body #tfnButtonContainer .oc-button span {background:inherit; text-align: center;box-sizing: border-box;width: 100% !important;}

/* MJOL Save
----------------------------------*/
#btnSaveContainer .oc-button { border: 0; padding: 0 !important;}
#btnSaveContainer .oc-button span { background: #8dc73f !important; width: 100%; box-sizing: border-box; margin: 0; border: 0 !important;}
#btnSaveContainer .oc-button span:hover, #mjolPopupContainer #btnSaveContainer a#btnCancel.oc-button span:hover { background: #f9f9f9 !important; color: #000 !important; border: 1px solid #CCC; }
.mjol_body #btnSaveContainer .oc-button { border: 0; padding: 5px 10px !important;}
.mjol_body #btnSaveContainer .oc-button span:hover, .mjol_body #mjolPopupContainer #btnSaveContainer a#btnCancel.oc-button span:hover { background: #06327b !important; color: #fff !important;  border:none;}
.simplemodal-container A.modalCloseImg { background: url('Images/modalclose.gif') no-repeat !important; }
div#simplemodal-container { height: auto !important; }
#simplemodal-container .oc-button span { background: none; margin: 0; }

/* MJOL Responsive
----------------------------------*/

@media (max-width: 1024px) {
    .mjol_body #container div#wrapper { border: 0; }
    .mjol_body .pageHeader h1 { display: none; }
    div#mjolContainer .breadcrumbs { height: 79px; min-height: 0; display: block; margin: 0 0 20px 0; }
    #mjolContainer .breadcrumbs #mjolNavBar li.highlight { background: #06327b; color: #fff; padding: 11px 8px; }
    .mjol_body #mjolContainer #mjolNavBar li { text-align: center;}
    .mjol_body #mjolNavBar li .stepProgressText { margin-left: 0; color: #fff; display: block;}
    .mjol_body .progress-wrapper .progress-bar { width: 87px; }
    .mjol_body #beneficiariesTable .benefit.all { text-align: center; }
    .mjol_body ul#mjolNavBar li { max-width: 190px; }
    .mjol_body table#mjolDefaultInvestmentOptionsTable thead tr th, .mjol_body table.fundselectionlistheader tr th, .mjol_body table.dataTable thead th, .mjol_body table.dataTable thead td { background: #666666; border-color: #8499bc; }
    .mjol_body #superListContainer .fundselectionlistbody tr td { border: 0; }
    .moduleSummaryContainer .summaryHeader h2 { display: inline-block; } 
    .mjol_body #validationSummary { background: #fff; border: 1px solid red; }
    .mjol_body .summaryEditContainer { display: inline-block; float: none; margin:0 !important; }
    .mjol_body .summaryEditContainer .mjolEditButton { border: 0; background: transparent; }
    div#mjolBeneficiariesSummaryContainer #beneficiariesTable tr td:first-child { text-align: center; }
    .mjol_body .dt-button.buttons-selected.buttons-edit span, .mjol_body a.dt-button.buttons-selected.buttons-remove span { font-size: 15px; }
    .mjol_body .DTE button.btn, .mjol_body div.DTE div.DTE_Form_Buttons button { font-size: 15px; }
    .mjol_body .dt-button.buttons-selected.buttons-edit, .mjol_body a.dt-button.buttons-selected.buttons-remove { background: #8dc73f !important; color: #fff !important; border-color: #ccc !important; }
    .mjol_body .dt-button.buttons-selected.buttons-edit:hover span .dt-button.buttons-selected.buttons-edit span:hover, .mjol_body .dt-button.buttons-selected.buttons-edit:hover span, .mjol_body a.dt-button.buttons-selected.buttons-remove span:hover { color: #fff !important; }
    .mjol_body A#homeLink {background-size: inherit; top: 0;height: 76px; width: 171px; left: 0;}
    .mjol_body input[type="radio"] { margin-top: 4px !important;}
    .mjol_body #mjolContainer .pwdHint { position: unset;}
    .mjol_body form#frmDeclaration { margin-bottom: 20px;}
    .mjol_body #mjolMemberProfileSummaryContainer .dataGroup, .mjol_body .moduleSummaryContainer .dataGroup { width: auto !important;}
}

@media (max-width: 480px) {
    .mjol_body #btnSaveContainer .oc-button { margin: 0 0 10px 0; display: block; }
    .mjol_body #btnSaveContainer .oc-button span { width: 100% !important; }
    .mjol_body div#simplemodal-container .oc-button span { width: auto;}
    .mjol_body .fiElem img { padding-bottom: 3px; margin-left: 0 !important; margin-top: 3px !important;}
    .mjol_body img.ui-datepicker-trigger { padding-left: 3px;}
}

@media (max-width: 420px) {
    .mjol_body #frmBeneficiaries #beneDetailsContainer #beneficiariesTable { font-size: 12px; }
    #mjolContainer #mjolDefaultInvestmentOptionsTable { font-size: 12px; }
    #mjolContainer table#transfer-details { font-size: 12px; }
    .mjol_body .moduleSummaryContainer .summaryHeader h2 { max-width: 70%; }
    .mjol_body .oc-button { padding: 5px !important; }
}