/* tama tyyli kaytossa kun tiedot ennen kuvia */

main, header, section, footer, aside, nav, article, figure /* varmistaa näiden toiminnan vanhemmissa selaimissa */
{
display: block;
} 

a:link { color: blue }
a:visited { color: black }
a:active { color: red }

body { color: black;
background-color: #c0c0c0;
text-align: center;
 }

nav {
width:auto;
height:auto;
clear: none;
text-align:center;
margin-top: 1em;
margin-bottom: 1em;
margin-left:auto;
margin-right:auto;
}

nav a {
text-decoration:none;
background-color:#c0c0c0;
padding: 0.5em;
padding-left: 1em;
padding-right: 1em;
margin: 4px; 2px;
border: 1px solid #a0a0a0;
}

nav a:hover {
color: white;
background-color: green;
}

header {
display: table;
overflow: auto;
float: none;
clear:none;
width:auto;
height:auto;
text-align:left;
margin-left:auto;
margin-right:auto;
margin-top:2px;
margin-bottom:2px;
padding: 4px;
color: #ffffff;
background-color: green;
border: 1px solid green;
}

header figure{
height:94px;
display: inline;
float: left;
text-align: left;
vertical-align: text-center;
margin: 1px;
padding: 2px;
padding-right: 4px;
}

.linkki {
display:inline;
float: right;
clear: none;
width:180px;
height:96px;
text-align:right;
vertical-align: text-bottom;
margin:0px;
padding: 0px;
border: 0px solid #d0d0d0;
}

.linkki img {
display:inline;
float: right;
clear: none;
text-align:right;
vertical-align: text-bottom;
margin-left:auto;
margin-right:auto;
padding: 0px;
border: 2px solid #b0b0b0;
}

.linkki a:hover {
color: #ffffff;
}

.linkki a:hover img {
padding: 0px;
border: 4px solid #ffffff;
}

figure {
width:160px;
height:140px;
display: inline;
float: left;
text-align:center;
vertical-align:center;
margin:0px;
padding-top: 0.1em;
padding-bottom: 0.1em;
}

figure img {
display: inline;
float: none;
vertical-align:center;
border: 0px solid #ffffff;
}

a:hover img {
padding: 0px;
border: 0px solid green;
border-top: 4px solid green;
border-bottom: 4px solid green;
}

main {
display: table;
clear:both;
width:auto;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:0.5em;
margin-bottom:1em;
padding: 0px;
/*background-color: #dddddd;*/
/*border: 2px solid green;*/
}

h1 {
display: inline;
width:auto;
float: none;
clear: none;
text-align: center;
font-size: 164%;
margin: 0px;
margin-left:auto;
margin-right:auto;
padding: 0.4em;
padding-top: 0em;
padding-bottom: 0.4em;
color: #ffffff;
background-color: green;
border: 0px solid #ffff00;
}

h2 {
width:auto;
display: block;
float: none;
clear: none;
text-align: center;
vertical-align: text-center;
font-size: 110%;
margin-top: 0em;
margin-bottom: 0px;
margin-left:auto;
margin-right:auto;
padding-top: 0.5em;
padding-bottom: 0em;
color: #ffffff;
background-color: green;
border: 0px solid #000000;
}

ul {
list-style-type: none;
list-style-position:outside;
margin-top: 2px;
padding: 0;
}

ul li { /* solut */
display: block;
float:left;
clear:right;
width:480px;
height:196px;
text-align:left;
margin-left:auto;
margin-right:auto;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
background-color:#ffffff;
border: 1px solid #909090;
}

li nav {
font-size: 90%;
text-align:left;
margin: 0px;
padding-left: 0px;
padding-top: 0.4em;
padding-bottom: 0.4em;
background-color: #ffffff;
border-top: 0px solid green;
}

li nav a {
text-decoration:none;
padding: 0em;
padding-left: 0em;
padding-right: 0em;
margin: 1px; 1px;
background-color:#ffffff;
border: 0px solid #a0a0a0;
}

li nav a:hover {
color: white;
background-color: green;
}

p {
width:auto;
clear:both;
font-size: smaller;
text-align:center;
margin-top: 2em;
margin-bottom: 1em;
margin-left:auto;
margin-right:auto;
}

footer {
width:auto;
clear:both;
font-size: smaller;
text-align:center;
margin-top: 2em;
margin-bottom: 3em;
margin-left:auto;
margin-right:auto;
}