/*Kalevalan luokkakuva - Kalevala taidetta kouluille CSS */
html, body { margin: 0; padding: 0; background-color: #eceae4;
font-family: helvetica, arial, sans-serif; font-size: 10px; color: #111111;}
#wrapper { margin: 0px auto 35px auto; padding: 0; width: 940px; text-align: left;
background-color: #ffffff; }
.anchor { margin: 0; padding: 0;}
#main { margin: 0 35px 0 35px; padding: 0; width: 870px; text-align: left;
background-color: #ffffff; border-top: 8px solid #0044cc;}

.piirros { margin: 0; padding: 0;}
.etusivuotsikko { margin: 0; padding: 25px 0 5px 0;}
.etusivuotsikko h1.etusivutitle { margin: 0; padding: 0;
background-image: url(../images/ots-etusivu.gif); background-repeat: no-repeat; 
display: block; width: 870px; height: 77px;}
.etusivuotsikko h1.etusivutitle span { margin: 0; padding: 0; display: none;}

#topnavi {margin: 0; padding: 10px 0 0 0;}
#topnavi span { display: none; }
#topnavi a:link, #topnavi a:visited {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/etusivu.gif); background-repeat: no-repeat; display: block;
width: 55px; height: 9px; }
#topnavi a:hover, #topnavi a:active {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/etusivu_hover.gif); background-repeat: no-repeat; display: block; 
width: 55px; height: 9px;}

#header {margin: 0; padding: 0; }
#smalltitle { margin: 0; padding: 48px 0 0 0;}
#smalltitle span { display: none; }
#smalltitle p {margin: 0; padding: 0;
background-image: url(../images/luokkakuvaotsikko.gif); background-repeat: no-repeat; 
display: block; width: 386px; height: 12px; }

#title { margin: 0; padding: 5px 0 7px 0; float: left; width: 740px; }
#title span { display: none; }

#title h2.taiteilijaesittelyt {margin: 0; padding: 0;
background-image: url(../images/ots-kalevalataiteilijoita.gif); background-repeat: no-repeat; 
display: block; width: 490px; height: 54px; }

#title h2.tietoa {margin: 0; padding: 0;
background-image: url(../images/ots-tietoakalevalasta.gif); background-repeat: no-repeat; 
display: block; width: 437px; height: 54px; }

#title h2.opas {margin: 0; padding: 0;
background-image: url(../images/opas.gif); background-repeat: no-repeat; 
display: block; width: 514px; height: 101px; }

#title h2.sivustosta {margin: 0; padding: 0;
background-image: url(../images/ots-sivustosta.gif); background-repeat: no-repeat; 
display: block; width: 247px; height: 54px; }

#title h2.opettajalle {margin: 0; padding: 0;
background-image: url(../images/ots-opettajalle.gif); background-repeat: no-repeat; 
display: block; width: 272px; height: 54px; }

#title h2.kalevalakauppa {margin: 0; padding: 0;
background-image: url(../images/ots-kalevalakauppa.gif); background-repeat: no-repeat; 
display: block; width: 385px; height: 54px; }

#title h2.linkit {margin: 0; padding: 0;
background-image: url(../images/ots-linkit.gif); background-repeat: no-repeat; 
display: block; width: 126px; height: 54px; }

#title h2.palaute {margin: 0; padding: 0;
background-image: url(../images/ots-palaute.gif); background-repeat: no-repeat; 
display: block; width: 178px; height: 54px; }


#title h2.lonnrot {margin: 0; padding: 0;
background-image: url(../images/ots-lonnrot.gif); background-repeat: no-repeat; 
display: block; width: 637px; height: 54px; }

#title h2.aino {margin: 0; padding: 0;
background-image: url(../images/ots-aino.gif); background-repeat: no-repeat; 
display: block; width: 96px; height: 54px; }

