/*
** HK
** Kleuren blauw die ik nu heb gebruikt;
** Lichtblauw achtergrond; 94adcc
** Donkerblauw bij logo en onderste balk; 02132d
** Balkje met tabs; 2d4159
*/

.searchBox {
	background-image :url('/images/nav/magnifier.jpg');
	background-repeat: no-repeat; background-size: contain; padding-left: 28px;
	width: 190px; height: 32px;
	margin: 0;
} 

.CartButton {
  background-image :url('/images/nav/cart-hk2.jpg');
  background-repeat: no-repeat; background-size: contain; padding-left: 30px;
  width: 90px; height: 32px;
  background-color: #FFFFFF; color: #000000;
} 

form.balk { display:inline; margin: 0; padding: 0; }
select.muntkeuze { height: 32px; width: 90px; margin: 0; }

Xbutton {
    background-color: #000000; color: #FFFFFF;
    text-align: center; text-decoration: none;
    padding: 0.2em 1em; margin: 4px 2px; display: inline-block; 
    font-size: 1em; font-weight: bold; cursor: pointer;
}

input[type="button"], input[type="submit"] {
	border: 1px solid; border-color: ##02132D; font-weight: normal; font-size: 1em;
	color: #FFFFFF; cursor: pointer; background-color: #02132D; margin-top: 1em;
}

