/*
    City of Vancouver Web Stylesheet (Wide)
    Latest update 20130924
*/

/* wide templates */
.contentWide #contentContainer {
    width: 690px;
}

.contentWide #content {
    padding: 0;
    width: calc(100% - 20px);
}

.contentWide .modContainer {
    padding-right: 0;
}

/* ------------------------------------------- Start block element standard ------------------------------------------- */
/*
.blk-two-third h2.modHeader, .blk-one-third h2.modHeader, .blk-half h2.modHeader, .blk-full h2.modHeader {
    font-size: 1.25em;
}

.blk-two-third .basic-blk-header, .blk-one-third .basic-blk-header, .blk-half .basic-blk-header, .blk-full .basic-blk-header {
    font-size: 1.25em;
}
*/
/* ------------------------------------------- End block element standard ------------------------------------------- */


#content #addThisDiv {
    margin: 0 0 1em 1em;
}

.contentWide .module-one-third-width,
.contentWide .module-one-half-width,
.contentWide .module-one-half-width-right,
.contentWide .module-one-third-width,
.contentWide .module-two-third-width,
.contentWide .module-one-third-width-right,
.contentWide .module-two-third-width-right,
.cov_folding-region .cov_folding_element,
.modContainer .simpleList,
.modContainer .imageList,
.modContainer .smallIconList,
.modContainer .mediumIconList,
.modContainer .basicBox,
.modContainer form {
    box-sizing: border-box;
}

.contentWide .modContainer .basicBox,
.contentWide .modContainer .googleEvents,
.contentWide .modContainer .googleNews,
.contentWide .modContainer .imageList,
.contentWide .modContainer .simpleList,
.contentWide .modContainer .smallIconList,
.contentWide .modContainer .smallList,
.contentWide .modContainer .mediumIconList,
.contentWide .modContainer .unstyledTextBlock {
    width: calc(100% - 20px);
    padding-right: 0;
}

.contentWide .tabDetail .imageList, .contentWide .tabDetail .basicBox,
.contentWide .tabDetail .unstyledTextBlock, .contentWide .tabDetail .mediumIconList,
.contentWide .tabDetail .simpleList, .tabDetail .smallIconList, .tabDetail .youTube, .slidescreenDetail {
    width: calc(100% - 20px);
}

#rCw, div.landing-container {
    width: calc(99% - 20px) !important;
    padding: 20px 0 !important;
    margin: 0 !important;
}

.modContainer .tabSection .tabDetail {
    width: calc(96% - 20px);
}

.contentWide .lastModified, .imgallpadding iframe {
    width: 100%;
}

/* DD 20221104 back to top button */
div + .back-to-top { 
    float: right;
    margin-top: 20px;
}

.back-to-top a.btn-secondary {
    float: right;
    margin-right: 20px;
}

.back-to-top {
    width: 100%;
}

#top-btn > i {
    background: transparent;
}


/* print override */
@media print {
    .contentWide #content,
    .contentWide .modContainer {
        width: 100%;
    }
}

.landingBanner-group img {
    padding: 0;
    width: 100%;
    float: left;
    clear: none;
}

/* Start add extra css for landing banner icons */
.landingBanner-group {
    margin-bottom: 20px;
    float: left;
}

.landingBanner-caption {
    position: absolute;
    left: 0;
    bottom: 5%;
    text-align: right;
}

    .landingBanner-caption span {
        margin: 0px;
        padding: 2%;
        color: white;
        font-size: 1.44em;
        background-color: #015982;
        background: rgba(1, 89, 130);
        background: rgba(1, 89, 130, 0.70);
    }

        .landingBanner-caption span img {
            margin-top: 0;
            margin-bottom: -1.5%;
        }

@media (max-width: 650px) {
    .landingBanner-caption {
        right: 0;
        bottom: 4%;
    }
}

@media (max-width: 599px) {
    .back-to-top a.btn-secondary {
        float: none;
    }
}

@media (max-width: 360px) {
    .landingBanner-caption {
        bottom: 3%;
    }
}

@media (max-width: 980px) {
    .landingBanner-caption span {
        font-size: 1.25em;
    }

        .landingBanner-caption span img {
            width: 6%;
            margin-bottom: -2%;
        }
}

