/* Style sheet for The Oo Kingdom, Version 22
   Latest edition June 25, 2022 */

/* -------- Part 1: styles for all media */

/* -------- Part 1a: Charter font
   Font license available at ookingdom.com/license.txt */

@font-face {
font-family: Charter;
font-style: normal;
font-weight: normal;
src: local('CharterRegular'), url('charter_regular.woff2') format('woff2');
font-display: swap;
}

@font-face {
font-family: Charter;
font-style: italic;
font-weight: normal;
src: local('CharterItalic'), url('charter_italic.woff2') format('woff2');
font-display: swap;
}

@font-face {
font-family: Charter;
font-style: normal;
font-weight: bold;
src: local('CharterBold'), url('charter_bold.woff2') format('woff2');
font-display: swap;
}

@font-face {
font-family: Charter;
font-style: italic;
font-weight: bold;
src: local('CharterBoldItalic'), url('charter_bold_italic.woff2') format('woff2');
font-display: swap;
}



/* -------- Part 1b: general styles ---------- */

body {	background: white; color: black;
	font: medium/1.5 Charter, "Iowan Old Style", Georgia, serif;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	/* Prevents text size adjust after orientation change,
	without disabling user zoom */
	}

h1, h2, h3 {margin-bottom: 0;}

h1 {font-size: 1.7em; line-height: 1.2;}
h2 {font-size: 1.2em; line-height: 1.3; margin-top: 1em;}
h3, h4 {font-size: 1em; font-style: italic;}
h4 {font-weight: normal;}

h1 + hr {margin-top: 1.25em;}

#toplinks, p.after, footer, #menu p, #menu ul, #menu dl {
	font-size: .875em;}

#toplinks {margin: 0 auto;}

p.after {margin: 0 0 1.5em .7em;}

footer {border-top: 3px solid #bbb;
	padding-bottom: 114px;
	margin-bottom: 1.5em;
	background-image: url(Ukraine-Flag.gif);
	background-repeat: no-repeat;
	background-position: bottom left;}
footer::after {content: "Please remember and pray for the people of Ukraine during this terrible time of war.";}
#home footer {margin-bottom: 0;}

img {border: none; height: auto; width: auto; max-height: 94vh; max-width: 100%;}

ol ol {list-style-type: lower-alpha;}

dd {margin-left: 1em;}

hr {border-top: 1px solid #bbb; border-bottom: 2px solid #bbb;}
hr.wide {display: none;} /* this is overridden for wider screens */

.center {text-align: center;} /* used in a few places */

pre, code, samp, kbd {font-family: Consolas, monospace, serif;
	/* specifying serif after monospace forces correct size */
	font-size: medium;}

pre {overflow: auto;}



/* -------- Part 1c: navigation and links ---------- */

nav {background: mistyrose; color: black;
	padding: .3em .8em;
	border: 1px solid #bbb;
	border-radius: .75em;
	}

h1 + nav {margin-top: 1em;}
nav + footer {border-top: none;}

#menu {background: white; color: black;}

#menu ul {list-style-type: none; margin: 1em auto;
	text-indent: -1em; padding-left: 1em;}

#menu ul ul {margin: 0 auto; font-size: 1em;}

li#current {margin-left: -2.2em; padding-left: 2.2em;
	background-image: url(arrow-12x17.png);
	background-position: 1px 3px;
	background-repeat: no-repeat;}

#menu a, h2 a {text-decoration: none;}
#menu a:hover, h2 a:hover {text-decoration: underline;}

a:link {background: inherit; color: blue;}
a:visited {background: inherit; color: purple;}
a:hover {background: lavender; color: blue;}
a:active, a:focus {background: yellow; color: blue;}

nav h2 {margin-top: .83em;}
nav h3 + h4 {margin-top: 0;}



/* -------- Part 1d: special situations ---------- */

/* Floats and Clears */

.fl {float: left; margin: 0 1em .5em 0; max-width: 59%;}
.fr {float: right; margin: 0 0 .5em 1em; max-width: 59%;}

@media screen and (min-width: 515px) { /* for ALL images in Food,
	and images of width 285px to 400px elsewhere */
.fl-wide {float: left; margin: 0 1em .5em 0; max-width: 59%;}
.fr-wide {float: right; margin: 0 0 .5em 1em; max-width: 59%;}
hr.wide {display: block;}
}

#gallery .fr {max-width: 75%;} /* for Eclipse pages */

@media screen and (max-width: 639px) { /* nix float for narrow screens */
#gallery .fr {float: none; margin: auto; max-width: 100%;}
}

.cl {clear: left;}
.cr {clear: right;}
.cb, footer {clear: both;}



/* Tables and forms */

