/* Sivuston ja sen linkkien määrittelyä */

body {
background-color:#F9F9FF;
background-attachment: fixed;
font-family: Verdana,sans-serif;
color:#333;
margin:0;
padding:0;
}

pre {
font-size:1.20em;
font-family: Consolas,monospace;
}

a:link {
font-weight: bold;
color: #3CC47C;
text-decoration: none;
font-family: Verdana,sans-serif;
}

a:visited {
font-weight: normal;
color: #828081;
text-decoration: none;
font-family: Verdana,sans-serif;
}

a:hover {
font-weight: bold;
color: #E9C893;
text-decoration: none;
font-family: Verdana,sans-serif;
transition: 0.2s;
}

a:visited:hover {
font-weight: normal;
color: #E9C893;
text-decoration: none;
font-family: Verdana,sans-serif;
}

a:active {
font-weight: bold;
color: #E9C893;
text-decoration: none;
font-family: Verdana,sans-serif;
}


/* Sivuston ja linkkien määrittely loppuu */

#wrapper {
margin-top: 135px;
min-width:1050px;
max-width: 1366px;
background-color:#F9F9FF;
border-left:1px solid #ccc;
border-right:0px solid #ccc;
}

/* POISTETAAN MÖKKISAAREN HEADER KÄYTÖSTÄ

#header_ms {
min-width:1050px;
height:95px;
background-image: url("/newrpg/images/tausta_header.jpg");
background-size: cover;
background-repeat: no-repeat;
margin:0 auto;
margin-bottom:0px;
border-bottom:0px solid #ccc;
border-top:1px solid #ccc;
font-size:0.85em;
background-color:#D8DFE6;
}

#header_ms h2 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 28px;
padding:10px;
}

h2.header_ms {
color: #4B0082;
font-style: oblique;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}

*/

h1, h2, h3, h4 {
    text-shadow: 1px 1px 3px #E9C893, 2px 2px 5px #828081;
}

h5 {
color: red;
}


/* Navigointipalkin määrittelyjä, palkki kiinteäksi sivun yläosaan */

#nav {
    position: fixed;
    width: 100%;
    height: 135px;
    top: 0px;
    overflow: hidden;
    background-image: url("/newrpg/images/tausta_nav2.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #3CC47C;
    z-index: 1;
    text-shadow: 1px 1px 3px #E9C893, 2px 2px 5px #828081;
    transition: top 0.5s;
}

/* Navigointipalkin linkkien määrittelyjä. Linkkien määrittelyjäjestyksen tulee olla oikea, koska muuten värit eivät toimi. Oikea järjestys on:
    link
    visited
    hover
    visited:hover
    active
*/

#nav a:link {
    position: relative;
    top: 83px;
    display: block;
    float: left;
    padding: 14px 16px;   /* top right bottom left */
    /* background-color: rgba(60, 196, 124, 0.8); */
    background-image: linear-gradient(rgba(60, 196, 124, 0.1), rgba(60, 196, 124, 0.9));
    color: rgba(30, 57, 42, 1.0) !important;
    text-decoration: none;
    text-align: center;
    font-variant: small-caps;
    font-size: 20px;

}

#nav a:visited {
    background-color: rgba(60, 196, 124, 0.8);
    color: #1E392A;
}

#nav a:hover {
    background-image: linear-gradient(-180deg, rgba(30, 57, 42, 1.0), rgba(30, 57, 42, 0.8));
    color: #3CC47C;
    transition: 0.2s;
}

#nav a:visited:hover {
    background-color: #1E392A;
    color: #3CC47C;
    transition: 0.2s;

}

/* Mökkisaaren navigointipalkin määrittelyä, palkki kiinteäksi sivun yläosaan */

#nav_ms {
    position: fixed;
    width: 100%;
    height: 135px;
    top: 0px;
    overflow: hidden;
    background-image: url("/newrpg/images/tausta_nav.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #3CC47C;
    z-index: 1;
    text-shadow: 1px 1px 3px #E9C893, 2px 2px 5px #828081;
    transition: top 0.5s;
}

/* Navigointipalkin linkkien määrittelyjä. Linkkien määrittelyjäjestyksen tulee olla oikea, koska muuten värit eivät toimi. Oikea järjestys on:
    link
    visited
    hover
    visited:hover
    active
*/

#nav_ms a:link {
    position: relative;
    top: 83px;
    display: block;
    float: left;
    padding: 14px 16px;   /* top right bottom left */
    /* background-color: rgba(60, 196, 124, 0.8); */
    background-image: linear-gradient(rgba(60, 196, 124, 0.1), rgba(60, 196, 124, 0.9));
    color: rgba(30, 57, 42, 1.0) !important;
    text-decoration: none;
    text-align: center;
    font-variant: small-caps;
    font-size: 20px;
}

#nav_ms a:visited {
    background-color: rgba(60, 196, 124, 0.8);
    color: #1E392A;
}

#nav_ms a:hover {
    background-color: #1E392A;
    color: #3CC47C;
    transition: 0.2s;
}

