/**
 *
 * Author(s): James Morris
 *
 * MOBILE DEVICES - MEDIA QUERIES
 *
 */

@import '../variables.less';
@import '../core-mixins.less';
@import '../site-mixins.less';
@import '../grid.less';

/**
 *  CONTENTS
 *  $RESPONSIVE WIDE...................Only shown on 'mobile' breakpoints but all of them
 *    $Flyout menus....................
 *    $Making Flash object responsive
 *  $PRE TABLET SMOOTHING..............1100px Ease things when it gets narrow
 *    $No sticky header................Removes fixed header on < desktop
 *    $Flyout menus....................
 *    $Header..........................
 *  $TABLETS...........................1024px Tablets proper starts here
 *  $PORTRAIT TABLETS...................768px Portrait tablets
 *  $MOBILES...........................500px mobiles large and small
 */


/* $RESPONSIVE WIDE */
header.page-header .logo a.rect {
  display: none;
}

html, * {
  /* Prevent font scaling on iOS */
  -webkit-text-size-adjust: none;
}

/* $Making Flash object responsive */
object {
  width: 100%;
}

.container-slideshowpro {
  max-width: 100%;

  img {
    max-width: 100%;
    height: auto!important;
  }
}

/* Hide the responsive share bar */
.share-bar-responsive {
  display: none;
}

/* $Flyout menus */
.oxweb-academic-divisions,
.oxweb-college-websites {
  display: block;
}

.hamburger-wrapper {
  position: absolute;
  right: 0;
  top: -15px;
  border-left: 1px solid fadeout(@colorWhite, 93%);
  &.menu-open {
    .hamburger-btn {
      .opacity(100);
    }
  }
  .hamburger-btn {
    .hidden();
    .opacity(80);
    width: 42px;
    height: 42px;
    background: url('../../images/whopper.png') no-repeat center center @colorPrimary;
    display: block;
    float: right;
    &:hover {
      .opacity(100);
    }
  }
}

.hamburger-menu,
.in-section-menu {
  .main-menu-styles();
  .hamburger-menu-styles();
  background: @colorPrimary;
  .clearfix();
  .contextual-links {
    display: none;
  }
  nav.oxweb-secondary-menu-block,
  nav.oxweb-primary-menu-block {
    display: block;
    ul li {
      border-right: none;
    }
  }
  nav.oxweb-primary-menu-block {
    width: 100%;
    font-size: @sizeMS;
    line-height: @lineHeightHeading;
  }
  .homepage-role-base-menu {
    display: block;
    width: 100%;
    ul {
      border-top: 1px solid @colorWhiteT007;
      background-color: @colorDarkBlue;
      li {
        float: left;
        width: 50%;
        border-top: none;
        border-bottom: 1px solid @colorWhiteT007;
        .border-box();
        &.odd {
          border-right: 1px solid @colorWhiteT007;
        }
        a {
          font-size: @sizeS;
          text-transform: none;
        }
      }
    }
  }
  a.main-menu-item {
    h2 {
      border-bottom: 1px solid @colorWhiteT007;
      &:first-child {
        border-right: 1px solid @colorWhiteT007;
      }
    }
  }
  a.main-menu-item + a.main-menu-item {
    h2 {
      border-right: none;
    }
  }
}

.hamburger-menu {
  display: none;
  position: absolute;
  z-index: 502;
  width: 100%;
  .box-shadow(0 5px 5px @colorT50Black);
}

.in-section-menu {
  background-color: @colorDarkBlue;
  h2.title {
    display: block;
    background-image: none;
    background-color: @colorDarkBlue;
    font-size: @sizeL;
    padding: 0;
    position: relative;
    min-height: 54px;
    a {
      display: block;
      padding: 0.75em;
    }
    .toggle {
      position: absolute;
      z-index: 2;
      content: "";
      display: block;
      width: 51px;
      height: 54px;
      top: 0px;
      right: 0;
      background: url('../../images/mobile_arrows.png') 50% -4.5em no-repeat @colorWashedOutBlue;
      &:hover {
        background-color: @colorLink;
        cursor: pointer;
      }
      &.open {
          background: url('../../images/mobile_arrows.png') 50% -1.75em no-repeat @colorWashedOutBlue;
      }
    }
  }
  ul {
    display: none;
    li {
      border-top: 1px solid @colorWhiteT007;
    }
  }
}

/* $PRE TABLET SMOOTHING */
@media only screen and (max-width: @preTabletSmoothingMax) {

  .node-type-gateway-pad {
    .page-content-level {
      background-position: center 0px;
      /* ios ignores 'background-attachment: fixed' so this ensures its the same for all mobile devices */
      background-attachment: scroll;
      background-size: auto;
      min-height: 100%;
      min-width: 100%;
    }

    .field-name-field-primary-content {
      .link-block {
        height: 13em;
      }
    }
  }

  /* Key dates (Editorial class) tablet in sidebar to be reduced */
  .key-dates {
    /* This class is used for narrow sidebars */
    &.small {
      thead tr td {
        font-size: inherit;
      }
      td {
        font-size: 0.9em;
        padding: 0.55em 0.6em 0.5em 0;
        &:last-child {
          padding-right: 0;
        }
      }
    }
  }


  /* 4 per row on the video wall */
  body.node-type-video-wall.page-node {
    .tab-wrapper ul.video-list {
      li {
        width: 25%;
      }
    }
  }
  /* 3 per row on the video wall if it has a sidebar */
  body.node-type-video-wall.one-sidebar .tab-wrapper ul.video-list li {
    width: 33.333333%;
  }

  .site-header-bottom ul li.last ul {
    right: 0;
  }
  /* $Section index - layout */
  .node-type-section-index .row .main-content,
  .node-type-section-index .row .page-content-sidebar-first,
  .node-type-section-index .row .page-content-sidebar-second  {
    .block-menu-block {
      padding: 0;
    }
  }
  .node-type-section-index .row .main-content {
    .field-name-field-section-primary .node-section-highlight,
    .view-oxweb-section-highlights .highlight-group .node-section-highlight {
      a.link-block {
        padding: 0.8em 1.2em;
        .box-sizing(border-box);
      }
      &:hover {
        img {
          .opacity(100);
        }
        h2 {
          color: @colorBlack;
        }
      }
    }
  }

  .block-oxweb-search {
    right: 46px;
    z-index: 2;
    input[type=submit] {
      background-image: url('../../images/search-icon-blue.png');
    }
    input[type=text] {
      .border-radius(3px);
    }
  }
  .oxweb-primary-menu-block {
    display: none;
    .transition(display 0.2s);
  }
  /* $No sticky headers */
  body.sticky-header-collapsed .page-header {
    position: absolute;
  }

  /* $Flyout menus */
  .oxweb-academic-divisions,
  .oxweb-college-websites {
    display: none;
  }

  /* Active trail arrow */
  .site-header-bottom {
    ul li a {
      &.active-trail {
        background-position: right 15px top -226px;
      }
    }
  }

  /* $Header */

  .root-menus {
    header.page-header .site-header-bottom {
      top: 25px;
    }
  }

  header.page-header {
    .page-header-row {
      padding: @gutter_width;
      min-height: initial;
    }
    .logo {
      a.square {
        display: block;
        width: 100px;
        height: 100px;
        background-size: 100% 100%;
      }
    }
    .site-header-bottom {
      bottom: 14px;
      margin-left: 100px;
      .oxweb-secondary-menu-block.homepage-oxweb-secondary-menu {
        bottom: 12px;
      }
      h2.title {
        display: block;
        background-image: none;
        padding-left: 0;
        padding-right: 0;
      }
      ul li a {
        font-size: @sizeSS;
      }
      ul li.expanded ul li {
        font-size: @sizeSS;
      }
      ul li.expanded:hover a {
        background-position: right 15px top -105px;
        &:hover {
          background-position: right 15px top 0.92em;
        }
      }
      .block-oxweb-search {
        top: -15px;
      }
    }
    .block-oxweb-search {
      right: 46px;
    }
    .site-header-top {
      margin-left: 100px;
      /* Turn off the min height (see header.less site-header-top */
      min-height: inherit;
    }
    .logo a.square img {
      width: 100px;
      height: 100px;
    }
  }
  body.toolbar.logged-in header.page-header {
    margin-top: 85px;
  }
  // Reduce width of input element in course finder
  .finder-block {
    input.finder-element-title {
      width: 61%;
    }
  }
  // Override above when content-meta in place
  .content-meta + section {
    .finder-block {
      input.finder-element-title {
        width: 52%;
      }
    }
  }

  //Research stories
  .research-stories-item {
    // Uses fix for less and calc - see https://github.com/less/less.js/issues/974
    width: ~"calc(50% - 10px)";
  }

  // Graduate course search form
  .graduate-course-search > form {
    .form-type-select select,
    .form-type-textfield input {
      width: 220px;
    }
  }

  //Course finder search form.
  .finder-block.section-index-search .views-widget-filter-combine {
    width: 46%;
  }

}


