/**
 * @file
 * Positioning for responsive layout .
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
 */

/*
 * Center the page.
 */

#preheader,
#page,
.region-bottom {
  /* For screen sizes larger than 1200px, prevent excessively long lines of text
     by setting a max-width. */
  margin-left: auto;
  margin-right: auto;
  max-width: 1036px;
}

/*
 * Apply the shared properties of grid items in a single, efficient ruleset.
 */

#preheader,
#header,
#pre-content,
#content,
#navigation,
.sidebars
.region-sidebar-first,
.region-sidebar-second,
.region-adverts,
#footer {
  padding-left: 25px;
  padding-right: 25px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  _display: inline;
  _overflow: hidden;
  _overflow-y: visible;
}

.landing.sidebar-second #pre-content .in-content, .magazine.sidebar-second #pre-content .in-content {
    margin-right: 0;
}

/*
 * Containers for grid items and flow items.
 */

#preheader,
#header,
#main,
#footer {
  *position: relative;
  *zoom: 1;
}
#preheader:before, #preheader:after,
#header:before, #header:after,
#main:before, #main:after,
#footer:before, #footer:after {
  content: "";
  display: table;
}
#preheader:after,
#header:after,
#main:after,
#footer:after {
  clear: both;
}
.front .sidebars .region-adverts {
  top: 0;
}
.region-header {
    max-width: 100%;
}
/*
 * Navigation bar
 */

@media all and (max-width: 480px) {
  
  body, #page {
    width: 320px;
  }
  .in-content {
    margin-top: 1.5em;
  }
  .view-front-page-slideshow .views_slideshow_cycle_main {
    display: none;
  }
  
  .view-front-page-slideshow .views-slideshow-controls-top {
    width: 99% !important;
    float: none;
  }
  
  .view-front-page-slideshow .views-slideshow-pager-field-item {
    height: auto !important;
  }
  /* fixing the footer menus */
  #footer #block-block-1 {
    padding: 10px;
  }
 
  #footer #block-block-1 ul {
    width: 100%;
  }

  #footer #block-block-1 ul li:first-child {
    float: none;
    display: block;
    border-right: 0;
  }

  #footer #block-block-1 ul li {
    float: left;
    display: block;
    padding: 5px 10px;
    margin-top: 2px;
    border-right: 1px solid #ccc;
  }

  #footer #block-block-1 ul li:last-child {
    border-right: 0;
  }
  
  #block-views-front-page-views-block-7 {
    display:none;
  }

  #main {
    padding-top: 11em; /* Move all the children of #main down to make room. */
    position: relative;
  }

  .sg #main {
    padding-top: 13em;
  }

  #navigation {
      position: absolute;
      top: 0; /* Move the navbar up inside #main's padding. */
      height: 4.5em;
      width: 100%;
  }

  #block-system-user-menu .menu {
    margin-top: 1.5em;
  }

  #content {
    margin-top: 3em; /* push content area down to make room for search */
  }


  .sg .views-field-logo-72,
  .sg .views-field-directory-logo-78,
  .page-magazine .views-field-field-op-main-image,
  .jobs #block-block-17 img {
    float: left !important;
    margin: 0 !important;
    clear: both;
    width: 100% !important;
  }

  .page-services-course-directory .view-course-directory .views-field {
    width: 100% !important;
  }

  .front #threecols .col {
    float: left;
    clear: both;
    width: 100%;
  }

  .front #threecols .col .views-row {
    display: none;
  }

  .front #threecols .col .views-row-first {
    display: block;
  }

  .region-adverts {
    float: left;
    clear: both;
  }
  /* Data tables dont really go responsive (let's give it a try anyways) */
  table.views-table tbody td {
    float: left;
    width: 96%;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  table.views-table tbody tr.odd, table.views-table tbody tr.even {
    float: left;
     background: transparent;
  }

  table.views-table tbody tr.odd {
    background: #EEE;
  }

  h3 {
    min-width: 60px;
  }
  #block-system-user-menu {
    padding-bottom: 20px;
  }
}

@media all and (min-width: 480px) {

  #main {
    padding-top: 4.5em; /* Move all the children of #main down to make room. */
    position: relative;
  }

  #navigation {
    position: absolute;
    top: 0; /* Move the navbar up inside #main's padding. */
    height: 4.5em;
    width: 100%;
  }

}
/*
 * Use 3 grid columns for smaller screens.
 */

@media all and (min-width: 480px) and (max-width: 1103px) {
  /* hide the fronpage slideshow images below 1103px */
  
  .view-front-page-slideshow .views_slideshow_cycle_main {
    display: none;
  }
  
  .view-front-page-slideshow .views-slideshow-controls-top {
    width: 99% !important;
    float: none;
  }

  .view-front-page-slideshow .views-slideshow-pager-field-item {
    height: auto !important;
  }
  
  #block-views-front-page-views-block-7 {
    display:none;
  }
}

