/* Styles affecting overall look. */

:root {
  --cassiopeia-color-primary: #020;
  --cassiopeia-color-hover: #060;
  --cassiopeia-color-link: #050;
  
  --body-bg: #f8fff8;
}

.container-banner .banner-overlay {
  height: 50vh;
  background-position: 70% 100%;
}

.container-banner .banner-overlay .overlay {
  background-color: #00000000;
}

.container-footer {
  background: url("../../../../../images/site/inside_front_closeup.jpg");  
}

.masjid-page-title {
  display: flex;
  flex-flow: row;
}

.masjid-page-title img {
  width: 103px;
  height: 90px;
  padding: 10px;
}

.masjid-page-title h1 {
  margin: 0;
}

.peace-be-upon-you p {
  text-align: center;
  margin: 0;
  padding: 5px;
}

.peace-be-upon-you img {
  width: 34ex;
  height: 5ex;
}


/* Styles for specific items. */

.page-header h1, h2 {
  color: #262;
}

h4 {
  color: #666;
}

a {
  color: #070; 
}

a:hover {
  text-decoration-style: double;
}

.btn-secondary {
  color: #333;
  background-color: #dfd;
  border-color: lightgrey;
}

.btn-secondary:hover {
  color: black;
  background-color: white;
  border-color: black;
}


/* Style for prayer times. */

.prayer-timetable .row {
  margin: 7px;
  padding: 3px;
  line-height: 1.25;

  display: flex;
}

#main-timetable-large .row {
  flex-flow: row;
  border-bottom: solid 1px darkgrey;
  border-radius: 7px;
}

#main-timetable-small .row {
  flex-flow: row;
}

.prayer-timetable .row-head {
  flex: 1 4ex;

  margin: 3px;
  padding: 3px;

  text-align: center;

  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.prayer-timetable .dateday {
  font-size: larger;
  font-weight: bold;
}

.prayer-timetable .monthyear {
  font-size: smaller;
}

.prayer-timetable .ramadan {
  font-size: smaller;
  font-style: italic;
  color: darkgreen;
  background-color: #ffc;
}

.prayer-timetable .row-mark {
  font-size: smaller;
  color: red;
}

.prayer-timetable .row-body {
  flex: 5;

  display: flex;
  flex-flow: row wrap;
}

.prayer-timetable .time-cell {
  flex: 1;
  text-align: center;

  margin: 3px;
  padding: 3px;
  border: solid 1px darkgrey;
  border-radius: 7px;

  background-color: white;

  display: flex;
  flex-flow: column;
}

.prayer-timetable .time-name {
  font-weight: bold;
  border-bottom: solid 1px lightgrey;
}

.prayer-timetable .time-iqamah {
  color: #080;
  font-weight: bold;
}

.prayer-timetable .jumuah {
  color: #181;
  background-color: #cfc;
}

.prayer-timetable .legend p {
  text-align: center;
  margin: 0;
  font-size: smaller;
}

.prayer-timetable .table-header {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
}