:root { font-size: 16px; line-height: 1.6; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; font-family: "Raleway", sans-serif; vertical-align: baseline; }
body { -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }

/** STRUCTURE **/
/**
.band { border: 1px solid blue; }
.wrapper { border: 1px solid green; }
.col-item { border: 1px solid red; }
**/

.band { width: 100%; clear: both; margin: 0 auto; text-align: center; }

.wrapper { width: 90%; max-width: 1600px;  text-align: left; margin: 0 auto; padding: .5rem 2rem 1rem 2rem; }
.page-subtitle .wrapper { padding-bottom: 0; }

.col-set { 
	display: flex; flex-flow: row wrap; justify-content: space-between; 
	align-items: stretch; align-content: center; gap: 4rem; 
	}
.col-item { flex: 1 1 auto; }
.col-25 { width: 20%; }
.col-33 { width: 27%; }
.col-50 { width: 45%; }
.col-66 { width: 60%; }
.col-75 { width: 70%; }
.col-100 { width: 100%; }

#masthead .col-set { gap: 0; }
.col-fixed-33 { width: 33%; }
.col-fixed-66 { width: 66%; }

.meta-set .col-25, .meta-set .col-33, .meta-set .col-50,
.meta-set .col-66, .meta-set .col-75, .meta-set .col-100 { min-width: unset; }

.gallery-set { 
	display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: center; 
	gap: 4rem; padding-top: 1rem; padding-bottom: 2rem; 
	}
.has-title { position: relative; }
.has-title .title { 
	position: absolute; top: .5rem; left: 2rem; 
	font-size: 1.6rem; font-family: "La Belle Aurore", cursive; }


/** DEFAULT ELEMENTS **/

body { 
	border-top: 10px solid rgb(166,181,193); 
	border-bottom: 10px solid rgb(166,181,193);
	}

p, h1, h2, h3, h4, h5, h6 { 
	overflow-wrap: break-word; 
	font-weight: normal; 
	padding: 0 0 1rem 0; 
	color: #666;
	}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; padding-top: 1rem; padding-bottom: 1rem; }
