/* File: common.css Author: Arthur L. Farnsworth Purpose: Cascading stylesheet for Nancy's Liv-N-Rejuvenate site Created: 25 Sep 2026 From livnrejuvenate.css by splitting off page-specific code Revisions: 04 Oct 2026 Add multi-page form class code 05 Oct 2026 Comment out idRequestResponse* IDs as I know not why they're there! NOT USED. Comments: This is the CSS that is common to all pages */ /* Make available the custom fonts */ @font-face { font-family: 'Gotham Light'; src: url('../fonts/gotham light regular.otf') format('opentype'); } @font-face { font-family: 'Zapfino'; /* Put in unnecessary quotes on 8/31 */ src: url('../fonts/zapfino.ttf') format('truetype'); /* TTF for Safari, Android, iOS */ } /* The following class is used on all pages */ .clsSTMC { /* For "Skip to main content" links only available on hit */ position: absolute; left: -500px; /* Reduced from 1000px on 5/12/2026 to experiment */ } /* HTML element type selectors First, the BODY tag, which encompasses the HEADER, MAIN, and FOOTER sections */ BODY { background-color: rgb(51,255,153); /* The nice light green */ border: 15px solid rgb(51,255,153); /* 8/13 per NCL request */ color: black; /* Text color = black */ font-family: 'Gotham Light', sans-serif; /* Gotham or yuck */ -webkit-font-smoothing: antialiased; /* Trying on 5/20/26 for Apple-based Zapfino issue */ -moz-osx-font-smoothing: grayscale; /* Trying on 5/20/26 for Apple-based Zapfino issue, on W10 box "Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped." */ } HEADER { /* This encompasses the page title/subtitle areas */ background-color: rgb(51,255,153); /* The nice light green */ font-family: Zapfino, sans-serif; text-align: center; } HEADER H1 { /* The default (i.e. mobile) setting */ border: 10px solid yellow; font-size: 100%; font-weight: bold; height: 1.5em; /* 8/22: was 24px */ margin-top: 0em; /* Was -10px; before normalize.css */ padding-bottom: 0em; /* 0em is fine for Windows platform, but not for MacIntel, where it needs to be 1.5em (tested to look good in Firefox and Safari) */ padding-top: 2em; /* 8/22: was 32px 2em is fine for Windows platform, but should be 1.5em (to match padding-bottom) on Mac OS, so added to JS code */ } HEADER H2 { font-size: 94%; /* 8/17 was 150%; */ font-weight: bold; height: 3.75em; /* 8/22: was 60px; */ margin-top: 3em; } @media screen and (min-width:760px) { HEADER H1 { border: 12.5px solid yellow; font-size: 125%; font-weight: bold; height: 1.5em; /* 8/22: was 24px */ margin-top: 0em; /* Was -10px; before normalize.css */ padding-bottom: 0em; /* 0em is fine for Windows platform, but not for MacIntel, where it needs to be 1.5em (tested to look good in Firefox and Safari) */ padding-top: 2em; /* 2em is fine for Windows platform, but should be 1.5em (to match padding-bottom) on Mac OS, so added to JS code */ } HEADER H2 { font-size: 122%; /* 8/17 was 150%; */ font-weight: bold; height: 3.75em; /* 8/22: was 60px; */ margin-top: 3em; } } @media screen and (min-width:868px) { /* min-widths appear in ascending order. Here is for big screen (or iPhone landscape mode) */ HEADER H1 { border: 15px solid yellow; font-size: 200%; font-weight: bold; height: 1.5em; margin-top: 0em; /* Was -10px; before normalize.css */ padding-bottom: 0em; /* 0em is fine for Windows platform, but not for MacIntel, where it needs to be 1.5em (tested to look good in Firefox and Safari) */ padding-top: 2em; /* 2em is fine for Windows platform, but should be 1.5em (to match padding-bottom) on Mac OS, so added to JS code */ } HEADER H2 { font-size: 150%; font-weight: bold; height: 3.75em; margin-top: 3em; } } /* After the HEADER page title and subtitle areas, move down to the NAV bar */ NAV A { /* Default styling for anchor links in NAV section. Testing on 1/24/26 (code from A.Nav:link below). */ background-color: yellow; border: 1px solid black; border-radius: 8px; color: black; /* Text color */ font-size: 100%; padding: 5px; text-align: center; /* Horizontal alignment */ text-decoration: none; /* Added 1/17/26 per Chuck's class */ } .NavBar { /* This is the parent. Flex code added for testing on 1/24/26 */ background-color: rgb(51,255,153); /* 8/13 */ display: flex; flex-direction: row; /* =default direction */ flex-wrap: wrap; /* RD update */ justify-content: space-evenly; list-style-type: none; /* Kill the LI markers */ margin-bottom: 32px; /* Added 8/19 for more green space */ row-gap: 15px; /* RD update */ } .NavItem { /*display: inline-block; /* Original NavItem code *//* Put 'em side by side. inline-block also hides the
  • symbols. */ /*width: 15%; /* Original NavItem code */ /*border: 1px solid black;*/ /* border-radius: 8px;*/ } .CurrentNavItem { /* Add this for testing on 1/21/2026 based on Coursera lesson */ /*background-color: White;/* /* Didn't fill the button w/ curved corners, just the rectangle */ /*border: 3px solid black;*/ text-transform: uppercase; /*font-size: 150%;*/ /* Out 1/24/26 */ font-weight: bold; } A.Nav:link { /* A normal, unvisited link */ /* background-color: rgb(255,255,0); /* = #FFFF00, Yellow */ /* border: 1px solid rgb(0,0,0); /* black; */ /* border-radius: 8px; color: black; /* Text color */ /* display: inline-block;*/ /* font-size: 100%; padding: 5px; text-align: center; /* Horizontal alignment */ /* text-decoration: none; /* Added 1/17/26 per Chuck's class */ } A.Nav:visited { /* A link the user has visited */ font-size: 100%; font-weight: normal; } A.Nav:hover { /* A link when the user mouses over it. MUST come after a:link and a:visited. */ font-size: 125%; font-weight: bold; } A.Nav:focus { /* A link when the user tabs to it */ font-size: 100%; font-weight: bold; } A.Nav:active { /* A link the moment it is clicked. MUST come after a:hover. */ background-color: white; font-weight: bold; } .clsPageIntroParagraph { /* This is for the introduction (description) paragraph at the top of most pages */ margin-bottom: 3rem; margin-left: 1rem; /* Change the following three items from em to rem */ margin-right: 1rem; margin-top: 0rem; /* 8/24 down from 3rem after adding t/b padding to MAIN */ } #idCustom404Page { font-size: 200%; margin-left: 5em; margin-right: 5em; margin-top: 5em; text-align: center; } #idRequestResponseDiv { font-size: 125%; /* margin-left: 5em;*/ /* margin-right: 5em;*/ margin-top: 1em; padding: 2em; } /* #idRequestResponseTable { /* NOT USED on 10/5/26 */ /* border: 3px double black; margin-bottom: 3em; margin-left: auto; /* Was 32% */ /* margin-right: auto; /* New on 5/1 */ /* margin-top: 3em; width: auto; }*/ /* #idRequestResponseTableLeftColumn { /* NOT USED on 10/5/26 */ /* border-right: 2px solid black; color: black; font-weight: bold; padding-left: 0.5em; padding-right: 1em; text-align: left; }*/ /* #idRequestResponseTableRightColumn { /* NOT USED on 10/5/26 */ /*border-left: 1px solid black;*/ /* font-weight: normal; padding-left: 1em; padding-right: 0.5em; text-align: left; }*/ /* #idRequestResponseReturnButton { /* NOT USED on 10/5/26 */ /* display: block; margin: 0 auto; width: 18em; /*font-size: 125%; margin-left: 37% ; margin-top: 1em; /*padding: 2em;*/ /* } */ /* The following four classes are used for the question submittal form on the podcast page and the event request form on the bookings page */ .clsFormTitle { /* I used the inspector to get all of these! */ border: 1px solid black; font-size: larger; font-weight: bold; margin-bottom: 32px; padding: 3px 0px; /* T&B L&R */ text-align: center; } .clsFormTextInput { /* For Name and E-mail TEXT fields */ box-sizing: border-box; width: 80%; /* Leave space for LABELs and asterisks */ } .clsFormTA { /* For Notes TEXTAREA field */ box-sizing: border-box; width: 90%; } .clsFormButtons { margin-bottom: 1em; margin-top: 2em; text-align: center; } MAIN { background-color: WHITE; /* 8/10 NCL request */ padding-bottom: 10px; /* 8/24 to avoid content pushing right up against the green */ padding-top: 10px; } /* MAIN H1 { /* Used on About Us page MOVED BELOW 8/24 as need :<( small and large versions thereof */ /* border: 1px solid black; font-size: 150%; font-weight: bold; margin-left: 5%; margin-right: 5%; margin-top: 1em; padding: 1em 0em; /* T&B, L&R */ /* text-align: center; width: 100%; }*/ MAIN H3 { /* For the Appointments page Testimonials section title */ font-family: Zapfino, sans-serif; font-size: 125%; font-weight: bold; height: 40px; margin-top: 5em; /* Changed from 3em 9/15/26 */ text-align: center; } FOOTER { font-size: 10pt; margin-top: 5em; /* Space it down from the main content */ text-align: center; }