Högskoleprovet – Higher Education Testbook

CSS
html {
	height: 100%;
	background: #ededed url(../images/bg.png) repeat left top;
	}
	body {
		position: relative;
		min-height: 100%;
		height: auto!important;
		height: 100%;
		background: none;
		font: normal 11px/16px Verdana, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
		}

	.button-special {
		display: inline-block;
		height: 27px;
		line-height: 27px;
		padding-right: 6px;
		background: url(../images/button-special.png) no-repeat right -27px;
		border: none;
		padding: 0 6px 0 0;
		overflow: visible;
		white-space: nowrap;
		color: #fff;
		}
		.button-special span {
			display: inline-block;
			padding-right: 4px;
			padding-left: 9px;
			text-decoration: underline;
			background: url(../images/button-special.png) no-repeat left top;
			}
	.button-special:hover {
		color: #fff;
		background-position: right -81px;
		}
		.button-special:hover span {
			background-position: left -54px;
			}
	.button-special:active {
		background-position: right -135px;
		}
		.button-special:active span {
			background-position: left -108px;
			}

	.button-special.big {
		height: 50px;
		line-height: 50px;
		font-size: 24px;
		background-image: url(../images/button-special-b.png);
		background-position: right -50px;
		text-shadow: -1px -1px 0 #555;
		}
		.button-special.big span {
			padding-left: 20px;
			padding-right: 14px;
			text-decoration: none;
			background-image: url(../images/button-special-b.png);
			}
	.button-special.big:hover {
		background-position: right -150px;
		}
		.button-special.big:hover span {
			background-position: left -100px;
			}
	.button-special.big:active {
		background-position: right -250px;
		}
		.button-special.big:active span {
			background-position: left -200px;
			}

	.button-special.middle {
		height: 35px;
		line-height: 35px;
		font-size: 15px;
		font-weight: bold;
		text-decoration: none;
		background-image: url(../images/button-special-m.png);
		background-position: right -35px;
		text-shadow: -1px -1px 0 #555;
		}
		.button-special.middle span {
			padding-left: 14px;
			padding-right: 8px;
			text-decoration: none;
			background-image: url(../images/button-special-m.png);
			}
	.button-special.middle:hover {
		background-position: right -105px;
		}
		.button-special.middle:hover span {
			background-position: left -70px;
			}
	.button-special.middle:active {
		background-position: right -175px;
		}
		.button-special.middle:active span {
			background-position: left -140px;
			}

	.button-special.middle2 {
		height: 31px;
		line-height: 31px;
		font-size: 15px;
		font-weight: normal;
		text-decoration: none;
		background-image: url(../images/button-special-m2.png);
		background-position: right -31px;
		text-shadow: -1px -1px 0 #555;
		}
		.button-special.middle2 span {
			padding-left: 14px;
			padding-right: 8px;
			text-decoration: none;
			background-image: url(../images/button-special-m2.png);
			}
	.button-special.middle2:hover {
		background-position: right -93px;
		}
		.button-special.middle2:hover span {
			background-position: left -62px;
			}
	.button-special.middle2:active {
		background-position: right -155px;
		}
		.button-special.middle2:active span {
			background-position: left -124px;
			}

	.clear {clear: both;}


	.header-1 {
		line-height: 36px;
		font-size: 34px;
		font-weight: bold;
		}
	section .header-1 {
		margin-top: 29px;
		margin-bottom: 16px;
		}
	.header-2 {
		line-height: 22px;
		font-size: 21px;
		font-weight: normal;
		}
	.header-3 {
		line-height: 18px;
		font-size: 13px;
		font-weight: normal;
		}
/* Special Font */
.header-1,
.header-2,
.header-3,
.button-special.big,
.button-special.middle,
.steps ol li span.type {
	font-family: 'PT Sans', sans-serif;
	}