/* $TABLETS */
@media only screen and (max-width: @tabletMax) {

  // PAD gateway styling
  .node-type-gateway-pad {
    .mountain {
      padding-top: 15em;
    }
    .node-gateway-pad > .field-name-field-intro {
      max-width: 75%;
      margin-bottom: 5em;
    }
    .field-name-field-secondary-content,
    .field-name-field-tertiary-content {
      > .field-items > .field-item {
        width: 50%;
      }
    }
    .field-name-field-primary-content {
      margin-bottom: 0;
      > .field-items > .field-item {
        width: 100%;
        margin: 0;
      }
      .link-block {
        height: auto;
      }
    }
  }

  .container-slideshowpro {
    max-width: 82%;
  }

  /* Key dates (Editorial class) tablet in sidebar to be reduced */
  .key-dates {
    /* This class is used for narrow sidebars */
    &.small {
      thead tr td {
        font-size: inherit;
      }
      td {
        font-size: 0.8em;
        padding: 0.4em 0.55em 0.4em 0;
        &:last-child {
          padding-right: 0;
        }
      }
    }
  }

  /* $Section index fixes */
  .node-type-section-index .field-name-field-section-primary h2 {
    background: url("../../images/highlight-chevron-small.png") no-repeat bottom 59% right;
    display: inline;
    padding-right: 0.8em;
  }

  /* $News index */
  .node-type-oxweb-news-index {
    .news-index-row {
      margin-left: 0;
      margin-right: 0;
    }
  }

  /* 3 per row on the video wall */
  body.node-type-video-wall.page-node {
    .tab-wrapper ul.video-list {
      li {
        width: 33.33333%;
      }
    }
  }
  /* Alter the image (i) overlay on the main images */
  .view-mode-ow_large_feature .group-description-wrapper,
  .view-mode-ow_medium_feature .group-description-wrapper {
    width: 100%;
    max-width: 100%;
    padding-left: 2.0625em;
    background: @colorT85Black;
    .box-sizing();
  }

  body.node-type-oxweb-homepage {
    .homepage-feature {
      margin-top: 6.25em;
    }

    .group-main-carousel .field-name-field-main-carousel .group-slide-description  h2 {
      font-size: 2.3em;
    }
  }

  .view-events {
    .views-exposed-form {
      .views-widget-filter-field_event_date_value2 {
        clear: both;
      }
    }
    &.staff-event-listing {
      .views-exposed-form {
        .views-widget-filter-field_event_date_value {
          clear: both;
        }

        .views-widget-filter-field_event_date_value2 {
          clear: none;
        }
      }
    }
  }

  /* $Retina images */
  /* image naming convention @x2 = at 2 times the size */

  .node-type-section-index .field-name-field-section-primary h2 {
    background: url('../../images/chevron-right-large.png') no-repeat bottom 59% right;
    background-size: 9px;
    display: inline;
    padding-right: 0.8em;
  }

  .next-tab {
    background: url('../../images/chevron-right@x2.png') no-repeat center right;
    background-size: 14px;
  }

  .prev-tab {
    background: url('../../images/chevron-left@x2.png') no-repeat center left;
    background-size: 14px;
  }

  .node-type-blog .back-to > a {
    background: url('../../images/chevron-left-white-large.png') no-repeat 1px 2px;
    background-size: 8px;
  }

  body.node-type-video-wall {
    .tab-wrapper ul.video-list li h2 {
      background: url('../../images/play-mini@x2.png') no-repeat left top;
      background-size: 25px;
    }
  }

  body.node-type-oxweb-homepage {
    .discover-link-type-video a .field-name-field-image-highlight:before {
      background: url("../../images/play@x2.png") no-repeat 52% 50%;
      background-size: 101px;
    }
    .discover-link-type-audio a .field-name-field-image-highlight:before,
    .discover-link-type-itunes a .field-name-field-image-highlight:before {
      background: url("../../images/itunes@x2.png") no-repeat 52% 50%;
      background-size: 101px;
    }
    .homepage-news-listing a h2.title {
      background: url('../../images/chevron-right-large.png') no-repeat top 6px right;
      background-size: 8px
    }
  }

  .group-discover-carousel .field-item {
    .discover-link-type-audio a .field-name-field-image-highlight:before,
    .discover-link-type-itunes a .field-name-field-image-highlight:before {
      background-position: 50% 50%;
    }
  }

  .toggle-icon,
  .toggle-icon-inline {
    background: url('../../images/info-icon@x2.png') no-repeat left top;
    background-size: 25px;
    &:hover,
    &.shown {
      background-position: left -50px;
    }
  }
  .block-oxweb-search input[type=submit] {
    background-image: url('../../images/search@x2.png');
    background-size: 70%;
  }
  .hamburger-menu ul li.expanded .toggle,
  .in-section-menu ul li.expanded .toggle {
    background-image: url('../../images/mobile-arrows@x2.png');
    background-size: 16%;
    background-position: 22px -39px;
    background-repeat: no-repeat;
    &.open {
      background-image: url('../../images/mobile-arrows@x2.png');
      background-size: 16%;
    }
  }
  .in-section-menu h2.title .toggle {
    background-image: url('../../images/in-sec-arrows@x2.png');
    background-size: 16%;
    background-position: 22px -39px;
    &.open {
      background-image: url('../../images/in-sec-arrows@x2.png');
      background-size: 16%;
      background-position: 22px 22px;
    }
  }
  .breadcrumb span {
    background: url('../../images/breadcrumb-chevron@x2.png') no-repeat right center;
    background-size: 7px;
  }

  header.page-header .site-header-bottom .oxweb-secondary-menu-block ul li.expanded.active-trail {
    a {
      background-position: 94% -5.6em;
    }
    ul li a {
      background: transparent;
    }
    & a:hover {
      background-position: 94% 1.2em;
    }
  }

  .responsive-mode header.page-header .site-header-bottom .oxweb-secondary-menu-block ul li.expanded {
    a {
      background-image: url('../../images/arrows@x2.png');
      background-repeat: no-repeat;
      background-size: 6px;
      background-position: top 12px right 6px;
    }
    &:hover,
    &.hovered {
      z-index: 10;
      ul li a {
        background-image: none;
      }
      a {
        background-position: top 12px right 6px;
        &:hover {
          background-position: top 12px right 6px;
        }
      }
    }
    &.hovered a {
      background-position: top 12px right 6px;
    }
    &.active-trail {
      &:hover a {
         background-position: top 12px right 6px;
      }
      a {
        background-position: top -87px right 6px;
        &:hover {
          background-color: @colorLink;
        }
      }
    }
  }

  .root-menus.responsive-mode header.page-header .site-header-bottom .oxweb-secondary-menu-block ul li.expanded {
    a {
      background-position: top 18px right 6px;
    }
    &:hover,
    &.hovered {
      a {
        background-position: top 18px right 6px;
        &:hover {
          background-position: top 18px right 6px;
        }
      }
    }
    &.hovered a {
      background-position: top 18px right -40px;
    }
  }
  .page-header-row .oxweb-secondary-menu-block.homepage-oxweb-secondary-menu ul li.expanded:hover a {
    background-position: top -23px right 18px;
    background-size: 6px;
    &:hover,
    .hovered {
      background-position: top 18px right 18px;
    }
  }
  .logo a.square,
  .logo a.rect {
    background: url('../../images/oxweb-logo-square.svg') no-repeat center center;
    background-size: 100% 100%;
    -ms-interpolation-mode: bicubic;
    image-rendering: optimizeQuality;
    .hidden();
  }
  .logo a.rect {
    background: url('../../images/oxweb-logo-rect.svg') no-repeat center center;
    background-size: 100% 100%;
  }

  .page-footer .row .site-map .sitemap-item.footer-logo-wrapper {
    background: url('../../images/oxweb-logo-square.svg') right center no-repeat;
    background-size: 128px;
  }
  .page-footer .row .footer-logo-wrapper {
    background: url('../../images/oxweb-logo-square.svg') no-repeat right center;
    background-size: 100% 100%;
  }
  .page-footer .row h2,
  .page-footer .row .social {
    //clear: both;
  }
  .page-footer .row .social-links .social li a {
    background: url('../../images/social@x2_v4.png') no-repeat;
    background-size: 575px 85px;
    &.itunes {
      background-position: 5px -49px;
      &:hover {
        background-position: 5px 1px;
      }
    }
    &.youtube {
      background-position: -45px -49px;
      &:hover {
        background-position: -45px 1px;
      }
    }
    &.facebook {
      background-position: -101px -49px;
      &:hover {
        background-position: -101px 1px;
      }
    }
    &.twitter {
      background-position: -144px -49px;
      &:hover {
        background-position: -144px 1px;
      }
    }
    &.linkedin {
      background-position: -195px -49px;
      &:hover {
        background-position: -195px 1px;
      }
    }
    &.weibo {
      background-position: -244px -49px;
      &:hover {
        background-position: -244px 1px;
      }
    }
    &.oxford-apps {
      background-position: -294px -49px;
      &:hover {
        background-position: -294px 1px;
      }
    }
    &.instagram {
      background-position: -394px -51px;
      &:hover {
        background-position: -394px -1px;
      }
    }
    &.google-plus {
      background-position: -445px -51px;
      &:hover {
        background-position: -445px -1px;
      }
    }
    &.medium {
      background-position: -486px -51px;
      &:hover {
        background-position: -486px -1px;
      }
    }
    &.the-conversation {
      background-position: -531px -51px;
      &:hover {
        background-position: -531px -1px;
      }
    }
  }
  div.more-less {
    h3 {
      background-image: url('../../images/faqs-arrow-down@x2.png');
      background-size: 24px;
    }
    &.show {
      h3 {
        background-image: url('../../images/faqs-arrow-up@x2.png');
      }
    }
  }
  .page-content a.any-questions-button {
    background-image: url('../../images/any-qs@x2.png');
    background-size: 21px;
  }

  .page-content a.self-service-button {
    background-image: url('../../images/self-service-icon@x2.png');
    background-size: 21px;
  }

  .page-content a.apply-button,
  .page-content a.application-guide-button {
    background-position: -175px 16px;
    background-size: 210px;
  }

  #custom-tweet-button a,
  #custom-tweet-button-responsive a,
  #custom-fb-button a,
  #custom-fb-button-responsive a,
  #custom-linkedin-button a,
  #custom-linkedin-button-responsive a,
  #custom-reddit-button a,
  #custom-reddit-button-responsive a {
    background-size: 26px;
  }

  #custom-tweet-button a,
  #custom-tweet-button-responsive a {
    background-image: url("../../images/share-twitter@x2.png");
    &:hover {
      background-image: url("../../images/share-twitter-hover@x2.png");
    }
  }
  #custom-fb-button a,
  #custom-fb-button-responsive a {
    background-image: url("../../images/share-facebook@x2.png");
    &:hover {
      background-image: url("../../images/share-facebook-hover@x2.png");
    }
  }
  #custom-linkedin-button a,
  #custom-linkedin-button-responsive a {
    background-image: url("../../images/share-linkedin@x2.png");
    &:hover {
      background-image: url("../../images/share-linkedin-hover@x2.png");
    }
  }
  #custom-reddit-button a,
  #custom-reddit-button-responsive a {
    background-image: url("../../images/share-reddit@x2.png");
    &:hover {
      background-image: url("../../images/share-reddit-hover@x2.png");
    }
  }

  .page-content-sidebar-second,
  .field-type-text-long,
  .field-type-text-with-summary,
  .sidebar-block,
  .sidebar-block-white {
    ul li {
      background-image: url('../../images/small-bullet@x2.png');
      background-size: 4px 4px;
    }
  }
  .post-content,
  .page-content-sidebar-first,
  .page-content-sidebar-second {
    .block .group-sidebar-related {
      >.field {
        .label + .field-item-single,
        h2 + .field-item-single,
        .field-item {
          background: url('../../images/small-bullet@x2.png') no-repeat @sidebarSidePaddingInner 9px;
          background-size: 4px 4px;
        }
      }
    }
    .block .group-post-content-related {
      >.field {
        >.field-item-single,
        .field-item {
          background: url('../../images/small-bullet@x2.png') no-repeat left 9px;
          background-size: 4px 4px;
        }
      }
    }
  }



