/**
 *
 * SITE
 *
 * Project base styles go here. E.g h1, h2, h3, body, p...
 * Anything that can be reused should go in site-mixins
 */

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

/**
 * CONTENTS
 * To search quickly for a main section prefix search terms with $
 */

/**
 * $CONTENTS............You’re reading it!
 * $RESET...............Any remaining browser reset styles
 * $CORE................Core body, paragraph and link styles
 * $LINKS...............Links
 * $LISTS...............unordered, ordered and definition lists
 * $GRIDS...............Element layout
 *   $Grid Overrides....
 * $TABLES..............Table elements
 * $FORMS...............Form elements resets
 * $BUTTONS.............Buttons
 * $IMAGES..............inline image styles
 * $VIDEOS..............inline youtube and vimeo styles
 * $RELEATED DOCS.......Icons and styles
 * $VIEWS...............views!
 * $VIEWS LISTINGS......manually set 'view-listing' class on view
 * $GENERAL.............Reusable classes to be used everywhere
 * $PAGER...............Drupal pager
 * $CORE OVERRIDES......Drupal core overrides including error messages
 * $CONTENT META........
 * $MAIN CONTENT........
 * $POST CONTENT........
 * $HEADER..............Helpful header styles
 * $FOOTER..............Helpful footer styles
 * $SIDEBARS............
 * $FIELDS..............
 * $COOKIE BAR..........
 * $BREADCRUMBS.........
 * $SHAREBAR............
 * $HTML SITEMAP........
 * $TABS................Styling of UI tabs
 * $VIEW MODES..........Shared view modes
 * $ALTERNATIVE.........Alternative styling / overrides
 */


@font-face {
  font-family: 'entyporegular';
  src: url('/sites/default/themes/custom/oxweb/fonts/entypo.eot');
  src: url('/sites/default/themes/custom/oxweb/fonts/entypo.eot?#iefix') format('embedded-opentype'),
    url('/sites/default/themes/custom/oxweb/fonts/entypo.woff') format('woff'),
    url('/sites/default/themes/custom/oxweb/fonts/entypo.ttf') format('truetype'),
    url('/sites/default/themes/custom/oxweb/fonts/entypo.svg#entyporegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/**
 * Additional font installed as the specific font icon for twitter is not available on font-awesome.
 * https://projects.torchbox.com/projects/oxford-university/tickets/831#update-43543519
 */
@font-face {
  font-family: 'sosaregular';
  src: url('/sites/default/themes/custom/oxweb/fonts/sosa.eot') format('eot'),
    url('/sites/default/themes/custom/oxweb/fonts/sosa.woff') format('woff'),
    url('/sites/default/themes/custom/oxweb/fonts/sosa.ttf') format('truetype'),
    url('/sites/default/themes/custom/oxweb/fonts/sosa.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/**
 * $RESET
 */

/* IEx has undefined display: on HTML5 elements, leading to broken layouts */
article, footer, header, section, nav, aside {
  display: block;
}
/* override mothership default */
.active, .active-trail {
    font-weight: normal;
}
/* Override issue when styles are nested */
em strong,
strong em {
  font-style: italic;
  font-weight: 700;
  font-family: @fontPTSerif700Italic;
}

/**
 * $CORE
 */
body {
  font-size: @sizeBase;
  font-family: @fontPTSerif;
  color: @colorOffBlack;
  line-height: @lineHeight;
  background: @colorBlueGrey;
}

#tinymce {
  background: #fff;  /*undo html body bg for tinymce body in iframe*/
}

p, ul, ol, dl, menu {
  margin-bottom: 1em;
}

img {
  .image-crisping();
  -ms-interpolation-mode: bicubic;
  image-rendering: optimizeQuality;
}

pre, code {
  border:none;
  margin: 0 0 1em 0;
}

blockquote {
  font-size: @sizeM;
  font-family: @fontPTSans;
  float: right;
  width: 40%;
  margin: 1.5em 7% 1.5em 1.5em;
  padding: 20px 20px 20px 50px;
  background: @colourVLightGrey;
  border-left: 1px solid @colorLightGrey;
  & > p:first-of-type:before {
    content: url("@{theme_path}/images/open-quote.png");
    margin-left: -30px;
    padding-right: 9px;
  }
  & > p:first-of-type:after {
    content: url("@{theme_path}/images/close-quote.png");
    padding-left: 10px;
  }
  cite,
  figcaption {
    color: @colorMidGrey;
    font-size: @sizeSS;

    &:before {
      content: "- ";
    }
  }
}

// Override .field-name-field-body p styling. Doesn't work when adding p as
// child of blockquote above.
.field-name-field-body blockquote p {
  margin: 0;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

sup {
  vertical-align: super;
  font-size: 75%;
}

sub {
  vertical-align: sub;
  font-size: 75%;
}

/**
* $LINKS
*/

a {
  text-decoration: none;
  color: @colorLink;
  &:visited,
  &:hover,
  &:active,
  &:focus {
    color: @colorLink;
    text-decoration: underline;
    cursor: pointer;
  }
}

.page-content a:link {
  color: @colorLink;

  &:hover,
  &:active,
  &:focus {
    color: @colorLink;
    text-decoration: underline;
    cursor: pointer;
  }
}

.tags {
  a {
    display: inline-block;
    border: 1px solid @colorTertiary;
    padding: 0.375em;
    font-size: (@sizeMS / 4 * 3);
    font-family: @fontPTSans;
    line-height: 1;
    text-transform: uppercase;
    margin-right: 0.5em;
    margin-bottom: 1em;
    &:link:hover,
    &:hover {
      color: @colorWhite;
      background-color: @colorLink;
      text-decoration: none;
    }
  }
}

/**
* $LISTS
*/

ul {
  margin-left: 1.15em;
}

ol {
  margin-left: 2em;
  list-style: decimal inside;
}

dl {
  margin: 0 18% 0 0;
  dt {
    width: 9em;
    float: left;
    font-weight: bold;
  }
  dd {
    margin-left: 10em;
    margin-bottom: 1em;
  }
}

.page-content-container.main-content {
  ol {
    .content-indent();
  }
}

.content form ul,
.content form ol {
  padding: 0;
}

// Ensure lists in the right sidebar and main content area are styled consistently
.page-content-sidebar-second,
.field-type-text-long,
.field-type-text-with-summary,
.sidebar-block,
.sidebar-block-white {
  ul li {
    list-style: none;
    padding-left: 0.6em;
    background: url('@{theme_path}/images/small-bullet.png') left 0.65em no-repeat;
  }

  .item-list {
    margin: 0 0 1em;

    li {
      margin: 0;
    }
  }
}

// Undo background style affecting the Partnership Listing View to prevent it
// from appearing when it resides in the Second Sidebar. Not the most elegant way
// of doing this but the most effective without having to retest the entire site.
.page-content-sidebar-second .block-views-latest-news-block-6 ul li {
  background: none;
}

.field-type-text-long,
.field-type-text-with-summary {
  ul {
    margin-left: 1.5em;
  }

  .cincopa-widget li {
    background-image: none;
    padding-left: 0;
  }
}

.page-content-sidebar-second {
  ul {
    margin-left: 0;
  }
}

.field-collection-view-links {
  float: right;
  list-style: none;

  li {
    display: inline-block;
    list-style: none;
  }

  a {
    padding: 0.5em;
  }
}
.a-z-listing {
  padding-bottom: 0.5em;
  margin-bottom: 2em;
  border-bottom: 1px solid @colorTertiary;
  ul {
    margin: 0;
  }
  li {
    float: left;
    list-style: none;
    padding: 0 0.7em;
    border-left: 1px solid @colorTertiary;
    &:first-child {
      border-left: none;
    }
  }
  a {
    font-family: @fontPTSans;
  }
}

/* $GRIDS */

.page-content-main {
  .clearfix();
}

/* Image size isn't full width needs to resize. */
.node-type-blog,
.node-type-news-item {
  .pre-content .field-name-field-image-main {
    .column(12, 0);
  }
}

/* note that grid layouts for some individual page types can be found in css/types/[node_type].less */

.social-hub {
  &.no-sidebars .row .main-content {
    .column(11, 0);
    padding-left: @gutter_width;
  }
  &.one-sidebar .row .main-content,
  &.two-sidebars .row .main-content {
    .column(8, 0);
    padding-left: @gutter_width;
  }
}

.view-student-events .view-empty {
  .event-item-content {
    .column(4, 0);
  }
}

/*$Grid Overrides*/
/* Widths with no meta content region (aka left sidebar) */
/*
*/

/* Webform done (Thank you page) */
body.page-node-done .main-content {
  margin: 0;
}

.row {
  .row();
  .page-content-header { // not used
    .column(9, 0);
    padding-left: @gutter_width;
  }
  .pre-content {
    .column(12, 0);
  }
  .main-content {
    .column(8, 0);
    padding-left: @gutter_width;
  }
  .content-meta {
    .column(1, 0);
    padding-left: @gutter_width;
    padding-top: 9.5em; // Shd line up with intro for anon users
    padding-bottom: 50px;
    display: block;
  }
  .post-content {
    .column(8, 0);
    padding-left: @gutter_width;
    margin-bottom: 2em;
    .back-to {
      .column(1, 0, 8);
    }
    .group-related {
      .column(7, 0, 8);
      .field-name-field-related-internal-link,
      .field-name-field-related-external-link,
      .field-name-field-document {
        .column(2, 0, 8);
        padding-left: @gutter_width;
      }
    }
    .field-name-field-related-internal-link {
      /* First item no padding */
      padding: 0;
    }

    .prev-tab,
    .next-tab {
      margin-top: 2em;
      padding-top: 1px;
    }

    .prev-tab {
      padding-right: 5px;
    }
    .next-tab {
      padding-left: 5px;
    }
  }
  .page-footer,
  .content-header {
    .column(12);
  }
}

.node-type-section-index,
.page-news-science-blog,
.page-news-arts-blog {
  .main-content {
    .column(9, @gutter_width);
  }
  .field-name-field-section-highlights,
  .field-name-field-student-gateway-news {
    .clearfix();
    margin: 0 -(@gutter_width / 3 * 2);
    & > .field-items {
      & > .field-item {
        .column(3, @gutter_width / 1.5, 9);
        margin-bottom: 1em;
      }
    }
  }
}

.page-content-sidebar-first {
  .column(3, 0);
  padding: @sidebarBottomMargin 0 0 0;
}

.page-content-sidebar-second {
  .column(3, 0);
  padding: 0;
}

/* Push main content over the top of featured images. */
body.has-pre-content.node-type-blog,
body.has-pre-content.node-type-page,
body.has-pre-content.node-type-page-tabbed,
body.has-pre-content.node-type-course,
body.has-pre-content.node-type-college,
body.has-pre-content.node-type-graduate-course,
body.has-pre-content.node-type-graduate-college {
  .page-content-sidebar-first,
  .page-content-sidebar-second {
    background-color: #FFF;
    margin-top: -@spacingStickyHead;
    position: relative;
  }
  .page-content-sidebar-first + .page-content-sidebar-second {
    margin-top: 0;
  }
}

.content-columns-3 {
  .clearfix();
  margin: 0 -(@gutter_width / 3 * 2) 2.5em;

  .col {
    .column(3, @gutter_width / 3 * 2, 9);
  }
}

body.node-type-blog,
body.node-type-news-item,
body.node-type-staff-gateway-news,
body.node-type-oxweb-news-index,
body.node-type-course,
body.node-type-graduate-course {
  .page-content-sidebar-first {
    padding-top: 0;
  }

  .content-meta {
    padding-top: 3.5em;
    padding-left: 0;
  }
}

body.has-pre-content.node-type-blog,
body.has-pre-content.node-type-news-item,
body.has-pre-content.node-type-research-case-study {
  .page-content-main {
    position: relative;
  }

  .row {
    .pre-content {
      .column(9, 0);
    }

    .content-meta {
      clear: both;
    }
  }

  .page-content-sidebar-first,
  .page-content-sidebar-second {
    background-color: #FFF;
    margin-top: 0;
    position: absolute;
  }

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

footer.page-footer {
  .legals-questions {
    .column(12);
  }
  .social-links {
    .column(12);
  }
  .site-map {
    .column(12, 0);
  }
}

body.node-type-page {
  .field-name-field-listing-content {
    padding-bottom: 2.5em;

  }
}

#cookie-notice {
  .column(12);
}

/**
 * $TABLES
 */

/* UI helper */

table {
  caption {
    font-family: @fontPTSans;
  }
}

th {
  font-family: @fontPTSans;
  font-weight: 700;
  font-size: @sizeM;
}

th,
td {
  border: 1px solid @colorLightGrey;
}

td {
  font-family: @fontPTSans;
}

table.table-striping {
  tr:nth-child(odd) {
    background-color: @colorVeryLightBlue;
  }
}
td.cell-highlight {
  background-color: @colorVeryLightBlue;
}
table.table-reduced {
  margin-bottom: 3em;
  margin-top: 1em;
  p {
    margin-bottom: 0.5em;
    margin-right: 0;
    font-size: @sizeSS;
    line-height: 1.5em;
  }
  tr:hover {
    background-color: inherit;
  }
  td {
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 0 1em;
  }
  h3 {
    font-size: @sizeM;
  }
}
/* Sortable table styles */
table.sort-table {
  border-collapse: collapse;
  border-spacing: 0;
  th,
  td {
    text-align: left;
    padding: .5em;
  }
  th {
    vertical-align: bottom;
    font-weight: bold;
    padding: .5em 1.5em .5em .5em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    cursor: pointer;
    &:after {
      background: url('@{theme_path}/images/arrows-sort.gif') no-repeat 0 2px;
      content: "";
      visibility: visible;
      display: inline;
      vertical-align: top;
      height: 9px;
      width: 21px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent;
      margin-right: 1px;
      position: absolute;
    }
  }
  th.sorting-asc:after,
  th.sorting-desc:after {
    visibility: visible;
    margin-left: 10px;
    height: 0;
    width: 0;
    background-image: none;
  }
  th.sorting-desc:after {
    border-top-color: @colorBlack;
    margin-top: 8px;
  }
  th.sorting-asc:after {
    border-bottom-color: @colorBlack;
    margin-top: 3px;
  }
}
// Hide forum topic icons.
th.views-field.views-field-topic-icon,
td.views-field.views-field-topic-icon {
    display: none;
}
.forum-node-create-links {
  width: auto;
  padding-bottom: 20px;
}
.forum-node-create-links-top {
  padding-top: 0;
}
.forum-description {
  padding-bottom: 1.5em;
}
// Hide second forum login link.
.not-logged-in {
  .forum-node-create-links:not(.forum-node-create-links-top),
  .forum-tools,
  .topic-reply-link {
    display: none;
  }
}

/**
 * $FORMS
 */

form {
  font-family: @fontPTSans;
  .content-indent();
}

.page-content-sidebar-first,
.page-content-sidebar-second {
  form {
    margin: 0;
  }
}

/* fix to hide extra arrows in select box for ie11 */
/* See http://stackoverflow.com/questions/15351949/removing-the-ie10-select-element-arrow/15933790#15933790 */
form select::-ms-expand {
  display: none;
}

form ul,
form ol {
  margin: 0 0 1em 0;
  padding: 0;
}

form li {
  list-style: none outside none;
}


form label {
  /* Block use for easier to read forms */
  display: block;
  margin-bottom: 0;
  font-family: @fontPTSans;
  font-size: @sizeMS;
}

.container-inline .form-item {
  margin: 0;
}

.form-item {
  margin-top: 2em;
}
.page-content-sidebar-first,
.page-content-sidebar-second {
  .form-item {
    margin-top: 1.5em;
  }
}

.form-item-date-day,
.form-item-date-month,
.form-item-date-year {
  select {
    width: 75px;
    min-width: 75px;
  }
}

form input:not([type]), // deals with text boxes without type attribute
form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="text"],
form input[type="url"],
form input[type="number"],
form .file-field-wrapper,
form textarea,
form select[multiple="multiple"] {
  border: 1px solid @colorLightGrey;
  padding: 0.9em 1em;
  //line-height: @lineHeightForm; //missing var
  color: @colorOffBlack;
  .transition(all ease-out 0.3s);
  font-size: @sizeMS;
  .border-radius(@borderRadius);
  -webkit-appearance: none;
  width: 65%;
  display: inline-block;
  .border-box();
  &.small {
    width: 20%;
    min-width: 60px;
  }
  &.medium {
    width: 45%;
    min-width: 125px;
  }
  &.large {
    width: 75%;
    min-width: 300px;
  }
  &.full {
    width: 100%;
  }
}

/* Make HTML5 number field up/down buttons larger */
form input[type="number"]::-webkit-outer-spin-button,
form input[type="number"]::-webkit-inner-spin-button {
  font-size: 2em;
}

form textarea,
.form-textarea-wrapper form textarea {
  resize: vertical;
  min-height: 85px;
}

/* UI helper */
form input:not([type]):focus,
form textarea:focus,
form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="email"]:focus,
form input[type="text"]:focus,
form input[type="url"]:focus,
form input[type="number"]:focus,
form select:focus {
  color: @colorOffBlack;
  background: @colorFormHighlighter;
  .box-shadow(0px 0px 10px @colorFormGlow);
  //.transition(color ease-out 0.3s, background ease-out 0.3s, box-shadow ease-out 0.3s, -moz-box-shadow ease-out 0.3s, -webkit-box-shadow ease-out 0.3s );
  // function does not support multiple args
}

.container-inline div {
  display: inline-block;
}

form input[type="radio"],
form input[type="checkbox"] {
  display: inline;
  width: 7%;
  margin-right: 0.2em;
  max-width: 22px;
  margin-bottom: 0.15em;
}

/* make sure that radio buttons and checkboxes have the
same spacing regardless of markup around them*/
input[type=radio],
input[type=checkbox] {
  & + label {
    text-transform: none;
  }
}

/* Errors */

  .form-item input.error,
  .form-item textarea.error {
    background: @colorErrorLight;
    color: @colorError;
    .transition(all ease-out 0.3s);
    border: 1px solid @colorLightGrey;
  }
  .form-item select.error {
    border-color: @colorError;
  }
  .form-item textarea.error:focus,
  .form-item input.error:focus {
    color: @colorOffBlack;
    .transition(color ease-out 0.4s);
    .box-shadow(0px 0px 8px lighten(@colorError, 35%));
    .transition(all ease-out 0.3s);
  }


/* Validation */

.form-required {
  color: @colorFormReq;
  font-size: @sizeXL;
  font-weight: 400;
}

/* Some labels for checkboxes and radios have a class
   applied, and some don't. Reset styles for these labels */
.radio, .checkbox {
  min-height: 0;
  padding: 0;
}

.controls > .checkbox:first-child,
.controls > .radio:first-child {
  padding: 0;
}

// Make search boxes look like text fields
form input[type="search"] {
  -webkit-appearance: none;
}

.vertical-tabs .form-type-textfield input {
  .box-sizing(border-box);
}

// Webkit-specific style: not sure what this does
form input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

form small,
form .form-item div.description {
  font-size: @sizeSS;
  font-family: @fontPTSans;
  color: @colorDarkGrey;
  line-height: 1.5em;
  margin-top: 0.5em;
  margin-left: 0;
  margin-bottom: 1em;
}

form > .form-item.remove-select-options > .description {
  font-size: @sizeBase;
  color: @colorOffBlack;
}

form .file-field-wrapper {
  display: inline-block;
  padding: 1px 1px 3px 3px;
  width: auto;
}

form .form-managed-file input[type="submit"] {
  /* Hiding the 'Submit' button on form file upload fields,  */
  /* as Drupal handles submission on form submit anyway.     */
  display: none;
}

form input[type="file"] {
  //can't style the button on this
  line-height: 0; //sets the correct vertical alignment of the button and the text input
  vertical-align: middle;
  padding: 0;
  border: 0;
  font-family: @fontPTSans;
  font-size: @sizeSS;
}

form table.webform-grid {
  td, th {
    padding: @spacingSS;
    input {
      width: auto;
    }
  }
}

html.js fieldset.collapsible .fieldset-legend {
  background-position: right 52%;
  padding-left: 0;
  padding-right: 0.25em;
  border: none;
  font-weight: normal;
  font-size: @sizeS;
}

form select {
  border: 1px solid @colorDarkGrey;
  min-width: 150px;
  .border-radius(@borderRadius);
  font-family: @fontPTSans;
  font-size: @sizeMS;
  -webkit-appearance: none;
  -moz-appearance: none; /* This is a browser bug and doesn't work */
  text-indent: 0.01px;
  text-overflow: '';
  background: url('@{theme_path}/images/drop-down-bg.jpg') no-repeat top right transparent;
  padding: 0.5em 0.8125em;
  margin: 0;
  &:focus {
    background: url('@{theme_path}/images/drop-down-bg-on.jpg') no-repeat top right transparent;
    border: 1px solid darken(@colorDarkGrey, 20%);
  }
  option {
    background: @colorWhite;
  }
}

form select[size="3"] {
  padding: 0;
  background: none;
}


form select[multiple="multiple"] {
  background: none;
  padding: 0;
  &:focus {
    //background: @colorFormHightlight; // missing var
  }
}

.form-textarea-wrapper {
  display: inline-block;
  position: static;
  textarea {
    display: block;
  }
  .grippie {
    display: none;
  }
}

p.help-block {
  color: #666;
}

/* make sure that radio buttons and checkboxes have the
same spacing regardless of markup around them*/
.control-group {
  margin-bottom: 0;
}

form .button {
  padding: 0.45em 0.66em;
}

form fieldset {
  //TODO put back when only radios are a fieldset
  //border-top: 1px solid @colorLightGrey;
  margin-top: 1.875em;
  margin-bottom: 1.875em;
  position:relative;
  //padding-top: 60px;
}

form label input {
  margin-top: 0.2em;
  margin-bottom: 0.4em;
}

form legend {
  width: auto;
  //TODO put back when only radios are a fieldset
  //position: absolute;
  top: 25px;
  font-family: @fontPTSans;
  font-size: @sizeXL;
  font-weight: bold;
  &.label--radio {
    font-size: @sizeMS;
    display: inline-block;
  }
}


form .form-item:not(.webform-component-markup) em {
  display: block;
  font-style: normal;
}

fieldset > div {
  margin-bottom: 1em;
}

.webform-container-inline {
  div {
    display: inline-block;
    vertical-align: middle;
  }
  .form-radios {
    padding-left: 10px;
  }
}

.webform-component-date {
  .webform-calendar {
    vertical-align: middle;
  }
}

// Hack for Encaenia form (node 514466)
form.webform-client-form-514466 {
    textarea,
    input:not([type]),
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="text"],
    input[type="url"],
    input:not([type]):focus,
    textarea:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="text"]:focus,
    input[type="url"]:focus {
        text-transform: uppercase;
    }
    input[type="radio"]:disabled + label {
     color: @colorCopyrightGrey;
    }
}

