/*
Theme Name: radiOzora 2020
Theme URI: https://radiozora.fm
Author: Mnemotechnika Ltd.
Author URI: https://mnemotechnika.hu
Description: radiOzora wordpress theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: ajax, responsive, wordpress
*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	font: inherit;
	vertical-align: baseline;
	list-style-type: none;
	outline: none;
	text-decoration: none;
	border-collapse: collapse;
	border: none;
	border-color: transparent;
	font-family: inherit;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	transition: all 0.2s linear;
}
:root {
  color-scheme: light dark; /* both supported */
}

::-webkit-scrollbar {
	width: 8px;
	background: transparent;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: white;
	background: rgba( 255, 255, 255, 0.5 );
	border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
	background: white;
}
:root {
	touch-action: pan-x pan-y;
	height: 100% 
}
html {
	font-family: Arial, Helvetica, sans-serif;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	line-height: 16px;
	background-color: rgb( 226, 240, 222 );
}
#list {
	position: relative;
}
li.trance,
li.chill, 
li.day,
#player {
	display: block;
	min-height: 96px;
	margin: 8px auto;
	width: calc( 200px + 30vw );
	padding: 8px 0;
	background-color: rgb( 226, 240, 222 );
}
li.day,
#player {
	width: auto;
}
li:first-child {
	margin-top: 0;
}

li a {
	text-transform: uppercase;
}
li p {
	line-height: 1.5em;
}
#wacttsf {
	display: none;
	font-size: 0.8em;
	padding: 0 8px;
}
li.show {
	min-height: 40px;
}
li.day {
	min-height: 16px;
	text-align: center;
	text-transform: uppercase;
	position: sticky;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	top: 0;
	color:  rgb( 172, 197, 163 );
	font-weight: 900;
	z-index: 5000;
}
li.chill {
	text-align: right;
}







li.chill {
	background-color: rgba( 226, 240, 222, 0.8 );
}
li.trance {
	background-color: rgba( 226, 240, 222, 0.8 );
}
li.trance.show {
	background-image: url( images/RED-DOWN.png );
    background-repeat: no-repeat;
    background-position: right center;
}
li.chill.show {
	background-image: url( images/BLUE-DOWN.png );
    background-repeat: no-repeat;
    background-position: left center;
}
li.post.chill {
	background-color: rgba( 41, 170, 226, 0.8 );
}
li.opened.chill,
#player.chill,
li.chill.show .time-indicator {
	background-color: rgba( 41, 170, 226, 1 );
}
li.post.trance {
	background-color: rgba( 237, 32, 36, 0.8 );
}
li.opened.trance,
#player.trance,
li.trance.show .time-indicator {
	background-color: rgba( 237, 32, 36, 1 );
}




li.trance a,
li.trance .show-time,
li.trance.opened .time-indicator,
li.trance.post .time-indicator,
li.trance .show-description {
	color: rgb( 237, 32, 36 );
}
li.chill a,
li.chill .show-time,
li.chill.opened .time-indicator,
li.chill.post .time-indicator,
li.chill .show-description {
	color: rgb( 41, 170, 226 );
}
li.chill.opened a,
li.trance.opened a,
li.post a,
li.chill.opened .show-time,
li.post .post-time,
li.trance.opened .show-time,
li.show .time-indicator,
li.chill.opened .show-description,
li.trance.opened .show-description,
li.chill.opened .post-content,
li.trance.opened .post-content,
li .post-description {
	color: rgb( 226, 240, 222 );
}

li .time-indicator {
	margin: 0 8px;
	padding: 0 4px;
	text-transform: uppercase;
	font-weight: 700;
}
li.chill .time-indicator {
	float: right;
}
li.trance .time-indicator {
	float: left;
}
li .show-time,
li .post-time {
	font-size: 0.8em;
	text-transform: uppercase;
}
li .premier,
li .rerun,
li .repeat {
	display: none;
	clear: both;
}
li .posted {
	clear: both;
}
li .default-time {
	display: block;
}
li.trance .default-time {
	margin-right: 8px;
	background: url( 'images/iconset-03.png' ) right -32px no-repeat;
}
li.chill .default-time {
	margin-left: 8px;
	background: url( 'images/iconset-03.png' ) left -32px no-repeat;
}
li .post-name,
li .show-name,
li .post-image {
	display: block;
	font-weight: 900;
	padding: 0 8px;
}
li .post-name {
	height: 56px;
	margin: 4px 0;
	display: block;
	width: 85%;
}
li .show-name {
	height: 28px;
}
li .facebook {
	display: block;
	width: 16px;
	height: 16px;
	background: url( 'images/iconset-03.png' ) 0px 32px;
}
li.trance .facebook {
	margin-right: 8px;
	margin-top: 4px;
	float: right;
}
li.chill .post-name {
	float: right;
}
li.chill .facebook {
	margin-left: 8px;
	margin-top: 4px;
	float: left;
}
li.trance .post-name {
	float: left;
}
li .post-categories,
li .show-categories {
	font-size: 0.8em;
	padding: 0 8px;
}
li .post-categories a::after {
	content: "|";
	padding: 0 8px;
}
li .post-categories a:last-child::after {
	content: none;
}

