/**
* Music Navigation component
*
* Main Music Navigation.
*/
/**
* _components
*
* All of the components common to the music nav
*/
/*
* Lib
*/
/*
* Local
*/
/**
* Global
*
* Included at all viewport sizes. This file imports all our common libraries
* and any module and page specific styling.
*/
/*
* Break points
*/
/**
* _colours
*
* Colour scheme for the main nav items/links
*/
/* Two blues */
/* MusicNav Sections */
/* Drawer/Panel Content */
/* Mobile Menu Button */
/* Tier 1 Items */
/* Tier 2 Items */
/* Footer */
/* Outline Colours for Focus States (links that are active because of tab press) */
/*
------------------------------
MUSIC NAVIGATION
------------------------------
*/
html {
-webkit-text-size-adjust: 100%; }
:root {
text-rendering: optimizeLegibility;
font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; }
#mn-mobile-menu-radioButton, #mn-mobile-menu-mymusic-radioButton {
display: none; }
#mn *,
#mdn *,
#mn-hdr *,
#mf * {
box-sizing: border-box; }
#mn,
#mdn,
#mn-hdr,
#mf {
font-size: 10px;
font-family: Helvetica, Arial, Sans-serif; }
#mdn {
background: #ffffff;
padding: 20px 0;
font-size: 15px;
color: #4a4a4a;
line-height: 20px; }
#mdn a {
color: #000000;
font-weight: bold;
display: block; }
#mn {
display: block;
background: #1a1a1a;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-width: 320px;
/**
* This class is to ensure no outline can be shown on elements such as anchors and buttons in certain circumstances
* See MusicNavAccessibility.clickOutlineFix() for when this class is added to elements
*/
/* Top Bar */
/* Top Bar on Search Results Page */
/* Top Bar with Search Open */
/* Drawer
* The drawer is collapsed by default using the max-height of zero which can be overriden to animate the drawer sliding down.
*/
/* Language specific */
/* Hidden placeholder to help with tabbing out and shift-tabbing back in to musicnav in combination with JS listeners */ }
#mn .clearfix:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: '.'; }
#mn .mn-outline-none {
outline: none !important; }
#mn .is-visible {
display: block !important; }
#mn .is-invisible {
display: none !important; }
#mn #mn-top-bar {
height: 56px; }
#mn #mn-top-bar .mn-logo {
margin-top: 15px;
background: url("/music/articles/staticarchive/bae3bd8f129b75af070cdc9d799e4b14fd9b9edf.png") no-repeat 0 0 transparent;
background-image: url("/music/articles/staticarchive/b7904c1c59d2d36d439475d2a25bbe08a94bc947.png") \9;
background-image: url("/music/articles/staticarchive/b7904c1c59d2d36d439475d2a25bbe08a94bc947.png") \0;
background-size: cover;
width: 10.4em;
height: 2.6em;
z-index: 1;
position: absolute; }
#mn #mn-top-bar .mn-logo span {
position: absolute;
left: -2500px;
width: 1px;
overflow: hidden; }
#mn #mn-top-bar .mn-logo:focus {
outline: 1px dotted #fff; }
#mn #mn-top-bar .mn-logo:active {
outline: none; }
@media screen and (-ms-high-contrast: active) {
#mn #mn-top-bar .mn-logo {
background-image: none; }
#mn #mn-top-bar .mn-logo:after {
content: url("/music/articles/staticarchive/b7904c1c59d2d36d439475d2a25bbe08a94bc947.png"); } }
#mn #mn-top-bar nav#mn-top-bar-links {
display: none; }
#mn #mn-top-bar #mn-menu-button {
width: 52px;
height: 32px;
border: 1px solid #666666;
margin-top: 12px;
position: absolute;
top: 0px;
right: 98px;
padding: 6px 0;
color: #fff;
background: none;
font-size: 14px;
line-height: 16px;
text-align: center;
outline: none;
cursor: pointer; }
#mn #mn-top-bar #mn-menu-button .gelicon {
display: block;
font-size: 2em;
height: 100%;
line-height: 2em;
text-align: center;
width: 100%; }
#mn #mn-top-bar #mn-menu-button:hover, #mn #mn-top-bar #mn-menu-button:active, #mn #mn-top-bar #mn-menu-button:focus {
color: #a0e3f6;
background: #4a4a4a; }
#mn #mn-top-bar #mn-menu-button:focus {
border: 1px dotted #fff; }
#mn #mn-top-bar #mn-menu-button.mn-outline-none {
border: 1px solid #666666; }
#mn #mn-top-bar #mn-menu-mymusic-button {
width: 82px;
height: 32px;
border: 1px solid #666666;
margin-top: 12px;
position: absolute;
top: 0px;
right: 8px;
padding: 6px 0;
color: #fff;
background: none;
font-size: 14px;
line-height: 16px;
text-align: center;
outline: none;
cursor: pointer; }
#mn #mn-top-bar #mn-menu-mymusic-button .gelicon {
display: block;
font-size: 2em;
height: 100%;
line-height: 2em;
text-align: center;
width: 100%; }
#mn #mn-top-bar #mn-menu-mymusic-button:hover, #mn #mn-top-bar #mn-menu-mymusic-button:active, #mn #mn-top-bar #mn-menu-mymusic-button:focus {
color: #a0e3f6;
background: #4a4a4a; }
#mn #mn-top-bar #mn-menu-mymusic-button:focus {
border: 1px dotted #fff; }
#mn #mn-top-bar #mn-menu-mymusic-button.mn-outline-none {
border: 1px solid #666666; }
#mn.mn-profile-music_search #mn-top-bar {
height: 50px; }
#mn.mn-profile-music_search #mn-top-bar .mn-logo {
margin-top: -39px; }
#mn.mn-profile-music_search #mn-top-bar #mn-menu-button, #mn.mn-profile-music_search #mn-top-bar #mn-menu-mymusic-button {
margin-top: -38px;
display: block; }
#mn.mn-search-is-open {
z-index: 910; }
#mn.mn-search-is-open #mn-top-bar .mn-logo {
margin-top: -39px; }
#mn.mn-search-is-open #mn-top-bar #mn-menu-button, #mn.mn-search-is-open #mn-top-bar #mn-menu-mymusic-button {
display: none; }
#mn.mn-search-is-open #mn-top-bar .mn-search-container {
margin-right: -1px; }
#mn #mn-drawer {
max-height: 0;
transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
-ms-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
overflow: hidden;
border-bottom: 1px solid #4A4A4A;
background: #1a1a1a; }
#mn #mn-drawer .mn-panel-wrapper {
background: #232323;
/* One Radio Button For Each Section - Always Hidden */
/* Panels */ }
#mn #mn-drawer .mn-panel-wrapper input[type=radio] {
display: none; }
#mn #mn-drawer .mn-panel-wrapper nav.panel h3 {
margin: 0;
font-weight: normal;
padding-top: 9px;
padding-bottom: 9px;
color: #fff;
background: #1a1a1a;
font-size: 15px;
line-height: 20px; }
#mn #mn-drawer .mn-panel-wrapper nav.panel ul {
margin: 0 -16px 0 0;
list-style: none;
max-height: 300px;
background: #232323;
border-bottom: 1px solid #4A4A4A; }
#mn #mn-drawer .mn-panel-wrapper nav.panel ul li {
padding: 10px 32px 10px 0;
float: left; }
#mn #mn-drawer .mn-panel-wrapper nav.panel ul li a {
font-size: 15px;
font-weight: normal;
line-height: 20px;
text-decoration: none;
color: #fff; }
#mn #mn-drawer .mn-panel-wrapper nav.panel ul li a:hover, #mn #mn-drawer .mn-panel-wrapper nav.panel ul li a:active, #mn #mn-drawer .mn-panel-wrapper nav.panel ul li a:focus {
color: #a0e3f6; }
#mn #mn-drawer .mn-panel-wrapper nav.panel.mn-mymusic ul li {
float: none; }
#mn #mn-drawer .mn-panel-wrapper nav.panel.mn-mymusic h3 {
display: none; }
#mn #mn-drawer .mn-panel-wrapper:last-child nav.panel ul {
border-bottom: none; }
#mn.mn-language-cy #mn-top-bar #mn-menu-button, #mn.mn-language-ga #mn-top-bar #mn-menu-button {
width: 80px; }
#mn #mn-tab-exit-re-enter {
background: none;
position: absolute;
top: -1000px;
opacity: 0;
border: none; }
/* Mobile Checkbox Is Checked */
#mn-mobile-menu-radioButton:checked ~ #mn {
/* Drawer Fully Expanded */
/* Search Results Page */ }
#mn-mobile-menu-radioButton:checked ~ #mn #mn-top-bar #mn-menu-button {
background: #4a4a4a; }
#mn-mobile-menu-radioButton:checked ~ #mn #mn-drawer {
display: block;
max-height: 1000px;
transition: max-height 1s; }
#mn-mobile-menu-radioButton:checked ~ #mn #mn-drawer .highlightedLinkItem {
display: none; }
#mn-mobile-menu-mymusic-radioButton:checked ~ #mn {
/* Drawer Fully Expanded */
/* Search Results Page */ }
#mn-mobile-menu-mymusic-radioButton:checked ~ #mn #mn-top-bar #mn-menu-mymusic-button {
background: #4a4a4a; }
#mn-mobile-menu-mymusic-radioButton:checked ~ #mn #mn-drawer {
display: block;
max-height: 1000px;
transition: max-height 1s; }
#mn-mobile-menu-mymusic-radioButton:checked ~ #mn #mn-drawer .mn-panel-wrapper:not(.highlightedLinkItem) {
display: none; }
/*
------------------------------
Header
------------------------------
*/
#mn-hdr h1 {
display: inline-block;
font-size: 20px;
line-height: 1.2em;
color: #fff;
font-weight: normal;
vertical-align: top;
margin: 8px 8px 8px 0; }
#mn-hdr .mn-hdr-filter {
display: block;
margin: -8px; }
#mn-hdr .mn-hdr-sort {
display: block;
margin: 0px -8px 0 -8px; }
/*
------------------------------
Footer links
------------------------------
*/
#mf .m-links {
list-style-type: none;
text-align: left;
padding-left: 1.2em;
margin: 0;
float: left; }
#mf .m-links li {
display: inline-block;
vertical-align: middle;
margin: 12px 0; }
#mf .m-links .m-links-list {
margin: 0;
padding-left: 0; }
#mf .m-links .m-links-list {
margin: 0; }
#mf .m-links .m-links-text {
display: inline-block;
line-height: 24px; }
#mf .m-links .m-links-text li {
display: inline-block; }
#mf .m-links .m-links-icons {
display: inline-block; }
#mf .m-links .m-links-icons li {
display: inline-block; }
#mf .m-links-text
.m-links li {
display: inline-block;
list-style-type: none; }
#mf .m-links li a {
display: block;
padding: 0;
color: #fff;
font-size: 1.4em;
text-decoration: none; }
#mf .m-links li a span {
display: inline;
padding: 0 1em;
border-left: 1px solid #fff; }
#mf .m-links li:first-child a span,
#mf .l-footer .m-lang li:first-child a span {
border: none; }
#mf .m-links li:last-child a span,
#mf .l-footer .m-lang li:last-child a span {
padding-right: 0px; }
#mf .m-links li.link-twitter a span {
padding-left: 0; }
#mf .m-links li a .gelicon {
display: inline;
font-size: 1.6em;
padding-right: 0.3em;
position: relative; }
#mf .m-links li a:hover,
#mf .m-links li a:active,
#mf .m-links li a:focus {
color: #a0e3f6; }
#mf .m-links .m-links-icons li a i {
background: url("/music/articles/staticarchive/da2300b3cf57aebe5339dceba6360a80f1f9dd60.svg");
background-position: 0px 0px;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
display: inline-block;
position: relative;
margin-right: 22px; }
#mf .m-links .m-links-icons li a i.link-facebook-icon {
background-position: 0px 0px; }
#mf .m-links .m-links-icons li a i.link-twitter-icon {
background-position: 48px 0px; }
#mf .m-links .m-links-icons li a i.link-instagram-icon {
background-position: 96px 0px; }
#mf .m-links .m-links-icons li a:hover i, #mf .m-links .m-links-icons li a:focus i, #mf .m-links .m-links-icons li a:active i {
background-position-y: 100%; }
#mf .m-links .m-links-icons li a:hover i.link-facebook-icon, #mf .m-links .m-links-icons li a:focus i.link-facebook-icon, #mf .m-links .m-links-icons li a:active i.link-facebook-icon {
background-position: 0px 100%; }
#mf .m-links .m-links-icons li a:hover i.link-twitter-icon, #mf .m-links .m-links-icons li a:focus i.link-twitter-icon, #mf .m-links .m-links-icons li a:active i.link-twitter-icon {
background-position: 48px 100%; }
#mf .m-links .m-links-icons li a:hover i.link-instagram-icon, #mf .m-links .m-links-icons li a:focus i.link-instagram-icon, #mf .m-links .m-links-icons li a:active i.link-instagram-icon {
background-position: 96px 100%; }
#mf.l-footer .m-lang {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
float: left; }
#mf.l-footer .m-lang li {
display: inline-block; }
#mf.l-footer .m-lang li a,
#mf.l-footer .m-lang li a:link,
#mf.l-footer .m-lang li a:visited {
display: block;
font-size: 1.4em;
padding: 1.2em 0;
text-decoration: none;
color: #fff; }
#mf.l-footer .m-lang li a span,
#mf.l-footer .m-lang li a:link span,
#mf.l-footer .m-lang li a:visited span {
border-left: 1px solid #fff;
display: block;
padding: 0 1em; }
#mf.l-footer .m-lang li a:hover,
#mf.l-footer .m-lang li a:focus,
#mf.l-footer .m-lang li a:active {
color: #a0e3f6; }
#mf.l-footer .m-lang li:first-child a span {
border: none;
padding-left: 0px; }
.visually-hidden {
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
height: 1px;
overflow: hidden;
position: absolute;
width: 1px; }
/*
* Importing CSS for breakpoints
*/
/**
* _320
*
* Styles for screens greater than 320px wide
*/
@media (min-width: 20em) {
/*
------------------------------
Header
------------------------------
*/
#mn-hdr .mn-hdr-filter {
margin: -8px -8px 0 -8px; }
#mf .m-links {
width: 100%;
padding-left: 0; }
#mf .m-links .m-links-text {
display: block; }
#mf .m-links .m-links-text li:first-child a span {
padding-left: 0; } }
/**
* _400
*
* Styles for screens greater than 400px wide
*/
@media (min-width: 25em) {
#mn #mn-top-bar #mn-menu-button {
right: 106px !important; }
#mn #mn-top-bar #mn-menu-mymusic-button {
right: 16px !important; }
#mn #mn-top-bar .mn-logo {
margin-top: 11px;
width: 13.2em;
height: 3.3em; }
/*
------------------------------
Header
------------------------------
*/
#mn-hdr h1 {
margin: 12px 8px 8px 0; }
/*
------------------------------
Footer
------------------------------
*/
#mf .m-links {
width: 100%;
padding-left: 0; }
#mf .m-links .m-links-icons {
float: left; }
#mf .m-links .m-links-text {
float: right;
display: inline-block; } }
/**
* _600
*
* Styles for smaller devices like tablets
*/
@media (min-width: 37.5em) {
#mn.mn-search-is-open #mn-top-bar .mn-logo {
margin-top: 11px; }
#mn.mn-profile-music_search.mn-search-is-open #mn-top-bar .mn-logo {
margin-top: -39px; }
#mn #mn-drawer .mn-panel-wrapper nav.panel.mn-mymusic ul li {
float: left; }
#mn-mobile-menu-checkbox:checked ~ #mn #mn-top-bar nav#mn-top-bar-links {
margin-top: 0; }
#mdn a {
display: inline; }
/*
------------------------------
Header
------------------------------
*/
#mn-hdr h1 {
margin: 12px 8px 12px 0;
font-size: 24px; }
#mn-hdr .mn-hdr-filter {
display: inline-block;
width: 345px;
margin: 0px 4px; }
/*
------------------------------
Footer
------------------------------
*/
#mf .m-lang {
width: 100%; } }
/**
* _800
*
* Styles for screens greater than 800px wide
*/
@media (min-width: 50em) {
#mn {
/* Top Bar */
/* Drawer */
/* Language specific spacing */ }
#mn #mn-top-bar {
position: relative;
height: 64px; }
#mn #mn-top-bar .mn-flex-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
position: relative; }
#mn #mn-top-bar .mn-logo {
margin-top: 1.6em;
float: left; }
#mn #mn-top-bar #mn-menu-button, #mn #mn-top-bar #mn-menu-mymusic-button {
display: none !important; }
#mn #mn-top-bar nav#mn-top-bar-links {
display: block;
max-width: 580px;
margin: 0;
padding: 0;
background: none;
float: right;
width: auto; }
#mn #mn-top-bar nav#mn-top-bar-links ul {
margin: 0;
padding: 0; }
#mn #mn-top-bar nav#mn-top-bar-links ul li {
list-style: none;
float: left;
border-bottom: none;
padding: 14px 0; }
#mn #mn-top-bar nav#mn-top-bar-links ul li label, #mn #mn-top-bar nav#mn-top-bar-links ul li button {
background: none;
border: none;
margin: 0;
padding: 8px 5px;
display: block;
color: #fff;
font-family: 'Arial', sans-serif;
font-size: 15px;
line-height: 18px;
text-decoration: none;
text-align: center;
overflow: hidden;
z-index: 1;
position: relative;
cursor: pointer;
border-top: 1px solid transparent; }
#mn #mn-top-bar nav#mn-top-bar-links ul li label .mn-down-triangle, #mn #mn-top-bar nav#mn-top-bar-links ul li button .mn-down-triangle {
height: 3px;
width: 7px;
background: url("/music/articles/staticarchive/5da07ba78e828da00f249f17ea0337c85c64d7c2.png");
background-position: 7px 0;
display: inline-block;
vertical-align: middle; }
#mn #mn-top-bar nav#mn-top-bar-links ul li label:hover, #mn #mn-top-bar nav#mn-top-bar-links ul li label:active, #mn #mn-top-bar nav#mn-top-bar-links ul li label:focus, #mn #mn-top-bar nav#mn-top-bar-links ul li button:hover, #mn #mn-top-bar nav#mn-top-bar-links ul li button:active, #mn #mn-top-bar nav#mn-top-bar-links ul li button:focus {
color: #a0e3f6; }
#mn #mn-top-bar nav#mn-top-bar-links ul li label:hover .mn-down-triangle, #mn #mn-top-bar nav#mn-top-bar-links ul li label:active .mn-down-triangle, #mn #mn-top-bar nav#mn-top-bar-links ul li label:focus .mn-down-triangle, #mn #mn-top-bar nav#mn-top-bar-links ul li button:hover .mn-down-triangle, #mn #mn-top-bar nav#mn-top-bar-links ul li button:active .mn-down-triangle, #mn #mn-top-bar nav#mn-top-bar-links ul li button:focus .mn-down-triangle {
background-position: 0px 0; }
#mn #mn-top-bar nav#mn-top-bar-links ul li label:focus, #mn #mn-top-bar nav#mn-top-bar-links ul li button:focus {
outline: dotted 1px #fff; }
#mn #mn-top-bar nav#mn-top-bar-links ul li label:active, #mn #mn-top-bar nav#mn-top-bar-links ul li button:active {
outline: none; }
#mn #mn-top-bar nav#mn-top-bar-links ul li label.highlightedLinkItem, #mn #mn-top-bar nav#mn-top-bar-links ul li button.highlightedLinkItem {
border: 1px solid #666666;
margin-left: 2px; }
#mn #mn-top-bar nav#mn-top-bar-links ul li label.highlightedLinkItem .mn-down-triangle, #mn #mn-top-bar nav#mn-top-bar-links ul li button.highlightedLinkItem .mn-down-triangle {
display: none; }
#mn #mn-top-bar nav#mn-top-bar-links ul li label.highlightedLinkItem:hover, #mn #mn-top-bar nav#mn-top-bar-links ul li label.highlightedLinkItem:active, #mn #mn-top-bar nav#mn-top-bar-links ul li label.highlightedLinkItem:focus, #mn #mn-top-bar nav#mn-top-bar-links ul li button.highlightedLinkItem:hover, #mn #mn-top-bar nav#mn-top-bar-links ul li button.highlightedLinkItem:active, #mn #mn-top-bar nav#mn-top-bar-links ul li button.highlightedLinkItem:focus {
color: #a0e3f6;
background: #4a4a4a; }
#mn #mn-top-bar nav#mn-top-bar-links ul li.mn-active label, #mn #mn-top-bar nav#mn-top-bar-links ul li.mn-active button {
color: #a0e3f6; }
#mn #mn-top-bar nav#mn-top-bar-links ul li.mn-active label .mn-down-triangle, #mn #mn-top-bar nav#mn-top-bar-links ul li.mn-active button .mn-down-triangle {
background-position: 0px 0; }
#mn #mn-top-bar nav#mn-top-bar-links ul li#mn_ab_test_options.mn_ab_test_options_active {
display: block; }
#mn #mn-top-bar nav#mn-top-bar-links ul li#mn_ab_test_options.mn_ab_test_options_active label {
color: #a0e3f6;
display: block; }
#mn #mn-top-bar nav#mn-top-bar-links ul li#mn_ab_test_options label.mn_ab_test_option {
display: none; }
#mn #mn-top-bar nav#mn-top-bar-links ul li#mn_ab_test_options.ab_option_active_clips label#mn_ab_clips {
display: block; }
#mn #mn-top-bar nav#mn-top-bar-links ul li#mn_ab_test_options.ab_option_active_watch_and_listen label#mn_ab_watchandlisten {
display: block; }
#mn #mn-top-bar nav#mn-top-bar-links ul li#mn_ab_test_options.ab_option_active_sessions label#mn_ab_sessions {
display: block; }
#mn.mn-profile-music_search #mn-top-bar {
height: 64px; }
#mn.mn-profile-music_search #mn-top-bar .mn-logo {
margin-top: 1.6em; }
#mn.mn-search-is-open #mn-top-bar .mn-logo {
margin-top: 1.6em; }
#mn.mn-profile-music_search.mn-search-is-open #mn-top-bar .mn-logo {
margin-top: 1.6em; }
#mn #mn-drawer {
display: block;
max-height: none;
/* Drawer itself is now shown, but panels inside hidden using max-height:0; until shown as a result of checked radio button */
background: #232323; }
#mn #mn-drawer .mn-panel-wrapper {
margin: 0 auto;
/* CSS Animation for fading in drawer panels and animating the height simultaneously */ }
#mn #mn-drawer .mn-panel-wrapper nav.panel {
display: block;
max-height: 0;
overflow: hidden;
/* Hide the H3s */ }
#mn #mn-drawer .mn-panel-wrapper nav.panel h3 {
position: absolute;
top: -1000em; }
#mn #mn-drawer .mn-panel-wrapper nav.panel ul {
background: #232323;
border-bottom: none;
padding-top: 16px;
padding-bottom: 16px;
margin: 0 auto; }
#mn #mn-drawer .mn-panel-wrapper nav.panel ul li {
padding-top: 5px;
padding-bottom: 5px; }
#mn #mn-drawer .mn-panel-wrapper nav.panel ul li a {
line-height: 22px; }
#mn #mn-drawer .mn-panel-wrapper input[type=radio]:checked ~ nav.panel {
max-height: 1000px;
transition: max-height 2s;
-webkit-transition: max-height 2s;
-moz-transition: max-height 2s;
-ms-transition: max-height 2s;
-o-transition: max-height 2s; }
#mn #mn-drawer .mn-panel-wrapper.mn-more nav.panel ul li {
width: 25%; }
#mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul, #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul, #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul {
margin-left: 0;
margin-right: 0;
padding-right: -4px; }
#mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul li label, #mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul li button, #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul li label, #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul li button, #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul li label, #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul li button {
padding: 8px 2px; }
#mn.mn-language-cy.mn-profile-music_search #mn-top-bar nav#mn-top-bar-links ul, #mn.mn-language-ga.mn-profile-music_search #mn-top-bar nav#mn-top-bar-links ul, #mn.mn-language-gd.mn-profile-music_search #mn-top-bar nav#mn-top-bar-links ul {
margin-left: 8px; }
#mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul label.mn-audiovideo, #mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul button.mn-audiovideo {
width: 70px;
margin-top: -10px; }
#mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul label.mn-playlists, #mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul button.mn-playlists {
width: 80px;
margin-top: -10px; }
#mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul label.mn-audiovideo, #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul button.mn-audiovideo {
width: 74px;
margin-top: -10px; }
#mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul label.mn-playlists, #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul button.mn-playlists {
width: 94px; }
#mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul li label, #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul li button {
padding: 8px 0px; }
#mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul li label, #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul li button {
padding: 8px 0px; }
#mf .m-links {
float: right; }
/* Mobile Checkbox Is Checked */
#mn-mobile-menu-checkbox:checked {
/* Cancel Out Faded Main Content */ }
#mn-mobile-menu-checkbox:checked ~ #mn #mn-top-bar {
/* Menu Button Active State */ }
#mn-mobile-menu-checkbox:checked ~ #mn #mn-top-bar #mn-menu-button, #mn-mobile-menu-checkbox:checked ~ #mn #mn-top-bar #mn-menu-mymusic-button {
color: #a0e3f6;
height: 40px !important;
background-color: transparent; }
#mn-mobile-menu-checkbox:checked ~ * [class*='content'] {
opacity: 1.0; }
/* Styles to apply only when JS is enabled */
html.orb-js #mn {
/* Drawer */ }
html.orb-js #mn #mn-drawer {
height: 0px; }
html.orb-js #mn #mn-drawer .mn-panel-wrapper nav.panel {
display: none;
max-height: 1000px; }
html.orb-js #mn #mn-drawer .mn-panel-wrapper input[type=radio]:checked ~ nav.panel {
/* Disable CSS animation of panels when JS is turned on */
transition: none;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none; }
/*
------------------------------
Header
------------------------------
*/
#mn-hdr h1 {
display: inline-block;
color: #fff;
font-weight: normal;
vertical-align: top;
margin: 12px 8px 16px 0; }
#mn-hdr .mn-hdr-sort {
display: block;
float: right;
margin: 12px 0 0; }
/*
------------------------------
Footer
------------------------------
*/
#mf .m-lang {
width: auto; }
#mf .m-links {
width: auto; }
#mf .m-links .m-links-icons {
float: none; }
#mf .m-links .m-links-text {
float: none; } }
/**
* _1008
*
* Styles for screens greater than 1008px wide
*/
@media (min-width: 63em) {
#mn {
/* Language specific spacing */ }
#mn #mn-top-bar nav#mn-top-bar-links ul li {
padding-left: 8px;
padding-right: 0px; }
#mn #mn-top-bar nav#mn-top-bar-links ul li label, #mn #mn-top-bar nav#mn-top-bar-links ul li button {
padding: 8px 8px; }
#mn #mn-top-bar .mn-search-container {
padding-left: 16px; }
#mn .mn-panel-wrapper .panel ul {
padding-left: 0; }
#mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul, #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul, #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul {
margin: 0; }
#mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul li label.mn-audiovideo, #mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul li label.mn-playlists, #mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul li button.mn-audiovideo, #mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul li button.mn-playlists, #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul li label.mn-audiovideo, #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul li label.mn-playlists, #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul li button.mn-audiovideo, #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul li button.mn-playlists, #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul li label.mn-audiovideo, #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul li label.mn-playlists, #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul li button.mn-audiovideo, #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul li button.mn-playlists {
width: auto;
margin-top: 0px; }
/*
------------------------------
Header
------------------------------
*/
#mn-hdr .mn-hdr-filter {
display: inline-block;
width: 345px;
margin: 0px 4px; } }
/**
* _1280
*
* Styles for screens greater than 1280px wide
*/
@media (min-width: 80em) {
.b-pw-1280 #mn #mn-top-bar .mn-search-container {
padding: 0 32px 0 16px; }
.b-pw-1280 #mn #mn-top-bar nav#mn-top-bar-links {
max-width: 768px; }
.b-pw-1280 #mn #mn-top-bar nav#mn-top-bar-links ul li {
padding-left: 36px; }
.b-pw-1280 #mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul li, .b-pw-1280 #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul li, .b-pw-1280 #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul li {
padding-left: 32px; }
.b-pw-1280 #mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul li label, .b-pw-1280 #mn.mn-language-cy #mn-top-bar nav#mn-top-bar-links ul li button, .b-pw-1280 #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul li label, .b-pw-1280 #mn.mn-language-ga #mn-top-bar nav#mn-top-bar-links ul li button, .b-pw-1280 #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul li label, .b-pw-1280 #mn.mn-language-gd #mn-top-bar nav#mn-top-bar-links ul li button {
padding: 8px; } }