/* ---------------------------  General  */
A:link {color: #444444; text-decoration: none;}
A:visited {color: #444444; text-decoration: none;}
A:active {color: #444444; text-decoration: none;}

/* ---------------------------  Screen header  */
#header {
   position:relative;
   top:0;
   height:105px;
   background-color: #EBF4FF;

/*
   border-style:solid;
   border-width:1px;
   border-color: #EBF4FF;
   border-bottom-color: #000000;
*/

}

#copyright {
   position:relative;
   top:10px;
   left:10px;
   text-align: left;
   float:left;

   font-family: Verdana;
   font-size: 10px;
   color: #444444;
   font-weight: bold;
}

#navigationleft {
   position: absolute; bottom: 0; /* vertical alignment van deze div binnen de bestaande div*/
   left:0;
   text-align: left;
   float:left;

   width: 355px;
   height: 105px; 
   background-image: url('logo_tankbon5.png');
   background-repeat: no-repeat;
}

#navigationright {
   position:relative; 
   top:10px;
   right:10px;
   text-align: right;
   float:right;
   width: 50%;

   font-family: Verdana;
   font-size: 10px;
   color: #FF0000;

}

/* --------------------------- Horizontal menu Tabs */
#htabs {
   position: absolute; bottom: 0; /* vertical alignment van deze div binnen de bestaande div*/
   left: 220px;
   text-align: left;
   float:left;
   line-height:18px;

}

#htabs ul {
   margin:0;
   padding:10px 10px 0 0px;
   list-style:none;
}

#htabs li {
   display:inline;
   margin:0;
   padding:0;
}

#htabs a {
   float:left;
   background: url('tabs/tableft.gif') no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}

#htabs a span {
   float:left;
   display:block;
   background: url('tabs/tabright.gif') no-repeat right top;
   padding:5px 15px 4px 6px;
   color:#9EB6D2; /* niet actieve tab, tekstkleur*/
   font-weight: bold;
}

  /* Commented Backslash Hack hides rule from IE5-Mac \*/
#htabs a span {float:none;}
  /* End IE5-Mac hack */

#htabs a:hover {
/*   background-position:0% -42px; */
}

#htabs a:hover span {
   color:#3E7DAE; /* tekstkleur bij muisover*/
/*   background-position:100% -42px; */
}

#htabs li a.active {
   background-position:0 -42px;
}       
      
#htabs li a.active span {
   color:#3E7DAE; /* actieve tab, tekstkleur*/
   background-position:100% -42px;
}       

/* --------------------------- Vertical menu Tabs */
#vtabs ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

#vtabs img {
   border: none;
} 

#vtabs {
   width:190px;

   border-color: #888888; /* kleur van de rand */
   border-width: 1px;
}
        
#vtabs li a {
   height: 32px;
   voice-family: "\"}\""; 
   voice-family: inherit;
   height: 24px;
   text-decoration: none;
   font-weight: bold;
}       
        
#vtabs li:first-child {
   border-top-style: solid;
   border-width: 1px;
   border-color: #888888;
}
        
#vtabs li a:link, #vtabs li a:visited {
   color: #9EB6D2; /* niet actieve tab, tekst kleur*/
   display: block;
   /*        background: url('tabs/menu1.gif');    */
   padding: 8px 0 0 10px;
   
   border-style: none none solid none;
   border-color: #888888; /* kleur van de rand:grijs */
   border-width: 1px;
}
        
#vtabs li a:hover, #vtabs li a.active {
   color: #3E7DAE;
   /*        background: url('tabs/menu1.gif') 0 -32px;  */
   font-weight: bold;
}       
      
#vtabs li a.active {
   color: #3E7DAE;
   background-color: #EBF4FF;
   font-weight: bold;
}

/* --------------------------- Reminders */
#reminders {
   width: 100%;
   float:left;
}

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

#reminders li {
   border-color: #000000;
   border-width: 1px;
   border-style: solid none none none;
   padding: 0px 0px 10px 0px;
   background-image: url('lampje_small.png');
   background-repeat: no-repeat;
   background-position:15px 30px; 
}

div.reminder_header {
   color: #3E7DAE;
   font-size: 10px;
   padding-top: 5px;
   padding-left: 30px;
   padding-bottom: 5px;
   background-color: #EBF4FF;
   background-image: url('email16.png');
   background-repeat: no-repeat;
   background-position:5px center; 
   
   border-bottom-style: solid;
   border-color: #EEEEEE;
   border-width: 1px;

}

span.reminder_sep {
   color: red;
}

