/**********************************************/
   /*                                            */
  /*    Vanaf hier de opmaak voor het scherm    */
 /*                                            */
/**********************************************/

body {
	background-color: #FFF;
	font-family: Verdana;
	font-size: 10pt;
	color: #000000;
	width: 800px;
	margin: auto;
	padding: 0px;
}
#header {
	background-color: #FFF;
	margin: 5px 0 0 5px;
	padding: 0px;
	float: left;
}

    /********************************************/
   /*                                          */
  /*    Vanaf hier de opmaak voor het menu    */
 /*                                          */
/********************************************/

#menu {
	margin: 5px 0px 0px 5px;
	padding: 0px;
	float: left;
}
#menu li{
	list-style-type: none;
}
#menu a{
	background-image: url("images/menu0.gif");
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	color: #000;
	text-decoration: none;
	margin: 0px 0px 2px 0px;
	padding: 4px 0 4px 20px;
	height: 16px;
	width: 150px;
}
#menu a:hover {
	background-image: url("images/menu1.gif");
	background-position: left top;
	background-repeat: no-repeat;
	color: #000;
	display: block;
}
#menu a.selected{
	background-image: url("images/menu2.gif");
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
}
#menu a:hover.selected{
	background-image: url("images/menu2.gif");
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
}
#sesmenu {
	margin: 5px 0px 0px 5px;
	padding: 0px;
	float: left;
}
#sesmenu li{
	list-style-type: none;
}
#sesmenu a{
	background-image: url("images/menu0ses.gif");
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	color: #000;
	text-decoration: none;
	margin: 0px 0px 2px 0px;
	padding: 4px 0 4px 20px;
	height: 16px;
	width: 150px;
}
#sesmenu a:hover {
	background-image: url("images/menu1ses.gif");
	background-position: left top;
	background-repeat: no-repeat;
	color: #000;
	display: block;
}
#sesmenu a.selected{
	background-image: url("images/menu2ses.gif");
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
}
#sesmenu a:hover.selected{
	background-image: url("images/menu2ses.gif");
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
}
#sesmenu a.info {
	background-image: url("images/menu0.gif");
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	color: #000;
	text-decoration: none;
	margin: 0px 0px 2px 0px;
	padding: 4px 0 4px 20px;
	height: 16px;
	width: 150px;
}
#sesmenu a:hover.info {
	background-image: url("images/menu1.gif");
	background-position: left top;
	background-repeat: no-repeat;
	color: #000;
	display: block;
}
#sesmenu a.infoselected{
	background-image: url("images/menu2.gif");
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
}
#sesmenu a:hover.infoselected{
	background-image: url("images/menu2.gif");
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
}

    /**********************************************/
   /*                                            */
  /*    Vanaf hier de opmaak voor de content    */
 /*                                            */
/**********************************************/

     /***********************************************************************/
    /* Een "container" maken waar 3 verschillende contentsoortin in komen: */
   /*  - header (content1)                                                */
  /*   - content (content2)                                              */
 /*    - footer (content3)                                              */
/***********************************************************************/
#container {
	background-color: #FFF;
	padding: 0;
	width: 610px;
	margin: 5px 0px 5px 8px;
	float: left;
	overflow: hidden;
}

  /*********************************************************************/
 /* header is alleen maar voor het bovenste randje van de achtergrond */
/*********************************************************************/
#content1bg {
	background-color: #FFF;
	background-image: url("images/bg_content0.gif");
	background-position: left top;
	background-repeat: no-repeat;
	height: 5px;
	width: 610px;
	margin: 0;
	padding: 0;
}
#content1 {
	color: #000;
	width: 600px;
	margin: 0;
	padding: 0;
}

  /***********************************************************************************************************************/
 /* content opmaak en opmaak voor de elementen die in de content voorkomen (eerst een speciale div voor de achtergrond) */
