@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Merriweather:400,700i|Roboto');

@import url('https://fonts.googleapis.com/css?family=Allura');


/* ***** LINKIT ***** */
a {
	color:#3e8c9a;
	transition:.3s;
}
a:hover  {
	color:#333;
	text-decoration:none;
}
a:visited  {
	color:#aaa;
}

/* ***** RAKENNE ***** */

html, body {
	height:100%;
}
body {
	margin:0;
	font-size:10pt;
	font-family: arial, sans-serif;
	background: #919191 url(taustakuva.png); 
	line-height:1.5;
}
#ylapalkki {
	width:100%;
	height:30px;
	position:fixed;top:0;left:0;
	background:#000;
	z-index:1000;
}
#ylasis {
	width: 75%;
	padding: 5px 0;
	text-align:right;
	color:#fff;
}

#linkkipalkki {
	width:15%;
	height:100%;
	height: auto !important;
	min-height:100%;
	background: transparent;
	position:fixed;top:0;left:1%;
	z-index:100;
}
#main {
	width:60%;
	height:100%;
	height: auto !important;
	min-height:100%;
	background:#fafafa url(ylakuva.png) no-repeat top;
	background-size: 100% auto;
	position:absolute;left:16%;top:0;
	z-index:10;
}
/* rakenne jos näytön koko on kovin pieni, sisällön ja navigaation leveys muuttuu */
@media (max-width:960px) { 
#main {
	width:75%;
	position:absolute;left:25%;top:0;
	} 
#linkkipalkki {
	width:24%;
	} 
#ylasis {
	width:98%;
	} 
}

/**** NAVIGAATIO ****/
#navots {
	font-family: 'Dancing Script', cursive;
	font-size:20pt;
	color:#aaa;
	text-align:center;
	margin:50px 0 20px 0;
}
#nav {
	list-style:none;
	margin:0;
	padding:0;
	margin-left:1px;
}
#nav li {
	margin: 0 0;
}
#nav a {
	text-decoration:none;
	font-style:bold;
	font-size:15px;
	padding: 10px 25px;
	font-family: 'Allura', cursive;
	display:block;
	border:1px solid #111;
	margin:10px;
	color:#aaa;
	transition:.4s;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;	
	background:#000;
}
#nav a:hover {
	color:#c3e3e9;
	background:#71adb8;
	border:1px solid #245861;
}

#copyt {
	padding:30px 0;
	text-align:center;
	font-family: 'Roboto', sans-serif;
	font-size:8pt;
	color:#888;
}

/**** SISÄLTÖ ****/

#header {
	text-align:right;
	padding-top:220px;
	padding-right:100px;
	font-family: 'Allura', cursive;
	font-size:60pt;
	text-shadow: 30px 30px 20px rgba(150, 150, 150, 1);
}
#sisalto {
	padding:10px 50px;
	text-align:justify;
	line-height:1.5;
	font-family: 'Roboto', sans-serif;
	font-size:10.5pt;
}
h1 {
	font-style:italic;
	font-family: 'Merriweather', serif;
	font-size:18pt;
}
h2 {
	font-style:italic;
	font-family: 'Merriweather', serif;
	font-size:12pt;
	color:#71adb8;
}