@media screen and (max-width: 980px) and (max-width: 480px) {
    .landingBanner-caption span {
        font-size: 0.88em;
        padding: 2%;
    }

        .landingBanner-caption span img {
            width: 6%;
            margin-bottom: -1.5%;
        }
}
/* End add extra css for landing banner icons */
/* Start add extra css for landing banner caption */
/* remove height to allow more space for extra characters - JC - 14/01/2019 */
.landingBanner-credit {
    /* position: absolute; */
    background: #fff;
    z-index: 90;
    /* height: 18px; */
    overflow: hidden;
    opacity: 0.85;
    padding: 5px 0;
    margin-top: calc(35%);
    /* width: 100%; - JC comment this out to fix bug where caption box extends past image - 14/01/2019 */
    min-height: 1em;
    background-color: #F8F8F8;
    padding-left: 8px;
}

    .landingBanner-credit span {
        float: right;
        margin-right: 10px;
        font-size: 0.88em;
    }
/* remove height to allow more space for extra characters - JC - 14/01/2019 */
@media screen and (max-width: 980px) and (max-width: 480px) {
    .landingBanner-credit {
        /* height: 1em; */
        overflow: hidden;
        opacity: 0.85;
        width: 100%;
    }
        /* change landing banner credit font size, was 10px - JC - 14/01/2019 */
        .landingBanner-credit span {
            font-size: 0.88em;
        }
}
/* End add extra css for landing banner caption */

.contentWide .modContainer h2.modHeader {
    padding: 8px 12px 6px 12px;
    margin: 0;
    border-bottom: #0279B1 3px solid;
    clear: both;
}

.contentWide .info-notice-box {
    border-left: 7px #5DA61B solid;
}

/* jc - 2019-03-19 - comment out to test pull quote box
.contentWide .info-notice-box-left {
    border-right: 7px #5DA61B solid;
    border-left: 0px;
}
*/
.contentWide .top-bottom-bar {
    border-left: 0px !important;
    border-right: 0px !important;
    border-top: 4px #0279B1 solid;
    border-bottom: 4px #0279B1 solid;
}

/*
body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .top-bottom-bar { border-top: 4px #f26234 solid; border-bottom: 4px #f26234 solid;}
body.s5785640C8B3C4775A3C50AC844695609 .contentWide .top-bottom-bar { border-top: 4px #ad8359 solid; border-bottom: 4px #ad8359 solid;}
body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .top-bottom-bar { border-top: 4px #9470b1 solid; border-bottom: 4px #9470b1 solid;}
body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .top-bottom-bar { border-top: 4px #73b749 solid; border-bottom: 4px #73b749 solid;}
body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .top-bottom-bar { border-top: 4px #0d87c9 solid; border-bottom: 4px #0d87c9 solid;}
body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .top-bottom-bar { border-top: 4px #f9b73c solid; border-bottom: 4px #f9b73c solid;}
body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .top-bottom-bar { border-top: 4px #d6422f solid; border-bottom: 4px #d6422f solid;}
body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .top-bottom-bar { border-top: 4px #868886 solid; border-bottom: 4px #868886 solid;}
*/

.contentWide .example-quote {
    border-left: 0px !important;
    border-right: 0px !important;
}

    .contentWide .example-quote:before {
        content: open-quote;
        position: relative;
        top: 15px;
    }

    .contentWide .example-quote:after {
        content: close-quote;
        position: relative;
        top: 15px;
    }

    /*
body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .example-quote:before, body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .example-quote:after {color: #f26234;}
body.s66ED949F063F4F5186AA9B8C51ECF602 .contentWide .example-quote:before, body.s66ED949F063F4F5186AA9B8C51ECF602 .contentWide .example-quote:after {color: #f26234;}
body.s5785640C8B3C4775A3C50AC844695609 .contentWide .example-quote:before, body.s5785640C8B3C4775A3C50AC844695609 .contentWide .example-quote:after {color: #ad8359;}
body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .example-quote:before, body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .example-quote:after {color: #9470b1;}
body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .example-quote:before, body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .example-quote:after {color: #73b749;}
body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .example-quote:before, body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .example-quote:after {color: #0d87c9;}
body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .example-quote:before, body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .example-quote:after {color: #f9b73c;}
body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .example-quote:before, body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .example-quote:after {color: #d6422f;}
body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .example-quote:before, body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .example-quote:after {color: #868886;}
*/

    .contentWide .example-quote:before, .contentWide .example-quote:after {
        color: #0279B1;
    }

.info-notice-box {
    background: #FFF;
    margin: 1.3em 10%;
    padding: .2em 1em;
}

.example-quote {
    float: right!important;
    width: 23%;
    margin: 0 30px 20px 20px;
    min-width: 170px;
}

.info-notice-box-right {
    float: right;
    width: calc(28% - 10px);
    margin: 0;
}

    .info-notice-box-right:first-child {
        margin: 0 0 0 20px;
    }

.info-notice-box-left {
    float: left;
    width: 23%;
    margin: 0 1em 20px 0;
    min-width: 170px;
}


