@import url(https://fonts.googleapis.com/css?family=Notable|Exo);

html {
  -webkit-text-size-adjust:none;
}

body {
	background: url(https://i.ibb.co/hRbkf4Vr/bg.png) #EEE;
	background-attachment: fixed;
	background-size: cover;
	background-position: bottom center;
	margin: 0;
}

div,td,pre {
	font-family: 'Exo';
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	color: #707070;
	text-shadow: 2px 1px 7px #FFF;
	line-height: 1.6;
	text-align:justify;
}
#wrapper {
	width: 1000px;
	position: relative;
	min-height: 100%;
	margin: 0 auto;
	margin-bottom: 30px;
}

#otsikko {
	font-family: 'Notable';
	font-size: 80px;
	font-weight: normal;
	color: #B78C87;
	text-align: center;
	text-shadow: 0px 0px 7px #FFF;
	margin: 10px 0 -5px 0;
	letter-spacing: 3px;
}

#content {
	background-color: rgba(255, 255, 255, 0.4); 
	border: solid #FFF 5px;
	padding: 5px 30px 5px 30px;
	border-radius: 10px;
}

#footer {
	font-family: 'Exo';
	font-size: 14px;
	font-weight: normal;
	text-transform:uppercase;
	color: #B78C87;
	text-align: center;
	text-shadow: 0px 0px 7px #FFF;
	margin: -15px 0 10px 0;
	letter-spacing: 1px;
	line-height: 1.7;
}

a:link, A:visited, A:active { color: #B78C87; text-decoration: none; text-shadow: 2px 1px 7px #EEE; }
a:hover { color: #C8A7A4; text-decoration: none; }

#perus a:link, #perus a:visited, #perus a:active { color: #EEE; text-decoration: none; text-shadow: 2px 1px 7px #535353; }
#perus a:hover { color: #B77783; text-decoration: none; }

#perus { width: 990px; 	background-color: rgba(183, 140, 135, 0.5);  margin: -5px -30px 0 -30px; border-radius: 7px 7px 0 0; border-bottom: solid #FFF 5px; }
#perus td { padding: 5px 10px; }

.kysymys { font-family: 'Notable'; width: 240px; text-shadow: 2px 1px 7px #535353; color: #F0E9E8;  text-transform:uppercase;  letter-spacing: 1px; }

.vastaus { width: 230px; font-weight: normal; }

.ylakuva { width: 460px; height: 400px; border-radius: 7px 0 0 0; margin: -7px 0 -15px -12px; border-right: solid #FFF 1px; }

.galleria { text-align:center; }
.galleria img { margin: 5px; border-radius: 10px; border: solid #FFF 1px; }


.meriitit { text-align:center; margin: 20px 0 10px 0; }

.meriitit a:link, .meriitit a:active, .meriitit a:visited { background-color: rgba(255, 255, 255, 0.4);  border: solid #FFF 1px; border-radius: 10px; padding: 10px 15px; margin: 0 10px; }


.suku { width: 100%; border-collapse:collapse; }
.suku td { width: 33%; padding: 10px 20px; }
.suku small { color: #C8A7A4; font-style:italic; }

.pkk { width: 100%; border-collapse:collapse; }
.pkk td { padding: 10px; border-bottom: solid #DDCAC8 1px; }
.pkk img { width: 95%; border-radius: 10px; border: solid #FFF 1px; }

.hr { text-align:center; font-size: 18px; color: #C8A7A4; word-spacing: 10px; }

strong, b { color: #B78C87; }


.spoileri:not(a) {
    display:none; /* ÃĪlÃĪ muuta tÃĪtÃĪ, tai muuten div ei oletuksena ole piilossa. */
}
                
a.spoileri { font-family: 'Notable'; font-size: 20px; font-weight: normal; color: #B78C87; text-align: left; text-shadow: 0px 0px 7px #FFF; margin: 10px 0 -5px 30px; letter-spacing: 3px; }

a.spoileri:hover {
    cursor:pointer;
    color:#C8A7A4; /* linkin hover-vÃĪri, voit muuttaa tai poistaa */
}


::-webkit-scrollbar { width: 7px; height: 3px; }
::-webkit-scrollbar-button { width: 0px; height: 0px; }
::-webkit-scrollbar-thumb { background: #C1C1C1; border: 0px dotted #ffffff; border-radius: 50px; }
::-webkit-scrollbar-thumb:hover { background: #A8A8A8; }
::-webkit-scrollbar-thumb:active { background: #A8A8A8; }
::-webkit-scrollbar-track { background: #F1F1F5; border: 0px none #ffffff; border-radius: 50px; }
::-webkit-scrollbar-track:hover { background: #F1F1F5; }
::-webkit-scrollbar-track:active { background: #F1F1F5; }
::-webkit-scrollbar-corner { background: transparent; }