_specifics.scss

/* 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;
}

#RefreshWhatsOnAir {
	opacity: 0.2;
}

#RefreshWhatsOnAir.spinning {
	opacity: 0.8;
}

/****************************************************/
/* 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: 50px;
		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: 2em;
	display:block;
}

#metaNav ul li#nav-language span {
	cursor: pointer;
	padding:0.4em 0 0.5em 0;
	display: inline-block;
}

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

#metaNav ul li a span{
    padding:0.4em 0 0.5em 0;
	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 1ex;
	}
}

/****************************************************/
/**** 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: 40px;
		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.inline .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;