
div.obj-title {
  font-size: 26pt;
  margin: 1em 1em;
}
@media (max-width: 799px) { div.obj-title {
  font-size: 20pt;
  margin: 1em 1em 0em 0.5em;
}}

div.section-title {
  font-size: 14pt;
  font-weight: bold;
  margin: 1em 0.5em 0.5em 0.5em;
}

div.descr {
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  margin: 1em 0em;
  padding: 5px 10px;
}

div.box {
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  margin: 1em 0em;
  padding: 5px 10px;
}

.hidden {
  display: none;
}

.clickable {
  color: blue;
  cursor: pointer;
}

span.link {
  color: blue;
  cursor: pointer;
}
span.link.bibletext {
  color: #770000; /* dark red */
}

div.descr {
  -moz-column-width: 20em;
  -moz-column-gap: 1em;
  -webkit-column-width: 20em;
  -webkit-column-gap: 1em;
  -ms-column-width: 20em;
  -ms-column-gap: 1em;
  column-width: 20em;
  column-gap: 1em;
  max-width: 90em;
}

div.descr-p {
  margin: 0.7em 0em;
}

div.media {
  float: right;
}
div.media + * + * + * {
  clear: right;
}
@media (max-width: 799px) { div.media {
  float: none;
}}

table.list {
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  padding: 3px 5px;
}

table.list > tbody {
  overflow: auto;
}

table.list th {
  text-align: left;
  padding: 3px 5px;
}
table.list td {
  padding: 0px 5px;
  vertical-align: top;
}
table.list td.clickable {
  color: inherit;
  cursor: pointer;
}


/* Genealogy with Dagre-D3 */

.genealogy {
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  padding: 3px 5px;
  margin: 0em 0em 0em 1em;
}

.genealogy .node {
  cursor: pointer;
}

.genealogy rect {
  fill: white;
}

.genealogy .node rect {
  stroke-width: 1px;
  stroke: #333;
  fill: none;
}

.genealogy .node[gender=male] rect {
  fill: #e7e2ff; /* very light blue */
}
.genealogy .node[gender=female] rect {
  fill: #ffeeee; /* very light red */
}
.genealogy .node[center=true][gender=male] rect {
  fill: #5f79ff; /* light blue */
}
.genealogy .node[center=true][gender=female] rect {
  fill: #ff5f5f; /* light red */
}

.genealogy .edge rect {
  fill: #fff;
}

.genealogy .edge path {
  fill: none;
  stroke: #333;
  stroke-width: 1px;
}

.genealogy {
  width: 100%;
  height: 600px;
}


/* Map using Leaflet */

div.map {
  width: 100%;
  /* height is set in JS to 80% screen height */
  height: 600px;
}
@media (max-width: 799px) { div.map {
  height: 300px;
}}

.mapinfo.box {
  padding: 0.5em;
  min-height: 7.5em;
}
.mapinfo.events {
  float: right;
  width: 45%;
  overflow: auto;
  min-height: 3em;
}
.mapinfo.events th {
  text-align: left;
}
.mapinfo.name {
  font-weight: bold;
}
.mapinfo.shortdescr {
  overflow: hidden;
  padding: 0.5em 0em;
}
.mapinfo.properties {
  margin-top: 0.5em;
}
.mapinfo.time {
  margin-right: 2em;
}
#map .leaflet-control-layers-toggle {
  width: 26px;
  height: 26px;
  background-image: url(lib/layers.png);
}


/* timeline with CHAP */

div.timeline-event {
  cursor: pointer;
}
div.timeline-navigation > div {
  padding: 5px; /* make buttons smaller */
}
div.timeline-event-dot.exact {
  border-color: blue;
}
div.timeline-event-dot.estimate {
  border-color: yellow;
}
div.timeline-event-box.estimate {
  background-color: lightyellow;
}

/* button */

.button {
  cursor: default;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;

  box-shadow: inset 0px 1px 0px 0px #ffffff;
  background: linear-gradient(#ededed 5%, #dfdfdf 100%);
  background-color: #ededed;
  border-radius: 5px;
  border: 1px solid #dcdcdc;

  font-weight: bold;
  text-decoration: none;
  text-shadow: 1px 1px 0px #ffffff;

  display: inline-block;
  cursor: pointer;
  margin: 0.3em;
  padding: 5px 5px;
}
.button .text {
  padding: 0px 5px;
  vertical-align: middle;
}
.button .icon {
  vertical-align: middle;
  /*opacity: 0.9;*/
  /*filter: grayscale(50%);*/
}

.button {
  color: #777777;
 }
.button.breadcrum {
  color: #777777;
 }
.button.object {
  color: #777777;
 }
.button.action {
  color: black;
}

.button[disabled=true] {
  color: #BBBBBB;
  text-shadow: none;
}

.button-list {
  margin: 1em 0.5em;
}

.button-list > p {
  margin: 1.3em 0em;
}


div.hint {
  background-color: #FFFFEE; /* light red */
  padding: 0.5em 1em;
  margin: 1.5em 3em 1.5em 2em;
  max-width: 40em;
}

.error-box {
  background-color: lightyellow;
  padding: 0.5em 2em !important;
  margin: 1.5em 2em 1.5em 2em !important;
  max-width: 40em;
}
.error-msg {
  color: darkred;
}
.error-more {
  background: transparent;
  margin-left: 2em;
  padding: 0.2em;
}
.error-close {
  background: transparent;
  margin-left: 0.5em;
  padding: 0.2em;
}


/** Notes **/

span.add.notes.button {
  float: right;
  list-style-image: url("static/notes-add.png");
}
span.edit.notes.button {
  list-style-image: url("static/notes-add.png");
}
span.delete.notes.button {
  list-style-image: url("static/notes-delete.png");
}
span.send-self.notes.button {
  list-style-image: url("static/notes-sendself.png");
}
span.send-email.notes.button {
  list-style-image: url("static/notes-sendemail.png");
}
span.save-text.notes.button {
  list-style-image: url("static/notes-savetext.png");
}
span.save-data.notes.button {
  list-style-image: url("static/notes-savedata.png");
}
textarea.notes {
  width: 40em;
  height: 30em;
}


/** Breadcrums **/

#breadcrums {
  margin: 1em 1em;
}

#breadcrums > .breadcrum {
  margin: 0px 3px;
}

no > #breadcrums > span.breadcrum:before {
  content: "> ";
}

#breadcrums:last-child {
  font-weight: bold;
}
