/* CSS-file for Strictly CSS three column layout 2006 http://www.strictlycss.com Developed by Eivind Savio */

* /*Set's border, padding and margin to 0 for all values*/
{
  padding: 0;
  margin: 0;
  border: 0;
}

body, html {
  text-align: center; /*** Centers the design in old IE versions ***/
  height: 100%;
  color: #000; 
}

body {
  font-size: 80%;
  font-family: 'comic sans ms', arial, 'sans serif'; 
  color:#663333;
}

p {
  padding: 4px 0 4px 0; 
}

a {
  color:#003366;/* #000099;*/
}

a:hover{
  color: #003366 /* #0000FF;*/
  text-decoration: none;
}

h1, h2, h3 {
  font-weight: bold;
  padding-bottom: 5px;
  color:#CC3366;
}

h1 {
  font-size: 2em;
  text-align:center;
  margin-top:20px;
}

h2 {
  font-size: 1.4em;
  margin-top:10px;
}

h3 {
  font-size: 1.2em;
  margin-top:5px;
}
ol {
/*	list-style-position: inside*/
}
ul {	
/*
	list-style-type: circle;	
	list-style-position: inside
*/
}
.clear { clear: both; }

#mainContainer {
  width: 1000px; /* width: 760px; */
  margin: 0 auto; /*** Centers the design ***/
  min-height: 100%; 
  text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}

* html #mainContainer {
  height: 100%;  /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

/**************************
HEADER
**************************/
#header {
    font-size:large;
    color:#003399;
}

#headerleft{
  float:left;
  width:160px;
  background:url(_opmaak/afbeeldingen/bg/bgheaderleft.gif);
  background-repeat:no-repeat;
  background-position:top center;
  text-align:center;
}

#headerright{
  float:right;
  width:160px;
  background:url(_opmaak/afbeeldingen/bg/bgheaderright.gif);
  background-repeat:no-repeat;
  background-position:top center;
  text-align:center;
}

/**************************
CONTENT AND COLUMNS
**************************/
.outer {
  padding-left: 165px;  
  _padding-left: 83px;    
}
* html .outer {
  padding-right: 150px; /* Normally this shouldn't be in this hack, it should be in .outer, but because of IE7 I had to */
}
.inner {
  width: 835px; /*width: 595px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
  padding-bottom: 50px; /*padding-bottom: 30px;*/
}
* html .inner {
  width: 100%;
}

/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. ***/

.float-wrap {
  float: left;
  width: 840px;/* width: 630px; */
  margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
  _margin-left: -83px;
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
  float: right;
  width: 680px; /*width: 470px; */
}

#contentpane{
  margin:0px;
}

#contentdiv{
  margin:30px;
}

#pg_act_calendar{
  margin:30px;
}

* html #content {
  position: relative;  /*** IE needs this  ***/
}
.contentWrap{
  padding-left:0px;  /* padding-left:5px; */
  padding-right:0px; /* padding-right:5px; */
}
/*
.contentWrap ol, .contentWrap ul {  margin: 3px 0 5px 35px;}
.contentWrap li {/*  padding-bottom: 2px;}
*/
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position.  ***/
#left {
  float: left;
  width: 150px;
  padding: 5px;
  _padding: 3px;
  position:fixed;
}
* html #left {
  position: relative;  /*** IE needs this  ***/
}
#left ul {
  list-style: none;
  padding-bottom: 4px;
}
#left li {
  padding-bottom: 2px;
}

/*************************
RIGHT COLUMN
**************************/
#right {
  float: right; 
  width: 150px;
  padding: 5px;
  _padding: 3px;
  text-align:center;
}
* html #right {
  position: relative;  /*** IE needs this  ***/
  margin-right: -150px; /*** IE gets this margin. ***/
}
#right ul {
  list-style: none;
  padding-bottom: 4px;
}
#right li {
  padding-bottom: 2px;
}
.speltitel {
  width:150px;
  font-size:90%;
}
.speluitg {
  width:150px;
  font-size:80%;
  color:#993333;
  font-family:Georgia, "Times New Roman", Times, serif;
}