// Style of webform confirmation page
.page-node-done {
  .main-content {
    margin-left: 8.3333333%;
    margin-bottom: 2em;
  }
  .webform-confirmation {
    font-size: @sizeM;
  }
}

// Fix WYSIWYG inline file links cut-off at top on Chrome
.page-content .field-name-field-body .file a,
.page-content .field-name-field-intro .file a,
.page-content .field-name-field-editors-notes .file a {
  padding-top: 1px;
}
// There are two imgs and I can't find the display formatter to remove it - a problem with media.module maybe!
img.file-icon {
  display: none;
}

// Autocomplete listing supplied by finder module
#autocomplete {
  border-color: @colorSecondary;
  div {
    padding: 0.5em 1em;
    border-top: 1px solid @colorTertiary;
    &:hover {
      cursor: pointer;
    }
  }
  li {
    white-space: normal;
    &.selected a {
      color: @colorWhite;
    }

  }
  &:first-child div {
    border-top: none;
  }
}
.finder-block {
  background-color: @colorPrimary;
  padding: 2em;
  margin-bottom: 2em;
  margin-left: -3%;
  .main-content & h2,
  h2 {
    color: @colorWhite;
    float: left;
    text-transform: uppercase;
    line-height: 2;
    padding: 0 2em 0 0;
    margin: 0 1em 0 0;
    background: url('@{theme_path}/images/menu-chevron.png') no-repeat 97.5% top;
  }
  form {
    margin-right: 0;
  }
  .form-item-title {
    margin: 0;
  }
  input.finder-element-title {
    background-repeat: no-repeat !important;
    width: 70%;
    &.throbbing {
      background-image: url('/misc/throbber.gif');
      background-position: 100% -18px;
    }
  }
  &.section-index-search {
    .views-exposed-form .views-exposed-widget {
      padding-top: 0;
    }
    .views-widget-filter-combine {
      width: 57%;
    }
    .views-exposed-form .views-submit-button {
      padding: 0;
    }
    .views-exposed-form input[type="text"] {
      width: 100%;
      padding: 1em;
    }
    .views-exposed-form .views-exposed-widget .form-submit {
      margin-top: 0;
      margin-right: 0;
      padding: 1em;
    }
  }
}
// Amendments to finder styling if content-meta is present
.content-meta + section {
  .finder-block {
    margin-left: 0;
    margin-right: 7%;
    input.finder-element-title {
      width: 62%;
    }
  }
}

