/* ==========================================================================
   Franciscan Missionaries of Mary - responsive rebuild
   Based on the original FMOMstyles.css. Loaded after Bootstrap so the
   original look wins over Bootstrap's defaults.
   ========================================================================== */

/* ---- Original site styles (FMOMstyles.css) ---- */
body
{
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
  line-height: normal;
  padding: 0;
  margin: 0 auto;
  background-color: #3e105e;
  background: #3e105e url(../images/fmombackground.jpg) no-repeat center top;
  color: navy;
  text-align: justify;
}

a:link, a:visited
{
  color: #7858a3;
  text-decoration: none;
}

a:hover
{
  color: navy;
  text-decoration: underline;
}

#MainBodyArea
{
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  text-align: left;
}

.InsideBodyArea
{
  margin-left: 25px;
}

.SubMenuLink
{
  font-size: 16px;
}

.SubMenuLink a:link, .SubMenuLink a:hover, .SubMenuLink a:visited
{
  color: #3e105e;
}

#footer
{
  color: #ffffff;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 50px;
}

#footer a:link, #footer a:hover, #footer a:visited
{
  color: #ffffff;
}

p
{
  margin-top: 5px;
  margin-bottom: 15px;
}

h1
{
  font-size: 18px;
}

.PageMotto
{
  font-size: 24px;
  font-family: "Times New Roman", Verdana, serif;
  font-style: italic;
}

.PageMotto .motto-author
{
  font-size: 13px;
}

/* ---- Undo Bootstrap reboot where it would change the original look ---- */
h1, h3
{
  font-weight: bold;
  line-height: normal;
  margin: 0.67em 0;
}

h3
{
  font-size: 1.17em;
  margin: 1em 0;
}

ul
{
  padding-left: 40px;
  margin-top: 1em;
  margin-bottom: 1em;
}

ul ul
{
  margin-top: 0;
  margin-bottom: 0;
}

/* The original pages render images in table cells without the small gap
   modern browsers leave under an image, so images sit flush. The envelope
   icon shares its line with text, so it keeps normal text alignment. */
.fmm-main img,
.fmm-motto img
{
  vertical-align: top;
}

.fmm-main img[src$="envelope.jpg"]
{
  vertical-align: baseline;
}

/* ---- Sliced header artwork: scales proportionally with the page ---- */
.slice-row
{
  display: flex;
}

.slice-row img
{
  display: block;
  height: auto;
  max-width: none;
  flex: none;
}

.slice-row a
{
  display: block;
  flex: none;
}

.slice-row a img
{
  width: 100%;
}

/* ---- Main menu on phones (the image menu is too small to tap there) ---- */
.fmm-mobile-nav
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 0 2.7368% 0 2.4211%;
  background:
    url(../images/Franciscan_Missionaries_MenuLeft.png) left top / 2.4211% 100% no-repeat,
    url(../images/Franciscan_Missionaries_MenuRight.png) right top / 2.7368% 100% no-repeat,
    #ffffff content-box;
}

.fmm-mobile-nav a:link,
.fmm-mobile-nav a:visited
{
  display: block;
  padding: 11px 6px 10px;
  text-align: center;
  background: linear-gradient(#7498cc, #6680b9 50%, #4855a4);
  color: #ffffff;
  font-family: "Trajan Pro", Optima, Candara, "Times New Roman", serif;
  font-variant: small-caps;
  font-size: 19px;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55);
  text-decoration: none;
}

.fmm-mobile-nav a[aria-current="page"],
.fmm-mobile-nav a:hover
{
  background: linear-gradient(#6687bd, #4855a4);
}

/* ---- Content panel ---- */
.fmm-content
{
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}

/* Desktop/tablet: same geometry as the original layout table
   (2px cell spacing, 1px cell padding, 200px menu, 690px content table) */
@media (min-width: 768px)
{
  .fmm-sidebar-col
  {
    margin: 2px 0 2px 2px;
    padding: 1px;
  }

  .fmm-main
  {
    margin: 2px 0 2px 2px;
    padding: 1px;
    max-width: 692px;
    align-self: center; /* table cells centre short content beside the menu */
  }
}

.fmm-sidemenu
{
  list-style: none;
  width: 200px;
  margin: 0;
  padding: 0;
}

.fmm-sidemenu li
{
  background-image: url(../images/SideMenuMain.jpg);
  padding: 5px;
}

.fmm-sidemenu li.fmm-sidemenu-bottom
{
  background-image: url(../images/SideMenuBottom.jpg);
  height: 71px;
}

.fmm-page-index
{
  max-width: 680px;
}

/* Each section was its own table cell on the original site, which kept a
   floated photo inside its own section. flow-root does the same here, so a
   tall photo can't spill into the next section and push its photo sideways. */
.fmm-row
{
  display: flow-root;
  margin: 2px;   /* original table's cell spacing */
  padding: 1px;  /* original table's cell padding */
}

.fmm-main img
{
  max-width: 100%;
  height: auto;
}

.fmm-photo-right
{
  float: right;
}

.fmm-photo-left
{
  float: left;
}

.fmm-motto
{
  text-align: center;
}

.fmm-motto img
{
  max-width: 100%;
  height: auto;
}

/* ---- Below the full 950px width: keep content inside the white panel ---- */
@media (max-width: 949.98px)
{
  .InsideBodyArea
  {
    margin-left: 3%;
    margin-right: 3.4%;
  }
}

/* ---- Phones ---- */
@media (max-width: 767.98px)
{
  body
  {
    font-size: 13px;
  }

  .fmm-sidebar-col
  {
    width: 100%;
    padding: 12px 0 6px;
  }

  .fmm-sidebar-empty
  {
    display: none;
  }

  .fmm-sidemenu
  {
    width: 100%;
    padding: 4px 0 14px;
    background-color: #dae4f0;
    border-bottom-right-radius: 40px;
  }

  .fmm-sidemenu li
  {
    background-image: none;
    padding: 5px 10px;
  }

  .fmm-sidemenu li.fmm-sidemenu-bottom
  {
    display: none;
  }

  .fmm-main
  {
    padding: 0;
  }

  .fmm-main > br:first-child
  {
    display: none;
  }

  .fmm-page-index
  {
    margin-top: 10px;
  }

  .PageMotto
  {
    font-size: 20px;
  }
}

@media (max-width: 575.98px)
{
  /* photos stop floating so the text beside them doesn't get squeezed */
  .fmm-photo-right,
  .fmm-photo-left
  {
    float: none;
  }

  .fmm-photo img
  {
    margin: 10px 0 0 0 !important;
  }

  .fmm-photo
  {
    margin-bottom: 10px;
  }

  .fmm-mobile-nav a:link,
  .fmm-mobile-nav a:visited
  {
    font-size: 17px;
  }
}

/* home page: the menu row sits between the photo-strip edges */
.fmm-home .fmm-mobile-nav
{
  padding: 0 4% 0 2.3158%;
  background:
    url(../images/Franciscan_Missionaries_02.png) left top / 2.3158% 100% no-repeat,
    url(../images/Franciscan_Missionaries_04.png) right top / 4% 100% no-repeat,
    #ffffff content-box;
}