/**************************
FOOTER
**************************/
#footer {
  width: 1000px;
  height: 50px; /* height: 30px; /*** The drawback with this solution is that the height of the footer can't be flexible. If you add so much content to the footer that it extends 30px, you will get a vertical scrollbar and the content will overflow the footer if you don't set overflow to hidden ***/
  margin: 0 auto;
  margin-top: -50px; /*margin-top: -30px; /*** By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
  text-align: center;
  font-size:medium;
  background-image:url(_opmaak/afbeeldingen/bg/bgfooter.gif);
  background-repeat:no-repeat;
  background-position:center bottom;
  color:#003399;
}


/**************************
  SCROLLING DIV
**************************/

#scrolldiv {
  font-weight:bold; 
  width:150px; 
  text-align:center; 
  color:#CC3366;
  background:url(_opmaak/afbeeldingen/bg/bgscroll.gif);
  background-repeat:no-repeat;
  background-position:center;
}


/**************************
  FORM ELEMENTS
**************************/

.formulier input[type=text] {
	font-weight: bold;
	font-family:"Courier New", Courier, monospace;
	color:#0033CC;
	background: #CCCCFF; 
}
.formulier textarea{
	font-weight: bold;
	color:#0033CC;
	background: #CCCCFF; 
}
.preview input[type=text] {
	font-weight: bold;
	font-family:"Courier New", Courier, monospace;
	color:#666666;
	background: transparent; 
}
.preview textarea{
	font-weight: bold;
	color:#666666;
	background: transparent; 
}

/**************************
  OBSOLETE
**************************/
.formulier1 label{
   font-weight: bold;
   text-align: right;
}

.formulier1 input{
  width: 400px;
  height: 20px;
  vertical-align:middle;
  font-size:medium;
  font-family:"Courier New", Courier, monospace;
  margin-bottom: 5px;
  background-color:#FFFFCC;
}

.formulier1 textarea{
  width: 400px;
  height: 100px;
  font-size:medium;
  font-family:"Courier New", Courier, monospace;
  background-color:#FFFFCC;
}

.boxes{
  width: 1em;
}

#submitbutton{
  margin-top: 5px;
  width: 95px;
  background-image:url(_opmaak/afbeeldingen/bg/bgsubmenu1.gif);
}

/*********************************
  ADMIN
*********************************/
.overzicht table{
/*	width:"95%";*/
	text-align:center;
}
.overzicht table th, td{
	padding: 0;
	text-align:left;
	vertical-align:top;
}

/*********************************
  MENU BUTTONS 
*********************************/
.button_disabled{
	font-weight:bold;
	color: gray;
	vertical-align:middle;
	background:url(_opmaak/afbeeldingen/bg/bg_button_disabled.gif);
}
.button_enabled{
	font-weight:bold;
	color: #669999;
	vertical-align:middle;
	background:url(_opmaak/afbeeldingen/bg/bg_button_enabled.gif);
}
.button_active{
	font-weight:bold;
	color: #CC3399;
	vertical-align:middle;
	background:url(_opmaak/afbeeldingen/bg/bg_button_active.gif);
}

#menuwrap, #submenuwrap, #submenupermanent, #submenupreview, #submenubuttonlarge{
/*  padding-top:5px;*/
  text-align:center;
  width:100%;
}
.menubutton, .submenubutton, .submenubuttonlarge{
  font-weight:bold;
  background:none;
  vertical-align:middle;
}
.menubutton{
  background-image:url(_opmaak/afbeeldingen/bg/bgmenu1.gif);
  font-size:small;
  width:83px;
  height:32px;
}
.submenubutton{
  width: 95px; /*Fixed width on the link, the same width as the image width */
  height: 26px; 
  font-size:small;
  font-family: 'comic sans ms', arial, 'sans serif';
  font-weight:normal;
  text-decoration: none;
  background:url(_opmaak/afbeeldingen/bg/bgsubmenu1.gif) no-repeat center;
}
.submenubuttonlarge{
  width:170px;
  height:26px;
  font-size:small;
  font-family: 'comic sans ms', arial, 'sans serif'; 
  font-weight:normal;
  text-decoration: none;
  background:url(_opmaak/afbeeldingen/bg/bgsubmenularge1.gif) no-repeat center;
}


