/* PERUSJUTUT */

body {
    background-color:#f9f9f9;
font-family: 'Raleway', sans-serif;
    color:#333;
    font-size:1em;
    line-height:1.7;
}
body a {
    color:#749198;
}
body a:hover {
    text-decoration:none;
}
h1 {
    font-family:'Arapey',serif;
    color:#fff;
    text-shadow:1px 1px 3px #aaaaaa;
    line-height:1;
    text-align:center;
    font-weight:normal;
    font-style:italic;
}
h1 a {
    opacity:0.8;
    color:#fff;
}
h1 a:hover {
    opacity:1;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}
h3 {
    text-indent:0px;
    margin:0 0 40px 0;
    color:#222;
    font-family:'Arapey',serif;
    font-style:italic;
    font-size:1.8em;
    text-align:center;
    padding-bottom:10px;
    text-shadow: 1px 1px 3px #eaeaea;
    font-weight:normal;
    border-bottom:1px solid #dadada;
}
h4 {
    text-indent:0px;
    margin:0 0 40px 0;
    color:#222;
    font-family:'Arapey',serif;
    font-style:italic;
    font-size:1.8em;
    text-align:center;
    padding-bottom:10px;
    padding-top:40px;
    text-shadow: 1px 1px 3px #eaeaea;
    font-weight:normal;
    border-bottom:1px solid #dadada;
}
h5 {
    text-indent:0px;
    margin:-40px 0 40px 0;
    color:#222;
    font-family:'Arapey',serif;
    font-style:italic;
    font-size:1.2em;
    text-align:center;
    padding-bottom:10px;
    padding-top:40px;
    text-shadow: 1px 1px 3px #bababa;
    font-weight:normal;
    border-bottom:1px solid #eaeaea;
}
.logo {
	padding:5px;
	background-color:white;
	border:1px solid #dadada;
	margin-bottom:10px;
	border-radius:50%;
}

/* TÄBSIT */

.tab {
    overflow: hidden;
    align:center;
    margin-top:40px;
}
.tab button {
    background-color:inherit;
    border:1px solid #cacaca;
    cursor:hand;
    padding: 10px 30px;
    transition: 0.3s;
    font-size: 1.3em;
    text-shadow: 1px 1px 3px #dadada;
    font-family:'Arapey',serif;
    font-style:italic;
    color:#333;
    margin:2px 10px 2px 10px;
    border-radius:25px;
}
.tab button:hover {
    border:1px solid #aaaaaa;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    -moz-box-shadow: 0 0 2px #f1f1f1;
	-webkit-box-shadow: 0 0 2px #f1f1f1;
	box-shadow: 0 0 2px #f1f1f1;
	background-color:#fff;
}
.tab button.active {
    background-color: #f9f9f9;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
    margin-top:30px;
}
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
.topright {
    float: right;
    cursor: pointer;
    font-size: 28px;
}
.topright:hover {
    color: red;
}
    
/* KUVAT */

.profiilikuva {
    padding:10px;
    background-color:#fff;
    border:1px solid #cacaca;
    border-radius:8px;
    -moz-box-shadow: 0 0 5px #fefefe;
	-webkit-box-shadow: 0 0 5px #fefefe;
	box-shadow: 0 0 5px #fefefe;
}
.profiilikuva:hover {
	opacity:0.9;
	-webkit-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in;  
}
.isoreuna {
	margin:5px;
	padding:8px;
	background-color: #fff;
    border: 1px solid #dadada;
	-moz-box-shadow: 0 0 5px #fff
	-webkit-box-shadow: 0 0 5px #fff;
	box-shadow: 0 0 5px #fff;
	border-radius: 5px;
}
.isoreuna:hover {
	opacity:0.9;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    -moz-box-shadow: 0 0 2px #f1f1f1;
	-webkit-box-shadow: 0 0 2px #f1f1f1;
	box-shadow: 0 0 2px #f1f1f1;
}

/* PONIN SIVUT */