// Override styles on forum add/edit page.
.page-node.node-type-forum,
.page-node.page-node-add-forum {
  .form-textarea-wrapper {
    width: 100%;
  }
  // Display to allow multiple image uploads for forum posts.
  form .form-managed-file input[type="submit"] {
     display: inline-block;
  }
}
.page-comment-reply .form-textarea-wrapper {
  width: 100%;
}

// Style forum moderate page.
.page-forum-moderate form .actions {
  .form-submit {
    display: block;
    float: left;
  }
  #edit-delete-thread {
    clear: left;
  }
}


/**
* $BUTTONS
*/

/* Buttons */
button,
input[type="button"],
input[type='submit'],
input[type='reset'],
input.btn,
a.btn,
.btn,
.page-content a.btn {
  padding: 0.8em 1.2em;
  background-color: @colorCherry;
  font-family: @fontPTSans;
  font-size: @sizeMS;
  color: @colorWhite;
  font-weight: 400;
  text-transform: uppercase;
  .border-radius(@borderRadius);
  border: none;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none;
  margin: 0.5em 0;
  margin-right: 0.5em;
  .transition(background ease-out 0.3s);
  &:hover {
    background-color: darken(@colorCherry, 10%);
    .transition(background ease-out 0.3s);
  }
  &:active {
    background-color: darken(@colorCherry, 15%);
    .transition(background ease-out 0.3s);
  }
  &:focus {
    background-color: darken(@colorCherry, 10%);
    .transition(background ease-out 0.3s);
  }
}

// Forum buttons
.page-content a.af-button-large,
.page-content a.af-button-small {
  .btn();
  color: @colorWhite;
  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
    color: @colorWhite;
  }
}
.page-content a.af-button-small {
  font-size: 0.9em;
  padding: 0 0.6em;
}

// Button styling to be applied manually to links
.page-content {
  a.btn {
    color: @colorWhite;

    &:hover {
      color: @colorWhite;
      text-decoration: none;
    }
  }

  a.link_button {
    .btn();
    &:hover {
      background-color: @colorLink;
      text-decoration: none;
      color: white;
    }
  }
}

.sso-login-link {
  margin-bottom: 1em;

  .sa {
    font-size: 1.1em;
    margin-left: 1em;
    vertical-align: middle;
  }
}

.page-content a.sso-wrapper-toggle {
  font-size: @sizeSS;
  color: @colorOffBlack;
  display: block;
  margin-top: @spacingL;
}

.limit-visible-items-toggle {
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.7em;
  padding-top: 1em;
  &:before {
    .fa-icon;
    content: @fa-var-angle-down;
    color: @colorMidGrey;
    font-size: @sizeXL;
    margin-right: 0.5em;
  }
  &.visible:before {
    content: @fa-var-angle-up;
  }
}

/* In page events and news styling blocks */
.page-content .event-item-content,
.page-content .news-item-content,
.node .node-event.view-mode-ow-listing-teaser,
.node .node-event-graduate.view-mode-ow_listing_teaser,
.node .node-research-case-study.view-mode-ow-listing-teaser,
.node-type-section-index .view-mode-ow_news_listing,
.node-type-section-index .field-name-field-student-gateway-events,
.node-type-section-index .field-name-field-graduate-events {
  .calendar-item();
  .group_event_details,
  .group-event-details,
  .group-news-details,
  .group-news-listing-details {
    padding-left: 3.75em;
    .field-type-date,
    .field-name-post-date,
    .field-name-field-event-type,
    .field-name-field-event-date,
    .field-name-field-news-type,
    .field-name-field-news-date,
    .field-name-field-news-classification {
      color: @colorMidGrey;
      font-size: @sizeSS;
      text-transform: uppercase;
      font-family: @fontPTSans;
    }
  }

  .group-news-listing-details,
  .group-research-case-study-details {
    padding-left: 7em;
  }
  h2 {
    font-size: @sizeM;
    margin: 0;
    line-height: 1.5em;
    text-transform: none;
  }
  a {
    color: @colorOffBlack;
    display: block;
    &:link:hover,
    &:hover {
      color: @colorAltLinkHover;
      text-decoration: none;
    }
  }
  .group-event-details h2,
  .group-news-details {
    max-width: 500px;
  }
}

.page-content .event-item-content,
.page-content .news-item-content {
  margin: 2.6em 0 0.75em 0;
}

.page-content .news-item-content {
  .clearfix();
  .news-thumbnail {
    float: left;
    margin-right: 1em;
    img {
      margin-left: 0;
      max-width: 88px;
    }
  }
  .group-news-details {
    padding-left: 0;
    float: left;
    position: relative;
  }
}

.node-type-section-index {
  .view-mode-ow_news_listing {
    .group-news-listing-details {
      .field-name-field-news-classification {
        .field-item,
        .field-item-single {
          float: left;
          padding-right: 0.5em;
          &:after {
            content: ",";
          }
          &:last-child:after {
            content: "";
          }
        }
        &:after {
          content: "|";
          float: left;
          padding-right: 0.5em;
        }
      }
    }
  }
}

// WYSIWYG button of "Any Questions" styling
.page-content a.self-service-button,
.page-content a.any-questions-button,
.page-content a.apply-button,
.page-content a.application-guide-button,
.node-type-section-index .main-content a.any-questions-button,
.node-type-section-index .main-content a.self-service-button,
.node-type-section-index .main-content a.apply-button,
.node-type-section-index .main-content a.application-guide-button {
  .btn();
  text-decoration: none;
  padding-left: 3.5em;
  background: url('@{theme_path}/images/any-qs.png') 20px 16px no-repeat @colorLink;
  &:hover {
    background-color: @colorCherry;
    text-decoration: none;
    color: @colorWhite;
  }
}
.page-content a.self-service-button {
  background: url('@{theme_path}/images/self-service-icon.png') 20px 17px no-repeat @colorLink;
}

// Colour apply and application buttons hover state green
.page-content a.apply-button,
.node-type-section-index .main-content a.apply-button {
  background-image: url('@{theme_path}/images/arrow-right@x2.png');
  &:hover {
    background-color: @colorGreen;
  }
}
.page-content a.application-guide-button,
.node-type-section-index .main-content a.application-guide-button {
  background-image: url('@{theme_path}/images/application-guide@x2.png');
  &:hover {
    background-color: @colorGreen;
  }
}

// Manually amend font-size for standard button sizing
.main-content a.apply-button,
.main-content a.application-guide-button {
  font-size: 0.88em;
}

// Remove submit button from courses autocomplete form
div.finder-form {
  input[type="submit"] {
    display: none;
  }
  // Remove default drupal spinner
  input.finder-element-title {
   background-image: none;
   background-position: 100% -18px;
  }
  .form-item-title {
    margin-top: 0;
  }
}

/**
* $IMAGES
*/

/* Do not float images by default.
   Option to float images in rich text using paragraph styles below */
.region-content p img {
  margin-left: 1em;
}
.wysiwyg-float-right {
  float: right;
  margin: @spacingS 7% @spacingS @spacingS;
  .media-image-wrapper {
    margin-bottom: 0;
  }
}
div.wysiwyg-float-right,
div.wysiwyg-float-left {
  margin-top: 0;
}
.field-name-field-body p.wysiwyg-float-left,
.wysiwyg-float-left {
  float: left;
  margin: @spacingS @spacingS @spacingS 0;
}
// Float college crest in related content field
.crest-right {
  float: right;
  margin: 5px 0 @spacingS @spacingS;
}

.media-image-wrapper {
  display: block;
  margin-right: 7%; /* should match blockquote position? */
  margin-bottom: 2em;
  img {
    float: left;
  }
  a {
    color: #fff;
    text-decoration: underline;
  }
  .group-description-inline-wrapper {
    width: 100%;
    color: @colorWhite;
    font-size: 0.85em;
    background-color: @colorT75Black;
    line-height: 1.3em;
    position: absolute;
    bottom: 0;
    font-family: @fontPTSans;
    .field {
      padding: 0.5em 1em;
      display: block;
    }
    .field-name-field-media-description {
      padding: 0.75em 2.5em 0.75em 1em;
    }
  }
}
p .media-image-wrapper {
  margin-bottom: 0;
}
.media-image-ow_content_full_width-wrapper {
  img {
    width: 100%;
    height: auto;
  }
}
.media-image-ow_content_medium-wrapper {
  width: 370px; /* need to set same width as ow_content_medium image img */
}

/* .wysiwyg-float-* is applied to the parent container */
img.wysiwyg-float-right,
img.wysiwyg-float-left {
  margin: 0;
}

/**
 *  $VIDEOS
 */
.media-vimeo-video,
.media-youtube-video {
  margin-right: 7%;
}

.field-name-field-background-video {
  .media-youtube-video {
    margin-right: 0;
  }
}

p {
  .media-vimeo-video,
  .media-youtube-video {
    // Kick video outside of paragraph tag
    margin-right: -7%;
  }
}

/**
 * Code used by both video wall and video highlight nodes
 */
#cboxContent {
  .border-radius(0);
}
#cboxLoadedContent {
  border: 1px solid #FFF;
  background-color: #FFF;
  .node-video-highlight.view-mode-colorbox {
    overflow: hidden;
  }
}
#cboxClose.cbox-close-plain {
  position: absolute;
  font-size: 40px;
  line-height: 38px;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
  background: @colorWhite;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

// Make close button appear halfway outside popup
#colorbox,
#cboxWrapper,
#cboxContent {
  overflow: visible !important;
}

#cboxLoadedContent .node-a-to-z-of-oxford.view-mode-colorbox,
#cboxLoadedContent .node-video-highlight.view-mode-colorbox,
body.node-type-video-highlight {
  .media-vimeo-video, .media-youtube-video {
    margin-right: 0;
  }
  .group-description {
    padding: 2em;
    overflow: hidden;
    h1 {
      font-size: @sizeXL;
      margin-bottom: 0.75em;
    }
    .field-name-field-body {
      color: @colorOffBlack;
      font-size: @sizeS;
      font-family: @fontPTSans;
      margin-bottom: 0;
    }
  }
}

#cboxLoadedContent .node-a-to-z-of-oxford.view-mode-colorbox {
  .field-name-field-image-highlight img {
    display: block;
    width: 65%;
    margin: 0 auto;
  }
  .group-title {
    margin: 0 0 0.5em 0;
    h2 {
      display: inline;
    }
    h3 {
      display: inline;
      font-size: 1.625em;
      font-weight: 700;
      &:before {
        content: '\00a0- ';
      }
    }
  }
}
 // Page node used for mobile view
.node-type-a-to-z-of-oxford .node-a-to-z-of-oxford.view-mode-full .field-name-field-image-highlight img {
  width: 100%;
  height: auto;
}


/* Mobile styling (when highlights are replaced with colorbox content on non-colorbox mobile versions) */
#main-content .highlight-group .node-video-highlight .js-mobile-video-highlight {
  padding: 1.2em @gutter_width;
  padding-bottom: 0.8em;
  border-bottom: 1px solid @colorTertiary;
  //background-color: @colorVeryLightBlue;

  h2 {
    margin: 0.5em 0;
    background-image: none;
    display: block;
  }
  &:hover h2 {
    color: @colorOffBlack;
  }
  .field-name-field-body {
    font-size: @sizeL;
    font-family: @fontPTSans;
    line-height: @lineHeight;
    p:last-child {
      margin-bottom: 0;
    }
  }
}

/* A-Z listing view */
.view-a-to-z-of-oxford .views-field-field-image-highlight img {
  width: 100%;
  height: auto;
}

/**
 *  $RELATED DOCS
 */

.file-media-link,
.field-name-field-document .file {

  margin-top: @spacingSSS;
  text-indent: -30px;
  margin-left: 30px;
  line-height: 1.2;
  .filetype {
    .file-icon-a("icon_unknown.png");
    .word-wrap();

    &--rtf {
      .file-icon-a("icon_rtf.png");
    }

    &--csv {
      .file-icon-a("icon_csv.png");
    }

    &--doc,
    &--docx {
      .file-icon-a("icon_doc.png");
    }

    &--gif {
      .file-icon-a("icon_gif.png");
    }

    &--jpg,
    &--jpeg {
      .file-icon-a("icon_jpg.png");
    }

    &--pdf {
      .file-icon-a("icon_pdf.png");
    }

    &--png {
      .file-icon-a("icon_png.png");
    }

    &--pps,
    &--ppsx {
      .file-icon-a("icon_pps.png");
    }

    &--ppt,
    &--pptx {
      .file-icon-a("icon_ppt.png");
    }

    &--txt {
      .file-icon-a("icon_txt.png");
    }

    &--xls,
    &--xlsx {
      .file-icon-a("icon_xls.png");
    }

    &--xml {
      .file-icon-a("icon_xml.png");
    }

    &--zip {
      .file-icon-a("icon_zip.png");
    }
  }

  .filesize {
    display: block;
    margin-left: 30px;
    text-transform: uppercase;
    font-size: @sizeSS;
    color: @colorSecondary;
    line-height: 1.6;
  }

}

