/*
Versión modificada 2020 Ignacio Salinas 

Copyright 2015, 2016 Sam Kauffman

This file is part of the Inbreeding Calculator.

The Inbreeding Calculator is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

html {
    font-family: sans-serif;
  }
 
/* Header */
.page-header{
    overflow: hidden;
    background: #37474f;
    padding: 1em 0 0 ;
    height: 3.5em;
    transition:all .4s linear;
  }
     
  .page-header .center-contents{
    max-width: 650px;
    margin:auto;
    overflow: hidden;
  }
     
  .logo{
    font-size: 20px;
    max-width: 80px;
    display: block;
    float: left;
    margin: 0 0 1em 1em;
    color: #ffffff;
  }
     
  .page-nav{
    color: #ffffff;
  }
     
  .page-nav ul, .page-nav li{
    list-style:none;
    margin: 0.4em;
    padding: 0;
  }
     
  .page-nav a{
    color: #fff;
    width: 100%;
    height: auto;
    display: block;
    padding: 0.75em 1em;
    text-decoration: none;
    border-top:#666 1px solid;
    cursor: pointer;
  }
         
  .toggle-nav {
    float: right;
    padding: 1em;
    margin: 0 0 1em 1em;
    color: rgb(255,255,255);
    cursor: pointer;
  }
     
  .menu-expanded {
    height: 13em;
  }
     
  /* Main contents */
  .page-contents{
    padding:0 1em;
    max-width: 650px;
    margin:auto;
  }
     
  /* Media queries */
  @media only screen and (min-width:350px){
    .page-header span{
      display: block;
    }
          
    .page-nav {
      clear:left;
      position: relative;
      visibility: inherit;
      transition:visibility .4s linear;
    }
     
  }
     
  @media only screen and (min-width:700px){
    .page-header{
      height: 4em;
    }
  
    .logo{
      max-width: 92px;
    }
  
    .page-nav{
      width: auto;
      float: right;
      display: block;
      clear: none;
      visibility: visible;
    }
  
    .page-header span{
      display: none;
    }
     
    .page-nav ul, .page-nav li{
      float: left;
    }
     
    .page-nav a {
      border-top: none;
    }
     
  }
     
  @media only screen and (max-width:699px){
    .collapse {
      visibility: hidden;
    }
  }
     
  @media only screen and (min-width:700px){
    .collapse {
      visibility: inherit;
    }
  }  

h1 {
    text-align: left;
    font-size: 18px;
}

/* Página endogamia*/
.endogamia {
    font-size: 12px;
    height: 100%;   
    margin: 16px;
    padding: 0;
}

#controls {
    width: 27%;
    height: 100%;
    float: left;
}
body.results #controls {
    width: 27%;
}
#result {
	color: darkblue;
	margin-left: 8px;
}
#breakdown {
	padding-left: 0;
}
#breakdown > li {
	list-style: none;
	margin-left: 20px;
    text-indent: -24px;
	margin-bottom: 3px;
}
#breakdown > li.closed,
#breakdown > li.open {
	cursor: pointer;
}
#breakdown > li::before {
	margin-right: 8px;
	content: '\26ab';
	color: #777;
}
#breakdown > li.closed::before {
	margin-right: 6px;
	content: '\25ba';
	color: black;
}
#breakdown > li.open::before {
	margin-right: 4px;
	content: '\25bc';
	color: black;
}
#breakdown > li ul {
	padding-left: 20px;
}
#breakdown > li ul li {
	list-style-type: none;
	margin-left: 0;
	text-indent: 0;
	overflow-y: hidden;
	transition: max-height .5s cubic-bezier(0, 1, 0.5, 1);
}
#breakdown > li.closed ul li {
	max-height: 0;
}
#breakdown > li.open ul li {
	max-height: 200vh; /* ridiculously large max height */
}
#breakdown .coefficient {
	color: darkblue;
}
#breakdown .through {
	font-size: .9em
}
#textarea {
    width: 98%;
    height: 12em;
}
#pedigree {
    margin: 0 0 1.5em;
    padding: 5px 1em 5px 5px;
    border: 1px solid gray;
    background-color: #cfd8dc;
    float: right;
    width: calc(72% - 20px);
    height: 90%;
    overflow: auto;
}
body.results #pedigree {
    width: calc(72% - 20px);
}	
table {
    border-collapse: collapse;
    font-size: 1em;
}
td {
    padding: 0;
}
#pedigree td:first-child {
    width: 8em;
    padding: 3px;
    position: relative;
}
tr.s > td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 50%;
    border: solid gray;
    border-width: 1px 0 0 1px
}
tr.d > td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 50%;
    width: 2px;
    height: 50%;
    border: solid gray;
    border-width: 0 0 1px 1px
}
input.ind { 
    width: 9em;
    text-align: center;
    border: 1px solid gray;
} 
.more {
    white-space: nowrap;
	cursor: pointer;
}
ul.name-choices {
    position: absolute;
	z-index: 1;
    margin: 0;
    padding: 0;
    border: 1px solid gray;
    border-top: none;
    background-color: white;
    color: gray;
    list-style: none;
}
ul.name-choices > li {
    margin: 0;
    padding: 0;
    padding: 0 2px;
    cursor: pointer;
}
ul.name-choices > li:hover {
    background-color: #E4EEEE;
}
#confirmDialog {
	position: absolute;
	z-index: 10;
	width: 300px;
	background: white;
	border: 1px solid gray;
	text-align: center;
}

/* Páginas información e instrucciones*/
.info {
	line-height: 22px;
}
.info {
	width: 70%;
	margin: 0 auto;
}
.info h1 {
	font-size: 24px;
	margin-top: 1em;
}
.info h2 {
    font-size: 20px;
	margin-top: 1em;
}

/*Pié de página*/
footer {
    background-color: #37474f;
    height: 3em;
    color: #ffffff;
    text-align: center;
    margin-top: 1em;
    padding: 0.5em;       
}