.header {
	background-color: var(--surface-background);
}

/*Luokka .hide-if-loggedin piilottaa elementin silloin kun käyttäjä on kirjautunut sisään.*/
/*Esim. Tilaa koekäyttö -painike näytetään vain kirjautumattomalle.*/
body.IsLoggedIn .hide-if-loggedin {
	display: none !important;
}

.content {
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.colheader, .colcontent {
	padding: 0px 0px var(--vkh-margin-small) 0px !Important
}

.colcontent {
	padding-top:0 !important;
}

	.bg-white {
	background-color: #fff;
}

#extracats, #bsextracats {
	height: 40px;
	display: inline-block;
}

	#extracats a, #bsextracats a {
		display: block;
		float: left;
		height: 28px;
		line-height: 29px;
		font-size: 14px;
		font-family: Arial, sans-serif;
		margin-left: 16px;
		border-bottom: 3px solid transparent;
	}

	#extracats .sfchosen, #bsextracats .sfchosen {
		color: #3c3c3c;
	}

	#bsextracats .sfchosen {
		margin-left: 0px;
		font-family: Arial, sans-serif;
		font-size: 24px;
		line-height: 28px;
		font-weight: bold;
	}

.actions .divider, .actions .subdivider, .sfdivider {
	float: left;
	width: 1px;
	height: 70px;
	background: url(../pics/actions-divider-1x2-56.png) repeat-y;
}

.actions .divider {
	background-position: -1px 0px;
}

.asmall a {
	padding-left: 8px;
	padding-right: 8px;
	font-size: 14px;
}

.sfdivider {
	background-position: -1px 0px;
	height: 36px;
	margin-left: 16px;
}

.vk-textinput {
	height: 34px;
	padding: 0px;
	padding-left: 3px;
	padding-right: 35px;
	width: 188px;
	font-size: 14px;
	line-height: 34px;
	border: 1px solid #cecccc;
	background: #ffffff;
	color: #606060;
	margin: 0;
	border-radius: 4px;
	margin-right: 4px;
}

/*bookshelf*/
.bookshelfcontainer {
	width: 100%;
	height: 226px;
	overflow: hidden;
}

.bookshelf {
	position: relative;
	margin: 0 52px;
	height: 212px;
}

	.bookshelf div.scrollcontainer {
		position: absolute;
		top: 0px;
		margin-top: 1px;
		margin-bottom: 1px;
	}

	.bookshelf .prev, .bookshelf .next {
		width: 38px;
		height: 38px;
		border: 1px solid #cccccc;
		line-height: 38px;
		text-decoration: none;
		color: #ffffff;
		font-weight: bold;
		font-size: 18px;
		text-align: center;
		background-color: #ffffff;
		position: absolute;
		top: 109px;
		box-shadow: inset 0 -1px 0px 0px #ffffff, inset 0 -40px 40px -40px rgba(0,0,0,0.1);
		border-radius: 3px;
	}

		.bookshelf .prev i, .bookshelf .next i {
			display: block;
			position: absolute;
			left: 15px;
			top: 12px;
			width: 8px;
			height: 12px;
			background: url(../pics/arrow-36x4-36x3.png) -85px -84px no-repeat;
		}

		.bookshelf .prev i {
			background-position: -15px -84px;
		}

		.bookshelf .prev:hover i {
			background-position: -15px -48px;
		}

		.bookshelf .next:hover i {
			background-position: -85px -48px;
		}

	.bookshelf .prev {
		left: -52px;
	}

	.bookshelf .next {
		right: -52px;
	}

a.bookinfocard {
	display: block;
	float: left;
	padding: 6px;
	width: 160px;
	height: 210px;
	margin-left: 6px;
	margin-right: 6px;
	background-color: #ffffff;
	overflow: hidden;
	text-decoration: none;
	position: relative;
	text-align: center;
	border: 1px solid #cccccc;
}

	a.bookinfocard:hover {
		outline: 1px solid #e0e0e0;
	}

	a.bookinfocard .bookcover {
		display: block;
		margin-top: 6px;
	}

.bookinfocard .comingup {
	display: block;
	position: absolute;
	right: -5px;
	bottom: 8em;
	background: url(../pics/tulossa.png?v=2) no-repeat;
	width: 80px;
	height: 78px;
}

body.lang-se .bookinfocard .comingup {
	background: url(../pics/tulossa-se.png) no-repeat;
}

.bookinfocard .bottomFade {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 15px;
	background: url(../pics/fadeToWhiteBottom1x15.png);
}

a.cnr i.cnr {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../pics/ffffff-75pct.png);
}

a.cnr:hover i.cnr {
	display: none;
}

.noimage, .image {
	width: 87px;
	height: 130px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.noimage {
	background-color: #0997d4;
}

a.bookinfocard .booktitle {
	display: block;
	margin-top: 8px;
	color: #54860f;
	height: 16px;
	font-size: 12px;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
	text-overflow: ellipsis;
}

a.cnr .booktitle {
	color: #000000;
}

a.cnr:hover .booktitle {
	color: #0997d4;
}

a.bookinfocard .bookinfo, a.bookinfocard:hover .bookinfo {
	display: block;
	margin-top: 8px;
	color: #777777;
	font-size: 12px;
}

a.cnr .bookinfo {
	color: #000000
}

.bookshelfpagerindicator {
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
}

	.bookshelfpagerindicator a {
		margin-left: 8px;
		margin-right: 8px;
		display: inline-block;
		width: 15px;
		height: 15px;
		background: url(../pics/pager-indicators-15x2-15.png) 0px 0px no-repeat;
	}

		.bookshelfpagerindicator a.selected {
			background-position: -15px 0px;
		}

.shadow {
	background-color: #e5e5e5;
	height: 1px;
	overflow: hidden;
	margin-bottom: 10px;
}

.shadowup {
	margin-bottom: 30px;
}

.categorypreviewcontent a.bookinfocard {
	margin-bottom: 11px;
}

#ssoLoginDiv {
	position: absolute;
	z-index: 10001;
	top: 56px;
	height: 350px;
	right: 0px;
	width: 254px;
	border: 1px solid #cecccc;
	border-top: 1px solid #dddddd;
	background-color: #ffffff;
	padding: 0px;
}

	#ssoLoginDiv hr {
		background-color: #cecccc;
		margin: 3px;
		width: 244px;
	}

