/** Google Fonts **/

@import url('https://fonts.googleapis.com/css?family=Muli:600,700');


/** General Styles **/

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  border: 0 none;
  position: relative;
}

html, body {
  min-width: 100%;
  height: 100%;
  font-family: 'Muli', sans-serif;
  font-size: 13.5px;
  background-color: #fff7d9;
  background-size: 100% 100%;
}


/** Navigation **/

div#bs-example-navbar-collapse-1.collapse.navbar-collapse {
  font-size: 15px !important;
}
ul.dropdown-menu li a {
  font-size: 15px !important;
}

.navbar-default {
  background-color: #0d0a38;
}

.nav.navbar-nav.navbar-right li a {
  color: #eadbdb;
}

.nav.navbar-nav.navbar-right li a:hover {
  color: #b4969a;
}

.navbar-default .navbar-nav > .active > a {
  background-color: #0b134d;
}

.navbar {
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
}

.navbar-brand {
  padding: 0;
}

.navbar-nav {
  margin-bottom: 0px;
}

.navbar-brand > img {
  width: auto;
  height: 100%;
  padding: 0;
}

.dropdown-menu {
  padding: 0;
}

.dropdown-menu > li {
  text-align: left;
  font-size: 15px;
  border-bottom: 2px solid #fff;
  padding: 0;
}

.dropdown-menu > li > a {
  background-color: #0b134d;
  color: #fff;
}

.dropdown-menu > li > a > img {
  height: 1.2em;
  width: 2em;
  margin-left: 0px;
}

#bs-example-navbar-collapse-1 {
  margin-left: 3em;
}

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}


/** Header **/

h1 {
  margin-bottom: -.3em;
  text-align: center;
  font-family: 'Muli', sans-serif;
  font-size: 34px;
  font-weight: 700;
}


/** Abbreviations **/

#abbrv {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
}


/** Pedigree Tree **/

.tree {
  margin: 0 auto;
  width: 1350px;
  min-height: auto;
  position: relative;
}

.tree ul {
  padding-top: 15px;
  position: relative;
  overflow: auto;
}

.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 3px 0 3px;
}

.tree li::before, .tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 2px solid #a9a9a9;
  width: 50%;
  height: 20px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid #a9a9a9;
}

.tree li:only-child::after, .tree li:only-child::before {
  content: '';
  display: none;
}

.tree li:only-child {
  padding-top: 0;
}

.tree li:first-child::before, .tree li:last-child::after {
  border: 0 none;
}

.tree li:last-child::before {
  border-right: 2px solid #a9a9a9;
  border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
}

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid #a9a9a9;
  width: 0;
  height: 15px;
}

.tree li a {
  border: 0;
  padding: 5px 5px;
  text-decoration: none;
  color: #000;
  font-size: 13.5px;
  display: inline-block;
  border: 2px solid #a9a9a9;
  border-radius: 10px;
  min-width: 8em;
}


/** Hidden Elements **/

#child1-ul,
#child1-1-ul,
#child1-2-ul,
#child1-3-ul,
#child2-ul,
#child2-1-ul,
#child3-ul,
#child3-1-ul,
#child3-2-ul,
#child4-ul,
#child4-1-ul,
#child4-2-ul,
#child4-3-ul,
#child4-4-ul,
#child4-5-ul,
#child5-ul,
#child5-1-ul,
#child5-2-ul,
#child5-3-ul,
#child5-4-ul,
#child5-5-ul,
#child5-6-ul {
  visibility: hidden;
}

#condition {
  display: none;
}


/**Anchors Modification**/

.highlight {
  background-color: #fff !important;
  border: 2px solid #ff0000 !important;
}

#proband {
  background-color: #ff0000;
  color: #fff;
  font-weight: 600;
  border: 2px solid #ff0000;
  margin-bottom: -.3em;
  overflow: auto;
  cursor: default;
}

a:focus {
  outline: 0;
}

#bba-e {
  background-color: #ff6666;
}

#bba-k {
  background-color: #ffc14d;
}

#bba-k1 {
  background-color: #ffc966;
  margin-top: -.2em;
}

#bba-k2 {
  background-color: #ffd280;
}

#bba-k3 {
  background-color: #ffdb99;
  margin-top: -.3em;
}