// END RETINA MEDIA QUERY
//}
  /* Refine heading sizes */
  h1,
  .node-type-section-index h1,
  .page-news-arts-blog .main-title h1,
  .page-news-science-blog .main-title h1 {
    font-size: @tabSizeSu;
  }
  h2,
  .node-type-section-index .field-name-field-section-primary h2 {
    font-size: @tabSizeXL;
  }
  /* Fix scroll x axis */
  body {
    overflow-x: hidden;
  }
  /* Remove admin tabs */
  .admin-output .tabs {
    display: none;
  }
  .node-type-section-index .main-content {
    .field-name-field-section-primary .node-section-highlight h2 {
      background: url("../../images/highlight-chevron-medium.png") no-repeat bottom 59% right;
    }
    .block-views-oxweb-section-highlights-block .highlight-group {
      h2 {
        font-size: @sizeXL;
        background: url("../../images/highlight-chevron-small.png") no-repeat bottom 59% right;
      }
    }
    .block-views-oxweb-section-highlights-block .highlight-group-2,
    .block-views-oxweb-section-highlights-block .highlight-group-3 {
      h2 {
        font-size: @sizeM;
      }
    }
    .block-views-oxweb-section-highlights-block .highlight-group-1,
    .block-views-oxweb-section-highlights-block .highlight-group-4 {
      .node {
        width: 49.9%;
      }
      .node:first-child {
        margin-left: 0.2%;
      }
      .node:last-child {
        margin: 0;
      }
    }
    .group-post-highlights,
    .group-side-highlights {
      width: 100%;
      // Match existing style
      padding-right: 1%;
    }
    .group-side-highlights {
      .field-name-field-side-highlights {
        .node {
          display: inline-block;
        }
      }
    }
  }
  /* Search for contacts form */
  body.page-gsearch #contactsearchcontainer .lastname-container {
    float: none;
    width: 100%;
  }
  body.page-gsearch  #contactsearchcontainer .initial-container {
    float: none;
    margin-left: 0;
    margin-top: 1.5em;
    width: 70%;
  }
  .responsive-mode .hamburger-menu .oxweb-primary-menu-block ul li.expanded a,
  .responsive-mode .hamburger-menu .oxweb-secondary-menu-block ul li.expanded a {
    background: none;
    &:hover {
      background-color: @colorLink;
    }
  }
  /* Search for contacts form */
  body.page-gsearch #contactsearchcontainer .lastname-container {
    float: none;
    width: 100%;
  }
  body.page-gsearch  #contactsearchcontainer .initial-container {
    float: none;
    margin-left: 0;
    margin-top: 1.5em;
    width: 70%;
  }
  // Remove float styles from wysiwyg elements
  .wysiwyg-float-right {
    float: none;
    margin: @spacingS 0;
    display: block;
  }
  .wysiwyg-float-left {
    float: none;
    margin: @spacingS 0;
    display: block;
  }
  // Remove float from college crest
  .crest-right {
    float: none;
    margin: @spacingS 0;
    display: block;
  }
  /* iPad / Android tablets use classes not :hover */
  .root-menus header.page-header .site-header-bottom .oxweb-secondary-menu-block,
  header.page-header .site-header-bottom .oxweb-secondary-menu-block {
    ul li.expanded.hovered {
      position: relative;
      a {
        color: @colorTertiary;
        background-color: @colorLink;
        background-position: right 9px top 1.6em;
        z-index: 5;
        .opacity(100);
      }
      ul {
        display: block;
        .menu-shadow();
        a {
          background: transparent;
          color: @colorLink;
          font-size: @sizeMS;
          &:active {
            border-bottom: 1px solid @colorLightGrey;
          }
        }
      }
    }
  }

  .node-type-oxweb-news-index {
    .main-content {
      .field-name-field-contact-press-office {
        float: none;
        margin-top: 0;
      }

      .group-content-middle {
        padding-left: 0;
        padding-right: 0;
        margin-right: 0;
      }
    }
  }
  /* Twitter iframe full width */
  .twitter-timeline {
    width: 100%;
    margin-bottom: 2em;
  }
  // Reduce width of input element in course finder
  .finder-block {
    input.finder-element-title {
      width: 57%;
    }
  }
  // Override above when content-meta in place
  .content-meta + section {
    .finder-block {
      input.finder-element-title {
        width: 47%;
      }
    }
  }

  /* Course listing styles */
  .view-course-listing-and-search .view-header {
    display: none;
  }
  .view-course-listing-and-search .view-content {
    margin-top: 2em;

    .course-listing {
      padding: 1.25em .5em;
    }
    .course-cell {
      width: auto;
      border: none;
      padding: 0;
    }
    .course-heading {
      float: none;
      width: 100%;
    }
    .course-duration {
      padding-left: .5em;
      &:before {
        content: '|';
        padding-right: .5em;
      }
    }

  }

  // Graduate course search form
  .graduate-course-search > form {
    .form-type-select select,
    .form-type-textfield input {
      width: 180px;
    }
  }

  //Course finder search form.
  .finder-block.section-index-search .views-widget-filter-combine {
    width: 38%;
  }

  // Undergraduate admissions test
  .view-id-course_listing_and_search.view-display-id-block_5 {
    .view-content {
      margin-top: 0;
    }
  }

  // A-TO-Z GLOSSARY STYLING
  .node-type-a-to-z {
    .header-atoz {
      padding: 20px 0 0;

      .breadcrumb,
      .main-title {
       padding-left: 20px;
      }

      .pre-content  {
        padding-left: 0;
      }
    }

    .block-oxweb-atoz {
      li {
        margin-bottom: 4px;
      }

      .last {
        width: 74px;
        letter-spacing: 4px;
      }
    }

    .letter {
      font-size: 32px;
      text-align: center;
      margin: -2px .5em 0;
      width: 1em;
    }

    .paragraphs-item-a-to-z::after {
      height: 25px;
    }
  }

  #page-content {
    .atoz-glossary-container {
      .atoz-glossary {
        height: 138px;
        width: 308px;

        #block-oxweb-atoz-atoz-glossary {
          width: 308px;
          height: 113px;
          overflow-y: hidden;
          top: 0;
        }
      }
      .atoz-top-button-container {
        text-align: left;
        width: auto;
        transition: top 0ms, opacity 0ms; // disable exit animation
      }

      .atoz-jump-button-container {
        font-weight: bold;
        line-height: 55px;
        font-size: @sizeSS;
        text-align: right;
        font-family: @fontPTSans;
        position: absolute;
        right: 0;
        width: auto;
        pointer-events: none;
        display: inline;
        top: -100px; // for transition animation
        opacity: 0;
        transition: top 0ms, opacity 0ms; // disable exit animation

        .atoz-jump-button::after {
          content: url('../../images/breadcrumb-arrow-down.png');
          display: inline-block;
          height: 8px;
          right: -5px;
          position: relative;
        }

        .atoz-jump-button,
        .atoz-jump-button:active,
        .atoz-jump-button:focus {
          color: @colorOffBlack;
          padding-right: 6px;
          text-decoration: none;
          transition: color 200ms;
        }

        .atoz-jump-button:hover {
          color: @colorDarkGrey;
          text-decoration: none;
        }
      }
    }

    // Fixed glossary styling:
    &.atoz-glossary-stuck {
      .atoz-glossary-container {
        .atoz-glossary {
          height: 55px;
          transition: height 0ms;

          #block-oxweb-atoz-atoz-glossary {
            top: 55px;
            height: 0;
            transition: height 0ms;
          }
        }

        &.mobile-glossary-visible {
          .atoz-glossary {
            height: 193px;
            transition: height 300ms;
          }

          #block-oxweb-atoz-atoz-glossary {
            height: 113px;
            transition: height 300ms;
          }
        }
      }

      .atoz-top-button-container {
        pointer-events: auto;
        top: 0;
        opacity: 1;
        transition: top 300ms, opacity 300ms;
      }

      .atoz-jump-button-container {
        pointer-events: auto;
        top: 0;
        opacity: 1;
        transition: top 300ms 100ms, opacity 300ms 100ms;
      }

      .atoz-glossary-placeholder {
        height: 138px; // Fill the space where the original menu used to be for a smoother experience when scrolling
      }
    }
  }
  // END OF A-TO-Z GLOSSARY STYLING
}

