--------------------------------------------
GLOBAL STYLING ELEMENTS
-------------------------------------------- */

@font-face {
    font-family: 'CharcoalRegular';
    src: url('../fonts/charcoal-webfont.eot');
    src: url('../fonts/charcoal-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/charcoal-webfont.woff') format('woff'),
         url('../fonts/charcoal-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


HTML {
	width: 100%;
	height: 100%;
	margin: 0 0 1px;
	padding: 0;
	background-color: #f1f3fc;
}

html {overflow-y: scroll;} /* force scrollbar*/

BODY, TD, INPUT, SELECT, TEXTAREA {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	font-size: 9.5pt;
}

P {
	margin: 8px 0px 8px 0px;
}


H1 {
	margin: 5px 0px 10px 0px;
	font-family: 'CharcoalRegular', Arial, Helvetica, sans-serif;
	font-size: 15pt;
	color: #000;
	font-weight: 100;
}


H2 {
	margin: 10px 0px -5px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13pt;
	color: #2d438a;
}

H3 {
	margin: 4px 0px 0px 0px;
	font-family: 'CharcoalRegular', Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-weight: 100;
}

H4 {
	font-size: 11pt;
	font-weight: bold;
	line-height: 150%;
	margin-bottom: 20px;
}


H6 {
	margin: 5px 0px -5px 0px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-weight : normal;
	line-height: 110%;
}

A:link, A:visited {
	text-decoration: none;
	color: #2d438a;
	outline: none; /* hide dotted outline in Firefox */
}
A:hover, A:active	  {
	text-decoration : underline;
	outline: none; /* hide dotted outline in Firefox */
}

LI {
	padding: 0px 0px 5px 0px;
}

HR {
	color: #2d438a;
	background-color: transparent;
	border: none;
	border-top: 1px solid #2d438a;
	height: 1px;
}

HR.zwartdotted {
	color: #000;
	background-color: transparent;
	border: none;
	border-top: 1px dotted #000;
	height: 1px;
}

.sup {
	vertical-align: baseline;
	font-size: 0.6em;
	position: relative;
	top: -0.5em;
}

SPAN.highlight {
	background-color: Yellow;
}

.small {
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
}

.smallgrijs {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	color: #777777;
}

/* ----------------------------------------------------
STRUCTURAL ELEMENTS
------------------------------------------------------- */

DIV.positioner {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 50%;
	width: 1px;
	overflow: visible;
}

DIV.container	{
	position : absolute;
	width : 1000px;
	left : -500px;
	top: 0px;
}

DIV.topbar	{
	position: relative;
	width: 1000px;
	height: 210px;
	background-color: #fff;
}

DIV.main	{
	position: relative;
	width: 1000px;
	height: auto;
	overflow: hidden; /* make background visible FF */
	background-color: #fff;;
}

DIV.footerbar	{
	position: relative;
	clear: both;
	width: 1000px;
	background-color: #2d438a;
	border-top: 1px solid #000;
	text-align: center;
	font-size: 9pt;
	color: #cfd4e6;
	line-height: 30px;
}

DIV.footerbottom	{
	position: relative;
	clear: both;
	width: 1000px;
}


/* --------------------------------------------------
TOPBAR
----------------------------------------------------- */

DIV.logo {
	position: absolute;
	top: 0;
	left: 20;
}

DIV.tagline {
	position: absolute;
	top: 30;
	left: 320;
	width: 300px;
	margin: 10 10;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	color: #ff0000;
	font-weight: bold;
	text-align: center;
}

DIV.topright {
	position: absolute;
	top: 10;
	right: 10;
	width: 300px;
	height: auto;
}

DIV.language{
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #2D438A;
	margin: 0 0 5 0;

}
/* set images in div flags */
A.normal img {filter:alpha(opacity=60); -moz-opacity: 0.5; opacity: 0.5;}
A:hover.normal img  {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}

P.foutmessage {
	margin: 2 0 0 0;
	font-size: 8pt;
	color: red;
	line-height: 100%;
}

DIV.zoeken{
	width: 295px;
	margin: 10 0 0 0;
	text-align: right;
}



/* --------------------------------------------------
MAIN
----------------------------------------------------- */

DIV.spacer	{
	clear: both;
	float: left;
	width: 0px;
	height: 500px;
}

DIV.headerbar {
	position: relative;
	width: 1000px;
	height: 50px;
}

/*
A.homebox img {filter:alpha(opacity=90); -moz-opacity: 0.95; opacity: 0.95; border: 2px solid #fff;}
A:hover.homebox img  {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border: 2px solid #000;}
*/

.homebox {
	float: left;
}

A.homebox img {
	border: 1px solid #000;
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
  	-moz-transition: all 0.5s ease; /* Firefox */
  	-o-transition: all 0.5s ease; /* IE 9 */
  	-ms-transition: all 0.5s ease; /* Opera */
  	transition: all 0.5s ease;
}
A:hover.homebox img  {
	border: 1px solid #000;
	-webkit-box-shadow: 0px 0px 7px 1px rgba(50, 50, 50, 1);
	-moz-box-shadow:    0px 0px 7px 1px rgba(50, 50, 50, 1);
	box-shadow:         0px 0px 7px 1px rgba(50, 50, 50, 1);
	 -webkit-transform:scale(1.1); /* Safari and Chrome */
    -moz-transform:scale(1.1); /* Firefox */
    -ms-transform:scale(1.1); /* IE 9 */
    -o-transform:scale(1.1); /* Opera */
     transform:scale(1.1);
}



/* --------------------------------------------------
HEADERBAR
---------------------------------------------------- */
.titel {
	position: absolute;
	top: 10;
	left: 10;
	font-family: 'CharcoalRegular', Arial, Helvetica, sans-serif;
	font-size: 15pt;
	color: #000;
	font-weight: normal;
}


/* --------------------------------------------------
KLANTCOLUMN
---------------------------------------------------- */

H3.klanttrigger, H3.klantnotrigger {
	display: block;
	margin: 10px 0px;
	padding: 8px 0px 3px 10px;
	font-family: "CharcoalRegular",Arial,Helvetica,sans-serif;
	font-size: 10pt;
	font-weight: normal;
    background-color: #2D438A;
	color: #fff;
	cursor: pointer;
}

H3.klanttrigger:hover, H3.klantnotrigger:hover {
	background-color: #306;
}

DIV.klanttoggle	{
	display: none;
}

/* --------------------------------------------------
RIGHTCOLUMN
---------------------------------------------------- */
DIV.rightcolumn	{
	position: relative;
	float: right;
	width: 300px;
	margin: 0 10 10 0;
}

DIV.kortingbox {
	position: relative;
	margin: 15 0 10 0;
	font-family: 'CharcoalRegular', Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #000;
	font-weight: 100;
	text-align: center;
	border: 2px solid #2d438a;
	padding: 6px;
}

DIV.boxtitel {
    display: block;
    font-family: "CharcoalRegular",Arial,Helvetica,sans-serif;
    font-size: 10pt;
    font-weight: normal;
	padding: 3px 0px 3px 10px;
    background-color: #2D438A;
    color: #fff;
    border-bottom: 1px solid #000;
}

DIV.boxcontent, DIV.toggle {
    width: 290px;
    background-color: #F1F3FC;
    padding: 10 5 5 5;
    line-height: 150%;
}


H3.trigger, H3.notrigger {
	display: block;
	font-size: 10pt;
	font-weight: normal;
	text-align: center;
	padding: 6 0 2 0;
	background-color: #2d438a;
	color: #fff;
	border-bottom: 1px solid #000;
	cursor: pointer;
}

H3.trigger:hover, H3.notrigger:hover {
	background-color: #306;
}

DIV.toggle	{
	display: none;
}

/* --------------------------------------------------
LEFTCOLUMN
---------------------------------------------------- */

DIV.leftmenu	{
	float: left;
	width: 230px;
	height: 480px;
	margin: 0 0 0 10;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: normal;
}

DIV.leftmenu A, DIV.leftmenu A.normal {
	display: block;
	color: #dde2f3;
	text-decoration: none;
	padding: 5px 0px 5px 5px;
	border-bottom: 1px solid #fff;
	background: #2d438a url('../images/menupijl.gif') no-repeat scroll 100% 50%;
}

DIV.leftmenu A:hover {
	color: #fff;
	background: #5a6ead url('../images/menupijl.gif') no-repeat scroll 100% 50%;
}

DIV.leftmenu A.active, DIV.leftmenu A.active:hover {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #fff;
	background: #001557 url('../images/menupijl_active.gif') no-repeat scroll 100% 50%;
}

DIV.leftbar	{
	float: left;
	width: 220px;
	height: auto;
	margin: -10 0 0 10;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: normal;
	text-align:justify
}

/* --------------------------------------------------
MUNTCOLUMN
---------------------------------------------------- */
DIV.muntcolumn	{
	float: right;
	width: 740px;
	margin: 0 10 30 0;
	border: 2px solid #2d438a;
}

td.muntdetails {
	border-bottom: 1px solid #2d438a;
	vertical-align: middle;
	position: relative;
}

DIV.muntdetails_bottom {
	display:inline-block;
	position: absolute;
	bottom: 10px;
	right: 0;
	font-size: 90%;
}

P.productnr {
	margin: 10px 0px 0px 5px;
	font-size: 9pt;
	font-weight: lighter;
	color:#666666;
}

.prijs-strike {
	text-decoration: line-through;
	font-size: 13pt;
	font-weight: bold;
}

.prijs {
	font-size: 15pt;
	font-weight: bold;
}

.prijs_dec {
	font-size: 11pt;
	font-weight: bold;
	color: grey;
}

.prijs_grijs {
	font-size: 15pt;
	font-weight: bold;
	color: grey;
}

/* --------------------------------------------------
CONTENT
---------------------------------------------------- */
DIV.content	{
	float: left;
	width: 680px;
	margin: 0 0 10 0;
}

DIV.contentleft	{
	float: left;
	width: 550px;
	margin: 0px 0px 10px 20px;
}


DIV.innertube {
	margin: 0 0 0 30;
	line-height: 140%;
}

DIV.grabbelframe	{
	position: relative;
	float: left;
	margin-left: 10;
	width: 976;
	border-left: 2px solid #2d438a;
	border-top: 2px solid #2d438a;
	height: auto;
}

DIV.grabbelitem	{
	position: relative;
	float: left;
	width: 222;
	height: 190;
	padding: 10;
	margin: 0;
	border-right: 2px solid #2d438a;
	border-bottom: 2px solid #2d438a;
	text-align: center;
}

DIV.grabbelbottom	{
	position: absolute;
	bottom: 5;
	right: 20;
	font-size: 15pt;
	font-weight: bold;
}


/* --------------------------------------------------
VEILING
----------------------------------------------------- */

TH.veilingtitel {
	font-size: 11pt;
	font-weight: bold;
	color: #2d438a;
	background-color: #f1f3fc;
	border-top: 1px solid #2d438a;
	text-align: left;
}

TH.veilinghead {
	font-size: 7.5pt;
	color: #555;
	background-color: #f1f9fc;
	border-top: 1px solid #cfd4e6;
	border-bottom: 1px solid #2d438a;
	text-align: left;
	padding: 3;
}



/* --------------------------------------------------
WINKELWAGEN
----------------------------------------------------- */

DIV.winkelwagen {
	float: left;
	width: 620px;
	margin: 0 0 10 0;
}


DIV.productlist {
	clear: both;
	margin: 10px 0px 10px 0px;
	padding: 0px 0px 10px 0px;
	border-bottom: 1px solid #4626cf;
}

TH.shopstep {
	font-family: 'CharcoalRegular', Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-weight: normal;
	font-style: normal;
	color: #a9a9a9;
	text-align: center;
	padding-bottom: 10;
}

TH.shophead {
	font-size: 7.5pt;
	color: #555;
	border-bottom: 1px solid #2d438a;
	text-align: left;
	padding: 3;
}

TD.shopitem {
	border-bottom: 1px solid #ccc;
	text-align: left;
	vertical-align: middle;
}


DIV.boxbestelling	{
	float: right;
	width: 170px; /* -2px border*/
	height: auto;
	margin-top: 10px;
	background: #fcfcfc;
	border: 1px solid #a9a9a9;
}

DIV.boxbestellingtube {
	width: 150px;
	margin: 5px;
	text-align: left;
	font-size: 8pt;
}

TH.facthead {
	font-size: 7.5pt;
	color: #555;
	border-bottom: 1px solid #4626cf;
	text-align: left;
	padding: 1px 5px 1px 5px;
}

TD.factitem {
	text-align: left;
	vertical-align: middle;
	padding: 2px 5px 2px 5px;
	border-bottom: 1px solid #ccc;
}

TD.factitemB {
	text-align: right;
	vertical-align: top;
	padding: 1 5 1 5;
}

TD.smalltxt {
font-size: 7pt;
}


/* --------------------------------------------------
POPUPS
----------------------------------------------------- */

/* --------------------------------------------------
FOOTER
----------------------------------------------------- */

DIV.footcredit {
	margin: 5px 10px 20px 0px;
	float: right;
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
}

A.credit:link, A.credit:visited {
	color: 988c71;
	font-weight: normal;
}


/* ----------------------------------------------------
FORM ELEMENTS
------------------------------------------------------- */

INPUT.inputwhite {
	height: 20px;
	font-size: 8pt;
	color: #ccc;
	background-color: #fff;
	border: 1px solid #000;
	padding: 1px 5px 1px 5px;
	vertical-align: middle;
}

.submitknop {
	height: 22px;
	margin-left: 2px;
	padding_left: 3px;
	padding_right: 3px;
	border: 1px solid #2d438a;
	background-color: #cfd4e6;
	color: #2d438a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	vertical-align: middle;
	cursor: pointer;
	-moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.submitknop:hover {
	color: #fff;
	background-color: #6c7fbe;
	text-decoration:none
}

input.addcart {
	background: transparent url('../images/icons/cart_add.png') no-repeat scroll 100% 50%;
	border: none;
	height: 32px;
	width: 32px;
	cursor: pointer;
	vertical-align: middle;
}

input.cartremove {
	text-indent: -1000px;
	background: transparent url('../images/icons/cart_remove.png') no-repeat scroll 100% 50%;
	border: none;
	height: 32px;
	width: 32px;
	cursor: pointer;
	vertical-align: middle;
}

input.cancel {
	background: transparent url('../images/icons/cancel.png') no-repeat scroll 100% 50%;
	border: none;
	height: 32px;
	width: 32px;
	cursor: pointer;
	vertical-align: middle;
}

input.bolpijl-r {
	background: transparent url('../images/icons/bolpijl-r.png') no-repeat scroll 100% 50%;
	border: none;
	height: 24px;
	width: 24px;
	cursor: pointer;
	vertical-align: middle;
	text-indent: -999px;
}
input.bolpijl-r:hover {
	background: transparent url('../images/icons/bolpijl-r_hover.png') no-repeat scroll 100% 50%;
	text-decoration: none;
}


.centeroption {
	background-color: #EEE;
	text-align-last: center;
  	text-align: center;
}

/* ----------------------------------------------------
TABLE ELEMENTS
------------------------------------------------------- */


/* --------------------------------------------------
GENERIC BUTTONS & PIJLEN
----------------------------------------------------- */

a.button {
	height: 22px;
	padding: 2px 4px;
	border: 1px solid #2d438a;
	background-color: #cfd4e6;
	color: #2d438a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	vertical-align: middle;
	cursor: pointer;
	-moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

a.button:hover {
	color: #fff;
	background-color: #6c7fbe;
	text-decoration:none
}

a.pijlblauw_r {
	background: transparent url('../images/pijlblauw_r.png') no-repeat scroll 100% 50%;
	padding: 0px 25px 0px 0px;
	text-decoration: none;
}
a.pijlblauw_r:hover {
	padding: 0px 30px 0px 0px;
	text-decoration: none;
}

a.help {
	background: transparent url('../images/icons/help.png') no-repeat scroll 100% 50%;
	height: 14px;  /* = 16 minus 2 padding */
	padding: 2px 18px 0px 0px;
}
a.help:hover {
	background: transparent url('../images/icons/help_hover.png') no-repeat scroll 100% 50%;
}

a.kleininfo {
	background: transparent url('../images/icons/kleininfo.png') no-repeat scroll 100% 50%;
	padding: 1px 22px 1px 0px;
	font-weight: bold;
	line-height: 20px;
}
a.kleininfo:hover {
	background: transparent url('../images/icons/kleininfo_hover.png') no-repeat scroll 100% 50%;
}

a.info {
	background: transparent url('../images/icons/info.png') no-repeat scroll 100% 50%;
	height: 14px;   /*= 16 minus 2 padding */
	padding: 1px 22px 1px 0px;
}
a.info:hover {
	background: transparent url('../images/icons/info_hover.png') no-repeat scroll 100% 50%;
}

a.extlink {
	background: transparent url('../images/icons/icon_extlink.gif') no-repeat scroll 100% 50%;
	padding-right: 16px;
}

a.intlink {
	background: transparent url('../images/icons/icon_intlink.gif') no-repeat scroll 100% 50%;
	padding-right: 18px;
}

a.pdflink {
	padding: 2px 20px 2px 0px;
	background: transparent url('../images/icons/icon_pdf.png') no-repeat scroll 100% 50%;
}

a.info {
	background: transparent url('../images/icons/info.png') no-repeat scroll 100% 50%;
	padding: 2px 25px 2px 0px;
}
a.info:hover {
	background: transparent url('../images/icons/info_hover.png') no-repeat scroll 100% 50%;
}

a.movie {
	background: transparent url('../images/icons/film.png') no-repeat scroll 0% 50%;
	padding: 2px 0px 2px 20px;
}
a.movie:hover {
	background: transparent url('../images/icons/film_hover.png') no-repeat scroll 0% 50%;
}

a.favoriet {
	background: transparent url('../images/icons/pin.png') no-repeat scroll 0% 50%;
	padding: 2px 0px 2px 20px;
}
a.favoriet:hover {
	padding: 0px 0px 4px 20px;
}

a.star {
	background: transparent url('../images/icons/star.png') no-repeat scroll 0% 50%;
	padding: 2px 0px 2px 20px;
}
a.star:hover {
	background: transparent url('../images/icons/star_hover.png') no-repeat scroll 0% 50%;
}

a.pijlrechts {
	background: transparent url('../images/icons/arrow_right.png') no-repeat scroll 100% 50%;
	padding: 2px 20px 2px 0px;
}
a.pijlrechts:hover {
	padding: 2px 25px 2px 0px;
}

a.bolpijl-l {
	background: transparent url('../images/icons/bolpijl-l.png') no-repeat scroll 0% 50%;
	height: 12px; /* = 24 minus 12 padding */
	padding: 6px 0px 6px 30px;
	color: #003181;
	text-indent: -999px;
}
a.bolpijl-l:hover {
	background: transparent url('../images/icons/bolpijl-l_hover.png') no-repeat scroll 0% 50%;
	text-decoration: none;
}

a.bolpijl-r {
	background: transparent url('../images/icons/bolpijl-r.png') no-repeat scroll 100% 50%;
	height: 12px;
	padding: 6px 30px 6px 0px;
	color: #003181;
}
a.bolpijl-r:hover {
	background: transparent url('../images/icons/bolpijl-r_hover.png') no-repeat scroll 100% 50%;
	text-decoration: none;
}

.verg_webshop_NL {
	display: block;
	width: 112px;
	height: 25px;
	background: transparent url('../images/knoppen/verg-webshop_NL.png') no-repeat 0 0;
	text-indent: -99999px;
}
.verg_webshop_NL:hover {
	background-position: 0 -25px;
}

.verg_webshop_EN {
	display: block;
	width: 112px;
	height: 25px;
	background: transparent url('../images/knoppen/verg-webshop_EN.png') no-repeat 0 0;
	text-indent: -99999px;
}
.verg_webshop_EN:hover {
	background-position: 0 -25px;
}

.verg_muntprijzen_NL {
	display: block;
	width: 112px;
	height: 25px;
	background: transparent url('../images/knoppen/verg-muntprijzen_NL.png') no-repeat 0 0;
	text-indent: -99999px;
}
.verg_muntprijzen_NL:hover {
	background-position: 0 -25;
}

.verg_muntprijzen_EN {
	display: block;
	width: 112px;
	height: 25px;
	background: transparent url('../images/knoppen/verg-muntprijzen_EN.png') no-repeat 0 0;
	text-indent: -99999px;
}
.verg_muntprijzen_EN:hover {
	background-position: 0 -25;
}

/* --------------------------------------------------
PAGINATOR
----------------------------------------------------- */

.paginate {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
a.paginate {
border: 1px solid #2d438a;
padding: 2px 6px 2px 6px;
text-decoration: none;
color: #2d438a;
}
a.paginate:hover {
background-color: #2d438a;
color: #FFF;
text-decoration: underline;
}
a.current {
border: 1px solid #2d438a;
font: bold .9em Arial,Helvetica,sans-serif;
padding: 2px 6px 2px 6px;
cursor: default;
background-color: #2d438a;
color: #FFF;
text-decoration: none;
}
span.inactive {
border: 1px solid #999;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
padding: 2px 6px 2px 6px;
color: #999;
cursor: default;
}

form#viewForm {
	width: 100%;
}

ul.paymentMethodList, ul.paymentMethodIssuerList {
	display: block;
	clear: both;
	width: 100%;
	list-style-type: none;
	padding: 0;
	margin: 0 -5px;
}

ul.paymentMethodList li {
	display: inline-block;
	box-sizing: border-box;
	float: left;
	width: 30%;
	margin: 5px;
	padding: 5px;
	border: 1px solid #ccc;
	text-align: center;
	cursor: pointer;
}

ul.paymentMethodList li label {
	cursor: pointer;
}

ul.paymentMethodList li.selected {
	border: 1px solid #4626cf;
}

ul.paymentMethodIssuerList li {
	display: inline-block;
	box-sizing: border-box;
	float: left;
	width: 22%;
	margin: 5px;
	padding: 5px;
	border: 1px solid #ccc;
	text-align: center;
	cursor: pointer;
}

ul.paymentMethodIssuerList li img {
	max-width: 80%;
}

ul.paymentMethodIssuerList li label {
	cursor: pointer;
}

ul.paymentMethodIssuerList li.selected {
	border: 1px solid #4626cf;
}

div.clear {
	width: 100%;
	clear: both;
}

.paymentMethodIssuer {
	width: 100%;
	display: none;
}

.notification {
	width: 100%;
	border: 1px solid faebcc;
	color: #8a6d3b;
	background-color: #fcf8e3;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 4px;
}