@font-face
{
font-family: Myriad;
src: url('../fonts/myriadregular.woff');
font-style: normal;
}

@font-face
{
font-family: Myriad;
src: url('../fonts/myriadbold.woff');
font-weight: bold;
}

@font-face
{
font-family: Myriad;
src: url('../fonts/myriaditalic.woff');
font-style: italic;
}

@font-face
{
font-family: Perpetua;
src: url('../fonts/perpetualight.woff');
font-style: normal;
}

@font-face
{
font-family: Agency;
src: url('../fonts/agency.woff');
}

@font-face
{
font-family: Grandia;
src: url('../fonts/Grandia.woff');
}

@font-face
{
font-family: Flokison;
src: url('../fonts/Flokison.woff');
}

a 				{text-decoration: none; color: #333355; border: 0px;}
a:hover 		{color: #aaaaaa;}
img				{border: 0px;}
input,select 	{
					font-size: 10px;
					color: #000000;
					height: 24px;
    				padding: 0px;
    				margin:0px;
				}
table,td		{display: table-cell; font-size: 12px; font-family: Myriad, Arial; color: #222222; vertical-align: top; padding: 0px;} 

.alaosa			{}
.border			{padding: 0px 0px 0px 0px; border: 1px solid #afafaf;}
.container		{text-align: center; margin: auto; width: 100%;}
.harmaa			{}
.hlharmaa		{color: #ffffff; background-color: #8fbbd6; padding-left: 30px;} //highlight-harmaa
.hl				{color: #ffffff; background-color: #79a7d6; padding-left: 30px;} //highlight-väri
.iso			{font-size: 18px;}
.johtaja 		{font-weight: bold;}
.laji			{padding-left: 23px;}
.lajiitem		{font-family: Myriad, Arial; font-size: 11px; color: #585858;}
.lajilistaus 	{}
.lajivalikko	{width: 160px; height: 18px; padding-top: 3px; padding-bottom: -8px; margin-bottom: -8px;}
.lomakenappi	{
					height: 26px;
					padding: 3px;
					background-color: #f4f4f3;
					font-family: Myriad, Arial;
					border: 1px solid #bebebe;
					border-radius: 0px;
				}
.navinappi		{opacity: 1.0;}
.navinappi:hover{opacity: 0.7;}
.ok				{height: 18px; padding: 0px;}
.opacity90		{opacity: 0.9; filter: alpha(opacity=90);}
.opaque			{opacity: 1.0; filter: alpha(opacity=100);}
.otsake 		{color: #222222;}
.paivays		{padding-bottom: 6px; padding-right: 16px;}
.palegrey		{
					float: left;
					width: 87px;
					padding-top: 2px;
					font-weight: bold;
					font-size: 10px;
					color: #999999;
				}
.pieni			{font-size: 10px;}
.sininen 		{background-color: #8fb1db;}
.sisaltotaulukko{background-image: url('kuvat20/$logokuva.jpg'); background-repeat: no-repeat;}
.spclass 		{background-color: #777777; color: #222222; filter: alpha(opacity=80); opacity: 0.8; padding-left: 23px;}
.splajiteksti	{color: #333333; z-index: 9; opacity: 1.0;}
.taulukkorivi_a	{background-color: #a8b4c1;}
.taulukkorivi_n	{background-color: transparent}
.tkkuva			{opacity: 1.0; filter: alpha(opacity=100);}
.tkkuva:hover	{opacity: 0.7; filter: alpha(opacity=70);}
.transparent	{opacity: 0.1; filter: alpha(opacity=10);}
.tumma			{color: #333333;}
.tyokalut		{position: absolute; left: 144px; top: 440px; z-index: 10;}
.vaalea			{color: #444444;}
.vaalea2		{color: #565656;}
.valitsin_valittu 	{
						font-weight: bold;
						color: #ffffff;
						background-color: #254751;
					}
.vasenotsake	{
					font-family: Agency, Arial;
					font-size: 11px; padding-left: 12px;
					padding-top: 3px;
					background-color: #254751;
					color: #fff;
					letter-spacing: 1px;
				}
.vasensisalto	{padding-left: 14px; opacity: 0.9;}
.voittaja		{background-color: #e2e2e2; color: #666666; font-weight: bold;}
.ylaindeksi		{color: #888888; font-size: 8px; font-weight: bold;}

#copyright		{
					position: fixed;
					display: table-cell;
					vertical-align: center;
					left: 0px;
					bottom: 0px;
					width: 100%;
					text-align: center;
					z-index: 13;
					font-size: 11px;
					padding: 6px;
					background-color: #254751;
					color: #bebebe;
					opacity: 0.7;
					filter: alpha(opacity=70);
				}
#ekolinkki		{}
#hakutoiminto	{width: 200px; height: 18px; border-radius: 0px; border: 1px solid #87a7cd; font-size: 11px; padding: 3px;}
#headerbg		{	background-color: #254751;
					opacity: 0;
					filter: alpha(opacity=0);
					z-index: 10;
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 98px;
				}
#headercontainer{
					position: absolute;
					width: 100%;
					margin: auto;
					z-index: 10;
				}				
#himmennin		{display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #ffffff; opacity: 0.3; filter: alpha(opacity=30); visibility: hidden; z-index: 11;}
#lajimenu		{text-align: left; visibility: visible; width: 120px; height: 30px;}
#leftlogo		{position: absolute; left: 0px; top: 0px; z-index: 10; opacity: 0.6; filter: alpha(opacity=60);}
#logoimage		{position: absolute; z-index: 99;}
#llcorner		{
					position: fixed;
					left: 0px;
					bottom: 0px;
					z-index: 1;
					background-image: url('lowerleftcorner_wide.jpg');
					background-repeat: no-repeat;
					background-size: 100% 430px;
					width: 100%;
					height: 430px;
}
#napit			{width: 263px; height: 107px; z-index: 11;} //lomake
#navikkonapit	{position: relative; top: 0px; left: -15px; z-index: 10;}

#oikeaala		{position: absolute; right: 0px; bottom: 0px; width: 140px; height: 175px; opacity: 0.5; filter: alpha (opacity=50); background-repeat: no-repeat; z-index: 7;}
#paivamaara		{
					position: absolute;
					font-family: Arial;
					font-size: 12px;
					letter-spacing: 0px;
					right: 41px;
					top: 25px;
					z-index: 99;
					color: #fff;
					padding: 15px 5px 3px 5px;
					height: 22px;
					border-radius: 0px;
					-moz-border-radius: 0px;
					opacity: 0.9;
					filter: alpha(opacity=90);
				}


/* placeholder pale greys fow all browsers */
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

/* responsively positioned elements */
/*wide screen*/
@media all and (min-width: 1240px) {
	
.erotin			{
					height: 1px;
					text-align: left;
					width: 800px;
					margin-top: 5px;
					margin-bottom: 5px;
					border-top: 1px solid #bebebe;
				}
#hakukentta		{position: absolute; top: 30px; left: 570px; z-index: 10;}
#hakutoiminto	{width: 185px;}
#iconplaceholder {
					position: absolute;
					left: 110px;
					top: 248px;
					z-index: 12;
}
#iconplaceholder2 {
					position: absolute;
					left: 300px;
					top: 239px;
					z-index: 12;
}

#ladataan		{position: absolute; left: 25px; top: 20px; display: none; z-index: 9; opacity: 0.6; filter: alpha (opacity=60);}
#navituoreet	{position: absolute; left: 330px; top: 25px; z-index: 10;}
#navikertymat	{position: absolute; left: 380px; top: 25px; z-index: 10;}
#navihistoria	{position: absolute; left: 430px; top: 25px; z-index: 10;}
#navihaku		{position: absolute; left: 480px; top: 25px; z-index: 10;}
#navivalike		{position: absolute; left: 540px; top: 25px; border-left: 1px solid #bebebe; width: 1px; height: 42px; z-index: 10;}
#osiootsikko	{
					position: relative;
					text-align: left;
					font-family: Agency, Arial;
					letter-spacing: 2px;
					font-size: 18px;
					border-radius:  0px 0px 0px 5px;
					background-color: #254751;
					color: #fff;
					top: 36px;
					z-index: 12;
					margin: 0 auto;
					width: 780px;
					height: 26px;
					padding: 9px 17px 5px 17px;
					opacity: 0.8;
					filter: alpha(opacity=80);
				}
#sisalto		{
					position: relative;
					top: 5px;
					padding: 17px;
					z-index: 10;
					width: 798px;
					top: -16px;
					text-align: left;
					border-radius: 0px;
					padding-top: 58px;
					border: 1px solid #dedede;
					background-color: #fff;
					margin: 0 auto;
				}
#sivutus		{
					position: relative;
					width: 50px;
					margin: 0 auto;
					left: 370px;
					top: 45px;
					z-index: 13;
					color: #fff;
}
#sivutus_vasen		{
					position: absolute;
					left: 0px;
					top: 0px;
					width: 22px;
					height: 22px;
					background-color: #9eb4cc;
					text-align: center;
					padding-top: 2px;
					border-radius: 0px 0px 0px 5px;
					cursor: pointer;
					font-weight: bold;
					}
#sivutus_oikea		{
					position: absolute;
					left: 27px;
					top: 0px;
					width: 22px;
					height: 22px;
					padding-top: 2px;
					background-color: #9eb4cc;
					text-align: center;
					border-radius:  0px 5px 0px 0px;
					cursor: pointer;
					font-weight: bold;
}
#sivutus_vasen:hover, #sivutus_oikea:hover {
					opacity: 0.8;
					}
 
#tilanne			{
					font-size: 11px;
					color: #111;
					position: absolute;
					left: 5%;
					left: calc(10% - 130px);
					top: 116px;
					border: 1px solid #dedede;
					border-radius: 0px;
					-moz-border-radius: 0px;
					z-index: 10;
					padding: 10px;
					background-color: #fff;
					}
#tilanneotsikko		{
					font-size: 18px;
					letter-spacing: 2px;
					background-color: #254751;
					opacity: 0.8;
					border-radius: 0px 0px 0px 5px;
					color: #fff;
					letter-spacing: 2px;
					padding-bottom: 5px;
					}
#tyokaluvalikko {
					position: absolute;
					text-align: center;
					top: 5px;
					left: 0px;
					z-index: 9;
					width: 100%;
					margin: auto;
				}
#valitsin_abc	{
					cursor: pointer;
					background-color: #f5f5f5;
					position: absolute;
					top: 0px;
					left: 0px;
					width: 40px;
					padding: 2px;
					border: 1px solid #111111;
					z-index: 10;
				}
#valitsin_syst	{
					cursor: pointer;
					background-color: #f5f5f5;
					border-radius: 0px;
					position: absolute;
					top: 25px;
					left: 0px;
					width: 40px;
					padding: 2px;
					border: 1px solid #111111;
					z-index: 10;
				}				
