/************************************************************************************/
/* Global                                                                           */
/************************************************************************************/

body * {
  max-height: 1000000px; /* Prevent Android Chrome Font Boosting */
}

body {
  color           : #000000; /* TopicTextColor */
  background-color: #FFFFFF; /* TopicBackgroundColor */
  font-family     : 'Verdana','Arial'; /* TopicFontFamily */
  border-width    : 0; 
  margin          : 0; 
  padding         : 0; 
  font-size       : 16px;
  overflow        : hidden; /* V4.8 */
}

a:link    {color: #0645AD} /* TopicLinkColor */  
a:visited {color: #0B0080} /* TopicVisitedLinkColor */  
a:hover   {color: #0645AD} /* TopicActiveLinkColor */  
a:active  {color: #0645AD} /* TopicActiveLinkColor */

a {
  text-decoration: none;
}         

a:hover {
  text-decoration: underline;
}
      
.u {
  text-decoration: underline;
}

.icon_none {
  background-image : url('icon_none.png');
  background-size  : 1.2em 1.2em;
  background-repeat: no-repeat;
  column-width     : 1.2em;
  min-width        : 1.2em;
  height           : 1.3em;
}

.icon_ancestor {
  background-image : url('icon_ancestor.png');
  background-size  : 1.2em 1.2em;
  background-repeat: no-repeat;
  column-width     : 1.2em;
  min-width        : 1.2em;
  height           : 1.3em;
}

.icon_descendant {
  background-image : url('icon_descendant.png');
  background-size  : 1.2em 1.2em;
  background-repeat: no-repeat;
  column-width     : 1.2em;
  min-width        : 1.2em;
  height           : 1.3em;
}

.icon_male {
  background-image : url('icon_male.png');
  background-size  : 1.2em 1.2em;
  background-repeat: no-repeat;
  column-width     : 1.2em;
  min-width        : 1.2em;
  height           : 1.3em;
}

.icon_female 
{
  background-image : url('icon_female.png');
  background-size  : 1.2em 1.2em;
  background-repeat: no-repeat;
  column-width     : 1.2em;
  min-width        : 1.2em;
  height           : 1.3em;
}

.photo:hover {
  opacity: 0.7; 
  cursor : pointer;
}

/************************************************************************************/
/* Header                                                                           */
/************************************************************************************/

div.header {
  background-color: #FFFFCC; /* HeaderBackgroundColor */
  color           : #707070; /* HeaderTextColor */
  font-family     : 'Verdana','Arial'; /* HeaderFontFamily */
  font-size       : 1.1em; /* HeaderFontSize */
  font-weight     : bold;
  border          : 0;
  margin          : 0;
  padding         : 0;
  border-bottom   : 1px solid #707070; /* HeaderTextColor */
}

div.header_menu {
  display  : inline-block; 
  cursor   : pointer; 
  padding  : 0.3em;
  font-size: 1.1em;
}

div.header_title {
  display     : inline-block; 
  padding-left: 0.5em;
}

/************************************************************************************/
/* Menu                                                                             */
/************************************************************************************/

div.menu {
  height          : 100%;
  width           : 0;
  position        : fixed;
  z-index         : 1;
  top             : 0;
  left            : 0;
  background-color: #FFFFCC; /* HeaderBackgroundColor */
  overflow-x      : hidden;
  transition      : 0.5s;
  padding-top     : 3em;
  border          : 1px solid #707070; /* HeaderTextColor */
  visibility      : hidden;
}

div.menu a {
  padding        : 0.5em 0 0 1em;
  text-decoration: none;
  font-size      : 1.1em;
  color          : #707070; /* HeaderTextColor */
  display        : block;
  transition     : 0.3s;
}

div.menu a:hover {
  color          : #0645AD; /* HeaderLinkActiveColor */  
  text-decoration: underline;
}

div.menu .closebutton {
  position   : absolute;
  top        : 0;
  right      : 0.5em;
  font-size  : 1.2em;
}

/************************************************************************************/
/* Popup photo                                                                             */
/************************************************************************************/

div.popup_window {
  visibility: hidden;
  position  : fixed;
  top       : 0;
  left      : 0;
  bottom    : 0;
  z-index   : 1;
  text-align: center;
  background: black;
  width     : 100%;
  height    : 100%;
}

div.popup_window .photo {
  position  : relative;
  z-index   : 1;
  background: black;
  width     : auto;
  height    : auto;
  max-width : 95%;
  max-height: calc(100vh - 3em);
}

div.popup_window .photo:hover {
  cursor: pointer;
}

div.popup_window .close_button {
  position    : relative;
  z-index     : 1;
  font-size   : 2em;
  text-align  : right;
  color       : white;
  margin-right: 0.25em;
}

div.popup_window .close_button:after {
  content: "\00D7"; /* Times */
}

div.popup_window .close_button:hover {
  font-weight    : bold;
  color          : lightgray;
  cursor         : pointer;
  text-decoration: none;
}

/************************************************************************************/
/* Scroll Area                                                                            */
/************************************************************************************/

div.scroll_area { /* V4.8 */
  overflow    : auto;
  margin-left : 0;
  padding-left: 0;
  height      : calc(100vh - 2.7em);
}

/************************************************************************************/
/* Topic                                                                            */
/************************************************************************************/

div.topic {
  margin-top      : 1em;
  margin-left     : 1em;
  margin-right    : 1em;
  margin-bottom   : 2em;
  padding         : 0;
}

div.topic h1 {
  margin-top   : 0;
  margin-bottom: 0.75em;
  font-size    : 1.1em;
}
      
div.topic h2 {
  margin-top   : 0.5em;
  margin-bottom: 0.2em;
  margin-left  : 0;
  font-size    : 1em;
}

div.topic p {
  margin-top: 0;
  font-size : 1em;
}

div.topic hr {
  height          : 1px;
  margin          : 0;
  margin-top      : 2em;
  margin-bottom   : .2em;
  border-width    : 0;
  background-color: #000000; /* TopicTextColor */
}

div.person_table {
  display    : table; 
  margin     : 0;
  padding    : 0;
  border     : 0;
  margin-left: -1em;
}

div.topic .person_table > div { 
  display: table-row; 
}

div.topic .person_table > div > div { 
  display       : table-cell;
  vertical-align:top;
}  

div.topic .table {
  display  : table; 
  margin   : 0;
  padding  : 0;
  border   : 0;
}

div.topic .table > div { 
  display: table-row; 
}

div.topic .table > div > div { 
  display      : table-cell;
  padding-right: 0.7em;
}  

div.topic img {
  max-width: 85vw;
  width    : 16em;
}

div.topic .photos {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(17em, 1fr));
}

.topic .photos > div {
  width: 16em;
}

div.topic .pedigree_link {
  width     : 100%; 
  text-align: right
}

/************************************************************************************/
/* Diagram                                                                          */
/************************************************************************************/

div.diagram {
  color      : #000000; /* BoxTextColor */
  font-family: 'Verdana','Arial'; /* BoxFontFamily */
  margin     : 1em;
}

div.diagram a:link    {color: #0645AD} /* BoxLinkColor */  
div.diagram a:visited {color: #0B0080} /* BoxVisitedLinkColor */  
div.diagram a:hover   {color: #0645AD} /* BoxActiveLinkColor */  
div.diagram a:active  {color: #0645AD} /* BoxActiveLinkColor */  


div.diagram .grid {
  display: inline-grid;
  display: -ms-grid; /* IE Fix */
}

div.diagram .parents_line {
  border-bottom: 1px solid black;  
  min-width    : 1em;
  height       : 50%;
}

div.diagram .father_lines {
  border-top   : 1px solid black;  
  border-left  : 1px solid black;  
  min-width    : 1em;
  height       : 50%;
  transform    : translateY(100%);    
}

div.diagram .mother_lines {
  border-bottom: 1px solid black;  
  border-left  : 1px solid black;  
  min-width    : 1em;
  height       : 50%;
}

div.diagram .box, .last_box {
  display              : grid;
  display              : -ms-grid; /* IE Fix */
  justify-content      : left;
  grid-template-columns: auto auto 1fr;
  background-color     : #FFFFFF; /* BoxBackgroundColor */
  border-style         : solid;
  border-color         : #000000; /* TopicTextColor */
  border-width         : 1px;
  line-height          : 1.25em;
  box-shadow           : .4em .4em 1em rgba(0,0,0,0.2);
  margin               : 0;
  margin-bottom        : .7em;
  padding              : 0;
  position             : relative;
}

div.diagram .box {
  top      : 50%;
  transform: translateY(-50%);    
}

div.diagram .box:hover, .last_box:hover {
  opacity        : 0.7; 
  cursor         : pointer;
  color          : #0645AD; /* BoxActiveLinkColor */  
  text-decoration: underline;
}

div.diagram .box_image img {
  border-right   : 1px solid #000000; /* TopicTextColor */
}

div.diagram .box_image {
  -ms-grid-column: 1; /* IE Fix */
}

div.diagram .box_icon {
  -ms-grid-column: 2; /* IE Fix */
}

div.diagram .box_label {
  text-align     : center;
  white-space    : nowrap;
  vertical-align : top;
  border         : 0;
  margin         : 0;
  padding-top    : 0.25em;
  padding-left   : 0;
  padding-right  : 1.5em;
  padding-bottom : 0.25em;
  width          : 100%;
  -ms-grid-column: 3; /* IE Fix */
}

div.diagram div.continuation > a {
  display     : block; 
  height      : 100%; 
  padding-left: 1em;
}

div.diagram div.continuation > a:after {
  content: '>>';
}

/************************************************************************************/
/* Photos Navigations                                                                           */
/************************************************************************************/

div.photos_pagination {
	margin-top: 2em;
}

div.photos_pagination a {
	padding: 0.5em;
}

div.photos_pagination span {
	padding: 0.5em;
}

/************************************************************************************/
/* Footer                                                                           */
/************************************************************************************/

div.footer {
  margin-top    : 5em;
  border-top    : 1px solid #000000; /* TopicTextColor */
  padding-top   : 0.5em;
  padding-bottom: 3em;
  font-family   : arial;
  font-size     : 0.8em;
  font-style    : italic;    
}