/*
  The contents of this file, user.css, is used adjust the cassiopeia template
  and to control how some of the pages look.  This is usally done because the
  editor module doesn't support many of the CSS feature such as "grid" and "flex"
*/
/*
  Change the header color.  Note: must also have no background image
*/
/*.container-header {background-color:rgb(255, 105, 0);}*/
/*
.container-header, .footer{background-color:#004e87;}
.container-header, .footer{background-color:#004e87;}
.container-header, .footer {background-image:none;}
*/
/*
  These changes to the header are per the NMRA "standards"
*/
.container-header, .footer{background-color:#5eb5db;}
.container-header, .footer {background-image:none;}
.container-header .navbar-brand {display:grid; grid-template-columns:15% auto; align-items:center; column-gap:3em; width:100%;}
.container-header .site-description {color:#00b; font-weight:bold;}
.container-header .mod-menu {color:#00b;}
.container-header .site-description {font-size:56px; color:darkblue; font-weight:bold;}
.login {width:40%; margin:auto;}
.login {background-color:lightblue; padding:1.5em; margin:auto;}
/*
  Change menu bar font size
*/
.container-header .mod-menu {font-size:1.2rem;font-weight:bold;}
/*
   This is the special css for the PSRNMRA Website pages
*/
/*
.committee-chairs {display: grid; gap: 1.5em; width: 100%;}
.committee-chairs {grid-template-columns: 40% 40% 17% 15%; gap: 1.5em; width: 100%;}
*/
.committee-chairs {display: grid; grid-template-columns: 40% 40%; gap: 1.5em; width: 100%;}
.historian-borders td {border: 2px; border-style: solid; border-color: grey; border-collapse: collapse; text-align: center;}  /* This creates a 2px solid blur border around all the cells in a table*/
.psrdispatch-borders td {border: 2px; border-style: solid; border-color: black; border-collapse: collapse; text-align: center;}  /* This creates a 2px solid blur border around all the cells in a table*/
/*
  the next css sets the size of the About Us article to fit different screen sizes.
*/
.historian {width:60%; margin:auto;}  /*Sets the default width of the article and sets the left and right margins to be equal*/
/*
  The following text puts a green background color with white text for the Upload File button
*/
.btn {background-color:green; color:white;}
/*
   Media statements below for different size devices
*/
/* 
	Small devices (portrait tablets and phones, less than 399 pixels) 
*/
@media only screen and (max-width: 399px) {
  .container-header .navbar-brand {column-gap:1em;}
  .container-header .site-description {font-size:18px;}
  .login {width:90%; margin:auto;}
  .historian {width: 30%;}  /*Set the width of the article to 95%*/
}
/* 
  Small devices (portrait tablets and large phones, 400px and up) 
*/
@media only screen and (min-width: 400px) {  
  .container-header .navbar-brand {column-gap:1em;}
  .container-header .site-description {font-size:18px;}
  .login {width:95%; margin:auto;}
}
/* 
  Small devices (portrait tablets and large phones, 601px and up) 
*/
@media only screen and (min-width: 601px) {  
  .container-header .navbar-brand {column-gap:1em;}
  .container-header .site-description {font-size:24px;}
}
/* 
	Medium devices (landscape tablets, 750px and up) 
*/
@media only screen and (min-width: 750px) {
  .container-header .navbar-brand {column-gap:1em;}
  .container-header .site-description {font-size:30px;}
}
/* 
	Medium devices (landscape tablets, 800px and up) 
*/
@media only screen and (min-width: 800px) {
  .container-header .site-description {font-size:36px; color:darkblue; font-weight:bold;}
}
/*
  Large devices (laptops/desktops, 1000px and up) 
*/
@media only screen and (min-width: 1000px) {
  .container-header .site-description {font-size:40px; color:darkblue; font-weight:bold;}
}
/* 
  Extra large devices (large laptops and desktops, 1300px and up) 
*/
@media only screen and (min-width: 1200px) {
  .container-header .site-description {font-size:28px; color:#00b; font-weight:bold;}
  .committee-chairs {grid-template-columns: 16% 18% 17% 15%; gap: 1.5em; width: 100%;}
}