/* If radio/checkbox inside wrapper */
.radio:focus-within,
.checker:focus-within,
.selector:focus-within {
  outline: 2px solid #ff6600;
  outline-offset: 4px;
  border-radius: 6px;
}

/*@import url("scratch.css"); */
/*--------------------- clearfix ---------------------------*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0;
    clear: both; 
    visibility: hidden;
}

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
.clear {
	clear: both; 
}
.clear-left {
	clear: left;
}
.inline {
	display: inline-block;
	width: 100%;
}
* html .inline {
	display: inline;
	width: auto;
}
/*--------------------- end clearfix -----------------------*/

/*------------------- reset CSS --------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, code,
del, dfn, em, img, q,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0 none;
	font-size: 100%;
	outline-style: none;
	outline-width: 0;
	text-decoration: none;
	vertical-align: baseline;
}
body {
	line-height: 1;
}

/* Screen reader only class - hides content visually but keeps it accessible to screen readers */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Show sr-only content when focused (for keyboard navigation) */
.sr-only:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border: inherit !important;
    background-color: #fff !important;
    color: #000 !important;
    text-decoration: underline !important;
}

a:hover, a:active, a:focus {
	outline: none;
}
/* remember to define focus styles! */
/* Global focus styles */
*:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Specific focus styles for interactive elements */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
    outline: 2px solid #ff6600;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

/* High contrast focus for critical actions */
.btn-submit:focus,
.btn-next:focus,
.btn-prev:focus {
    outline: 3px solid #ff6600;
    outline-offset: 2px;
    background-color: #fff;
    color: #000;
}

/* Focus styles for custom radio buttons and checkboxes */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: 2px solid #ff6600;
    outline-offset: 2px;
}

/* Focus styles for tab navigation */
[role="tab"]:focus {
    outline: 2px solid #ff6600;
    outline-offset: -2px;
    background-color: #e6f3ff;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
}
table, td, th {
	vertical-align: top;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	content: none;
}
blockquote, q {
	quotes: "" "";
	quotes: none;
}

/* Remove annoying border on linked images. */
a img, a:hover img {
	border: none;
}
/* ie shows extra padding on inputfields, removing this */
input { overflow: visible; }
/*Remove button padding in FF*/
input::-moz-focus-inner { 
    border: 0;
    padding: 0;
}
/*----------------- end reset CSS ---------------------------*/


/*----->>> GLOBAL SETTINGS <<<-----*/ 
html {
	/*height: 101%;*/
	/* only if you want vertical scrollbar in all browsers */
}
body {
	font-size: 62.5%; /*1.0em --> 10px*/
	line-height: 2em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5A5A5F;
}
/*----->>> HEADINGS <<<-----*/ 
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	position: relative;
}
	h1 .absoright, h2 .absoright, h3 .absoright, h4 .absoright {
		text-decoration: none;
		color: #DC002E;
		font-weight: normal;
		padding: 0px 2px;
		border-bottom: 1px dotted #DC002E;
	}
	h1 a:hover.absoright, h2 a:hover.absoright, h3 a:hover.absoright, h4 a:hover.absoright {
		text-decoration: none;
		color: #ffffff;
		border: none;
		background: #DC002E;
		border-bottom: 1px solid #DC002E;
	}
h1 {
	margin: 0px 0px 10px 0px;
	padding: 0px;
	color: #dc002e;
	line-height: 22px;
	font-size: 1.4em;/*child pixels / parent pixels = child ems --> 18px/12px*/
	/*border-bottom: 1px solid #dddddd;*/
}
	h1.absoheader {
		position: absolute;
		right: 0px;
		bottom: 9px;
	}
h2 {
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 8px 0px;
	color: #5A5A5F;
	line-height: 24px;
	font-size: 1.2em;/*16px/12px*/
	border-bottom: 1px solid #5A5A5F;
}
h2.h1 {
		margin: 0px 0px 20px 0px;
		padding: 0px;
		color: #dc002e;
		line-height: 22px;
		font-size: 1.4em;/*child pixels / parent pixels = child ems --> 18px/12px*/
		border: none;
	}
h3 {
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 6px 0px;
	font-size: 1em;/*13px/12*/
	font-weight: bold;
	color: #5A5A5F;
	border-bottom: 1px solid #5A5A5F;
}
.contentlist h3 {
}

