template {display:none}

#pageContent {
  margin-top:20px;
}

#overallContainer {
  width:100vw;
  font-size:small;
}

#tabbedInfo {
  font-size:small;
}
/*****************************************************************************
   TAB PAGES
******************************************************************************/
   
li.hidden {
  display:none;
}   
   
.lookup, .searchable {
  cursor:pointer;
  line-height:12pt;
}

.searchable:hover, .lookup:hover {
  text-decoration:underline;
  line-height:12pt;
}

img.ribbon {
  max-height: 24px;
  margin-left: -24px;
  max-width: 24px;
}

a.female + img.ribbon  {
  background-color:blue;
}

img.mugshot {
    max-height:200px;
    max-width:200px;

    padding:4px;
    border:2px solid gray;
    border-radius:4px 4px;
    box-shadow:4px 4px 4px lightgray;
}


p.lookupButton span {
  background-color:grey;
  padding:3px;
  border-radius:4px;
  color:white;
}



#overallContainer table.content {
  table-layout:fixed;
  width:100vw;
}

#overallContainer table.content td {
  vertical-align:top;
}

td.label {
  text-align:right;
  font-weight:bold;
}

td.label:after {
  content:":";
}

.male a {
  background-color:rgba(255, 192, 203, 1);
}

.female a {
  background-color:rgba(255, 192, 203, 1);
}

#tabbedInfo {
min-height:600px;
}

#tabbedInfo td.image {
  width: 200px;
}
#tabbedInfo li a {
  vertical-align:top;
}
#tabbedInfo li img.iconPrefix {
  max-height:24px;
  padding-right:0px;
  padding-left:6px;
  padding-top:7px;
  float:left;
}

#tabbedInfo li img.iconPrefix:float {
  box-shadow:none; 
}


.ui-tabs .ui-tabs-nav li a {
  line-height:32px;
}

#tabbedInfo table.information td.information {
  width:100%;
  padding-top: 0px;
  padding-bottom: 0px;
  vertical-align: top;
}


#tabbedInfo table.information  figcaption {
  font-size:8pt;
  font-weight:normal;
  text-align:center;
}

#personData button {
  margin-right:8px;
}

#personData button.zoon {
  background-color:rgba(173, 216, 230,1);
}

#personData button.dochter {
  background-color:rgba(255, 192, 203, 1);
}


.ui-autocomplete {
  max-height:200px;
  overflow-y:auto;
  overflow-x:hidden;
}

div.personTile img.ribbon,
#relationData div.information img.ribbon {
  float:right;
  max-height: 24px;
  max-width: 24px;
  position:relative;
  top: -10px;
  right: -10px;
  z-index:1000;
  }

#personDataEvents table th,
#personDataAktes  table th{
  background-color:grey;
  color:white;
  font-weight:bold;
  padding:7px;
  border-bottom:2px solid black;
}

#personDataEvents table tr,
#personDataAktes table tr{
  cursor:pointer;
  background-color:rgb(160,160,160);
}

#personDataEvents table td,
#personDataAktes table td {
  padding:3px;
  box-shadow:3px 3px 3px lightgray;
}

#personDataEvents table tr:nth-child(even),
#personDataAktes table tr:nth-child(even) {
  pointer:cursor;
  background-color:rgb(210,210,210);
}
#personDataEvents table tr:hover,
#personDataAktes table tr:hover {
  background-color:gold;
}


div.personTile {
  float:left;
  text-align:center;
  padding:10px;
  border:1px solid grey;
  margin:3px;
  border-radius:4px 4px 4px 4px;
  width:200px;
  height:200px;
  vertical-align:top;
  overflow-x:hidden;
}

div.relationTile {
  float:left;
  text-align:center;
  padding:10px;
  border:1px solid grey;
  margin:3px;
  border-radius:4px 4px 4px 4px;
  width:200px;
  height:240px;
  vertical-align:top;
  overflow-x:hidden;
}

div.personTile.geslacht_M,
div.relationTile.geslacht_M { 
  background-color:rgba(173, 216, 230,1);
}

div.personTile.geslacht_V ,
div.relationTile.geslacht_V{ 
  background-color:rgba(255, 192, 203, 1);
}

div.personTile button, 
div.relationTile button{
  width:150px;  /* width is incl. padding and border */
  height:150px;
  padding:6px;
  border:2px outset gray;
}

div.personTile button img,
div.relationTile button img {
  max-width:128px;
  max-height:128px;
}


#genericDetailedInfoPopup td.label {
  font-weight:bold;
  text-align:right;
  width:10em;
  padding-right:5px;
}

/****************************************************************************
  Life book
*****************************************************************************/
#lifeBook {
  max-height:600px;
  overflow-y:scroll;
}

