. */ body { margin: 0; /* for #color-bar across top */ padding: 0; /* for #color-bar across top */ } /* The color bar across the top of the page. */ #color-bar { height: 7pt; background: var(--theme-color); margin-bottom: 4pt; } /* Page content goes inside a #container

to separate it from the element which has no margin or padding (see above). The "php_inc/header.php" include file opens the #container

, and the "php_inc/footer.php" file closes the

. */ #container { width: 100vw; max-width: 40em; margin: auto; /* centre in browser */ } /* Ensure some whitespace when browser window is collapsed to its narrowest. */ header, footer, main { padding: 6pt 18pt 6pt 18pt; } /* Header and footer elements are all centered. */ header, footer { text-align: center; } footer { padding-top: 3pt; font-size: .8em; color: var(--theme-color-dark); } /* Set the default text font, size, and color. */ body, input, textarea, button { font-family: var(--body-text); font-size: 10pt; line-height: 1.5em; } /* Minimum text size of 16px (12pt Verdana) is needed to stop Mobile Safari (and maybe other mobile browsers) from zooming the screen when a user starts to type in a form field. */ input, textarea { font-size: 12pt; } /********************************/ /* Site navigation menu */ /********************************/ nav { display: flex; justify-content: flex-end; position: relative; margin-right: 1em; } nav .icon-only-btn { font-size: 18pt; width: 1.7em; color: var(--theme-color); } #site-menu-btn.active { background-color: var(--white); border: 1px solid var(--theme-color); border-bottom: none; border-radius: var(--rc) var(--rc) 0 0; z-index: 2; box-shadow: 2px -3px 6px rgba(0, 0, 0, 0.1); margin-top: -1px; } .nav-menu { display: none; position: absolute; top: 98%; z-index: 1; font-family: var(--headings); font-weight: 500; letter-spacing: 0.5pt; color: var(--theme-color-dark); width: 15em; background: var(--white); border-radius: var(--rc); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } #site-menu.active { display: block; } .nav-menu a { display: block; font-size: 120%; padding: 6.5pt 9pt 5.5pt 9pt; border: 1px solid var(--theme-color); border-top: none; } .nav-menu a:first-of-type { border-top: 1px solid var(--theme-color); border-radius: var(--rc) 0 0 0; } .nav-menu a:last-of-type { border-radius: 0 0 var(--rc) var(--rc); } .nav-menu a:hover { background-color: var(--very-light-grey); cursor: pointer; } /*******************/ /* Links */ /*******************/ a:link, a:visited { color: var(--theme-color); text-decoration: none; } a:visited, footer a:link { color: var(--theme-color-dark); } a:hover { text-decoration: underline; } /* For links that should not look like links */ .disguised:link, .disguised:visited, .disguised:hover, .nav-menu a:link, .nav-menu a:visited, .nav-menu a:hover { color: inherit; /* Inherit the color from the parent element */ text-decoration: none; /* Remove the underline */ } /************************************/ /* Table of Contents styles */ /************************************/ .toc ul { list-style-type: none; padding-left: 2em; } /****************************/ /* Form elements */ /****************************/ input { height: 20pt; /* Consistent height for different input types */ accent-color: var(--theme-color); /* Set color for checkboxes, radio-buttons, et al. */ } /* Full-width and

elements */
.full-width { width: 100%; }
textarea.full-width { resize: vertical; }

/* Rounded corners */
input, textarea, .input-group,
#text-measure /* Style the hidden text-measure span to match */
{
    border-radius: var(--rc);
    padding: 3pt;
    background: transparent;
}

/* Input groups (add a group border and/or background color */
.input-group { margin: 2pt; }
.input-group.border { border: solid var(--light-grey) 1pt; }

/* Rounded corners for first and last inputs in row */
.input-row { display: flex; }
.input-row input {
    border-radius: 0px;
}
.input-row input:first-of-type {
    border-radius: var(--rc) 0px 0px var(--rc);
}
.input-row input:last-of-type {
    border-radius: 0px var(--rc) var(--rc) 0px;
}

label {
    font-size: 9pt;
    padding: 0pt 3pt; /* So it lines up with text in the field below it */
    color: var(--theme-color-dark);
}

