15 font-family: Roboto, sans-serif;
25 background: url(../img/border1.jpeg) fixed repeat;
27 display: inline-block;
30 transition: transform ease 0.2s;
34 transform: scale(0.9);
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;
103 /****************************************************/
105 /****************************************************/
106 .wrapper {max-width: 1560px; padding:0 1%;}
107 .wrapper.text {max-width: 780px; margin:auto;}
108 .wrapper .rightPart{margin-top:1em;}
110 @media screen and (min-width: $size_m) {
111 #player-container.fixed {
114 width: calc(0% + 235px);
119 .wrapper.sided .leftPart,
120 .wrapper.sided .rightPart{
123 .wrapper.navigation .leftPart{
126 .wrapper.navigation .rightPart{
139 #specialHome .leftPart,
140 #specialHome .rightPart {
146 padding-bottom: 40px;
155 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
159 text-justify: distribute-all-lines;
162 display: inline-block;
169 text-transform: uppercase;
170 display:inline-block;
171 border: 1px solid #CCC !important;
175 border-radius: 0.7em;
176 -moz-border-radius: 0.7em;
177 -webkit-border-radius: 0.7em;
179 button.check, a.check {
181 text-transform: none;
182 display:inline-block;
188 text-transform: uppercase;
190 button.check:before, a.check:before {
191 display:inline-block;
195 padding:0.2em 0.5em 0.2em 0.5em;
196 border-radius: 0.2em;
197 -moz-border-radius: 0.2em;
198 -webkit-border-radius: 0.2em;
203 border:1px solid white;
215 /****************************************************/
217 /****************************************************/
222 /****************************************************/
224 /****************************************************/
228 background-color: #3a3a3a;
241 text-overflow: ellipsis;
245 #metaNav ul li#nav-search {
255 #metaNav ul li#nav-language span {
259 display: inline-block;
262 #metaNav ul li#nav-language span.lang-on {
266 #metaNav ul li a span{
267 display:inline-block;
270 #metaNav ul li a span.nav-icon {
273 #metaNav a:focus, #metaNav a:hover{
276 #metaNav ul li.active, #metaNav ul li.active a{
280 #metaNav ul li.active span.iconLabel {
283 #metaNav li#nav-search a {
288 display: inline-block;
293 border: 1px solid #ececec;
301 @media screen and (max-width:$size_m){
302 #bg-title { display: none; }
303 #metaNav .iconLabel {display:none;}
304 #metaNav ul li a span.nav-icon { display: inline-block; }
314 #metaNav ul li#nav-language {
315 padding: 0.2em 0 0 1em;
319 /****************************************************/
321 /****************************************************/
323 .audio button, .audio a {color:$primary;}
330 /****************************************************/
332 /****************************************************/
339 @media screen and (max-width: $size_m) {
346 display: inline-block;
347 background: url(../img/top-flowers.png) bottom left no-repeat;
350 @media screen and (max-width: $size_m) {
354 background-size: contain;
359 background: url(../img/petite.png) no-repeat;
365 @media screen and (max-width: $size_s) {
366 transform: scale(0.8);
368 @media screen and (max-width: $size_m) {
375 display: inline-block;
378 #mainHeader *{color:black !important;line-height:1em;}
380 #Panik img{display:block;margin:auto;max-height:200px;}
384 #player-container #player{
389 #Changing h1.top a:hover {
394 background: white no-repeat;
395 background-image: url(../img/back1.png), url(../img/back2.png), url(../img/back3.png);
396 background-position: top 0 left -30px, top 300px right -30px, top 700px left -50px;
399 @media screen and (min-width: $size_m) {
401 box-sizing: border-box;
405 box-sizing: border-box;
409 text-transform: uppercase;
412 padding-bottom: 20px;
420 display: none !important;
429 #Emissions div.mainSub {
434 width: calc(98% - 320px);
437 #News div.mainSub ul,
438 #About div.mainSub ul,
439 #Emissions div.mainSub ul {
444 #News div.mainSub ul li,
445 #About div.mainSub ul li,
446 #Emissions div.mainSub ul li {
449 #News .news.wrapper {
453 #News .news.wrapper li a {
465 #Main > .soundfiles > .wrapper,
466 #Main > .news > .wrapper,
485 #fiber-content h2.title {
493 background: transparent;
497 #All #backgroundBox h1.top {
504 color: $primary !important;
507 #All h1.top#radiopanik {
512 #All #backgroundBox h1 {
517 #specialHome div.rightPart h1,
526 /****************************************************/
527 /**** SCREEN NAV ****/
528 #Nav nav{padding:0.1em;}
530 #Nav input{color:#333;}
533 border-width:0 0 2px 0;
535 border-color: transparent;
539 #Nav .active,#Nav .icon-check,#Nav .active *{
544 #Nav ul li.current a, #Nav ul a.active, #Nav button.active {
566 display: inline-block;
568 #Nav nav ul.distributed li {padding: 0;}
572 border-width:0 0 2px 0;border-style:solid;
574 #fiber-nav li, #fiber-nav li a{
583 #fiber-nav .selected > a,
584 #fiber-nav .current {
588 /****************************************************/
590 /****************************************************/
591 /*#Home #player{ float: left; } */
593 #player-container .metas, #player-container img{border-color:#fff;}
594 #player-container .padded{padding:0.3em;}
596 #player-container button,#player-container a{
598 #player-container .metas{
601 #DirectStreamPanikControler {
603 #DirectStreamPanikControler div.label {
605 @media screen and (max-width: $size_m) {
624 @media screen and (max-width: $size_m) {
625 padding: 0.6em 0 0 0;
633 left: calc(50% - 220px);
638 #Player.withPlaylist {
644 #player-container #myPlaylist a {
648 #player-container.minimized{
650 border-width:0px 2px 2px 0 !important;
651 border-bottom-right-radius:1em;
652 -moz-border-bottom-right-radius:1em;
653 -webkit-border-bottom-right-radius:1em;
655 #player-container.minimized #player{
665 #Playlist #playlistLabel{
669 #Playlist .playListControls{
671 #Playlist .playListControls button{
673 display:inline-block;
675 #Playlist .playListControls .playPause{
681 @media screen and (max-width: $size_m) {
686 #Playlist .playing .icon-pause{
687 -webkit-animation: loading 1s infinite linear;
688 -moz-animation: loading 1s infinite linear;
689 -o-animation: loading 1s infinite linear;
690 animation: loading 1s infinite linear;
692 #Playlist .playlistControls button,#Playlist .playlistControls .button{
693 margin:0 0.1em 0 0.1em;
698 #Playlist .soundControls button{}
700 #player-container #Playlist ol li{
705 #Playlist ol li .soundControls{
711 #Playlist ol li.active .soundControls {
714 #Playlist ol li .title{
715 display:inline-block;
717 text-overflow: ellipsis;
721 @media screen and (max-width: $size_m) {
723 background-position: center 30px;
725 #All h1.top#radiopanik {
730 #Player.withPlaylist #player-container #audioPlayer,
731 #Player.withPlaylist #player-container #audioPlayer,
732 #Player.withPlaylist #player-container #Playlist{
733 float:none !important;
734 width:auto !important;
735 border-right:none !important;
736 max-width:auto !important;
739 #player.on-chat-page {
743 div.chat-page .rightPart {
747 border-top: 1px solid #777;
752 /****************************************************/
753 /**** #Changing #Footer ... ****/
754 /****************************************************/
757 flex-direction: column;
767 @media screen and (max-width: $size_m) {
779 #Changing a:hover,#Changing button:hover {
780 text-decoration:none;
782 /* GLOBAL SITE NAV */
791 -moz-box-shadow: 0px 0px 3px #000;
792 -webkit-box-shadow: 0px 0px 3px #000;
793 box-shadow: 0px 0px 3px #000;
794 border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
799 background-color:$primary;
800 border: 2px solid black;
801 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);
804 background-color:grey;
808 background-color:green;
813 background-color:$primary;
825 background: url(../img/footer-provisoire-min.jpeg) bottom center no-repeat;
827 padding-bottom: 80px;
835 text-decoration: none;
843 @media screen and (max-width: $size_m) {
844 padding-bottom: 30px;
849 /****************************************************/
850 .inline .link{display:block;padding:1em;}
852 /**** EMISSIONS ****/
860 .episode.resume, .episode.inline{
861 padding:1em 0.5em 1em;
863 .episode.inline .dateBloc, .episode.resume .dateBloc{
866 .episode.resume img {
867 border: 2px solid black;
870 .episode.resume .title{
873 .episode.resume .logo{
877 .episode.inline .logo {
882 .episode.resume .sound{
884 margin:0 0 0.5em 0.5em;
886 .episode.inline .sound.right{
892 .episode.inline .sound.right button{
896 padding-bottom:0.05em;
898 .episode.resume .sound.right .icon-download{
901 .episode.resume .sound.right .icon-download{
908 display: inline-block;
909 vertical-align: middle;
912 .episode.detail .logo.right{
916 .episode.resume .date .day, .emission-detail .date .day {
919 .episode.resume .content {
922 .episode.resume .content .title {
925 .episode.resume .logo {
929 .episode.inline .date{
933 #Emission-tabs-menu .emissions-newsitems {
937 #Emission-tabs-menu .emissions-newsitems ul.list li {
941 #Emission-tabs-menu .futur-episodes h5,
942 #Emission-tabs-menu .recent-episodes h5 {
946 #Emission-tabs-menu #search-form {
950 div.extra-soundfiles h3 {
955 div.extra-soundfiles ul li {
959 div.extra-soundfiles ul li div.audio {
967 div.extra-soundfiles ul strong {
971 /****************************************************/
992 .newsRoll .title div{
995 .newsRoll a, .newsRoll button img{
996 border:3px solid $secondary;
999 .newsRoll .by3 button {
1003 .soundfiles .special a,
1008 .special .labels .item,
1009 .newsRoll .labels .item{
1011 background: $secondary;
1017 .newsList .current a{
1020 /****************************************************/
1024 .soundfiles ul.custom li a,
1025 .news ul.custom li a { max-width: 98%; }
1026 .news li.item a {padding:1em;}
1034 border-bottom:3px solid #ccc;
1037 /****************************************************/
1039 /****************************************************/
1041 #Home #Nav .wrapper{
1042 max-width:auto !important;
1043 width:auto !important;
1046 /****************************************************/
1048 /****************************************************/
1050 .program.tabs nav ul li{
1056 .program.tabs nav ul li.week-arrow {
1058 padding-bottom: 5px;
1061 .program ul .dateBloc {
1065 .program ul .schedule {
1071 .program-week .programDate{
1075 .program-week .programCell{
1078 .program-week .nonStop .programDate{
1081 .program-week .nonStop .programCell{
1086 .program-week a.nonstop{
1090 .program-week .inline,.program-week .resume{padding:0;}
1091 .program-week .description{}
1093 .program-week .title {
1098 .program-week .smooth {
1102 padding-bottom: 8px;
1105 .program-week .emission h5,
1106 .program-week .smooth .title {
1108 text-transform: uppercase;
1111 .program-week .description {
1116 .program-week .programCell:hover {
1120 #Changing .program-week .programCell a {
1124 #Changing .program-week .programCell .smooth a {
1128 #Changing .program-week .programCell .smooth h5 a {
1133 /****************************************************/
1135 /****************************************************/
1137 .search li.previous-page {
1144 .search li.next-page {
1152 text-align: justify;
1156 /****************************************************/
1158 /****************************************************/
1165 height:50px !important;
1167 #grid .heure.vertical {
1171 padding:1em 0 1em 0;
1176 padding:0.5em 0.2em 0.5em 0.2em;
1179 border:1px dotted #ddd;
1186 #grid .highlighted,#grid .highlighted *{
1187 background:#333 !important;
1188 color:white !important;
1191 #grid .highlighted,#grid .highlighted *{
1192 background:#333 !important;
1193 color:white !important;
1195 #Emissions li.item.normal{
1198 #Emissions li.item.hightlighted{
1199 display:block !important;
1202 #gridNav span.category {
1203 text-transform: none;
1207 /**** Navigation for static pages ****/
1212 #fiber-nav li, #fiber-nav li a {
1223 text-decoration: underline;
1226 #fiber-content .episode a,
1227 #fiber-content ul.list a {
1228 text-decoration: none;
1231 #fiber-content a:hover {
1232 text-decoration: none;
1243 .userContent strong,
1244 #fiber-content strong {
1245 text-transform: none;
1251 font-family: inherit;
1255 /**** SCREEN SIZE ADAPTATIONS ****/
1256 html #main{ font-size: 70%; }
1257 body { font-size: 18px;}
1258 @media (max-width: 300px){
1259 body #All{ font-size: 80%; }
1262 @media (min-width: 300px) and (max-width:800px){
1263 body #All{ font-size: 85%; }
1266 @media (min-width: 800px) and (max-width:$size_m){
1267 body #All{ font-size: 90%; }
1270 @media (min-width: $size_m) {
1271 body #All{ font-size: 100%; }
1277 padding-bottom: 2em;
1280 #Home #subscribe-form {
1284 #subscribe-form ul.errorlist {
1295 #subscribe-form input {
1300 #Nav div.search form {
1304 div.episode.resume div.title {
1305 white-space: normal;
1308 #Home div.program.tabs {
1323 #recent-emissions h3,
1329 #recent-emissions h3.sectionLabel {
1333 .episode.soundfile {
1337 .soundfile .smooth {
1348 .frontpage.soundfile .audio {
1351 padding-bottom: 1ex;
1361 border: 1px solid #888;
1362 border-width: 1px 1px 0 1px;
1363 -webkit-transform-origin: bottom right;
1364 -webkit-transform: rotate(270deg);
1365 -moz-transform-origin: bottom right;
1366 -moz-transform: rotate(270deg);
1367 transform-origin: bottom right;
1368 transform: rotate(270deg);
1375 .soundfile .special,
1376 .newsitem .special {
1380 .newsitem .special .smooth {
1386 div.userContent ul {
1393 div.userContent h4 {
1394 text-transform: none;
1395 font-weight: normal;
1398 div.userContent h1 { font-size: 2em; }
1399 div.userContent h2 { font-size: 1.8em; }
1400 div.userContent h3 { font-size: 1.5em; }
1401 div.userContent h4 { font-size: 1.5em; }
1402 div.userContent a { text-decoration: underline; }
1404 div.userContent a.tag { text-decoration: none; }
1406 @media screen and (max-width: $size_m) {
1413 #All #backgroundBox h1.top {
1417 #Player.withoutPlaylist #player-container #audioPlayer{
1421 #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1425 #player-container * {color: white !important; }
1430 width:100% !important;
1432 border-top: 2px solid red;
1443 div.extra-soundfiles {
1447 h3.episode-subtitle {
1459 background: $orange;
1460 background: linear-gradient(to top, darken($orange, 20%) 0%, $orange 40%);
1461 display: inline-block;
1466 .waveform span.done {
1467 background: linear-gradient(to top, darken($red, 5%) 0%, darken($red, 10%) 100%);
1470 .waveform span.done.current + span {
1474 .waveform i.duration {
1486 border-bottom: 1px dotted #666;
1489 div.fragment-sound {
1493 div.soundcell div.logo {
1494 vertical-align: top;
1497 div.fragment-sound {
1500 div.extra-soundfiles div.fragment-sound {
1504 div.extra-soundfiles div.fragment-name {
1511 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1513 div.extra-soundfiles ul li div.fragment-sound div.audio {
1517 #fiber-content div.extra-soundfiles strong {
1518 text-transform: uppercase;
1522 .nonstop-track-title, .nonstop-track-artist {
1527 padding-right: 75px;
1530 #fiber-content div.extra-soundfiles .soundfile-info strong {
1534 #fiber-content div.extra-soundfiles .soundfile-info a {
1535 text-decoration: none;
1538 #fiber-content div.extra-soundfiles {
1542 div.extra-soundfiles div.logo {
1543 display: inline-block;
1546 div#fiber-content div.extra-soundfiles ul.list {
1547 display: inline-block;
1549 width: calc(100% - 74px);
1552 div.download-links {
1558 div.hidden-download-links {
1559 display: none !important;
1562 div.episode-detail div.sound div.download-links {
1563 display: inline-block;
1568 div.extra-soundfiles div.download-links {
1576 div#agenda div.content-inline {
1580 div.previous-and-next-months {
1584 div.publication-date.date.smooth {
1588 #All h1.top.fullwidth {
1594 flex-direction: row;
1600 @media screen and (max-width: $size_s) {
1612 background: $secondary;
1615 border-bottom: 3px solid $yellow;
1624 div#dialog-background,
1625 div.gallery div.first {
1631 background: rgba(0, 0, 0, 0.9);
1636 div.gallery div.first img {
1638 padding-bottom: 25px;
1640 margin-left: -500px;
1644 transition: all 0.5s ease;
1645 transform-origin: bottom left;
1648 div.portrait div.gallery div.first img {
1650 margin-left: -240px;
1656 div.gallery span.gallery-legend {
1657 display: inline-block;
1667 div.portrait div.gallery span.gallery-legend {
1671 @media screen and (max-width: $size_m) {
1672 div.portrait div.gallery div.first img,
1673 div.gallery div.first img {
1679 display: inline-block;
1694 #fiber-content div.topikcellcontent a {
1695 text-decoration: none;
1699 #fiber-content div.topikcell .topik-large a {
1703 div.topikcellcontent h5 {
1707 div.topikcellcontent.topik-large a {
1710 display: inline-block;
1714 div.topikcellcontent.topik-large img {
1719 div.topikcellcontent.topik-large a div {
1720 @media screen and (min-width: 760px) {
1726 white-space: nowrap;
1728 @media screen and (max-width: 760px) {
1734 div.topikcellcontent a {
1736 display: inline-block;
1739 box-sizing: border-box;
1744 div.topikcellcontent img {
1747 div.topikcellcontent h2 {
1751 .program-week img.smooth {
1755 div#dialog-background {
1768 div#dialog-embed textarea {
1773 div#dialog-embed #close-button {
1779 min-height: auto !important;
1782 div.soundfile-info {
1788 background: transparent;
1791 body#embed #Commons,
1792 body#embed #metaNav,
1794 body#embed #userLog,
1795 body#embed #panikdb,
1796 body#embed #Player {
1800 body#embed #Changing {
1805 body#embed #Main > .wrapper {
1816 body#embed ul.custom {
1817 display: inline-block;
1818 width: calc(100% - 110px);
1821 body#embed ul.custom .soundfile-info {
1825 body#embed span.fragment-title {
1826 font-weight: normal;
1838 table.playlist td.tracktime {
1843 p.playlist-disclaimer {
1850 #main-topiks #fiber-nav li ul {
1854 #main-topiks #fiber-nav li ul li {
1859 #main-topiks #fiber-nav li ul li a {
1868 @media screen and (min-width:$size_m){
1870 width: calc(90vw - 240px);
1889 transition: opacity 1s ease;
1896 #chat div.msg.msg-out span.content {
1902 display: inline-block;
1905 text-overflow: ellipsis;
1909 #chat span.content {
1910 display: inline-block;
1911 padding-left: 11rem;
1914 #chat div.msg.info span.content {
1920 @media screen and (max-width: $size_m) {
1926 #chat span.content {
1932 h1.top > span.chat.with-logo {
1935 display: inline-block;
1936 max-width: calc(100% - 140px);
1945 border: 2px solid black;
1948 @media screen and (max-width:$size_m){
1952 h1.top > span.chat.with-logo {
1956 div.topikcellcontent a {
1959 #fiber-content div.topikcell a {
1964 div#CurrentlyChatting {
1969 div.description-emission-chat {
1977 div#chat.moderation .msg-in span.from {
1981 div#chat.moderation .msg-in span.from:hover::after {
1983 font-family: FontAwesome;
1988 div.programCell a.playlist {
1994 color: lighten($primary, 20);
1995 text-transform: uppercase;
2003 -webkit-user-select: none;
2004 -moz-user-select: none;
2005 -ms-user-select: none;
2011 box-sizing: border-box;
2012 transition: all ease 0.5s;
2018 box-sizing: border-box;
2020 padding-bottom: 20px;
2023 @media screen and (max-width: $size_s) {
2024 width: calc(50% - 1rem);
2035 @extend %image-bordure;
2036 @media screen and (max-width: $size_s) {
2042 text-transform: uppercase;
2047 transition: all ease 0.5s;
2053 text-transform: lowercase;
2061 div.emission-detail {
2077 transition: all .2s;
2079 background-color: $blue;
2082 @media screen and (max-width: $size_s) {
2094 transition: all .2s;
2101 background: $yellow url($data_uri_facebook) center center no-repeat;
2104 background-color: $red;
2106 @media screen and (max-width:$size_m) {
2113 background: $yellow url($data_uri_twitter) center center no-repeat;
2118 background: $yellow url($data_uri_instagram) center center no-repeat;
2122 background-repeat: no-repeat;
2127 background: url($data_uri_start), url($data_uri_pause);
2128 background-position: 0 0, -50px 0;
2132 background: url($data_uri_pause);
2133 background-position: 0 0;
2137 background: url($data_uri_stop);
2138 background-position: 0 0;
2141 div.playListControls {
2142 button.action-stop {
2143 background-repeat: no-repeat;
2146 background: url($data_uri_stop);
2148 button.action-pause {
2149 background-repeat: no-repeat;
2152 background: url($data_uri_pause);
2155 button.action-play {
2156 background-repeat: no-repeat;
2159 background: url($data_uri_play);
2164 background: transparent top center repeat-x;
2168 div#specialHome h1.top {
2169 background: transparent bottom center repeat-x;
2170 padding-bottom: 62px;
2174 div#specialHome h1.top {
2178 padding-bottom: 14px;
2180 padding-right: 10px;
2182 padding-bottom: 10px;
2187 @media screen and (max-width: $size_m) {
2198 div.emission-detail {
2205 text-transform: none;
2214 @extend %image-bordure;
2215 @media screen and (max-width: $size_s) {
2225 box-sizing: border-box;
2229 border-bottom: solid 1px #ff8b57;
2230 text-decoration: none;
2232 background: #ff8b57;
2242 flex-direction: column;
2244 justify-content: space-between,
2248 align-self: flex-end;
2250 @media screen and (max-width: $size_s) {
2253 @media screen and (max-width: $size_m) {
2257 button.action-play {
2260 button.action-share {
2261 text-transform: none;
2263 button.icon-play-sign {
2270 background: transparent;
2274 &.playing button.icon-pause {
2286 div.emission-episodes {
2296 box-sizing: border-box;
2300 display: inline-block;
2301 margin-bottom: 1rem;
2305 @extend %image-bordure;
2331 div.emission-episodes.archive::after {
2348 @media screen and (max-width: $size_m) {
2358 @media screen and (max-width: $size_m) {
2365 text-transform: lowercase;
2369 padding-bottom: 2rem;
2373 padding-right: 10px;
2374 transition: padding 0.2s;
2382 .playing button.no-icon-remove::after {
2401 background: $secondary;
2403 animation-name: load_animation;
2404 animation-duration: 6000ms;
2405 animation-timing-function: ease-out;
2406 transition: opacity 200ms linear;
2412 @keyframes load_animation {
2418 text-transform: uppercase;
2425 @media screen and (max-width:$size_m){
2431 padding-bottom: 2rem;
2434 .episode-auto-selection-cell.hide-emission-titles {
2435 .emission-title, .soundfile-info .sep {
2440 #detour-vers-le-footer {
2453 flex-direction: column;
2454 justify-content: space-between;
2456 @media screen and (max-width:$size_m){
2468 @media screen and (max-width:$size_m){
2469 justify-content: center;
2476 padding: 0.3em 0.6em;
2477 background: #ff8b57;
2479 border-radius: 10px;
2481 background: darken(#ff8b57, 20%);