/* Copyright 2012-2013 Metropolitan Life Insurance, All Rights Reserved */
 
/* Anatomy of the Phoenix page template:
 * NOTE: the Phoenix page consists of a CSS-based template and a
 * Widget-based container.  The CSS .page class is a wrapper for
 * the full HTML document (fixes a few bugs w/ specifying margins on the BODY
 * element)....but because I can't think of a better name the Widget
 * is also called Page (and the container for pageTabs)
 * BODY
 *  .leader 
 *    .page
 *      .body (PageTabContainer -- contains Page widgets)
 *         [tabstrip] .pageTabs (from PageTabContainer)
 *         .pageTabWrapper (from PageTabContainer)
 *            .header (from Page)
 *            [menubar] .navMenu (from Page)
 *            .content (from Page)
 *               .mainContent
 *               .marketingRail
 *            .footer
 *      .trailer
 * PAGE GRID:
 *  - total page width is 1000px
 *  - space between horizontal elements is 20px
 *  - 6x150, 3x320, 2x490
 */
/* NOTE that this CSS currently HACKs around the .pageTitle element.
 * A future release may position the .pageTitle within the TabStrip
 * itself (via a custom TabController) meaning the hacks related to padding
 * and margins can be cleaned up.
 */ 
 
 
/********************************************************
               GLOBAL PAGE SECTION
*********************************************************/
body.metlife.phoenix {
   background:#2e85c2 url('../img/bg-chp-pg.png') repeat-x;
   /* background:url('../img/bg-page.png'),-moz-linear-gradient(to bottom, #6290b5 0% , #6A95B7 100%) repeat-x  !important;
     background:url('../img/bg-page.png'),linear-gradient(to bottom, #6290b5 0% , #6A95B7 100%) repeat-x !important;
     background:url('../img/bg-page.png'),-webkit-linear-gradient(#6290b5, #6A95B7) repeat-x  !important; */
     
   background-repeat: repeat-x;
   background-position: 0 0;
   margin: 0px;
   padding: 0px;
}
 
/* the "leader" is the thin strip across the top of the page */
.metlife.phoenix .leader {
   background-color: #555555;
    border-bottom: 1px solid #333333;
   /*height: 24px; */ /* Top Nav Changes */
   height:45px;
   position:fixed;
   text-align: right;
   top:0;
   width:100%;
   z-index:926;
   
}
.leader .logindetail {
    /*height: 20px;
    margin: 0px auto 0px auto;
    padding: 4px 0px 0px 17px;
    text-align: right;
    width: 1020px;*/ /* Top Nav Changes */
    height: 32px;
    margin: 0 auto;
    padding: 12px 0 0 17px;
    text-align: right;
    width: 1020px;
}
.leader .logindetail .welcome{
color:#FFFFFF;
margin-top: 12px;
}
 
@media (max-width: 1024px) {
.leader .logindetail {
      width: 96%;
  }
} 
 
.leader .profileLink{
padding-right:23px;
}
.leader .logoutLink{
   margin-left:10px;
   width:1px;
   height:14px;
   /*background-position:-57px -148px !important;*/
}
.leader .logout{
   /* background: url("../img/icon_lock.png") no-repeat; */
   line-height:16px;
   margin: 10px 4px 0 23px;
}
.leader .logout a,.leader .profileLink a {
   font-family: "FrutigerBold";    
   text-decoration: underline;
   color:#FFFFFF;
}
 
.leader hr {
    border-color: #333333 transparent #B6C4CB !important;
    border-style: solid;
    border-width: 1px 0;
    height: 0;
    margin: 0;    
}
 
