@media all{

 body{
	padding: 0;
	font-family: verdana, arial, sans-serif;
	color: #000000;
	background: #ffffff;
	font-weight: normal;
	text-decoration: none;
 }

 img{
	font-family: verdana, arial, sans-serif;
	color: #505050;
	font-size: x-small;
	margin: 0;
 }

 p{
	line-height: 110%;
	font-size: 75%;
	text-decoration: none;
	color: #012c5f;
 }

/* Seuraavilla saat aikaan ison alkukirjaimen kappaleeseen */

 .anfang-up:first-letter{
	font-size: 2em;
	padding: 0 0.5ex 0 0.5ex;
 }

 .anfang-down:first-letter{
	font-size: 2em;
	float: left;
	padding: 0 0.5ex 0 0.5ex;
 }

 .invert-anfang-up:first-letter{
	font-size: 2em;
	padding: 0 0.5ex 0 0.5ex;
	background: #555;
	color: white;
 }

 .invert-anfang-down:first-letter{
	font-size: 2em;
	float: left;
	padding: 0 0.5ex 0 0.5ex;
	background: #555;
	color: white;
 }

 h1{
	font-size: 115%;
	font-weight: bold;
	text-align: left;
	color: #012c5f;
 }

 h2{
	font-size: 100%;
	font-weight: bold;
	color: #575757;
	text-align: left;
 }

 h3{
	font-size: 83%;
	font-weight: bold;
	color: #012c5f;
	text-align: left;
 }

 h4{
	line-height: 110%;
	font-size: 75%;
	text-decoration: none;
	color: black;
 }

 a{
  text-decoration: none;
	color: #c14129;
 }

 h3 a{
	text-decoration: none;
	color: #012c5f;
 }

 a img{
	border: none;
 }

 a:hover, .ylapalkki a:hover, .alapalkki a:hover, .sivupalkki a:hover {
	text-decoration: underline;
 }

 fieldset{
	border: 1px solid #003366;
	margin: 0.5ex;
	padding: 1ex 2ex;
 }

 legend{
	padding: 0 1ex;
	font-size: 75%;
	background: #c0ccd9;
	color: black;
	border: 1px solid #003366;
 }

 fieldset.tiivis p{
	float: left;
	margin: 1ex;
 }

 fieldset.painikkeet{
	background: #c0ccd9;
	text-align: center;
 }

 fieldset.painikkeet input{
	margin: 0ex 1ex;
 }

/* nämä siksi, että lomakkeet näyttäisivät samanlaisilta kaikissa selaimissa */
 input[type="text"], input[type="password"], input[type="file"], textarea{
	border: 1px solid #a0acb9;
 }

 ul, ol{
	line-height: 110%;
	font-family: verdana, arial, sans-serif;
	font-size: 75%;
	text-decoration: none;
	margin-top: 2ex;
	margin-bottom: 2ex;
 }

 .teksti ul li{
	margin-bottom: 1ex;
	list-style: circle outside;
 }

 .teksti ol li{
	margin-bottom: 1ex;
	list-style: decimal outside;
 }

 .teksti{
	background: white;
	margin: 0;
 }

/* Tasaa-luokat tasaa tekstin valitulla tavalla, mutta vain p- ja li-elementeille, sekä
   sen elementin p- ja li-jälkeläisille, joka luokkaa edustaa.
   Lisäksi on myös keskita-luokka. */

 p.tasaa, li.tasaa, td.tasaa, .tasaa p, ul.tasaa li{
	text-align: justify;
 }

 p.tasaa-vasen, li.tasaa-vasen, td.tasaa-vasen, .tasaa-vasen p, ul.tasaa-vasen li{
	text-align: left;
 }

 p.tasaa-oikea, li.tasaa-oikea, td.tasaa-oikea, .tasaa-oikea p, ul.tasaa-oikea li{
	text-align: right;
 }

 p.keskita, li.keskita, td.keskita, .keskita p, ul.keskita li{
	text-align: center;
 }

/* Huomioitavat asiat voivat olla huom-luokkaa. Tekee luokan esiintymästä blokin
   jonka ylä- ja alapuolelle jää hieman tyhjää ja jonka vasempaan laitaan tulee
   2 pikselin sininen palkki. Hyvä esimerkki olisi 'huom hyva' ja huono 'huom paha',
   joille palkkien värit ovat vihreä ja punainen. Huom-luokan sisällä b-tagi tekee
   tekstistä palkin värisen. Myös sanoja on mahdollista huomioida. */

 div.huom{
	display: block;
	border-left: 2px solid #161666;
	padding-left: 0.5ex;
	margin: 1ex 0 1ex 0;
 }


 div.huom b{
	display: block;
	color: #161666;
 }

 div.huom.hyva{
	border-left: 2px solid #166616;
 }

 div.huom.hyva b{
	color: #166616;
 }

 div.huom.paha{
	border-left: 2px solid #661616;
 }

 div.huom.paha b{
	color: #661616;
 }

 span.huom{
	background: #b0b0ff;
	font-weight: bolder;
 }

 span.huom.hyva{
	background: #b0ffb0;
 }

 span.huom.paha{
	background: #ffb0b0;
 }

 .black, .leipis {
	color: black;
 }
 .blue {
	color: #012c5f;
 }
 .white {
	color: #ffffff;
 }

/* Seuraavia voi käyttää ilmaisemaan eri muotoisia dokumentteja */

 .pdf-left{
	padding-left: 26px;
	background-image: url("http://www.jyu.fi/visualguide/pdf-icon.gif");
	background-repeat: no-repeat;
	background-position: 0% 50%;
 }

 .pdf-right{
	padding-right: 26px;
	background-image: url("http://www.jyu.fi/visualguide/pdf-icon.gif");
	background-repeat: no-repeat;
	background-position: 100% 50%;
 }

 .doc-left{
	padding-left: 26px;
	background-image: url("http://www.jyu.fi/visualguide/doc-icon.gif");
	background-repeat: no-repeat;
	background-position: 0% 50%;
 }

 .doc-right{
	padding-right: 26px;
	background-image: url("http://www.jyu.fi/visualguide/doc-icon.gif");
	background-repeat: no-repeat;
	background-position: 100% 50%;
 }

 .rtf-left{
	padding-left: 26px;
	background-image: url("http://www.jyu.fi/visualguide/rtf-icon.gif");
	background-repeat: no-repeat;
	background-position: 0% 50%;
 }

 .rtf-right{
	padding-right: 26px;
	background-image: url("http://www.jyu.fi/visualguide/rtf-icon.gif");
	background-repeat: no-repeat;
	background-position: 100% 50%;
 }

 .ppt-left{
	padding-left: 26px;
	background-image: url("http://www.jyu.fi/visualguide/ppt-icon.gif");
	background-repeat: no-repeat;
	background-position: 0% 50%;
 }

 .ppt-right{
	padding-right: 26px;
	background-image: url("http://www.jyu.fi/visualguide/ppt-icon.gif");
	background-repeat: no-repeat;
	background-position: 100% 50%;
 }

 .xls-left{
	padding-left: 26px;
	background-image: url("http://www.jyu.fi/visualguide/xls-icon.gif");
	background-repeat: no-repeat;
	background-position: 0% 50%;
 }

 .xls-right{
	padding-right: 26px;
	background-image: url("http://www.jyu.fi/visualguide/xls-icon.gif");
	background-repeat: no-repeat;
	background-position: 100% 50%;
 }

 .zip-left{
	padding-left: 26px;
	background-image: url("http://www.jyu.fi/visualguide/zip-icon.gif");
	background-repeat: no-repeat;
	background-position: 0% 50%;
 }

 .zip-right{
	padding-right: 26px;
	background-image: url("http://www.jyu.fi/visualguide/zip-icon.gif");
	background-repeat: no-repeat;
	background-position: 100% 50%;
 }

/* Seuraavaa voi käyttää liittämään sivulle linkkejä, jotka näkyvät vain kun tyylit eivät
   ole käytössä.. siis käytännössä tekstiselaimilla */
 .skip{
	position: absolute;
	left: -999px;
	width: 999px;
 }

 .ylapalkki a, .alapalkki a{
	text-decoration: none;
	font-weight: normal;
	color: #ffffff;
 }

 .sivupalkki ul{
	margin: 1ex 2.5ex 1ex 2.5ex;
	padding: 0px;
 }

 .sivupalkki li{
	font-size: 1.1em;
	list-style-type: none;
	display: block;
	line-height: 2.5ex;
	text-align: left;
	margin: 2.5ex 0ex 2.5ex 0ex;
	padding: 0px;
 }

 .sivupalkki p{
	color: #000000;
	text-align: left;
	font-weight: bold;
	font-size: 0.6em;
	line-height: 3.5ex;
	padding: 2ex 2.5ex 2ex 2.5ex; 
 }

 .sivupalkki a{
	text-decoration: none;
	color: #000000;
	font-weight: bold;
 }

/* Seuraavaksi pitkä pätkä linkkilaatikkoon liittyviä määrityksiä. Näin siksi, että
   sivun koodiin olisi mahdollista määritellä linkkilaatikon koko ja sijainti luonnollisella
   kielellä. esim: "lyhyt sininen linkkilaatikko oikealle alemmas" tai
   "keskipitka linkkilaatikko vasemmalle vahan_ylemmas".
*/

 .oikealle{
	float: right;
 }

 .vasemmalle{
	float: left;
 }

 .pitka{
	width: 25ex !important;
 }

 .keskipitka{
	width: 20ex !important;
 }

 .lyhyt{
	width: 15ex !important;
 }

 .pitka50{
	width: 50% !important;
 }

 .pitka45{
	width: 45% !important;
 }

 .pitka40{
	width: 40% !important;
 }

 .pitka35{
	width: 35% !important;
 }

 .pitka30{
	width: 30% !important;
 }

 .sininen{
	background: #c0ccd9;
	border-top: 1px solid #e0ecf9;
	border-right: 1px solid #e0ecf9;
	border-bottom: 1px solid #a0acb9;
	border-left: 1px solid #a0acb9;
 }

 .linkkilaatikko{
	margin: 1ex 1ex 3ex 1ex;
	padding: 0;
 }

 .linkkilaatikko h2{
	text-align: center;
	font-size: 0.8em;
	margin: 0;
	color: white;
	background: #003366;
 }

 .linkkilaatikko ul{
	margin: 0.5ex 2ex 1ex 2ex;
	padding: 0;
 }

 .linkkilaatikko.oikealle, .oikealle .linkkilaatikko{
	margin-right: 0;
 }

 .linkkilaatikko.vasemmalle, .vasemmalle .linkkilaatikko{
	margin-left: 0;
 }

 .alemmas{
	margin-top: 5ex !important;
 }

 .ylemmas{
	margin-top: -5ex !important;
 }

 .vahan_alemmas{
	margin-top: 3ex !important;
 }

 .vahan_ylemmas{
	margin-top: -3ex !important;
 }

 .paljon_alemmas{
	margin-top: 8ex !important;
 }

 .paljon_ylemmas{
	margin-top: -8ex !important;
 }

 .linkkilaatikko ul li{
	margin-left: 3ex;
	line-height: 1.8em;
	list-style: disc outside;
 }

 .linkkilaatikko ul li a{
	color: #003366;
	font-weight: bold;
 }

 .linkkilaatikko ul li:hover{
	list-style: circle outside;
 }

 .sisalto table{
	border: 0px;
	padding: 0px;
	margin: 0.5ex 0ex 0.5ex 0ex;
	text-align: left;
	background: #ffffff;
 }

 table td{
	vertical-align: top;
 }

 .teksti td img{
	margin: 0;
 }

 .sisalto table td, .sisalto table th{
	line-height: 110%;
	font-size: 75%;
	text-decoration: none;
	color: #012c5f;
 }

 .sisalto table.nakyy, table.nakyy{
	border: 1px solid #003366;
	border-collapse: collapse;
 }
 
 table.nakyy caption{
  font-weight: bold;
  background: #c0ccd9; 
  padding:0.5em; 
  border: 1px solid #003366; 
  border-bottom: none;
 }

 table.nakyy td{
	padding: 0.3ex 1ex;
	border-left: 1px dashed #003366;
	border-right: 1px dashed #003366;
	border-top: 1px solid #003366;
	border-bottom: 1px solid #003366;
 }

 table.nakyy th{
	padding: 0.3ex 1ex;
	background: #c0ccd9;
	color: #003366;
	font-weight: bold;
	border: 1px solid #003366;
 }

 table.nakyy td.reunaton{
	border: 0;
 }

 .uutiset a, a.uutiset{
	text-decoration: underline;
 }

 .uutiset a:hover, a.uutiset:hover{
	text-decoration: none;
 }

 span.oikealle{
	display: inline;
	float: right;
	padding: 0;
	margin: 0;
	border: 0;
 }

 .sisalto img{
	display: inline;
	float: right;
	padding: 0;
	margin-left: 1ex;
	margin-bottom: 1ex;
	margin-top: 1ex;
	border: 0;
 }

 .soihtu{
	padding: 0;
	height: 70px;
	width: 40px;
	background: #003366;
	vertical-align: top;
 }

 .paaotsikko{
	background: white;
	height: 46px;
	vertical-align: top;
 }

}