#title h2.ilmarinen {margin: 0; padding: 0;
background-image: url(../images/ots-ilmarinen.gif); background-repeat: no-repeat; 
display: block; width: 640px; height: 54px; }

#title h2.joukahainen {margin: 0; padding: 0;
background-image: url(../images/ots-joukahainen.gif); background-repeat: no-repeat; 
display: block; width: 281px; height: 54px; }

#title h2.kullervo {margin: 0; padding: 0;
background-image: url(../images/ots-kullervo.gif); background-repeat: no-repeat; 
display: block; width: 204px; height: 54px; }

#title h2.lemminkainen {margin: 0; padding: 0;
background-image: url(../images/ots-lemminkainen.gif); background-repeat: no-repeat; 
display: block; width: 312px; height: 54px; }

#title h2.lemminkaisenaiti {margin: 0; padding: 0;
background-image: url(../images/ots-lemminkaisenaiti.gif); background-repeat: no-repeat; 
display: block; width: 397px; height: 54px; }

#title h2.louhi {margin: 0; padding: 0;
background-image: url(../images/ots-louhi.gif); background-repeat: no-repeat; 
display: block; width: 615px; height: 54px; }

#title h2.marjatta {margin: 0; padding: 0;
background-image: url(../images/ots-marjatta.gif); background-repeat: no-repeat; 
display: block; width: 219px; height: 54px; }

#title h2.sotkanmuna {margin: 0; padding: 0;
background-image: url(../images/ots-sotkanmuna.gif); background-repeat: no-repeat; 
display: block; width: 477px; height: 54px; }

#title h2.vainamoinen {margin: 0; padding: 0;
background-image: url(../images/ots-vainamoinen.gif); background-repeat: no-repeat; 
display: block; width: 279px; height: 54px; }

.logo {margin: 0; padding: 15px 0 0 0; float: right; width: 130px; }
.logo span { display: none; }
.logo a:link, .logo a:visited {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/ateneum.gif); background-repeat: no-repeat; 
display: block; width: 122px; height: 31px;}
.logo a:hover, .logo a:active {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/ateneum.gif); background-repeat: no-repeat; 
display: block; width: 122px; height: 31px;}

.logo2 {margin: 0; padding: 60px 0 0 0; float: right; width: 130px; }
.logo2 span { display: none; }
.logo2 a:link, .logo2 a:visited {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/ateneum.gif); background-repeat: no-repeat; 
display: block; width: 122px; height: 31px;}
.logo2 a:hover, .logo2 a:active {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/ateneum.gif); background-repeat: no-repeat; 
display: block; width: 122px; height: 31px;}

#headerborder { margin: 0; padding: 0;  border-top: 3px solid #111111; }
#content { margin: 0; padding: 25px 0 0 0; }

#hahmo { margin: 0; padding: 0;}
#hahmokuva { margin: 0; padding: 0; float: left; width: 290px;}
#hahmoteksti { margin: 0; padding: 0 0 18px 0; float: left; width: 580px;}
#hahmoteksti h3 { margin: 0; padding: 0 0 14px 30px; 
font-size: 1.2em; font-weight: normal; text-transform: uppercase;}
#hahmoteksti h3 a:link, #hahmoteksti h3 a:visited {margin: 0; padding: 0; color: #000000; text-decoration: none;}
#hahmoteksti h3 a:hover, #hahmoteksti h3 a:active {margin: 0; padding: 0; color: #ee7800; text-decoration: none;}
#hahmoteksti p { margin: 0; padding: 0 15px 14px 30px; font-size: 1.2em; line-height: 1.5em; color: #444444;}
#hahmoteksti p a:link, #hahmoteksti p a:visited {margin: 0; padding: 0; color: #0044cc; text-decoration: underline;}
#hahmoteksti p a:hover, #hahmoteksti p a:active {margin: 0; padding: 0; color: #0044cc; text-decoration: underline;}