@media all and (min-width: 480px) and (max-width: 959px) {
  .region-header {
    margin: 1em auto 0 auto;
  }
  .region-header {
    padding-bottom: 0;
  }
  /*
   * The layout when there is only one sidebar, the left one.
   */  

   #main {
    padding-top: 9em; /* Move all the children of #main down to make room. */
    position: relative;
  }

  .sg #main {
    padding-top: 10.5em;
  }

  #navigation {
    position: absolute;
    top: 0; /* Move the navbar up inside #main's padding. */
    height: 4.5em;
    width: 100%;
  }

  #block-block-4,
  #block-search-form {
    display: none;
  }


  #block-block-10 ul { /* Keep the top tabs on the same line if you can! */
    width: 600px;
  }

  .sidebar-first #content { /* Span 2 columns, starting in 2nd column from left. */
    float: left;
    width: 66.667%;
    margin-left: 33.333%;
    margin-right: -100%;
  }
  .sidebar-first .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
    float: left;
    width: 33.333%;
    margin-left: 0%;
    margin-right: -33.333%;
  }

  /*
   * The layout when there is only one sidebar, the right one.
   */

  .sidebar-second #content { /* Span 2 columns, starting in 1st column from left. */
    float: left;
    width: 66.667%;
    margin-left: 0%;
    margin-right: -66.667%;
  }
  .sidebar-second .region-sidebar-second { /* Span 1 column, starting in 3rd column from left. */
    float: left;
    width: 33.333%;
    margin-left: 66.667%;
    margin-right: -100%;
  }
  
  /*
   * The layout when there is only one sidebar, the adverts.
   */

  .region-adverts #content { /* Span 2 columns, starting in 1st column from left. */
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
  }
  .region-adverts .region-adverts { /* Span 1 column, starting in 3rd column from left. */
    float: left;
    clear: both;
  }

@import "https://fonts.googleapis.com/css?family=Ubuntu:400,500";
ul li.expanded {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAABJJREFUeJxj+MdQw2DBIMAABgAUsAHD3c3BpwAAAABJRU5ErkJggg==");
    list-style-type: circle;
}
ul li.collapsed {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAABFJREFUCB1jVmCGQClmEWYOAAZ8AMy3HPLXAAAAAElFTkSuQmCC");
    list-style-type: disc;
}
ul li.leaf {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAD1BMVEX///+/v7+Li4sAAADAwMBFvsw8AAAAAXRSTlMAQObYZgAAAB1JREFUCFtjYAADYwMGBmYVZSDhKAwkFJWhYiAAAB2+Aa/9ugeaAAAAAElFTkSuQmCC");
    list-style-type: square;
}
li a.active {
    color: #000000;
}
#block-system-user-menu a, #block-block-1 a {
    color: #222222;
    text-decoration: none;
}
#block-system-user-menu a:hover, #block-block-1 a:hover {
    color: #00B3E4;
    text-decoration: underline;
}
#block-block-10 a {
    color: #FFFFFF;
    font-family: "ubuntu";
    font-size: 80%;
    font-weight: 500;
    padding: 5px;
    text-transform: uppercase;
}
.ap #preheader li.ap a {
    color: #00B3E4;
}
.jf #preheader li.jf a {
    color: #7AB800;
}
.sg #preheader li.sg a {
    color: #781F62;
}
.cte #preheader li.cte a {
    color: #006837;
}
#navigation, .responsive-menus {
    margin-bottom: 1em;
}
#navigation .block {
    margin-bottom: 0;
}
#navigation .block-menu .block-title, #navigation .block-menu-block .block-title {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}
#navigation ul.links li, #navigation ul.menu li {
    float: left;
    list-style-image: none;
    list-style-type: none;
    padding: 0 2em 0 0;
}
#main-menu li:first-child a {
    border: medium none;
}
#navigation ul.menu li ul {
    left: 5em;
    margin-top: 0.8em;
    position: absolute;
}
  /*
   * The layout when there are two sidebars, the right one and adverts.
   */

  .sidebar-second #content { /* Span 2 columns, starting in 1st column from left. */
    float: left;
    width: 60%;
    margin-left: 0%;
    margin-right: -60%;
  }
  .sidebar-second .region-sidebar-second { /* Span 1 column, starting in 3rd column from left. */
    float: left;
    width: 40%;
    margin-left: 60%;
    margin-right: -100%;
  }
  .sidebar-second .region-adverts { /* Span 1 column, starting in 3rd column from left. */
    float: left;
    clear: both;
    min-width: 170px;
  }

  /*
   * The layout when there are two sidebars.
   */

  .two-sidebars #content { /* Span 2 columns, starting in 2nd column from left. */
    float: left;
    width: 66.667%;
    margin-left: 33.333%;
    margin-right: -100%;
  }
  .two-sidebars .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
    float: left;
    width: 33.333%;
    margin-left: 0%;
    margin-right: -33.333%;
  }
  .two-sidebars .region-sidebar-second { /* Start a new row and span all 3 columns. */
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    *position: relative;
    *zoom: 1;
    padding-left: 0;
    padding-right: 0;
    clear: left;
  }
  .two-sidebars .region-sidebar-second:before,
  .two-sidebars .region-sidebar-second:after {
    content: "";
    display: table;
  }
  .two-sidebars .region-sidebar-second:after {
    clear: both;
  }
  .two-sidebars .region-sidebar-second .block {
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    _display: inline;
    _overflow: hidden;
    _overflow-y: visible;
  }
  .two-sidebars .region-sidebar-second .block:nth-child(3n+1) { /* Span 1 column, starting in the 1st column from left. */
    float: left;
    width: 33.333%;
    margin-left: 0%;
    margin-right: -33.333%;
    clear: left;
  }
  .two-sidebars .region-sidebar-second .block:nth-child(3n+2) { /* Span 1 column, starting in the 2nd column from left. */
    float: left;
    width: 33.333%;
    margin-left: 33.333%;
    margin-right: -66.667%;
  }
  .two-sidebars .region-sidebar-second .block:nth-child(3n) { /* Span 1 column, starting in the 3rd column from left. */
    float: left;
    width: 33.333%;
    margin-left: 66.667%;
    margin-right: -100%;
  }
  
  .landing.sidebar-second #main #pre-content .in-content {
    margin-right: 0;
  }
  
  
  
  /* fixing the footer menus */
  #footer #block-block-1 {
    padding: 10px;
  }

  #footer #block-block-1 ul {
    width: 100%;
  }

  #footer #block-block-1 ul li:first-child {
    float: none;
    display: block;
    border-right: 0;
  }

  #footer #block-block-1 ul li {
    float: left;
    display: block;
    padding: 5px 10px;
    margin-top: 2px;
    border-right: 1px solid #ccc;
  }

  #footer #block-block-1 ul li:last-child {
    border-right: 0;
  }
}

