﻿/* ======= colors ============ */
/*  Yellowish Gold --  227, 198, 74 or #E3C64A
    Blue Teal -- 45, 121, 143 or #2D798F
    Burnt Orange -- 206, 118, 29 or #CE761D
    Purple -- 38, 21, 117 #261575 --- or ---- 54, 35, 142 #36238E or #692d8f
*/


body, h1, h2, h3, h4, h5 {
    color: inherit;    
}

body {
    font-size: 1.15em;
}

@media (max-width: 899px){
    body {font-size: 1em;}
}

h1 {
    font-size: 160%;
    font-weight: 700;
    color: #2D798F;
}

h2 {font-size: 145%;}

    h2.highlight {
        padding: 0.35rem;
        color: #2D798F;
        border-bottom: 2px solid #CE761D;

        /*background-color: #CE761D;*/
        font-weight: 500;
        text-align: left;
    }

h3 {font-size: 125%;}


h3.highlight {
    color: #2D798F;
    margin: 0.75em 0 0.15em 0;
    padding: 0.2em;
    position: relative;
    top: -0.5em;
    font-weight: 600;
    border-bottom: 2px double #2D798F;
}
h3.highlight2 {
    padding: 0.25rem 0.35rem;
    background-color: #2D798F;
    color: #fff;
    font-weight: 500;
    text-align: left;
}

/* VA Banner override class */

p.va-agency-bar-header ul.iconlist 
a[href^=https://tstvadrs/aps]:not([href*="tstdesigns"]):before,
a[href^=https://tstvadrs/aps]:before,
a[href^=https://stgvadrs/aps]:before,
a[href^=https://www.dars.virginia.gov/aps]:before {
  content: none !important; /*COV Banner consistency without globe*/
}


@media (max-width: 1180px) {
    h3.highlight {        
        font-weight: 700;        
        border-radius: 2px;
    }      
}



.row {
    margin: 0;
    /*padding: 0 15px; customize left right*/
}


.container-fluid {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

.container-fluid2 {
    width: 100%;
    padding-right: 0;
    padding-left: 2%;
    margin-right: auto;
    margin-left: auto;
}
.bigbold {
    font-weight: bold;
    font-size: 1.17em;
}

a { /*padding added will break how columns fit on AdultProtServ.htm*/
    color: #261575;
    text-decoration: underline;
    /*padding: 0 1px;*/
}

    a:visited {
        color: #2d798f;
        text-decoration: none;
    }
/*a[href^="mailto"]:hover:after {
        content: " > " attr(title);
    }
        When the mouse is over an anchor element with an href attribute that starts with 'mailto', insert a ' > ' and then the text of the title attribute at the end of the link text"
    https://css-tricks.com/examples/BetterEmailLinks/
    */

    /*a:hover {
        color: #fff;
        background-color: #261575;
        padding: 3px 5px;
        text-decoration: none;
        border-radius: 4px;
    }*/

    p a:hover, li a:hover {
    color: #fff;
    background-color: #261575;
    /*padding: 1px 3px;*/
    text-decoration: none;
    border-radius: 4px;
}
    /* p a:hover, li a:hover {

    } */
    .nodot a {
        border-bottom: none;
        text-decoration: none;
    }

    /* == removes hover for the Commonwealth Banner === */
 #va-commonBanner.va-commonBanner--light li a:hover{
     background: none;
}
  


a.btnASP {
    background-color: #E3C64A;
    color: #000;
    padding: 3px;
    border-radius: 2px;
    text-decoration: none;
    border: 1px solid #267985;
}


    /* ============== FANCY NAV/Header ================ */

    /* eliminate white space about nav in desktop*/
    #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin-top: -30px;
        /* Negative indent footer by its height */
        /*margin: 0 auto -225px;*/
        /* Pad bottom by footer height */
        /*padding: 0 0 225px;*/
    }
    @media (max-width:992px){
        #wrap {margin-top:0}
    }

    .style2 {
        /*background-color: #EAEAEA;*/
        padding: 5px;
        padding-top: 20px;
        /*margin: 1em 0;*/
        width: 100%;
        border-top: 20px double #E3C64A;
        /*border-bottom: 20px double #E3C64A;*/
    }

    .style3 {
        border-top: 10px solid #CE761D;
        border-bottom: 10px solid #CE761D;
        margin: 10px 0 20px;
        background-color: #f2f2f2;
        padding: 20px 20px 20px 10px;
    }

    .style4 {
        border-top: 5px solid #CE761D;
        /*border-bottom: 5px solid #CE761D;*/
        margin: 10px 0 20px;
        /*background-color: #f2f2f2;*/
        padding: 20px 20px 20px 10px;
    }

    /*  =============== #Call To Action Sections  ============= */
    #call-to-action {
        overflow: auto;
        background-color: #2d7985;
        background-size: cover;
        border-top: 10px double #E3C64A;
        border-bottom: 10px double #E3C64A;
        padding: 30px 0;
        margin: 65px 0;
    }


        #call-to-action .cta-title {
            color: #fff;
            font-size: 28px;
            font-weight: 700;
        }

        #call-to-action .cta-text {
            color: #fff;
        }

        #call-to-action a {
            color: #fff;
            text-decoration: underline;
        }

        /*#call-to-action a:hover {
            color: #FCB82F;
        }*/

        #call-to-action .cta-btn-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }


        #call-to-action .cta-btn {
            font-weight: 600;
            font-size: 16px;
            letter-spacing: 1px;
            display: inline-block;
            padding: 8px 34px;
            border-radius: 25px;
            transition: background 0.5s;
            margin: 10px;
            border: 2px solid #fff;
            background-color: #261575;
            color: #fff;
        }

            #call-to-action .cta-btn:hover {
                background: #fff;
                border: 2px solid #fff;
                color: #2D7985;
                font-weight: 600;
            }

    @media (min-width: 769px) and (max-width: 1199px) {


        #call-to-action .cta-btn {
            font-weight: 400;
            font-size: 14px;
            padding: 5px 25px;
            margin: 8px;
        }
    }

    /* ============== Content boxes on home page and old staff pages ================ */
    .contentBox {
        width: 100%;
        height: 295px;
        margin: 60px 0;
        text-align: center;
        border: 2px solid #2d798f;
    }
