/* 2025 New UI */
/* /////////// this is to be used for the new UI for the styling HOME pages /////////// */
body {
    padding: 0;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    font: 1em verdana, arial, tahoma, sans-serif;
}
.SectionHeader {
    font: bold 1em/1.3 'Open Sans', Verdana, Georgia, Helvetica, 'Palatino Linotype', 'Book Antiqua','Lucida Grande', arial, tahoma, verdana, sans-serif;
    color: #0099cc;
    visibility: hidden;
    margin: 1em 0;
}
.section {
    color: #333;
    border-bottom: 1px solid #dddddd;
    padding: 3em;
}
/* Style  content for the line hight  */
.AllContent {
    font: 1em/1.6em verdana, arial, tahoma, sans-serif;
}
.linkList ul.bglist li {
    border: none;
    background: none;
}
.linkList h4 {
    color: #333333;
}
.AllContent h3 {
    background-image: linear-gradient(to top, rgba(0, 64, 138, 0.1), rgba(0, 64, 138, 0.1));
    margin: 0;
    padding: 1em;
}


.linkListCounty ul li a, .linkListCounty a {
    border: none;
    background: none;
    padding: .5em 2em;
}
/*  color:#666666; */
a {
    color: #006e93; /*#0099cc  #00749b */
}
    /*font-weight: bold*/
    a.standardLink, .standardLink, .standardLink a, .grst4 a.standardLink {
        font: 1.3em/1.3 'Open Sans', Verdana, Georgia, Helvetica, 'Palatino Linotype', 'Book Antiqua','Lucida Grande', arial, tahoma, verdana, sans-serif;
        font-weight: normal;
    }
    /*color: #666666;*/
    a:hover {
        color: #0099cc;
    }


.AccentArticle, ul li.AccentArticle {
    /*background-image: linear-gradient(to top, #b61d8d 1%, #f6881f 100%)  ;     */
    background-image: linear-gradient(to top, rgba(0, 64, 138, 0.05 ), rgba(0, 64, 138, 0.01 ) );
}


.SectionSmallHeader {
    font: bold 1em/1.3 'Open Sans',Georgia, Helvetica, 'Palatino Linotype', 'Book Antiqua','Lucida Grande', arial, tahoma, verdana, sans-serif;
    color: #0099cc;
    padding: 3em;
}