#bba-k4 {
  background-color: #ffe4b3;
}

#bba-k5 {
  background-color: #ffedcc;
}

#bba-k6 {
  background-color: #ffecce;
}

#bba-k7 {
  background-color: #ffecce;
}

#parents {
  background-color: #66ffff;
}

#uncles-aunts {
  background-color: #66ffff;
}

#uncles-aunts1 {
  background-color: #80ffff;
  margin-top: -.3em;
}

#uncles-aunts2 {
  background-color: #99ffff;
}

#uncles-aunts3 {
  background-color: #b3ffff;
}

#uncles-aunts4 {
  background-color: #ccffff;
}

#uncles-aunts5 {
  background-color: #e6ffff;
}

#proband1 {
  background-color: #4dff4d;
  margin-left: 1.1em;
}

#proband2 {
  background-color: #66ff66;
  margin-left: 2.0em;
}

#proband3 {
  background-color: #80ff80;
  margin-left: 1.8em;
}

#proband4 {
  background-color: #99ff99;
  margin-left: 1.6em;
}

#brother {
  background-color: #99ddff;
}

#brother1 {
  background-color: #b3e6ff;
  margin-left: 1em;
}

#brother2 {
  background-color: #b3e6ff;
  margin-left: 1em;
}

#brother3 {
  background-color: #cceeff;
  margin-left: 1em;
}

#brother4 {
  background-color: #e6f7ff;
}

#grandparents {
  background-color: #ffff00;
}

#great-uncles {
  background-color: #ffff33;
}

#great-uncles1 {
  background-color: #ffff4d;
}

#great-uncles2 {
  background-color: #ffff66;
  margin-top: -.4em;
}

#great-uncles3 {
  background-color: #ffff80;
}

#great-uncles4 {
  background-color: #ffff99;
}

#great-uncles5 {
  background-color: #ffffb3;
}

#great-uncles6 {
  background-color: #ffffcc;
}

#bba-a {
  background-color: #ffc14d;
}


/** Margins and Heights for Anchors **/

#proband-ul::before {
  height: 4em;
}
#cousin {
  margin-top: 1.7em;
}

#greatuncle {
  margin-top: 1.5em;
}

#greatuncle2 {
  margin-top: 1.75em;
}

#child4-ul::before {
  height: 2.8em;
}

#child4-1-ul::before, #cousin-ul::before {
  height: 3.0em;
}

#male-female {
  margin-top: 1.2em;
}

#male-female1 {
  margin-top: 1.6em;
}

#male-female2 {
  margin-top: 1.9em;
}

#male-female3 {
  margin-top: .1em;
}

#child5-ul::before {
  height: 2.4em;
}

#child5-1-ul::before {
  height: 2.8em;
}

#child5-2-ul::before {
  height: 3.0em;
}

#child5-3-ul::before {
  height: 2em;
}

#label1, #label2 {
  margin-left: 1em;
}


/** Output Styles **/

input {
  box-shadow: 0 0 0 2px #CC0000;
  margin: 0.5em 0.8em .5em 0.8em;
}

label {
  font-size: 15px;
}

#outputs {
  text-align: center;
  width: 820px;
  border: 2px solid #000;
  margin: 0 auto;
}

#output1 {
  min-width: 31em;
  height: 1.1em;
  text-align: center;
  font-weight: 600;
}

#output2 {
  width: 1.4em;
  height: 1.1em;
  text-align: center;
  font-weight: 600;
}

#output3 {
  width: 12em;
  height: 1.1em;
  text-align: center;
  font-weight: 600;
}

#condition {
  color: #cc0000;
  font-size: 14px;
  text-align: right;
}

#blink {
  font-size: 15px;
  
}


/** Carets and Arrow **/

#arrow {
  color: #000;
  cursor: default;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

i {
  cursor: pointer;
}

i.fa {
  color: #CC0000;
}


/** Footer**/

h2, h3 {
  font-family: 'Muli', sans-serif;
  font-weight: 600;
}

footer {
  margin: .5em;
}


/** Additional Media Queries**/

@media (max-width: 768px) {
  body, html {
    height: 100vh;
  }
}

@media (max-width: 968px) {
  nav {
    min-width: 1350px;
  }
}