/******************************************************************************
Filename:  site.css
Project:   New Jersey Resources
Purpose:   Site CSS:  Contains styles only used on current site
Date            Developer   Description
10/05/2006      jmk         Version 1.0
******************************************************************************/

/**** HOME PAGE ONLY STYLES (where home is different than interior) ****/
#pageBodyHomeContainer {
    margin-top:165px;
    width:100%;
    voice-family:"\"}\"";
    voice-family:inherit;
    margin-left:1px;
}
html > body #pageBodyHomeContainer {
    margin-left:0px;
    background:transparent url("../images/global/body_bg.gif");
}
#homeContentContainer {
    width:980px;
    background: transparent url("../images/global/home/homeContentContainer_bg.gif") 0 0 repeat-y;
    margin:0 0 0 0;
}
#homeContent {
    background: transparent;
    width:974px;
    margin:0 0 0 0;
}
#homeMainImageArea {    
    width:675px;
    height:310px;
    border:1px solid #CDCDCD;
    padding:2px 3px 2px 2px;
    margin:0px 0px 10px 25px;
}
#homeMainImage {
    margin:0 0 0 0;
    border:none;
}
#homeImageAreaBottom {
    background: url("../images/global/home/homeImageAreaBottom_bg.gif") 0 100% no-repeat;
    width:735px;
    padding: 0 0 16px 0;
}
#homeImageAreaBottom h2 {
    margin: 0 0 0 15px;
    color:#124C7E;
    font-family: Helvetica, Verdana, Arial, _san;
    font-size:18px;
    line-height:22px;
    letter-spacing: auto;
}
html > body #homeImageAreaBottom h2 {
    margin: 0 0 0 15px;
}
#homeContentContainerBottom {
    clear:both;
}
.social-media-home {
    margin-top: 0px;
    position: relative;
    bottom: 3px;
    float:right;
    width: 80px;
}
.social-media-home img {
    margin-right: 5px;
}
/************ BEGIN:  HOMEPAGE RIGHTNAV STYLES  ************/
#newsReportsContainer {
    width:235px;
    float:right;
    font-size:10px;
}
#newsContent {
    width:200px;
    margin:0 auto 10px 24px;
    padding:10px 0 20px 0;
}
#newsContent p {
    font-size:10px;
}
#newsContent .readMore {
    width:200px;
    text-align:right;
}
#newsContent .readMore a {
    margin: 0 10px 0 auto;
    text-decoration:none;
}
#newsReportsContainer h3 {
    width:125px;
    margin: 6px 10px 0px 10px;
    color:#7895A0;
    font-family: Helvetica, Verdana, Arial, _san;
    font-size:14px;
    font-weight:bold;
}
html > body #newsReportsContainer h3 {
    margin-bottom:6px;
}
.newsReportsDivide {
    width:235px;
    height: 4px;
    margin: 0 0 0 0;
}
.newsDivide {
    height: 4px;
    margin: 10px 0 10px 0;
}
#pollsContainer {
    width:235px;
    float:right;
    margin:10px 0 6px 0;
    clear:right;
    text-align:center;
}
#pollsContainer img {
    position:relative;
    margin: 10px auto 0 auto;
}
/************ END:  HOMEPAGE RIGHTNAV STYLES  ************/