/*******************************
  CUSTOM CLASSES: lijsten, grid 
******************************0**/
.nieuw {
  background-image:url(_opmaak/afbeeldingen/icons/nieuw.gif); 
  background-position:top left;
  background-repeat:no-repeat;
  padding-right:10px;
  margin-left:-30px;
  padding-left:50px; 
/* background:#FF6666;*/
/* margin-top:10px; */
}

.opsomming li{
  list-style-image:url(_opmaak/afbeeldingen/icons/box.ico);
  margin-left:30px;
  padding-top:5px; 
  padding-bottom:5px; 
}

.lijstwrap{
  width:190px;
  float:left;
  margin-left:10px;  
  border:inset;
  background-color:#FFCCFF;
}
.lijst {
  margin-left:30px;
}
.lijst ul{
  list-style-image:url(_opmaak/afbeeldingen/icons/box.ico);
}
.lijst ol li{
  margin-top:2px;
}
.lijst ul li ul{
  margin-left:20px;
  list-style-image:url(_opmaak/afbeeldingen/icons/bullet.gif);
}

.gridleft{
  float:left;
  width:150px;
  text-align:right;
  padding-top:5px;
  padding-bottom:0px;
}

.gridright{
  float:left;
  width:450px;
  margin-left:15px;
  margin-top:10px;
  _margin-left: 15px;
  text-align:left;
  padding-top: 5px;
  padding-bottom: 0px;
}
.gridright ul{
  margin-left:20px;
}

.spelprijstabel {
  width:98%;
}
.spelprijstabel th {
  background:url(_opmaak/afbeeldingen/bg/bgspelprijstitel.png);
  text-align:left;
  color:#CC3366;
  font-weight:bold;
  vertical-align:top;
  padding:3px;
}
.spelprijstabel td {
  vertical-align:top;
  padding:3px;
}
.spelprijstabelwinner {
  font-weight:bold;
}
.spelprijstabelcat {
  background:url(_opmaak/afbeeldingen/bg/bgspelprijstitel.png);
  color:#CC3366;
  text-align:right;
}
.spelprijstabelnr {
  background:url(_opmaak/afbeeldingen/bg/bgspelprijs.png);
  width:5%;
  text-align:right;
}
.spelprijstabelx {
  background:url(_opmaak/afbeeldingen/bg/bgspelprijs.png);
  width:5%;
  text-align:center;
  font-weight:bold;
  color:#009900;
}
.spelprijstabelcel{
  background:url(_opmaak/afbeeldingen/bg/bgspelprijs.png);
  text-align:left;
}
.spelprijstabelcelhigh{
  background:url(_opmaak/afbeeldingen/bg/bgspelprijshigh.png);
  text-align:left;
  font-weight:bold;
  color:#009900;
}
.spelprijstabelcelhigher{
  background:url(_opmaak/afbeeldingen/bg/bgspelprijshigher.png);
  text-align:left;
  font-weight:bolder;
  color:#009900;
}
.spelprijstabelceloff{
  background:url(_opmaak/afbeeldingen/bg/bgspelprijsoff.png);
  text-align:left;
  font-weight:bold;
  color:#009900;
}
.spelprijstabeltitel {
  width:30%;
  text-align:left;
}
.spelprijstabeluitg {
  width:40%;
  text-align:left;
}
.spelprijstabelcol40 {
  width:40%;
  text-align:left;
}
.spelprijstabelcol33 {
  width:33%;
  text-align:left;
}
.spelprijstabelcol30 {
  width:30%;
  text-align:left;
}
.spelprijstabelcol25 {
  width:25%;
  text-align:left;
}
.spelprijstabelcol20 {
  width:20%;
  text-align:left;
}


/**************************
  SPELLENKAST CLASSES
**************************/
div.row {
  clear: both;
  }

/*  
div.row  h2, h3{
  text-align:center;
  }
*/
div.col {
  float:left; 
}
 
div.row span.title {
  float: left;
  width: 660px;
  text-align:center;
  font-size:medium;
  }

