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

/* -----------------------------------*/
/* ------->>> BASIC LAYOUT <<<--------*/
/* -----------------------------------*/
/* BG Color linker menu: #ffcc00 */
/* BG Color boven menu:  #cbb07b */
/* Text Color boven menu: #451c01 */
/* Text Color linker menu: #451c01 */
: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/evMOSb2b/bg.jpg);
	background-repeat: repeat-y;
}

.leftBgColumn {
	background-color: #fff;
	background-image: url(../../images/klant/evDevelopmentb2b/bg-LeftColumn.gif);
	background-position: right;
	background-repeat: no-repeat;
	border-right: 1px solid #cccccc;
}

.rightBgColumn {
	background-color: #fff;
	background-image: url(../../images/klant/evDevelopmentb2b/bg-RightColumn.gif);
	background-position: left;
	background-repeat: repeat-y;
	border-left: 1px solid #cccccc;
}

.logoCell {
	width: 240px;
	height: 72px;
	background-color: #ffffff;
	font-size: 0;
	background: #ffffff url(../../images/klant/evDevelopmentb2b/MOSlogo.png) no-repeat;
}

.topNavigationCell {
	width: 714px; /* 719 - 5px padding */
	background-color: #333333;
	padding-right: 5px;
}

/* SEARCHBOX */
.searchBox {
	float: right;
	height: 27px; /* -- padding */
	padding-top: 5px;
	padding-left: 2px;
	border-bottom: 1px dotted #ffffff;
}

	.searchBox .input {
		width: 178px;
		margin-left: 16px;
		margin-right: 5px;
	}

	.searchBox label {
		color: #ffffff;
	}
/* NAVIGATION TAB STRIP */
.navigationTabStrip {
	margin-top: 41px;
	padding-left: 0px;
}

	.navigationTabStrip a {
		float: left;
		display: block;
		padding: 10px;
		color: #FFFFFF;
		text-decoration: none;
	}

		.navigationTabStrip a:hover {
			background: #FFFFFF;
			text-decoration: none;
			color: #595959;
		}

		.navigationTabStrip a.active {
			background-color: #FFFFFF;
			font-weight: bold;
			text-decoration: none;
			color: #595959;
		}
/* NAVIGATION MENU */
.navigationMenu {
	background-color: #ffffff;
	padding: 0 0px 15px 0px;
	color: #333333;
}

	.navigationMenu .title {
		padding: 10px 0px 10px 5px;
		border-bottom: 1px dotted #ffffff;
	}

	.navigationMenu a {
		display: block;
		padding: 3px 5px 2px 5px;
		color: #333333;
		text-decoration: none;
	}

		.navigationMenu a.heading {
			margin-top: 10px;
			font-weight: bold;
		}

		.navigationMenu a.active, .navigationMenu a:hover {
			background-color: #ffffff;
			color: #ff0000;
			text-decoration: none;
		}

	.navigationMenu strong {
		margin-top: 10px;
		display: block;
		padding: 3px 5px 2px 5px;
		color: #333333;
		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;
		/* RESPONSIVE CHANGE */
		/* WAS : height:11px;   */
		height: 35px;
	}

		.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;
	/* RESPONSIVE CHANGE */
	/* ADDED : max-width: 92vw; */
	max-width: 92vw;
}

	.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;
	/* RESPONSIVE CHANGE */
	/* WAS : height:14px;   */
	height: 38px;
	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 RESPONSIVE CODE */
/* ********************* */

#menu-toggle {
	display: none;
}

td.contentArea {
	overflow-x: scroll;
}

/* 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
	}

	.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;
	}
}

#SignOnTitle {
	font-size: 50px!important;
	line-height: 50px !important;
	animation: color-change 2s infinite;
	-webkit-box-shadow: 1px 1px 2px 2px #ffffff inset;
	-webkit-box-shadow: 1px 1px 2px 2px rgba(255, 255, 255, 0.75) inset;
	-moz-box-shadow: 1px 1px 2px 2px #ffffff inset;
	-moz-box-shadow: 1px 1px 2px 2px rgba(255, 255, 255, 0.75) inset;
	box-shadow: 1px 1px 2px 2px #ffffff inset;
	box-shadow: 1px 1px 2px 2px rgba(255, 255, 255, 0.75) inset;
	box-shadow: 1px 1px 2px 2px #ffffff inset;
}

@keyframes color-change {
	0% {
		color: #333333;
		font-size: 100%;
	}
	50% {
		color: #ffffff; 
		font-size: 10px !important;
	}
	100% {
		color: #333333;
		font-size: 100%;
	}

/*	9% { color: rgb(255, 130, 0) }

	18% { color: rgb(255, 255, 0) }

	27% { color: rgb(130, 255, 0) }

	36% { color: rgb(0, 255, 0) }

	45% { color: rgb(0, 255, 130) }

	54% { color: rgb(0, 255, 255) }

	63% { color: rgb(0, 160, 255) }

	72% { color: rgb(0, 0, 255) }

	81% { color: rgb(130, 0, 255) }

	90% { color: rgb(255, 0, 255) }

	100% { color: rgb(255, 0, 130) }*/
}