body {
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:9pt;
}

#top_balk {
  background: #1a171b;
  margin: 0;
  padding: 0;
}

#top_balk img {
    border: 0;
}

#top_balk h1 {
  margin: 0;
  padding: 0;
  color: #FFF;
}

h2 {
    font-size: 18px;
    margin-top: 30px;
}

h4 {
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 4px;
}

form {
  margin-left: 0px;
}
  
.showclient {
  line-height: 1.8em;
}

label {
  font-weight: bold;
  display:block;
  text-align:left;
}

.warning {
  color:#f00;
  font-weight:bold;
}

.noborder {
  border: none;
  vertical-align:top;
}
.noborderbutfat {
  border: none;
  font-weight: bold;
  vertical-align:top;
}


.widebox {
  width: 500px;
}

/*
Error
*/
#error {
    background: #FEE;
    padding: 8px;
    width: 540px;    
    border-right: 1px solid maroon;
    border-bottom: 1px solid maroon;
}
#error h3 {
    font-size: 13px;
    margin: 0;
    color: maroon;
}
#error li {
    line-height: 20px;
}

/*
warnings
*/
table#warnings  {
  width: 100%;
  border-collapse: collapse;
  padding: 6px 0px;
  margin: 0px;
  border: 1px solid #aaa;
  background: #fff url(../images/verloop_list_2.gif) repeat-x top;
  border: 1px solid #DDD;
}

table#warnings th {
  padding-left: 4px;
  text-align: left;
  border-right: 1px solid #AAA;
}

table#warnings td {
  padding: 2px 6px;
  vertical-align: middle;
  margin: 0px;
  background: #FFD;
  border-top: 1px solid #DDD;
  border-right: 1px solid #DDD;
  padding: 8px 4px;
}

table#warnings td a:link,
table#warnings td a:active, 
table#warnings td a:visited {
	text-decoration: none;
	border-bottom: 1px dotted #333;
	color: #333;
	font-weight: bold;
}
table#warnings td a:hover {
	border-bottom: 1px solid #333;
}


/*
Priority
*/
tr.p1 th {
  background: #C33;
  color: #FFF;
}
tr.p1 td {
  background: #FFF;
}

tr.p2 th {
  background: #FB6;
}
tr.p2 td {
  background: #FFF;
}

tr.p3 th {
  background: #FEC;
}
tr.p3 td {
  background: #FFF;
}

tr.processed td,
tr.processed th {
  background: #EFE;
  color: #787;
  font-weight: normal;
  font-style: italic;
}

/*
listtable
*/
table#listtable  {
  width: 100%;
  border-collapse: collapse;
  padding: 6px 0px;
  margin: 0px;
  border: 1px solid #aaa;
  background: #fff url(../images/verloop_list_2.gif) repeat-x top;
  border: 1px solid #DDD;
}
 
table#listtable th {
  padding: 0px 4px;
  text-align: left;
  border-right: 1px solid #AAA;
  border-bottom: 1px solid #CCC;
}

table#listtable td {
  padding: 2px 6px;
  vertical-align: middle;
  margin: 0px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

table#listtable img {
	border: 0;
}

.white td{
  background: #FFF;
}

.grey td{
  background: #F2F2F2;
}

table#remarklist  {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 0 0;
  border: 1px solid #DDD;
}

table#remarklist td {
  vertical-align: middle;
  margin: 0px;
  border-top: 1px solid #DDD;
  border-right: 1px solid #DDD;
}

table#remarklist td p {
  padding: 8px 4px;
  display: block;
  margin: 0px;
}

table#remarklist td em {
  padding: 2px;
  background: #F6F6F6;
  color: #999;
  display: block;
}

#klantdetails {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #DDD;
  padding: 4px;
  margin-bottom: 20px;
}

#klantdetails td, 
#klantdetails th {
	text-align: left;
	vertical-align: top;
	padding: 1px 4px;
	border-bottom: 1px dotted #DDD;
}