.loadani.loadani-vkh {
	text-align: center;
	padding: 20px;
	background-color: #ffffff;
	display: none;
	margin-top: 8px;
	border: 1px solid #d0d0d0;
}

span.canread, span.canreadl {
	display: block;
	position: absolute;
	top: -6px;
	right: 5px;
	width: 24px;
	height: 33px;
	background: url(../pics/ico-canread.png) no-repeat;
}

span.canreadl {
	right: auto;
	left: 3px;
}

/* -- Kirjan tiedot -layer --------- */

.bc {
	color: #404040;
	min-height: 280px;
	font-size: 19px;
	position: relative;
	overflow: auto;
	padding: 50px 30px;
	background: #fff;
	margin-top: 30px;
	border: 1px solid #ccc;
}

/* kuva */
.bcimage {
	min-height: 220px;
	min-width: 174px;
	max-width: 120px;
	background-color: #0997d4;
	position: absolute;
	top: 50px;
}

/* tekstisarake */
.bcinfo {
	margin-left: 214px;
	max-width: 520px;
}

	/*lue / tilaa -nappi*/
	.bcinfo .buttonblue {
		margin-top: 20px;
	}

	.bcinfo table {
		border-collapse: collapse;
		empty-cells: hide;
	}

		.bcinfo table td, .bcinfo div {
			border: none;
			padding: 4px 0;
			font-size: 13px;
			color: #404040;
			vertical-align: top;
		}

	.bcinfo .bcheader {
		font-family: Arial, sans-serif;
		font-size: 23px;
		font-weight: normal;
		padding-top: 0px;
		line-height: normal;
	}

.bcauthor {
	color: #808080;
}

#bclongtext {
	display: none;
}

	#bcshorttext a, #bclongtext a {
		padding-left: 9px;
		display: inline-block;
		height: 13px;
		line-height: 13px;
		overflow: visible;
		position: relative;
	}

/*alareunan edellinen- ja seuraava-napit*/
.book-view-navigation {
	margin-top: 30px;
}

/*responsiivisuus: erikoiskäsittely kirjaesittelylle*/
@media screen and (max-width: 30em), handheld and (max-width: 30em), tv and (max-width: 30em) {
	.bc {
		padding: 30px 20px;
	}

	.bcimage {
		position: initial;
		margin-bottom: 20px;
	}

	.bcinfo {
		margin-left: 0;
	}
}

/* -- Kirjan tiedot -layer: loppu */

/*Verkkokirjahylly-otsikkolinkki yläpalkissa*/
.vkh-title-link {
	font-size: 16px;
}

/* Känny */
@media only screen and (max-device-width: 767px) {
	/*Verkkokirjahylly-otsikkolinkki yläpalkissa*/
	.vkh-title-link {
		border-left: 1px solid #ccc;
		padding-left: 10px;
	}
}

#modalbg {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f0f5f7;
	opacity: .80;
	-webkit-opacity: .8;
	-moz-opacity: .8;
	filter: alpha(opacity=80);
	z-index: 1000;
}

#flipcontainer {
	background: transparent;
	display: none;
	position: fixed;
	left: 20px;
	top: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
}

.searchshowmore {
	display: block;
	float: right;
}

#bcshorttext a i, #bclongtext a i {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 11px;
	width: 6px;
	background: url(../pics/arrow-36x4-36x3.png) -88px -48px no-repeat;
}

table.bookPreview td, table.bookPreview th {
	text-align: left;
	vertical-align: top;
	padding-right: 5px;
}

i.arrow-bullet {
	display: block;
	position: absolute;
	left: 0;
	top: 4px;
	width: 6px;
	height: 9px;
	background: url(../pics/arrow-small.gif) no-repeat;
}

.vkhbanner li {
	margin-bottom: 10px;
	font-size: 12px;
	color: #606060;
}

ul#vkh-shelf-booklist,
menu#vkh-shelf-booklist {
	list-style: none;
	padding: 0;
}

ul#vkh-shelf-books li,
menu#vkh-shelf-books li{
	display: block;
	float: left;
	width: 16.5%;
	margin-bottom: 1em;
}

.vkh-book {
	text-align: center;
	background-color: #ffffff;
}

	.vkh-book .comingup {
		display: block;
		position: absolute;
		right: 0.833em;
		top: 125px;
		width: 80px;
		height: 80px;
		background-color: #A9DBA5;
		border-radius: 50%;
		z-index: 1;
	}

/*body.lang-se.siteVKH .vkh-book .comingup {
	background: url(../pics/tulossa-se.png) no-repeat;
}*/


.updated svg,
.comingup svg{
	width: 24px;
	height: 24px;
	color: var(--text-primary);
}


/*body.lang-se.siteVKH .vkh-book .comingup-date {
	background: url(../pics/tulossa-date-se.png) no-repeat;
}*/

.vkh-book .comingup-date span.comingup-text {
	display: block;
	width: 62px;
	height: 30px;
	position: absolute;
	top: 20px;
	right: 10px;
	text-align: center;
	font-size: 14px;
	color: #333333;
	-ms-transform: rotate(-16deg);
	-webkit-transform: rotate(-16deg);
	transform: rotate(-16deg);
	font-weight: 600;
}
	.vkh-book .comingup-date span.comingup-text svg {
		display:none;
	}