.menubalk { background-color: #2d4159; margin: 0; padding: 0.5em; } 
.menuknop {
	color: #FFFFFF; background-color: #2d4159;
	margin: 0 0 0 0; padding: 5px 5px 5px 5px;
	font-size: 1.2em; font-variant: small-caps;
	width: 100px; display: inline-block; white-space: nowrap;
	text-align: center;
}
.menuknop a, .menuknop a:link, .menuknop a:visited, .menuknop a:hover, .menuknop a:active { color: #FFFFFF; text-decoration: none; cursor: pointer; }

a { text-decoration: none; cursor: pointer; color: #2E5E9B; }
/* a:link { color: #2E5E9B; } */
a:visited { color: #2E5E9B; }
a:hover { color: #2E5E9B; }
a:active { color: #bb7f11; }
/* a:visited a:hover a:active */

/*
** First ensure that all HTML elements have the box-sizing property set to border-box.
** This makes sure that the padding and border are included in the total width and height of the elements.
*/

* { box-sizing: border-box; }

/*
** If the max-width property is set to 100%, the image will scale down if it has to,
** but never scale up to be larger than its original size
*/
img, video { max-width: 100%; height: auto; }

/* Test img { outline: #00FF00 solid thick; } *?

/*
**The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page,
** and other elements will be placed as if the columns does not exist.
** To prevent this, we will add a style that clears the flow
*/
.row::after { content: ""; clear: both; display: block; vertical-align: bottom; }

/* Ter test beg **
** [class^="col-"] { float: left; padding: 25px; border: 1px solid blue; background-color: lime; }
** body { border: 1px solid red; margin-left: 0px; }
** .header, .footer { border-style: solid; border-width: 2px; border-color: yellow; }
** .row::after { border: solid; border-width: 2px; border-color: pink; }
** Ter test end */

/* nope vernachtelt de gouden achtergrondkleur in de padding
** .row { width: 100%; background-color: #000000; margin: 0px; padding-left: 1em; display: inline-block; vertical-align: bottom; }
*/

.col-heel { width: 100%; }

[class^="col-"] { float: left; }

/* mobile devices */
[class^="col-"] { width: 100%; }

@media only screen and (min-width: 768px) {
	.col-half { width: 50%; } /* Nog nodig in headerbalk */
	.col-derde { width: 33.33%; }
	/* .col-vierde { width: 25%; } */
	/* .col-T1 { width: 50.3%; } */
	.col-T1 { width: 50%; } /* Tbv twee 'halve' tegels naast elkaar */ 
	.col-T2 { width: 27.8%; }
	.col-T3 { width: 21.9%; }
}

.col-ArtOvz { background-color: #FFFFFF; padding-bottom: 20px; }
@media only screen and (min-width: 786px) { .col-ArtOvz { width: 50%; } } 
/* test */
@media only screen and (min-width: 786px) { .col-ArtOvz3 { width: 33.3%; } } 
.col-ArtOvz3 { background-color: #FFFFFF; padding-bottom: 20px; }

.CelLinks { padding: 10px 10px 10px 0; }
.CelRechts { padding: 10px 0 10px 10px; }
.CelTussen { padding: 10px 5px 10px 5px; }

.KnopLinks { padding: 0px 10px 0px 0; }
.KnopRechts { padding: 0px 0 0px 10px; }
.KnopTussen { padding: 0px 5px 0px 5px; }


.content {
color: #000000; background-color: #FFFFFF; padding: 10px; }
.ArtTtl { color: #02132d; font-size: 1.2em; }
.ArtInfo { display: inline-block; width: 66.6%; }
.ArtImg  { display: inline-block; width: 30%; }
/*.ArtRij { padding-bottom: 45px; }*/
.NewRij { padding-bottom: 1em; } 


.ArtDetImg { float: right; width: 50%; }
@media only screen and (max-width: 600px) { .ArtDetImg { width: 100%; } } 


body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em; color: #000000;
	/* background-color: #8A774F; */
	background-color: #94ADCC;
	text-align: left; /* text-align: justify; */
	width: 100%;
	padding: 0px;
}

@media only screen and (min-width: 1180px) {
	body { width: 1180px; margin-left: auto; margin-right: auto; }
}

/* de stijlen mbt floaten */
.Left { float: left; }
.Right { float: right; }
.Clear { clear: both; }

figure { display:table; }
figure.Right { float: right; margin: 5px 0 5px 5px; }
figcaption { display:table-caption; caption-side:bottom; font-size: 0.8em; font-style: italic; }

/* navigatie icons */
ul.NavIcons { display: inline; white-space: nowrap; margin-top: 0; margin-bottom: 0 }
ul.NavIcons li { display: inline-block; float: left; list-style-type: none; background-image: none; }
li.topline { border-style: solid; border-color: #FFFFFF; border-width: 10px 0 0 0; width: 25%;  }

ul.NavIcons li a { display: block; margin: 0 0 0 0; text-indent: 0px; }

/* font-size 0 levert geen witruimte voor spaties in de html-code, bij li kun je weer een grootte opgeven */
ul.HorNavIcons  { display: inline; margin: 0; padding: 0; font-size: 0px; }
/* ul.HorNavIcons li { display: inline-block; float: left; list-style-type: none; background-image: none;
	font-size: 1rem; color: #FFFFFF; } */
ul.HorNavIcons li { display: inline-block; float: left; list-style-type: none; background-image: none; color: #FFFFFF; }
ul.HorNavIcons li.vierde { max-width: 25%; }
/* ul.HorNavIcons li.derde { max-width: 33.33%; } */
ul.HorNavIcons li.derde { width: 33.33%; }
ul.HorNavIcons li.halve { max-width: 50%; }


/* Zo loopt het logo er niet uit. Waarom niet?? */
.header, .footer { width: 100%; background-color: #02132d; margin: 0px; padding-left: 1em; display: inline-block; vertical-align: bottom; }
.footer { padding: 1em; color: #FFFFFF; }


/*[class^="col-"] { float: left; padding: 05px; border: 0px solid blue; background-color: lime; }*/

/* .navbutton { text-indent: 0; display: inline-block; margin: 0; padding: 20; background-color: #000000; color: #FFFFFF; font-size: 1.5em; font-weight: bold; } */
/* li.NavCon { font-size: 2em; width: 25%; } */
/* test li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } */
/* ul.NavIcons li a { display: block; margin: 0 10px 0 0; text-indent: -99999px; height: 56px; width: 48px; }*/
/* ul.NavIcons li a { display: block; margin: 0 0 0 0; text-indent: 0px; height: 56px; }*/

/*
** ul.NavIcons li a.Twitter { background: transparent url("../images/nav/twitter.gif"); }
** ul.NavIcons li a.Facebook { background: transparent url("./images/nav/facebook.gif"); }
** ul.NavIcons li a.Instagram { background: transparent url("./images/nav/instagram.gif"); }
*/

/*
** ul.NavIcons li a.Join { background: transparent url("../images/nav/contact.gif"); text-indent: -99999px; }
** ul.NavIcons li a.Mgz { background: transparent url("../images/nav/contact.gif"); text-indent: -99999px; }
** ul.NavIcons li a.Faq { background: transparent url("../images/nav/contact.gif"); text-indent: -99999px; }
** ul.NavIcons li a.Con { background: transparent url("../images/nav/contact.gif"); text-indent: -99999px; }
*/

/*.header { width: 100%; background-color: #000000; margin: 0px; padding-left: 10em; display: block; }*/

h1, h2, h3, h4, h5, h6 { color: #02132d; }
h1 { font-size: 1.5em; padding: 0 0 0 0; margin: 0.5em 0 0.5em 0; }
h2 { font-size: 1.2em; padding: 0 0 0 0; margin: 0 0 0 0; } 
p { padding: 0 0 0 0; margin: 0 0 1em 0; } 
.smalltext { font-size: 0.8em; font-style: italic; }

/* opsomming in rijen van artikelen, bv search result */
p.artrij:nth-child(2n+1) { background: #EFEFEF; }
span.artrij { vertical-align: top; display: inline-block; padding: 2px 10px 2px 2px } 
.artcart {width: 5%; }
/*.artnr { width: 40px; }*/
.artrbr { width: 15%; }
.artart { width: 25%; }
.artttl { width: 40%; }
.artprc { width: 10%; }

/* cart */
.cartrow { clear: both; }
button.cartrowtrash {
	float: left; cursor:pointer;
	background-image: url('/images/nav/recyclebin_p30.jpg'); background-repeat: no-repeat; background-size: contain;
	width: 2em; height: 2em; margin-right: 0.7em;
}
span.cartrowtrash {
	float: left; cursor:pointer;  margin-right: 0.7em;
	/* width: 2em; height: 2em; */
}

.cartrowprice { float: right; }
.cartrow:nth-child(odd) { background: #EFEFEF; } /* kindje van <div class="content"> */