/* bmaoh.css */
/*
@import url('https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400i|Roboto:100,100i,300,300i');
*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,300i,500,500i');
      /* styles for this page only */
      :root {
        font-size: 16px;
        line-height: 1.5em;
        font-family: 'Roboto', verdana, geneva, sans-serif;
        font-weight: 300;
        --font-family: 'Roboto', verdana, geneva, sans-serif;
        --font-weight-normal: 300;
        --font-weight-bold: 500;
        --alt1-font-family: georgia, serif;
        --alt1-font-weight: 300;
        --alt1-font-weight-bold: 700;
        --alt2-font-family: verdana, geneva, sans-serif;
        --alt2-font-weight: 300;
        --alt2-font-weight-bold: 700;
        --page-width: 70em;
        --page-padding: 0.3em;
        background-color: #fff;
        --button-border-radius: 0.2rem;
        /*
        --alt1-background-color:  hsl(215, 85%, 40%);
        --button-background-color:  hsl(0, 5%, 95%);
        --button-shadow-color:  hsl(0, 5%, 70%);
        --button-border-color:  hsl(0, 10%, 60%);
        --button-border-radius: 0.2rem;
        color: #000;
        --color-std: #000;
        --color-link: #88B3F1;
        --color-link-hover: hsl(215, 100%, 30%);
        --alt1-color-link: #876b58;
        --alt1-color-link-hover: #c8b799;
        */
        /* pallett 1 */
        --bg-color: #fff;
        color: #000;
        --color-std: #000;
        --color-link: #88B3F1;
        --color-link-hover: hsl(215, 100%, 30%);
        --header-bg-color: hsl(80, 37%, 50%);
        --header-color: #fff;
        --nav-top-bg-color: hsl(19, 85%, 23%);
        --nav-top-link-color: #fff;
        --link-color: hsl(200, 85%, 40%);
        --button-bg-color:  hsl(40, 35%, 85%);
        --button-border-color:  hsl(40, 50%, 50%);
        --button-shadow-color:  hsl(40, 20%, 60%);
        --button-color: #000;
        --searchbar-bg-color: hsl(80, 35%, 90%);
        --footer-bg-color: var(--nav-top-bg-color);
        --footer-color: #fff;
      }


  ol.notes, ul.related-links {
  list-style-position:outside;
  padding-bottom:1em;
  font-family: var(--alt1-font-family);
  width: 70%;
  margin-left:1em;
  }
  ol.notes li {
    font-style:normal;
  }
  ol.notes li, ul.related-links li {
    margin-left:1em;
    line-height:1.2em;
    padding-top:0.25em;
    font-size:0.9em;
  }
p {
margin: 0.5em 0;
}
ul h1 {
font-size: 1.4em;
padding:0;
margin: 0.5rem;
line-height: 1em;
border-bottom: 1px solid var(--button-border-color);
text-align: left;
color: #000;
font-weight: normal;

}

  

      /* end styles for this page only */

      /* new styles */
* {
  padding:0;
  margin:0;
}
.button { /* common to all buttons */
    padding: 0.25rem;
    border: 1px solid var(--button-border-color);
    border-radius: 0.25rem;
    background-color: var(--button-bg-color);
    box-shadow: inset 0 0 0.25rem var(--button-shadow-color);
    color: var(--button-color);
    cursor: pointer;
}
.prev-next-button { /* Prev and Next buttons on People page */
padding-right: 0.5rem;
padding-left: 0.5rem;
}
#bakFwd {
padding: 0.25rem;
background-color: var(--bg-color);
height: 1.5rem;
font-size: 0.8rem;
width: 50%;
margin: 0 auto;
margin-top: 0.5rem;

}
#bakFwd form {
height: 100%;
margin: 0 auto;
display: table;
}

a {
text-decoration: none;
color: var(--link-color);
}
a:hover {
text-decoration: underline;
}
a:visited {
text-decoration: none;
}
      
.titleHi {
border-bottom: 1px dotted var(--color-link-hover);
border-bottom-color: var(--color-link-hover);
}

.flex-row {
    display: flex;
    flex-flow: row nowrap;
}

summary {cursor: pointer;}

ul#breadcrumb-list {
  list-style: none;
  margin: 1em 0;
}

div#pageContainer {
  width: var(--page-width);
  margin: 0 auto;
  position: relative;
  width: 60rem;
}