li .site-description {
	display: none;
	font-size: 0.8em;
    padding: 0 8px 16px;
    color: gray;
}
li .show-description,
li .post-content {
	display: none;
	height: 0;
	opacity: 0;
	font-size: 0.8em;
}
li.opened .show-description,
li .post-description,
li.opened .post-content {
	display: block;
	opacity: 1;
	height: auto;
	padding: 4px 8px;
	font-size: 0.8em;
}
li.opened .post-time {
	display: block;
}
li.post .time-indicator {
	background-color: rgba( 226, 240, 222, 0.9 );
}
li.trance.opened .time-indicator,
li.chill.opened .time-indicator {
	background-color: rgba( 226, 240, 222, 0.5 );
}
li.opened.show .time-indicator,
li.opened.posted .time-indicator,
li.post .default-time .time-indicator {
	background-color: rgba( 226, 240, 222, 0.9 );
}
.trance.opened .blink-time .time-indicator {
	animation: blink-trance-text 0.5s infinite;
}
.chill.opened .blink-time .time-indicator {
	animation: blink-chill-text 0.5s infinite;
}
@keyframes blink-trance-text {
	0% {
		color: rgb( 237, 32, 36 );
		background-color: rgba( 226, 240, 222, 0.9 );
	}
	49% { 
		color: rgb( 226, 240, 222 );
		background-color: rgb( 237, 32, 36 );
		
	}
	100% { 
		color: rgb( 237, 32, 36 );
		background-color: rgba( 226, 240, 222, 0.9 );
		
	}
}
@keyframes blink-chill-text {
	0% {
		color: rgb( 41, 170, 226 );
		background-color: rgba( 226, 240, 222, 0.9 );
	}
	49% { 
		color: rgb( 226, 240, 222 );
		background-color: rgb( 41, 170, 226 );
		
	}
	100% { 
		color: rgb( 41, 170, 226 );	
		background-color: rgba( 226, 240, 222, 0.9 );
	}
}

li img,
li .post-content img {
	display: block;
	width: 100%;
	margin-top: 8px;
}
li .post-content h1,
li .post-content h2,
li .post-content h3,
li .post-content h4,
li .post-content h5,
li .post-content h6,
li .post-content p {
	margin: 8px 0;
	text-align: left;
}
li .post-description {
	text-align: left;
}
li .post-content h2 {
	color: white;
	font-weight: 600;
}

li .post-content a {
	text-decoration: underline;
}
li .post-content ul,
li .post-content li {
	list-style-type: square;
	list-style-position: inside;
	text-align: left;
}

a.linked {
	background: red;
}






.sticky {
	position: sticky;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	top: 0;
	bottom: 0;
}




#player {
	z-index: 10000;
	text-align: center;
	padding: 0;
}
#trance, #chill {
	background: none;
	border: none;
	cursor: pointer;
	width: calc( 50% - 80px );
}

#trance {
	float: left;
	padding-left: 16px;
}
#chill {
	float: right;
	padding-right: 16px;
}
#player.trance #chill {
	width: 0;
	padding-right: 0;
}
#player.trance #trance {
	width: calc( 100% - 160px );
	margin-right: 0;
}
#player.chill #trance {
	width: 0;
	padding-left: 0;
}
#player.chill #chill {
	width: calc( 100% - 160px );
	margin-left: 0;
}
#oo {
	position: relative;
	display: inline-block;
}
#trance-button, #chill-button {
	position: absolute;
	top: 0px;
	width: 50%;
	height: 100%;
	background: none;
	border: none;
	cursor: pointer;
}
#trance-button {
	left: 0px;
}
#chill-button {
	right: 0px;
}

.trance .channel,
.trance .show,
.chill .channel,
.chill .show {
	font-weight: 900;
}
.trance .track,
.chill .track {
	font-weight: 400;
}
#player.trance .channel,
#player.chill .channel {
	baseline-shift: 5px;
}
#player.trance .show,
#player.chill .show {
	baseline-shift: -5px;
}







circle.trance,
circle.chill,
line.trance,
line.chill {
	fill: none;
	stroke-width: 4;
	stroke-miterlimit: 10;
}

#player svg {
	display: block; 
	height: 96px;
	margin: 0 auto;
	stroke-linecap: round;
}
#chill-meta,
#trance-meta {
	stroke-width: 0;
}


#player .trance {
	stroke: rgb( 237, 28, 36 );
}
#player .chill {
	stroke: rgb( 41, 171, 226 );
}
#player.trance .trance,
#player.chill .chill {
	stroke: rgb( 226, 240, 222 );
}

#player #chill-meta tspan {
	fill: rgb( 41, 171, 226 );
	font-size: 0.8em;
}
#player #trance-meta tspan {
	fill: rgb( 237, 28, 36 );
	font-size: 0.8em;
}
#player #trance-meta tspan.channel,
#player #chill-meta tspan.channel {
	font-size: 1em;
}
#player.chill #chill-meta tspan,
#player.trance #trance-meta tspan {
	fill: rgb( 226, 240, 222 );
	font-size: 1em;
}
#player.chill #chill-meta tspan.channel,
#player.trance #trance-meta tspan.channel {
	font-size: 1.2em;
}


@media (prefers-color-scheme: dark) {
	html,
	#player,
	li.day	{
		background-color: rgb( 29, 15, 33 );
	}
	li.chill,
	li.trance {
		background-color: rgba( 29, 15, 33, 0.8 );
	}
}

@media (prefers-color-scheme: light) {
  /* Light theme styles go here */
}