html, body, div, span, applet, object, iframe, h3, h4,
h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup,
tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }

ol, ul {
    list-style: none;
    }

blockquote, q {
    quotes: none;
    }

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
    }

:focus {
    outline: 0;
    }

ins {
    text-decoration: none;
    }

del {
    text-decoration: line-through;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
    }

/*MAIN*/
body {
    font-size: 1.05em;
    line-height: 1.25em;
    font-family: Raleway, sans-serif;
    background: #fff;
    color: #555;
    }

a {
    color: #aaaaaa;
    text-decoration: none;
    }
	
a:hover {
    color: orange;
    }

header {
    background: #222;
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    }

.joulu {
    position: absolute;
    opacity: 0.8;
    top: 350px;
    right: 0px;
    z-index: 1;
    }

.joulu2 {
    position: absolute;
    opacity: 0.6;
    bottom: 0px;
    left: 200px;
    }

#logo {
    top: 5px;
    left: 0px;
    float: left;
    display: block;
    padding-top: 15px;
    padding-left: 5px;
    height: 35px;
    color: orange;
    }
    
#logo a:link {
    color: orange;
    }

#logo a:visited {
    color: orange;
    }  
#logo a:hover {
    color: orange;
    }

#logo a:active {
    color: orange;
    }

#mainapp {
    width: 100%;
    height: 95%;
    top: 50px;
    left: 0px;
    position: absolute;
    }

#main {
	width: 100%;
	height: 95%;
	top: 50px;
	left: 0px;
	position: absolute;
	}

#maino {
	width:100%;
	height: 95%;
	top: 50px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	}

#page{
	width: 100%;
	height: 100%;
	}

 #orange {
	color: orange;
	}

#lisa {
	width: 90%;
	height: 800px;
	top: 40px;
	text-align: left;
	position: relative;
	}

#lisa2 {
	width: 90%;
	height: 93%;
	top: 20px;
	text-align: left;
	position: relative;
	}

#info {
	width: 80%;
	height: 400px;
	top: 20px;
	text-align: left;
	position: relative;
	}

#info3 {
    width: 95%;
    height: 400px;
    top: 20px;
    text-align: left;
    position: relative;
    }
        
#info2 {
    opacity: 0.7;
    color: #aaaaaa;
	width: 100%;
	height: 20px;
	text-align: center;
	bottom: 0px;
	left: 0px;
	position: fixed;
	}

#ohje {
    padding-top: 20px;
    float: right;
    width: 60%;
    height: 30px;
    padding-left: 50px;
    }

#ohje2 {
    left: 0px;
    float: left;
    width: 520px;
    height: 30px;
    padding-top: 20px;
    }

#ohje3 {
    text-align: left;
    float: left;
    min-width: 300px;
    padding-right: 10px;
    padding-left: 30px;
    width: 60%;
    padding-top: 10px;
    }

#ohje3w {
    position: relative;
    left: 0px;
    text-align: left;
    float: right;
    min-width: 150px;
    padding-right: 10px;
    padding-left: 20px;
    width: 78%;
    padding-top: 12px;
    }

#ohje4 {
    text-align: left;
    float: left;
    min-width: 500px;
    padding-right: 10px;
    padding-left: 30px;
    width: 80%;
    padding-top: 20px;
    }

.taulukko {
    cursor: pointer;
    text-shadow: none;
    height: 20px;
    padding-left: 10px;
    border-bottom: 1px solid black;
    }
    
.taulukkoa {
    cursor: pointer;
    text-shadow: none;
    height: 20px;
    padding-left: 10px;
    border-bottom: 1px solid black;
    }
    
.taulukkob {
    cursor: pointer;
    text-shadow: none;
    height: 20px;
    padding-left: 10px;
    border-bottom: 1px solid black;
    }
    
tr:hover td.taulukkob {
    cursor: pointer;
    color: orange;
    height: 20px;
    padding-left: 10px;
    border-bottom: 1px solid black;
    }

tr:hover td.taulukkoa {
    cursor: pointer;
    color: orange;
    height: 20px;
    padding-left: 9px;
    border-bottom: 1px solid black;
    }