section#wrapper {
  width: var(--page-width);
  margin: 0 auto;
  position: relative;
      padding: var(--page-padding);
}

sup, sub {
  line-height: 1em;
  vertical-align: baseline;
  position: relative;
  font-size:0.8em;
}
sub {
  top: 0.35em;
}
sup {
  bottom: 0.5em;
}

h1 {
  font-size:2rem;
  padding-bottom: 0.5em;;
  margin:1em;
  font-weight:normal;
  color:#066;
  font-family:var(--alt1-font-family);
  text-align: center;
  border-bottom: 1px solid var(--header-bg-color);
 }
h2 {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size:1.5em;
  border-bottom: 1px solid var(--header-bg-color);
  line-height:1.6em;
  margin: 0.8em 0 0.4em 0;
  clear:both;
}

h3 {
  font-size:1.2em;
  line-height:1.4em;
  padding-top:0.5rem;
  clear:both;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
}
h4 {
  font-size:1.0em;
  line-height:1.4em;
  padding-top:0.5rem;
  clear:both;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
}
    .poppy img {
        width:5em;height:5em;
    }
    .poppy {
        position:relative;top:2.5rem;right:6rem;float:right;
        /*background: url('http://www.bacchusmarsh.avenueofhonour.org.au/gfx/poppy2.png');*/
    }

.hideArticle {
margin-top: 4em;
}
blockquote cite b {
font-weight: var(--font-weight-bold);
}
blockquote cite {
font-size: 0.8em;
font-style: normal;
line-height: 1.3em;
display: inline-block;
margin:  0 0 2em 2em;
}


blockquote.bq {
  font-style:italic;
  quotes: "\201C""\201D""\2018""\2019";
  padding:0.5em;
  padding-bottom:0px;
   font-size:1.7em;
   text-align:left;
   color:#000;
}
blockquote.bq>p {
  font-family: var(--alt1-font-family);
  font-style:italic;
  quotes: "\201C""\201D""\2018""\2019";
  padding:0.5em;
  padding-bottom:0px;
  margin-bottom:0px;
   font-size:1em;
   text-align:left;
   color:#000;
}
blockquote.bq {
  padding:0px;
  font-size:1em;
  margin:1em 2em;
  border: none;
  /*border: 1px solid #004680;*/
  /*border-left: 5px solid #004680;*/
  /*border-radius:5px;*/
  color:#666;
  /*background-color: #eff;*/
   text-align:left;
}
blockquote.bq cite {
  position:relative;
  font-family: var(--alt1-font-family);
  top:-1em;
  padding:0;
  margin-left:2em;
  font-size:0.7em;
  font-style:normal;
}
/*blockquote::before, */blockquote.bq>p::before { 
  content: "\201C";
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  color: #004680;
  }
blockquote.bq>p::after { 
  content: "\201D";
  font-size: 4em;
  line-height: 0.00em;
  margin-left: 0.25em;
  vertical-align: -0.6em;
  color: #004680;
  }
blockquote.bq::before {
  content:"";
  font-size: 0em;
  line-height: 0em;
  margin-right: 0em;
  vertical-align: 0em;
}
.bq {
  margin:1em 2em;
  border-left: 5px solid #004680;
  font-size:0.6em;
  text-align:right;
  color:#666;
  /*background-color: #eff;*/
}
/* people */

 #tmp {
   position:absolute;
  text-align:center;
   z-index:1000;
 }
 #tmp img {
   border-radius:1rem;
 }

#divimg1 img, #divimg2 img, #divimg3 img {
  border-radius:0.5rem; 
  text-align:center;
  overflow:hidden;
  margin: 0 auto;
}
.textborder {
  font-family: var(--alt2-font-family);
  line-height: 1.5em;
  border:1px solid var(--header-bg-color);
  margin:0.5rem 0.5rem 0.5rem 0px;
  width:25rem;
  padding:0.2em;
  font-size:0.8em;
  background-color:var(--bg-color);
  box-shadow: 0.125rem 0.125rem 0.5rem var(--button-shadow-color);
    float:left;
  }
  .plaque {
    float:left;
    padding:0.25rem 0px;
    margin:0.5rem 0.5rem 0.5rem 0.25rem;
  font-family: var(--alt1-font-family);

    font-size:0.8em;
    font-style:italic;
  }
  .plaque img {
  vertical-align:top;
  margin-right:0.25rem;
  }
  .medal img, .medalRight img {
  border-radius:0.5rem; 
  }
  .medal a, .medalRight a {
  text-decoration: none;
  }
  .medal, .medalRight {
    /*clear:both;*/
    float:left;
    padding:0.125rem;
    margin:0.5rem;
    vertical-align:top;
    font-size:0.8em;
    font-style:italic;
    text-align:center;
    font-family: var(--alt1-font-family);
    line-height: 1.1em;
    /*width:100px;*/
  }
  .medalRight {
    float:right;
  }
  .first {clear:both;}
