html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display:block;}
body{line-height:1;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}



@font-face {
   font-family: "vitsi";
   src: url(vitsi.ttf);
}



html{
background-color: gray;
}

body{
margin-left : auto; 
margin-right : auto; 
width : 750px; 
padding: 0px 20px;
background-color: lightgray;
    border-left: 10px outset gray;
    border-right: 10px outset gray;
    border-bottom: 10px outset gray;
}


div.valikko {
    margin: 30px 0px;
}

h1 {
    font-size: 20px;
    font-variant: small-caps;
    text-align: center;
    font-family : vitsi,"Comic Sans MS", "arial"; 
    margin:30px 10px 30px 20px;

}

h2 {
    font-size: 15px;
    font-variant: small-caps;
    text-align: left;
    font-family : vitsi,"Comic Sans MS", "arial"; 
    margin:30px 10px 30px 20px;

}

p.kilpailu {
    font-size: 14px;
    text-align: left;
    font-family : "arial"; 
    margin:30px 10px 30px 20px;

}


a.valikko {
    font-size: 20px;
    font-variant: small-caps;
    text-align: center;
    font-family : vitsi,"Comic Sans MS", "arial"; 
    margin:30px 10px 30px 20px;

}

/* unvisited link */
a:link.valikko {
    color: orange;
    letter-spacing: 3px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-decoration: none;
}

/* visited link */
a:visited.valikko {
    color: orange;
    letter-spacing: 3px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-decoration: none;
}

/* mouse over link */
a:hover.valikko {
    color: #787878;
    letter-spacing: 3px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-decoration: none;    
}

/* selected link */
a:active.valikko {
    color: #787878;
    letter-spacing: 3px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-decoration: none; 
}




div.mainos {
        position: absolute;
    top: 150px;
    left: 50px;
    width: 200px;
    background-color: blue;
        color: white;
    width: 150px;
      border: 2px solid blue;
          border: 1px solid #b6b6b6;
    border-radius: 5px;

}

span.i {
font-style: italic;
}


a:link.mainos , a:visited.mainos , a:hover.mainos , a:active.mainos {
        font-size: 30px;
        font-variant: small-caps;
        color: white;
            font-family :"arial"; 
                  padding: 10px 10px 10px 10px; 
                        margin: 10px 10px 10px 10px; 
                            text-decoration: none;
}

a:hover.mainos , a:active.mainos {
        font-size: 30px;
        font-variant: small-caps;
        color: orange;
            font-family :"arial"; 
                  padding: 10px 10px 10px 10px; 
                        margin: 10px 10px 10px 10px; 
                            text-decoration: none;
}



div.otsikko {
clear:left;
}

a.otsikko {
    font-size: 30px;
    font-variant: small-caps;
        color: white;
    letter-spacing: 5px;
    font-family : "vitsi", "Comic Sans MS", "arial"; 
    margin-left : 200px; 
margin-right : 300px; 
width: 200px;
}

/* unvisited link */
a:link.otsikko {
    color: orange;
    letter-spacing: 3px;
    text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    text-decoration: none;
}

/* visited link */
a:visited.otsikko {
    color: orange;
    letter-spacing: 3px;
    text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    text-decoration: none;
}

/* mouse over link */
a:hover.otsikko {
    color: orange;
    letter-spacing: 3px;
    text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    text-decoration: none;    
}

/* selected link */
a:active.otsikko {
    color: orange;
    letter-spacing: 3px;
    text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    text-decoration: none; 
}


.vitsit{
margin-top : 20px; 
margin-bottom : 20px; 
margin-left : auto; 
margin-right : auto; 
padding: 5px;
width: 740px;
background-color: #dedede;
    border: 1px solid #b6b6b6;
    border-radius: 5px;

}


.footer{
margin-left : auto; 
margin-right : auto; 
padding-bottom: 5px;
width: 300px;

}



.linkki{ 
width : 200px; 
display : inline-block; 
color : white; 
text-align : center; 
padding : 10px 20px; 
margin : 15px 250px 10px 250px; 
text-decoration : none; 
border : #ffffff solid 2px; 
border-radius : 5px; 
background-color : blue; 
font-family : "arial"; 
font-size : 30px; 
text-transform : uppercase; 
} 


.hidden {
    display: none;
}


@media (max-width: 1250px) {
    div.mainos{
    display: none;
    }
}