tr:hover td.taulukko {
    cursor: pointer;
    color: orange;
    height: 20px;
    padding-left: 10px;
    border-bottom: 1px solid black;
    }

.otsikko {
    border-bottom: 1px solid black;
    }
    
.alanen1 {
    text-shadow: none;
    padding-left: 10px;
    color: #000;
    }

.alanen2 {
    text-shadow: none;
    float: right;
    color: #000;
    }
    
#kommentti {
    vertical-align: text-top;
    font-weight: 300;
    text-shadow: none;
    float: left;
    width: 650px;
    height: 30px;
    padding-top: 94px;
    padding-left: 50px;
    }

#kommentti2 {
    vertical-align: text-top;
    font-weight: 300;
    text-shadow: none;
    float: left;
    width: 500px;
    height: 30px;
    padding-top: 25px;
    padding-left: 100px;
    }

.tyhja {
    height: 8px;
    }

.tinkeli {
    width: 155px;
    height: 290px;
    padding-top: 7px;
    padding-left: 8px;
    padding-right: 18px;
    position: absolute;
    font-size: 12px;
    opacity: 0.6;
    background: #000;
    color: #fff;
    right: 10px;
    top: 45px;
    }

.tinkeli a {
    color: #fff;
    }

.tinkeli a:hover {
    color: orange;
    }

.eka {
    width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	position: absolute;
    font-size: 14px;
    opacity: 0.86;
    background: #000;
    color: #fff;
    }

.eka a {
        color: orange;
    }

.eka a:hoverc {
        color: #cd7300;
    } 

#etu {
    opacity: 1.0;
    width: 820px;
    margin-left: auto ;
    margin-right: auto ;
    }

.toka {
    width: 140px;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    text-align: left;
    }

.toka a {
    color: orange;
    }
    
.toka a:hover {
    color: #cd7300;
    }

#keski {
    text-align: center;
    }

#koord-kartta {
    border-top:1px solid black;
    border-bottom:1px solid black;
    border-left:1px solid black;
    border-right:1px solid black;
    width:100%;
    height:500px;
    }

#hanska {
    cursor: pointer;
    }

.table-hover a:hover {
    color: #cd7300;
    }

#haku {
    background-color: white; 
    background-image: url('searchicon.png');
    background-position: 5px 4px; 
    background-repeat: no-repeat;
    padding-left: 25px;
    height: 29px;
    }

input[type=button], input[type=submit], input[type=reset] {
    background-color: orange;
    border: none;
    color: white;
    padding: 4px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    }

#appstore {
    position: absolute;
    opacity: 0.30;
    top: 14px;
    left: 200px;
    }

#appstore:hover {
    opacity: 1.00;
    }



 /*MEDIA QUERY*/

 @media only screen and (max-width : 1390px) {

#ohje3w {
    position: relative;
    left: 20px;
    text-align: left;
    float: right;
    min-width: 150px;
    padding-right: 50px;
    padding-left: 0px;
    width: 70%;
    padding-top: 12px;
    }

 }

  @media only screen and (max-width : 1200px) {

#ohje3w {
    position: relative;
    left: 40px;
    text-align: left;
    float: right;
    min-width: 50px;
    padding-right: 60px;
    padding-left: 0px;
    width: 70%;
    padding-top: 12px;
    }

 }

   @media only screen and (max-width : 1150px) {

#ohje3w {
    position: relative;
    left: 40px;
    text-align: left;
    float: right;
    min-width: 50px;
    padding-right: 80px;
    padding-left: 0px;
    width: 65%;
    padding-top: 12px;
    }

 }

 @media only screen and (max-width : 1100px) {
    
header {
    position: fixed;
    }


#appstore {
    position: absolute;
    opacity: 0.50;
    top: 14px;
    left: 130px;
    }

#appstore:hover {
    opacity: 1.00;
    }

#haku {
    background-color: white; 
    background-image: url('searchicon.png');
    background-position: 5px 4px; 
    background-repeat: no-repeat;
    padding-left: 25px;
    height: 29px;
    }

