/* extra styles used for KS Events */

/* comments FYI, delete before use....*/

/* de balk waarin bij KS de navigatie staat */
#header-beam {
	float:left;
	display:block;
	width:690px;
	height:37px;
	background:#3e3e3e url(/images/bg_navbar.gif) repeat-x bottom;
}
#header-beam a.gotoKS {
	color: #acacac;
	text-decoration: none;
	padding: 6px 0 6px 12px;
	margin: 0 10px;
	display: block;
	background: transparent url(/images/arrow_back_grey.gif) no-repeat left 9px;
}
#header-beam a.gotoKS:hover {
	text-decoration: underline;
}


/* de twee tekstkolommetjes op de homepage, voor de referenties en nieuwsjes */

.textcolumn {
	float: left;
	margin:  15px 0;
}
.main-typeA .textcolumn {
	width: 215px;
	margin-right: 15px;
}
.referentie {
	padding: 0 0 0 40px;
}
.referentie blockquote {
	background: transparent url(/images/huge_quotes.gif) no-repeat left 3px;
	margin: 5px 0 5px -40px;
	padding: 0 0 0 40px;
	color: #333;
	font-size: 13px;
}
.referentie .quotesource {
	font-size: 12px;
	color: #999;

}
.referentie img {
	margin: 7px 0;
}
#content ul.shortnews { /* moet zo specifiek om de #content ul te kunnen overrulen */
	margin: 0;
	padding: 0;
}
#content ul.shortnews li {
	list-style-image: none;
	list-style-type: none;
	margin: 0 0 15px 0;
	padding: 0;
}
#content ul.shortnews li .date {
	font-size: 11px;
	color: #999;
}
#content ul.shortnews li h4 {
	font-size: 12px;
	font-weight: bold !important;
	padding: 4px 0 !important;
}
#content ul.shortnews li h4 a {
	text-decoration: underline;
	color: #666;
	font-weight: bold !important;
}
#content ul.shortnews li  p.short {
	margin: 5px 0;
	color: #666;
	font-size: 12px;
}

/* niet zo'n fancy footer als in KS. Deze bestaat uit twee delen: het witte gedeelte wat gewoon het 'einde' is van het witte gedeelte van de pagina, en het paarse  (gekleurde) met de copyright info */
#footer .whitepart {
	background: transparent url(/images/dotted_background.png) repeat 2px top;
	padding: 28px 0 0 0;
	float: left;
	width:  934px;
	border: solid 18px #FFF;
	color: #666;
	font-size: 13px;
}
#footer .naw {
	float: left;
	text-align: left;
	line-height: 150%;
}
#footer .naw address {
	font-style: normal;
}
#footer .social {
	float: right;
}
#footer .copyright {
	float: left;
	width: 100%;
	text-align: right;
	color: #FFF;
	font-size: 12px;
	margin: 8px 0;
}

/* het .whiteblock moest bij mij iets specifieker om lekker te werken. De achtergrond declaraties zijn nodig voor het image, die ik inline zet (zodat het makkelijker met het CMS kan worden onderhouden */
.whiteblock {
	position: relative;
	background-repeat: no-repeat;
	background-position: right center;
	z-index: 20;
}
.whiteblock input {
	border: solid 1px #d4d4d4;
	float: left;
	width: 106px;
	padding: 2px;
	margin: 0 2px 0 0;
	color: #999;
	font-size:11px;
}
input.button {
	color: #FFF;
	background-color: #AAA;
	border-left: solid 1px #b9b9b9;
	border-top: solid 1px #c6c6c6;
	border-bottom: solid 1px #676767;
	border-right: solid 1px #888483;
	padding: 1px 2px;
	width: auto;
	font-weight: bold;
}
/* extra class voor .whiteblock, zodat cursor handje wordt */
.buttonblock {
	cursor: hand;
	cursor: pointer;
}
/*  de grote banner in de rechterkolom */
.hugebanner {
	position: relative;
	
}
.bigstar {
	position: absolute;
	top: 280px;
	right: -60px;
	width: 141px;
	height: 142px;
}
.bs-purple { /* deze kleur wijzigt dus NIET automatisch met de achtergrond kleur, maar kan zo wel relatief makkelijk worden toegevoegd */
	background: transparent url(/images/bigstar_purple.png) no-repeat left top;
}