/*dup for mq changes on default3*/
.contentBox .v3{ 
    width: 100%;
    height: 205px;
    margin: 60px 0;
    text-align: center;
    border: 2px solid #2d798f;
}

        .contentBox .icon-holder {
            position: relative;
            top: -30px;
            display: inline-block;
            margin-bottom: 20px;
            padding: 10px;
            background: white;
        }

        .contentBox .heading {
            position: relative;
            top: -20px;
        }

        .contentBox .icon-holder > img.icon {
            width: 40px;
        }

        .contentBox .description {
            width: 90%;
            margin: 0 auto;
        }

    @media (max-width: 1199px) {
        .contentBox {
            margin: 30px 0;
            height: 185px;
        }

            .contentBox .heading {
                top: -40px;
            }

            .contentBox .description {
                margin-top: -30px;
            }
    }

    
/* =============== HomePg V3 ==================== */
h2.v3 {
    font-size: 145%; /*duplicated due to mq rules*/
}

.specialTMg {
    margin-top: 8%;
}

@media (max-width: 992px){
    h2.v3 {font-size: 125%;}
    .specialTMg {margin-top: 3%;}
}
@media (max-width: 1199px) {
    .specialTMg {margin-top: 5%;}
}
@media (max-width: 1400px) {
    .specialTMg {
        margin-top: 4%;
    }
}


@media (max-width: 992px){
    h2.v3 {
        font-size: 120%;
        margin-top:3%;}
    
}
/*@media (min-width: 992px) {
    .v3.contentBox {
        height: 250px;
    }

       
}*/


    /* ============ Content boxes  STAFF ============== */
    /*.rstaff {
        height: 525px;
    }*/

    /*.staff .heading {
            position: relative;
            top: -50px;
        }*/

    /*.staff .description {
            width: 80%;
            margin: -30px auto;
        }*/

    /* ============ Contact Us Box - Aux Grants pg ============== */

    .contactBox {
        width: 100%;
        margin: auto;
        padding: 10px 20px;
        border: 4px solid #CE761D;
        background-color: #FFEDA0;
    }

        .contactBox .heading {
            top: 10px;
            text-align: center;
            font-size: 135%;
            color: #2D7985;
        }

        .contactBox .description {
            width: 90%;
            margin: 5px 2px;
        }

    address {
        padding: 5px 30px;
    }

    

    /* ================ Map/Locations ====================== */
    a.map {
        text-decoration: none;
        color: #023F50;
    }

    a:hover.map {
        text-decoration: underline;
    }

    .mheaderbox {
        border-radius: 6px;
        border: 1px solid #ddd;
        margin: 10px;
        padding: 10px;
    }

    .mheader {
        border-radius: 6px;
    }

    .mheaderbox p {
        padding: 8px;
    }

    .green {
        background: rgba(41, 220, 82, .5);
        padding: 5px 10px;
        border: 1px solid #28cf4e;
    }

    .blue {
        background: rgba(107, 240, 248, 0.5);
        padding: 5px 10px;
        border: 1px solid #28d1eb;
    }

    .yellow {
        background: rgba(247, 242, 82, 0.5);
        padding: 5px 10px;
        border: 1px solid #ece74f;
    }

    .pink {
        background: rgba(239,173, 235, 0.5);
        padding: 5px 10px;
        border: 1px solid #e1a3dd;
    }

    .orange {
        background: rgba(246, 169, 34, 0.5);
        padding: 5px 10px;
        border: 1px solid #e69e20;
    }

    #regions_filter.dataTables_filter {
        text-align: right;
    }

