/*******************************************************************
                Top Menu Styles

Created By: Brian Gaines
NOTE: CSS for the top-level menu of the Master Page

Katie...Image Updates:
navBackground_1x29.gif - resized background image of top menu 
repeated horizontally - smaller graphic

navSeparator_1x27.gif - used as separator image between menu items

Jude E...Added ng_cloak

*******************************************************************/

/*** Container styles for the Menu ***/
div.menu
{
    font-family: Arial, Sans-Serif;
	font-size: 12px;
	text-decoration: none; /* No underline on the text */
	height: 29px; /* Total Height of Menu Grid Container */
	background-image: url('../NFA-images/navBackground_1x29.gif'); /* Images repeated continuously the width of container */
	background-repeat: repeat-x; /* Repeat this 1px x 29px graphic horizontally the width of Menu container */
	border-top: 1px solid #d5d1ba; /* Top border of Menu */
	border-bottom: 1px solid #d5d1ba; /* Bottom border of Menu */
	padding:0; /* Zero padding around all 4 borders */
	margin-bottom: 10px; /* Distance between Menu bar and page content */
	letter-spacing: .05em;
	font-weight: normal

}

    /*** General Menu styles ***/
    div.menu .top-menu {} /* placeholder when it is needed - is referenced from menu control */
    
        /*** Link Behavior Styles ***/
        div.menu .top-menu a 
        {
            line-height:29px;
            height:100%;
            width:100%;
            display:block; 
        }
        
        div.menu .top-menu a, 
        div.menu .top-menu a:link, 
        div.menu .top-menu a:visited,
        div.menu .top-menu a:active
        {
            color:#000066; 
            text-decoration:none;            
        }
        
        div.menu .top-menu a:hover
        {
            color:#ffffff; 
            text-decoration:none;
        }
        
        div.menu .top-menu a:active, 
        div.menu .top-menu a:focus 
        {
            outline:0;
        }

        /*** Padding Constraints for Menu Items ***/
        div.menu .top-menu .static-hover-style,
        div.menu .top-menu .static-menu-item-style,
        div.menu .top-menu .static-menu-item-style table,
        div.menu .top-menu .static-menu-selected-style,
        div.menu .top-menu .dynamic-menu-item-style,
        div.menu .top-menu .dynamic-hover-style,
        div.menu .top-menu .dynamic-menu-selected-style
        {   
            /*  Viewing the Menu in IE looks a little different than when viewing it in FF. 
                For instance, the highlight color does not bump up next to the separator 
                graphic in FF as it does in IE - It still looks fine. */
            
            /*  clockwise: top right bottom left*/
            padding:0px 0px 0px 3px;                                /* Padding between current menu item and whatever is left of it */
            margin:0px 3px 0px 0px;                                 /* Handles the hovering over Menu Items when our separator graphic is rendered */           
        }
        
        /*** Height Constraints for Menu Items -- Applies to selected state ***/
        div.menu .top-menu .static-hover-style,
        div.menu .top-menu .static-menu-selected-style,
        div.menu .top-menu .dynamic-menu-selected-style,
        div.menu .top-menu .dynamic-hover-style
        {
            height:27px;
        }
        
        /*** Static ItemStyle Behavior Styles ***/
        div.menu .top-menu .static-menu-style {} /* placeholder when it is needed - is referenced from menu control */      
        div.menu .top-menu .static-menu-item-style {} /* placeholder when it is needed - is referenced from menu control */
                       
        div.menu .top-menu .static-hover-style,
        div.menu .top-menu .static-menu-selected-style,
        div.menu .top-menu .static-menu-selected-style a
        {
            background-color:#0a246a;
            color:#ffffff; 
        }
               
        /*** Dynamic ItemStyle Behavior Styles ***/
        div.menu .top-menu .dynamic-menu-style {} /* placeholder when it is needed - is referenced from menu control */
        div.menu .top-menu .dynamic-menu-item-style {} /* placeholder when it is needed - is referenced from menu control */
        
        div.menu .top-menu .dynamic-hover-style,
        div.menu .top-menu .dynamic-menu-selected-style,
        div.menu .top-menu .dynamic-menu-selected-style a        
        {
            background-color:#0a246a;
            color:#ffffff; 
        }
        
	/* 2nd-Tier Menu */        