/* Header */
header {
	padding-top: 1px;
	height: 107px;
	background: url(../images/header-bg.png) repeat-x left top;
	}
	header .wrap {
		height: 108px;
		background: url(../images/header-wrap-bg.png) no-repeat center -1px;
		}
	header .logo a {
		float: left;
		margin: 24px 0 0 9px;
		width: 266px;
		height: 40px;
		text-indent: -9999em;
		background: url(../images/logo.png) no-repeat left top;
		}
		header .nav {
			float: left;
			margin: 37px 0 0 105px;
			font-size: 12px;
			}
			header .nav li {
				position: relative;
				margin-right: 21px;
				float: left;
				}
				header .nav li a {
					float: left;
					padding-right: 4px;
					height: 25px;
					background: url(../images/nav-item-bg.png) no-repeat right -25px;
					color: #333;
					}
					header .nav li a span {
						display: block;
						padding-right: 5px;
						padding-left: 9px;
						height: 25px;
						line-height: 25px;
						background: url(../images/nav-item-bg.png) no-repeat left top;
						}
				header .nav li a:hover {
					text-decoration: none;
					}
				header .nav li.active a {
					background-position: right -125px;
					}
				header .nav li.active a span {
					background-position: left -100px;
					}

			header .nav .dropdown-opener {
				position: relative;
				margin-right: 2px;
				}
				header .nav .dropdown-opener span {
					padding-right: 15px;
					}
					header .nav .dropdown-opener span .arrow {
						position: absolute;
						top: 50%;
						right: 7px;
						display: block;
						margin-top: -3px;
						padding: 0;
						width: 9px;
						height: 7px;
						background: url(../images/ico/arrow-down.png) no-repeat center center;
						}

			header .nav ul.dropdown {
				display: none;
				}

			header .nav .opened .dropdown-opener {
				margin-right: 0;
				background: url(../images/nav-dropdown-opener.png) no-repeat right -25px;
				}
				header .nav .opened .dropdown-opener span {
					padding-right: 17px;
					background: url(../images/nav-dropdown-opener.png) no-repeat left top;
					}
				header .nav .opened .dropdown-opener span.arrow {
					right: 9px;
					padding-right: 0;
					background-image: url(../images/ico/arrow-down.png);
					}
			header .nav .opened ul.dropdown {
				z-index: 10;
				position: absolute;
				top: 25px;
				left: 0;
				display: block;
				padding-top: 5px;
				padding-right: 6px;
				font-size: 10px;
				background: url(../images/nav-dropdown-bg.png) repeat-y right top;
				}
				header .nav .opened ul.dropdown li {
					margin-bottom: 9px;
					}
					header .nav .opened ul.dropdown li a {
						float: none;
						padding-left: 9px;
						display: block;
						line-height: 12px;
						background: none;
						height: auto;
						}
					header .nav .opened ul.dropdown .footer {
						position: absolute;
						left: 0;
						bottom: -5px;
						width: 100%;
						margin: 0;
						display: block;
						height: 5px;
						}
						header .nav .opened ul.dropdown .footer div {
							padding-right: 6px;
							height: 5px;
							background: url(../images/nav-dropdown-f.png) no-repeat right -5px;
							}
							header .nav .opened ul.dropdown .footer div div {
								height: 5px;
								background: url(../images/nav-dropdown-f.png) no-repeat left top;
								}

	header .button-special.last {
		margin: 37px 0 0 29px;
		}

/* Content */
section aside {
	float: left;
	width: 330px;
	}
section article {
	float: right;
	width: 550px;
	}

section .book {
	float: left;
	margin-top: 35px;
	}
	section .book .img-container {
		position: relative;
		}
		section .book img {
			display: block;
			}
		section .book .price-tag {
			position: absolute;
			bottom: -8px;
			left: 70px;
			display: block;
			padding-top: 23px;
			padding-left: 11px;
			width: 80px;
			height: 66px;
			font-size: 9px;
			line-height: 9px;
			text-align: center;
			background: url(../images/price-tag-small.png) no-repeat left top;
			color: #fff;
			text-shadow: 0 1px 1px #555;
			}
			section .book .price-tag .value {
				display: block;
				font-size: 24px;
				line-height: 20px;
				}
	section .book .button-special {
		margin-top: 20px;
		}

section .news {
	float: right;
	margin-left: 42px;
	width: 152px;
	}
section aside .news {
	margin-left: 0;
	}
	section .news .h {
		height: 6px;
		background: url(../images/news-hf.png) no-repeat left top;
		}
	section .news .f {
		height: 17px;
		background: url(../images/news-hf.png) no-repeat left bottom;
		}
	section .news .m {
		overflow: hidden;
		padding-left: 17px;
		padding-right: 17px;
		background: url(../images/news-bg.png) repeat-y left top;
		}
		section .news .m .title a {
			text-decoration: none;
			color: #4a988a;
			}
		section .news .m .title a:hover {
			text-decoration: underline;
			color: #61c7b5;
			}
		section .news .m .calendar {
			padding-left: 20px;
			background: url(../images/ico/calendar.png) no-repeat left center;
			}
		section .news {
			margin-top: 35px;
			}
			section .news .m .post {
				margin-bottom: 20px;
				}
			section .news .m .post.last {
				margin-bottom: 9px;
				}
				section .news .m .title {
					margin: 11px 0 9px;
					}
				section .news .m p,
				#promo .news .m p {
					margin: 5px 0;
					line-height: 14px;
					font-size: 11px;
					}

