/*
Filename: biebbase.css
Created: Cinnamon Interactive BV (MJ).
Date: 20080104
*/


/* ============================================================== */
/* css reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
input, textarea, select {
	font-family: inherit;
	font-size: inherit;
}



body {
	font: 68.75%/1.455 "Verdana", sans-serif; /* 11px/16px */
	padding: 0 0 55px 0;
	background: #fff url("/img/base/backgrounds/body.gif") left top no-repeat;
	}



/* ============================================================== */
/* typography */

p,ul,ol,dl,table,fieldset,form,.messages {
	margin-bottom: 1.455em; /* 16px */
	}
	ul ul,
	ul ol,
	ol ol,
	ol ul,
	ul h3,
	ul p,
	ol h3,
	ol p {
		margin-top: 0;
		margin-bottom: 0;
		}
form .row {
	margin-top: 1.091em;
	}
h1 {
	font: 2.182em/1.0 "Trebuchet MS", "Georgia", serif; /* 24px/24px */
	font-weight: bold;
	margin-bottom: 0.5em; /* 12px */
	}
h2 {
	font: 2em/1.091 "Trebuchet MS", "Georgia", serif; /* 22px/24px */
	font-weight: normal;
	margin-bottom: 0.545em; /* 12px */
	letter-spacing: -0.0455em; /* -1px */
	}
	h2 span {
		font-size: 0.727em; /* 16px */
		font-weight: bold;
		margin-left: 0.25em;
		letter-spacing: 0;
		}
h3 {
	font-size: 1em; /* 11px/12px */
	font-weight: bold;
	margin: 1.636em 0 0.545em; /* 18px/6px */
	}
h4,h5,h6 {
	font-size: 1em; /* 11px/12px */
	font-weight: bold;
	}
.content ul {
	list-style-type: disc;
	margin-left: 1.636em;
	}
	.content ul li {
		margin-bottom: 0.364em; /* 4px */
		}
	.content .actions ul {
		list-style-type: none;
		margin-left: 0;
		}
	.content .actions ul * {
			display: inline;
			}
	.content .actions ul.tagcloud a {
			font-size: 1.5em;
			padding-right: .33em;
			}
.content ol {
	list-style-type: decimal;
	margin-left: 1.636em;
	}
#bb-menu {
	}
	#bb-menu a {
		text-decoration: none;
		}
	#bb-menu a:hover {
		text-decoration: underline;
		}
#bb-header #member-box h2 {
	font-family: "Verdana", sans-serif;
	font-weight: bold;
	font-size: 1.273em;
	line-height: 1.0;
	}
	#bb-header #member-box h2 a {
		color: inherit;
		text-decoration: none;
		}
img.icon {
	vertical-align: middle;
	}
strong { font-weight: bold; }
em,cite { font-style: italic; }
.intro {
	font-size: 1.273em; /* 16px */
	line-height: 1.143; /* 16px */
	margin: 0 0 1em 0;
	}
.error {
	font-weight: bold;
	color: #ed1604;
	}


/* ============================================================== */
/* layout */

hr {
	display: none;
	}
.txt {
	position: absolute;
	left: -9999px;
	}
#main {
	position: relative;
	width: 956px;
	margin: 0 auto 0 auto;
	padding-top: 10em;
	}
#bb-header {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 10em;
	overflow: hidden;
	}
	#bb-header p.logo {
		width: 243px;
		height: 49px;
		margin: 26px 0 0 0;
		background: url("/img/base/bibliotheken-midden-fryslan.png") left top no-repeat;
		}
		#bb-header p.logo a {
			display: block;
			height: 49px;
			}
			#bb-header p.logo a span {
				position: absolute;
				left: -9999px;
				}
	#bb-header #member-box {
		position: absolute;
		right: 0;
		top: 20px;
		width: 227px;
		}
		#bb-header #member-box img {
			float: left;
			width: 36px;
			border: 1px solid #000;
			}
		#bb-header #member-box.loggedIn h2 {
			float: right;
			width: 152px;
			}
		#bb-header #member-box p {
			clear: both;
			margin: 0;
			}
.content {
	position: relative;
	margin: 0 0 0 234px;
	}
.corners {
	background-repeat: no-repeat;
	}

.content.corners.top {
	background-image: url("/img/base/corners-content-top.gif");
	background-position: left top;
	}
.corners.bottom {
	background-image: url("/img/base/corners-content-bottom.gif");
	background-position: left bottom;
	}