/* To give labels a minimum width so <input> fields line up. */
.tab-width {
    display: inline-block;
    min-width: 28pt;
}

/* Form elements that are not editable or clickable are grey */
input:read-only {
  color: grey;
  border: none;
  cursor: default;
}

/*
    Forms with the "plain-text" class are designed to not look like forms,
    while providing editable data that can be submitted/acted on.
*/
/* No borders or outlines (on focus) for input elements */
.plain-text input,
.plain-text textarea {
    border: none;
    outline: none;
}

/* On focus, input elements get a light grey background */
.plain-text input:focus,
.plain-text textarea:focus,
.plain-text .input-row:focus-within input {
    background-color: var(--very-light-grey);
}

/* Horizontal rules above and below the two main forms */
#ics-form,
#user-input, .horizontal-borders {
  margin: 3pt -1em 6pt -1em; /* Negative left and right margins allow solid rule to extend. */
  padding: 6pt 1em 2pt; /* Left and right padding of 1em compensate for negative margins. */
  border-top: solid var(--theme-color-dark) 1pt;
  border-bottom: solid var(--theme-color-dark) 1pt;
}

/* Padding and margins for #user-input textarea to match the event form */
#user-input textarea {
    margin: 2pt;
    max-width: calc(100% - 5pt);
    padding: 6pt 9pt;
    height: 144pt;
}

/* Selector for the day <input> element, with ID "date-input" */
#ics-form #date-input,
#text-measure /* Style the hidden text-measure span to match */
{
    color: var(--black);
    font-weight: bold;
    text-align: center;
    margin-right: -4pt; /* Compensate for extra margin on "from" label */
}

#date-input {
  min-width: 5em;
}

/* Selectors for the "from" and "to" labels. */
#ics-form label[for="start"] {
    margin-left: 4pt; /* Extra left margin for when this wraps */
    padding-right: 0pt;
}
#ics-form label[for="end"] { padding-left: 0pt; padding-right: 0pt; }

/* Selectors for the "start" and "end" fields */
#ics-form input[name="start"],
#ics-form input[name="end"] {
    color: var(--black); /* Force black because iOS makes these blue. */
}

/* Selectors for fields in attendee rows in the ICS form. */
.input-row input[name="attendee-name"] {
    width: 32%;
}
.input-row input[name="attendee-email"] {
    width: calc(68% - 12pt); /* The remove row button is 12pt wide. */
}

/****************************/
/*         Buttons          */
/****************************/

/* No right-hand margin for the last button in a row or group */

button, .button {
  padding: 3pt 6pt;
  color: #fff;
  background-color: var(--theme-color);
  border: none;
  border-radius: var(--rc);
  box-shadow: 1px 1px 1px #ddd;
}
a.button {
  color: #fff;
  text-decoration: none;
}

/* Indicate that buttons are clickable */
button:hover { cursor: pointer; }

/* Give the default button among a group a border */
button.default {
    border: 1pt solid #660000;
}

button:disabled {
    color: grey;
    border: none;
    cursor: default;
}

/* Form buttons in the heading */
.plain-text .heading-button-row {
    margin-left: 12pt;
}

.icon-only-btn {
    color: var(--med-grey);
    background: none;
    border: 0;
    box-shadow: none;
    width: 10pt;
    padding: 0;
    margin-right: 0;
    margin-left: 2pt;
    /* display: none; */
}

.icon-only-btn:hover {
    color: var(--theme-color);
}

/* For the "back to input" button in the header of the results form */
#back-to-input:hover button { color: var(--theme-color); }
#back-to-input:hover { cursor: pointer; }

/*******************/
/*     Tables      */
/*******************/

table {
  border-collapse: collapse;
  width: 100%;
}

table, td {
  border: none;
}

th, tr {
  height: 2em;
}

th {
  background-color: var(--theme-color);
  color: #fff;
  border-right: 1px solid var(--white); /* White vertical border between header cells */
}

th:last-child {
  border-right: none; /* Remove border from the last header cell */
}

tr:last-child td {
  border-bottom: 1px solid var(--theme-color-dark); /* Solid theme-color-dark line at the bottom of the table */
}

/*******************/
/*    Headings     */
/*******************/

