.mc-main div, .mc-main span, .mc-main h1, .mc-main h2, .mc-main h3, .mc-main h4, .mc-main h5, .mc-main h6, .mc-main p, .mc-main blockquote, .mc-main pre, .mc-main a, .mc-main img, .mc-main dl, .mc-main dt, .mc-main dd, .mc-main ol, .mc-main ul, .mc-main li, .mc-main fieldset, .mc-main form, .mc-main label, .mc-main legend, .mc-main table, .mc-main caption, .mc-main tbody, .mc-main tfoot, .mc-main thead, .mc-main tr, .mc-main th, .mc-main td, .mc-main article, .mc-main aside, .mc-main details, .mc-main footer, .mc-main header, .mc-main menu, .mc-main meter, .mc-main nav, .mc-main output, .mc-main progress, .mc-main section, .mc-main summary { border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; margin: 0; padding: 0; } .mc-main td { vertical-align: top; } /* Override overflow:hidden */ main,div.entry-content,div.site-content, table { overflow: visible !important; } .mc-main { line-height: 1; max-width: 1260px !important; margin: 0 auto; } .mc-main .my-calendar-footer ul, .mc-main .my-calendar-header ul { list-style-type: none; list-style: none; } .my-calendar-nav ul { display: flex; } .mc-main article, .mc-main aside, .mc-main dialog, .mc-main figure, .mc-main footer, .mc-main header, .mc-main nav, .mc-main section, .mc-main blockquote { display: block; } .mc-main .my-calendar-header, .mc-main .my-calendar-footer { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 10px; padding: .25rem 0; } .mc-main span.mc-active, .mc-main .my-calendar-header a, .mc-main .my-calendar-footer a { display: inline-block; } .mc-main .my-calendar-footer select:not(.my-calendar-admin select), .mc-main .my-calendar-footer input[type=text]:not(.my-calendar-admin input[type=text]), .mc-main .my-calendar-footer input[type=submit]:not(.my-calendar-admin input[type=submit]), .mc-main .my-calendar-header select:not(.my-calendar-admin select), .mc-main .my-calendar-header input[type=text]:not(.my-calendar-admin input[type=text]), .mc-main .my-calendar-header input[type=submit]:not(.my-calendar-admin input[type=submit]) { line-height: 1; padding-top: 6px; padding-bottom: 5px; margin: 0; font-size: 1rem; border: 1px solid; } .mc-main .my-calendar-header input[type=text]:not(.my-calendar-admin input[type=text]), .mc-main .my-calendar-footer input[type=text]:not(.my-calendar-admin input[type=text]) { padding-top: 5px; padding-bottom: 5px; } .mc-main .my-calendar-header select:not(.my-calendar-admin select), .mc-main .my-calendar-footer select:not(.my-calendar-admin select) { padding-top: 4px; padding-bottom: 4px; } .mc-main .my-calendar-header input[type=submit], .mc-main .my-calendar-footer input[type=submit] { min-width: 44px; } .mc-time { display: flex; column-gap: 4px; } .my-calendar-header .mc-date-switcher > * { margin: 0 2px; } .mc-main .my-calendar-header select, .mc-main .my-calendar-footer select { display: inline; } .mc-main h2:before { display: none; } .mc-main h4.mc-title { margin-top: 0; margin-bottom: .5em; } .mc-main nav ul { list-style: none; display: flex; flex-wrap: wrap; column-gap: .5rem; } .mc-main ol { list-style: decimal; } .mc-main ul { list-style: disc; } .mc-main ul ul { list-style: circle; } .mc-main blockquote, .mc-main q { quotes: none; } .mc-main blockquote:before, .mc-main blockquote:after, .mc-main q:before, .mc-main q:after { content: none; } .mc-main table { border-collapse: collapse; border-spacing: 0; } .mc-main input, .mc-main select, .mc-main a img { vertical-align: middle; } .mc-main select { height: auto; } .mc-main select:not(.my-calendar-admin .mc-main select) { background: inherit; -webkit-appearance: auto; appearance: auto; } .mc-main *, .mc-main *:before, .mc-main *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .mc-main .mc_filters label, .mc-main .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; color: inherit; } img.category-icon, svg.category-icon, .category-color-sample.svg * { max-width: 18px; min-width: 16px; height: auto; padding: 1px; border-radius: 2px; } .category-key li a { display: flex; align-items: center; } .mc-adjacent .mc-event-date { display: block; font-size: 80%; } .mc-main .mc-list li, .mc-day { position: relative; } .mc-main .category-key.has-icons ul li { display: inline; } button.mc-toggle { border: 0; padding: 4px; background-color: transparent !important; font-size: 20px; color: #a00 !important; font-family: dashicons !important; } button .mc-toggle:before { font-family: dashicons !important; } button.mc-toggle:hover, button.mc-toggle:focus { outline: 1px solid #766; } .mc-main .mc_filters p { margin: 0; padding: 0; } .mc-main .mc-date-switcher div, .mc-main .mc-search-form, .mc-main .mc_filters form { display: flex; align-items: center; } .mc-main .mc-date-switcher .button, .mc-main .mc-search-form .button, .mc-main .mc_filters .button { border-radius: 0 3px 3px 0; position: relative; left: -1px; border-left-width: 0; } .mc-main .event-title button { width: 100%; text-align: left; display: flex; column-gap: 4px; align-items: center; padding: 1rem; } .mc-main .mc-date-switcher select:last-of-type, .mc-main .mc-search-form input[type=text], .mc-main .mc_filters select { border-radius: 3px 0 0 3px; } .mc-main .mc-date-switcher select:not(:first-of-type) { margin-left: 5px; } .mc-main .event-icon { display: none; } .mc-main.mini .event-icon { display: block; font-size: .6rem; padding-bottom: 6px; line-height: 1; } .mc-main.my-calendar ul button.mc-text-button { border: 0; color: inherit; background-color: transparent; text-decoration: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; } .mc-main.my-calendar ul button.mc-text-button:hover, .mc-main.my-calendar ul button .mc-text-button:focus { text-decoration: underline; background-color: transparent; } .mc-main .all-categories span, .mc-main .category-key li a { display: flex; align-items: center; column-gap: 4px; } .mc-main .category-key .category-color-sample { display: flex; align-items: center; } .mc-main .mc-loading { position: absolute; top: 45%; left: 50%; margin: -40px 0 0 -40px; height: 80px; width: 80px; border: 6px solid var(--highlight-light); border-left-color: var(--highlight-dark); background-color: rgba(0,0,0,0.05); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-animation: animation-rotate 1250ms linear infinite; -moz-animation: animation-rotate 1250ms linear infinite; -o-animation: animation-rotate 1250ms linear infinite; animation: animation-rotate 1250ms linear infinite; } .mc-author-card, .mc-host-card { display: grid; grid-template-columns: 3.5em 1fr; column-gap: 10px; } .mc-author-card img, .mc-host-card img { max-width: 100%; height: auto; } .mc-author-card p, .mc-host-card p { margin: 0; padding: .5em; } /* Baseline styles for search results */ ol.mc-search-results { list-style-type: none; margin: 0; padding: 0; } ol.mc-search-results li { margin: 0 0 1rem; padding: 5px 1rem; } .mc-search-results .mc_search_term { background: #ffa; color: #111; } ol.mc-search-results li:nth-of-type(even) { background: rgba( 0,0,0,.06 ); } ol.mc-search-results li.no-results { padding: 5px; border-left: 6px solid #b32d2e; background-color: #0000000a; color: #111; } @-webkit-keyframes animation-rotate { 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes animation-rotate { 100% { -moz-transform: rotate(360deg); } } @-o-keyframes animation-rotate { 100% { -o-transform: rotate(360deg); } } @keyframes animation-rotate { 100% { transform: rotate(360deg); } } .mc-main .mc-day .list-event { margin: 0; } /** * This is focus passed to a div for the purpose of navigation; visible focus not required. */ .mc-main:focus { outline: none; } /* Prevent missing background image on google maps */ .mc-gmap-markers img { max-width: none ! important; } .mc-main .calendar-events { position: relative; z-index: 100; } .mc-main .uses-modal { display: none !important; } .mcjs.mc-main.listjs .details, .mcjs.mc-main.gridjs .calendar-events { display: none; } .mcjs.mc-main .single-event .details, .mcjs.mc-main.list.day .details { display: block; } .details .location, .mc-gmap-location-list { margin: 1em 0; } .details .mc-accessibility ul.mc-access, .details .sharing { display: flex; flex-wrap: wrap; column-gap: .5em; margin: .5em 0; list-style: none; padding: 0; } .details img.alignnone, .details img.alignleft, .details img.alignright { max-width: 100%; } .mc-main .details .mc-image { width: 100%; height: auto; } .details .mc-access li { background: #00000007; padding: 3px; border-radius: 3px; } .mc-location-details { margin-bottom: .5em; } .mc-maps .mc-gmap-location-list .mc-location-details button { padding: .33rem; border-radius: 3px; margin: 0 5px 0 0; } .mc-geolocate-form .mc-gl-fields { display: flex; flex-wrap: wrap; column-gap: 10px; align-items: self-end; } .mc-geolocate-form .mc-gl-fields label { display: block; } .entry-title .category-icon { fill: #000; fill: var(--primary-dark) !important; max-width: 1em; padding: 0; display: inline-block; } .mc-date-container.has-month { display: grid; grid-template-columns: auto auto; padding: 0 6px; align-items: center; font-size: 1rem; font-weight: 700; } .mc-date-container .mc-change-months { margin: 0; padding: 0; font-size: 14px; font-weight: 700; } /* Add styles for simple modal. */ dialog.my-calendar-modal { display: block; border: 0; border-radius: 10px; text-align: left; } dialog.my-calendar-modal .my-calendar-modal__wrapper { padding: 0; } dialog.my-calendar-modal .js-modal-title-container { position: relative; margin-top: 0; margin-bottom: 0; padding: 15px; background: #f3f3f3; z-index: 1; } dialog.my-calendar-modal #modal-title { font-size: 1.25em; margin-right: 4em; } dialog.my-calendar-modal .modal-content { display: none; } #js-modal-content .mc-toggle { display: none; } /* removes scroll when modal is opened */ body.mc-no-scroll { overflow: hidden; } /* /* overlay covers everything */ .my-calendar-modal-overlay { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: #333; opacity: .8; z-index: 666; cursor: pointer; } .my-calendar-modal .time-wrapper { font-weight: 700; } .mc-main span.event-time { display: inline; } .my-calendar-modal .event-title { display: flex; align-items: center; column-gap: .5rem; } .my-calendar-modal img { max-width: 100%; height: auto; } .my-calendar-modal #js-modal-content { padding: 15px; } .my-calendar-modal #js-modal-content > * { margin: 0 0 1.5em; } .my-calendar-modal-overlay[data-background-click="disabled"] { cursor: auto; } .my-calendar-modal-overlay { animation: fadewhite ease .5s 1 normal ; } @keyframes fadewhite { 0% { opacity: 0; } 100% { opacity: .8; } } /* modal */ .my-calendar-modal { position: fixed; left: calc( ( 100% - 55.625em ) / 2 ); top: 10vh; width: 100%; max-width: 55.625em; max-height: 80vh; border: 2px solid #000; background: #fefef8; color: #333; z-index: 667; padding: 0; right: auto; overflow: auto; } .my-calendar-modal-close { position: absolute; top: 5px; right: 5px; background: #a00; border-radius: 0 8px 0 4px; color: #fff; border: 0; padding: .75em; cursor: pointer; z-index: 2; display: flex; align-items: center; column-gap: 4px; } .my-calendar-modal-close:focus, .my-calendar-modal-close:hover, .my-calendar-modal-close:active { color: #a00; background: #fff; } .my-calendar-modal { animation: apparition ease .5s 1 normal ; } @keyframes apparition { 0% { opacity: 0; max-height: 0; width: 0; left: 50%; } 100% { opacity: 1; max-height: 100%; width: 100%; max-width: 55.625em; left: calc( ( 100% - 55.625em ) / 2 ); } } /* for this example: tablets */ @media (max-width: 55.625em) { .my-calendar-modal { left: 5%; top: 5%; height: 90%; width: 90%; } } /* for this example: mobile */ @media (max-width: 44.375em) { .my-calendar-modal { left: 1%; top: 1%; width: 98%; height: 98%; } .admin-bar .my-calendar-modal { top: 45px; height: calc( 99% - 45px ); } }