/********Sharepoint's core15.css overrides***************/ #pageLayout .ms-SPZone .s4-wpActive .s4-wpTopTable,#pageLayout .ms-SPZone .s4-wpActive .ms-WPSelected{ /* [ReplaceColor(themeColor:"Accent1-Medium")] */ border:1px solid orange; } #pageLayout .ms-SPZone .ms-WPHeaderTd, #pageLayout .ms-SPZone .ms-WPTitle { cursor:move!important } .ms-MenuUIPopupBody.ms-MenuUIPopupScreen { z-index:9999!important /*IE shows the siteactions below the supermenu panel*/ } #pageLayout .ms-MenuUIPopupBody.ms-MenuUIPopupScreen{ z-index:799!important /*list views dropdown*/ } /*************OOB webparts headings and body*****************/ .ms-WPHeader { background-color:transparent; } #pageLayout .ms-WPHeader td, #pageLayout .ms-fakewptitle { border-bottom: 1px solid #cacaca ; border-collapse: collapse; } #pageLayout .COB-WebPart h3.webPartTitle{ border-bottom:1px solid #cacaca; } .ms-WPHeaderTd{ font-size:100%; } .ms-standardheader, .ms-WPTitle { padding-bottom:2px; font-family: inherit; font-size: 140%; text-align:left!important/*don't remove this*/; font-weight:600; } h3.ms-WPTitle span{ color:#1b1b1b; padding-right:7px; white-space: normal; } #bodyContent .ms-wpContentDivSpace{margin:0px!important} .ms-wpTdSpace{display:none} .ms-WPBody, .ms-WPBody td{ font-size:100%; font-family:inherit; } .s4-wpActive .s4-wpTopTable, .s4-wpActive .ms-WPSelected { border: none; } .s4-wpTopTable .ms-WPBorder, .s4-wpTopTable .ms-WPBorderBorderOnly, .ms-WPSelected .ms-WPBorder{ border:none; } /****webparts on www*****/ span.scrollbar{ font-style:italic; font-size:95%; color:#555 } /*** MS SP Basic Table Styling Tweaks ***/ table.ms-basictable th.ms-vh2, table.ms-basictable th.ms-vh2 a { font-weight: 600 !important; border: 1px solid #eee; } table.ms-basictable tbody td { border: 1px solid #eee; } .table-responsive.cob-responsive-table { /*display: flex; flex-direction: column;*/ margin-right: auto; padding-right: 20px; overflow-x: scroll; } /* Temporary Bootstrap .col-xs-12 fix */ @media (max-width: 576px) { .row .bodyWebparts.col-xs-12 { flex: 0 0 auto; width: 100%; } } /************************************ default summary list webpart *************************************/ /* Modify 'Default' Headings under Summary Link WP */ .slwpmarker .groupheader.item.medium { font-size: 120%; font-weight: 500; } #pageLayout .link-item, #pageLayout .link-item a { font-family: inherit; color:var(--bs-black); text-decoration: none; display: inline-block; width: calc(100% - 30px); background-image:none; padding-left:0px; } #pageLayout .link-item a:hover{ text-decoration:underline } #pageLayout .item.link-item.bullet:before { display: block; float: left; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 6 Pro"; content: "\f08e"; margin: 3px 8px 0 0; } .groupheader { font-family:inherit; font-weight:normal; margin-bottom:0px; font-size:100%; border-bottom:1px solid var(--bs-gray-300); padding-left: 0; margin-left:0; } .slm-layout-main .item .description{ color:#000; font-size:95%; font-family:inherit; } @media (min-width:768px){ .link-item a:hover{ color:var(--bs-back); text-decoration:underline; } } .slm-layout-main .whitespace { display:none } .slm-layout-main .image-area-top { padding-top:10px; padding-bottom:0px } .ms-summarycustombody td.ms-vb { font-size: 100%; font-family:"Segoe UI",'Open Sans',"Tahoma",sans-serif; } .ms-summarycustombody tr td.ms-vb:first-child { display:none; } .ms-summarycustombody td.ms-vb { background-image: url("/_layouts/images/lstbulet.gif"); background-repeat: no-repeat; background-position: left 3px; padding-left:10px!important; padding-right: 0px; } .slm-layout-main { overflow: visible; } .slm-edit-ecb{ position:relative; } /* Figure - Restoring Bootstrap functionality (temp) */ figure.bs5-figure { display: inherit; } figure.bs5-figure figcaption.figure-caption { font-size: inherit; color: inherit; background-color: inherit; margin-bottom: 15px; } /* Table - Style Tweak for Headings */ table.ms-listviewtable a.ms-headerSortTitleLink, table.ms-listviewtable th { font-weight: 600 !important; font-size: 1.025rem !important; } /* Summary Link - Mobile Adjustments */ @media (max-width: 576px) { ul.dfwp-column.dfwp-list { padding-left: 8px; padding-top: 5px; } ul.dfwp-column.dfwp-list li { padding-bottom: 8px; } } /* Content Query - Summary Link - Mobile Adjustments */ .cbq-layout-main { display: flex; flex-flow: row wrap; } .cbq-layout-main .dfwp-column { flex: 1 0 100% !important; } @media (min-width: 768px) { .cbq-layout-main .dfwp-column { flex: 1 0 25% !important; } } /* lock image width on SLWPs with images */ #firstRow .dfwp-list a .image, #secondRow .dfwp-list a .image, #thirdRow .dfwp-list a .image, #fourthRow .dfwp-list a .image, #bottomRow .dfwp-list a .image { max-width: 25px; } /* SLWP - Overflow Override */ .slm-layout-main.groupmarker { overflow: auto !important; } /* Customized Figure Styling */ figure { border: 15px solid #f0f0f0; width: auto; } figure figcaption { background-color: #f0f0f0; padding-top: 15px; padding-bottom: 0; font-weight: 500; } /*** Full-Width Article Images ***/ .fullWidth-Image { margin-right: -15px; margin-left: -15px; overflow: hidden; max-height: 350px; } .fullWidth-Image img { width: 100%; object-fit: cover; } @media (min-width: 768px) { .fullWidth-Image { margin-left: -6.666667%; margin-right: -6.666667%; } } @media (min-width: 1200px) { .fullWidth-Image { margin-left: -11.666667%; margin-right: -11.666667%; } } @media (min-width: 1400px) { .fullWidth-Image { margin-left: -18.166667%; margin-right: -18.166667%; } } /*** Events Content Search WP Styling ***/ .event { margin-bottom: 20px; } .event .date { padding: 4px; width: 64px; height: 64px; border-radius: 50%; text-align: center; margin: auto; float:left; background-color:var(--bs-gray-200); } .event .dateSmall { padding: 4px; width: 4px; height: 4px; border-radius: 50%; margin-right: 7px; text-align: center; float:left; margin-top:2.55px; } .event .itemdDescription { display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .event .date .day { font-size: 160%; line-height: 1; } .event span { display: block; } .event .itembody-Trim { margin-right: 15px; margin-left: 71px; } .event .itembody-Trim h3 { margin-top:0px; margin-bottom:3px; font-weight: 600; } #EventsList .event .itembody-Trim a { color:#000; text-decoration: none; } #EventsList .event .itembody-Trim a:hover { text-decoration: underline; } .event .time span { display: inline-block; } .event .time { color:#000; font-size:100%; } .event .time span { display: inline-block; font-weight: normal; font-size: 90% } .event .startDate { border-right: 1px solid #777; padding-right: 4px; margin-right: 4px; } .event .endDate { border-right: 1px solid #777; padding-right: 4px; margin-right: 4px; } /************learnMore************/ .learnMore.btn { line-height:26px; padding:0 12px; margin-top:10px; } .learnMore:before { content:"More"; line-height: 22px; text-align:left; } .learnMore:after { content: "\f107"; display:block; font: normal normal normal 22px/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; line-height: 25px; width: 25px; float: right; height: 25px; } .learnMore.expanded:after { content: "\f106"; line-height: 26px; } .learnMore.expanded:before { content:"Less"; line-height: 26px; text-align:left; } /* Project Page - Styling */ #project-page-info-card ul { list-style-type: none; } #project-page-info-card ul li { margin-left: 0; } #project-page-info-card, #project-page-info-card .card { background-color: var(--bs-gray-300); } /******FAQS expand-collapse******/ .cbq-layout-main .dfwp-item:last-child .FAQ{ margin-bottom:40px; } .FAQ .question{ border-bottom: 1px solid rgba(0, 0, 0, 0.125); font-size:115%; padding-bottom: 7px; padding-top:5px; padding-left: 28px; font-weight:normal; } #pageLayout .FAQ .question a{ color: var(--bs-black); text-decoration:none; } .FAQ .question a:before{ color:var(--bs-black); content: "\f078"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; font-style: normal; font-weight: 400; margin-left: -28px; margin-top: 4px; vertical-align: text-top; width: 28px; } .FAQ .question a.collapsed:before{ content: "\f054";} .FAQ .answer{ padding:12px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.125); } .FAQ .answer.collapsed{ display:none } .FAQ .answer a{ text-decoration:underline } /*** FAQs - Content Query/Regular WP ***/ .accordion.FAQ, .accordion.cq-FAQ { --bs-accordion-bg: inherit; } .accordion.FAQ .accordion-item, .accordion.cq-FAQ .accordion-item { border: none; } .accordion.FAQ h3.accordion-header, .accordion.cq-FAQ h3.accordion-header { border-bottom: 1px solid rgba(0, 0, 0, 0.125); margin-bottom: 0px !important; } .accordion.FAQ h3 button.accordion-button, .accordion.cq-FAQ h3 button.accordion-button { font-weight: normal; font-size: 16pt; color: #000; background-color: transparent; box-shadow: none; } #archive-award-listing button.accordion-button.accordion-button:after, .accordion.FAQ h3 button.accordion-button.accordion-button:after, .accordion.cq-FAQ h3 button.accordion-button.accordion-button:after { order: -1; margin-left: 0; margin-right: 1em; background-image: url("data:image/svg+xml,") !important; } .accordion.FAQ h3 button.accordion-button:hover, .accordion.FAQ h3 button.accordion-button:focus, .accordion.cq-FAQ h3 button.accordion-button:hover, .accordion.cq-FAQ h3 button.accordion-button:focus { background-color: #f2f2f2; text-decoration: underline; border-radius: 0; } .accordion.FAQ h4, .accordion.cq-FAQ h4{ font-size:16pt; } .accordion.FAQ .accordion-collapse.show, .accordion.cq-FAQ .accordion-collapse.show { border-bottom: 1px solid rgba(0,0,0,0.125); } /* Tweaks for Bootstrap buttons in FAQs */ .FAQ .answer a.btn { text-decoration: none; } .FAQ .answer a.btn:focus, .FAQ .answer a.btn:hover { text-decoration: underline; } @media print { .FAQ .answer.collapsed{ display:block } .FAQ .question a { padding-left:0px; margin-bottom:0px; font-size:110%; font-weight:bold; } .FAQ .question a .ms-Icon{ display:none } } /* FAQ - Page Links - Mobile Customizations */ @media (max-width: 767px) { .cq-faq-question .accordion-body .col-lg-3 { width: 30% !important; } .cq-faq-question .accordion-body .col-lg-3 img.w-100 { height: 100%; object-fit: cover; } .cq-faq-question .accordion-body .col-lg-9 { width: 69% !important; } } /*** Timeline - Steps Version ***/ .timeline-steps, .timeline-steps .accordion-item { border: none; } .timeline-step-item { padding: 10px; padding-bottom: 0px; } .timeline-step-item .accordion-header { display: inline-flex; align-items: center; justify-content: start; } .timeline-step-item:not(:last-of-type) .accordion-collapse { border-left: 1px solid var(--bs-gray-300); margin-left: 30px; z-index: 1; } .timeline-step-item:last-of-type .accordion-collapse { margin-left: 30px; } .timeline-step-item .accordion-body { padding-top: 0; padding-left: 55px; } .timeline-step-item .accordion-button, .timeline-step-item:first-of-type .accordion-button, .timeline-step-item:last-of-type .accordion-button { background-color: inherit; align-self: center; justify-self: center; margin-left: 10px; box-shadow: none; font-size: 14pt; padding-left: 0; } .timeline-step-item .accordion-button:not(.collapsed) { color: #000; background-color: inherit; box-shadow: none; } .timeline-step-item .accordion-button:hover, .timeline-step-item .accordion-button:focus { text-decoration: underline; outline: none !important; box-shadow: none; } .timeline-step-item .accordion-button:after { background-image: url("data:image/svg+xml,") !important; } .timeline-step-item div.step-value { display: inline-flex; margin-right: 15px; justify-content: center; align-items: center; height: 60px; width: 60px; border-radius: 50%; background-color: var(--bs-gray-300); flex-shrink: 0; z-index: 10; } /* Connecting Lines - Pseudos */ .timeline-step-item:not(:first-of-type):not(:last-of-type):not(.simple-timeline-item) .accordion-button:before { content: ""; display: block; width: 1px; height: 90px; background-color: var(--bs-gray-300); position: absolute; left: -55px; z-index: 1; } .timeline-step-item:not(.simple-timeline-item):first-of-type .accordion-button:before { content: ""; display: block; width: 1px; height: 30px; background-color: var(--bs-gray-300); z-index: 1; position: absolute; left: -55px; bottom: -12px; } .timeline-step-item:not(.simple-timeline-item):last-of-type .accordion-button:before { content: ""; display: block; width: 1px; height: 40px; background-color: var(--bs-gray-300); position: absolute; left: -55px; top: -20px; z-index: 1; } @media (max-width: 575px) { .timeline-step-item:not(.simple-timeline-item):not(:first-of-type):not(:last-of-type) .accordion-button:before { height: 100px; } .timeline-step-item:not(.simple-timeline-item):first-of-type .accordion-button:before { bottom: -8px; } } .timeline-step-item h3 button.accordion-button.accordion-button:after { margin-left: 15px; } .timeline-step-item .timeline-acc-header, .timeline-step-item:first-of-type .timeline-acc-header, .timeline-step-item:last-of-type .timeline-acc-header{ background-color: inherit; align-self: center; justify-self: center; margin-left: 10px; box-shadow: none; font-size: 14pt; font-weight: var(--bs-body-font-weight); position: relative; padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); padding-left: 0; } .timeline-step-item div.step-value > span { font-size: calc(var(--bs-body-font-size) * 1.4); } .timeline-step-item:not(:first-of-type):not(:last-of-type) .timeline-acc-header:before{ content: ""; display: block; width: 1px; height: 90px; background-color: var(--bs-gray-300); position: absolute; left: -55px; z-index: 1; } .timeline-step-item:first-of-type .timeline-acc-header:before{ content: ""; display: block; width: 1px; height: 30px; background-color: var(--bs-gray-300); z-index: 1; position: absolute; left: -55px; bottom: -12px; } .timeline-step-item:last-of-type .timeline-acc-header:before{ content: ""; display: block; width: 1px; height: 40px; background-color: var(--bs-gray-300); position: absolute; left: -55px; top: -20px; z-index: 1; } .simple-timeline-item { position: relative; z-index: 1; } .simple-timeline-item:not(:first-of-type):not(:last-of-type) { padding-top: 10px; padding-bottom: 10px; } .timeline-steps .timeline-step-item.simple-timeline-item:first-of-type { padding-top: 0; padding-bottom: 10px; } .timeline-steps .timeline-step-item.simple-timeline-item:last-of-type { padding-bottom: 0; padding-top: 10px; } .timeline-steps .simple-timeline-item .step-value span { position: relative; z-index: 4; } .timeline-steps .timeline-step-item.simple-timeline-item:not(:first-of-type):not(:last-of-type) .step-value::after { content: ""; display: block; position: absolute; background-color: var(--bs-gray-300); width: 1px; height: 140px; z-index: 2; } /*** Timeline - BS Accordion ***/ .accordion.timeline { --bs-accordion-bg: inherit; } .timeline .accordion-item.timeline-item { border: none; } .timeline .timeline-item { padding: 10px; padding-bottom: 0px; display: flex; flex-wrap: wrap; } .timeline .timeline-item h3.accordion-header { display: inline-flex; align-items: center; justify-content: start; flex-grow: 1 !important; min-height: 60px; } .timeline .timeline-item .accordion-collapse { border-left: 1px solid var(--bs-gray-300); margin-left: 15px; flex-basis: 100%; z-index: 1; } .timeline .timeline-item:last-of-type .accordion-collapse { border-left: none; } .timeline .timeline-item .accordion-body { padding-top: 0; padding-left: 55px; } .timeline .timeline-item button.accordion-button, .timeline .timeline-item button.accordion-button:first-of-type, .timeline .timeline-item button.accordion-button:last-of-type { align-self: center; justify-self: center; margin-left: 10px; box-shadow: none; font-size: 14pt; padding-left: 12px; padding-right: 60px; background-color: var(--bs-gray-300) !important; border-radius: 2px; } .timeline .timeline-item .accordion-button:not(.collapsed) { color: #000; background-color: inherit; box-shadow: none; } .timeline .timeline-item button.accordion-button:hover, .timeline .timeline-item button.accordion-button:focus { transition: 0.2s ease; text-decoration: underline; box-shadow: 1px 1px 2px var(--bs-gray-400); } .timeline .timeline-item .accordion-button:after { position: absolute; right: 20px; background-image: url("data:image/svg+xml,") !important; } .timeline .timeline-item div.timeline-status { display: inline-flex; margin-right: 15px; justify-content: center; align-items: center; height: 30px; width: 30px; border-radius: 50%; outline: 8px solid var(--bs-gray-300); flex-shrink: 0; z-index: 10; } .timeline .timeline-item .timeline-status.Past { background-color: var(--bs-green); } .timeline .timeline-item .timeline-status.Current { background-color: var(--CoB-blue); } .timeline .timeline-item .timeline-status.Future { background-color: var(--bs-gray-600); } /* Connecting Lines - Pseudos */ .timeline h3.accordion-header div.timeline-status:after { content: ""; display: block; background-color: var(--bs-gray-300); width: 20px; height: 1px; position: relative; left: 30px; z-index: 1; } .timeline .timeline-item:not(:first-of-type):not(:last-of-type) .accordion-button:before { content: ""; display: block; width: 1px; height: 90px; background-color: var(--bs-gray-300); position: absolute; left: -40px; z-index: 1; } .timeline .timeline-item:first-of-type .accordion-button:before { content: ""; display: block; width: 1px; height: 38px; background-color: var(--bs-gray-300); z-index: 1; position: absolute; left: -40px; bottom: -12px; } .timeline .timeline-item:last-of-type .accordion-button:before { content: ""; display: block; width: 1px; height: 40px; background-color: var(--bs-gray-300); position: absolute; left: -40px; top: -20px; z-index: 1; } @media (max-width: 575px) { .timeline .timeline-item:not(:first-of-type):not(:last-of-type) .accordion-button:before { height: 100px; } .timeline .timeline-item:first-of-type .accordion-button:before { bottom: -8px; } } .timeline .timeline-item h3 button.accordion-button.accordion-button:after { margin-left: 15px; } /***********Timeline***********/ .TimeLine.FAQ { margin-left: 15px; } .TimeLine.FAQ .question{ border-left:var(--bs-gray-500) 1px solid; border-bottom:none; position:relative; padding-left: 40px; } .TimeLine.FAQ .question:after{ content:""; display:block; width: 40px; height:1px; background-color:var(--bs-gray-500); position:absolute; left:1px; top:22px; } .TimeLine.FAQ .question > a{ background-color:var(--bs-gray-500); border-radius:100px; padding: 3px 35px 5px 15px; position:relative; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .TimeLine.FAQ .question a:before{ display:none } .TimeLine.FAQ .question:before { content:""; width:18px; height:18px; background-color:var(--bs-green); position:absolute; left: -10px; border-radius:30px; box-shadow: 0 0 0 6px var(--bs-gray-300), 0 0 0 7px var(--bs-gray-500); border:5px solid transparent; top:14px; z-index:1 } .TimeLine.FAQ.Current .question:before{ background-color:var(--CoB-blue); } .TimeLine.FAQ.Future .question:before{ background-color:var(--bs-gray-600); } .TimeLine.FAQ .question a.collapsed:after { content: "\f054"; } .TimeLine.FAQ .question a:after { color: var(--bs-black); content: "\f078"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display:inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; font-style: normal; font-weight: 400; vertical-align: text-top; position: absolute; right: 12px; top: 50%; transform: translate(0px, -50%); } .TimeLine.FAQ .question a.collapsed{ padding: 3px 35px 5px 15px; } .TimeLine.FAQ.Current .question a{ padding: 3px 35px 5px 15px; } .TimeLine.FAQ.Current .question a.collapsed{ padding: 3px 35px 5px 15px; } .TimeLine.FAQ .answer { border-bottom: none; border-left: 1px solid var(--bs-gray-500); padding-left:55px; } .TimeLine.FAQ.Current .answer.collapsed { display: block; } .TimeLine.FAQ.Current .question a:after { color: var(--bs-black); content: "\f054"; } .TimeLine.FAQ.Current .question a.collapsed:after { color: var(--bs-black); content: "\f078"; } /*****content query custom title and description list******/ .groupheader.item.medium{ font-size: 140%; font-weight:600; padding-top: 20px; padding-left: 0; margin-left:0 } .Custom-List-ItemWrapper{ display:block; padding-top: 6px; } .Custom-List-ItemTitle {font-weight: 500;} .Custom-List-ItemTitle a{color:#000;} .Custom-List-ItemWrapper .col-sm-12{padding-left:40px} .Custom-List-ItemWrapper .col-sm-12:before{ font-family: 'Font Awesome 6 Pro'; content: '\f35d'; font-weight: 900; margin: 0 5px 0 -3px; color: #000; position: absolute; top: 2px; left: 20px; } .Custom-List-ItemTitle{display:inline} .Custom-List-ItemDesc{font-size:90%;font-weight:400;color: #595959;display: inline;} /*superannouncement webpart and pages*/ /**listing**/ h4.articleTitle{ font-size:110%; margin-top:0px; margin-bottom:0px } .articleSynopsis{ margin-bottom:15px; } div #divArticleItemStatus{ border-bottom:1px solid #e6e6e6; text-align:right; padding-bottom:2px; padding-top:10px} div #divArticleItemStatus a{ background-image:url('/_layouts/images/edit.gif'); padding-left:19px; background-repeat:no-repeat; background-position:left bottom; text-decoration:none!important} div #divArticleItemStatus a:hover {border-bottom:none!important} #spanArticleStatus {border-right:1px solid #e6e6e6; padding-right:3px; padding-left:2px } #spanApprovalStatus {border-right:1px solid #e6e6e6; padding-right:3px; padding-left:2px } .rollupAttchement { float:left; height:70px!important; width:70px!important; margin-top:5px; margin-right:5px; } /**item detail**/ .articleBody{ margin-top:25px } /***** Input to filter content inside tables (dynamic search) /EN/City-Hall/Pages/Public-Meetings-Notices.aspx ****/ .filter input { color: #717895; font-style:italic; background-image:url("/_layouts/images/bgximg.png"); background-repeat:repeat-x; background-position:0px -511px; border:1px #adb6ce solid; padding:0px 3px 2px 4px; margin-top:5px; } /*Highlighted style for dynamic search*/ .highlighted, .highlight {COLOR: #000!important; background-color:#FFEC62;} /***********************Form Generator Webpart ***********************/ /*****sample for styled and grouped ******/ .cobForm{max-width:700px; background-color:#F3F3F3; padding:4px} .cobFormLabel{width:100%; margin-right:10px; text-align:left} .cobFormCell div, .cobFormLabel, .cobFormInput{float:none} .cobForm > INPUT{display:none!important} .cobFormCell div.cobFormLabelINSTRUCT {float:none; text-align:center} .cobFormLabelINSTRUCT span.cobFormField { font-size:105%; font-style:italic; padding:6px; } .cobFormLabelINSTRUCT span.cobFormField strong{font-weight:normal} span.BodyTextRed { color:#930505; font-size:120%; font-weight:bold } .cobFormCell, .cobFormAttachments td { padding:4px; border-right:1px solid #DBDCE3; border-left:1px solid #DBDCE3 } #calendar div{position:static;} .cobFormHeadNote{padding-left:6px; padding-top:6px} .cobFormInput .ms-input{/*enter date type of input*/ font-size:100%; font-family:inherit; } .cobForm input[type="radio"], .cobForm input[type="checkbox"] { font-size:100%; vertical-align:top; margin:6px 4px 0px 0px; } .cobForm .cobFormInput label{ margin-bottom:0px; font-weight:normal; display:inline; } .cobFormTable, .cobFormAttachments{ background-color:#f8f8f8; border-top: 1px solid #DBDCE3; border-bottom: 1px solid #DBDCE3; border-left:none; border-right:none; width:100%; } /**attachments***/ .cobFormAttachments{margin-top:6px; margin-bottom:6px} .cobFormAttachments input{margin:4px 0px} .cobFormLabel span.cobFormField{ background:transparent;text-transform:none; padding:0px 5px; margin:0px} .cobFormInput .ms-dtinput{ padding-right:3px;} /*captcha and form submit buttons*/ .cobForm2{max-width:700px; background-color:#F3F3F3; text-align:center; padding:4px} .cobForm2 div{text-align:left} .cobForm2 input, .cobForm2 button{margin:8px 0px 10px} .cobForm2 input[type="text"]{float:left;} .cobForm2 .formButtonList {float: right; padding-top: 10px;} a.whyCaptcha {display:block;} .InputForm-Button{border-top:2px solid #fff; clear:both} /****privacy statement*********/ .privacyTitle{ font-size:125%; font-weight:600; } .privacyMessage a{ white-space:nowrap } @media (max-width: 800px){ .InputForm-Button{display:none} .cobFormInput input[type="text"], .cobFormInput textarea, .cobFormInput select, .cobForm .cobFormInput table {width:100%!important} .cobForm2 button{width:100%; margin:0px;} .cobForm2 .formButton{width:100%; margin:0px; padding-top:10px; padding-bottom:8px;} } @media (min-width: 801px){ .cobFormLabel{width:125px; margin-right:10px; text-align:right} .cobFormCell div, .cobFormLabel, .cobFormInput{float:left} } @media (min-width:992px){ .cobFormLabel{width:200px;} .cobFormCell div, .cobFormLabel, .cobFormInput{float:left} } /*use this class (.group) when dividing a form in groups that need headings inserted*/ tr.group td{ background-color:#F3F3F3; border:1px solid #F3F3F3; border-bottom: 1px solid #DBDCE3; border-top: 1px solid #DBDCE3 } tr.group td span{ display:block; margin:8px 6px 4px; padding:2px 8px 3px; text-align:left!important } tr.group td h2{margin:0px;text-align:left; margin-top:10px;} /****error messages****/ .error { color:#930505!important; font-weight:bold!important; font-style:italic; text-align:left!important; } #pageLayout .Error { margin:0px!important; color:#930505!important; font-weight:bold!important; font-style:italic; text-align:left!important; } #linkedDocument a { font-weight:normal!important } /********small search box styles**********/ .contentArea #SRSB { /*background-image:url('/Style%20Library/BramptonImages/Generic/branding/search-Background.png');*/ background-repeat:no-repeat; background-position:left top; height:42px; background-color:#f0f0f0; border-radius: 21px; box-shadow: inset 0 0 5px #D6D6D6; margin:auto; min-width:215px; } .contentArea #SRSB .srch-gosearchimg { display:none } .contentArea #SRSB .ms-sbtable-ex { border-collapse:collapse; border:0px solid transparent; float:none; width:100%; } .contentArea #SRSB .s4-search .srch-gosearchimg { border:none!important; background-image:none; background-color:transparent; height:auto; margin-right:10px; } .contentArea #SRSB .ms-sbgo { background:none; background-color:transparent; width:0px; } .contentArea #SRSB .cobSearchGo, .contentArea #SRSB .ms-sbgo a{ display:block; width:40px; height:30px; margin-right:5px; background-image:url('/Style%20Library/BramptonImages/Generic/branding/icon-search-blue.png')!important; background-repeat:no-repeat; } .contentArea #SRSB .cobSearchGo{ height:40px; float:right; } .contentArea #SRSB .ms-sbLastcell{ display:none; visibility:collapse; } .contentArea #SRSB input[type='text']{ background-color:transparent; line-height:42px; height:42px; border:none; color:#1b1b1b; margin-left:15px; font-style:italic; appearance: textfield; -webkit-appearance: textfield; box-sizing: content-box; -webkit-box-sizing: content-box; background-image:none; border:none; } .contentArea #SRSB input.ms-sbplain{ float: left; width: 80%!important; background-color: transparent; line-height: 42px; color: #000; border: none; margin-left: 10px; font-style: italic; background-image: none; font-size: 100%; background: none; border: none!important; height: 42px; padding: 0px; } @media(max-width: 399px) { .contentArea #SRSB .s4-search input.ms-sbplain { font-size: 16px; } } /**********custom calendar Grid found on /EN/City-Hall/meetings-agendas and /EN/Business/sbec/seminars-events/*****************/ /**********Meetings and Agendas Calendar Item Details at /en/City-Hall/meetings-agendas/Pages/Meeting-and-Agenda.aspx?ItemID=308*****************/ .MeetingAgendaEvent .eventDetails{ display:block; background-color:#f9fafc; border:1px dotted #a8c2e1; margin-top:15px; padding:20px } .ms-acal-rootdiv { margin-left:0px } .details { min-height:30px } .details h3{ display:block; width: 265px; text-align:right; float:left; margin-right:10px; margin-top:0px; margin-bottom:0px } .details span{ display:block; width:475px; text-align:left; float:left } /**********end of custom calendar Grid found on /EN/City-Hall/meetings-agendas and /EN/Business/sbec/seminars-events/ *****************/ /*****search box*****/ #pageLayout #SearchBox{ height: 49px; margin:auto; margin-top: 0px; float:none; } #pageLayout #SearchBox .ms-srch-sb > .ms-srch-sb-navLink{ display:none } #pageLayout #SearchBox .ms-srch-sb > .ms-srch-sb-navLink { height: 42px; width: 42px; line-height:42px; text-align:center; border:none; text-decoration:none; float:right; outline:0; } #pageLayout #SearchBox .ms-srch-sb-navLink:before { font-family: "FabricMDL2Icons"; content: "\E96E"; color:#fff; line-height: inherit; font-size: 140%; } #pageLayout #SearchBox .ms-srch-sb-navLink-menuOpen:before{ content: "\E96D"; } #pageLayout #SearchBox .ms-qSuggest-container{ box-shadow:none; padding:0px; width:100%; left:1px; line-height:1.25; } #pageLayout #SearchBox .ms-qSuggest-list{ width:100%!important } #pageLayout #SearchBox .ms-qSuggest-listItem, #pageLayout #SearchBox .ms-qSuggest-hListItem{padding:5px 10px 7px 10px;} #pageLayout #SearchBox .ms-srch-sbLarge>input { font-size: 20px; height: 49px; margin: 0; padding: 0px 5px 0px 5px; background-color: transparent; width: calc(100% - 60px); } #pageLayout #SearchBox .ms-srch-sb-searchLink{ width: 60px; height: 49px; text-align:center; color: var(--CoB-blue); font: normal normal normal 42px/1 FontAwesome; text-decoration: none; border: none; } #pageLayout #SearchBox .ms-srch-sb-searchLink:before{ content:"\f002"; font-size: 28px; line-height: 49px; height: 49px; width: 60px; display: block; } #pageLayout #SearchBox .ms-srch-sb-searchLink:hover{ text-decoration:none; } #pageLayout #SearchBox .ms-srch-sb-searchLink img{ display:none; } #pageLayout #SearchBox .ms-srch-sb { width:100%; } #pageLayout #SearchBox .ms-srch-sb-border, #pageLayout #SearchBox .ms-srch-sb-border:hover{ width:100%; margin-top: 0; } #pageLayout #SearchBox .ms-srch-sb-borderFocused{ margin-top: 0px; height: 51px; display: block; line-height: 59px; } #pageLayout #SearchBox .ms-srch-sb>input{ display: block; line-height: 49px; height: 49px; font-style:italic; appearance: textfield; -webkit-appearance: textfield; box-sizing: border-box; -webkit-box-sizing: border-box; font-size: 16px; padding: 0px; margin-left: 0px; padding-left: 10px; padding-right: 40px; width: 100%; } /**********************Custom List Views (Simple, Grouped and Custom Elements)**************************/ .GroupedListView .firstRow th { font-size:89%!important } .GroupedListView td { font-size:89%!important } .CustomListView .firstRow td, .GroupedListView .firstRow td{padding:3px; background-color:#D8DEE7; font-weight:bold; color:#092d62; border-right:2px solid #fff; border-bottom:2px solid transparent; vertical-align:bottom} .GroupedListView .firstRow th{padding:3px; background-color:#D8DEE7; font-weight:bold; color:#092d62; border-right:2px solid #fff; border-bottom:2px solid #fff; vertical-align:bottom} .CustomListView .firstRow td { text-align: center; font-size:110%; } .CustomListView tr td{ border-bottom:1px #D8DEE7 dotted;} .GroupedListView .detailRows td { padding:3px; background-color:#F4F8FB; border-right:2px solid #fff; border-bottom:2px solid #fff} .GroupedListView H2{margin-top:14px; margin-bottom:2px; margin-left:0px} .GroupedListView #Group0 H2 img {display:none} .GroupedListView img {margin-left:0px!important; margin-top:2px } .GroupedListView a span{ color:#1270df!important } .GroupedListView h2 a{color:#092d62!important; font-weight:bold;} .GroupedListView tr#group0 td{padding-top:8px} .GroupedListView tr td{border-right:2px solid #fff} .GroupedListView #group1 td a {font-weight:bold} .GroupedListView tr#group0 td a {font-weight:bold} /**********************End of List Views Custom Elements**************************/ /******youtube embeds*********/ .video-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .video-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; } @media (max-width: 767px) { .video-responsive { margin-bottom: 20px; } } /*********employment workopolis IFRAME************/ body#bodyContent Table { width:100%!important; } .leftcolumntitle { display:none!important } .dataheadline1 { display:none!important } .datatablehead td{ font-size:105%; background-color:#D8DEE7; font-weight:bold; color:#092d62; border-right:1px solid transparent; border-bottom:2px solid transparent; vertical-align:bottom } .datatablehead td a:visited {font-size:110%; color:#092d62!important;} .datatablehead td a {font-size:110%; color:#092d62!important;} .datatablehead td a:visited { text-decoration:underline} .datatablehead td a:hover { text-decoration:underline} .dataoddrow td {border-bottom:1px #D8DEE7 dotted;} .dataevenrow td {border-bottom:1px #D8DEE7 dotted;} .datatablehead img { margin-left:6px; vertical-align:middle } .leftcolumn td { border:none!important; background-color:#F4F8FB; padding:2px 6px 2px 4px;} /***********************ROAD WORKS DETAILS***********************/ .roadWorksDetails { width:100%!important; } #ctl00_m_g_4c252625_2717_4bbf_b631_2037e8d5ab13 table { width:100%!important; } /*********************END OF ROAD WORKS DETAILS********************/ /**************Expand Collapse effect within content (currently used on Building Division Pages)**********/ .MoreInfo{ overflow:hidden; max-height:0px; transition: max-height .2s; } .MoreInfo.expanded{ max-height:1500px; transition: max-height 2s; } a.ShowHide{ background-color: #ececec; border:none; padding: 0; display:block; padding:3px 15px 4px 15px; border-radius: 30px; color: #000; width:140px; font-size:90% } a.ShowHide:hover, a.ShowHide:focus{ background-color: #c8c8c8; text-decoration: none; } a.ShowHide:before{ color: #fff; line-height: 28px; text-align:left; } a.ShowHide:after{ display:block; font: normal normal normal 20px/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; float: right; padding-top:2px } a.ShowHide.slideUp:after{ content: "\f077"; } a.ShowHide.slideDown:after{ content: "\f078"; } /************Annual Reports************/ #AnnualReports .ReportItem{ display:inline-block; text-align:center } #AnnualReports .ReportItem img{ margin:6px 15px 20px 15px; border:none; } /*************Search Quicklinks Drop Down********/ /******currently not in use*******/ #topInquiries { background-color:#b7cce5; margin: 0px; border: #092d62 1px solid; width:170px; color:black; width:187px!important;margin-left:2px; } #topInquiries ul { margin:0px; padding:1px; } #topInquiries li { list-style:none; list-style-type:none; line-height:14px; display:block; } #topInquiries li a{BACKGROUND-POSITION: 2px 8px; padding:2px; PADDING-LEFT: 10px; BACKGROUND-IMAGE: url(/images/bulletBlue.gif); BACKGROUND-REPEAT: no-repeat; text-decoration:none; color:#092d62; font-family:Tahoma; font-size:8pt; font-weight:normal; display:block; } #topInquiries li a:hover { text-decoration:none; background-color:#94b1d3; color:black; } /****webparts on Body Content styles overrides******/ /****http://wwwauthoring.brampton.ca/EN/City-Hall/HaveYourSay/Pages/HaveYourSay.aspx****/ .ms-rte-wpbox{ font-family:"Segoe UI",'Open Sans',Arial,Helvetica,sans-serif; color:#1b1b1b; font-size:100%; /*10px X 1.6 = 16px(default font size in browsers)*//*the html font size is set to 62.5%(10px) on bootstrap.css*/ line-height: 1.428571429; -webkit-text-size-adjust:100%; } /**************News listings**********************/ /************** in the news *************/ .news{ padding-right:0px; padding-left:0px } .news h2{ margin-left:15px; } .news .newsItem{ padding:6px 10px; border-bottom:1px solid #E8E8E8; min-height:60px; clear:both } .news .newsItem:first-child{ margin-top:-8px; } .news .newsItem:hover, .news .newsItem:focus { background-color:#F2F2F2; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#F2F2F2)); background-image:-webkit-linear-gradient(top, #ffffff, #F2F2F2); background-image:-moz-linear-gradient(top, #ffffff, #F2F2F2); background-image:-ms-linear-gradient(top, #ffffff, #F2F2F2); background-image:-o-linear-gradient(top, #ffffff, #F2F2F2); } .news .newsItem .date{ width:52px; height:50px; overflow:hidden; text-align:center; background:#F2F2F2; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; float:left; margin-left:6px; } .news .newsItem:hover .date, .news .newsItem:focus .date{ background:#0056ac; color:#fff; } .news .newsItem .date span{ display:block; height:18px; font-size:14px; } .news .newsItem .date .dayMonth { margin-top:5px; } .news .newsItem a{ color:#1b1b1b!important; text-decoration:none; display:block; margin-left:65px; } .news .newsItem p{ margin:0px; margin-bottom:4px; text-decoration:none; color:#272727; } .news .viewAll{ font-size:90%; background:#F2F2F2; background-image: url('/Style%20Library/BramptonImages/Generic/branding/mobileNav_selected_arrow.gif'); background-repeat: no-repeat; background-position: right center; padding:3px 20px 5px 5px; border-radius:3px; color:#1b1b1b; margin-top:15px; display:inline-block; } @media (min-width: 768px){ .news h2{ margin-left:0px; } .news .newsItem{padding:10px 0px; min-height:69px;} } /* Home Page - News - Variant */ #cob-homepage-news { padding-right: 0px; padding-left: 0px } #cob-homepage-news a { color: #000; text-decoration: none; } #cob-homepage-news h2 { margin-left: 15px; font-family: "Segoe UI Semilight", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif; font-size: 170%; } #cob-homepage-news a h2 { color:#000; border-radius: 60px; padding: 5px 20px 7px; margin-left: -15px; transition: all 0.3s ease; display: block; margin-top: -5px; width: 150px; } #cob-homepage-news a h2:hover, #cob-homepage-news a h2:focus { text-decoration:none; width:165px; } #cob-homepage-news a h2 .fa-chevron-right { color:#cccccc; padding-left:6px; float:right; margin-top:6px; } #cob-homepage-news a h2:hover { background-color:#cccccc; } #cob-homepage-news a h2:hover .fa-chevron-right, #cob-homepage-news a h2:focus .fa-chevron-right { color:#000; } a.newsItemContainer { color: #000; text-decoration: none; display: block; } .newsItem { padding: 10px; border-bottom: 1px solid #E8E8E8; min-height: 80px; display: flex; align-items: start; } .newsItemContainer:first-child { margin-top:-8px; } .newsItemContainer:hover, .newsItemContainer:focus { background-color: #F2F2F2; } .newsItem .date { width: 62px; height: 62px; color: #000; flex-direction: row; text-align: center; background: #F2F2F2; margin-left:6px; margin-right: 6px; } .newsItemContainer:hover .date, .newsItemContainer:focus .date { background: #0056ac; color: #fff; } .newsItem .date time { display: inline-flex; flex-direction: column; } .newsItem .date span { font-size: 14px; width: 60px} .newsItem .date .dayMonth { margin-top:8px; } .newsItem h3 { font-size:100%; margin-left: 0 !important; margin-top: 3px; font-weight:400; } .newsItemContainer:hover h3, .newsItemContainer:focus h3 { text-decoration: underline; } /***************thumbnail listings (Thumbnail Image - Title - Description*****************/ /*****************used on /EN/Arts-Culture-Tourism/arts-walk-of-fame/Pages/Inductees.aspx***********************/ #ThumbnailView .thumbnailItem{ padding: 3px; border: 1px solid transparent; min-height:90px; } #ThumbnailView .thumbnailItem img{ padding:3px; border:1px solid #ddd!important; background-color:#fff; float:left; width:110px; } #ThumbnailView .thumbnailItem:hover img{ background-color:#DDD; } #ThumbnailView .thumbnailItem a h3{ font-size:115%; font-weight:600; margin-left:115px; display:block; margin-top:0px; margin-bottom:0px; } #ThumbnailView .thumbnailItem p{ margin-left:115px; font-size:85%; margin-top:0px; } @media (min-width: 480px){ #ThumbnailView .itemwrapper.col-sm-6{ width:50%; float:left; } #ThumbnailView .thumbnailItem{ padding: 6px; min-height:240px; overflow:hidden; } #ThumbnailView .thumbnailItem img{ float:none; width:100%; padding:8px; } #ThumbnailView .thumbnailItem a h3{ font-size:115%; font-weight:600; display:block; margin-left:0px; } #ThumbnailView .thumbnailItem p{ margin-left:0px; } } @media (min-width: 768px){ #ThumbnailView .thumbnailItem{ min-height:300px; } } @media (min-width: 1200px){ #ThumbnailView .thumbnailItem{ min-height:260px; } } /************twitter feeds*************/ /************(/EN/Business/edo/Film-In-Brampton/Pages/Welcome.aspx)**********/ .twitterFeed{ margin-left:-15px; margin-right:-15px; padding:20px 15px; background-color:#f2f2f2; border-top:1px solid #D4D4D4; } .twitterFeed h2{ margin-top:0px; display:inline; line-height:36px; } .twitterFeed IFRAME{ width:100%!important; min-height:250px!important; } .twitterFeed a.followTwitterUser { width:245px; background:url('/Style%20Library/BramptonImages/Generic/socialIcons/twitter-bird.png') no-repeat 6px center; font-size:18px!important; font-weight:400; font-style:italic; padding-left:26px; color:#00275A!important; text-decoration:none!important; line-height:36px; } .twitterFeed a.twitter-timeline { visibility:hidden } @media (min-width: 768px) { .twitterFeed{ background-color:transparent; border-top:none; margin:0px; padding:0px; padding-bottom:10px; } } /***********page navigation on bottom of some list views****************/ /**********EN/residents/recreational-Activities/Pages/recreationsearch.aspx******/ table.pagebar{margin:auto} table.pagebar td{ padding:0; width:48px; } table.pagebar td a{ display:inline-block; border-radius:2px; padding-right:5px; padding-left:5px; background:var(--bs-gray-200); height:40px; line-height:40px; width:40px; text-align:center; text-decoration:none; } table.pagebar td span{ font-style:italic; font-size:90% } table.pagebar td a.aspNetDisabled, table.pagebar td a.aspNetDisabled:focus, table.pagebar td a[disabled="disabled"]{ color:#000!important; background-color: var(--bs-gray-200); font-weight:600 } table.pagebar td a.aspNetDisabled:hover, table.pagebar td a.aspNetDisabled:focus, table.pagebar td a[disabled="disabled"]:hover{ color:#000; background-color: var(--bs-gray-200); text-decoration:none; } table.pagebar td span.navNext, table.pagebar td span.navPrev{ margin-right:10px; width:28px; } table.pagebar td a.navNext, table.pagebar td a.navPrev{ background-repeat: no-repeat; background-position: center center; padding-right:0px; padding-left:28px; line-height: 28px; width:28px; overflow:hidden; background-color: var(--bs-gray-200); font-weight: normal; } table.pagebar td a.navNext{ margin-right:10px; float:right; background-image: url('/Style%20Library/BramptonImages/Generic/branding/right_blue_arrow.png'); } table.pagebar td a.navPrev{ margin-left:10px; float:left; background-image: url('/Style%20Library/BramptonImages/Generic/branding/left_blue_arrow.png'); } table.pagebar td a:hover, table.pagebar td a:focus{ background-color: var(--bs-gray-400); } @media (min-width:480px){ table.pagebar td span, table.pagebar td a{ display:inline-block; border-radius:2px; padding-right:8px; padding-left:8px; } table.pagebar td span.navNext, table.pagebar td span.navPrev{ margin-right:10px; display:inline-block; width:54px; } table.pagebar td a.navNext{ padding-right:20px; padding-left:3px; width:auto; background-position: right center; } table.pagebar td a.navPrev{ padding-left: 20px; padding-right:3px; width:auto; background-position: left center; } } @media print{ table.pagebar { display:none } } /************** STYLES FOR LANDING PAGE BUTTONS **************/ #landingPageButtons .button, #homeButtons .button{ padding:5px 10px; border-bottom:1px solid #fff } #landingPageButtons .button a, #homeButtons .button a { display:block; color:#fff; position:relative; background-repeat:no-repeat; background-position:center center; background-size:80%; width:50px; height:50px; border-radius:50px; } #landingPageButtons .button span, #homeButtons .button span{ display:block; position:absolute; width:100%; min-width:200px; bottom:8px; left:60px; font-weight:400; font-size:110%; line-height:1; } /*****BUTTON colors*****/ #landingPageButtons .button, #homeButtons .button {background-color:#0052a3;} #landingPageButtons .button:hover, #homeButtons .button:hover{background-color:#004488;} #landingPageButtons .button a, #homeButtons .button a{ background-color:#156dc5; } @media (max-width: 479px){ #landingPageButtons .button, #homeButtons .button{ float:none; width:100%; border-right:1px solid #fff} } @media (min-width: 480px){ #landingPageButtons, #homeButtons {margin: 2px 0px 30px 0px;} #landingPageButtons .button span, #homeButtons .button span{ font-size:105%; min-width:200px; } #landingPageButtons .button, #homeButtons .button {border-right:1px solid #fff} } @media (min-width: 640px){ #landingPageButtons .button span, #homeButtons .button span{ min-width:230px; } } @media (min-width: 768px){ #landingPageButtons, #homeButtons {margin:0px; padding-bottom:19px;} #landingPageButtons .button a, #homeButtons .button a{ width:65px; height:65px; } #landingPageButtons .button span, #homeButtons .button span{left:70px; bottom:8px;} } @media (min-width: 992px){ #landingPageButtons .button span, #homeButtons .button span{font-size:95%; min-width:80px;} } @media (min-width: 1200px){ #landingPageButtons .button span, #homeButtons .button span{ min-width:110px; } } /* Project Page - Search Styling */ .project-card-container .card .card-img { overflow: hidden; border-radius: 0; } .project-card-container .card .card-img img { object-fit: cover; width: 100%; } .project-card-container .card .card-img span { box-shadow: 1px 1px rgba(0,0,0,0.25); color: white; font-size: 0.85em; } .project-card-container a.card:hover { box-shadow: 0.5px 0.5px rgb(0 0 0 / 15%); } .project-card-container a.card:focus h3, .project-card-container a.card:hover h3 { text-decoration: underline !important; } /*.project-card-container a.card:focus span { background-color: var(--CoB-Dark-Blue) !important; }*/ .project-card-container .card .card-body { display: flex; flex-direction: column; } .project-card-container .card .card-body h3 { margin-left: 0; } .project-card-container .card .card-body span.btn { margin-top: auto; } @media (max-width: 575px) { .project-card-container .card div.card-img { width: 40%; } .project-card-container .card div.card-img img { height: 100%; object-fit: cover; } .project-card-container .card div.card-body { width: 60%; } .project-card-container .card .card-img span { top: 5%; left: 1.5%; } } @media (min-width: 576px) { .project-card-container .card .card-img span { top: 2.5%; right: 2.5%; } .project-card-container .card .card-img { height: 50%; } .project-card-container .card .card-img img { height: 100%; } .project-card-container .card .card-body { height: 50%; } } @media (min-width: 1100px) { .project-card-container .card .card-img { height: 200px; } .project-card-container .card .card-body { height: auto; } } .project-card-container .card span.Completed { background-color: var(--bs-green); } .project-card-container .card span.Deferred { background-color: var(--bs-black); } .project-card-container .card span.Upcoming { background-color: var(--bs-purple); } .project-card-container .card span.Progress { background-color: var(--bs-blue); } .project-card-container .card span.Hold { background-color: var(--bs-secondary); } /*** Styling for 4x2 grey bg buttons ***/ /*#page-button-grid { max-width: 1100px; margin: 0 auto; }*/ .page-button-item { background-color: #f2f2f2; color: #000 !important; text-decoration: none; border: 5px solid #fff; padding: 15px 0; } .page-button-item-icon { min-width: 60px; } .page-button-item-icon i { font-size: 48px; } .page-button-item span { line-height: 120%; font-weight: 500; } .page-button-item:hover, .page-button-item:focus { background-color: #E8E8E8; } @media (max-width: 575px) { .page-button-item { min-height: 42px; } .page-button-item i { font-size: 32px; } } /* Colour variations for #secondRow usage */ #secondRow .page-button-item { border-color: #E9ECEF; } #secondRow .page-button-item:hover, #secondRow .page-button-item:focus { background-color: #000; color: #fff !important; } /***splash page card tiles****http://wwwauthoring.brampton.ca/EN/residents/By-Law-Enforcement/Pages/Welcome.aspx****/ .splash-card-tiles img { object-fit: cover; } .splash-card-tiles a { text-decoration: none; } .splash-card-tiles a:hover h3, .splash-card-tiles a:focus h3 { text-decoration: underline; } .splash-card-tiles h3 { font-size: 1.2rem; margin-left: 0; } @media (max-width: 575px) { .splash-card-tiles .card { flex-direction: row; min-height: 150px; } .splash-card-tiles .card-img-container { width: 33%; } .splash-card-tiles .card-body { width: 65%; } } @media (min-width: 1200px) { .splash-card-tiles .card-img-container { max-height: 45%; } } /***masonry splash card tiles*****/ #splashCardTiles.splashcard-masonry { margin: 0 0 20px 0; } #splashCardTiles.splashcard-masonry a { text-decoration: none; color: #000; } #splashCardTiles.splashcard-masonry a:hover h3 { text-decoration: underline; } /*** horizontal splash card tiles variant ***/ .splash-card-tiles-horizontal .card { display: flex; flex-flow: row nowrap; text-decoration: none; height: 100%; } .splash-card-tiles-horizontal .card .card-caption, .splash-card-tiles-horizontal .card .details { color: #000; display: inline-block; } .splash-card-tiles-horizontal .card h3.card-caption { font-size: 130%; font-weight: 600; margin-bottom: 5px; margin-left: 0; } .splash-card-tiles-horizontal .card .card-img { flex: 2; display: inline-flex; align-items: stretch; } .splash-card-tiles-horizontal .card-img img { object-fit: cover; height: 100%; } .splash-card-tiles-horizontal .card .card-body { flex: 3; } .splash-card-tiles-horizontal a.card:focus h3.card-caption, .splash-card-tiles-horizontal a.card:hover h3.card-caption { text-decoration: underline; } .splash-card-tiles-horizontal a.card:focus .btn-primary, .splash-card-tiles-horizontal a.card:hover .btn-primary { background-color: var(--CoB-Dark-Blue) !important; } .splash-card-tiles-horizontal .card .card-img { border-radius: 0; overflow: hidden; } .splash-card-tiles-horizontal .card .card-body { display: inline-flex; flex-direction: column; } .splash-card-tiles-horizontal .card-img img { width: 100%; height: auto;} @media (min-width: 768px) { .splash-card-tiles-horizontal .card-body h3.card-caption { font-size: 115%; font-weight: 600; } .splash-card-tiles-horizontal .card .card-body .btn.btn-primary { margin-top: auto; } } /* SplashCard - FontAwesome Icon Variant */ .splash-card-tiles-icons .card { border: 1px solid rgba(0,0,0,0.15); transition: 0.25s ease; } .splash-card-tiles-icons i { font-size: 50px; } .splash-card-tiles-icons h3 { font-size: 135%; padding-top: 5px; } .splash-card-tiles-icons .details { padding-top: 15px; } .splash-card-tiles-icons a.card { text-decoration: none; } .splash-card-tiles-icons a.card:hover, .splash-card-tiles-icons a.card:focus { border: 1px solid rgba(0,0,0,0.35); } .splash-card-tiles-icons a.card:hover h3, .splash-card-tiles-icons a.card:focus h3 { text-decoration: underline; } .splash-card-tiles-icons a.card:hover span.btn, .splash-card-tiles-icons a.card:focus span.btn { background-color: #003C78; } /*constant contact inline form**********/ .ctct-popup-form{ display:none!important /*** hide the pop up signup here ****/ } .ctct-form-embed div.ctct-form-defaults * { box-sizing: border-box; } .ctct-form-embed div.ctct-form-defaults { color: #323232; background-color: #ffffff; border-radius: 5px; padding: 24px; font: 16px "Helvetica Neue", Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; border:1px solid #ccc; min-width:192px; } @media (min-width:768px){ .ctct-form-embed div.ctct-form-defaults { max-width:600px; } } .ctct-form-embed div.ctct-form-defaults .ctct-form-required:before { content: "\2217"; position: absolute; top: -4px; left: -12px; color: #f5463b; } .ctct-form-embed fieldset.ctct-form-lists { border: none; margin: 0 0 12px 0; padding: 14px; } .ctct-form-embed legend.ctct-form-lists-legend, .ctct-popup-form legend.ctct-form-lists-legend { display: block; font-weight: bold; left: -15px; position: relative; text-align: left; font-size: 100%; margin-bottom:0px; width: calc(100% + 30px); } .ctct-form-embed div.ctct-form-listitem { margin-bottom: 6px; display: table; } .ctct-form-embed div.ctct-form-listitem label.ctct-form-checkbox-label, .ctct-form-embed div.ctct-form-listitem input[type="checkbox"].ctct-form-checkbox { display: table-cell; vertical-align: middle; font-weight:normal; } .ctct-form-embed div.ctct-form-listitem input[type="checkbox"].ctct-form-checkbox { margin: 0 8px 4px 0; } .ctct-form-embed button.ctct-form-button { display: block; width: 100%; margin-bottom: 0; text-align: center; cursor: pointer; font-size: 16px; padding: 16px; line-height: 1; background-image: none; color: #ffffff; border: none; box-shadow: none; border-radius: 3px; text-transform: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .ctct-form-embed .ctct-form-button {background-color: #0056ac;border: 1px solid #0056ac;color: #ffffff;} .ctct-form-embed .ctct-form-button:hover {background-color: #003870;border: none;} .ctct-form-embed .ctct-form-button:active {background-color: #003c79;border: none;} .ctct-form-embed .ctct-form-defaults { background-color: #ffffff; } .ctct-form-embed .ctct-form-errorMessage { font-size: 14px; line-height: 1.5; margin-bottom: 6px; color: #f5463b !important; text-align: left; } .ctct-form-embed input.ctct-form-element { width: 100%; height: 46px; padding: 10px 15px; border: 1px solid #b0b6bb; background-color: #ffffff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 3px; font-size: 14px; line-height: 1.5; font-family: "Helvetica Neue", Arial, sans-serif; color: #323232; display: inline-block; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .ctct-form-embed label.ctct-form-label { display: block; margin-bottom: 12px; line-height: 1; font-weight: bold; text-align: left; position:relative; } .ctct-form-embed div.ctct-form-field { margin: 0 0 24px 0; text-align: left; } #success_message_0 ~ *{ display:none } #success_message_0[style*="display:none"] ~ *{ display:block } .ctct-form-lists-legend span{ font-weight:normal } .ctct-popup-content div.ctct-form-popup form.ctct-form-custom fieldset.ctct-form-lists legend.ctct-form-lists-legend { line-height: inherit; } /***********Event Speakers***********/ /*/EN/City-Hall/anti-black-racism-unit/Pages/Event-Speakers.aspx*******/ #EventSpeakerItem img{ border-radius:100px; width:80px; } .EventSpeakerItem{ margin-bottom: 10px; background-color: #f6f6f6; padding-top: 15px; padding-bottom: 15px; } .EventSpeakerItem .col-sm-2{ max-width:130px; } .EventSpeakerItem p span{ font-size:100%!important } .EventSpeakerItem img{ border-radius:300px} .EventSpeakerItem .eventsList{ margin-left: -18px; margin-bottom: 6px; } .EventSpeakerItem .event{ list-style-type: square; } .EventSpeakerItem .speakerName{ margin:0px } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { #splashTiles.horizontal .card-columns {column-count: 3;} } /***************************************** Featured Section (OLD) *****************************************/ @media (max-width: 991px) { #featuredSection { margin: 15px 0; } } #featuredSection a.card { text-decoration: none; color: #000; } #featuredSection a.card:hover h3, #featuredSection a.card:focus h3 { text-decoration: underline; } #featuredSection .col-sm-4 { overflow: hidden;} #featuredSection img { width: 100%; height: 100%; object-fit: cover; } #featuredSection .details { padding-bottom: 10px; } #featuredSection span.btn { max-width: 350px; } /***************************************** Featured Section (XSL/CQWP) *****************************************/ a.featured-section-item:hover h3, a.featured-section-item:focus h3 { text-decoration: underline; } .card.featured-section-item .col-sm-4 { overflow: hidden; } .featured-section-item img { width: 100%; height: 100%; object-fit: cover; } .featured-section-item .details { padding-bottom: 10px; } .featured-section-item span.btn { max-width: 350px; } .featured-section-item:nth-child(even) .col-sm-4 { order: 2; } @media (max-width: 575px) { .featured-section-item .col-sm-4 { width: 40%; } .featured-section-item .col-sm-8 { width: 60%; } } @media (max-width: 991px) { .featured-section-item .col-sm-4 { width: 35%; } .featured-section-item .col-sm-8 { width: 65%; } } div.cq-featured-section-item span.btn { display: none; } /**************************************** top business carousel *****************************************/ #topBusiness { padding-top:20px; padding-bottom:40px; } #topBusiness .ms-slide-info{ display:none!important; } #topBusiness .ms-inner-controls-cont{ max-width:100%!important } #topBusiness .ms-skin-default .ms-nav-next:before{ content: "\f054"; font-size:36px; color:#999 } #topBusiness .ms-skin-default .ms-nav-prev:before{ content: "\f053"; font-size:36px; color:#999 } #topBusiness .ms-skin-default .ms-nav-next, #topBusiness .ms-nav-prev{ background-image:none; display: inline-block; font:normal normal normal 14px/1 FontAwesome; } #topBusiness .ms-skin-default .ms-nav-prev { left: 0px; height: 100%; background-color: rgba(255, 255, 255, 0.75); top: 0; line-height: 120px; width: 40px; text-align: center; } #topBusiness .ms-skin-default .ms-nav-next { right: 0px; height: 100%; background-color: rgba(255, 255, 255, 0.75); top: 0; line-height: 120px; width: 40px; text-align: center; } #topBusiness .ms-skin-default .ms-nav-prev{ left:0px } /************************************************************ Featured Content/Quick Links Styling (Roads & Traffic) ************************************************************/ #featuredContent { margin-left: 20px; } #featuredContent .featuredLink { display:block; padding-top:3px; } #featuredContent .featuredLink .glyphicon { display:block; float:left; color:#fff; font-size:73%; padding:4px 5px 5px; border-radius:16px; margin-top:1px; background-color:#FFAC36; margin-left:-3px; position:inherit; } #featuredContent .featuredLink .link { margin-left:28px; display:block; font-size:95%; } /*****masterslider toprow*********/ #TopRow .master-slider{ margin-left:-15px!important; margin-right:-15px!important; } #TopRow .master-slider .ms-view {width:100%!important} /************************************************ ANNOUNCEMENTS ************************************************/ .announcementItem { border: 5px #ffffff solid; transition: background-color 0.3s ease; background-color: #F7F7F7; overflow: hidden; padding: 10px; text-decoration: none; } .announcementItem:only-child { width: 100%; } .announcementMark { float: left; width: 35px; font-size: 250%; font-weight: bold; padding-top: 5px; padding-left: 5px; } .announcementMark i, .announcementMark span { color: #0056AC; font-size: 24px; width: 100%; position: relative; left: -5px; top: -20px; } .announcementText { overflow: hidden; color: #000 } .announcementText h3 { /* text-transform: uppercase; */ font-size: 1.075rem; margin-bottom: 0; padding-bottom: 5px; } .announcementText h3 a { color: #000000 !important; text-decoration: none; } .announcementSynopsis { display: inline-block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; } div.announcementSynopsis * { font-size: 1rem; } a.announcementItem:hover { background-color:#0056ac; color:#ffffff; } a.announcementItem:hover * { color: #ffffff !important; } a.announcementItem:hover h3, a.announcementItem:focus h3 { text-decoration: underline; } @media screen and (min-width: 768px) { #TopRow .announcementItem, #thirdRow .announcementItem, #fourthRow .announcementItem, #bottomRow .announcementItem { min-height: 160px; } } @media screen and (min-width: 999px) { #announcements { margin-left: -6px; margin-right: -6px; } } /* Announcement overrides for #secondRow */ #secondRow #announcements { margin: 0; } #secondRow .announcementItem.col-sm-6 { width: 100% !important; } #secondRow .announcementItem { border: none; margin-bottom: 7px; background-color: #FFF; height: auto; } #secondRow .announcementMark i { color: #000; } #secondRow a.announcementItem:hover, #secondRow a.announcementItem:focus { background-color: #000; } #secondRow a.announcementItem:focus * { color: #fff; } /*************************************************** Home Buttons - 4 Button Layout - Sharepoint list - featured links ****************************************************/ #featuredLinks{background-color: var(--bs-gray-300);} #featuredLinks img{height: 35px;} #featuredLinks a{ text-decoration: none; border-bottom:1px solid var(--bs-white) } #featuredLinks a:hover{background-color:var(--bs-gray-400)} #featuredLinks .linkTitle{font-size: 100%;color:#000} @media(min-width:768px){ #featuredLinks a{text-align:center; border-bottom:none} #featuredLinks .linkTitle{display:block;padding-left:0px;font-size: 110%;position: initial;} #featuredLinks img{height: 60px;} } #featuredLinks a i { font-size: 50px; color: #000; padding-bottom: 10px; } @media (max-width: 768px) { #featuredLinks a i { width: 65px; text-align: center; font-size: 40px; padding-bottom: 0; } } /*************************************************** Home Buttons - 4 Button Layout - Summary links webpart ****************************************************/ /* Overriding Summary Link WP */ #TopRow .slwpmarker { background-color: #F7F7F7; } #TopRow .slm-layout-main { width: auto!important; } #TopRow .slm-layout-main .whitespace { display:none; } #TopRow .dfwp-list .item { transition: background-color 0.3s ease; background-color: #F7F7F7; padding: 20px 10px 10px 10px; } #TopRow .dfwp-list .item:hover { background-color: #EEEDED; } #TopRow .item .image-area-left { float: none; padding-bottom: 5px; } #TopRow .link-item a { text-transform: uppercase; font-weight: 600; font-size: 95%!important; } #TopRow .link-item a:link { color: #000!important; } #TopRow .link-item div.description { font-size: 90%!important; padding-top: 7px; } @media screen and (max-width: 767px) { #TopRow .slwpmarker .dfwp-column { width: 100%!important; } #TopRow .item div.image-area-left { float: left; padding-right: 10px; } #TopRow .item:after { content: ''; clear: both; visibility: hidden; } #TopRow .link-item .description { overflow: hidden; } } @media screen and (min-width: 768px) and (max-width: 991px) { #TopRow .slwpmarker .dfwp-column { width: 50%!important; } #TopRow .item div.image-area-left { float: left; padding-right: 10px; } #TopRow .item:after { content: ''; clear: both; visibility: hidden; } #TopRow .link-item .description { overflow: hidden; } } /*************************************************** Basic Web Part Headings ****************************************************/ /*h2.WP-Heading { text-align: center; font-size: 160%; font-weight: 600; text-transform: uppercase; padding-top:30px; } h2.WP-Heading:after{ content:""; display:block; background-color:#000; width:27%; min-width:140px; height:4px; margin:auto; margin-top:15px; margin-bottom:20px; } */ /**************************************************** event date and time info /****************************************************/ .event-info{ margin-top:20px; margin-bottom:20px; } .event-info .detail{ padding-right:25px; margin-bottom:0px; } .event-info .detail .control-label{ padding-right:5px;display:inline-block!important } .event-info .detail, .event-info .detail .control-info{ display: inline; } /*******download doc*********/ .downloadPDF { margin:30px 0; } .downloadPDF a { text-decoration: none; } .downloadPDF a:hover .download, .downloadPDF a:focus .download { text-decoration: underline; } .downloadPDF .download { background-color: #000; padding: 16px 45px 16px 12px; display: block; color: #fff; font-size: 90%; } .downloadPDF .download::before { content: '\f56d'; font-family: 'Font Awesome 6 Pro'; font-weight: bold; padding-right: 7px; } /* #downloadPDF - requires updated structure */ #downloadPDF a { display: inline-flex; flex-direction: column; text-decoration: none; } #downloadPDF a:hover span, #downloadPDF a:focus span { text-decoration: underline; } #downloadPDF a img { height: 100% !important; background-size: cover; } #downloadPDF a span { background-color: #000; color: #fff; font-size: 90%; padding: 8px; padding-left: 30px; position: relative; } #downloadPDF a span::before { position: absolute; left: 10px; top: 8px; font-family: 'Font Awesome 6 Pro'; font-weight: 900; content: '\f56d'; } /********additional site footer**********/ footer#contactUs h3, footer#contactUs h4, #pageLayout footer#contactUs a:not(.btn) { color:#000; } footer#contactUs ul { margin-bottom: 0px; } footer#contactUs ul a { color: #000 !important; text-decoration: none; } footer#contactUs ul a:hover { text-decoration: underline; } footer#contactUs ul:not(.fa-ul) a:before { font-family: 'Font Awesome 6 Pro'; content: '\f35d'; font-weight: 900; margin:0 5px 0 -3px; color: #000; } footer#contactUs ul li { padding-left: 5px; padding-bottom: 5px; } footer .socialMediaLinks a { text-decoration: none; padding-right: 10px; } footer .socialMediaLinks a i { font-size: 42px; } footer#contactUs hr { display: block; border: 2px solid rgba(0,0,0,0.25); } @media (max-width: 1579px) { footer#contactUs .col-xxl-4:nth-of-type(3) { padding-top: 15px; } } @media (min-width: 1400px) and (max-width: 1579px) { footer#contactUs .col-xxl-4:nth-of-type(1), footer#contactUs .col-xxl-4:nth-of-type(2) { width: 50%; } footer#contactUs .col-xxl-4:nth-of-type(3) { width: 100%; } } footer#contactUs #imageRow img { max-width: 100%; } /**************footer 2040 vision pages***********/ #customFooter.CouncilPriotities{ background-color:#000; color:#fff; background-image:url('/EN/City-Hall/Council-Priorities/PublishingImages/TOCP-2040Vision-small.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center bottom; padding-top: 30px; padding-bottom: 120px; } #customFooter.CouncilPriotities h2{ font-size:140%; color: var(--bs-white) } #customFooter.CouncilPriotities a:not(.btn){color:#fff} #customFooter.CouncilPriotities p{margin-top:20px} #customFooter.CouncilPriotities .linkwrap{ color:#fff; display: inline-block; border:3px solid #fff; font-weight:400; background-color:rgba(0, 0, 0, 0.29); padding:6px 25px 8px 25px; transition: all 0.3s; text-align:center; } #customFooter.CouncilPriotities .linkwrap:hover{ background-color:rgba(0, 0, 0, 0.59); } #customFooter.CouncilPriotities .linkText{ text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.80); } @media(min-width:992px){ #customFooter.CouncilPriotities{ padding-top: 30px; padding-bottom: 100px; } #customFooter.CouncilPriotities{ background-image:url('/EN/City-Hall/Council-Priorities/PublishingImages/TOCP-2040Vision.jpg'); } } /********************************** local infrastructure tiles /EN/City-Hall/Corporate-Asset-Management/Pages/local-Infrastructure.aspx *********************************/ #DataCards .tile { margin-bottom: 25px; } #DataCards .tileContent { display: flex; flex-direction: column; overflow: hidden; position: relative; background-color: #F2F2F2; height: 100%; padding: 20px; } #DataCards .tileTitle { text-align: center; font-size: 120%; flex: 2 1 50px; } #DataCards .icon-container { display: inline-flex; flex: 1 0 150px; align-items: center; justify-content: center; height: 90px; overflow: hidden; } #DataCards .icon-container i { font-size: 75px; } #DataCards .tileContent .tile-description { display: inline-flex; flex: 1 0 120px; justify-content: center; font-size: 110%; } #DataCards.no-description .tileContent .tile-description { display: none; } /*** Simple Two-Column List ***/ @media (min-width: 768px) { ul.simple-two-columns { -webkit-column-count: 2; -webkit-column-gap: 25px; -moz-column-count: 2; -moz-column-gap: 25px; -o-column-count: 2; -o-column-gap: 25px; column-count: 2; column-gap: 25px; } } /*******list group items*********/ #pageLayout .bodyWebparts .list-group-item{padding-left:0;padding-right:0;border-left:none;border-right:none;border-radius: 0;} /************************************************ Default List View simple alternating style table *************************************************/ .ms-viewheadertr { background-color:#eee; } #pageLayout .ms-viewheadertr a:link{ color:var(--bs-black); font-weight:500; text-decoration:none } .ms-alternating, .ms-alternatingstrong{ background-color:var(--bs-gray-200); } .ms-vh, .ms-vh2, .ms-vh-icon, .ms-vh-icon-empty, .ms-vhImage, .ms-gb, .ms-gb2, .ms-gbload, .ms-vb, .ms-vb2, .ms-vb-tall, .ms-vb-user, .ms-vh2-nograd, .ms-vh3-nograd, .ms-vh2-nograd-icon, .ms-vh2-nofilter-icon, .ms-pb, .ms-pb-selected, .ms-ph { font-size: 100%; font-family:"Segoe UI",'Open Sans',"Tahoma",sans-serif; color:#1b1b1b; } #pageLayout .ms-MenuUILabel, #pageLayout .ms-MenuUILabelRtL, #pageLayout .ms-menuuilabelcompact, #pageLayout .ms-menuuilabelcompactRtl { font-size: 100%; font-family:"Segoe UI",'Open Sans',"Tahoma",sans-serif; } .ms-vb a:link, .ms-vb2 a:link, .ms-vb-user a:link { color:#3366CC; text-decoration: none; } .ms-vb a:hover, .ms-vb2 a:hover, .ms-vb-user a:hover { color:#1b1b1b; text-decoration: underline; } #mainContent .s4-wpcell table{ width:100%; border:0; border-collapse:collapse } /******* well/card styles *****/ #contentArea .card { border-radius: 0; } #contentArea .card .card-body { padding-bottom: 25px; } #contentArea .card.text-bg-primary { background-color:var(--CoB-blue)!important; } #contentArea .card.text-bg-primary, #contentArea .card.text-bg-primary *, #contentArea .card.text-bg-dark, #contentArea .card.text-bg-dark * { color:#fff; } #contentArea .card.text-bg-dark a:not(.btn):hover, #contentArea .card.text-bg-primary a:not(.btn) { color:#fff; } #contentArea .card.text-bg-dark .btn, #contentArea .card.text-bg-primary .btn { color:#000; } /*** Migration Feedback - Injection Styling ***/ div.feedbackWrapper { background-color: #002D5F; color: #fff; padding: 20px 20px 10px; } div.feedbackWrapper a { color: #fff !important; font-weight: 600; text-decoration: none; } div.feedbackWrapper a:hover, div.feedbackWrapper a:focus { text-decoration: underline; } /*** PHOTO GALLERY ***/ /* ShortPoint - Photo Gallery - Overrides */ div.mfp-content figure { width: 100%; max-width: 1200px; } div.mfp-content figure figcaption { display: none; } div.mfp-content img.mfp-img { width: 100% !important; } div.mfp-figure::after { display: none !important; } .shortpoint-tile-gallery .shortpoint-tile a.shortpoint-tile-link:hover, .shortpoint-tile-gallery .shortpoint-tile a.shortpoint-tile-link:focus { border: 8px solid #000; } /* Bootstrap Gallery - Styles */ div.image-gallery-grid { margin: auto 0; } .image-gallery-grid-buttons .load-more-images, .image-gallery-grid-buttons .load-less-images { display: none; /* hide on start */ } .image-gallery-grid-buttons .btn { border-radius: 3px; width: calc(100% - 4px); margin-top: 3px; } div#image-gallery { z-index: 1060 !important; } #image-gallery .btn:focus, #image-gallery .btn:active, #image-gallery button:focus, #image-gallery button:active { outline: none !important; box-shadow: none !important; } div#image-gallery div.modal-content { background-color: var(--bs-gray-800); } div#image-gallery div.modal-header { border-bottom: 1px solid var(--bs-gray-600); } div#image-gallery div.modal-footer { border-top: 1px solid var(--bs-gray-600); } div#image-gallery div.modal-footer button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } div#image-gallery h4.modal-title { color: #fff; } #image-gallery-description { display: block; padding: 15px; background-color: #000; color: #fff; font-weight: 500; } @media (min-width: 576px) { #image-gallery-description { position: absolute; bottom: 16px; left: 16px; right: 16px; background-color: rgba(0,0,0,0.6); } } #image-gallery .modal-footer { display: flex; justify-content: center; } #image-gallery .modal-footer button { min-width: 25%; } #image-gallery .modal-footer span, #image-gallery .modal-header span { font-family: 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif; margin: 0 6px; font-weight: 600; } @media (max-width: 575px) { #image-gallery .modal-header span { display: none; } } @media (min-width: 576px) { #image-gallery .modal-header span { display: inline-block; } } @media (min-width: 768px) { #image-gallery .modal-content { overflow: hidden; } } #image-gallery .modal-body { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; } #image-gallery .modal-body img { width: 100%; max-height: 70vh; object-fit: contain; } a.image-gallery-item { display: block; margin: 0; padding: 2px; transition: 0.2s ease; } a.image-gallery-item div { background-color: #000; } a.image-gallery-item img { width: 100%; height: auto; } a.image-gallery-item:focus img, a.image-gallery-item:hover img { filter: opacity(0.75); opacity: 0.75; } /* Skip the Line - button width override */ .bookButton a { max-width: 400px; } /*************************************************************** Card Stack with tabbed menu - Used in by-law enforcement and Roads and Traffic / safety /**************************************************************/ .splash-cards-menu { display: flex; flex: row wrap; align-items: stretch; } .splash-cards-menu ul.nav-tabs { padding-left: 7px; } .splash-cards-menu button.nav-link { border-bottom: none; } .splash-cards-menu button.nav-link.active { background-color: #f2f2f2; } .splash-cards-menu h3 { font-size: 130%; } .splash-cards-menu h3:hover { text-decoration: underline; } .splash-cards-menu a { text-decoration: none; } .splash-cards-menu .col.card-container { display: inline-flex; align-items: stretch; justify-content: stretch;} .splash-cards-menu .col.card-container .card { flex-direction: column; width: 100%; } .splash-cards-menu .col.card-container .card-menu { padding: 10px; } .splash-cards-menu .col.card-container .card-menu i { font-size: 24px; } .splash-cards-menu .col.card-container .card .card-data { background-color: #f2f2f2; padding: 10px 5px 0 10px; min-height: 100px; } .splash-cards-menu .col.card-container .card .card-data ul li { width: calc(99%); /* white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */ } /* .splash-cards-menu .card .card-data ul { list-style-type: none; padding: 0; padding-left: 5px; } */ /* Rounded Items - Dev - Similar to Vendor Listing */ div.rounded-items-list-container .rounded-item-info { padding: 15px; } div.rounded-items-list-container .rounded-item-info h3 { font-size: 120%; font-weight: 600; } div.rounded-items-list-container a.rounded-item, div.rounded-items-list-container a.rounded-item .rounded-item-details { text-decoration: none; color: #000; } div.rounded-items-list-container a.rounded-item:hover h3, div.rounded-items-list-container a.rounded-item:focus h3 { text-decoration: underline; } div.rounded-items-list-container .rounded-item-info .rounded-item-details { font-size: 95% !important; } div.rounded-items-list-container .rounded-item img { max-width: 100%; border-radius: 50%; padding: 5px; } @media (max-width: 575px) { div.rounded-items-list-container .col-sm-3 { float: left !important; width: 20%; } div.rounded-items-list-container .col-sm-9 { float: right !important; width: 75%; } } /* Rounded Items w/ Font Awesome */ .rounded-item-fa { background-color: #f2f2f2; width: 75px; height: 75px; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .rounded-item-fa i, .rounded-item-fa span { font-size: 40px; } /* Button Spacing for footers using #contactPanel */ #contactPanel .btn { width: 100%; max-width: 320px; text-align: left; padding-left: 15px; margin-bottom: 10px; } /*** Featured Tiles - Unified Styles ***/ .featured-tiles .featured-tile-card { text-decoration: none; } .featured-tiles .featured-tile-card .card { border: none; overflow: hidden; position: relative; z-index: 1; width: 100%; } .featured-tiles .featured-tile-card .card *:not(.btn-light) { color: #fff; } .featured-tiles .featured-tile-card .card-title { color: #fff !important; text-shadow: 1px 1px 4px rgba(0,0,0,1); font-weight: 500; line-height: 1.2; font-size: 140%; } .featured-tiles .card-back .card-title { font-size: 130%; padding-bottom: 10px; } .featured-tiles .featured-tile-card .card-text { font-size: 90%; } .featured-tiles .featured-tile-card .card-btn { padding: 4px 15px 6px; font-weight: 600; transition: all 0.2s ease; width: 100%; } .featured-tiles .featured-tile-card .card-img { z-index: 2; overflow: hidden; border-radius: 0; } .featured-tiles .featured-tile-card .card-img img { width: 100%; height: 100%; object-fit: cover; } .featured-tiles .featured-tile-card .card-sides { z-index: 3; padding: 10px; background-color: rgba(0,0,0,0.6); transition: all 0.2s ease; } .featured-tiles .featured-tile-card .card-front, .featured-tiles .featured-tile-card .card-back { display: inline-flex; flex-direction: column; align-items: start; justify-content: center; height: 100%; width: 100%; } .featured-tiles .featured-tile-card .card-title { margin: 0; } .featured-tiles .card-flip .card-front .card-btn { display: none; } .featured-tiles .card-basic .card-btn { margin-top: 10px; } .featured-tiles .card-flip .card-back { padding-right: 20px; } /* Mobile Specific */ @media (max-width: 767px) { .featured-tile-card { width: 100%; } .featured-tiles .card-flip .card-front { display: none; } .featured-tiles .featured-tile-card .card { flex-direction: row; height: 100%; } .featured-tiles .featured-tile-card .card-img { width: 40%; } .featured-tiles .featured-tile-card .card-sides { width: 60% !important; background-color: var(--bs-gray-800); } .featured-tiles .card-flip .card-back { padding-right: 0; justify-content: stretch; height: 100% !important; } .featured-tiles .card-back .btn { margin-top: auto; margin-bottom: 5px; } .featured-tiles .card-basic .btn { margin-top: 10px; } } /* Tablet and Desktop */ @media (min-width: 768px) { .featured-tiles .featured-tile-card .card { width: 100%; padding-top: 100%; } .featured-tiles .featured-tile-card .card-img { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .featured-tiles .featured-tile-card .card-sides { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .featured-tiles .featured-tile-card .card-basic .card-front .card-btn { visibility: hidden; } .featured-tiles .featured-tile-card:hover .card-basic .card-btn, .featured-tiles .featured-tile-card:focus .card-basic .card-btn { visibility: visible; } .featured-tiles .featured-tile-card .card-flip .card-front .card-btn { display: none; } .featured-tiles .featured-tile-card:hover .card-sides, .featured-tiles .featured-tile-card:focus .card-sides { background-color: rgba(0,0,0,0.8); } .featured-tiles .featured-tile-card .card-flip .card-sides > div { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0s; transition-timing-function: ease; width: 100%; height: 100%; margin: 0; display: flex; } .featured-tile-card .card-front { transform: rotateY(0deg); } .featured-tile-card .card-back { transform: rotateY(180deg); position: absolute; top: 0; } .featured-tile-card:hover .card-flip .card-front, .featured-tile-card:focus .card-flip .card-front { transform: rotateY(-180deg); } .featured-tile-card:hover .card-flip .card-back, .featured-tile-card:focus .card-flip .card-back { transform: rotateY(0deg); } } /*** Featured Tiles Alt - Based on Recreation Programs/Activities ***/ .featured-tiles-alt { max-width: 1400px; margin: 0 auto; } .featured-tiles-alt a.featured-tile-alt-card { text-decoration: none; } .featured-tiles-alt a.featured-tile-alt-card:focus { outline: none; } .featured-tiles-alt a.featured-tile-alt-card:focus .card { outline-style: solid; outline-color: #000; } .featured-tiles-alt a.featured-tile-alt-card .card { display: flex; flex-direction: column; border: none; } .featured-tiles-alt .program-image, .featured-tiles-alt .program-title { width: 50%; height: auto; overflow: hidden; } .featured-tiles-alt .program-image img { width: 100%; height: auto; } .featured-tiles-alt .program-title { display: inline-flex; justify-content: center; align-items: center; padding: 10px; } .featured-tiles-alt .program-title span { font-weight: 500; font-size: 105%; text-align: center; } .featured-tiles-alt .featured-tile-alt-card .card-back { display: inline-flex; flex-direction: column; justify-content: center; padding: 10px; } .featured-tiles-alt .featured-tile-alt-card h3.card-title { padding: 0; margin: 0; margin-bottom: 6px; font-size: 130%; font-weight: 700; color: #fff !important; } .featured-tiles-alt .program-title, .featured-tiles-alt .card-text { color: #fff; } .featured-tiles-alt .program-title, .featured-tiles-alt .card-back { background-color: var(--CoB-Darkest-Blue); } @media (max-width: 575px) { .featured-tiles-alt .card { width: 100%; } } @media (max-width: 767px) { .featured-tiles-alt .featured-tile-alt-card { display: flex; } .featured-tiles-alt .featured-tile-alt-card .card .card-back { height: 100%; } .featured-tiles-alt .card .program-title { display: none; } .featured-tiles-alt .card .program-image { width: 100%; } .featured-tiles-alt span.btn { margin-top: auto; } } @media (min-width: 768px) { a.featured-tile-alt-card:nth-of-type(4n+1) .program-image, a.featured-tile-alt-card:nth-of-type(4n+2) .program-image { order: 1; } .featured-tiles-alt .card > div { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0s; transition-timing-function: ease; width: 100%; height: 100%; margin: 0; display: flex; } .featured-tiles-alt .featured-tile-alt-card .card-front { transform: rotateY(0deg); } .featured-tiles-alt .featured-tile-alt-card .card-back { transform: rotateY(180deg); position: absolute; top: 0; } .featured-tiles-alt .featured-tile-alt-card:hover .card .card-front, .featured-tiles-alt .featured-tile-alt-card:focus .card .card-front { transform: rotateY(-180deg); } .featured-tiles-alt .featured-tile-alt-card:hover .card-back, .featured-tiles-alt .featured-tile-alt-card:focus .card-back { transform: rotateY(0deg); } .featured-tiles-alt span.btn { align-self: start; margin: 10px 0; } } /***pagination used in custom search controls (animal adoption) *****/ #pageLayout a.page-link{ border:none; border-radius:6px; margin-right:8px; padding:10px 16px; background-color:var(--bs-gray-200); color:#000; } #pageLayout a.page-link:hover{ background-color:var(--bs-gray-400); color:#000; } #pageLayout .active>.page-link, #pageLayout .page-link.active { color: #fff!important; background-color: var(--CoB-blue); } #pageLayout .active>.page-link:hover, #pageLayout .page-link.active:hover { background-color: var(--CoB-Dark-Blue); } /* Horizontal Tiles w/ Background Image */ /* f.k.a. Connections button */ .horizontal-tile-container .col { min-height: 100px; } .horizontal-tile-container .col a { display: flex; height: 100%; width: 100%; padding-left: 12px; text-decoration: none; align-items: center; justify-content: flex-start; } .horizontal-tile-container .col a:hover, .horizontal-tile-container .col a:focus { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: #fff !important; text-underline-offset: 3px; } .horizontal-tile-container a h3 { color: #fff !important; font-size: 1.1em; font-weight: 500; margin: 0; padding: 0; } /* Content Query - Colour Program Tiles */ div.cq-colour-card-container { --bs-gutter-y: 0.6rem; --bs-gutter-x: 0.6rem; } .cq-program-item { text-decoration: none; display: none; } a.cq-program-item:focus { outline: none; } a.cq-program-item:focus .card { outline-style: solid; outline-color: #000; } .cq-program-item .card { display: flex; flex-direction: column; border: none; width: 100%; overflow: hidden; } .cq-program-item .program-image, .cq-program-item .program-title { width: 50%; height: auto; overflow: hidden; } .cq-program-item .program-image img { width: 100%; height: 100%; object-fit: cover; } .cq-program-item .program-title { display: inline-flex; justify-content: center; align-items: center; padding: 10px; } .cq-program-item .program-title span { font-weight: 500; font-size: 105%; text-align: center; } .cq-program-item .card-back { display: inline-flex; flex-direction: column; justify-content: center; padding: 10px; } .cq-program-item h3.card-title { padding: 0; margin: 0; margin-bottom: 6px; font-size: 120%; font-weight: 500; } @media (max-width: 767px) { .cq-program-item .card { flex-direction: row; } .cq-program-item .card-front { width: 40%; } .cq-program-item .card-back { width: 60%; padding: 15px; justify-content: start; } .cq-program-item .card-back .btn { margin-top: auto; } .cq-program-item .card .program-title { display: none; } .cq-program-item .program-image { width: 100%; height: 100%; } .cq-program-item .card-front .program-image img { object-fit: cover; width: 100%; height: 100%; } } @media (min-width: 768px) { a.cq-program-item:nth-of-type(4n+1) .program-image, a.cq-program-item:nth-of-type(4n+2) .program-image { order: 1; } a.cq-program-item span.btn { align-self: start; } .cq-program-item .card > div { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0s; transition-timing-function: ease; width: 100%; height: 100%; margin: 0; display: flex; } .cq-program-item .card-front { transform: rotateY(0deg); } .cq-program-item .card-back { transform: rotateY(180deg); position: absolute; top: 0; } .cq-program-item:hover .card .card-front, .cq-program-item:focus .card .card-front { transform: rotateY(-180deg); } .cq-program-item:hover .card-back, .cq-program-item:focus .card-back { transform: rotateY(0deg); } } @media (min-width: 992px) and (max-width: 1280px) { .cq-program-item h3.card-title, .cq-program-item p.card-text { display: inline-block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; } .cq-program-item h3.card-title { line-clamp: 1; -webkit-line-clamp: 1; } } @media (min-width: 992px) and (max-width: 1129px) { .cq-program-item p.card-text { line-clamp: 2; -webkit-line-clamp: 2; } } @media (min-width: 1130px) and (max-width: 1280px) { .cq-program-item p.card-text { line-clamp: 3; -webkit-line-clamp: 3; } } /* Icon Psuedo Accommodation */ .site-brand-icon-white::before { background-color: white !important; } .site-brand-icon-black::before { background-color: black !important; } @media (max-width: 767px) { /* hide icon on mobile */ .site-brand-icon-black::before, .site-brand-icon-white::before { display: none; } } /* Historical Timeline styles */ .carousel-aux-wp { background-color: var(--CoB-Dark-Blue); color: #fff !important; margin-bottom: -20px; } .carousel-aux-wp:first-of-type { padding-top: 15px; } .carousel-aux-wp:last-of-type { padding-bottom: 5px; margin-bottom: 15px; } .carousel-aux-wp a, .carousel-aux-wp h2, .carousel-aux-wp h3 { color: #fff !important; } .carousel-aux-wp a:hover, .carousel-aux-wp a:focus { color: #f0f0f0 !important; } #carousel-timeline-container { background-color: var(--CoB-Dark-Blue); color: #fff; padding: 45px 10px; /* base padding */ margin: -32px -12px; } #multiple-item-carousel .carousel-inner { display: flex; padding: 0; } #multiple-item-carousel .carousel-item { margin-right: 0; flex: 0 0 100%; display: inline-flex; } #multiple-item-carousel .carousel-item img { width: 100%; position: relative; } #multiple-item-carousel .carousel-item h3 { display: inline-block; background: var(--bs-blue); padding: 10px 24px; border-radius: 30px; font-weight: bold; margin-top: 5px; color: #fff; } #multiple-item-carousel .carousel-item p { color: #fff; position: relative; } #multiple-item-carousel .carousel-item p::before { content: ""; display: block; height: 2px; background-color: var(--bs-blue); position: absolute; top: -32px; left: 100px; right: -20px; } @media (min-width: 476px) { #multiple-item-carousel .carousel-item { margin-right: 20px; } } @media (min-width: 576px) { #multiple-item-carousel .carousel-item { flex: 0 0 calc((100% / 2) - 15px); } } @media (min-width: 768px) { #multiple-item-carousel .carousel-item { flex: 0 0 calc((100% / 3) - 15px); } } @media (min-width: 1200px) { #multiple-item-carousel .carousel-item { flex: 0 0 calc((100% / 4) - 15px); } } /* Timeline Controls */ .carousel-control-next-icon, .carousel-control-prev-icon { font-size: 130%; } .carousel-control-prev { left: 15px; } .carousel-control-next { right: 15px; } .carousel-control-next, .carousel-control-prev { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15%; padding: 0; color: #D6E03B; text-align: center; background: 0 0; border: 0; opacity: 0.5; transition: opacity .15s ease; } #multiple-item-carousel .carousel-control-prev, #multiple-item-carousel .carousel-control-next { background-color: rgb(0 0 0 / 95%); width: 7vh; height: 7vh; border-radius: 50%; top: 30%; transform: translateY(-50%); font-size: 130%; } @media (min-width: 768px) { #multiple-item-carousel .button-container { visibility: hidden; opacity: 0; transition: 0.3s ease-in-out; } #multiple-item-carousel:hover .button-container { visibility: visible; opacity: 1; } } .visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* Last Updated: June 12, 2025 - LD */