/******************************************************************************
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, _san; color:#555555; font-size:11px;}
p{margin:0 0 14px 0;}
a{text-decoration:underline; color:#687c86;}
a:hover{color:#124C7E;}
img {border:none;}
#screenreaderNav{position:absolute; left:0; top:0; z-index:-1;}
.screenreaderNavAnchor{display:none;}
/************ END:  SITE-WIDE STYLES ************/

/************ BEGIN:  TIER 2 CONTENT ************/
#pageBodyContainer{margin-top:209px; 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:#124C7E; text-decoration:none;}
#titleContainer a:hover{text-decoration:underline;}
#titleContainer table, #titleContainerTrans table{height:32px;}
#titleContainer h1, #titleContainer h2, #titleContainerTrans h2{color:#124C7E; font-size:12px; text-transform:uppercase;}
#titleContainer h1{width:200px; margin:0 24px 0 13px;}
#titleContainer h2, #titleContainerTrans h2{margin:0;}
#titleContainer h3, #titleContainerTrans h3{margin:0 0 0 10px; padding-left:19px; color:#7895A0; 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:10px; font-weight:bold; border-bottom:2px dotted #EDEEEF;}
.leftNav1On{margin-bottom:1px; padding:7px 7px 8px 5px; font-weight:bold; background:#124C7E;}
.leftNav1Off a, .leftNav1On a{width:100%; display:block; font-size:10px; 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:2px dotted #DAE4EB;}
.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:10px; 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:22px; margin:0 10px 14px 10px; font-size:11px; border-top:2px dotted #EDEEEF; border-bottom:2px dotted #EDEEEF;}
#utilityNav{margin:4px 0 0 5px;}
#utilityNav a{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;}
#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:52px;}
#companySubNav{height:23px; font-size:12px; background:#EDEEEF;}
#companySubNav div{float:left; margin:6px 4px 0 8px;}
#companySubNav a{color:#83A2B2; text-decoration:none;}
#companySubNav a:hover{color:#003f5e;}
#companyMainNavContainer{width:974px; height:28px; background:url("../images/global/companyNav/mainNavRight_curve.gif") no-repeat 100% 0;}
#companyMainNavLeft{float:left; width:139px; height:28px; background:url("../images/global/companyNav/mainNavLeft_bg.gif") no-repeat;}
#companyMainNav{float:left; height:28px; padding:0 10px 0 10px; background:url("../images/global/companyNav/mainNav_bg.gif") repeat-x 0 100%;}
#companyMainNav img{margin-top:2px;}
#companyMainNavRight{float:left; width:16px; height:28px; background:url("../images/global/companyNav/mainNavRight_bg.gif") no-repeat;}
.companyManNavDivider{margin:0 3px 0 3px;}

/**** header ****/
#header{width:974px; height:61px;}
#headerNav{float:right; width:700px; margin-top:33px; padding-right:30px; text-align:right;}
#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:13px; border:1px solid #6699cc;}
.headerSearchFieldInternal{height:19px;}
.headerQuickLinksSubmit{position:relative; top:2px;}
.headerSearchSubmit{position:relative; top:2px;}
#logo{position:relative; left:25px;}
#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;}
/* 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;}
.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:right; font-family: Verdana, Helvetica, Arial, _san; font-weight:bold;}
#content .labelL{text-align:left; font-family: Verdana, Helvetica, Arial, _san; font-weight:bold;}
#content input.field{color:#555555; height:14px; font-size:11px; background:#ffffff; border:1px solid #6699cc;}
#content input.radio{ margin-left:0; margin-right:0; margin-top:-4px; padding:0; vertical-align:middle;}
html > body #content input.radio{vertical-align:bottom; margin-top:0;}
#content input.check_box{vertical-align:middle; margin-top:-3px;}
html > body #content input.check_box{margin-top:0px;}
#content select{color:#555555; height:14px; font-size:11px; background:#ffffff; border:1px solid #6699cc;}
html > body #content select{height:19px;}
#content .example{font-size:9px;}
#content textarea{color:#555555; font-size:11px; background:#ffffff; border:1px solid #6699cc;}
/************ 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 ****/