.bigstar h3{
	color: #FFF;
	text-align: center;
	width: 100px;
	margin: 28px auto 4px auto;
	font-weight: bold;
	padding:  0 8px;
}
.bigstar p{
	color: #FFF;
	text-align: center;
	width: 100px;
	margin: 0 auto;
	font-size: 11px;
}
.hugebanner a, 
.hugebanner a img {
	border:  none;
}
/* lijstje van foto's van medewerkers */
ul.medewerkers {
	margin: 0 !important;
	padding: 0;
	clear: both;
}
ul.medewerkers li {
	margin: 8px 8px 8px 0 !important;
	padding: 0;
	list-style-type: none;
	list-style-image:none !important;
	float: left;
}

ul.medewerkers img {
	border: solid 2px #FFF;
}
ul.medewerkers li:hover img {
	border: solid 2px #9d3293;
}
.medewerkersinfo h3 {
	font-weight: bold;
	margin: 0;
	padding: 0;
}
.medewerkersinfo .function {
	font-style: italic;
}

/* de tabel voor het nieuwsoverzicht + paging */
table.nieuwsoverzicht {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}
table.nieuwsoverzicht tr{
	
}
table.nieuwsoverzicht td.date{
	width: 45px;
}
table.nieuwsoverzicht td{
	padding: 4px 3px 5px 0;
	border-bottom: solid 1px #CCC;
}
table.nieuwsoverzicht td a {
	padding-right: 13px;
	background: transparent url(/images/arrow_li_yellow.gif) no-repeat right 4px;
}
table.nieuwsoverzicht td a:hover {
	text-decoration: none;
}
#content ul.paging {
	clear: both;
	height: 19px;	
	margin: 0;
}
#content ul.paging li {
	list-style-image: none;
	list-style-type: none;
	margin: 3px 3px 3px 0;
	float: left;
	position: relative;
	font-size: 11px;
}
#content ul.paging li a {
	display: block;
	padding: 2px 5px;
	color: #999;
	text-decoration: none;
	background-color: #ececec;
}
#content ul.paging li a:hover {
	color: #000;
}
#content ul.paging li.curpage {

}
#content ul.paging li.curpage a {
	background-color: #9d3293;
	color: #FFF;
}
#content ul.paging li.nextpage a{
	width: 5px;
	text-indent:  -9000px;
	background: #ececec url(/images/arrow_paging_next.gif) no-repeat 4px 4px;
}
#content ul.paging li.prevpage a {
	width: 5px;
	text-indent:  -9000px;
	background: #ececec url(/images/arrow_paging_prev.gif) no-repeat 4px 4px;
}
/* extra mini-friemels */
.rm50 { margin-right:50px; }
.rm80 { margin-right:80px; }
.w363 {	width: 363px; }

/* dummy aangemaakt om de galleries en andere dingen een beetje netjes te laten lijnen. Moet natuurlijk weggehaald worden (hier en in de HTML) als de echte galleries er in worden gehangen) */
.dummy {
	margin: 12px 0;
	float: left;
	clear: left;
}


/* ------------------------------------------- */
/* rewrites on 'styles.css' used for KS Events */
/* ------------------------------------------- */

#site { background:#FFF none repeat-y top left; }

/* main navigation */
#navitems-KSE { }
.nav-KSE,.nav-KSE ul { 
	position:relative;
	margin:0 0 0 6px !important;
	padding:0px;
}
.nav-KSE li.Level1 { 
	
	list-style:none !important;	
	position: relative;
	margin:0px;
	padding:0px;	

}
.nav-KSE li.Level1 a,
.nav-KSE li.Level1 a:link,
.nav-KSE li.Level1 a:active,
.nav-KSE li.Level1 a:visited,
.nav-KSE li.Level1 a:hover { 
	text-decoration:none;
	color:#333;
	font-size:15px;
	line-height:29px;
	margin:0px;
	padding:0px;
}
.nav-KSE li.Level1 a:hover { 
	color: #ebc306 !important;
}
.nav-KSE li.oclSelectedPage,
.nav-KSE li.oclPageIsInPath {
	background: none;
}

