15 font-family: Roboto, sans-serif;
26 display: inline-block;
33 background: url(../img/bloc_black_off.jpg) top left no-repeat;
38 background: url(../img/bloc_black_on.jpg);
43 /****************************************************/
47 .resymbol:hover,.control:hover{ opacity:0.5; }
49 text-transform: uppercase;
51 .inline .date, .resume .date{
56 .dateBloc{display:inline-block;}
57 .dateBloc *{line-height: 100%;}
58 .dateBloc .day {font-size: 1.8em;}
59 .dateBloc .number {font-size: 1.8em;}
60 .dateBloc .month {font-size: 0.8em;}
61 .dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}
73 text-transform: uppercase;
77 border-bottom:3px solid black;
78 padding: 0.2em 0 0.2em 0;
79 margin: 0.2em 0 0.2em 0;
89 .rightPart #search-form {
95 background-color:black;
100 padding:5px 7px 0px 7px;
107 #RefreshWhatsOnAir.spinning {
111 /****************************************************/
113 /****************************************************/
114 .wrapper {max-width: 1560px; padding:0 1%;}
115 .wrapper.text {max-width: 780px; margin:auto;}
116 .wrapper .rightPart{margin-top:1em;}
118 @media screen and (min-width: $size_m) {
119 #player-container.fixed {
122 width: calc(0% + 235px);
127 .wrapper.sided .leftPart,
128 .wrapper.sided .rightPart{
131 .wrapper.navigation .leftPart{
134 .wrapper.navigation .rightPart{
147 #specialHome .leftPart,
148 #specialHome .rightPart {
154 padding-bottom: 40px;
159 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
163 text-justify: distribute-all-lines;
166 display: inline-block;
173 text-transform: uppercase;
174 display:inline-block;
175 border: 1px solid #CCC !important;
179 border-radius: 0.7em;
180 -moz-border-radius: 0.7em;
181 -webkit-border-radius: 0.7em;
183 button.check, a.check {
185 text-transform: none;
186 display:inline-block;
192 text-transform: uppercase;
194 button.check:before, a.check:before {
195 display:inline-block;
199 padding:0.2em 0.5em 0.2em 0.5em;
200 border-radius: 0.2em;
201 -moz-border-radius: 0.2em;
202 -webkit-border-radius: 0.2em;
207 border:1px solid white;
219 /****************************************************/
221 /****************************************************/
226 /****************************************************/
228 /****************************************************/
232 background-color: #3a3a3a;
245 text-overflow: ellipsis;
249 #metaNav ul li#nav-search {
258 #metaNav ul li#nav-language span {
260 padding:0.4em 0 0.5em 0;
261 display: inline-block;
264 #metaNav ul li#nav-language span.lang-on {
268 #metaNav ul li a span{
269 padding:0.4em 0 0.5em 0;
270 display:inline-block;
273 #metaNav ul li a span.nav-icon {
276 #metaNav a:focus, #metaNav a:hover{
279 #metaNav ul li.active, #metaNav ul li.active a{
283 #metaNav ul li.active span.iconLabel {
286 #metaNav li#nav-search a {
291 display: inline-block;
296 border: 1px solid #ececec;
304 @media screen and (max-width:$size_m){
305 #bg-title { display: none; }
306 #metaNav .iconLabel {display:none;}
307 #metaNav ul li a span.nav-icon { display: inline-block; }
317 #metaNav ul li#nav-language {
318 padding: 0.2em 0 0 1em;
322 /****************************************************/
324 /****************************************************/
326 .audio button, .audio a {color:$primary;}
327 /****************************************************/
329 /****************************************************/
336 @media screen and (max-width: $size_m) {
343 display: inline-block;
344 background: url(../img/logo_radio_espe.png) bottom left no-repeat;
347 @media screen and (max-width: $size_m) {
350 background-size: contain;
354 display: inline-block;
357 #mainHeader *{color:black !important;line-height:1em;}
359 #Panik img{display:block;margin:auto;max-height:200px;}
363 #player-container #player{
368 #Changing h1.top a:hover {
377 @media screen and (min-width: $size_m) {
379 box-sizing: border-box;
383 box-sizing: border-box;
387 text-transform: uppercase;
390 padding-bottom: 20px;
398 display: none !important;
407 #Emissions div.mainSub {
412 width: calc(98% - 320px);
415 #News div.mainSub ul,
416 #About div.mainSub ul,
417 #Emissions div.mainSub ul {
422 #News div.mainSub ul li,
423 #About div.mainSub ul li,
424 #Emissions div.mainSub ul li {
427 #News .news.wrapper {
431 #News .news.wrapper li a {
443 #Main > .soundfiles > .wrapper,
444 #Main > .news > .wrapper,
463 #fiber-content h2.title {
471 background: transparent;
475 #All #backgroundBox h1.top {
482 color: $primary !important;
485 #All h1.top#radiopanik {
490 #All #backgroundBox h1 {
495 #specialHome div.rightPart h1,
504 /****************************************************/
505 /**** SCREEN NAV ****/
506 #Nav nav{padding:0.1em;}
508 #Nav input{color:#333;}
511 border-width:0 0 2px 0;
513 border-color: transparent;
517 #Nav .active,#Nav .icon-check,#Nav .active *{
522 #Nav ul li.current a, #Nav ul a.active, #Nav button.active {
544 display: inline-block;
546 #Nav nav ul.distributed li {padding: 0;}
550 border-width:0 0 2px 0;border-style:solid;
552 #fiber-nav li, #fiber-nav li a{
561 #fiber-nav .selected > a,
562 #fiber-nav .current {
566 /****************************************************/
568 /****************************************************/
569 /*#Home #player{ float: left; } */
571 #player-container .metas, #player-container img{border-color:#fff;}
572 #player-container .padded{padding:0.3em;}
574 #player-container button,#player-container a{
576 #player-container .metas{
579 #DirectStreamPanikControler {
581 #DirectStreamPanikControler div.label {
583 @media screen and (max-width: $size_m) {
599 @media screen and (max-width: $size_m) {
608 left: calc(50% - 200px);
613 #Player.withPlaylist {
619 #player-container #myPlaylist a {
623 #player-container.minimized{
625 border-width:0px 2px 2px 0 !important;
626 border-bottom-right-radius:1em;
627 -moz-border-bottom-right-radius:1em;
628 -webkit-border-bottom-right-radius:1em;
630 #player-container.minimized #player{
640 #Playlist #playlistLabel{
644 #Playlist .playListControls{
646 #Playlist .playListControls button{
648 display:inline-block;
650 #Playlist .playListControls .playPause{
656 @media screen and (max-width: $size_m) {
661 #Playlist .playing .icon-pause{
662 -webkit-animation: loading 1s infinite linear;
663 -moz-animation: loading 1s infinite linear;
664 -o-animation: loading 1s infinite linear;
665 animation: loading 1s infinite linear;
667 #Playlist .playlistControls button,#Playlist .playlistControls .button{
668 margin:0 0.1em 0 0.1em;
673 #Playlist .soundControls button{}
675 #player-container #Playlist ol li{
680 #Playlist ol li .soundControls{
686 #Playlist ol li.active .soundControls {
689 #Playlist ol li .title{
690 display:inline-block;
692 text-overflow: ellipsis;
696 @media screen and (max-width: $size_m) {
698 background-position: center 30px;
700 #All h1.top#radiopanik {
705 #Player.withPlaylist #player-container #audioPlayer,
706 #Player.withPlaylist #player-container #audioPlayer,
707 #Player.withPlaylist #player-container #Playlist{
708 float:none !important;
709 width:auto !important;
710 border-right:none !important;
711 max-width:auto !important;
714 #player.on-chat-page {
718 div.chat-page .rightPart {
722 border-top: 1px solid #777;
727 /****************************************************/
728 /**** #Changing #Footer ... ****/
729 /****************************************************/
732 flex-direction: column;
742 @media screen and (max-width: $size_m) {
754 #Changing a:hover,#Changing button:hover {
755 text-decoration:none;
757 /* GLOBAL SITE NAV */
766 -moz-box-shadow: 0px 0px 3px #000;
767 -webkit-box-shadow: 0px 0px 3px #000;
768 box-shadow: 0px 0px 3px #000;
769 border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
774 background-color:$primary;
775 border: 2px solid black;
776 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);
779 background-color:grey;
783 background-color:green;
788 background-color:$primary;
808 text-decoration: none;
816 @media screen and (max-width: $size_m) {
817 padding-bottom: 30px;
822 /****************************************************/
823 .inline .link{display:block;padding:1em;}
825 /**** EMISSIONS ****/
833 .episode.resume, .episode.inline{
834 padding:1em 0.5em 1em;
836 .episode.inline .dateBloc, .episode.resume .dateBloc{
839 .episode.resume img {
840 border: 2px solid black;
843 .episode.resume .title{
846 .episode.resume .logo{
850 .episode.inline .logo {
855 .episode.resume .sound{
857 margin:0 0 0.5em 0.5em;
859 .episode.inline .sound.right{
865 .episode.inline .sound.right button{
869 padding-bottom:0.05em;
871 .episode.resume .sound.right .icon-download{
874 .episode.resume .sound.right .icon-download{
881 display: inline-block;
882 vertical-align: middle;
885 .episode.detail .logo.right{
889 .episode.resume .date .day, .emission-detail .date .day {
892 .episode.resume .content {
895 .episode.resume .content .title {
898 .episode.resume .logo {
902 .episode.inline .date{
906 #Emission-tabs-menu .emissions-newsitems {
910 #Emission-tabs-menu .emissions-newsitems ul.list li {
914 #Emission-tabs-menu .futur-episodes h5,
915 #Emission-tabs-menu .recent-episodes h5 {
919 #Emission-tabs-menu #search-form {
923 div.extra-soundfiles h3 {
928 div.extra-soundfiles ul li {
932 div.extra-soundfiles ul li div.audio {
940 div.extra-soundfiles ul strong {
944 /****************************************************/
965 .newsRoll .title div{
968 .newsRoll a, .newsRoll button img{
969 border:3px solid $secondary;
972 .newsRoll .by3 button {
976 .soundfiles .special a,
981 .special .labels .item,
982 .newsRoll .labels .item{
984 background: $secondary;
990 .newsList .current a{
993 /****************************************************/
997 .soundfiles ul.custom li a,
998 .news ul.custom li a { max-width: 98%; }
999 .news li.item a {padding:1em;}
1007 border-bottom:3px solid #ccc;
1010 /****************************************************/
1012 /****************************************************/
1014 #Home #Nav .wrapper{
1015 max-width:auto !important;
1016 width:auto !important;
1019 /****************************************************/
1021 /****************************************************/
1023 .program.tabs nav ul li{
1029 .program.tabs nav ul li.week-arrow {
1031 padding-bottom: 5px;
1034 .program ul .dateBloc {
1038 .program ul .schedule {
1044 .program-week .programDate{
1048 .program-week .programCell{
1051 .program-week .nonStop .programDate{
1054 .program-week .nonStop .programCell{
1059 .program-week a.nonstop{
1063 .program-week .inline,.program-week .resume{padding:0;}
1064 .program-week .description{}
1066 .program-week .title {
1071 .program-week .smooth {
1075 padding-bottom: 8px;
1078 .program-week .emission h5,
1079 .program-week .smooth .title {
1081 text-transform: uppercase;
1084 .program-week .description {
1089 .program-week .programCell:hover {
1093 #Changing .program-week .programCell a {
1097 #Changing .program-week .programCell .smooth a {
1101 #Changing .program-week .programCell .smooth h5 a {
1106 /****************************************************/
1108 /****************************************************/
1110 .search li.previous-page {
1117 .search li.next-page {
1125 text-align: justify;
1129 /****************************************************/
1131 /****************************************************/
1138 height:50px !important;
1140 #grid .heure.vertical {
1144 padding:1em 0 1em 0;
1149 padding:0.5em 0.2em 0.5em 0.2em;
1152 border:1px dotted #ddd;
1159 #grid .highlighted,#grid .highlighted *{
1160 background:#333 !important;
1161 color:white !important;
1164 #grid .highlighted,#grid .highlighted *{
1165 background:#333 !important;
1166 color:white !important;
1168 #Emissions li.item.normal{
1171 #Emissions li.item.hightlighted{
1172 display:block !important;
1175 #gridNav span.category {
1176 text-transform: none;
1180 /**** Navigation for static pages ****/
1185 #fiber-nav li, #fiber-nav li a {
1196 text-decoration: underline;
1199 #fiber-content .episode a,
1200 #fiber-content ul.list a {
1201 text-decoration: none;
1204 #fiber-content a:hover {
1205 text-decoration: none;
1216 .userContent strong,
1217 #fiber-content strong {
1218 text-transform: none;
1224 font-family: inherit;
1228 /**** SCREEN SIZE ADAPTATIONS ****/
1229 html #main{ font-size: 70%; }
1230 body { font-size: 18px;}
1231 @media (max-width: 300px){
1232 body #All{ font-size: 80%; }
1235 @media (min-width: 300px) and (max-width:800px){
1236 body #All{ font-size: 85%; }
1239 @media (min-width: 800px) and (max-width:$size_m){
1240 body #All{ font-size: 90%; }
1243 @media (min-width: $size_m) {
1244 body #All{ font-size: 100%; }
1250 padding-bottom: 2em;
1253 #Home #subscribe-form {
1257 #subscribe-form ul.errorlist {
1268 #subscribe-form input {
1273 #Nav div.search form {
1277 div.episode.resume div.title {
1278 white-space: normal;
1281 #Home div.program.tabs {
1296 #recent-emissions h3,
1302 #recent-emissions h3.sectionLabel {
1306 .episode.soundfile {
1310 .soundfile .smooth {
1321 .frontpage.soundfile .audio {
1324 padding-bottom: 1ex;
1334 border: 1px solid #888;
1335 border-width: 1px 1px 0 1px;
1336 -webkit-transform-origin: bottom right;
1337 -webkit-transform: rotate(270deg);
1338 -moz-transform-origin: bottom right;
1339 -moz-transform: rotate(270deg);
1340 transform-origin: bottom right;
1341 transform: rotate(270deg);
1348 .soundfile .special,
1349 .newsitem .special {
1353 .newsitem .special .smooth {
1359 div.userContent ul {
1366 div.userContent h4 {
1367 text-transform: none;
1368 font-weight: normal;
1371 div.userContent h1 { font-size: 2em; }
1372 div.userContent h2 { font-size: 1.8em; }
1373 div.userContent h3 { font-size: 1.5em; }
1374 div.userContent h4 { font-size: 1.5em; }
1375 div.userContent a { text-decoration: underline; }
1377 div.userContent a.tag { text-decoration: none; }
1379 @media screen and (max-width: $size_m) {
1386 #All #backgroundBox h1.top {
1390 #Player.withoutPlaylist #player-container #audioPlayer{
1394 #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1396 background: $primary;
1398 #player-container * {color: white !important; }
1402 width:100% !important;
1414 div.extra-soundfiles {
1418 h3.episode-subtitle {
1419 font-family: 'Fjalla One', sans-serif;
1431 background: $orange;
1432 background: linear-gradient(to top, darken($orange, 20%) 0%, $orange 40%);
1433 display: inline-block;
1438 .waveform span.done {
1439 background: linear-gradient(to top, darken($red, 5%) 0%, darken($red, 10%) 100%);
1442 .waveform span.done.current + span {
1446 .waveform i.duration {
1458 border-bottom: 1px dotted #666;
1461 div.fragment-sound {
1465 div.soundcell div.logo {
1466 vertical-align: top;
1469 div.fragment-sound {
1472 div.extra-soundfiles div.fragment-sound {
1476 div.extra-soundfiles div.fragment-name {
1483 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1485 div.extra-soundfiles ul li div.fragment-sound div.audio {
1489 #fiber-content div.extra-soundfiles strong {
1490 text-transform: uppercase;
1494 .nonstop-track-title, .nonstop-track-artist {
1499 padding-right: 75px;
1502 #fiber-content div.extra-soundfiles .soundfile-info strong {
1506 #fiber-content div.extra-soundfiles .soundfile-info a {
1507 text-decoration: none;
1510 #fiber-content div.extra-soundfiles {
1514 div.extra-soundfiles div.logo {
1515 display: inline-block;
1518 div#fiber-content div.extra-soundfiles ul.list {
1519 display: inline-block;
1521 width: calc(100% - 72px);
1524 div.download-links {
1530 div.hidden-download-links {
1531 display: none !important;
1534 div.episode-detail div.sound div.download-links {
1535 display: inline-block;
1540 div.extra-soundfiles div.download-links {
1548 div#agenda div.content-inline {
1552 div.previous-and-next-months {
1556 div.publication-date.date.smooth {
1560 #All h1.top.fullwidth {
1566 flex-direction: row;
1572 @media screen and (max-width: $size_s) {
1584 background: $secondary;
1587 border-bottom: 3px solid $yellow;
1596 div#dialog-background,
1597 div.gallery div.first {
1603 background: rgba(0, 0, 0, 0.9);
1608 div.gallery div.first img {
1610 padding-bottom: 25px;
1612 margin-left: -500px;
1616 transition: all 0.5s ease;
1617 transform-origin: bottom left;
1620 div.portrait div.gallery div.first img {
1622 margin-left: -240px;
1628 div.gallery span.gallery-legend {
1629 display: inline-block;
1639 div.portrait div.gallery span.gallery-legend {
1643 @media screen and (max-width: $size_m) {
1644 div.portrait div.gallery div.first img,
1645 div.gallery div.first img {
1651 display: inline-block;
1665 #fiber-content div.topikcell a {
1666 text-decoration: none;
1670 #fiber-content div.topikcell .topik-large a {
1674 div.topikcellcontent h5 {
1678 div.topikcellcontent.topik-large a {
1681 display: inline-block;
1685 div.topikcellcontent.topik-large img {
1690 div.topikcellcontent a {
1692 display: inline-block;
1695 box-sizing: border-box;
1700 div.topikcellcontent img {
1703 div.topikcellcontent h2 {
1707 .program-week img.smooth {
1711 div#dialog-background {
1724 div#dialog-embed textarea {
1729 div#dialog-embed #close-button {
1735 min-height: auto !important;
1738 div.soundfile-info {
1744 background: transparent;
1747 body#embed #Commons,
1748 body#embed #metaNav,
1750 body#embed #userLog,
1751 body#embed #panikdb,
1752 body#embed #Player {
1756 body#embed #Changing {
1761 body#embed #Main > .wrapper {
1772 body#embed ul.custom {
1773 display: inline-block;
1774 width: calc(100% - 110px);
1777 body#embed ul.custom .soundfile-info {
1781 body#embed span.fragment-title {
1782 font-weight: normal;
1794 table.playlist td.tracktime {
1799 p.playlist-disclaimer {
1806 #main-topiks #fiber-nav li ul {
1810 #main-topiks #fiber-nav li ul li {
1815 #main-topiks #fiber-nav li ul li a {
1824 @media screen and (min-width:$size_m){
1826 width: calc(90vw - 240px);
1845 transition: opacity 1s ease;
1852 #chat div.msg.msg-out span.content {
1858 display: inline-block;
1861 text-overflow: ellipsis;
1865 #chat span.content {
1866 display: inline-block;
1867 padding-left: 11rem;
1870 #chat div.msg.info span.content {
1876 @media screen and (max-width: $size_m) {
1882 #chat span.content {
1888 h1.top > span.chat.with-logo {
1891 display: inline-block;
1892 max-width: calc(100% - 140px);
1901 border: 2px solid black;
1904 @media screen and (max-width:$size_m){
1908 h1.top > span.chat.with-logo {
1912 div.topikcellcontent a {
1915 #fiber-content div.topikcell a {
1920 div#CurrentlyChatting {
1925 div.description-emission-chat {
1933 div#chat.moderation .msg-in span.from {
1937 div#chat.moderation .msg-in span.from:hover::after {
1939 font-family: FontAwesome;
1944 div.programCell a.playlist {
1950 color: lighten($primary, 20);
1951 text-transform: uppercase;
1959 -webkit-user-select: none;
1960 -moz-user-select: none;
1961 -ms-user-select: none;
1967 box-sizing: border-box;
1968 transition: all ease 0.5s;
1974 box-sizing: border-box;
1976 padding-bottom: 20px;
1978 @media screen and (max-width: $size_s) {
1979 width: calc(50% - 1rem);
1990 @extend %image-bordure;
1991 @media screen and (max-width: $size_s) {
1997 text-transform: uppercase;
2001 transition: all ease 0.5s;
2007 text-transform: lowercase;
2015 div.emission-detail {
2031 transition: all .2s;
2033 background-color: $mauve;
2036 @media screen and (max-width: $size_s) {
2048 transition: all .2s;
2055 background: $mauve url($data_uri_facebook) center center no-repeat;
2058 background-color: $red;
2060 @media screen and (max-width:$size_m) {
2067 background: $mauve url($data_uri_twitter) center center no-repeat;
2072 background: $mauve url($data_uri_instagram) center center no-repeat;
2076 background-repeat: no-repeat;
2081 background: url($data_uri_start), url($data_uri_pause);
2082 background-position: 0 0, -50px 0;
2086 background: url($data_uri_pause);
2087 background-position: 0 0;
2090 div.playListControls {
2091 button.action-pause {
2092 background-repeat: no-repeat;
2095 background: url($data_uri_pause);
2098 button.action-play {
2099 background-repeat: no-repeat;
2102 background: url($data_uri_play);
2107 background: transparent top center repeat-x;
2111 div#specialHome h1.top {
2112 background: transparent bottom center repeat-x;
2113 padding-bottom: 62px;
2117 div#specialHome h1.top {
2121 padding-bottom: 14px;
2123 padding-right: 10px;
2125 padding-bottom: 10px;
2130 @media screen and (max-width: $size_m) {
2141 div.emission-detail {
2147 text-transform: none;
2156 @extend %image-bordure;
2157 @media screen and (max-width: $size_s) {
2165 box-sizing: border-box;
2169 border-bottom: solid 1px #ff8b57;
2170 text-decoration: none;
2172 background: #ff8b57;
2185 @media screen and (max-width: $size_m) {
2189 button.action-play {
2192 button.action-share {
2193 text-transform: none;
2199 div.emission-episodes {
2209 box-sizing: border-box;
2213 display: inline-block;
2214 margin-bottom: 1rem;
2218 @extend %image-bordure;
2242 div.emission-episodes.archive::after {
2259 @media screen and (max-width: $size_m) {
2267 @media screen and (max-width: $size_m) {
2274 text-transform: lowercase;
2278 padding-bottom: 2rem;
2282 padding-right: 10px;
2283 transition: padding 0.2s;
2290 .playing button.no-icon-remove::after {
2309 background: $secondary;
2311 animation-name: load_animation;
2312 animation-duration: 6000ms;
2313 animation-timing-function: ease-out;
2314 transition: opacity 200ms linear;
2320 @keyframes load_animation {
2326 text-transform: uppercase;
2332 @media screen and (max-width:$size_m){
2338 padding-bottom: 2rem;