/**
 * Algemene interface stijlen
 * Geschreven door Nick Hooijenga
 */
 
@media screen {
    h3 {
        font-family: "Calibri", "Verdana", "Arial";
		font-weight: bold;           
    } 

    p {
        font-family: "Calibri", "Verdana", "Arial";
		font-weight: normal;
    }
    
	body {
		background-color: #FFF;
		font-family: "Calibri","Arial";
	}
    
	a:link {
		color: #0080FF;
		cursor: pointer;
	}
	a:visited {
		color: #0080FF;
		cursor: pointer;
	}
	a:hover {
		cursor: pointer;
		background-color: #E6F2FF;
		color: #005EBB; 		
	}
	.nostyle {
		display: none;
		overflow: hidden;
	}

	div.printOnly {
		display: none;
	}
    
	.screenOnly {
	}

	img.ico_print {
		clear: both;
		display: inline;
		float: right;
		width: 12px;
		height: 12px;
		overflow: auto;
		margin: 5px 5px -21px 0px;
		padding: 0px 0px 0px 0px;
	}

	div#wrapper {
		background-color: rgb(242,242,242);
		position: fixed;		/* Blijft altijd op dezelfde plek staan, niet scrollen */
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		display: block;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
		min-width: 300px;
		border: none;
	}
    
    div#header {
        height: 44px;	/* 60 */
        width: 100%;
        background: #FFF;
        display: block;
        overflow: hidden;
    }

        img#headerLogo {
            display: inline;
            width: 179px;		/* 200 */
            height: 40px;
            vertical-align: middle;
            text-align: left;
            border: none;
        }
        
			div#headerText {
				position: fixed;	/* absolute */
				right: 20px;		/* 16 */
				top: 17px;			/* 8 */
				display: inline;
				font-size: 1.2em;
				font-weight: normal;
				vertical-align: middle;
				text-align: right;
				border: none;
				color: #004175;
                font-family: "Calibri", "Verdana", "Arial";
			}

		div#navBar {
			display: block;
			height: 20px;
			position: relative;
			right: 0px;
			left: 0px;
			padding: 4px;
			background-color: #0080FF;					/* Wordt overschreven indien nodig door andere pagina's middels inline CSS */
			color: #FFF;			 					/* Wordt overschreven indien nodig door andere pagina's middels inline CSS */
			font-weight: normal;
			font-family: "Calibri", "Verdana", "Arial";
			overflow: hidden;
		}
		div#navMenu {									/* Hoofdmenu */
			width: 100%;
			height: 58px;
			background: url(../images/achtergrond_menu.png) repeat-x;
			text-align: center;
			display: block;	
			overflow: hidden;	
		}

			div.navMenuItem {
				display: inline;
				float: left;
				height: 42px;
				width: 80px;
				font-family: "Verdana";
				font-size: 12px;
				font-weight: normal;
				text-decoration: none;
				cursor: pointer;
				text-align: center;	
				margin: 10px 0px 5px 5px;			
			}

			div.navMenuItem:hover {
				height: 42px;
				width: 80px;
				color: #005EBB;
				background-color: #E6F2FF;
			}

				.navMenuIMG {
					width: 20px;
					height: 20px;
					border: none;
					margin-bottom: 8px;
					text-decoration: none;
					cursor: pointer;
					text-align: right;	
					vertical-align: top;				 
				}
				a.navMenuLink {
					color: #0080FF;
					width: 80px;
					text-decoration: none;
					border: none;
					text-align: center;					
				}

                a.navMenuLink:hover {
                    background-color: transparent;
                    font-weight: bold;
                }

				input.navMenuIMG {
					width: 24px;
					height: 24px;
					border: none;
					margin-bottom: 2px;
					text-decoration: none;
					cursor: pointer;
					text-align: right;	
					vertical-align: top;				 
				}				
				input.navMenuTekstKnop {
					text-decoration: none;
					border: none;
					background-color: transparent;
					color: #0080FF;
					cursor: pointer;
				}

		div#formDatabaseConfig {										/* Database-configuratiescherm */
			position: fixed; /* relative; */
            height: 356px;
            width: 600px;
			top: 50%; /* 16px; */
			left: 50%; /* 16px; */
            margin-top: -188px;
            margin-left: -310px;
			background: #FFF;
			display: block;
			border: 1px solid black;
			overflow: auto;
			padding: 10px;
			background: bottom left #FCFBF9 url(../images/od_background.png) no-repeat;
		}

		div#formDatabaseConfigHeader {                                 /* Kopregels in database-configuratiescherm */
			font-family: "Calibri","Arial","Verdana";
			font-size: 1.0em;
		}

    	div#formDatabaseConfigText {                                   /* Tekstregels in database-configuratiescherm */
			font-family: "Calibri","Arial","Verdana";
			font-size: 0.8em;
		}

		div#formLogin {										           /* Loginscherm */
			position: fixed; /* relative; */
            height: 240px;
            width: 600px;
			top: 50%; /* 16px; */
			left: 50%; /* 16px; */
            margin-top: -130px;
            margin-left: -310px;
			background: #FFF;
			display: block;
			border: 1px solid black;
			overflow: auto;
			padding: 10px;
			background: bottom left #FCFBF9 url(../images/od_background.png) no-repeat;
		}

		div#formLoginHeader {										/* Kopregels loginscherm */
			font-family: "Calibri","Arial","Verdana";
			font-size: 1.0em;
		}

		div#formLoginText {										    /* Tekstregels loginscherm */
			font-family: "Calibri","Arial","Verdana";
			font-size: 0.8em;
		}
		
		div#main {										/* Inhoud van de applicatie*/
			position: fixed;
			top: 85px;
			bottom: 32px;
			left: 10px;
			right: 10px;
			background: #FFF;		
			display: block;
			border: 1px solid black; 
			overflow: auto;
			padding: 10px 10px 10px 10px;
			background: top left #FCFBF9 url(../images/od_background.png) repeat;
			background-color: #FCFBF9;
			font-family: "Calibri","Arial","Verdana";
			font-size: 0.75em;
			min-width: 768px;
		}

        img.thumbnail {
            max-width: 348px;
            max-height: 420px;
            border: none;
            text-decoration: none;
        }

        img.glyph {
            vertical-align: middle;
        }

			div.mainBroadcast {
				border: 1px solid black;
				background-color: #0080FF;					/* Wordt overschreven indien nodig door andere pagina's middels inline CSS */
				color: #FFF;			 					/* Wordt overschreven indien nodig door andere pagina's middels inline CSS */
				font-weight: bold;							/* Tekst vet drukken */
				text-align: left;							/* Tekst links uitlijnen */
				padding: 2px 2px 2px 2px;					/* 1 3 3 3 */
                max-width: 640px;
			}

			div.mainBroadcastTekst {
				background-color: rgb(255,255,225);
				color: black;
				padding: 5px 5px 5px 5px;
				border: 1px groove navy;
				border-top: none;
                max-width: 634px;
			}

			a.tekstLink {	
				text-decoration: none;
				border: none;					
			}
			span.tekstLink:visited, span.tekstLink:hover {
				cursor: pointer;
				background-color: #E6F2FF;
				color: #005EBB;	
				width: 100%;
				height: 100%;
			}

			div.mainTabel {
				margin-bottom: 20px;		/* 16 */
				background: top left url("../images/achtergrond.png") repeat;
				font-family: Calibri, Verdana, Arial;
			}

			columnNum {
                text-align: right;
			}

			div.searchTabelTitel {
				border: 1px solid black;
				background-color: #0080FF;					/* Wordt overschreven indien nodig door andere pagina's middels inline CSS */
				color: #FFF;			 					/* Wordt overschreven indien nodig door andere pagina's middels inline CSS */
				font-weight: bold;							/* Tekst vet drukken */
				text-align: left;							/* Tekst links uitlijnen */
				padding: 2px 2px 2px 2px;					/* 1 3 3 3 */
                max-width: 640px;
			}

			div.searchTabelTekst {
				display: block;
				height: 100%;
				border: 1px solid black;
                max-width: 644px;
			}

			div.mainTabelTitel {
				border: 1px solid black;		
				background-color: #0080FF;					/* Wordt overschreven indien nodig door andere pagina's middels inline CSS */
				color: #FFF;			 					/* Wordt overschreven indien nodig door andere pagina's middels inline CSS */
				font-weight: bold;							/* Tekst vet drukken */
				text-align: left;							/* Tekst links uitlijnen */
				padding: 2px 2px 2px 2px;					/* 1 3 3 3 */					
			}

			div.mainTabelTekst {
				display: block;
				height: 100%;
				border: 1px solid black;
			}

			div.mainTabelTekstGEEL {
				background-color: rgb(255,255,225);
				color: black;
				height: 100%;
				border: 1px solid black;		
				padding: 6px 6px 6px 6px;
				font-family: "Courier New", Verdana, Arial;
			}

			span.tabelTitel {
				font-weight: bold;
				display: block;
				height: 30px;
				width: 100%;
				color: black;
				background-color: #E9E9E9;
				vertical-align: middle;
			}
			table.mainTabel {
				width: 100%;
			}
			th.mainTabel {
				background-color: transparent;				/* Doorzichtige achtergrond */
				color: #000;								/* Zwarte teksten */
				font-weight: bold;							/* Tekst vet drukken */
				text-align: left;							/* Tekst links uitlijnen*/	
			}
			/**/		
			img.omzetGrafiek {
				border: 0px;
				text-decoration: none;
				float: left;			
				width: 480px;
				height: 250px;
			}
			/**/
			tr.dataSet:hover {
				background-color: #E6F2FF;
				color: #000000;
			}
			tr.dataSetLNK {
				height: 16px;
			}
			tr.dataSetLNK:hover {
				height: 16px;
				background-color: #E6F2FF;
				color: #005EBB;
				cursor: pointer;
				text-decoration: none;			
			}				
			a.dataLink {
				text-decoration: none;
				color: #000000;
				background-color: transparent;
				cursor: pointer;	
				height: 24px;			
			}
			img.expandimg {
				width: 16px;
				height: 16px;
			}
			img.linkIMG {
				height: 16px;
				width: 16px;
				text-decoration: none;
				border: none;
			}
			img.linkIMG:active {
				height: 24px;
				width: 24px;
				text-decoration: none;
				border: none;
				background-color: red;
			}
			input.linkIMG {
				height: 24px;
				width: 24px;
				text-decoration: none;
				border: none;
			}
			img.dbIMG {										/* Afbeeldingen vanuit de database (telefoon,mobiel,email,fax,man,vrouw,etc..) */
				height: 16px;
				width: 16px;
				text-decoration: none;
				border: none;
			}
			input.terugKnop {
				margin: 0px;
				padding: 0px;
				background-color: transparent;
				color: #0080FF;
				border: none;
				width: 75px;
				border: none;
			}
		div#mainNoMenu {									/* Inhoud van de applicatie, zonder bovenliggend menu, nodig bij Login & Loguit */
			position: fixed;
			top: 100px;
			bottom: 32px;
			left: 10px;
			right: 10px;
			background: #FFF;		
			display: block;
			border: 1px solid black; 
			overflow: auto;
			padding: 10px;
			background: bottom left #FCFBF9 url(../image/achtergrond.png) no-repeat;
			font-family: "Verdana";
			font-size: 0.8em;
		}
		div#formLogoff {									/* Inhoud van de applicatie, zonder bovenliggend menu*/
			position: fixed; /* absolute; */
            height: 200px;
            width: 480px;
			top: 50%; /* 100px; */
			/* bottom: 32px; */
			left: 50%; /* 10px; */
            /* right: 10px; */
            margin-top: -110px;
            margin-left: -250px;
			background: #FFF;		
			display: block;
			border: 1px solid black; 
			overflow: auto;
			padding: 10px; 
			background: bottom left #FCFBF9 url(../images/od_background.png) no-repeat;
		}

		div#formLogoffHeader {										/* Kopregels loginscherm */
			font-family: "Calibri","Arial","Verdana";
			font-size: 1.0em;
		}

    	div#formLogoffText {										    /* Tekstregels loginscherm */
			font-family: "Calibri","Arial","Verdana";
			font-size: 0.8em;
		}
		 
			fieldset#dbConfigFieldset {
				display: inline;
				width: 360px;
				border: none;
			}
				label.configLabel {
					float: left;
					width: 150px;
				}
			img#LoginKey {
				float: left;
				width: 50px;
				height: 50px;
				margin-right: 20px;
				text-align:  right;
			}				
			fieldset#loginFieldset {
				display: inline;
				float: left;
				border: none;
				width: 360px;
			}
			div.rij{
				margin-bottom: 5px;
			}
				label.loginLabel {
					float: left;
					width: 150px;
					font-size: 12px;
				}
	            label.loginError {
					float: left;
					width: 150px;
					color: #FF0000;
					font-weight: normal;
					cursor: pointer;		
				}
				input.invoerAlg {				/* Inlogpagina, Tekstveld */
					width: 200px;
					background: transparent;
					font-weight: normal;
				}

				input.buttonOD {
					width: 95px;
					text-align: center;
					background: url(../images/buttonGradient.jpg) repeat-x;
					color: navy; 
					height: 25px;
					font-family: "Calibri","Verdana","Arial";
					font-weight: normal;
					margin-top: 10px;
				}
				
	div.messageError {
		color: #FF0000;
        font-family: "Calibri","Verdana","Arial";
        font-weight: normal;
        font-size: 12pt;
        text-align: left;
	}
	
    div.messageOK {
		color: #005500; 
		font-family: "Calibri","Verdana","Arial";
		font-weight: normal;
		font-size: 12px;
		text-align: left;
	}
	
	div#footer {
		display: block;
		position: fixed;			
		bottom: 0px;
		height: 18px;
		left: 0px;
		right: 0px;
		border-top: 1px solid black;
        font-family: "Calibri", "Verdana", "Arial";
        font-size: 14px;
        text-indent: 2px;
        padding-top: 1px;
        padding-right: 2px;
        background: #FFF;
	}

    img#imageMessage {
		position: static;
		background-color: transparent;
        vertical-align: top;
		text-align: left;
		border: none;
	}

	div.kolommen {
		clear: both;
		overflow: auto;
		width : 100%;
        margin-top: 6px;
        margin-left: 6px;
        margin-bottom: 3px;
/*        border: 1px solid black;  */
	}

	div.kolom1 {
		float: left;
		width : 30%;
/*		margin-right: 10px; */
/*        border: 1px solid black; */
	}

	div.kolom2 {
		float: left;
        width: 30%;
/*		margin-right: 10px; */
/*        border: 1px solid black; */
	}

	div.kolom3 {
		float: left;
		width : 38%;
/*		margin-left: 10px;		*/
/*        border: 1px solid black;  */
	}

    div.column2 {
		clear: both;
		overflow: hidden;
		width : 100%;
        margin-top: 6px;
        margin-left: 6px;
        margin-bottom: 3px;
	}

	div.column21 {
		float: left;
		width : 45%;
	}

	div.column22 {
		float: left;
		width : 50%;
	}

	div.Fakturen {
		clear: both;
		overflow: auto;
		width : auto; /* 100%; */
/*        margin-top: 6px;
        margin-left: 6px;
        margin-bottom: 3px; */
/*        border: 1px solid black;   */
	}

	div.FakturenLinks {
		float: left;
		width : 49%;
/*		margin-right: 10px; */
/*        border: 1px solid black; */
	}

    div.FakturenRechts {
		float: right;
		width : 49%;
/*		margin-right: 10px; */
/*        border: 1px solid black; */
	}

    th.colRight {
        text-align: right;
    }

    td.colRight {
        text-align: right;
    }
    td.colTop {
        vertical-align: top;
    }
    select.comboOD {
        width: 205px;
        background: transparent;
    }

    input.colRight  {
        text-align: right;
}
}