/********************************************************
               the global alerts section
*********************************************************/
.globalMessages {
   background: #FFECB4 !important;
    height: 22px;
    margin-bottom: 0 !important;
    margin-top: -43px !important;
    border-radius:0 !important;
    border-bottom: 1px #E8BF60 !important;
    border-top: 1px #E8BF60 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 5px;
    position: fixed;
    width: 100%;
    z-index: 925;
}
.globalAlert{
   float:left;
    font-size: 13px;
    padding-left: 2px;
    width: 93%;
    color:#da3941;
}
.alertClose{
   float: right;
    width: 5%;
}
 
.alertClose a{
   background:url('../img/alert_close.png') no-repeat 75% 50% !important;
   padding-bottom:9px;
}
/********************************************************
               the main phoenix page
*********************************************************/
 
.metlife.phoenix .page {
   width: 1020px;
   height: 100%;
   margin: 0px auto 0px auto;
}
 
.metlife.phoenix .body {
   padding: 10px; /* leave enough room for shadows */
   padding-top: 0px;
   margin-top: 170px;
   overflow:visible !important;
}
 
/** PAGE TABS SECTION */
/* NOTE: in order to support IE7, we can't rely on the presence of the
 * descendent selector. Since we can have TabContainers nested inside 
 * other TabContainers, we need to HACK around it by using an ID selector.
 * The need to do this _should_ go away once we (thought to be inevitably)
 * implement a custom TabController class. 
 */
 /********************************************************
                tabs / tabbar 
*********************************************************/
    
.metlife.phoenix .pageTabs  {
   border: 0px;
   display: none; /*Temporary hidden for single tab*/
   padding: 0px;
   padding-left: 20px;
   overflow: hidden;
}
.metlife.phoenix .pageTabs .dijitTabPane {
   padding: 0px;
}
.metlife.phoenix .pageTabs .dijitTab {
   background: none;
   border: 0px;
   height: 40px;
   margin: 0 -38px 1px 0;
   padding: 0px;
   padding-left: 2px;
}
.metlife.phoenix .pageTabs .dijitTab .tableft{
   background: url('../img/tab_inactive_left.png') no-repeat;
   display:inline-block;
   line-height: 41px;
   margin-left: -25px;
}
.metlife.phoenix .pageTabs .dijitTab .tabcenter{
   background: url('../img/tab_inactive_center.png') repeat-x;
   display: inline-block !important;
   line-height: 41px;
    margin: 0px -4px 0px -13px;
    padding: 1px 14px 0px 7px;
}
.metlife.phoenix .pageTabs .dijitTab .tabright{
   background: url('../img/tab_inactive_right.png') no-repeat;
   display:inline-block;
   line-height: 41px;
}
.metlife.phoenix .pageTabs .dijitTabChecked .tableft{
   background: url('../img/tab_active_left.png') no-repeat;
    margin-left: -24px;
}
.metlife.phoenix .pageTabs .dijitTabChecked .tabcenter{
   background: url('../img/tab_active_center.png') repeat-x;
    padding: 0px 11px 0px 6px;
}
.metlife.phoenix .pageTabs .dijitTabChecked .tabright{
   background: url('../img/tab_active_right.png') no-repeat;
}
.metlife.phoenix .pageTabs .dijitTabChecked {
   background: none;
}
.metlife.phoenix .pageTabs .dijitTabChecked .tabLabel {
   color:#595959 !important;
}
 
.metlife.phoenix .pageTabs .dijitTab .tabLabel {
   color: #FFFFFF;
   display: block;
   font-size: 15px;
   font-family: "FrutigerBold";
}
 
/********************************************************
                Page wrapper
*********************************************************/
 
.metlife.phoenix .pageTabWrapper {
   background: none repeat scroll 0 0 #EDEDED;
   behavior: url('/edge/ui/public/res/polyfill/PIE.htc');
   border-radius: 5px 5px 0 0;
   border-width: 0px;
   box-shadow: -1px 1px 10px -3px rgba(33, 33, 33, 1);
}
 
.claro .MenuTabWrapper .dijitContentPane {
    background: none repeat scroll 0 0 transparent !important;
    border-radius: 5px;
    padding: 0;
    overflow: hidden;
}
 