h4 {
	font-size: 1em;
	font-weight: bold;
	margin: 0px 0px 14px 0px;
	color: #000000;
}
h5, h6 {
	font-weight: bold;
	margin: 0px 0px 8px 0px;
	padding: 0px 15px;
}
/*----->>> LINKS <<<-----*/ 
a {
	color: #5A5A5F;
}
a:hover {
	text-decoration: underline;
	color: #DC002E;
}
a.dotted, .dotted {
	border-bottom: 1px dotted #DC002E;
	color: #DC002E;
	display: inline-block;
	text-decoration: none;
	padding: 0px 2px;
}
	a:hover.dotted, :hover.dotted {
		border: none;
		color: #FFFFFF;
		background: #DC002E;
		border-bottom: 1px solid #DC002E;
	}
	.absoright {
		position: absolute;
		right: 0px;
		top: 0px;
	}
	.lostinlog, a:hover.lostinlog {
		display: block;
		font-size: 10px;
		margin: 0px 0px 8px 0px;
		border: none;
		font-weight: bold;
	}
	a.btnstyle1, input.btnstyle1 {
		display: inline-block;
		height: 25px;
		line-height: 25px;
		padding: 0px 12px;
		margin: 0px 5px;
		background: #DC002E;
		text-decoration: none;
		color: #ffffff;
		font-size: 1em;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		border: none;
		cursor: pointer;
		font-weight: bold;
	}
    input.btnstyle1:disabled {
        background: #808080;
    }
	body #container #formaanmelden a.btnstyle1, body #container #formaanmelden input.btnstyle1 {
		margin: 0px 5px 0px 0px;
	}
	a.btnstyle2, input.btnstyle2 {
		display: inline-block;
		height: 25px;
		line-height: 25px;
		padding: 0px 12px;
		margin: 0px 5px;
		background: #656666;
		text-decoration: none;
		color: #ffffff;
		font-size: 1em;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		border: none;
		cursor: pointer;
		font-weight: bold;
	}
	.icon-verwijder {
		display: block;
		margin: 0;
        padding: 0;
        border: 0;
		width: 20px;
		height: 25px;
		background: transparent url(images/vuilbakje.png) no-repeat left center;
		text-indent: -9999px;
		cursor: pointer; /* hand-shaped cursor */
        cursor: hand; /* for IE 5.x */
	}
	.betaal-ogone {
		display: inline-block;
	}
	.logo-ogone {
		display: inline-block;
		font-size: 0px;
		text-indent: -99999px;
		width: auto;
		max-width: 120px;
		height: 24px;
		margin-left: 12px;
		line-height: 0px;
		vertical-align: middle;
		object-fit: contain;
		filter: brightness(1.05) contrast(1.1);
		transition: all 0.3s ease;
		padding: 2px 6px;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 3px;
		border: 1px solid rgba(224, 224, 224, 0.8);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}
	
	.logo-ogone:hover {
		filter: brightness(1.1) contrast(1.15);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
		border-color: rgba(208, 208, 208, 0.9);
		transform: translateY(-1px);
	}
	
	/* Responsive adjustments for logo-ogone */
	@media (max-width: 768px) {
		.logo-ogone {
			max-width: 100px;
			height: 20px;
			margin-left: 8px;
			padding: 2px 4px;
		}
	}
/*----->>> COMMON FORMATTING <<<-----*/ 
p {
	margin: 0px 0px 14px 0px;
}
	.accent {
		color: #DC002E;
	}
	.note {
		color: #5A5A5F;
		font-size: 0.9em;
	}
	.errormessage {
		background: #DC002E url(images/errormessage.png) no-repeat 6px 6px;
		padding: 7px 7px 7px 32px;
		color: #ffffff;
	}
	.warning {
		background: #ffffff url(images/icon-warning.png) no-repeat 6px 8px;
		padding: 7px 7px 7px 32px;
		border: 1px solid #dc002e;
		color: #dc002e;
	}
	.success {
		background: #ffffff url(images/icon-success.png) no-repeat 8px 9px;
		padding: 7px 7px 7px 32px;
		border: 1px solid #58ab4e;
		color: #58ab4e;
	}
	.infomessage {
		background: #ffffff url(images/icon-info.png) no-repeat 6px 8px;
		padding: 7px 7px 7px 32px;
		border: 1px solid #898989;
		color: #898989;
	}	
	.harmonica .dotted {
		margin: 0px 0px 8px 0px;
	}

.clearCartButton {
        border-bottom: 1px dotted #DC002E;
        border-top: none;
        border-left: none;
        border-right: none;
        color: #DC002E;
        display: inline-block;
        text-decoration: none;
        padding: 0px 2px;
        background: transparent;
}