div.menu2
{
       font-family: Arial, Sans-Serif;
       font-size: 12px;
       text-decoration: none; /* No underline on the text */
       height: 29px; /* Total Height of Menu Grid Container */
       background-image: url(/NFA-images/bg-secnavbar.gif); /* Images repeated continuously the width of container */
       background-repeat: repeat-x; /* Repeat this 1px x 29px graphic horizontally the width of Menu container */
       border-top: solid 1px #d5d1ba; /* Top border of Menu */
       border-bottom: solid 1px #d5d1ba; /* Bottom border of Menu */
       padding:0; /* Zero padding around all 4 borders */
       margin-bottom: 10px; /* Distance between Menu bar and page content */
       letter-spacing: .05em;
       font-weight: normal;
}
    /*** General Menu styles ***/
    div.menu2 .top-menu2 {} /* placeholder when it is needed - is referenced from menu control */
    
        /*** Link Behavior Styles ***/
        div.menu2 .top-menu2 a
        {
            line-height:29px;
            height:100%;
            width:100%;
            display:block; 
        }        
        
        div.menu2 .top-menu2 a, 
        div.menu2 .top-menu2 a:link, 
        div.menu2 .top-menu2 a:visited,
        div.menu2 .top-menu2 a:active
        {
            color:#000066; 
            text-decoration:none;      
        }
        
        div.menu2 .top-menu2 a:hover
        {
            background-color:#0a246a;
            color:#ffffff; 
            text-decoration:none;
        }
        
        div.menu2 .top-menu2 a:active, 
        div.menu2 .top-menu2 a:focus 
        {
            outline:0;
        }

        /*** Padding Constraints for Menu Items ***/
        div.menu2 .top-menu2 .static-hover-style,
        div.menu2 .top-menu2 .static-menu-item-style,
        div.menu2 .top-menu2 .static-menu-item-style table,
        div.menu2 .top-menu2 .static-menu-selected-style
        {   
            /*  Viewing the Menu in IE looks a little different than when viewing it in FF. 
                For instance, the highlight color does not bump up next to the separator 
                graphic in FF as it does in IE - It still looks fine. */
            
            /*  clockwise: top right bottom left*/
            padding:0px 0px 0px 13px;                                /* Padding between current menu item and whatever is left of it */
            margin:0px 9px 0px -6px;                                 /* Handles the hovering over Menu Items when our separator graphic is rendered */           
        }
   
                
        /*** Height Constraints for Menu Items -- Applies to selected state ***/
        div.menu2 .top-menu2 .static-hover-style,
        div.menu2 .top-menu2 .static-menu-selected-style
        {
            height:27px;
        }
        
        /*** Static ItemStyle Behavior Styles ***/
        div.menu2 .top-menu2 .static-menu-style {} /* placeholder when it is needed - is referenced from menu control */      
        div.menu2 .top-menu2 .static-menu-item-style {} /* placeholder when it is needed - is referenced from menu control */
                       
        div.menu2 .top-menu2 .static-hover-style,
        div.menu2 .top-menu2 .static-menu-selected-style,
        div.menu2 .top-menu2 .static-menu-selected-style a
        {
            /*background-color:/*#0a246a;green;*/
            color:#ffffff; 
        }

        /*** Dynamic ItemStyle Behavior Styles ***/       
        .dynamic-menu-style
        {
            margin:2px 0px 0px 0px;
               padding:0;
               border-left: solid 1px #d5d1ba;                        
               border-right: solid 1px #d5d1ba;                       
               border-bottom: solid 1px #d5d1ba;                      
               font-family: Arial, Sans-Serif;
               font-size: 12px;
               letter-spacing: .05em;
               font-weight: normal;
               text-decoration: none;                                 
        }
        
        .dynamic-menu-item-style 
        {
            text-decoration:none;    
               height: 25px;                                          
               background-color:#EBF0F3; 
        }               
        
        .dynamic-menu-item-style a,
        .dynamic-menu-item-style a:link,
        .dynamic-menu-item-style a:visited,
        .dynamic-menu-item-style a:active
        {
            color:#000066; 
            text-decoration:none;      
        }
                
        .dynamic-menu-item-style,
        .dynamic-hover-style,
        .dynamic-menu-selected-style 
        {
            padding:0;                                
            margin:0px 3px 0px 0px;                                 
        }                                 
        .dynamic-menu-item-style a:hover,
        .dynamic-hover-style,
        .dynamic-menu-selected-style,
        .dynamic-menu-selected-style a
        {
            background-color:#0a246a;
            color:#ffffff; 
        }   