div.row span.label {
  float: left;
  width: 140px;
  padding-top:10px;
  text-align: right;
  font-weight:bold;
  }

div.row span.value {
  float: left;
  width: 200px;
  padding-left:10px;
  padding-top:10px;
  text-align: left;
  } 

div.spelbeschrijving{
  clear: both;
  margin-left:40px;
  margin-right:40px;
/*  list-style-position: inside;*/
}

div.spelbeschrijving li{
  margin-left:15px;
  margin-top:10px;
  margin-bottom:10px;
}
#spellenkast{
  margin: 0px;
}
#spellenkast td{
  width:25%;
/*  text-align:center;
  border-width: 5px; */
  border-style: solid;  
  border-color: #C1C1BA;  
}

/**************************
  KALENDER CLASSES
**************************/

#kalenderdiv{
  background-image:url(_opmaak/afbeeldingen/bg/bgkalender.gif);
  background-repeat:no-repeat;
/* margin-left:140px;  */
}

#activitydiv{
}

#kalender {
  background-image:url(_opmaak/afbeeldingen/bg/bgkalender.gif);
  background-repeat:no-repeat;
}

#kalender th{
  width:52px;
  text-align:center;
  font-size:medium;
  font-weight:bold;
}

#kalender td{
  height:30px;
  padding-right:15px;
  vertical-align:middle;
  text-align:right;
  color:#CC0066;
  font-size:medium;
  font-weight:bold;
}

.kalendercelO {
  background-image: url(_opmaak/afbeeldingen/bg/bgkalendercelO.gif); 
  background-repeat: no-repeat; 
  background-position: 0% 0%;
}

.kalendercelS {
  background-image: url(_opmaak/afbeeldingen/bg/bgkalendercelS.gif); 
  background-repeat: no-repeat; 
  background-position: 0% 0%;
}

.kalenderinfo {
/*
  background:url(_opmaak/afbeeldingen/bg/bglijn.gif); 
  background-position:bottom; 
  background-repeat:no-repeat;
  background:#FFFFCC; 
  margin-top:10px; 
  background-color:#FFFFCC; 
  background-image:url(_opmaak/afbeeldingen/bg/bgkalenderinfo.gif); */
}
.kalenderinfoS {
  background-image:url(_opmaak/afbeeldingen/bg/bgkalenderinfoS.gif); 
  background-position:top left;
  background-repeat:no-repeat;
  padding-left:20px;
  padding-right:10px;
/* background:#FF6666;*/
/* margin-top:10px; */
}
.kalenderinfoO {
  padding-left:20px;
  padding-right:10px;
/* background:#CCCC99;*/
/* margin-top:10px; */
/* background-image:url(_opmaak/afbeeldingen/bg/bgkalenderinfo.gif); */
}
#activiteiten {
  width:650px;
}
#activiteiten td{
  vertical-align:top;
}
#activiteiten td h3{
  margin-top:0px;
}


/**************************
 hitlist div 
**************************/
#hitlist  {
  margin-left:25px;
  font-size:small;
  color:#6600CC;
}


/**************************
  Begin CSS Drop Down Menu
**************************/

#mainmenu-container {
/*position: absolute;		
  top: 1em;
  left: 1em; */
}

#mainmenu {
  font-size: small;
  width:100%;
  float:left;
  font-weight:bold;
/*font-family: arial, helvetica, sans-serif;*/
/*margin:2em;
  margin-top: 1em;*/
}
		
#mainmenu a {
  text-align: center;
  display:block;
  white-space:nowrap;
  margin:0;
  height:30px; 
  padding: 1px;
}

#mainmenu a, #mainmenu a:visited {	/* menu at rest */
  background:url(_opmaak/afbeeldingen/bg/bgmenu1.gif) no-repeat center center;
  text-decoration:none;
/*color: white;*/
}
	
#mainmenu a:hover {	/* menu at mouse-over  */
  background:url(_opmaak/afbeeldingen/bg/bgmenu2.gif) no-repeat center center;
}	

#mainmenu ul {
  list-style:none;
  margin:0;
  padding:0;
  float:left;
  width:95px;	/* width of all menu boxes. ZELFDE BREEDTE ALS submenuclass li a */
}

