text, set large and bold. Riverain prefers Algerian font */
div.intro { font-family: Algerian, Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #62daeb;
padding: 0;
overflow: auto
}
p.intro { font-family: Algerian, Verdana, Arial, Helvetica, sans-serif;
font-size: 250%;
font-weight: normal;
margin: 10px;
padding: 0;
text-align: center;
}
/*****************************************************************************/
/* Navbar / Menu section - contained within the Introduction div */
/* Highlight the active selection and on mouseover */
/* Use
inline to give horizontal array */
div.navbar { font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
ul.navbar { list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #52cadb;
}
li.navbar { display: inline;
}
li.navbar a { display: inline;
color: black;
text-align: center;
padding: 15px 15px;
text-decoration: none;
}
li.navbar a:hover { background-color: white;
}
li.navbar a:hover:not(.active) {
background-color: white;
}
.active { background-color: #72eafb;
}
/*****************************************************************************/
/* Temporary Covid-19 div - the top of the page, full width */
/* Uses only text, set large and bold. and coloured */
div.covid { font-family: Verdana, Arial, Helvetica, sans-serif;
color: red;
background-image: none;
background-color: yellow;
padding: 0;
overflow: auto
}
p.covid { font-family: Verdana, Arial, Helvetica, sans-serif;
color: red;
font-weight: normal;
margin: 10px;
padding: 0;
text-align: center;
}
/*****************************************************************************/
/* Main body section - the left of those pages that have events & news divs */
/* Currently set to use 80% of width, leaving events & news to the right */
div.main { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #ffffff;
width: 78%;
padding-left: 2%;
padding-right: 2%;
float: left
}
h1.main { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 120%;
text-align: center;
text-decoration: none;
font-weight: bold;
}
h2.main { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 110%;
text-align: center;
text-decoration: none;
font-weight: bold;
}
p.main { text-align: justify;
margin: 20px 20px 20px 20px;
}
img.main { margin: 20px 20px 20px 20px;
}
table.main { width: 80%;
margin: auto;
background-color: #dedede;
text-align: center;
overflow-x: scroll;
}
tr.main:nth-child(even) { background-color: #f2f2f2; }
caption.main { font-size: 110%;
background-color: #dedede;
text-align: center;
font-weight: bold;
}
/*
td.main { padding-left: 2em;
text-align: center
}
*/
/* Must be in the order link/visited/hover/active */
a.main:link { color: blue; background-color: #ffffff; text-decoration: none; }
a.main:visited { color: blue; background-color: #ffffff; text-decoration: none; }
a.main:hover { color: blue; background-color: yellow; text-decoration: none; }
abbr.main { text-decoration: none;
}
/*****************************************************************************/
/* Flash div - the top right of those pages that use it, only used when a */
/* flash event is active. Uses remaining 20% of the width. */
div.flash { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #ffff99;
width: 14%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 1%;
float: right
}
h1.flash { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 110%;
text-align: center;
text-decoration: none;
font-weight: bold;
}
p.flash { text-align: left;
margin: 1px 1px 1px 1px;
}
/*****************************************************************************/
/* Upcoming events div - the top right of those pages that use it */
/* Uses remaining 20% of the width. */
/* Intended to only hold three events with */
div.events { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #fed59d;
width: 14%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 1%;
float: right
}
h1.events { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 110%;
text-align: center;
text-decoration: none;
font-weight: bold;
}
details.events { text-align: left;
margin: 10px 1px 1px 1px;
}
p.events { text-align: left;
margin: 1px 1px 1px 1px;
}
/*****************************************************************************/
/* Obituary div - the top right of the index page */
/* Uses remaining 20% of the width. */
div.obit { font-family: Verdana, Arial, Helvetica, sans-serif;
color: white;
background-image: none;
background-color: black;
width: 14%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 1%;
float: right
}
h1.obit { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 110%;
text-align: center;
text-decoration: none;
font-weight: bold;
}
p.obit { text-align: left;
margin: 1px 1px 1px 1px;
}
/*****************************************************************************/
/* News section - the bottom right of the page, below the events div */
/* Should expand to fill depth available. */
div.news { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #fe6f7a;
width: 14%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 1%;
float: right
}
h1.news { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 110%;
text-align: center;
text-decoration: none;
font-weight: bold;
}
ul.news { text-align: left;
padding-left: 2%;
padding-right: 2%;
margin: 10px 1px 1px 1px;
}
li.news { text-align: left;
padding-left: 2%;
padding-right: 2%;
margin: 10px 1px 1px 1px;
}
p.news { text-align: left;
margin: 10px 1px 1px 1px;
}
/* Must be in the order link/visited/hover/active */
a.news:link { color: black; background-color: #fe6f7a; text-decoration: none }
a.news:visited { color: black; background-color: #fe6f7a; text-decoration: none }
a.news:hover { color: blue; background-color: yellow; text-decoration: none }
/*****************************************************************************/
/* Copyright div - the bottom of every page, full width */
/* Contains copyright statement, GDPR link (on home page) and certifications */
div.cpyrgt { font-family: Verdana, Arial, Helvetica, sans-serif;
clear: both;
color: black;
background-image: none;
background-color: #62daeb
}
p.cpyrgt { text-align: center;
margin: 2px 2px 2px 2px;
}
address.cpyrgt { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
border-top: solid;
margin-top: 1em;
padding-top: 1em;
text-align: center
}
img.cpyrgt { border: 0;
margin: 5px 5px 5px 5px;
}
/* Must be in the order link/visited/hover/active */
a.cpyrgt:link { font-size: x-small; color: black; background-color: #62daeb; text-decoration: none }
a.cpyrgt:visited { font-size: x-small; color: black; background-color: #62daeb; text-decoration: none }
a.cpyrgt:hover { font-size: x-small; color: black; background-color: yellow; text-decoration: none }
abbr.cpyrgt { text-decoration: none;
}
/*****************************************************************************/
/* Shop page styles ** To be expanded when shop fully developed ** */
p.shop { text-align: justify;
margin: 20px 20px 20px 20px;
}
table.shop { width: 80%;
margin: auto;
background-color: #dedede;
text-align: center;
}
tr.shop:nth-child(even) { background-color: #f2f2f2; }
tr.shop:hover { background-color: #62daeb; }
caption.shop { font-size: 110%;
background-color: #dedede;
text-align: center;
font-weight: bold;
}
div.sale { font-family: Verdana, Arial, Helvetica, sans-serif;
color: yellow;
background-image: none;
background-color: red;
font-weight: bold;
/* width: 75%; */
}
p.sale { text-align: center;
margin: 20px 20px 20px 20px;
}
/*****************************************************************************/
/* Find Us Main body section - the left of the FindUs page */
/* Widely spaced text giving various location formats */
div.find { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #ffffff;
width: 29%;
padding-left: 2%;
padding-right: 2%;
float: left
}
p.find { text-align: justify;
margin: 20px 20px 20px 20px;
}
img.find { margin: 2px 2px 2px 2px;
}
a.find:link { color: blue; background-color: #ffffff; text-decoration: none }
a.find:visited { color: blue; background-color: #ffffff; text-decoration: none }
a.find:hover { color: blue; background-color: yellow; text-decoration: none }
/*****************************************************************************/
/* Find Us Map section - the right of the FindUs page */
/* Mostly contains a Google map, spaced out to fill the div. */
div.map { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #ffffff;
width: 62%;
padding-left: 2%;
padding-right: 2%;
float: right;
}
p.map { text-align: justify;
margin: 20px 20px 20px 20px;
}
/*****************************************************************************/
/* News page styles - named 'jrnl' as 'news' used for the links div */
/* The news page occupies full width and uses various styles */
div.jrnl { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #ffffff;
width: 100%;
padding-left: 2%;
padding-right: 2%;
}
p.jrnl { text-align: justify;
margin: 20px 20px 20px 20px;
}
img.jrnl { margin: 20px 20px 20px 20px; /* STILL USED ? */
}
table.jrnl { width: 90%; /* STILL USED ? */
margin: auto;
background-color: #dedede;
text-align: center;
}
tr.jrnl:nth-child(even) { background-color: #f2f2f2; } /* STILL USED ? */
caption.jrnl { font-size: 125%; /* STILL USED ? */
background-color: #62daeb;
text-align: center;
font-weight: bold;
}
/* Must be in the order link/visited/hover/active */
a.jrnl:link { color: blue; /* background-color: #ffffff; */ text-decoration: none } /* STILL USED ? */
a.jrnl:visited { color: blue; /* background-color: #ffffff; */ text-decoration: none } /* STILL USED ? */
a.jrnl:hover { color: blue; background-color: yellow; text-decoration: none } /* STILL USED ? */
/* Style 1 */
div.jrnl1 { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #f2f2f2;
width: 100%;
padding-left: 2%;
padding-right: 2%;
}
h1.jrnl1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: justify;
text-decoration: none;
margin: 20px 20px 20px 20px;
font-weight: bold;
}
p.jrnl1 { text-align: justify;
margin: 20px 20px 20px 20px;
}
table.jrnl1 { width: 90%;
margin: auto;
text-align: left;
overflow-x: scroll;
}
/* img.jrnl1 { margin: 20px 20px 20px 20px;
}
/* caption.jrnl1 { font-size: 125%;
background-color: #62daeb;
text-align: center;
font-weight: bold;
}
/* Must be in the order link/visited/hover/active */
a.jrnl1:link { color: blue; /* background-color: #ffffff; */ text-decoration: none }
a.jrnl1:visited { color: blue; /* background-color: #ffffff; */ text-decoration: none }
a.jrnl1:hover { color: blue; background-color: yellow; text-decoration: none }
/*****************************************************************************/
/* Style 2 */
div.jrnl2 { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #dedede;
width: 100%;
padding-left: 2%;
padding-right: 2%;
}
h1.jrnl2 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: justify;
text-decoration: none;
margin: 20px 20px 20px 20px;
font-weight: bold;
}
p.jrnl2 { text-align: justify;
margin: 20px 20px 20px 20px;
}
table.jrnl2 { width: 90%;
margin: auto;
text-align: left;
overflow-x: scroll;
}
img.jrnl2 { margin: 20px 20px 20px 20px;
}
/* Must be in the order link/visited/hover/active */
a.jrnl2:link { color: blue; /* background-color: #ffffff; */ text-decoration: none }
a.jrnl2:visited { color: blue; /* background-color: #ffffff; */ text-decoration: none }
a.jrnl2:hover { color: blue; background-color: yellow; text-decoration: none }
/*****************************************************************************/
/* Style 2 */
div.jrnl3 { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #e4e4e4;
width: 100%;
padding-left: 2%;
padding-right: 2%;
}
h1.jrnl3 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: justify;
text-decoration: none;
margin: 20px 20px 20px 20px;
font-weight: bold;
}
p.jrnl3 { text-align: justify;
margin: 20px 20px 20px 20px;
}
table.jrnl3 { width: 90%;
margin: auto;
text-align: left;
overflow-x: scroll;
}
/* Must be in the order link/visited/hover/active */
a.jrnl3:link { color: blue; /* background-color: #ffffff; */ text-decoration: none }
a.jrnl3:visited { color: blue; /* background-color: #ffffff; */ text-decoration: none }
a.jrnl3:hover { color: blue; background-color: yellow; text-decoration: none }
/*****************************************************************************/
/* Contact page styles */
div.contact { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-image: none;
background-color: #ffffff;
width: 100%;
padding-left: 2%;
padding-right: 2%;
}
p.contact { text-align: justify;
margin: 20px 20px 20px 20px;
}
table.contact { width: 90%;
margin: auto;
background-color: #ffffff;
text-align: left;
}
/* tr.jrnl:nth-child(even) { background-color: #f2f2f2; }
caption.jrnl { font-size: 125%;
background-color: #62daeb;
text-align: center;
font-weight: bold;
}
img.main { margin: 20px 20px 20px 20px;
}
*/
/* Must be in the order link/visited/hover/active */
/* a.contact:link { color: blue; background-color: #ffffff; text-decoration: none } */
/* a.contact:visited { color: blue; background-color: #ffffff; text-decoration: none } */
/* a.contact:hover { color: blue; background-color: yellow; text-decoration: none } */
/*****************************************************************************/
/*****************************************************************************/
/* =========================================================================
Helper classes from original boilerplate
========================================================================= */
/* Hide visually and from screen readers */
.hidden { display: none !important; }
/* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line: */
.visuallyhidden { border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
}
/* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard: */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
white-space: inherit;
}
/* Hide visually and from screen readers, but maintain layout */
.invisible { visibility: hidden; }
/* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after { content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after { clear: both; }
/* =========================================================================
Overrides for phone viewing
If on a phone (narrow width) then the events and news divs won't fit.
So move them under the main div by overriding float-right.
Also, the main div can now be full width, not 80%.
*/
@media only screen and (max-width: 768px) {
div.events { width: 100%;
float: left;
}
div.flash { width: 100%;
float: left;
}
div.main { width: 100%;
}
div.news { width: 100%;
float: left;
}
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* =========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================= */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster */
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
/*****************************************************************************/
/* Riverain printer overrides */
/* Set navbar div to be hidden so that it doesn't print */
div.navbar { display: none; }
} /* End of @media print */