/*
  This css file provides the css for some but not all LA division pages.
  The first set of css is for pages with html tables.
*/
/*
  The css for the home page
*/
  .home-page > article > h1 {font-size:18pt;}
  .home-page-gallery {
    display: flex; 
    align-items: center; 
    gap: 3em; 
    margin: auto; 
    padding-top: 1em;
  }
  .home-page-gallery > div { text-align: center;}
/*
  The css for tables controls the webpage for Officers and Contacts table structure.
*/
.officers-contacts {
   display: flex; 
   justify-content: flex-start;
   flex-wrap: wrap;
   align-items: stretch;    
   flex-direction: row;
   gap: 10px;
}
.officers-contact-position {
    table, td, th {
     border: 1px solid black;
   }
   table > td {padding: 5px;}
   border: 2px solid #d12a2a; 
   background-color: #dbd7d7;
}
/*
  For the Photo Gallery
*/
.msg1-photo-gallery {
  margin-bottom: 1.5em;
  padding:8px; 
  color:white; 
  background-color:#993300;
  font-size: 24pt; 
  font-family: helvetica, arial, sans-serif;
  border-radius: 20px; 
  text-align: center
}
.photo-gallery {
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: space-evenly; 
  gap: 10px; 
  width: 100%; 
  padding:1rem; 
  background-color:#ececec;
}
/*.photo-gallery > div {width:24%;}*/
/*
  The following are the media statements to control how certain pages
  behave at different screen sizes
*/
 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .home-page {width: 95%;}
  .home-page > article > h1 {font-size: 15pt;}
  .home-page-gallery {flex-direction: column; width: 99%;}
  .officers-contacts {
	 flex-direction: column;
     table {width: 85%;}
	 }
  .msg1-photo-gallery {font-size: 14px;}
  .photo-gallery {
     flex-direction: column;
     gap: 0px; 
     width: 100%; 
     padding:1rem; 
     > div {width:100%;}
   }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .msg1-photo-gallery {font-size: 16pt;}
  .officers-contacts {
     table {width: 32%;}
	 }
  .photo-gallery {
     gap: 0px; 
     width: 100%; 
     padding:1rem; 
     > div {width:45%;}
   }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .officers-contacts {
     table {width: 22%;}
	 }
  .photo-gallery {
    padding: .5rem; 
     > div {width:31%;}
   } 
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .photo-gallery > div {width:24%;}
}