/* **************   Bacgrounds Confirmed final styles used in homepages   ********************* */
.GradientBackgroundBlueish {
    background-image: linear-gradient(to top, #ffffff 0%, #F7F7F7 100%);
    padding: 1em;
}
.BlueTransparent {
    background-image: linear-gradient(to top, rgba(0, 64, 138, 0.03) 0 100%);
    padding: 1em;
}
.GradientPurpleBlueTransparent {
    background-image: linear-gradient(to top, rgba(182, 29, 141, 0.1), rgba(0, 64, 138, 0.1) );
    padding: 1em;
}
.GradientBluePurpleOrangeTransparent {
    background-image: linear-gradient(to top, #ffffff 0%, #F7F7F7 100%);
    padding: 1em;
}
.GradientTransparentArchive {
    background-image: linear-gradient(to top, #F7F7F7 0%, #F7F7F7 100%);
    padding: 1em;
}



/*  For the refference    NJT colors   Blue    #00408A rgb(0, 64, 138)    Purple  #b61d8d rgb(182, 29, 141)     Orange  #f6881f rgb(246, 136, 31)        */

/* **************   Headers used in homepages   ********************* */

.SectionHeaderStrongBlueLarge, h4.SectionHeaderStrongBlueLarge, .linkList h4.SectionHeaderStrongBlueLarge, .linkList SectionHeaderStrongBlueLarge {
    font: bold 1.4em/1.5 'Open Sans',Georgia, Helvetica, tahoma, verdana, sans-serif;
    color: #00408A;
    padding: 1em;
}
.SectionHeaderStrongBlue, h4.SectionHeaderStrongBlue, .linkList h4.SectionHeaderStrongBlue, .linkList SectionHeaderStrongBlue {
    font: bold 1.1em/1.2 'Open Sans',Georgia, Helvetica, tahoma, verdana, sans-serif;
    color: #00408A;
}
.SectionHeaderStrongPurple, h4.SectionHeaderStrongPurple, .linkList h4.SectionHeaderStrongPurple, .linkList SectionHeaderStrongPurple {
    font: bold 1.1em/1.2 'Open Sans',Georgia, Helvetica, tahoma, verdana, sans-serif;
    color: #b61d8d;
}
.SectionHeaderMission, h4.SectionHeaderMission {
    font: bold 1.2em/1.5 'Open Sans',Georgia, Helvetica, tahoma, verdana, sans-serif;
    color: #b61d8d;
}
.SectionHeaderMissionDescription, h4.SectionHeaderMissionDescription {
    font: bold 1.1em/1.5 'Open Sans',Georgia, Helvetica, tahoma, verdana, sans-serif;
    color: #b61d8d;
}


/* ***************  start columns for sections Used for home pages to layout consistently for 1, 2, 3,4 columns layout   ********************  */

/*   grst 5 columns   */
ul.grst {
    display: grid;
    padding: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
}
ul.grst {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    color: #333333; /*font-family: Avenir, Heveltica, Arial, san-serif; font-weight: bold;*/
}
    ul.grst li {
        padding: 2em;
        border: 1px solid #eeeeee;
        border-radius: 15px 15px 15px 15px;
        background: #ffffff; /* box-shadow: 5px 5px 12px #f6f9fb; make shadow and blur* ---  for white backgraund */
    }
.grstSectionHeader {
    text-align: center;
    padding-bottom: 2em;
    color: #00408A;
    font: bold 1em/1.3 Georgia, Helvetica, 'Palatino Linotype', 'Book Antiqua','Lucida Grande', arial, tahoma, verdana, sans-serif;
}

/*   grst2  2 columns  */
ul.grst2 {
    display: grid;
    padding: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}
ul.grst2 {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    color: #333333; /*font-family: Avenir, Heveltica, Arial, san-serif; font-weight: bold;*/
}
    ul.grst2 li {
        padding: 2em;
        border: 1px solid #eeeeee;
        border-radius: 15px 15px 15px 15px;
        background: #ffffff; /* box-shadow: 5px 5px 12px #f6f9fb;  make shadow and blur* ---  for white backgraund */
    }


/*   grst3  3 columns used in GrantPrograms and in News  */
ul.grst3 {
    display: grid;
    padding: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
}
ul.grst3 {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    color: #333333; /*font-family: Avenir, Heveltica, Arial, san-serif; font-weight: bold;*/
}
    ul.grst3 li {
        padding: 2em;
        border: 1px solid #eeeeee;
        border-radius: 15px 15px 15px 15px;
        background: #ffffff; /* box-shadow: 5px 5px 12px #f6f9fb;  make shadow and blur* ---  for white backgraund */
    }

/*   grst1   1 columns  used in high level  main nav pages */
ul.grst1 {
    display: grid;
    padding: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}
ul.grst1 {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    color: #333333;
}
    ul.grst1 li {
        padding: 2em;
        border: 1px solid #eeeeee;
        border-radius: 15px 15px 15px 15px;
        background: #ffffff;
    }       
        .grst1SectionHeader, a.grst1SectionHeader, ul.grst1 li a.grst1SectionHeader {
            text-align: center;
            padding-bottom: 2em;
            padding-bottom: 1em;
            color: #00408A;
            font: bold 1.1em/1.2 'Open Sans',Georgia, Helvetica, tahoma, verdana, sans-serif;
        }
.grst1SectionSpecial {
    text-align: justify;
    padding: 1em 2.5em;
    color: #00408A;
    font: italic 1.2em/1.8 'Open Sans',Georgia, Helvetica, tahoma, verdana, sans-serif;
}
ul.grst1 li.transparentBG,
ul.grst2 li.transparentBG {
    background: rgba(0, 64, 138, 0);
    background-image: linear-gradient(to top, rgba(0, 64, 138, 0) 0 100%);
}


/*   grst4 4 columns   */
ul.grst4 {
    display: grid;
    padding: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
}
ul.grst4 {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    color: #333333; /*font-family: Avenir, Heveltica, Arial, san-serif; font-weight: bold;*/
}
    ul.grst4 li {
        padding: 2em;
        border: 1px solid #eeeeee;
        border-radius: 15px 15px 15px 15px;
        background: #ffffff; /* make shadow and blur* ---  for white backgraund */
    }

/*   grst5 5 columns   */
ul.grst5 {
    display: grid;
    padding: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
}
ul.grst5 {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    color: #333333; /*font-family: Avenir, Heveltica, Arial, san-serif; font-weight: bold;*/
}
    ul.grst5 li {
        padding: 2em;
        border: 1px solid #eeeeee;
        border-radius: 15px 15px 15px 15px;
        background: #ffffff;
    }

/* ***************  end columns for sections layout   ***************  */



/* ***************   tab menu NJT colors WHITE  *************** */

.tabMenu, .tabMenuTOP {
    background-image: linear-gradient(to top, #ffffff 0%, #ffffff 100%);
    overflow: hidden;
    border: none;
    background-color: #ffffff;
}

    .tabMenuTOP button, .tabMenuTOP input, .tabMenuTOP input[type=submit], .tabMenuTOP input.tabMenu {
        color: #00408A;
    }

    /* Style the buttons inside the tab */
    .tabMenu button, .tabMenu input, .tabMenu input[type=submit], .tabMenu input.tabMenu,
    input[type=submit] /*-----  1/27/25, input[type=submit] is causing problems on register and login pages for the buttons have to fix it in the main css? --------*/ {
        color: #00408A;
        background-image: linear-gradient(to top, #ffffff 0%, #ffffff 100%);
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 1.5em;
        transition: 0.3s;
        font: bold 1em/1em 'Open Sans', Verdana, Georgia, Helvetica, 'Palatino Linotype', 'Book Antiqua','Lucida Grande', arial, tahoma, verdana, sans-serif;
        border-bottom: none;
    }

    /* IMPORTANT - the following will keep all the buttons from main css in proper format otherwise the .btn from main css is not workin */
        /**** start ************/
        input[type=submit].btn {
            /*background: #fff url(../img/bgmenu-strong.PNG) repeat-x;*/
            background-image: url(../img/bgmenu-strong.PNG) ;
            background-repeat:repeat-x;
            background-color:#fff ;
            border: 1px solid #A5ACB2;
            padding: .2em 0;
            color: #333;
            font-weight: bold;
            margin-right: .2em;
        }
        /****** end ***********/


        .tab {
            background-image: linear-gradient(to top, rgba(0, 64, 138, 0.1), rgba(0, 64, 138, 0.1));
        }
    /* Style the buttons inside the tab */
            .tab button {
                background-color: #eeeeee;
                /*    background-image: linear-gradient( rgba(182, 29, 141, 0.1)  , rgba(0, 64, 138 , 0.2)  );
                      background-image: linear-gradient(  rgba(0, 64, 138 , 0.1) , rgba(0, 64, 138 , 0.1)  ); 

                 */
                float: left;
                outline: none;
                cursor: pointer;
                transition: 0.3s;
                border: none;
                padding: 1em 1.8em;
                font: bold 1em/1em 'Open Sans', Verdana, Georgia, tahoma, verdana, sans-serif;
                color: #00408A;
                border: 1px solid #d3dbea;
                border-inline-end-color: #cccccc;
                border-radius: 1em 1em 0 0;
                border-bottom: none;
            }

        /* Create an active/current tablink class and use the same style for buttons on hover */
            .tab button.active, .tab button:hover {
            background-color: #F7F7F7;
            background-image: linear-gradient(to top, #F7F7F7 0%, #eeeeee 100%);
            color: #0099cc;
        }

/* Style the tab content */
.tabcontent {
    display: none;
    border: none;
    padding: 0;
    width: 100%;
    background-image: linear-gradient(to top, #ffffff 20%, #eeeeee 80%, #F7F7F7 100% );
}

/*  ***************  end tab menu     ***************  */




/*  ***************   use this style for the simple table we display on the home pages   ***************  */
.grdHome {
    background-color: white;
}

table.grdHome tbody tr th, table.grdHome tbody tr td {
    line-height: 1.6em;
    vertical-align: central;
    text-align: left;
    padding-left: 2em;
    background-color: white;
}
/* *************** end style for the simple table we display on the home pages  ***************  */

.removeAllStyle {
    all: unset;
}


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