/*---------------------*/
/*Common initialization*/
/*---------------------*/
html, body, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, 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, img {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
html {
	height: 100%;
}
body {
	font-family: Arial, sans-serif;
	font-size: 75%;
	line-height:1.2;
}
a, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration:none;
}
@font-face {
	font-family: 'vrk-icons';
	src: url('web/fonts/vrk-icons.eot');
}
@font-face {
	font-family: 'vrk-icons';
	src: url('web/fonts/vrk-icons.eot?iefix') format('embedded-opentype'),
		url('web/fonts/vrk-icons.svg#vrk-icons') format('svg'), 
		url('web/fonts/vrk-icons.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

[class*="vrk-icon-"] {
	font-family: 'vrk-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/*---------------------*/
/*Page main blocks*/
/*---------------------*/
.body
{
	border-top: solid 8px #003399;
	width:100%;
}
/*.page-wrapper {
	width: 942px;
	margin: 0 auto;
}*/
.page-header
{
		width: 942px;
	margin: 0 auto;
}
.page-body
{
	display:block;
		width: 942px;
	margin: 0 auto;
	min-height: 440px;
	position:relative;
}
.page-footer
{
		width: 942px;
	margin: 0 auto;
	margin-top:10px;
}
.page-banner
{
			width: 942px;
	margin: 0 auto;
}
/*---------------------*/
/*Page header logo*/
/*---------------------*/
.header-logo
{
	display:inline-block;
	width:236px;
	height:111px;
	vertical-align:top;
	padding-top:25px;
}
.header-logo a
{
	display:block;
	padding: 80px 0 0 0;
	height:80px;
    margin: 0 auto;
	background:url('web/img/vrk-logo.svg') no-repeat center top;
}
html.no-svg .header-logo a
{
	background:url('web/img/vrk-logo.png') no-repeat center top;
}
.header-logo img
{
	padding-top: 25px;
	display: block;
    margin: 0 auto;
	border:0;
}
.header-logo span
{
	display:block;
	font-size:12px;
	color:#000000;
	font-weight:bold;
	text-align:center;
}
/*---------------------*/
/*Page header tools*/
/*---------------------*/
.header-tools
{
	display:inline-block;
	width:702px;
	vertical-align:top;
	margin-top:12px;
	line-height:34px;
}
.header-tools a,
.header-tools a:visited
{
	color: #003399;
}
.shortcut
{
	padding:0 8px 0 0;
}
.shortcut:before,
.shortcut .before 
{
	display:inline-block;
	padding-right: 5px;
	font-size:130%;
	text-align:left;
	vertical-align:text-bottom;
	width:10px;
	color: #82a8cf;
	font-family: 'vrk-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e603";
}
.sitelink
{
	padding:0 5px 0 17px;
	background-image: url('web/img/flags.svg');
	background-repeat: no-repeat;
}
html.no-svg .sitelink
{
	background-image: url('web/img/flags.png');
}
.sitelink-fi
{
	background-position: left -5px;
}
.sitelink-sv
{
	background-position: left -25px;
}
.sitelink-en
{
	background-position: left -45px;
}
.search-tools
{
	float:right;
	line-height:1;
	height:74px;
}
.search-tools > div
{
	vertical-align:middle;
}
.search-field-box
{
	border: solid 1px #d3d3c0;
	border-radius:16px;
	display:inline-block;
	line-height: 1.2;
}
.search-field
{
	padding: 8px 0 8px 0px;
	margin:0 0 0 14px;
	border: solid 1px #d3d3c0;
	border-radius:16px;
	outline: 0;
	width: 130px;
	height:16px;
	vertical-align:middle;
	position:relative;
	border:0;
}
.search-button:before,
.search-button .before 
{
	display:inline-block;
	vertical-align:middle;
	font-size:16px;
	padding-right:5px;

	color: #00539F;
	font-family: 'vrk-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e600";
}
.zoom-tools
{
	display:inline-block;
	line-height:1.2;
}
.sitelinks
{
	text-align:right;
	margin-top:17px;
}
.zoom-tools a
{
	display:block;
	text-align:left;
}
.zoom-tools a:before,
.zoom-tools a .before
{
	padding-right:3px;
	display:inline-block;
	color: #00539F;
	font-size:10px;
	font-family: 'vrk-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.zoom-in:before 
{
	content: "\e602";
}
.zoom-out:before 
{
	content: "\e605";
}
/*---------------------*/
/*Page header mainnavi*/
/*---------------------*/
.mainnavi
{
	display:table;
	width:100%;
	border-collapse:collapse;
	line-height:1.2;
}
.mainnavi ul {
	font-size:0;
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;

  display:table-row;
}
.mainnavi li {
	font-size:12px;
	display:inline-block;
	list-style: none;
	background-color: #82a8cf;
	vertical-align:top;
	text-align:left;
	display:table-cell;
}
.mainnavi a,
.mainnavi a:visited {
	display:block;
	color: #ffffff;
	text-decoration: none;
	padding: 9px 12px 9px 12px;
	height: 28px;
}
.mainnavi a:hover,
.mainnavi a:visited:hover {
	background: rgba(255,255,255,0.3);
	background: rgba(0,0,0,0.2);
}
.mainnavi li:first-child a:hover,
.mainnavi li:first-child a:visited:hover {
	border-radius: 5px 0 0 5px;
}
.mainnavi li:last-child a:hover,
.mainnavi li:last-child a:visited:hover {
	border-radius: 0 5px 5px 0;
}
/*---------------------*/
/*Page body content*/
/*---------------------*/
.sidenavi-section
{
	display:inline-block;
	vertical-align:top;
	width: 236px;
}
.sidenavi-section ul
{
	list-style:none;
}
.sidenavi-section ul a:hover,
.sidenavi-section ul a:visited:hover
{
	text-decoration:underline;
}
.content-section
{
	display:inline-block;
	vertical-align:top;
	width:480px;
	margin: 36px 0 10px 25px;
}
.content-section .breadcrumbs
{
	line-height: 15px;
	height: 30px;
	position:relative;
}
.content-section .breadcrumbs div
{
	position: absolute;
	width:600px;
}
.content-section .content a
{
	text-decoration:underline;
}
.content-section .content a:visited
{
	color:#d16d24 ;
}
.content-info-section
{
	position:absolute;
	right:0px;
	top:0px;
	width:182px;
	margin-top:69px;
}
.content
{
	padding-right:15px;
	padding-bottom:15px;
}
/*---------------------*/
/*Coverpage current issues styles*/
/*---------------------*/
.current-issues h3
{
	color: #003399;
	font-size: 120%;
	font-weight: normal;
	margin: 10px 0 20px 6px;
}
.current-issues ul
{
	margin:0 20px 0 6px;
	line-height:1.3;
	font-size: 109%;
}
.current-issues ul a
{
	display:block;
}
.current-issues ul a,
.current-issues ul a:visited
{
	color: #003399;
}
.current-issues li
{
	padding-left: 1em;
	margin-bottom: 10px;
}
.current-issues li:before,
.current-issues li .before
{
	position:absolute;
	left:0px;
	display:block;
	vertical-align:text-bottom;
	font-size:130%;
	color: #82a8cf;
	font-family: 'vrk-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e603";
}
.current-issues li:last-child
{
	background:none;
}
/*---------------------*/
/*Coverpage quick links styles*/
/*---------------------*/
.quick-links h3
{
	color: #003399;
	font-size: 170%;
	margin: 10px 0 10px 0;
}
.quick-links ul
{
	display:inline-block;
	vertical-align:top;
	list-style: none;
	margin:0;
	padding:0;
	font-size:109%;
width: 235px;
}
.quick-links li
{
	padding:0 0 15px 2em;
	position:relative;
	word-wrap:break-word;
}
.quick-links li:before,
.quick-links li .before
{
	position:absolute;
	left:0;
	top:0;
	color: #82a8cf;
	font-size: 160%;
	cursor:default;
	font-family: 'vrk-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e606";
}
.quick-links ul a,
.quick-links ul a:visited
{
	font-size: 108%;
	color: #003399;
	display:block;
	padding: 2px 0 2px 0;
}
.quick-links ul a:hover,
.quick-links ul a:visited:hover
{
	text-decoration: underline;
}
/*---------------------*/
/*Coverpage banner styles*/
/*---------------------*/
.page-banner
{
	line-height:100px;
	height:120px;
	border: solid 1px #d3d3c0;
	border-radius: 5px;
}
.page-banner a
{
	display:inline-block;
	vertical-align:middle;
	margin:10px;
}
/*---------------------*/
/*Coverpage alternating image styles*/
/*---------------------*/
.changing-image
{
	margin-top:80px;
}
.changing-image img
{
	position:absolute;
	right:0;
	top:0;
	-webkit-transition: opacity 3s ease-in-out;
	-moz-transition: opacity 3s ease-in-out;
	-o-transition: opacity 3s ease-in-out;
	transition: opacity 3s ease-in-out;
}
.content-info-section .opaque
{
	opacity:0;
}
/*---------------------*/
/*Content page sidenavi styles*/
/*---------------------*/
.sidenavi li
{
	color: #000000;
}
.sidenavi a.active,
.sidenavi a.active:visited
{
	color: inherit;
}
.sidenavi h3
{
	margin: 36px 0px 20px 0px;
	line-height:1.2;
}
.sidenavi h3 a,
.sidenavi h3 a:visited
{
	display:block;
	color: #ffffff;
	padding: 8px 5px 8px 15px;
}
.sidenavi-content
{
	font-size: 109%;
}
.sidenavi ul
{
	margin-left:15px;
}
.sidenavi li
{
	margin-top:5px;
	padding-left: 1em;
	position:relative;
}
.sidenavi li:before,
.sidenavi li .before
{
	position:absolute;
	left:0px;
	display:block;
	vertical-align:text-bottom;
	color: #82a8cf;
	font-family: 'vrk-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e603";
}
.sidenavi li.navi-open:before
{
	color: #000000;
}
.sidenavi li li
{
	font-size:85%;
	padding-left:0;
}
.sidenavi li li li
{
	font-size:100%;
	padding-left:0;
}
.sidenavi li li:before
{
	content: none;
}
.sidenavi li.underline
{
	border-bottom: dotted 1px #000000;
	padding-bottom:10px;
	margin-bottom:10px;
	margin-right:30px;
}
/*---------------------*/
/*Content page related info styles*/
/*---------------------*/
.content-related-info
{
	/*border: solid 1px #d3d3c0;
	border-radius: 5px;*/
	padding:10px;
	line-height:1.4;
}
.content-related-info h3
{
	font-weight:normal;
	color: #003399;
	padding: 0 0 10px 0;
	line-height:140%;
	white-space:nowrap;
}
.content-related-info h3:before,
.content-related-info h3 .before
{
	vertical-align:middle;
	margin-right:3px;
	color: #82a8cf;
	font-size: 140%;
	font-family: 'vrk-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e606";
}
.content-related-info a,
.content-related-info a:visited
{
	display:inline-block;
	padding: 0 0 2px 1em;
	position:relative;
	word-wrap:break-word;
	width: 145px;
}
.content-related-info a:hover,
.content-related-info a:visited:hover
{
	text-decoration: underline;
}
.content-related-info a:before,
.content-related-info a.before
{
	position:absolute;
	left:0px;
	font-size: 120%;
	vertical-align:text-bottom;
	color: #82a8cf;
	font-family: 'vrk-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e603";
	text-decoration:none;
	display:block;
}
.content-related-info a:hover:before,
.content-related-info a:visited:hover:before
{
	text-decoration:none;
	clip: rect(0px 1em 1em 0px);
}
/*---------------------*/
/*Content tools styles*/
/*---------------------*/
.content-tool-back,
.content-tool-print
{
	display:inline-block;
	border:solid 1px #d3d3c0;
	border-radius: 5px;
	margin-right: 5px;
	
}
.content-tool-back:before,
.content-tool-back .before,
.content-tool-print:before,
.content-tool-print .before
{
	vertical-align:middle;
	color: #00539F;
	font-size: 26px;
	font-family: 'vrk-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.content-tool-back:before,
.content-tool-back .before
{
	content: "\e604";
}
.content-tool-print:before,
.content-tool-print .before
{
	content: "\e601";
}

/*---------------------*/
/*Page footer content*/
/*---------------------*/
.footer-shortcuts
{
	line-height: 36px;
	margin-left: 15px;
}
.footer-shortcuts a,
.footer-shortcuts a:visited
{
	color: #003399;
}
.footer-line
{
	height:9px;
	background-color: #003399;
	border-radius: 5px;
	margin:0;
}
.footer-addresses p
{
	display:inline-block;
	vertical-align:top;
	margin: 10px 40px 10px 15px;
}
.footer-addresses .copyright
{
	float:right;
	margin-right:15px;
}

/* navigation section colours */
.mainnavi li:first-child {
	border-radius: 5px 0 0 5px;
}
.mainnavi li:last-child {
  border-radius: 0 5px 5px 0;
}
.sidenavi-header
{
	background-color: #82a8cf;
	border-radius: 15px;
}
/*Palvelut kansalaisille*/
.mainnavi .mainnavi-75,
.mainnavi-75 .sidenavi-header,
.mainnavi .mainnavi-218,
.mainnavi-218 .sidenavi-header,
.mainnavi .mainnavi-49,
.mainnavi-49 .sidenavi-header
{
	background-color: #82a8cf;
}
.mainnavi-75 .navi-open,
.mainnavi-75 li:hover,
.mainnavi-218 .navi-open,
.mainnavi-218 li:hover,
.mainnavi-49 .navi-open,
.mainnavi-49 li:hover
{
	color: #82a8cf;
}
/*Palvelut julkishallinnolle*/
.mainnavi .mainnavi-110,
.mainnavi-110 .sidenavi-header,
.mainnavi .mainnavi-252,
.mainnavi-252 .sidenavi-header
{
	background-color: #ee7a10;
}
.mainnavi-110 .navi-open,
.mainnavi-252 .navi-open,
.mainnavi-110 li:hover,
.mainnavi-252 li:hover
{
	color: #ee7a10;
}
/*Palvelut yrityksille*/
.mainnavi .mainnavi-711,
.mainnavi-711 .sidenavi-header,
.mainnavi .mainnavi-734,
.mainnavi-734 .sidenavi-header
{
	background-color: #336633;
}
.mainnavi-711 .navi-open,
.mainnavi-734 .navi-open,
.mainnavi-39 .navi-open,
.mainnavi-711 li:hover,
.mainnavi-734 li:hover,
.mainnavi-39 li:hover
{
	color: #336633;
}
/*Väestötietojärjestelmä*/
.mainnavi .mainnavi-164,
.mainnavi-164 .sidenavi-header,
.mainnavi .mainnavi-181,
.mainnavi-181 .sidenavi-header,
.mainnavi .mainnavi-39,
.mainnavi-39 .sidenavi-header
{
	background-color: #b4003e;
}
.mainnavi-164 .navi-open,
.mainnavi-181 .navi-open,
.mainnavi-39 .navi-open,
.mainnavi-164 li:hover,
.mainnavi-181 li:hover,
.mainnavi-39 li:hover
{
	color: #b4003e;
}
/*Sähköinen henkilöllisyys*/
.mainnavi .mainnavi-134,
.mainnavi-134 .sidenavi-header,
.mainnavi .mainnavi-196,
.mainnavi-196 .sidenavi-header,
.mainnavi .mainnavi-21,
.mainnavi-21 .sidenavi-header
{
	background-color: #d0803f;
}
.mainnavi-134 .navi-open,
.mainnavi-196 .navi-open,
.mainnavi-21.navi-open,
.mainnavi-134 li:hover,
.mainnavi-196 li:hover,
.mainnavi-21 li:hover
{
	color: #d0803f;
}
/*Tietoa vrksta*/
.mainnavi .mainnavi-153,
.mainnavi-153 .sidenavi-header,
.mainnavi .mainnavi-207,
.mainnavi-207 .sidenavi-header,
.mainnavi .mainnavi-16,
.mainnavi-16 .sidenavi-header
{
	background-color: #003399;
}
.mainnavi-153 .navi-open,
.mainnavi-207 .navi-open,
.mainnavi-16 .navi-open,
.mainnavi-153 li:hover,
.mainnavi-207 li:hover,
.mainnavi-16 li:hover
{
	color: #003399;
}
/*Tietoa vrksta*/
.mainnavi .mainnavi-32,
.mainnavi-32 .sidenavi-header
{
	background-color: #5d7761;
}
.mainnavi-32 .navi-open,
.mainnavi-32 li:hover
{
	color: #5d7761;
}
/* Population banner application */
.population-banner
{
	background-color:#00539F;
	border-radius: 5px;	
	color: #ffffff;
	font-size:14px;
	font-weight:bold;
	line-height: normal;
	text-align: center;
	padding:7px 9px 5px 9px;
	margin: 5px 20px 0px 6px;
}
.population-banner h3
{
	margin:0;
	padding:0;
	font-size:16px;
	font-weight:bold;
	line-height: 18px;
	color: #ffffff;
}
.population-banner p
{
	font-size:24px;
	line-height: 30px;
	color: #ffffff;
}
.breadcrumbs a,
.breadcrumbs a:visited
{
	color: #003399;
	font-size:11px;
}
.content
{
	line-height: 1.7;
	font-size: 109%;
}
.content h1, .htmleditorcontentareaclass h1,
.content h2, .htmleditorcontentareaclass h2,
.content h3, .htmleditorcontentareaclass h3
{
  font-weight: bold;
  line-height: 1.4em;
  margin: 11px 0;
}
.content h1, .htmleditorcontentareaclass h1  { font-size: 130%; }
.content h2, .htmleditorcontentareaclass h2  { font-size: 110%; }
.content h3, .htmleditorcontentareaclass h3 { font-size: 100%; }
.content fieldset, .htmleditorcontentareaclass fieldset { margin-bottom: 1em; padding: .5em; }
.content hr, .htmleditorcontentareaclass hr { height: 1px; border: 1px solid #ccc; }
.content th, .htmleditorcontentareaclass th { text-align: left; /* LTR */ padding-right: 1em; /* LTR */ border-bottom: 3px solid #ccc; }
.content ul, .content ol, .htmleditorcontentareaclass ul, .htmleditorcontentareaclass ol { padding-left:40px; margin: 1em 0px; }
.content p, .htmleditorcontentareaclass p { margin: 13px 0; }
.content a, .htmleditorcontentareaclass a
{
	color: #003399;
}
.htmleditorcontentareaclass h1  { font-size: 17px; }
.htmleditorcontentareaclass h2  { font-size: 14px; }
.htmleditorcontentareaclass h3 { font-size: 14px; }
.htmleditorcontentareaclass { line-height: 1.7; font-size: 13px; }
.htmleditorcontentareaclass table { border:dotted 1px #999; }
.htmleditorcontentareaclass td { border:dotted 1px #999; }
.htmleditorcontentareaclass div.jdapplication{width: 220px; height: 17px; border-style: solid; border-width:1px; text-align: center; }

/* News application */
.newslist table { width: auto; margin:0 auto; }
.newslist div table { width: 100%; }
.newslist .everyothercss { background: rgba(0,0,0,0.1); }
.newslist td { padding:1px 5px; }
.newslist td:first-child { width:36px; }