* {
	box-sizing: border-box;
}
html, body {
    margin: 0; padding: 0;
}

html {
    background: white;
    font: 13px/18px "Lucida Grande", Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #333;
}

a {
    color: #555;
	text-decoration:none;
}
a:hover { text-decoration: underline;}

input,
select,
textarea {
    font: 13px/14px "Lucida Grande", Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.input_getal {
    width: 30px;

}

#wrap{
	float:left;
	width:100%;
}

p { margin-top:0;}

.select-product{
	padding-left:0 !important;
}
.c12, .c11, .c10, .c9, .c8, .c7, .c6,.c5,.c4,.c3 { float: left;}
.c12 { width: 100%; }
.c11 { width: 91.666%; }
.c10 { width: 83.333%; }
.c9 { width: 75%; }
.c8 { width: 65%; margin-right: 2%; }
.c7 { width: 58.333%; }
.c6 { width: 50%; }
.c5 { width: 41.666%; }
.c4 { width: 33%; }
.c3 { width: 25%; }
/******************************************************
       Header: Logo + Navigation + Logout CSS
*******************************************************/
.hidden{
	display:none;
}
#header{
  margin: 0 auto;
  padding-top:8px;
  background-color: #fcdb9f;
}
#header #logo{
  width:289px; height:100px;
  margin-left: 15px;
  z-index: 5;
  background:url("/img/logo.png") no-repeat;
  display: inline-block;
}
#header #menu{
  display: inline-block;
	position: absolute;
	top: 59px;
	right: 3px;
}
#header #menu.hasflash {
	top: 23px;
}
#header ul#mainnav{
	width: 100%;
	margin-bottom: 0; padding: 7px 0 0 0;
	z-index: 10;
	background: #fcdb9f;
	margin-top: 28px;
	text-align: right;
}
#header ul#mainnav li{
	list-style-type: none;
	text-align: center;
	padding: 7px 8px;
	display: inline-block;
	background-color: #f0f0f0;
}
#header ul#mainnav li a{
	text-decoration:none;
	font-size:12px;
	font:Arial;
	font-weight:bold;
	color:#848484;
}
#header ul#mainnav li a:hover{
	text-decoration:underline;
}
#header ul#mainnav li#logoff {
	background: #F23FA9;
	color: #FFFFFF;
}
#header ul#mainnav li#logoff a {
  color: #FFFFFF;
}
.loggedinfo{
	margin: 0 auto;
	background: #e8c381;
	text-align: right;
	display: block;
}
.message-of-the-day, .flash-message {
  background: #FEEFD2;
  color: #000000;
  border-left: 4px solid #F570C0;
  padding: 5px 15px;
  font-weight: bold;
	min-width: 650px;
	float: right;
}
.flash-message{
	color: darkred;
	border-left-color: red;
}
.message-of-the-day + .flash-message {
	margin-top: 8px;
}
a#logged{
	color: #fff; font-size: 10px;
	padding: 2px 6px 2px 0;
}

#wrap {
		padding-bottom: 20px;
}
/* Body + Heading */
#wrap div#body{
	margin: 0 auto;
	padding: 0 5px 10px 5px;
/*	width:98%;
	float:left;
	margin-left:1%;
	margin-bottom:15px;*/
}
#wrap div#body div#heading{
	width:100%;
	height:30px;
	_height:40px; /* IE FIX */
	border-bottom:4px solid #eee;
	font:Arial;
	font-size:20px;
	margin-top:5px;
	font-weight:bold;
	padding-top:10px;
	padding-left:5px;
	color:#727272;
	float:left;
	_margin-bottom:12px; /* IE FIX */

}

/* Left-Column + Overview (and scroller) */
div#left-column{
	width:34%;
	float:left;
	margin-left:5px;
	margin-right:15px;
}

/******************************************************
        Overview Table + Scroller + Search box
*******************************************************/
div#overview{
	float:left;
	width:100%;
}

div#overview h1{
	color:#666;
	font-size:16px;
	font:Arial;
	margin-top:12px;
	margin-bottom:12px;
}

div#overview form{
	float:left;
	width:100%;
	margin-bottom:10px;
}

div#overview form input{
	background-color: #f8f7f7;
	border:2px solid #c8c8c8;
	padding:4px;
	height:32px;
	color:#555;
	width:25%;
	float:left;
}

div#overview form .zoekveldje{
	width:68%;
	height:20px;
	margin-right:10px;
	background-position: top right;
}

