﻿/* CSS Document */
* { padding: 0; margin: 0; }
body {font-family:verdana, arial, helvetica, sans-serif; font-size:76%; color:#000; border:0; background:#fff; line-height:1.5em;}
#wrapper { width: 1000px; margin-left: auto; margin-right:auto; background: url(../images/right_bg.gif) top right no-repeat #FFFFFF; }
#title { border-bottom: #000000 2px solid; }
#logo { position: relative; top: 240px; left: 50px; }
#left { float: left; width: 198px; height: 801px; min-height: 700px; background: url(../images/left_bg.gif) top left no-repeat; }
#center { float: left; width: 598px; min-height: 801px; border-right: 2px solid #000000; border-left: 2px solid #000000; }
#right { float: left; width: 200px; }
#footer { width: 596px; margin-left: 198px; background-color: #000000; color: #FFFFFF; text-align: right; clear: both; font-size: 10px; padding: 3px; }
#home #pasfoto, #wat-is-ozetontwikkeling #pasfoto {background-image:url('../images/freddy1.jpg'); position: relative; top: 110px; left: 130px; height:212px; width:139px;}
a img {border: none;}
#archive #center a { color:#6C7864; margin-top:5px; font-weight:normal;}
#archive #center a:hover { color:#C7CDC2; }
#center a { font-weight:bold; color:#694455; margin-top:5px; text-decoration: none; }
#center a:hover { color:#A6758B; text-decoration:underline;}
#center p, h2, h3, hr, dl { width: 420px; margin: 10px auto 10px auto; }
#center ul{ margin-left:100px; margin-right:auto; margin-bottom: 20px; }
#center  li { padding-left: 10px; list-style-type: circle; }
#center .contact { width: 420px; margin: 15px auto 0 auto; border-top: 2px solid #f0e7d7; border-bottom: 2px solid #f0e7d7; background: #f7f2ea; color: #57333F; padding: 0 0 18px 7px; font-size: 12px; margin-bottom: 20px; }
/*#center .route { margin-left:auto; margin-right:auto; margin-bottom: 20px; border: 1px solid #333; }
#center .route  th { text-align:left; color:#FF9900; }
#center .route .open { background :url(../images/route_top.png) no-repeat;  color:#FFF; text-align:center;}*/
dt { font-weight:bold; margin:10px;}
dd { margin: 10px 10px 10px 20px; padding-bottom:15px; text-align:justify; border-bottom:thin gray inset;}
.kopje{ background-color:#5A644A; text-align:center; color:#DBE3D6; padding-top:5px; padding-bottom: 5px; }
.info {width:125px; height:130px; float:right; margin-left:20px; margin-right:70px;}
a.mainlevel:link, a.mainlevel:visited { display: block; background: url(../images/infoho.png) no-repeat; height: 121px !important; width: 124px; vertical-align: middle; font-size: 11px;
font-weight: bold; color: #ffffff; text-align: left; padding-top: 5px; padding-left: 18px; text-decoration: none; }
a.mainlevel:hover { background-position: 0px -125px; color: #FC6401; }
.hideme {display:none;}
h2 { font-size: 18px; margin-top: 40px; margin-bottom: 30px; }
h3 { font-size: 16px; margin-top:15px; margin-bottom:15px;}
h4 { font-size: 14px; margin-top:15px; margin-bottom:15px;}
abbr {cursor:help; }

/*standaardnavigatie*/
#home #navmenu, #wat-is-ozetontwikkeling #navmenu { width: 198px; margin-top:150px; margin-left: 0; padding-left:0; list-style-type:none; font-weight:bold; }
#navmenu {width: 198px; margin-top:365px; margin-left: 0; padding-left:0; list-style-type:none; font-weight:bold; } 
#navmenu ul { margin-left: 0; padding-left: 0; list-style-type: none; font-family: Arial, Helvetica, sans-serif; }
#navmenu a { display: block; margin-top: 5px; padding: 10px 0 10px 5px; width: 192px; background-color: #eee; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; border-width:1px;}
#navmenu a:link, #navmenu a:visited { color: #333; text-decoration: none; }
#navmenu a:hover { background-color: #ccc; color: #666; border-color: #aaab9c #fff #fff #ccc; }
#navmenu a.current { background-color: #ccc; /*color: #333; */border-color: #aaab9c #fff #fff #ccc; }

/*navigatiecenter*/
#navicontainer {background: #f0e7d7; width: 310px; margin: 5px auto; padding: 2px 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; text-align: center;}
ul#navilist  { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 300px; }
#navilist li { display: block; margin: 5px 0; padding: 0; }
#navilist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 0; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; }
#navicontainer>ul#navilist li a { width: auto; }
ul#navilist li#active a { background: #f0e7d7; color: #800000; }
ul#navilist li a:hover, ul#navilist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }

/*I-frame*/
 iframe {margin-left:90px;}
/* sNews */
fieldset { border: 1px solid #E4DF94; padding: 10px 8px; margin: 20px 10px 20px 80px; background: #FFFBC0; color: #000; }
legend {margin-left:30px;}
input { padding: 2px; }
textarea { width: 97%; height: 20em; padding: 3px; }
.comment { background: #F5F6F6; color: #808080; padding: 10px; margin: 0 0 10px 0; border-top: 1px solid #ccc; }
.commentsbox { background: #f4f4f4; color: #808080; padding: 10px; margin: 0 0 10px 0; }
.date { border-top: 1px solid #eee; margin: 0 0 20px 0; }
.important { width:5px; visibility:hidden;}
.paginator {width:350px; margin: 15px auto 15px auto;}

/*******************images*****************/
img.left  { float:left; margin-left:0px; margin-bottom:10px; margin-top:5px; margin-right:5px; border: medium solid #fff;}
img.right { float:right; margin-left:10px; margin-right:30px; margin-bottom:5px; margin-top:5px; border: medium solid #fff; }
img.center{ display:block; margin-left:auto; margin-right:auto; border: medium solid #fff; }

/*******************RSS********************/
#rss a{ color:#999999; text-align: right;}
	#rss a:hover{color:#EFEFEF;}
	#rss li {display: inline; padding-right: 10px; list-style: none; }
	
/****************sub pages*****************/
.sub-menu { margin: 40px auto 10px 70px; padding-bottom:10px; width: 300px; text-align:left; display:block; border-top: 3px solid #333; border-bottom: 1px solid #333; font-size: 11px; color:#3B7065; }
.sub-menu a { color:#679688; }
.sub-menu a:hover{ color:#A56A1A;}
.current-sub-menu { background-color:#679688; color:#673E50; }
.current-sub-number { font-weight:bold; color: #C69FB0; }
#login{font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:right; background-color:#000; padding-top:5px;}
a[title="Login"] {color:#272727;}
a[title="Admin"] {color:#272727;}
/****************accordean*******************/
/**************comtetentietest******************/
/*#competentietest * {
	margin:0;
	padding:0;
	list-style:none;
}
#competentietest body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin:10px;
}*/

#competenties #basic-accordian{
	border:5px solid #EEE;
	padding:5px;
	width:470px;
	/*position:absolute;
	left:50%;
	top:50%;
	margin-left:-175px;
	z-index:2;
	margin-top:-100px;*/
	margin:40px auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;

}

#competenties .accordion_headings{
	padding:5px;
	background:#5a644a;
	color:#FFFFFF;
	border:1px solid #FFF;
	cursor:pointer;
	font-weight:bold;
	text-align:center;
}

#competenties .accordion_headings:hover{
	background:#dbe3d6;
	color:#5a644a;
}

#competenties .accordion_child{
	padding:15px;
	background:#EEE;
}

#competenties .header_highlight{
	background:#694455;
}
#competenties #basic-accordian h5{text-align:center; margin-bottom:10px; font-size:1em; color:#694455}
#competenties #basic-accordian p{font-weight:bold;}
#competenties #basic-accordian li {margin:3px 0 3px 50px; list-style-type:decimal;}
#competenties #basic-accordian a {color:#5a644a;}
.ontwikkeltips{
	border:1px solid #888;
	margin:40px auto 10px auto;
	width:480px;
	padding:0 0 10px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	
}
.ontwikkeltips dt{
	font-weight:bold;
	background-color:#5a644a; display:block; width:480px; height:40px; text-align:center; 
	padding-top:10px; margin-top:-10px;margin-left:-30px;
    line-height:2em; color:#dbe3d6; 
}
.ontwikkeltips dd {border-bottom:none; display:block; width:440px; margin-left:-50px;}
.ontwikkeltips ul{
	list-style-type:square;
	margin-left:-30px;
}
.ontwikkeltips .maintips{width:400px; margin-left:55px;}
/*#center .ontwikkeltips ul .navmenu li  { display:inline-block; margin-left:auto; margin-right:auto; width:400px; text-decoration:none;}
#center .ontwikkeltips li a.navmenu:hover  {color:#5a644a; font-style:oblique; text-decoration:underline;}
#center ul.navmenu li{ display: inline; list-style-type: none; padding-right: 20px; color:#5a644a;}
#center ul.namenu li a:link,#center ul.namenu li a:active {color:#5a644a; font-style:oblique;}
#center ul.navmenu li a:hover{color:#5a644a; font-style:oblique;}*/
#center ul.navmenu{margin-left: 0;padding-left: 0;white-space: nowrap;}
#center .navmenu li{display: inline;list-style-type: none;}
#center .navmenu a {color: #fff;background-color: #5a644a; text-decoration: none; padding: 3px 10px; }
#center .navmenu li a:link, #center.navlist li a:visited,#center.navlist li a:active{color: #fff;background-color: #5a644a;text-decoration: none;}
#center .navmenu li a:hover{color: #fff;background-color: #889672;text-decoration: none;}
#center .ontwikkeltips a {color:#fff; text-decoration:none;}
#center .ontwikkeltips a:active{color:#fff; text-decoration:none;}

/* 
 * CSS:      Table like css gallery
 * Author:   Dragan Babic, (c) 2006
 * Site:        http://dnevnikeklektika.com/
 * Url:          http://dnevnikeklektika.com/en/css-gallery-layout-en
 * Licence: Creative Commons - Attribution-ShareAlike 2.5 - http://creativecommons.org/licenses/by-sa/2.5/
 */

div#snewsGalleryBody .snewsGallery {
   margin:     0 auto 0 auto; 
   padding:    0;
   overflow:   hidden; /* Clears the floats */
   width:      75%; /* IE and older Opera fix for clearing, they need a dimension */
   list-style: none;
}

div#snewsGalleryBody .snewsGallery li {
   float:      left;
   display:    inline; /* For IE so it doesn't double the 1% left margin */
   width:      90px; /* width:23.8%; */
   margin:     10px;/*0 0 10px 1%;  0 0 10px 1%; */
   padding:    10px 0; /* 10px 0; */
   height:     93px; /* For img 85 */ /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */
   position:   relative; /* This is the key */
   background-color:transparent;
}

div#snewsGalleryBody .snewsGallery a, .snewsGallery img {
   display:    block;
   width:      100%;
}

div#snewsGalleryBody .snewsGallery a img { 
   border:     none; 
} /* A small fix */

div#snewsGalleryBody .snewsGallery a:link, .snewsGallery a:visited, .snewsGallery a:focus, .snewsGallery a:hover, .snewsGallery a:active {
   padding:    3px; /* 3px; */
   background: #eeefef;
   width:      90px;
   height:     93px;
   border:     1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
   position: absolute; top: 50%; left: 50%; /* position it so that image's top left corner is in the center of the list item */
   margin: -46px 0 0 -46px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
   /* vertical-align: middle; */
}

div#snewsGalleryBody .snewsGallery a:hover {
   border-color:   #5a644a;/*#dfdfdf;*/
}


/* These are all optional, for decoration purposes only */
div#snewsGalleryBody .snewsGallery {
   border-bottom:  1px solid #eeefef; /* #000; */
   padding-bottom: 10px;
   margin-top:     10px;
}

/* 
 * End of modified Table like css gallery
 */

/* 
 * CSS:    Modifications/Additions to provide for variable image size and intro image
 * Author: Valdis Ozols
 */

div#snewsGalleryBody .snewsGallery li div { /* This one provides for uniform backround rectangle */
   padding:    3px; /* 3px; */
   background: #fff;
   width:      93px;
   height:     93px;
   border:     1px solid #fff; /* We blend the border with the bg, as if it isn't there */
   position: absolute; top: 50%; left: 50%; /* position it so that image's top left corner is in the center of the list item */
   margin: -46px 0 0 -46px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
}

div#snewsGalleryIntro {
   clear: both;
   width: 90%;
}

div#snewsGalleryIntro .snewsGallery {
   width: 200px;
   float:center;
   position: relative;
}

div#snewsGalleryIntro .snewsGallery img {
   display: block;
   padding: 10px;
   border: 1px solid #9fbdb9;
   background: #d4e2de;
   margin-left: auto;
   margin-right: auto;
   width: 170px;
 
}
/*
 * End of Modifications/Additions
 */