/*
 * Use 5 grid columns for larger screens.
 */
 
@media all and (min-width: 960px) {

  .region-adverts .region-adverts,
  .region-sidebar-second {
    padding-left: 0;
  }
  /*
   * The layout when there is only one sidebar, the left one.
   */

  .sidebar-first #content { /* Span 4 columns, starting in 2nd column from left. */
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }
  .sidebar-first .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
    float: left;
    width: 20%;
    margin-left: 0%;
    margin-right: -20%;
  }

  /*
   * The layout when there is only one sidebar, the right one.
   */

  .sidebar-second #content { /* Span 4 columns, starting in 1st column from left. */
    float: left;
    width: 80%;
    margin-left: 0%;
    margin-right: -80%;
  }
  .sidebar-second .region-sidebar-second { /* Span 1 column, starting in 5th column from left. */
    float: left;
    width: 20%;
    margin-left: 80%;
    margin-right: -100%;
  }
  
    /*
   * The layout when there is only one sidebar, the adverts.
   */
  .region-adverts #pre-content {
    width: 86%;
    margin-left: 0;
    margin-right: -86%;
  }

  .region-adverts #content { /* Span 4 columns, starting in 1st column from left. */
    float: left;
    width: 86%;
    margin-left: 0%;
    margin-right: -86%;
  }
  .region-adverts .region-adverts { /* Span 1 column, starting in 5th column from left. */
    float: left;
    width: 14%;
    margin-left: 86%;
    margin-right: -100%;
    position: relative;
  }
  
  .front .region-adverts {
   
 }
  
  /*
   * The layout when there are two sidebars, the right one and adverts.
   */

  /* .sidebar-second #pre-content {
    width: 83.5%;
    margin-left: 0;
    margin-right: -83.5%;
 } */
 
   
  .sidebar-second #content { /* Span 4 columns, starting in 1st column from left. */
    float: left;
    width: 58%;
    margin-left: 0%;
    margin-right: -58%;
  }

  .sidebar-second .region-sidebar-second { /* Span 1 column, starting in 5th column from left. */
    float: left;
    width: 28%;
    margin-left: 58%;
    margin-right: -100%;
  }

  .sidebar-second .region-adverts { /* Span 1 column, starting in 5th column from left. */
    float: left;
    width: 14%;
    margin-left: 86%;
    margin-right: -100%;
    min-width: 120px;
    position: relative;
    top: -65px;
    margin-bottom: -65px;
  }
  
  
  /*
   * The layout when there are two sidebars.
   */

  .two-sidebars #content { /* Span 3 columns, starting in 2nd column from left. */
    float: left;
    width: 60%;
    margin-left: 20%;
    margin-right: -80%;
  }
  .two-sidebars .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
    float: left;
    width: 20%;
    margin-left: 0%;
    margin-right: -20%;
  }
  .two-sidebars .region-sidebar-second { /* Span 1 column, starting in 5th column from left. */
    float: left;
    width: 20%;
    margin-left: 80%;
    margin-right: -100%;
  }
}

