/* COLORS */

$black: #000000;
$white: #FFFFFF;
$primary: #FF7E83;
$secondary: #0062CB;

/****************************************************/
/* FONTS */

.resymbol:hover,.control:hover{    opacity:0.5;    }
.date, .dateBloc {
	font-family: "Reglo";
	text-transform: uppercase;
}
.inline .date, .resume .date{
	text-align: center;
}
.dateBloc{width:4em;
	text-align: center;}
.dateBloc{display:inline-block;}
.dateBloc *{line-height: 100%;}
.dateBloc  .day {font-size: 1.8em;}
.dateBloc .number {font-size: 1.8em;}
.dateBloc  .month {font-size: 0.8em;}
.dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}

.dateBloc.small{
	font-size: 80%;
}

.date.smooth {
	text-transform: none;
	font-size: 100%;
	font-family: RegloNormal;
}

.tabs .ui-tabs-nav {
    font-family: "Reglo";
    text-transform: uppercase;
}
.legend{
	font-family: "Reglo";
	font-size:1.2em;
	border-bottom:3px solid black;
	padding: 0.2em 0 0.2em 0;
	margin: 0.2em 0 0.2em 0;
}
#Main .sectionLabel{
	margin-bottom:1em;
}

.sectionLabel, .label {
    text-transform: uppercase;
    font-family: "Reglo";
    font-size:1.3em;
}

.rightPart .right.sectionLabel {
	text-transform: none;
	border-bottom: 1px solid black;
	padding-bottom: 3px;
}

h5.focus-title {
	color: $secondary;
}

.rightPart #search-form {
	text-align: right;
	margin-bottom: 2em;
}

.label.relative{
    background-color:black;
    position: absolute;
    left:10px;
    top:-5px;
    color:white;
    padding:5px 7px 0px 7px;
}

/****************************************************/
/* WRAPPER */
/****************************************************/
.wrapper {max-width: 1560px; padding:0 1%;}
.wrapper.text {max-width: 780px; margin:auto;}
.wrapper .rightPart{margin-top:1em;}

@media screen and (min-width: 760px) {
	#player-container.fixed {
		position: fixed;
		top: 60px;
		width: calc(0% + 235px);
	}
	.wrapper .rightPart{
        margin-top:0;
	}
	.wrapper.sided .leftPart,
	.wrapper.sided .rightPart{
		width:45%;
	}
	.wrapper.navigation .leftPart{
		width:60%;
	}
	.wrapper.navigation .rightPart{
		width:35%;
	}
	.wrapper .leftPart{
		float:left;
	}
	.wrapper .rightPart{
		float:right;
	}
	#specialHome {
		padding-left: 0;
	}
    /*
	#specialHome .leftPart,
	#specialHome .rightPart {
		width: 100%;
	}
    */
	p.intro {
		padding-top: 0px;
		padding-bottom: 40px;
	}
}


button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
nav.menu{
	width:100%;
	text-align: justify;
	text-justify: distribute-all-lines;
}
nav.menu li{
	display: inline-block;
	margin-right:2em;
}

button.tag, a.tag{
	font-size:0.9em;
	background:white;
	font-family: "RegloBold";
	text-transform: uppercase;
	display:inline-block;
	border: 1px solid #CCC !important;
	color:#342E2E;
	margin: 0.2em;
	padding: 0.3em;
	border-radius: 0.7em;
	-moz-border-radius: 0.7em;
	-webkit-border-radius: 0.7em;
}
button.check, a.check {
	font-size:0.9em;
	text-transform: none;
	display:inline-block;
	margin: 0.2em;
	padding: 0.3em;
}

.category{
	font-family: "RegloBold";
	text-transform: uppercase;
}
button.check:before, a.check:before {
	display:inline-block;
	width:1.5em;
}
.box{
	padding:0.2em 0.5em 0.2em 0.5em;
	border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	background:#222;
	color:#fff;
}
.ui-tooltip {
	border:1px solid white;
	position:absolute;
	margin:0;	
	padding: 0.5em;
	background:#222;
	color: white;
	z-index: 9999;
	max-width: 50%;
	background: white;
	color: #222;
	border-color: #222;
}
/****************************************************/
/**** BODY ****/
/****************************************************/
body{
	background: white;
	color: #333;
}
/****************************************************/
/**** metaNAV ****/
/****************************************************/

#metaNav {
	color: #e8e8e8;
	background-color: #3a3a3a;
	position:fixed;
	z-index:1000;
	top:0px;
	width:100%;
	font-size: 90%;
}
#metaNav ul{
}
#metaNav ul li{
	float: left;
	padding: 0 1em;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}

#metaNav ul li#nav-search {
	float: right;
}

#metaNav ul li a{
	height: 3em;
	line-height: 3em;
	display:block;
}

#metaNav ul li#nav-language span {
	cursor: pointer;
	height: 3em;
	line-height: 3em;
	display: inline-block;
}

#metaNav ul li#nav-language span.lang-on {
	color: white;
}

#metaNav ul li a span{
	display:inline-block;
}