/* $PORTRAIT TABLETS */
@media only screen and (max-width: @portraitTabletMax) {
  /* Key dates (Editorial class) return to full size */
  .key-dates {
    /* This class is used for narrow sidebars */
    &.small {
      thead tr td {
        font-size: inherit;
      }
      td {
        font-size: inherit;
        padding: 0.5em;
        &:last-child {
          padding-right: 0.5em;
        }
      }
    }
  }


  .field-name-section-index-carousel {
    .carousel-next-btn,
    .carousel-prev-btn {
      display: none !important;
    }
  }
  .field-name-section-index-carousel .carousel-pager,
  .node-type-section-index .field-name-section-index-carousel .carousel-pager,
  body.node-type-oxweb-homepage .group-main-carousel .field-name-field-main-carousel .carousel-pager{
    bottom:auto !important;
    top:15px;
    right:40px !important;
    opacity:1;
    .transition(opacity 0.2s);
  }

  .field-name-section-index-carousel.description-toggled .carousel-pager,
  .field-name-field-section-primary.description-toggled .carousel-pager,
  .node-type-section-index .field-name-section-index-carousel.description-toggled .carousel-pager,
  body.node-type-oxweb-homepage .group-main-carousel .field-name-field-main-carousel.description-toggled .carousel-pager{
    opacity:0;
  }

  /* Make sidebar images normal again */
  .post-content .sidebar-block img,
  .page-content-sidebar-first .sidebar-block img,
  .page-content-sidebar-second .sidebar-block img {
    width: auto;
    height: auto;
  }

  /* Events venue details */
  .node-type-event .view-mode-oxweb_full_content {
    .field {
      margin-bottom: 0.6em;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .field-name-field-event-venue-details {
      span.field-item-single {
        margin-left: 0;
      }
    }
  }

  /* Remove the thin arrow */
  .finder-block h2 {
    background-image: none;
  }

  /* Sort the margins on the sidebar so the grey doesn't show */
  .page-content-sidebar-second .did-you-know {
    margin: -30px -2.202% -20px;
  }

  /* Make the Colleges map full width. */
  #oxpoints-map {
    width: 94% !important;
    margin: 0 auto;
  }

  /* Image to go full width */
  .pre-content .field-name-field-image-main img {
    width: 100%;
  }
  /* Blogs fix */
  body.has-pre-content.node-type-blog {
    .main-content {
      .clearfix();
    }
    .page-content-sidebar-first {
      position: static;
    }
  }
  /* Sort out news and events */
  body.node-type-oxweb-news-index .field-name-field-news-highlight {
    .field-name-field-image-main {
      width: 50%;
    }
  }
  body.node-type-oxweb-news-index .main-content .group-content-middle {
    padding-right: 0;
  }

  /* Make header correct height when on skinny menu */
  header.page-header .page-header-row {
    min-height: 0;
  }

  /* $TABS - Make tabs mobile friendly */
  .ui-tabs .ui-tabs-nav li {
    display: block;
    float: none;
    border: none;
    border-bottom: 1px solid @colorLightGrey;
    margin-bottom: 0;
    &:last-child {
      border-bottom: none;
    }
    &.ui-tabs-active {
      margin: 0;
    }
    a {
      display: block;
      float: none;
    }
  }
  .ui-tabs .ui-state-active:after {
    border: none;
  }
  // Remove right margins
  .field-name-field-body,
  .field-name-field-body-multiple,
  .field-name-field-intro,
  .tweet-this-container {
    margin-right: 0;
    p,
    table,
    .tab-nav {
     margin-right: 0;
    }
  }
  body.node-type-video-wall .main-content .item-list {
    padding: 1em 1.25em;
  }

  /* 2 per row on the video wall */
  body.node-type-video-wall.page-node,
  body.node-type-video-wall.page-node.one-sidebar,
  body.node-type-video-wall.page-node.two-sidebars {
    .tab-wrapper ul.video-list {
      li {
        width: 50%;
      }
    }
  }
  .node-type-oxweb-homepage .page-content-main .main-content {
    .clearfix();

    .group-news-events {
      padding: 0;
    }

    .homepage-news-listing {
      .border-box();
      float: left;
      margin: 2em 0 1.4em;
      width: 100%;

      .view-listing ul li {
        width: 50%;
        float: left;
      }
    }
    .homepage-feature,
    .homepage-events-listing {
      .column(6, @gutter_width);
      margin-top: 0;
    }

    .homepage-studying-at-oxford {

      ul.study-group-one,
      ul.study-group-two {
        float: none;
        width: 100%;

        li {
          padding: 0 @gutter;
        }
      }
      ul.study-group-one {
        margin-bottom: 1em;
      }
    }

    .group-main-carousel {
      .carousel-next-btn,
      .carousel-prev-btn {
        visibility: hidden;
      }

      .field-name-field-main-carousel .field-items .field-item {
        display: block;
        position: static;
        a.link-block:hover {
          .group-slide-description h2 {
            color: @colorAltLinkHover;
            text-decoration: none;
          }
        }
        /* We need hide the edges slightly */
        .field-type-image {
          width: 100%;
          overflow: hidden;
          height: auto;
        }
        .field-image-colour-standard .group-slide-description,
        .field-image-colour-light .group-slide-description {
          padding: @gutter_width 1em;
          background: @colorWhite;
          width: 100%;
          position: static;
          /* Remove IE filters */
          filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
          h2,
          .field-name-field-intro {
            color: @colorOffBlack;
          }
          h2 {
            font-size: @sizeXL;
            text-transform: none;
            letter-spacing: 0;
          }
          .field-name-field-intro {
            font-size: @sizeM;
          }
        }
      }
    }
  }

  .group-discover-carousel {
    clear: both;
    .carousel-next-btn {
      &:before {
        background: url('../../images/homepage-chevron-discover.png') no-repeat 50px 45%;
      }
    }
  }

  body.has-pre-content {
    /* Remove the annoying minus margins */
    &.node-type-blog,
    &.node-type-page,
    &.node-type-course,
    &.node-type-college {
      .main-content,
      .page-content-sidebar-first,
      .page-content-sidebar-second {
        margin-top: 0;
      }
    }

    .page-content-sidebar-first,
    .page-content-sidebar-second,
    &.node-type-news-item .page-content-sidebar-first,
    &.node-type-news-item .page-content-sidebar-second {
      position: inherit;
    }
  }

  .page-content-sidebar-first {
    padding-top: 0;
  }

  .page-content-sidebar-first,
  .page-content-sidebar-second {

    .block-grey {
      padding-left: @gutter_width;
      padding-right: @gutter_width;
    }

    .block {
      &>.field,
      .group-sidebar-related >.field,
      .group-sidebar-related >.field .label-above,
      .group-sidebar-related >.field .field-items,
      .group-sidebar-related >.field .field-item-single,
      .field-name-field-related-content .field-item,
      .field-name-field-related-content .field-item-single,
      .field-name-field-related-content-top .field-item,
      .field-name-field-related-content-top .field-item-single,
      .field-name-field-graphical-teaser-ref .field-name-field-gt-caption  {
        padding-left: @gutter_width;
        padding-right: @gutter_width;
      }

      .group-sidebar-related >.field .field-item {
        padding-right: @gutter_width;
        padding-left: 0.5em;
        background-position: 0 9px;
      }

      .field-name-field-related-content .please-note {
        padding-left: @gutter_width;
        padding-right: @gutter_width;
        margin-left: -@gutter_width;
        margin-right: -@gutter_width;
      }

      .group-sidebar-related >.field .label,
      .group-sidebar-related >.field .label-above,
      .field-name-field-graphical-teaser-ref {
        padding-left: @gutter_width;
        padding-right: @gutter_width;
      }
      .field-name-field-related-content {
        padding-left: 0;
        padding-right: 0;
        .field-item-single,
        .field-item {
          padding-left: @gutter_width * 2;
          padding-right: @gutter_width * 2;
        }
      }
    }
  }

  /* Remove excessive margin-bottom */
  .field-name-field-body {
    margin-bottom: 0;
  }
  /* Allow the (i) overlay to show over the top of the image */
  .view-mode-ow_large_feature, .view-mode-ow_medium_feature {
    z-index: 2;
  }
  /* Section indexes into and title */
  .node-type-section-index .row .main-content .main-title,
  .node-type-section-index .row .main-content .breadcrumb-wrapper,
  .node-type-section-index .row .main-content .field-name-field-intro {
    padding-left: @gutter_width;
    padding-right: @gutter_width;
  }

  /* Section indexes in to single column */
  .node-type-section-index .main-content .view-oxweb-section-highlights {
    .highlight-group {
      width: 100%;
      float: none;
      .node {
        width: 100%;
        float: none;
        border: none;
        a.link-block {
          width: 100%;
          .opacity(100);
          position: static;
          padding: 0.8em @gutter_width;
          border-bottom: 1px solid @colorTertiary;
          .field-name-field-intro,
          p {
            margin-bottom: 0;
          }
          span {
            display: block;
            .content-indent();
          }
        }
      }
      .node-video-highlight {
        a.link-block {
          background-image: none;
          color: @colorOffBlack;
          h2 {
            color: @colorOffBlack;
            padding-right: 1.2em;
            background: url("../../images/video-button-small-grey@x2.png") no-repeat bottom 39% right;
            background-size: 17px;
          }
          .link-block-bgimage-wrapper {
            position: relative;
            bottom: auto;
            margin-right: 0;
          }
          &:hover {
            h2 {
              color: black;
            }
          }
        }
        &:hover {
          background-color: transparent !important;
        }
      }
    }
    .field-name-field-video,
    .field-name-field-image-highlight {
      display: none;
    }
    .highlight-group-2,
    .highlight-group-3 {
      .node a.link-block {
        padding: 0.55em @gutter_width;
      }
    }
    .highlight-group-5,
    .highlight-group-2,
    .highlight-group-3 {
      p {
        margin: 0 0 0.3em 0;
      }
    }
  }
  /* Primary section highlight */
  .node-type-section-index .main-content .field-name-field-section-primary .node-video-highlight,
  .node-type-section-index .main-content .field-name-field-section-primary .node-section-highlight {
    a.link-block {
      .opacity(100);
      border-bottom: 1px solid @colorTertiary;
      padding: 1.2em @gutter_width;
      padding-right: 1.3em;
      padding-bottom: 0.8em;
    }
    h2 {
      font-size: @sizeXXL;
    }
    .field-name-field-intro {
      font-size: @sizeM;
      p {
        margin: 0 0 0.3em 0;
      }
    }
  }
  .node-type-section-index .main-content .field-name-field-section-primary .node-video-highlight {
    a.link-block {
      background-size: 13%;
      background-position: 50% 30%;
    }
  }
  .node-type-section-index {
    .row .main-content {
      .field-name-field-section-highlights {
        .node {
          display: inline-block;
          width: auto;
          &.node-video-highlight {
            width: 100%;
            max-width: 370px;
          }
        }
        .field-item {
          width: 100%;
          overflow: hidden;
        }
      }
    }
    .field-name-field-section-primary {
      .link-block {
        position: relative;
        .field-name-field-intro {
          margin-bottom: 0;
        }
      }
    }
    /* Section index sidebar */
    .section-index-sidebar-wrapper {
      position: relative;
    }
    .group-post-highlights {
      padding-right: 0;
      .field-name-field-two-column-highlight {
        margin-left: 0;
      }
      .key-dates {
        margin-left: 0;
        width: 100%;
      }
      .did-you-know {
        margin-left: 0;
      }
    }
    .node-event.view-mode-ow_listing_teaser,
    .node-event.view-mode-ow-listing-teaser {
      width: 100%;
      float: none;
    }
  }
  .page-content-sidebar-second {
    .did-you-know {
      margin-left: -5%;
      margin-right: -5%;
    }
    .sidebar-block {
      padding-left: @gutter_width * 2;
      padding-right: @gutter_width * 2;
    }
  }

  .node-type-oxweb-news-index {
    .main-content {
      .field-name-field-contact-press-office {
        float: none;
        margin-top: 0;
      }

      .group-content-middle {
        overflow: visible;
        padding: 0;

        .field-name-news-index-arts-blog,
        .field-name-news-index-science-blog {
          margin-bottom: 0;
          margin-left: 0;
          padding-bottom: 0;
          width: 50%;

          .field-name-field-image-main {
            float: none;
            margin-right: 0;
          }
          h2 strong {
            display: block;
          }
        }

        .field-name-news-index-whats-on {
          clear: both;
          padding: 0;
          margin: 0;

          .block {
            margin-bottom: 0;
            padding-bottom: 0;
          }
        }
      }

      .field-name-field-body {
        margin-bottom: 2.5em;
      }

      .field-name-field-news-small {
        padding-left: @gutter_width / 3 * 2;
      }
    }

    .view-mode-ow_listing_teaser {
      .link-block {
        .clearfix();
      }

      .field-name-field-gt-image,
      .field-name-field-image-main {
        float: left;
        margin-right: 1em;
      }
    }
  }

  .page-news-science-blog,
  .page-news-arts-blog {
    .main-content {
      .views-field-field-body p {
        margin-right: 0;
      }

      .view-filters,
      .group-blog-title-meta,
      .field-name-field-image-main {
        margin-right: -2.175%;
      }


      .views-widget-filter-combine {
        width: 33%;
      }

      .field-name-field-image-main {
        margin-bottom: 0;
      }

      .group-blog-title-meta {
        display: block;
        max-width: 100%;
        min-height: 1em;
        position: relative;
      }
    }
  }

  .node-type-blog {
    .post-content .prev-tab {
      margin-left: 0;
    }
  }

  /* Remove the negative margin */
  .main-content,
  body.has-pre-content #main-content,
  body.has-pre-content.node-type-course .main-content,
  body.has-pre-content.node-type-college .main-content {
    margin-top: 0;
    blockquote {
      width: 100%;
      margin: 1em 0;
      margin-top: 0.3em;
      padding: 1.25em;
      border-left: none;
      .border-box();
      & > p:first-of-type:before {
        margin-left: 0;
      }
    }
  }
  .row .content-meta {
    display: none;
  }
  .share-bar-responsive {
    width: 100%;
    display: block;
    min-width: 100px;
    .clearfix();
    h2 {
      text-align: left;
    }
    #custom-tweet-button,
    #custom-tweet-button-responsive,
    #custom-fb-button,
    #custom-fb-button-responsive,
    #custom-linkedin-button,
    #custom-linkedin-button-responsive,
    #custom-reddit-button,
    #custom-reddit-button-responsive {
      clear: none;
      float: left;
      margin-right: 0.8em;
    }
  }
  /* Keep the content off the edges of the mobile */
  .row .main-content {
    padding: 0 (@gutter_width / 1.5);
  }
  /* Mobile menu had fixed height and padding */
  header.page-header .page-header-row {
    padding: 1.125em 1em;
  }
  header.page-header .site-header-top {
    min-height: 0;
  }
  .root-menus {
    header.page-header .site-header-bottom {
      top: 0;
    }
  }
  /* Turn off link hovers. */
  .hamburger-menu ul li a:hover {
    background: none;
  }
  .hamburger-menu a.main-menu-item:hover {
    background: @colorDarkBlue;
  }

  .responsive-mode .hamburger-menu .homepage-oxweb-secondary-menu ul li.expanded a:hover {
    background: @colorLink;
  }

  header.page-header .site-header-bottom {
    margin-left: 0;
    bottom: 0;
    min-height: 100%;
    width: 100%;
  }
  header.page-header .site-header-bottom .oxweb-secondary-menu-block {
    display: none;
  }
  .hamburger-menu .oxweb-primary-menu-block {
    display: block;
  }
  /* Show a smaller logo on mobile */
  header.page-header .logo {
    a.rect {
      width: 140px;
      display: block;
      height: 44px;
    }

  }
  /* Hide the bigger logo */
  header.page-header .logo a.square {
    display: none;
  }
  .hamburger-wrapper {
    right: -7px;
  }
  .page-footer .row {
    .site-map {
      // hide footer logo
      .footer-logo-wrapper {
        display: none;
      }
      // make 3 columns equal width
      .sitemap-item {
        width: 33%;
      }
    }

    .social-links {
      padding-bottom: 0em;
      margin-bottom: 1em;
      h2 {
        line-height: normal;
        float: none;
      }
      .clearfix();
      /* push social icons to new line */
      .social {
        margin-bottom: 0.5em;
        .clearfix();

        li a.itunes {
          margin-left: 0;
        }
      }
    }
    // force any questions to new line
    .social-links .social li.any-questions {
      clear: left;
      float: left;
    }
    .legals-questions {
      clear: both;
    }
  }
  .page-content-sidebar-first .block-menu-block {
    padding: 0;
  }
  /* Remove the sidebar top margins */
  .row .page-content-sidebar-second {
    margin-top: 0;
  }
  .page-content-sidebar-second {
    .field-name-field-graphical-teaser-ref {
      .field-name-field-gt-caption {
        font-size: @sizeS;
        padding: @spacingSSS @spacingSSS 0 9.202453988%;
      }
    }
  }
  /* Remove right hand margin from media embedded videos */
  .media-vimeo-video,
  .media-youtube-video {
    margin-right: 0;
  }
  p {
    .media-vimeo-video,
    .media-youtube-video {
      // Kick video outside of paragraph tag
      margin-right: 0;
    }
  }
  /* Stack event view reference */
  .node-type-section-index {
    .view-display-id-block_1 {
      .node-event.view-mode-ow_listing_teaser,
      .node-event.view-mode-ow-listing-teaser {
        .box-sizing(border-box);
        width: 100%;
        float: none;
        padding: 0 (@gutter_width / 3 * 2);
      }
    }
  }
  .field-name-field-section-view {
    .view-display-id-block_1 {
      margin-right: -2.95%;
    }
  }
  // Reduce width of input element in course finder
  .finder-block {
    margin-right: -3%;
    input.finder-element-title {
      width: 100%;
    }
  }
  // Override above when content-meta in place
  .content-meta + section {
    .finder-block {
      margin-left: -1.5%;
      margin-right: -1.5%;
      input.finder-element-title {
        width: 100%;
      }
    }
  }

  body.node-type-section-index {
    .field-name-field-section-primary {
      .field-group-group_link_wrapper {
        padding-bottom: 2em;
        padding-top: 1em;
      }
    }
    .field-name-field-section-view .view-display-id-block_1 {
      margin-left: -2.18%;
      margin-right: -2.18%;
    }
  }

  .container-slideshowpro {
    max-width: 100%;
  }

  /* Overrides for PAD $ALTERNATIVE styling */
  body {
    &.node-type-page-tabbed.pad-style {
      h1 {
        color: inherit;
        font-family: @fontPTSansNar;
        font-size: @sizeSu;
      }
      .tab-wrapper {
        margin-top: 0;
      }
      .breadcrumb {
        a {
          color: inherit;
        }
        .breadcrumb-last {
          color: @colorSecondary;
        }
      }
      .pad-header-wrapper {
        position: relative;
        margin-left: 0%;
        bottom: 0;
      }
      .pad-gradient {
        display: none;
      }
    }
  }

  /* Graduate country pages: position country field on Page content type */
  body.node-type-page {
    &.graduate-country {
      .field-name-field-graduate-country {
        left: 0;
        bottom: 0;
      }
    }
  }

  /* Make sure embedded infographics are responsive
   - not full width at mobile to allow swiping down on one side */
  .visually_embed,
  .visually_embed img {
    width: 90% !important; /* important required to override inline styles */
  }

  /* Tweak page-feedback */
  .page-feedback {
    margin: 0 @gutter_width 0.5em 0;
    width: auto;
    display: block;
    .webform-client-form {
      margin: 0.5em 0.5em 1em 0.5em;
    }
  }

  /* Hide background videos on section index and reshow the image */
  .node-type-section-index .field-name-field-section-primary .has-background-video {
    .field-group-group_image_link_wrapper,
    .field-name-field-image-highlight {
      // reshow the image and link wrapper if there is a background video
      display: block;
    }
    // and hide the video
    .field-name-field-background-video {
      display: none;
    }
  }

  /* Hide background videos on home page and reshow the image */
  body.node-type-oxweb-homepage .group-main-carousel .field-name-field-main-carousel {
    .has-background-video {
      .field-name-field-image-highlight {
        // reshow the image and link wrapper if there is a background video
        display: block;
      }
      // and hide the video
      .field-name-field-background-video {
        display: none;
      }
    }
  }

  /* Hide background videos on page and reshow the image */
  body.node-type-page.has-background-video {
    .field-name-field-image-main {
      // reshow the main image if there is a background video.
      display: block;
    }
    // and hide the video
    .field-name-field-background-video {
      display: none;
    }
  }

  /* Course listing styles */
  .view-course-listing-and-search .view-content {
    width: 100%;
  }

  .view-course-listing-and-search .form-item-combine input {
    width: 22em;
  }

  //Course finder search form.
  .finder-block.section-index-search .views-widget-filter-combine {
    width: 46%;
  }

}

