/*
  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
*/
.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*/
.open-house {display:flex; flex-direction:column; gap:20px;} /*Controls how open house calendar events are displayed.*/
/*
  This class places a 5 pixel spacing around the html tag img on the PSR Conventions page.
*/
.conventions img {padding:5px;}
/*
  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, 399px and down) 
*/
@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%*/
/*  .open-house {flex-direction:column; gap:20px;} /*Controls how open house calendar events are displayed.*/
  .open-house div {width:95%;}
}
/* 
	Extra small devices (phones, 400px and 600px and ) 
*/
@media only screen and ((min-width: 400px) and (max-width: 600px)) {
  .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, 900px and up) 
*/
@media only screen and (min-width: 900px) {
}
/* 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) {
  .open-house {flex-direction:row; gap:20px;} /*Controls how open house calendar events are displayed.*/
  .open-house div {width:30%;}
  .container-header .site-description {font-size:56px; color:#00b; font-weight:bold;}
}