@import url('https://fonts.googleapis.com/css?family=Open+Sans');

.opensans {
    font-family: "Open Sans", sans-serif;
}

/* || GENERAL STYLES */
body {
    margin: 0;
    padding: 0;
    color: #454545;
    font-size: 0.875rem;
}

h1, h2, h3, h4, h5, h6 {
    color: #2f4a58;
    font-weight: 700;
    text-transform: uppercase;
}

a h6:hover {
    color: #447c7c;
    text-decoration: underline;
}

a, a:visited {
    color: #454545;
    font-size: 0.875rem;
    text-decoration: underline;
}

    a:hover {
        color: #447c7c;
        font-size: 0.875rem;
        text-decoration: underline;
        background-color: #fafafa;
    }

/* ======================================================== */


/* || PAGE Styles */
.search-page {
    padding: 80px 0px 80px 0px;
}

.details-page {
    padding: 40px 0px 80px 0px;
}

.details-page-header {
    padding: 40px 0px 40px 0px;
}

/* ======================================================== */


/* || HEADER Styles */
.header-banner {
    color: #2f4a58;
    text-align: center;
}

.header-image {
    max-width: 50%;
}

h2.header-title {
    font-size: 2.5vw;
    letter-spacing: 5px;
}

h3.header-title {
    font-size: 1.75vw;
    letter-spacing: 3px;
}

h4.header-title {
    font-size: 1.5vw;
    letter-spacing: 3px;
}

h5.header-title {
    font-size: 1.25rem;
    letter-spacing: 1.5px;
}

h6.header-title {
    font-size: 1vw;
    letter-spacing: 0.75px;
}

hr.header-title {
    width: 7rem;
    height: 0.1vw;
    background-color: #d29040;
    margin: 4% auto 1rem auto;
    opacity: 1;
    border: 0;
    border-top: 1px solid #d29040;
}

