/*
  Running Squiz Matrix
  Developed by Squiz - http://www.squiz.net
  Squiz, Squiz Matrix, MySource, MySource Matrix and Squiz.net are registered Trademarks of Squiz Pty Ltd
  Page generated: 17 June 2026 17:21:11
*/


/* Feb 2024 - replaced with #1710355 */


/* ---------------------------------------------------- 
    RESEARCH PROJECTS STYLES
    MH and TW, 2019 
 -----------------------------------------------------*/




/* BANNER STYLES (based on our Events banner styles)*/
/* 1em = 16px */
.banner-content-wrapper {height:350px; display:block; position:relative;}

.banner__heading {
    text-transform: none; 
    line-height: 1.0;
    color:;    
}

.banner__description {
    color:;
    font-size: 2rem;
} 

.banner__heading + .banner__description {margin-top: 2rem;}

.banner-bg-colour {background-color: ;}

/* large screen (min of 60em, 960px) */
@media only screen and (min-width: 60em) {
/*.banner__contents {left: 230px; padding-left: 3.25rem; width: 60rem; padding-right: 150px;}*/
.banner__contents {left: 14.375em; padding-left: 3.25rem; width: 60rem; padding-right: 150px;}
.banner__heading {font-size: 3.2rem;}
.banner {overflow:hidden;}
/*    .banner__contents {width: 45rem;} ?*/
}

/* Medium to large screen (upto 60em) */
@media only screen and (max-width: 59.999em) {
    .banner_content_wrapper {height:275px; padding: 0 5%;}  
    #banner-medium-height .banner_content_wrapper {height: 275px;  padding: 0 5%;}
    
.banner__image {left: -62px;}
.banner__heading {font-size: 1.5rem;}
.banner-content-wrapper {height: 275px;}
.banner__description {font-size: 1.3rem;}

/*    .banner__contents {width:75%;}*/
   
}
 
 
/* Mobile beakpoint (extra small, upto 23.44em, or 375px)*/
/* Prioritise the title over the 'M' */
@media only screen and (max-width: 23.44em) {
.banner__contents {width: 100%; left: 0;}
.banner__image {left: -12.5em;} /* move 'M' left off the screen */
.banner-content-wrapper {height: 275px;}
}


/* 31.25em = 500px */
@media only screen and (max-width: 31.250em) {
.banner__heading {font-size: 1.6rem;}
.banner__description {font-size: 1.1rem;}
.banner__heading + .banner__description {margin-top: .75rem;}
/*h1, strong.h1 {line-height: 1.1; padding-top: 0;}*/
}

/* END BANNER STYLES */




/* Full width banner (MH 12/3/21) */
/*Banner*/
.banner__heading {font-size: 2rem; text-transform:uppercase;}

h1, heading-h1, strong.h1 {
    padding-top: 0;
}



@media only screen and (min-width: 60em){
.banner-full-width.banner-full-width--cta .banner__contents.banner__contents-full-width .banner__contents-inner, .banner.carousel-full-width .banner__contents.banner__contents-full-width .banner__contents-inner {max-width: 45rem;}
}

@media only screen and (min-width: 37.5em){
.banner-full-width.banner-full-width--cta .banner__contents .banner__contents-inner, .carousel-full-width .banner__contents .banner__contents-inner {max-width: 35rem;}
}

@media only screen and (max-width: 46em){
.banner-full-width.banner-full-width--cta .banner__contents .banner__contents-inner, .carousel-full-width .banner__contents .banner__contents-inner {max-width: 25rem;}
}

@media only screen and (max-width: 37.5em){
.banner-full-width.banner-full-width--cta .banner__heading, .carousel-full-width .banner__heading {
    font-size: 1.25rem!important;
    font-family: Roboto Condensed,sans-serif;
    line-height: 1.3;
    font-weight: 700;
}

.banner-full-width.banner-full-width--cta .banner__contents .banner__contents-inner, .carousel-full-width .banner__contents .banner__contents-inner {max-width: 15rem;}
}

@media only screen and (max-width: 25em){
.banner-full-width.banner-full-width--cta .banner__contents .banner__contents-inner, .carousel-full-width .banner__contents .banner__contents-inner {max-width: 12rem;}
}


/* Make banner smaller */
/*
@media only screen and (min-width: 60em){
.banner-full-width.banner-full-width--cta .banner__inner, .banner-full-width.banner-full-width--cta .banner__link, .banner-search .banner__inner, .banner-search .banner__link {
    max-height: 20rem;
    height: 20rem;}
}

@media only screen and (min-width: 60em){
.banner-full-width.banner-full-width--cta .banner__image--wrapper, .banner-full-width.banner-full-width--cta .banner__image--wrapper .banner__image, .banner-full-width.banner-full-width--cta .banner__image--wrapper .banner__image--overlay, .banner-search .banner__image--wrapper, .banner-search .banner__image--wrapper .banner__image, .banner-search .banner__image--wrapper .banner__image--overlay {
    height: 20rem;}
}

@media only screen and (min-width: 60em){
.monash-m-new {width: 275px;}
}
*/
/* END Make banner smaller */
/* END Full width banner */