/***********************************************************************************************************************/
#content2bg {
	background-color: #FFF;
	background-image: url("images/bg_content1.gif");
	background-position: left top;
	background-repeat: repeat-y;
	width: 610px;
	margin: 0;
	padding: 0;
}
#content2 {
	color: #000;
	width: 600px;
	margin: 0 auto 0 auto;
	padding: 0 5px 0 5px;
}
#content2 a {
	color: #000;
	font-weight: bold;
	text-decoration: underline;
}
#content2 a:hover {
	background-color: #000;
	color: #FF6;
	font-weight: bold;
	text-decoration: underline;
}
/* Opmaak voor de tabel met memo's */
#content2 td.color {
	background-color: #CC6;
	color: #000;
}
#content2 a.action {
	background-color: #FF6;
	border: 1px solid #000;
	display: inline block;
	color: #000;
	text-decoration: none;
	margin: 4px 0px 4px 0px;
	padding: 0 5px 0 5px;
}
#content2 a:hover.action {
	background-color: #000;
	border: 1px solid #000;
	color: #FF6;
}
#content2 a.action_na {
	background-color: #CC6;
	border: 1px solid #000;
	display: inline block;
	color: #999;
	text-decoration: none;
	margin: 4px 0px 4px 0px;
	padding: 0 5px 0 5px;
}
/* Opmaak voor de tabel met invoervelden (inloggen en registreren */
#content2 td.error {
	background-color: #F66;
	color: #FF6;
}
/* Opmaak voor de "header" teksten en berichtboxen */
#content2 p {
	color: #000;
	font-weight: normal;
	margin: 0;
	padding: 0 5px 10px 0;
}
#content2 p.inhoud {
	color: #000;
	font-weight: normal;
	margin: 0;
	padding: 0 0 10px 0;
}
#content2 p.titel {
	color: #000;
	font-weight: bold;
	margin: 0;
	padding: 0 0 10px 0;
}
#content2 p.kalender {
	color: #000;
	font-weight: bold;
	text-align: center;
	margin: 0 auto 0 auto;
	padding-bottom: 10px;
}
#content2 ul {
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 10px;
	list-style-type: square;
}
#content2 li {
	list-style-type: square;
}
#content2 form {
	padding: 0;
	margin: 0 auto 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
#message {
	background-color: #CC6;
	color: #000;
	width: 590px;
	margin: 0 auto 10px auto;
	padding: 2px 0 2px 0;
}
#error {
	background-color: #F66;
	color: #FF6;
	width: 590px;
	margin: 0 auto 0 auto;
	padding: 2px 0 2px 0;
}
#error p {
	color: #FF6;
}
#error input {
	background-color: #F66;
	border: 1px solid #FF6;
	color: #FF6;
}
/* Opmaak voor de weergave van een memo */
#content2 table.memo {
	width: 400px;
	margin: 0px auto 10px auto;
}
#content2 table.publicmemo {
	width: 500px;
	margin: 0px auto 10px auto;
}
#content2 td.memotop1 {
 	background-image: url("images/bg_memo10.gif"); background-position: left top; background-repeat: no-repeat; height: 20px; color: #000; padding: 5px }
#content2 td.memomid1 {
 	background-image: url("images/bg_memo11.gif"); background-position: left top; background-repeat: repeat-y; color: #000; padding: 5px }
#content2 td.memobot1 { 
	background-image: url("images/bg_memo12.gif"); background-position: left bottom; background-repeat: no-repeat; height: 20px; color: #000; padding: 5px }
#content2 td.memotop2 {
 	background-image: url("images/bg_memo20.gif"); background-position: left top; background-repeat: no-repeat; height: 20px; color: #000; padding: 5px }
#content2 td.memomid2 {
 	background-image: url("images/bg_memo21.gif"); background-position: left top; background-repeat: repeat-y; color: #000; padding: 5px }
#content2 td.memobot2 { 
	background-image: url("images/bg_memo22.gif"); background-position: left bottom; background-repeat: no-repeat; height: 20px; color: #000; padding: 5px }
#content2 td.memotop3 {
 	background-image: url("images/bg_memo30.gif"); background-position: left top; background-repeat: no-repeat; height: 20px; color: #000; padding: 5px }
#content2 td.memomid3 {
 	background-image: url("images/bg_memo31.gif"); background-position: left top; background-repeat: repeat-y; color: #000; padding: 5px }
#content2 td.memobot3 { 
	background-image: url("images/bg_memo32.gif"); background-position: left bottom; background-repeat: no-repeat; height: 20px; color: #000; padding: 5px }
#content2 td.memotop_public {
 	background-image: url("images/bg_memo_public0.gif"); background-position: left top; background-repeat: no-repeat; height: 20px; color: #00F; padding: 5px }
#content2 td.memomid_public {
 	background-image: url("images/bg_memo_public1.gif"); background-position: left top; background-repeat: repeat-y; color: #000; padding: 5px }
#content2 td.memobot_public { 
	background-image: url("images/bg_memo_public2.gif"); background-position: left bottom; background-repeat: no-repeat; height: 20px; color: #00F; padding: 5px }
