html {
  height: 100%;
  background: #dee1ea url('../images/bg-html.jpg') repeat-x;
}

body {
  margin:0;
  padding:0;
  font: 13px/20px Arial, Helvetica, sans-serif;
  color: #383838;
  height: 100%;
}

td {
  font-size:20px;
}
div.attention h2 a {
  color:#21306C;
}
a { color: #df2701; }
a:hover { text-decoration: none; }
:focus { outline: 0 none; }
a.plot-hover {display:block; width:268px; height:118px; background: url('../images/plot-still.gif');}
a.plot-hover:hover, a.plot-hover.hover { background: url('../images/plotten.gif');}

a.lamineren-hover {display:block; width:268px; height:118px; background: url('../images/lamineren-still.gif');}
a.lamineren-hover:hover, a.lamineren-hover.hover { background: url('../images/lamineren.gif');}

a.kopieren-hover {display:block; width:268px; height:118px; background: url('../images/kopieren-still.gif');}
a.kopieren-hover:hover, a.kopieren-hover.hover { background: url('../images/kopieren.gif');}

#header h1 {
  text-indent: -5000px;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  display:block;
}

#header h1 a {
  height:100%;
  width:100%;
  display:block;
}

*/#kerst {
  position:absolute;
  right:0;
  top:0;
  width:170px;
  height:170px;
}

#kerst a img {
  border:0;
}*/

h2 {
  margin: 0px 0 9px;
  font: 14px  "Arial Narrow", Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 0 0 3px 32px;
  color: #1c2b62;
  border-bottom: 1px solid #a8a8a8;
  clear:both;
}

h2.blue, h2.cyaan, h2.magenta, h2.yellow {
  margin: 0px 0 9px;
  font: 14px  "Arial Narrow", Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 0 0 3px 32px;
  color: #1c2b62;
  border-bottom: 1px solid #a8a8a8;
  clear:both;
}

h2.blue {
  background: url('../images/h1-blue.gif') left 2px no-repeat;
  margin-bottom: 20px;
}

h2.cyaan {
  background: url('../images/h1-cyaan.gif') left 2px no-repeat;
}

h2.magenta {
  background: url('../images/h1-magenta.gif') left 2px no-repeat;
}

h2.yellow {
  background: url('../images/h1-yellow.gif') left 2px no-repeat;
}

h1.blue, h1.cyaan, h1.magenta, h1.yellow { 
  margin: 0px 0 9px;
  font: 14px  "Arial Narrow", Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 0 0 3px 32px;
  color: #1c2b62;
  border-bottom: 1px solid #a8a8a8;
  clear:both;
}
h1.blue { background: url('../images/h1-blue.gif') left 2px no-repeat; margin-bottom: 20px; }
h1.cyaan { background: url('../images/h1-cyaan.gif') left 2px no-repeat; }
h1.magenta { background: url('../images/h1-magenta.gif') left 2px no-repeat; }
h1.yellow { background: url('../images/h1-yellow.gif') left 2px no-repeat; }

h3 {
  font: 16px  "Arial Narrow", Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #1c2b62;
  margin: 28px 0 16px;
  color:#21306c;
}

h4 {
  font-weight: bold;
  font-size: 13px;
  margin: 13px 0 5px 0;
}

h5 {  
  padding:0 5px;
  font-size:12px;
  margin-top:1px;
  margin-bottom:1px;
  height:35px;
  line-height:35px;
}

h5.cyaan {
  background:#09f;
}

h5.magenta {
  background:#f0f;
}

h5.yellow {
  background:#ff0;
}

h5.last {
  margin-bottom:20px;
}

a {
  cursor:pointer;
  cursor:hand;
}

a.no-underline {
  text-decoration:none;
}

a.no-underline a {
  text-decoration:underline;
}

a.no-underline img {
  border:0;
}
a.white {
  color:#FFF;
}

/*                Uncommented vanwege de opmerking dat ze de verschillende (wisselende) fontgroottes
                  niet mooi vinden.

p.teaser {
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:25px;
}
*/

a.important-link {
  font-size:14px;
}

p {
  margin: 12px 0 0;
}

#background {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  width: 885px;
  margin: 0 auto;
  background: url('../images/bg-body.jpg') repeat-y;
}

#header {
  height: 205px;
  width: 881px;
  margin: 0 auto;
  position:relative;
  /*background: url('../images/header.jpg');*/
}

#menu {
  height: 45px;
  width: 881px;
  margin: 0 auto;
  background: url('../images/bg-menu.jpg') repeat-x;
}

#menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#menu li {
  float:left;
  padding-right: 2px;
  background: url('../images/menu-divider.jpg') right top;
}

#menu li.last {
  padding: 0;
  background: none;
}

#menu a {
  height: 45px;
  width: 174px;
  display: block;  
  text-indent: -5000px;
}

#menu a:hover, #menu a.active {
  background-position: left bottom;
}

#menu .gebruikers {
  background: url('../images/menu-gebruikers.jpg');
}

#menu .service {
  background: url('../images/menu-onze-service.jpg');
}

#menu .offerte {
  background: url('../images/menu-offerte.jpg');
}

#menu .bezorg {
  background: url('../images/menu-bezorg-service.jpg');
}

#menu .aanleveren {
  background: url('../images/menu-aanleveren.jpg');
}

#menu .route {
  background: url('../images/menu-route.jpg');
  width: 177px;
}

#content {
  min-height: 133px;
  height: auto !important;
  height: 133px;
  width: 881px;
  margin: 0 auto;
  padding-top: 38px;
  background: url('../images/bg-content.jpg') repeat-x;
}