/*******************************************************************
                More Custom Styles Here

NOTES:

*******************************************************************/
.menuSide
{
    font-family:Arial, Sans-Serif;
    font-size:12px;
    text-decoration:none;                                           /* No underline on the text */
    margin:10px 18px; 
    padding:0; 
    list-style-type:none;
    
}
/*** Link Behavior Styles ***/
        .menuSide a, 
        .menuSide a:link, 
        .menuSide a:visited,
        .menuSide a:active
        {
            color:#000; 
            text-decoration:none;       
                 
        }
        
        .menuSide a:hover
        {
            color:#000; 
            text-decoration:underline;
        }
        
        .menuSide a:active, 
        .menuSide a:focus 
        {
            outline:0;
        }
        /*** Padding Constraints for Menu Items ***/
        .menuSide  .static-hover-style,
        .menuSide  .static-menu-item-style,
        .menuSide  .static-menu-item-style table,
        .menuSide  .static-menu-selected-style,
        .menuSide  .dynamic-menu-item-style,
        .menuSide  .dynamic-hover-style,
        .menuSide .dynamic-menu-selected-style
        {   
            /*  Viewing the Menu in IE looks a little different than when viewing it in FF. 
                For instance, the highlight color does not bump up next to the separator 
                graphic in FF as it does in IE - It still looks fine. */
            
            /*  clockwise: top right bottom left*/
            padding:0px 0px 12px 0px;                                /* Padding between current menu item and whatever is left of it */
                                            /* Handles the hovering over Menu Items when our separator graphic is rendered */           
        }
/*
ul.lnav {margin:10px 18px; padding:0; list-style-type:none;}
ul.lnav a, ul.lnav a:link, ul.lnav a:visited {color:#000; text-decoration:none;}
ul.lnav a:hover {color:#000; text-decoration:underline;}
ul.lnav a:active {color:#000; text-decoration:none;}
ul.lnav li {padding-bottom:12px;}

ul.lnav ul  {margin:10px 0 0 15px; list-style-type:none;}
ul.lnav ul a, ul.lnav ul a:link, ul.lnav ul a:visited {font-size:11px; color:#000;}
ul.lnav ul a:hover {color:#000;}
ul.lnav ul a:active {color:#000;}
ul.lnav ul li {padding-bottom:6px;}
*/

/* Complaint Form*/
/** Question **/
.questionTitle
{
	text-transform: uppercase;
	}
	.questionBody {
	padding-left: 25px;
	margin-top:20px;
	}
	.questionSubBody 
	{
		padding-left: 25px;
		}
.questionTitleSub
{
	padding-left: 25px;
	font-style:italic;
}

.questionBodyGroup {
	padding-left: 25px;
	margin-top:20px;
	float: left;
	margin-right:10px;
	}

.lidisplay {
    display: inline;
    padding: 25px;
    width: 125px;
}

.spaceradio {
    display: inline;
    padding-left: 15px; 
}

.warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.table100Perc {
    width: 100%;
}
.tdLeft {
    text-align: left;
}
.tdRight {
    text-align: right;
    padding-left:20px;
}
.buttonPadding5{
    padding:5px;
}

.buttonMarginLeft {
 margin-left:5px
}


