/* subpage-news.css 

    this extends module_news.css
    
    dependencies:
    <link type="text/css" rel="stylesheet" href="/new-design/css/shared.css" media="all" />
    <link type="text/css" rel="stylesheet" href="/new-design/css/module_news.css" media="all" />
    <link type="text/css" rel="stylesheet" href="/new-design/css/subpage-news.css" media="all" />
    
    rules:
    - News should appear at bottom of the page
    - Use "sticky" class if these is an important news item
    - Important news items should stay at the top of the news stack

    example:

    <div class="module_news subpage-news">
        <div class="header">
            <h2><span>Latest</span> News</h2>
        </div>
        <div class="news">
        
            <div class="news-item sticky"><!-- if sticky -->
            <div class="news-item"><!-- if NOT last -->
            <div class="news-item last"><!-- if last -->
                <div class="wrapper">
                    <div class="text">
                        <h3>May 27, 2020</h3>
                        <div class="news-text">
                            <ul>
                                <li><a href="/content/main/wclaws/12NYCRR324_2AsthmaHandWristForearmMTG/">Proposed Amendment of 12 NYCRR 324.2</a>  to add a Hand, Wrist and Forearm Medical Treatment Guideline (<abbr title="Medical Treatment Guideline">MTG</abbr>) and to add a new Asthma MTG. The Hand, Wrist and Forearm MTG contains treatment recommendations for carpal tunnel syndrome, and will, once adopted, replace the current Carpal Tunnel Syndrome MTG.
                                    <ul>
                                        <li><a href="/content/main/hcpp/MedicalTreatmentGuidelines/ProposedHandWristForarmMTG_5-2020.pdf">Proposed Hand, Wrist and Forearm Injuries MTG</a><i class="far fa-file-pdf"></i></li>
                                        <li><a href="/content/main/hcpp/MedicalTreatmentGuidelines/ProposedAsthmaMTG_5-2020.pdf">Proposed Occupational/Work Related Asthma MTG</a><i class="far fa-file-pdf"></i></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        
        <div class="button-wrapper">
            <div class="button">
                <a href="/content/ebiz/eclaims/News.jsp">eClaims News <span class="hidden"></span></a>
            </div>
        </div>
        
    </div>


*/

.basic-page #content .subpage-news .header h2,
.navigator-page #content .np-content .subpage-news .header h2 {
    margin: 0 0 40px 0;
    text-align: center;
    font-family: "Proxima Nova Extra Bold", Arial, sans-serif;
    font-size: 48px;
    color: #000000;
    line-height: 48px;
    border-top: none;
}

.basic-page #content .subpage-news .text h3,
.navigator-page #content .np-content .subpage-news .text h3 {
    margin: 0 0 25px 0;
    padding: 0;
    font-size: 27px;
    line-height: 33px;
    font-family: "Proxima Nova Extra Bold", Arial, sans-serif;
    color: #000000;
}

.basic-page #content .subpage-news .news-item .text .news-text a,
.navigator-page #content .subpage-news .news-item .text .news-text a {}

.basic-page #content .subpage-news .news-item.sticky .text .news-text a,
.navigator-page #content .subpage-news .news-item.sticky .text .news-text a {
    color: #000000;
    font-family: "Proxima Nova Extra Bold", Arial, sans-serif;
    text-decoration: underline;
}

.basic-page #content .subpage-news .news-item .text .news-text a.button,
.navigator-page #content .subpage-news .news-item .text .news-text a.button {
    width: auto;
}

.basic-page #content .subpage-news .news-item .text .news-text a.button:hover,
.navigator-page #content .subpage-news .news-item .text .news-text a.button:hover {
    background-color: #094b51;
}

.basic-page #content .subpage-news .news-item.sticky .text .news-text .fa-file-pdf,
.navigator-page #content .subpage-news .news-item.sticky .text .news-text .fa-file-pdf {
    color: #000000;
}

.subpage-news .news .news-item .wrapper {
    width: 100%;
    padding: 0 20px;
}

.subpage-news .news .news-item .wrapper .text {
    width: 100%;
    padding: 0;
}

.subpage-news {
    font-family: "Proxima Nova Regular", Arial, sans-serif;
    line-height: 22px;
}

.subpage-news .news .news-item .wrapper .button {
    width: 20%;
    padding: 0 0 0 70px;
    display: flex;
    flex-direction: row;
    
    /* fix */
    transition: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    cursor: default;
}

.basic-page #content .subpage-news .news .news-item .wrapper .button:hover,
.navigator-page #content .subpage-news .news .news-item .wrapper .button:hover {
    /* fix */
    background-color: transparent;
}

.basic-page #content .subpage-news .news .news-item .wrapper .button a,
.navigator-page #content .subpage-news .news .news-item .wrapper .button a {
    font-family: "Proxima Nova Bold", Arial, sans-serif;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #007481;
    font-size: 14px;
    line-height: 14px;
    text-decoration: none;
    letter-spacing: 2px;
    padding: 20px 20px;
    align-self: center;
    flex: auto;
    text-align: center;
}

.basic-page #content .subpage-news .news .news-item .wrapper .button a:hover,
.basic-page #content .subpage-news .news .news-item .wrapper .button a:focus,
.navigator-page #content .subpage-news .news .news-item .wrapper .button a:hover,
.navigator-page #content .subpage-news .news .news-item .wrapper .button a:focus {
    background-color: #052F33;
}

.basic-page #content .subpage-news .button-wrapper,
.navigator-page #content .subpage-news .button-wrapper {
    margin-top: 30px;
    width: 100%;
}

.basic-page #content .subpage-news .button-wrapper .button,
.navigator-page #content .subpage-news .button-wrapper .button {
    background-color: transparent;
    margin: 0;
    padding: 0;
}

.basic-page #content .subpage-news .button-wrapper .button a,
.navigator-page #content .subpage-news .button-wrapper .button a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
}


/*@media only screen and (max-width: 1280px) {
    .subpage-news .news .news-item .wrapper .text {
        width: 100%;
        padding: 0;
    }
}*/