#service {
  float: left;
  width: 557px;
  padding: 0 9px 55px 19px;
  border-right: 1px solid #e5e5e5;
}

#gebruikers {
	float: left;
  width: 780px;
  padding: 0 9px 55px 19px;
}

#contact {
  float: left;
  width: 269px;
  padding: 0 17px 0 9px;
}

.contact {
  background: url(../images/contact-block-back.jpg) no-repeat #243678;
  color: #fff;
  text-align: center;
  padding: 4px 0;
  margin-bottom: 5px;
  font-size:12px;
}

.contact p {
  margin:5px 0;
}

.direct-contact {
  width:268px;
  height:62px;
  line-height:62px;
  text-align:center;
  overflow:hidden;
  background: url(../images/direct-contact-block-back.jpg) no-repeat;
}

.direct-contact h6 {
  margin:0;
  padding:0;
}

.direct-contact h6 a {
  position:relative;
  padding:0;
  margin:0;
  font-size:12px;
  font-weight:bold;
  color:#000;
  display:inline-block;
  height:100%;
  width:100%
}

.direct-contact h6 a span {
  position:absolute;
  color:#fff;
  top:-1px;
  left:0;
  width:100%;
}

#cyaan {
  float: left;
  width: 269px;
  padding: 0 9px 0 19px;
}

#magenta {
  float: left;
  width: 269px;
  padding: 0 9px 0 9px;
  border-right: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}

#yellow {
  float: left;
  width: 269px;
  padding: 0 17px 0 9px;
}

#footer {
  height: 23px;
  padding: 10px 19px 0 0;
  text-align: right;
}

#footer a {
  text-decoration: none;
  color: #c1c1c1;
  font-size: 11px;
}

.nofloat {
  clear: both; 
  height: 0; 
  font-size: 0; 
  line-height: 0;
}

h4.cyaan { color: #017ac1; }
h4.magenta { color: #de1e89; }
h4.yellow { color: #f5c400; }
h4.blue {color:#1C2B62;}

span.liame {
  direction:rtl;
  unicode-bidi:bidi-override;
}

ul.submenu {
  list-style:none;
  padding:0;
  margin:0;
}

ul.submenu li {
  width:267px;
  height:36px;
  line-height:36px;
  padding:0;
  position:relative;
  font-family: Arial, Helvetica,sans-serif;
  background:url(../images/product-menu-back.jpg);
  border:1px solid #939393;
  border-top:1px solid #fff;
  overflow:hidden;
  margin:0;
  display:block;
  float:left;
}

ul.submenu li.first {
  background-position:0 0;
  border-top:1px solid #939393;
}

ul.submenu li.second {
  background-position:0 -38px;
}

ul.submenu li.third {
  background-position:0 -76px;
}

ul.submenu li.fourth {
  background-position:0 -114px;
}

ul.submenu li.empty-item {
  background-position:0 -152px;
  height:22px;
}

ul.submenu li h4 a {
  position:absolute;
  top:0;
  padding:0 0 0 41px;
  left:0;
  height:100%;
  width:100%;
  color:#424242;
  text-decoration:none;
  cursor:pointer;
  cursor:hand;
}

ul.submenu li h4 {
  margin:0;
  position:relative;
  display:block;
  float:left;
  font-size:11.5px;
  background:url(../images/submenu-arrow.jpg) no-repeat 10px 12px;
  width:100%;
  height:100%;
}

ul.submenu li.link:hover, ul.submenu li.link.hover, ul.submenu li.link.active {
  background:url(../images/submenu-hover.jpg);
  border-left:1px solid #fff;;
}

ul.submenu li.link:hover h4, ul.submenu li.link.hover h4, ul.submenu li.link.active h4 {
  background:url(../images/submenu-arrow-hover.jpg) no-repeat 10px 12px;
}

div.clear {
  float:left;
  width:100%;
  display:block;
  height:20px;
}

table tr td {
  font-size:13px;
}

label {
  clear:both;
  display:block;
  height:30px;
  line-height:38px;
  width:100%;
}

label.error {
  color:#f00;
}

span.required {
  color:#f00;
}

input.lightgrey {
  color:#bbb;
  font-style:italic;
}

textarea {
  width:545px;
  height:120px;
}

#header img {
  position:absolute;
  top:0;
  left:0;
}

table.gebruikers td {
	border-top: 1px #ededed solid;
	padding: 4px;	
} 

table.gebruikers th {
	text-align: left;
	padding: 4px;
}

table.gebruikers {
	border-collapse:collapse;
	border: 1px #ededed solid;
}

form.gebruikers input {
	float: left;
	display: block;
	width: 250px;
	height: 20px;
	margin-top: 6px;
}

form.gebruikers label {
	float: left;
	display: block;
	width: 120px;
	height: 20px;
	line-height: 20px;
	margin-top: 6px;
}

form.gebruikers .submit {
	width: 90px;
	margin-left: 286px;
}

input.upload-submit {
	margin-top: 7px;
}

input.submit.verwijder {
	background: url(../images/delete-icon.gif) no-repeat;
	border: 0;
	width: 21px;
	height: 22px;
	cursor: pointer; 
}

table.gebruikers th.delete, table.gebruikers td.delete {
	text-align: center;
}

.announce {
  border: 1px solid #DF2701;
  padding: 0 10px 10px;
  margin: 5px;
  display: block;
  background: #fadfd9;
  color: #9c1b01;
}