#metaNav ul li a span.nav-icon {
}

#metaNav a:focus, #metaNav a:hover{
    opacity:0.8;
}
#metaNav ul li.active, #metaNav ul li.active a{
	color: white;
}

#metaNav ul li.active span.iconLabel {
}

#metaNav li#nav-search a {
	display: inline;
}

#metaNav form {
	display: inline-block;
	padding-top: 0.2em;
}

#metaNav input {
	border: 1px solid #ececec;
	width: 10em;
}

.icon-rss {
	color: orange;
}

@media screen and (max-width:760px){
	#bg-title { display: none; }
	#metaNav .iconLabel {display:none;}
	#metaNav ul li a span.nav-icon { display: inline-block; }
	#metaNav ul li {
		padding: 0;
	}
	#metaNav ul li a {
		padding: 0 1em;
	}
	#metaNav form {
		display: none;
	}
	#metaNav ul li#nav-language {
		padding: 0.2em 0 0 1em;
	}
	div#Changing {
		margin: 0 5px;
	}
}
@media screen and (max-width:400px){
	#metaNav ul li#nav-language {
		padding: 0.2em 0 0 1ex;
	}
	#metaNav ul li a {
		padding: 0 0.8em;
	}
}

/****************************************************/
/**** Commons ****/
/****************************************************/

.audio button {color:$primary !important;}
/****************************************************/
/**** HEADER ****/
/****************************************************/

/* PANIK LOGO */
#Commons{
	position: relative;
	z-index: 5;
}
#Commons .wrapper{
}
#mainHeader {
	padding-bottom:1em;
}
#mainHeader {
    font-size:70%;
}
#mainHeader *{color:black !important;line-height:1em;}
#mainHeader #radioPanik{}

#Panik img{display:block;margin:auto;max-height:200px;}
#mainHeader h1{
	padding-left:75px;
}
#player-container #player{
    padding:0 0 0 0;
    min-width: 240px;
}

#Changing h1.top a:hover {
	opacity: 1.0;
}

@media screen and (max-width: 760px) {
	#All h1.top {
		font-size: 60px;
		padding: 0;
		padding-top: 10px;
		text-align: center;
	}
	#specialHome .leftPart h1.top {
		display: none;
	}
	#specialHome .leftPart h2 {
		padding-top: 10px;
		text-align: center;
	}
}

@media screen and (min-width: 760px) {
	#Commons {
		float: left;
		width: 20%;
		width: -webkit-calc(0% + 240px);
		width: -moz-calc(0% + 240px);
		width: calc(0% + 240px);
	}
	#Changing {
		position: relative;
		float: right;
		width: 78%;
		width: -webkit-calc(100% - 280px);
		width: -moz-calc(100% - 280px);
		width: calc(100% - 280px);
	}
	#All h1.top {
		font-size: 120px;
		font-family: RegloScale;
		text-transform: uppercase;
		padding-left: 0;
		padding-top: 2rem;
		padding-bottom: 0;
	}

	#metaNav {
		padding-top: 2px;
	}
	#metaNav .nav-icon {
		display: none !important;
	}

	ul#ticker {
		margin-bottom: 10px;
	}

	#News div.mainSub,
	#About div.mainSub,
	#Emissions div.mainSub {
		position: absolute;
		top: 50px;
		left: 320px;
		width: 60%;
		width: calc(98% - 320px);
	}

	#News div.mainSub ul,
	#About div.mainSub ul,
	#Emissions div.mainSub ul {
		padding: 0;
		font-family: Reglo;
		font-weight: normal;
	}

	#News div.mainSub ul li,
	#About div.mainSub ul li,
	#Emissions div.mainSub ul li {
	}

	#News .news.wrapper {
		padding: 0;
	}

	#News .news.wrapper li a {
		margin-left: 0;
		padding-left: 0;
	}

	#Nav header.marged,
	#Main > .marged {
		margin: 0;
	}

	#Related .wrapper,
	#Main > .wrapper,
	#Main > .soundfiles > .wrapper,
	#Main > .news > .wrapper,
	#Nav > .wrapper {
		padding-left: 0;
	}

	#All #Nav nav ul {
		margin-top: 0;
	}

	#Related .padded,
	div.program.padded {
		padding-top: 0;
		padding-left: 0;
	}

	div.program.padded {
		padding-top: 1.5em;
	}

	#fiber-content h2.title {
		margin-top: 0;
		padding-top: 0;
	}

}

#backgroundBox {
	background: transparent center 40px no-repeat url(../img/Radio_Panik_Logo_2016-01.png);
}

#All #backgroundBox h1.top {
	font-size: 50px;
	padding-left: 10px;
	width: 200%;
}

#backgroundBox h1 {
	color: $primary !important;
}

#All h1.top#radiopanik {
	padding-top: 0;
	color: black !important;
	padding-bottom: 30px;
        height: 130px;
}

#All #backgroundBox h1 {
	visibility: hidden;
}


#specialHome div.rightPart h1,
div.focus {
	color: $secondary;
}

