@charset "UTF-8";
/* CSS Document */

/*** Globals ***/

:root {
	--body-text: "signika", sans-serif;
	--display-text: "Moomin", display;
	--head-colour: #0a7aaf; 
	--bg-yellow: #f0f2c9;
	--bright-yellow: #fdf99a;
	--dirty-yellow: #e0e0a6;
	--bg-blue: #b84e00;
	--head-light-colour: #a0a0a0;
	--text-accent: #e47702;
	--text-colour: #efede4; 
	--text-crimson: #7d2c26;
	--text-red: #cb2135;
	--highlight-colour: #56beca;
	--light-grey: #e2e2e2; 
	--light-sky: #e9f4fe;
	--light-blue: #94c4db;
	--sky-light: #4d7ba1;
	--mid-green: #668a56;
	--dark-green: #4d683b;
	--dark-crimson: #59271e;
	--mid-blue: #458aa9;
	--night-blue: #00546f;
	--dark-blue: #072b33;
	--sea-blue: #c1d9ee;
	--sea-mist: #a2c3d3;
}

/*** Reset ***/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

#sodoffcontent h1 {
	font-size: 3rem;
	font-weight: 900;
	color: var(--head-colour);
	margin-top: 2em;
}

#sodoffcontent p {
	color: #000;
}

.clear {
	clear: both;
}

html {
  overflow-x: hidden;
}

body {
	margin: 0;
  color: var(--text-colour);
  font-family: var(--body-text);
  font-weight: 300;
  min-height: 100vh;
}

main {
  min-height: 100vh;
  padding-top: 6em;
  background: var(--bg-colour);
  color: var(--text);
}

main.login-main {
	background-image: none;
  padding-top: 2em;
}

.hattifatteners-cont {
	position: absolute;
	width: 2.5rem;
  right: 0.5rem;
  bottom: -1.375rem;
}

.main-body {
	background-size: 100% auto;
}

.happy-moomins, 
.pancakes,
.groke {
  background: var(--bg-colour) url(../img/moomins/bg-pattern.png);
}

.happy-moomins {
	--bg-colour: var(--light-blue);
	--text: var(--night-blue);
	--text-highlight: var(--text-red);
}

.pancakes {
	--bg-colour: var(--mid-green);
	--text: var(--bg-yellow);
	--text-highlight: var(--dark-crimson);
	--accent: var(--bg-yellow);
	--dark-accent: var(--dark-crimson);
}

.bridge {
	--bg-colour: var(--bg-yellow);
	--text: var(--night-blue);
	--text-highlight: var(--text-crimson);
	--accent: #fff;
	--dark-accent: var(--dark-green);
}

.groke {
	--bg-colour: var(--night-blue);
	--text: var(--bg-yellow);
	--text-highlight: var(--light-blue);
	--accent: var(--light-blue);
	--dark-accent: var(--dark-blue);
}

.boat {
	--bg-colour: var(--light-sky);
	--text: var(--dark-blue);
	--text-highlight: var(--mid-blue);
	--accent: var(--light-blue);
	--dark-accent: var(--dark-blue);
}

.seaside {
	--bg-colour: var(--light-sky);
	--text: var(--dark-blue);
	--text-highlight: var(--mid-blue);
	--accent: var(--sea-blue);
	--dark-accent: var(--sea-mist);
}

.boat-cont {
	position: fixed;
	width: 32vw;
	right: 5vw;
	bottom: -0.5rem;
	z-index: 918;
}

h1 {
	color: var(--text);
  font-family: var(--display-text);
	font-size: 1.625rem;
  line-height: 1em;
}

h1.disguise {
	font-family: var(--body-text);
}

h2 {
	color: var(--text-highlight);
	font-family: var(--display-text);
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-weight: 400;	
  margin-bottom: 1em;
  line-height: 1.1em;
}

h3 {
	font-size: 2.2rem;
	font-weight: 700;
  line-height: 1.1em;
  padding-top: 0.2em;
  margin-top: 1.2em;
  border-top: solid 1px var(--text-highlight);
}

h4 {
	font-family: var(--body-text);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--text-highlight);
}

