@charset "utf-8";
/* Responsive layout of the custom popup pages (the custom-wide family: #page > #header, #main > #left/#center/#right,
   #recommendation, #footer). Loaded by _radio/inc/responsive-head.jsp (from head-javascript.jsp and
   head-javascript-728.jsp), after the station's colors.css. The desktop layout (1000px) is untouched: every rule
   sits in a max-width media query or under html.m.
     >= 1000px   desktop
     768-999px   tablet: fluid page, the columns wrap
     <= 767px    phone: the look of the custom mobile page (burger bar, big play button, one column)
   html.m is set at load for widths under 768px (or ?view=mobile): it only decides which ad units are on the page. */

.phone-only,
.mob-only,
.m-station {display: none;}
html.m .mob-only {display: block;}
html.m [id^="div-gpt-ad-15270"],
html.m #banneraki {display: none !important;}

@media (max-width: 999px) {
	html body #page {width: auto; max-width: 1000px; padding: 3px 0 10px; box-sizing: border-box;}
	html body #header {float: none; width: auto; max-width: 100%; margin: 0 0 5px; overflow: hidden;}
	html body #header p,
	html body #header .logo {float: none; width: auto; margin: 0;}
	html body #header .banner {float: none; width: auto; max-width: 100%; margin: 5px 0 0;}
	html body #header img {max-width: 100%; height: auto;}
	#div-gpt-ad-1527086048543-2 {display: none !important;}

	html body #main {display: flex; flex-wrap: wrap; align-items: flex-start; width: auto; height: auto; margin-bottom: 10px;}
	html body #left {float: none; flex: 1 1 300px; width: auto; height: auto; margin: 0 4px 8px 0; overflow: visible;}
	html body #center {float: none; flex: 0 0 300px; width: 300px; margin: 0 4px 8px;}
	html body #right {float: none; flex: 1 1 300px; width: auto; margin: 0 0 8px;}
	html body #info {position: static; height: auto;}
	html body #left h1 a, html body #left div.ph a {max-width: 100%;}
	html body #shows_placeholder {height: auto; max-height: 335px; overflow: auto;}
	html body #now {height: auto; min-height: 80px;}
	html body #messages {height: auto;}
	html body #message-list {height: 185px;}
	html body #messages textarea {width: calc(100% - 85px); box-sizing: border-box;}
	html body #player {width: 100%; max-width: 345px; box-sizing: border-box;}
	html body #footer {height: auto;}
	html body #footer #live24,
	html body #banner728x90 {float: none; margin: 0 auto 5px; max-width: 100%; overflow: hidden;}
}

