@import url('../smoothbox.css');
@import url('../resetSettings.css');
@import url('../standardSettings.css');

/* -----------------------------------*/
/* ------->>> BASIC LAYOUT <<<--------*/
/* -----------------------------------*/
/* BG Color linker menu: #5e0000 */
/* BG Color boven menu:  #f49813 */ 
/* Text Color boven menu: #f49813 */
/* Text Color linker menu: #f49812 */
:root
{
 overflow-y:scroll;
}
body, html, form
{
	height:100%;
	width:100%;
	background-color:#FFFFFF;	
}
/* LAY OUT BASIS */ 
.fullHeight
{
	margin:0 auto;
	width:100%;
}
.wrap
{
	margin:0 auto;
	width:100%;
	height:100%;
}
.middleColumn
{
	width:959px;
	background-image:url(../../images/klant/evKlinkb2b/bg.jpg);		
	background-repeat:repeat-y;	
}
.leftBgColumn
{
	background-color:#fff;
	background-image:url(../../images/klant/bg-LeftColumn.gif);	
	background-position:right;
	background-repeat:repeat-y;
	border-right:1px solid #cccccc;
}
.rightBgColumn
{
	background-color:#fff;	
	background-image:url(../../images/klant/bg-RightColumn.gif);	
	background-position:left;
	background-repeat:repeat-y;	
	border-left:1px solid #cccccc;
}
.logoCell
{
	width:240px;
	height:72px;
	background-color:#5a3118;
	font-size:0;
	background-image:url(../../images/klant/evKlinkb2b/logo.jpg);	
    background-repeat: no-repeat;	
}
.topNavigationCell
{
	width:714px; /* 719 - 5px padding */
	background-color:#5a3118;
	padding-right:5px;
}

/* SEARCHBOX */
.searchBox
{
	float:right;
	height:27px; /* -- padding */
	padding-top:5px;
	padding-left:2px;
	border-bottom: 1px dotted #fff;
	color:#fff;
}
.searchBox .input
{
	width:178px;
	margin-left:16px;
	margin-right:5px;	
}
/* NAVIGATION TAB STRIP */
.navigationTabStrip
{
	margin-top:41px;	
}
.navigationTabStrip a
{
	float:left;
	display:block;
	padding:10px;
	color:#f49813;
	text-decoration:none;
}
.navigationTabStrip a:hover
{
	background:#FFFFFF;
	text-decoration:none;	
}
.navigationTabStrip a.active
{
	background-color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;	
	color:#595959;
}
/* NAVIGATION MENU */
.navigationMenu
{
	background-color:#5a3118;
	padding:0 5px 15px 5px;
	color:#ffffff;
}
.navigationMenu .title
{
	padding:10px 0px 10px 5px;
	border-bottom: 1px dotted #ffffff;		
}
.navigationMenu a
{
	display:block;
	padding:3px 5px 2px 5px;	
	color:#ffffff;	
	text-decoration:none;
}

