/*
Ensin määritetään:
    - taustaväri,
    - tekstin väri,
    - vaihtoehdot fontille, sekä
    - marginaalit.
*/
body {    
    background-color:linen ;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left:  auto;
    
}
/* 
Seuraavaksi määritetään otsikot h1-h4:
    - tekstin asettelu (keskitys/vasen laita),
    - tekstin alun sisennys h2:lle (text-indent),
    - taustaväri,
    - tekstin väri,
    - marginaalit,
    - fontin koko ja
    - fontin muotoilu
*/
h1 {
    text-align: center;
    color: blue;
}
h2 {
    text-align: left;
    text-indent: 25px;
    color: linen;
    background-color: cornflowerblue;
    margin-left: 40px;
    margin-right: 40px;
}
h3 {
    text-align: left;
    color: blue;
    margin-left: 40px;
    margin-right: 40px;
}
h4 {
    text-align: left;
    color: black;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    font-weight: bold;
    margin-left: 40px;
    margin-right: 40px;
}
/*
Määritetään leipätekstille ja description listille:
    - tekstin asettelu vasempaan laitaan ja
    - marginaali oikealle ja vasemmalle
*/
p {
    text-align: left;
    margin-left: 40px;
    margin-right: 40px;
}
dl {
    text-align: left;
    margin-left: 40px;
    margin-right: 40px;
}
/*
Määritetään fontti ja marginaalit dt-tekstille
*/
dt {
    font-size: 1.17em;
    margin: 1em 0em 1em 0em;
    font-weight:bold;
}
/*
Määritetään linkkien muotoilu niiden eri tiloissa (linkki, avattu linkki, aktiivinen linkki, linkki kun hiiri on niiden päällä):
    - tekstin väri
    - taustaväri
    - alleviivaus/ei alleviivausta
*/
a:link {
    color: black;
    background-color: transparent;
    text-decoration: underline;    
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: gold;
    background-color: blue;
    text-decoration: underline;
}
a:active {
    color: black;
    background-color: orangered;
    text-decoration: none;
}
/*
Määritetään address-elementille:
    - tekstin keskitys,
    - fontin tyyli,
    - teksitin väri ja
    - elementin muoto (block).
*/
address {
    text-align: center;
    font-style: italic;
    display: block;
    color: black;
    
}
/* Määritetään id-atribuutti banner:
    - tekstin keskitys,
    - fontin koko,
    - tekstin väri,
    - bannerin sisälle ylälaitaan 20px tyhjää tilaa (padding)
    - bannerin korkeus 110px
    - taustaväri
    - marginaalit
*/
#banner {
    text-align: center;
    font-size: 60px;
    color: linen;
    padding-top: 20px;
    height: 110px;
    background-color: lightslategray;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;    
}
/*
Määritetään class-atribuutti nav:
    - tekstin keskitys,
    - tekstin koko
    - tekstin väri
    - taustaväri
    - korkeus 40px
    - marginaali ylös 0 (että ei jää taustaväri näkymään otsikko-bannerin ja menu-bannerin väliin)
    - bannerin sisälle ylälaitaan 10px tyhjää tilaa (padding)
*/
.nav {
    text-align: center;
    font-size: 20px;
    color: linen;
    background-color: cornflowerblue;
    height: 40px;
    margin-top: 0;
    padding-top: 10px;            
}
/*
Tein myös class-atribuutin address, mutta jätin sen tähän tyhjäksi, kun se oli erilainen kuin tehtävän annon kuvassa.
Kopioin muotoilun ajallaan takaisin, kun muokkaan sen itselleni mukavaksi.
*/
.address {    
}
/*
Määritetään lista:
    - listan "list item marker" pois
    - listan sisälle vasempaan laitaa tyhjää tilla 40px
*/
li {
    list-style: none;
    padding-left: 40px;
}