h1.top#frequence {
	color: $primary;
}

/****************************************************/
/****  SCREEN NAV ****/
#Nav nav{padding:0.1em;}

#Nav input{color:#333;}
#Nav ul li button,
#Nav ul li a {
	border-width:0 0 2px 0;
	border-style: solid;
	border-color: transparent;
}

#Nav .current,
#Nav .active,#Nav .icon-check,#Nav .active *{
	font-weight: normal;
}

#Nav .selected a,
#Nav ul li.current a, #Nav ul a.active, #Nav button.active {
	border-color: #333;
}

#Nav nav{
	margin:0;
}

#specialHome h2,
#Nav h2{
	margin:0;
	padding:0;
}
#Nav nav ul{
	margin:1em 0 1em 0;
}

#Nav li {
	padding-right: 1em;
}

#Nav li a{
	display: inline-block;
}
#Nav nav ul.distributed li {padding: 0;}

#fiber-nav{
    font-size:150%;
	border-width:0 0 2px 0;border-style:solid;
}
#fiber-nav li, #fiber-nav li a{
	display:block;
}
#fiber-nav ul{
	padding:0.5em;
}
#fiber-nav li a{
	padding:0.5em;
}
#fiber-nav .selected > a,
#fiber-nav .current {
    font-weight:bold;
}

/****************************************************/
/**** PLAYER ****/
/****************************************************/
/*#Home #player{   float: left; } */

#player-container,
   #player-container *{border-color:$primary !important;color:$primary !important;}

#player-container .metas, #player-container img{border-color:#fff;}
#player-container .padded{padding:0.3em;}

#player-container button,#player-container a{
}
#player-container .metas{
    float:right;
}
#DirectStreamPanikControler {
	display:inline !important;
}
#chatSymbol,
#streamSymbol{
	font-size:3em;
	float:left;
	margin-right:5px;
	position: relative;
	z-index: 10;
	top: -6px;
}
#CurrentlyPlaying{
	padding:0 0 0 0;
}

#Player.withPlaylist #player-container #Playlist{
	border-top:2px solid black;
}
#Player.withPlaylist #player-container #Playlist{
	margin-top: 1em;
	padding-top: 1em;
}

#player-container #myPlaylist {
	clear: both;
	padding: 1em 0 0 0;
	height: auto;
}

#player-container #myPlaylist a {
	margin-right: 30px;
	white-space: normal;
	padding-bottom: 1ex;
}

#player-container.minimized{
	width:auto;
	border-width:0px 2px 2px 0 !important;
	border-bottom-right-radius:1em;
	-moz-border-bottom-right-radius:1em;
	-webkit-border-bottom-right-radius:1em;
}
#player-container.minimized #player{
	padding:0;
}

/*Playlist*/

#Playlist #playlistLabel{
	float:right;

}
#Playlist .playListControls{	
}
#Playlist .playListControls button{	
	margin-right:0.5em;
	display:inline-block;
}
#Playlist .playListControls .playPause{
	font-size:3em;
	margin-right:5px;
	float:left;
	position: relative;
	top: -8px;
}

#Playlist .playing .icon-pause{
   -webkit-animation: loading 1s infinite linear;
   -moz-animation: loading 1s infinite linear;
   -o-animation: loading 1s infinite linear;
   animation: loading 1s infinite linear;
}
#Playlist .playlistControls button,#Playlist .playlistControls .button{
	margin:0 0.1em 0 0.1em;
}
#Playlist li{
	clear:right;
}
#Playlist .soundControls button{}

#player-container #Playlist ol{
	clear:right;
	padding:0;
	margin-left: 50px;
}
#player-container #Playlist ol li{
	line-height:1.3em;
	padding:0;
	margin:0;
}
#Playlist ol li .soundControls{
	line-height:1.5em;
	height:1.5em;
	clear:right;
	float:right;
}
#Playlist ol li .title{
	margin-right:70px;
	display:block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
#player .active{
	text-transform:uppercase;
	font-weight:bold;
}
/*limit height of playlist*/
#player #CurrentlyPlaying,
 #player-container #Playlist ol{
	opacity:0.9;
	padding-top:0.2em;
	height:auto;
	overflow: hidden;
}

@media screen and (max-width: 760px) {
        #backgroundBox {
                background-position: center 30px;
                background-size: 130px;
        }
        #All h1.top#radiopanik {
                height: 80px;
        }
	#Player{
        margin-top:1em;
    }
	#Player.withPlaylist #player-container #audioPlayer,
	  #Player.withPlaylist #player-container #audioPlayer,
	   #Player.withPlaylist #player-container #Playlist{
		float:none !important;
		width:auto !important;
        border-right:none !important;
		max-width:auto !important;
	}

	#player.on-chat-page {
		display: none;
	}

	div.chat-page .rightPart {
		font-size: 95%;
		margin-top: 4em;
		padding-top: 1em;
		border-top: 1px solid #777;
	}

}

/****************************************************/
/**** #Changing #Footer ... ****/
/****************************************************/
#Changing{
	display: flex;
	flex-direction: column;
	min-height: 97vh;
}

