:root {
  --color1:#660000;
  --color1d:#330000;
  --color1l:#ffc2c2;;
  --color2:#1c4587;
  --color2d:#132e59;
  --color2l:#ebf2ff;
  --color3:#829191;
  --color3d:#5a6363;
  --color4:#949b96;
  --color4vl:#f0f7f2;
  --color4d:#6b706c;
  --color5:#c5c5c5;
  --color6:#fcfaf5;
}

html, body, #main {
  min-height:95vh;
}

body {
  background-color:var(--color4vl);
  background: url(/images/open_bible_w_ribbon2.jpg) no-repeat center center
  fixed;
  background-size: cover;
  width:100%;
  font-size:16px;
  margin-left:3px;
  margin-right:15px;
  }

table {
  border:1px solid var(--color2d);
}
th {
  background-color:var(--color2d);
  color:#fff;
  font-weight:500;
}

#main_title {
  min-height:80px;
  width:100%;
  margin:0px;
  line-height:80px;
  background-color:var(--color2l);
  border: 1px solid var(--color2l);
  border-radius:8px 8px 0px 0px;
  }

#main_title_h1 {  
  color:var(--color2d);
  background-color:var(--color2l);
  font-size:32px;
  font-weight:600;
  margin:auto 10px auto 10px;
  }

#main {
  min-width:300px;
  max-width:1000px;
  width:100%;
  background-color:#fff;
  border:1px solid #888;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  font-size:16px;
  font-family: Arial, Helvetia, sans-serif;
  border-radius: 8px;
  }

#bible_location {
  font-size:22px;
  text-align:center;
  color:var(--color1);
  margin-top:5px;
}
#content_detail{
  margin:10px;
}

#content_detail h1 {
  text-align:center;
  font-size:26px;
  color:var(--color2);
}

#content_detail h2{
  text-align:left;
  font-size:20px;
  color:var(--color1);
}

#content_detail h3{
  text-align:left;
  font-size:18px;
  color:var(--color3);
}

#content_detail p.author {
  font-size:8px;
}
#content_detail a {
  color: var(--color2);
}

#content_detail blockquote.scripture {
  margin-left: 20px;
  margin-right:20px;
  margin-top:10px;
  margin-bottom:10px;
}  

#content_detail span.scripture_ref {
  font-weight:bold;
  color:var(--color3d);
}

#content_detail span.intro {
  font-weight:bold;
  color:var(--color4d);
}


#content_detail img.sectionimage {
  float:right; margin-left:15px; margin-bottom:15px;width:35%;
}

#cols {
  column-count: 2;
}

#cols p.bv {
  margin-top:7px;
  margin-bottom:7px;
}

span.bible_vn {
  font-weight:600;
  color:var(--color2d);
}


#cols ul{
/*  list-style-position:inside; */
  padding-left:1em;
}

#cols li{
  margin-top:3px;
}
@media screen and (max-width:600px) {
  #cols {
    column-count:1;
  }
}

.topnav {
  background-color: var(--color1d);
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}


/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 18px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropbtn a {
  margin:0px;
  font-size:18px;
  padding:0px 0px;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
/*  background-color: #f9f9f9; */
  background-color: var(--color6);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.sdropdown-content {
  display: none;
  position: absolute;
  background-color: var(--color6);
  min-width: 170px;
  border-style:solid;
  border-width:1px;
  border-color:#777;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.show {display:block;}

#bver {
 padding: 5px 2px;
 cursor:pointer;
}

#bver:hover {
  background-color: #ddd;
  color: black;
}
#bloc {
 padding: 5px 2px;
 cursor:pointer;
}

#bloc:hover {
  background-color: #ddd;
  color: black;
}

.dd_select {
  font-weight:600;
  font-size:20px;
  color: var(--color2d);
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: var(--color1d);
  padding: 5px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.sdropdown-content a {
  font-size:16px;
  font-weight:400;
  float: none;
  color: var(--color2d);
  padding: 5px 5px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.sdropdown-content a:hover {
  background-color: #ddd;
  color: black;
}


.dropdown-content h1 {
  font-size: 18px;
  float: none;
  padding: 8px 8px 3px 8px;
  display: block;
  text-align:left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
   }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


/* Style the list */
ul.breadcrumb {
  margin-top:0px;
  margin-left:10px;
  margin-bottom:5px;
  padding: 18px 12px;
  padding-bottom:0px;
  list-style: none;
}

/* Display list items side by side */
ul.breadcrumb li {
  display: inline;
  font-size: 16px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: var(--color2);
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}


/* The container must be positioned relative: */
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: DodgerBlue;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}


@media screen and (max-width:599px) {
  #content_detail img.sectionimage {
   width:100%;margin:0px;margin-bottom:15px;
}