/*VÄRIMAAILMA
https://colorpalettes.net/color-palette-4198/
https://colorpalettes.net/color-palette-3848/
*/
      
      
@import url('https://fonts.googleapis.com/css2?family=News+Cycle&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Meddon&display=swap');

      body {
        margin: 0 auto;
        background-color: #DDDDDD;
	    font-family: 'News Cycle', sans-serif;
        height: 100%;
        color: #22272c;
      }
      
      #palkki {
        width: 300px;
        height: 100%;
        min-height: 100%;
        background-color: #597387;
        float: left;
        border-right: 1px solid #2a4158;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        color: #DBE6FD;
        padding: 10px;
      }
      
      #palkki a {
        color: #2a4158;
        text-decoration: none;
      }
      
      .copy {
        position: absolute;
        font-size: 13px;
        color:#2a4158;
        bottom: 0;
        width: 280px;
        text-align: center;
      }
      
      #palkki a {
        border: 0;
      }
      #palkki h1 {
        margin-top: 120px;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
        width: 100%;
        text-align: center;
    	font-family: 'Meddon', cursive;
        font-weight: lighter;
        font-size: 38px;
        color: #f6f8fa;

      }
      
      #palkki h3 {
        margin: 0;
        margin-top: -15px;
        width: 100%;
        text-align: center;
        font-size: 12px;
        color:#2a4158;
        letter-spacing: 2px;
      }
      
      #palkki ul {
        padding: 0;
        margin: 0;
        margin-top: 140px;
        width: 100%;
      }
      
      #palkki ul li {
        list-style: none;
        width: 100%;
        text-align: center;
        font-size: 22px;
        padding: 5px;
      }
      
      #palkki ul li a {
        color: #cfc5bc;
    	font-family: 'Cormorant', serif;
    	font-size:25px;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
        transition: 0.4s;
      }
      
      #palkki ul li a:hover {
        color: #958a56;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
        transition: 0.4s;
      }
      
      h1 {
        color: #597387;
        font-size: 35px;
    	font-family: 'Meddon', cursive;
        margin: 0;
        margin-bottom: 10px;
      }
      
      h2 {
    	font-family: 'Cormorant', serif;
        color: #958a56;
        margin: 0;
        margin-top: 25px;
        margin-bottom: 10px;
      }

      h3 {
        font-weight: bold;
        color: #2a4158;
        margin: 0;
        margin-bottom: 10px;
      }
    
      #sisalto {
        height: 100%;
        min-height: 100%;
        margin-left: 300px;
        width: calc(100% - 300px);
        float: left;
        display: flex;
        flex-direction: column;
      }
      
      section {
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
      }
      
      article {
        width: 90%;
        max-width: 1000px;
        text-align: justify;
        padding: 20px;
        margin: 20px;
      }
      
      .clear {
        clear: both;
      }
      
      .koriste {
        margin: 5px 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        border: 5px solid #fff;
      }
      
      .left {
        float: left;
      }
      
      .right {
        float: right;
      }
      
      
      a {
        color: #958a56;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
        text-decoration: none;
      }
      
      a:hover {
        color: #2a4158;
        transition: 0.4s;
      }
      
      
      
/* LOOTAT */

.varitonloota {
	width: 100%;
	margin: 0 0;
	border-collapse:collapse;
}
.varitonloota td{
	padding: 4px 8px;
	vertical-align:top;
}
.listaloota {
	width: 100%;
	margin: 0 0;
	border-collapse:collapse;
}
.listaloota td{
	padding: 4px 8px;
	vertical-align:top;
	border-bottom:1px solid #59797d;
}
.infoloota {
    background:#d1d0cc;
	width: 100%;
	border-color:#597387;
	margin: 0 0;
	border-collapse:collapse;
}
.infoloota td{
	padding: 4px 8px;
	vertical-align:top;
}

/* HEVOSET */


#sukutaulu {
	width:100%;
	border-collapse:collapse;
}
#perustiedot, .periyt {
	width:100%;
	border-collapse:collapse;
	background:#d1d0cc;
}
#perustiedot td, #sukutaulu td, .periyt td {
	padding: 5px 15px;
	width:25%;
	font-family: 'News Cycle', sans-serif;
}

#sukutaulu td {
	border-bottom:1px solid #2a4158;
	padding: 5px 15px;
	width:33%;
	font-family: 'News Cycle', sans-serif;
}

#perustiedot td:first-child, #perustiedot td:nth-child(3), .periyt td:first-child, .periyt td:nth-child(3) {
	text-transform:uppercase;
	font-family: 'Cormorant', serif;
	letter-spacing:3px;
	font-size:10pt;
	width:20%;
}

#sukutaulu em {font-size:14px;}
#sukutaulu small {color:#22272c;}
.ero {background:#d1d0cc;}

#sukutaulu4 {
	width: 100%;
	border-collapse:collapse;
}
#sukutaulu4 td {
	border-bottom:1px solid #59797d;
	padding: 5px 15px;
	width:25%;
	font-family: 'News Cycle', sans-serif;
}
#sukutaulu4 em {font-size:14px;}
#sukutaulu4 small {color:#22272c;}
.ero {background:#d1d0cc;}

progress {
    accent-color:#958a56;
}