.tooltip {
	position: relative;
	font-size: 0.9em;
}
	.tooltip .info {
		color: #DC002E;
	}
		:hover.tooltip .info {
			background: #DC002E;
			color: #ffffff;
		}
	.tooltip .toolinfo {
		position: absolute;
		top: -9999px;
		left: -20%;
		display: block;
		width: 250px;
		padding: 10px;
		background: #ffffff;
		border: 1px solid #acacac;
		z-index: 999;
	}
	:hover.tooltip .toolinfo {
		top: 12px;
	}
ul.liststyle1 {
	margin: 5px 0px 5px 3px;
	padding: 0px;
}
	ul.liststyle1 li {
		list-style: none;
		background: url(images/arrowstyle1.jpg) no-repeat left 6px;
	}
		ul.liststyle1 a {
			display: inline-block;
			text-decoration: none;
			padding: 0px 0px 0px 14px;
		}
		ul.liststyle1 a:hover {
			color: #DC002E;
		}
ul.liststyle2 {
	margin: 0px;
	padding: 0px;
}
	ul.liststyle2 li {
		margin: 0px 0px 0px 23px;
		padding: 0px;
		list-style: none;
		width: 209px;
		height: 121px;
		float: left;
		position: relative;
		text-transform: uppercase;
		font-family: Arial, Helvetica, sans-serif;
	}
	ul.liststyle2 li.first {
		margin: 0px;
	}
		ul.liststyle2 li h3 {
			position: absolute;
			top: 84px;
			left: 6px;
			color: #DC002E;
			font-size: 1.2em;
			margin: 0px;
			padding: 0px;
			border: none;
			background: none;
		}
		ul.liststyle2 li strong {
			position: absolute;
			bottom: 2px;
			left: 6px;
			color: #000000;
			font-size: 0.9em;
		}
ul.liststyle3 {
	margin: 5px 0px 5px 3px;
	padding: 0px;
}
	ul.liststyle3 li {
		list-style: none;
		background: url(images/arrowstyle2.png) no-repeat left 4px;
		line-height: 20px;
	}
		ul.liststyle3 a {
			display: inline-block;
			text-decoration: none;
			padding: 0px 0px 0px 18px;
			color: #dc002e;
		}
		ul.liststyle3 a:hover {
			color: #000000;
		}
ul.liststyle4 {
	margin: 0px;
	padding: 0px;
}
	ul.liststyle4 li {
		margin: 0px 0px 12px 0px;
		padding: 0px;
		list-style: none;
	}
		ul.liststyle4 li h3 {
			border: none;
			color: #dc002e;
			margin: 0px 0px 8px 0px;
			padding: 0px;
		}
/*---->>> FORMS, TABLES <<<----*/
form {
	
}
	label {
		display: inline-block;
	}
	input {
		font-size: 1em;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		color: #5A5A5F;
		line-height: 24px;
	}
	input.inputbrand, input.inputbrand-small, input.inputbrand-aantal, input.inputbrand-half, input.inputbrand-semi {
		border: none;
		background: url(images/input-custombg.jpg) no-repeat left top;
		height: 25px;
		font-size: 1em;
		color: #5A5A5F;
		padding: 0px 3px;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	}
	#formaanmelden #formaanmelden-username, #formaanmelden #formaanmelden-password, #formaanmelden #formaanmelden-submit {
		margin: 0px 0px 8px 0px;
	}
.formstyle1 label {
	display: inline-block;
}
input.inputbrand {
	width: 240px;
}
input.inputbrand-aantal {
	width: 49px;
}
input.inputbrand-half {
	width: 44%;
}
input.inputbrand-small {
	width: 82px;
}
input.inputbrand-semi {
	width: 124px;
}
.error {
	color: #DC002E;
}

.input-validation-error {
	color: #DC002E;
}

input.input-validation-error {
	border: 1px solid #DC002E;
	color: #DC002E;
}
body #container .inline-label {
	display: inline;
}
.tablestyle1 {
	width: 100%;
	margin: 0px 0px 10px 0px;
}
.tablestyle1 .tablestyle1 {
	margin: 0px;
}
	.tablestyle1 th, .tablestyle1 td {
		padding: 3px 0px;
	}
	.tablestyle1 th {
		font-weight: normal;
	}
		td.td130 {
			width: 160px;
		}
		td.td50 {
			width: 50%;
		}
		td.td190 {
			width: 190px;
		}
		td.td250 {
			width: 250px;
		}
		.tablestyle1 h4 {
			margin: 0px 0px 4px 0px;
		}
		.tablestyle1 tr td.border {
			border-bottom: 1px solid #ACACAC;
		}
		.tablestyle1 tr td.border2, .tablestyle1 tr th {
			border-bottom: 1px solid #5A5A5F;
			padding-bottom: 5px;
		}
		.tablestyle1 td.toppadding {
			padding-top: 14px;
		}
		.tablestyle1 td.vert-spacer {
			padding: 0px 6px;
		}