#content2 a.memo1 {
	background-color: #FF6; border: 1px solid #000; display: inline block; color: #000; text-decoration: none; margin: 4px 0 4px 0; padding: 0; padding: 0 5px 0 5px }
#content2 a:hover.memo1 {
	background-color: #000; border: 1px solid #000; color: #FF6; }
#content2 a.memo2 {
	background-color: #6F6; border: 1px solid #000; display: inline block; color: #000; text-decoration: none; margin: 4px 0 4px 0; padding: 0 5px 0 5px; }
#content2 a:hover.memo2 {
	background-color: #000; border: 1px solid #000; color: #6F6; }
#content2 a.memo3 {
	background-color: #F6F; border: 1px solid #000; display: inline block; color: #000; text-decoration: none; margin: 4px 0 4px 0; padding: 0 5px 0 5px; }
#content2 a:hover.memo3 {
	background-color: #000; border: 1px solid #000; color: #F6F; }
#content2 td.memomid_public a {
	color: #00F;
	font-weight: bold;
	text-decoration: underline;
}
#content2 td.memomid_public a:hover {
	background-color: #00F;
	color: #FFF;
	font-weight: bold;
	text-decoration: underline;
}

/* Opmaak voor een memo in edit weergave*/
#memosubmit {
	width: 400px;
	margin: 0 auto 0 auto;
	padding: 5px 0 5px 0;
	text-align: right;
}
#memotop {
	background-position: left top;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0px auto 0 auto;
	height: 1px;
	width: 400px;
}
#memomid {
	background-position: left top;
	background-repeat: repeat-y;
	padding: 0 5px 0 5px;
	margin: 0 auto 0 auto;
	width: 390px;
}
#memobot {
	background-position: left bottom;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0 auto 5px auto;
	height: 20px;
	width: 400px;
}
#publictop {
	background-position: left top;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0px auto 0 auto;
	height: 1px;
	width: 500px;
}
#publicmid {
	background-position: left top;
	background-repeat: repeat-y;
	padding: 0 5px 0 5px;
	margin: 0 auto 0 auto;
	width: 490px;
}
#publicbot {
	background-position: left bottom;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0 auto 5px auto;
	height: 20px;
	width: 500px;
}
#publicsubmit {
	width: 500px;
	margin: 0 auto 0 auto;
	padding: 5px 0 5px 0;
	text-align: right;
}
.top1 {
	background-image: url("images/bg_memo10.gif");
	background-position: left top;
	background-repeat: no-repeat;
	padding: 0;
	margin: 5px auto 0 auto;
	height: 1px;
	width: 400px;
}
.mid1 {
	background-image: url("images/bg_memo11.gif");
	background-position: left top;
	background-repeat: no-repeat;
	padding: 0 5px 0 5px;
	margin: 0 auto 0 auto;
	width: 390px;
}
.mid1 textarea {
	background-color: #FF6;
	border: 1px solid black;
	font-family: arial;
	height: 200px;
	width: 380px;
}
.bot1 {
	background-image: url("images/bg_memo12.gif");
	background-position: left bottom;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0 auto 5px auto;
	width: 400px;
}
.top2 {
	background-image: url("images/bg_memo20.gif");
	background-position: left top;
	background-repeat: no-repeat;
	padding: 0;
	margin: 5px auto 0 auto;
	height: 5px;
	width: 400px;
}
.mid2 {
	background-image: url("images/bg_memo21.gif");
	background-position: left top;
	background-repeat: no-repeat;
	padding: 5px;
	margin: 0 auto 0 auto;
	width: 390px;
}
.mid2 textarea {
	background-color: #6F6;
	border: 1px solid black;
	font-family: arial;
	height: 200px;
	width: 380px;
}
.bot2 {
	background-image: url("images/bg_memo22.gif");
	background-position: left bottom;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0 auto 5px auto;
	width: 400px;
}
.top3 {
	background-image: url("images/bg_memo30.gif");
	background-position: left top;
	background-repeat: no-repeat;
	padding: 0;
	margin: 5px auto 0 auto;
	height: 5px;
	width: 400px;
}
.mid3 {
	background-image: url("images/bg_memo31.gif");
	background-position: left top;
	background-repeat: no-repeat;
	padding: 5px;
	margin: 0 auto 0 auto;
	width: 390px;
}
.mid3 textarea {
	background-color: #F6F;
	border: 1px solid black;
	font-family: arial;
	height: 200px;
	width: 380px;
}
.bot3 {
	background-image: url("images/bg_memo32.gif");
	background-position: left bottom;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0 auto 5px auto;
	width: 400px;
}
.top_public {
	background-image: url("images/bg_memo_public0.gif");
	background-position: left top;
	background-repeat: no-repeat;
	padding: 0;
	margin: 5px auto 0 auto;
	height: 5px;
	width: 500px;
}
.mid_public {
	background-image: url("images/bg_memo_public1.gif");
	background-position: left top;
	background-repeat: no-repeat;
	padding: 5px;
	margin: 0 auto 0 auto;
	width: 490px;
}
.bot_public {
	background-image: url("images/bg_memo_public2.gif");
	background-position: left bottom;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0 auto 5px auto;
	width: 500px;
}
#content2 input {
	border: 1px solid #000;
}
#content2 form {
	margin: 0;
}