#lifeBook table {
  border-collapse:collapse;
}

#lifeBook table td {
  border-top:1px solid black;
  vertical-align:top;
}

#lifeBook table td.year{
  width:40px;
  font-size:large;
  font-weight:bold;
}

#lifeBook table td p{
  margin-top:0px;
}

#lifeBook table td span.description {
  font-weight:Bold;
}

#lifeBook table td span.person {
  color:blue;
}

#lifeBook table td div.information {
  width:350px;
}

/****************************************************************************
  History list
*****************************************************************************/


#history {
  border:1px solid grey;
  min-width:200px;
  width:18%;
  overflow-x:scroll;
  overflow-y:scroll;
  vertical-align:top;
  margin-left:10px;
  padding-left:10px;
}

#history p.caption {
  text-align:center;
  font-weight:bold;
  border-bottom:1px;
}

#history div.historyPerson {
  padding:2px 4px 2px 4px;
  cursor:pointer;
}

#history div.historyPerson:hover {
  background-color:lightblue;
}


#history div.selected {
  background-color:lightgrey;
}

/**********************************************
  Search Popup
**********************************************/

#searchResultsPopup  {
  overflow-y:scroll;
}

#searchResultsPopup table {
  table-layout:fixed;
  width:100%;
  height:auto;
  border:1px solid gray;
  vertical-align: top;
}

#searchResultsPopup table td {
  width:100%;
  padding-left:5px;
  font-size:10pt;
  height:12px;
}

#searchResultsPopup TD.geslacht_M,
#searchResultsPopup TD.geslacht_V {
  width:12px;
}


#searchResultsPopup table tr{
  background-color:lightgrey;
  cursor:pointer;
}

#searchResultsPopup table tr:nth-child(even) {
  background-color:white;
}

#searchResultsPopup TD.geslacht_M {
  background-color:rgba(173, 216, 230,1);
}
#searchResultsPopup TD.geslacht_V {
  background-color:rgba(255, 192, 203, 1);
}

#searchResultsPopup td.foundPerson.geslacht_V.lookup,
#searchResultsPopup td.foundPerson.geslacht_M.lookup {
  background-color:transparent;
  width:100%;
}

#searchResultsPopup tr:hover,
#searchResultsPopup table tr:nth-child(even):hover  {
  background-color:yellow;
}

/**********************************************
  Autocomplete
**********************************************/

.ui-menu {
  background-color:lightgray;
}

.ui-menu  .ui-menu-item {
    font-size: 8pt;
}

/**********************************************
  POPUP for adding a new child, parent sibling etc
**********************************************/

#newChildPopup label {
  width: 11em;
  text-align: right;
  font-weight: bold;
  vertical-align: baseline;
}

#newParentPopup label {
  width: 11em;
  text-align: right;
  font-weight: bold;
  vertical-align: baseline;
}

#newPartnerPopup label {
  width: 12em;
  text-align: right;
  font-weight: bold;
  vertical-align: baseline;
}

form[name="linkperson"] div.value {
  padding:2px;
  min-width:200px;
  max-width:400px;
  min-height:20px;
  border:1px solid gray;
  display:inline-block
} 

form[name="linkperson"] label {
  text-align:right;
  width:8em;
  font-weight:bold;
  vertical-align:bottom;
}

form[name="linkperson"] img.search {
  max-height:32px;
  vertical-align:bottom;
}

/**********************************************
  Error message popup
**********************************************/
div.errorMessage span.indicator {
  font-weight:bold;
  color:red ;
}

.validationError {
  border:2px solid red;
}



/*************************************************************************************
**
** Scalable Vector Graphics :: Stamboom Tree
**
*************************************************************************************/

#stamboom-tree-svg {
  background-color:lightgray;
  /*padding:10px;*/
  border-radius:5px;
}

#stamboom-tree-svg rect.persoon,
#stamboom-tree-svg text.persoon {
  cursor:pointer;
}

#stamboom-tree-svg text.persoon {
  font-family:sans-serif;
  font-size:10pt;
}
#stamboom-tree-svg rect.persoon{
}

#stamboom-tree-svg rect.male {
  fill:rgba(173, 216, 230,1);
}

#stamboom-tree-svg rect.female {
 fill: rgba(255, 192, 203, 1);
}

#stamboom-tree-svg rect.female {
  stroke:rgba(200,200,200,0.8);
  stroke-width:3;
}

#stamboom-tree-svg rect.female.persoon.current-person ,
#stamboom-tree-svg rect.male.persoon.current-person {
  stroke:gold;
  stroke-width:3;
}

#stamboom-tree-svg text.female {
  fill: black;
}


#stamboom-tree-svg text.male {
  fill:black;
}

