#contents table {
background-color: #f8f7e2;
margin-left: auto;
margin-right: auto;
font-family: "Microsoft sans serif", Arial, Verdana, sans-serif;
border-style: ridge;
border-color: black;
border-width: 2px;
padding: 0;
font-size: 0.8em;
border-collapse: collapse;
margin-top: 1em;
margin-bottom: 1em;
}

#contents td {
vertical-align: top;
padding: 0.2em;
border-style: solid;
border-color: #736e5f;
border-width: 1px;
}

#contents th {
background-image: url(dark-marble-temple-texture.jpg);
color: #D9D919;
font-size: 1.2em;
padding: 0.1em 0.4em 0.2em 0.5em;
white-space: nowrap;
vertical-align: top;
}


textarea {
font-family: "Microsoft sans serif", Arial, Verdana, sans-serif;
background-image: url(verylight-marble-temple-texture.jpg);
background-attachment: scroll;
border-width: 2px;
border-style: inset;
}


div.oracleimg {
height: auto;
width: 14em;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 0;
padding: 0.05em;
}

img.oracle {
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
font-size: 0;
border-width: 3px;
border-style: ridge;
border-color: #8C7853;
}


p.kysymys {
font-family: "Garamond", "Goudy Old Style", "Bookman Old Style", "Times New Roman", serif;
color: #f3f389;
color: black;
text-align: center;
padding:0;
margin: 0.5em 1em 1em 1em;
font-weight: 550;
}
 
p.vastaus {
font-family: "Garamond", "Goudy Old Style", "Bookman Old Style", "Times New Roman", serif;
color: #f3f389;
color: black;
text-align: center;
padding:0;
margin: 0.5em 1em 0em 1em;
font-weight: 550;
}

p.prompt {
padding-top: 0;
margin-top: 0;
margin-bottom: 0.2em;
font-size: 1.0em;
text-align: center;
}
p.kuvacopyright {
	font-family: "Microsoft sans serif", Arial, Verdana, sans-serif;
	text-align: center;
	font-size: 0.6em;
	padding-top: 0;
	margin-top: 0;
}

.pieniteksti {
font-family: "Microsoft sans serif", Arial, Verdana, sans-serif;
font-size: 0.6em;
margin-left: auto;
margin-right: auto;
text-align: left;
color: black;
color:#401b09;
}
 
div.kysymyslaatikko {
margin: 0 auto 0 auto;
text-align: center;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

div.kysymyslaatikko input[type="text"] {
max-width: 100%;
box-sizing: border-box;
}

div.oraakkeli {
	position: relative;
	background-image: url(ancient-marble-temple-texture.jpg);
	margin: 1.5em auto 2em auto;
	max-width: 403px;
	width: 90%;
	font-size: 1.2em;
	padding: 0.8em;
	border-color: black;
	border-style: inset;
	border-width: 2px;
	color: black;
	vertical-align: middle;
	box-sizing: border-box;
}

#contents input {
margin-top: 0.2em;
margin-bottom: 0.2em;
background-image: url(verylight-marble-temple-texture.jpg);
background-attachment: scroll;
}

body {
        font-family: "Garamond", "Goudy Old Style", "Bookman Old Style", "Times New Roman", serif;
        background: white url(light-marble-temple-texture.jpg) repeat;
	font-size: 1.25em;
	margin: 0;
	padding: 1em;
}

#contents {
        font-family: "Garamond", "Goudy Old Style", "Bookman Old Style", "Times New Roman", serif;
        background: white url(light-marble-temple-texture.jpg) repeat;
	font-size: 1.25em;
}

div.navigation {
	font-family: "Microsoft sans serif", Arial, Verdana, sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	margin: 0.6em auto 1.6em auto;
	text-align: center;
	padding: 0.5em;
	background-image: url(ancient-marble-temple-texture.jpg);
	border: 2px inset black;
	max-width: 90%;
}

div.navigation a {
	color: black;
	text-decoration: none;
	padding: 0.3em 0.5em;
}

div.navigation a:hover {
	color: #f8f7e2;
	background-color: #401b09;
}

a.nappi:link {
border-style: inset;
background-image: url(verylight-marble-temple-texture.jpg);
color: black;
-moz-border-radius: 0.3em;
padding: 0.2em 0.4em 0.2em 0.4em;
border-width: 1px;
text-decoration: none;
border-style: outset;
}
        
a.nappi:visited {
border-style: inset;
background-image: url(verylight-marble-temple-texture.jpg);
color: black;
-moz-border-radius: 0.3em;
padding: 0.2em 0.4em 0.2em 0.4em;
border-width: 1px;
text-decoration: none;
border-style: outset;
}
    
a.nappi:hover {
background-image: url(ancient-marble-temple-texture.jpg);
color: black;
-moz-border-radius: 0.3em;
padding: 0.2em 0.4em 0.2em 0.4em;
border-width: 1px;
 
text-decoration: none;
border-style: inset;
}

a.nappi:active {
background-image: url(dark-marble-temple-texture.jpg);
color: #D9D919;
-moz-border-radius: 0.3em;
padding: 0.2em 0.4em 0.2em 0.4em;
border-width: 1px;
text-decoration: none;
border-style: inset;
}

span.nappipohjassa {
background-image: url(dark-marble-temple-texture.jpg);
color: white;
-moz-border-radius: 0.3em;
padding: 0.2em 0.4em 0.2em 0.4em;
border-width: 1px;
        
text-decoration: none;
border-style: inset;
}

div.teksti {
background-color: #f8f7e2;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 2em;
padding: 1.0em;
border-color: black;
border-style: inset;
border-width: 1px;
color: black;
-moz-border-radius: 0.2em;
}

div.alanavigointi  {
font-family: "Microsoft sans serif", Arial, Verdana, sans-serif;
font-size: 0.7em;
font-weight: bold;
margin: 0.6em 0.6em 1.6em 0.6em;
text-align: center;
padding:0;
}

/* Mobile responsive styles */
@media only screen and (max-width: 600px) {
	body {
		font-size: 1em;
		padding: 0.5em;
	}

	div.oraakkeli {
		width: 95%;
		padding: 0.5em;
		margin: 1em auto;
		font-size: 1em;
	}

	div.kysymyslaatikko {
		width: 100%;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		align-items: stretch;
	}

	div.kysymyslaatikko input[type="text"] {
		width: 100%;
		max-width: 100%;
		font-size: 1em !important;
		box-sizing: border-box;
		padding: 0.5em;
	}

	div.kysymyslaatikko button {
		width: 100%;
		font-size: 1em;
		padding: 0.5em 1em;
		box-sizing: border-box;
	}

	div.oracleimg {
		width: 100%;
		max-width: 300px;
	}

	img.oracle {
		width: 100%;
		height: auto;
	}

	p.kysymys, p.vastaus {
		margin: 0.5em 0.5em;
		font-size: 1em;
	}

	div.navigation {
		font-size: 0.9em;
		max-width: 95%;
	}

	div.teksti {
		width: 95%;
		padding: 0.5em;
	}

	h1 {
		font-size: 1.3em;
		white-space: normal;
	}
}