/**
 * $VIEWS
 */

.has-feed-icon {
  .feed-icon {
    float: right;
    margin-top:-0.5em;
  }

  .view-content {
    clear: both;
    .clearfix();
  }
}

.views-exposed-form {
  input[type="text"] {
    padding: .5em 1em;
  }

  input[type="submit"] {
    background-color: @colorLink;
    .transition(background ease-out 0.1s);

    padding: .55em 1.2em;

    &:hover {
      background-color: @colorCherry;
      .transition(background ease-out 0.1s);
    }
  }
}
.view-research-case-studies {
  .views-exposed-form {
    .views-exposed-widget {
      .form-submit {
        margin-bottom: 1em;
      }
    }
  }
  form {
    margin-bottom: 2em;
  }
}

.node-event,
.node-expert,
.node-research-case-study,
.node-type-section-index {
  &.view-mode-ow_listing_teaser,
  &.view-mode-ow-listing-teaser {
    .clearfix();
    margin-bottom: 2em;

    .group_event_details,
    .group-event-details,
    .group-news-listing-details {
      padding-left: 3.75em;

      .field-type-date,
      .field-name-post-date,
      .field-name-field-event-type,
      .field-name-field-event-venue-locality,
      .field-name-field-outreach-target-age-range,
      .field-name-field-outreach-target-audience {
        color: @colorMidGrey;
        font-size: @sizeSS;
        text-transform: uppercase;
      }
    }

    h2 {
      font-size: @sizeM;
      margin: 0;
      line-height: 1.5;
      text-transform: none;

      a {
        color: @colorOffBlack;
        display: block;

        &:hover {
          color: @colorAltLinkHover;
          text-decoration: none;
        }
      }
    }
  }

  &.view-mode-ow_listing_item,
  &.view-mode-ow-listing-item {
    h2 {
      margin: 0 0 .5em;

      a {
        border: none;
        padding: 0;
      }
    }

    .field-type-date,
    .field-name-post-date,
    .field-name-field-event-date,
    .field-name-field-event-venue-locality,
    .field-name-field-outreach-target-age-range,
    .field-name-field-outreach-target-audience {
      color: @colorMidGrey;
      font-size: @sizeSS;
      text-transform: uppercase;
    }
  }
}

.view-listing.view-listing-news-special {
  .content-indent();

  .item-list ul li {
    margin-bottom: 1em;
    padding-bottom: 0;
  }
  h2 {
    font-size: @sizeXL;
    margin-bottom: 0;
    line-height: 1.5em;
  }
  a {
    color: @colorOffBlack;
    &:hover {
      color: @colorCherry;
      text-decoration: none;
    }
  }
  .field-type-date {
    color: @colorMidGrey;
    font-size: @sizeSS;
    text-transform: uppercase;
  }
  .field-name-field-body {
    margin-bottom: 0;
    font-size: @sizeM;
  }
}

.page-news-and-events-find-an-expert,
.page-news-and-events-find-an-expert-by-name,
.event-listing,
.news-listing,
.staff-consultations-listing,
.staff-consultation-issues-and-digest-listing,
.view-research-stories {
  .view-filters {
    form {
      background-color: @colorFilterFormGreen;
      padding: @gutter @gutter_width * 1.5;
      margin-left: -@gutter_width * 1.5;
      margin-right: 0;
      margin-bottom: 1.5em;

      label,
      .description {
        color: @colorWhite;
      }

      .form-submit {
        margin-top: 1.5em;
      }
    }

    #edit-search,
    #edit-title,
    #edit-field-consultation-audience-value {
      width: 16em;
      max-width: 16em;
    }

    #edit-field-research-department-tid,
    #edit-field-research-funder-tid {
      width: 16em;
      min-width: 16em;
    }

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

    .form-type-date-popup input {
      max-width: 10em;
      width: 10em;
    }
  }

  .view-header,
  .view-footer,
  .attachment {
    .ui-tabs-nav {
      margin-top: 1.5em;
      margin-bottom: 1.5em;
    }
  }

  &.view-display-id-block_5 {
    margin-bottom: 2.5em;
    .feed-icon {
      margin-top: 0;
    }
  }

  .views-field-title {
    h2, h3 {
      font-size: @sizeL;
      margin-bottom: 0;
      text-transform: none;

      a {
        color: @colorOffBlack;

        &:hover {
          color: @colorAltLinkHover;
          text-decoration: none;
        }
      }
    }
  }

  &.event-listing,
  &.news-listing,
  &.staff-consultations-listing,
  &.staff-consultation-issues-and-digest-listing {
    .view-mode-ow_listing_teaser,
    .view-mode-ow-listing-teaser,
    .view-mode-ow_listing_item,
    .view-mode-ow-listing-item {
      border-bottom: 1px solid @colorLightGrey;
      margin-bottom: 1em;
      padding-bottom: 1em;
    }
  }

  .field-name-field-event-type {
    font-family: @fontPTSans;
  }
}
// Override form styling for Experts listing by name
.page-news-and-events-find-an-expert,
.page-news-and-events-find-an-expert-by-name {
  .label {
    display: none;
  }
  .views-exposed-widget .form-submit {
    margin-top: 0em;
  }
}
.news-listing {
  .view-filters {
    form {
      margin-bottom: 1.5em;
      padding-bottom: @gutter * 2;
    }
  }
}

//Not sure if this is needed or used
.view-student-news-and-events {
  font-size: 1.125em;
  .field-name-field-event-date,
  .field-name-field-news-date {
    &:before {
      content: ' | ';
    }
  }
  // This font size is tweaked manually to ensure matching sizes. There are
  // parent font size changes which require this.
  .date-calendardate {
    font-size: 1.1em;
  }
  .view-mode-ow_listing_item a {
    padding:0;
  }
}

// Style Graduate Events listing
.view-events-graduate {
  .node-event-graduate {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid @colorLightGrey;
  }
}

// Style borrowed from views.css and applied to exposed filters with more than
// one option, like dates with 'between' set.
.view-staff-news .views-exposed-form .views-exposed-widget > div > div {
  float: left;
  padding: .5em 1em 0 0;
}

/**
* $VIEWS LISTINGS
* manually set 'view-listing' class on view
* Used on: News, Blog
*/
.view-listing {
  padding: 0;
  margin: 0;
  .item-list ul {
    margin: 0;
    padding: 0;
  }
  .item-list ul li {
    list-style: none;
    margin: 0;
    .clearfix;
    //.dotted-line-bottom; // missing function
    padding-bottom: 1.538em; /* 20px based on 13px */
    margin-bottom: @spacingM;
  }
  .item-list ul li.views-row-last {
    margin-bottom: 0;
  }
  .node {
    padding-bottom: 0;
  }
  .field-name-field-image-listing {
    float: left;
    width: 98px;
    margin-right: @spacingMS;
    img {
      width: 90%;
      height: auto;
    }
  }
  .group-details,
  .details {
    float: left;
    width: 496px;
    margin-top: -4px; /* Alignment of date with image */
  }
  .group-byline {
    .field-name-post-date,
    .field-type-date,
    .date {
      font-size: 1em; /* upsize it again as it has been reduced twice */
    }
    a,
    .field-name-field-author-nid a {
      text-decoration: underline;
      color: @colorSecondary;
    }
  }
  .category-heading { /* custom class added via Expert node on DS */
    //.listing-category-heading; // missing function
  }
  .views-field-title,
  h2 {
    //.listing-heading(); // missing function
  }
  .field-name-node-link a,
  .read-more a {
    //.gold-read-more; //missing function
  }
  .views-field-comment-count {
    font-family: @fontPTSans;
    margin-bottom: @spacingS;
  }
  .views-field.views-field-nid a,
  .views-field-view-node {
    //font-family: @fontArial; //missing var
  }

  /* Blog overrides */
  .node-blog {
    h2 a {
      color: @colorSecondary;
    }
  }
}

.block-grey .view-listing {
  .item-list ul li {
    margin: 0;
    padding: 0;
  }
}

/* Expand width of radio buttons to allow them to be selected on diff screens */
.page-node-moderation-diff form .diff-revision input[type="radio"] {
  width: auto;
}
.view-listing-short {
  .field-name-field-body {
  //.listing-description(); //missing var
    p {
      margin: 0;
    }
  }
}
.view-listing-long {
  .field-name-field-image-listing {
    float: right;
    width: 98px;
    margin-right: 0;
    margin-left: @spacingMS;
  }
  .group-details {
    width: auto;
    float: none;
  }
  .field-name-field-body {
    margin-bottom: @spacingMS;
  }
}

.view-listing-hide-category-heading {
  .category-heading {
    display: none !important; /* easy way to hide category when on the category listing page where each node has the same category anyway */
  }
}

.field-name-field-view-reference {
  margin-bottom: 2em;
}
.view-course-listing h3 {
  margin: 1em 0 0 0;
}

/* Course listing styles */

.view-course-listing-and-search {

  .view-header,
  .view-empty {
    width: 82%;
    margin-top: 2em;
  }

  .view-header {
    display: block;

    .course-heading-label,
    .course-mode-of-study-label,
    .course-duration-label {
      float: left;
      box-sizing: border-box;
      padding: .75em .5em;
      font-weight: 700;
      font-size: 1.125em;
    }

    .course-heading-label {
      width: 55%;
    }

    .course-mode-of-study-label {
      width: 21%;
    }
    .course-duration-label {
      width: 24%;
    }

  }

  .view-content {
    clear: left;
    width: 82%;

    h3 {
      width: 100%;
      padding: .5em;
      margin: 0;
      box-sizing: border-box;
      border-top: 1px solid @colorLightGrey;
    }
  }

  .course-listing {

    border-top: 1px solid @colorLightGrey;

    &:hover {
      background-color: @colourVLightGrey;
    }
    &:last-child {
      border-bottom: 1px solid @colorLightGrey;
    }

    .course-cell {
      float: left;
      padding: 1em .5em;
      box-sizing: border-box;
    }

    .course-heading {
      width: 55%;
    }

    .course-title {
      font-family: @fontPTSerif;
      font-weight: 700;
      font-size: 1.125em;
    }

    .course-department {
      font-family: @fontPTSerif700Italic;
      font-style: italic;

      p {
        margin-bottom: 0;
      }
    }

    .course-mode-of-study,
    .course-length{
      width: 21%;
    }

    .course-duration,
    .course-degree-obtained{
      width: 24%;

    }

  }

  .form-item-combine input {
    width: 33em;
  }
}
// Reset font sizes on Graduate College pages.
.field-name-field-body-multiple .view-course-listing-and-search {
  .view-header .course-heading-label,
  .view-header .course-mode-of-study-label,
  .view-header .course-duration-label {
    font-size: 100%;
  }
  .course-title {
    font-size: 90%;
  }
  .course-cell {
    padding: 0.5em;
  }
  .course-listing .course-department,
  .course-listing .course-mode-of-study,
  .course-listing .course-duration {
    font-size: 0.889em;
  }
  .view-content h3 {
    font-size: 1.17em;
  }
}

/* undergraduate admissions test view */
.view-id-course_listing_and_search.view-display-id-block_5 {

  .view-filters {
    padding: 2em 0 1em;
    border-top: 1px solid @colorLightGrey;
  }

  .results-heading {
    font-size: 1em;
    font-weight: bold;
    margin-top: 0;
  }

  .view-content {
    padding-bottom: 2em;
  }

  .view-empty {
    padding-bottom: 1em;
    margin: 0 0 2em;
    border-bottom: 1px solid @colorLightGrey;
  }
}

/**
* $GENERAL
*/

.main-content .field-name-field-author-nid {
  margin-bottom: @spacingMS;
}
// Red, bold text
.red {
  color: @colorCherry;
}
.field-type-date,
.group-research-case-study-details {
  font-family: @fontPTSans;
}

body:not(#tinymce) div.more-less {
  // This is a mixin for clarity. margin-right: 18%;
  .content-indent(); //Content-indent
  padding: 0.5em;
  border-top: 1px solid @colorLightGrey;
  p:not([class^=wysiwyg-float]) {
    // Remove default right margin
    margin: 1em 0;
  }
  div[class*=wysiwyg-float-] {
    margin-top: 1em;
  }

  > * {
    display: none;
    padding-left: 40px; // to match the padding on the h3 above
  }

  h3 {
    cursor: pointer;
    background: url('@{theme_path}/images/faqs-arrow-down.png') 4px 4px no-repeat;
    min-height: 27px; // BG image height + bg position;
    padding: 5px 10px 5px 40px;
    margin-top: 0.5em;
    font-family: @fontPTSerif;
    font-weight: 700;
    font-size: 1em;
    display: block;
    &:hover {
      color: @colorCherry;
    }
  }
  &.show {
    background-color: @colourVLightGrey;
    h3 {
      background-image: url('@{theme_path}/images/faqs-arrow-up.png');
      &:hover {
        color: inherit;
      }
    }
    > * {
      display: block;
    }
  }
  &.simple-style {
    border-top: none;
    border-bottom: 1px solid @colorLightGrey;
    margin-left: 0;
    padding: 0;
    h3 {
      background: url('@{theme_path}/images/faqs-arrow-down.png') right top no-repeat;
      padding: 0 40px 0 0;
      font-weight: normal;
      margin-bottom: 1.25em;
      min-height: 23px; // BG image height;
    }
    p {
      padding-left: 0;
      margin-right: 40px;
    }
    a {
      color: @colorLink;
      display: inline;
      border: none;
    }
    &.show {
      background: none;
      h3 {
        background-image: url('@{theme_path}/images/faqs-arrow-up.png');
      }
    }
  }
}