h3 { font-size: 1.5rem; padding-top: 2rem; }
h4 { font-size: 1.25rem; color: #999; font-weight: bold; }
h5 { font-size: 1.25rem; color: #999; }
h6 { font-size: 1rem; font-weight: bold; }

.page-subtitle h2 { padding-bottom: 0; }
.meta + h3, h3:first-of-type { padding-top: 0; }
.attachments h2 { padding-top: 2rem; }

p { color: #000; }

a:link, a:visited { color: Coral; text-decoration: none; }
a:hover { color: rgb(166,181,193); text-decoration: none; }

ul, ol { 
	padding: 0 2rem 1rem 2rem; 
	margin: 0 0 1rem 0; 
	}
ul { list-style: square; }
ul + h2 { padding-top: 0; }

.link-list { padding: 0; list-style: none; border-top: 1px solid silver; }
.link-list li { border-bottom: 1px solid silver; padding: 2px 0; }
.link-list a { display: block; padding: .25rem .5rem; }
.link-list a:hover { background: rgb(100,149,237, .15); }
.link-list .subcat a { padding-left: 1.25rem; }
.link-list .current { background: #fafafa; }
.link-list span { display: inline-block; padding: .25rem 2rem .25rem .5rem; }

.link-list + h2 { padding-top: 2rem; }

.alpha-list { padding: 0; margin: 0 0 2rem 0; list-style: none; }
.alpha-list li { display: inline-block; margin: 0 .25rem .25rem 0; }
.alpha-list a { display: block; min-width: 1.5rem; padding: .1rem .25rem; text-align: center; margin: 0 auto; }
.alpha-list a:link, .alpha-list a:visited { background: Coral; color: #fff; }
.alpha-list a:hover { background: rgb(166,181,193); color: #fff; }

dl { margin: 0; padding: 0 0 2rem 0; }
dt { margin: 1rem 0 0 0; padding: .1rem .25rem; background: #eaeaea; font-weight: bold; }
dt:first-of-type { margin-top: 0; }
dd { margin: 0; padding: .1rem .25rem; border-bottom: 1px solid #eaeaea; }

.attachments dt {background:#fff;}

.pairs dt, .pairs dd { display: inline-block; width: 50%; border: 1px solid #dadada; }

.section-child { padding: 0 0 0 2rem; }

.rating-5 { color: #5de2e7; }
.rating-4 { color: #7dda58; }
.rating-3 { color: #ffde59; }
.rating-2 { color: #fe9900; }
.rating-1 { color: #e4080A; }

blockquote { 
	margin: 1rem; 
	border-left: 5px solid WhiteSmoke; 
	border-right: 5px solid WhiteSmoke; 
	}

table { 
	width: 100%; 
	margin: 0 0 1rem 0; 
	border-collapse: collapse; 
	border-spacing: 0; 
	}
th { 
	border-bottom: 
	1px solid Silver; 
	padding: .25rem;
	}
td { 
	border: 1px solid Silver; 
	padding: .25rem; 
	}
	
form { padding: 0 0 1rem 0; }
input, button, textarea, select, checkbox, label { 
	margin: 0 0 1rem 0;
	padding: .25rem;
	font: inherit; 
	display: block;
	width: 100%;
	}
label { margin-bottom: .25rem; }
form p { padding-bottom: 0; }

img, picture, video, canvas, svg { 
	display: block; 
	max-width: 100%; 
	height: auto; 
	border-radius: 1rem;
	padding: 0; margin-bottom: 1rem;
	border: 1px solid #fff;
	box-shadow: 1px 1px 2px #555;
	}

.right { text-align: right; }
.centered { text-align: center; margin-left: auto; margin-right: auto; }
.bold { font-weight: bold; }
.caps { text-transform: uppercase; }
.subtitle { font-size: .8em; color: #454545; }
.sub-cat { padding: 0 2em 2rem 2em; }

p:has(.more) { text-align: right; }
.more { display: inline-block; padding: .75rem; border-radius: .5rem; margin-top: auto; }
a.more:link, a.more:visited { background: coral; color: #fff; }
a.more:hover { background: rgb(166,181,193); }

.button { display: inline-block; }
.button a { display: block; width: auto; border-radius: .5rem; font-size: 1rem; padding: 0 .25rem; font-weight: normal; }
.button a:link, .button a:visited { background: coral; border: 1px solid coral; color: white; }
.button a:hover { background: white; border: 1px solid coral; color: coral; }
.clear-button { float: right; }

.caption { 
	background: #f7f7f7; 
	border-top: 1px solid silver; border-bottom: 1px solid silver;
	padding: .5rem .25rem; margin: 0; 
	}
	
.credit { font-size: .8rem; text-align: right; font-style: italic; color: #666; padding: .5rem 0; margin: 0; }

.support-box { padding-bottom: 2rem; }
.support-box h4 { font-size: 2rem; margin-top: 0; padding-top: 0; }

/** DESIGN **/

#masthead { background: #555; }
#masthead .wrapper { padding-top: 1rem; }
#masthead .col-item { align-self: center; }
#masthead h4, #masthead nav { font-size: 1.25rem; padding: 0; }
#masthead h4 { text-transform: uppercase; letter-spacing: .1rem; }
#masthead nav { text-transform: lowercase; }
#masthead nav a { display: inline-block; margin-left: 2rem; }

#footer { background: #555; margin-top: auto; }
footer { font-size: .9rem; text-align: right; color: #fff; }
footer span:first-of-type { float: left; }

header { background-color: rgb(100,149,237, .35); }
header .wrapper { padding: 1.5rem 2rem; }
header h1 { padding: 0; text-transform: uppercase; }

#masthead a:link, #masthead a:visited, #footer a:link, #footer a:visited, header a:link, header a:visited { text-decoration: none; color: #fff; }
#masthead a:hover, #footer a:hover, header a:hover { text-decoration: none; color: Coral; }
#masthead a.current:link, #masthead a.current:visited { color: Coral; }
#masthead a.current hover { color: #fff; }

#page-nav { background: #f9f9f9; border-bottom: 1px solid #e9e9e9; }
#page-nav .wrapper { padding-top: 0; padding-bottom: 0; text-transform: uppercase; }
#page-nav nav a { display: inline-block; padding: .5rem 2rem .5rem 0; vertical-align: text-top; }

#banner {  
      background-size: cover; 
      background-position: bottom left; 
      }
.banner-content { 
      align-self: flex-end; text-align: right; 
      font-family: "Alex Brush", script;
      padding: 6rem 0 0 0; font-size: 6rem; color: #fff; line-height: 1;
      }

main { padding-top: 1rem; }

.meta { 
	background: #f7f7f7; 
	border-top: 1px solid silver; border-bottom: 1px solid silver;
	padding: .5rem .25rem; margin-bottom: 2rem; 
	}
.meta span:last-of-type { float: right; }

.paginate { 
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
	padding: .75rem .5rem; margin: 2rem 0;
	}
.paginate span:last-of-type { text-align: right; }
.paginate a { display: inline-block; padding-left: .5rem; }

.results td { border-left: 0; border-right: 0; }

#tidbits { background: rgb(166,181,193,.1); border-top: 1px solid rgb(166,181,193); 0; }
#tidbits .wrapper { padding: 1rem 2rem; position: relative; }
.tidbit { display: block; margin: 0 auto; padding: 1rem; text-align: center; }
.tidbit p { text-align: center; margin: 0 auto; padding: .5rem 0; font-size: 2rem; color: #787878; }
#tidbits .wrapper p.dyk { 
	position: absolute; top: -1.4rem; left: 1rem; 
	font-size: 1.2rem; margin: 0; padding: .5rem 1rem; 
	background: rgb(166,181,193); 
	color: #fff; text-transform: uppercase; font-weight: bold; }

  @media screen and (max-width: 1000px) {
      .col-25, .col-33, .col-50, .col-66, .col-75 { width: 100%; }
      .banner-content { font-size: 3rem; padding-top: 6rem; }
	  }