input[type=button], input[type=submit], input[type=reset] {
    background-color: orange;
    border: none;
    color: white;
    padding: 4px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    }

#logo {
    top: 5px;
    left: 0px;
    float: left;
    display: block;
    padding-top: 15px;
    color: orange;
    }

#info {
    width: 100%;
    height: 80%;
    top: 20px;
    text-align: left;
    position: relative;
    padding-left: 10px;
    }

#info3 {
    width: 100%;
    height: 80%;
    top: 20px;
    text-align: left;
    position: relative;
    padding-left: 10px;
    }

#lisa {
    width: 100%;
    }
        
#koord-kartta {
    top: -20px;
    width:100%;
    height:400px;
    }

#ohje {
    left: 0px;
    font-weight: 300;
    text-shadow: none;
    padding-left: 10px;
    position: relative;
    top: 1100px;
    width: 100%;
    }

#ohje2 {
    position: absolute;
    left: 0px;
    vertical-align: text-top;
    font-weight: 300;
    text-shadow: none;
    float: left;
    padding-left: 10px;
    padding-top: 20px;
    width: 100%;
    }

#ohje3 {
    left: 0px;
    font-weight: 300;
    text-shadow: none;
    padding-left: 10px;
    position: relative;
    padding-top: 20px;
    top: 850px;
    width: 100%;
    text-align: left;
    }

#ohje3w {
    left: 0px;
    font-weight: 300;
    text-shadow: none;
    padding-left: 10px;
    position: relative;
    padding-top: 20px;
    top: 500px;
    bottom: 50px;
    width: 100%;
    text-align: left;
    }

#ohje4 {
    text-align: left;
    float: left;
    min-width: 500px;
    padding-right: 10px;
    padding-left: 30px;
    width: 80%;
    padding-top: 20px;
    }

#lisa2 {
    width: 100%;
    height: 93%;
    top: 20px;
    text-align: left;
    position: relative;
    }
 }



@media only screen and (max-width : 1000px) {


#main {
    width: 100%;
    height: 100%;
    top: 50px;
    left: 0px;
    position: absolute;
    }

header {
    position: fixed;
    }

#appstore {
    display: none;
    visibility: hidden;
    clear: both;
    }

#haku {
    background-color: white; 
    background-image: url('searchicon.png');
    background-position: 5px 4px; 
    background-repeat: no-repeat;
    padding-left: 25px;
    height: 29px;
    }

input[type=button], input[type=submit], input[type=reset] {
    background-color: orange;
    border: none;
    color: white;
    padding: 4px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    }

#logo {
    top: 5px;
    left: 0px;
    float: left;
    display: block;
    padding-top: 15px;
    color: orange;
    }

#info {
    width: 100%;
    height: 80%;
    top: 20px;
    text-align: left;
    position: relative;
    padding-left: 10px;
    }

#info3 {
    width: 100%;
    height: 80%;
    top: 20px;
    text-align: left;
    position: relative;
    padding-left: 10px;
    }

#lisa {
    width: 100%;
    }
        
#koord-kartta {
    top: -20px;
    width:100%;
    height:400px;
    }

#ohje {
    left: 0px;
    font-weight: 300;
    text-shadow: none;
    padding-left: 10px;
    position: relative;
    top: 1100px;
    width: 100%;
    }

#ohje2 {
    position: absolute;
    left: 0px;
    vertical-align: text-top;
    font-weight: 300;
    text-shadow: none;
    float: left;
    padding-left: 10px;
    padding-top: 20px;
    width: 100%;
    }

 #ohje3 {
    padding-left: 10px;
    position: relative;
    padding-top: 20px;
    top: 850px;
    width: 100%;
    text-align: left;
    }


#ohje4 {
    text-align: left;
    float: left;
    min-width: 500px;
    padding-right: 10px;
    padding-left: 30px;
    width: 80%;
    padding-top: 20px;
    }
    
#lisa2 {
    width: 100%;
    height: 93%;
    top: 20px;
    text-align: left;
    position: relative;
    }
 }