/**** BEGIN:  Impact Image Slideshow ****/
    .pagination {
    width: 675px;
    text-align:right;
    font-weight:bolder;
    z-index:99;
    position:absolute;
    bottom:2px;
    margin-top:-30px;
    margin-left:-10px;
    letter-spacing:4px;
    margin-bottom:0px;
    padding-bottom: 10px;
}
.pagination a {
    font-size:11px;
    font-weight:bold;
    background-color:#D3D3D3;
    border:1px solid #777777;
    padding:0px 0px 1px 3px;
    color:#353535;
}
.pagination a:hover, .pagination a.selected {
    font-size:11px;
    font-weight:bold;
    background-color:#0065A4;
    border:1px solid #DDDDDD;
    color:#FFFFFF;
}
.sliderwrapper {
    position: relative; /*leave as is*/
    overflow: hidden; /*leave as is*/
    width: 675px; /*width of featured content slider*/
    height: 314px;
}
.sliderwrapper .contentdiv {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 675px;
    height: 100%;
}
.sliderwrapper .contentdiv .TextOverlay {
    background-color:#333;
    color:#FFFFFF;
    width:654px;
    height:88px;
    opacity:0.8;
    padding:5px 10px 5px 10px;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    position:absolute;
    bottom:4px;
}
.sliderwrapper .contentdiv .TextOverlay .rotatingTitle {
    font-weight:bold;
    font-size:20px;
    padding:0px 0px 5px 0px;
}
.sliderwrapper .contentdiv .TextOverlay .rotatingSummary {
    font-size:12px;
}
.sliderwrapper .contentdiv .TextOverlay .rotatingSummary a {
    text-transform:uppercase;
    font-weight:bold;
    color:#FFF;
}
#impactImageNoScript {
    position: absolute;
    left: 0;
    top: 0;
    width: 675px;
    height: 100%;
}
.sliderwrapper #impactImageNoScript .TextOverlay {
    background-color:#333;
    color:#FFFFFF;
    width:675px;
    height:88px;
    opacity:0.8;
    padding:5px 10px 5px 10px;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    position:absolute;
    bottom:4px;
}
.sliderwrapper #impactImageNoScript .TextOverlay .rotatingTitle {
    font-weight:bold;
    font-size:20px;
    padding:0px 0px 5px 0px;
}
.sliderwrapper #impactImageNoScript .TextOverlay .rotatingSummary {
    font-size:12px;
}
.sliderwrapper #impactImageNoScript .TextOverlay .rotatingSummary a {
    text-transform:uppercase;
    font-weight:bold;
    color:#FFF;
}
/**** END:  Impact Image Slideshow ****/

#homeContentTable {
    background:#ffffff url("../images/global/home/homeContentTable-right.gif") 0 -5px repeat-y;
    margin:10px 0 0 0;
    padding:0 0 0 25px;
    font-size:10px;
    color:#666666;
}
#homeContentTable h4 {
    margin:10px 0 5px 0;
    color:#7895A0;
    font-size:10px;
    font-weight:bold;
    text-transform:uppercase;
}
#homeContentTable h4 a {
    text-decoration:none;
}
#homeContentTable td {
    vertical-align:top;
}
.bannerAd {
    position:relative;
    margin: 0 auto 0 auto;
    width:120px;
}
#homeContentTable td p {
    text-align:left;
    width:130px;
}
/**** article listings ****/
.newsArticle {
    margin:0 0 15px 0;
}
#content .newsArticle h4 {
    display:inline;
    margin:0 12px 0 0;
    font-size:11px;
    font-weight:bold;
    color:#003F5E;
}
#content .newsArticle h4 a {
    color:#516F87;
}
#content .newsArticle h4 a:hover {
    color:#83A2B2;
}
#content .newsArticle .text {
    font-size:10px;
    color:#666666;
    margin:5px 0 10px 0;
}
#content .newsArticle h5.alsoSee {
    font-weight:normal;
    margin:0 0 0 0;
}
#content .newsArticle p.alsoSee {
    margin:0 auto 35px 0;
}
a.viewPDF {
    margin: 0 10px 0 auto;
    text-decoration:none;
    color:#338935;
    font-weight:bold;
}
a.viewPDF:hover {
    color:#124c7e;
}
/**** videos ****/
.video {
    margin: 5px 0px;
    padding: 0;
}
.video .title {
    font-weight: bold;
}
.video .length {
    font-size: 90%;
    color: #222222;
    display: inline;
}
.video .description {
    font-size: 85%;
}
/**** articles ****/
#content h3.articleHeading {
    font-size:13px;
    color:#516F87;
    margin:0 0 0 0;
}
#content h1.articleHeading {
    color:#516F87;
    margin:0 0 5px 0;
    font-size:11px;
}
span.date {
    color:#666666;
    font-size:10px;
}
.articleImageAreaLeft {
    float:left;
    width:150px;
    margin: 0 20px 15px 0;
}
.articleImageAreaRight {
    float:right;
    width:150px;
    margin: 0 0 15px 20px;
}
.articleImageAreaLeft p, #articleImageAreaRight p {
    font-size:10px;
    width:120px;
    margin:10px 0 15px 0;
}
span.date {
    color:#666666;
}
#faqs p {
    font-size:11px;
}
/**** treeMenu ****/
/*
#treeMenuWrapper{width:530px; padding:0 0 0 0; }
#treeMenu{width:530px;}
#treeMenu span.date{display:block; color:#666666; margin:0 0 10px 0;}
#treeMenu ul{list-style-type:none; padding:0; margin:0;}
li.treeMenuItem{margin: 0 0 10px 0;}
#treeMenu td{padding: 0 15px 0 15px;}
#treeMenu h4.company{display:inline; padding:0; margin:0; text-decoration:underline; font-size:13px;}
html > body #treeMenu h4.company{text-decoration:none;}
#treeMenu .listing h5.articleHeading {color:#516F87; margin:0px 0 5px 0; font-size:10px;}
#treeMenu .listing h5.articleHeading a{color:#516F87; text-decoration:underline;}
h5.articleHeading a:hover{color:#83A2B2; text-decoration:underline;}
*/