#nav_ms a:visited:hover {
    background-color: #1E392A;
    color: #3CC47C;
    transition: 0.2s;
}

#content {
    min-width:840px;
    margin-bottom: 75px;
    float:right;
    width:80%;
    padding:10px;
    font-size:0.75em;
}

/* VANHAT NAVIGOINTIPALKIN MÄÄRITYKSET ALKAVAT

#nav {
min-width:1050px;
height:40px;
background-image: url("/newrpg/images/tausta_nav_kr_edit.png");
background-size: cover;
background-repeat: no-repeat;
font-size:0.80em;
opacity: 1.0;
border-bottom:1px solid #ccc;
}

#nav a {
display:inline;
padding:7px;
text-decoration:none;
background-color: rgba(204, 204, 204, 0.5);
color: rgba(102, 0, 153, 1.0);
border-radius: 5px;
}

#nav a:hover {
background-color:#FFC0CB;
color: #FF0000;
height:80px;
transition: 0.2s;
opacity: 1.0;

}

#nav_ms {
min-width:1050px;
height:40px;
background-image: url("/newrpg/images/tausta_nav.jpg");
background-size: cover;
background-repeat: no-repeat;
font-size:0.80em;
border-bottom:1px solid #ccc;
}

#nav_ms a {
display:inline;
padding:7px;
text-decoration:none;
background-color: rgba(204, 204, 204, 0.5);
color: rgba(102, 0, 153, 1.0);
border-radius: 5px;
}

#nav_ms a:hover {
background-color:#FFC0CB;
color: #FF0000;
transition: 0.2s;
height:80px;

}

VANHAT NAVIGOINTIPALKIN MÄÄRITYKSET LOPPUVAT */


/* FOOTERIN MÄÄRITTELYÄ */

#footer {
    clear:both;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height:70px;
    background-image: url("/newrpg/images/tausta_footer_edit.png");
    background-size: cover;
    background-repeat: no-repeat;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    font-size:0.75em;
    background-color:#D8DFE6;
}

#footer p {
padding:10px;
}

#footer_ms {
    clear:both;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height:70px;
    background-image: url("/newrpg/images/tausta_footer.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    font-size:0.75em;
    background-color:#D8DFE6;
}

#footer_ms p {
padding:10px;
}


/* SIVULLA OLEVIEN NAVIGAATIOPALKKIEN MÄÄRITTELYÄ */

#navigation { 
    font-size:0.70em; 
    width:195px;
}
#navigation ul {
    margin: 10px; 
    padding: 0px;
}
#navigation li {
    list-style: none;
}

ul.top-level {
    background-color: rgba(60, 196, 124, 0.1); 
    border-radius: 5px;
}
/* kaikkien solujen tausta muutetaan sähkönvihreäksi 0.1 opasiteetilla */
ul.top-level li {
     border-bottom: #fff solid;
     border-top: #fff solid;
     border-width: 1px;
     border-radius: 5px;
}

#navigation a {
     color: rgba(30, 57, 42);
     /* Linkin väri on metsä */
     cursor: pointer;
     display:block;
     height:25px;
     line-height: 25px;
     text-indent: 10px;
     text-decoration:none;
     width:100%;
}

#navigation a:visited{
     text-decoration:none;
     color: #828081;
     /* Vieraillut linkit näkyvät aina harmaalla */
     border-radius: 5px;
     transition: 0.2s;
}

#navigation a:hover{
     text-decoration:none;
     color: #3CC47C;
     /* Kun kursori on linkin päällä, väri muutetaan sähköksi */
     border-radius: 5px;
     transition: 0.2s;
}

#navigation li:hover {
     background: #1E392A;
     /* Kun kursori on linkin päällä, solun tausta muutetaan metsäksi */
     position: relative;
     transition: 0.2s;
     border-radius: 5px;
}

ul.sub-level {
    display: none;
}
li:hover .sub-level {
    border-radius: 5px;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 45px;
    top: 8px;
    transition: 0.2s;
}

ul.sub-level li {
    border: none;
    background-color: rgba(60, 196, 124);
    float:left;
    width:150px;
}

/*Second Level*/
#navigation .sub-level {
    background: #F0F8FF;
}

/*Third Level*/
#navigation .sub-level .sub-level {
    background: #D8DFE6;
}

/*RESET STYLES*/
li:hover .sub-level .sub-level {
	display:none;
}
.sub-level li:hover .sub-level {
	display:block;
}

<!-- #menu ul ul li{
    display:none;
}
#menu ul li:hover > {
    display:block;
} -->

#pup {
  position:absolute;
  z-index:200; /* aaaalways on top*/
  padding: 3px;
  margin-left: 10px;
  margin-top: 5px;
  width:250px;
  border: 1px solid black;
  background-color: #777;
  color: white;
  font-size: 0.95em;
}

#selostus {
    float:left;
    width:530px;
}

#hahmoslider {
    float:right;
    width:300px;
}

</style>