h5 {
	font-family: var(--body-text);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-highlight);
	margin-bottom: 0.5em;
}

p, ol {
	font-size: 1.3rem;
}

p, ol li {
	margin: 0.2em 0 0.8em 0;
	line-height: 1.5em;
}

strong {
	font-weight: 900;
}

.midweight {
	font-weight: 500;
}

input[type=button], input[type=submit], input[type=reset], .commentbutton, .comment-reply-cancel, .comment-reply-post {
  font-weight: 700;
  font-size: 1.25rem;
  background-color: var(--dark-accent);
  border: none;
  color: var(--accent);
  padding: 1rem 2rem;
  text-decoration: none;
  margin: 0.25rem 0.125rem;
  cursor: pointer;
  border-radius: 0.375rem;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, .commentbutton:hover, .comment-reply-cancel:hover, .comment-reply-post:hover {
   color: var(--dark-accent) !important;
	 background-color: var(--accent);
}

input[type=button].small-input, input[type=submit].small-input, input[type=reset].small-input, .commentbutton.small-input, .comment-reply-cancel, .comment-reply-post {
  padding: 0.25rem 1.25rem;
}

a.comment-reply-cancel:hover, a.comment-reply-post:hover {
	color: #fff;
}

select {
	padding: 8px;
  color: var(--text-highlight);
  border: solid 2px var(--text-highlight);
  font-size: 1.2rem;
  font-weight: 600;
  background: #fff;
  margin-bottom: 0.6em;
}

.inline-span {
	font-size: 1.2rem;
}

a, a:visited, a:hover, a:active {
	text-decoration: none;
	font-weight: 600;
}

a, a:visited {
	color: var(--text-highlight);
}

a:hover, a:active {
	color: var(--text);
}

div img {
	width: 100%;
	height: auto;
}

figcaption{
	padding: 8px;
  margin: -0.25em 0 2em 0;
  background: rgb(from var(--bg-colour) r g b / 0.7);
  font-size: 1.2rem;
  border-bottom: solid 2px var(--text-highlight);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  padding: 0;
}

.align-right {
	text-align: right;
}

.login {
  background-size: contain;
  background-repeat: no-repeat;
  padding: 14em 3em 2em 3em;
  aspect-ratio: 1 / 2;
}

.full-bg {
  background-image: url("../img/stars.svg");
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  padding-bottom: 4em;
  position: relative;
}

.bottom-img {
  position: fixed;
  bottom: -0.25rem;
  width: 100%;
  z-index: 721;
  pointer-events: none;
}

.bottom-img-above-cont {
	max-width: 800px;
	margin-inline: auto;
}

.bridge .bottom-img.desktop {
	bottom: calc(-10vw + 90px);
}

.bottom-img-above {
  max-width: 800px;
	z-index: 917;
}

.bottom-bg {
	z-index: 1;
}

.desktop {
	display: none;
}

.decorative {
	pointer-events: none;
}

#happy-moomins, #pancakes, #groke {
  position: fixed;
  bottom: 0.5rem;
  z-index: 500;
}

#happy-moomins {
  width: 76vw;
  right: 2vw;
}

#pancakes {
	width: 50vw;
	right: 1vw;
}

#groke {
	width: 30vw;
	left: 0;
}

#top-banner {
	padding: 1rem 0;
	background: var(--head-colour);
}

header {
	position: fixed;
	width: 100%;
	z-index: 761;
	--text: var(--bg-yellow);
	--text-highlight: #fff;
}

#logo-nav-banner {
	display: grid;
	grid-template-columns: 1fr 3fr;
	row-gap: 0.5rem;
	grid-template-areas: 
	"title access"
	"title nav";
}

#title {
	position: relative;
	grid-area: title;
	margin-left: 0.75rem;
	color: #fff;
}

#nav-banner {
	grid-area: nav;
	justify-self: end;
	margin: 0 0.75em 0 0;
}

#access {
	grid-area: access;
	padding-right: 0.75rem;
}

.userlink {
	text-align: right;
  font-family: var(--body-text);
  /*width: 30%;
  position: absolute;
  top: 1.5em;
  right: 0.75em;*/
}

