/* Make HTML5 structural tags work in older browsers. */
article, aside, figure, footer, header, nav, section {
    display: block;
}

/* ***************************************** Elements ****************************************** */
a:link, a:visited, a:active {
  color:       #990066;  /* burgundy */
  font-weight: normal;
}

a:hover {
  color:       #990066;  /* burgundy */
  font-weight: bold;
}

address {
  font-size:  .9em;
  margin-top: 3em;
  text-align: center;
}

/* Total width is 945 pixels. (width + padding) */
body {
  background-color: white;
  border-radius:    5px;
  border:           3px solid #990066;  /* burgundy */
  color:            black;
  font-family:      Calibri, Arial, sans-serif;
  font-size:        1em;
  margin:           15px auto;
  padding:          50px;
  width:            895px;

}

h1, h2, h3 {
  color:         #990066;
  font-family:   Georgia, Georgia, Serif;
  margin-bottom: .5em;
  margin-top:    1em;
  text-align:    center;
}

html {
  background-image:    url('../graphics/burgundy.png');
  background-position: center;
  background-repeat:   repeat;
}

img {
  max-width: 100%
}

table {
  background:      white;
  border-collapse: collapse;
  empty-cells:     hide;
  text-align:      center;
}

td {
  padding-bottom: 5px;
  padding-top:    5px;
}

/* ***************************************** Classes ****************************************** */
.bullet {
  align:         center;
  border:        0px;
  display:       inline-block;
  padding-right: 5px;
}

.caller_cuers {
  display:     flex;
  width:       85%;
  margin-top:  20px;
  margin-left: 20px;
  align-items: center;
}

.caller_pic {
  padding-right: 20px;
}

.centered {
  text-align: center;
}

.calendar_big {
  text-align: center;
}

.officers {
  margin-left:  12%;
  margin-right: 22%;
  width:        66%;
}

.officer {
  font-weight:    bold;
  padding:        7px;
  text-align:     right;
  vertical-align: top;
}

.officer_name {
  padding:        7px;
  text-align:     left;
  vertical-align: top;
  width:          35%;
}

.officer_phone {
  padding:    7px;
  text-align: center;
}

.out_of_town {
  border:       1px solid black;
  margin-left:  13%;
  margin-right: 13%;
  width:        74%;
}

.out_of_town_tr {
  border:     1px solid black;
  text-align: center;
}

.out_of_town_tr_bold {
  border:      1px solid black;
  font-weight: bold;
  text-align:  center;
}

.toc {
  background-color: white;
  border-radius:    3px;
  border:           1px solid #990066;  /* burgundy */
  float:            right;
  position:         fixed;
  right:            10px;
  text-align:       center;
  top:              15px;
  width:            120px;
}

div.toc_button {
  background-color: white;
  border-bottom:    1px solid #6c0047;  /* dark burgundy */
  border-left:      1px solid #c063a1;  /* light burgundy */
  border-right:     1px solid #6c0047;  /* dark burgundy */
  border-top:       1px solid #c063a1;  /* light burgundy */
  color:            #990066;            /* burgundy */
  margin:           0;
  padding:          0;
}

a.toc_menubutton:link, a.toc_menubutton:visited {
  background-color: white;
  color:            #aa2b7f;  /* medium burgundy */
  display:          block;
  padding:          3px;
  text-decoration:  none;
}

a.toc_menubutton:hover {
  background-color: #aa2b7f;  /* medium burgundy */
  color:            white;
  display:          block;
  padding:          3px;
  text-decoration:  none;
}

a.toc_menubutton:active {
  background-color: #aa2b7f;  /* medium burgundy */
  color:            white;
  display:          block;
  padding:          3px;
  text-decoration:  none;
}

/* ************************************ Smaller Screen Size ************************************ */
/* apply when screen <= 1175px  */
@media only screen and (max-width: 1175px) {
  body {
    margin:  5px auto;
    padding: 5px;
    width:   auto;
  }

  .officers {
    margin-left:  auto;
    margin-right: auto;
    width:        auto;
  }

  .officer_name {
    width: auto;
  }

  .toc {
    border:       1px solid #c063a1;  /* medium burgundy */
    float:        initial;
    margin-left:  auto;
    margin-right: auto;
    margin-top:   50px;
    position:     static;
  }

  div.toc_button {
    border-bottom: 1px solid #c063a1;  /* medium burgundy */
    border-left:   1px solid #d599bf;  /* light burgundy */
    border-right:  1px solid #c063a1;  /* medium burgundy */
    border-top:    1px solid #d599bf;  /* light burgundy */
  }
}

/* apply when screen <= 825px  */
@media only screen and (max-width: 825px) {
  .calendar_big {
    display: none;
  }
}

/* apply when screen > 825px */
@media only screen and (min-width: 826px) {
  .calendar_show_link {
    display: none;
  }
}