#mainmenu li {
  position:relative;
  min-height: 1px; 	/* Sophie Dennis contribution for IE7 */
  vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
  line-height: 30px; /* Aligning text vertically using line-height */
}

#mainmenu ul ul {
  position:absolute;
  z-index:500;
  top:auto;
  display:none;
  padding: 1em;
  margin:-1em 0 0 -1em;
  font-weight:normal;
}

#mainmenu ul ul ul {
  top:0;
  left:100%;
}
div#mainmenu li:hover {
  cursor:pointer;
  z-index:200;
}
div#mainmenu li:hover ul ul,
div#mainmenu li li:hover ul ul,
div#mainmenu li li li:hover ul ul,
div#mainmenu li li li li:hover ul ul
{display:none;}

div#mainmenu li:hover ul,
div#mainmenu li li:hover ul,
div#mainmenu li li li:hover ul,
div#mainmenu li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */


/**************************
  ICON MENU
**************************/

#enlarge {padding:0; margin:0em auto; list-style-type:none; width:100%; }
#enlarge li {display:block; float:left; margin:4px; width:30px; height:30px; position:relative;}
#enlarge li a {display:block; width:30px; height:30px; background:transparent; overflow:hidden; position:relative;}
#enlarge li a img {width:100%; height:100%; border:0;}
#enlarge li a:hover {position:absolute; left: -2px; right:-2px; top:-2px; bottom:-2px; width:35px; height:35px; z-index:100;}


/**************************
  Submenu and Styles
**************************/

#submenu  {
  width:674px;
  float:left;
/* margin:2em; margin-top: 1em;*/
}
.submenuclass  {
  font-weight:normal;
  text-align:center;
}
.submenuclass ul {
  margin: 0 auto; 
  width:674px; 
  list-style: none;
  padding: 0;
}
.submenuclass li {
  text-align: center;
  float: left; 
  line-height: 24px; 
/*margin: 0 2px 0 1px; */
}
.submenuclass li a {
  display: block; /* Making the hole tab a clickable link */
  width: 95px; /*Fixed width on the link, the same width as the image width. ZELFDE BREEDTE ALS #mainmenu ul */
  height: 26px; 
  text-decoration: none;
  background:url(_opmaak/afbeeldingen/bg/bgsubmenu1.gif) no-repeat center;
}
.submenuclass li a:hover {
  background:url(_opmaak/afbeeldingen/bg/bgsubmenu2.gif) no-repeat center;
}
.submenumediumclass li a {
  display: block;
  width: 134px;
  height: 26px; 
  background:url(_opmaak/afbeeldingen/bg/bgsubmenumedium1.gif) no-repeat center;
}
.submenumediumclass li a:hover {
  background:url(_opmaak/afbeeldingen/bg/bgsubmenumedium2.gif) no-repeat center;
}
.submenulargeclass li a {
  display: block;
  width: 166px;
  height: 26px; 
  background:url(_opmaak/afbeeldingen/bg/bgsubmenularge1.gif) no-repeat center;
}
.submenulargeclass li a:hover {
  background:url(_opmaak/afbeeldingen/bg/bgsubmenularge2.gif) no-repeat center;
}

.onderschrift {
	font-size: 120%;
	font-weight: bold;
	font-family:"Courier New", Courier, monospace;
	color:black;
	text-align: center;
	background: transparent; 
}

.formulier_cel_err {
	float: left;
	color: #FF6600;;
	font-size: 0.9em; 
	font-family:"Courier New", Courier, monospace;
/*	background-color: #FFCC99; */
/*	font-weight: bold;*/
}

.formulier_cel_label{
	text-align:right; 
	font-weight: bold; 
	color: #CC3366; 
	font-size: 1.1em; 
	padding-right:5px;
}

.formulier_plain_text{
 	float:left;
	font-weight: bold; 
	color:#003366;
	font-family: 'comic sans ms', arial, 'sans serif'; 
	font-size: 1.1em; 
}
.formulier_cel_print{
	border:1px solid blue;
}
.inschrijving_instructies{
 	padding: 5px;
 	margin: 5px;
	border:1px solid grey;
}