/*ALTER HEADER COLOR FOR BRAND COMPLIANCE (June 2023)*/ .ymca-name a {color: #00aeef !important;} .ymca-name a:hover {color: #0089d0 !important;} /*Basic styling classes*/ .padded { padding: 12px; } .rounded { border-radius: 6px; } .unrounded { border-radius: 0 !important; } .lowercase { text-transform: lowercase !important; } .uppercase { text-transform: uppercase !important; } .centered { text-align:center; } .sentence { text-transform: none !important; } .straightbottom { border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; } hr.whitehr { border-bottom: RGBA(255, 255, 255, .6) 1px solid; margin: 24px auto} .whitetext { color: #ffffff; } a.whitetext, .whitetext a { color: #ffffff; } a:hover.whitetext, .whitetext a:hover { color: #efefef; } blockquote { margin-left: 18px; } .anchorjump { display: block; position: relative; top: -210px; visibility: hidden; } .Cachet { font-family: 'Cachet Bold', Verdana, sans-serif; } /*Styling for rows and columns*/ div.main-content .columns { margin-bottom:24px; } /*Equalize columns with display:flex on DESKTOP ONLY; prevents stacking of columns otherwise*/ @media only screen and (min-width: 641px){ .col-fix {display: flex !important;} } /*Styling for GrayCards (padded, rounded boxes with a gray background)*/ .graycard { background: #efefef; border-radius: 6px; padding: 12px; height:inherit; } .graycard img { border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; } .graycard h1, .graycard h2, .graycard h3, .graycard h4, .graycard h5, .graycard h6, .graycard p { padding-left: 12px; padding-right: 12px; } .graycard ul { lislt-style: disc; } .shrink { font-size: 85%; } .enlarge { font-size: calc(100% + .25em) } .tighten-kerning { letter-spacing: -.1rem; } /*Add additional font and button color classes*/ .purple.light { color: #c6168d} .purple.medium { color: #92278f} .purple.dark { color: #5c2e91} .red.light { color: #f15922} .red.medium { color: #ed1c24} .red.dark { color: #a92b31} .gray.light { color: #f0f0f0} .gray.dark { color: #636466} /*Add additional font and button color classes*/ .purple-bg.light-bg { background-color: #c6168d !important} .purple-bg.medium-bg { background-color: #92278f !important} .purple-bg.dark-bg { background-color: #5c2e91 !important} .red-bg.light-bg { background-color: #f15922 !important} .red-bg.medium-bg { background-color: #ed1c24 !important} .red-bg.dark-bg { background-color: #a92b31 !important} .gray-bg.light-bg { background-color: #f0f0f0 !important} .gray-bg.dark-bg { background-color: #636466 !important} .white-bg { background-color: #ffffff !important} /*SIDEBAR BUTTON ALTERATIONS*/ /*Set Tertiary Medium as sidebar button default for non-working button color added option*/ .sidebar.button { background-color: #f47920 } /*Then reset other colors as sidebar button default for working, preexisting button color options*/ a.primary-bg.light-bg.sidebar.button { background-color: #20bdbe} a.primary-bg.medium-bg.sidebar.button { background-color: #01a490} a.primary-bg.dark-bg.sidebar.button { background-color: #006b6b} a.secondary-bg.light-bg.sidebar.button { background-color: #00aeef} a.secondary-bg.medium-bg.sidebar.button { background-color: #0089d0} a.secondary-bg.dark-bg.sidebar.button { background-color: #0060af} /*SIDEBAR Quicklink Section Setup*/ div.quicklinks { background-color: #f0f0f0 !important; border-radius: 6px; padding: 12px 0 6px; margin: 0 0 24px; } .quicklinks h1, .quicklinks h2, .quicklinks h3, .quicklinks h4, .quicklinks h5, .quicklinks h6, .quicklinks p { padding: 0 18px; margin: 0; } .sidebar .quicklinks ul { padding: 0; margin: 0; list-style: none !important; color: #636466; } .sidebar .quicklinks li { padding: 10px 18px; display: block; } .sidebar .quicklinks ul ul { padding-left: 42px; } .sidebar .quicklinks a { text-decoration: none; color: #636466; } .sidebar .quicklinks li a:hover, .sidebar .quicklinks li a:focus { background-color: #dbdbdb; display:block; padding: 10px 18px; margin: -10px -18px } .sidebar .quicklinks ul ul li a:hover, .sidebar .quicklinks ul ul li a:focus { background-color: #dbdbdb; display:block; padding: 10px 18px 10px 60px; margin: -10px -18px -10px -60px; } .sidebar .quicklinks ul>li { font-weight: bold; } .sidebar .quicklinks ul>ul>li a { font-weight: normal; } /*Alter navigation font sizes for smaller screens*/ @media screen and (max-width: 815px) { .mainnav a, .mainnav_style2 a { font-size: 12px !important; } .top-bar a { font-size: 12px !important; } } /*FORM STYLING ALTERATIONS*/ label { color: #7a7974; } .formtextRequired:before { color: #a92b31; margin-right: .25em; } #form input[type="text"], input[type="checkbox"], input[type="radio"] { vertical-align: middle; margin: 3px .2em 3px .1em; } input[type="checkbox"], input[type="radio"] { zoom: 1.5; } table.col-fix tbody td td:nth-child(2) { width: 50%; } /*LANDING PAGE STYLING ALTERATIONS (Only few alterations kept, July 2021)*/ .landing-header .logo-wrapper .logo { background: #636466 !important; } /*Recolor top bar logo*/ .landing-header h1.ymca-name a { color: #636466 !important; } /*Recolor top bar text - YGSP*/ .landing-hero .flyout { background: rgba(0,137,208,.8) !important; } /*Recolor "Flyout"*/ /* Fix Flyout Site on Mobile */ @media only screen and (min-width: 767px) { .landing-style-1 .flyout { width: 50% !important; } } @media only screen and (max-width: 767px) { .landing-style-1 .flyout { width: 100% !important!; position: relative !important; } } @media only screen and (max-width: 1100px) { .landing-style-1 .flyout h1 { font-size:1.5em !important; } } @media only screen and (max-width: 1100px) { .landing-style-1 .flyout h3 { font-size:1em !important; } } .value-section { display: none !important; } /* Hides Callout section */ #footer .mission-statement { display:none; } /* Hides Mission Statement at the bottom */ .style-4 #footer .copyright-wrapper { background: #636466; } /*Recolor footer copyright bar*/ /*ACCORDIAN CONTENT STYLING*/ .accordion .accordion-navigation > a, .accordion dd > a { background: #efefef; color: #222222; display: block; font-family: inherit; font-size: 1em; padding: 12px; text-decoration:none; } .accordion-navigation a:first-child:before { content:"\25BC" " "; /* /Numerical unicode for the character */ color: #777777; } .accordion-navigation .content a:before { content:none; /* Remove arrow on links within the accordion box */ } /* For an Accordian with a transparent background, add .trans-bg class */ .trans-bg a {background: none !important;} .trans-bg .content {background: none !important;} .trans-bg .content.active {background: none !important;} /*FIX LOCATION PAGE WHITESPACE (June 2024)*/ .location-item { min-height: 215px !important; } /*HOME PAGE ALTERATIONS (April 2020)*/ .black-bar { background: #0060af !important; padding: 0 !important; } .black-bar div.row:nth-child(2) { padding-top: 20px; padding-bottom: 20px; } .black-bar .button { background-color: #92278f !important; } .black-bar .button:hover { background-color: #c6168d !important; } #footer .social-media { text-align: center; } #footer .email-sign-up { display: none; } .footer-callout.bar h3 { line-height: 34px; } .callout-bar-text p { margin: 10px 0 0 0 !important; } .callout-bar-text a { display: none !important; } /*OTHER ALTERATIONS*/ .title-cover { margin-top: -66px; position: relative; z-index: 200; width: 100%; min-height: 66px; background: white !important; } .shrink .button { font-size: 14px !important; padding: .75rem !important; } .mobile .shrink .button { font-size: 10px !important; } .campweeknum { font-size: 450%; line-height: .5em; color: #00aeef; letter-spacing: -10px; margin-right: 10px; margin-bottom: 18px;} .highlight { margin-left: -12px; padding-left: 12px; } /*Change highlight for smaller screens*/ @media screen and (max-width: 815px) { .highlight { padding-left: 12px; } } /*Change z-index for Silent Salesman*/ .popup-img-wrapper { z-index: 8!important; } /*YDA PAGE*/ .YDAheader { color: #222222; border-bottom: #20bdbe solid 2px; max-width: 600px; width: 75%; margin: 0 auto 24px; text-transform: uppercase !important; text-align:center; display:table; } .YDAinstructors { font-family: 'Cachet Bold', Verdana, sans-serif; text-align: center; } .YDAname { font-size: 22px; background-color: #20bdbe; color: #ffffff; padding: 12px 9px 9px; margin: -3px 0 0 0; text-transform: uppercase; line-height:1em; } .YDAtitle { font-size: 15px; color: #231f20; padding: 3px; margin: 0; line-height:1em; } /* Used on Rentention Material Landing Pages as the Tab in the Hero Image Section */ .ret-tab { background: white; border-radius: 12px 12px 0 0; padding: 12px 24px; max-width: 50%; min-width: 340px; margin-bottom: -70px; margin-left: -13px; } .ret-tab h1 { font-size: 4em; line-height: .9em; } .ret-tab h3 { font-size: 1.75em; line-height: .9em; } /* Hide "Back to All Albums" button on photo album module */ .album-thumbs-lister p { display: none !important; } /* SUMMER CAMP SPECIALTY CAMP FINDER 2022 Calculations based on max width of 346.67 and max height of 800. 20 total camps/content blocks Screens under 659px = (20 rows x avg block height of 600) Screens over 660px = (10 rows x avg block height of 728) Screens over 959px = (7 rows x avg block height of 728) Screens over 1100px = (screen maxes out at 4600px) */ .camp-finder-container iframe { position: absolute; top: 0; left: 0; width:100%; height: 100%; border:0;} @media only screen and (max-width: 659px) { .camp-finder-container { padding-top: calc(600px * 20); position: relative; height: 0; overflow: hidden; } } @media only screen and (min-width: 660px) { .camp-finder-container { padding-top: calc(728px * 10); position: relative; height: 0; overflow: hidden; } } @media only screen and (min-width: 959px) { .camp-finder-container { padding-top: calc(728px * 7); position: relative; height: 0; overflow: hidden; } } @media only screen and (min-width: 1100px) { .camp-finder-container { padding-top: 4600px; position: relative; height: 0; overflow: hidden; } } /* Join Tabs - Built March 2022 */ .join-tabs ul { padding-inline-start: 0px; } .join-tabs .accordion-navigation a:first-child:before { content: none !important; } .join-tabs .accordion-navigation a[aria-expanded="true"] { border: solid 3px #f47920 !important; } .join-tabs .accordion-navigation a[aria-expanded="false"] { border: solid 3px #ffffff !important; } .join-tabs .membership-type { display: table; min-height: 110px; width: 100%; } .join-tabs .membership-type .content { display: table-cell; vertical-align: middle; } .join-tabs .membership-type .content h4 { line-height: 1.2em; margin-top: 12px; } /* Timeline Styles - Built June 2024 */ .timeline ul {list-style: none !important; padding-inline-start: 0 !important; text-wrap: pretty;} .timeline ul li {color: #0060af;margin: 22px 0 !important;} .timeline ul li strong, .timeline ul li b {color: white;background-color: #0060af;padding: 4px 8px;font-size: calc(100% + .15em);} .timeline.graycard {background-color: rgba(239,239,239,.8);} /* Hide dividing HRs from Staff Directory Module */ #staff-page hr:not(.staff-hr) { display:none !important;}