/* ==========================================================================
   FBI Nashville Citizens Academy Alumni Association
   Wild Apricot custom CSS

   Palette taken from the chapter seal:
     navy      #12305A   headings, nav bar, buttons, links
     navy dark #0D2445   hover states, footer band
     gold      #A8842B   rules, accents, link hover
     gold soft #C8A44A   accents on navy grounds
     ink       #22303F   body text
     ground    #F5F7FA   page surround

   Applied on top of the "Homestead Country lane" theme. This file only
   overrides colours, type and a few backgrounds - it does not change
   layout, and clearing this box restores the theme exactly as it was.
   ========================================================================== */


/* 1. Page ground - remove the theme brick texture */
#mLayout.layoutMain {
  background-image: none !important;
  background-color: #F5F7FA !important;
}

.zoneContentOuter,
.zoneContentWrap,
.zoneContent {
  background-color: #FFFFFF !important;
}

.zoneBranding {
  background-image: none !important;
}


/* 2. Body type */
body,
.zoneContent,
.zoneContent p,
.zoneContent li,
.zoneContent td {
  color: #22303F !important;
}

.zoneContent p,
.zoneContent li {
  line-height: 1.65 !important;
}


/* 3. Headings - Georgia, navy, sentence case */
.zoneContent h1,
.zoneContent h2,
.zoneContent h3,
.zoneContent h4,
.zoneContent h1.header,
h1.header {
  font-family: Georgia, "Times New Roman", serif !important;
  color: #12305A !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: normal !important;
}

.zoneContent h1,
h1.header {
  font-size: 32px !important;
  line-height: 1.2 !important;
}

.zoneContent h2 { font-size: 25px !important; line-height: 1.25 !important; }
.zoneContent h3 { font-size: 20px !important; line-height: 1.3 !important; }
.zoneContent h4 { font-size: 17px !important; }

h1.header:after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #A8842B;
  margin: 14px 0 2px 0;
}


/* 4. Main navigation */
.WaGadgetMenuHorizontal.menuStyle001,
.WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel {
  background-color: #12305A !important;
  background-image: none !important;
}

.WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li > div.item > a {
  color: #DCE4EE !important;
  letter-spacing: 0.06em !important;
}

.WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li > div.item > a:hover {
  color: #FFFFFF !important;
  background-color: #0D2445 !important;
}

.WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.sel > div.item,
.WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.sel > div.item > a {
  color: #FFFFFF !important;
  background-color: #0D2445 !important;
}

.WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.sel > div.item {
  box-shadow: inset 0 -3px 0 #C8A44A !important;
}

.WaGadgetMenuHorizontal.menuStyle001 ul.secondLevel,
.WaGadgetMenuHorizontal.menuStyle001 ul.thirdLevel {
  background-color: #0D2445 !important;
}

.WaGadgetMenuHorizontal.menuStyle001 ul.secondLevel > li > div.item > a,
.WaGadgetMenuHorizontal.menuStyle001 ul.thirdLevel > li > div.item > a {
  color: #DCE4EE !important;
}

.WaGadgetMenuHorizontal.menuStyle001 ul.secondLevel > li > div.item > a:hover,
.WaGadgetMenuHorizontal.menuStyle001 ul.thirdLevel > li > div.item > a:hover {
  color: #FFFFFF !important;
  background-color: #12305A !important;
}

.WaGadgetMenuHorizontal.menuStyle001 .menuButton {
  background-color: #12305A !important;
}


/* 5. Links - navy, gold on hover */
.zoneContent a,
.zoneContent a:link,
.zoneContent a:visited {
  color: #12305A !important;
}

.zoneContent a:hover,
.zoneContent a:focus {
  color: #A8842B !important;
}


