[data-theme="light"] {

	--c-orange: #eb6c0d;
	--c-dark-blue: #1f3451;
	--c-pink: #e44b9b;
	--c-light-blue: #009eb3;
	
	--body-bg-color: #fff;

	--skip-links-bg: gold;
	--skip-links-txt: #fff;
 
	--button-bg-color: var(--c-orange);
	--button-txt-color:#000;
	--button-bg-color-hover: var(--c-orange);
	--button-txt-color-hover: #000;
	--button-border-width: 0;
	--button-border-style: solid;
	--button-border-color: #000;
	--button-border-radius: 10px;
 
	--main-nav-bg: transparent;
	--main-nav-txt: #fff;
	--main-nav-active-bg: transparent;
	--main-nav-active-txt: #fff;
	--main-nav-drop-bg:  var(--c-light-grey);
	--main-nav-drop-active-bg: var(--c-dark-grey);
	--main-nav-drop-active-txt: #fff;
	--main-nav-hamburger: #fff;
	--main-nav-selected-txt: #fff;
	--main-nav-selected-bg: transparent;
	
	--rc-border-radius: 1rem; 
	--rc-bg-color: var(--c-light-blue);
	--rc-heading-bg-color: var(--dark-grey);
	--rc-heading-txt-color: #fff; 
	--rc-heading-font-weight: 500; 
	--rc-link-bg-color: var(--c-light-blue);
	--rc-link-txt-color: #fff;
	--rc-hover-bg-color: var(--c-dark-blue);
	--rc-hover-txt-color: #fff;	
	--rc-selected-bg-color: var(--c-dark-blue);
	--rc-selected-txt-color: #fff;
	
	--ic-bg-color: transparent;
	--ic-border-radius: 0;
	--ic-caption-color: #fff;
	--ic-link-color: #fff;
	--ic-link-hover-color: #fff;
	--ic-alt-bg-color: #fff;
	--ic-alt-link-color: #000;
	--ic-alt-link-hover-color: #000;
	--ic-alt-caption-color: #000;
	--ic-tag-bg-color: var(--c-dark-grey);
	--ic-tag-color: #fff;
	--ic-tag-hover-bg-color: var(--c-dark-grey);	
	--ic-tag-hover-color: #fff;
	
	--ss-bg-color: var(--c-orange);
	--ss-border-radius: 0;
	--ss-caption-color: var(--c-off-black);
	--ss-link-color: var(--c-off-black);
	--ss-link-hover-color: var(--c-off-black);
	--ss-alt-bg-color: var(--c-all-white);
	--ss-alt-link-color: var(--c-off-black);
	--ss-alt-link-hover-color: var(--c-off-black);
	--ss-alt-caption-color: var(--c-off-black);
	--ss-tag-bg-color: var(--c-off-black);a
	--ss-tag-color: var(--c-all-white);
	--ss-tag-hover-color: var(--c-off-black);
	--ss-tag-hover-bg-color: var(--c-all-white);
	
	
	--np-title-bg-color: var(--c-light-blue);
	--np-link-title-color: #fff;
	--np-link-title-border-radius: 6px;
	
	--bu-bg-color: var(--c-light-blue);
	--bu-txt-color: #fff;
	
	--cnt-issue-title-txt-color: var(--c-green);
	--cnt-pub-date-txt-color: var(--c-light-blue);
	
	--lr-bg-color: var(--c-green);
	
	--fbox-border-radius: 1rem;
	--fbox-bg-color: var(--c-light-blue);
	--fbox-title-color: #fff;
	--fbox-title-bg-color: var(--c-dark-blue);
	--fbox-color: #fff;
	--fbox-link-color: inherit;
	--fbox-link-hover-color: inherit;
	
	--top-row-bg-color: #fff;
	--top-layoutrow-bg-color: inherit;
	--banner-row-bg-color: #fff;
	--banner-layoutrow-bg-color:inherit;
	--search-row-bg-color:#fff;
	--search-layoutrow-bg-color:inherit;	
	--nav-row-bg-color:var(--c-dark-blue);
	--nav-layoutrow-bg-color:inherit;
	
	--icon-button-bg-color: var(--c-green);
	--icon-button-border-radius: 2rem;
	--icon-button-border: none;
	--icon-button-img-width: 35px;
	--icon-button-img-height: 35px;
	
	--content-bg-color: #fff;
	
	--cookie-bg-color: #fff;
	--cookie-txt-color: var(--off-white);
	--cookie-link-color: var(--off-white);
	--cookie-border: none;

}

body { background: url(../img/body-bg.jpg) top left repeat;}

.content-wrap { background-color: var(--content-bg-color); padding: 1.25rem; border-radius: 1rem; overflow: hidden;}
#mainContent img { max-width: 100%; height: auto}

