/* Global Styles */
/* changes Peter J.J. Bakker
  03-10-2008
  06-10-2008 (add vcenter for date ruler)
  07-10-2008 (experiments with date ruler)
             (renamed header_middle_top to header_middle_middle, made an new header_middle_top)
  09-10-2008 (navigation layout)
  10-10-2008 (navigation layout)
             (removed classes leftlinks and listLinks)
  11-10-2008 (made content text justifing)
             (add style for links in content-part)
  12-10-2008 (add #menuChoice)
             (now array before submenu-items)
  13-10-2008 (site in middle of the screen with body and extra div)
             (placed the pictures url's in style.css)
  14-10-2008 ()
*/

body {
	margin:0px;
	/*background-color: #FFFFCC;*/
  background-color: #F9D7A4;
}

/* ID Styles */

#overall {
  margin:0 auto;
  width: 1000px;
  height: 803px; /*100%;*/
  /*text-align: left; */
  background-color: #FFCC00;
}

div#header{
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 127px;
  background-color: #BB750D;
}

div#header_left {
	width: 30%;
	height: 127px;
	float: left;
	background-image: url(../images/header_trom_3.jpg);
	background-position: center;
	background-repeat: no-repeat;
}

div#header_middle  {
  width: 40%;
  float: left;
}

div#header_middle_top  {
  height: 33px;
}

div#header_middle_middle  {
  height: 30px;
  text-align: center;
  vertical-align: baseline;
  font: 24px Comic Sans, Comic Sans MS, cursive;
  color: #CCFF99;
  letter-spacing:.2em;
  line-height:30px;
}

div#header_middle_bottom  {
  height: 64px;
  text-align: center;
  vertical-align: top;
  font:12px Comic Sans, Comic Sans MS, cursive;
  /*color: #7030A0;*/
  color: #CCFF99;
  letter-spacing:.4em;
  line-height:18px;
}

div#header_right {
	width: 30%;
	height: 127px;
	float: left;
	background-image: url(../images/header_foto_alexandra_groot3.jpg);
	background-position: center;
	background-repeat: no-repeat;
}

#date_line {
  position: relative;
  height: 25px;
  width: 100%;
  left: 0px;
  top:  0px;
  background-color: #CCFF99;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  /*font: 11px Comic Sans, Comic Sans MS, cursive;
  color: #523227;
  letter-spacing:0.2em;*/
}

#date {
  line-height: 25px;
  width: 200px;
  padding-left: 15px;
  font-family: Comic Sans, Comic Sans MS;
  font-size: 11px;
  color: #523227;
  letter-spacing:0.2em;
}

div#container{
  position: relative;
  left: 0 px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: #FFCC00;
}

div#navigation {
  position: relative;
  width: 165px;
  top: 0px;
  height: 650px;
  background-color: #FBEEC9;
  margin: 0;
  padding: 0px;
  float: left;
  /*border-bottom: 2px solid #FFCC00;*/
}


#navigation ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
  font-family: Comic Sans, Comic Sans MS;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  letter-spacing:.1em;
}

#navigation a {
  display: block;
  padding: 8px 6px 10px 26px;
  width: 133px;
  text-decoration: none;
  border-bottom: 2px solid #fc0;
}

#navigation a:link, #navigation a:visited {
  color: #523227;
  background-color: #FBEEC9;
  background: #FBEEC9 url(../images/nav_arrow.gif) 14px 45% no-repeat;
}

#navigation a:hover {
  background-color: #FFF;
  color: #7030A0;
}

#subMenu {
	/*text-indent: 10px;*/
	/*left: 10px;*/
  /*padding: 8px 6px 10px 36px;*/
}

#subMenu a:link, #subMenu a:visited {
	color: #523227;
	background-color: #FBEEC9;
	background-image: none;
  padding: 8px 0px 10px 32px;
}

#subMenu a:hover {
  background-color: #FFF;
  color: #7030A0;
}

#menuChoice a:link, #menuChoice a:visited {
  background-color: #FFF;
  /*color: #7030A0;*/
}

#menuChoice a:hover {
  background-color: #FFF;
  /*color: #7030A0;*/
}


div#content{
	position: relative;
	width: 450px;
	height: auto;
	padding: 25px 50px;
	margin: 0;
	float: left;
	background-color: #FFCC00;
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color:#523227;
	line-height:20px;
	margin-top:0px;
	text-align: left;
}

div#content h1{
	font: 18px/24px "Comic Sans", "Comic Sans MS", cursive;
	color: #BB750D;
	letter-spacing:.2em;
	text-transform: uppercase;
	text-align: left;
}
  
div#content a {
/*.listLinks {*/
  color: #7030A0;
  font-weight: bold;
}

div#content_right{
	position: relative;
	width: 200px;
	height: auto;
	padding: 25px 0px;
	margin: 0;
	float: left;
	background-color: #FFCC00;
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color:#523227;
	line-height:20px;
	margin-top:0px;
}

div#content_right h1{
	font: 10px/16px "Comic Sans", "Comic Sans MS", cursive;
	color: #BB750D;
	letter-spacing:.2em;
	text-transform: uppercase;
	text-align: left;
}


/* Class Styles */
/* most or all of them can be removed */

.bodyText {
  font:11px Verdana, Arial, Helvetica, sans-serif;
  color:#523227;
  line-height:20px;
  margin-top:0px;
  }
  
.pageName{
  font: 18px Comic Sans, Comic Sans MS, cursive;
  color: #BB750D;
  line-height:24px;
  letter-spacing:.2em;  
  }
  
.subHeader {
  font:bold 10px Comic Sans, Comic Sans MS, cursive;
  color: #BB750D;
  line-height:16px;
  letter-spacing:.2em;
  }

.quote {
  font: 20px Comic Sans, Comic Sans MS, cursive;
  color: #759DA1;
  line-height:30px;
  }
  
.smallText {
  font: 10px Verdana, Arial, Helvetica, sans-serif;
  color: #523227;
  }