.MenuTabWrapper .phoenixPage .content {
   padding: 10px 10px 0 !important;
}
/********************************************************
                PAGE CONTENT SECTION
*********************************************************/
 
body.metlife.phoenix .page .body .header {
   behavior: url('/edge/ui/public/res/polyfill/PIE.htc');
    border-bottom: 1px solid #D5D5D5;
    border-radius: 5px 5px 0 0;
    display: block;
    height: 68px;
    margin: 0;
    padding: 0 0 0 20px;
}
 
.metlife.phoenix .page .body .header {
   background: url("../img/bg-pageheader.png") repeat-x scroll 0 0 transparent;
   position:relative;
}
 
body.metlife.phoenix .page .body .header h1{
    color: #0061a0;
    float: left;
    font-size: 30px;
    margin: 0;
       padding: 19px 0;
}
 
.metlife.phoenix .metlifeLogoLink {
   height: 0;
   /*left: 62px;
    margin: 0px auto 0px auto;*/ /* Top Nav Changes */
    /*left:245px;*/
    position: fixed;
    /*top: 52px;
    right: 0;
    width: 1020px; */ /* Top Nav Changes */
    top:70px;
   z-index: 1000;
    /* margin-left:22px; */
    display: table;
}
 /* modified to fix INC001119291*/
.metlife.phoenix .metlifeLogoLink .groupLogo {
    padding-left: 20px;
    border-left: 1px #0090DA solid;
    width: 144px;
    height: 30px;
    text-align: left;
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    top: 7px;
}
.metlife.phoenix .metlifeLogoLink > span {
    display: table-cell;
    vertical-align: middle;
    padding-right: 20px;
}
.metlife.phoenix .metlifeLogoLink .groupLogo img {
    width: auto;
    height: auto;
    max-width: 145px;
    max-height: 30px;
}
@media screen and (max-width: 380px){
       .metlife.phoenix .metlifeLogoLink .groupLogo{
              width: 110px;
       }
       .metlife.phoenix .metlifeLogoLink img{
              width: 110px;
       }
}


.metlife.phoenix .metlifeLogoLink span{
   /*margin-left:16px;*/ /*This is causing extra indentation for group logos*/
}
 
.metlife.phoenix .metlifeLogoLink img {
   border: none;
   /* margin-top:3px;     */
}
 
.metlife.phoenix .navigationHolder {
    background: url("../img/bg-nav-header.png") repeat-x scroll 0 0 transparent !important;
    border: medium none;
    box-shadow: 0 1px 8px 0 rgba(3, 3, 3, 0.4);
    height: 86px;
    left: 0;
    margin: 0px auto 0px auto;
    position: fixed;
    /*top: 26px;*/
    top: 46px;
    width: 100%;
    z-index: 925;
        
}
.dj_ie7 .metlife.phoenix .navigationHolder,
.dj_ie8 .metlife.phoenix .navigationHolder {
    box-shadow: 0 -2px 8px 0 rgba(9, 9, 9, 0.4);
    behavior: url('/edge/ui/public/res/polyfill/PIE.htc');
}
 
.metlife.phoenix .page .body .content {
   border-top: 1px solid #FFFFFF;
    display: block;
    height: auto !important;
}
.mainContent {
   display: block;
   float:left;
   width: 662px; /* 2*320px + 20px spacer */
   vertical-align: top;
   
}
.marketingRail {
   display: inline-block;
   float: right;
   margin-left: 14px; /* add the 20px spacer here 'cause this guy is hidden in narrow displays */
   width: 324px;
   vertical-align: top;
}
 
.marketingRail .dijitContentPane {
    border-radius: 2px 2px 2px 2px !important;
}
 
.rightContentRail { /* so right content is not hidden in narrow view */
   display: inline-block;
   float: right;
   margin-left: 14px; 
   width: 324px;
   vertical-align: top;
}
 