.club-link { background-color: #1f3451; border-radius: 20px; display: block; background-image: url(../img/icons-view-clubs.png); background-position: 10px 10px; background-repeat:no-repeat; background-size: 60px; padding: 20px 20px 20px 80px; color: #fff; text-decoration: none; margin-bottom: 20px;}
.club-link:link,
.club-link:visited,
.club-link:hover,
.club-link:active { color: #fff; text-decoration:none;}

.club-link div { float: left; width: 80%; }
.club-link span { font-weight: bold;}
.club-link span:last-child { background-color: #fff; padding: 10px; float: right; display: block; border-radius: 10px;}
.club-link address { margin-bottom: 0; }

h1, h2, h3, h4, .button, .section-list  {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  font-style: normal;
}


.section-summary .card { padding-bottom: 3rem; background: url(../img/rough-edge-mask.png) bottom left no-repeat var(--c-orange); background-size: contain }
.section-summary .card .caption { position: relative }
.section-summary .card .caption:before {
    content: "";
    background-color: var(--c-orange);
    height: 20px;
    transform: skewY(-2deg);
    position: absolute;
    left: 0;
    right: 0;
}

.section-summary .card .caption:before{    
    top: -10px;    
}
.section-summary .card .sum-more { margin-top: 1em; display: block; background: url(../img/splat-panels-view.png) 0 0 no-repeat ; background-size: 70px 70px; padding: 1.25rem 1rem; font-weight: bold}
.section-summary .card .sum-more:after { content: '>'; margin-left: 0.5rem }
.section-summary h3 { color: #000}
.section-summary .card:nth-child(2n) { background-color: var(--c-light-blue)}
.section-summary .card:nth-child(2n) .caption:before { background-color: var(--c-light-blue); }
.section-summary .card:nth-child(3n) { background-color: var(--c-pink)}
.section-summary .card:nth-child(3n) .caption:before { background-color: var(--c-pink); }

.section-list { font-size: 1.25rem; }
.menu ul { margin-inline-end: 2rem; justify-content: flex-end; }
.menu ul > li .splat:hover:before
{ 
  background: url(../img/splat-main-nav-hover.png) 0 0 no-repeat; 
  background-size: 80px 100px; overlay: hidden; position: absolute; 
  content: '';
  top: -6px; right: 0;
  bottom: 0; left: 20%; 
  }
@media only screen and (min-width: 1260px) {  
.menu ul li.selected .splat:before,
.home .menu ul li:first-child .splat:before 
{ 
  background: url(../img/splat-main-nav-hover.png) 0 0 no-repeat; 
  background-size: 80px 100px; overlay: hidden; position: absolute; 
  content: '';
  top: -6px; right: 0;
  bottom: 0; left: 20%; 
  }
.menu ul li.selected .splat:before,
.home .menu ul li:first-child .splat:before { z-index: -1 }
}


.menu ul > li:first-child { padding-inline: 1rem;}
@media only screen and (max-width: 1260px) {
	.menu ul li	{ justify-content: flex-end;}
	.menu ul > li:first-child { padding-inline: 0;}
	.menu ul > li .splat:hover:before { top: -6px; left: calc(100% - 110px); bottom: 0; right: 0; background: url(../img/splat-main-nav-hover.png) 0 0 no-repeat; background-size: 80px 100px; overlay: hidden; position: absolute; 	  content: '';}
}

@media only screen and (min-width: 1260px) {
	.menu ul li.selected, 
	.home .menu ul li:first-child { transform: rotate(-5deg);}
}
.splat { display: inline-block;}


h1 {color: var(--c-orange) }
h2 { color: #009cb1 }
h3, #mainContent h4 { color: var(--c-dark-blue)}

.home .highlights { padding: 2rem 0; background-color: #fff;}


.banner a { position: relative }
.banner a:before { background: url(../img/rough-edge-header-mask.png) 0 0 no-repeat; background-size: 100% 30px; overlay: hidden; position: absolute; 
  content: '';
  top: 0; right: 0;
  bottom: 0; left: 0;
}

.social-wrap { width: 16rem }
.social-wrap { --icon-button-img-width: 50px; --icon-button-img-height: 50px; --icon-button-bg-color: transparent;}
.social-wrap a.button {background-color: transparent; border: none;}

.footer-row a {color: #fff}
.footer-row h2 { color: #fff}

a.button { background-color: var(--c-orange); color:#000; }
a.button.search { flex: 0; margin-inline-start: 2rem; color: #000; }
a.button.search:hover { color: #000; } background-color: var(--c-orange) };



a.float-button { position: relative;}
a.float-button,
a.float-button:link,
a.float-button:hover,
a.float-button:active,
a.float-button:focus,
a.float-button:visited {
	position:fixed;
	width:80px;
	height:80px;
	bottom:0;
	right:40px;
	background-color:transparent;
	text-align:left;
	margin-bottom: 180px;
	width: 80px;
	height: 80px;
}
a.float-button span { display: inline-block;  }
a.float-button img { width: 100px; height: 100px; }

@media only screen and (max-width: 1000px) {
	a.float-button { display: none }
}

.hubs,
.event-app { background-color: #009eb3; padding: 10px; color: #fff; text-align: center; border-radius: 15px; text-decoration: none; }
.youth {background-color: #eb6c0d; padding: 10px; color: #fff; text-align: center; border-radius: 15px; text-decoration: none; }
#mainContent .button { background-color: var(--c-light-blue); background-image: url(../img/splat-panels-view.png); padding-inline: 2.25rem; background-size: 4rem; font-family: inherit; font-weight: bold; font-size: 1.2rem; margin-right: 2rem}

#accControlWrap {
    text-align: right;
    margin: 20px 0;
}
.toggle-cross {
    cursor: pointer;
    color: #fff;
    padding: 8px;
    background-color: #1f3451;
    line-height: 1.2;
    font-size: 1.75em;
}
.toggle-cross:after {
  content: '+';
  /*position: relative;*/
  float: right;
  color: #fff;
  font-size: 1.3em;
}
.toggle-cross.open:after {
  content: '—';
}

.toggle-cross:hover,
.toggle-cross:focus { 
  background-color: #eb6c0d;
}
.toggle-content {
    display: none;
    margin-left: 15px;
    margin-bottom: 3em;
    position: relative;
    overflow: hidden;
}
.toggle-content ul li { margin-bottom: 5px; margin-top: 8px;}