/* This file will hold styles that are loaded using the same media query as the NARROW grid. */ /********* NARROW **********/ /*-------------------------- ELEMENT SWITCHING BY SIZE .omega-[size]-up : style applies to [size] and larger formats .omega-[size]-only : style applies only the [size] format --------------------------*/ .omega-mobile-only { display:none !important; } .omega-narrow-up, .omega-narrow-only { display:block !important; } /*==========================================!!! LAYOUT !!!============================================*/ /* Negate grid margin - using to override omega grid */ #page .container-12 { width: 740px; } #page .container-12 .grid-12 { margin-left: 0px; margin-right: 0px; width: 740px; } #page .container-12 .grid-8 { width: 520px; } /*------------------------------------- NEWS PAGE, LEGACY PAGE, COMMUNITY PAGE ------------------------------------*/ body.context-news #section-header, body.page-live #section-header, body.node-type-user-group #section-header { height: 315px; } body.context-news .region-branding-inner, body.page-live .region-branding-inner, body.node-type-user-group .region-branding-inner { position: absolute; top: 100px; left: 0; } /* LOGO */ a#fantorrent-logo-link { width: 340px; padding-top: 100px; } /*------------------------------------------------------- --------------------------------------------------------- FOOTER --------------------------------------------------------- -------------------------------------------------------*/ .responsive-layout-narrow .home-page-updates { bottom: 70px; } .responsive-layout-narrow .copyright { font-size: 10px; line-height: 12px; display: inline-block; margin-right: 10px; } .responsive-layout-narrow #region-footer-1 { width: 70%; margin: 0; } .responsive-layout-narrow #region-footer-2 { width: 30%; margin: 0; } /*==========================================!!! NAVIGATION !!!============================================*/ /*----------------------------------------------------- ------------------------------------------------------- MAIN NAVIGATION ------------------------------------------------------- -----------------------------------------------------*/ .front #zone-menu-wrapper { top: 155px; } #block-superfish-1 ul#superfish-1 { height: 37px; } #block-superfish-1 ul li a { padding: 4px 9px 3px 9px; } /* home navigation button */ #block-superfish-1 ul li#menu-583-1 a.main-nav { padding: 37px 1px 0; position: relative; width: 34px; } #block-superfish-1 ul li#menu-583-1 a:before { font-size: 16px; left: 9px; line-height: 37px; top: -2px; } /*---------------------------------- Sub navigation - Main menu -----------------------------------*/ .responsive-layout-narrow #block-superfish-1 ul ul { margin-top: 3px; } #block-superfish-1 ul li li a { padding: 8px; } /* Specific SubNav ul positioning & width (per main nav item ID) */ .responsive-layout-narrow li#menu-4749-1 ul { /* the band */ margin-left: 0px; } .responsive-layout-narrow li#menu-1247-1 ul { /* community */ margin-left: -187px; } .responsive-layout-narrow li#menu-899-1 ul { /* store */ margin-left: -453px; } /* HOME PAGE ONLY subnav ul positioning */ .front.responsive-layout-narrow #block-superfish-1 ul ul { margin-top: -37px; } .front.responsive-layout-narrow li#menu-4749-1 ul { /* the band */ margin-left: 100%; } .front.responsive-layout-narrow li#menu-1247-1 ul { /* community */ margin-left: 100%; } .front.responsive-layout-narrow li#menu-899-1 ul { /* store */ margin-left: 100%; } /*--------------------------------------------- SUB navigation - under h1 title in zone-content ----------------------------------------------*/ .responsive-layout-narrow #zone-content .menu-block-wrapper ul.menu li { margin-right: 5px; padding-right: 5px; } .responsive-layout-narrow #zone-content .menu-block-wrapper a { padding: 7px 5px 5px 5px; } /*==========================================!!! ARTICLES !!!============================================*/ /*----------------------------------------------------- ------------------------------------------------------- ARTICLE NODE ------------------------------------------------------- -----------------------------------------------------*/ /*---------------------------------- ARTICLE GALLERY ----------------------------------*/ /* allows for 3 thumbnails across the row */ .responsive-layout-narrow.node-type-article .photo-row { width: 31%; height: auto; margin: 0 2% 2% 0; } /* hide images in list items in sidebar news block */ .region-sidebar-second #block-views-articles-sidebar-list .image { display: none; } .region-sidebar-second #block-views-articles-sidebar-list .title { margin-left: 0; } /*==========================================!!! TOUR !!!============================================*/ /*----------------------------------------------------- ------------------------------------------------------- TOUR - EVENTS - Teaser List ------------------------------------------------------- -----------------------------------------------------*/ /* event popup TRIGGER link */ .responsive-layout-narrow a.popup-link-item { font-size: 12px; padding: 8px 6px; } /*------------------------------------- POPUP WINDOW - event details -------------------------------------*/ /* Containers */ .responsive-layout-narrow.page-tour .popup-main-content { margin-left: 20px; } .page-tour #views-popup-wrapper:before { left: 6px; top: 26px; } /* buy tickets buttons */ .responsive-layout-narrow #views-popup-wrapper .event-purchase-link-container li { width: 43%; } .responsive-layout-narrow .event-purchase-link-container li a { font-size: 11px; padding: 7px; } /*==========================================!!! LEGACY !!!============================================*/ /*--------------------------------------------------------------------- ----------------------------------------------------------------------- LEGACY - LIST of all dates ----------------------------------------------------------------------- ---------------------------------------------------------------------*/ /*-------- Available content Icons - trait links ---------*/ .legacy-trait-links { position: relative; } /*----------------------------------------------------- ------------------------------------------------------- LEGACY - Archived Event - Node ------------------------------------------------------- ------------------------------------------------------*/ /*---------- PAGER - Previous / Next ----------*/ .responsive-layout-narrow span.node-pager-text { display: none; } .responsive-layout-narrow span.node-pager-date { display: none; } /* Official photos and videos grid */ .official-photos-container .attachment, .meetgreet-photos-container .attachment { width: 338px; overflow: hidden; } .official-photos-container ul.teaser-grid li, .meetgreet-photos-container ul.teaser-grid li { width: 106px; height: auto; } /*--------------------------------------------------------------------- ----------------------------------------------------------------------- LEGACY - List of TOUR GROUPS ----------------------------------------------------------------------- ---------------------------------------------------------------------*/ .responsive-layout-narrow.page-legacy .event-group-poster-art-item { height: 230px; } /*==========================================!!! MUSIC !!!============================================*/ /*---------------------------------------------------- ------------------------------------------------------ DISCOGRAPHY - Teaser List ------------------------------------------------------ -----------------------------------------------------*/ .page-music-albums .album-art-container { max-width: 100%; } .page-music-albums .song-list-title { display: inline-block; vertical-align: top; width: 80%; } /*---------------------------------------------------- ------------------------------------------------------ ALBUM - node ------------------------------------------------------ -----------------------------------------------------*/ /*-------------------------------- TRACK LIST ---------------------------------*/ .responsive-layout-narrow.node-type-album .song-list-container { margin-right: 0; width: 64%; } /* give min-height to albums with few tracks so that in narrow layout the absolute positioned buy buttons clear the purchase options section. */ .page-node-2978.responsive-layout-narrow.node-type-album .song-list-container { min-height: 500px; /* lost interview tapes vol one */ } /* IF IT'S A SINGLE (not full album) THEN BUY LINKS NEED TO BE DIFFERENT - ADD node id to css below */ .responsive-layout-narrow.node-type-album .album-node-NUMBER #album-links-container { position: relative; top: 0; left: 0; width: auto; clear: both; } .responsive-layout-narrow.node-type-album .album-node-NUMBER .album-offsite-purchase-links .field-item { float: left; margin-right: 10px; } /*----------------- album buy links -------------------*/ .responsive-layout-narrow.node-type-album #album-links-container { width: 33%; position: absolute; top: 300px; } /*---------------------------------- ALBUM DETAILS - INFO ----------------------------------*/ /*------- Album Info body -------*/ .responsive-layout-narrow.node-type-album #album-body-container { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } /*---------------------------------- REVIEWS -----------------------------------*/ .responsive-layout-narrow.node-type-album .album-review-more-link { font-size: 14px; } .responsive-layout-narrow.node-type-album .album-review-more-link a { padding: 0 4px; } /*----------------------------------------------------- ------------------------------------------------------- SONG NODE ------------------------------------------------------- -------------------------------------------------------*/ .responsive-layout-narrow .song-albums .view-content ul li /* albums appears on */, .responsive-layout-narrow .song-images div.items-list div.field-item /* single art */ { margin-right: 5px; } .responsive-layout-narrow.node-type-song .node-column1-container, .responsive-layout-narrow.node-type-song .node-column2-container { float: none; width: auto; border-right: 0; padding-right: 0; margin-right: 0; } /*========================================!!! COMMUNITY !!!============================================*/ /*------------------------------------------------------ -------------------------------------------------------- COMMUNITY COMMENTS -------------------------------------------------------- ------------------------------------------------------*/ /* add a comment button */ .responsive-layout-narrow .community-sidebar-container .community-post-comment-link-wrapper { width: 34px; } .responsive-layout-narrow .community-sidebar-container .community-post-comment-link-wrapper a { height: 0; overflow: hidden; padding: 24px 5px 2px 25px; width: 0; } /*------------------------------------------------------ -------------------------------------------------------- COMMUNITY SIDEBAR -------------------------------------------------------- -------------------------------------------------------*/ .responsive-layout-narrow #region-sidebar-second .view-community-users .teaser-grid-row { margin: 0 7px 7px 0; width: 55px; height: 55px; } /*==========================================!!! STORE !!!============================================*/ /*------------------------------------------------------ -------------------------------------------------------- STORE - landing -------------------------------------------------------- -------------------------------------------------------*/ /* -----------Department Navigation ----------*/ #views-exposed-form-store-landing-page .views-exposed-form label.option { font-size: 12px; } /*------------------------------------------------------ -------------------------------------------------------- RELATED PRODUCTS -------------------------------------------------------- -------------------------------------------------------*/ .related-products-grid li.teaser-grid-row, .view-cart-upsell > li.teaser-grid-row { height: 196px; margin: 0 2% 2% 0; width: 160px; } .responsive-layout-narrow .related-products-grid .views-field-title, .responsive-layout-narrow.page-tour .related_prod_popup-main-content .views-field-title { font-size: 13px; height: auto; line-height: 15px; text-align: center; padding: 5% 5% 0 5%; } /*==========================================!!! SPECIFIC PAGES !!!============================================*/ /*--------------------------------------------------------------------- ----------------------------------------------------------------------- BIO page ----------------------------------------------------------------------- ---------------------------------------------------------------------*/ .responsive-layout-narrow #full-band-bio h1 { display: block; } .responsive-layout-narrow .photo-container { height: 500px; }