/*
This file, user.css, is used to modify look and feel of the website.
Some of the css also is used for modifying look and feel components
*/
/*
  Change the header color.  Note: must also have no background image
  and remove padding to make the size of the header smaller
*/
/*.container-header {background-color:rgb(255, 105, 0);}*/
.container-header, .footer {background-color:#00709E;}
.container-header, .footer {background-image:none;}
body.wrapper-fluid header > .grid-child {padding-top:0px; padding-bottom:0px;}
.container-header .navbar-brand {padding:0px;}
.container-header {margin-top:0px;}
/*  change the logo size for the header logo */
.brand-logo {display:inline-block; width:221px; height:auto;}
/*
 The next css changes the font and where the branding is show.  Normally it is under the logo
*/
.container-header .navbar-brand {display:grid; grid-template-columns:15% auto; align-items:center; column-gap:3em; width:100%;}
.container-header .site-description {color:white; font-size:3.4rem; font-weight:bold;}

/*
  Change menu bar font size and remove top margin. Increase the opacity of the menu under bar.
*/
.container-header nav {margin-top:0px;}
.container-header .mod-menu {font-size:1.2rem;font-weight:bold;}
.container-header .metismenu > li > a::after, .container-header .metismenu > li > button::before {opacity:0.8}
/*
  CSS for implementing read "more" and "less" feature
*/
.read-more-wrap  {margin-bottom:5px;}
.read-more-state {display:none;}
.read-more-target {opacity:0; max-height:0; font-size:0; transition:.25s ease;}
.read-more-state:checked ~ .read-more-wrap .read-more-target { opacity:1; font-size:inherit; max-height:999em;}
.read-more-state ~ .read-more-trigger:before {content: 'Show more';}
.read-more-state:checked ~ .read-more-trigger:before {content: 'Show less';}
.read-more-trigger {cursor:pointer; display:inline-block; padding:0 .5em; color:white; font-size:1.0em; line-height:2; background-color:red; border-radius:20px; font-weight:bold;}
/*
  Set the fault width for the Daylight Sales logo
*/
  #daylight-sales-logo {width:40%;}
/*
  define the class for the division meets for small devices less than 1000 pixels.
*/
.division-meet-page {width:95%; margin:auto;}
.division-meet-header {text-align:center; text-decoration:underline; font-size:20px; font-weight:bold;}
.division-meet {display:flex; flex-direction:column; gap:1em;}
.division-meet article {width:100%}
.registration, .schedule {font-size:12px;}
.schedule tr td:nth-child(1) {width:20%;}
.registration tr td:nth-child(1) {width:10%;}
.division-map {width:99%;}
.division-map iframe {width:95%; height:300px;}
/*.azdiv-container article iframe {width:650px;}*/
/*
  Set the class for the division management team page.
*/
.az-division-leadership-group {display:grid; grid-template-columns:100%; gap:1em;}
.az-division-group {width:100%; background-color:whitesmoke; padding:1em; border-radius:20px;}
.committee-chair {background-color:lightblue; padding:10px; border-radius:15px;}
.committee-chair-descriptionn > p{margin-bottom:5pt;}
.committee-chair-title {font-size:18pt; font-weight:bold;}
.committee-chairman {font-size:16pt; font-weight:bold;}
.committee-contact-form {font-size:14pt;}
.committee-bio-slider {font-size:14pt;}
.committee-bio-text > p{font-size:12pt;}
/*
  Apply special css to certain pages with tables whose id is azdiv-archive
  This css does not control font size or font color.  This is left up to the page code.
*/
#azdiv-archive {border-collapse:collapse; width:99%; border-spacing:2px;}
#azdiv-archive td, #azdiv-archive th {width:33%; height:40px; border:1px solid #ddd; padding:8px; text-align:center; vertical-align:middle;}
#azdiv-archive tr:nth-child(odd){background-color:#99ccff;}
#azdiv-archive tr{background-color:silver;}
#azdiv-archive th {background-color:#0066cc; color:white;}
/*
  The following  code is for the AZ Division Railroad clubs and Hobby shops
*/
.mr-clubs, .hobby-shops {width:90%; margin:auto;}
.azdiv-container {display:flex; flex-direction:column; justify-content:flex-start; flex-wrap:wrap; gap:10px;}
.azdiv-container article {background-color: #d4ecfb; border-radius:10px; padding:.9rem;}
.azdiv-container article p {padding-left:1rem !important; margin-bottom:0 !important;}
/*
  The following  code is for the AZ Division video gallery
*/
.new-video-gallery {width:100%; margin:auto; background-color:aliceblue; padding:1em; border-radius:20px;}
.new-video-gallery section {display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; width:auto; gap:1em;}
/* 
   Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width:600px) {
  body.wrapper-fluid .site-grid {grid-gap:0 0.6em;}
  .mr-clubs, .hobby-shops {margin:auto;}
  .azdiv-container {flex-direction:row; width:100%;}
  #azdiv-archive {width:100%;}
  .new-video-gallery {flex-direction:column; justify-content:center; margin:auto;}
  .video-title {display:block;}
  .az-division-leadership-group {grid-template-columns:45% 45%; gap:1em;}
}
/*
   Medium devices (landscape tablets, 768px and up) */
*/
@media only screen and (min-width: 768px) {
  #daylight-sales-logo {width:60%;}
}
/*
   For screen sizes 992px and up
*/
@media only screen and (min-width:800px) {
  .schedule tr td:nth-child(1) {width:12%;}
/*
  Code to control the Who We Are page structure.
*/
  .who-we-are {width: 80%; margin: auto; padding: 15px; }
  /*
  .division-meet-header {font-size:30px;;}
  .az-division-leadership-group {grid-template-columns:49% 49%; gap:1em;}
  .mr-clubs, .hobby-shops {width:90%; margin:auto;}
  .azdiv-container article {flex-direction:column; margin:auto; width:49%}
  .new-video-gallery section {display:flex; flex-direction:column; justify-content:center; margin:auto;}
  .new-video-gallery section article {display:flex; flex-direction:column; justify-content:center; margin:auto;}
  .schedule tr td:nth-child(1) {width:12%;}
*/
}
/*
  Extra large devices (large laptops and desktops, 1200px and up) 
*/
@media only screen and (min-width: 1200px) {
/*
  define the class for the division meets for small devices less than 1000 pixels.
*/
  .division-meet-page {width:90%; margin:auto;}
  .division-meet-header {font-size:30px;;}
  .division-meet {display:flex; flex-direction:row; gap:1em;}
  .division-meet article {98%;}
  .registration, .schedule {font-size:1em;}
  .division-map iframe {height:450px;}
}
/*
   When the width 1280px or greater
*/
@media only screen and (min-width: 1280px) {
  .az-division-leadership-group {grid-template-columns:33% 33% 33%; gap:1em;}
  .azdiv-container {flex-direction:row;}
  .azdiv-container article {width:30%;}
  .azdiv-container article iframe {height:450px; width:650px;}
  .mr-clubs, .hobby-shops {width:80%; margin:auto;}
  .new-video-gallery section {display:flex; flex-direction:row; justify-content:center; margin:auto;}
  .new-video-gallery section article {display:flex; flex-direction:row; justify-content:center; margin:auto;}
/*
  Code to control the Who We Are page structure.
*/
  .who-we-are {width: 60%; margin: auto; padding: 15px;}
}