#Main{
	flex-grow: 1;
	color:#333;
	position: relative;
	z-index: 1;
}
#Main >.wrapper{
	padding-bottom:2em;
}
#Home #Main{
	min-height:0;
}
#Changing a:hover,#Changing button:hover {
	opacity:0.6;
	text-decoration:none;
}
/* GLOBAL SITE NAV */
#userLog{
	z-index:2000;
	position: fixed;
	bottom: 0px;
	right: 0px;
}
#userLog .log{
	margin:0.3em;
	-moz-box-shadow: 0px 0px 3px #000;
	-webkit-box-shadow: 0px 0px 3px #000;
	box-shadow: 0px 0px 3px #000;
	border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
	text-align:center;
	padding: 0.3em;
	font-size:0.9em;
	color:black;
	background-color:$primary;
	border: 2px solid black;
	background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.04) 75%, transparent 75%, transparent);
}
#userLog .log.info{
	background-color:grey;
	color:white;
}
#userLog .log.ok{
	background-color:green;
	border-color:black;
	color:white;
}
#userLog .log.error{
	background-color:$primary;
	border-color:yellow;
}
#main {}
#mainLegend{
	width:30%;
	text-align:right;
	float:right;
	padding:1em;
}

#Footer{
	border-top:2px solid #333;
	padding-top: 2em;
	padding-bottom: 80px;
	position: relative;
	z-index: 3;
}

#Footer ul {
}

#Footer ul li {
	padding-right: 2em;
}

#Footer a:hover {
	opacity:0.6;
}


/****************************************************/
.inline .link{display:block;padding:1em;}
/**** Liste   ****/
/**** EMISSIONS ****/
#Emission .emission-detail .title{}
/*
*/
#Emission-tabs-menu .sub{
	margin-bottom:1em;
}
/**** Detail	****/
.emission-detail .metas{
	line-height:1.5em;
	float: left;
	width: 49%;
	margin-top: 0;
}

.emission-detail h4.subtitle {
	margin-top: 1em;
	font-weight: normal;
	font-family: 'Reglo';
	text-transform: none;
	float: left;
}

.emission-detail ul.schedule {
	margin-top: 0;
	margin-bottom: 1em;
 }

.emission-detail ul.schedule .weekdiff {
	font-size: 80%;
}

.emission-detail article {
	clear: both;
}

.emission-detail .logo{
	float:right;
	width: 50%;
	margin-bottom: 1ex;
}
@media screen and (max-width: 300px) {
	.emission-detail .metas {
		float: none;
		width: auto;
		margin: 0;
	}
	.emission-detail .logo{max-width:100%;}
}
.emission .mainHeader {
    overflow: hidden;
    margin-bottom:1.5em;
}

.emission .contacts {
	clear: both;
}

/**** Inline	****/
.emission.inline, .emission.resume {
	padding:1em 0 1em 0;
}

.emission.inline div.date {
	min-height: 3em;
	text-align: center;
	display:inline-block;
	float:left;
	margin-right:1em;
}
.emission .archived {
	opacity:0.6;
}

.emission .link .description {
	margin: 0px 0 5px 0;
	font-family: "RegloMedium";
}


/**** EPISODE ****/
/**** Detail  ****/

.episode .tag{
}
.episode.resume, .episode.inline{
	padding:1em 0.5em 1em;
}
.episode.inline .dateBloc, .episode.resume .dateBloc{
	float:left;
}
.episode.resume img {
	border: 2px solid black;
}

.episode.resume .title{
	margin-bottom:0.5em;
}
.episode.resume .logo{
	float: right;
}
.topik-link .logo,
.episode.inline .logo {
	min-height: 50px;
	float: left;
	margin-right: 1em;
}
.episode.resume .sound{
	float:right;
	margin:0 0 0.5em 0.5em;
}
.episode.inline .sound.right{
	text-align:center;
	font-size:70%;
	position: relative;
	z-index: 10;
}
.episode.inline .sound.right button{
    font-size:1.5em;
	display:inline;
	text-align:center;
	padding-bottom:0.05em;
}
.episode.resume .sound.right .icon-download{
	text-align:center;
}
.episode.resume .sound.right .icon-download{
	display:block;
}

.big.icon-pause,
.big.icon-stop,
.big.icon-share {
	display: inline-block;
	vertical-align: middle;
}

.episode.detail .logo.right{
	max-width:50%;
}

.episode.resume .date .day, .emission-detail .date .day {
}

.episode.resume .content {
	padding-left: 5em;
}
.episode.resume .content .title {
}

.episode.resume .logo {
	margin:0 0 1em;
	max-width:20%;
}
.episode.inline .date{
	font-size:80%;
}

#Emission-tabs-menu .emissions-newsitems {
	margin-bottom: 2em;
}

#Emission-tabs-menu .emissions-newsitems ul.list li {
	border: 0;
}

#Emission-tabs-menu .futur-episodes h5,
#Emission-tabs-menu .recent-episodes h5 {
	font-size: 1.2em;
}