@media screen, handheld{

 .ylapalkki{
	padding: 0 10px 0 10px;
	background: #003366;
	height: 24px;
	line-height: 2em;
	text-align: left;
	color: white;
	font-size: 0.75em;
 }

 .alapalkki{
	background: #003366;
	height: 24px;
	text-align: left;
	font-size: 0.75em;
	line-height: 2em;
 }

 .pad{
	padding-left: 50px !important;
 }

}

@media screen{

 body{
	margin: 1ex 1ex 5ex 1ex;
 }

 .paaotsikko h1{
	padding: 0px;
	margin: 0px;
 }

 .marginaali50o{
	margin-right: 53%;
 }

 .marginaali50v{
	margin-left: 53%;
 }

 .marginaali45o{
	margin-right: 48%;
 }

 .marginaali45v{
	margin-left: 48%;
 }

 .marginaali40o{
	margin-right: 43%;
 }

 .marginaali40v{
	margin-left: 43%;
 }

 .marginaali35o{
	margin-right: 38%;
 }

 .marginaali35v{
	margin-left: 38%;
 }

 .marginaali30o{
	margin-right: 33%;
 }

 .marginaali30v{
	margin-left: 33%;
 }

 .marginaalipitkao{
	margin-right: 29ex;
 }

 .marginaalipitkav{
	margin-left: 29ex;
 }

 .marginaalikeskipitkao{
	margin-right: 24ex;
 }

 .marginaalikeskipitkav{
	margin-left: 24ex;
 }

 .marginaalilyhyto{
	margin-right: 19ex;
 }

 .marginaalilyhytv{
	margin-left: 19ex;
 }

 .wide{
	width: 700px;
 }

 .paikoillaan{
	position: fixed;
 }

/* Seuraavissa asetetaan position: relative IE 6:n peekaboo-bugin takia... */

 .sisalto{
	position: relative;
	padding: 15px 0 15px 50px;
	background: white;
 }

 .oikealle{
	position: relative;
 }

 .vasemmalle{
	position: relative;
 }

 .relative{
	position: relative;
 }

}

