* {
    padding: 0; margin: 0;
    box-sizing: border-box;
    border-collapse: collapse;
  }
  
  body {
    font-family: Corbel, Helvetica, sans-serif;
    font-size: 12pt;
    background: #404040; 
  }
  
  body > * {
    position: relative;
    padding: 1em;
    margin: auto;
    width: 1200px;
    min-width: 78em;
    background: white;
    z-index: 1;
    margin-top: 1em;
    border-radius: 4px;
  }
  
  h1, h2, h3, h4 {
    margin: 1.15em 0 0.5em;
    color: #006699;
  }
  
  h1 {font-size: 1.5em;}    
  h2 {font-size: 1.3em; margin-top: 2em;}
  h3 {font-size: 1.2em;}
  h4 {font-size: 0.9em;}
  
  p {
    margin: 0.5em 0 1.15em;
  }
  
  ul {
    margin-left: 1em;
  }
  
  button, input[type=submit], #searchbox {
    font-size: 1.2em;
    padding: 4px;
    border: 2px solid grey;
    border-radius: 8px;
  }
  
  #searchbox {
    width: 61.8%;
    min-width: 480px;
  }
  
  button, input[type=submit] {
    cursor: pointer;
  }
  
  #plots > div {
    display: inline-block;
  }
  
  *[onclick] {
    cursor: pointer;
  }
  
  a {
    color: #006699;
    text-decoration: underline;
  }
  
  img.Country {
    height: 24px;
    float: right;
    margin-left: 4px;
  }
  
  img.Colour {
    height: 32px;
    float: left;
    margin-right: 4px;
  }
  
  #data, #children {
    position: relative;
  }
  
  #data > div,
  #children > div {
    position: relative;
    min-height: 32px;
    width: auto;
    background-color: #F8F9FA;
    border: 1px solid #909090;
    padding: 4px;
  }
  
  #data > div.nonbreed,
  #children > div.nonbreed {
    background-color: #E8E9EA;
  }
  
  #pedigree {
    min-width: 78em;
    padding: 1em 2px;
  }

  #pedigree > .col {
    display:inline-block;
    vertical-align: middle;
  }
  
  #pedigree > .col > div {
    display:block;
    border: 1px solid black;
  }
  
  #pedigree > .col > div > div {
    padding: 4px;
  }
  
  #pedigree .double {
    background: #FFDDDD;
  }
  
  table {
    margin: 4px auto;
    padding: 0.5em;
    margin-bottom: 1em;
    border: 2px solid grey;
  }
  
  td {
    padding: 2px 4px;
  }
  
  td.key {
    font-style: normal;
    font-size: 0.85em;
  }
  
  td.value {
    font-size: 1.1em;
    font-family: 'Caveat', sans-serif;
    border-bottom: 1px solid lightgrey;
  }
  
  li.entryMini {
    position: relative;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 113px;
    height: 64px;
    font-size: 0.7em;
  }
  
  li.entryMini img.icon {
    display: block;
    margin: auto;
    height: 32px;
  }
  
  li.entryMini a {
    text-decoration: none;
  }
  
  #history li {
    padding-right: 4px;
  }
  
  #history li + li {
    padding-left: 4px;
    border-left: 1px solid #C8C9CA;
  }
    
  .triangle {
    position: absolute;
    top: 0px; right: 6px;
    width: 16px;
    height: 16px;
  }
  
  .fam {
    display: inline-block;
    height: 1.2em;
    margin: 0 1em -0.5em;
  }
  
  #familiarity > div {
    margin-bottom: 2em;
  }
  
  .fam_up, .fam_down {
    text-align: right;
    margin: -12px 113px -12px 0;
  }
  
  .fam_common {
    text-align:right;
  }
  
  #planning > div {
    display: inline-block;
    text-align: center;
  }
  
  #planning > div + div {
    margin-left: 2em;
  }
  
  #planning img {
    height: 128px;
  }
  
  #planning > #H img {
    transform: scaleX(-1);
  }
  
  #planning .name {
    font-weight: bold;
  }
  
  span.key {
    font-size: 0.7em;
    margin: 0 0.3em;
  }
  .phenotype {
    color: #CC0000;
  }
  .genotype {
    color: #0088CC;
  }
  
  #pedigree .additional {
    font-size: 0.8em;
  }
  
  #pedigree_0 {
    padding: 0.2em;
  }
  
  #pedigree_0 > span {
    display: block;
    margin: 1em 0 0.1em;
  }
  
  #pedigree_0 > h2 {
    margin: 0;
    font-size: 1em;
  }
  
  .warning {
    color: #AA0000;
    font-weight: bold;
  }
  
  svg#ampel {
    display: inline-block;
    margin: 0 1em 0;
    height: 8em;
    width: 3em;
  }
  
  div#ampelText {
    float: right; 
    text-align: left;
    font-weight: bold;
    font-size: 0.9em;
  }