th#TitleCell {
       width:25%;
   }
th#NameCell {
    width: 18%;
}
th#RegionCell {
    width: 10%;
}
th#ContactCell {
    width:40%;
}
/* ===== DataTable Search clear icon ===== */
    input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}
    
/* ======= IFrame - Doc Repo pages ============== */
#myframe0{
    border: none;
    width: 100%;
    
}

    /* ============== FOOTER ================ */
    .footer {
        background-color: #2d798f; /*teal*/
        border-top: 10px double #E3C64A; /*gold*/
        color: #fff;
        padding: 30px 1px 5px 1px;
        font-size: 90%;
    }

    @media (max-width: 899px) {
        .footer {
            font-size: 80%;
        }
    }

    .footer hr {
        margin-top: 0px;
        margin-bottom: 10px;
        border: 0;
        border-top: 1px solid #ffffff;
        width: 80%;
    }

    .footer a, .footer a:visited {
        color: #fff;
        background: none;
        border: none;
        padding: 1px;
        transition: none;
    }

        .footer a:hover {
            color: #261575;
            text-decoration: none;
            background: #fff;
            padding: 1px;
            border: none;
            transition: none;
            border-radius: 2px;
        }


    h1.footerhead {
        font-size: 1.2em;
        background: none;
        color: #ffffff;
    }

    .footer2 {
        background-color: #fff;
        padding: 2rem 1rem;
        border-bottom: 2px solid #CE761D;
        margin-bottom: 2px;
    }

    .footer3 {
        background-color: #fff;
        color: #2D7985;
        font-weight: 700;
        border-top: 6px solid #CE761D;
    }

    ul.pList {
        margin-bottom: /*10px*/ 0px;
        margin-top: 0;
        line-height: 30px;
    }


    /* Set the fixed height of the footer here */ /*height: 225px;*/
    /*#footer {
       
        background-color: #eeecec;
        margin-top: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #000;
    }

        #footer h3 {
            background-color: rgb(107,201,202);
            padding: 3px;
            color: #000;
            border-bottom: 3px solid RGB(153, 204, 102);
            font-size: 1.5em;
            text-align: center;
        }*/



    .imgleft {
        float: left;
        margin-bottom: 0.5%;
        margin-right: 10px;
    }


    .imgright {
        float: right;
        margin-bottom: 0.5%;
        margin-left: 10px;
    }


    /**********ICON LIST FORMATTING*****************/

    .iconlist {
        list-style-type: none;
        line-height: 20px;
    }


.btn-primary2 {
    color: #FFF !important;
    background-color: rgb(0,76,172) !important;
    border-color: rgb(0,76,172) !important;
}
.btn-primary2:hover {
    color: #000 !important;
    background-color: #E3C64A !important;
    border-color: #E3C64A !important;
}    


.btn-primary {
    color: #000 !important;
    background-color: #E3C64A !important;
    border-color: #E3C64A !important;
}
.btn-primary:hover {
    color: #FFF !important;
    background-color: #2d7985 !important;
    border-color: #E3C64A !important;
}    

/* "Doing Our Part Interactive" line item under "Learn More" for the AdultProtServ.htm Page */
.doing-our-part-interactive {
    margin: -16px 0px 0px 27.5px;
}
.doing-our-part-interactive > a::after {
    display: none !important;
}

/* Doing Our Part Interactive - Alternate Languages" line item under "Learn More" -- These are the styles for new green globe icon, which looks like the previous globe icons; but is geen in color for the AdultProtServ.htm Page. This icon is placed in front of or to the left of this line item */
.alternate-lang-icon-01 {
    position: relative;
    height: .85em;
    width: .85em;
    margin: 0px 5px 4px 5px;
}

/* Syles for the APSreport.htm page. These styles are for the main buttons at the top of the page and for the text not to submit a child protective serives (CPS) report. START */
.no-cps-report-box p {
    color: red;
}
.report-portal-main-btns {
    width: fit-content;
}
/* Syles for the APSreport.htm page. These styles are for the main buttons at the top of the page and for the text not to submit a child protective serives (CPS) report. END */