#Emission-tabs-menu #search-form {
	margin-bottom: 1em;
}

div.extra-soundfiles h3 {
	margin-top: 1em;
	font-size: 2.5em;
}

div.extra-soundfiles ul li {
	position: relative;
}

div.extra-soundfiles ul li div.audio {
	display: inline;
	top: 5px;
	right: 0;
	position: absolute;
	font-size: 60%;
}

div.extra-soundfiles ul strong {
	padding-right: 3em;
}

@media screen and (max-width: 400px) {	
	.episode .dateBloc{
		width:4em;
		font-size:80%
	}

	.episode.resume .content {
		padding-left: 4em;
	}
}

/****************************************************/
/**** News ****/

#newsRoll {
	max-width: 500px;
}

#newsRoll li {
	background: white;
}

.newsRoll .title{
	background:black;
	color:white;
	bottom:0px;
	opacity:0.9;
    width:100%;
	text-align: left;
	font-family: "RegloBold";
	position: absolute;
	left: 0;
}
.newsRoll .title div{
	padding: 1em;
}
.newsRoll a, .newsRoll button img{
    border:3px solid $secondary;
}

.newsRoll .by3 button {
	width: 100%;
}

.soundfiles .special a,
.news .special a {
	position: relative;
}

.special .labels .item,
.newsRoll .labels .item{
	display:block;
	background: $secondary;
	color:white;
	margin:0.1em;
	font-size:0.9em;
	padding:0.3em;
}
.newsList .current a{
    opacity:0.5;
}
/****************************************************/
.list.news li {
}

.soundfiles ul.custom li a,
.news ul.custom li a { max-width: 98%; }
.news li.item a {padding:1em;}

.logo img{
	display:block;
	border-style:solid;
	border-width:3px;
}
ul.newsSpecial{
	border-bottom:3px solid #ccc;
}
@media only screen and (max-width: 970px) {
	.columns {column-count: 1;	-webkit-column-count: 1;	-moz-column-count: 1;}
}


/****************************************************/
/**** Home & ****/
/****************************************************/

#Home #Nav .wrapper{
	max-width:auto !important;
	width:auto !important;
}

/*
@media screen and (max-width:800px){
	#Home .newsRoll .logo{
		max-width:100px;
	}
}
@media screen and (max-width:600px){
	#Home .newsRoll .logo{
		max-width:50px;
	}
}
*/

/****************************************************/
/**** PROGRAM ****/
/****************************************************/

.program.tabs nav ul li{
	display:table-cell;
	width:14%;
	text-align:center;
}

.program.tabs nav ul li.week-arrow {
	width: 1%;
	padding-bottom: 5px;
}

.program ul .dateBloc {
	float:left;
	padding-top:1em;
}
.program ul .schedule {
	margin-left:5em;
}
.program .nonstop {
	text-align:left;
}
.program-week .programDate{
	float:left;
	width:3em;
}
.program-week .programCell{
	margin-left:3.5em;
}
.program-week .nonStop .programDate{
	visibility:hidden;
}
.program-week .nonStop .programCell{
	font-size:0.9em;
	padding-left:50%;
	text-align:right;
}
.program-week a.nonstop{
	font-size:0.9em;
	margin:0.1em;
}
.program-week .inline,.program-week .resume{padding:0;}
.program-week .description{}

.program-week .title {
	color: black;
	display: inline;
}

.program-week .smooth {
	color: #666;
	opacity: 1.0;
	font-size: 80%;
	padding-bottom: 8px;
}

.program-week .emission h5,
.program-week .smooth .title {
	color: #333;
	text-transform: uppercase;
}

.program-week .description {
	color: black;
	font-size: 90%;
}

.program-week .programCell:hover {
	opacity: 0.5;
}

#Changing .program-week .programCell a {
	opacity: 1.0;
}

#Changing .program-week .programCell .smooth a {
	opacity: 0.5;
}

#Changing .program-week .programCell .smooth h5 a {
	opacity: 1.0;
}


/****************************************************/
/**** SEARCH ****/
/****************************************************/

.search li.previous-page {
  margin-bottom: 2ex;
  text-align: left;
  margin-left: 0ex;
  font-style: italic;
}

.search li.next-page {
  margin-top: 2ex;
  text-align: right;
  margin-right: 0;
  font-style: italic;
}

.search-filters {
  text-align: justify;
}


/****************************************************/
/**** GRILLE ****/
/****************************************************/

#grid #Main {}
#grid th{
	color:#000;
}
#grid .heure {
	height:50px !important;
}
#grid .heure.vertical {
	padding:1.5em 0;
}
#grid .day {
	padding:1em 0 1em 0;
}
#grid .nonstop {
}
#grid .item{
	padding:0.5em 0.2em 0.5em 0.2em;
}
#grid .cell hr {
	border:1px dotted #ddd;
	margin:0.3em;
}
#grid .time-label{
	margin-top:0.5em;
}

