/********************************
Styles That Affect The Template
Header, Menu, Side Bar and Footer
*********************************/


/*** Page Width and Positioning ***/

.headerContent,
#menuElements,
.alert,
.breadcrumbContainer,
.mainContent,
.smartHabitsContent,
.ftrLinks,
.footerWrapper {
	margin-left: auto;
	margin-right: auto;
	width: 1104px;
}

/*** Page Header ***/
.headerContent a {
	text-decoration: none;
}

.headerWrapper {
	background-color: #f3f3f3;
	height: 100px;
	position: relative;
	width: 100%;
}

.headerContent {
	height: 100%;
	position: relative;
}

a.hdrLogo {
	left: 2px;
    outline: medium none;
    padding: 0;
	position: absolute;
	top: 12px;
	z-index: 2;
}

a.hdrLogo img {
	width: 129px;
}

.hdrQuickLinks {
	height: 15px;
	position: absolute;
	right: 285px;
	top: 15px;
}

.hdrQuickLinks .divider {
	font-weight: bold;
}

.hdrQuickLinks,
.hdrQuickLinks a,
.hdrQuickLinks .hdrLoginUser {
	color: #808080;
	font-size: 12px;
	font-weight: bold;
	float: left;
	height: 15px;
	line-height: 15px;
	padding-left: 20px;
	text-transform: uppercase;
}

.hdrQuickLinks a {
	font-family: Helvetica,"Helvetica Neue", Roboto, Arial, sans-serif;
}

.hdrQuickLinks .hdrLoginUser {
	color: #5bd1f6;
	text-transform: none;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 170px;
	white-space: nowrap;
}

.hdrQuickLinks .divider {
	color: #CBC8DA;
	float: left;
	margin-left: 5px;
}

.hdrQuickLinks .hdrLoginUser,
.hdrQuickLinks .hdrLoginLinks {
	float: left;
	font-weight: normal;
}

.hdrQuickLinks .hdrLoginLinks a {
	padding-left: 5px;
	padding-right: 0;
}

.hdrQuickLinks #ctl00_lnkLogin,
.hdrQuickLinks #ctl00_lnkLogout
{	
	padding-left: 5px;
}

.hdrQuickLinks .hdrLoginLinks a:last-child:after {
	content: "";
}

.headerSearch {
    position: absolute;
    right: 15px;
    top: 10px;
}

.headerSearch input[type="text"] {
    border: 0 none;
	color: #d25d12;
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: auto;
    line-height: 100%;
    margin: 0;
    margin-top: 6px;
    outline: 0 none;
    padding: 0;
    width: 197px;
}

.headerSearch ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #d25d12;
}

.headerSearch :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #d25d12;
   opacity:  1;
}

.headerSearch ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #d25d12;
   opacity:  1;
}

.headerSearch :-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #d25d12;
}

.headerSearch input[type="image"] {
    height: 14px;
	margin-right: 7px;
    margin-top: 2px;
    outline: 0 none;
	width: 14px;
}


/*** Main Navigation and Megamenu ***/

#skipNavigation { 
	display: none; 
}

#menuWrapper {
	position: absolute;
	top: 55px;
	width: 100%;
}

#menuElements {
	height: 45px;
	margin-top: 0;
	position: static;
}

#menuElements ul,
#menuElements li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul#menuTabs {
	float: right;
	line-height: normal;
	margin: 0;
	padding: 0;
}

#menuTabs li {
	float: left;
	margin: 0;
	padding: 0;
	position: static;
}

#menuTabs li.hover {
	background-color: #e26c24;
}

#menuTabs li a {
	color: #414042;
	font-family: Helvetica,"Helvetica Neue", Roboto, Arial, sans-serif;
	display: block;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 13px;
	padding-left: 15px; 
	padding-right: 15px; 
	padding-top: 13px;
	text-decoration: none;
}

#menuTabs li.hover > a,
#menuTabs li.menuActive.hover > a {
	color: #ffffff;
}

#menuTabs li.menuActive > a {
	color: #e26c24;
}

.megaMenuWrapper {
	background-color: #314451;
	border-bottom: 1px solid #7cbcd2;
	height: auto;
	left: 0;
	position: absolute;
	display:none;
	top: 44px;   /* NBP suggested IE11 fix - original 45px */
	width: 100%;
	z-index: 9998;
}

.megaMenuBgRight {
	background-color: #415b6c;
	bottom: 0;
	display: block;
	height: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	z-index: 9998;
}

#menuTabs .megaMenu {
	background-color: #314451;
    box-sizing: border-box;
	display: block;
	height: auto;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	position: relative;
	top: auto;
	width: 1104px;
	z-index: 9999;
	 transform-origin: top;  
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
}

#menuTabs .megaMenu {
}

#menuTabs .megaMenu h1,
#menuTabs .megaMenu a {
	font-family: Helvetica,"Helvetica Neue", Roboto, Arial, sans-serif;
	color: #ffffff;
	font-size: 12px;
	font-weight: normal;
}

#menuTabs .megaMenu h1,
#menuTabs .megaMenu h1 a {
	font-family: Helvetica,"Helvetica Neue", Roboto, Arial, sans-serif; /* Need this here because the base font for h1 is Gotham, but this is < 18px and requires Gotham Ssm */
	font-weight: bold;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

#menuTabs .megaMenu h1 {
	border-bottom: 1px solid #5bd1f6;
	margin-bottom: 10px;
	margin-top: 32px;
	padding-bottom: 5px;
	padding-top: 0;
}

#menuTabs .megaMenu h1 a {
	margin-bottom: 0;
}

#menuTabs .megaMenu a {
	line-height: 16px;
	margin-bottom: 10px;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	width: 100%;
}

