@charset "utf-8";
/* CSS Document */

body {
	background-attachment: fixed;
	background-position: top center;
	background-repeat: repeat-x;
	padding: 0px;
	margin: 0px;
	font:normal 12px/18px Verdana, Helvetica, Arial, Verdana, sans-serif;
	line-height: 150%;
	color: #333;
	width: 800px;
	background-image:url(assets/bg.jpg); background-repeat: repeat-x;
}
input, select, textarea {
	font:normal 11px Verdana, Helvetica, Arial, Verdana, sans-serif;
}

#wrapper {
	margin: auto;
	background-color: #FFF;
	width: 800px;
	min-height: 700px;
}
#loginform, #loginform input {	font-size: 18px; }

#header {
	background-image:url(assets/header.jpg); background-repeat: no-repeat; height: 285px;
}
#banner { background-color:#F90; padding: 15px; text-align: center; border: 1px solid #960; margin-bottom: 15px; border-radius: 6px; border-radius: 6px; font-weight: bold; font-size: 14px; }

.greybottom {	border-bottom: 1px solid #999; vertical-align: top; padding-bottom: 10px; padding-top: 10px;}
.clicktable tr { cursor: pointer; }
.clicktable td  {	border-bottom: 1px solid #C63; }
.contact { border: 1px solid #999; width: 33%; background-image:url(assets/icon_contact_large.gif); width: 202px; height: 192px; background-repeat:no-repeat; padding-bottom: 10px; 	}
.picture { border: 10px solid #ffffff; width: 33%; width: 202px; background-repeat:no-repeat; padding-bottom: 10px; -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 1);-moz-box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 1); box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 1); 	}
.small { 	font-size: 11px; }

tr.odd						{ cursor: pointer;}
tr.even						{ cursor: pointer;}
tr.even				{background-color: #ffffff; }
tr.odd				{background-color: #eeeeee;}

#divider {
	clear: both;
	background-color:#e8ede7;
	height: 2px;
}
#welcome {	text-align:center; width: 240px;margin-top: 213px; background-color: rgba(162, 13, 15, 0.8); padding: 3px 15px; position:absolute; color: white; border-top-left-radius: 8px 8px; border-top-right-radius: 8px 8px; margin-left: 15px;   }
#exit {	 text-align:center; width: 20px; margin-left: 750px; background-color: #6d6262; padding: 8px 10px; position:absolute; border-bottom-left-radius: 8px 8px; border-bottom-right-radius: 8px 8px;   }
#box {	 margin-left: 485px; margin-top: 48px; height: 90px; width: 300px; position: absolute; font-size: 11px; }
#box #left {	padding-top: 20px; border-right: 1px solid #999; float: left; height: 55px; width: 45px;   }
#box #right {	float: right; text-align: left; width: 240px; line-height: 22px; }
#box select { padding: 1px; font-size: 11px; }
#box select.changed {	border: 1px solid #0C3; }

#content {
	clear: both;
	padding-left: 20px;
	padding-right: 17px;	
	padding-top: 30px;	
}

h1 {
	color: #333;
	font-size: 23px;
}
h2 {
	font-size: 17px;
	padding-bottom: 4px;
}
input.inputfield {
	background-image:url(assets/images/login_field.gif);
	padding: 5px;
	padding-left: 10px;
	margin-bottom: 15px;
	border: none;
	width: 162px;
	height: 26px;
	text-align: left;
	background-repeat: no-repeat;
}
a.regular {
	color: #333;
	text-decoration: none;
}
input.loginbutton
{
	width: 176px;
	height: 36px;
	text-align: left;
	font-size: 11px;
	color: #333;
	background-image: url(assets/images/login_button.gif);
	background-repeat: no-repeat;
	border: none;
	padding: 0 0 0 9px;
	cursor: pointer;
}
#footer {
	clear: both;
	padding-top: 25px;
	font-size: 10px;
	color:#aaaaaa;
	width: 800px;
	line-height: 12px;
	padding-top: 30px;
	height: 70px;
}
.product {
	text-align: center; border: 1px solid #eeeeee; background-color:#FFF; font-size: 11px; width: 25%;
}
.product:hover {
	text-align: center; border: 1px solid #999; background-color: #b6e478; cursor: pointer; font-size: 11px;
}

#menu ul {	list-style: none; height: 103px; display: block; margin: 0px; padding: 0px; border-bottom: 1px solid #666; margin-bottom: 30px;    }
#menu li { height: 95px; width: 102px; list-style: none; float: left; background-color: #c61316; color:#FFF; margin-right: 8px; 
					  border-top-left-radius: 14px 14px; border-top-right-radius: 14px 14px; padding-top: 8px;
					  background-repeat: repeat-x; }		
#menu li.active { background-color: #88d1f2; }				  
#menu a { height: 40px; padding-top: 68px; text-align: center; display: block; width: 100px; font-family: 'Verdana', cursive; font-size: 13px; color:#FFF; text-decoration: none; }
#menu #details	{	background-image:url(assets/icon_1.png); background-repeat: no-repeat;  background-position: 12px 5px; }
#menu #contacts	{	background-image:url(assets/icon_2.png); background-repeat: no-repeat;  background-position: 12px 5px; }
#menu #assortiment	{	background-image:url(assets/icon_3.png); background-repeat: no-repeat;  background-position: 12px 5px; }
#menu #infrastructuur	{	background-image:url(assets/icon_4.png); background-repeat: no-repeat;  background-position: 12px 5px; }
#menu #toelevering	{	background-image:url(assets/icon_5.png); background-repeat: no-repeat;  background-position: 12px 5px; }
#menu #sales	{	background-image:url(assets/icon_6.png); background-repeat: no-repeat;  background-position: 12px 5px; }
#menu #opvolging	{	background-image:url(assets/icon_7.png); background-repeat: no-repeat;  background-position: 12px 5px; }

#menu li.last {		margin-right: 0px; }
#menu li.active a { color: #333; font-weight: bold; }
#menu li.last li.active {		margin-right: 0px; }	


#submenu ul {	list-style: none; height: 38px; display: block; margin: 0px; padding: 0px; border-bottom: 1px solid #ccc; margin-bottom: 5px;     }
#submenu li { height: 30px; list-style: none; float: left; background-color: #eee; color:#333; margin-right: 8px; 
					  border-top-left-radius: 14px 14px; border-top-right-radius: 14px 14px; padding-top: 8px;
					  background-repeat: repeat-x; }		
#submenu li.active { background-color: #999; }				  
#submenu a { text-align: center; display: block; font-family: 'Verdana', cursive; font-size: 13px; color:#333; text-decoration: none; padding: 3px 20px;  }
#submenu li.last {		margin-right: 0px; }
#submenu li.active a { color: #fff; font-weight: bold; }				  
	
#shopping_cart {
	padding: 12px;
	border: 1px solid #CCC;
}
th {
	background-color: #cccccc;
	color: #000;
	text-align: left;
	font-weight: bold;
}
input, select, textarea {
	padding: 5px;	
}
#alert {	color: #000; background-color:#FC0; border: 1px solid #930; padding: 10px; margin-bottom: 15px; }
#info {		color: #000; background-color: #71b33f; border: 1px solid #063; padding: 10px; margin-bottom: 5px; color:#FFF; font-weight: bold;}
.info {		color: #000; background-color: #71b33f; border: 1px solid #063; padding: 10px; margin-bottom: 5px; color:#FFF; font-weight: bold;}

.rc {	-moz-border-radius: 5px; border-radius: 5px;}
.boxitems 	{	border-bottom: 1px solid #999; padding-top: 5px; padding-bottom: 5px; }
.boxitems a {	color: #F00; text-decoration: none; font-size: 10px; }


/* thoughtbot (inspired by thoughtbot.com)
*******************************************************************************/
button.thoughtbot {
  background-color: #ee432e;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100));
  background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  border: 1px solid #951100;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  color: #fff;
  font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
  line-height: 1;
  padding: 12px 0 14px 0;
  text-align: center;
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
  width: 250px;
  margin-bottom: 15px;}
button.thoughtbot-green {
  background-color: #45ae45;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45ae45), color-stop(50%, #388f38), color-stop(50%, #298a29), color-stop(100%, #388f38));
  background-image: -webkit-linear-gradient(top, #45ae45 0%, #298a29 50%, #388f38 50%, #165f16 100%);
  background-image: -moz-linear-gradient(top, #45ae45 0%, #298a29 50%, #388f38 50%, #165f16 100%);
  background-image: -ms-linear-gradient(top, #45ae45 0%, #298a29 50%, #388f38 50%, #165f16 100%);
  background-image: -o-linear-gradient(top, #45ae45 0%, #298a29 50%, #388f38 50%, #165f16 100%);
  background-image: linear-gradient(top, #45ae45 0%, #298a29 50%, #388f38 50%, #165f16 100%);
  border: 1px solid #36a736;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
  line-height: 1;
  padding: 12px 0 14px 0;
  text-align: center;
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
  width: 250px;
  margin-bottom: 15px;}
button.thoughtbot:hover {
    background-color: #f37873;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601));
    background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    cursor: pointer; }
  button.thoughtbot:active {
    background-color: #d43c28;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d43c28), color-stop(50%, #ad3224), color-stop(50%, #9c1500), color-stop(100%, #700d00));
    background-image: -webkit-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -ms-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -o-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
    box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); }


/* cupid green (inspired by okcupid.com)
*******************************************************************************/
button.cupid-green {
  background-color: #7fbf4d;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
  background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: linear-gradient(top, #7fbf4d, #63a62f);
  border: 1px solid #63a62f;
  border-bottom: 1px solid #5b992b;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
  -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
  box-shadow: inset 0 1px 0 0 #96ca6d;
  color: #fff;
  font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 7px 0 8px 0;
  text-align: center;
  text-shadow: 0 -1px 0 #4c9021;
  width: 150px; }
  button.cupid-green:hover {
    background-color: #76b347;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e));
    background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
    background-image: linear-gradient(top, #76b347, #5e9e2e);
    -webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
    -moz-box-shadow: inset 0 1px 0 0 #8dbf67;
    box-shadow: inset 0 1px 0 0 #8dbf67;
    cursor: pointer; }
  button.cupid-green:active {
    border: 1px solid #5b992b;
    border-bottom: 1px solid #538c27;
    -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; }
	
/* skip (inspired by okcupid iphone interface)
*******************************************************************************/
.skip {
  background-color: #8c9cbf;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8c9cbf), color-stop(50%, #546a9e), color-stop(50%, #36518f), color-stop(100%, #3d5691));
  background-image: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -ms-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  border: 1px solid #172d6e;
  border-bottom: 1px solid #0e1d45;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 0 0 #b1b9cb;
  -moz-box-shadow: inset 0 1px 0 0 #b1b9cb;
  box-shadow: inset 0 1px 0 0 #b1b9cb;
  color: #fff;
  font: bold 13px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  padding: 5px 10px 6px 10px;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 -1px 1px #000f4d;
  width: 150px;
  margin: 0 auto; }
  button.skip:hover {
    background-color: #7f8dad;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8dad), color-stop(50%, #4a5e8c), color-stop(50%, #2f477d), color-stop(100%, #364c80));
    background-image: -webkit-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -ms-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -o-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    cursor: pointer; }
  button.skip:active {
    -webkit-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
    -moz-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
    box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; }	
	
	
/*  FORMS EXTRA IPAD */
/*
._radio { padding:5px; margin-left:40px; }
._radio input[type="radio"] { opacity: 0; position: absolute; }
._radio input[type="radio"] + label { color:#555; line-height:25px; display:inline-block; text-indent:-38px; }
._radio input[type="radio"]:checked + label > mark:before { content:' '; background:#009df5; width:10px; height:10px; display:inline-block; margin:5px; border-radius:5px;}
._radio input[type="radio"] + label > mark { display:inline-block; width:20px; height:20px; vertical-align:middle; border-radius:15px; border:1px solid #ccc; background:#fff; text-indent: 0; }



._checkbox { padding:5px; margin-left:40px; }
._checkbox input[type="checkbox"] { opacity: 0; position: absolute; }
._checkbox input[type="checkbox"] + label { color:#555; line-height:25px; display:inline-block; text-indent:-38px; }
._checkbox input[type="checkbox"] + label > mark { position:relative; display:inline-block; width:20px; height:20px; vertical-align:middle; border-radius:5px; border:1px solid #ccc; background:#fff; text-indent: 0; }
._checkbox input[type="checkbox"]:checked + label > mark:before { content:' '; background:#009df5; width:3px; height:3px; position:absolute; top:8px; left:5px; transform: rotate(45deg); -webkit-transform: rotate(45deg);  }
._checkbox input[type="checkbox"]:checked + label > mark:after { content:' '; background:#009df5; width:3px; height:9px; position:absolute; top:5px; left:9px; transform: rotate(45deg); -webkit-transform: rotate(45deg);  }
*/