#bb-menu .corners.top {
	background-image: url("/img/base/shortcuts-content-top.gif") !important;
	background-position: left top;
	padding-top: .66em;
	}
	#bb-menu li.aladin img {
		padding-left: 1em;
		}

#shortcuts ul.corners.bottom {
	background-image: url("/img/base/shortcuts-content-bottom.gif");
	background-position: left bottom;
	}
#bb-menu .corners.bottom, .content .corners.bottom {
	padding: 1em 13px 1em 27px;
	}
#member-box.corners.top {
	background-image: url("/img/base/corners-box-top.gif");
	}
#member-box .corners.bottom {
	background-image: url("/img/base/corners-box-bottom.gif");
	}
#member-box .corners.bottom {
	padding: 6px 13px 6px 13px;
	}
.messages {
	background-color: #FBC6C0;
	color: #000;
	border: 5px solid #ed1604;
	padding: 1em 13px 1em 13px;
	}
	.messages p {
		margin: 0;
		}
.content fieldset.noBorder {
	padding: 0;
	border: none;
	}
.content .special form .buttons {
	padding: 0;
	}
	.content .special form button {
		float: left;
		margin-right: 10px;
		}
	.thumb {
		float: left;
		margin: 0 10px 1em 0;
		}
	.vote {
		overflow: hidden;
		}
		.vote span {
			display: block;
			float: left;
			font-weight: bold;
			}
		.vote label {
			display: block;
			float: left;
			}
			.vote label span {
				display: block;
				font-weight: normal;
				padding-left: 8px;
				}
.actions {
	position: relative;
	float: right;
	width: 188px;
	border: 1px solid #fff;
	padding: 1em 13px 1em 13px;
	}
.special {
	background-color: #fff;
	color: #000;
	padding: 5px;
	overflow: hidden;
	height: 1%;
	}
h1 img {
	border: 1px solid #000;
	}
#bb-menu {
	position: absolute;
	left: 0;
	top: 10em;
	width: 234px;
	padding: 76px 0 0 0;
	background: url("/img/base/bb-logo.gif") left top no-repeat;
	}
.holder {
	clear: both;
	overflow: hidden;
	border-bottom: 1px solid #fff;
	margin: 0 0 1em 0;
	}
	.holder.no-border {
		border-bottom: none;
		}
li.cat-item {
	background-color: #ddd;
	list-style: none;
	clear: both;
	overflow: hidden;
	height: 1%;
	padding: .5em;
	}
	li.cat-item img {
		float: right;
		margin-left: 3px;
		background-color: #fff;
		}
.stars {
	display: block;
	width: 65px;
	height: 13px;
	overflow: hidden;
	background: url("/img/base/star-off.gif") left top repeat-x;
	}
	.stars span {
		display: block;
		padding-top: 13px;
		background: url("/img/base/star.gif") left top repeat-x;
		}

/* columns */
.col {
	float: left;
	margin-left: 20px;
	}
	.col.c1 {
		margin-left: 0;
		}
	.col.w1 { width: 97px; }
	.col.w2 { width: 214px; }
	.col.w3 { width: 331px; }
	.col.w4 { width: 448px; }
p.left {
	float: left;
	width: 214px;
	margin: 0 20px 1em 0;
	}
p.right {
	float: right;
	width: 214px;
	margin: 0 0 1em 20px;
	}

/* breadcrumbs & meer */
.content ul.breadcrumbs,
.meer a {
	padding: 2px 6px 4px 6px;
	background-color: #e5e5e5;
	}
.content ul.breadcrumbs {
	list-style-type: none;
	margin-left: 0;
	overflow: hidden;
	}
	.content ul.breadcrumbs li {
		float: left;
		margin: 0 0.4em 0 0;
		}
.meer {
	clear: both;
	}
	.meer a {
		display: block;
		font-weight: bold;
		text-align: right;
		}

.content ul.thumbs {
	overflow: hidden;
	list-style-type: none;
	margin: 0 0 0.636em 0;
	}
	ul.thumbs li {
		float: left;
		padding: 0 5px 5px 0;
		margin: 0;
		}
		ul.thumbs li img {
			border: 1px solid #000;
			}



/* forms */
.content fieldset {
	border: 5px solid #fff;
	padding: 0 13px 2em 13px;
	}
	.content legend {
		font-weight: bold;
		}
	form .row {
		clear: both;
		overflow: hidden;
		}
	form .row .help {
		margin-left: 216px;
		}
	form .row .text { width: 331px; }
	form .row .text.w1 { width: 97px; }
	form .row .text.w2 { width: 214px; }
	form .row .text.w3 { width: 331px; }
	form .buttons {
		padding-left: 234px;
		}
	button {
		border: 1px solid;
		background-color: #fff;
		font-weight: bold;
		}
		form .row label {
			display: block;
			float: left;
			width: 196px;
			margin-right: 20px;
			}



