/******************************************************************************
Filename:   template.css
Project:    New Jersey Resources
Purpose:    Template CSS:  This file should remain the same across all NJR sites
Notes:      contentContainer styles are overwritten in contentContainer.css
            when rightNav is removed and content area spans across
Date            Developer   Description
10/05/2006      jmk         Version 1.0
******************************************************************************/

/************ BEGIN:  SITE-WIDE STYLES ************/
body{background:#EDEEEF url("../images/global/body_bg.gif") 0 0 repeat-y; font-family:Verdana, Helvetica, Arial, _san; margin:0 0 0 0; voice-family:"\"}\""; voice-family:inherit; background:#EDEEEF url("../images/global/body_bg.gif") center repeat-y;}
#bodyContainer{background:transparent; width:980px; margin:0; voice-family:"\"}\""; voice-family:inherit; background:transparent; margin:0 auto 0 auto;}
html > body #bodyContainer {background:transparent url("../images/global/body_bg.gif");}
body, p, th, td{font-family:Verdana, Helvetica, Arial, sans-serif; color:#343434; font-size:12px;}
p{margin:0 0 14px 0;}
a{text-decoration:none; color:#0065A4;}
a:hover{color:#124C7E;}
img {border:none;}
.clear {clear:both;}
#screenreaderNav{position:absolute; left:0; top:0; z-index:-1;}
.screenreaderNavAnchor{display:none;}
/************ END:  SITE-WIDE STYLES ************/

/************ BEGIN:  TIER 2 CONTENT ************/
#pageBodyContainer{margin-top:235px; width:100%; voice-family:"\"}\""; voice-family:inherit; margin-left:1px;}
html > body #pageBodyContainer{margin-left:0px; background:transparent url("../images/global/body_bg.gif");}
#contentContainer{width:974px;}
#contentContainer{background:url("../images/global/contentContainer_bg.gif") repeat-y 784px 0;}
#contentMain{float:right; width:736px;}
#content{float:left; background:#FFFFFF; height:250px;}
html > body #content{height:auto; min-height:250px;}
#content{width:530px; line-height:1.6em;}
h4, .heading, #content h1{margin:0 0 16px 0; font-size:13px; color:#003F5E;}
h5, .subheading, #content h2, #content h3{margin:0 0 14px 0; font-size:11px; font-weight:600; color:#003F5E;}
.emphasis{color:#5E1102;}
#contentSeparator{height:10px;}

/**** tier 5 nav ****/
#tier5NavContainer{width:529px; height:28px; margin-bottom:15px; padding-bottom:7px; font-size:9px; background:url("../images/global/tier5Nav/bottom_bg.gif") no-repeat 0 100%;}
html > body #tier5NavContainer{height:auto; min-height:28px;}
#tier5NavTop{height:5px; background:url("../images/global/tier5Nav/top_bg.gif") no-repeat;}
#tier5NavSubContainer{background:url("../images/global/tier5Nav/border_bg.gif") repeat-y;}
#tier5Nav{margin:0 13px 5px 13px;}
#tier5Nav a{font-weight:600; text-decoration:none;}
.tier5NavDivider{width:1px; height:16px; margin:0 7px 0px 7px; vertical-align:middle;}
.tier5NavRowDiv{height:1px; margin:5px 0 5px 0; background:url("../images/global/tier5Nav/rowDivider.gif") no-repeat;}

/**** titles ****/
#titleContainer{width:974px; height:45px; margin-bottom:8px; background:#FFFFFF url("../images/global/title_bg.gif") no-repeat 0 100%; clear:both;}
#titleContainerTrans{position:absolute; margin:-34px 0 0 -252px; left:50%;}
#titleContainer a{color:#0065A4; text-decoration:none;}
#titleContainer a:hover{text-decoration:underline;}
#titleContainer table, #titleContainerTrans table{height:32px; padding:9px 0px 0px 0px;}
#titleContainer h1, #titleContainer h2, #titleContainerTrans h2{color:#0065A4; font-size:12px; text-transform:uppercase;}
#titleContainer h1{width:200px; margin:0 24px 0 13px; font-size:12px;}
#titleContainer h2, #titleContainerTrans h2{margin:0;}
#titleContainer h3, #titleContainerTrans h3{margin:0 0 0 10px; padding-left:19px; color:#0065A4; font-size:12px; font-weight:bold; background:url("../images/global/title_arrow.gif") no-repeat 0 3px;}

/**** tables ****/
#content table td{vertical-align:top; line-height:1.2em;}
#content table.tbl{margin-bottom:14px; border:1px solid #83A2B2;}
#content table.tbl tr.odd{background-color:#FFFFFF; }
#content table.tbl tr.even{background-color:#EDEEEF; }
#content table.tbl th {background:#83A2B2; color:#ffffff; font-size:11px; padding:5px; line-height:1.5em; vertical-align:top; border-bottom:1px solid #83A2B2;}
#content table.tbl td {border-right:1px solid #83A2B2; padding:5px 5px 10px 5px; border-bottom:1px solid #BFD1DD; border-top:1px solid #FFFFFF;}

/**** left nav ****/
#leftNavContainer{width:221px;}
#leftNav{width:211px; margin-left:9px; padding-right:1px; background:url("../images/global/leftNav/leftNav_bg.gif") repeat-y 100% 0;}
#leftNavBottom{margin-top:-2px; background:#FFFFFF url("../images/global/leftNav/leftNavBottom_bg.gif") no-repeat;}
/* left nav module */
.leftNav1Off{padding:7px 7px 7px 5px; font-size:12px; font-weight:bold; border-bottom:1px solid #99C1DB; }
.leftNav1Off a {color:#444444;}
.leftNav1On{margin-bottom:1px; padding:7px 7px 8px 5px; font-weight:bold; background:#124C7E;}
.leftNav1Off a, .leftNav1On a{width:100%; display:block; font-size:12px; text-decoration:none;}
.leftNav1Off a:hover{color:#124C7E; text-decoration:none;}
.leftNav1On a{color:#FFFFFF;}
.leftNav1On a:hover, .leftNav1On a:active{color:#FFFFFF; text-decoration:none;}
.leftNav2Off, leftNav2On{font-weight:normal; background:#E7EEF2;}
.leftNav2Off div{padding:5px 7px 5px 0; margin-left:32px; border-bottom:1px solid #99C1DB;}
.leftNav2On{padding-bottom:1px;}
.leftNav2On div{margin-left:7px; padding:5px 7px 5px 25px; background:#FFFFFF url("../images/global/leftnav/leftNavBullet_on.gif") no-repeat 10px 8px;}
.leftNav2Off a, .leftNav2On a, .leftNav2Off a:hover, .leftNav2On a:hover, .leftNav2Off a:visited, .leftNav2On a:visited, .leftNav2Off a:active, .leftNav2On a:active{font-size:11px; width:100%; display:block; text-decoration:none;}
.leftNav2On a{color:#124C7E;}

/**** right nav ****/
#rightNav{float:right; display:inline; width:121px; margin:45px 40px 0 0; font-size:10px;}
.rightNavBanner{margin-bottom:30px; font-size:10px;}
.rightNavBannerImg{width:120px; height:120px; margin-bottom:10px;}
.rightNavBannerTitle{margin-bottom:10px; font-size:11px; font-weight:bold; color:#7895A0; text-transform:uppercase;}
.rightNavBannerTitle a, .rightNavBannerTitle a:hover,.rightNavBannerTitle a:visited{font-size:11px; font-weight:bold; color:#7895A0; text-transform:uppercase; text-decoration:none;}

/**** footer ****/
#footerContainer{width:974px; padding-top:30px; clear:both; background:#FFFFFF url("../images/global/footer/footer_bg.gif") no-repeat 0 15px;}
#footerContainer a{text-decoration:none;}
#utilityNavContainer{width:954px; height:31px; margin:0 10px 14px 10px; font-size:11px; border-top:1px dotted #5194AF; border-bottom:1px dotted #5194AF;}
#utilityNav{width:954px; float:left;}
#utilityNav .text {margin:8px 0 0 5px; float:left;}
#utilityNav a{margin:8px 0 0 5px; color:#83A2B2;}
#utilityNav a:hover{color:#124C7E;}
.utilityNavDivider{width:5px; height:12px; margin:0 8px -3px 8px;}
#utilityNavText{float:right; margin-top:4px; font-size:11px; font-weight:600;}
.socialMediaIcons {margin:3px 3px 0 0px; float:right;}
#copyrightContainer{width:974px; height:34px; color:#FFFFFF; font-size:10px; background:url("../images/global/footer/copyright_bg.gif") no-repeat;}
#copyright{float:left; margin:10px 0 0 10px;}
#beaconInfo{float:right; margin:10px 10px 0 0;}
#beaconInfo a{color:#FFFFFF;}
#beaconInfo img{margin:0 6px -1px 6px;}
#footerDisclaimer{margin:10px 19px 0 19px; padding-bottom:10px; font-size:10px;}
#footerDisclaimer p{font-size:10px;}

/************ END:  TIER 2 CONTENT ************/

/************ BEGIN:  HEADER ************/
#headerContainer{position:absolute; top:0; width:980px; voice-family:"\"}\""; voice-family:inherit; background:transparent;  margin-left:1px;}
html > body #headerContainer{margin-left:0px;}

/**** company nav ****/
#companyNavContainer{width:974px; height:55px; padding:0px 0px 5px 0px; overflow:hidden;}
#companySubNavContainer{height:23px; font-size:11px; background:#EDEEEF; padding:0px 0px 5px 0px; overflow:hidden;}
#companySubNavContainer div{float:left; margin:6px 4px 0 8px; }
#companySubNavContainer a{color:#83A2B2; text-decoration:none;}
#companySubNavContainer a:hover{color:#003f5e;}
#companySubNavContainer #companySubNav {height:23px; font-size:11px; }
#companyMainNavContainer{width:974px; height:28px; background:#EDEEEF; overflow:hidden;}
/*#companyMainNavLeft{float:left; width:139px; height:28px; background:url("../images/global/companyNav/mainNavLeft_bg.gif") no-repeat;}*/
#companyMainNav{float:left; height:28px; width:100%; padding:0 0px 0 0px; overflow:hidden;}
#companyMainNav img{margin-top:2px;}
/*#companyMainNavRight{float:left; width:16px; height:28px; background:url("../images/global/companyNav/mainNavRight_bg.gif") no-repeat;}*/
.companyManNavDivider{width:6px; float:left;}
.companyNavItem {float:left; padding:7px 21px 0px 17px;  height:28px; background:#FFFFFF;}
.companyNavItem a{ text-decoration:none; font-size:11px; color:#124C7E!important;}
.companyNavItem a.active { color:#83A2B2!important;}
.companyNavItem a:hover{ text-decoration:none; font-size:11px;  color:#83A2B2!important;}
.subItems a.hide { visibility:hidden;}
.subItems a{padding:0px 15px 0px 0px; margin:0px 20px 0px 0px; color:#83A2B2!important; background:url("../images/global/companyNav/arrow_off.png") center right no-repeat;}
.subItems a:hover{color:#124C7E!important;  background:url("../images/global/companyNav/arrow_on.png") center right no-repeat;}


/**** header ****/
#header{width:974px; height:78px;}
#headerNav{float:right; margin-top:43px;padding-right:6px; text-align:right;display:block;width:410px;*width:390px;}
#headerQuickLinks{float:right; margin-right:20px;}
#headerSearch{float:right; margin:0; voice-family:"\"}\""; voice-family:inherit; margin-top:-1px;}
html > body #headerSearch{margin-top:0px;}
.headerQuickLinksField, .headerSearchField, .headerSearchFieldInternal{font-size:11px; color:#6b6b6b; font-family:Verdana, Helvetica, Arial, sans-serif;}
.headerSearchField{height:15px; float:right; border:none; background:url("../images/global/header/search_bg.gif") left no-repeat; padding:2px 0px 2px 25px;
                    position:relative; right:30px;}
.headerSearchFieldInternal{height:19px;}
.headerQuickLinksSubmit{position:relative; top:2px;}
.headerSearchSubmit{float:right; position:relative; left:145px;}
#logo{position:relative; left:25px; top:15px;}
#njlivingTagline{position:absolute; left:157px; top:70px; width:429px; height:10px;}
#njngAcctServicesLogo{position:relative; left:662px; top:6px;}

/**** top nav ****/
#topNavContainer{width:974px; height:32px; padding-top:4px; background:url("../images/global/topNav/topNav_bg.gif") no-repeat; border-top:1px solid #C1CFD1;}
.imsubc {left:14px!important;}
.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none ox13ide none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}
.imcm span{display:inline;}
.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;}
.imcm .imsc{position:absolute;}
.imcm .imsubc{position:absolute;visibility:hidden;}
.imcm li{list-style:none;font-size:1px;float:left;}
.imcm ul ul li{width:100%;float:none !important;}
.imcm a{display:block;position:relative;}
.imcm ul .imsc,.imcm ul .imsubc {z-index:10; margin-top:-1px; }
.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}
.imcm ul ul ul .imsc,.imcm ul ul .imsubc{z-index:30;}
.imde ul li:hover .imsubc{visibility:visible;}
.imde ul ul li:hover  .imsubc{visibility:visible;}
.imde ul ul ul li:hover  .imsubc{visibility:visible;}
.imde li:hover ul  .imsubc{visibility:hidden;}
.imde li:hover ul ul .imsubc{visibility:hidden;}
.imde li:hover ul ul ul  .imsubc{visibility:hidden;}
.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:0px;height:0px;float:right;}
.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}
.dvs,.dvm{border-width:0px}
/*\*//*/.imcm .imclear,.imclear{font-size:1px;}.imcm .imsc{display:inline-block;position:relative;}/**/
/* --[[ Main Expand Icons ]]-- */
#imenus0 .imeam span,#imenus0 .imeamj span {}
#imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {}
/* --[[ Sub Expand Icons ]]-- */
#imenus0 ul .imeas span,#imenus0 ul .imeasj span {}
#imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {}
/* --[[ Main Container ]]-- */
#imouter0 {}
/* --[[ Sub Container ]]-- */
#imenus0 li ul {background-color:#EDEEEF; border:1px solid #336D91; line-height:12px;}
/* --[[ Main Items ]]-- */
#imenus0 li a {text-align:center; color:#FFFFFF; font-weight:bold; font-family:Verdana, Helvetica, Arial, sans-serif; font-size:12px; text-decoration:none;}
/* [hover] - These settings must be duplicated for IE compatibility.*/
#imenus0 li:hover>a {}
#imenus0 li a.ihover, .imde imenus0 a:hover {}
/* [active] */
#imenus0 li a.iactive {}
/* --[[ Sub Items ]]-- */
#imenus0 ul a {font-size:10px; font-weight:normal; font-variant:normal; color:#83A2B2; text-align:left; text-decoration:none; padding:3px 3px 3px 12px; border-right:1px solid #83A2B2; border-bottom:1px solid #83A2B2;}
/* [hover] - These settings must be duplicated for IE comptatibility.*/
#imenus0 ul li:hover>a {font-size:10px; color:#124C7E; background-color:#FFFFFF;}
#imenus0 ul li a.ihover {font-size:10px; color:#124C7E; background-color:#FFFFFF;}
/* [active] */
#imenus0 ul li a.iactive {}
/* [Dividers] */
#imenus0 .dvs {}
/* used for noscript version */
.topNav{float:left; height:24px; margin:0 0 0 3px; padding:0 13px 0 7px; background:url("../images/global/topNav/topNavDivider.gif") no-repeat 100% 0;}
.topNav a, .topNav a:hover, .topNav a:visited, .topNav a:active{color:#FFFFFF; font-variant:small-caps; font-size:12px; text-decoration:none; line-height:22px;}

/**** utility nav ****/
#headerUtilityContainer{width:974px; height:61px; margin:0; background:url("../images/global/header/headerUtilityContainer_bg.gif") no-repeat;}
#headerTier2Img{float:left; width:780px; height:52px; margin:9px 0 0 4px;}
#headerUtility{float:right; margin:15px 6px 0 0; text-align:right; width: 175px;}

/************ END:  HEADER ************/

/************ BEGIN:  FORMS ************/
form{padding:0; margin:0; display:inline; font-size:13px;font-family: Verdana, Helvetica, Arial, sans-serif; }
.required{color:#990B08; font-weight:bold;}
.response{font-weight:bold; color:#124C7E;}
.error{width:auto; text-align:center; margin:6px 20px 6px 20px; padding:3px; font-weight:bold; color:#5E1102; clear:both;}

#content table.formTable td{vertical-align:top; padding:0 5px 15px 5px;}
#content table.formTable td.formHeading{vertical-align:top; padding:15px 5px 5px 5px;}
#content table.formTable td.formHeading h5{background:#BFD1DD; padding:5px;}
#content .label{text-align:left; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:12px; color:#343434;}
.label{text-align:left; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:12px; color:#343434; padding:0px 0px 3px 0px;}
#content .labelL{text-align:left; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:12px; color:#343434;}
.labelL{text-align:left; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:13px; color:#343434;}
#content input.field{color:#343434; height:18px; font-size:13px; background:#ffffff; border:1px solid #AAAAAA;}
input.field{color:#343434; height:18px; font-size:13px; background:#ffffff; border:1px solid #AAAAAA; margin:0px 0px 15px 0px;}
#content input.radio{ margin-left:0; margin-right:0; margin-top:-4px; padding:0; vertical-align:middle;}
.radioDiv{margin-bottom:15px;}
input.radio{ margin-left:0; margin-right:0; margin-top:-4px; padding:0; vertical-align:middle;}
html > body input.radio{ margin-top:-4px;}
html > body #content input.radio{ margin-top:-4px;}
#content input.check_box{vertical-align:middle; margin:0px 7px 0px 0px; float:left;}
input.check_box{vertical-align:middle; margin:0px 7px 4px 0px; float:left;}
html > body input.check_box{vertical-align:middle;margin-top:0px;}
html > body #content input.check_box{vertical-align:middle;margin-top:0px;}
.check_box_label {vertical-align:middle; margin:-2px 0px 5px 20px;}
#content select{color:#343434; height:21px; font-size:13px; background:#ffffff; border:1px solid #AAAAAA;}
#content textarea{color:#343434; font-size:13px;font-family: Verdana, Helvetica, Arial, sans-serif;  background:#ffffff; border:1px solid #AAAAAA;}
select{color:#343434; height:14px; font-size:13px; background:#ffffff; border:1px solid #AAAAAA; margin:0px 0px 15px 0px;}
html > body select{height:21px;}
html > body #content select{height:21px;}
#content .example{font-size:9px;}
/************ END:  FORMS ************/

/************ BEGIN:  PRINT ************/
#printHeader{display:none;}
#pageTitleContainer{display:none;}
#pageTitle{display:none;}
/************ END:  PRINT ************/

/************ BEGIN:  EXTRAS ************/
span.darkHighLight{color:#666666;}
span.redHighLight{color:#990B08;}
span.lightBlue{color:#7895A0;}
h3 .pageHeading{display:inline; margin:0 12px 0  0; font-size:10px; font-weight:bold; color:#516F87;}
#content table tr{vertical-align:top;}
/************ BEGIN:  EXTRAS ************/

/***** START: Google 404 Widget Styles ****/
    /* Widget content container */
   #goog-wm { }

    /* Heading for "Closest match"*/
   #goog-wm h3.closest-match {color:#7895A0; }

    /* "Closest match" link*/
   #goog-wm h3.closest-match a {text-decoration:underline; color:#687c86; }

    /* Heading for "Other things" */
   #goog-wm h3.other-things { }

    /* "Other things" list item */
   #goog-wm ul li { }

    /*  */
   #goog-wm li.search-goog {display: list-item;}

    /* Site search box */
   #goog-wm-qt {width:150px;font-size:11px; color:#6b6b6b; font-family:Verdana, Helvetica, Arial, sans-serif;height:13px; border:1px solid #6699cc; }
   
    /* Button */
   #goog-wm-sb{background:#ffffff url("../images/global/header/google-btn.gif") 0px 0px no-repeat; color:#ffffff; font-size:11px; font-family:Verdana, Helvetica, Arial, sans-serif; border:none; width:100px; margin-left:12px; padding-bottom:5px; }
/***** END: Google 404 Widget Styles ****/
/*  QUICKLINK STYLES */
#quicklinksSelect { float:left; *margin-top:-21px; font-size:10px; text-align:left!important;}
.desc { color:#6b6b6b; }
.desc a { color:#0092dd; }
.dropdown { position:relative; z-index:3001!important; float: left; font-size:10px;width:182px; height:19px; margin:auto; padding:0px 0px 1px 5px; #padding-top:2px; padding-top:2px\0/; background:url("../images/global/header/quicklinks_bg.gif") no-repeat; cursor:pointer; border:none; font-size:10px; font-family:Verdana, Helvetica, Arial, _san; color:#444444;}
ul.dropdown {padding:0; margin:0;}
.dropdown li { list-style:none; }
.dropdown li.dropdownItems { position:relative; }
.dropdown a { color:#6B6B6B; text-decoration:none; outline:none;}
.dropdown a:visited, .dropdown a:hover { color:#6B6B6B; text-decoration:none; outline:none; }
.dropdown li.dropdownItems span.dropdownLabel { display:block; padding:3px 20px 5px 5px;  width:150px; }
.dropdown li.dropdownItems ul { background:#EDEEEF; border:1px solid #0d2d47; color:#C5C0B0; display:none; *left:-40px; padding:0px 0px; position:absolute; top:18px; width:180px;  max-height:200px; overflow-x:hidden; overflow-y:auto; z-index:2001!important;}
.dropdown li.dropdownItems ul li a { padding:5px 0px 5px 5px; width: 100%; display:block; background-image: none; border-bottom:1px solid #336D91; color:#83A2B2;}
.dropdown li.dropdownItems ul li a:hover { background-color:#FFFFFF; color:#124C7E; }
.noscript li.dropdownItems:hover ul { display: block; }