.tablestyle2 {
	width: 100%;
}
	.tablestyle2 th, .tablestyle2 td {
		padding: 3px;
		border-bottom: 1px solid #acacac;
	}
	.tablestyle2 td.text-right {
		text-align: right;
	}
	.tablestyle2 td.noborder {
		border: none;
	}
		
/*----->>> GLOBAL CLASSES <<<-----*/ 
.float-left {
	float: left; 
}
.float-right {
	float: right; 
} 
.text-left { 
	text-align: left; 
}
.text-right { 
	text-align: right;
}
.text-center { 
	text-align: center; 
}
.text-justify  { 
	text-align: justify; 
}
.img-left { 
	float: left;
	margin: 4px 10px 4px 0px; 
}
.img-right { 
	float: right;
	margin: 4px 0px 4px 10px; 
}
.linethrough {
	text-decoration: line-through;
	font-size: 0.9em;
}
.heightstyle1 {
	min-height: 200px;
}
.nopadding { 
	padding: 0px; 
}
	.paddingstyle1 {
		padding: 0px 0px 0px 20px;
	}
	.paddingstyle2 {
		padding: 20px 20px 0px 0px;
	}
.nomargin {
	margin: 0px;
}

/*---->>> boxstyles <<<----**/
.bgstyle1 {
	background: url(images/bgstyle1.jpg) repeat-x left top;
}
.box {
	margin: 0px 0px 20px 0px;
}
.boxborder {
	margin: 0px 0px 14px 0px;
	padding: 0px 0px 14px 0px;
	border-bottom: 1px solid #dddddd;
}
.boxstyle1 {
	width: 676px;
}
.boxstyle2 {
	width: 250px;
}
.boxstyle3 {
	width: 630px;
}
.boxstyle4 {
	width: 320px;
}

.borderstyle1 {
	border: 1px solid #5A5A5F;
	padding: 20px 20px 10px 20px;
}
.contentlist {
	padding: 20px 0px;
}