/*.userlink, .userlink a {
  color: var(--highlight-colour);
}

#sep-bar, .userlink a:hover {
	color: #fff;
}*/

#hh-title {
	position: absolute;
  width: 70%;
  top: 10px;
  left: 70px;
  font-size: 2.2rem;
  line-height: 0.8em;
  margin-bottom: 0;
}

.wrapper {
	max-width: 1400px;
	margin: 0 auto;
}

.content-wrapper {
	padding-top: 2em;
}

.login-wrapper {
	max-width: 600px;
	margin: 0 auto;
}

#spacer {
	width: calc(100% - 6px);
	height: 60px;
}

.noFill {
	fill: none;
}

.content, .widecontent {
	padding: 2em 0;
	position: relative;
	z-index: 23;
}

.content {
	margin: 0 0 0 5%;
	width: 86%;
	padding: 2em 2% 46em 2%;
}

.content.boat {
	padding: 2em 2% 16em 2%;
}

.base {
	min-height: 130px;
	background: #fffac3;
}

.nav {
	font-family: var(--body-text);
	display: none;
	max-width: 100%;
	top: 7.2rem;
	right: 0;
	position: absolute;
	z-index: 31;
	padding-right: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: auto;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
}

.nav li {
	margin: 0;
	background: var(--head-colour);
	border-top: solid 1px var(--highlight-colour);
	padding: 0.75rem 1.75rem;
}

.nav li:hover {
	background: var(--night-blue);
}

.nav a {
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
}

/*.nav li:hover > a {
	color: var(--text-highlight);
}*/

#menuicon {
	display: block;
	padding: 0;
	z-index: 379;
	background: transparent;
	border: none;
	cursor: pointer;
}

.burger {
	width: 3em;
	height: 3em;
	fill: var(--highlight-colour);
}

#menuicon:hover .burger {
	fill: #fff;
}

#menuicon .line {
  transition: transform 300ms ease-in 300ms, rotate 300ms ease-in, opacity 0ms 300ms;
  transform-origin: center;
}

#menuicon[aria-expanded="true"] .line {
  transition: transform 300ms ease-in, rotate 300ms ease-in 300ms, opacity 0ms 300ms;
}

/*#menuicon[aria-expanded="true"] :is(.top, .bottom) { // Might need this when we return to a more normal burger
  transform: translate(10px,44px);
}*/

#menuicon[aria-expanded="true"] .top {
  rotate: 45deg;
  transform: translate(0px,25px);
}

#menuicon[aria-expanded="true"] .middle {
  opacity: 0;
}

#menuicon[aria-expanded="true"] .bottom {
  rotate: -45deg;
}

.nav[data-state="opened"] {
  animation: clipPathMenuOpen 1s ease-in-out forwards;
  display: block;
}

.nav[data-state="closing"] {
  animation: clipPathMenuClose 1s ease-in-out forwards;
}

.nav[data-state="closed"] {
  display: none;
}

@keyframes clipPathMenuOpen {
  0% { clip-path: polygon(0% 0%,100% 0%,100% 0%,0% 0%); }
  100% { clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%); }
}
@keyframes clipPathMenuClose {
  0% { clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%); }
  100% { clip-path: polygon(0% 0%,100% 0%,100% 0%,0% 0%); }
}

#lbHead {
	padding: 30px 3% 8px 3%;
	background: var(--text-highlight);
}

.menutitle {
	border-top: solid 1px rgba(0, 0, 0, 0.1);
}

.scoreheader {
	color: var(--text-highlight);
}

.scoreheader tr {
	font-weight: 700;
	background: var(--accent);
	border-bottom: var(--highlight-colour);
}

.scoreheader tr:hover {
	background: #fff;
	/*color: var(--text-highlight);*/
}

.submenu {
	background: var(--accent);
}

.submenu tr {
	border-bottom: solid 1px var(--text-highlight);
}

.subhead {
	color: var(--text-highlight);
}

#leaderboard {
	margin-top: 2em;
  max-width: 28rem;
  margin-inline: auto;
}

#tablediv {
	padding: 0 2%;
}

.knob {
	width: 1.5em;
	padding: 0;
	vertical-align: bottom;
}