form#formlayout  {
  padding: 10px;
  margin: 0;
  border: 1px solid #DDD;
  border-top: 0;
  background: #fff url(../images/verloop_list_2.gif) repeat-x top;
}

a.geen {
  text-decoration: none;
  color: #000;
}

a.geen:hover {
  text-decoration: underline;
  color: #000;
}

a.menu {
  background: #fff url(../images/verloop_list_2.gif) repeat-x top;
  border-top: 1px solid #EEE;
  border-left: 1px solid #EEE;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 2px 4px;
  text-decoration: none;
  color: #000;
}

a.menu:hover {
  border: 1px solid #777;
  background: #FFF;
  padding: 2px 4px;
  text-decoration: none;
  color: #000;
}


/*
Zoek balk
*/
div.zoekbalk {
    margin-bottom: 16px;
    display: block;
    float: left;
}
div.zoekbalk ul {
    float: left;
    display: block;
    margin: 0;
    padding: 0;
}
div.zoekbalk ul li {
    list-style: none;
    display: block;
    float: left;
    margin-right: 2px;
}
div.zoekbalk ul li a {
    display: block;
    float: left;
    width: 12px;
    height: 16px;
    text-align: center;
    line-height: 16px;
}
div.zoekbalk form {
  float: left;
  margin: 0;
  margin-left: 10px;
}


#content {
	margin: 10px 12px;
}


#fileupload { display: block; background-color: #F2F2F2; padding: 10px; margin-top: 12px;}
.browse-file img { cursor: pointer; }
.browse-file { border: 1px solid #EEE; width: 110px; text-align: center; float:left; margin: 5px; padding: 5px;height: 140px; display: block;}
.browse-file:hover  { border: 1px solid #333;}

.browse-filename  { display: block; width: 110px; overflow: hidden; font-size: 8pt; color: #999; }
.browse-title { display: block;  text-align: left; float: left; width: 90px; height: 15px; overflow: hidden; }

.browse-filename:hover { color: #000;  }
.right { float:right; }

/* Timeline part, with dates, thingies, etc. very nice */
#timeline 
{
	margin: 0px; padding: 0px; list-style: none; padding-top: 15px; margin-left: 100px;	
}

#timeline li 
{
	width: 50px;
	height: 40px;
	background-image: url(../images/timelineblock.gif);	
	background-position: bottom center;
	background-repeat: repeat-x;	
	text-align: center;	
	font-size: 7pt;	
	font-family: Tahoma;
	float:left;	
}
#timeline .first 
{
	background-image: url(../images/timelineblockfirst.gif);	
}
#timeline .last 
{
	background-image: url(../images/timelineblocklast.gif);	
}

/* The beatifull block part. With blocks and euh, blocks.. in different colours! */
.block
{
	margin: 0px; padding: 0px; list-style: none; margin-left: 15px; 
	clear: left;
}
.block li
{
	background-image: url(../images/block-white.png);	
	background-position: top left;
	background-repeat: repeat-x;
	height: 21px;
	width: 97px;
	margin-right: 3px;
	margin-top: 2px;
	float: left;	
}

.block div
{
	float: right;
	background-image: url(../images/block-white-right.png);	
	background-position: top right;
	background-repeat: no-repeat;
	height: 18px;
	width: 94px;
	padding-top: 2px;
	padding-right: 1px;
	text-align:left;
	overflow: hidden;
}
.block a { color: #000000; text-decoration: none; }
.block a:hover { color: #990000; text-decoration:  underline; }

.block .title 
{
	margin-right: 15px;
	font-weight: bold;
}
.block .blue {background-image: url(../images/block-blue.png);}
.block .green {background-image: url(../images/block-green.png);}
.block .gray {background-image: url(../images/block-gray.png);}
.block .yellow {background-image: url(../images/block-yellow.png);}