/* Colors (some are copied to photoblog/templates/ssi/stylesheet.html & dada_mail_support_files/static/css/dada_mail.css) */ html { /* These two are duplicated below so they are defined in CSS for ::-webkit-scrollbar */ --scrollbarBG: #3A4F21; /* 1 of 6 */ --scrollbarFG: #DFDAB9; /* 1 of 4 */ --menuBG: #3A4F21; /* 2 of 6 (058 079 033) */ --menuBGHov: #1B240F; --menuText: #E2DCB5; /* 1 of 2 (226 220 181) */ --menuBG2: #2B3B18; /* mobile only */ --menuBG3: #202B13; /* mobile only */ --bodyBG: #EFECDB; --bodyText: #453F30; /* 1 of 4 */ --bodyBG1: #DFDAB9; /* 2 of 4 */ --bodyBG2: #F7F6ED; --buttonBG: #FECD92; --buttonText: #453F30; /* 2 of 4 */ --buttonBorder: #3A4F21; /* 3 of 6 */ --buttonBGHover: #3A4F21; /* 4 of 6 */ --buttonTextHover: #E2DCB5; /* 2 of 2 */ --buttonBorderHover: #3A4F21; /* 5 of 6 */ --selectInputTextarea: #453F30; /* 3 of 4 */ --selectInputTextareaBG: #DFDAB9; /* 3 of 4 */ --anchorText: #995304; --anchorTextHover: #526331; --tableHeadingBG: #DFDAB9; /* 4 of 4 */ --tableHeadingText: #453F30; /* 4 of 4 */ --tableHeadingBorder: #3A4F21; /* 6 of 6 */ --pageTitleText: #339900; --iconAndCellText: black; --tableDark: #333333; --fontColorRed: #FF0000; --fontColorBlue: #0000FF; --scrollBarWidth: 19px; } @media (prefers-color-scheme: dark) { html { --bodyBG: #000800; /* Not pure black, just a hint of green */ --bodyText: #A29C75; /* Same as the --menuText but 0x40 darker */ --bodyBG1: #1B201B; /* Dark with 2 hints of green */ --bodyBG2: #101A10; /* Dark with 1 hint of green */ --buttonBG: #BFA382; /* Faded orange with a hint of gray */ --buttonText: #000000; /* Black */ --buttonBorderHover: #E2DCB5; /* Same as --buttonTextHover */ --selectInputTextarea: #C9C879; /* Dim yellow with a hint of green */ --selectInputTextareaBG: #0A140A; /* Very dark green */ --anchorText: #C18D53; /* Kind of a faded sandstone color*/ --anchorTextHover: #3CB371; /* Kind of a mid green */ --tableHeadingBG: #928D6B; /* Kind of a mid mud color */ --tableHeadingText: #000000; /* Black on dim column headings */ --tableHeadingBorder: #A0B687; /* A grayish light green */ --iconAndCellText: #B9B59B; /* Background is icon color or cell color so lighter */ --fontColorRed: #C73434; --fontColorBlue: #3434C7; } } .bodyBG { background-color: var(--bodyBG ); } .bodyBGDarker { background-color: var(--bodyBG1); } /* Calendar, Membership Status, GearSwapMgmt(box), CreditCard-Old, ... */ .bodyBGLighter { background-color: var(--bodyBG2); } /* Edit A Membership, Activity Directory(boxes), GearSwapMgmt(bar), ExportActivities, ... */ a { color: var(--anchorText); } a:hover { color: var(--anchorTextHover); } /* Google DevTools Lighthouse Accessibility wants links to have contrast. Technically "background-color" isn't inherrited, * and if we set all "a"s we get the SmartMenu's & carouselContainer's "a"s, so set just these. */ #twoLinks a, main a, footer a, h1, h2, h3, p, ul, ol, li, table, tr, th, td, div, span, i, b { background-color: inherit; } /* Activities listed in the Calendar. Category Selection checkboxes used by Calendar/VTOA/Email Lists/...'s */ div.BIKE { background-color: #ABBAA1; border: outset 3px #ABBAA1; } .BIKEbg { background-color: #ABBAA1; border-radius: 5px; } div.BOATING { background-color: #B89B91; border: outset 3px #B89B91; } .BOATbg { background-color: #B89B91; border-radius: 5px; } div.CANYONEER { background-color: #FF8C66; border: outset 3px #FF8C66; } .CANYONEERbg { background-color: #FF8C66; border-radius: 5px; } div.CLIMBING { background-color: #AAA8E3; border: outset 3px #AAA8E3; } .CLIMBbg { background-color: #AAA8E3; border-radius: 5px; } div.CONSERVATION { background-color: #3CB371; border: outset 3px #3CB371; } .CONSERVATIONbg { background-color: #3CB371; border-radius: 5px; } div.HIKE { background-color: #D2AB74; border: outset 3px #D2AB74; } .HIKEbg { background-color: #D2AB74; border-radius: 5px; } div.LODGE { background-color: #D07C6E; border: outset 3px #D07C6E; } .LODGEbg { background-color: #D07C6E; border-radius: 5px; } div.SKI { background-color: #C8A6BF; border: outset 3px #C8A6BF; } .SKIbg { background-color: #C8A6BF; border-radius: 5px; } div.SNOWSHOE { background-color: #93BADB; border: outset 3px #93BADB; } .SNOWSHOEbg { background-color: #93BADB; border-radius: 5px; } div.SOCIAL { background-color: #47D1FF; border: outset 3px #47D1FF; } .SOCIALbg { background-color: #47D1FF; border-radius: 5px; } div.TRAVEL { background-color: #FFB3FF; border: outset 3px #FFB3FF; } .TRAVELbg { background-color: #FFB3FF; border-radius: 5px; } div.BOARD { background-color: #33FF77; border: outset 3px #33FF77; } .BOARDbg { background-color: #33FF77; border-radius: 5px; } div.BOARDANDCOORDINA { background-color: #FFB366; border: outset 3px #FFB366; } .BOARDANDCOORDINAbg { background-color: #FFB366; border-radius: 5px; } div.IT { background-color: #8080FF; border: outset 3px #8080FF; } .ITbg { background-color: #8080FF; border-radius: 5px; } div.TEST { background-color: #66D9FF; border: outset 3px #66D9FF; } .TESTbg { background-color: #66D9FF; border-radius: 5px; } @media (prefers-color-scheme: dark) { div.BIKE { background-color: #54521E; border: outset 3px #84824E; } .BIKEbg { background-color: #54521E; border-radius: 5px; } div.BOATING { background-color: #2C8358; border: outset 3px #5CA388; } .BOATbg { background-color: #2C8358; border-radius: 5px; } div.CANYONEER { background-color: #B32D00; border: outset 3px #E32D00; } .CANYONEERbg { background-color: #B32D00; border-radius: 5px; } div.CLIMBING { background-color: #5C4785; border: outset 3px #8C77A5; } .CLIMBbg { background-color: #5C4785; border-radius: 5px; } div.CONSERVATION { background-color: #004A00; border: outset 3px #307A30; } .CONSERVATIONbg { background-color: #004A00; border-radius: 5px; } div.HIKE { background-color: #502B2B; border: outset 3px #805B5B; } .HIKEbg { background-color: #502B2B; border-radius: 5px; } div.LODGE { background-color: #861E0C; border: outset 3px #B64E3C; } .LODGEbg { background-color: #861E0C; border-radius: 5px; } div.SKI { background-color: #9A5688; border: outset 3px #CA86A8; } .SKIbg { background-color: #9A5688; border-radius: 5px; } div.SNOWSHOE { background-color: #255E8D; border: outset 3px #558EBD; } .SNOWSHOEbg { background-color: #255E8D; border-radius: 5px; } div.SOCIAL { background-color: #1D3070; border: outset 3px #4D70A0; } .SOCIALbg { background-color: #1D3070; border-radius: 5px; } div.TRAVEL { background-color: #551455; border: outset 3px #854485; } .TRAVELbg { background-color: #551455; border-radius: 5px; } div.BOARD { background-color: #009911; border: outset 3px #30C941; } .BOARDbg { background-color: #009911; border-radius: 5px; } div.BOARDANDCOORDINA { background-color: #994D00; border: outset 3px #C97D30; } .BOARDANDCOORDINAbg { background-color: #994D00; border-radius: 5px; } div.IT { background-color: #008B8A; border: outset 3px #30BBBA; } .ITbg { background-color: #008B8A; border-radius: 5px; } div.TEST { background-color: #015142; border: outset 3px #318172; } .TESTbg { background-color: #015142; border-radius: 5px; } } table { border-collapse:collapse; } .tableCellBordersSeparate { border-collapse:separate; } .tableBorderDark { border: 1px solid var(--tableHeadingBorder); } .tableCellsWith1pxBorders th, .tableCellsWith1pxBorders td { border: 1px solid var(--tableHeadingBorder); padding: 0px 2px; } .tableHeaderDark { background-color: var(--tableDark); color: var(--menuText); } /* Menu font sizes - for all devices */ #menuCalendar, #menuJoinRenew, #menuLogInOut { font:normal 20px Verdana; /* 1st row of main menu items, a little bigger */ } #menuAboutus, #menuActivities, #menuMembers, #menuAdmin, #menuDandO { font:normal 28px bebas; /* 2nd row of main menu items, use narrow tall font. */ } #menuLogInOut { /* Less chars in Login than Logout so handle that */ width:100px; text-align:center; } fieldset { padding: 0px 5px 5px 5px; } /* =========================================================== Phone =========================================================================== */ #menuContainer { background-color: var(--menuBG) !important; box-shadow: 0px 3px 2px var(--menuBG) !important; } #menuContainer { transition: top 0.6s; } /* When we do scroll the menu delay it. */ #menuContainer { z-index:100; position:fixed; } /* Initially don't scroll the menu, need next two because of this one. */ #menuContainer, #spaceBehindMenuBar { height:50px; } #carouselContainer { width:100%; max-height:270px; margin:0 auto; position:relative; } /* relative for next 2 absolute(s) */ #carouselPrev > a { position:absolute; top:34%; left: 10px; font-size:30px; cursor:pointer; color: var(--pageTitleText); } #carouselNext > a { position:absolute; top:34%; right:10px; font-size:30px; cursor:pointer; color: var(--pageTitleText); } #twoLinks { float:right; } #twoLinksLeft { float:right; font-size:9px; font-family:Arial; font-weight:bold; padding-top:3px; padding-right:5px; } #twoLinksLeftA { text-decoration:none; } #twoLinksRight { float:right; } #twoLinksRightImg { width: 52px; height:22px; } #titleScreen { width:100%; margin:0 auto; padding:10px 0px 10px 0px; line-height:1.0; font-variant:normal; text-transform:none; color: var(--pageTitleText); font-family: bebas; font-size:26px; font-weight:normal; display:block; } #bordersOnWideDisplays { display:none; } body, header, #menuContainer, #carouselContainer, main, .widthMain, footer { width: 100%; margin: 0px; padding: 0px; font-family: Verdana, Tahoma, Arial; font-size: 14px; line-height: 1.5; color: var(--bodyText); background-color: var(--bodyBG); /* Note: Inherited = no */ box-sizing: border-box; } /* Also set font in /cgi-bin/dada/DADA/Template/templates/default_css.css */ /* Also set font in /photoblog/includes/model.php */ /* These don't inherit from body */ button, file, select, input, textarea { padding: 3px 5px; font-family: inherit; font-size: inherit; line-height: normal; /* 1.5 adds to much space for single line input boxes, use 1.5 for multi line boxes though */ color: var(--selectInputTextarea); background-color: var(--selectInputTextareaBG); border: 1px solid var(--buttonBorder); border-radius: 4px; cursor: pointer; } select { padding: 3px 0px; } input[type="file"] { padding: initial; } /* if button or input, fix color and when hovered (see next rule) make color change happen slowly */ button , input[type=button] , input[type=submit] , input[type=reset] { -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; color: var(--buttonText); background-color: var(--buttonBG); border-color: var(--buttonBorder); } button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { color: var(--buttonTextHover); background-color: var(--buttonBGHover); border-color: var(--buttonBorderHover); } @media only screen and (max-width: 359px) { main { padding: 0px 5px; } } /* iPhone5 */ @media only screen and (min-width: 360px) { main { padding: 0px 10px; } } /* Galaxy S9, iPhone6/X */ @media only screen and (max-width: 767px) { h2 { font-size: 19px; } } /* everything smaller than an iPad */ /* ================================================== iPad / Laptop / Desktop ================================================================== */ @media only screen and (min-width: 768px) { /* if iPad or wider */ #menuContainer, #spaceBehindMenuBar { height:101px; } #logo { height:175px; width:175px; position:relative; top:5px; left:9px; display:inline; transition: top 0.6s; } #main-menu { float:right; } #carouselPrev > a { top:42%; } #carouselNext > a { top:42%; } #twoLinksLeft { padding-right:15px; } #twoLinksRightImg { width: 80px; height:32px; } #titleScreen { font-size:40px; letter-spacing:2.5px; font-weight: bold; } body { margin: 0 auto; } header, #menuContainer, #carouselContainer, main, .widthMain, button, file, select, input, textarea, footer { font-size: 16px; } header, #menuContainer, #carouselContainer, footer { width: 768px; /* iPad width */ padding: 0px 0px; /* No side padding, full width on next line */ margin: 0 auto; } main, .widthMain { width: 748px; /* iPad width minus 20px */ padding: 0px 0px; /* No side padding, limited width on next line */ margin: 0 auto; } /* SmartMenus overrides on iPad/laptop/desktop */ #main-menu .menuTopRowMarginsL { margin: 3px 15px 0px 15px; } /* Top row menu items, space them out (use 16 with youtube) */ #main-menu .menuTopRowMarginsR { margin: 3px 0px 0px 0px; } /* Top row social icons, no space between them */ #main-menu .menuTopRowMarginsR a { padding: 7px 0px; height: 50px; } /* Top row social icon padding is different too, must be taller for bottom row! */ #main-menu .menuBotRowMargins { margin: 0px 34px; } /* Bottom row menu items, space them out, menu.php reduces it if displaying "ADMIN/D&O" */ #main-menu .menuBotRowMargins > a > span.sub-arrow { display:none; } /* Bottom row menu item margin spacing eliminates the need for down arrow */ #main-menu .menuBotRowMargins > a { padding: 8px 16px; } /* Bottom row, pad menu items so when hovered more than menu name goes green */ /* Bottom row menu items have submenus that default to being left aligned with the menu item, instead center the submenu below the menu item */ #main-menu .submenuAbo { margin-left: -95px !important; } /* ABOUT US */ #main-menu .submenuAct { margin-left: -97px !important; } /* ACTIVITIES */ #main-menu .submenuMem { } /* MEMBERS (initially let SmartMenus position the submenu) */ #main-menu .submenuAdm { margin-left: -54px !important; } /* ADMIN */ #main-menu .submenuDan { margin-left: -132px !important; } /* D & O */ /* Bottom row menus have dropdown submenus with an upward pointer, center upward pointer over the submenu */ #main-menu .upArrowAbo::before { left:145px; } /* ABOUT US */ #main-menu .upArrowAct::before { left:152px; } /* ACTIVITIES */ #main-menu .upArrowMem::before { left:209px; } /* MEMBERS (initially not centered) */ #main-menu .upArrowAdm::before { left: 90px; } /* ADMIN */ #main-menu .upArrowDan::before { left:159px; } /* D & O */ #main-menu .topMinus32 { top: -32px !important; } /* Move the IT Director submenu up some */ #main-menu { padding: 0px !important; border-radius: 0px !important; } /* Over ride global settings */ #main-menu { max-width:560px; } } /* ================================================== NARROR Laptop / Desktop ================================================================== */ /* 769 <= screen width <= 919 */ /* iOS and Android ignore scrollbar settings only do them on laptop/desktop. Also, when scrollbars are displayed they are part of your width! */ @media only screen and (min-width: 769px) { /* Got these from https://css-tricks.com/the-current-state-of-styling-scrollbars/ */ ::-webkit-scrollbar { width: var(--scrollBarWidth); } ::-webkit-scrollbar-track { background: var(--scrollbarBG); border-radius: 6px; } ::-webkit-scrollbar-thumb { background-color: var(--scrollbarFG); border-radius: 6px; border: 3px solid var(--scrollbarBG); } textarea { resize: vertical; } } /* Borders - only display them if 72px or more wider than iPad (if --scrollBarWidth(19px) scrollbar it's 53px or more) */ @media only screen and (min-width: 840px) { #bordersOnWideDisplays { width: 784px; margin-left: -392px; display: block; /* 16px wider than iPad */ z-index: -1000; position: fixed; height: 100vh; left: 50%; box-shadow: 0 0 11px 11px rgba( 89, 99, 53, 0.18); } header, #menuContainer, #carouselContainer, footer, main, .widthMain { width: 768px; /* iPad width minus 00px */ } main, .widthMain { width: 768px; /* iPad width minus 00px */ } } @media (prefers-color-scheme: dark) { #bordersOnWideDisplays { box-shadow: 0 0 11px 11px rgba(191, 201, 155, 0.18); } /* add hex 66 (102 decimal) to each color to lighten it up */ } /* Not logged in laptop/desktop, below the menu word center the submenu, and for MEMBERS stop SmartMenus from shifting it right any more */ @media only screen and (min-width: 920px) { #main-menu .submenuAbo { margin-left: -84px !important; } } /* ABOUT US */ @media only screen and (min-width: 920px) { #main-menu .submenuAct { margin-left: -91px !important; } } /* ACTIVITIES */ @media only screen and (min-width: 920px) { #main-menu .submenuMem { margin-left: -128px !important; } } /* MEMBERS */ @media only screen and (min-width: 940px) { #main-menu .submenuMem { margin-left: -117px !important; } } /* MEMBERS */ @media only screen and (min-width: 960px) { #main-menu .submenuMem { margin-left: -107px !important; } } /* MEMBERS */ @media only screen and (min-width: 980px) { #main-menu .submenuMem { margin-left: -97px !important; } } /* MEMBERS */ /* Not logged in laptop/desktop, MEMBERS submenu, as screen gets wider SmartMenus keeps submenu on right edge, shift upward pointer left to keep it centered */ @media only screen and (min-width: 800px) { #main-menu .upArrowMem::before { left:195px; } } /* larger moves it right */ @media only screen and (min-width: 820px) { #main-menu .upArrowMem::before { left:185px; } } @media only screen and (min-width: 840px) { #main-menu .upArrowMem::before { left:175px; } } @media only screen and (min-width: 860px) { #main-menu .upArrowMem::before { left:164px; } } @media only screen and (min-width: 880px) { #main-menu .upArrowMem::before { left:153px; } } @media only screen and (min-width: 900px) { #main-menu .upArrowMem::before { left:140px; } } @media only screen and (min-width: 920px) { #main-menu .upArrowMem::before { left:187px; } } /* larger fonts @920 so jump back up */ @media only screen and (min-width: 940px) { #main-menu .upArrowMem::before { left:176px; } } @media only screen and (min-width: 960px) { #main-menu .upArrowMem::before { left:165px; } } @media only screen and (min-width: 980px) { #main-menu .upArrowMem::before { left:156px; } } /* ================================================== WIDE Laptop / Desktop ==================================================================== */ /* 920 <= screen width */ @media only screen and (min-width: 920px) { #main-menu .menuBotRowMargins > a { padding: 4px 16px; } /* Bottom row, pad menu items so when hovered more than menu name goes green */ #menuCalendar, #menuJoinRenew, #menuLogInOut { font:normal 24px Verdana; /* 1st row of main menu items, a little bigger */ } #menuAboutus, #menuActivities, #menuMembers, #menuAdmin, #menuDandO { font:normal 34px bebas; /* 2nd row of main menu items, use narrow tall font. */ } #carouselContainer { max-height:323px; } #bordersOnWideDisplays { display:none; } header, #menuContainer, #carouselContainer, main, .widthMain, button, file, select, input, textarea, footer { font-size: 19px; } header, #menuContainer, #carouselContainer, footer { width: 920px; /* width minus 00px */ } main, .widthMain { width: 900px; } /* width minus 20px */ #main-menu { max-width:710px; } #main-menu .menuTopRowMarginsL { margin: 3px 33px 0px 33px; } #main-menu .menuBotRowMargins { margin: 0px 50px; } #main-menu .submenuDan { margin-left: -105px !important; } /* D & O */ #main-menu .upArrowDan::before { left:138px; } /* D & O */ } /* Borders - only display them if 72px or more wider than wide Laptop / Desktop (if --scrollBarWidth(19px) scrollbar it's 53px or more) */ @media only screen and (min-width: 992px) { #bordersOnWideDisplays { width: 936px; margin-left: -468px; display: block; } /* 16px wider than iPad */ header, #menuContainer, #carouselContainer, footer, main, .widthMain { width: 920px; /* wide Laptop / Desktop width minus 00px */ } } /* ================================================== Print ==================================================================================== */ @media print { body, header, #menuContainer, #carouselContainer, main, .widthMain, footer { background-color: #FFF; } body { width: 790px; margin: 0 auto; } /* Min is 780 so logo & WMC fit on line 1, override this if a page needs to be wider */ #headerPrint { padding-top:50px; padding-bottom:15px; } #printInner { width:100%; } /* must do 100% or it displays printName on 2 lines */ #printLogo { float:left; width:200px; height:200px; padding-right:25px; } #printName { font-size: 34px; font-weight: bold; line-height:1.15; padding-top: 30px; } #printTitle { font-size: 33px; font-weight: bold; line-height:1.15; padding-top: 20px; font-variant: small-caps; } main { margin: 0 auto; } } @media print { .screenOnly { display:none !important; } } @media screen { .printOnly { display:none !important; } } /* ================================================== Misc ===================================================================================== */ @media only screen and (max-width: 767.9px) { /* if <= 767.9 wide then hide it, else is >= 768 so display it (Chrome does 767.2 so the ".9" matters... */ .hideOnPhones { display:none !important; } } @media only screen and (min-width: 768px) { /* if >= 768 wide then hide it, else is <= 767 so display it */ .hideOnTablets { display:none !important; } } .width97Percent { width: 97%; } .width100Percent { width: 100%; } /* see demo in public_html/demo-centering.html */ .centerText { text-align: center; } /* Centers h1, spans, a div w/ just text, text w/in tables, ... (non-block stuff) */ .centerContainer1of2 { text-align: center; } /* Will center what ever you give it, but do .textAlignLeft */ .centerContainer2of2 { display: inline-block; } /* if you don't want your text centered! */ .centerMargin0Auto { margin: 0 auto; width:90px; } /* MUST override width! */ .centerMarginLRAuto { margin-left: auto; margin-right: auto; } /* MUST specify width! Will center tables w/o width though! */ .centerAbsPosition { position:absolute; left:50%; margin-left:-45px; width:90px; } /* MUST override last two! */ .centerIt { position:relative; left:50%; transform: translateX(-50%); white-space: nowrap; background-color: var(--bodyBG ); } /* Bret previous line is a game changer! review all previous ones!! */ .textAlignLeft { text-align: left; } .textAlignRight { text-align: right; } .textAlignJustify { text-align: justify; } .verticalAlignTop { vertical-align: top; } .verticalAlignMiddle { vertical-align: middle; } .verticalAlignBottom { vertical-align: bottom; } .p0 { padding: 0px; } .pt0 { padding-top: 0px; } .pt5 { padding-top: 5px; } .pr0 { padding-right: 0px; } .pr10 { padding-right: 10px; } .pb0 { padding-bottom: 0px; } .pb5 { padding-bottom: 5px; } .pl0 { padding-left: 0px; } .pl10 { padding-left: 10px; } .pl20 { padding-left: 20px; } .pl35 { padding-left: 35px; } .pl50 { padding-left: 50px; } .px0 { padding-left: 0px; padding-right: 0px; } .py0 { padding-top: 0px; padding-bottom: 0px; } .p5 { padding: 5px; } .p10 { padding: 10px; } .p15 { padding: 15px; } .p20 { padding: 20px; } .m0 { margin: 0px; } .mt0 { margin-top: 0px; } .mt20 { margin-top: 20px; } .mt50 { margin-top: 50px; } .mr0 { margin-right: 0px; } .mb0 { margin-bottom: 0px; } .mb5 { margin-bottom: 5px; } .ml0 { margin-left: 0px; } .ml20 { margin-left: 20px; } .mx0 { margin-left: 0px; margin-right: 0px; } .my0 { margin-top: 0px; margin-bottom: 0px; } .m5 { margin: 5px; } .m10 { margin: 10px; } .fontSize10 { font-size: 10px; } .fontSize11 { font-size: 11px; } .fontSize12 { font-size: 12px; } .fontSize13 { font-size: 13px; } .fontSize14 { font-size: 14px; } .fontSize15 { font-size: 15px; } .fontSize16 { font-size: 16px; } .fontSize17 { font-size: 17px; } .fontSize18 { font-size: 18px; } .fontSize19 { font-size: 19px; } .fontSize20 { font-size: 20px; } .fontSize32 { font-size: 32px; } .fontColorWhite { color: white; } .fontColorRed { color: var(--fontColorRed); } .fontColorBlue { color: var(--fontColorBlue); } .fontColorDimGray { color: DimGray; } .fontColorTwoLinks { color: #0000FF; } @media (prefers-color-scheme: dark) { .fontColorTwoLinks { color: #AAAAFF; } } .bold { font-weight: bold; } .italic { font-style: italic; } .noWrap { white-space: nowrap; } .floatLeft { float: left; } .floatRight { float: right; } .displayInlineBlock { display: inline-block; } .displayNone { display: none; } .catIcon { font-variant: small-caps; font-weight: bold; letter-spacing: 1px; vertical-align: middle; padding: 1px; margin-right: 6px; } .catCB { margin-left: 15px; margin-right: 3px; vertical-align: middle; } @media screen and (min-width: 667px) { /* iPhone SE rotated width, and anything wider than it */ .catIcon { letter-spacing: 3px; } } .textBox, /* Every file upload, Activity Directory, Waiver Form(initials), Trip Report sub by */ .tableHeading { /* Trip Reports:4 headings; GearSwap: column headings (use "th" to center & "td" for left aligned */ color: var(--tableHeadingText); background-color: var(--tableHeadingBG); border: 1px solid var(--tableHeadingBorder); font-weight: bold; font-style: italic; padding: 2px 5px; } .colHdg { /* Display/Edit Memberships, CrCardDonate, CrCarTranNew, MemDir, */ font-style: italic; color: var(--tableHeadingText); background-color: var(--tableHeadingBG); text-align: center; border: outset var(--tableHeadingBG); cursor: pointer; /* sortable column data */ } .data { text-align: left; } .number { text-align: right; } .editUserError { background-color: #ECE9D8; border: 1px solid #888888; color: red; } main a, .wrapLongUrls { word-wrap: break-word; word-break: break-word; /* Instead use this non-standard one: */ hyphens: auto; } .clearfix::after { content: ""; clear: both; display: table; } .imgResize { width:100%; height:auto; object-fit:cover; } .fileUploadProgress { padding: 10px 0px 0px 0px; } .fileUploadProgressBar { justify-content: center; color: var(--tableHeadingText); background-color: var(--tableHeadingBG); text-align: center; white-space: nowrap; float: left; width: 0%; height: 100%; -webkit-box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%); -webkit-transition: width .6s ease; transition: width .6s ease; border-radius: 8px; } input[type="text" ]:focus, input[type="email" ]:focus, input[type="button" ]:focus, input[type="password"]:focus, select:focus, button:focus, input.button:focus, textarea:focus { border-color: #4787b1; box-shadow: 0 0 5px 1px var(--pageTitleText);; outline: 0; } /* When submitting forms that take time to output the next webpage hide the button text and display a spinner inside the button. * https://dev.to/dcodeyt/create-a-button-with-a-loading-spinner-in-html-css-1c0h lead to https://www.youtube.com/watch?v=GWw4qxF62hA, * this one does it for all forms https://www.bram.us/2020/11/04/preventing-double-form-submissions/ */ .spinbutton { position: relative; outline: none; cursor: pointer; } .spinbutton:active { background: #007a63; } .spinbutton--loading .spinbutton__text { visibility: hidden; opacity: 0; } .spinbutton--loading::after { content: ""; position: absolute; width: 16px; height: 16px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 4px solid transparent; border-top-color: var(--bodyText); border-radius: 50%; animation: spinbutton-loading-spinner 1s ease infinite; } .spinbutton--loading:hover::after { border-top-color: var(--bodyBG); } @keyframes spinbutton-loading-spinner { from { transform: rotate(0turn); } to { transform: rotate(1turn); } } /* Webpages that are slow to finish outputing all their data can output a spinning loader inside a "
", * a long HTML comment, PHP flush(), do slow stuff, output CSS to "display: none;", ... */ .loader { animation:spin 1s ease infinite; margin:15px; border:6px solid var(--menuBG); border-top:6px solid var(--pageTitleText); border-radius:50%; width:25px; height:25px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Make text glow. First used in admin/emailNotLoggedIn.php */ .glow { animation: glow .3s ease-in-out infinite alternate; } @-webkit-keyframes glow { from { text-shadow: 0 0 05px #ffffff, 0 0 10px #ffffff, 0 0 15px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073; } to { text-shadow: 0 0 15px #ffffff, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6, 0 0 40px #ff4da6, 0 0 45px #ff4da6; } } /* smartmenus110/css/sm-core-css.css */ /* Mobile first layout SmartMenus Core CSS (it's not recommended editing these rules) You need this once per page no matter how many menu trees or different themes you use. -------------------------------------------------------------------------------------------*/ .sm{box-sizing:border-box;position:relative;z-index:9999;-webkit-tap-highlight-color:rgba(0,0,0,0);} .sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left;} .sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;} .sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;} .sm ul{display:none;} .sm li,.sm a{position:relative;} .sm a{display:block;} .sm a.disabled{cursor:default;} .sm::after{content:"";display:block;height:0;font:0px/0 serif;clear:both;overflow:hidden;} .sm *,.sm *::before,.sm *::after{box-sizing:inherit;} /* smartmenus110/css/sm-hamburger.css */ .main-menu-btn { float: right; /* added this line and next to move hamburger to right */ margin: 10px; position: relative; display: inline-block; width: 28px; height: 28px; text-indent: 28px; white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); } /* hamburger icon */ .main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after { position: absolute; top: 50%; left: 2px; height: 2px; width: 24px; background: #e2dcb5 /* #bbb */; -webkit-transition: all 0.25s; transition: all 0.25s; } .main-menu-btn-icon:before { content: ''; top: -7px; left: 0; } .main-menu-btn-icon:after { content: ''; top: 7px; left: 0; } /* x icon */ #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon { height: 0; background: transparent; } #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* hide menu state checkbox (keep it visible to screen readers) */ #main-menu-state { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip: rect(1px,1px,1px,1px); } /* hide the menu in mobile view */ #main-menu-state:not(:checked) ~ #main-menu { display: none; } #main-menu-state:checked ~ #main-menu { display: block; } /* Added this mobile rule, lines added for the reasons given */ @media (max-width: 767px) { #main-menu { width:100%; /* Make the menu full width, not just what it needs */ overflow-y: scroll; /* If the menus are expanded bigger than the viewport it needs to be scrollable */ height: calc(100vh - 50px); /* Have to set the height to be scrollable, must exclude height of menuContainer */ } } @media (min-width: 768px) { /* hide the button in desktop view */ .main-menu-btn { position: absolute; top: -99999px; } /* always show the menu in desktop view */ #main-menu-state:not(:checked) ~ #main-menu { display: block; } } /* Added next 4 CSS rules, copied from the demo webpage */ .nav-brand { float: left; margin: 0px; height: 50px; background-color: var(--menuBG); } .nav-brand a { display: block; padding: 10px 10px 10px 10px /* 20px */; color: #e2dcb5; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: normal; line-height: 29px; text-decoration: none; } @media (min-width: 360px) { .nav-brand a { padding: 10px 10px 10px 20px; font-size: 26px; } } /* smartmenus110/css/sm-clean/sm-clean.css */ .sm-clean { background: var(--menuBG) /* #eeeeee */ ; border-radius: 0px /* 5px */; } .sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active { padding: 11px 10px /* 20px */; /* make room for the toggle button (sub indicator) */ padding-right: 40px /* 58px */; color: var(--menuText) /* 555555 */ ; font-family: Verdana /* added Verdana */, "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Arial, sans-serif; font-size: 18px; font-weight: normal; line-height: 17px; text-decoration: none; } /* Added next CSS rule */ @media (min-width: 360px) { .sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active { padding: 13px 20px; } } .sm-clean a.current { color: #D23600; } .sm-clean a.disabled { color: #bbbbbb; } .sm-clean a .sub-arrow { position: absolute; top: 50%; margin-top: -17px; left: auto; right: 2px /* 4px */; width: 34px; height: 34px; overflow: hidden; font: bold 16px/34px monospace !important; text-align: center; text-shadow: none; background: rgba(255, 255, 255, 0.5); border-radius: 5px; } .sm-clean a .sub-arrow::before { content: '+'; } .sm-clean a.highlighted .sub-arrow::before { content: '-'; } .sm-clean > li:first-child > a, .sm-clean > li:first-child > :not(ul) a { border-radius: 5px 5px 0 0; } .sm-clean > li:last-child > a, .sm-clean > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul { border-radius: 0 0 5px 5px; } .sm-clean > li:last-child > a.highlighted, .sm-clean > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted { border-radius: 0; } .sm-clean li { border-top: 1px solid rgba(255, 255, 255, 0.15 /* 0, 0, 0, 0.05 */); background: unset; /* prevent other 'li' background settings from affecting this one */ } .sm-clean > li:first-child { /* border-top: 0; */ } .sm-clean ul { background: rgba(162, 162, 162, 0.2 /* 0.1 */); background: var(--menuBG2); /* above rule just grayed things out, instead darker... */ } @media (max-width: 767px) { .sm-clean ul ul { background: var(--menuBG3); /* and darker... */ } } .sm-clean ul a, .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active { font-size: 16px; border-left: 8px solid transparent; } /* Added next rule */ @media (max-width: 767px) { .sm-clean ul a, .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active { border-left: 12px solid transparent; } } .sm-clean ul ul a, .sm-clean ul ul a:hover, .sm-clean ul ul a:focus, .sm-clean ul ul a:active { border-left: 16px solid transparent; } /* Added next rule */ @media (max-width: 767px) { .sm-clean ul ul a, .sm-clean ul ul a:hover, .sm-clean ul ul a:focus, .sm-clean ul ul a:active { border-left: 24px solid transparent; } } .sm-clean ul ul ul a, .sm-clean ul ul ul a:hover, .sm-clean ul ul ul a:focus, .sm-clean ul ul ul a:active { border-left: 24px solid transparent; } .sm-clean ul ul ul ul a, .sm-clean ul ul ul ul a:hover, .sm-clean ul ul ul ul a:focus, .sm-clean ul ul ul ul a:active { border-left: 32px solid transparent; } .sm-clean ul ul ul ul ul a, .sm-clean ul ul ul ul ul a:hover, .sm-clean ul ul ul ul ul a:focus, .sm-clean ul ul ul ul ul a:active { border-left: 40px solid transparent; } @media (min-width: 768px) { /* Switch to desktop layout ----------------------------------------------- These transform the menu tree from collapsible to desktop (navbar + dropdowns) -----------------------------------------------*/ /* start... (it's not recommended editing these rules) */ .sm-clean ul { position: absolute; width: 12em; } .sm-clean li { float: left; } .sm-clean.sm-rtl li { float: right; } .sm-clean ul li, .sm-clean.sm-rtl ul li, .sm-clean.sm-vertical li { float: none; } .sm-clean a { white-space: nowrap; } .sm-clean ul a, .sm-clean.sm-vertical a { white-space: normal; } .sm-clean .sm-nowrap > li > a, .sm-clean .sm-nowrap > li > :not(ul) a { white-space: nowrap; } /* ...end */ .sm-clean { padding: 0 10px; background: var(--menuBG) /* #eeeeee */ ; border-radius: 100px; } .sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted { padding: 12px 12px; color: var(--menuText) /* 555555 */; border-radius: 4px /* 0 */ !important; } .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted { color: var(--menuText) /* D23600 */ ; background: var(--menuBGHov); } .sm-clean a.current { color: #D23600; } .sm-clean a.disabled { color: #bbbbbb; } .sm-clean a.has-submenu { padding-right: 24px; } .sm-clean a .sub-arrow { top: 50%; margin-top: -2px; right: 12px; width: 0; height: 0; border-width: 4px; border-style: solid dashed dashed dashed; border-color: #555555 transparent transparent transparent; background: transparent; border-radius: 0; } .sm-clean a .sub-arrow::before { display: none; } .sm-clean li { border-top: 0; } .sm-clean > li > ul::before /*, .sm-clean > li > ul::after */ { content: ''; position: absolute; top: -18px; left: 30px; width: 0; height: 0; overflow: hidden; border-width: 9px; border-style: dashed dashed solid dashed; border-color: transparent transparent #bbbbbb transparent; } .sm-clean > li > ul::after { top: -16px; left: 31px; border-width: 8px; border-color: transparent transparent #fff transparent; } .sm-clean ul { border: 1px solid #bbbbbb; padding: 2px /* 5px */ 0; background: var(--menuBG) /* fff */; border-radius: 5px !important; box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2); } .sm-clean ul a, .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted { border: 0 !important; padding: 10px 9px 10px 9px /* 10px 20px */; color: var(--menuText) /* 555555 */; } .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted { background: var(--menuBGHov) /* #eeeeee */ ; color: var(--menuText) /* D23600 */; } .sm-clean ul a.current { color: #D23600; } .sm-clean ul a.disabled { background: #fff; color: #cccccc; } .sm-clean ul a.has-submenu { padding-right: 25px; } .sm-clean ul a .sub-arrow { right: 8px; top: 50%; margin-top: -5px; border-width: 5px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent var(--menuText) /* 555555 */; } .sm-clean .scroll-up, .sm-clean .scroll-down { position: absolute; display: none; visibility: hidden; overflow: hidden; background: #fff; height: 20px; } .sm-clean .scroll-up:hover, .sm-clean .scroll-down:hover { background: var(--menuBG) /* #eeeeee */ ; } .sm-clean .scroll-up:hover .scroll-up-arrow { border-color: transparent transparent #D23600 transparent; } .sm-clean .scroll-down:hover .scroll-down-arrow { border-color: #D23600 transparent transparent transparent; } .sm-clean .scroll-up-arrow, .sm-clean .scroll-down-arrow { position: absolute; top: 0; left: 50%; margin-left: -6px; width: 0; height: 0; overflow: hidden; border-width: 6px; border-style: dashed dashed solid dashed; border-color: transparent transparent #555555 transparent; } .sm-clean .scroll-down-arrow { top: 8px; border-style: solid dashed dashed dashed; border-color: #555555 transparent transparent transparent; } .sm-clean.sm-rtl a.has-submenu { padding-right: 12px; padding-left: 24px; } .sm-clean.sm-rtl a .sub-arrow { right: auto; left: 12px; } .sm-clean.sm-rtl.sm-vertical a.has-submenu { padding: 10px 20px; } .sm-clean.sm-rtl.sm-vertical a .sub-arrow { right: auto; left: 8px; border-style: dashed solid dashed dashed; border-color: transparent #555555 transparent transparent; } .sm-clean.sm-rtl > li > ul::before { left: auto; right: 30px; } .sm-clean.sm-rtl > li > ul::after { left: auto; right: 31px; } .sm-clean.sm-rtl ul a.has-submenu { padding: 10px 20px !important; } .sm-clean.sm-rtl ul a .sub-arrow { right: auto; left: 8px; border-style: dashed solid dashed dashed; border-color: transparent #555555 transparent transparent; } .sm-clean.sm-vertical { padding: 10px 0; border-radius: 5px; } .sm-clean.sm-vertical a { padding: 10px 20px; } .sm-clean.sm-vertical a:hover, .sm-clean.sm-vertical a:focus, .sm-clean.sm-vertical a:active, .sm-clean.sm-vertical a.highlighted { background: #fff; } .sm-clean.sm-vertical a.disabled { background: var(--menuBG) /* #eeeeee */ ; } .sm-clean.sm-vertical a .sub-arrow { right: 8px; top: 50%; margin-top: -5px; border-width: 5px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #555555; } .sm-clean.sm-vertical > li > ul::before, .sm-clean.sm-vertical > li > ul::after { display: none; } .sm-clean.sm-vertical ul a { padding: 10px 20px; } .sm-clean.sm-vertical ul a:hover, .sm-clean.sm-vertical ul a:focus, .sm-clean.sm-vertical ul a:active, .sm-clean.sm-vertical ul a.highlighted { background: var(--menuBG) /* #eeeeee */ ; } .sm-clean.sm-vertical ul a.disabled { background: #fff; } }