/* 6. Buttons */
.zoneContent input[type="submit"],
.zoneContent input[type="button"],
.zoneContent button,
.zoneContent a.stylizedButton,
.zoneContent .stylizedButton {
  background-color: #12305A !important;
  background-image: none !important;
  border: 1px solid #12305A !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

.zoneContent input[type="submit"]:hover,
.zoneContent input[type="button"]:hover,
.zoneContent button:hover,
.zoneContent a.stylizedButton:hover,
.zoneContent .stylizedButton:hover {
  background-color: #0D2445 !important;
  border-color: #0D2445 !important;
  color: #FFFFFF !important;
}


/* 7. Breadcrumbs */
.WaGadgetBreadcrumbs a,
.WaGadgetBreadcrumbs a:link,
.WaGadgetBreadcrumbs a:visited {
  color: #4A5A6E !important;
}

.WaGadgetBreadcrumbs a:hover {
  color: #12305A !important;
}


/* 8. Login links in the top header strip */
.WaGadgetLoginButton a,
.WaGadgetLoginButton a:link,
.WaGadgetLoginButton a:visited {
  color: #4A5A6E !important;
}

.WaGadgetLoginButton a:hover {
  color: #12305A !important;
}


/* 9. Events, blog and other gadget headings */
.WaGadgetUpcomingEvents .title,
.WaGadgetRecentBlogPosts .title,
.WaGadgetEvents .title {
  font-family: Georgia, "Times New Roman", serif !important;
  color: #12305A !important;
  text-transform: none !important;
}

.WaGadgetUpcomingEvents a,
.WaGadgetRecentBlogPosts a,
.WaGadgetEvents a {
  color: #12305A !important;
}

.WaGadgetUpcomingEvents a:hover,
.WaGadgetRecentBlogPosts a:hover,
.WaGadgetEvents a:hover {
  color: #A8842B !important;
}


/* 10. Tables - used on the Board of Directors page */
.zoneContent table th {
  background-color: #0D2445 !important;
  color: #FFFFFF !important;
}


/* 11. Footer band.
   The theme paints .zoneFooter1 white INSIDE the navy outer band, which left a
   white strip across the footer. Both the outer band and the inner zone have to
   be set, or the navy never shows. */
.zoneFooterOuter,
.zoneFooter1Outer,
.zoneFooterWrap,
.zoneFooter1Wrap,
.zoneFooterInner,
.zoneFooter1Inner,
.zoneFooter,
.zoneFooter1,
.zoneFooter .WaPlaceHolder,
.zoneFooter1 .WaPlaceHolder,
.zoneFooter .WaGadgetContent,
.zoneFooter1 .WaGadgetContent {
  background-color: #0D2445 !important;
  background-image: none !important;
}

.zoneFooter,
.zoneFooter1,
.zoneFooter p,
.zoneFooter1 p,
.zoneFooter li,
.zoneFooter1 li,
.zoneFooter span,
.zoneFooter1 span,
.zoneFooter strong,
.zoneFooter1 strong,
.zoneFooter td,
.zoneFooter1 td {
  color: #FFFFFF !important;
}

.zoneFooter a,
.zoneFooter1 a,
.zoneFooter a:link,
.zoneFooter1 a:link,
.zoneFooter a:visited,
.zoneFooter1 a:visited {
  color: #C8A44A !important;
}

.zoneFooter a:hover,
.zoneFooter1 a:hover {
  color: #FFFFFF !important;
}


/* 12. Home page hero band - white text over the skyline photo.
   The hero sits in the Header2 zone, not the content zone, so these
   selectors are deliberately not prefixed with .zoneContent. */
.caaaHero,
.caaaHero p,
.caaaHero .heroTitle {
  color: #FFFFFF !important;
}

.caaaHero .eyebrow {
  color: #C8A44A !important;
}

.caaaHero a.btnGold,
.caaaHero a.btnGold:link,
.caaaHero a.btnGold:visited {
  background-color: #C8A44A !important;
  border: 2px solid #C8A44A !important;
  color: #0D2445 !important;
}

.caaaHero a.btnGold:hover {
  background-color: #D8B65F !important;
  border-color: #D8B65F !important;
  color: #0D2445 !important;
}

.caaaHero a.btnGhost,
.caaaHero a.btnGhost:link,
.caaaHero a.btnGhost:visited {
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
}

.caaaHero a.btnGhost:hover {
  background-color: #FFFFFF !important;
  color: #12305A !important;
}


/* 13. Page width.
   The Homestead theme locks every zone to 960px, which left roughly 470px of
   empty margin on each side on a 1920px-wide screen. This about halves that.
   The percentage keeps narrower screens from running edge to edge. */
#mLayout .zoneWrap {
  width: 94% !important;
  max-width: 1430px !important;
}

#mLayout .zoneInner {
  width: 100% !important;
  max-width: 100% !important;
}

/* The theme also caps each zone's inner placeholder at 960px. */
#mLayout .WaPlaceHolder {
  width: 100% !important;
  max-width: 100% !important;
}


/* 14. Home page "Who Are We?" band.
   The slideshow sat flush against the top edge of the grey panel. This drops it
   into the middle of the band and leaves a margin of the panel colour all round,
   so the photo reads as framed rather than flush.
   #id_uUWJihK is the table cell holding the slideshow inside panel #id_IO2VvkO.
   If that section is ever rebuilt in the editor, those ids change. */
#id_uUWJihK.WaLayoutItem {
  vertical-align: middle !important;
}

.zoneContent .WaGadgetSlideshow {
  margin: 26px !important;
}