.tb {
  display:table;
}
.textBorderLeft, .textBorderRight { display:table-cell;}
.textBorderLeft {width:100px;text-align:right;font-weight:bold;padding:2px 8px 2px 0px;}
/* Forms used in editing results */
legenda {
  font-family: var(--alt1-font-family);
  font-size:1.2rem;
  color:#333;
  background-color:#ffcc99;
  border:1px solid #cc0000;
  padding:5px;
  margin-left:10px;
}

fieldseta {
  color:#333;
  background-color:#ffffff;
  border:1px solid var(--header-bg-color);
  padding:10px;
  margin-top:10px;
}

labela
{
width: 5rem;;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
margin-bottom:0.5em;
}
/* end people */

/* header */
    header#header-rsl a {
      color:var(--nav-top-bg-color);
      text-decoration: underline;
    }
    header#header-rsl span {
      font-size: 0.6rem;
    }
    header#header-rsl {
      width: var(--page-width);
      padding: var(--page-padding);
      margin: 0 auto;
      background-color: var(--header-bg-color);
      text-align: center;
      line-height:1em;
      color: var(--header-color);
      padding-top: 0;
      padding-bottom:0;
    }
    header#header-main a {
      color: var(--header-color);
    }
    header#header-main {
      width: var(--page-width);
      padding: var(--page-padding);
      margin: 0 auto;
      background-color: var(--header-bg-color);
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      color: var(--header-color);
    }

    /* flex items */
    #head-left-content {
        padding-left: 1rem;
    letter-spacing: 0.1rem;
    }
    #head-logo img {
    height: 4rem;
    width: 4rem;
    }
    #head-logo, #head-left-content, #changeFS {
        display: inline-block;
        vertical-align: middle;
    }
    #changeFS input {
      width:4rem;
    }
    #changeFS {
      font-size: 0.6rem;
      text-align: center;
      line-height: 1em;
    }
    #head-left {
        flex: 5; 
        font-weight: 500;
        font-size: 1.5rem;
        text-transform: uppercase;
    }
    #head-left span, #head-left span a {
        font-size: 0.35em;
        text-transform: none;
    }
    #head-right {
        flex: 1; 
        margin-left: auto; 
        text-align: right;
    }
    #head-right button {
        font-size: 0.8rem;
        padding: 0.5rem 1.0rem 0.5rem 2.0rem;
        cursor: pointer;
        border: 1px solid var(--button-border-color);
        border-radius: var(--button-border-radius);
        background-color: var(--button-bg-color);
        background-position: 0.15rem center; /*left center;*/
        background-repeat: no-repeat;
        margin: 0;
        background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22%3E%3Cpath fill=%22%23707579%22 d=%22M15.5 14h-.8l-.27-.27C15.4 12.6 16 11.1 16 9.5 16 5.9 13.1 3 9.5 3S3 5.9 3 9.5 5.9 16 9.5 16c1.6 0 3.1-.6 4.23-1.57l.27.28v.8l5 5 1.5-1.5-5-5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z%22/%3E%3C/svg%3E"); 
        box-shadow: inset 0 0  5px var(--button-shadow-color);
    }
    .button:hover {
    }
    /*
    .button {
        padding: 0 1em;
        vertical-align: middle;
        border-radius: 1em;
        border: 1px solid #666;
        height: 2em;
        font-size: 1rem;
        background-color: transparent;
        cursor:pointer;
    }
    */

/* end header */

/* footer */
#footer .col3 {
margin: 5px;
padding: 5px;
    font-size: 0.6rem;
    flex: 1;
    text-align: right;
    color: var(--button-border-color);
}
#footer .col1, #footer .col2 {
    flex: 1;
    padding: 0.2rem;
    text-align: center;
}
#footer .col1 {
}
footer p a {
    color:var(--button-border-color);
    text-decoration:underline;
}
footer p {
    text-align: center;
    font-size:0.8em;
}
footer {
    border-top: 0.3rem solid var(--header-bg-color);
    background-color: var(--footer-bg-color);
    color: var(--footer-color) ;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}
