@import url('https://fonts.googleapis.com/css?family=Crimson+Text|Roboto|Roboto+Condensed');

	body, html {
		height: 100%;
	    background-color: rgb(216,228,255); 
	}
		   
	ul.navbar-nav {
		font-family: "Roboto";
		font-size: 13pt;
	}
	   
	main { background-color: rgb(216,228,255);
		width: 100%;
		min-width: 150px;
		}
		
	.navigointi { width: 60%; 
				  margin: auto;
				  margin-top: 0px;
				  }

	header {
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)), url("berliini1.jpg");
		height: 60%;
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		position: relative;
	}
		
	.nimi { font-family: "Roboto";
			padding: 1% 0 0 3%;
			font-size: 2.5em;
			color: white;
			text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
			}
			
	.slogan { font-family: "Roboto";
			padding: 0 1% 1% 3%;
			font-style: italic;
			font-size: 1.7em;
			color: white;
			text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
			}
		
	h1 { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 2em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		margin-bottom: 1em;
		}
	
	.center	 { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 2em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		margin-bottom: 1em;
		text-align: center;
		font-weight: bold;
		}

	h2 { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 1.6em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		margin-top: 1.2em;
		margin-bottom: 1.2em;
		 }

h2.withborder { padding: 1%;
			font-family: "Roboto Condensed";
			color: white;
			text-shadow: none;
			background-color: rgb(92,186,138);
			text-align: center;
			margin-top: 2.2em;
			}
		 
	h3 { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 1.1em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		margin-top: 1.2em;
		margin-bottom: 1.2em;
		 }
		 
		 
	nav {
		margin-top: 25%;
		text-align: center;
		background-color: rgba(103, 103, 103,0.7);
		}

	article { padding: 3%; }

	article p {
		font-family: "Crimson Text";
		font-size: 1.2em;
		}
		
	article ul {
		font-family: "Crimson Text";
		font-size: 1.2em;
		line-height: 1.5em;
		list-style: none;
		}
		
	article li::before {
	content: "\2022"; 
	color: rgb(63,152,127);
	display: inline-block; 
	width: 1em;
	margin-left: -1.5em;
	font-size: 1.2em;}
		
	article a:link { font-family: inherit;
			color: rgb(68,114,196);
			font-weight: bold;
			text-decoration: none;}
			
	article a:visited { font-family: inherit;
			color: rgb(68,114,196);
			font-weight: bold;
			text-decoration: none;
			}
			
	article a:hover { font-family: inherit;
			color: rgb(68,114,196);
			font-weight: bold;
			text-decoration: none;
			text-shadow: 2px 2px 2px white; }

	.laatikko {display: block;}
			
	.teksti { font-family: "Crimson Text";
			  font-size: 1.2em;}
			  
	.kulmakivet { position: relative;
				  float: left;
				  margin-bottom: 20px;
				  }

	.piilotakuva { padding-left: 0;
				   }
				   
	.piilotakuva img {
			float: left;
			max-width: 100%;
			height: auto;
			margin-bottom: 20px;
			margin-right: 30px;
			}
				   
	footer { padding: 1%;
			font-family: "Roboto Condensed";
			color: white;
			background-color: rgb(92,186,138);
			text-align: center;
			}
			
	footer a:link { 
			font-family: inherit;
			color: white;
			text-decoration: none; }
			
	footer a:visited { 
			font-family: inherit;
			color: white;
			text-decoration: none; }
			
	footer a:hover { 
			font-family: inherit;
			color: white;
			text-decoration: none;
			text-shadow: 2px 2px 2px rgb(69,92,145); }

	.taulukko {
		max-width: 80%;
		margin: auto;
		border-spacing: 10px;
		border-collapse: separate;
		table-layout: fixed;
		}
		
	.solu {
		text-align: center;
		font-family: "Roboto";
		font-size: 1.7em;
		background-color: rgb(92,186,138);
		color: white;
		border:solid none 1px;
		border-radius: 8px;
		padding: 2%;
		overflow: visible;
		box-shadow: 2px 2px 2px rgb(69,92,145);
		width: 50%;
		}
		
	.vali { display: none; }

	.kokosivu { clear: both;
		}

	.solu:hover {
		background-color: rgb(69,92,145);
		}

	.taulukkolinkki:link {
		color: white;
		text-decoration: none;
		text-shadow: none;
		}	
		
	.taulukkolinkki:visited {
		color: white;
		text-decoration: none;
		text-shadow: none;
		}	
		
	.taulukkolinkki:hover {
		color: white;
		text-decoration: none;
		text-shadow: none;
		}	
		
	.taulukkolinkki:active {
		color: white;
		text-decoration: none;
		text-shadow: none;
		}	
		
	@media only screen 
	  and (min-device-width: 300px) 
	  and (-webkit-min-device-pixel-ratio: 2) {

	  h1 { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 2.5em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		 }
		 
	  h1.center { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 2.5em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		font-weight: bold;
		 }
	
	  h2 { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 2.2em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		 }
		 
	  h2.withborder { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 2.2em;
		margin-top: 2.2em;
		border-bottom: 1px solid rgb(69,92,145);
		text-align: center;
		padding-bottom: 5px;
		 }
 
	.navbar-custom {
		 padding:0;
	}

	.navbar-custom .navbar-brand {
		 margin-left: 0;
	}

	.navbar-collapse {
		position: relative;
		padding: 0;
		margin-right: 0;
	}
		 
	.navigointi { width: 90%; }
	 
	main { width: 100%; }
		
	article { padding: 3% 0 3% 0; }
	 
	article p {
		font-family: "Crimson Text";
		font-size: 2.2em;
		}
	article ul {
		font-family: "Crimson Text";
		font-size: 2.2em;
		line-height: 1.5em;
		list-style-position: outside;
		}
		
	   a.active { background-color: rgba(103, 103, 103,0.4); }
		
		.puhnro {display: block;}
		
		.piilota {display: none;}
		
		.taulukko { position: relative;
					left: -15px;
					margin:auto; }
		
		.rivi {display: block;
			   margin-top: 15px;}
					
		.piilotakuva { display: block; }

		}
		
	@media (max-width: 1100px) {	
			
		.taulukko {border-spacing: 20px; }
		
		.solu {	display: block;
				width: 100%;}
				
		.vali { display: block;
				height: 15px;}
				

	}
			
	@media (max-width: 800px) {
	  
	  h1 { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 2em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		}
		
	  h1.center { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 2em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		font-weight: bold;
		}
		
	  h2 { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 1.3em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		 }
 		 
	  article p {
		font-family: "Crimson Text";
		font-size: 1.2em;
		}
	   article ul {
		font-family: "Crimson Text";
		font-size: 1.2em;
		line-height: 1.5em;
		}
		
		.puhnro {display: block;}
		
		.piilota {display: none;}
		
		}

body {
	  margin: 0;
	  font-family: Arial, Helvetica, sans-serif;
	  background-color: rgb(216,228,255); 
	}

	/* link color */
	.navbar-custom .navbar-nav .nav-link {
		color: white;
		}
	  
	/* active & hover link color */
	.navbar-custom .nav-item.active .nav-link, .navbar-custom .navbar-brand:hover, .navbar-custom .nav-item:hover .nav-link {
		color: rgb(92,186,138);
	}

	.navbar-custom {
		 padding-left:2%;
	}

	.navbar-custom .navbar-brand {
		 margin-right: 19%;
	}

.uid_label { min-width: 120px; }

.sivunavigointi { font-family: "Roboto"; }