/* Päivitetty-lätkä VKH:n kansikuvalistauksessa */
/* Audiokirja-teksti VKH:n kansikuvalistauksessa desktopkoossa*/
/* ---- */
.vkh-book .updated,
.vkh-book .audiobook span.audiobook-text {
	display: inline-flex;
	position: absolute;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	top: 0;
	right: 70px;
	color: #333;
}

@media only screen and (max-width: 565px) {
	.vkh-book .updated {
		top: -4px;
		font-size: 0.8em;
		letter-spacing: normal;
		-ms-transform: none;
		-webkit-transform: none;
		transform: none;
	}

		.vkh-book .updated:after {
			display: none;
		}
}
/*--*/
/* ---- */
@media only screen and (max-width: 1039px) {
	.category-dropdown {
		display: block;
	}
	.category_desktop {
		display: none;
	}

	.floatbox-white {
		min-height: 300px!important;
	}

	#new_categories li > a {
		color: inherit !important;
	}
}
/*VKH Etusivun hyllynäkymän desktopnäkymä Attime-1078*/

.floatbox-white {
	margin-top: 30px;
	padding: 20px 15px 0px 15px;
	min-height: 300px;
}

@media only screen and (min-width: 1040px) {
	.floatbox-white {
		min-height: 1000px!important;
	}

	.category-dropdown {
		display: none;
	}

	#new_categories_desktop li button:focus-visible {
		outline: var(--vkh-purple) auto 1px;
		border-radius: 2px;
	}

	#new_categories_desktop li button {
		all: unset; /* Removes default styles */
		cursor: pointer; /* Indicates it's clickable */
	}

	#new_categories_desktop li.level0:not(:first-child) {
		margin-top: 10px !important;
	}

	#new_categories_desktop li.level0 {
		padding:0px!important;
	}

	#new_categories_desktop li.level1 {
		margin-left: 10px !important;
		padding: 0px !important;
	}

	#new_categories_desktop li.level2 {
		margin-left: 20px !important;
		padding: 0px !important;
	}

	.category_desktop #new_categories_desktop {
		margin-right: 40px !important;
		padding-left: 15px !important;
	}

	#new_categories_desktop li	{
		font-weight: 400 !important;
		font-size: 16px !important;
		line-height: 150% !important;
		margin-bottom: 5px !important;
		cursor: pointer;
	}
		#new_categories_desktop li > a {
			color:inherit!important;
		}

		#new_categories_desktop li.selected {
			color: var(--text-brand) !important;
			font-weight: 700 !important;
			background: none !important;
		}

	#new_categories_desktop li:hover {
		color: #000000 !important;
		text-decoration: underline !important;
	}

	#new_categories_desktop li.normal {
		color: var(--text-primary);
		font-weight: normal;
	}
}

ul#vkh-shelf-booklist li > .vkh-book,
menu#vkh-shelf-booklist li > .vkh-book {
	padding: 1.5em 0.5em 1em 0.5em;
	height: 250px;
}

.vkh-book-cover {
	overflow: visible;
	position: relative;
}

/*ei lukuoikeutta*/
.cnr .vkh-book-cover {
	opacity: 0.4;
}

.vkh-book-image {
	width: 100%;
	height: 12em;
	overflow: visible;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top;
	position: relative;
}

	.vkh-book-image img, .coverpage-image {
		-moz-box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px;
		box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px;
	}

	.vkh-book-image img {
		max-height: 100%;
		max-width: 100%;
	}

.vkh-book-no-image {
	width: 100%;
	max-width: 130px;
	height: 12em;
	background: #0997d4;
	margin: 0 auto;
}

#bookview-book {
	list-style: none;
	padding: 0;
}

	#bookview-book .vkh-book {
		padding: 1em;
		text-align: left;
	}

	#bookview-book .vkh-book-image {
		height: 20em;
		background-position: center left;
	}

.vkh-dropdown {
	display: block;
	padding-right: 22px;
	position: relative;
	z-index: 2;
	padding: 3px 20px 3px 0px;
}

	.vkh-dropdown > span {
		font-size: 22px;
		line-height: 30px;
		color: #333;
		margin: 0;
		overflow: visible;
	}

	/*.vkh-dropdown::before {
		content: "";
		position: absolute;
		display: block;
		right: 120px;
		top: 19px;
		width: 18px;
		height: 7px;
		overflow: visible;
		float: right;
		font-size: 17px;
		color: #000000;
		background: transparent url(/Pics/2017/Arrow_Down_Grey.svg) no-repeat bottom;
		background-size: contain;
	}*/

.vkh-dropdown__icon {
	display: block;
	width: 18px;
	height: 7px;
	overflow: visible;
	font-size: 17px;
	color: #000000;
	background: transparent url(/Pics/2017/Arrow_Down_Grey.svg) no-repeat bottom;
	background-size: contain;
	margin-left: 10px;
}

/*	.vkh-dropdown > button {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}*/

	/*.vkh-dropdown > .dropdown-area {
		min-width: 300px;
		display: none;
		position: absolute;
		margin-top: 1px;*/
		/*top: 100%;*/
		/*left: 0;
		background-color: rgba(255,255,255,1);
		-webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25);
		-moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25);
		box-shadow: 0 0px 0 1px #bebebe, 0px 5px 15px 0px rgba(0,0,0,0.25);
		clip: rect(-1px,5000px,5000px,-5000px);
	}

	.vkh-dropdown.active {
		box-shadow: 0 1px 0 0 #6da72a;
	}

		.vkh-dropdown.active > .dropdown-area {
			display: block;
		}*/

		.vkh-dropdown.active:before {
			-moz-transform: scaleY(-1);
			-o-transform: scaleY(-1);
			-webkit-transform: scaleY(-1);
			transform: scaleY(-1);
			filter: FlipV;
			-ms-filter: "FlipV";
			top: 17px;
		}