#valitsintool	{
					position: absolute;
					left: 790px;
					top: 20px;
					width: 30px;
					text-align: center;
					z-index: 10;
				}
} /* end, wide screen */
/* narrow screen: */
@media all and (max-width: 1239px) {

.erotin			{
					height: 1px;
					text-align: left;
					width: 100%;
					margin-top: 5px;
					margin-bottom: 5px;
					border-top: 1px solid #bebebe;
				}
.vasenotsake	{
					font-family: Agency, Arial;
					font-size: 12px; padding-left: 12px;
					padding-top: 5px;
					background-color: #68777b;
					color: #fff;
					letter-spacing: 1px;
				}				
#hakukentta		{position: absolute; top: 170px; left: 0px; z-index: 10;}
#hakutoiminto	{width: 252px;}
#headerbg		{	background-color: #68777b;
					opacity: 0.5;
					filter: alpha(opacity=50);
					z-index: 10;
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 240px;
				}
#iconplaceholder {
					position: absolute;
					left: 280px;
					top: 82px;
					z-index: 12;
}
#iconplaceholder2 {
					position: absolute;
					left: 10px;
					top: 278px;
					z-index: 12;
}

#leftlogo		{display: none}
#logoimage		{position: absolute; margin-top: 5px; z-index: 99;}