@media (max-width: 767px) {
	.phone-only {display: block;}
	html body {background: #fff !important; color: #333 !important; font: 300 16px/1.4 Roboto, Helvetica, Arial, sans-serif;}
	html body a {color: #6d6d6d;}
	html body #page {padding: 0; background: #fff !important;}

	/* burger bar on top: the logo centred, the menu on the right (the menu of the custom mobile page) */
	#m-bar {display: block; position: relative; text-align: center; background: #fff;}
	#m-bar .m-logo {display: inline-block; padding: 10px 0;}
	#m-bar .m-logo img {width: 180px; height: auto;}
	#mobile-menu {position: absolute; top: 22px; right: 12px; z-index: 60; text-align: left;}
	#mobile-menu > summary {display: block; list-style: none; cursor: pointer; padding: 8px 12px; background: #fff; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px;}
	#mobile-menu > summary::-webkit-details-marker {display: none;}
	.burger-icon {display: block; width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,0,0,.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center / 100% 100% no-repeat;}
	.menu-panel {position: absolute; top: 52px; right: 0; width: calc(100vw - 24px); max-width: 340px; max-height: 75vh; overflow: auto; background: #fff; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2);}
	.menu-panel summary {padding: 10px 14px; cursor: pointer; font-weight: 400; color: rgba(0, 0, 0, .7);}
	.menu-panel details[open] > summary {color: #000;}
	.menu-panel a {display: block; padding: 8px 14px 8px 28px; text-decoration: none; color: #333;}
	.menu-panel a.top {padding: 10px 14px; color: rgba(0, 0, 0, .7);}
	.menu-panel a:hover {background: #f1f1f1;}
	#menu-search {display: none;}

	/* the station's own banner, scaled, under the bar */
	html body #header {margin: 0; background: #fff; text-align: center;}

	/* play button and station name on a light band, then the ad, now playing, the station, the programme, the form */
	html body #main {display: grid; grid-template-columns: 150px 1fr; grid-template-rows: minmax(70px, auto) minmax(70px, auto); align-items: stretch; width: auto; height: auto; margin: 0; padding: 0;}
	html body #left,
	html body #center,
	html body #right {display: contents;}
	html body #center > div:not(#now) {display: none;}
	#main > *,
	html body #now,
	html body #info,
	html body #shows,
	html body #messages {grid-column: 1 / -1;}
	html body #player {grid-column: 1; grid-row: 1 / span 2; width: auto; max-width: none; min-height: 140px; margin: 0; padding: 10px; box-sizing: border-box; background: #e4eff5 !important; border-top: 1px solid #ccc;}
	#m-title {grid-column: 2; grid-row: 1; padding: 10px 10px 0 0; background: #e4eff5; border-top: 1px solid #ccc; min-width: 0;}
	#m-title h1, #m-title div.ph {margin: 0; padding: 0; font-size: 22px; font-weight: 300; color: #333; overflow-wrap: anywhere;}
	html body #socialbar {grid-column: 2; grid-row: 2; float: none; height: auto; max-width: none; margin: 0; padding: 6px 10px 10px 0; background: #e4eff5; overflow: hidden;}
	#m-ad {order: 1;}
	html body #now {order: 2;}
	html body #info {order: 3;}
	#jp-error-div {order: 4;}
	html body #shows {order: 5;}
	html body #messages {order: 6;}

	/* the big play button of the custom mobile page */
	html body #player div.jp-audio-stream {width: auto; margin: 0; padding: 0; border: 0; background: none;}
	html body #player div.jp-interface {position: static; width: 120px; height: 120px; padding: 0; background: none;}
	html body #player ul.jp-controls {position: static; width: 120px; height: 120px; margin: 0; padding: 0;}
	html body #player ul.jp-controls li {display: block; float: left; height: 120px;}
	html body #player ul.jp-controls a {display: block; width: 120px; height: 120px; margin: 0; border: 0; overflow: hidden; text-indent: -9999px;}
	html body #player .jp-play {background: url(mobile/images/button-play.png) center / 120px 120px no-repeat !important;}
	html body #player .jp-pause {background: url(mobile/images/button-pause.png) center / 120px 120px no-repeat !important;}
	html body #player .jp-volume-controls,
	html body #player .jp-volume-bar,
	html body #player p {display: none !important;}
	html body #player object {display: block; width: auto !important; height: auto !important;}
	html body #audio-tag {width: 100%; height: 100px;}

	/* 300x250 mobile ad unit */
	#m-ad {margin: 20px auto 10px; width: 300px; max-width: 100%; min-height: 271px; text-align: center;}
	#m-ad .adlabel {display: block; color: #333; font-size: 14px;}
	#div-gpt-ad-1551708015997-0 {margin: auto; width: 300px; min-height: 250px;}
	#div-gpt-ad-1770807906776-0 {height: 0; overflow: hidden;}

	/* now playing, programme and contact: the blocks of the custom mobile page */
	html body #now {height: auto; min-height: 0; margin: 0; padding: 0 0 12px; border: 0; text-align: center; background: #2288b8 !important; color: #fff !important;}
	html body #now h1,
	html body #shows h1,
	html body #messages h1, html body #now div.ph, html body #shows div.ph, html body #messages div.ph {display: block; width: 70%; height: auto; margin: 0 auto 10px; padding: 10px 0; text-align: center; text-transform: uppercase; font-size: 17px; font-weight: 700; border-radius: 0 0 3px 3px; background: #fff !important; color: #333;}
	html body #now h1::after, html body #now div.ph::after {content: "NOW PLAYING";}
	html body #shows h1::after, html body #shows div.ph::after {content: "ΠΡΟΓΡΑΜΜΑ";}
	html body #messages h1::after, html body #messages div.ph::after {content: "ΕΠΙΚΟΙΝΩΝΙΑ";}
	html body #shows h1,
	html body #messages h1, html body #shows div.ph, html body #messages div.ph {background: #455e87 !important; color: #fff;}
	html body #now h1 img,
	html body #shows h1 img,
	html body #shows h1 a,
	html body #messages h1 img, html body #now div.ph img, html body #shows div.ph img, html body #shows div.ph a, html body #messages div.ph img {display: none;}
	html body #now h2,
	html body #now p {margin: 0 10px 8px; color: #fff;}
	html body #shows {width: auto; height: auto; padding: 0 0 12px; background: #2389b9 !important; color: #fff !important;}
	html body #shows_placeholder {height: auto; max-height: 360px; margin: 0; overflow: auto;}
	html body #shows p,
	html body #shows span {margin: 0; padding: 4px 15px; color: #fff;}
	html body #info {position: static; width: auto; height: auto; padding: 16px; background: #fff !important; color: #333 !important; font-size: 17px; line-height: 1.4;}
	html body #info h1,
	html body #info h2, html body #info div.ph {display: none;}
	html body #info p,
	html body #info a {margin: 0; color: #333 !important;}
	/* the station block of the custom mobile page (logo, contact, description) replaces the rest of the info box */
	html body #info .m-station {display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 16px;}
	html body #info .m-station ~ * {display: none !important;}
	html body #info .m-station img {flex: 0 0 117px; width: 117px; max-width: 35%; height: auto; aspect-ratio: 1; object-fit: contain; object-position: left top;}
	html body #info .m-contact {flex: 1 1 0; min-width: 0; overflow-wrap: anywhere;}
	html body #info .m-contact h4 {margin: 0 0 6px; font-size: 24px; line-height: 1.2; font-weight: 700; color: #333;}
	html body #info .m-desc {flex: 0 0 100%; margin-top: 16px; padding-top: 16px; border-top: 1px solid #dee2e6; color: #555;}
	html body #messages {width: auto; height: auto; margin: 0; padding: 0 0 12px; background: #f1f1f1 !important; color: #333 !important;}
	html body #message-list {height: 200px; margin: 0 15px 10px; overflow: auto;}
	/* the message box and the send button side by side, both 50px high (the button is a 50x50 picture of the station) */
	html body #messages {display: grid; grid-template-columns: minmax(0, 1fr) 65px; align-items: start;}
	html body #messages > * {grid-column: 1 / -1;}
	html body #messages textarea {float: none; display: block; grid-column: 1; width: auto; height: 50px; margin: 5px 8px 5px 15px; box-sizing: border-box; font-size: 16px; resize: none;}
	html body #messages textarea {background: #fff !important; color: #333 !important; border: 1px solid #bbc1cb;}
	html body #messages input {float: none; display: block; grid-column: 2; justify-self: start; width: 50px; height: 50px; margin: 5px 0;}

	html body #recommendation {box-sizing: border-box; margin-top: 0; padding: 12px 15px; background: #f8f9fa; color: #6d6d6d; font-size: 12px;}
	html body #recommendation a {color: #6d6d6d;}
	#jp-error-div {margin: 0; padding: 20px; background: #f8f9fa; text-align: center; font-size: 14px;}
	#jp-error-div p {margin: 0;}
	html body #footer {height: auto; border-top: 0; padding: 10px 0; text-align: center;}
	html body #footer #live24 {float: none; width: auto;}
	html body #banner728x90 {display: none;}
}