.btmGrad_contentContainer {
   background: url('../img/btmGrad_contentContainer.png') no-repeat;
   height: 40px;    
}
 
@media (max-width: 1065px) { /*commented the lines for 1020px fix*/
   /* pull the marketingRail for narrow displays */
/*     .metlife.phoenix .page { */
/*         width: 684px !important; */
/*    } */
/*    .metlife.phoenix .content {*/
/*        width: 100%;*/
/*    }*/
/*     .metlife.phoenix .marketingRail { */
/*         display: none; */
/*     } */
}
/*@media (max-width: 730px) {
   .metlife.phoenix .page {
       width: 90% !important;
   }
   .metlife.phoenix .mainContent {
       width: 90%;
   }
}*/
/* TODO should the marketing rail define a layout grid? or should the styles
 * for the marketing media boxes (which won't be defined in template.css)
 * handle that?
 */
 /********************************************************
                FOOTER
*********************************************************/
.footer{
   color: #FFFFFF;
       font-size:11px;
    padding: 0 10px 35px;
    line-height: 14px;
    margin-top:13px;
}
.solrHeader{ margin:0 0 12px;}
 
.footer p {
   line-height: 14px;
}
 
.footer .spacer{
   padding: 0 3px 0 2px;
}
 /*Defect 10522 fix changes made is "Frutiger" to "FrutigerBold"*/
.footer a{
   color:#FFFFFF;
   font-size:13px;
   font-family: "FrutigerBold" !important;
   line-height: 16px;
}
.footer .disclaimer{
   font-family: "FrutigerBold";
   margin-top: 9px;    
}
.footer .privacyLink{
   margin: 1px 0 0;    
}
 
.footer.btmGrad_contentContainer {
   padding: 0 !important;    
}
 
.footer .groupContentPlaceholder{
   margin: 10px 0;
}
/* Top Navigation Logout */
.logout .padlockDivider{padding-left:20px; padding-right:13px;}
.logout .divider{height: 16px;width: 1px;background: url('../img/common/sprite_MM_SMedia_Nav_MultiGroup.png') no-repeat -57px -148px;position: absolute !important;margin-left: -13px;}
.logout .profileIcon{height: 16px;width: 15px;background: url('../img/common/sprite_MM_SMedia_Nav_MultiGroup.png') no-repeat -95px -148px;position: absolute !important;margin-top: -1px;}
.logout span.lockImage{height: 16px;width: 14px;background: url('../img/common/sprite_MM_SMedia_Nav_MultiGroup.png') no-repeat -122px -148px;position: absolute !important;margin-top: -1px;}   
/* Single tab top bar changes */
.singleTab .leader{height:30px !important;}
.singleTab .leader .logindetail {
   height: 30px !important;
   padding: 0px 0 0 17px !important;
}
.singleTab .navigationHolder{
   top:32px !important;
} 
.singleTab .MenuTabs{
   top:32px !important;
}  
.singleTab .metlifeLogoLink{
   top:54px !important;
}
.metlife.phoenix.singleTab .body{
margin-top: 155px;
}
.singleTab .megaMenuSection,.singleTab .retailMenuSection{
   top:118px !important;
}
.singleTab .notificationBar{
   top:116px !important;
}
 
/********* Class added for VARI *************/
.variReview{
margin-top:14px ! important;
}

/*** Defect Fix : 39411 for Owneraccess**/
.multiTab.leader .logindetail .welcome{
  margin-top: -7px;
}
.multiTab .dijitInline.welcome > div {
 	width: 235px;
  	display: table-cell;
  	height: 33px;
  	vertical-align: bottom;
}

@media screen and (min-width:981px) and (max-width:1100px){
   .multiTab.leader .logindetail .welcome {
	margin-top: 5px;
   }
   .multiTab .dijitInline.welcome > div{
    width: 170px;
   }
}