#ladataan		{position: absolute; left: 25px; top: 20px; display: none; z-index: 9; opacity: 0.6; filter: alpha (opacity=60);}
#navituoreet	{position: absolute; left: 0px; top: 110px; z-index: 10;}
#navikertymat	{position: absolute; left: 50px; top: 110px; z-index: 10;}
#navihistoria	{position: absolute; left: 100px; top: 110px; z-index: 10;}
#navihaku		{position: absolute; left: 150px; top: 110px; z-index: 10;}
#navivalike		{position: absolute; left: 202px; top: 110px; border-left: 1px solid #bebebe; width: 1px; height: 42px; z-index: 10;}

#osiootsikko	{
					position: relative;
					text-align: left;
					font-family: Agency, Arial;
					letter-spacing: 2px;
					font-size: 14px;
					border-radius: 0px;
					min-width: 500px;
					background-color: #254751;
					color: #fff;
					top: 146px;
					z-index: 12;
					width: 780px;
					height: 26px;
					padding: 9px 17px 5px 17px;
					opacity: 0.8;
					filter: alpha(opacity=80);
					margin: 0 auto;
				}
				
#paivamaara		{
					display: none;
				}	

#sisalto		{
					position: relative;
					min-width: 550px;
					padding-left: 7px;
					z-index: 10;
					text-overflow: ellipsis;
					padding: 17px;
					z-index: 10;
					width: 798px;
					top: 96px;
					text-align: left;
					border-radius: 0px;
					padding-top: 58px;
					border: 1px solid #dedede;
					background-color: #fff;
					margin: 0 auto;
				}