.category-dropdown button {
	all: unset;
	position: relative;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 6px 10px 6px 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

#new_categories, .ddlist, #new_categories_legacy {
	list-style: none;
	margin: 0;
	padding: 0;
}

	#new_categories > li:first-child, .ddlist > li:first-child {
		box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.0);
	}

	#new_categories > li, .ddlist > li, #new_categories_legacy > li {
		padding: 10px;
		padding-bottom: 9px;
		cursor: pointer;
		color: #080808;
	}

		#new_categories > li.selected, .ddlist > li.selected, #new_categories_legacy > li.selected {
			background-color: #bebebe;
		}

.vkh-dropdown > span {
	font-size: 18px !important;
}

.vkh-dropdown > .dropdown-area #new_categories {
	min-width: 314px !important;
	font-size: 0.9em;
}

.dropdown-area ul {
	line-height: 20px;
}

.dropdown-area #new_categories li {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

	.dropdown-area #new_categories li.first {
		padding-top: 10px !important;
	}

	.dropdown-area #new_categories li.last {
		padding-bottom: 10px !important;
	}

li.level0 {
	font-weight: 600;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

li.level1 {
	padding-left: 22px !important;
}

li.level2 {
	padding-left: 40px !important;
}

.dropdown-area #new_categories li.level-sep {
	display: block;
	height: 1px;
	background: #eee;
	margin-top: 7px;
	margin-bottom: 7px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

li.no-acc {
	opacity: 0.5;
}

li.normal {
	font-weight: normal !important;
}

li.selected {
	background: #888 !important;
	color: #fff !important;
}

#new_categories li button {
	all: unset;
	cursor: pointer;
}

	#new_categories li button:focus-visible {
		outline: var(--vkh-brand) auto 1px;
		border-radius: 2px;
	}

.vkh-booktitle {
	white-space: nowrap;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	color: var(--text-secondary);
	margin: 1em 0.5em 0 0.5em;
}

.vkh-book a:hover .vkh-booktitle {
	color: #54860f;
}

.vkh-book-info-year,
.vkh-book-info-author {
	white-space: nowrap;
	display: block;
	overflow: hidden;
	font-size: 10px;
	text-overflow: ellipsis;
	color: var(--text-primary);
	margin-left: 0.5em;
	margin-right: 0.5em;
	white-space: nowrap;
}

/* -- sisältöalueen datassa viitataan näihin tyyleihin -- */

#vkh-featuring {
	margin-top: 15px;
}

	#vkh-featuring .col {
		margin-top: 0 !important;
	}

#vkh-about > div {
	background-color: #ffffff;
	overflow: hidden;
}

#vkh-about h1 {
	margin-bottom: 1em;
}

#vkh-about ul {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 20px;
}

	#vkh-about ul > li {
		position: relative;
		padding: 0.5em;
		padding-left: 2.3em;
		font-size: 18px;
	}

		#vkh-about ul > li:after {
			display: block;
			content: "";
			position: absolute;
			left: 10px;
			top: 10px;
			width: 20px;
			height: 20px;
			background: url(../../../../pics/checkmark.png) no-repeat;
		}

		#vkh-about ul > li:nth-child(odd) {
			background-color: #f7f7f7;
		}
/* -- sisältöalueen datassa viitataan näihin tyyleihin: loppu -- */


/* -- col-boxit ---------- */
/* VKH:ssa Kirjanmerkit ja Uutiskirje -laatikot */
/* muokataan Fokuksen col-boxien ulkoasu Verkkokirjahyllyyn sopiviksi */
.vkh-col-box.col {
	margin-top: 0;
	border: none;
}

.vkh-col-box .colheader {
	background: none;
	border: none;
	padding-left: 0;
	padding-top: 0;
	text-transform: none;
}

	.vkh-col-box .colheader .colheaderico {
		top: 0;
	}

.vkh-col-box .colcontent {
	background: #fff;
	border: 1px solid #ccc;
	margin-top: 2px;
	padding: 20px;
}
/* -- col-boxit: loppu ---------- */

/* VKH:ssa on käytössä Fokuksen smarttägit. Muokataan ulkoasu hieman VKH:ssa, sillä kansikuvat ovat eri mallisia kuin Fokuksessa. */
/* -- smart-tägit; suosittuja- ja uusimmat-listaus*/
.bookscontainer-vertical .bookcontainer,
.bookscontainer-vertical.show-add-to-cart .bookcontainer {
	height: 135px;
	width: 125px;
}

	.bookscontainer-vertical .bookcontainer .bookcover {
		width: 100%;
		height: 90px;
		min-height: 0;
		text-align: center;
	}

		.bookscontainer-vertical .bookcontainer .bookcover img {
			height: 100%;
			max-height: none;
		}

		.bookscontainer-vertical .bookcontainer .bookcover .stamp.coming {
			right: 6px;
			background: url(../pics/tulossa-pieni.png?v=2) no-repeat;
		}

body.lang-se .bookscontainer-vertical .bookcontainer .bookcover .stamp.coming {
	background: url(../pics/tulossa-pieni-se.png) no-repeat;
}
/* -- smart-tägit: loppu*/

/* Padi */
@media only screen and (max-device-width: 1024px), only screen and (min-device-width: 1025px) and (max-width:1050px) {
	/* tämä siksi, että VKH:ssa on käytössä grid-layout-systeemi*/
	.vkh-widthlimit {
		box-sizing: border-box;
	}
}