.navigationMenu a.heading, .navigationMenu strong
{
	margin-top:10px;
	display:block;
	font-weight:bold;
}
.navigationMenu a.active, .navigationMenu a:hover
{
	background-color:#ffffff;	
	color:#5a3118;
	text-decoration:none;	
}
/* CONTENT AREA */
.contentArea
{
	padding-left:5px;
	color:#595959;
	width:714px; /* 719 - 5px padding */	
}
.contentArea .breadCrumb 
{
	padding:10px 0px 10px 5px;
	border-bottom: 1px dotted #b2b2b2;		
	margin-bottom:5px;
	margin-right:5px;
	height:11px;	
}
.contentArea .breadCrumb .left, .contentArea .pager .left
{
	float:left;
}
.contentArea .breadCrumb .right, .contentArea .pager .right
{
	float:right;
}
.contentArea .pager .left, .contentArea .pager .right
{
	padding-top:4px;
	padding-bottom:4px;
}
.contentArea .pager .right
{
	padding-right:5px;
}
.contentArea .breadCrumb a, .contentArea .pager a
{
	color:#595959;
	text-decoration:underline;
	margin:0 2px 0 2px;
}
.contentArea .breadCrumb span, .contentArea .pager span
{
	font-weight:bold;
}
.productPager td
{
	padding-left:2px;
	padding-right:3px;
}
/* PRODUCT LAYOUT SHARED */
.productBig .input, .productNoPicture .input, .productSmall .input, .productDetail .input
{
	width:25px;
	height:15px; /* overwritten in IE specific in combi with padding top */
	text-align:right;
	padding-right:2px;
}
.productBig .button, .productNoPicture .button, .productSmall .button, .productDetail .button
{
	width:185px;
	height:20px;
}
.productBig select, .productNoPicture select, .productSmall select, .productDetail select
{
	width:220px;
	margin-top:5px;
	margin-bottom:4px;
}
.productBig img, .productSmall img , .productDetail img
{
	border:1px solid #b2b2b2;
}
.productBigLineHorizontal, .productSmallLineHorizontal
{
	float:left;
	margin:5px 5px 5px 0;
	width:709px;
	border-bottom:1px dotted #b2b2b2;
}
/* CONTENT LAYOUT BIG */
.productBig
{
	float:left;
	width:219px; /* -- padding */
	height:238px;
	padding:5px;	
	background-color:#eeeeee;
	color:#595959;
}
.productBig div.title
{
	padding:5px;
	margin-bottom:5px;
	font-weight:bold;
}
.productBig a
{
	display:block;
	color:#595959;
	text-decoration:none;
	background-image:url(../../images/icon-info.gif);
	background-position:top right;
	background-repeat:no-repeat;
	text-decoration:none;	
}
.productBig a:hover
{
	background-image:url(../../images/icon-info-active.gif);
	text-decoration:none;
}
.productBigLine
{
	float:left;
	margin:0 5px 0 5px;
	height:248px;
	border-right:1px dotted #b2b2b2;
}

/* PRODUCT LAYOUT NoPicture */
.productNoPicture
{
	width:709px;
}
.productNoPicture td
{
	background-color:#eeeeee;
	padding-top:5px; /* padding bottom is arranged by select */ 	
}
.productNoPicture tr.alt-row td
{
	background-color:#ffffff;	
}
.productNoPicture .name
{
	padding:0;	
}
.productNoPicture .name a div
{
	cursor:pointer;
	color:#595959;
	text-decoration:none;
	background-image:url(../../images/icon-info-noPicture.gif);
	background-position:top right;
	background-repeat:no-repeat;
	height:19px;
	padding:10px 0px 0px 10px;
	font-weight:bold;
	width:246px;
}
.productNoPicture .name a:hover div
{
	background-image:url(../../images/icon-info-noPicture-active.gif);	
}
.productNoPicture .input
{
	margin:0;
	margin-left:4px;
	width:21px;
}
.productNoPicture .button
{
	margin:0;
	margin-left:5px;
	position:relative;
	top:-2px;	/* also in IE specific */
	float:right;
}
.productNoPicture select
{
	margin:0;
	margin-left:5px;
	margin-bottom:4px;
}
/* Product SMALL */
.productSmall
{
	float:left;
	width:344px; /* -- padding */
	height:69px; /* -- padding */
	padding:5px;	
	padding-left:0px; /* left padding is in the TD of the table */
	background-color:#eeeeee;
	color:#595959;
}
.productSmall td
{
	padding-left:5px;
}
.productSmall div.title
{
	padding:5px;
	font-weight:bold;
}
.productSmall a
{
	display:block;
	color:#595959;
	text-decoration:none;
	background-image:url(../../images/icon-info.gif);
	background-position:top right;
	background-repeat:no-repeat;
	text-decoration:none;	
}
.productSmall a:hover
{
	background-image:url(../../images/icon-info-active.gif);
	text-decoration:none;
}
.productSmallLine
{
	float:left;
	margin:0 5px 0 5px;
	height:79px;
	border-right:1px dotted #b2b2b2;
}
.productSmall .button
{
	width:208px;
}
.productSmall select
{
	width:242px;
	margin-top:4px;
	margin-bottom:3px; /* also in IE Specific */
}
/* ProductDetail */
.productDetail td
{
	background-color:#eeeeee;	
}
.productDetail .productSpecification 
{
	background-color:#FFFFFF;
}
.productDetail .left
{
	width:99px; /* -- padding */
	text-align:right;
	padding-right:10px;
	padding-top:10px;	
	padding-bottom:10px;	
}
.productDetail .right
{
	width:99px; /* -- padding */
	text-align:right;
	padding-right:10px;
	padding-top:10px;
}
.productDetail .lineLeft
{
	border-left:5px solid #ffffff;	
	padding-top:10px;
	padding-left:10px;
}
.productDetail .lineLeft.withImage
{
	padding-left:5px;
	padding-right:5px;
	padding-top:0px;
}
.productDetail .lineLeft.withControls
{
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
}
.productDetail .lineRight
{
	width:5px;
	background-color:#FFFFFF;
	border-right:1px dotted #b2b2b2;	
}
.productDetail .lineRightText
{
	width:5px;
	border-left:1px dotted #b2b2b2;	
}
.productDetail .text
{
	width:339px;
	line-height:16px;
	padding-bottom:10px;
}
.productDetail .pricePerItem
{
	font-size:18px;
	padding-right:5px;
}
.productDetail hr
{	
	margin:0;
	padding:0;
	height:1px;
	color:#ffffff;
	background-color:#FFFFFF;
	padding-top:5px;
	border:0;
	border-bottom:1px dotted #b2b2b2;		
}
.productDetail .last
{
	padding-bottom:5px;	
}
.productDetail .horizontalDividerLeft
{
	background-color:#FFFFFF;
	height:11px; /* also in IE specific */
}
.productDetail .horizontalDividerRight
{
	background-color:#FFFFFF;
	height:11px; /* also in IE specific */
	padding-left:5px;
}