/* Editors use this class */
.key-dates {
  background-color: @colorTertiary;
  border: 2em solid @colorTertiary;
  width: 100%;
  margin-bottom: 2em;
  margin-top: 2em;
  caption {
    background-color: @colorTertiary;
    margin-bottom: 0;
    padding: 2em 2em 0;
    text-align: left;
    text-transform: uppercase;
    font-weight: bold;
  }
  thead {
    text-transform: uppercase;
    font-size: @sizeSS;
    td {
      padding-top: 0;
    }
  }
  td {
    border-width: 0 0 1px 0;
  }
  &.small {
    border: none;
    margin-top: 0em;
    caption {
      padding: 0em;
    }
  }
}

div.did-you-know {
  background-color: @colorTeal;
  color: #fff;
  padding: 1em 2em;
  margin-bottom: 2em;
  h2,
  h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: @sizeM;
    font-weight: bold;
    margin-top: 1em;
  }
  p,
  span {
    font-family: @fontPTSans;
    font-size: @sizeM;
  }
  .large-emphasis {
    font-size: 90px;
    margin: 0.5em 0;
    letter-spacing: -0.05em;
  }
  // Ensure overriding of small news p styling
  p.large-emphasis {
    margin: 0.5em 0;
    letter-spacing: -0.05em;
  }
  .text-small {
    font-size: 14px;
  }
  .text-large {
    font-size: 45px;
  }
  .large-emphasis,
  .text-small,
  .text-large {
    line-height: 1;
  }
}
.field-name-field-news-small {
  .field-item:first-child .did-you-know h2,
  .field-item:first-child .did-you-know h3,
  .field-item:first-child .did-you-know h2.title {
    margin-top: 1em;
  }
  .did-you-know {
    p {
      margin: inherit;
    }
  }
}
.page-content-sidebar-second .did-you-know {
  margin: -@sidebarExtraTopMargin -10.202% -@sidebarBottomMargin;
}
html .link-list {
  border-top: 1px solid @colorLightGrey;
  li {
    list-style: none;
    background-image: none;
    padding: 0.5em 0;
    border-bottom: 1px solid @colorLightGrey;
  }
}
.student-links {
  border-top: 1px solid @colorLightGrey;
  p {
    border-bottom: 1px solid @colorLightGrey;
    margin: 0;
    padding: 0.5em 0;
  }
}
// Hide the twitter block on all pages other than /students
.field-name-block-temp-twitter-block {
  h2.title {
    font-size: @sizeM;
    text-transform: uppercase;
  }
}
.page-students .field-name-block-temp-twitter-block,
.student-block {
  display: block;
  margin-bottom: 1em;
  h2,
  .label {
    font-size: @sizeM;
    text-transform: uppercase;
  }
  select {
    margin: 1em 0;
  }
  .field-name-field-body {
    font-size: 100%;
    line-height: inherit;
    margin-bottom: 0;
    p {
      margin-right: 0;
    }
  }
}

// Ensure paragraphs show in editor
#tinymce .more-less p {
  display: block;
}

// Styling for traffic lights on student gateway
.green-light,
.orange-light,
.red-light,
.blue-light {
  margin-left: 1.5em;
  &:before {
    border-width: 8px;
    border-style: solid;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    .border-radius(50%);
    margin-left: -1.5em;
    margin-top: 4px;
  }
}
.green-light:before {
  border-color: @colorTrafficGreen;
}
.orange-light:before {
  border-color: @colorTrafficOrange;
}
.red-light:before {
  border-color: @colorTrafficRed;
}
.blue-light:before {
  border-color: @colorTrafficBlue;
}

.audience-copy,
.important-copy {
  padding: 1em;
  div& {
    margin-right: 18%;
    margin-bottom: 1em;
    // If following set to 0, padding disappears on child paragraphs.
    padding-bottom: 0.01em;
    p {
      margin-right: 0;
    }
  }
}
.audience-copy {
  background-color: @colorBeigeGrey;
}
.important-copy {
  background-color: @colorLink;
  color: @colorWhite;
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: @colorWhite;
  }
  // Following to cover all cases already used to ensure override.
  a,
  a:link,
  a:link:visited,
  a:link:hover,
  a:link:active,
  a:link:focus {
    color: lighten(@colorLinkOverlay, 10%);
  }
  ul li {
    background-image: url('@{theme_path}/images/small-bullet-white.png');
  }
}

.gsa-survey {
  background: @colorTeal;
  color: @colorWhite;
  .border-box();
  padding: 1.5em;
  p {
    font-size: @sizeL;
    line-height: 1.5;
  }
  a {
    .btn();
    background-color: @colorLink;
    color: @colorWhite !important;
  }
  span {
    font-family: @fontPTSans;
    font-size: @sizeS;
  }
}

/**
 * $PAGER
 */

ul.pager {
  margin: @spacingM 0 0 0;
  padding: 13px 20px;
  font-family: @fontPTSans;
  font-size: @sizeS;
  background-color: @colorTertiary;
  text-align: center;

  li {
    padding: 0.5em;
    margin-right: 0.5em;
    line-height: 0.75em;
    &.current {
      font-weight: bold;
      color: @colorOffBlack;
      border-color: @colorBlack;
    }
    &.next, &.last, &.previous, &.first {
      text-transform: uppercase;
      font-size: @sizeS
    }
  }
  a:hover, a:focus {
    outline: none;
  }
}

/**
 * $CORE OVERRIDES
 */

/* Tabs */
ul.tabs {
  padding: 0 0 0 2em;
  margin: 0.5em 0;

  li {
    display: inline;
    padding: 0.2em 0.5em;
  }

  ul.primary {
    font-size: 1.1em;
  }

  ul.secondary {
    padding-left: 3em;
    padding-bottom: 0.4em;

    li {
      border: none;

      &:first-child {
        border-width: 0;
      }
    }
  }
}

/* Drupal admin tables look weird without this */
.page-admin table {
  width: 100%;
}

/** Error messages in Drupal
 * Overall layout and sensible defaults: apply to .messages
 * This assumes .messages = .warn , with overrides later in file
 */
.admin-output {
  margin: 20px 0 0 0;
}
.drupal-messages {
  margin-right: 25px;
}
div.messages,
div.workbench-info-block {
  border: none;
  //font-size: @fontM; // missing var
  font-family: @fontPTSans;
  font-weight: bold;
  color: lighten(@colorBlack, 40%);
  padding: @spacingS @spacingM @spacingS @spacingXL;
  margin: 0 1em 0.5em 0;

  /* Default is warning, in case some module sets a weird message type */
  .text-shadow(1px 1px 1px @colorWhite);
  border-left: 10px solid darken(@colorWarning, 5%);
  /* IMG MISSING: background: url("@{theme_path}/images/warning-icon.png") no-repeat 7px 10px lighten(@colorWarning, 50%) */;
}

/* Avoid weird spacing on contained elements */
div.messages ul {
  margin: 0;
}
div.messages li {
  list-style: none;
}

// Status messages are OK i.e. green
div.alert-success,
div.status {
  border-left: 10px solid darken(@colorStatus, 5%);
  /* IMG MISSING! background: url("@{theme_path}/images/tick-icon.png") no-repeat 7px 10px lighten(@colorStatus, 50%);*/
}

// Error messages are bad i.e. red
div.alert-error,
div.error {
  border-left: 10px solid darken(@colorError, 5%);
  background: url("@{theme_path}/images/cross-icon.png") no-repeat 7px 10px @colorErrorLight;

}
.page-node-add .page-content-container div.error,
.page-node-edit .page-content-container div.error {
  background-image: none;
  background-color: transparent;
}

.password-parent,
.confirm-parent {
  clear: left;
  margin: 0;
  width: 48.5em;
}

.password-confirm {
  float: none;
  margin-bottom: 0;
}

.password-indicator div {
  background-color: @colorError;
}

div.form-item div.password-suggestions {
  ul li {
    font-family: @fontPTSans;
    list-style: disc inside;
  }
  margin-bottom: 1.2em;
  border: none;
}

.password-strength,
div.password-confirm {
  width: 14em;
  float: right;
  margin-top: 1.8em;
}

div.passowrd-confirm {
  margin-top: 2.2em;
}

/**
 * $CONTENT META
 */

.row .content-meta {
  padding-top: 0;
  position: relative;

  .block-sharebar {
    position: absolute;
    right: 0;
  }

  .field-name-field-media-date-published,
  .field-name-field-author-nid,
  .field-name-post-date,
  .field-name-workbench-last-published {
    .label {
      .meta();
      display: block;
      text-align: right;
      white-space: nowrap;
    }
    time,
    & {
      display: block;
      font-family: @fontPTSans;
      font-size: @sizeS;
      font-weight: bold;
      text-transform: uppercase;
      text-align: right;
    }
    .field-item {
      padding-bottom: 0.3125em;
      margin-bottom: 0.3125em;
      border-bottom: 1px solid @colorTertiary;
      &:last-child {
        border: none;
      }
    }
  }
}






/**
 * $MAIN CONTENT
 */

.main-content {
  background: @colorWhite;
  padding-bottom: 5em;
}
.page-content {
  .row {
    background-color: @colorWhite;
  }
}

/* Push main content over the top of featured images. */
body.has-pre-content.node-type-blog,
body.has-pre-content.node-type-news-item,
body.has-pre-content.node-type-page,
body.has-pre-content.node-type-page-tabbed,
body.has-pre-content.node-type-course,
body.has-pre-content.node-type-college,
body.has-pre-content.node-type-graduate-course,
body.has-pre-content.node-type-graduate-college,
body.has-pre-content.node-type-research-case-study {
  .main-content {
    margin-top: -93px;
    position: relative;
    padding-bottom: 1.625em;
    /* removed to reduce spacing between breadcrumb and title
    h1 {
       margin-top: 0.2em;
    }
    */
  }
  .breadcrumb {
    // removed to reduce the height of breadcrumbs
    // padding-top: 2.1875em;
    padding-bottom: 10px;
    padding-top: 18px;
  }
}

/* If we have no introduction */
body.has-pre-content.node-type-blog .field-name-field-body {
  padding-top: 0em;
}

/* Full width styles (no sidebars) */
body.page-full-width {
  &.no-sidebars .main-content {
    .column(12, 0);
    padding-left: @gutter_width;
  }
  &.one-sidebar .main-content,
  &.two-sidebars .main-content {
    .column(9, 0);
    padding-left: @gutter_width;
  }
}

/**
 *  $POST CONTENT
 */

.row .post-content {
  font-family: @fontPTSans;
  .back-to {
    margin-top: 2em;
    padding-top: 1px;
    a {
      display: block;
      padding-left: 20px;
      padding-right: 5px;
      background: url('@{theme_path}/images/chevron-left.png') no-repeat left 50%;
      text-decoration: none;
      h2 {
        margin-bottom: 0;
        text-transform: uppercase;
      }
      span:hover {
        text-decoration: underline;
      }
    }
    .contextual-links-trigger {
      background: none;
    }
  }
  h2,
  .label-above,
  .label {
    margin-bottom: 12px;
    line-height: 1.3em;
    font-size: @sizeS;
  }
  .group-related {
    border-top: 1px solid @colorLightGrey;
    .field-group-field-odd,
    .field-group-field-even {
      border: 0;
      width: 48%;
      margin: 2.2em 0 1em 0;
      padding: 0;
    }
    .field-group-field-odd {
      clear: both;
      float: left;
    }
    .field-group-field-even {
      float: right;
    }
  }
}

.row .post-content .field-name-workbench-last-published {
  .label {
    .meta();
    display: block;
    margin-bottom: 6px;
  }

  & {
    display: block;
    font-family: @fontPTSans;
    font-size: @sizeS;
    font-weight: bold;
    text-transform: uppercase;
  }
  .field-item {
    padding-bottom: 0.3125em;
    margin-bottom: 0.3125em;
    border-bottom: 1px solid @colorTertiary;
    &:last-child {
      border: none;
    }
  }
}



