/* FLUFFYTECH: Beaminster Tennis Club / Homepage and archive layout | Version 1.0.1 | Updated 2026-11-12 */
/*Gordon did this - uh oh*/
p {padding-left: 10px}
hr.news {border-top: 1px solid rgba(255,255,255,0.8);}
	
/*links*/
a:focus {outline:none;}
a, a:visited, a:active {color: rgba(255,255,255,1); text-decoration: none; transition: 0.3s all ease; border-bottom: 1px dotted rgba(255,255,255,0.8); outline:none !important;}
a:hover {border-bottom:1px dotted rgba(255,255,255,0)}

/*wrapper*/

#wrapper .ebb_img {filter:contrast(130%) !important;}

#wrapper { overflow-y: scroll; width: 100%; height: 100%;
text-align: center; position: absolute; left: 0px; top:0px;
}

html {overflow-x:hidden !important;}


/*contents wrapper*/
.contents {
    max-width: var(--content-max-width);
	position:absolute;
    top: 50%; transform: translateY(-50%);right: 0; bottom: 0; left: 0;
	margin-left: auto;
	margin-right: auto;
    padding: 0px 10px 60px 10px;
    }
    
/*contents responsive*/    
    @media screen and (max-width: 768px) {
  .contents {/*! max-width: 90%; */}
}

@media screen and (max-width: 600px) {
  .contents {/*! max-width: 100% !important; */ /*! top: 35%; */ /*! transform: translateY(-35%); */}
}
/*title*/
.title {
font-family: 'Quicksand', sans-serif; text-transform:uppercase;
font-size: 350%; text-align:left; line-height: 1;}

@media screen and (max-width: 900px) {
.title {font-size: 300%}
}

@media screen and (max-width: 600px) {
.title {font-size: 280%}
}

@media screen and (max-width: 500px) {
.title {font-size: 250%}
}

/*logo*/
.logo {
max-width: 100%;
  height: auto;}


/*message */
.message {font-size: 150%;text-align:left;
}






/* animation*/

#wrapper {animation-name: fadeup; animation-duration: 0s;}
.message {animation-name: fadeup; animation-duration: 3s; animation-delay: 0s; opacity: 0; animation-fill-mode: forwards;}
#copyright {animation-name: fadeup; animation-duration: 3s; animation-delay: 2.5s; opacity: 0; animation-fill-mode: forwards;}
#dwuserEasyBigBackground img {animation-name:slidebur; animation-duration: 4s; animation-iteration-count: infinite; }



/*
@keyframes slidebur {
    0% {
    filter:blur(6px); 
  }
  100% {
    filter:blur(2px);
  }
}
*/


@keyframes fadeup {
    0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
   
  100% {
    opacity: 1;
  }
}

/*H1 Gordon done some CSS*/
h1 { color: rgba(255,255,255,1);
     padding: 10px 8px ;
     text-align: left;
	 font-size: 120%;
	 font-weight: 300;
	 transition: 0.4s;
	 }

/*accordion buttons*/
.accordion {
    background: rgba(255,25,255,0);
    color: rgba(255,255,255,1);
    cursor: pointer;
    padding: 10px 8px ;

/* Gordon - this width below is casusing the font to wobble like crazy on my iphone SE landscape 568x320 - if I change the value to 90% it stops wobbling but then the accordion is obviously too narrow */  
    width: 100%; max-width: 99.5%;
  
    border: none;
    text-align: left;
    outline: none;
    font-size: 120%;
    transition: 0.4s;
    border-top: 1px solid rgba(255,255,255,0.8);
	font-family: 'Quicksand', sans-serif;
}

@media screen and (max-width: 350px) {
    .accordion {font-size: 110%;}
}




/*border bottom on last one*/

#lastaccordion {border-bottom: 1px solid rgba(255,255,255,0.8);}

/*hover*/

.accordion:hover {
    background: rgba(255,25,255,0);
    color: rgba(255,255,255,1);
    border-top: 1px solid rgba(255,255,255,1);
}


/*symbol +*/

.accordion:after {
    content: '\002B';
    color: rgba(255,255,255,0.8);
    font-weight: normal;
    float: right;
    margin-left: 5px;
    transition: 0.3s ease;
    font-size: 120%;
}




/*symbol -*/

.active:after {
    content: "\2212";
}

/*symbol -*/

.accordion:hover:after {
    color: rgba(255,255,255,1);
}


/*accordion contents*/
.panel {
    padding: 0 18px 0px 8px;
    background: rgba(255,25,255,0);
    color: rgba(255,255,255,0.9);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 100%;
}

/*full white items on touchscreens*/
@media screen and (max-width: 1024px) {
    .accordion {color: rgba(255,255,255,1); border-top: 1px solid rgba(255,255,255,1);}
    #lastaccordion {border-bottom: 1px solid rgba(255,255,255,1);}
    .accordion:after {color: rgba(255,255,255,1);}
    .panel, .panel a {color: rgba(255,255,255,1);}
}

/*lists*/

ul {padding-left: 0px;} li {padding-bottom: 8px;}

/*panel links*/

.panel a {color:rgba(255,255,255,0.9); text-decoration: none; transition: 0.3s ease;}

.panel a:visited, .panel a:hover {color:rgba(255,255,255,1);}

/*dotted outline on accordion links*/
	
	button.accordion, button.accordion:active, button.accordion:focus,
	button.accordion:active:after, button.accordion:active:focus {outline: 0 !important; -moz-outline-style: none !important; }


* {
    -webkit-tap-highlight-color: rgba(255,255,255,0.1);
}