#grid .highlighted,#grid .highlighted  *{
	background:#333 !important;
	color:white !important;
}

#grid .highlighted,#grid .highlighted  *{
	background:#333 !important;
	color:white !important;
}
#Emissions li.item.normal{
	display:none;
}
#Emissions li.item.hightlighted{
	display:block !important;
}

#gridNav span.category {
	text-transform: none;
}


/**** Navigation for static pages ****/

#fiber-nav {
	font-size: 150%;
}
#fiber-nav li, #fiber-nav li a {
	display: block;
}
#fiber-nav ul{
	padding: 0.5em;
}
#fiber-nav li a{
	padding:0.5em;
}

#fiber-content a {
	text-decoration: underline;
}

#fiber-content .episode a,
#fiber-content ul.list a {
	text-decoration: none;
}

#fiber-content a:hover {
	text-decoration: none;
}

.intro,
.userContent,
#fiber-content,
.content,
.content h5 {
	line-height: 120%;
}

.userContent strong,
#fiber-content strong {
	text-transform: none;
	font-family: "RegloBold";
	font-style: normal;
}

.userContent em,
#fiber-content em {
	font-family: inherit;
	font-style: italic;
}

/**** SCREEN SIZE ADAPTATIONS ****/
    html #main{ font-size: 70%; }
body { font-size: 18px;}
@media (max-width: 300px){
    body #All{ font-size: 80%; }
}

@media (min-width: 300px) and (max-width:800px){
    body #All{ font-size: 85%; }
}

@media (min-width: 700px) and (max-width:1000px){
    body #All{ font-size: 90%; }
}

@media (min-width: 1000px) {
    body #All{ font-size: 100%; }
}

#subscribe-form {
  position: relative;
  margin-bottom: 2em;
  padding-bottom: 2em;
}

#Home #subscribe-form {
  margin-bottom: 0;
}

#subscribe-form ul.errorlist {
  position: absolute;
  bottom: -2em;
  text-align: center;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  color: #800;
}

#subscribe-form input {
	width: 15em;
	max-width: none;
}

#Nav div.search form {
  padding: 1em 0;
}

div.episode.resume div.title {
	white-space: normal;
}

#Home div.program.tabs {
	margin: 1em 0;
}

nav#program li {
	display: block;
	margin: 0;
}

#recent-emissions,
#recent-news,
#recent-sounds {
	margin-top: 2em;
}

#recent-emissions h3,
#recent-news h3,
#recent-sounds h3 {
	font-size: 140%;
}

#recent-emissions h3.sectionLabel {
	margin-bottom: 0;
}

.episode.soundfile {
	padding: 0;
}

.soundfile .smooth {
	color: #666;
	opacity: 1.0;
	font-size: 80%;
}


.soundfile p.date {
	margin: 0;
}

.frontpage.soundfile .audio {
	font-size: 80%;
	padding-top: 0.5ex;
	padding-bottom: 1ex;
}

#panikdb {
	position: absolute;
	top: -20px;
	right: 0px;
	background: white;
	color: #888;
	padding: 5px 10px;
	border: 1px solid #888;
	border-width: 1px 1px 0 1px;
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotate(270deg);
	-moz-transform-origin: bottom right;
	-moz-transform: rotate(270deg);
	transform-origin: bottom right;
	transform: rotate(270deg);
}

img.logo.right {
	margin-bottom: 1em;
}

.soundfile .special,
.newsitem .special {
	margin-bottom: 2em;
}

.newsitem .special .smooth {
	padding-top: 5px;
}

/* USER CONTENT */

div.userContent ul {
	margin: 1em 0;
}

div.userContent h1,
div.userContent h2,
div.userContent h3,
div.userContent h4 {
	text-transform: none;
	font-family: "Reglo";
	font-weight: normal;
}

div.userContent h1 { font-size: 2em; }
div.userContent h2 { font-size: 1.8em; }
div.userContent h3 { font-size: 1.5em; }
div.userContent h4 { font-size: 1.5em; }
div.userContent a { text-decoration: underline; }

div.userContent a.tag { text-decoration: none; }

@media screen and (max-width: 760px) {
	#streamSymbol{
		top: 0;
	}
	#MainHeader {
		margin: 0 auto;
	}
	#All #backgroundBox h1.top {
		width: 94%;
	}

	#Player.withoutPlaylist #player-container #audioPlayer{
	    margin:auto;
	    width:100%;
	}
	#Player.withoutPlaylist #player-container #audioPlayer #Live{
	    font-size:150%;
	}


	#player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
	#player-container{
		background: $primary;
	}
        #player-container * {color: white !important; }
	#player-container{
		z-index:500;
		position:fixed;
		width:100% !important;
		/*top:2em;*/
		font-size:80%;
		bottom:0em;
		border-bottom:none;
	}
	#Player.withPlaylist #player-container #audioPlayer{
		float:left;
		width:50%;
		border-right:2px solid black;
	}
	#Player.withPlaylist #player-container #Playlist{
		float:right;
		width:49%;
		text-align:left;
	}
	#player-container #myPlaylist {
		padding: 0;
	}

	#player-container #myPlaylist a {
		white-space: nowrap;
	}

	#player-container #Playlist ol{
		margin-left: 30px;
	}
}