div.reminder_message {
   padding-left: 70px;
   padding-top: 5px;
   padding-bottom: 5px;
}

div.reminder_footer {
   padding-left: 70px;
   padding-top: 0;
   float: right;
}

/* ---------------------------  Secure login */
#loggedin_text {
   color: #3E7DAE;
}

#loggedin_username {
   color: #666666;
   font-style: italic;
   font-weight: bold;
}

.formfield {
   font-size: 8pt;
   border-color:#336699; 
   background-color: #FFFFFF;
   color:#808080;
   border-style:solid; 
   border-width:1px;
   margin: 1px;
   width: 100%;
}

.drawlogin_fields {
   color: #660000;
   display: block;
   vertical-align: top;
   font-size: 8pt;
   margin: 1px;
   float: right;
   width: 100px;
}

.drawlogin_icon {
   color: #660000;
   text-align: right;
   vertical-align: top;
   float: right;
   font-size: 8pt;
   margin:1px;
   margin-left:5px;
}

.error {
   font-size: 8pt;
   color:#000000;
   border-color:#FF0000; 
   background-color:#FFC0C0;
   text-align: right;
   border-style:solid; 
   border-width:1px;
   float:right;
}

div#img_shadowlogin {
   width: 32px;
   height: 35px;
   background-image: url('login.png');
   background-repeat: no-repeat;
   vertical-align: middle;
   cursor: pointer;
}

div#img_shadowlogout {
   width: 32px;
   height: 35px;
   background-image: url('logout.png');
   background-repeat: no-repeat;
   vertical-align: middle;
   cursor: pointer;
}

#login-clear, #password-clear {
   display: none;
}

/* ---------------------------  Body  */
body { 
   margin:0; 
   padding:0; 

   
   background-color: #FFFFFF;
   font-family: Verdana, Arial, Helvetica, sans-ser;
   font-size: 10pt;
} 

#body { 
   margin: 10px; 

}

#body img {
   position:relative; 
}

#verticalweimer { 
   width: 100%; 
   text-align: center; 
   
}

.weimer {
   position:relative; 
   top:30%;
}

/* ---------------------------  2-Kolomlayout  */
#leftcontent2 {
   float: left;
   width:200px;
   background:#ffffff;
   border-right: 1px dotted #000000;
   padding: 5px;
   overflow: hidden;
}

#centercontent2 {
   position:relative;
   background:#ffffff;

   margin-left: 211px;
   padding: 5px;
}


/* ---------------------------  3-Kolomlayout  */
#leftcontent3 {
   float: left;
   width:200px;
   background:#ffffff;
   border-right: 1px dotted #000000;
   padding: 5px;
   overflow: hidden;
}

#rightcontent3 {
   float: right;
   width:300px;
   background:#ffffff;
   border-left: 1px dotted #000000;
   padding: 5px;
}

#centercontent3 {
   position:relative;
   background:#ffffff;
   
   margin-left: 211px;
   margin-right:311px;
   padding: 5px;
}

/* ---------------------------  Forms and notification */
h1 {
   font-family: Verdana;
   font-size: 14px;
   color: #EE1111;
   font-weight: bold;
}

#form_error {
   padding: 5px;
   float: left;

   min-height: 100px;
   padding-left: 120px;
   background-image: url('icon_sleeping_dog.png');
   background-repeat: no-repeat;
   background-position: 5px 5px;

   margin-bottom: 10px;
   margin-top: 10px;
}

#form_notification {
   padding: 5px; 
   float: left;
   width: 259px; /* die 41 is de padding van links + rechts + 1 px border-width */
   font-size: 8pt;
   border-collapse: collapse;
   border-color: #97FF97;
   border-top-color: #000000;
   border-style: solid;
   border-width: 1px; 
   
   min-height: 24px;
   padding-left: 35px;
   background-image: url('accept24.png');
   background-repeat: no-repeat;
   background-position: 5px 5px;
   
   background-color: #97FF97;
   margin-bottom: 10px;
   margin-top: 10px;
}

/* let op: bepaald (voorlopig) alleen de locatie en uitlijning van de navigatiebutton */
/* om dit te veranderen ook de form-class aanpassen */
#form_header_navigation_left {
   float: right;
   margin-right: 2px; 
}

/* let op: bepaald (voorlopig) alleen de locatie en uitlijning van de navigatiebutton */
/* om dit te veranderen ook de form-class aanpassen */
#form_header_navigation_right {
   float: right;
}

#form_default {

   width: 100%;
   float: left;
}

.clear {
   clear: both;
}