/* PROJECT MENU - HORIZONTAL VERSION */
.project-menu-horizontal {
 font-family: "Roboto Condensed", sans-serif;
    font-size: 1.125rem;
    font-weight: 400;  
  text-transform: uppercase;
}

.project-menu-horizontal ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-menu-horizontal ul li {
  display: inline-block;
}

.project-menu-horizontal ul li a {
/*  color: #505050;*/
  color: #006dae;
/*  font-size: 0.75rem;*/
  text-decoration: none;
}

.project-menu-horizontal ul li a:hover, .project-menu-horizontal ul li a:focus, .project-menu-horizontal ul li a:active {
/*  border-bottom: 2px solid #505050;
  color: #505050;*/
  border-bottom: 2px solid #006dae;
  color: #006dae;
 text-decoration: none;/* */
}

.project-menu-divider {
  content: '     ';
  display: inline-block;
  zoom: 1;
  margin: 0 5px;
}

/* Highlight the current page, and what to do when already highlighted menu item is being hovered over - DEFINED IN THE PAINT LAYOUT (for some reason https://www.monash.edu/education/media/css/archive/research-projects.css doesn't work if in the .css ???*/

/* end PROJECT MENU - HORIZONTAL VERSION */




/* PROJECT MENU - MOBILE DROPDOWN VERSION */

/* Always visible, clickable dropdown button (on mobiles only) */
.mobile-menu-dropbtn {
  background-color: #006dae;
  color: white;
  padding: 0;
  font-size: 16px;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: roboto;
}

.mobile-menu-dropbtn:hover, .mobile-menu-dropbtn:focus {
  background-color: #0081ce;
}

.mobile-menu-dropbtn-text {padding: 8px 15px; display:inline-block;}

.mobile-menu-icon {padding:12px 16px; text-align:right; background-color:#004d7b; float: right;}


/* The container <div> - needed to position the dropdown content */
.mobile-menu-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: 15px;
}

@media only screen and (min-width:60em) {
    .mobile-menu-wrapper {display:none;}
}


/* Dropdown menu list (hidden by default) */
.project-menu-mobile  {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.1);
  z-index: 1;
  width: 100%;
}

.project-menu-mobile ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-menu-mobile ul li {
  margin: 0;
  padding: 0;    
}
.project-menu-mobile ul li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.project-menu-mobile .project-menu-divider{
    display: none;
}

/* Change color of dropdown links on hover */
.project-menu-mobile ul li a:hover {background-color: #ddd}

/* Show the dropdown menu list (use JS to add this class to the .project-menu-mobile container when the user clicks on the dropdown button) */
.show {display:block;}

/* end PROJECT MENU - MOBILE DROPDOWN VERSION */



/* PROJECT CONTENT */
/*h1 {margin-top: 1.5em;}*/
h1 {margin-top: 1em;}

h2 {margin-top: 1em;}

/*h2:nth-child(1) {margin-top: 1em;}  h2 straight next to h1 should have less margin */

.project-content-wrapper {
/*    padding-right:3em;*/
    margin-bottom: 3em;
}

/* Highlight box for project pages (based on Monash styles) */
.box-listing-element__blurb {
    padding: 1rem 2.5rem;
}

.box-listing-element__blurb h2 {
    font-family: 'roboto condensed','roboto','san-serif';
    text-transform: uppercase;
    font-size: 1.2em;
   /* color: #006dae; use Graphite colour */
    margin-top: 1.5rem;
}
/* end Highlight box */


/*Mango mobile breakpoint*/
@media only screen and (max-width:59.999em) {
    /*h1 {margin-top: 0;} TW makes it too close to the mobile menu */
    .project-content-wrapper {padding-right:0;}
    .project-sidebar {margin-top: 0; padding-left:0;}
    .research-title {font-size: 1.875rem; padding-top: 1.5rem; font-size: 2em; margin: 0 0 0.67em 0;}
    .feature-text {font-size: 1.3em;font-weight: 300;line-height: 1.3;}
}

/* 31.25em = 500px */
@media only screen and (max-width: 31.250em) {
    .box-listing-element__blurb {
        padding: 1rem; 
    }
}

.timeline-section {border-left: 3px solid #006dae; padding-left: 1em;}

/* end PROJECT CONTENT */





/* PROFILE CARD STYLE (TW) */
/* Notes: Even on narrow screens, this profile should display the same as on larger screens.
          This style doesn't determine the position of multiple cards on the page. */
.profile-card {width:100%; padding: 1em;}
.profile-card a {text-decoration: none;}
a .profile-name {text-decoration: underline;}
.profile-text { margin-top: 10px;}
.profile-image {float:left; width:65px; margin-right:20px; width:65px; border-radius: 50%;}
.profile-name {font-weight:bold; padding-bottom:3px; color:#505050; line-height: 1.05em;}
a:hover .profile-name {color: #006dae; /*text-decoration: none;*/}
.profile-title {line-height: 1.1em; color:#777; padding-left: 85px;}

/* doesn't work .valign-center {
    position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);
}*/


/* SIDE BAR STYLES - MH*/
.side-bar {
    width:100%;
    margin-top: 28px;  /*2.5em; 5em; 80px;*/
}

@media only screen and (max-width:59.999em) {
.side-bar { margin-top: 2em; }
}

/* END SIDE BAR STYLES */