#footer {
    justify-content: center;
}
#footer ul {
    list-style: none;
}
#footer ul a {
    color: var(--footer-color);
    font-family: var(--font-family);
    text-decoration: none;
}
#footer ul a:hover {
    text-decoration: underline;
}
#footer details {
  line-height: 1.5em;
}
#footer summary {
  margin-bottom: 1.5em;
}
#footer .col1 a, #footer .col1 a:hover {
    color: var(--footer-color);
    text-decoration: none;
        text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-size: 1rem;
    display: inline-block;
}

/* end footer */

/* navigation menu*/

/* editable items */
nav#top-nav { 
font-size: 1rem; 
width: var(--page-width);
margin: 0 auto;
      background-color: var(--nav-top-bg-color);
      padding: var(--page-padding);
      border-radius: 0 0 0.25rem 0.25rem;
}
nav#top-nav  a { 
    padding: 0.3rem 1rem;
    display: inline-block;
    text-decoration: none;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    color: var(--link-color);
    
    
}

/*
nav#top-nav a:hover { 
    border-color: var(--nav-top-link-color);
    border-color: yellow;
}
*/
nav#top-nav li { 
    font-size: 1rem; 
    font-family: var(--font-family);
    font-size: 1.0rem;
    list-style: none;
}

/* top level menu */
nav#top-nav > ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
nav#top-nav > ul > li:hover ul#item-people {
    /*display: block;*/
    height: 10em;
    animation-name: slidedownpeople;
    animation-duration: 0.4s;
    box-shadow:  5px 5px 10px var(--nav-top-bg-color);
}
@keyframes slidedownpeople {
from {height:0;}
95% {height: 0;}
to {height: 8em;}
}
nav#top-nav > ul > li:hover ul#item-galleries {
    /*display: block;*/
    height: 9em;
    animation-name: slidedowngalleries;
    animation-duration: 0.4s;
    box-shadow:  5px 5px 10px var(--nav-top-bg-color);
}
@keyframes slidedowngalleries {
from {height:0;}
95% {height: 0;}
to {height: 6em;}
}
nav#top-nav > ul > li:hover ul#item-other-memorials {
    /*display: block;*/
    height: 28em;
    animation-name: slidedownother;
    animation-duration: 0.4s;
    box-shadow:  5px 5px 10px var(--nav-top-bg-color);
}
@keyframes slidedownother {
from {height:0;}
95% {height: 0;}
to {height: 28em;}
}







nav#top-nav > ul >li:hover > a {
    border-color: var(--bg-color);
}
nav#top-nav > ul > li > a {
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    font-size: 1rem;
    border-bottom: 0.125rem solid var(--nav-top-bg-color);
    color: var(--bg-color);
}
nav#top-nav > ul > li + li { /* a flex item */
    margin-left: 0.1rem;
    flex: 0 1 auto;
}


/* dropdown menu */
nav#top-nav > ul > li > ul { /* a flex item */
    position: absolute;
    background-color: var(--bg-color);
    /*display: none;*/
    height: 0;
    overflow: hidden;
    border: 1px solid var(--nav-top-bg-color);
    border-radius: 0 0 0.5rem 0.5rem;
    z-index: 100;
    padding:0 0.5em;
    margin-top: 0.025rem;
}

nav#top-nav > ul > li > ul  a:hover {
    text-decoration: underline;
}
nav#top-nav > ul > li > ul  a {
    font-size: 1.1rem;
    padding: 0.25em;
    font-family: var(--alt1-font-family);
}

/* end of navigation menu styles */

