@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400&display=swap');

:root {
--black: 0,0,0;
--buttonGreen: 20,155,20;
--darkGreen: 0,43,50;
--orange: 225,135,35;
--white: 255,255,255;
}
 

BODY {
	background: var(--darkGreen),1.00);
	background-image: url("../images/bg-mp1.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center top;
	font-family: 'Spartan', sans-serif;
	font-size: 0.9em;
	margin: -310px 0 0;
	padding: 0;
	color: #FFF;
	}
	
A, A:visited {color: #FFF; text-decoration: none; border-bottom: 1px dotted #FFF;}
A:hover {border-bottom: 1px solid #FFF;}

H1 {font-size: 1.35rem; line-height: 2.0rem;}
H2 {font-size: 1.25rem; line-height: 1.7rem;}
H3 {font-size: 1.1rem; line-height: 1.5rem;}

SELECT,
TEXTAREA,
INPUT[type=text],
INPUT[type=email],
INPUT[type=time],
INPUT[type=tel] {font-family: 'Spartan', sans-serif; font-size: 0.8rem; margin: 12px; padding: 12px; width: 60%;}
INPUT[type=checkbox] {margin: 12px; width: 24px; height: 24px; border: 0; background: #FFF;}
INPUT[type=submit] {padding: 12px; border: 0;}
INPUT[type=date] {margin: 12px; padding: 12px; width: 15%;}
TEXTAREA {height: 75px;}

INPUT[type=number],
INPUT[type=time] {width: 15%;}

FORM, #SendPost {background: rgba(var(--orange),0.2); padding: 6px 24px;}
TABLE {background: rgba(255,255,255,1.00); width: 60%;}
	
FOOTER {
/*position: fixed;
left: 0;
bottom: 0;*/
width: 100%;
background: rgba(var(--darkGreen),1.00);
color: #FFF;
text-align: center;
font-size: 0.8rem;
padding: 24px 0 12px;
}

#GalaxayPlayer {width: 100%; height: 120px;}

#LiveBox {width:100%; border: solid 2px #FFF; background: rgba(0,43,50,1.0); border-radius: 6px; text-align: center;}
#MixPlayer, #Podcasts {width:100%; border: solid 2px #FFF; background: rgba(0,43,50,1.0); border-radius: 6px; margin: 12px 0;}
#Podcasts LI {cursor: pointer;}
#Podcasts LI:hover {font-weight: bold;}

#Logo {width: 100%; height: 180px; background: rgba(var(--darkGreen),1.00); position: fixed; z-index: 10;}
#Logo IMG {display: block; width: 40%; max-width: 960px; margin: 0 auto; padding: 12px 0 8px; cursor: pointer;}

#HeadLinks {margin: 180px auto; height: 2.0rem; width: 100%; background: rgba(var(--darkGreen),0.50); position: fixed; text-align: center; display: flex; flex-wrap: nowrap;}
#HeadLinks A {border: 0;}
#HeadLinks NAV {width: 96%; margin: auto; cursor: pointer;}
#HeadLinks P {display: inline-flex; margin: 4px 0; text-align: left; font-size: 0.8rem;}
#HeadLinks P:not(.NextOn) {display: inline-flex; margin: 4px 1vw; text-align: left; font-size: 0.8rem;}
#HeadLinks IMG {height: 1.25rem; margin-right: 0.75%;}
#HeadLinks #Add2Cal,
#HeadLinks #Add2ML,
#HeadLinks #Finder {height: 1.25rem; width: 1.5rem; transition: width 0.5s; overflow: hidden;}
#HeadLinks #Add2Cal SPAN,
#HeadLinks #Add2ML SPAN,
#HeadLinks #Finder SPAN {position: relative; top: 0.4em; margin-left: 0.5rem;}
#HeadLinks #Add2Cal:hover,
#HeadLinks #Add2ML:hover,
#HeadLinks #Finder:hover {width: 11rem;}


#Menu {
	position: fixed;
	z-index: 20;
	font-size: 0.8rem;
	display: block;
	background: rgba(139,170,50,1);
	color:#fff;
	width: 75px;
	height: 100vh;
	overflow: hidden;
	transition: width 0.5s, height 0s;
	}
	
#Menu NAV {padding-top: 8px; text-align: center; width: 100%;}	
#Menu NAV:hover, .AltIcon {background: rgba(var(--orange),1.00)}
#Menu IMG {width: 48px; cursor: pointer;}

#Headline {text-align: center;}

#PopOut {margin-left: 59px;
	background: rgba(145,175,65,0.9);}
	
#container {
	width: 50%;
	max-width: 740px;
	min-height: 64vh;
	margin: 310px auto 36px;
	background: rgba(108,108,108,0);
	padding: 220px 2vw 0.5vw 4vw;
	line-height: 1.2rem;
	}
	