/* $FOOTER */

.page-footer {
  a {
    color: @colorWhite;
    &:hover {
      text-decoration: none;
    }
  }
  .site-map a {
    opacity: 0.75;
    &:hover {
      opacity: 1;
    }
  }
  .row {
    padding: 1.875em 1.875em 0 1.875em;
    background: @colorPrimary;
    font-family: @fontPTSans;
    .clearfix();
    .visitor-type-links {
      margin-bottom: 1.250em;
      ul {
        margin: 0;
      }
      width: 47.5%;
      display: inline-block;
      .hoz-list-fix();
      a {
        text-transform: uppercase;
      }
    }
    .visitor-type-links {
      padding-right: 5%;
      float: left;
      padding-bottom: 30px;
      border-bottom: 1px solid @colorLightPrimary;
    }
    .site-map {
      .sitemap-item {
        float: left;
        padding-left: 2.5%;
        padding-right: 2.5%;
        border-left: 1px solid @colorLightPrimary;
        width: 25%;
        .box-sizing(border-box);
        h2 {
          font-size: @sizeM;
          font-weight: 400;
          color: @colorWhite;
          text-transform: uppercase;
        }
        ul {
          margin: 0 0 2em 0;
          li {
            list-style: none;
            margin-bottom: 0.3em;
            a {
              font-size: @sizeSS;
              display: inline-block;
              line-height: 1.2em;
            }
          }
        }
        &.footer-logo-wrapper {
          height: 128px;
          background: url('@{theme_path}/images/logo-footer.png') right center no-repeat;
          border: none; // remove left side border from styling
          min-width: 128px;
          .hidden();
        }
      }
    }
    .social-links {
      border-bottom: 1px solid @colorLightPrimary;
      padding: 0 0 1em 0;
      margin: 0 0 2em 0;
      color: @colorWhite;
      text-transform: uppercase;
      font-size: 1.125em;
      h2 {
        font-size: @sizeMS;
        font-weight: 400;
        color: @colorWhite;
        text-transform: uppercase;
        float: left;
        line-height: 40px;
      }
      .clearfix();
      .social {
        margin: 0;
        padding: 0;
        li {
          float: left;
          display: block;
          line-height: 40px;
          a {
            width: 36px;
            height: 36px;
            display: inline-block;
            margin-left: 0.5em;
            text-align: center;
            color: @colorWhite;
            .border-radius(@borderRadius);
            .hidden();
            .transition(background-color ease-in 0.1s );
            background-image: url('@{theme_path}/images/oxweb-footer-icons-v4.png');
            background-repeat: no-repeat;
            &.itunes {
              background-position: 0px -36px;
              background-color: @colorOrange;
              margin-left: 1em;
              &:hover {
                background-position: 0px 0px;
                background-color: @colorWhite;
              }
            }
            &.youtube {
              background-position: -36px -36px;
              background-color: @colorCherry;
              &:hover {
                background-position: -36px 0px;
                background-color: @colorWhite;
              }
            }
            &.facebook {
              background-position: -72px -36px;
              background-color: @colorDeepBlue;
              &:hover {
                background-position: -72px 0px;
                background-color: @colorWhite;
              }
            }
            &.twitter {
              background-position: -108px -36px;
              background-color: @colorLightBlue;
              &:hover {
                background-position: -108px 0px;
                background-color: @colorWhite;
              }
            }
            &.linkedin {
              background-position: -144px -36px;
              background-color: @colorLagoonBlue;
              &:hover {
                background-position: -144px 0px;
                background-color: @colorWhite;
              }
            }
            &.weibo {
              background-position: -180px -36px;
              background-color: @colorWeibo;
              &:hover {
                background-position: -180px 0px;
                background-color: @colorWhite;
              }
            }
            &.oxford-apps {
              background-position: -214px -36px;
              background-color: @colorGreen;
              &:hover {
                background-position: -214px 0px;
                background-color: @colorWhite;
              }
            }
            &.instagram {
                background-position: -290px -35px;
                background-color: @colorInstagram;
                &:hover {
                  background-position: -290px 0px;
                  background-color: @colorWhite;
                }
              }
            &.google-plus {
              background-position: -328px -40px;
              background-color: @colorGooglePlus;
              &:hover {
                background-position: -328px 3px;
                background-color: @colorWhite;
              }
            }
            &.medium {
              background-position: -364px -36px;
              background-color: @colorMedium;
              &:hover {
                background-position: -364px 0px;
                background-color: @colorWhite;
              }
            }
            &.the-conversation {
              background-position: -403px -34px;
              background-color: @colorTheConversation;
              &:hover {
                background-position: -403px -1px;
                background-color: @colorWhite;
              }
            }
          }
          &.any-questions {
            float: right;
            font-size: 0.875em;
            line-height: 36px;
            a {
              width: auto;
              background: url('@{theme_path}/images/oxweb-footer-icons.png') no-repeat -250px -36px;
              text-indent: 0;
              padding-left: 48px;
              text-transform: none;
              &:hover {
                background-position: -250px 0px;
              }
            }
          }
        }
      }
    }
    .legals-questions {
      margin-top: 1.5em;
      border-top: 1px solid @colorLightPrimary;
      padding: 1em 0;
      ul {
        margin: 0;
        .hoz-list-fix();
        li {
          font-size: @sizeSS;
        }
        li.copyright {
          color: @colorCopyrightGrey;
        }
      }
    }
  }
}

/**
 * $SIDEBARS
 */
.page-content-sidebar-first,
.page-content-sidebar-second {
  font-family: @fontPTSans;
  overflow: hidden;
}

/* IF we have just the one sidebar we don't want padding at the top */
body.one-sidebar {
  .page-content-sidebar-first {
    padding-top: 0;
  }
  /* Exceptions is for transparent menu blocks */
  .page-content-sidebar-first:first-child nav.block-menu-block  {
    padding-top: 20px;
  }
}