/* $MOBILES */
@media only screen and (max-width: @mobileMax) {
  /* OVERIDING GUTTER WITH ON MOBILE */
  @gutter_width: @m_gutter_width; // Change in variables.less

  .row .main-content {
    padding: 0 @gutter_width;
  }

  .row .post-content {
    padding-left: @gutter_width;
  }

  .page-content-sidebar-first .group-sidebar-related .field-name-field-blog-related.field-group-field-last .field-items .field-item,
  .page-content-sidebar-first .block .group-sidebar-related >.field .label,
  .page-content-sidebar-first .block .group-sidebar-related >.field .label-above,
  .page-content-sidebar-first .block .field-name-field-graphical-teaser-ref,
  .page-content-sidebar-second .block .group-sidebar-related >.field .label,
  .page-content-sidebar-second .block .group-sidebar-related >.field .label-above,
  .page-content-sidebar-second .block .field-name-field-graphical-teaser-ref,
  .page-content-sidebar-second .block .field-name-field-related-content .field-item-single,
  .page-content-sidebar-second .block .field-name-field-related-content .field-item,
  .page-content-sidebar-first .block .group-sidebar-related >.field,
  .page-content-sidebar-first .block .group-sidebar-related >.field .label-above, .page-content-sidebar-first .block .group-sidebar-related >.field .field-items,
  .page-content-sidebar-first .block .group-sidebar-related >.field .field-item-single,
  .page-content-sidebar-first .block .field-name-field-related-content-top .field-item,
  .page-content-sidebar-first .block .field-name-field-related-content-top .field-item-single,
  .page-content-sidebar-first .block .field-name-field-graphical-teaser-ref .field-name-field-gt-caption,
  .page-content-sidebar-second .block .group-sidebar-related >.field,
  .page-content-sidebar-second .block .group-sidebar-related >.field .label-above,
  .page-content-sidebar-second .block .group-sidebar-related >.field .field-items,
  .page-content-sidebar-second .block .group-sidebar-related >.field .field-item-single,
  .page-content-sidebar-second .block .field-name-field-related-content .field-item,
  .page-content-sidebar-second .block .field-name-field-related-content .field-item-single,
  .page-content-sidebar-second .block .field-name-field-related-content-top .field-item,
  .page-content-sidebar-second .block .field-name-field-related-content-top .field-item-single,
  .page-content-sidebar-second .block .field-name-field-graphical-teaser-ref .field-name-field-gt-caption,
  .node-type-oxweb-news-index .field-name-field-body,
  .node-type-oxweb-news-index .main-content .field-name-field-news-small,
  .node-type-oxweb-news-index .field-name-field-news-small {
    padding-left: 0;
    padding-right: 0;
  }

  .post-content .block .group-sidebar-related,
  .page-content-sidebar-first .block .group-sidebar-related,
  .page-content-sidebar-second .block .group-sidebar-related,
  .page-content-sidebar-second .sidebar-block,
  .page-content-sidebar-first .block-grey,
  .page-content-sidebar-second .block-grey,
  .node-type-oxweb-news-index .field-name-field-news-highlight .node,
  .node-type-oxweb-news-index .field-name-news-index-whats-on,
  .node-type-oxweb-news-index .field-name-news-index-science-blog,
  .node-type-oxweb-news-index .field-name-news-index-arts-blog,
  .node-type-oxweb-news-index .field-name-field-news-small,
  .node-type-oxweb-news-index .group-content-middle .field-name-news-index-whats-on .block,
  .node-type-oxweb-news-index .page-content-main .main-content,
  .page-content-sidebar-first .block .field-name-field-related-content .please-note,
  .page-content-sidebar-second .block .field-name-field-related-content .please-note,
  .page-content-sidebar-second .block .field-name-field-related-content,
  body.node-type-oxweb-homepage .homepage-news-listing .view-header,
  .node-type-oxweb-homepage .page-content-main .main-content .homepage-studying-at-oxford,
  .page-content-sidebar-second .block .group-sidebar-related >.field .label + .field-item-single,
  .page-content-sidebar-second .block .group-sidebar-related >.field .oxweb-field-minimal-wrapper .file,
  .node-type-section-index .row .main-content,
  .main-content .field-name-field-section-view .view-student-events,
  body.node-type-video-wall .tab-wrapper,
  .node-type-video-wall.one-sidebar .main-content,
  .node-type-video-wall.two-sidebars .main-content,
  .node-type-video-wall.no-sidebars .main-content {
    padding-left: @gutter_width;
    padding-right: @gutter_width;
  }

  // PAD gateway styling
  .node-type-gateway-pad {
    .mountain {
      padding-top: 3em;
    }
    .field-name-field-secondary-content,
    .field-name-field-tertiary-content {
      > .field-items > .field-item {
        width: 100%;
      }
      .link-block {
        height: auto;
        padding: 2em;
      }
    }
    .node-gateway-pad > .field-name-field-intro {
      max-width: 100%;
      margin-bottom: 5em;
    }
  }

  body.node-type-video-wall .tab-wrapper {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .page-content-sidebar-second .block .group-sidebar-related >.field .oxweb-field-minimal-wrapper .file {
    padding-left: 0;
  }


  .page-content-sidebar-second .block .group-sidebar-related >.field .label + .field-item-single {
    background: url('../../images/small-bullet.png') no-repeat 0 9px;
    padding-left: 0.5em;
  }

  body.node-type-oxweb-news-index .main-content .group-content-middle,
  .page-content-sidebar-first .block .field-name-field-related-content .please-note,
  .page-content-sidebar-second .block .field-name-field-related-content .please-note,
  .field-name-field-section-view .view-student-events {
    margin-left: -@gutter_width;
    margin-right: -@gutter_width;
  }

  .page-content-sidebar-second .block .field-name-field-related-content {
    background-color: @colorTertiary;
  }

  .main-content h1,
  .node-type-event .view-mode-oxweb_full_content .group-event-meta {
    margin-right: 0;
  }

  body.node-type-section-index .field-name-field-section-view .view-display-id-block_1 {
    margin-left: -2.18%;
    margin-right: -2.18%;
  }
  /* Role based menu items now too long */
  .hamburger-menu,
  .in-section-menu {
    .homepage-role-base-menu ul li {
      width: 100%;
    }
  }
  .hamburger-menu a.main-menu-item h2:first-child {
    height: 67px;
  }
  /* News and events stacked (first listing) */
  body.node-type-oxweb-news-index .field-name-field-news-highlight {
    margin-bottom: 1em;
    .field-item {
      margin-bottom: 0.6em;
      .clearfix();
    }
    .field-name-field-image-main {
      display: block;
      width: 47%;
    }
    h2 {
      display: block;
      width: 50%;
      float: right;
      margin-top: 0;
      font-size: @sizeM;
    }
  }
  /* Arts and sciences needs balancing */
  body.node-type-oxweb-news-index .main-content .group-content-middle {
    padding-right: 0;
  }

  /* Sort out calendar dates */
  .node-event.view-mode-ow_listing_teaser,
  .node-event.view-mode-ow-listing-teaser,
  .node-event.view-mode-ow_listing_item,
  .node-event.view-mode-ow-listing-item,
  .views-field-field-event-date {
    .dates-calendardate {
      min-width: 1.75em;
      margin-right: 0.8em;
    }
  }

  /* 1 per row on the video wall */
  body.node-type-video-wall.page-node,
  body.node-type-video-wall.page-node.one-sidebar,
  body.node-type-video-wall.page-node.two-sidebars {
    .tab-wrapper ul.video-list {
      margin-right: 0;
      li {
        float: none;
        width: 100%;
        padding-right: 0;
      }
    }
    .field-name-field-intro {
      padding-right: @gutter_width;
    }
    /* Remove the close button */
    #cboxClose {
      display: none !important;
    }
    #colorbox .close-btn {
      font-family: @fontPTSans;
      text-transform: uppercase;
      text-align: center;
      display: block;
      padding: 0.2em 0;
    }
  }

  /* When the colorbox loads on mobile we also add the body class to stop scroll */
  html.page-no-scroll body {
    position: relative !important;
    overflow-y: hidden !important;
  }
  body.node-type-oxweb-homepage.mobiles .page-content-main .main-content {
    .group-news-events h2.title,
    .homepage-studying-at-oxford h2.title {
      font-size: 1.65em;
    }
    .homepage-news-listing {
      float: none;
      margin-bottom: 0;
      .item-list ul li {
        width: 100%;
        float: none;
        margin-bottom: 1.2em;
        padding: 0;
        .node-video-highlight .field-name-field-intro {
          padding-bottom: 0;
        }
        h2 {
          font-size: 1.1em;
          margin-top: 0.35em;
          margin-bottom: 0;
        }
        h2,
        .field-type-date {
          padding: 0 @gutter_width;
        }
      }
    }
    .homepage-feature,
    .homepage-events-listing {
      .clearfix();
      display: block;
      float: none;
      margin-top: 0;
      width: 100%;

      .link-block {
        .clearfix();
      }
    }
    .homepage-feature {
      padding: 0;
      h2 {
        font-size: 1.1em;
        margin-top: 0.35em;
        margin-bottom: 0;
      }
      h2,
      .field-name-field-intro {
        padding: 0 @gutter_width;
      }
    }
    .homepage-events-listing {
      padding: 0 @gutter_width;
      margin-top: 0;

      .dates-calendardate {
        width: 2em;
      }

      .group-event-details {
        padding-left: 4em;
      }
    }

    .group-main-carousel {
      display: block;
      .clearfix();
      .carousel-next-btn,
      .carousel-prev-btn {
        visibility: hidden;
      }
      .field-items {
        .clearfix();
      }
      .field-name-field-main-carousel .field-items .field-item {
        position: static;
      }

      /* We need hide the edges slightly */
      .field-name-field-main-carousel .field-items .field-item .field-type-image {
        width: 100%;
        overflow: hidden;
        height: auto;
        img {
          width: 130%;
          position: relative;
          left: -15%;
          margin-top: auto;
          float: none;
        }
      }
      .field-name-field-main-carousel .field-items .field-item {
        .field-image-colour-standard .group-slide-description,
        .field-image-colour-light .group-slide-description {
          position: static;
          height: 100%;
          padding: 0.5em @gutter_width;
          h2 {
            font-size: 1.45em;
          }
          .field-name-field-intro {
            font-size: @sizeMS;
          }
        }
        .link-block-bgimage-wrapper {
          position: static;
        }
      }
    }

    .homepage-studying-at-oxford {
      margin-top: 2em;
      margin-bottom: 1.8em;
    }
    /* this rule tweaked to match the live site after css refactoring (ticket 593) */
    .homepage-studying-at-oxford ul li a {
      h3 {
        position: static;
        background: @colorBeigeGrey;
      }
    }
  }

  .group-discover-carousel {
    padding: 2em @gutter_width 1.8em 0;
    h2 {
      margin-left: @gutter_width;
    }

    .carousel-next-btn,
    .carousel-prev-btn {
      display: none !important;
    }

    .field-items .field-item {
      width: 100%;
      float: none;
      max-width: none;
      margin-top: 0.5em;
      .field-name-field-image-listing,
      .field-name-field-image-highlight,
      .study-type a .field-name-field-image-highlight {
        float: left;
        width: 30%;
      }
      .link-block {
        .clearfix();
      }
      .field-name-field-video {
        float: left;
        width: 30%;
        &:before {
          background-size: 40%;
        }
      }
      .node-video-highlight .field-name-field-intro,
      .field-name-field-intro {
        padding-bottom: 0;
        display: none;
      }
      .file-video {
        img {
          width: 100%;
        }
      }
      .field-name-field-display-title {
        width: 100%;
      }
      h2 {
        margin-top: 0.6em;
        font-size: @sizeMS;
        margin-left: @gutter_width;
        text-transform: none;
        font-weight: normal;
      }
      h2,
      .field-type-date,
      .field-name-field-intro {
        width: 67%;
        float: right;
        padding-right: @gutter_width;
        .border-box();
      }
      .discover-link-type-audio a .field-name-field-image-highlight:before,
      .discover-link-type-itunes a .field-name-field-image-highlight:before {
        background-size: 40%;
      }
    }
  }

  /* Refine heading sizes */
  h1,
  .node-type-section-index h1,
  .page-news-science-blog .main-title h1,
  .page-news-arts-blog .main-title h1 {
    font-size: @mobSizeSu;
  }
  /* Remove the main content margin to maximise space */
  .field-name-field-intro,
  .field-name-field-body p,
  .table,
  form {
    .content-indent(0);
  }
  body.logged-in .tabs.primary {
    display: none;
  }
  section.main-content {
    word-wrap: break-word;
  }
  .field-name-field-intro {
    font-size: @sizeM;
  }
  .page-content-sidebar-first .block-menu-block {
    padding: 0;
  }
  .node-type-section-index {
    .field-name-field-section-primary {
      h2 {
        background-image: none;
      }
      .field-group-group_link_wrapper{
        padding-bottom: 2em;
        padding-top: 1em;
      }
    }
  }
  .node-type-section-index .row section.main-content {
    /* Move the text under the image on mobile */
    .view-oxweb-section-highlights .highlight-group,
    .node-section-highlight {
      .link-block {
        position: static;
        .opacity(100);
        width: 100%;
      }
      .node {
        border: none;
      }
    }
    /* Reduce the height of this troublesome item in the grid */
    .view-oxweb-section-highlights .highlight-group-2 {
      max-height: 265px;
      position: relative;
      img {
        max-height: none;
      }
    }
    /* Reflow and max the width */
    .block-views-oxweb-section-highlights-block .view-oxweb-section-highlights .highlight-group-1,
    .block-views-oxweb-section-highlights-block .view-oxweb-section-highlights .highlight-group-4 {
      .highlight-group,
      .contextual-links-region {
        position: static;
      }
      .node {
        float: none;
        width: 100%;
        position: relative;
        &:last-child {
          width: 100%;
        }
      }
    }
  }
  .block-oxweb-search.toggle {
    width: 15%;
  }

  .block-oxweb-search {
    width: 97%;
    right: 32px;
    form,
    .form-item {
      width: 100%;
      min-width: inherit;
      input[type=text] {
        width: 98%;
        min-width: inherit;
        .border-radius(0);
        font-size: @sizeMS;
      }
      input[type=submit] {
        right: 15px;
      }
    }
  }
  .page-footer .row .site-map .sitemap-item ul {
    margin-bottom: 1em;
  }

  .page-footer .row {
    .social-links {
      .social {
        li {
          line-height: 0px;
        }
        li a {
          margin-left: 0;
          margin-right: 0.5em;
          margin-bottom: 0.5em;
        }
        li:nth-child(5) {
          clear: both;
        }
        li.any-questions {
          float: left;
          border-top: 1px solid @colorLightPrimary;
          width: 100%;
          padding: 1em 0 0;
        }
      }
    }
    .site-map {
      .footer-logo-wrapper {
        display: none;
      }
      /* make 3 columns to full width */
      .sitemap-item {
        width: 100%;
        padding: 0 0 0.25em 0;
        margin: 0 0 1.65em 0;
        border: none;
        border-bottom: 1px solid @colorLightPrimary;
        .clearfix();
      }
      .quick-links {
        border: none;
        margin-bottom: 0;
      }
    }
    /* make lowermost footer links stack vertically */
    .legals-questions {
      clear: both;
      border-top: none;
      margin-top: 0;
      padding: 0;
      padding-bottom: @spacingS;
      ul {
        li {
          display: block;
          & + li {
            margin-left: 0;
          }
        }
      }
    }
  }
  /* Ensure images don't break outside container at narrow widths */
  .media-image-ow_content_medium-wrapper {
    max-width: 100%;
  }
  .media-image-wrapper img {
    max-width: 100%;
    height: auto;
  }

  .node-type-oxweb-news-index .main-content {
    .view-mode-ow_listing_teaser {
      .field-name-field-gt-image,
      .field-name-field-image-main {
        margin-right: 0;
      }
    }

    .group-content-middle {
      .field-name-news-index-arts-blog,
      .field-name-news-index-science-blog {
        width: 100%;

        h2 strong {
          display: inline;
        }

        img {
          width: 100%;
        }
      }
    }
  }

  .page-news-arts-blog,
  .page-news-science-blog {
    .main-content {
      .views-widget-filter-combine {
        width: 100%;
        padding-right: 0;
      }
    }
  }

  // Remove padding from more-less styles
  div.more-less {
    margin-right: 0;
  }

  dl {
    margin: 0;
    dt {
      width: auto;
      float: none;
      font-weight: bold;
    }
    dd {
      margin-left: 0;
      margin-bottom: 1em;
      }
  }
  .key-dates {
    font-size: @sizeSS;
    line-height: 1.5;
    border-width: 1em;
    caption {
      padding: 1em 1em 0;
    }
    td {
      border-width: 0 0 1px 0;
    }
  }

  // Gateway content type - change widths of floated elements from 50% to 100%
  .node-type-gateway-staff {
    .field-name-field-intro {
      ul {
        li {
          width: 100%;
        }
      }
    }
    .gateway-wrapper {
      width: 100%;
      padding-right: 0;
    }
    .row {
      .main-content {
        padding: 0 @gutter_width;
        ul {
          li {
            margin-right: 0;
          }
        }
      }
    }
  }
  .gsa-survey {
    span {
      display: block;
    }
  }
  .node-type-expert {
    .field-name-field-person-photo {
      float: none;
      margin: 1em;
      max-width: none;
    }
    .field-name-field-about {
      margin-right: 0;
    }
    .field-name-field-job-title {
    }
    .group-two-column {
      & > .field {
        width: auto;
        float: none;
        margin-bottom: 2em;
        &:nth-child(2n+1) {
          clear: left;
          margin-right: 4%;
        }
        h3 {
          margin-top: 0;
        }
      }
    }
  }
  /* Make page-feedback full width */
  .page-feedback {
    .webform-client-form {
      margin: 0.5em 0.5em 1em 1em;
    }
  }

  //Research stories
  .research-stories-item {
    width: 100%;
  }

  /* Forums */
  .forum-container {
    clear: both;
    font-family: @fontPTSans;
  }

  .forum-details,
  div.forum-post {
    border-bottom: 1px solid @colorLightGrey;
    padding-bottom: 1em;
    margin-bottom: 1em;
  }

  .forum-name,
  .forum-topic-title {
    font-size: @sizeL;
  }

  .forum-number-topics {
    padding-right: 0.5em;
  }

  .forum-number-topics,
  .forum-number-posts {
    display: inline-block;
  }

  .forum-last-reply,
  .forum-post-last-post {
    br {
     display: none;
    }
    a {
      padding-right: 5px;
    }
    span.username {
      display: inline-block;
      padding-left: 2px;
      padding-right: 5px;
    }
  }

  // Forum post
  .forum-topic-header .topic-reply-link {
    clear: both;
  }
  .forum-post-links ul {
    margin-left: 0;
    display: inline-block;
  }

  // Graduate course search form
  .graduate-course-search > form {
    .form-type-select select,
    .form-type-textfield input {
      width: auto;
      max-width: 280px;
    }
  }

  //Course finder search form.
  .finder-block.section-index-search .views-widget-filter-combine {
    clear: left;
    width: 60%;
    margin-top: 2em;
  }
  .finder-block.section-index-search .views-exposed-form .views-submit-button {
    margin-top: 2em;
  }

}