/* Känny */
@media only screen and (max-width: 719px) {
	.vkh-widthlimit {
		padding: 0px;
	}
	/*
		Fiksi boksien välisen horisontaalitilan puuttumiseen:
		Siirretään .col-määritys yksipalstaiseksi.
		VKH käyttää bokseissa yhdistelmää, jossa Fokuksen .col-määritykset antavat ulkoasun bokseille, jotka ovat flexgrid-kehikossa.
		Ilman tätä fiksiä saman rivin boksit menettävät välissä olevan tilan, kun käytetään mobiilissa vaakanäkymää.
	*/
	.col {
		width: auto;
		float: none;
	}

	/*smart-tägit: matkitaan matriisinäkymää, kännykkänäkymässä vain kansikuvat, 3 vierekkäin*/

	.bookscontainer-vertical .bookcontainer,
	.bookscontainer-vertical.show-add-to-cart .bookcontainer {
		height: 110px;
		width: 70px;
		margin-left: 18px;
	}

	.ProCatProductLift .bookcontainer {
		height: 110px !important;
	}

	.bookscontainer-vertical .bookcontainer .bookcover img {
		height: auto;
		width: 100%;
	}

	.vkh-book-image {
		height: 95px;
	}

	.bookscontainer-vertical .bookcontainer .bookinfo {
		display: none;
	}
	/*smart-tägit: loppu*/

	/*matriisi: kännykkänäkymässä vain kansikuvat*/

	ul#vkh-shelf-booklist li > .vkh-book,
	menu#vkh-shelf-booklist li > .vkh-book {
		height: 95px;
		padding: 0.5em;
	}

	.vkh-book-no-image {
		height: 95px;
		max-width: 68px;
	}

	.vkh-book .vkh-book-cover {
		align-self: baseline;
	}

	.vkh-book .comingup {
		top: 55px;
		right: 0;
		background: url(../pics/tulossa-pieni.png?v=2) no-repeat;
		width: 50px;
		height: 49px;
		z-index: 1;
	}

	body.lang-se .vkh-book .comingup {
		background: url(../pics/tulossa-pieni-se.png) no-repeat;
	}

	
	/*matriisi: loppu*/

	/*tuote-layer: kännykkänäkymässä vain kansikuva ja kirjan nimi*/
	/* tässä on hieman virittelyä (kaikki position:absolute -kohdat), jotta saatu teoksen kansikuva skaalautumaan niin, että
		se ja mahdollisest painikkeet ja teoksen otsikko mahtuvat aina näytölle */
	#productInfo.widthlimit {
		position: absolute;
		top: 158px;
		left: 0;
		right: 0;
		bottom: 0;
		min-width: 300px;
	}

	#ProductInfoDiv.col {
		position: absolute;
		top: 0;
		left: 20px;
		right: 20px;
		bottom: 0;
		z-index: 1;
		margin: 0 !important;
		border: none;
		background: none !important;
	}

	#ProductInfoDiv .coverpage-image {
		display: block;
		margin: 0;
		float: none;
		min-height: 0 !important;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 125px; /*lopputila pohjalla jää otsikolle (otsikko voi olla useampirivinen) ja napeille (aina 2 kpl)*/
		background: none;
		overflow: hidden;
		width: auto;
	}

		#ProductInfoDiv .coverpage-image img {
			display: block;
			margin: 0 auto;
			height: 100%;
			max-height: none;
			max-width: 100%;
			width: auto;
		}

		#ProductInfoDiv .coverpage-image span.no-image-vkh {
			margin: 0 auto;
			height: 100%;
			background: #0997d4;
			width: 75%;
		}

	#ProductInfoDiv .coverpage-text {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 10px;
		margin: 0;
	}
		/*piilotetaan kaikki, ja otetaan tietyt yksitellen näkyviin*/
		#ProductInfoDiv .coverpage-text > * {
			display: none;
		}
		/*näytetään otsikko*/
		#ProductInfoDiv .coverpage-text > h1 {
			display: block;
			margin-top: 0;
			margin-bottom: 0;
			font-size: 20px;
			line-height: 28px;
			font-family: 'Hanken Grotesk', sans-serif;
		}

	#ProductInfoDiv .coverpage-image .stamp.coming-vk {
		bottom: 5px;
		left: 50%;
	}
	/*näytetään kaikki napit*/
	#productInfo .buttonblue {
		display: inline-block;
		text-align: center;
		width: 95px;
		margin-right: 10px;
		margin-top: 10px !important;
	}
		/*piilotetaan loppuosa nappien teksteistä*/
		#productInfo .buttonblue > span {
			display: none;
		}

		#productInfo .buttonblue.vk-read-button:after {
			content: 'Lue';
		}

		#productInfo .buttonblue.vk-order-button:after {
			content: 'Tilaa';
		}

		#productInfo .buttonblue.vk-try-button:after {
			content: 'Kokeile';
		}
	/*
		Etusivulle-linkki näytetään vain kirjautuneelle.
		Nappeja näkyvissä kerrallaan vain kaksi:
			Kirjautumaton: Tilaa ja kokeile
			Kirjautunut, ei oikeutta: Tilaa ja etusivulle
			Kirjautunut, on oikeus: Lue ja etusivulle
	*/
	body.IsLoggedIn #productInfo .buttonblue.vk-back-button {
		display: inline-block !important;
	}
	/*tuote-layer: loppu*/
}

@media only screen and (max-device-width: 767px) and (orientation:portrait) {
	#ProductInfoDiv .coverpage-image .stamp.coming-vk {
		bottom: 45px;
		right: -3px;
		left: auto;
	}
}

.uusimmat_title {
	margin: 0;
	margin-bottom: -20px;
	font-family: Arial,Helvetica,sans-serif;
}