.node-type-gateway-staff .content-meta,
.post-content,
.page-content-sidebar-first,
.page-content-sidebar-second {
  /*
   * By default, each field has a grey box with margin underneath (multiple values are grouped together)
   */
  .block-grey,
  .block .group-related >.field,
  .block .group-sidebar-related >.field,
  .block >.field {
    background-color: @colorTertiary;
    padding: @sidebarBottomMargin @sidebarSidePadding;
    margin-bottom: @sidebarBottomMargin;

    >.field-item-single {
      display: block;
    }
    .field-item {
      margin-bottom: @sidebarBottomMargin;
    }
    .field-item-last {
      margin-bottom: 0;
    }

    h2,
    h3,
    .label-above {
      display: block;
      text-transform: uppercase;
      font-weight: bold;
    }
    h2,
    .label,
    .label-above {
      font-size: @sizeM;
    }
    h3 {
      font-size: @sizeMS;
    }
    .label {
      display: block;
      text-transform: uppercase;
    }
  }

  .block-grey {
    padding-top: @sidebarExtraTopMargin;
  }
  .block .group-sidebar-related {
    background-color: @colorTertiary;
    margin-bottom: @sidebarBottomMargin;
    padding-top: @sidebarExtraTopMargin;

    >.field {
      background-color: transparent;
      margin-bottom: 0;
      padding: 0 @sidebarSidePadding/2 @sidebarExtraTopMargin;

      // Indent these further so they match the other sidebar side margins
      .label,
      .label-above,
      .oxweb-field-minimal-wrapper .file {
        padding-left: @sidebarSidePaddingInner;
        padding-right: @sidebarSidePaddingInner;
      }

      .field-item-single {
        padding-left: @sidebarSidePaddingInner;
        padding-right: @sidebarSidePaddingInner;
      }
      .label + .field-item-single,
      h2 + .field-item-single,
      .field-item {
        // Add bullet to each field item
        padding-left: @sidebarSidePaddingInner + 3;
        padding-right: @sidebarSidePaddingInner;
        background: url('@{theme_path}/images/small-bullet.png') no-repeat @sidebarSidePaddingInner 9px;
        a {
          display: block;
        }
      }
      .field-item {
        margin-bottom: 0;
      }
    }
    .oxweb-field-minimal-wrapper,  // related document doesn't use field-item class
    .field-item-single,           // when only single value provided, field-items wrapper is not added
    .field-items {
      border-bottom: 1px solid @colorLightGrey;
      padding-bottom: @sidebarBottomMargin;
      margin-bottom: 0;
    }
    .field-group-field-last {
      .oxweb-field-minimal-wrapper,
      .field-item-single,
      .field-items {
        border-bottom: 0;
        padding-bottom: 0;
      }
    }
  }
  .block .group-post-content-related {
    >.field {
      background-color: transparent;
      padding: 0;
      >.field-item-single,
      .field-item {
        // Add bullet to each field item
        padding-left: 8px;
        background: url('@{theme_path}/images/small-bullet.png') no-repeat left 9px;
        a {
          display: block;
        }
      }
      .field-item {
        // Remove bottom border between each field item (we already have them between each field)
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }
    .field-name-field-graphical-teaser-ref {
      >.field-item-single,
      .field-item {
        padding-left: 0;
        background-image: none;
      }
    }
  }

  .block >.field .field-item {
    // Add bullet to each field item
    margin-bottom: 0;
    padding-left: 3%;
    padding-bottom: 0;
    border-bottom: 0;
    background: url('/sites/default/themes/custom/oxweb/images/small-bullet.png') no-repeat 0 9px;
  }

  .block .field-name-field-contact,
  .block .field-name-field-contact-event-booking {
    padding-top: @sidebarExtraTopMargin;
    .label {
      margin-bottom: 0.45em;
    }
    h3 {
      margin-bottom: 0.3em;
      text-transform: none;
      font-weight: bold;
    }
    .field-type-image {
      float: right;
      width: 30%;
      margin-left: 0.65em;
      margin-bottom: 0.65em;
      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .group-sidebar-related .field-name-field-blog-related,
  .group-sidebar-related .field-name-field-blog-related.field-group-field-last {
    .field-item-single,
    .field-items .field-item {
      background: none;
      padding-left: @sidebarSidePaddingInner;
    }
  }

  .block-grey {
    &>h2.title {
      text-transform: uppercase;
    }
  }

  /* Just the related content areas */
  .block .field-name-field-related-content,
  .block .field-name-field-related-content-top,
  /* Use similar styles for Feeds blocks */
  .block .view-feeds
   {
    h2 {
      margin-bottom: 0.2em;
    }
    ul {
      margin: 0;
    }
    ul + * {
      margin-top: 1em;
    }
  }

  /*
   * For Graphical teasers, Top Related Content, and Bottom Related Content,
   *  Show each field item in its own grey box (as if a separate field)
   */
  .block .field-name-field-graphical-teaser-ref,
  .block .field-name-field-related-content,
  .block .field-name-field-related-content-top {
    background-color: transparent;
    margin: 0;
    padding: 0;

    >.field-item-single,
    .field-item { // Remove bottom border between each field item
      border-bottom: 0;
      padding-bottom: 0;
    }

    >.field-item-single,
    .field-item,
    .field-item-last {
      margin-bottom: @sidebarBottomMargin;
      background: none;
    }
  }
  .block .field-name-field-related-content {
    .field-item-single,
    .field-item {
      background-color: @colorTertiary;
      padding: @sidebarExtraTopMargin 7.9% @sidebarBottomMargin;
    }

    /* Class manually added in RichText by editor */
    .please-note {
      //.box-sizing(content-box);
      background-color: @colourVLightGrey;
      padding: @sidebarExtraTopMargin @sidebarSidePaddingPleaseNote @sidebarBottomMargin;
      margin: -@sidebarExtraTopMargin -@sidebarSidePaddingPleaseNote -@sidebarBottomMargin;
      border-left: 1px solid @colorLightGrey;
    }
  }

  /* Class applied manually to block, to match above */
  .sidebar-block,
  .sidebar-block-white {
    background-color: @colorTertiary;
    padding: @sidebarExtraTopMargin @sidebarSidePadding @sidebarBottomMargin;
    margin-bottom: @sidebarBottomMargin;
    h2,
    h3 {
      text-transform: uppercase;
    }
    h2 {
      font-size: @sizeM;
    }
    h3 {
      font-size: @sizeMS;
    }
    img {
      max-width: 100%;
      height: auto;
    }

    &.block-block {
      ul {
        margin-left: 0;
      }
    }
  }

  .sidebar-block-white {
    background-color: @colorWhite;
  }

  .block .field-name-field-graphical-teaser-ref {
    >.field-item-single,
    .field-item {
      position: relative;
    }
    .file {
      margin: 0;
    }
    .field-name-field-gt-image {
      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }
    .field-name-field-gt-caption {
      width: 80%;
      .border-box();
      position: absolute;
      bottom: 0;
      font-weight: bold;
      font-size: @sizeL;
      padding: @spacingS @sidebarSidePadding;
      margin: 0;
      background-color: @colorTertiary;
      line-height: 1.2;
      a {
        display: block;
        background: url('@{theme_path}/images/dark-grey-chevron.png') no-repeat right center;
        padding-right: 1em;
      }
    }
    .field-name-field-gt-image:hover + .field-name-field-gt-caption {
      a {
        text-decoration: underline;
      }
    }
  }
}

// Override default bottom margin for telephone field
.page-content-sidebar-second .block .field-name-field-telephone .field-item {
  margin-bottom: 0;
}
.page-content-sidebar-second .block .field-name-field-twitter a:before {
        display: block;
    content: '';
    float: left;
    background: url('@{theme_path}/images/oxweb-footer-icons-v4.png');
    height: 23px;
    width: 23px;
    background-position: -115px -5px;
}

// Override styling for course page to stop h2 in sidebar from being uppercase
.node-type-course,
.node-type-graduate-course {
  .page-content-sidebar-second {
    .block {
      .group-related {
        >.field {
          h2 {
            text-transform: none;
          }
        }
      }
    }
  }
}

/* Sidebar Menu */
.page-content-sidebar-second,
.page-content-sidebar-first {
  .block-menu-block {
    padding: 0 @sidebarSidePaddingInner @sidebarBottomMargin;

    a {
      &:hover {
        text-decoration: none;
      }
    }
    h2.title {
      font-size: @sizeM;
      text-transform: uppercase;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid @colorSelectGradEnd;
      a {
        color: @colorOffBlack;
        font-weight: bold;
        display: block;
        padding: 0.8em @sidebarSidePaddingInner;
      }
    }
    ul, li {
      list-style-type: none;
      list-style-image: none;
      margin: 0;
    }
    ul {
      margin-bottom: 1em;
      li {
        border-bottom: 1px solid @colorSelectGradEnd;
        line-height: 1.3em;
        a {
          display: block;
          padding: 0.7em @sidebarSidePaddingInner;
          &:hover {
            color: @colorOffBlack;
          }
        }
        // a:before {
        //   content: "· ";
        //   color: @colorOffBlack;
        //   font-weight: bold;
        //   font-size: 1.05em;
        // }
      }
    }
  }
}

/**
 * $COOKIE BAR
 */

#cookie-notice {
  position: fixed;
  bottom: 0;
  z-index: 9000;
  font-family: @fontPTSans;
  background: @colorCookieBar;
  .cookie-notice-content {
    max-width: 1000px;
    padding: 1em @gutter 0.8em @gutter;
  }
  #cookie-notice-close {
    .btn();
  }
}

/* $FIELDS */

/* Field label styles */
.label {
  font-weight: bold;
}

/* Whitelabel shared fields */
.field-name-field-intro {
  font-size: @sizeL;
  font-family: @fontPTSans;
  line-height: @lineHeight;
  padding-bottom: 1.5em;
  border-bottom: 1px solid @colorLightGrey;
  margin-bottom: 1.5em;
  overflow-wrap: break-word;

  .content-indent();
  h2 {
    font-size: 1.38em;
  }
}

.tab-content-extra {
  .field-name-field-intro {
    border: none;
    margin: 0;
  }
}

.field-name-field-body,
.field-name-field-body-multiple,
.views-field-field-body,
.field-name-field-body-post-content,
.body-text {
  font-size: @sizeM;
  line-height: @lineHeight;
  margin-bottom: 2em;
  p {
    .content-indent();
  }

  object {
    width: 82%;
  }

  p object {
    width: 100%;
  }

  // Override above here for load order
  .did-you-know p {
    margin-right: 0;
  }
  ul {
    .content-indent();
  }
  table {
    .content-indent(7%);
  }
  // Override intro font size when inside body element
  .field-name-field-intro {
    font-size: 1.16667em;
    p {
      // margin: 0;
      margin-left: 0;
      margin-right: 0;
    }
  }
}

// Reset right margin on right floated wysiwyg assets to allow more room for image
.field-name-field-body-post-content .wysiwyg-float-right p {
  margin-right: 0;
}

.field-name-field-360-image,
.gardengnome-player {
  margin-bottom: 2em;
}

/* Large main image with sidebar - Used on blogs and news. */
.pre-content .field-name-field-image-main {
  img {
    display: block; //to remove odd spacing below img
    width: 99.99999%; // Rounding issue on other elements causes issue. Fixed on image.
    height: auto;
  }
}
// Use 100% width on image when desktop is displaying full width.
.node-type-page .pre-content .field-name-field-image-main,
.node-type-course .pre-content .field-name-field-image-main,
.node-type-college .pre-content .field-name-field-image-main {
  img {
    width: 100%;
  }
}
// Provide styling for main image when used as full width header
.view-mode-ow_large_feature,
.view-mode-ow_medium_feature {
  position: relative;
  .group-description-wrapper {
    position: absolute;
    z-index:400;
    top: 0;
    right: 0;
    background: @colorT75Black;
    color: #fff;
    padding: 1em 1.5em 0.5em;
    font-family: @fontPTSans;
    width: 33%;
    max-width: 350px;
    font-size: 0.875em;
    line-height: @lineHeight;
    p {
      margin-bottom: 0.5em;
    }
    a {
      color: @colorLinkOverlay;
      &:hover {
        color: @colorLinkOverlay;
      }
    }
  }
  .field-name-field-media-description {
    margin-bottom: 0.5em;
    padding-right: 2.5em;
  }
}

.page-content .media-image-ow_content_full_width-wrapper,
.page-content .media-image-ow_content_medium-wrapper {
  position: relative;
  overflow: hidden;
  display: block;
  color: @colorWhite;
  font-size: @sizeS;
  a {
    color: @colorLinkOverlay;
    text-decoration: none;
    &:hover {
      color: @colorLinkOverlay;
      text-decoration: underline;
    }
  }
}

// Style a tag that's being injected by JS
.toggle-icon,
.toggle-icon-inline {
  cursor:pointer;
  height: 33px;
  width: 33px;
  position: absolute;
  z-index:500;
  top: 9px;
  right: 1.2%;
  background-image: url('@{theme_path}/images/i-sprite.png');
  background-position: 0 0;
  &:hover,
  &.shown {
    background-position: 0 33px;
  }
}

.node-type-oxweb-news-index,
.node-type-section-index {
  .main-content {
    a {
      text-decoration: none;

      &:hover,
      &:hover h2,
      &:hover h3 {
        color: @colorAltLinkHover;
        text-decoration: none;
      }

      h2, h3 {
        font-size: @sizeL;
        text-transform: none;
      }
    }

  }
}
.field-name-field-news-small {
  h2,
  h3 {
    color: @colorOffBlack;
    margin: 1.6em 0;
    font-size: @sizeM;
    text-transform: uppercase;
  }
  .field-item {
    margin-bottom: 2.5em;
  }

  ul {
    list-style: none;
    margin: 0;
  }

  li {
    background: none;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  a {
    border-top: 1px solid @colorLightGrey;
    display: block;
    padding: 1em 0;
  }

  p {
    margin: 0;
  }

  .field-item:first-child h2,
  .field-item:first-child h3,
  .field-item:first-child h2.title {
    margin-top: 0;
  }
}
/* override the rule above for margin more specifically - necessary since heading css refactored inline */
.main-content .field-name-field-news-small h2 {
  margin: 1.6em 0;
}

.node-type-expert {
  h1 {
    margin-bottom: 0.2em;
  }
  .field-name-field-person-photo {
    img {
      max-width: 100%;
      height: auto;
      vertical-align: middle;
    }
  }
  .field-name-field-about {
    .content-indent();
    // Stop text from wrapping image.
    overflow: hidden;
    margin-bottom: 1em;
    h3 {
      margin-top: 0;
    }
  }
  .field-name-field-job-title {
    font-size: @sizeM;
    font-weight: bold;
    margin-bottom: 2em;
  }
  .group-two-column {
    .clearfix();
    clear: both;
    .content-indent();
    & > .field {
      .border-box();
      width: 48%;
      float: left;
      margin-bottom: 2em;
      &:nth-child(2n+1) {
        clear: left;
        margin-right: 4%;
      }
      h3 {
        margin-top: 0;
      }
    }
  }
  .field-name-field-video {
    margin-bottom: 1em;
  }
}
// Ensure 'original' image format doesn't break out of containers
.file-media-original {
  max-width: 100%;
  height: auto;
}

// Override specific link colouring on .node.view-mode-ow_listing_teaser
.node-expert {
  &.view-mode-ow_listing_teaser .tags a {
    color: @colorLink;
    margin-bottom: 0;
    margin-top: 0.5em;
    &:hover {
      color: @colorWhite;
    }
  }
  .field-name-field-job-title {
    margin-bottom: 0.75em;
  }
}

/**
 *  $BREADCRUMBS
 */
.breadcrumb {
  font-family: @fontPTSans;
  background: @colorWhite;
  color: @colorLink;
  padding-top: 20px;
  padding-bottom: 1em;
  padding-right: 1em;
  font-size: 90%;
  span {
    padding: 0.133333333em 0;
    padding-right: 12px;
    padding-left: 7px;
    background: url('@{theme_path}/images/breadcrumb-arrow.png') no-repeat right center;
  }
  span.breadcrumb-first {
    padding-left: 0;
  }
  .breadcrumb-last {
    color: @colorSecondary;
    background: transparent;
  }
}

/**
 *  $SHAREBAR
 */
.block-sharebar {
  overflow: hidden;
  margin-top: 25px;
  margin-bottom: 20px;
  h2 {
    .meta();
    text-align: right;
    margin-bottom: 1.1em;
  }
}
#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 {
  display: block;
  margin-bottom: 10px;
  float: right;
  clear: right;
  a {
    width: 24px;
    height: 24px;
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    background-color: @colorCopyrightGrey;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    &:hover {
      background-color: @colorPrimary;
    }
  }
}
#custom-tweet-button a,
#custom-tweet-button-responsive a {
  background-image: url("@{theme_path}/images/share-twitter.png");
  &:hover {
    background-image: url("@{theme_path}/images/share-twitter-hover.png");
  }
}
#custom-fb-button a,
#custom-fb-button-responsive a {
  background-image: url("@{theme_path}/images/share-facebook.png");
  &:hover {
    background-image: url("@{theme_path}/images/share-facebook-hover.png");
  }
}
#custom-linkedin-button a,
#custom-linkedin-button-responsive a {
  background-image: url("@{theme_path}/images/share-linkedin.png");
  &:hover {
    background-image: url("@{theme_path}/images/share-linkedin-hover.png");
  }
}
#custom-reddit-button a,
#custom-reddit-button-responsive a {
  background-image: url("@{theme_path}/images/share-reddit.png");
  &:hover {
    background-image: url("@{theme_path}/images/share-reddit-hover.png");
  }
}

body.page-full-width .block-sharebar {
  display: none;
  &.share-bar-responsive {
    display: block;
    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 {
      float: left;
      clear: none;
      margin-right: 0.8em;
    }
  }
}

/**
 *  $HTML SITEMAP
 */
body.page-sitemap {
  .site-map-box-menu {
    h2.title {
      display: none;
    }
  }
}

/**
 *  $TABS
 */
.ui-tabs {
  padding: 0;
  border: none;
  .ui-widget-header {
    background: transparent;
    border: none;
  }
  .ui-tabs-panel {
    padding: 0;
  }
  .ui-tabs-nav {
    padding: 0;
    margin-bottom: 1em;

    li {
      border-bottom-width: 0;
      float: left;
      list-style: none;
      margin: 0 0 1em;
      padding: 0;
      position: relative;
      top: 0;
      white-space: nowrap;
      a {
        color: @colorLink;
        display: block;
        font-family: @fontPTSans;
        font-size: @sizeS;
        padding: 0.7em 1em;
      }
      &.ui-state-active a {
        color: @colorOffBlack;
        &:link, &:visited, &:hover, &:active {
          text-decoration: none;
        }
      }
      &.ui-tabs-active {
        margin: 0 0 1em;
        padding: 0;
      }
      &.ui-tabs-selected {
        padding-bottom: 0;
        margin-bottom: inherit;
      }
    }
  }
  .ui-state-default {
    border: none;
    background: transparent;
    border-radius: 0;
    border-right: 1px solid @colorLightGrey;
    text-transform: uppercase;
    &:last-child {
      border-right: none;
    }
  }
  .ui-state-active {
    background: @colorLightGrey;
    position: relative;
    &:after {
      content: "";
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid @colorLightGrey;
      position: absolute;
      bottom: -10px;
      left: 50%;
      margin-left: -10px;
    }
  }
}
// Styling of previous and next buttons for tabs
.field-name-field-body-multiple {
  .tab-nav {
    margin-right: 18%;
    border-top: 1px solid @colorTertiary;
    padding-top: 1em;
    margin-top: 1em;
  }
  a.mover {
    font-size: @sizeMeta;
    text-transform: uppercase;
    font-family: @fontPTSans;
    font-weight: bold;
    line-height: 1.5em;
    color: @colorBlack;
    &:hover {
      text-decoration: none;
      color: @colorBlack;
      span {
        text-decoration: underline;
      }
    }
    span {
      color: @colorLink;
      text-transform: none;
    }
  }
}

