@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*************************** override default html behaviours *********************/ 

*,*::before, *::after { box-sizing:border-box; }  /* padding: 0; margin: 0;  */
body {color:#555;font-weight: 300; margin:0px; padding:0px; font-family:"Roboto";line-height:1.4; font-size:0.9rem; height: 100vh; background-color: #f2f2f2;}  /* background-color:#f9f9f9; */
img {display: block;max-width:100%;}

ul { margin-block-start: 1em; padding-inline-start: 20px;}

h1 {color:#4D6185; }
h2 {color:#404040;}
h2, h2 a:link {text-decoration:none; color:#666;}
h3 {}

h1, h2, h3 { font-weight: 400; padding:0px; margin:0px; text-transform:uppercase;font-family:"Open Sans";}  /* margin:0px 0px 15px 0px; */

a, a:link, a:visited { text-decoration: none; color:#555; }
a:hover { cursor: pointer; }
p a:link { text-decoration: underline; filter: opacity(.7); }
p a:hover { text-decoration: none; filter: opacity(1); filter: brightness(1.5); }

textarea, input[type=text], input[type=password], input[type=email] {display: block; box-sizing:border-box; width:100%; padding:.4rem; border: 1px solid #cacaca; margin: 0 0 1rem;  color: #8a8a8a; font-size:90%; }
input[type=text], input[type=password], input[type=email] {height: 2.2rem;}
input[type=password] {width:250px;}
input[type=file] {display: block; box-sizing: border-box; padding: .5rem;  margin: 0 0 1rem; }


select { height: 2.2em; padding: 0em 1em; margin: 0em; font-size: 1em; color: #8a8a8a; background-color: #fafafa; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; border:1px solid #cacaca; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb(51, 51, 51)"></polygon></svg>'); background-size: 9px 6px; background-position: right .75em center; background-repeat: no-repeat;}


/********************** common styles ******************************/

.container {display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh;}
.main { padding:0px 15px; width:100%;}

.whiteblock {margin-bottom:20px;border-radius:15px; background-color:white;padding: 15px; }
.whiteblock:empty { display: none;}
hr.contentdivider {border:0px; border-top: 1px solid #ccc; margin: 20px 0px 20px 0px;}
hr.sectiondivider {border:0px; border-top: 1px dotted #404040; margin: 20px 0px 20px 0px;}

.subhead {margin-bottom:15px;}
.headline {font-size:1rem; margin-bottom:5px;font-weight:500;}
.list_item {margin-bottom:15px;}
.subpagetype {font-weight:500;}

.morelink {font-size:0.8rem; font-weight:200;color:#999;margin-top:5px;}
.morelink a:link {display:block; color:#999;}
.morelink:after {content: ">";  margin-left:5px;}

.eventdate, .joblocation, .news_date {font-style:italic; margin-bottom:2px;}

.news_list_item {display:grid; grid-template-columns:3fr 1fr; grid-column-gap:20px;}
.news_list_pic {width:150px;}
.news_list_pic > img {width:100%; height:100%;object-fit: cover;}


.button {padding:5px 10px; border-radius: 15px; text-transform:uppercase;  margin:0px; font-size:80%; cursor: pointer;display: inline-block; text-align: center; cursor: pointer;-webkit-appearance: none;
transition: all .25s ease-out;border: 1px solid transparent;font-weight:200;text-transform: uppercase; font-size:80%; }
.yellow_button, .yellow_button:link, .yellow_button:visited { display:inline-block; background-color:#E5B541;color:#fff !important; font-weight:bold; }
.white_button, .white_button:link, .white_button:visited {background-color:white; color:#999; border-color:#999; font-size:70%; font-weight:bold;}
.red_button, .red_button:link, .red_button:visited {background-color:white; color:#cc3300; border-color:#cc3300; font-size:70%; font-weight:500;}

.login {background-color:#00B052; text-transform:uppercase; font-size:0.7rem;padding:7px 10px;border-radius: 18px; }
a.login:link, a.login:visited {color:#fff;}

.yellow_panel {background-image: linear-gradient(180deg, #f6e4bc, #E5B541);margin-bottom:20px;border-radius:15px; padding:15px;color:#4d4d4d}

.footer_text {background-color:#171796; color:white; padding:10px; text-align:center; font-size:80%; text-transform:uppercase;letter-spacing:0.5px; align-items: center;}

.ea {display: none;}
.withlinks {text-decoration:underline;}


/********************* layout for mobile *************************/

.bigmenu { display: none; }
.bigfooter { display: none; }
.siteheader {background-color:white; margin-bottom:20px;}

.smallmenu {display:grid; grid-template-columns: 3fr auto; padding:10px; grid-column-gap:70px;align-items: center;margin-right:10px;}

h1 {font-size:1.4rem;}
h2 {font-size:1.1rem;}
.sectiontitle {margin-bottom:10px; color:#404040;}
.sectionhead {background-color:#ccc; padding:10px;}

.aboutvideo {display:none;}
.calendargrid {display:none;}
.calendarrightcolumn, .newsrightcolumn, .jobsrightcolumn {display:grid; grid-template-columns:1fr 1fr; grid-gap:20px;}
.repository {display:grid; grid-template-rows: 1fr auto; }
.reposearch {border-bottom:1px solid #ccc; padding-bottom:30px; margin-bottom:20px;}
.newspage {display:block; grid-template-rows:auto auto; }
.directorypeople {display:grid; grid-template-columns: repeat(3, 1fr); grid-gap:30px;}
.directorysearch {display:grid; grid-template-rows: repeat(4, minmax(auto, max-content)); grid-row-gap:10px;align-items: center; }
.directoryjoin {margin-bottom:10px; margin-top:20px;}

.icppage {display:flex; width:100%;flex-wrap: wrap;flex-direction: column;  }
.icptitle { order: 1; }
.icppartner { order: 2; }
.icpimg    { order: 3; }
.icpblurb  { order: 4; }


.news_author {font-style:italic;}
.news_date {font-style:italic;}

/************************ layout for desktop ***************************/

@media (min-width: 1024px) {
  .smallmenu { display: none; }
  .smallfooter {display:none; }
  .home_tfca_mobile {display:none; }
  .bigmenu { display: block;}
  .bigfooter { display: block;}
  .container { max-width:1080px; margin: 0 auto; }
  .main {padding:0px;}
  .repository {display:grid; grid-template-columns:1fr 4fr; column-gap:30px;}
  .siteheader { margin-bottom:25px;background-color:#f2f2f2;}  /* background-color:#f9f9f9; */
  .navbar {background-color:#171796; padding:0px; margin:0px;text-transform:uppercase;}
  .navitem {height:inherit;padding:8px;flex-grow: 1; margin:0px;}
  .navitem a:link, .navitem a:visited {font-size:0.7rem; font-weight:300; padding:0px 4px; letter-spacing:1px; color:#fff;}
  .selected {background-color:#E5B541;}
  .selected a:link, .selected a:visited {color:#333;}


  h1 {font-size:2rem;}
  h2 {font-size: 1.2rem;}
  h2, h2 a:link {}
  h3 {font-size:1rem;  }

  .sectiontitle {margin-bottom:20px;}
  .homepage {margin-top: -25px;}
  .whiteblock {padding:20px; margin-bottom:30px;}

  .linkspage,   .networkpage  {display:grid; grid-template-columns:8fr 3fr; grid-column-gap:30px;}
  .icppage {display:grid; grid-template-columns:3fr 1fr; grid-column-gap:30px;}
  .icpview {display:grid; grid-template-columns:6fr 4fr; grid-column-gap:30px;}
  .jobpage, .calendarpage, .newspage {display:grid; grid-template-columns:5fr 2fr; grid-column-gap:30px;}
  .repositorypage, .directorytop { display:grid; grid-template-columns:4fr 4fr 1fr; }
  .fundingpage { display:grid; grid-template-columns:7fr 3fr; grid-column-gap:50px; }
  .repodocpage { display:grid; grid-template-columns: 3fr 1fr; grid-column-gap:30px; }
  .directorypeople {display:grid; grid-template-columns: repeat(3, 1fr); grid-gap:20px;}
  .directorysearch {display:grid; grid-template-columns: repeat(4, minmax(auto, max-content)) auto; grid-column-gap:20px;align-items: center;}
  .directoryjoin {padding-right: 30px; margin-right:30px; border-right:solid 1px #ccc; margin-top:0px;}
  .directoryjoin.bottom {border:0px;}
  .directorytop {padding-top:10px;}
  .directoryviewpage {display:grid; grid-template-columns:7fr 2fr; grid-column-gap:30px;}

  .aboutdesc {display:grid; grid-template-columns: 5fr 2fr; grid-gap:50px;}
  .aboutvideo {display:block;}
  .calendarcontent {display:grid; grid-template-columns: 2fr 4fr; grid-column-gap:30px;}
  .calendarrightcolumn, .newsrightcolumn, .jobsrightcolumn {display:block;}
  .calendarrightcolumn {margin-bottom:30px;}
  .reposearch {border:0px;}
  .calendargrid {display:block;}


  .icptitle, .icppartner, .icpimg, .icpblurb  { order: 0; }
  .icptitle {grid-row-start:1; grid-row-end:1; grid-column-start:1; grid-column-end:2; }
  .icpblurb {grid-row-start:2; grid-row-end:3; grid-column-start:1; grid-column-end:2; }
  .icpimg {grid-row-start:1; grid-row-end:3; grid-column-start:2; grid-column-end:3;}

  .footer_supportedby {place-self:center end; text-align:center; padding:20px 15px 20px 30px; flex-grow: 1;border-right: 1px solid #ccc;margin-right:20px;text-transform:uppercase;font-size:var(--smallFont);}
  .footer_logos {place-self: center;padding:10px 20px; flex-grow: 1;}
  .footer_logo {max-width:250px;max-height:50px;}
  .footer_supporters {display:flex; flex-wrap:nowrap; align-items: center; background-color:white; margin-top:30px;}


  .yellow_panel.halfcolumn {width:50%;}
  .yellow_panel > h3 {margin-bottom:10px;}
}






/*********** gallery **********************/

.thumbnail_grid { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); line-height: 0; grid-gap: 1rem; height: max-content; }

.gallerypage {display:grid;}
.gallerytitle {order:1; margin-bottom:20px;}
.gallerygrid {order:2;}
.galleryblurb {order:3; margin-top:30px;}
.grid-thumbnail-img  {width:100%;}
.gallery-thumbnail:hover { filter: brightness(1.1); cursor: pointer; }

.pagenums a:link { text-decoration: none; }
.pagenums .current { background-color: #ccc; color: #000; }
.pagenums { display: flex; align-content: center; margin-top: 2rem;}
.pagenums span { padding: .5rem 0.6rem; margin-right: .5em; font-size:.9em;font-weight:400;}


.mobx-caption-inner {border:solid 0px red;padding-bottom:30px; padding-top:20px;}
.mobx-desc {text-align:left; margin:0 auto; border:solid 0px green;padding:0px; width:fit-content;}
.mobx-holder:not(.mobx-open) 
.mobx-bottom-bar, .mobx-idle 
.mobx-bottom-bar, .mobx-will-close 
.mobx-bottom-bar{-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform .9s ease-in-out;transition:transform .9s ease-in-out}
.mobx-overlay { background-color: rgba(255,255,255,0.9); }
.mobx-top-bar {background:none;}
.mobx-bottom-bar {will-change:transform; background-color: rgba(255,255,255,0.9);} /**/
.mobx-desc, .mobx-error h2,.mobx-desc h2 {color:#666;}
.mobx-top-bar button { background-image:url('/images/modulobox_black.svg');}

@media print, screen and (min-width:1024px) {
  .thumbnail_grid {display:grid; line-height:0; width:100%;grid-template-columns:repeat(4, 1fr);grid-gap: 1rem; }
  .gallerypage {display:grid; grid-template-areas: "thegrid title" "thegrid blurb"; grid-column-gap:30px;grid-template-rows:auto 1fr; grid-template-columns: 2fr 1fr; }
  .gallerytitle {grid-area:title; margin-bottom:0px}
  .gallerygrid {grid-area:thegrid;}
  .galleryblurb {grid-area:blurb; margin-top:10px;}
  .mobx-desc {padding:0px;}
}



/*********** pullout menu *****************/ 
.mm-navbar { display: none; }
#mm-menu { min-width:200px; max-width:80vw;}
.mm-menu {background-color: var(--mobileNavBg);}
#my-menu:not(.mm-menu) { display: none; }

@media all {
  html.mm-opening .mm-slideout {
    -webkit-transform: translate(80vw, 0) !important;
    -moz-transform: translate(80vw, 0) !important;
    -ms-transform: translate(80vw, 0) !important;
    -o-transform: translate(80vw, 0) !important;
    transform: translate(80vw, 0) !important; 
    }
}

.mm-navbars-top {display:none;}
.mm-hasnavbar-top-1 .mm-panels {top:0px;}
.mm-panels>.mm-panel {padding:20px 40px;}

.mm-listview a.navd:link, .mm-listview a.navd:visited {text-decoration:none;}
.mm-listview > li > a, .mm-listview > li > span {padding-left:0px; border-bottom:1px solid var(--mobileNavDivider);}
.mm-listview > li:not(.mm-divider):after {left:0px;}



.errorMsg {color:#cc0000;margin:20px 0px;}