#promo {
	margin: 22px 0 0;
	background: url(../images/promo-bg.png) repeat-x left bottom;
	}
	#promo .wrap {
		overflow: hidden;
		position: relative;
		background: url(../images/promo-actions-bg.png) no-repeat center bottom;
		}
		#promo .actions {
			position: relative;
			}

		#promo article {
			position: relative;
			padding-bottom: 123px;
			}
			#promo article .actions {
				position: absolute;
				bottom: 18px;
				left: 0;
				padding-top: 1px;
				width: 100%;
				}
			#promo p {
				font-size: 12px;
				line-height: 18px;
				}
			#promo .actions .price-tag {
				position: absolute;
				bottom: 45px;
				left: 200px;
				display: block;
				padding-top: 26px;
				padding-left: 15px;
				height: 100px;
				width: 111px;
				font-size: 14px;
				text-align: center;
				background: url(../images/price-tag.png) no-repeat left top;
				color: #fff;
				text-shadow: 0 1px 1px #555;
				}
				#promo .actions .price-tag .value {
					display: block;
					font-size: 39px;
					line-height: 34px;
					}
			#promo .actions .big {
				float: left;
				}
			#promo .actions .pdf {
				float: left;
				margin: 4px 0 0 18px;
				padding-left: 51px;
				height: 58px;
				background: url(../images/ico/pdf.png) no-repeat left top;
				}
				#promo .actions .pdf a {
					display: block;
					margin-top: 7px;
					font-size: 12px;
					}
				#promo .actions .pdf .size {
					font-size: 10px;
					color: #9a9a9a;
					}
				#promo .actions .google-plus {
					float: right;
					margin-top: 13px;
					}
				#promo .actions #___plusone_0 {
					width: 130px !important;
					}

			#promo .actions .next {
				position: absolute;
				bottom: -9px;
				left: 179px;
				display: block;
				padding: 40px 30px 10px 0;
				font-size: 12px;
				white-space: nowrap;
				background: url(../images/ico/arrow-next.png) no-repeat right top;
				}

		#promo article p {
			margin: 8px 0;
			}

#content,
#content-main {
	overflow: hidden;
	margin-top: 28px;
	padding-bottom: 270px;
	}

	aside .b-blog {
		clear: both;
		}
		.b-blog .header-2 {
			margin-bottom: 13px;
			}

			.b-blog .blog {
				padding-bottom: 16px;
				}
				.b-blog .blog .title {
					font-size: 12px;
					}

		#content-main .group {
			margin-top: 18px;
			}
			#content-main .group li {
				float: left;
				width: 151px;
				margin-left: 48px;
				}
			#content-main .group li:first-child {
				margin-left: 0;
				}
				#content-main .group .img-container {
					width: 150px;
					height: 122px;
					background: url(../images/img-container-bg.png) no-repeat left top;
					}
					#content-main .group .img-container img {
						display: block;
						width: 150px;
						height: 110px;
						}

				#content-main .group .name,
				#content-main .group .post {
					line-height: 12px;
					font-style: italic;
					color: #888;
					}
				#content-main .group blockquote {
					margin-top: 9px;
					margin-left: -20px;
					padding-left: 20px;
					background: url(../images/ico/quote.png) no-repeat left top;
					color: #252525;
					}
#content {
	margin-top: 22px;
	}