.nav-KSE li.oclSelectedPage a:link,
.nav-KSE li.oclSelectedPage a:active,
.nav-KSE li.oclSelectedPage a:visited,
.nav-KSE li.oclSelectedPage a:hover,  
.nav-KSE li.oclPageIsInPath a:link,
.nav-KSE li.oclPageIsInPath a:active,
.nav-KSE li.oclPageIsInPath a:visited,
.nav-KSE li.oclPageIsInPath a:hover { 
	color: #ebc306 !important;
}
.nav-KSE li.Level1:hover a,.nav-KSE li.Level1 a:hover { 
	color: #3e3e3e;
}

.nav-KSE ul { 
	display:none;
	width: 176px;
	background-color: #ebc306;
	margin:6px 0 !important;
	padding: 10px 0 14px 0 !important;
}
.nav-KSE li.oclSelectedPage ul {
	display: block;
}
.nav-KSE ul li.Level2 { 
	padding:0px;
	list-style:none !important;
	white-space:nowrap; 
}
.nav-KSE li ul li.Level2 a:link,
.nav-KSE li ul li.Level2 a:visited,
.nav-KSE li ul li.Level2 a:hover,
.nav-KSE li ul li.Level2 a:active { 
	margin:0px;
	display:block;
	color: #ffffff !important;
	font-size:14px;
	line-height:15px;
	font-weight:normal;
	padding:6px 2px 2px 26px;
	line-height:140%;
}
.nav-KSE li ul li.Level2 a:hover { 
	color: #333 !important;
	background: transparent url(/images/arrow_archive.gif) no-repeat left 8px;
}
.nav-KSE li ul li.oclSelectedPage a:link,
.nav-KSE li ul li.oclSelectedPage a:visited,
.nav-KSE li ul li.oclSelectedPage a:hover,
.nav-KSE li ul li.oclSelectedPage a:active { 
	color: #333 !important;
	background: transparent url(/images/arrow_archive.gif) no-repeat left 8px;}

.nav-KSE .nav-note {
	position: absolute;
	left: 100px;
	top: -25px;
	height: 34px;
	background: transparent url(/images/nav_note.gif) no-repeat left bottom;
}
.nav-KSE .nav-note a {
	border: solid 1px #ebc306;
	padding:  4px 6px 8px 5px !important;
	display: block;
	width: auto;
	height: 12px;
	border-bottom: none;
	color: #ebc306 !important;
	font-size: 13px !important;
	line-height: 100% !important;
}
.nav-KSE .nav-note a:hover {
	color: #333 !important;
}
/* andere maten voor de colommen */
#content .pageleft,
#content .pageright {
	width: 225px;
}
#content .pagemain {
	float: left;
	position: relative;
}
/* twee soorten .pagemain: eentje in drie-coloms-grid (A) eentje in twee-cololms-grid (B) */
#content .main-typeA {
	width: 460px;
}
#content .main-typeB {
	width: 620px;
}

/* aangepaste kleuren in headers (ook aangepast in js/sifr_headers.js */
h1 {
  color:#ebc306;
  font-size: 26px;
}

h2 {
  color:#ebc306;  
  margin-bottom: 0px;
}
/* door de 'tell a friend' button wrappen lange titels heel lelijk onder die button. Hier met een niet heel mooie truuk opgelost. Wellicht aardig om over te nemen in KS-css zelf.. */
.pagemain h1,
.pagemain .intro {
	
	width: 380px;
}
.main-typeB h1,
.main-typeB .intro {
	width: 530px;
}
.abs-rght {
	position: absolute;
	right: 0px;
	top:  10px;
}
.intro {
	clear: left;
	line-height: 150%;
}
.intro-home {
	font-size: 14px;
}
.pagedate {
	margin-bottom: 22px;
}
.textblock {
	line-height: 150%;
}
#content ul li {
	list-style-image:url(/images/arrow_li_yellow.gif);
	margin: 4px 0;
}
textarea {
	width: 100%;
	border: 1px solid #CBCBCB;
}