<!--
BODY { /* zorgt er voor dat de achtergrond van de hele pagina 70% wit en 30% grijs is, ipv alleen waar TABLE.pagina staat. */
	background-repeat: repeat-y;
	background-color: #FFFFFF;
	background-image: url(graphics/background.gif);
	background-position: 70% 100%
}

BODY,td,th {
	margin: 0px;
	font-size: 8pt;
	font-family: verdana, arial, sans-serif;
	color:#777777;
	line-height:150%;
	vertical-align:top;
	text-align: left;
}

a {
	font-size: 8pt;
	font-family: verdana, arial, sans-serif;
	color:#777777;
	line-height:150%;
}

p {
	font-size: 8pt;
	margin-left: 12px;
	margin-top: 0em;
	margin-bottom: 1em;
}

h1 {
	padding-left: 6px;
	margin-left: 6px;
	margin-bottom: 0.1em;
	margin-top: 1em;
	font-size: 8pt;
	font-family: verdana, arial, sans-serif;
	font-weight: bold;
	color: #777777;
	line-height: 170%;
	border-bottom: 1px solid #f4f4f4;
}

h2 {
	margin-left: 12px;
	margin-bottom: 0em;
	margin-top: 1em;
	font-size: 8pt;
	font-family: verdana, arial, sans-serif;
	color: #777777;
	line-height: 150%;
	vertical-align: top;
	text-align: left;
}

h3 {
	margin-left: 12px;
	margin-bottom: 0em;
	margin-top: 1em;
	font-size: 8pt;
	font-family: verdana, arial, sans-serif;
	font-style: italic;
	font-weight: normal;
	color: #777777;
	line-height: 150%;
	vertical-align: top;
	text-align: left;
}

a.menu_activiteiten, a.menu_profiel, a.bold_link {
	font-weight:bold;
	font-size:8pt;
	text-decoration:none;
	line-height:150%;
}

a.bold_link {
	color:#777777;
} 
a.menu_profiel {
	color:#991066;
}
a.menu_activiteiten {
	color:#4f698a;
}
a.menu_profiel:hover, a.menu_activiteiten:hover {
	color:white;
}
a.bold_link:hover {
	color:#bbbbbb;
}

.with_line {
	font-size: 8pt;
	font-weight:bold;
	border-bottom: 1px solid #f4f4f4;
	padding:6px 4px 1px 4px;
	margin-bottom: 8px;
}

input, textarea {
	background-color: #FFFFFF;
	border: 1px solid #C8C8C8;
	padding-left: 4px;
	padding-right: 4px;
	font-family: verdana, arial, sans-serif;
	color: #777777;
	font-size: 8pt;
}

input.radio_check {
	border:none;
}

select {
	background-color: #FFFFFF;
	border: 1px solid #C8C8C8;
	font-family: verdana, arial, sans-serif;
	color: #777777;
	font-size: 8pt;
}

input.focus { /*input veld dat gefocused is */
	background-color: #c8fc0c;
}
textarea.focus {
	border-color: #c8fc0c;
	border-width: 1px;
}