div#overview form input:focus{
	color:#70706f;
	background-color: white;
}

div#overview form #submit{
	background:#e3e3e3;
	font-weight:bold;
	border:2px solid #b7b7b7;
	color:#70706f;
	width:21%;
	_margin-bottom:-1px;
	margin-left:12px;
	float:left;
}

table{
	width:100%;
	float:left;
	font-size:12px;
	text-align:left;
	border-collapse: collapse;
}

table td, table th{
	padding:3px;
}

table th{
	background:#CCC;
	font-size:12px;
	color:#616161;
	padding: 10px 6px;

}

table tr td {
	background:#f7f7f7;
}
table tr.odd td {
	background:#E8E8E8;
}
table tr.odd + tr td {
	background: #fcdb9f91;
}

table tr.past td {
	text-decoration: line-through;
}

#box table { border:0;}

#box table .description {
	font-size:11px;
}

#box table .description {
	vertical-align: middle;
}

#box .open_product{
	padding: 8px 8px;
	background: #f0f0f0;
	margin: 0 1px;
	float: left;
}
#box .tabs {
	margin-bottom: 7px;
}
#box .tabs a.open_product.active2 {
	background: #ccc;
}
.boxed {
	background: #f4f4f4;
	position: relative;
	width: 100%;
	float: left;
	padding: 25px 15px;
}
.padded {
	background: #f4f4f4;
	position: relative;
	float: left;
	padding: 25px 15px;
}
div#scroller{
	width:100%;
	float:left;
	margin-top:10px;
}

div#scroller div#arrows{
	float:right;
	position:relative;
	display:inline;
}

div#scroller div#arrows a{
	width:23px;
	height:25px;
	float:right;
	display:inline;
}

div#scroller div#arrows a#up{
	background:url("../img/scroller_up.gif") no-repeat;
	margin-left:0px;
}

div#scroller div#arrows a#down{
	background:url("../img/scroller_down.gif") no-repeat;
	_margin-left:-45px; /* IE FIX */
	_margin-top:-25px;  /* IE FIX */
}

/**** Add Box ********/
div#left-column div#box{
	width:97%;
	float:left;
	font-size:12px;
	border:2px solid #cfcfcf;
	background:#F7F7F7;
	padding:6px;
	text-align:left;
	margin-top:10px;
}

div#left-column div#box table{
	width:100%;
	float:left;
}

div#left-column .addPriceGroup, div#left-column .addDepartement, div#right-column #koppel, div#right-column #import{
	display:none;
}

/******************************************************
          Structure: Mid-Line + Right-Column
*******************************************************/
/* Middle Line */
div#seperator-line{
	float:left;
	width:3px;
	height:670px;
	background:#eee;
	margin-top:43px;
}

/* Right-Column + ... */
div#right-column{
	width:62%;
	margin-left:15px;
	float:left;
	position:relative;
}

div#right-column h1{
	color:#666;
	font-size:16px;
	font:Arial;
	margin-top:12px;
	margin-bottom:12px;
}

div#details, div#technical{
	width:100%;
	float:left;
}

div#technical{
	margin-top:10px;
}

/******************************************************
           Technical + Details box and table
*******************************************************/
/* Box */
table td { 	vertical-align: top;}
div#right-column div#box{
	width:98%;
	_width:100%;
	float:left;
	background:#f7f7f7;
	border:3px solid #d9d9d9;
	padding:6px;
	color:#686868;
	font-size:12px;
	margin-bottom: 1em;
}

/* Table in Box */
div#right-column div#box table{
	float:left;
	width:70%;
	font-size:12px;
	color:#686868;
	border-collapse: collapse;
}

div#right-column div#box table tr{
	height:25px;
}

div#right-column div#box table .field{
	color:#555;
	font-weight:bold;

}

/* Actions in Box (in list) */
div#right-column div#box .actions{
	width:100px;
	float:right;
	margin-right:20px;
	list-style-type:none;
	margin-top:0px;
}

div#right-column div#box .actions li{
	float:left;
}

div#right-column div#box .actions a{
	width:100px;
	color:#636363;
	text-align:center;
	text-decoration:none;
	border:2px solid #b7b7b7;
	float:left;
	background:#e3e3e3;
	height:20px;
	margin-top:5px;
}

div#right-column div#box .actions a:hover { background: #636363; color: #FFF;}