.advanced-search-bar {
background-color: var(--searchbar-bg-color);
padding: 0.25rem;
margin: 0.5rem 0;
    border: 1px solid var(--header-bg-color);
    border-radius: 0.5rem;
}
#searchName {
}
.advanced-search-bar input:last-child {
display:block;
width: 10em;
height:2em;
font-family: var(--alt1-font-family);
font-size: 1.2rem;
background-color: var(--button-bg-color);
padding:0;
margin: 0.375rem 0 0.25rem 0.5rem;
cursor: pointer;
}
.advanced-search-bar input:first-child {
display:block;
flex: 1;
font-family: var(--alt1-font-family);
font-size: 2rem;
-webkit-appearance: textfield;
-moz-appearance: textfield;
padding:0.5rem 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22%3E%3Cpath fill=%22%23707579%22 d=%22M15.5 14h-.8l-.27-.27C15.4 12.6 16 11.1 16 9.5 16 5.9 13.1 3 9.5 3S3 5.9 3 9.5 5.9 16 9.5 16c1.6 0 3.1-.6 4.23-1.57l.27.28v.8l5 5 1.5-1.5-5-5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z%22/%3E%3C/svg%3E");
background-position: 0.5rem 50%;
background-repeat: no-repeat;
background-size: auto 80%;
background-color: transparent;
padding-left: 2em;
border: none;
outline: none;
}

.advanced-search-options {
display: flex;
flex-flow: row nowrap;
}
.advanced-search-options  abbr {
text-decoration: none;
}
.advanced-search-options  > * {
  float: none;
  display: inline-block;
  flex:1 1 auto;
  margin: 0.5em 0.25em;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 0.9rem;
}
.advanced-search-options label:last-child, .advanced-search-options label:nth-last-child(2) {
}
#advanced-search-form {
margin: 1rem 0 3rem 0;
}
#advanced-search-form summary:focus {
outline: none;
}
#advanced-search-form details summary {
font-family: var(--alt2-font-family);
font-size: 1.1rem;
color: var(--alt1-color-link);
}
#advanced-search-form details p {
margin: 0.25rem 2rem;
font-family: var(--alt2-font-family);
font-size: 0.8rem;
}
#advanced-search-form details ul {
margin: 0 3rem;
font-style: inside;
font-family: var(--alt2-font-family);
font-size: 0.8rem;
line-height: 1.2rem;

}
#advanced-search-form details div {
background-color: var(--button-bg-color);;
}

/* galleries */
#gallery {
margin: 0 auto;
margin-top: 5px;
width: 50rem;
padding: 0.5em;
border: 1px solid #e1e1e1;
box-shadow: 0.25em 0.25em 0.125em #999;
border-radius: 0.25em;
}


#extNav {
  height:3em;
  background-color:#191919;
  overflow:hidden;
  color:#666;
  line-height:3em;
  font-size:0.8em;
}
 #loc {
   background:  url("http://www.bacchusmarsh.avenueofhonour.org.au/gfx/location.png");
   background-repeat: no-repeat;
  background-position: center; 
   width:2rem;
   height:2rem;
   border-right:1px solid #222;
   border-top:1px solid #222;
   cursor:pointer;
   float:left;
 }
 #pref {
   background:  url("http://www.bacchusmarsh.avenueofhonour.org.au/gfx/pref.png");
   background-repeat: no-repeat;
  background-position: center; 
   width:2rem;
   height:2rem;
   border-right:1px solid #222;
   border-top:1px solid #222;
   cursor:pointer;
   float:left;
 }
  #info {
   background:  url("http://www.bacchusmarsh.avenueofhonour.org.au/gfx/info.png");
   background-repeat: no-repeat;
  background-position: center; 
   width:2rem;
   height:2rem;
   border-left:1px solid #222;
   border-top:1px solid #222;
   cursor:pointer;
   float:right;
 }
 #loc:hover,#pref:hover,#info:hover {
   background-color:#000;
   
 }

#credit {
  font-size:0.8em;
  color:#999;
  /*float:right;*/
  height:0.8rem;
}


@media screen and (max-device-width: 420px) {
    #changeFS {
        display: none;
    }
    :root {
        --page-width: 60em;
    }
    
    /*
    #head-logo img {
        height:128px;
        width:128px;
    }
    */
    #head-left-content {
        font-size: 1.5rem;
    }
    nav#top-nav > ul > li > a {
        font-size: 1.2rem;
        padding: 0;
    }
    
nav#top-nav > ul > li:hover ul#item-people {
    height: 11em;
    width: 9em;
    }
nav#top-nav > ul > li:hover ul#item-other-memorials {
    height: 30em;
    width: 20em;
    }
nav#top-nav > ul > li:hover ul#item-galleries {
    height: 6em;
    width: 18em;
    }
}

.soldier {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    line-height: 1.5em;
}