div.emission-logo {
	margin-left: 1em;
}

div.extra-soundfiles {
	clear: both;
}

h3.episode-subtitle {
	font-size: 2.5em;
}

.waveform {
	display: none;
	position: relative;
}

.waveform span {
	background: #3A3A3A;
	background: rgba(10, 10, 10, 0.8);
	display: inline-block;
	width: 0.50%;
}

.waveform span.done {
	background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
}

.waveform span.done.current + span {
	background: $primary;
}

.waveform i.duration {
	position: absolute;
	right: 4px;
	bottom: 4px;
	color: $primary;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	font-style: normal;
	font-weight: bold;
}

span.timestamp {
	cursor: pointer;
	border-bottom: 1px dotted #666;
}

div.fragment-sound {
	position: relative;
}

div.soundcell div.logo {
	vertical-align: top;
}

div.fragment-sound {
}

div.extra-soundfiles div.fragment-sound {
	margin-top: 5px;
}

div.extra-soundfiles div.fragment-name {
	font-style: italic;
	position: relative;
	top: 1ex;
	max-width: 70%;
}

div.extra-soundfiles ul li div.fragment-sound div.waveform {
}
div.extra-soundfiles ul li div.fragment-sound div.audio {
	bottom: 0;
}

#fiber-content div.extra-soundfiles strong {
	text-transform: uppercase;

}

.nonstop-track-title, .nonstop-track-artist {
	font-size: 80%;
}

.soundfile-info {
        padding-right: 75px;
}

#fiber-content div.extra-soundfiles .soundfile-info strong {
        padding-right: 0;
}

#fiber-content div.extra-soundfiles .soundfile-info a {
        text-decoration: none;
}

#fiber-content div.extra-soundfiles {
	margin: 1em 0;
}

div.extra-soundfiles div.logo {
	display: inline-block;
}

div#fiber-content div.extra-soundfiles ul.list {
	display: inline-block;
	width: 88%;
	width: calc(100% - 74px);
}

div.download-links {
	position: absolute;
	z-index: 1000;
	text-align: right;
}

div.hidden-download-links {
	display: none !important;
}

div.episode-detail div.sound div.download-links {
	display: inline-block;
	padding-top: 1ex;
	padding-left: 1ex;
}

div.extra-soundfiles div.download-links {
	background: white;
}

h1.top a.dimmed {
	opacity: 0.7;
}

div#agenda div.content-inline {
	margin-bottom: 1em;
}

div.previous-and-next-months {
	margin-top: 1em;
}

div.publication-date.date.smooth {
	font-size: 80%;
}

#All h1.top.fullwidth {
	width: 150%;
}

div.gallery img {
	padding: 2px;
	background: white;
	border: 1px solid #333;
}

div#dialog-background,
div.gallery div.first {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 1000;
	text-align: center;
}

div.gallery div.first img {
	padding: 5px;
	padding-bottom: 25px;
	margin-top: -240px;
	margin-left: -320px;
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all 0.5s ease;
	transform-origin: bottom left;
}

div.portrait div.gallery div.first img {
	margin-top: -320px;
	margin-left: -240px;
}

div.gallery {
	border-bottom: 1px solid #ccc;
}

div.gallery span.gallery-legend {
	display: inline-block;
	position: absolute;
	top: 50%;
	margin-top: 250px;
	left: 0%;
	width: 100%;
	color: #000;
	z-index: 1000;
}

div.portrait div.gallery span.gallery-legend {
	margin-top: 330px;
}

@media screen and (max-width: 640px) {
	div.portrait div.gallery div.first img,
	div.gallery div.first img {
		max-width: 80vw;
		margin: 0;
		max-height: 80vh;
		left: 10vw;
		top: 10vh;
		display: inline-block;
	}
}

ul.tags {
	padding-top: 1em;
	clear: both;
}

a.topik-link {
	clear: both;
	display: block;
	margin-top: 1em;
}

#fiber-content div.topikcell a {
	text-decoration: none;
	height: 500px;
}

#fiber-content div.topikcell .topik-large a {
	height: auto;
}

div.topikcellcontent h5 {
	padding-top: 1ex;
}

div.topikcellcontent.topik-large a {
	width: 100%;
	float: none;
	display: inline-block;
	text-align: left;
}

div.topikcellcontent.topik-large img {
	width: 100%;
	display: block;
}

div.topikcellcontent.topik-large a div {
	@media screen and (min-width: 760px) {
		display: flex;
	}
	margin-top: 1ex;
	h2 {
		margin-top: 0;
		white-space: nowrap;
		margin-right: 1ex;
		@media screen and (max-width: 760px) {
			padding-bottom: 0;
		}
	}
}

div.topikcellcontent a {
	margin-bottom: 2em;
	display: inline-block;
	text-align: left;
	width: 50%;
	box-sizing: border-box;
	padding-right: 2em;
	float: left;
}