.custom > dt {
    float: left;
    width: 30px;
}
.custom > dd{margin-left:40px;}


.floatRight{
    float: right;
}
.floatLeft{
    float: left;
}

.ng-invalid .formRequire { outline: red solid 3px; }

.helpText
{
	cursor:pointer;
	}

#permalink_section
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */

}

.editMode 
{
	margin: 10px;
	padding: 10px;
	border-width: 1px;
	background-color: #f9f9f9;
	border-style: solid;
	 border-color : #d3d3d3 ; }

.form_control_adj 
{
	 width: 99%;
	 display: inline-block;
     height: auto;
	}	
.asterisk_input:after {
content:"*"; 
color: #e32; 
position:absolute;
font-size: x-large; 
text-align: right;
 font-weight: bold;
display: inline-block;}

.subgroup {
    font-size: medium;
    text-align: center;
}
    .subgroup div {
        width: 100%;
    }

.subgroup .subline {
    padding-bottom: 2em;
}

.subgroup span {
    font-size: 15px;
    font-weight: bolder;
    /*color: #ff0000 !important;*/
    display: inline-block;
    top: 0;
    right: 0;
    padding-bottom: 2em;
}

.iconSize {
    font-size: 20px;
    font-weight:800;
}

.blueButton {
    background-color: #012d6a;
    display: inline-block;
    margin: 0;
    padding: .8rem 2rem;
    font-weight: 600;
    font-size: 13px;
/*    text-transform: uppercase;*/
    color: #fff;
    border-style: none;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    overflow: visible;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    white-space: normal;
    box-shadow: 0 9px 18px 0 #333333, 0 8px 14px 0 #333333;
}
/*#checkboxes {
  border: 1px #dadada solid;
}

#checkboxes span {
  display: block;
   	padding-left: 10px;
   	padding-right: 10px;
}

#checkboxes span:hover {
  background-color:#ccc;
}*/
/*-------------------------
	Inline help tip
--------------------------*/
.hastooltip {
    border-bottom: 1px dashed #999;
    display: inline;
}

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
  
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 460px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}


/*.help-tip{
	position: static;
	top: 18px;
	right: 18px;
	text-align: center;
	background-color: #BCDBEA;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 26px;
	cursor: default;
}*/
.help-tip{
	position: static;
	top: 18px;
	right: 18px;
	text-align: center;
	background-color: #BCDBEA;
	border-radius: 50%;
	/*width: 24px;
	height: 24px;
	font-size: 14px;*/
	line-height: 26px;
	cursor: pointer;
}

.help-tip:before{
	content:' ? ';
	font-weight: bold;
	color:#fff;
	text-align: center;
}

.modal-content h4
{
	padding-top: 10px;
	padding-left: 5px;
}

.modal-content div
{
	padding: 10px;
	margin: 10px;
}


.box-with-pretext {
    position: relative;
}

.control-with-pretext-website {
    padding: 10px 10px 10px 60px;
}


.pretext-website {
    position: absolute;
    display: block;
    left: 5px;
    top: 5px;
    z-index: 9;
}
/*.help-tip:hover p{
	display:block;
	transform-origin: 100% 0%;
	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;
}

.help-tip p{
	display: none;
	text-align: left;
	background-color: #1E2021;
	padding: 20px;
	width: 300px;
	position: absolute;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	right: -4px;
	color: #FFF;
	font-size: 13px;
	line-height: 1.4;
}

.help-tip p:before{
	position: absolute;
	content: '';
	width:0;
	height: 0;
	border:6px solid transparent;
	border-bottom-color:#1E2021;
	right:10px;
	top:-12px;
}

.help-tip p:after{
	width:100%;
	height:40px;
	content:'';
	position: static;
	top:-40px;
	left:0;
}*/
@-webkit-keyframes fadeIn {
    0% { 
		opacity:0; 
		transform: scale(0.6);
	}

	100% {
		opacity:100%;
		transform: scale(1);
	}
}

@keyframes fadeIn {
	0% { opacity:0; }
	100% { opacity:100%; }
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}