.slideNaviContainer {
	margin-bottom: 0px;
}

	.slideNaviContainer a {
		position: relative;
		margin-top: -230px;
		display: block;
		float: left;
		opacity: 0.3;
		width: 21px;
		height: 59px;
		cursor: default;
	}

.slidePrev {
	background: url(/pics/carousel-left.png) no-repeat;
}

.slideNext {
	background: url(/pics/carousel-right.png) no-repeat;
}

.slideNaviContainer a.active {
	opacity: 1;
	cursor: pointer;
}

.slideNaviContainer a.slideNext {
	float: right;
}

#screenMode {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 2px;
	height: 0;
	opacity: 0;
}

@media only screen and (max-device-width: 767px) {
	.vkh-book-image img, .coverpage-image {
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	.uusimmat_title {
		padding-bottom: 0;
		margin-bottom: -40px;
		font-size: 22px;
		line-height: 30px;
		font-weight: bold;
	}

	.ProCatProductLift .bookcontainer {
		box-sizing: border-box;
		display: none;
		width: 33%;
		margin-left: 0;
	}



		/*montako näkyy supistetussa tilassa kun mobiili*/
		.ProCatProductLift .bookcontainer:nth-child(-n+3) {
			display: block;
		}

	/*laajennetussa tilassa kaikki näkyviin kun mobiili*/
	.Uusimmat-showAll .ProCatProductLift .bookcontainer,
	.Tulossa-showAll .ProCatProductLift .bookcontainer,
	.ViimLuettuja-showAll .ProCatProductLift .bookcontainer {
		display: block;
	}

	.ProCatProductLift .bookcontainer .bookcover {
		/*border: 1px solid #d0d0d0;*/
		padding: 0.5em;
		height: 95px;
		overflow: hidden;
		background-color: #ffffff;
		text-align: center;
		cursor: pointer;
	}

	.slideNaviContainer {
		display: none;
	}

	#Uusimmat-showAll,
	#Tulossa-showAll,
	#ViimLuettuja-showAll {
		font-weight: bold;
		margin-bottom: 0px;
		margin-top: -10px;
		display: inline-block;
	}

		#Uusimmat-showAll:after,
		#Tulossa-showAll:after,
		#ViimLuettuja-showAll:after {
			content: "Näytä lisää";
		}

	.Uusimmat-showAll #Uusimmat-showAll:after,
	.Tulossa-showAll #Tulossa-showAll:after,
	.ViimLuettuja-showAll #ViimLuettuja-showAll:after {
		content: "Näytä vähemmän";
	}

	.uusimmat_special_margin > div:nth-child(2) {
		padding-top: 0px;
	}
}

@media only screen and (min-device-width: 768px) {

	#screenMode {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 1px;
		height: 0;
	}

	.ProCatProductLift .bookcontainer {
		padding: 1.5em 0.5em 1em 0.5em;
		height: 250px;
		overflow: hidden;
		background-color: #ffffff;
		text-align: center;
		cursor: pointer;
		margin-left: 20px;
		box-sizing: border-box;
		display: block;
	}

	#Uusimmat-showAll,
	#Tulossa-showAll,
	#ViimLuettuja-showAll {
		display: none;
	}

	.ProCatProductLift .bookcontainer a.bookname {
		text-align: center;
	}

	.ProCatProductLift .bookcontainer .bookcover {
		height: 12em;
	}

		.ProCatProductLift .bookcontainer .bookcover > img {
			max-width: 100%;
			margin-left: auto;
			margin-right: auto;
			display: inline-block;
		}
}

#uusimmat_SPECIAL_PREVIEW_BLOCK,
#tulossa_SPECIAL_PREVIEW_BLOCK,
#viimluettuja_SPECIAL_PREVIEW_BLOCK {
	padding: 0;
}

.carousel {
	height: 0px;
	overflow: hidden;
}

.carousel-active {
	height: auto;
	overflow: hidden;
	height: 540px;
}

@media only screen and (max-width: 767px) {
	.carousel-active {
		height: 120px;
	}

	body.booklayermode .footer {
		display: none !important;
	}

	.content .vkh-grid-merge-container {
		padding: unset;
	}

	div.vkh-notification {
		margin-left: 20px;
		margin-right: 20px;
		padding: var(--vkh-margin-small) 0 !important;
	}

	.cnm-master-wrap .cnm-side-padding-wrap {
		padding-left: 20px
	}
}

/* VKH:n Näytä lisää -toiminto*/
.carousel-active.vkh-show-more-active {
	height: auto !important;
}

	.carousel-active.vkh-show-more-active .ProCatProductLift .bookcontainer {
		display: block !important;
	}

.vkh-show-more {
	display: inline-block;
	margin-top: 1em;
}

	.vkh-show-more.active {
		margin-top: 0;
	}

	.vkh-show-more:after {
		content: 'Näytä lisää';
		display: inline-block;
	}

	.vkh-show-more.active:after {
		content: 'Näytä vähemmän';
	}
/* VKH:n Näytä lisää -toiminto: loppu*/

/*VKH etusivun hyllydropdownin label*/
.label-category-dropdown {
	display: block;
	padding: 8px 20px 3px 10px;
	font-size: 18px;
}

/*VKH Etusivun teoslistausmuutoksia*/

.floatbox-white .title-category {
	font-size: 18px;
	font-weight: 600;
	line-height: 150%;
	color: var(--text-primary);
	margin: 10px 0 20px;
}

.floatbox-white .title-booklist {
	font-size: 28px;
	font-weight: 600;
	line-height: 150%;
	color: var(--text-primary);
	padding-left:10px;
}

.own-category a {
	color:none;
}

.vkh-book-content {
	display: flex;
	flex-direction: column;
}

.vkh-book-cover {
	order: -1;
}

/*Saavutettavuus 2025 muutoksia*/

