/* Style sheet for Kharlie.com, version 4
   Latest edition January 31, 2025 */

@font-face {
font-family: Oak Sans;
font-style: normal;
font-weight: 400;
src: url('/OakSansVF.woff2') format('woff2');
font-display: swap;
}

@font-face {
font-family: Oak Sans;
font-style: italic;
font-weight: 400;
src: url('/OakSans-ItalicVF.woff2') format('woff2');
font-display: swap;
}

@font-face {
font-family: Oak Sans;
font-style: normal;
font-weight: 500;
src: url('/OakSansVF.woff2') format('woff2');
font-display: swap;
}

@font-face {
font-family: Oak Sans;
font-style: normal;
font-weight: 700;
src: url('/OakSansVF.woff2') format('woff2');
font-display: swap;
}

body {	background: white; color: black;
	font: medium/1.5 Oak Sans, sans-serif;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	/* Prevents text size adjust after orientation change,
	without disabling user zoom */}

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

h1 {font-size: 2em; line-height: 1.2; letter-spacing: -0.02em;}
h2 {font-size: 1.5em; line-height: 1.3; letter-spacing: -0.015em; margin-top: 1em;}
h3 {font-size: 1.2em; line-height: 1.35;}

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

p.after, figure, footer, p.fine {font-size: 0.875em;}

header {position: relative; padding-bottom: 0.5em;}

p#logo {margin: 0; max-width: 383px; line-height: 1.35;}
p#logo img {max-width: 72%;}

p#slogan {margin: -1em 0 -0.5em 7em;}
p#coffee {position: absolute; top: 0; right: 0; margin: 0; max-width: 22%;}

hr {border-top: 1px solid #bbb; border-bottom: 2px solid #bbb;}

blockquote {font-style: italic;}

footer {border-top: 3px solid #bbb;}



/* These are mainly for some history pages */

.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;}



/* Images, figures, and clears
   Images wider than 320px shouldn't float until widescreen  */

img, video {max-width: 100%; height: auto; width: auto; max-height: 94vh;}

img + p {margin-top: 0.3em;} /* need this in standards mode */

img.fr {float: right; margin: 0 0 0.5em 1em;
	max-width: 54%;}

img.fl {float: left; margin: 0 1em 0.5em 0;
	max-width: 54%;}

img.fl-1of2 {float: left; margin: 0 0.5em 1em 0;}
img.fr-2of2 {float: right; margin: 0 0 1em 0.5em;}

img.alone {display: block; margin: 0 auto;}

img#UM {float: right; margin: -7px 0 0.5em 1em; width: 152px; height: 80px;}

figure {padding-top: 1em; text-align: center;}

figure.fr {float: right; max-width: 54%;
	margin: 0 0 0.5em 1em; border-bottom: 1px solid #888;}

figure.fl {float: left; max-width: 54%;
	margin: 0 1em 0.5em 0; border-bottom: 1px solid #888;}

figure.full {margin: 0;}
figure.full-border {margin: 0 0 1em 0; border-bottom: 1px solid #888;}

.fr-wide, .fl-wide {margin: 0; /* this is overridden for wider screens */}

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



/* Table and dl styles for Running section */

table {margin: 1em auto; width: 100%; border-collapse: collapse;}
th, td {padding: 4px 10px 4px 5px;
	vertical-align: top;
	text-align: center;
	border-bottom: 1px solid #bbb;}
.month {text-align: left;}
.duration {width: 29%;}
.pace {width: 21%;}
.total {font-weight: 700;}

dt {margin-top: 1.5em;}
#PR dt {margin-top: 0;} /* used elsewhere too */



/* ----------- Screen styles ------------- */

@media screen {

html {	min-height: 100%; padding-bottom: 1px;} /* forces scrollbars */

body {position: relative; margin: 0 auto;
	max-width: 37em; padding: 1em;}

body#gallery {max-width: 960px; padding: 0 1em;}
p.center {text-align: center;} /* for the Gallery */

audio {position: relative; top: 0.65em;}



/* Navigation bar */

nav {border-top: 3px solid #bbb;}

nav p + ul {margin-top: -1em;}

nav ul {position: relative; left: -1.5em;}
nav ol {position: relative; left: -0.9em;}

nav a {text-decoration: none;}
nav a:hover {text-decoration: underline;}

li#current {list-style-type: "\27A4";} /* arrowhead */

a:link {background: inherit; color: #00c;}
a:visited {background: inherit; color: purple;}
a:hover {background: #ffd700; color: maroon;}
a:active, a:focus {background: #3f0; color: black;}

} /* end general screen styles */



/* ------- Styles for wider screens ------- */

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

.fr-wide, video.fr {float: right; margin: 0 0 0.5em 1em;
	max-width: 60%;}

.fl-wide {float: left; margin: 0 1em 0.5em 0;
	max-width: 60%;}

}

@media screen and (min-width: 360px) and (max-width: 831px) {

#mainmenu {position: absolute; width: 45%;}
#connect {position: absolute; right: 0; width: 10em;}

}

@media screen and (min-width: 832px) and (max-width: 1023px) {

body {padding: 1em 14em 1em 2em;}

nav {border-top: none;
	position: absolute; top: 0; right: 0;
	width: 10em; padding: 0 1em;}

}

@media screen and (min-width: 1024px) { /* Two navigation columns */

body {padding: 1em 14em 1em 14em;}

nav {border-top: none;}

#mainmenu {position: absolute; top: 0; left: 0;
	width: 10em; padding: 0 1em;}

#connect {position: absolute; top: 0; right: 0;
	width: 10em; padding: 0 1em;}

}

@media screen and (min-width: 1152px) { /* Large print edition */

body {font-size: large;}
p#slogan, p.after, figure, footer, p.fine {font-size: medium;}

}

@media screen and (min-width: 1600px) { /* Split content to two columns */

body {	max-width: 77em;
	column-count: 2;
	column-gap: 3em;
	column-rule: 2px solid #bbb;
	}
body#gallery, body#music {column-count: 1;} /* Music cover page */

} /* end widescreen styles */



/* ----------- Print styles ------------- */

@media print {

nav, audio, video, .noprint {display: none;}
img {page-break-inside: avoid;}

img.fr-wide {float: right; margin: 0 0 0.5em 1em;}
img.fl-wide {float: left; margin: 0 1em 0.5em 0;}

}