#content .wrap {
	overflow: hidden;
	}
	#content article {
		float: left;
		margin-left: 20px;
		width: 500px;
		}
	#content aside {
		float: right;
		width: 350px;
		}
	#content .help {
		line-height: 18px;
		}
		#content .help dl {
			margin-bottom: 15px;
			}
			#content .help dt {
				font-size: 14px;
				}
				#content .help dt a.switch {
					position: relative;
					padding-left: 20px;
					display: block;
					}
					#content .help dt a.switch span.switch {
						position: absolute;
						top: 3px;
						left: 0;
						display: block;
						height: 12px;
						width: 12px;
						background: url(../images/ico/plus-minus.png) no-repeat left top;
						}
					#content .help dl.opened dt a.switch span.switch {
						background-position: left -12px;
						}
			#content .help dd {
				position: relative;
				display: none;
				font-size: 12px;
				margin: 10px 0 15px 20px;
				padding: 0 0 0 14px;
				border-left: 4px solid #51a89a;
				}
				#content .help dd .h,
				#content .help dd .f {
					position: absolute;
					top: -2px;
					left: -4px;
					display: block;
					width: 4px;
					height: 2px;
					background: url(../images/help-border.png) no-repeat left top;
					}
				#content .help dd .f {
					top: auto;
					bottom: -2px;
					background-position: left -2px;
					}
			#content .help dl.opened dd {
				display: block;
				}


	.steps {
		margin-top: 35px;
		}
		.steps .header-2 {
			margin-bottom: 15px;
			}
		.steps ol {
			list-style: none;
			margin-bottom: 45px;
			}
			.steps ol li {
				overflow: hidden;
				padding-top: 10px;
				margin: 14px 0;
				line-height: 36px;
				vertical-align: middle;
				border-top: 1px solid #cacaca;
				color: #b9b9b9;
				}
			.steps ol li:first-child {
				padding-top: 0;
				border-top: none;
				}
			.steps ol li.active {
				color: #000;
				}
				.steps ol li span.type {
					padding-right: 20px;
					vertical-align: middle;
					font-size: 34px;
					}
				.steps ol li span.text {
					display: inline-block;
					vertical-align: middle;
					line-height: 16px;
					font-size: 14px;
					}

	.order .text {
		font-size: 12px;
		line-height: 18px;
		}

	.order .product {
		margin: 15px 0 30px;
		font-size: 12px;
		width: 100%;
		}
		.order .product col.name     {width: auto}
		.order .product col.quantity {width: 75px}
		.order .product col.price    {width: 75px}
		.order .product col.sum      {width: 75px}

		.order .product .price,
		.order .product .sum,
		.order .product .total {
			text-align: right;
			}
		.order .product thead th {
			padding-bottom: 5px;
			font-size: 9px;
			font-variant: small-caps;
			font-weight: normal;
			text-transform: uppercase;
			text-align: left;
			border-bottom: 2px solid #cacaca;
			color: #7a7a7a;
			}
		.order .product tfoot th {
			padding-top: 5px;
			font-weight: bold;
			border-top: 1px solid #cacaca;
			}
			.order .product tfoot div {
				position: relative;
				}
		.order .product tbody td {
			padding: 8px 0;
			border-top: 1px solid #cacaca;
			}
			.order .product tbody td div {
				position: relative;
				}
			.order .product tfoot th input,
			.order .product tbody td input {
				position: absolute;
				top: 1px;
				right: 14px;
				display: inline;
				padding: 0;
				width: 40px;
				font-family: Verdana;
				font-size: 12px;
				text-align: right;
				background: none;
				border: none;
				color: #000;
				opacity: 1;
				filter: alpha(opacity(100%));
				}
			.order .product tfoot th input {
				right: 15px;
				font-weight: bold;
				}
		.order .product tbody td .range {
			position: relative;
			margin-left: 10px;
			width: 40px;
			height: 16px;
			}
			.order .product tbody td .range input {
				top: 0;
				right: 0;
				text-align: center;
				}
			.order .product tbody td .range a {
				z-index: 5;
				position: absolute;
				top: 50%;
				left: -20px;
				margin-top: -14px;
				display: block;
				height: 28px;
				width: 28px;
				text-indent: -9999em;
				background: url(../images/ico/range-plus-minus.png) no-repeat left top;
				}
			.order .product tbody td .range a.plus {
				left: auto;
				right: -20px;
				background-position: right top;
				}

	.order .form fieldset {
		overflow: hidden;
		margin: 10px 0;
		}
	.order .form fieldset.spacer {
		margin-top: 15px;
		padding-top: 10px;
		border-top: 1px solid #cacaca;
		}
		.order .form fieldset label {
			display: block;
			}
		.order .form fieldset label.inline {
			display: inline;
			}
		.order .form fieldset .field {
			padding-right: 5px;
			height: 31px;
			width: 387px;
			background: url(../images/field.png) no-repeat right -31px;
			}
			.order .form fieldset .field div {
				width: 100%;
				height: 31px;
				background: url(../images/field.png) no-repeat left top;
				}
				.order .form fieldset .field div input {
					margin-top: 4px;
					text-indent: 2px;
					background: none;
					border: none;
					width: 100%;
					}
				.order .form fieldset .field select {
					margin-top: 6px;
					margin-left: 1px;
					width: 100%;
					background: none;
					border: none;
					}
		.order .form fieldset .field.type-1 {width: 104px}
		.order .form fieldset .field.type-2 {width: 187px}

		.order .form fieldset .field.type-2.code {
			float: left;
			margin-right: 5px;
			}
		.order .form fieldset .field.focused {
			background-position: right -93px;
			}
			.order .form fieldset .field.focused div {
				background-position: left -62px;
				}
				.order .form fieldset .field.focused div select {
					background: #ffffc9;
					}

		.order .form fieldset .hint {
			float: right;
			margin-right: 5px;
			width: 180px;
			font-size: 12px;
			line-height: 16px;
			}
			.order .form fieldset .hint span {
				display: inline-block;
				}

		.order .form .actions {
			padding-top: 10px;
			}
		.order .form fieldset .code-field {
			display: none;
			margin-top: 10px;
			}
		.order .form fieldset .code-field.opened {
			display: block;
			}

	.order .info {
		position: relative;
		margin-bottom: 25px;
		padding: 20px 25px;
		width: 470px;
		background: url(../images/details-bg.png) repeat-y left top;
		}
		.order .info .h,
		.order .info .f {
			position: absolute;
			top: -9px;
			left: 0;
			width: 100%;
			height: 9px;
			background: url(../images/details-hf.png) no-repeat left top;
			}
		.order .info .f {
			top: auto;
			bottom: -9px;
			background-position: left -9px;
			}

		.order .info dl {
			overflow: hidden;
			margin-bottom: 20px;
			font-size: 11px;
			}
			.order .info dl dt {
				float: left;
				width: 122px;
				}
			.order .info dl dd {
				float: left;
				}
		.order .info .product {
			margin: 30px 0 0;
			}
	.order .actions .back {
		display: inline;
		margin-left: 10px;
		}