table {margin: 1em auto; width: 100%; border-collapse: collapse;}
tr {border-top: 1px solid #bbb;}
tr.second, tr:first-of-type {border-top: none;}

th, td {padding: .1em .3em .4em .3em;
	vertical-align: top;
	text-align: left;}

th, legend {font-weight: normal; font-style: italic;}

fieldset {padding: 0 1em; margin-bottom: 1em;}



/* Weather pages */

.month {width: 40%;}
.mean {width: 26%;}
.lowest, .highest {width: 17%;}

tr.first td {padding: .1em .3em 0 .3em;}
tr.second td {padding: 0 .3em .4em 1.3em; background: inherit; color: maroon;}

.date, .low, .high {width: 12%;}
.day {width: 10%;}



/* Special styling for Oo's Writings */

.fb {background-image: url(FB-f-Logo__blue_50.png);
	background-repeat: no-repeat;
	background-position: 0 .25em;
	padding-left: 70px;}

.tweet {background-image: url(Twitter_logo_blue_62x50.png);
	background-repeat: no-repeat;
	background-position: 0 .25em;
	padding-left: 82px;}

.fb a, .tweet a {background: white;}

aside {	display: block; float: right; width: 42%;
	background: mistyrose; color: black;
	border: 1px solid #bbb; border-radius: 1em;
	margin: .3em 0 .3em 1em; padding: .6em 1em .8em 1em;
	font-size: 1.2em; font-style: italic;}

aside h2 {font-size: inherit;}

aside.left {float: left; margin: .3em 1em .3em 0;}
aside p {margin: 0 auto;}

h2 + aside, h3 + aside, h3 + aside.left {margin-top: 1.2em;}



/* Words of Jesus */

.divine {background: inherit; color: #c00;}

/* ------------ end styles for all media ------------- */



/* ------------- Part 2a: styles for screen only -------------- */

@media screen {

html {	min-height: 100%; padding-bottom: 1px; /* Forces scrollbars.
	Background color/image CSS is normally written into the page's HTML */
	}

body {	position: relative;
	max-width: 560px;
	margin: 0 auto 200px auto; padding: 1px 1em 1em 1em;
	/* the bottom margin allows the html background to show */
	}

body#gallery {max-width: 1110px; padding: 1px 1em;}

#gallery h2 {margin: -.5em auto;}
#gallery h2 + p {margin-top: 1.8em;}

audio {position: relative; top: .65em; max-width: 100%;}

}



/* ------------- Part 2b: Two column cover page menus -------------- */

.newspaper {
    margin: 1.25em 0 1.5em 0;} /* for proper spacing on all screen sizes */

@media screen and (min-width: 480px) {

.newspaper {
    column-count: 2;
    column-gap: 40px;
    column-rule: 1px solid #bbb;
}

.newspaper p, .newspaper ul, .newspaper ol, .newspaper dl {
    font-size: .875em;}

.newspaper *:first-child {margin-top: 0;}
.newspaper ul {margin-left: -1.6em;}

}



/* ------------ Part 2c: Two-column layout for wider screens -----
   Content width will vary from 448 to 560 pixels */

@media screen and (min-width: 758px) { /* page area 741px */

body {padding: 0 16.7em 1em 1.6em;}

#toplinks {position: relative; top: -5em; margin-bottom: -1.5em;}
#toplinks a:focus {position: relative; top: 5em; left: 1.6em;}

footer {margin-bottom: 0;}

#menu {
	position: absolute; top: 0; right: 0;
	padding: 0 1.25em; width: 12.5em;
	border-width: 0 0 2px 2px;
	border-style: solid;
	border-color: #bbb;
	border-radius: 0 0 0 .75em;
	}

li#current {background-position: left 3px;}

}



/* ------------ Part 3: Home page -------------- */

#home #menu {margin-top: 1.5em;} /* this is nixed for wider screens */

#home #toplinks a:focus {left: 0;} /* this is set for all screen widths */



/* ------------ Home page, 2 columns -----------
   Content width will vary from 421 to 560 pixels */

@media screen and (min-width: 675px) and (max-width: 910px) {
/* page area 658 to 875 pixels */

body#home {padding: 0 33% 20px 3%;}

/* Redefine toplinks positioning, since home page breaks at narrow width */

#home #toplinks {position: relative; top: -5em; margin-bottom: -1.5em;}
#home #toplinks a:focus {position: relative; top: 5em;}

#home #menu {
	position: absolute; top: 0; right: 0;
	padding: 0 2.5%; width: 25%; margin-top: 0; /* nixes margin set above */
	border-left: 2px solid #bbb; border-bottom: 2px solid #bbb;
	border-radius: 0 0 0 .75em;
	}

}



/* ------------ Home page, 3 columns -------------- */

@media screen and (min-width: 911px) { /* page area 894px */

/* Content width will vary from 420 to 560 pixels */

body#home {padding: 0 27px 20px 447px;}

#home h1 {position: absolute; top: 0; left: 0; margin-top: 0;}

#home #menu {top: 180px; right: auto; left: 0;
	width: 418px; padding: 0; margin-top: 0; /* nixes margin set above */
	border-left: none; border-right: 2px solid #bbb;
	border-radius: 0 0 .75em 0;}

#menu1 {float: left; width: 168px; padding: 0 20px;
	border-right: 2px solid #bbb;}
#menu2 {float: right; width: 168px; padding: 0 20px;
	margin-left: -2px; border-left: 2px solid #bbb;}

}



/* ------------ Part 4: Larger text edition -------------- */

@media screen and (min-width: 1080px), screen and (min-height: 1080px) {

body {font-size: 118.75%; line-height: 1.474; max-width: 678px;}
/* this font size renders best on Windows */

#toplinks, p.after, footer, #menu p, #menu ul, #menu dl,
.newspaper p, .newspaper ul, .newspaper ol, .newspaper dl {
	font-size: medium; line-height: 1.5;}

li#current {background-image: url(arrow2.png);
	background-position: left 2px;}
.newspaper ul {margin-left: -1.2em;}

pre, code, samp, kbd {font-size: large;}

}



/* ----------- Part 5: Print styles ------------- */

@media print { /* .noprint class used on Noah's Ark page */

#toplinks, nav, audio, video, .noprint {display: none;}

#gallery h2 a {background: white; color: black; text-decoration: none;}

.fl-wide {float: left; margin: 0 1em .5em 0; max-width: 59%;}
.fr-wide {float: right; margin: 0 0 .5em 1em; max-width: 59%;}

}