@media handheld{

 body{
	margin: 0;
 }

 .wide{
	width: 100%;
 }

 .paaotsikko img, .soihtu img{
	display: none;
 }

 .sisalto{
	padding: 1ex 0.2ex 1ex 0.2ex;
 }

 .sivupalkki ul{
	margin: 0;
 }

 .sivupalkki li{
	margin: 1ex 0.2ex 1ex 0.2ex;
 }

 .koriste{
	display: none;
 }

 .kuvapalkki{
	display: none;
 }

}

@media print{

 body{
	margin: 0;
 }

 .ylapalkki{
	display: none;
 }

 .alapalkki{
	display: none;
 }

 .wide{
	width: 100%;
 }

 .sivupalkki{
	display: none;
 }

 .paaotsikko img, .soihtu{
	display: none;
 }

/* koriste on luokka, jota ei näytetä tulostettaessa tai kämmenkoneilla */
 .koriste{
	display: none;
 }

 .linkkilaatikko{
	display: none;
 }

 .kuvapalkki{
	display: none;
 }

 .skip{
	display: none;
 }

/* Seuraavia ei tarvitse näyttää tulostuksessa */
 .pdf-left, .doc-left, .zip-left, .ppt-left, .xls-left, .rtf-left{
	padding-left: 0;
	background-image: none;
 }

 .pdf-right, .doc-right, .zip-right, .ppt-right, .xls-right, .rtf-right{
	padding-right: 0;
	background-image: none;
 }

}