@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC&family=Roboto&family=Source+Serif+Pro:ital,wght@0,300;0,400;1,300&family=Elsie&family=Alex+Brush&display=swap');

body {
	margin:0;
	font-family:'Verdana',serif;
	color:#81a1cc;
	text-shadow:1px 1px 2px #222;
	font-size:12px;
	line-height:1.65;
	background-color: #1b3057;
background-image: url("https://www.transparenttextures.com/patterns/60-lines.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
    text-align:justify;
}

a {color:#a1c9f8; text-decoration:none; font-weight:bold;}
a:hover {color:#a1c9f8;text-decoration:underline;}

* {
    box-sizing:border-box;
}

:root {
    --leveys:1080px;
}
p {
    margin:22px 0;
}
hr {
    margin:10px 0;
}

/* ------------------------------- PERUSJUTUT ------------------------------- */

.otsikko {
    margin:0 auto;
    padding:0 60px;
    width:var(--leveys);
    background-image:url('https://lasikuu.net/fellbury/k/10otsc.png');
    height:250px;
    position:relative;
}
.otsikko .paakuva {
    position:absolute;
    bottom:0;
    right:40px;
}
.otsikko-teksti {
    position:absolute;
    top:75px;
    font-family: 'Elsie', serif;
    font-weight:bold;
    color:#b5c7e8;
    letter-spacing:1.5px;
    font-size:380%;
    text-shadow:1px 2px 2px #222;
    
}
.otsikko-alateksti {
    position:absolute;
    top:134px;
    left:75px;
    color:rgba(181,199,232,0.7);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    text-shadow:1px 2px 2px #222;
    
}
.linkkipalkki {
    margin:0 auto;
    width:100%;
    text-align:center;
    height:46px;
    line-height:46px;
    background-color:;
  background-image: linear-gradient(#436dba, #2e5294);
  box-shadow:1px 1px 3px #222;
    
}
.linkkipalkki a {
    margin:0 25px;
    color:#a2bbeb;
    text-shadow:1px 1px 2px #333;
    text-decoration:none;
    font-weight:normal;
}
.linkkipalkki a:hover {
    text-decoration:none;
    text-shadow:2px 2px 3px #222;
}
.wrapper {
    margin:0px auto 60px auto;
    width:var(--leveys);
  box-shadow:1px 1px 3px #111;
  border-radius:3px;
    
}
.sisalto {
    margin:0px auto;
    width:100%;
    padding:30px 60px 40px 60px;
	background-color: rgba(33, 59, 107,0.9);
background-image: url("https://www.transparenttextures.com/patterns/black-mamba.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}
.footer {
    margin:-22px auto 0 auto;
    width:100%;
    text-align:center;
    padding:0 30px;
    font-family: 'Elsie', serif;
    font-size:14px;
    height:46px;
    line-height:46px;
    color:#8ea7d4;
  background-image: linear-gradient(#03274f, #001b39);
    text-shadow:1px 1px 2px #222;
    border-radius: 0 0 3px 3px;
}
.footer a {
    font-weight:bold;
    color:#fff;
	text-shadow:1px 1px 1px #111;
}



.sisalto-palkki {
    margin:0px;
    width:100%;
    padding:6px 30px;
    font-size:20px;
    color:#8ea7d4;
    letter-spacing:1px;
  background-image: linear-gradient(#03274f, #001b39);
    text-shadow:1px 1px 2px #222;
    border-radius: 3px 3px 0 0;
    
}
.sisalto-palkki h1 {
    text-align:left;
    margin:0px;
    padding:5px;
    font-family: 'Elsie', serif;
    font-size:22px;
    font-weight:600;
}

/* -------------------- PONILISTA -------------------- */

.ponilista {
    width:100%;
    margin:20px auto;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    line-height:1.6;
    row-gap:20px;
    column-gap:20px;
    padding:20px 0px 10px 30px;
}
.ponilista-item {
    width:200px;
}
.ponilista-item a {
}
.ponilista-item a:hover {
}
.ponilista-item img {
    border-radius:3px;
    margin-bottom:-5px;
}
.ponilista-item img:hover {
    opacity:0.9;
    transition: .1s ease-in;
}
.ponilista-meriitit a {
}
.ponilista-item p {
    margin:2px 0px;
    border-radius:3px;
    padding:3px 8px;
}
.eka-rivi {
    background-color:#2e4d8a;
    font-size:11.5px;
}
.toka-rivi {
	background-color: #1a2f58;
	font-size:11px;
    
}
.toka-rivi img {
    float:right;
    padding:3px;
    box-shadow:none;
}
.suku {
    float:right;
    background-image:url('https://lasikuu.net/fellbury/k/10suku.png');
    background-position: right;
    background-repeat: no-repeat;
    width:35px;
    font-weight:bold;
}
.kolmas-rivi {
	font-size:11px;
    
}


/* -------------------------------- PONISIVU  ----------------------------------- */

.meriitit {
    float:right;
    padding:0;
    color:#1a426e;
    font-size:20px;
}
.meriitit a {
    color:#1a426e;
}
.ptflex {
    width:100%;
    margin:20px auto 30px auto;
    display:flex;
    padding:0 30px;
  align-items: center;
}
.ptflex-item:first-child {
    flex:25%;
}
.ptflex-item:first-child img {
    box-shadow:1px 1px 3px #333;
    border-radius:5px;    
}
.ptflex-item:last-child {
    flex:75%;
}

.pt {
    margin:20px auto;
	width: 100%; 
	border-spacing: 3px;
	border-collapse: collapse; 
	text-align:left;
    border-top:1px solid #44587b;
}
.kys, .vas {
    border-bottom:1px solid #44587b;
}
.kys {
    width:35%;
	padding:5px 20px;
/*background: rgb(223,215,203);
background: linear-gradient(0deg, rgba(223,215,203,1) 0%, rgba(233,225,214,1) 100%);*/
    border-radius:3px;
    font-family: 'Elsie', serif;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  text-align:right;
}
.vas {
	padding:5px 8px;
	padding-left: 10px;
}
.geno {
    padding:0 2px;
    color:#a1c9f8;
    font-size:11px;
    font-style:italic;
}

.sukutaulu {
    width:100%;
    margin:20px auto 30px auto;
}
.sukutaulu td {
  background-image: linear-gradient(#03274f, #001b39);
  border-radius:3px;
  line-height:1.3;
    text-align:center;
    padding:8px;
}
.info {
    margin:0 2px;
    border-radius:3px;
    padding:2px 4px;
	background-color: rgba(33, 59, 107,0.9);
	font-size:10px;
	color:#fefefe;
	text-transform:uppercase;
}
.lista {
    width:100%;
    margin:20px auto 30px auto;
    border-collapse:collapse;
}
.lista th, .lista td {
    padding:4px;
}
.lista th {
  background-image: linear-gradient(#03274f, #001b39);
    
}
.lista td {
    border-bottom:1px solid #44587b;
}

.boksi {
    width:100%;
    margin:20px auto;
    display:flex;
}
.boksi-item {
    flex:1;
}

/* -------------------------------- REUNAT  ----------------------------------- */

.reunat {
    margin:0px 10px 25px 10px;
    border:3px double #7d634a;
    border-radius:2px;
    box-shadow:3px 3px 3px #ccc;
}
.isokuva {
    margin:20px 10px 0px 10px;
    box-shadow:1px 1px 3px #333;
    border-radius:5px;    
}
.kuvaoik {
    float:right;
    margin:0px 0px 25px 30px;
    border-radius:5px;    
    box-shadow:1px 1px 3px #333;
}
.kg {
    margin:0px 10px;
    box-shadow:1px 1px 3px #333;
    border-radius:5px;    
}
.kg:hover {
    opacity:0.9;
    transition: .1s ease-in;
}

/* -------------------------------- HOOT  ----------------------------------- */

h1 {
    text-align:center;
    font-family: 'Elsie', serif;
    font-size:30px;
    font-weight:600;
    letter-spacing:1px;
}
h2 {
    margin:19px;
    font-family: 'Elsie', serif;
    font-size:22px;
    letter-spacing:1px;
}
h3 {
    font-size:13.5px;
}


/* -------------------- HOVER INFO -------------------- */

.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip .tooltiptext {
    visibility: hidden;
    min-width:150px;
    font-size:12px;
    line-height:1.3;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
}

.tooltiptext {
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}



/* -------------------------------- SCROLLBAR  ----------------------------------- */
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
	background-color: #1b3057;
background-image: url("https://www.transparenttextures.com/patterns/60-lines.png");
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #2e5294;  
}

::-webkit-scrollbar-thumb:hover {
    background:#81a1cc;  
}