.knob img {
	width: 100%;
	height: auto;
}

.slider-head {
	display: grid;
	grid-template-columns: 1fr 2em;
	color: #fff;
	background-color: var(--bg-colour);
	margin-top: 1em;
	padding: 0.25em 2%;
	cursor: pointer;
}

.slider-head h4 {
	color: #fff;
}

#chevron {
	stroke: var(--highlight-colour);
	transition: rotate 300ms ease-in;
	transform-origin: center;
}

.slider-head:hover #chevron {
	stroke: #fff;
}

.slider-head.open #chevron {
	transition: rotate 300ms ease-in;
}

.slider-head.open #chevron {
	rotate: 180deg;
}

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

.hp-news {
	background: var(--mid-blue);
}

.form-table tr {
	background: rgb(from var(--bg-colour) r g b / 0.2);
}

.form-table td {
	font-size: 1.2rem;
}

.form-table td:first-child {
	padding-left: 0.5em;
}

.form-table td:last-child {
	padding-right: 0.5em;
}

.slider-cont {
	width: 	100%;
	display: none;
	padding: 0 2%;
	box-sizing: border-box;
}

.display {
	display: block;
}

.hp-news h4 {
	font-size: 1.5rem;
}

tr.formhead {
	color: var(--text-highlight);
	background: rgb(from var(--bg-colour) r g b / 0.6);
	font-weight: 900;
}

area {
	outline:none;
}

#cut {
	background: var(--bg-colour);
	text-align: center;
	color: #fff;
}

.spaceBefore {
	margin-top: 1em;
}

table, th, td, .glossymenu {
	border-style: none;
	font-size: 1.1rem;
	margin: 0;
	border-collapse:collapse;
}

td, th {
	margin: 0;
	padding: 8px 4px;
}

tr {
	border-bottom: 1px solid var(--highlight-colour);
}

.tablehead {
	border-bottom: 3px solid #ca4227;
}

.selecthead {
	color: #fff;
}

#diff th, #diff td {
	padding: 8px 10px;
}

#diff tr:nth-child(even), #openscores tr:nth-child(even) {
	background: none;
}

#diff tr:nth-child(odd), #openscores tr:nth-child(odd) {
	background: rgba(84, 172, 188, 0.1);
}

#diff thead tr, .selecthead {
	background: var(--dark-accent) !important;
}

#diff thead tr {
	border-bottom: none;
}

.poshead {
	background: var(--bg-colour);
}

.schead {
	background: var(--bg-colour);
}

.scoreheader {
	width: 100%;
	margin-top: 0.3em;
}

.scoreheader tbody {
	cursor: pointer;
}

.submenu {
	margin-left: 2em;
	width: 90%;
}

.submenu table {
	margin: 0.25em 0 1.25em 0;
	width: 100%;
	border: 0;
}

.submenu-head {
	background: rgb(from var(--bg-colour) r g b / 0.2);
}

.table-hole {
	font-size: 1rem;
}

.noborder {
	border-bottom: none !important;
}

/* Comments */

.comment-thread {
	display: flex;
	flex-direction: column;
	background: rgb(from var(--bg-colour) r g b / 0.6);
	margin-top: 2em;
	border-left: solid 0.25em var(--text-highlight);
}

.comment-parent {
}

.comment-title-bar {
	display: flex;
	justify-content: space-between;
	padding: 1em 0.5em;
}

.comment-subject, .comment-author {
	font-weight: 900;
	font-size: 1.5em;
}

.comment-subject {
	margin-bottom: 0;
}

.comment-time {
	font-weight: 300;
	font-size: 1rem;
	font-style: italic;
	text-align: right;
	color: var(--text-highlight);
}

.comment-body {
	padding: 1em;
}

.comment-content {
	font-size: 1.25rem;
	margin: 0.5em 0;
}

.comment-reply-container {
	display: none;
}

.comment-reply-btn {
	font-size: 1rem;
	margin-top: 2em;
}

.comment-reply-btn a, .comment-reply-btn a:visited {
	color: var(--highlight-colour);
}

.comment-reply-btn a:hover, .comment-reply-btn a:active {
	color: var(--text-accent);
}