div.topikcellcontent img {
}

div.topikcellcontent h2 {
	font-size: 3.5em;
}

@media only screen and (min-width: 1250px) {
	div.topikcellcontent a {
		display: inline-block;
		text-align: left;
		width: 50%;
		float: left;
	}
}

.program-week img.smooth {
	padding-bottom: 0;
}

div#dialog-background {
	display: flex;
}
div#dialog-embed {
	position: relative;
	background: white;
	width: 50%;
	margin: auto;
	text-align: left;
	padding: 1ex;
}

div#dialog-embed textarea {
	width: 100%;
	max-width: none;
}

div#dialog-embed #close-button {
	position: absolute;
	right: 1ex;
}

body#embed {
	min-height: auto !important;
	margin: 0;
	background: white;
}

body#embed #Main {
	background: transparent;
}

body#embed #Commons,
body#embed #metaNav,
body#embed #Footer,
body#embed #userLog,
body#embed #panikdb,
body#embed #Player {
	display: none;
}

body#embed #Changing {
	float: none;
	width: auto;
}

body#embed #Main > .wrapper {
	padding: 0;
}

body#embed .logo {
	padding-top: 4px;
}

body#embed ul.custom {
	display: inline-block;
	width: calc(100% - 72px);
}

body#embed ul.custom .soundfile-info {
	padding: 1ex;
}

body#embed span.fragment-title {
	font-weight: normal;
}

table.playlist {
	width: 90%;
}

table.playlist td {
	padding: 0.5ex;
	text-align: left;
}

table.playlist td.tracktime {
	width: 6ex;
	text-align: center;
}

p.playlist-disclaimer {
	margin-top: 2em;
	max-width: 60ex;
	font-style: italic;
}


#main-topiks #fiber-nav li ul {
    padding-top: 0;
    padding-left: 2em;
}
#main-topiks #fiber-nav li ul li {
    padding-left: 0;
    font-size: 80%;
}

#main-topiks #fiber-nav li ul li a {
    padding-left: 0;
}

div.commands {
	display: flex;
	width: 90vw;
}

@media screen and (min-width:760px){
	div.commands {
		width: calc(90vw - 240px);
	}
}

input#msg {
	flex-grow: 1;
}

div.chat-area {
	max-width: 60em;
}

#chat {
       margin-top: 1ex;
}

#chat div.msg {
        position: relative;
        margin-bottom: 1ex;
        transition: opacity 1s ease;
}

#chat div.msg.new {
        opacity: 0;
}

#chat div.msg.msg-out span.content {
        font-size: 90%;
        color: #444;
}

#chat span.from {
   display: inline-block;
   width: 10rem;
   overflow: hidden;
   text-overflow: ellipsis;
   color: #888;
   position: absolute;
}
#chat span.content {
  display: inline-block;
  padding-left: 11rem;
}

#chat div.msg.info span.content {
	padding-left: 1rem;
	font-style: italic;
	color: #666;
}

@media screen and (max-width: 760px) {
    #chat span.from {
        display: block;
        position: static;
        width: auto;
    }
    #chat span.content {
        display: block;
        padding-left: 2rem;
    }
}

h1.top > span.chat.with-logo {
	position: relative;
	left: 140px;
	display: inline-block;
	max-width: calc(100% - 140px);
}

div.top-logo {
	position: absolute;
	top: 30px;
}

div.top-logo img {
	border: 2px solid black;
}

@media screen and (max-width:760px){
	div.top-logo {
		display: none;
	}
	h1.top > span.chat.with-logo {
		position: static;
		max-width: none;
	}
	div.topikcellcontent a {
		width: auto;
	}
	#fiber-content div.topikcell a {
		height: auto;
	}
}

div#CurrentlyChatting {
	cursor: pointer;
	margin-top: 1em;
}

div.description-emission-chat {
	margin-bottom: 2em;
}

div.chatPart h3 {
	padding-top: 0;
}

div#chat.moderation .msg-in span.from {
	cursor: pointer;
}

div#chat.moderation .msg-in span.from:hover::after {
	padding-left: 1ex;
	font-family: FontAwesome;
	content: "\f056";
	font-size: 80%;
}

div.programCell a.playlist {
	font-size: 80%;
}

#bg-title {
	display: none;
	color: lighten($primary, 20);
	font-family: 'Reglo';
	text-transform: uppercase;
	line-height: 100%;
	font-size: 250px;
	font-size: 25vh;
	position: absolute;
	left: -260px;
	top: 48vh;
	z-index: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

.rightPart .menucell {
	ul {
		list-style: none;
		padding: 0;
		li {
			padding-bottom: 1rem;
		}
	}
}

div#loading-page {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: $secondary;
	z-index: 1100;
	animation-name: load_animation;
	animation-duration: 6000ms;
	animation-timing-function: ease-out;
	transition: opacity 200ms linear;
	&.fade {
		opacity: 0;
	}
}

@keyframes load_animation {
	0% { right: 100%; }
	100% { right: 0%; }
}