#stamboom-tree-svg line.sameParent{
  stroke:gray;
  stroke-width:3;
  stroke-dasharray:3,3
}

#stamboom-tree-svg path.connector,
#stamboom-tree-svg line.connector {
  fill:none;
  stroke-width: 1;
  stroke:black;
}

/*---------------------------------------------------------------------------------------------------------
------------ LookUp Container -----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------*/

img.lookupButton {
  max-height:24px;
  cursor:pointer;
}


div.lookupContainer {
  width:800px;
  height:500px;
  background-color:white;
  border:1px solid gray;
  box-shadow:10px 10px 10px rgba(200,200,200,0.8);
}


div.lookupContainer div.captionContainer {
  width:100%;
  height:20px;
  padding-top:5px;
  background-color:gray;
}

div.captionContainer p.subcaption {
  padding-top:0px;
  margin-top:0px;
  margin-bottom:0px;
  font-size:9pt;
  font-family:sans-serif;
  color:white;
  font-weight:bold;
  
}

div.lookupFormContainer {
  border:1px solid gray;
  margin:10px;
  border-radius:5px;
  padding:5px;
  background-color:rgb(250,250,250);
}
div.lookupFormContainer input.lookup {
  font-size:10pt;
  color:blue;
  
}
div.lookupFormContainer input.lookup:focus {
  border-color:gold;
}

#lookupResultContainer {
  overflow-y:scroll;
  height:300px;
  margin:10px;
  max-width:100%;
  overflow-x:scroll;
  border:1px solid gray;
  border-radius:10px;
  margin-top:15px;
}
  
#lookupResultContainer table.lookupResultTable {
  border-collapse:collapse;
  table-layout:fixed;
  margin-bottom:10px;
  font-size:small;
}  
  
#lookupResultContainer table.lookupResultTable tr:nth-child(odd){
  background-color:#A9E2F3;
  color:black;

  }  
  
#lookupResultContainer table.lookupResultTable tr:nth-child(even){
  background-color:rgb(240,240,240);
  color:black;
  }    
  
#lookupResultContainer table.lookupResultTable td {
  padding:3px;
  border-right:1px dotted gray;
  cursor:pointer;
}  
  
label.lookup {
  display:inline-block;
  text-align:right;
  width:10em;
  font-size:10pt;
  margin-top:4px;
  margin-right:2px;
}

div.currentRecord {
  vertical-align:center;  
  height:20px;
}

div.currentRecord span.currentRecordValue {
  display:inline-block;
  font-size:12pt;
  width:500px;
  border:2px solid gray;
  padding:2px;
  margin-top:0px;
  margin-left:10px;
  height:20px;
}

div.currentRecord label {
  display:inline-block;
  font-size:12pt;
  border:1px solid transparent;
} 


#lookupResultContainer table.lookupResultTable tr.currentSelection {
  background-color:yellow;
}

/*---------------------------------------------------------------------------------------------------------
------------ Add Person dialog SVG ------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------*/

#addNewPerson g.button {
  cursor:pointer;
}

#addNewPerson path.connector {
  stroke-width:2;stroke:black;fill:transparent
}

#addNewPerson g.button text {
  font-size:small;
  font-family:sans-serif;
}

#addNewPerson g.button text.Female {
}

#addNewPerson g.button rect{
  stroke-width:2;
  stroke:darkgray;
}
  
#addNewPerson g.button.male rect{
  style="stroke:blue;
  stroke-width:3px;
  fill:rgba(173, 216, 230,1);
}

#addNewPerson g.button.female rect{
  style="stroke:red;
  stroke-width:3px;
  fill:rgba(255, 192, 203, 1);
}


/*---------------------------------------------------------------------------------------------------------
------------ Stamboom Person Pictures ------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------*/

#imageList {
  border:2px solid white;
}

#imageList.dragging {
  border-color:blue;
}

div.imageContainer {
  max-height:200px;
  max-width:200px;
  border:1px solid lightblue;
  border-radius:4px;
  float:left;
  margin:2px;
}

img.stamboom.person.picture {
  max-height:190px;
  max-width:190px;
  border:4px solid white;
}

div.imageContainer.selected {
  opacity:0.8;
}

div.imageContainer.selected img.stamboom.person.picture {
    border-color:blue;
}

#imageInfo label{
  display:inline-block;
  width:10em;
  text-align:right;
  font-weight:bold;
  vertical-align:top;
  margin-right:4px;
  margin-top:8px;
}
#imageInfo label:after {
  content:":";
}


#imageInfo span{
  vertical-align:bottom;
  width:400px;
  display:inline-block;
}

#imageZoomPopup {
  padding:2px;
  overflow:hidden;
}