.comment-reply-content {
	width: 100%;
	min-height:  60px;
}

.comment-reply-content-cont {
	margin: 1em 0;
}

.comment-reply-content-btns {
  display: flex;
  gap: 1em;
  justify-content: end;
  white-space: nowrap;
}

.reply-level2 {
	padding-left: 1em;
}

.reply-level3 {
	padding-left: 2em;
}

.reply-level4 {
	padding-left: 3em;
}

.reply-level5 {
	padding-left: 4em;
}

.new-comment {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 3em;
	padding: 2em 0;
	border-top: solid 2px var(--text-highlight);
}

.new-comment-table {
	width: 95%;
}

[data-depth = "0"] {
	background: rgba(0, 0, 0, 0.1);
}

[data-depth = "1"], [data-depth = "2"], [data-depth = "3"], [data-depth = "4"], [data-depth = "5"] {
	margin-top: 0.4em;
	border-top: solid 1px var(--text-highlight);
	background: rgba(0, 0, 0, 0.05);
}

.tdright, .tdretort {
	font-size: 1rem;
}

/* Annoying workaround for the colour of reply authors not being added. Note that we'll have to update these if we change someone's colour */

.comment-author-color-34ada4 { /* Sam Brown */
	color: #34ada4;
}  

.comment-author-color-590000 { /* Sam Creyton */
	color: #590000;
}  

.comment-author-color-894a1a { /* Emma */
	color: #894a1a;
}  

.comment-author-color-7e758b { /* Penny */
	color: #7e758b;
}  

.comment-author-color-8e8f3c { /* Pasi */
	color: #8e8f3c;
}  

.comment-author-color-463c20 { /* Mark */
	color: #463c20;
}  

.comment-author-color-007895 { /* Adam */
	color: #007895;
}  

.comment-author-color-663b00 { /* Lisca */
	color: #663b00;
}  

.comment-author-color-064d72 { /* Marion */
	color: #064d72;
}  

.comment-author-color-894a68 { /* Brett */
	color: #894a68;
}  

.comment-author-color-8967b8 { /* Andrew */
	color: #8967b8;
}  

.comment-author-color-d79700 { /* Paul */
	color: #d79700;
}  

.comment-author-color-980e36 { /* Michelle */
	color: #980e36;
}  

.comment-author-color-1c9db2 { /* Scuff */
	color: #1c9db2;
}  

.comment-author-color-a4793c { /* Damian */
	color: #a4793c;
}  

.comment-author-color-00988d { /* Me */
	color: #00988d;
}  

.comment-author-color-46755a { /* Mike */
	color: #46755a;
}  

.comment-author-color-085747 { /* Noel */
	color: #085747;
}  

.comment-author-color-e47100 { /* Lisa */
	color: #e47100;
}  

.comment-author-color-bd1f00 { /* Ian */
	color: #bd1f00;
}  

.comment-author-color-6c6825 { /* Matt */
	color: #6c6825;
}  

.comment-author-color-667900 { /* Liz */
	color: #667900;
}  

.comment-author-color-ba4a1a { /* Spak */
	color: #ba4a1a;
}  

.comment-author-color-98b86e { /* Maddie */
	color: #98b86e;
}  

.comment-author-color-cec073 { /* Cathy */
	color: #cec073;
}  

.comment-author-color-d4599a { /* Sara */
	color: #d4599a;
}  

.formguide, .golfer {
  font-weight: 700;
}

a.formguide:hover,
a.formguide:active {
	color: #fff;
}

#masterdiv {
	margin-bottom: 50px;
}

.left { text-align:left !important;}

.right { text-align:right !important;}

.centre { text-align:center !important;}

.score { 
	text-align:center !important; 
}

.winner {
	color:#9e2618;
}

.newyear td {
	padding-top: 1.25em; 
	border-top: 2px;
}

.cardcontent img {
	width: 100%;
	height: auto;
}

.cardhead {
	font-family: var(--body-text);
	font-size: 1.6rem;
	margin-top: 2em;
	border-bottom: solid 2px var(--text-highlight);
}

#card {
	margin-bottom: 2em;
}

#card td, #card th {
	font-size: 1.125rem;
}