/* tables */
th, td {
	border-bottom: 1px solid #fff;
	border-right: 5px solid;
	padding: 0.5em 2px 0.5em 2px;
	}
th {
	font-weight: bold;
	}



/* ============================================================== */
/* QuizCards */
#qcLink {
	display: none;
	}

.qc {
	position: relative;
	width: 620px;
	height: 42em;
	margin: 75px auto 0 auto;
	padding: 10px;
	border: 5px solid #000;
	background-color: #111;
	}
	.qc .close {
		position: absolute;
		right: 0;
		top: 0;
		display: block;
		font-size: 2em;
		color: #666;
		background-color: #000;
		padding: 0 0.33em 0.25em 0.33em;
		cursor: pointer;
		line-height: 1em;
		}
	.qc .close:hover {
		color: #fff;
		}
	.qc {
		color: #fff;
		}
	.qc .q {
		color: #ed1304;
		}
	.qc .c {
		color: #adff14;
		}
	.qc fieldset {
		border: 1px solid #555;
		overflow: hidden;
		margin: 0;
		padding-left: 10px;
		padding-right: 10px;
		}
	.qc legend {
		color: #888;
		}
	.qc .q1 {
		float: left;
		clear: left;
		}
	.qc .q2 {
		float: right;
		clear: right;
		}
	.qc label.q1,
	.qc label.q2 {
		font-size: 1.455em; /* 16px */
		font-weight: bold;
		}
	.qc input.text {
		font-size: 1.455em; /* 16px */
		border: 2px solid #000;
		margin-bottom: 10px;
		width: 45%;
		}
	.qc input.noMargin {
		margin-bottom: 0;
		}
	.qc .btn {
		position: relative;
		z-index: 100000;
		display: block;
		width: 10em;
		margin: -5px auto -5px auto;
		clear: both;
		color: #000;
		background-color: #ccc;
		border: 2px solid #fff;
		font-size: 1.455em; /* 16px */
		cursor: pointer;
		}
	.qc .block {
		overflow: hidden;
		padding: 40px 40px 0 40px;
	}
	.qc .cards {
		border: 1px solid #555;
		background-color: #000;
		padding: 1em 10px 1em 10px;
		height: 22em;
		overflow: auto;
		}
		.qc .cards dt {
			clear: left;
			float: left;
			margin-right: 0.4em;
			font-style: italic;
			}
		.qc .cards dd {
			margin-bottom: 1em;
			}
	.qc .btnStart {
		position: absolute;
		left: 50%;
		bottom: 10px;
		width: 10em;
		margin-left: -5em;
		* margin-left: -15em;
		font-size: 3em;
		color: #fff;
		background-color: #F74B0E;
		border: 2px solid #fff;
		cursor: pointer;
		}
	.qc .card {
		position: absolute;
		left: 50%;
		top: 60px;
		width: 480px;
		height: 300px;
		border: 10px solid #fff;
		margin-left: -250px;
		background-color: #fff;
		color: #000;
		overflow: hidden;
		font-size: 3em;
		text-align: center;
		cursor: pointer;
		}
		.qc .card span {
			display: block;
			position: absolute;
			left: 0;
			width: 480px;
			}
	.qc .progress {
		position: absolute;
		left: 50%;
		bottom: 10px;
		width: 540px;
		height: 1.5em;
		overflow: hidden;
		margin-left: -272px;
		background-color: #002;
		border: 2px solid #000;
		font-size: 2em;
		line-height: 1.5em;
		}
		.qc .progress .bar {
			width: 0;
			height: 1.5em;
			background-color: #006;
			}
		.qc .progress .score {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			text-align: center;
			}
	.qc .disabled fieldset * {
		opacity: 0.25;
		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
		}
		.qc .disabled legend,
		.qc .disabled legend * {
			opacity: 1.0;
			filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
			}
a.external { background-image: url("/img/externe-link.gif"); background-repeat: no-repeat; padding-left: 16px;}

#qcLink h2 { font-size: 1.1em; line-height: 1.125; padding: 0; margin: -2px auto 0 auto;}

#biebbase.study-buddy div.box p img {
	float: left; padding: 0 .66em .33em 0;
	}