/*
Kleuren:
- Oranje: #f8700f
- Rode error border: #FA3116
- Grijs: #efefef
*/

body {
	font-family: 'Rubik',sans-serif;
}

.content-wide a,
.content-small a,
a.orange {
	color: #f7700f;
	font-weight: bold;
}

a.black {
	color: #000;
}

p {
	margin-bottom:8px;
}
.text p {
	padding-bottom: 8px;
}
.text h1 {
	padding-top: 8px;
}
	.text h1:first-child {
		padding-top:0;
	}

input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none;
}

input:focus::input-placeholder {
	stransition: opacity 0.5s 0.5s ease; 
	sopacity: 0;
}

fieldset {
	border:none;
}

.white {
	background-color: #fff;
}
.grey {
	background-color: #efefef;
}

.unavailable {
	color: #fa3116;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}

/* Horizontal alignment */
.centerx-container {
	width:100%;
	position: relative;
	float:left;
	font-size: 14px;
}
	.centerx {
		text-align: left;
		width:1200px;
		margin:0 auto;
	}

span.error {
	background-color: #ffa599;
	border: 1px solid #fa3116;
	border-radius: 5px;
	display: block;
	font-size: 12px;
	margin-bottom: 12px;
	padding: 4px;
	width: 60%;
}

/* Popup */
.popup-container {
	display: none;
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	/* Opacity inheritance hack: http://stackoverflow.com/a/5770362/1211822 */
	background-color:rgba(102,102,102,0.75);
	z-index:150;
}
.popup {
	position: relative;
	margin:25% auto;
	width:400px;
	height:300px;
	z-index:175;
	border: 1px solid #898989;
	-webkit-box-shadow: 3px 3px 3px 0 #9C9C9C;
	box-shadow: 3px 3px 3px 0 #9C9C9C;
	-webkit-border-radius:5px;
	border-radius:5px;
}
	.popup .header {
		-webkit-border-radius:5px 5px 0 0;
		border-radius:5px 5px 0 0;
		padding: 4px;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 13px;
	}
	.popup .content {
		padding:4px;
	}
	.popup .close {
		display: inline-block;
		-webkit-border-radius:5px;
		border-radius:5px;
		padding: 4px;
		-webkit-box-shadow: 3px 3px 3px 0 #9C9C9C;
		box-shadow: 3px 3px 3px 0 #9C9C9C;
		position: absolute;
		right:8px;
		bottom:8px;
		cursor:pointer;
	}

/* icon fonts */
/* http://icomoon.io/ */
@font-face {
	font-family: 'icon_font';
	font-weight: normal;
	font-style: normal;	
	src:url('/css/fonts/icon_font.eot?2hfle4');
	src:url('/css/fonts/icon_font.eot?#iefix2hfle4') format('embedded-opentype'),
		url('/css/fonts/icon_font.woff?2hfle4') format('woff'),
		url('/css/fonts/icon_font.ttf?2hfle4') format('truetype'),
		url('/css/fonts/icon_font.svg?2hfle4#icon_font') format('svg');
}

.iconfont {
	font-family: 'icon_font';
	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;	
}

/* loading */
@keyframes loading-rotate { /* Explorer 10, Firefox, and Opera. */
	0% {
		transform: rotate(0);
		-ms-transform: rotate(0);
	}
	100% {
		transform: rotate(360deg); /* Standard syntax */
		-ms-transform: rotate(360deg); /* IE 9 */
	}
}
@-webkit-keyframes loading-rotate { /* Safari and Chrome */
	0% {
		-webkit-transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Safari, Opera */
	}
}

.loading:before {
	font-family: 'icon_font';
	speak: none;
	float: left;
	-webkit-animation: loading-rotate 3s infinite linear;
	animation: loading-rotate 2s infinite linear;
	text-shadow: 0 0 .25em rgba(255,255,255, .3);
	content: "\e604";
}
	.loading.booklist {
		text-align: center;
	}

.buttons {
	width:100%;
	float: left;
}
	.buttons > div,
	.button {
		background-color: #dfdfdf;
		position: relative;
		float: left;
	}
	.buttons > div:first-child {
		float:left;
	}
	.buttons > div:last-child {
		float:right;
	}
	.button:hover {
		background-color:#868686;
	}
.button a {
	padding:16px;
	float:left;
	text-decoration: none;
	color:#000;
}
form .field.submit input.button {
	box-shadow:none;
	border:0;
	border-radius:0;
	padding:16px;
	font-weight:bold;
}
.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}

/* table */
.table {
	display: table;
}
.tablerow {
	display: table-row;
}
.tablecell {
	display: table-cell;
}
/* Other */
.show {
	display: block !important;
}
.form-error,
form .error-message {
	border: 1px solid #fa3116;
	border-radius: 3px;
	color: #fa3116;
	margin-bottom: 4px;
	padding: 4px;
	width: 100%;
	background-color: #ffe6e6;
}
form .error-message {
	margin-top: 6px;
	margin-bottom: 0;
}
.smallfont {
	font-size: 13px;
}
.background-orange {
	background-color: #f8700f;
}

/**
 * Default text colors
 */
.green {
	color: green;
}
.orange {
	color: #f8700f;
}

p.searchintrotext {
	padding-bottom: 10px;
	width:625px;
}