.header-buttons {
    padding: 30px 20px 20px 20px;
    background-color: #FFF;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ======================================================== */


/* || Disclaimer Styles */
.disclaimer {
    color: #997404;
    background-color: #fff8e1;
    border-color: #fff8e1;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;
}

    .disclaimer p {
        font-size: 0.875rem;
        font-weight: normal;
    }
/* ======================================================== */


/* || TABLE AND GRIDVIEW Styles */
.table-plain {
    border: 0px solid #fafafa;
}

/* ======================================================== */


/* || DETAILS PAGE Styles */
.details-section {
    background-color: #fafafa;
    padding: 1.5em;
    box-shadow: rgba(0,0,0,.16) 0 3px 6px;
}

.details-section-title {
    color: #fff;
    border-radius: 5px;
    font-family: sans-serif;
    text-transform: uppercase;
    background-color: #2f4a58;
    padding: 10px;
    box-shadow: rgba(0,0,0,.16) 0 3px 6px;
}

.details-title {
    font-weight: bold;
    text-transform: uppercase;
}

/* ======================================================== */


/* || Links */
.compare-parcel a {
    background: url(../images/link.png) no-repeat;
    background-size: 15px;
    padding-left: 24px;
    font-weight: bold;
}

    .compare-parcel a:hover {
        background: url('../images/link-hover.png') no-repeat;
        background-size: 15px;
        padding-left: 24px;
        font-weight: bold;
    }

.tax-information a {
    background: url('../images/search-plus.png') no-repeat;
    background-size: 15px;
    padding-left: 24px;
    font-weight: bold;
}

    .tax-information a:hover {
        background: url('../images/search-plus-hover.png') no-repeat;
        background-size: 15px;
        padding-left: 24px;
        font-weight: bold;
    }

.assessor-parcel-viewer a {
    background: url('../images/location.png') no-repeat;
    background-size: 15px;
    padding-left: 24px;
    font-weight: bold;
}

    .assessor-parcel-viewer a:hover {
        background: url('../images/location-hover.png') no-repeat;
        background-size: 15px;
        padding-left: 24px;
        font-weight: bold;
    }

.tax-chart a {
    background: url('../images/pdf-file.png') no-repeat;
    background-size: 15px;
    padding-left: 24px;
    font-weight: bold;
}

    .tax-chart a:hover {
        background: url('../images/pdf-file-hover.png') no-repeat;
        background-size: 15px;
        padding-left: 24px;
        font-weight: bold;
    }

.prop-address a {
    background: url('../images/prop-address.png') no-repeat;
    background-size: 18px;
    padding-left: 24px;
    font-weight: bold;
}

    .prop-address a:hover {
        background: url('../images/prop-address-hover.png') no-repeat;
        background-size: 18px;
        padding-left: 24px;
        font-weight: bold;
    }

.share-parcel a {
    background: url('../images/share.png') no-repeat;
    background-size: 14px;
    padding-left: 24px;
    font-weight: bold;
    background-position: 0 center;
}

    .share-parcel a:hover {
        background: url('../images/share-hover.png') no-repeat;
        background-size: 14px;
        padding-left: 24px;
        font-weight: bold;
        background-position: 0 center;
    }

.print-details a {
    background: url('../images/print.png') no-repeat;
    background-size: 18px;
    padding-left: 24px;
    font-weight: bold;
    background-position: 0 center;
}

    .print-details a:hover {
        background: url('../images/print-hover.png') no-repeat;
        background-size: 18px;
        padding-left: 24px;
        font-weight: bold;
        background-position: 0 center;
    }

.icon-info-sign {
    background: url('../images/info.png') no-repeat;
    background-size: 14px;
    padding-left: 20px;
    margin-right: 5px;
    background-position: top right;
    border: 0px;
}

/* ======================================================== */


/* || MOBILE VIEW Styles */
@media only screen and (max-width: 400px) {
    .search-page {
        padding-top: 30px;
    }

    .details-page {
        padding-top: 30px;
    }

    /* || HEADER Styles */
    .header-image {
        max-width: 60%;
    }

    h2.header-title {
        font-size: 3vw;
        letter-spacing: 3.5px;
    }

    h3.header-title {
        font-size: 2.85vw;
        letter-spacing: 2.85px;
    }

    h4.header-title {
        font-size: 2.75vw;
        letter-spacing: 3px;
    }

    h5.header-title {
        font-size: 1rem;
        letter-spacing: 1.75px;
    }

    h6.header-title {
        font-size: 1.75vw;
        letter-spacing: 0.5px;
    }

    hr.header-title {
        width: 3rem;
        height: 0.1vw;
        background-color: #d29040;
        margin: 4% auto 1rem auto;
        opacity: 1;
        border: 0;
        border-top: 1px solid #d29040;
    }
}
/* ======================================================== */



@media print {
    body {
        margin: 0 !important;
        color: #000 !important;
        background-color: #fff;
        font-size: 8pt;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
    }

    .header-image {
        filter: grayscale(100%);
    }

    hr.header-title {
        display: none;
    }

    .header-buttons {
        display: none;
    }

    .details-header {
        margin-top: 0 !important;
    }

    .header-info {
        display: none;
    }

    .details-section {
        font-size: 8pt;
        padding: 0 !important;
    }

    .details-section-title {
        font-size: 8pt;
        color: #000 !important;
        text-decoration: underline;
        padding: 0 !important;
    }

    .details-title {
        font-size: 8pt;
        padding: 0 !important;
        margin: 0 !important;
    }

    .link-section {
        display: none !important;
    }

    .map-display {
        width: 50%;
        margin: auto;
    }

    .disclaimer {
        margin-top: 0 !important;
        padding-top: 0 !important;
        font-size: 9pt;
        color: #000;
    }

        .disclaimer p {
            font-size: 8pt;
            font-weight: normal;
            color: #000;
        }

    @media (min-width: 768px) {
        .col-sm-6 {
            width: 50%;
        }
    }
}