.productDetail .horizontalDividerFullWitdh
{
	background-color:#FFFFFF;
	height:11px;
}
/* PROBABLY TO COMPLEX
.productDetail .horizontalDividerLeft div
{
	margin-top:5px;
	width:109px;
	border-bottom:1px dotted #b2b2b2;
}
.productDetail .horizontalDividerRight div
{
	margin-top:5px;
	margin-left:5px;	
	width:229px;
	border-bottom:1px dotted #b2b2b2;
}
.productDetail .horizontalDividerFullWitdh div
{
	margin-top:5px;
	width:349px;
	border-bottom:1px dotted #b2b2b2;
}
*/
.productDetail .button
{
	margin-left:5px;
	width:180px;
}
.productDetail select
{
	width:219px;
	margin-top:0px;
	margin-bottom:5px; /* also in IE Specific */
}
/* OTHER */
a.ExtraVestigingLink
{
	display:block;
	position:relative;
	top:2px;
	color:#595959;
	padding-top:5px;
	padding-bottom:7px;
	margin-right:10px;
	margin-bottom:5px;
	height:14px;
	text-decoration:none;
	background-image:url(../../images/extravestiging-nl.gif);
	background-position:top right;
	background-repeat:no-repeat;
	text-decoration:none;	
}
a:hover.ExtraVestigingLink
{
	background-image:url(../../images/extravestiging-nl-active.gif);
}
.footer
{
	vertical-align:bottom;
	border-bottom:1px solid #cccccc;
}
/* FORM ELEMENTS */
input.input
{
	height:15px; /* displays as 19px in ff */
}
input.button
{
	position:relative;
	top:1px;
	height:19px; /* displays as 18px in ff */
}