#hahmoteksti p a.sks:link, #hahmoteksti p a.sks:visited {margin: 0; padding: 0; color: #ee7800; text-decoration: underline;}
#hahmoteksti p a.sks:hover, #hahmoteksti p a.sks:active {margin: 0; padding: 0; color: #ee7800; text-decoration: underline;}


#navipalikka { margin: 0; padding: 0; clear: both; background-image: url(../images/navipalkki.gif);
background-repeat: no-repeat; width: 870px; height: 35px; display: block; }
.palikkawrapper { margin: 0; padding: 11px 0 0 0;}

.edellinen { margin: 0; padding: 0; float: left; width: 320px; line-height: 1.2em;
font-size: 1.2em; font-weight: normal; text-transform: uppercase; }
.edellinen a:link, .edellinen a:visited {margin: 0; padding: 0 0 0 10px; color: #666666; 
text-decoration: none;  }
.edellinen a:hover, .edellinen a:active {margin: 0; padding: 0 0 0 10px; color: #0044cc; 
text-decoration: none; }

.tehtavat { margin: 0; padding: 0 0 0 35px; line-height: 1.2em;
font-size: 1.2em; font-weight: bold; color: #FFFFFF; float: left;}
.tehtavat a:link, .tehtavat a:visited {margin: 0; padding: 0; color: #FFFFFF; text-decoration: none;}
.tehtavat a:hover, .tehtavat a:active {margin: 0; padding: 0; color: #FFFFFF; text-decoration: underline;}

.seuraava { margin: 0; padding: 0 0 0 0; float: right; line-height: 1.2em;
font-size: 1.2em; font-weight: normal; text-transform: uppercase;}
.seuraava a:link, .seuraava a:visited {margin: 0; padding: 0 10px 0 0; color: #666666; 
 text-decoration: none;}
.seuraava a:hover, .seuraava a:active {margin: 0; padding: 0 10px 0 0; color: #0044cc; 
 text-decoration: none;}

#teokset { margin: 40px 0 0 0; padding: 0; }
#teokset h3 { margin: 0; padding: 0; font-size: 1.2em; font-weight: bold; 
text-transform: uppercase; background-image: url(../images/teoksettaiteilijatotsikko.gif); background-repeat: no-repeat;
display: block; width: 64px; height: 20px;}
#teokset h3 span { display: none; }
#teokset h6 { margin: 0; padding: 10px 0 0 0; font-size: 1.2em; font-weight: normal; 
font-style: italic; color: #444444; }
.longborder { margin: -10px 0 0 0; padding: 0;  border-bottom: 3px solid #000000; clear: both;}

.slot { margin: 15px 0 0 0; padding: 0;}
.teoskuva { margin: 0; padding: 14px 0 0 0; float: left; width: 290px;}
.teoskuva img { margin: 0; padding: 5px 0 0 0;}
.taiteilijaesittely { margin: 0; padding: 0; float: right; width: 550px;}
.taiteilijaesittely p { margin: 0; padding: 0 15px 14px 0; font-size: 1.2em; line-height: 1.5em; color: #444444;}
.taiteilijaesittely p a:link, .taiteilijaesittely p a:visited {margin: 0; padding: 0; color: #0044cc; text-decoration: underline;}
.taiteilijaesittely p a:hover, .taiteilijaesittely p a:active {margin: 0; padding: 0; color: #0044cc; text-decoration: underline;}


.tnimi {margin: 0; padding: 0; float: left; width: 420px; }
.tnimi h4 { margin: 0; padding: 0; font-size: 1.2em; font-weight: bold; text-transform: uppercase; line-height: 1.2em;}


.teosnimi h4 { margin: 0; padding: 0 0 0 15px; font-size: 1.2em; font-weight: bold; 
background-image: url(../images/pallo.gif); background-repeat: no-repeat; text-transform: uppercase; line-height: 1.2em;}
.caption { margin: 0; padding: 10px 0 0 0; }
.caption p { margin: 0; padding: 0; font-size: 1.2em; font-style: italic; color: #444444;}
.caption p.klik { margin: 0; padding: 0 0 5px 0; font-size: 1.2em; font-style: italic; font-weight: bold; color: #000000;}



#navi { margin: 0; padding: 3px 0 0 0; float: left; width: 290px;}
#navi dl { margin: 0; padding: 0; font-size: 1.2em; font-weight: bold; text-transform: uppercase; }
#navi dt { margin: 0; padding: 0 0 4px 0;}
#navi dt a:link, #navi dt a:visited {margin: 0; padding: 0; color: #000000; text-decoration: none;}
#navi dt a:hover, #navi dt a:active {margin: 0; padding: 0; color: #0044cc; text-decoration: none;}



/* Tehtavat-sivulla */

#enavi {margin: 0; padding: 0;}
#enavi span { display: none; }
#enavi a:link, #enavi a:visited {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/tt.gif); background-repeat: no-repeat; display: block;
width: 57px; height: 12px; }
#enavi a:hover, #tenavi a:active {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/tt_hover.gif); background-repeat: no-repeat; display: block; 
width: 57px; height: 12px;}

#etitle { margin: 0; padding: 0; border-bottom: 1px solid #b0ada5; width: 250px;}
#etitle h3 { margin: 0; padding: 0 0 3px 0; font-size: 1.2em; font-weight: bold; 
text-transform: uppercase; background-image: url(../images/tehtavat-iso.gif); background-repeat: no-repeat;
display: block; width: 70px; height: 15px;}
#etitle h3 span { display: none; }

#lataapdf { margin: 0; padding: 15px 0 15px 0; }
#lataapdf a:link { margin: 0; padding: 0 0 3px 0; font-size: 1.2em; font-weight: bold; 
text-transform: uppercase; background-image: url(../images/lataa.gif); background-repeat: no-repeat;
display: block; width: 72px; height: 13px; text-decoration: none; }
#lataapdf span { display: none; }

#navi dl.exer { margin: 0; padding: 0; font-size: 1.2em; font-weight: bold; text-transform: uppercase; width: 250px;}
#navi dt.exer { margin: 0; padding: 0 0 12px 0;}
#navi dt.exer a:link, #navi dt.exer a:visited {margin: 0; padding: 0; color: #000000; text-decoration: none;}
#navi dt.exer a:hover, #navi dt.exer a:active {margin: 0; padding: 0; color: #0044cc; text-decoration: none;}

.potretti { margin: 0; padding: 17px 0 0 0;}
.teoskuva_teht { margin: 0; padding: 0; float: left; }
.teoskuva_teht img { margin: 0; padding: 6px 0 0 0;}
.description { margin: 0; padding: 3px 0 0 20px; float: left; }
.description h4 { margin: 0; padding: 0; font-size: 1.2em; font-weight: bold; text-transform: uppercase; line-height: 1.2em;}
.description h6 { margin: 0; padding: 0 0 14px 0; font-family: "Times New Roman", Times, serif; font-size: 16px; font-weight: normal;}
.description p.klik, .description_2 p.klik { margin: 0; padding: 0 0 5px 0; font-size: 1.2em; font-style: normal; font-weight: bold; color: #000000;}
.tilaa3 { margin: 0; padding: 0; clear: both;}

.description_2 { margin: 0; padding: 3px 0 0 20px; float: left; width: 230px;}
.description_2 h4 { margin: 0; padding: 0; font-size: 1.2em; font-weight: bold; text-transform: uppercase; line-height: 1.2em;}
.description_2 h6 { margin: 0; padding: 0 0 14px 0; font-family: "Times New Roman", Times, serif; font-size: 16px; font-weight: normal;}

.black { color: #000000; font-weight: bold;}

/* -- */



#text { margin: 0; padding: 0; float: left; width: 580px;}
#text p { margin: 0; padding: 0 15px 14px 0; font-size: 1.2em; line-height: 1.5em; color: #444444;}
#text a:link, #text a:visited {margin: 0; padding: 0; color: #0044cc; text-decoration: underline;}
#text a:hover, #text a:active {margin: 0; padding: 0; color: #0044cc; text-decoration: underline;}

#text a.sks:link, #text a.sks:visited {margin: 0; padding: 0; color: #ee7800; text-decoration: underline;}
#text a.sks:hover, #text a.sks:active {margin: 0; padding: 0; color: #ee7800; text-decoration: underline;}

#text p.tight { margin: 0; padding: 0 15px 0 0; font-size: 1.2em; line-height: 1.5em; color: #444444;}
#text ol { margin: 0; padding: 0 0 14px 22px; font-size: 1.2em; line-height: 1.5em; 
color: #444444; list-style-type: decimal; }
#text ul { margin: 0; padding: 0 0 14px 18px; font-size: 1.2em; line-height: 1.5em; 
color: #444444; list-style-type: disc; }
#text li { margin: 0; padding: 0; }

#text p.smalltitle { margin: 0; padding: 7px 15px 14px 0; font-size: 1.2em; 
line-height: 1.5em; color: #444444; font-weight: bold;}

.taiteilija {margin: 0; padding: 0; }
.otsikko {margin: 0; padding: 14px 0 0 0; }
.otsikkoeka {margin: 0; padding: 3px 0 0 0; }
.nimi {margin: 0; padding: 0; float: left; width: 540px; height: 12px;}
.nimi h4 { margin: 0; padding: 0 0 0 15px;
background-image: url(../images/pallo.gif); background-repeat: no-repeat; 
font-size: 1.2em; font-weight: bold; text-transform: uppercase;}


.ylos { margin: 0; padding: 1px 0 0 0; float: right; width: 40px;}
.ylos span { display: none; }
.ylos a:link, .ylos a:visited {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/ylos.gif); background-repeat: no-repeat; 
display: block; width: 37px; height: 12px;}
.ylos a:hover, .ylos a:active {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/ylos_hover.gif); background-repeat: no-repeat; 
display: block; width: 37px; height: 12px;}


.boksi { margin: 5px 0 18px 0; padding: 15px; background-color: #e2dfd6; 
background-image: url(../images/boksigradient.gif); background-repeat: repeat-x;}
.boksi p { margin: 0; padding: 0; font-size: 1.2em; line-height: 1.4em; color: #222222;}
.boxhead { margin: 0; padding: 0px 0 0 0;}

.lista { margin: 0; padding: 5px 0 0 0; float: left;}
.boksi ul { margin: 0; padding: 0 0 3px 15px; font-size: 1.2em; line-height: 1.4em; color: #222222; list-style: disc;}
.boksi li { margin: 0; padding: 0;}
.lista a.list:link, .lista a.list:visited {margin: 0; padding: 0; color: #0044cc; text-decoration: none;}
.lista a.list:hover, .lista a.list:active {margin: 0; padding: 0; color: #0044cc; text-decoration: underline;} 

.lataa { margin: 0; padding: 0; font-size: 1.2em; float: right;}
.lataa a:link, .lataa a:visited {margin: 0; padding: 0; color: #0044cc; text-decoration: underline;}
.lataa a:hover, .lataa a:active {margin: 0; padding: 0; color: #0044cc; text-decoration: underline;}


.border { margin: 0; padding: 0; border-top: 1px solid #b0ada5; clear: both;
position: relative; top: 3px; }
.border_2 { margin: 0; padding: 0; border-top: 1px solid #b0ada5; clear: both;
position: relative; top: 3px;}

.kuvaus { margin: 0; padding: 0; width: 580px;}
.titteli {margin: 0; padding: 0; color:#444444; font-style: italic; clear: both; }
.titteli a:link, .titteli a:visited { font-style: normal; text-decoration: none;}
.titteli a:hover, .titteli a:active { font-style: normal; text-decoration: underline;}
.titteli h4 { margin: 0; padding: 0 0 7px 0; font-size: 1.2em; font-weight: bold; text-transform: uppercase; font-style: normal; line-height: 1.2em;
color: #222222;}


#bottomborder { margin: 0; padding: 28px 0 0 0; border-bottom: 3px solid #111111; clear: both; }
#bottomnavi { margin: 15px 0 0 0; padding: 0; }

.rowcontainer { margin: 0; padding: 0; float: left; width: 100%; 
overflow: hidden; background: #FFFFFF;}
.column { margin: 0; padding: 0; float: left; width: 24.5%; border-left: 1px solid #eeeeee; min-height: 227px;}

#bottomnavi dl { margin: 0; padding: 0 0 10px 12px; width: 187px; line-height: 1.5em; }
#bottomnavi dl.single { margin: 0; padding: 0 0 5px 12px; }
#bottomnavi dt { margin: 0; padding: 0 0 3px 0; font-size: 1.2em; font-weight: bold; text-transform: uppercase; }
#bottomnavi dt a:link, #bottomnavi dt a:visited {margin: 0; padding: 0; color: #000000; text-decoration: none;}
#bottomnavi dt a:hover, #bottomnavi dt a:active, #bottomnavi dt a.active
{margin: 0; padding: 0; color: #0044cc; text-decoration: none;}

#bottomnavi dd { margin: 0; padding: 0 0 2px 0; font-size: 1.2em;}
#bottomnavi dd a:link, #bottomnavi dd a:visited {margin: 0; padding: 0 0 0 8px; color: #666666; 
text-decoration: none; background-image: url(../images/arrow_gray.gif); background-repeat: no-repeat;}
#bottomnavi dd a:hover, #bottomnavi dd a:active, #bottomnavi dd a.active 
{margin: 0; padding: 0 0 0 8px; color: #0044cc; 
text-decoration: none; background-image: url(../images/arrow_blue.gif); background-repeat: no-repeat;}

#footer { margin: 0; padding: 15px 0 35px 0; clear: both; }
.btext { margin: 0; padding: 0; border-top: 1px solid #dddddd; width: 690px; float: left; }
.btext p { margin: 0; padding: 4px 0 0 0; color: #999999; font-size: 1.1em; }

.bottomlogo { margin: -20px 0 0 0; padding: 0; width: 140px; float: right;}
.bottomlogo span { display: none; }
.bottomlogo a:link, .bottomlogo a:visited {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/ateneum.gif); background-repeat: no-repeat; 
display: block; width: 122px; height: 31px;}
.bottomlogo a:hover, .bottomlogo a:active {margin: 0; padding: 0; text-decoration: none;
background-image: url(../images/ateneum.gif); background-repeat: no-repeat; 
display: block; width: 122px; height: 31px;}

#footer a:link, #footer a:visited {margin: 0; padding: 0; color: #0044cc; text-decoration: none;}
#footer a:hover, #footer a:active {margin: 0; padding: 0; color: #0044cc; text-decoration: underline;}

table.tekijat { margin: 0 0 14px 0; padding: 0; font-size: 1.2em; line-height: 1.5em; color: #444444; 
background-color: #cccccc;}
table.tekijat tr { margin: 0; padding: 0; background-color: #FFFFFF;}
table.tekijat td { margin: 0; padding: 3px; background-color: #FFFFFF;}

.sisennys { margin: 0; padding: 0 0 0 15px;  }

img { margin: 0; padding: 0;}
a img { margin: 0; padding: 0; text-decoration: none; border: none; }
.clear { margin: 0; padding: 0; clear: both;}
.clear2 { margin: 0; padding: 0 0 4px 0; clear: both;}
.tilaa { margin: 0; padding: 0; height: 15px;}
.tilaa_2 { margin: 0; padding: 0; height: 30px;}