table.form_default {
   width: 100%;
   font-size: 10pt; 
   border-collapse: collapse;
   border-width: 1px; 
   margin-bottom: 10px;
}

th.form_header {
   color: #888888;
   border-color: #EBF4FF;
   border-top-color: #000000;
   border-style: solid;
   border-width: 1px; 
   background-color: #EBF4FF;
   font-size: 12pt;
   
   text-align: left;
   font-weight: bold;
   
   padding: 2px 4px;
   
   border-bottom-style: solid;
   border-bottom-color: #EEEEEE;
}

form.content table.form_default tr:nth-child(2) td {
   padding-top: 0px;
}

table.form_default tr:nth-child(2) td {
   padding-top: 10px;
}

td.form_field {
   text-align: left;
   padding: 2px 4px;
   vertical-align: top;
}

td.form_field_highlight {
   background-color: #ffffff;
   border-style: hidden;
   font-weight: bold;
   border-width: 1px; 
   text-align: left;
   vertical-align: text-top;
   padding: 2px 4px;
   width: 110px;
}

textarea.element_field {
   width: 100%;
   max-width: 600px;
	height: 120px;
}

.element_field {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10pt;
   border-color: #BBBBBB;
   color: #000000;
   border-style:solid; 
   border-width:1px;
   padding: 1px;
}


input.element_field[type="checkbox"] {
   margin-left: 0px;
}

.element_field_error {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background-color: #FFC0C0;
   border-color: #777777;
   color: #000000;
   border-style:solid; 
   border-width:1px;
   padding: 1px;
}

td.footerbuttonrow {
   padding-top: 10px;
  
}

/* ---------------------------  Tables --- */
#table_default {
   width: 100%;
   float: left;
}

table.table_default {
   width: 100%;
   font-size: 10pt;
   border-collapse: collapse;

}

table.table_small {
   width: 60%;
   font-size: 10pt;
   border-collapse: collapse;
   margin-bottom: 10px;
}

table.table_small th:last-child {
   text-align: right;
}

th.table_header {
   color: #666666;
   border-width: 0; 
   background-color: #EBF4FF;
   
   text-align: left;
   font-weight: bold;
   
   padding-left: 2px;
}

th.table_header > input {
   display:block; 
   margin-left: 4px;   
}

tr.table_row {
   border-style: solid;
   border-width: 0; 
   border-top-width: 1px; 
   border-top-color: #EEEEEE;
   cursor: pointer;
}

td.table_field {
   padding-left: 2px;
}

td.table_field > img {
   float: right;
   margin-right: 2px;
}

td.checkbox_field > img {
   display:inline-block; 
   margin-left: 3px;   
}

td.checkbox_field > input {
   display:block; 
   margin-left: 5px;   
}

tr.selected {
   background-color: #C1FFC7;
   cursor: pointer;
}

tr.protected, tr.locked.selected {
   background-color: #FFC0C0; /* als je de kleur veranderd, dan ook de jquery code voor flashing aanpassen! */
   cursor: pointer;
}

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


/* ---------------------------  Buttons --- */
.fancybutton {
   font-family:Verdana,sans-serif;
   font-weight:bold;
   font-weight: bold;
   font-size: 8pt;
        
   color:#777777;
   background-color: #EBF4FF;
   border-color:#BBBBBB;
 
   border-style:solid;
   border-width:1px;

   padding-bottom: 3px;
   padding-top: 2px;
   padding-right: 3px;
   padding-left: 4px;
        
   margin:0;
       
   text-align: center;
   overflow:visible;
   width:auto;
}


.fancybutton_over {
   font-family:Verdana,sans-serif;
   font-weight:bold;
   font-weight: bold;
   font-size: 8pt;
        
   color:#666666;
   background-color: #C7E1FF;
   border-color:#BBBBBB;

   border-style:solid;
        border-width:1px;

   padding-bottom: 3px;
   padding-top: 2px;
   padding-right: 3px;
   padding-left: 4px;
        
   margin:0;
        
   text-align: center;
   overflow:visible;
   width:auto;
}

.fancybutton_disabled {
   font-family:Verdana,sans-serif;
   font-weight:bold;
   font-weight: bold;
   font-size: 8pt;
        
   color:#BBBBBB;
   background-color: #F1F1F1;
   border-color:#BBBBBB;

   border-style:solid;
   border-width:1px;

   padding-bottom: 3px;
   padding-top: 2px;
   padding-right: 3px;
   padding-left: 4px;
        
   margin:0;
        
   text-align: center;
   overflow:visible;
   width:auto;
}

.fancybutton_button {
   margin-right: 5px;
}