.next-tab {
  padding-right: 30px;
  background: url('@{theme_path}/images/chevron-right.png') right center no-repeat;
  float: right;
  width: 50%;
  text-align: right;
  padding-left: 5px;
  .border-box();
}
.prev-tab {
  padding-left: 30px;
  padding-right: 5px;
  width: 50%;
  background: url('@{theme_path}/images/chevron-left.png') left center no-repeat;
  float: left;
  .border-box();
}

// Override default upsizing of 1.1em
.ui-widget {
  font-size: 1em;
  font-family: inherit;
}

// Styling of tab type listings
.field-name-field-listing-category,
.field-name-field-listing-content,
.field-name-field-style-element-menu-link {
  .content-indent();
}

.field-name-field-listing-category,
.field-name-field-style-element-menu-link  {
    background-color: @colorWhite;
    border-bottom: 2px solid @colorTertiary;
    padding-top: 0.5em;
    margin-bottom: 2px;
  .field-item {
    float: left;
    padding: 0 0.9em;
    margin: 0 0 0.5em 0;
    border-right: 1px solid @colorTertiary;
    font-size: @sizeS;
    font-family: @fontPTSans;
    &.field-item-last {
      border: none;
    }
  }
  .field-items {
    .clearfix();
  }
}
.field-name-field-listing-content {
  clear: both;
  .field-item {
    border-bottom: 1px solid @colorTertiary;
    padding: 1em 0 0;
    position: relative;
    &.field-item-last {
      border-bottom: none;
    }
  }
  h2 {
    margin-left: 0.8em;
  }
  .back-to-top {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 0.9em;
    font-family: @fontPTSans;
    background: url('@{theme_path}/images/up-arrow.png') left center no-repeat;
    padding-left: 13px;
  }
}
.listing-wrapper {
  position: relative;
}

/* $VIEW MODES */

/* Oxweb Listing item */
.node {
  &.view-mode-ow_listing_item {
    a {
      border-top: 1px solid @colorLightGrey;
      color: @colorOffBlack;
      display: block;
      overflow: hidden;
      padding: 1em 0;

      &:hover,
      &:active {
        color: @colorAltLinkHover;
        text-decoration: none;
      }
    }

    img {
      float: right;
      margin-left: 1em;
      max-width: 90px;
      height: auto;
    }

    .field-type-date,
    .field-name-post-date {
      color: @colorMidGrey;
      font-size: @sizeSS;
      text-transform: uppercase;
    }
  }

  &.view-mode-ow_listing_teaser {
    .field-type-image,
    .field-name-field-gt-image,
    .field-name-field-image-main {
      line-height: 0;
      margin-bottom: 1em;
    }

    a {
      color: @colorOffBlack;
      text-decoration: none;

      &:active h2,
      &:active h3,
      &:hover h2,
      &:hover h3 {
        color: @colorAltLinkHover;
        text-decoration: none;
      }

      h2, h3 {
        font-size: @sizeL;
        margin: .6em 0 .25em;
        text-transform: none;
        .field-name-field-student-gateway-events & {
          margin: 0;
          font-size: @sizeM;
          line-height: 1.3em;
        }
      }

      &:hover,
      &:active {
        color: @colorOffBlack;
        text-decoration: none;

        .field-type-image,
        .field-name-field-gt-image,
        .field-name-field-image-main {
          background-color: @colorBlack;
        }

        img {
          .opacity(65);
        }
      }
    }
    &.node-section-highlight-alt {
      h2, h3 {
        font-size: @sizeL;
        margin: .6em 0 .25em;
      }
      a {
        color: @colorLink;
        &:not(.field-group-group_link_wrapper):hover {
          color: @colorLink;
          text-decoration: underline;
        }
      }
    }

    img {
      height: auto;
      max-width: 100%;
      width: 100%;
      margin-bottom: 0;
    }

    .field-name-field-intro {
      border: none;
      font-size: 1em;
      margin: 0;
      padding: 0;
    }
  }
}

#block-block-50 { // hide twitter block
  display: none;
}
.page-node-1813 #block-block-50, // show twitter block on these nodes
.page-node-1824 #block-block-50 {
  display: block;
  margin-bottom: 1em;
  .label {
    font-size: @sizeM;
    text-transform: uppercase;
  }
  select {
    margin: 1em 0;
  }
}
.field-name-block-temp-twitter-block {
  h2.title {
    font-size: @sizeM;
    text-transform: uppercase;
  }
}
/* End of temporary code */


.oxweb-event-submission {
  background-color: @colourVLightGrey;
  padding: 1em 2em;

  input[name="button-add-event"],
  input[name="button-copy-event"],
  input[name="button-delete-event"] {
    background-color: @colorLink;
    display: inline-block;
  }

  .form-item ul.as-selections {
    .box-shadow(none);
    .box-sizing();

    border: 1px solid @colorLightGrey;
    display: inline-block;
    padding: 0.5em 1em;
    width: 90%;
  }

  #subevents fieldset {
    margin-top: 3em;

    input[name="button-delete-event"] {
      padding: 0.4em 0.6em;
      position: absolute;
      top: 0.5em;
      right: 0;
    }

    .ajax-progress {
      margin-right: 1em;
    }
  }

  input.webform-calendar {
    float: left;
    margin-left: -1.5em;
    margin-top: 0.5em;
  }
}

/* Make sure embedded infographics are responsive */
.visually_embed,
.visually_embed img {
  width: 100% !important; /* important required to override inline styles */
}

/* Bespoke style edge case for ESI sidebar include on admissions/undergraduate/courses-listing/biochemistry-molecular-and-cellular */
.page-content-sidebar-second {
  .media .field.field-name-field-snippet-markup {
    span.field-item-single {
      border-bottom: 0;
      display: block;
      padding: 0;
    }

  }
  .block .field-name-field-related-content-top span.field-item-single:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

/* Page feedback block on every page */

.page-feedback {
  overflow: hidden;
  background-color: @colorBeigeGrey;
  margin: 2em 0 0 0;
  width: 450px;
  .box-sizing;
  display: inline-block;
  padding-left: @gutter_width;

  .webform-client-form {
    margin: 0.5em 0 1em 0;
  }
  .webform-confirmation {
    margin: 1.5em 2em 1.5em 1em;
    font-family: @fontPTSans;
  }
  .form-item {
    margin: 0;
  }
  .webform-component-radios,
  .webform-component-radios legend,
  .form-checkboxes, .form-radios,
  .form-checkboxes .form-item, .form-radios .form-item {
    display: inline-block;
  }
  .form-radios {
    margin-right: 0.5em;
    margin-left: 0.5em;
    .form-item {
      margin-top: 1em;
      margin-right: 0.5em;
    }
    input {
      width: auto;
      margin-bottom: 0;
    }
  }
  // theses are possibly global changes for `radios` but need to check
  fieldset.webform-component-radios {
    border-top: 0;
    padding-top: 0;
    legend {
      position: relative;
      top: 0;
      color: inherit;
    }
    > div {
      margin-bottom: 0;
    }
  }
  .webform-component-textarea {
    label {
      margin: 0.5em 1em 0.5em 0;
      font-weight: normal;
    }
    .form-textarea-wrapper {
      padding-right: 1em;
    }
  }
  .form-actions {
    display: inline;
    margin-left: 0;
    font-size: 0.8em;
    .webform-submit {
      padding: 0.4em 0.6em;
    }
  }
  label .form-required,
  legend .form-required {
    display: none;
  }
}

[data-media-snippet] {
  background-color: #fafafa;
  border: 1px solid #cfcfcf;
  display: inline-block;
  min-width: 100px;
  padding: 1em 1.5em;
  position: relative;
}

[data-media-snippet]:before {
  content: "</> Snippet (" attr(data-snippet-title) ")";
  color: #666;
  font-family: 'Lucida Console', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 5px;
}

[data-media-snippet]:hover,
[data-media-snippet]:active,
[data-media-snippet][data-mce-selected] {
  border-color: #aaa;
  cursor: hand;
}

/* Jump to list labels are hidden */
.jump-to-label {
  .hidden-accessible();
}

.group-discover-carousel {
  .column(12, 0);
  .clearfix();

  background: @colorLightGrey;
  border-top: 1px solid @colorBrownGrey;
  border-bottom: 1px solid @colorBrownGrey;
  padding: 3em 0 1em @gutter_width;
  position: relative;
  width: 100%;
  height: auto;

  .contextual-links-region {
    position: static;
  }

  h2 {
    text-transform: uppercase;
    font-size: 1.9em;
  }
  .group-discover-carousel {
    position: relative;
  }
  .carousel-next-btn {
    height: 100%;
    width: 7%;
    min-width: 110px;
    position: absolute;
    z-index: 50;
    top: 0;
    right: 0;
    background-size: contain;
    background: url('@{theme_path}/images/discover-shadow.png') no-repeat top 60px right 0px;
    &:hover {
      cursor: pointer;
    }
    &:before {
      content: "";
      height: 100%;
      width: 100%;
      background: url('@{theme_path}/images/homepage-chevron-discover.png') no-repeat 56px 45%;
      display: block;
    }
  }
  .field-items {
    /* Correction on left margin */
    margin-left: -0.5%;
  }
  .field-item {
    width: 19.904%;
    min-width: 250px;
    float: left;
    display: block;
    margin-left: 0.12%;
    a:hover,
    a:active {
      text-decoration: none;
    }
    img {
      display: block;
      width: 100%;
      height: auto;
    }
    .node-video-highlight img {
      /* If hidden link doesn't work. */
      .opacity(0);
    }
    .node-video-highlight .file-video .content {
      background-position: 0px;
      background-size: 134%;
    }
    .node-video-highlight a .field-name-field-video,
    .discover-link-type-audio a .field-name-field-image-highlight,
    .discover-link-type-itunes a .field-name-field-image-highlight {
      position: relative;
      &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 10;
      }
      .icon-holder {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 110px;
        bottom: 25%;
      }
    }
    .node-video-highlight a .field-name-field-video,
    .discover-link-type-video a .field-name-field-image-highlight {
      &:before,
      .icon-holder {
        background: url("@{theme_path}/images/play.png") no-repeat 52% 50%;
        .opacity(85);
      }
      &:hover:before,
      &:hover .icon-holder  {
        .opacity(100);
      }
    }
    .discover-link-type-audio a .field-name-field-image-highlight,
    .discover-link-type-itunes a .field-name-field-image-highlight {
      &:before,
      .icon-holder {
        background: url("@{theme_path}/images/itunes.png") no-repeat 52% 50%;
        .opacity(85);
      }
      &:hover:before,
      &:hover .icon-holder  {
        .opacity(100);
      }
    }
    .node-a-to-z-of-oxford h2,
    .node-video-highlight h2,
    .field-name-field-intro {
      width: 95%;
      margin: 0 auto;
    }
    .node-oxweb-homepage-highlights h2 {
      width: 95%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0.92em;
    }
    .field-name-field-intro {
      padding-bottom: 0;
      p {
        margin-bottom: 0;
      }
    }
    h2 {
      font-size: @sizeM;
      text-transform: uppercase;
      margin-bottom: 0;
      margin-top: 0.94em;
    }
    .node-a-to-z-of-oxford h2,
    .node-video-highlight h2 {
      margin-top: 0.94em;
    }
    .field-name-field-intro {
      font-size: @sizeS;
    }
    .link-block-bgimage-wrapper {
    }
  }
}

/* devel output */
.krumo-root img {
  width: auto!important;
}

/* Tweet this styling */
.tweet-this-container {
  position: relative;
  background: #55acee;
  margin-bottom: 4em;
  margin-right: 18%;
  color: #fff;
  line-height: 1.5;
  .cta-text {
    padding: 1em;
    font-size: @sizeXL;
  }
  a.tweet-this{
    color:#444;
    // Hide underline on hover as it breaks on pseudo elements on IE.
    text-decoration: none!important;
  }

  .tweet-this  {
    position: absolute;
    display: inline-block;
    font-size: @sizeMS;
    top:100%;
    right: 0;
    background: #e0f0fc;
    border: 0;
    padding: 7px 0px 6.5px 14px;

    &:after {
      content: 't';
      float: right;
      font-family: 'sosaregular';
      font-size: 1.7em;
      background: #55acee;
      color: #fff;
      padding: 0px 10px;
      margin: -10px 0px -10px 14px;
    }
    &:hover {
      opacity: 0.5;
    }
  }
}