/*
******************************************************

  Designed and hand-coded
  by ideajunction.co.uk
  
  Converted to a Drupal theme by 
  David Whitchurch-Bennett, Drupology

******************************************************
  */


  /* Responsive overrides (default is 1220px, 4 columns) */

  /* Greater than 1520px (5 columns) */
  @media screen and (min-width:1520px) {
	aside { margin-top:40px; }
	aside.related { width:280px; }
	aside.comments { width:240px; }

    .nodes .width5,
    .nodes .width6 { width:1480px; } /*{ width:1780px; }*/

    section.primary-column .nodes .width3, /* three columns-span and... */
    section.primary-column .nodes .width4 { width:880px; } /* ....four columns-span only available at a wider widths */
    .video.width3 iframe,
    .video.width4 iframe { height:660px; }
    .container .row { width:1520px; }
    section.primary-column { width:880px; }

    div.row > header h1 { line-height:100px; }
    div.explore div.views-widget-filter-type div.form-item a { font-size:40px; line-height:70px; margin-left:10px; margin-right:10px; }
    /* @5x cols */
    .fullwidth.contains3 > ul > li { width:480px; } /* 1480-(20*2 columns) /3 */
    .fullwidth.contains4 > ul > li { width:355px; } /* 1480-(20*3 columns) /4 */

    /* Blurb node specifics 5 cols and wider */
    article.node-teaser-blurb.width5,
    article.node-teaser-blurb.width6 { min-height:500px; }
    article.node-teaser-blurb.width5 a img,
    article.node-teaser-blurb.width6 a img { width:980px; }
    article.node-teaser-blurb.width5 > div,
    article.node-teaser-blurb.width6 > div { margin:30px 60px 40px 1020px; width:400px; }
    article.node-teaser-blurb.width5 hgroup h2,
    article.node-teaser-blurb.width6 hgroup h2 { font-size:45px; line-height:42px; letter-spacing:-0.06em; }
  }


  /* Greater than 1820px (6 columns) */
  @media screen and (min-width:1820px) {
    .nodes .width6 { width:1780px; }

    section.primary-column .nodes .width4 { width:1180px; } /* four columns-span only available at this width */
    .video.width4 iframe { height:880px; }
    div.container .row { width:1820px; } /* for super-wide, don't widen footer and header */
    section.primary-column { width:1180px; }
    /* @6x cols */
    .fullwidth.contains3 > ul > li { width:580px; } /* 1780-(20*2 columns) /3 */
    .fullwidth.contains4 > ul > li { width:430px; } /* 1780-(20*3 columns) /4 */

	#block-views-hero-blurb-block { width:1480px; margin-left:auto; margin-right:auto; }
    /* Blurb node specifics 6 cols and wider // WIDEST OPTION FOR CAROUSEL REMOVED
    article.node-teaser-blurb.width6 .box-link { min-height:600px; }
    article.node-teaser-blurb.width6 a img { width:1280px; }
    article.node-teaser-blurb.width6 > div { margin:40px 60px 50px 1320px; width:410px; }
    article.node-teaser-blurb.width6 hgroup h2 { font-size:55px; line-height:50px; letter-spacing:-0.06em; } */
  }


  /* Less than 1220px (3 columns) */
  @media screen and (max-width:1220px) {
    .nodes .width3,
    .nodes .width4,
    .nodes .width5,
    .nodes .width6 { width:880px; }
    section.primary-column .nodes .width3,
    section.primary-column .nodes .width4 { width:580px; }

    nav li a { padding:0 14px; }
    .container .row { width:920px; }
    section.primary-column { width:580px; }

    div.row > header h1 { font-size:65px; line-height:65px; }
    div.explore div.views-widget-filter-type div.form-item a { font-size:23px; line-height:50px; padding:0 15px; margin:0 1px; }

    .fullwidth.contains3 > ul > li { width:280px; } /* 880-(20*2 columns) /3 */
    .fullwidth.contains4 > ul > li { width:205px; } /* 880-(20*3 columns) /4 */

    /* Blurb nodes 4 cols and wider generic overrides */
    /* ...for 3 cols and less these are overridden again back to their previous settings */
    article.node-teaser-blurb.width4,
    article.node-teaser-blurb.width5,
    article.node-teaser-blurb.width6 { min-height:auto; }

    article.node-teaser-blurb.width4 a.image-wrap,
    article.node-teaser-blurb.width5 a.image-wrap,
    article.node-teaser-blurb.width6 a.image-wrap { float:none; position:static; width:auto; }
    
    article.node-teaser-blurb.width4 a.image-wrap img,
    article.node-teaser-blurb.width5 a.image-wrap img,
    article.node-teaser-blurb.width6 a.image-wrap img {
      -webkit-border-top-right-radius:10px;
         -moz-border-radius-topright: 10px;
              border-top-right-radius:10px;
      -webkit-border-bottom-left-radius:0px;
         -moz-border-radius-bottomleft: 0px;
              border-bottom-left-radius:0px;
    }

    article.node-teaser-blurb.width4 div.blurb,
    article.node-teaser-blurb.width5 div.blurb,
    article.node-teaser-blurb.width6 div.blurb { padding-right:0px; }

    div.store-flags .button { margin-top:5px; }
    /*div.store-flags .button span { display:none; }*/
 
    /* Blurb nodes 3 cols and narrower */
    article.node-teaser-blurb.width3 > div,
    article.node-teaser-blurb.width4 > div,
    article.node-teaser-blurb.width5 > div,
    article.node-teaser-blurb.width6 > div { margin:12px 150px 25px; width:auto; }
    article.node-teaser-blurb.width3 hgroup h2,
    article.node-teaser-blurb.width4 hgroup h2,
    article.node-teaser-blurb.width5 hgroup h2,
    article.node-teaser-blurb.width6 hgroup h2 { font-size:35px; line-height:35px; letter-spacing:-0.06em; }
    article.node-teaser-blurb.width4 a img,
    article.node-teaser-blurb.width5 a img,
    article.node-teaser-blurb.width6 a img { width:100%; }
    
    /* Hero Slideshow */
    .views-slideshow-iosslider-main-frame-row article{ width:880px; }

	/* Make the search input narrower to accomodate more nav items */
	header #block-views-exp-search-page-1 input { width:128px; }
	header nav.secondary { right:170px; }
  }

  /* Less than 920px (2 columns) */
  @media screen and (max-width:920px) {
	/* Revert width of the search input */
	header #block-views-exp-search-page-1 input { width:178px; }

    .nodes .width3,
    .nodes .width4,
    .nodes .width5,
    .nodes .width6,
    section.primary-column .nodes .width3,
    section.primary-column .nodes .width4 { width:580px; }

    nav li a { padding:0 12px; }
    .container .row { width:620px; }
    aside.comments { width:280px; margin-left:0; padding-left:20px; }
    aside.comments,
    aside.related { margin-top:-20px; }
    /* hide the music link */
    header.container nav { background:#fff url('../logo/the_beatles_logo.svg') no-repeat center left; height:20px; padding:30px 0 30px 110px; margin-left:20px; width:190px; float:left; }
    header.container nav ul.links.inline { display:none; }
    nav select { display:block; }
    header.container nav.secondary { display:none; }

    aside.comments h2 { margin-top:0px; }
    section.group-box { /* this matches all border radii as they appear close with this layout */
      -webkit-border-bottom-right-radius:10px;
         -moz-border-radius-bottomright: 10px;
              border-bottom-right-radius:10px;
      -webkit-border-bottom-left-radius: 10px;
         -moz-border-radius-bottomleft:  10px;
              border-bottom-left-radius: 10px;
    }

    /* @2x cols */
    .fullwidth.contains3 > ul > li { width:180px; } /* 580-(20*2 columns) /3 */
    /* .fullwidth.contains4 > ul > li { width:130px;/* 580-(20*3 columns) /4 ...overridden with the following... */
    .fullwidth.contains4 > ul > li { width:280px; margin:10px 20px 5px 0; }

    /* Blurb nodes 2 cols and narrower */
    article.node-teaser-blurb.width3 > div,
    article.node-teaser-blurb.width4 > div,
    article.node-teaser-blurb.width5 > div,
    article.node-teaser-blurb.width6 > div { margin:12px 50px 20px; }
    article.node-teaser-blurb.width3 hgroup h2,
    article.node-teaser-blurb.width4 hgroup h2,
    article.node-teaser-blurb.width5 hgroup h2,
    article.node-teaser-blurb.width6 hgroup h2 { font-size:22px; line-height:22px; letter-spacing:0; }
    
    /* Hero Slideshow */
    .views-slideshow-iosslider-main-frame-row article{ width:580px; }
  }


  /* Less than 620px (1 column) */
  @media screen and (max-width:620px) {
    .nodes .width2,
    .nodes .width3,
    .nodes .width4,
    .nodes .width5,
    .nodes .width6,
    section.primary-column .nodes .width2,
    section.primary-column .nodes .width3,
    section.primary-column .nodes .width4 { width:280px; }

    .video.width2 iframe,
    .video.width3 iframe,
    .video.width4 iframe { height:220px; }

    .container .row { width:320px; }
    aside.related { margin-top:0px; }
    section.primary-column { width:280px; }

    div.search, #edit-title-wrapper { display:none; }
    article > header hgroup h1 { padding:0 0 32px 0; }
    section.community article > header hgroup h1 { padding-bottom:0; }
    header.container nav {  width:170px; }
    header.container nav ul { display:none; }

    div.explore div.views-exposed-form { margin: 0 -25px; }
    div.explore header h1 { font-size:40px; line-height:30px; }
    div.explore div.views-widget-filter-type div.form-item a { font-size:22px; line-height:40px; padding:0 10px; }
    div.explore div.views-widget-sort-by,
	div.explore div.views-widget-sort-order { display:none; }

    section.store header { margin-bottom:36px; }
    section.store header div.options { bottom:-31px; }
    section.store.uk header div.options a.uk .flag,
    section.store.us header div.options a.us .flag,
    section.store.jp header div.options a.jp .flag { display:none; }

    footer div.row { background:#fff; }
    footer p.copy span { display:none; }

    /* @1x cols */
    /* .fullwidth.contains3 > ul > li { width:80px; } /* 280-(20*2 columns) /3  ...overridden with the following... */
    .fullwidth.contains3 > ul > li { width:280px; margin-bottom:20px; } 
    /* .fullwidth.contains4 > ul > li { width:55px; } /* 280-(20*3 columns) /4 ...overridden with the following... */
    .fullwidth.contains4 > ul > li { width:280px; margin:4px 0; }

    div.store-flags { margin-bottom:15px; }
    div.store-flags .button { margin-bottom:5px; }
    div.store-flags .button span { display:inline; }

    /* Blurb nodes 1 col */
    article.node-teaser-blurb.width2 > div,
    article.node-teaser-blurb.width3 > div,
    article.node-teaser-blurb.width4 > div,
    article.node-teaser-blurb.width5 > div,
    article.node-teaser-blurb.width6 > div { margin:12px 20px 20px; }
    .nodes .node-teaser-blurb.width1 a.button { font-size:13px; padding:3px 15px 3px; margin:5px 0 -10px; }
    
    /* Hero Slideshow */
    .views-slideshow-iosslider-main-frame-row article{ width:280px; }
  }



  /* Responsive animation! */
  .container .row,
  section.primary-column,
  aside,
  .fullwidth > ul > li {
    -webkit-transition:width 0.8s;
       -moz-transition:width 0.8s;
         -o-transition:width 0.8s;
            transition:width 0.8s;
  }



	#ccc-icon button { zoom:50%; }
	#ccc-state .ccc-widget { left:15px; }