h1, h2, h3 {
  font-family: var(--headings);
  font-weight: 500;
  letter-spacing: 0.5pt;
  color: var(--theme-color-dark);
  margin: 12pt 0 3pt 0;
  line-height: normal;
}

h1 {
  font-size: 18pt;
}

h2 {
  font-size: 14pt;
  margin-bottom: 12pt;
}

h3, h4 {
  font-style: italic;
}

h4 { font-size: small; }

/*
  The <div> for the site name at the top of every page, except on
  the landing page where for semantic and SEO reasons it is an <h1>.
*/
.site-name {
  font-size: 26pt;
  letter-spacing: 1.4pt;
  line-height: 1em;
  font-family: var(--headings);
  font-weight: 500;
  color: var(--theme-color-dark);
  margin: 0pt 0 3pt 0;
}

/*
    Row across the top of a form; usually includes a heading or
    a title for the form, plus one or more right-aligned buttons.
*/
.heading-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.heading-row h2 {
  font-size: 12pt;
  font-weight: 500;
  margin-bottom: 3pt;
}

/* Container for buttons in a heading row at the top of a form. */
.heading-buttons {
    margin-bottom: 4pt;
    white-space: nowrap;
    /* Assumes heading buttons are at top right of form */
    margin-left: 1em;
    text-align: right;
}

/************************************/
/*     Paragraph and text styles    */
/************************************/

p, li, figcaption, table, tr, td,  address {
  margin: 0;
}

p { margin-bottom: 12pt; }

.centered { text-align: center; }

.fineprint {
  font-size: 8pt;
  color: var(--grey);
}

/*
    The "figcaption" element is for text below an image,
    both the <img> and the <figcaption> should be wrapped
    in a <figure> element.
*/
figcaption {
  text-align: center;
  color: #666666;
  font-size: 9pt;
  padding-bottom: 2pt;
}

/*
  To prevent superscripts and subscripts from affecting line-height.
    Copied from: https://css-tricks.com/snippets/css/
    prevent-superscripts-and-subscripts-from-affecting-line-height/
*/
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  line-height: 0;
}
sub { top: 0.4em; }

/*
  The classes "caps" and "init_cap" are used with <span> elements. "caps"
  produces elegantly formatted small caps, and "init_cap" is applied to the
  first character/letter of a paragraph.
      I could achieve a similar affect for the initial paragraph of a page
  using clever pseudo-elements like ::first-letter and ::first-line
*/
.caps, .init_cap {
  letter-spacing: .09em;
  text-transform: uppercase;
}
.caps { font-size: 0.9em; }
.init_cap { font-size: 1.2em; }

/***********************************************/
/*      Custom styles for CMS index pages      */
/***********************************************/

#faq .cms-pub-info { display: none; }

/***********************************************/
/*          404 and 405 Error pages            */
/***********************************************/
/*
  Error pages are (or will be) served from the /shared/
  directory, but they assume the same basic web page
  structure that all my sites use. As such, they have a
  <main> tag, with the class of "error-page" to allow
  custom styles for these pages.
*/
.error-page { text-align: center; }
.error-page h1 { margin: 1em 0em; }

/***********************************************/
/*     Images, figures, and highlight boxes    */
/***********************************************/

img {
  max-width: 100%;
  height: auto;
}

/*
   Images <img> can be wrapped in a <figure> element to allow
   a caption to be included.
*/
aside, figure {
  margin: 12pt auto; /* "auto" to center */
}

figure img { /* Ensure images fill their <figure> container. */
  width: 100%;
}

/*
  The "inverse" class changes <aside> elements to dark text on a white
  background; it also gives them a border (see below). Inverse <aside>
  elements are used on "fiction.php" for the links to the full stories.
*/
.inverse {
  background-color: var(--white);
  color: var(--theme-color-dark);
}

/*
  The "shadow" class adds a nice box-shadow effect. It is applied to
  some images and asides. The CSS for this is copied directly from W3schools.
*/
.shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media (max-width: 440px) {
    #user-input textarea {
        height: 164pt; /* Taller to match when date and time details wrap */
    }
}

/*
  Desktop devices (devices with mouse-pointer capabilities)
*/
@media (hover: hover) and (pointer: fine) {
  /* Reset font-size for form elements to the default size */
  input, textarea { font-size: 10pt; }
}