#card td {
	font-weight: 400;
}

.thin-td {
	width: 10%;
}

#card td.cardbold {
	width:19%;
    font-weight: 700;
}

#golferPop {
	width: 50%;
}

/*Open scores table */

#openscores th {
	background: var(--text-highlight);
}

#openscores td {
	color: var(--text);
	padding-top: 0.2em;
}

.openpos, .openround {	
	width:7%;
	text-align:center;
}

#openscores .golfer,
#openscores td.openround {	
	color: var(--text-highlight);
}

.openround {	
	display: none;
}

#openscores .MC .r3,
#openscores .MC .r4,
#openscores .WD .r3,
#openscores .WD .r4 {
	opacity: 0;
}

.opengolfer {	
	width:30%;
	text-align:left;
}

.openhole {	
	width:12%;
	text-align:center;
}

.odds {	
	width:16%;
	text-align:right;
	margin-right: 5%;
}

/* Form popup on selection pages */

#formGuideDiv { 
    position:absolute; 
    left:0; 
    top:0; 
    visibility:hidden; 
    z-index:10
}

table.popup td {
    white-space: nowrap;
    font-size: 1em; 
    font-weight: 300;
    color:#fff;
}

#dek { 
    background-color: var(--dark-blue); 
    position: absolute; 
    visibility: hidden; 
    z-index: 2007; 
    opacity: .95; 
    -moz-opacity: 0.95; 
    filter: alpha(opacity=95); 
    -khtml-opacity: .95; 
    border: solid 2px var(--text-highlight); 
    padding: 0.5rem; 
}


/*** Login form ***/

#login {
	width: 70%;
}

#login p {
	font-size: 1em;
}

/* Grid for history page */

.historyCont {
  padding: 0 0 6em 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-gap: 20px 20px;
}

.historyTile {
	position: relative;
	width: 100%;
	height: 200px;
	background: #fff;
}

.historyCont a, .historyCont a:visited, .historyCont a:hover, .historyCont a:active {
	color: #fff;
}

.historyYear {
	text-align: center;
  width: 94%;
  padding: 3%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(94, 23, 0, 0.8);
}

.historyImage {
  width: 100%;
}

.historyTile {
	z-index: 3;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

#hist2024 {
	background-image: url(../img/arabiancleeks.png);
}

#hist2023 {
	background-image: url(../img/CleekInTransylvania.png);
}

#hist2022 {
	background-image: url(../img/feathercleek.png);
}

#hist2021 {
	background-image: url(../img/edgecleek.png);
}

#hist2019 {
	background-image: url(../img/groovecleek.png);
}

#hist2018 {
	background-image: url(../img/RogerRamcleek.png);
}

#hist2017 {
	background-image: url(../img/CleekNoir.png);
}

#hist2016 {
	background-image: url(../img/CleeksYoullCleek.png);
}

#hist2015 {
	background-image: url(../img/BourgeoisCleek.png);
}

#hist2014 {
	background-image: url(../img/BeatCleek.png);
}

#hist2013 {
	background-image: url(../img/SteamCleek.png);
}

#hist2012 {
	background-image: url(../img/PharoahCleek.png);
}

#hist2011 {
	background-image: url(../img/LuchaCleek.png);
}

#hist2010 {
	background-image: url(../img/UniverseCleek.png);
}

#hist2009 {
	background-image: url(../img/ThunderCleek.png);
}

#hist2008 {
	background-image: url(../img/CarnivalCleek.png);
}

#hist2007 {
	background-image: url(../img/DeepCleek.png);
}

#hist2006 {
	background-image: url(../img/FrangipaniCleek.png);
}

#hist2005 {
	background-image: url(../img/CleekInvaders.png);
}

#hist2004 {
	background-image: url(../img/FarEastCleek.png);
}

#hist2003 {
	background-image: url(../img/CleekThatTimeForgot.png);
}

.historyDeets {
    width: 94%;
    padding: 3%;
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
}

.historyDeets p {
	margin: 0.2em 0;
    font-weight: 300;
}

/* Fun with charts */

.svganchor {
	width: 100%;
}

.cleekerLine {
	fill: none;
	stroke-width: 2px;
}