.ponilista {
    font-size:10.5pt;
}
.ponilista img {
    border-radius:50%;
    height:145px;
	margin:6px;
	padding:5px;
	background-color: #fff;
    border: 1px solid #dadada;
	-moz-box-shadow: 0 0 5px #fff
	-webkit-box-shadow: 0 0 5px #fff;
	box-shadow: 0 0 5px #fff;
}
.ponilista img:hover {
	opacity:0.9;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    -moz-box-shadow: 0 0 2px #f1f1f1;
	-webkit-box-shadow: 0 0 2px #f1f1f1;
	box-shadow: 0 0 2px #f1f1f1;    
}
.ponilista2 {
    font-size:10.5pt;
}
.ponilista2 a {
    font-weight:bold;
    text-decoration:none;
}
.ponilista2 img {
    border-radius:4%;
    height:130px;
	margin:6px;
	padding:5px;
	background-color: #fff;
    border: 1px solid #dadada;
	-moz-box-shadow: 0 0 5px #fff
	-webkit-box-shadow: 0 0 5px #fff;
	box-shadow: 0 0 5px #fff;
}
.ponilista2 img:hover {
	opacity:0.9;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    -moz-box-shadow: 0 0 2px #f1f1f1;
	-webkit-box-shadow: 0 0 2px #f1f1f1;
	box-shadow: 0 0 2px #f1f1f1;    
}
.bio {
    font-family:'Lora',serif;
    font-style:italic;
    font-size:1.2em;
    line-height:1.2;
    color:#555;
    margin:0 0 30px 10px;
    width:70%;
    text-shadow:1px 1px 3px #f9f9f9;
}
.tiedot {
    margin-left:40px;
    font-size:11pt;
}
.meriitti {
    font-size:0.7em;
    margin:0 8px 0 8px;
    font-style:normal;
}
table, td, th {
    border: 1px solid #dadada;
    padding:1.4% 1.8%;
    overflow:visible;
    word-break: break-word;
    font-size:0.95em;
}
#sukutaulu {
    border-collapse: collapse;
    width:100%;
    background-color:#f9f9f9;
    /*
    -moz-box-shadow:    inset 0 0 12px #f1f1f1;
    -webkit-box-shadow: inset 0 0 12px #f1f1f1;
    box-shadow:         inset 0 0 12px #f1f1f1;
    */
    line-height:1.3;
}
#sukutaulu a {
    text-decoration:none;
    font-weight:bold;
}
.valkka {
    padding-left:40px;
}
.oik {
    margin-right:0;
}
.kauno {
    font-family:'Parisienne';
    font-size:1.6em;
    text-shadow: 1px 1px 3px #eaeaea;
}

.kauno2 {
    font-family:'Parisienne';
    font-size:1.5em;
    text-shadow: 1px 1px 3px #eaeaea;
    margin-top:0;
    margin-bottom:0px;
}
#kalenteri {
    width:100%;
    border:0;
    border-collapse:collapse;
    overflow-x:auto;
    background-color:#fff;
    border-bottom:1px solid gray;
}
.futsku {
    margin:auto;
    font-size:0.9em;
    color:#555;
  line-height:1.5;
}
.reunat {
    padding:0 15px 0 15px;
}






/* TOPNAV */

.topnav {
  overflow: hidden;
  background-color: #fff;
  border-bottom:1px solid #dadada;
}

.topnav a {
  float: left;
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  font-family:'Arapey',serif;
  font-weight:normal;
  font-style:italic;
  font-size: 1.2em;
  text-decoration:none;
  width:20%;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  width:20%;
}

.dropdown .dropbtn {
  font-family:'Arapey',serif;
  font-weight:normal;
  font-style:italic;
  font-size: 1.2em;
  color:#666;
  text-decoration:none;  
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0;
  width:100%;
  text-transform:capitalize;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  border:1px solid #dadada;
  z-index: 1;
  width:20%;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  width:100%;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #f7f7f7;
	-webkit-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; 
}

.dropdown-content a:hover {
  background-color: #fafafa;
  color: black;
	-webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; 
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
    background-color:#fff;
    width:100%;
  }
  .topnav a.icon {
    float: right;
    display: block;
    background-color:#fff;
    margin-top:-56px;
    font-style:normal;
    width:10%;
  }
  .dropdown {
  float: left;
  overflow: hidden;
  width:100%;
    }
.dropdown-content {
  width:100%;
}
.topnav a {
    width:100%;
}
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    font-style:normal;
    right: 0;
    top: 56px;
    float:right;
    text-align:center;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}