/*Mobiilinäkymä START*/
@media only screen and (max-width: 719px) {
	.vkh-book-content {
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.vkh-book-info {
		display: flex;
		flex-direction: column;
		margin-left: 30px;
		text-align: left;
	}

	.vkh-book-cover {
		order: -1;
		flex-shrink: 0;
		width: auto;
	}

	.vkh-bookinfo,
	.vkh-booktitle {
		white-space: normal;
	}

	.vkh-book-info-year,
	.vkh-book-info-author,
	.vkh-booktitle {
		margin: 0px 0px 5px 0px;
	}

	.vkh-booktitle {
		font-size: 16px !important;
		font-style: normal !important;
		color: #333333 !important;
	}

	.vkh-book-info-author,
	.vkh-book-info-year {
		font-size: 14px !important;
		font-style: normal !important;
		color: var(--text-secondary) !important;
		overflow: unset;
		white-space: normal;
	}

	#vkh-shelf-booklist li {
		border-bottom: 1px solid var(--border-layout-subtle);
	}

	.vkh-book-info .comingup-date,
	.vkh-book-info .audiobook {
		all: unset;
		margin: 10px 0px 5px 0px;
	}

	.vkh-book .comingup-date span.comingup-text {
		all: unset;
		border-radius: 35px;
		font-size: 12px;
		background-color: #A9DBA5;
		color: #333333;
		border: 1px solid #A9DBA5;
		padding: 5px 10px 5px 10px;
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		width: fit-content;
	}

	.vkh-book .updated {
		all: unset;
		border-radius: 35px;
		font-size: 12px;
		background-color: inherit;
		color: var(--text-primary);
		border: 1px solid #ccc;
		padding: 5px 10px 5px 10px;
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		width: fit-content;
	}

	.vkh-book .audiobook span.audiobook-text {
		all: unset;
		border-radius: 35px;
		font-size: 12px;
		background-color: inherit;
		color: var(--text-primary);
		border: 1px solid #ccc;
		padding: 5px 10px 5px 10px;
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		width: fit-content;
	}

	menu#vkh-shelf-booklist li > .vkh-book {
		height: auto;
	}

	.updated svg,
	.comingup svg,
	.audiobook svg {
		display: block !important;
		width: 24px;
		height: 24px;
		color: var(--text-primary);
	}

	.floatbox-white .title-booklist {
		padding-bottom: 20px;
		padding-left: 16px;
		font-size: 20px;
	}

	.floatbox-white {
		padding: 0px!important;
	}

	.flexgrid-row {
		margin: 0px 0px 20px 0px !important;
	}
		.flexgrid-row section:first-of-type div.col {
			border-bottom: 1px solid var(--border-layout-subtle);
		}

	.widthlimit {
		min-width: unset !important;
	}

	.go-to-top-container div.flexgrid-row {
		text-align: center!important;
	}

	.category-dropdown {
		padding-left: 16px!important;
	}

	.vkh-widthlimit .content,
	.vkh-notification {
		margin-left: 0px !important;
		margin-right: 0px !important;
	}

	/*	.vkh-book .comingup-date span.comingup-text {
	all:unset;
	}*/
}
/*Mobiilinäkymä END*/


/* RÖ: VKH-muutokset 31.9.2024 */
a:hover:not(.buttonblue) {
	text-decoration: underline;
}

@media (min-width: 768px) and (max-width: 856px) {
	body.header-info-active {
		padding-top: 180px;
	}
}

.floatbox-white {
	margin-top: var(--vkh-margin-normal);
	padding: var(--vkh-margin-small) var(--vkh-margin-normal) var(--vkh-margin-small) var(--vkh-margin-normal);
}

.flexgrid-row.small-gaps {
	margin-left:-1em;
}

.floatbox-white > .left.category_desktop > h2 {
	padding-left:0;
}

.buttonblue.margin-normal {
	margin-top: var(--vkh-margin-normal) !important;
	margin-bottom: var(--vkh-margin-normal) !important;
}

@media only screen and (min-width: 1040px) {
	.category_desktop #new_categories_desktop {
		margin-right: var(--vkh-margin-normal) !important;
		padding-left: 0px !important;
	}
}

.label-category-dropdown {
	padding: 8px 20px 3px 0px;
	font-size: 18px;
}

.vkh-grid-merge-container {
	background-color: var(--surface-elevation-1);
	padding: 0 var(--vkh-margin-normal) 0 var(--vkh-margin-normal);
	margin-top: var(--vkh-margin-small)
}

.footer-container {
	padding: 0 var(--vkh-margin-normal) 0 var(--vkh-margin-normal);
}

body.siteBK .vkh-grid-merge-container,
body.siteSKI .vkh-grid-merge-container {
	display:none;
}

.vkh-mobile-minify h2.colheader .vkh-togglebutton {
	display: none;
}