/* START MEDIA 0px - 767px */
@media screen and ( max-width: 767px ) {
	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	/* No bitmaps shown! */
	.leftBgColumn,
	.rightBgColumn {
		display: none;
	}

	.wrap > tbody > tr > .middleColumn {
		width: 90vw;
		margin: 0 auto;
		display: inline-block;
	}

	.middleColumn > table,
	.middleColumn > tbody,
	.middleColumn > tr {
		display: inline-block;
		width: 80vw;
	}

		/** Fix logo height */
		.middleColumn > table > tbody > tr:first-child {
			height: 20px !important;
		}

	.middleColumn {
		background: #ffffff;
	}

	.logoCell {
		display: block;
		width: 100vw;
	}

	.logoCell {
		background-position: center;
		background-repeat: no-repeat;
	}

	.topNavigationCell {
		display: block;
		width: 100vw;
	}

	.contentArea {
		display: block;
		width: 95vw;
	}

	.topNavigationCell {
		height: auto;
	}

	.searchBox {
		float: none;
	}

		.searchBox .input {
			margin-left: 0px;
		}

	/* Put the DDL as far on top as possible! */
	.topNavigationCell select {
		display: block;
		width: auto;
		margin: 2px 0 0;
	}

	.navigationTabStrip {
		margin-top: 0px;
	}

	.loginPage .navigationTabStrip {
		margin: 0 !important;
	}

	/** Menu */
	#menu-toggle {
		margin-top: -15px;
		display: block;
	}

	.loginPage #menu-toggle {
		display: none !important;
	}

	/* Do not show the label 'orders' */
	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.searchBox label {
		display: none;
	}

	.searchBox {
		height: 27px; /* -- padding */
		padding-top: 0px;
		border-top: 1px dotted #ffffff;
		border-bottom: none;
	}

	/* No padding so the menu is as far on top as possible! */
	.navigationMenu {
		display: block;
		width: 100vw;
		padding: 0 0px 0px 0px;
		line-height: 2px;
	}

	/* Change the text on the buttons to fit smaller screens! */
	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay1 span {
		display: none;
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay1:after {
		content: "MA";
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay2 span {
		display: none;
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay2:after {
		content: "DI";
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay3 span {
		display: none;
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay3:after {
		content: "WO";
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay4 span {
		display: none;
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay4:after {
		content: "DO";
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay5 span {
		display: none;
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay5:after {
		content: "VR";
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay6 span {
		display: none;
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay6:after {
		content: "ZA";
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay7 span {
		display: none;
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay7:after {
		content: "ZO";
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToWeek span {
		display: none;
	}

	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToWeek:after {
		content: "Week";
	}

	#ctl00_panelNavigationMenu,
	#ctl00_SignOn1_panelLoggedIn {
		display: none;
	}

		#ctl00_panelNavigationMenu.open,
		#ctl00_SignOn1_panelLoggedIn.open {
			display: block;
		}

	/* Since the texts are smaller, center alignment is not needed anymore */
	.navigationTabStrip {
		/* text-align: center; */
	}

		.navigationTabStrip a {
			background: red;
			display: inline-block;
			text-align: center;
			float: none;
		}

	.contentArea .breadCrumb .right {
		float: none;
		margin-top: 21px;
	}

	.breadCrumb {
		height: 50px !important;
	}

	.buttons td {
		display: block;
	}

	/* Product lightbox */
	#TB_window {
		max-width: 90vw !important;
		left: 50% !important;
		margin-left: -45vw !important;
	}

	#ctl00_ddlOrderSelect {
		width: 55% !important;
		float: left;
	}
	/* As far on top as possible */
	#ctl00_btJumpToOrder {
		top: 2px;
		height: 18px;
	}

	.mobile-block {
		float: none !important;
		display: block !important;
	}

	.navigationMenu .title {
		visibility: hidden;
		height: 0px;
	}

	/* Hide the legenda when in mobile modus */
	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.contentArea table tbody tr td.mobile-block {
		visibility: hidden;
		height: 0px;
	}

	/* Hide the demotext when in Mobile modus*/
	html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.contentArea div.demotext {
		visibility: hidden;
		height: 0px;
	}

	#ctl00_content_btSave {
		float: left !important;
		margin-left: -5px !important;
	}
}

/* START MEDIA 768px - 980px */
@media screen and ( min-width: 768px ) and ( max-width: 980px ) {
	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	.leftBgColumn,
	.rightBgColumn {
		display: none;
	}

	.wrap > tbody > tr > .middleColumn {
		width: 90%;
		margin: 0 auto;
	}

	.middleColumn > table,
	.middleColumn > tbody,
	.middleColumn > tr {
		display: inline-block;
		width: 100vw;
	}

	.logoCell,
	.navigationMenu {
		display: inline-block;
		width: 25vw;
		width: calc( 240px );
		float: left;
	}

	.topNavigationCell,
	.contentArea {
		display: inline-block;
		width: 75vw;
		width: calc( 100vw - 254px );
		float: left;
	}

	.topNavigationCell {
		height: 72px;
	}

	.productNoPicture {
		width: 75vw;
		width: calc( 100vw - 260px );
	}

	.buttons td {
		display: block;
	}
}