.warning {color: #FF0000}
.info {color: #00FF00}
.error {color: #FF0000}
.validation {color: #FF0000}
.success {color: #00FF00}

TR.even {
	background-color:#F6F6F6;
}

TR.odd {
}

TR.jaartal {
	border-bottom:1px solid #f4f4f4;
	font-weight:bold;
	margin-top: 25px;
}

.debug {
	background-color: #FFFF00;
}

/* Alleen tonen op scherm, toon niet bij printen */
.noprint {
}

/* Inklappen en uitklappen van items */
.show {
}
.hide {
	display: none;
}

/* =============== *
 * Pagina lay-out
 * =============== */

/* Speciale classes voor de main vormgeving
 * -------------------------
 * | hlinks      | hrechts |
 * -------------------------
 * | body        | menu    |
 * ------------------------- */

TABLE.pagina {
	width:100%;
	height:100%; /* ??Werkt alleen in quirks mode, niet als je doctype specificeert ?? */
}
TH.koplinks {
	width:70%;
	height:95px;
	text-align:right;
	background:url(graphics/opk_links.gif) #FFFFFF no-repeat center right;
}

TH.koprechts {
	width:30%;
	height:95px;
	background:url(graphics/opk_rechts.gif) #c8c8c8 no-repeat center left;
}

TH.voetlinks {
	height:10px;
	background-color:#FFFFFF;
}

TH.voetrechts {
	height:10px;
	background-color:#c8c8c8;
}

TD.body {
	vertical-align:top;
	background-color: #FFFFFF;
	padding-top:10px;
	padding-bottom:10px;
}

TD.index {
	background-color:#c8c8c8;
	vertical-align:top;
	padding-top:10px;
}

/* Speciale classes voor de "body table", de tabel waar de paginainhoud in terecht komt
 * ------------------------------------
 * | |schaduwrand                   | |  }
 * - -------------------------------- -  } Header
 * | |gracht       |streepjes       | |  }
 * ------------------------------------
 * | |           BODY               | |
 * | |                              | |
 * ------------------------------------
 * | |    schaduwrand               | |  } Footer
 * ------------------------------------
 */

TABLE.body_table {
	table-layout:fixed; /* CSS2.1; als niet fixed, dan hebben de browsers (IE/Opera) een probleem om de cellen zonder vaste breedte te renderen met background over de hele cell.*/
	float:right; /* als de tabel om een of andere reden niet fullscreen getoond wordt, zet m dan rechts neer.*/
	margin-top:-6px; /* het plaatje heeft een schaduwrand van 6 pixels, die moet boven de toplijn liggen*/
	width:97%; /* vul de hele body. Dat doet Opera anders niet */
}

TH.body_t_l {
	height:101px;
	width:44px;
	background:url(graphics/gracht_lb.jpg) bottom right no-repeat;
}

TH.body_t_m1 {
	height:6px;
	width:379px;
	background: url(graphics/main_bovenrand.gif) bottom left repeat-x;
}

TH.body_t_m2 {
	height:6px;
	background: url(graphics/main_bovenrand.gif) bottom left repeat-x;
}

TH.body_t_r {
	height:101px;
	width:32px;
	vertical-align:top;
	background:url(graphics/main_hoek_rb.gif) bottom left no-repeat;
}

TH.body_t_m2_l {
	height:95px;
	width:379px;
	background: url(graphics/gracht_boven.jpg) bottom left no-repeat;
}
TH.body_t_m2_r {
	height:95px;
	background: url(graphics/background_pano.gif) bottom right;
}
TH.body_o_l {
	height:44px;
	width:44px;
	background:url(graphics/main_hoek_lo.gif) top right no-repeat;
}

TH.body_o_m {
	height:44px;
	background:url(graphics/main_onderrand.gif) bottom left repeat-x;
}

TH.body_o_r {
	height:44px;
	width:32px;
	background:url(graphics/main_hoek_ro.gif) top left no-repeat;
}

TH.body_m_l {
	width:44px;
	background-image: url(graphics/main_linkerrand.gif);
	background-repeat: repeat-y;
}

TD.body_m_m {
	text-align:left;
	padding-top:10px; /* pagina inhoud 10px onder het plaatje laten beginnen, en er niet tegenaan */
}

TH.body_m_r {
	width:30px;
}
/* speciale classes om de kopjes mee te maken
 * -------------------------
 * |links | midden |rechts |
 * -------------------------
*/
/*algemeen */
TABLE.kop {
	margin-bottom:15px;
	margin-top:7px;
}
TH.kop_l_profiel,TH.kop_l_activiteiten {
	height:22px; width:12px;
}
TH.kop_m_profiel,TH.kop_m_activiteiten {
	height:22px;
	font-size:10pt;
	font-weight:normal;
	letter-spacing:0.15em;
	line-height:100%;
	vertical-align:middle;
}
TH.kop_r_profiel,TH.kop_r_activiteiten {
	height:22px; width:12px;
}

/* Sectie "Profiel" */
TH.kop_l_profiel {
	background:url(graphics/koprand_roze_l.gif);
}
TH.kop_m_profiel {
	background:url(graphics/koprand_roze_m.gif);
}
TH.kop_r_profiel {
	background:url(graphics/koprand_roze_r.gif);
}
/* Sectie "Activiteiten" */
TH.kop_l_activiteiten {
	background:url(graphics/koprand_groen_l.gif);
}
TH.kop_m_activiteiten {
	background:url(graphics/koprand_groen_m.gif);
}
TH.kop_r_activiteiten {
	background:url(graphics/koprand_groen_r.gif);
}

/* speciale classes om de menu blokken mee te maken
 * ------------------------------------------------------
 * |linksboven1 | linksboven2 |middenboven |rechtsboven |
 * ------------------------------------------------------
 * |linksmidden1| linksmidden2|midden(BODY)|rechtsmidden|
 * ------------------------------------------------------
 * |linksonder1 | linksonder2 |middenonder |rechtsonder |
 * ------------------------------------------------------
*/

/* menu algemeen */
TABLE.menu {
	width:92%;
}

TH.menu_t_l1_activiteiten, TH.menu_t_l1_profiel {
	vertical-align:top;
	width:32px;
	height:32px;
}

TH.menu_t_l2_activiteiten, TH.menu_t_l2_profiel {
	vertical-align:top;
	width:9px;
	height:32px;
}

TH.menu_t_m_activiteiten, TH.menu_t_m_profiel {
	vertical-align:top;
	height:32px;
}

TH.menu_t_r_activiteiten, TH.menu_t_r_profiel {
	vertical-align:top;
	width:32px;
	height:32px;
}

TH.menu_o_l1_activiteiten, TH.menu_o_l1_profiel {
	vertical-align:bottom;
	width:32px;
	height:32px;
}

TH.menu_o_l2_activiteiten, TH.menu_o_l2_profiel {
	vertical-align:bottom;
	width:9px;
	height:32px;
}

TH.menu_o_m_activiteiten, TH.menu_o_m_profiel {
	vertical-align:bottom;
	height:32px;
}

TH.menu_o_r_activiteiten, TH.menu_o_r_profiel {
	vertical-align:bottom;
	width:32px;
	height:32px;
}

TH.menu_m_l1_activiteiten, TH.menu_m_l1_profiel {
	vertical-align:middle;
	width:32px;
}

TH.menu_m_l2_activiteiten, TH.menu_m_l2_profiel {
	vertical-align:middle;
	width:9px;
}

TD.menu_m_m_activiteiten, TD.menu_m_m_profiel {
	vertical-align:top;
}

TH.menu_m_r_activiteiten, TH.menu_m_r_profiel {
	width:32px;
}

/* menu "profiel" */
TH.menu_t_l1_profiel {
	background-color:#991066;
	background-image:url(graphics/hoek_roze_lb.gif);
}

TH.menu_t_l2_profiel {
	background-color:#ffc2ff;
	background-image:url(graphics/hoek_roze_binnen_b1.gif);
}

TH.menu_t_m_profiel {
	background:url(graphics/hoek_roze_binnen_b2.gif) top left no-repeat #ffc2ff;
}

TH.menu_t_r_profiel {
	background-color:#ffc2ff;
	background-image:url(graphics/hoek_roze_rb.gif);
}

TH.menu_o_l1_profiel {
	background-color:#991066;
	background-image:url(graphics/hoek_roze_lo.gif);
}

TH.menu_o_l2_profiel {
	background-color:#ffc2ff;
	background-image:url(graphics/hoek_roze_binnen_o1.gif);
}

TH.menu_o_m_profiel {
	background:url(graphics/hoek_roze_binnen_o2.gif) #ffc2ff bottom left no-repeat;
}

TH.menu_o_r_profiel {
	background-color:#ffc2ff;
	background-image:url(graphics/hoek_roze_ro.gif);
}

TH.menu_m_l1_profiel {
	background:url(graphics/profiel.gif) #991066 center left no-repeat;
	height:79px;
}

TH.menu_m_l2_profiel {
	background-color:#ffc2ff;
}

TD.menu_m_m_profiel {
	background-color:#ffc2ff;
}

TH.menu_m_r_profiel {
	background-color:#ffc2ff;
}

/* menu "Activiteiten" */
TH.menu_t_l1_activiteiten {
	background-color:#4f698a;
	background-image:url(graphics/hoek_groen_lb.gif);
}

TH.menu_t_l2_activiteiten {
	background-color:#c8fc0c;
	background-image:url(graphics/hoek_groen_binnen_b1.gif);
}

TH.menu_t_m_activiteiten {
	background:url(graphics/hoek_groen_binnen_b2.gif) top left no-repeat #c8fc0c;
}

TH.menu_t_r_activiteiten {
	background-color:#c8fc0c;
	background-image:url(graphics/hoek_groen_rb.gif);
}

TH.menu_o_l1_activiteiten {
	background-color:#4f698a;
	background-image:url(graphics/hoek_groen_lo.gif);
}

TH.menu_o_l2_activiteiten {
	background-color:#c8fc0c;
	background-image:url(graphics/hoek_groen_binnen_o1.gif);
}

TH.menu_o_m_activiteiten {
	background:url(graphics/hoek_groen_binnen_o2.gif) #c8fc0c bottom left no-repeat;
}

TH.menu_o_r_activiteiten {
	background-color:#c8fc0c;
	background-image:url(graphics/hoek_groen_ro.gif);
}

TH.menu_m_l1_activiteiten {
	background:url(graphics/activiteiten.gif) #4f698a center left no-repeat;
	height:140px;
}

TH.menu_m_l2_activiteiten {
	background-color:#c8fc0c;
}

TD.menu_m_m_activiteiten {
	background-color:#c8fc0c;
}

TH.menu_m_r_activiteiten {
	background-color:#c8fc0c;
}

TABLE.innermenu {
	margin:-12px 0px -5px 0px; /*top, right, bottom and left respectively*/
	width:100%;
	position:relative;
}
TH.innermenu_t_activiteiten, TH.innermenu_t_profiel {
	height:24px; /*14 van plaatje+10 margin -> een lege cell heeft geen margins, dus margin-bottom:10px heeft geen zin.*/
	padding-left:18px;
}

TD.innermenu_m_selected_activiteiten, TD.innermenu_m_selected_profiel {
	padding-left:18px;
	vertical-align:bottom;
}

TD.innermenu_m_activiteiten, TD.innermenu_m_profiel {
	padding-left:18px;
	vertical-align:bottom;
}
TH.innermenu_t_profiel {
	background:url(graphics/wie.gif) 18px 0px no-repeat;
}

TD.innermenu_m_selected_profiel {
	background:url(graphics/rondje_roze.gif) 0px 2px no-repeat;
}

TH.innermenu_t_activiteiten {
	background:url(graphics/wat.gif) 18px 0px no-repeat;
}

TD.innermenu_m_selected_activiteiten {
	background:url(graphics/rondje_groen.gif) 0px 2px no-repeat;
}

/* tabel "Kerkdiensten" en rooster bij "Alpha-cursus" */
TD.metmarge {
	padding: 3px 6px;
}

/* tabel "Alpha-cursus" */
P.metmarge2 {
	margin: 0px 0px 0px 35px;
}

div.voetnoot {
	padding-left:14px;
	padding-top:6px;
	border-top: 1px solid #f4f4f4;
}

sup.voetnoot {
	font-size:7pt;
	line-height:0px;
}

/* classes voor de banner onderaan index.php */
div.banner {
	width:100%;
	margin-top:18px;
	height: 84px;
}

div.banner_left {
	cursor:pointer;
	width:48%;
	height: 84px;
	text-align:right;
	float:left;
}

div.banner_right {
	cursor:pointer;
	width:48%;
	height: 84px;
	text-align:left;
	float: right;
}

-->