/* hide mobile menu or main menu depending on screen width */
@media all and (min-width: 1105px) {
  #block-menu-menu-mobile-menu, .responsive-menus {
      display: none;
  }
}
@media all and (max-width: 1104px) {
  .menu-block-2, .menu-block-1 {
    display: none;
  }
}
/* show only mobile menu on smaller screens */

@media all and (min-width: 1150px) {
  .view-front-page-slideshow .views_slideshow_cycle_main {
    display: block;
  }

  #block-block-4 {
    display: block;
  }
}
/* hide blockquote on smaller screens */
blockquote {
    display: none;
}
@media all and (min-width: 1105px) {
  blockquote {
    display: inline;
  }
}

/* resize #preheader */

#preheader {
  height: 20px;
}
/* replace search box, and siwtch jobs search exposed form, with menu item for small screens */
#block-views-exp-jobs-page-1 {
  display:none;
}
@media all and (max-width: 480px) {
  .view-jobs .view-header,
  #block-views-exp-jobs-page-2,
  #block-search-form {
    display:none;
  }
 #block-views-exp-jobs-page-1 {
  display:block;
  }
 /* .front #content,
  #pre-content {
    margin-top:-6em !important;
  }
*/
  .search {
  display: none;
  }
}
@media all and (max-width: 959px) {
  .front #content,
  #pre-content {
    margin-top: -3em;
  }
  .page-newprofessionals .field-name-field-standfirst p, 
  .page-newprofessionals .views-field-field-standfirst p {
    clear: left;
  }
  .newprofessional .in-content .views-field-title {
    margin-top: 1.5em;
  }
  .front #footer {
      margin-top: unset;
  }
}
/* fix region adverts where there is no main sidebar & for landing pages */
.no-sidebars .region-adverts {
  top: -65px;
}
.landing .region-adverts {
    margin-top: -25px;
}
@media all and (max-width: 1096px) {
  .region-header {
    margin: 1em auto 0 auto;
    clear: both;
  }
  .region-header .views-row {
    padding-bottom: 0;
  }
  #block-system-user-menu {
    padding-bottom: 20px;
  }
}
/* style mobile buttons */
@media all and (max-width: 481px) {
  #mobile-buttons span,
  #mobile-buttons a {
    display:block;
  }
  #mobile-buttons {
    padding-top: 2px;
  }
  #mobile-buttons img {
    width: 52px;
    height: auto;
  }
  #block-views-front-page-slideshow-block,
  #block-system-user-menu ul li:not(.log-out) {
    display: none;
  }
  #block-system-user-menu ul li.log-out {
    margin-right: -48px;
  }
  #main {
    padding-top: 3em !important;
  }
}
@media all and (min-width: 481px) and (max-width: 1096px) {
  #mobile-buttons a,
  #mobile-buttons span {
    display:inline;
  }
  #block-views-front-page-slideshow-block,
  #block-system-user-menu ul li:not(.log-out) {
    display: none;
  }
  #block-system-user-menu ul li.log-out {
    margin-right: 10px !important;
  }
  #main {
    padding-top: 2em !important;
  }
  .region-header img, .region-header {
    min-width: 100% !important;
    overflow: visible;
  }
}
@media all and (min-width: 1097px) {
  #mobile-buttons {
    display:none;
  }
  .section-access-denied #navigation {
    display: non3;
  }
}
#mobile-buttons {
    float: right;
}
#logo {
    max-width: 80%;
}
.responsified {
    display: none;
    max-width: 100%;
}
.add-height {
    height: 27em;
}
.front.responsive-menus-load-processed.add-height-front .in-content {
    padding-top: 250px;
}
  /* swap siebar and content versions of courses exposed forms */
#block-views-exp-academic-courses-page,
#views-exposed-form-academic-courses-page-mefibs-form-mobile-form {
     display: none;
   } 
@media all and (max-width: 740px) {
  #block-views-exp-academic-courses-page,
  #views-exposed-form-academic-courses-page-mefibs-form-mobile-form {
    display: block;
  }
  .page-events-arts-courses-directory .region-sidebar-second .block-mefibs {
    display: none;
  }
}