/* Text Box */

/* Added font-size properties as needed to fix font size inconsistencies | JC 2018-08-01 */
.contentWide .module-one-half-width {
    float: left;
    width: calc(49.5% - 20px) !important;
    margin: 0 20px 20px 0;
}

.contentWide .module-one-half-width-right {
    float: right;
    width: calc(46% - 20px) !important;
    margin: 0 25px 20px 20px;
}

.contentWide .module-one-third-width {
    float: left;
    width: calc(33% - 20px) !important;
    margin: 0 20px 20px 0;
}

.contentWide .module-two-third-width {
    float: left;
    width: calc(66% - 20px) !important;
    margin: 0 20px 20px 0;
}

.contentWide .module-one-third-width-right {
    float: right;
    width: calc(30% - 20px) !important;
    margin: 0 25px 20px 20px;
}

.contentWide .module-two-third-width-right {
    float: right;
    width: calc(65% - 20px) !important;
    margin: 0 25px 20px 0;
}

/* Fix font size in pull quote | JC 2018-08-07 */
/*
.contentWide .info-notice-box-right.module-one-half-width.info-notice-box {
    font-size: 1.14em;
}

.contentWide .info-notice-box-left.module-one-half-width.examplequote.info-notice-box {
    font-size: 1.14em;
}

.contentWide .info-notice-box-left.info-notice-box {
    font-size: 1.14em;
}

.info-notice-box {
    font-size: 1.14em;
}

.contentWide .info-notice-box-right.module-two-third-width.info-notice-box {
    font-size: 1.14em;
}
*/
/* Correct font size in unstyled text block | JC 2018-08-07 */
/*
.contentWide .module-one-half-width.unstyledTextBlock {
    font-size: 1em;
}

.contentWide .module-one-half-width-right.unstyledTextBlock {
    font-size: 1em;
}

.contentWide .module-one-third-width.unstyledTextBlock {
    font-size: 1em;
}

.contentWide .module-two-third-width.unstyledTextBlock {
    font-size: 1em;
}

.contentWide .module-one-third-width-right.unstyledTextBlock {
    font-size: 1em;
}

.contentWide .module-two-third-width-right.unstyledTextBlock {
    font-size: 1em;
}
*/
/* 3 col to wide template */
.bottomPanel {
    clear: both;
    padding-top: 10px;
}

    .bottomPanel .basicBox,
    .contentWide .modContainer .bottomPanel .basicBox,
    .contentWide .modContainer .bottomPanel .googleEvents,
    .contentWide .modContainer .bottomPanel .googleNews,
    .contentWide .modContainer .bottomPanel .imageList, .contentWide .modContainer .bottomPanel .simpleList, .contentWide .modContainer .bottomPanel .smallIconList, .contentWide .modContainer .bottomPanel .smallList, .contentWide .modContainer .bottomPanel .mediumIconList, .contentWide .modContainer .bottomPanel .unstyledTextBlock {
        width: calc(33% - 20px);
        float: left;
        margin: 0 20px 20px 0;
    }

@media screen and (max-width: 740px) {
    .bottomPanel .basicBox,
    .contentWide .modContainer .bottomPanel .basicBox,
    .contentWide .modContainer .bottomPanel .googleEvents,
    .contentWide .modContainer .bottomPanel .googleNews,
    .contentWide .modContainer .bottomPanel .imageList, .contentWide .modContainer .bottomPanel .simpleList, .contentWide .modContainer .bottomPanel .smallIconList, .contentWide .modContainer .bottomPanel .smallList, .contentWide .modContainer .bottomPanel .mediumIconList, .contentWide .modContainer .bottomPanel .unstyledTextBlock {
        width: 100% !important;
    }
}

.bottomPanel .bottom3item {
    clear: left;
}

/*  wide modules width to align */
div[class^="alert--"], .notice--green {
    width: calc(91% - 20px);
    margin: 0 0 1em 0;
}

.card-grid {
    width: 97%;
    margin: 1em 0;
}

.basicBox iframe,
.module-one-half-width iframe,
.unstyledTextBlock iframe {
    width: 100%;
}

.module-one-third-width img,
.module-one-third-width-right img,
.module-two-third-width-right img,
.module-two-third-width img,
.basicBox img {
    max-width: 100%;
}

.basicBox form, .searchForm form {
    width: 100%;
}

.searchForm .quinput {
    width: 20em;
}

a.landing-img-link{
    border: 3px solid transparent;
    display: inline-block;
}
a.landing-img-link:focus, a.landing-img-link:active {
    outline: none;
    border-color: #f8c165;
}