/* Place euro and input field better */
.col-price-exl, .col-price-euro{
	float:left;
	padding-bottom:5px;
	padding-top:5px;
}

.col-price-euro{
	margin-left:6px; padding-top:4px;
}

.editOrders div.input{
	float:left;
}

.editOrders form{
	float:left;
}

.editOrders .input{
	width:100%;
}

.editOrders label{
	float:left;
}

/* Calendar CSS */
input.date-pick{
	float:left;
}

.error-message {
	color: #F23FA9;
	font-weight: bold;
}

/*********** Orders / Edit view CSS -> Products ******/
#tab-holder{
	float:left;
	width:100%;
	padding-bottom:10px;
	padding-top:0px;
}

#tab-holder a.open_product{  margin-right:10px; color:#444; border-bottom:1px dotted #ccc; }
#tab-holder .active{ font-weight:bold;  border:0px;}

div#holder table.js-productgroup{
	float:left;
	width:100%;
}

table.js-productgroup #col-1{
	width:10%;
}

table.js-productgroup #col-2{
	width:50%;
}

table.js-productgroup #col-3, table.js-productgroup #col-4{
	width:20%;
}

/******************************************************
              Orders + Products tables etc.
*******************************************************/
/* Structure CSS */
div#holder{
	width:100%;
	float:left;
	margin-top:10px;
	_margin-top:0px;
}

div#holder div#orders, div#holder div#products{
	width:48%;
	float:left;
	margin-right:12px;
}

div#product_price, div#products_prices{
	width:100%;
	float:left;
	margin-right:12px;
}

div#product_price #tab-holder{
	width:30% !important;
}

div#holder div#products{
	margin-left:12px;
	margin-right:0px;
}
/* Shared Table CSS for div#holder (similar to table CSS from div#overview) */
div#holder table{
	width:100%;
	float:left;
	font-size:12px;
	border:2px solid #cfcfcf;
	text-align:left;
}

.btn {
	padding: 25px 0; margin-right: 1px;
	position: relative; float: left;
	width: 100%;
}
a.button {
	padding: 10px 16px;
	background: #f4f4f4;
	border-bottom: 1px solid #6cd1ff;
	border: 1px solid #6cd1ff;
	border-radius: 3px;
}
a.button:hover { text-decoration: none; color: #6cd1ff;}

.suborder {
    border:2px solid #000000;
}

table tr.headorder td{
	background:#616161;
        color:#FFFFFF;
}
table tr.headorder td a{
	background:#616161;
        color:#FFFFFF;
}



/* Styled forms */
.styled-form .text label, .styled-form .textarea label, .styled-form .select label, .styled-form .password label{
	width:180px;
	display:block;
	float:left;
}

.styled-form .text input{
	float:left;
}

.styled-form .input{
	float:left;
	margin-bottom:10px;
}

.cb{
	clear:both;
}

.styled-form .radio{
	margin-left:180px;
}

.swfupload{
	margin-left:180px;
}

/* product selectue */

.select-product{
	list-style:none;
}

.select-product li{
	width:80%;
	background-color:#F2F2F2;
	color:white;
	margin-bottom:5px;
}

.select-product li a{
	display:block;
	background-color:#F2F2F2;
	color:white;
	margin-bottom:5px;
	padding:5px;
	width:100%;
	color:#555;
	text-decoration: none;
}

.select-product li a:hover, .select-product li a.active{
	background-color:#D9D9D9;
}

.select-product li .active2{
	background-color:#D9D9D9 !important;
}

.ac_results {
	padding: 0px;
	border: 1px solid black;
	background-color: white;
	overflow: hidden;
	z-index: 99999;
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	/*
	if width will be 100% horizontal scrollbar will apear
	when scroll mode will be used
	*/
	/*width: 100%;*/
	font: menu;
	font-size: 12px;
	/*
	it is very important, if line-height not setted or setted
	in relative units scroll will be broken in firefox
	*/
	line-height: 16px;
	overflow: hidden;
}

.ac_loading {
	background: white url('indicator.gif') right center no-repeat;
}

.ac_odd {
	background-color: #eee;
}

.ac_over {
	background-color: #0A246A;
	color: white;
}

input.date-pick {
	background-image: url(../img/calendar.png);
	background-repeat: no-repeat;
	background-position: top 2px right 2px;
	border: 1px solid #ccc;
	padding: 3px;
}