/**>> <<**/
.master-wrapper-page {
	font-size: 1.2em;/*12px*/
	width: 961px; /*set width of global container*/
	margin: 0px auto;
}
	#top {
		position: relative;
		height: 102px;
	}
		.logo-bpost {
			position: absolute;
			top: 22px;
			left: 4px;
		}
		/*#topmenu {
			position: absolute;
			right: 0px;
			top: 14px;
		}*/
			#topmenu ul#infomenu {
				float: right;
				margin: 0px;
				padding: 0px;
			}
				ul#infomenu li {
					margin: 0px;
					padding: 0px;
					list-style: none;
					float: left;
					line-height: 28px;
				}
					ul#infomenu li a {
						display: inline-block;
						margin: 0px;
						padding: 0px 7px;
						text-decoration: none;
					}
						ul#infomenu li a.active {
							font-weight: bold;
						}
						ul#infomenu li a:hover {
							text-decoration: underline;
						}
			#topmenu ul#languagemenu {
				float: right;
				margin: 0px;
				padding: 0px;
			}
				ul#languagemenu li {
					margin: 0px;
					padding: 0px;
					list-style: none;
					float: left;
					line-height: 28px;
				}
					ul#languagemenu li a {
						display: inline-block;
						margin: 0px;
						padding: 0px 7px;
						text-decoration: none;
					}
						ul#languagemenu li a.active {
							font-weight: bold;
						}
						ul#languagemenu li a:hover {
							text-decoration: underline;
						}
	#groupnavigation {
		border-bottom: 2px solid #aaaaaa;
		margin: 0px 0px 10px 0px;
	  background-color: #F5F5F5;
	}
		#groupnavigation ul {
			margin: 0px;
			padding: 0px;
		}
			#groupnavigation ul li {
				margin: 0px;
				padding: 0px;
				float: left;
				list-style: none;
				line-height: 25px;
			}
				#groupnavigation ul li a {
					display: inline-block;
					color: #5A5A5F;
					text-decoration: none;
					padding: 0px 8px;
				}
					#groupnavigation ul li a:hover, #groupnavigation ul li a.active {
						color: #DC002E;
						text-decoration: none;
					}
	.contentbox {
		padding: 0px 0px 20px 0px;
		position: relative;
		z-index: 1;
	}
		ul.mystampwizard {
			margin: 0px 0px 3px 0px;
			padding: 0px;
			border: 1px solid #acacac;
			background: #f6f6f6;
		}
			ul.mystampwizard li {
				margin: 0px;
				padding: 0px;
				list-style: none;
				float: left;
			}
				ul.mystampwizard li a, ul.mystampwizard li span {
					display: inline-block;
					padding: 0px 18px 0px 14px;
					line-height: 32px;
					text-decoration: none;
					background: url(images/mystampwizard.jpg) no-repeat right top;
				}
				ul.mystampwizard li a:hover {
					text-decoration: none;
					border: none;
				}
				ul.mystampwizard li .active {
					background: #dc002e url(images/mystampwizard.jpg) no-repeat right -96px;
					color: #ffffff;
				}
				ul.mystampwizard li .visited {
					background: #F7F7F7 url(images/mystampwizard.jpg) no-repeat right -32px;
				}
				ul.mystampwizard li .last-visited {
					background: #F7F7F7 url(images/mystampwizard.jpg) no-repeat right -64px;
				}
		.slider-container {
			position: relative;
			width: 591px; /*623*/
			height: 261px; /*313*/
			padding: 15px 26px 97px 26px;
			margin: 10px 0px 0px 0px;
			overflow: hidden;
			z-index: 1;
		}
			.slider-container .slider-overlay {
				position: absolute;
				width: 623px;
				height: 302px;
				z-index: 2;
				top: 0px;
				left: 0px;
				background: url(images/slider-overlay.png) no-repeat center top;
			}
			.slider-container .slider-list {
				position: absolute;
				left: 0px;
				bottom: 0px;
				z-index: 99;
				text-align: center;
				width: 100%;
			}
				.slider-list ul {
					margin: 0px;
					padding: 0px;
					list-style: none;
					white-space:nowrap;
					display: inline-block; 
				}
				.slider-list ul {
					*display: inline;
				}
				.slider-list ul li {
					margin: 0px;
					padding: 0px;
					list-style: none;
					display: inline-block;
					height: 40px;
					width: 39px;
					background: url(images/slider-list.png) no-repeat left top;
					float: left;
					overflow: hidden;
				}
					.slider-list ul li.ui-tabs-selected {
						background: url(images/slider-list.png) no-repeat left bottom;
					}
						.slider-list ul li a {
							display: block;
							width: 29px;
							height: 28px;
							position: relative;
							top: 6px;
							left: 5px;
							overflow: hidden;
							margin: 0px;
							padding: 0px;
						}
			.slider-container #slider-gallery {
				width: 623px;
				height: 313px;
				z-index: 2;
			}
			#slider-gallery .slider-content {
				position: relative;
				width: 623px;
				height: 313px;
				z-index: 2;
			}
				.slider-label {
					display: block;
					width: 550px;
					padding: 10px;
					position: absolute;
					z-index: 99;
					top: 0px;
					left: 0px;
					background: url(images/labeloverlay.png) repeat left top;
					color: #000000;
				}
				.slider-container .smallstamp {
					position: absolute;
					display: block;
					width: 294px;
					height: 174px;
					z-index: 99;
					top: 139px;
					left: 347px;
					background: url(images/smallstamp.png) no-repeat left top;
				}
					.smallstamp .stamp-content {
						width: 69px;
						height: 82px;
						position: relative;
						top: 67px;
						left: 82px;
						display: block;
						overflow: hidden;
					}
				.slider-container .largestamp {
					position: absolute;
					display: block;
					width: 418px;
					height: 209px;
					background: url(images/largestamp.png) no-repeat left top;
					z-index: 99;
					left: 95px;
					top: 115px;
				}
					.largestamp .stamp-content {
						width: 155px;
						height: 82px;
						position: relative;
						z-index: 2;
						top: 91px;
						left: 104px;
						display: block;
						overflow: hidden;
					}
					.ui-tabs-hide {
						display: none;
					}
	#footer {
		border-top: 1px solid #cccccc;
		padding: 12px 0px 40px 0px;
		text-align: center;
		color: #5A5A5F;
	}
		#footer a {
			color: #5A5A5F;
			text-decoration: none;
		}
		#footer a:hover, #footer a.active {
			color: #DC002E;
		}