/* site map module */
#sitemap {
    margin-left:20px;
}
#sitemap a, #sitemap a:visited, #sitemap a:active {
    text-decoration:none;
}
#sitemap a:hover {
    text-decoration:underline;
}
.sitemapTitle {
    font-size:13px;
    font-weight:bold;
}
.sitemap1 {
    margin-left:20px;
}
.sitemap2 {
    font-size:11px;
    margin-left:20px;
}
/************ BEGIN:  TREE MENU ************/
.treeview ul {
    margin:0;
    padding:0;
    width:500px;
}
/*Style for LI elements in general (excludes an LI that contains sub lists)*/
.treeview li {
    list-style-type:none;
    padding-left:22px;
    margin-bottom:10px;
    color: #999999;
    margin-left:-40px;
}
.treeview li img {
    vertical-align:top;
}
/* Style for LI that contains sub lists (other ULs). */
.treeview li.submenu {
    background:url("../images/global/tree_menu/plus.gif") no-repeat 0 5px;
    cursor: hand !important;
    cursor: pointer !important;
}
/*Style for ULs that are children of LIs (submenu) *//*Hide them by default. Don't delete. */
.treeview li.submenu ul {
    display:none;
}
/*Style for LIs of ULs that are children of LIs (submenu) */
.treeview .submenu ul li {
    margin-left:-22px;
    margin-top:-6px;
    cursor:default;
}
#faqs h5 {
    text-decoration:none;
    font-size:10px;
}
/************ END:  TREE MENU ************/

span.hidden {
    display:none
}
/**social media interior pages**/
.social-media-sub {
    bottom:15px;
    float:left;
    margin-top:15px;
    position:relative;
}
.social-media-sub img {
    margin-right:3px;
}
/**** COMMUNITY ****/
.community .video {
    display: block;
    float:right;
    width: 400px;
    margin: 5px 0px;
    padding: 0;
    clear: right;
}
.community .video .title {
    font-weight: bold;
}
.community .video .length {
    font-size: 90%;
    color: #222222;
    display: inline;
}
.community .video .description {
    font-size: 85%;
}
.community .video img {
    float: left;
    width: 100px;
    margin: 10px 0;
}
.community .main-content {
    float: left;
    width: 275px;
}