.legendItem {
	font-size: 0.9rem;
	font-weight: 900;
}

.tip {
	position: absolute;
	z-index: 23771;
	background: #fff;
	border: 4px solid #a4793c;
	line-height: 1;
	padding: 8px;
	color: #54acbc;
	text-align: center;
	border-radius:10px;
}

.tip:after, .tip:before  {
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	top: 100%;
	left: 50%;
}

.tip:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 20px;
	margin-left: -20px;
}

.tip:before {
	border-color: rgba(164, 121, 60, 0);
	border-top-color: #a4793c;
	border-width: 26px;
	margin-left: -26px;
}

.tip h3 {
	font-size: 1.8rem;
	border-top: none;
	margin-top: 0;
}

.tip p {
	line-height: 1.1em;
	margin: 0;
}

@font-face {
  font-family: 'Moomin';
  font-style: normal;
  font-weight: normal;
  src: local('Moomin'), url('../fonts/moominfont-webfont.woff') format('woff');
}



@media only screen and (min-width: 27.5rem) { /* 440px in normal conditions */

	.historyCont {
		grid-template-columns: 1fr 1fr;
	}

}

@media only screen and (min-width: 31.25rem) { /* 500px in normal conditions */

	.openround {	
		display: table-cell;
	}

	#logo-nav-banner {
		grid-template-columns: 2fr 3fr;
	}

	/* Temp display of none, should be progressively displayed */
	/*.r1, .r2, .r3, .r4 {
		display: none;
	}*/
}

@media only screen and (min-width: 37.5rem) { /* 600px in normal conditions */

	.login {
	  padding: 20em 6em 2em 6em;
	}

}

@media only screen and (min-width: 41.25rem) { /* 660px in normal conditions */

	.historyCont {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.content.boat {
		padding-bottom: 24em;
	}

}

@media only screen and (min-width: 45rem) { /* 720px in normal conditions */

	.userlink {
	    /*font-size: 1.2rem;*/
	    /*width: 20%;*/
	}

	#title {
		display: block;
	}

	table, th, td, .glossymenu {
		font-size: 1.3rem;
	}

}

@media only screen and (min-width: 50rem) { /* 800px in normal conditions */

	.handheld {
		display: none;
	}

	.desktop {
		display: block;
	}

	#happy-moomins {
	  width: 50vw;
	}


}

@media only screen and (min-width: 52.5rem) { /* 840px in normal conditions */

	#logo-nav-banner {
		grid-template-columns: 1fr 3fr;
		grid-template-areas: 
		"title nav"
		"title access";
	}

	#menuicon, #hh-title {
		display: none;
	}

	.nav {
		display: flex;
    flex-wrap: wrap;
    justify-content: end;
		position: static;
		padding-right: 0.75rem;
	}

	.nav[data-state="opened"] {
		display: flex;
	}

	.nav li {
		margin: 0 0 0 0.5rem;
		float: left;
		background: none;
		border-top: none;
		padding: 0;
	}

	.nav li:hover {
		background: none;
	}

	.userlink {
		width: auto;
		position: static;
		padding-right: 0.75rem;
	}

	.slim {
		width: 24%;
	}

	.content {
		position: relative;
		margin: 0 0 0 20%;
		width: 56%;
	}

	.widecontent {
		margin: 0 0 0 5%;
		width: 80%;
	}

	.slimgnus {	
		width: 70%;
	}

	.boat-cont {
		width: 21vw;
	}

	#sea {
		bottom: -8vw;
	}

}

@media only screen and (min-width: 59.375rem) { /* 950px in normal conditions */

	.nav li {
		margin: 0 0 0 1rem;
	}

	.content.boat {
		padding-bottom: 36rem;
	}

	#pancakes {
		width: 30vw;
	}

	#groke {
		width: 24vw;
		left: 2rem;
	}

	#happy-moomins {
	  width: 36vw;
	}


}

@media only screen and (min-width: 73.75rem) { /* 1180px in normal conditions */

	.form-cont {
		width: 74%;
	}

	.slim {
		width: 24%;
	}

}

@media only screen and (min-width: 87.5rem) { /* 1400px in normal conditions */

}