#PoppySays {
background: url("../images/Poppy-42.png");
background-position: top left;
background-repeat: no-repeat;
min-height: 42px;
padding-left: 48px;
}

#PopOver {width: 0; height: 90vh; position: absolute; z-index: 999; margin: 5vh 10vw; border-radius: 12px; transition: width 2s, height 2s;}
#Gallery {width: 100%; height: 1300px; border-radius: 12px;}

.LinkBlock {display: inline-block; width: 35%}

#ShoutOut {width: 100%; height: 125px; text-align: center; margin-top: 24px;}
#ShoutOut IMG {width: 33%; display: inline-block; cursor: pointer;}

#Shows {margin: 18px 0; display: flex;}

#ShowSelect {background: rgba(var(--buttonGreen),1.00); width: 98%; height: 36px; font-size: 1.0rem; color:#FFF; padding: 4px 8px 2px; cursor: pointer;}
#ShowSelect IMG {height: 30px; margin-right: 24px;}
#ShowSelect SPAN {position: relative; top: -0.5em;}

.GreenBtn {background: rgba(var(--buttonGreen),1.00); font-size: 0.8rem; color:#FFF; padding: 4px 8px 2px; margin-left: 12px; cursor: pointer; display: inline-block;}

#ShowShows {display: inline-block; background: rgba(var(--buttonGreen),1.0); border: 1px solid rgba(var(--white),1); color: rgba(var(--white),1); float: right; width: auto; padding: 8px; margin: 0; top: 0;}

#ShowPanel, #PodPanel {width: 100%; height: 130px;}

#MoreContent {cursor: pointer;}

#Dets, #Trax {width: 100%; height: auto; margin-top: -6px;}
#Search {width: 100%; min-height: 50vh;}

#Q INPUT[type=text] {font-family: 'Spartan', sans-serif; font-size: 0.8rem; margin: 24px 0; padding: 15px; width: 80%;}
#Q INPUT[type=image] {background: rgba(var(--orange),1.0); height: 24px; width: 24px; margin: -20px -4px; padding: 12px; display: inline;}
#Q IMG {height: 100%; text-align: center; margin: 10%;}

.accordion {background: rgba(var(--darkGreen),0.3); border-bottom: 1px solid #FFF; height: 42px; overflow-y: hidden; transition: height 1.0s ease-in-out; font-size: 0.8rem; line-height: 1.2rem; margin: 0 6px;}
.accordion:first-of-type {border-top: 1px solid #FFF;}

#accPlayer1, #accPlayer2 {float: right; cursor: pointer; background: rgba(var(--buttonGreen),1.00); padding: 6px 6px 3px 6px; margin-top: 6px;}

.green {color: rgba(var(--buttonGreen),1.0);}
.orange {color: rgba(var(--orange),1.0);}

.button {background-color: rgba(var(--orange),1.0); color:#000; padding: 12px; margin: 12px; width: 50%; text-align: center; cursor: pointer;}
.smlbutton {background-color: rgba(var(--orange),1.0); color:#000; padding: 4px; margin: 4px; width: 25%; text-align: center; cursor: pointer; font-size: 0.8rem;}

#NotPhone {display: block; font-size: 0.9rem;}
#Phone {display: none; font-size: 0.9rem;}

#Noticeboard {margin-top: 24px; width: 100%; height: 300px; background: rgba(var(--darkGreen),0.3);}

.smallprint {font-size: 0.7rem;}

.btmBorder {border-bottom: 1px solid #999;}

#Upcoming {width: 90%; font-size: 0.8rem; margin: auto; text-align: left}

/* Desktops and laptops. iPad portrait ----------- */
@media only screen 
and (min-width: 1025px)
and (max-width : 1279px) {
	
FOOTER {
font-size: 0.8rem;
}

#Menu {
	width: 60px;
	height: 300px;
	}
	
#Menu NAV {padding-top: 6px; text-align: center; width: 100%;}	
#Menu IMG {width: 42px; cursor: pointer;}

.button2 {width: 64%;}

#NotPhone {display: block;}
#Phone {display: none;}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px)
and (max-device-width: 1024px) {

BODY {margin: -30px 0;}

H1 {font-size: 1.1rem;}
H2 {font-size: 1.0rem;}
H3 {font-size: 0.9rem;}

#Logo {margin-top: 30px; height: 150px;}
#Logo IMG {width: 64%; margin: 0 auto; padding: 4px 0;}
#Logo P {font-size: 0.8rem;}

#HeadLinks {margin: 180px auto;}

#container {
	width: 80%;
	margin: 0 auto;
	}
	
#ShoutOut {height: 100px;}
	
FOOTER {
font-size: 0.75rem;
}
	
#Menu {
	margin-top: 30px;
	}	

#ShowPanel, #PodPanel {width: 100%; margin: 0;}

#ShowSelect {width: 98%; height: 36px; font-size: 1.0rem;padding: 4px 8px 2px;}
#ShowSelect IMG {height: 30px; margin-right: 24px;}
#ShowSelect SPAN {top: -0.5em;}

.GreenBtn {font-size: 0.8rem; color:#FFF; padding: 2px 4px; margin: 4px; cursor: pointer; display: block;}

#NotPhone {display: block;}
#Phone {display: none;}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-device-width : 767px) {

BODY {margin-top: -150px; background-position: center 45px; font-size: 0.75em;}

SELECT,
TEXTAREA,
INPUT[type=text],
INPUT[type=email],
INPUT[type=time],
INPUT[type=tel] {font-family: 'Spartan', sans-serif; font-size: 0.7rem; margin: 8px; padding: 8px; width: 90%;}
INPUT[type=checkbox] {margin: 8px; width: 12px; height: 12px; border: 0; background: #FFF;}
INPUT[type=submit] {padding: 8px; border: 0;}
INPUT[type=date] {margin: 8px; padding: 8px; width: 15%;}
TEXTAREA {height: 60px;}

INPUT[type=number],
INPUT[type=time] {width: 30%;}

#Logo {margin-top: -112px; height: 84px;}
#Logo IMG {width: 90%; margin: 0 auto; padding: 4px 0;}
#Logo P {font-size: 0.6rem;}

#HeadLinks {margin: -30px auto; width: 100%;}
#HeadLinks P {display: inline-flex; margin: 0 2vw; text-align: left; font-size: 0.6rem;} 
#HeadLinks IMG {height: 1.0rem; cursor: pointer;}
#HeadLinks #Add2Cal,
#HeadLinks #Add2ML,
#HeadLinks #Finder {height: 1.0rem; width: 1.3rem;}
#HeadLinks #Add2Cal:hover,
#HeadLinks #Add2ML:hover,
#HeadLinks #Finder:hover {width: 1.3rem;}
#HeadLinks #Add2Cal SPAN,
#HeadLinks #Add2ML SPAN,
#HeadLinks #Finder SPAN {position: relative; top: 0.2em; margin-left: 0.5rem;}

FORM, #SendPost {padding: 6px 18px;}

H1 {font-size: 0.8rem;}
H2 {font-size: 0.75rem;}
H3 {font-size: 0.7rem;}
	
FOOTER {
font-size: 0.7rem;
}

#container {
	width: 90%;
	padding: 12px 1vw 0.5vw 2vw;
	}

.LinkBlock {display: inline-block; width: 90%}

#Menu {
	margin-top: -160px;
	width: 100%;
	height: 48px;
	}
	
#Menu NAV {padding: 0; text-align: center; width: 13.3%; display: inline-block;}
#Menu NAV:hover,
.AltIcon {background: rgba(var(--orange),1.00)}
#Menu IMG {width: 80%; margin: 3px 0; cursor: pointer;}

#Headline {font-size: 0.8rem; line-height: 1.5rem;}

#radio IMG {width: 96%;}

#ShowSelect {font-size: 0.7rem; color:#FFF; padding: 2px 4px; margin-left: 4px;}

#ShowPanel, #PodPanel {width: 100%; margin: 0;}

#Shows {margin: 8px 0;}

#ShowSelect {width: 98%; height: 32px; font-size: 0.8rem; padding: 4px 4px 2px; overflow-y: hidden; transition: height 0.5s ease-in-out;}
#ShowSelect IMG {height: 30px; margin-right: 24px;}
#ShowSelect SPAN {top: -0.7em;}

.GreenBtn {font-size: 0.6rem; color:#FFF; padding: 2px 4px; margin: 4px; cursor: pointer; display: block;}

#ShowShows {display: block; margin: auto; width: 100%;}

#ShowPanel, #PodPanel {width: 100%; margin: 0; padding-bottom: 6px;}

#MoreContent, #MoreTracks {cursor: pointer;}

#Dets, #Trax {font-size: 0.75rem;}
#Search {width: 100%; min-height: 50vh;}

#Q INPUT[type=text] {font-family: 'Spartan', sans-serif; font-size: 0.7rem; margin: 12px 0; padding: 8px; width: 75%;}
#Q INPUT[type=image] {background: rgba(var(--orange),1.0); height: 12px; width: 12px; margin: -13px -3px; padding: 10px; display: inline;}

.accordion {height: 36px; font-size: 0.7rem; line-height: 1.0rem;}

#ShoutOut {height: auto; width: 100%;}
#ShoutOut IMG {margin: 8px 0; width: 70%; display:inline-block;}
#ShoutOut IMG:last-of-type {margin-bottom: 0;}

.button {width: 75%;}

#NotPhone {display: none; font-size: 0.6rem;}
#Phone {display: block; font-size: 0.6rem;}

.smallprint {font-size: 0.6rem;}
}