#sivutus		{
					position: relative;
					width: 50px;
					margin: 0 auto;
					left: 370px;
					top: 155px;
					z-index: 13;
					color: #fff;
}
#sivutus_vasen		{
					position: absolute;
					left: 0px;
					top: 0px;
					width: 22px;
					height: 22px;
					background-color: #9eb4cc;
					padding-top: 2px;
					border-radius: 0px 0px 0px 5px;
					text-align: center;
					cursor: pointer;
					z-index: 10;
					font-weight: bold;
}
#sivutus_oikea		{
					position: absolute;
					left: 25px;
					top: 0px;
					width: 22px;
					height: 22px;
					padding-top: 2px;
					background-color: #9eb4cc;
					border-radius:  0px 5px 0px 0px;
					text-align: center;
					cursor: pointer;
					z-index: 10;
					font-weight: bold;
}
#sivutus_vasen:hover, #sivutus_oikea:hover {
					opacity: 0.8;
}

#tilanne		{
					text-align: left;
					background-color: #254751;
					margin: auto;
					font-size: 11px;
					color: #111111;
					position: absolute;
					left: calc(335px + 14%);
					top: 5px;
					border-radius: 0px;
					-moz-border-radius: 0px;
					z-index: 100;
					padding-top: 10px;
					background-color: #fff;
					padding: 7px;
					opacity: 0.9;
					float: left;
					border: 1px solid #dedede;
					margin-left: 2px;
					max-height: 205px;
					min-width: 120px;
					opacity: 0.9;
					overflow-y: hidden;					
					
				}
#valitsin_abc	{
					cursor: pointer;
					border: 1px solid #777777;
					position: absolute;
					top: 0px;
					left: 0px;
					width: 40px;
					padding: 2px;
					z-index: 10;
				}
#valitsin_syst	{
					cursor: pointer;
					border: 1px solid #777777;
					border-radius: 0px;
					position: absolute;
					top: 25px;
					left: 0px;
					width: 40px;
					padding: 2px;
					z-index: 10;
				}				
#valitsintool	{
					position: absolute;
					left: 212px;
					top: 105px;
					width: 40px;
					text-align: center;
					margin: 2px;
					background-color: #777777;
				}
} /* end, narrow screen */