/* Footer */
footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 230px;
	background: #252525;
	color: #898989;
	}
	footer .wrap {
		overflow: hidden;
		padding-top: 33px;
		padding-bottom: 25px;
		}

	footer .copyright {
		float: left;
		padding-left: 17px;
		}

	footer .nav {
		float: left;
		margin-left: 145px;
		}
		footer .nav li {
			margin-bottom: 12px;
			}
			footer .nav .button-special {
				margin-left: -9px;
				}

	footer ul li.title {
		margin-bottom: 16px;
		font-weight: bold;
		color: #b2b2b2;
		}
		footer ul li a {
			color: #898989;
			}
		footer ul li a:hover {
			color: #898989;
			text-decoration: none;
			}

		footer ul li ul li {
			line-height: 12px;
			margin-bottom: 8px;
			}

	footer ul.links {
		float: left;
		}
		footer ul.links >li {
			float: left;
			width: 140px;
			margin-left: 90px;
			}
		footer ul.links .col-1 {
			margin-left: 105px;
			}
		footer ul.links .col-2 {
			margin-left: 85px;
			}
			footer ul.links li a {
				font-size: 10px;
				}

/* Overlay */
#overlay {
	display: none;
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url(../images/overlay-bg.png) repeat left top;
	}
#overlay.opened {
	display: block;
	}
	#overlay .modal {
		display: none;
		position: relative;
		margin: 100px auto 0;
		width: 930px;
		}
	#overlay .modal.opened {
		display: block;
		}

		#overlay .modal .close {
			position: absolute;
			top: -30px;
			right: 0;
			color: #fff;
			padding: 5px 0 5px 23px;
			background: url(../images/modal-close.png) no-repeat left center;
			}
			#overlay .modal .close span {
				text-decoration: underline;
				}

		#overlay .gallery .carousel {
			overflow: hidden;
			}
			#overlay .gallery .carousel li {
				width: 930px;
				text-align: center;
				}
		#overlay .gallery .bx-prev,
		#overlay .gallery .bx-next {
			position: absolute;
			top: 50%;
			left: 0;
			display: block;
			margin-top: -22px;
			height: 43px;
			width: 43px;
			text-indent: -9999em;
			background: url(../images/carousel-nav.png) no-repeat left top;
			}
		#overlay .gallery .bx-next {
			left: auto;
			right: 0;
			background-position: right top;
			}
		#overlay .gallery .bx-pager {
			padding-top: 10px;
			text-align: center;
			}
		#overlay .gallery .thumb {
			margin: 0 10px;
			}
			#overlay .gallery .thumb img {
				opacity: .4;
				}
			#overlay .gallery .thumb.pager-active img {
				opacity: 1;
				}