/* Opmaak voor het kalender gedeelte */
#content2 td.k_day {
	background-image: url("images/k_tbldaycellbg.gif");
	background-position: left top;
	background-repeat: no-repeat;
	color: #000;
	height: 22px;
	text-align: center;
	vertical-align: middle;
}
#content2 td.k_thismonth {
 	background-image: url("images/k_tbl_cell1.gif");
	background-position: left top;
	background-repeat: no-repeat;
	color: #000;
	font-weight: bold;
	height: 54px;
	width: 74px;
	margin: 1PX;
	padding: 1px 3px 1px 3px;
	text-align: right;
	vertical-align: top;
}
#content2 td.k_othermonth {
	background-image: url("images/k_tbl_cell1.gif");
	background-position: left top;
	background-repeat: no-repeat;
	color: #000;
	height: 54px;
	width: 74px;
	margin: 1PX;
	padding: 1px 3px 1px 3px;
	text-align: right;
	vertical-align: top;
}
#content2 td.k_memo {
	background-image: url("images/k_tbl_cell3.gif");
	background-position: left top;
	background-repeat: no-repeat;
	color: #000;
	font-weight: bold;
	height: 54px;
	width: 74px;
	margin: 1PX;
	padding: 1px 3px 1px 3px;
	text-align: right;
	vertical-align: top;
}
#content2 td.k_memo_event {
	background-image: url("images/k_tbl_cell4.gif");
	background-position: left top;
	background-repeat: no-repeat;
	color: #000;
	font-weight: bold;
	height: 54px;
	width: 74px;
	margin: 1PX;
	padding: 1px 3px 1px 3px;
	text-align: right;
	vertical-align: top;
}
#content2 td.k_memo a.kalenderlink {
	background-color: #CC6;
}
#content2 td.k_memo a:hover.kalenderlink {
	background-color: #CC6;
}
#content2 td.k_memo_event a.kalenderlink {
	background-color: #6F6;
}
#content2 td.k_memo_event a:hover.kalenderlink {
	background-color: #6F6;
}
#content2 td.k_thismonth a.kalenderlink {
	background-color: #FFF;
}
#content2 td.k_thismonth a:hover.kalenderlink {
	background-color: #FFF;
}

  /*********************************************************************************************************************/
 /* footer opmaak en opmaak voor de elementen die in de footer voorkomen (eerst een speciale div voor de achtergrond) */
/*********************************************************************************************************************/

#content3bg {
	background-color: #FFF;
	background-image: url("images/bg_content2.gif");
	background-position: left bottom;
	background-repeat: no-repeat;
	width: 610px;
	margin: 0;
	padding: 0;
}
#content3 {
	color: #000;
	width: 600px;
	height: 40px;
	margin: 0 auto 0 auto;
	padding: 10px 5px 5px 5px;
}
/* De volgende opmaak is voor:
	- Pagecount
	- Kalenderjump
	- Memo sortering
	- Teruglinken naar vorige pagina (alleen in kalender gedeelte) */
#page_options {
	background-color: #CC6;
	color: #000;
	text-align: center;
	width: 560px;
	margin: 0;
	padding: 2px 0 2px 0;
}
#page_options form {
	margin: 0;
}
#page_options a {
	color: #000;
	font-weight: bold;
	text-decoration: underline;
}
#page_options a:hover {
	background-color: #000;
	color: #FF6;
	font-weight: bold;
	text-decoration: underline;
}
#page_options input {
	border: 1px solid #000;
}


  /*********************/
 /* DIP footer opmaak */
/*********************/

#footer {
	color: #CC6;
	text-align: center;
	width: 560px;
	clear: both;
	margin: 5px auto 0 auto;
	padding: 2px 0 2px 0;
}
#footer a {
	color: #CC6;
	text-decoration: underline;
}