/* pienellä näytöllä alekkaisiksi laatikoiksi, jotka voi avata / sulkea */
@media only screen and (max-width: 767px) {
	.vkh-grid-merge-container {
		background: none;
	}

	h2.colheader {
		position:relative;
	}

	.vkh-grid-merge-container h2.colheader {
		background-color: var(--vkh-white);
	}

	.vkh-grid-merge-container > .flexgrid-row > section {
		padding-top: 0;
		padding-bottom: 0;
	}

	.vkh-grid-merge-container > .flexgrid-row > section > div {
		position: relative;
	}

	.vkh-grid-merge-container > .flexgrid-row > section > div:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 20px;
		right: 20px;
		height: 1px;
		background-color: #c0c0c0;
	}

	.vkh-grid-merge-container > .flexgrid-row > section:first-child > div:after {
		display: none;
	}

	.vkh-mobile-minify h2.colheader + .colcontent {
		display: none;
	}

	.vkh-mobile-minify h2.colheader.opened + .colcontent {
		display: block;
	}

	.vkh-mobile-minify h2.colheader {
		padding-right: 40px;
	}

	.vkh-mobile-minify h2.colheader .vkh-togglebutton {
		position: absolute;
		right: 20px;
		top: 50%;
		width: 20px;
		height: 9px;
		border: none;
		background: none;
		outline: hidden;
		line-height: 1em;
		margin-top: -5px;
		display: inline-block;
		background: url(/Pics/2017/Arrow_Down_Grey.svg) no-repeat;
		cursor:pointer;
	}

	.vkh-mobile-minify h2.colheader.opened .vkh-togglebutton {
		transform: rotate(180deg);
	}

	.vkh-mobile-minify .h2.colheader .vkh-togglebutton:after {
		content: "";
	}

	.vkh-mobile-minify h2.colheader.opened .vkh-togglebutton:after {
		content: "";
		background: url(../pics/chevron-up.svg) no-repeat;
	}
}

div.vkh-notification h2 {
	font-size: 16px;
	font-weight: 600;
	padding-left: 10px;
	line-height: 150%;
}

div.vkh-notification {
	padding: var(--vkh-margin-small) var(--vkh-margin-normal);
	border-bottom: 1px solid var(--border-layout-subtle);
	background-color: var(--surface-elevation-1);
}

#notification-section .vkh-notification .widthlimit-vkhnotification {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	display: flex !important;
	border-left: 8px solid var(--text-brand);
	background-color: var(--surface-elevation-1);
	flex-direction: row;
	gap: 5px;
	align-items: baseline;
}

div.vkh-notification div {
	display: inline !important;
}

div.vkh-notification > h2 {
	display:inline-block;
	font-weight:bold;
	font-size:1em;
	margin:0;
	margin-right:0;
}

div.vkh-notification > p {
	display: inline;
	font-weight: normal;
	font-size: 1em;
}

.vkh-grid-container {
	display: grid;
	grid-gap: var(--vkh-margin-normal);
}

.vkh-grid-container.cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.vkh-news-content > .vkh-grid-item > img {
	width:100%;
	height:auto;
}

@media only screen and (max-width: 767px) {
	.vkh-grid-container.cols-2 {
		grid-template-columns: repeat(1, 1fr);
	}
	.vkh-news-content > .vkh-grid-item:nth-child(2) {
		display:none;
	}

	body.no-scroll {
		height: 100vh;
		overflow: hidden;
	}
}


/* Käännetty logiikka sisältöboxeille: oletuksena piilotettuna, näytetään, jos on sisältöä */
.show-if-content {
	display:none;
}


	/*end*/

#dropdown-content {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgb(255, 255, 255);
	display: flex;
	flex-direction: column;
	z-index: 1000;
	padding: 20px 20px 20px 20px;
	margin-top: 89px;
	box-sizing: border-box;
}

	#dropdown-content menu {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

		#dropdown-content menu ul {
			flex: 1;
			overflow-y: auto;
			max-height: calc(100vh - 150px);
		}

[hidden] {
	display: none !important;
}

@media (max-width: 600px) {

	#dropdown-content[hidden] {
		display: none;
	}
}

@media only screen and (min-width: 768px) {
	#dropdown-content {
		margin-top: 155px !important;
	}

		#dropdown-content menu ul {
			max-height: calc(100vh - 250px) !important;
		}
}

#dropdown-content button.close {
	color: #aaa;
	font-size: 28px;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	cursor: pointer;
	padding-bottom: 20px;
	border: none;
	padding: 0;
	float: right;
}

#dropdown-content button.close i {
	line-height: 1;
}

	#dropdown-content button.close:focus {
		outline: 2px var(--action-focus-ring) solid;
	}

.category-dropdown {
	position: relative;
	max-width: 300px;
}

.category-dropdown-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 8px 12px;
	font-size: 16px;
	border: 1px solid #ccc;
	background: #fff;
	cursor: pointer;
	border-radius: 4px;
}

	.category-dropdown-btn .dropdown-icon {
		font-size: 14px;
	}

	#dropdown-content li {
		display: block;
		padding: 8px 12px;
		cursor: pointer;
	}

		#dropdown-content li button {
			background: none;
			border: none;
			width: 100%;
			text-align: left;
			font-size: 16px;
			cursor: pointer;
		}

		#dropdown-content li.selected {
			font-weight: bold;
			background: #eee;
		}

		#dropdown-content li:hover {
			background: #f0f0f0;
		}

.separator {
	border-top: 1px solid #ccc;
	margin: 4px 0;
}

div#searchcats-container {
	border: none;
	background: #a04191;
	align-content: center;
	cursor: pointer;
}

/*Saavutettavuus*/

#title_vkhr0c1 {
	font-weight: 600;
	font-size: 20px;
	line-height: 150%;
}

/*NotifikaatioBanneri*/
body.notification-count-0 {
	padding-top: 90px;
}

#PageHeader.notification-count-0 {
	border-top-width: 70px !important;
}

body.notification-count-1 {
	padding-top: 120px;
}

#PageHeader.notification-count-1 {
	border-top-width: 110px !important;
}

body.notification-count-2 {
	padding-top: 182px;
}

#PageHeader.notification-count-2 {
	border-top-width: 172px !important;
}


body.notification-count-3 {
	padding-top: 244px;
}

#PageHeader.notification-count-3 {
	border-top-width: 234px !important;
}


body.notification-count-4 {
	padding-top: 306px;
}

#PageHeader.notification-count-4 {
	border-top-width: 296px !important;
}


body.notification-count-5 {
	padding-top: 368px;
}

#PageHeader.notification-count-5 {
	border-top-width: 258px !important;
}