/* Not sure why this is here */

@media only screen and (max-width: @smallerTabletMax) {
  .node-type-oxweb-news-index .main-content {
    .group-content-middle {
      padding-right: @gutter_width / 1.5;
      margin: 0 -(@gutter_width / 1.5) 2.5em;
    }
  }

  .view-events {
    .views-exposed-form {
      .views-widget-filter-field_event_date_value {
        clear: none;
      }

      .views-widget-filter-field_event_date_value2 {
        clear: both;
      }
    }

    &.staff-event-listing {
      .views-exposed-form {
        .views-widget-filter-field_event_date_value {
          clear: both;
        }

        .views-widget-filter-field_event_date_value2 {
          clear: none;
        }
      }
    }

  }

  // Allow about text to flow around image.
  .node-type-expert {
    .field-name-field-about {
      overflow: visible;
    }
  }

}

@media only screen and (min-width: 1296px) {
  .view-events {
    .views-exposed-form {
      .views-widget-filter-field_event_date_value2 {
        clear: both;
      }
    }

    &.staff-event-listing {
      .views-exposed-form {
        .views-widget-filter-field_event_date_value {
          clear: both;
        }

        .views-widget-filter-field_event_date_value2 {
          clear: none;
        }
      }
    }
  }
}

@media only screen and (min-width: 1400px) {
  .view-events {
    .views-exposed-form {
      .views-widget-filter-field_event_date_value,
      .views-widget-filter-field_event_date_value2 {
        clear: none;
      }
    }
  }
}