@import url(https://fonts.googleapis.com/css?family=Give+You+Glory|The+Girl+Next+Door|Gloria+Hallelujah|Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC);
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

h5{
font-size:12px;
}
.divTable{
	display: table;
float: left;
	border-collapse: collapse;
	width: 39%;
	background: transparent;
	color: #000000 !important;
font-size: 11px;
	font-weight: 300;
        letter-spacing: 0.1em;
margin-left:5px;
border: 1px solid transparent
vertical-align: middle !important;
}

.divTableRow {
	display: table-row;
vertical-align: middle !important;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
vertical-align: middle !important;
}
.divTableCell, .divTableHead {
	display: table-cell;
	padding: 3px 10px;
	background: transparent;
	width: 140px;
	text-align: left !important;
	color: #977f88 !important;
        border-bottom: solid 1px #ae9ca3;
        font-size: 11px;
        letter-spacing: 0.1em;
padding: 12px 0px;
vertical-align: middle !important;
}

. divTableCell2, .divTableHead   {
	display: table-cell;
	padding: 3px 10px;
	background: transparent;
	width: 140px;
	text-align: left !important;
	color: #977f88 !important;
        border-bottom: solid 1px #ae9ca3;
        font-size: 11px;
        letter-spacing: 0.1em;
padding: 12px 0px;
vertical-align: middle !important;
}

.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
vertical-align: middle !important;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
vertical-align: middle !important;
}
.divTableBody {
	display: table-row-group;
vertical-align: middle !important;
}

.kuva {
display: inline-block;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
object-fit: cover !important;
 width: 587px !important;
  height: 482px !important;
}

#kuva {
	float: left;
margin-right:20px !important;
}

.kahdenkuvangalleria {
float:left;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
object-fit: cover !important;
 width: 507px !important;
  height: 452px !important;
margin:5px;
}

.kolmenkuvangalleria {
float:left;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
object-fit: cover !important;
 width: 350px !important;
  height: 350px !important;
margin:5px;
}

#pedigree2 td {
	border: 1px solid #0c6466 !important; 
		-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
	-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
	 font-size: 12px;
	 padding: 5px;
	 font-weight: 400;
vertical-align: middle;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 13px !important;
	letter-spacing: 0.07em;
}

#pedigree2 td a{
    text-decoration: none !important;
	font-size: 12px;
	font-weight: 400;
	color: #056365;
}

#pedigree2 td a:hover{
    text-decoration: underline !important;
	font-size: 12px;
	font-weight: 400;
	color: black;
}

#pedigree2 {
  width: 100%; 
  text-align: left; 
  border: 1px solid #006060 !important; 
	-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
	-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
vertical-align: middle;
}

#pedigree2 td span{
font-family: 'Roboto', sans-serif !important;
	color: #8f8f8f;
	font-size: 10px;
	font-variant: normal !important;
	font-weight: 500;
	letter-spacing: 0.1em;
}

.male {
		background: #fff url("http://vahtipossu.org/alava/wp-content/uploads/2020/03/dust_scratches.png");
		color: #000000;
		font-family: Arial;
		font-size: 8pt;
		text-align: center;
		vertical-align: middle;
		border-collapse: collapse; 
		border: 1px solid #000000;
	}

	.female {
		background: #fff url("http://vahtipossu.org/alava/wp-content/uploads/2020/03/dust_scratches2-2.png");
		color: #000000;
		font-family: Arial;
		font-size: 8pt;
		text-align: center;
		vertical-align: middle;
		border-collapse: collapse; 
		border: 1px solid #000000;
	}


.heppa {
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
 display: block;
  margin-left: auto;
  margin-right: auto;
}

.heppa:after {
	position: absolute;
	content: ' ';
	width: 500px !important;
 display: block;
  margin-left: auto;
  margin-right: auto;
	border: solid 1px rgba(137,130,48,.2);

	background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
	background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}

#perustieto {
	width: 100%;
	border: 1px solid #006060 !important; 
	-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
	-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
margin-bottom:15px;
}
#perustieto td {
	padding: 5px ;
	background:#fff;
	vertical-align:top;
	border: 1px solid #006060 !important; 
	-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
	-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
 font: 11px/1.6em 'Fauna One', sans-serif;
    color: #586937;
    letter-spacing: 1px;
    text-transform: none;
padding:10px;
}
#perustieto tr td:first-child, #perustieto tr td:nth-child(3) {
	width:20%;
	font-size:10pt;
	color:#120f0a;
	background:#d9e0d2;
	border-bottom: 1px solid #006060 ;
	border-top: 1px solid #006060 ;
	border-right: 2px solid #006060 ;
	border-left: 2px solid #006060 ;
-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
	-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);	
 font: 11px/1.6em 'Fauna One', sans-serif;
    color: #586937;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}

.sticky {
  -webkit-box-shadow: #DDD 0px 1px 2px;
  position: relative;
  background-color: #F4F39E;
  border-color: #DEE184;
  color: #47576B;
  text-align: center;
  margin: 2.5em 0px;
  padding: 1.5em 1em;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  width: 250px;
  font-family: 'Indie Flower', cursive;
  font-family: 'Give You Glory', cursive;
  font-family: 'The Girl Next Door', cursive;
  font-family: 'Gloria Hallelujah', cursive;
}
.post-it {
  display: table;
  margin: 5em auto 0;  
}
.taped {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.sticky.taped:after {
  display: block;
  content: "";
  position: absolute; 
  width: 110px;
  height: 30px;
  top: -21px;
  left: 30%;    
  border: 1px solid #fff;
  background: rgba(254, 254, 254, .6);
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  box-shadow: 0px 0 3px rgba(0,0,0,0.1);  
}

.note { 
-webkit-box-shadow: #DDD 0px 1px 2px;
  position: relative;
  background-color: #F4F39E;
  border-color: #DEE184;
  text-align: center;
  margin: 1.5em auto;
  padding: 1.5em 1em;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
  width: 250px;
  font-family: 'The Girl Next Door', cursive; /*originally with brain flower font*/
  font-size: 1em;
}
.note:after {
  display: block;
  content: "";
  position: absolute; 
  width: 110px;
  height: 30px;
  top: -21px;
  left: 30%;    
  border: 1px solid #fff;
  background: rgba(254, 254, 254, .6);
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  box-shadow: 0px 0 3px rgba(0,0,0,0.1);  
}