#menuTabs .megaMenu .megaMenuItems,
#menuTabs .megaMenu .megaMenuQuickLinks {
	display: table-cell;
	padding-bottom: 20px;
	padding-top: 5px;
}

#menuTabs .megaMenu .megaMenuItems {
	vertical-align: top;
	width: 820px; 
}

#menuTabs .megaMenu .megaMenuItems .megaMenuCol {
	float: left; 
	padding-left: 50px; 
	width: 200px; 
}

#menuTabls .megaMenu .megaMenuCol:last-child {
	padding-right: 50px;
}

#menuTabs .megaMenu .megaMenuQuickLinks {
	background-color: #415b6c;
	height: 100%;
	padding-left: 25px; 
	padding-right: 50px; 
	width: 210px; 
}


/* http://www.w3.org/TR/css3-animations/ */

.blind-content.in {
    -webkit-animation: blind-in-bottom 2s ;
    animation: slide-in-bottom 2s ;
}

.blind-content {
   transition-property: max-height, height;
   overflow: hidden;
}

@-webkit-keyframes blind-in {
      0% { max-height:0; }
    100% { max-height: 1000px; }
}

@keyframes blind-in {
      0% { max-height:0; }
    100% { max-height: 1000px; }
}


/*** Breadcrumbs ***/

ul.breadcrumbs {
	height: 15px;
	margin-bottom: 25px;
	margin-left: 0;
	margin-top: 10px;
}

ul.breadcrumbs li {
	font-size: 12px;
	padding-left: 0;
	white-space: nowrap;
}


/*** Content container ***/

.mainContent {
	padding-bottom: 50px;
}
.mainContent.noPadding {
	padding-bottom: 0;
}



/*** Footer ***/


.smartHabitsFooter {
	background-color: #f3f4f4;
	width: 100%;
}

.footerWrapper {
	height: auto;
	min-height: 50px;
}

.footerHelp {
	float: right;
	height: 133px;
	margin-top: -40px;
	position: relative;
	width: 0;
}

.footerWrapper.showSocialMedia .footerHelp  {
	margin-top: -35px;
}

.footerHelp label {
	background-image: url(../images/FooterHelp.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: 93px;
	line-height: 16px;
	padding-left: 25px;
	padding-top: 40px;
	position: absolute;
	right: 60px;
	text-align: center;
	top: 0;
	width: 128px;
}

.footerHelp label a {
	display: block;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
}

.footerWrapper .footerSocialNetwork {
	display: none;
}

.footerWrapper.showSocialMedia .footerSocialNetwork {
	display: block;
}

.footerSocialNetwork {
	padding-bottom: 20px;
	padding-top: 20px;
	text-align: center;
}

.footerSocialNetwork .ftrTwitterFeed {
	color: #989a9d;
	float: left;
	font-size: 12px;
	height: 85px;
	line-height: 16px;
	overflow: auto;
	width: 300px;
}

.footerSocialNetwork .ftrSocialLinks {
	display: inline-block;
	height: 85px;
	text-align: center;
	width: 132px;
}

.footerSocialNetwork .ftrSocialLinks:first-child {
}

.footerSocialNetwork .ftrSocialLinks a {
	border-left: 1px solid #d7d8d9;
	background-repeat: no-repeat;
	color: #221e1f;
	display: block;
	font-size: 12px;
	line-height: 20px;
	padding-bottom: 25px;
	padding-top: 40px;
	text-transform: uppercase;
	text-decoration: none;
	width: 100%;
}

.footerSocialNetwork .ftrSocialLinks a.ftrTwitter {
	background-image: url(/Resources/images/icons/FooterTwitter.png);
	background-position: center 12px;
	background-size: 31px 23px;
	border-left: 0;
}

.footerSocialNetwork .ftrSocialLinks a.ftrFlickr {
	background-image: url(/Resources/images/icons/FooterFlickr.png);
	background-position: center 22px;
	background-size: 19px 9px;
}

.footerSocialNetwork .ftrSocialLinks a.ftrYouTube {
	background-image: url(/Resources/images/icons/FooterYouTube.png);
	background-position: center 18px;
	background-size: 26px 18px;
}

.footerLinksWrapper {
	background-color: #f3f4f4;
	overflow: hidden;
	width: 100%;
}

.footerLinksWrapper a {
	text-decoration: none;
}

.ftrLinks {
	padding-bottom: 30px;
}

.ftrLinks .ftrNBPInfo,
.ftrLinks .ftrLinksCol {
	float: left;
	margin-top: 65px;
}

.ftrLinks .ftrNBPInfo {
	width: 245px;
}

.ftrLinks .ftrLinksCol {
	padding-left: 50px;
	width: 215px;
}

.ftrLinks .ftrLinksCol .ftrLinksTitle {
	color: #e26c24;
	font-size: 16px;
	margin-bottom: 17px;
	text-transform: uppercase;
}

.ftrLinks .ftrLinksCol a {
	color: #221e1f;
	display: block;
	font-size: 11px;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.ftrLinks .ftrLinksCol a.ftrLinkTwitter:after {
	content: url(/Resources/images/icons/FooterLinkTwitter.png);
	padding-left: 3px;
	margin-top: 12px;
}

.ftrOutages {
	background-image: url(../images/icons/FooterCurrentOutages.png);
	background-repeat: no-repeat;
	font-size: 12px;
	font-weight: bold;
	margin-top: 20px;
	padding-left: 20px;
	text-transform: uppercase;
}

.copyright {
	color: #999;
	font-size:10px;
	padding-right:30px;
	text-align: right;
}

#ftrLogo{ position: relative;}

#ftrLogo img {
	width: 129px;
}