Audio Player

#station-grid{ max-width: 1140px; } #station-grid th, #station-grid .program { width: 163px; } #station-grid tr{ height: 9px; } #station-grid .program { background: #ffffff; }#station-grid .currentlyRunning { background: #ee7700; }#station-grid .day { background: #000000;}#station-grid .time { background: #ffffff;} /*Font imported for use on all widgets*/ @import url(https://fonts.googleapis.com/css?family=Karla); @import url(https://fonts.googleapis.com/css?family=Fjalla+One); /* START: CUSTOM FOR ALL WIDGETS */ /*Font style on all widgets. Must match font selected above in @import url*/ /* On Air Now Banner */ .text-primary, .program-name, .next-text, .later-text, .now-overlay-text, .listen-now, .program-details-small, /* Upcoming Shows Profile Sidebar */ .programInfo, .programInfoWhen, .programInfoName, .text-muted, /* Live Stream Strip */.playIcon a, .programName a, /*RSS News feed*/ .pageWrapper, .news-title, /*Amrap Page Search Results on Weebly Search Page*/ .resultsHeader, #playResults, #programResults, /*Program guide time and day, program page archive link*/ .time-text, #station-grid .day, #programPageLink, .poweredByLine, .program-broadcasters, /*Amrap Page text*/ .programName-main, #applyForPage, .archive a, .searchStationPlaylists a, .episodeDescLink, #searchLink, #artistName, .trackContent, .shareLink, .shareLinkUrl, #trackName, .playlist-track, .programTime-main, .trackList a, .episodeDescription, #programDescription { font-family: "lft-etica-condensed",sans-serif; font-style: italic; } /* CUSTOM: UNCOMMENT this if you want to adjust font for headings on On Air Now Banner and Upcoming Shows Profile Sidebar*/ /* .listen-now, .text-primary, .next-text, .later-text, .listen-now strong, .pull-left.listen-now, .programInfoWhen { font-family: 'Fjalla One', sans-serif; text-transform: uppercase; } */ /*CUSTOM: Adjusts color of most headings including Listen Now, Next, Later text and Play Icons */ .text-primary, .programInfoWhen, .next-text, .later-text, .now-overlay-text, .now-overlay-text a, .listen-now, .program-link, .h4, .banner .program-name, .program-name, /* Now Next Later Sidebar Using Banners */.programInfoSlot, /*Player Strip*/ .playIcon a, .programName a, .fa-play-circle, .programName, /* RSS News Feed*/ .news-title, .pageWrapper a, /*Audio Player Pop up window*/ .h5, .program-details-small a, .listening-to-line a:hover, /*Play and program results text from Amrap Page Search Results that appear on Weebly Search Page */ #playResults .play, #playResults a, #playResults a:link, #playResults a:hover, #playResults a:visited, #programResults .program, #programResults a:link, #programResults a:hover, #programResults a:visited { /*DEFINE*/ color: #EE7600; } /*CUSTOM: Adjusts font size and style of Listen Now, Next, Later and other widget text headings */ .text-primary, .programInfoWhen, .next-text, .later-text, .h4, h4, .banner .program-name { font-size: 25px; line-height: 27px; padding-bottom: 2px; text-transform: none; } /*CUSTOM: Adjusts font color of program and broadcaster names and times */ .programInfo, .programInfoName a, .programInfoName a:visited, .text-muted, .pageWrapper, #station-grid .program-name, .program-details-small, /*Some Amrap Search Results text that appears on Weebly Search Page*/ .resultsHeader, #playResults .musicianLink, .noMatching, #playResults .tracksHeader, #programResults .notes { /*DEFINE*/ color: #EE7600; } /*ADJUST FONT SIZE ON PROGRAM NAMES & RSS NEWS FEED TEXT*/ .programInfo, .programInfoName a, .programInfoName a:visited, .now-overlay-text, .now-overlay-text a, .text-muted, .pageWrapper, .news-title, #page, #station-grid .program-name { font-size: 16px; line-height: 18px; padding-top: 3px; text-transform: none; } /*Adjusts size of play icon on all widgets*/ .fa-play-circle { font-size: 42px; } /*CHANGES BACKGROUND COLOR OF ALL WIDGETS. USUALLY SET TO TRANSPARENT TO DISPLAY WEEBLY BACKGROUND COLOR */ body { background-color: transparent; } /* ---------- END CUSTOM FOR ALL WIDGETS ---------- */ /* START: ON AIR NOW BANNER ONLY */ /*Adjusts Background color and opacity of overlay for text on On air Now Banner and Now Next Later Sidebar Using Banners. Usually make black or white*/ .now-overlay-background, .overlay { opacity: 0.90; /*DEFINE*/ background-color: #000000; /*DEFINE*/ border-color: #000000; bottom: 0px; right: 5px; } /*Adjusts text size for 'Listen Now' text on On Air Now Banner */ .listen-now strong { font-weight: 500; font-size: 45px; text-transform: none; } /*Adjusts on On Air Now Banner Image border. */ .now.img-thumbnail { border: none; border-radius: 3; } /* CUSTOM: UNCOMMENT this if you want to change the color of the play icon on the On Air Now Banner only */ /* .banner .fa-play-circle { color: red; } */ .banner .program-name { padding-left: 20px; } .banner .now-overlay-text {bottom: 0} .now-overlay-background { height: 20%; } .now-overlay-text { height: 18%; } .now-overlay-text h2 { line-height: 1px; font-size: 16px; } .banner .program-name { text-overflow: ellipsis; white-space: normal; font-size: 16px; line-height: 16px; text-align: right; } .banner .fa-play-circle { font-size: 30px; } .listen-now strong { font-size: 30px; } /*Adjusts text alignment on on air Now Banner 'next at' and 'later at' text */ .next-text, .later-text { text-align: left; } /* TABLET VIEW*/ @media (max-width: 767px) { .banner .program-name, .banner a.program-link, .banner a.program-link:hover, .banner a.program-link:focus { font-size: 25px; line-height: 27px; } } /*MOBILE VIEW*/ @media (max-width: 500px) { .banner .program-name, .banner a.program-link, .banner a.program-link:hover, .banner a.program-link:focus { font-size: 16px; line-height: 18px; padding-top: 3px; } .listen-now strong { /*This removes the text 'Listen Now' from On Air Now Banner on Mobile to make more room for the program name */ font-size: 0; } .now-overlay-background { height: 40%; } .now-overlay-text { height: 38%; } } /*CUSTOM: UNCOMMENT below and add change colors if you want to add background color to the Next and Later and Time text on the on air now banner*/ /* .next-text, .later-text { opacity: 0.90; background-color: red; border-color: red; } */ /*---------- *END: ON AIR NOW BANNER ONLY -------- */ /*START: UPCOMING SHOWS PROFILE SIDEBAR*/ .program { padding-left: 2px; } @media (max-width: 220px) { .programWrap .programImgDiv { width: 100%; height: auto; float: none; } .programInfo { margin-left: 0; } } .programInfoName { overflow-y: hidden; height: 38px; } /* .programInfoWhen .programInfoName .text-muted */ /*END: UPCOMING SHOWS PROFILE SIDEBAR*/ /*LIVE STREAM STRIP DESKTOP AND MOBILE VIEWS*/ .liveStreamStripWrapper { height:inherit; border: none; border-radius: 3px; background: transparent; } /*CUSTOM: UNCOMMENT this if you want to change the color of the play icon and text on the strip player and mobile play icon only */ .liveStreamStripWrapper .fa-play-circle, .liveStreamStripWrapper .programName a { color: #EE7600; } /*Adjusts text font size, but text is hidden on mobile view*/ .playIcon a, .programName a { padding-left: 3px; text-transform: uppercase; font-size: 16px; line-height: 18px; } .playIcon a { padding-left: 0px; text-transform: none; font-size: 16px; } /* RSS FEED WEEBLY NEWS ON HOMEPAGE */ .scale-center-crop { padding: 0 6px 0 6px; } .text { display:none; } /*Adjusts Tablet and mobile views for news items */ @media (max-width: 767px) { #news .col-xs-12 /* 50% places 2 news items per row on tablets rather than 4 for desktop and 1 for mobile phones */ { width: 50%; } #news .scale-center-crop { width: 100%; padding-bottom: 100%; position: relative; } #news hr { border-style: none; } #news .col-sm-3 { padding-bottom: 50px; } } /*Additional changes for news items to suit mobile phones and override some tablet settings. */ @media (max-width: 500px) { /*Stacks news items vertically on mobile phones, one story per row*/ #news .col-xs-12 { width: 100%; } #news .news-title { width: 100%; font-size: 25px; line-height: 27px; } } /* Audio Player Pop Up Page */ .img-rounded { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .liveStreamPlayerWidget { background-color: white; } /* h5 { margin-top: 0; margin-bottom: 20px; } a { color: #ed1c24; text-decoration: none; } a:focus, a:hover { color: black; text-decoration: underline; } .text-primary { color: #ed1c24; text-transform: uppercase; } */ .program-details-small { margin-left: 0; margin-bottom: 10px; line-height: 1.2em; } .program-details { margin-left: 0; } .desaturate{ -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); filter: gray; filter: grayscale(100%); filter: url(desaturate.svg#greyscale); } /*START AMRAP PAGES CUSTOM CHANGES IF LEFT UNCHANGED STATION WILL HAVE GENERIC BLUE AND GREY AMRAP PAGE. OR YOU CAN ADJUST TO SUIT STATIONS COLOR SCHEME*/ /*FONT TYPE AND COLOR OF MOST TEXT. USUALLY LEAVE AS DARK GREY #333333 */ body, a, p, td, .text,#trackNotes, #trackNotes p, .wikiExtract, .releaseComponent { font-family: "lft-etica-condensed",sans-serif; color: #000000; } /*CHANGES TEXT COLOR OF MOST HEADINGS. GOOD TO MATCH STATION LOGO OR HEADER COLOR. including Program Name, Episode Dates, Titles and Tracknames*/ .programName-main, .programTimeLine, #listenerView .trackList a:hover, #listenerView .trackList a:focus, #listenerView .trackHeader { color: #000000; text-transform:uppercase; font-weight: bold; } .broadcasters-main, i { color:#EE7600; text-transform:uppercase; font-weight: bold; font-size: 16px; } a { text-transform: uppercase; font-weight: bold; } /* CALENDAR STYLING */ /* Uncomment below to turn all calendar text to uppercase */ #calendarStrip { text-transform: uppercase; } /*Color of date buttons on hover and the active date button. Good to Match to Header Color*/ #calendarStrip .episodeDay:hover, #calendarStrip .button:hover, #calendarStrip .currentlyRunning .episodeDay { background: #EE7600; } /*Adjusts color of all date buttons that are not hovered or active or visited */ #calendarStrip .inactiveButton, /*Background of active arrow button*/ #calendarStrip .activeButton { background: #7092BE; } /*Font color of inactive dates on calendar strip*/ #calendarStrip .inactiveButton { color: #ffffff; } /*Font color of inactive date when hovered over */ #calendarStrip .inactiveButton:hover { color: #ffffff; } /*Font color of active date on calendar strip*/ #calendarStrip .currentlyRunning .episodeDay { color: #ffffff; } /* color of Arrows on calendar strip */ #calendarStrip a .fa { color: #000000; } /*Usually leave as light grey #AAAAAA. Controls Text Color of Month/Year floating above calendar strip. 'Share Episode'& 'first aired on' message that appears when stations have multiple guides*/ #calendarStrip .month, .firstAired, .shareLink { color: #AAAAAA; } /*Usually leave as light grey. Adjusts Thickness and Color of all borders on calendar strip */ #calendarStrip .inactiveButton { border: 1px solid #ffffff; } /*Uncomment out below if the station has multiple guides to display guide name above Episode Dates*/ .firstAired { font-size: 0; } /* Uncomment below to changes background color of highlighted track row - use with caution and change text color to compliment it*/ #listenerView .highlightRow { background-color: #EE7600; color:white; } /*END AMRAP PAGES CUSTOM CHANGES */ /*LAYOUT IMPROVEMENTS FOR ALL AMRAP PAGES - GENERALLY DON'T NEED TO CHANGE*/ /*Adds small rounded edges to Amrap Page banner image using border-radius*/ .zoomCenterCrop{ border-radius: 3px; } /*Amrap Page Profile Picture Alignment and Improvements including rounding image edges using border-radius*/ #listenerView { padding-right: 15px; } .programPhoto { margin-top: 30px; margin-left: 2px; border-radius: 5px; } /*Turns underline off from 'info' on tracklist and 'search playlist'*/ .trackContent a, #searchLink { text-decoration: none;} /*Content Pane improvements: Adds padding and rounds image edges using border-radius*/ #contentPane { display: block; vertical-align: top; padding: 15px; background-color: #eeeeee; border-radius: 5px; } img { border-radius: 5px; } /*Aligns Share Episode & Share Track to right */ .shareLinkIcons, .shareLink { text-align: right; } /*EDIT TEXT*/ .day-text /*changes day row text*/ { color:#ffffff; text-transform: uppercase; font-weight:bold; font-size:18px; } .time-text /*changes time column text*/ { color:#000000; text-transform: uppercase; } .program-name a{ text-transform: uppercase; color:black; } .program-name { text-transform:uppercase; } .day { padding-top: 10px; font-weight: 400; } .schedule-corner /*fills top left corner box of guide*/ { background: #ffffff none repeat scroll 0% 0%; } /*EDIT GRID LINES*/ #station-grid{ max-width: 100%!important; } #station-grid .day /*changes border on day row*/ { border-width: 1px; border-color: black; } #station-grid td /*changes border on program columns*/ { border-color: black; border-width: 1px; } #station-grid .time /*changes border on time column*/ { border-color: black; border-width: 1px; } /*EDIT LINKS SITTING OUTSIDE OF GRID*/ .poweredByLine, .poweredByLine /*changes 'Program Guide Powered by Amrap' link*/ a { padding: 20px 0; } #programPageLink /*changes 'view program page archive' link*/ a { color:#ee7700; } #station-grid .program-name { padding-bottom: 10px; text-transform: uppercase; color:black; font-size:14px; } a { text-decoration: none; color: black; text-transform: uppercase; } a:hover { color: #ee7700; text-decoration: underline; } #station-grid .currentlyRunning .program-name { color:white; }