/*************************************************************
  
  Author:       Miel Vandevelde
  Company:      VKW-Limburg
  Version:      1.0
  Created on:   10.08.2009
  
  CONTENT STYLESHEET
  ------------------
  PAGE
  HEADER
  NAVIGATION
  CONTENT
  SIDEBARS
  FOOTER
  -
  CLEARFIX
  
*************************************************************/

/*************************************************************
  C O L O R S

dark purple #262262
light green #9c8c05

*************************************************************/



/*************************************************************
  P A G E
*************************************************************/
* { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0 } /* Resets elements */
ol, ul { list-style: none }
big { font-size: 130% }
small, sup, sub { font-size: 80% }

img { -ms-interpolation-mode: bicubic } /* Makes resized images in IE look better */

body { background: #fff; color: #666; font: 12px/1.417em /*12px/17px*/ Arial, Helvetica, sans-serif }

#wrapper { margin: 0 auto; width: 960px }

.NoScreenDisplay { display:none }
.box{ clear: right; display: block; margin: 0 0 5px }

td{	font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

hr { color: #ccc; height: 1px; background:#ccc }


/*************************************************************
  H E A D E R
*************************************************************/
#header { height: 274px; position: relative }

#header a.home { background: url(logo.gif) left top no-repeat; display: inline-block; float: left; height: 43px; margin: 13px 0 0 9px; text-indent: -9999em; width: 229px; }
.section2 #header a.home { background: url(logo_jongvkw.gif) left top no-repeat; display: inline-block; float: left; height: 57px; margin: 13px 0 0 9px; text-indent: -9999em; width: 216px; }

#header #flash { background: url(section1_header.jpg) left top no-repeat; border: 1px solid #ccc; bottom: 0; height: 189px; left: 0; right: 0; position: absolute; top: 77px; width: 958px; border-top:6px solid #262262;}

.section1 #header #flash { height: 189px; background: url(section1_header.jpg) left top no-repeat}
.section2 #header #flash { height: 189px; background: url(section2_header.jpg) left top no-repeat;}
.section3 #header #flash { height: 189px; background: url(section3_header.jpg) left top no-repeat;}
.section4 #header #flash { height: 189px; background: url(section4_header.jpg) left top no-repeat;}
.section5 #header #flash { height: 189px; background: url(section5_header.jpg) left top no-repeat;}

#header #search { background: url(searchBG.gif) right top no-repeat; border-bottom: 5px solid #9c8c05; bottom: 0; height: 25px; left: 0; padding: 10px 7px 0 0; position: absolute; right: 0; text-align: right; top: auto; width: 953px }
.section1 #header #search { background: url(searchBG1.gif) right top no-repeat; border-bottom: 5px solid #262262 }
.section2 #header #search { background: url(searchBG2.gif) right top no-repeat; border-bottom: 5px solid #d0df5c }
.section3 #header #search { background: url(searchBG3.gif) right top no-repeat; border-bottom: 5px solid #435a69 }
.section4 #header #search { background: url(searchBG4.gif) right top no-repeat; border-bottom: 5px solid #ba006f }
.section5 #header #search { background: url(searchBG5.gif) right top no-repeat; border-bottom: 5px solid #00aeef }
#header #search input { border: 1px solid #bcbcbc; color: #000; font: 10px/18px Verdana, Geneva, sans-serif; height: 18px; padding: 0 2px; width: 154px }
#header #search button { background: url(search.gif) center center no-repeat; cursor: pointer; height: 20px; vertical-align: middle; width: 20px }
.section1 #header #search button { background: url(search1.gif) center center no-repeat }
.section2 #header #search button { background: url(search2.gif) center center no-repeat }
.section3 #header #search button { background: url(search3.gif) center center no-repeat }
.section4 #header #search button { background: url(search4.gif) center center no-repeat }
.section5 #header #search button { background: url(search5.gif) center center no-repeat }




/*************************************************************
  N A V I G A T I O N
*************************************************************/
#navigation { border-bottom: 0px solid #262262; height: 40px; left: 337px; right: 0; position: absolute; top: 37px; width: 623px; }

#navigation ul { bottom: 0; height: 40px; left: auto; position: absolute; right: 0; top: auto }
#navigation ul li { }
#navigation ul li a { background: #262262; bottom: 0; color: #fff; display: inline-block; font-size: 1.333em /*16px*/; height: 30px; left: auto; line-height: 30px; position: absolute; text-align: center; text-decoration: none; top: auto; white-space: nowrap }

#navigation ul li.vkw a { background: url(navigation.gif) left top no-repeat; right: 495px; width: 128px }
#navigation ul li.jvkw a { right: 328px; width: 166px }
#navigation ul li.lpf a { right: 267px; width: 60px }
#navigation ul li.oc a { right: 94px; width: 172px }
#navigation ul li.t500 a { background: url(navigation.gif) right top no-repeat; right: 0; width: 93px }

#navigation ul li.vkw a:hover { background: url(navigation.gif) left top no-repeat; height: 40px; line-height: 40px }
#navigation ul li.jvkw a:hover { background: #d0df5c; height: 40px; line-height: 40px; color:#073279 }
#navigation ul li.lpf a:hover { background: #435a69; height: 40px; line-height: 40px }
#navigation ul li.oc a:hover { background: #ba006f; height: 40px; line-height: 40px }
#navigation ul li.t500 a:hover { background: url(navigation.gif) right -50px no-repeat; height: 40px; line-height: 40px }



/*************************************************************
  C O N T E N T
*************************************************************/
#content { float: left; margin: 22px 0 22px 45px; width: 470px }

h1 { color: #262262; font: normal 1.333em/1 /*16px/1*/ Arial, Helvetica, sans-serif; margin-top: 10px; margin-bottom:15px; font-weight: bold; }
h2 { color: #262262; font: normal 1.167em/1 /*14px/1*/ Arial, Helvetica, sans-serif; font-weight: bold; }
h3 { color: #262262; font: normal 1em/1 /*12px/1*/ Arial, Helvetica, sans-serif; font-weight: bold; }

p { margin: 0.667em 0 /*8px*/ }

#content ol, #content ul { margin: 0.667em 0 /*8px*/ }
#content ol { list-style: decimal outside; margin-left: 25px }
#content ul { list-style: disc outside; margin-left: 25px }

table { margin: 0.667em 0 /*13px*/ }

a { color: #9c8c05 }

/* @ CLASSES COLORS */
.vkwlimburg { color: #262262 }
.jongvkwlimburg { color: #d0df5c }
.lpf { color: #435a69 }
.ondernemingsclubs { color: #ba006f }
.top500 { color: #00aeef }
/* end CLASSES COLORS */

/* News items */
#news { width: 100% }
#news td { background: url(item.gif) left top no-repeat; height: 183px; vertical-align: top; width: 229px }
#news td a { color: #333; display: block; padding: 12px; text-decoration: none }
#news td a:hover { text-decoration: underline }
#news td a img { display: block }
#news td a span { background: url(arrow.gif) left center no-repeat; display: block; margin: 10px 0 0; padding: 0 0 0 18px }

/* Activities items */
#activities { width: 100% }
#activities th { border-bottom: 1px solid #9c8c05; color: #9c8c05; font: normal 1.333em/1 /*16px/1*/ Arial, Helvetica, sans-serif; padding: 5px 0; text-align: left; font-weight: bold; }
#activities th a { text-decoration: none;}
.section1 #activities th { border-bottom: 1px solid #262262; color: #262262 }
.section2 #activities th { border-bottom: 1px solid #d0df5c; color: #d0df5c }
.section3 #activities th { border-bottom: 1px solid #435a69; color: #435a69 }
.section4 #activities th { border-bottom: 1px solid #ba006f; color: #ba006f }
.section5 #activities th { border-bottom: 1px solid #00aeef; color: #00aeef }
#activities tr.second { background: #f2f2f2 }
#activities td { vertical-align: middle }
#activities td a { color: #666; text-decoration: none }
#activities td a:hover { text-decoration: underline }
#activities td.date { color: #262262; font-size: 1.167em /*14px*/; font-weight: bold; padding: 3px 10px; text-align: center; text-transform: uppercase; width: 30px; }
#activities td.photo { background: url(photo.gif) center center no-repeat; width: 35px;background-color:none }
#activities td.activity { background: url(activity.gif) center center no-repeat; width:35px; background-color:none }
#activities td.news { background: url(news.gif) center center no-repeat; width:35px; background-color:none }

/* Company items */
dl.company { background: url(dot.gif) left 12px repeat-x; height: 20px; margin: 0.667em 0 /*13px*/; width: 100% }
dl.company dt { background: #fff; color: #262262; float: left; font-size: 1.083em /*13px*/; padding: 0 8px 0 0 }
dl.company dd { background: #fff; float: right; padding: 0 0 0 8px }

/* Top 500 */
#top500 { margin: 30px 0 0 }
#top500 h1 { font-weight: bold }
#top500 table { width: 100% }
#top500 table tr { vertical-align: top }
#top500 table tr th { color: #333; font-weight: normal; text-align: left; text-transform: uppercase; width: 120px }
#top500 table tr td { padding: 0 0 10px }

#top500 table ol, #top500 table ul { margin: 0 0 0 15px }

#top500 table table { background: #999; width: 100% }
#top500 table table th { background: #fff; color: #333; /*font-weight: bold;*/padding: 5px; text-align: center; text-transform: none }
#top500 table table td { background: #fff; padding: 5px; text-align: right }
#content input.default {width:320px; border:1px solid #ccc} 
#content input.rang {width:60px; border:1px solid #ccc} 
#content select.default {width:325px; border:1px solid #ccc} 
#top500form {background:#fff;}
#top500form th {text-align:left; font-weight:bold; height:25px; padding-left:5px; font-size:120%; color:#00AEEF}
#top500form td.title {color:#333;text-align:right;padding-right:5px; padding-left:5px;}
#top500form td {height:25px}



/* home.cfm */
#home { float: left; margin: 22px 45px 22px 0; width: 715px }

#home #logo { font-size: 1.333em /*16px*/; color: #333; margin: 15px 0 15px 0px; padding: 10px 5px; border: 1px solid #ccc; }
#home #logo img { vertical-align: middle }
#home #logo a { margin: 0 0 0 40px }

#home #activities { float: left; margin: 0 15px 0 0px; width: 46%; height:auto }


/* modules */
#content .fotoreeks { } /* fotoreeks lightbox */
#content .module fototekst { } /* foto + tekst */
#content .BeeldRechts { float: right; margin: 0 0 20px 10px } /* beeld rechts */
#content .BeeldLinks { float: left; margin: 0 20px 10px 0 } /* beeld links */
#content .BeeldGroot { margin: 10px 0px; }
#content .portal { } /* 2 kolommen */
#content .portal .kolom1 { border-right: 1px solid #ccc; padding: 0 25px 0 0; vertical-align: top; width: 50% } /* 2 kolommen > kolom1 (links) */
#content .portal .kolom2 { padding: 0 0 0 25px; vertical-align: top; width: 50% } /* 2 kolommen > kolom2 (rechts) */
#content .box { } /* link met tekst */
#content a.ankerlijst { } /* ankerlijst */
#content input, #content textarea { border: 1px solid #000; color: #000; font: 11px/16px Tahoma, Geneva, sans-serif; margin: 2px 0; padding: 3px } /* formulier elementen */
#content input { width: 300px }
#content input.checkbox { border: 0; width: auto }
#content textarea { height: 100px; overflow: auto; width: 450px }
#content .knop { background: #00AEEF; border: 0; color: #fff; text-align: center; width: 70px } /* button formulier */
#content .sitemap { } /* sitemap */
#content #kalenderpunt #fotos { margin-top: 20px; }
#content .inschrijven {background: url('../art/knop_schrijfin.jpg') top no-repeat; width:150px; height:42px; display:block; color:#FFF; text-decoration: none; font-weight: normal; text-align: center; padding-top: 11px; font-size: 13px;}

.section1 #content .knop {background-color: #262262;}
.section2 #content .knop {background-color: #D0DF5C; color: #073279;}
.section3 #content .knop {background-color: #435A69;}
.section4 #content .knop {background-color: #BA006F;}
.section5 #content .knop {background-color: #00AEEF;}

#content table { margin: 0.583em 0 /*7px*/ }

#imagelink
{
	position:relative;
	height:160px;
	vertical-align:middle;
	margin-right:6px;
	margin-bottom:2px;
	text-align:center;
	float:left;
/*  border:1px solid #CCCCCC;*/
/*	background-color:#F8F8F8;*/
}
table.imagelinkimg
{
	padding-top:2px;
	vertical-align:middle;
	height:140px;
}


/*************************************************************
  S I D E B A R S
*************************************************************/
/* Left sidebar */
#sidebarLeft { float: left; margin: 22px 0; width: 200px }

#sidebarLeft #subNavigation { /*border-bottom: 1px solid #e4e4e4*/ }
#sidebarLeft #subNavigation h4 { background: url(subNavigation.gif) left top no-repeat; color: #fff; font: normal 1.25em/35px /*15px/35px*/ Arial, Helvetica, sans-serif; padding: 0 20px 0 0; text-align: right }
.section1 #sidebarLeft #subNavigation h4 { background: url(subNavigation1.gif) left top no-repeat }
.section2 #sidebarLeft #subNavigation h4 { background: url(subNavigation2.gif) left top no-repeat; color: #073279; }
.section3 #sidebarLeft #subNavigation h4 { background: url(subNavigation3.gif) left top no-repeat }
.section4 #sidebarLeft #subNavigation h4 { background: url(subNavigation4.gif) left top no-repeat }
.section5 #sidebarLeft #subNavigation h4 { background: url(subNavigation5.gif) left top no-repeat }


#sidebarLeft #subNavigation a { border-top: 1px solid #ddd;  color: #666; display: inline-block; height: 20px; line-height: 20px; padding: 0 0 0 14px; text-decoration: none; width: 190px}
#sidebarLeft #subNavigation a:hover { background: #f2f2f2; border-top: 1px solid #ddd }
#sidebarLeft #subNavigation a.item1HL { background: #f2f2f2; border-top: 1px solid #ddd }


#sidebarLeft #subNavigation a.subNavigation2 {background: #fff; display: block; height: auto; color: #262262; font-size: 12px; font-weight: bold;}
#sidebarLeft #subNavigation a.subNavigation2:hover { background: #fff url(subnav_bullet.gif) no-repeat 0px 3px; display: block; height: auto; color: #262262; font-size: 12px; font-weight: bold; }
#sidebarLeft #subNavigation a.subNavigation2HL { background: #fff url(subnav_bullet.gif) no-repeat 0px 3px; display: block; height: auto; color: #262262; font-size: 12px; font-weight: bold;}


#sidebarLeft #subNavigation a.subNavigation3 { width: 190px; margin-left: 00px; display: block; height: auto }
#sidebarLeft #subNavigation a.subNavigation3:hover { background: #eee; width: 190px; margin-left: 00px; display: block; height: auto; color: #666; }
#sidebarLeft #subNavigation a.subNavigation3HL { background: #eee; width: 190px; margin-left: 0px; display: block; height: auto; color: #666; }

#sidebarLeft #subNavigation a.subNavigation4 { background: url(subnav_bullet2.gif) no-repeat 13px 4px #fff; width: 170px; padding-left: 30px; display: block; height: auto; color: #333 }
#sidebarLeft #subNavigation a.subNavigation4:hover {background: url(subnav_bullet2.gif) no-repeat 13px 4px #fff; width: 170px; padding-left: 30px; display: block; height: auto; color: #333; font-weight: bold; }
#sidebarLeft #subNavigation a.subNavigation4HL { background: url(subnav_bullet2.gif) no-repeat 13px 4px #fff; width: 170px; padding-left: 30px; display: block; height: auto; color: #333; font-weight: bold; }




/*#sidebarLeft #subNavigation a { border-top: 1px solid #e4e4e4; color: #333; display: inline-block; height: 20px; line-height: 20px; padding: 0 0 0 10px; text-decoration: none; width: 190px}
#sidebarLeft #subNavigation a:hover { background: #f2f2f2; border-top: 1px solid #fff }
#sidebarLeft #subNavigation a.item1HL { background: #f2f2f2; border-top: 1px solid #fff }


#sidebarLeft #subNavigation a.subNavigation2 {  border-top: 1px solid #e4e4e4; display: block; height: auto }
#sidebarLeft #subNavigation a.subNavigation2:hover { background: #f2f2f2; border-top: 1px solid #fff; display: block; height: auto }
#sidebarLeft #subNavigation a.subNavigation2HL { background: #f2f2f2; border-top: 1px solid #fff; display: block; height: auto }

#sidebarLeft #subNavigation a.subNavigation3 { width: 180px; border-top: 1px solid #fff; padding-left: 20px; display: block; height: auto }
#sidebarLeft #subNavigation a.subNavigation3:hover { width: 180px; background: #f2f2f2; border-top: 1px solid #fff; padding-left: 20px; display: block; height: auto }
#sidebarLeft #subNavigation a.subNavigation3HL { width: 180px; background: #f2f2f2; border-top: 1px solid #fff; padding-left: 20px; display: block; height: auto }

#sidebarLeft #subNavigation a.subNavigation4 { width: 170px; border-top: 1px solid #fff; padding-left: 30px; display: block; height: auto }
#sidebarLeft #subNavigation a.subNavigation4:hover { width: 170px; background: #f2f2f2; border-top: 1px solid #fff; padding-left: 30px; display: block; height: auto }
#sidebarLeft #subNavigation a.subNavigation4HL { width: 170px; background: #f2f2f2; border-top: 1px solid #fff; padding-left: 30px; display: block; height: auto}
*/

#sidebarLeft #banner { margin: 22px 0 0 }
#sidebarLeft #banner img { display: block }

#sidebarLeft #werkgroepen h1 a,
#sidebarLeft #werkgroepen h1 a:link,
#sidebarLeft #werkgroepen h1 a:hover,
#sidebarLeft #werkgroepen h1 a:visited { background:transparent url(werkgroep.gif) no-repeat left top; color:#FFFFFF; font-family:Arial,Helvetica,sans-serif; line-height:25px; font-size:14px; font-style:normal; font-variant:normal; font-weight:normal;  padding:0 20px 0 0; text-align:right; height: 25px; margin-top: 10px; border: 0;}

.sectionpwzone #sidebarLeft #subNavigation #werkgroepen h1 { }
.sectionpwzone #sidebarLeft #werkgroepen h1 a,
.sectionpwzone #sidebarLeft #werkgroepen h1 a:link,
.sectionpwzone #sidebarLeft #werkgroepen h1 a:hover,
.sectionpwzone #sidebarLeft #werkgroepen h1 a:visited{  padding-right: 10px;; background: url(subNavigationPW.gif) left top no-repeat; height: 35px; width: 190px; font-size: 15px; line-height: 35px;  text-align: right;}

/* Right sidebar */
#sidebarRight { float: right; margin: 22px 0; width: 200px }

#sidebarRight #member { }
#sidebarRight #member h4 { background: url(member.gif) left top no-repeat; color: #fff; font: normal 1.25em/33px /*15px/33px*/ Arial, Helvetica, sans-serif; /*margin: -10px -20px 0;*/ padding: 0 0 0 20px }
#sidebarRight #member #login { background: #f2f2f2; border: 1px solid #ccc; padding: 10px 20px }
#sidebarRight #member #login input { border: 1px solid #bcbcbc; color: #000; font: 10px/18px Verdana, Geneva, sans-serif; height: 18px; margin: 3px 0; padding: 0 2px; width: 152px; }
#sidebarRight #member #login button { background: url(buttonBG.gif) left top no-repeat; color: #fff; cursor: pointer; font-size: 14px; /*float: right; */height: 24px; line-height: 24px; margin: 3px 0; text-align: center; width: 65px }

#sidebarRight #calendar { color: #262262; margin: 22px 0 0 }
#sidebarRight #calendar a { color: #9c8c05; text-decoration: none }
#sidebarRight #calendar span { background: url(calendar.gif) left top no-repeat; color: #fff; display:block; height: 22px; line-height: 22px; text-align: center; width: 200px }
#sidebarRight #calendar span a { margin: 0 15px }
#sidebarRight #calendar #month { border: 1px solid #ccc; padding: 10px 15px;  border-width: 1px 1px 0 1px; }
#sidebarRight #calendar #month table { color: #b2b2b2; font-size: 0.917em /*11px*/; margin: 3px 0 10px; width: 100% }
#sidebarRight #calendar #month table th { color: #000; font-weight: normal }
#sidebarRight #calendar #month table td { text-align: center }
#sidebarRight #calendar #month table td.month { background: #f2f2f2; color: #262262; cursor: pointer }
#sidebarRight #calendar #month table td.month:hover { background: #9c8c05; color: #fff }
#sidebarRight #calendar #month table td.month:active { background: #9c8c05; color: #fff }
#sidebarRight #calendar #month table td.day { background: #9c8c05; color: #fff }
#sidebarRight #rss {border: 1px solid #ccc; border-width: 0 1px 1px 1px; text-align: right; padding: 0 10px 5px 10px;}
#sidebarRight #rss .rsstxt { height: 20px; display: block; float: right; padding-left: 5px;}
#sidebarRight #rss .rsstxt a { color: #CB6A12}
#sidebarRight #rss .rsstxt a:hover { text-decoration: none; }

#sidebarRight #info { border: 1px solid #ccc; margin: 22px 0 0 }
#sidebarRight #info #membership { border-bottom: 1px solid #ccc }
#sidebarRight #info #membership a { background: url(membership.jpg) right bottom no-repeat; color: #262262; display: block; font-size: 1.25em /*15px*/; line-height: 1.2em /*18px*/; padding: 18px; text-decoration: none }
#sidebarRight #info #order { }
#sidebarRight #info #order a { background: url(order.jpg) right bottom no-repeat; color: #000; display: block; padding: 18px 18px 25px; text-decoration: none }
#sidebarRight #info #order a h5 { color: #262262; font-size: 1.25em /*15px*/; line-height: 1.2em /*18px*/; margin: 0 0 3px }


/*************************************************************
  F O O T E R
*************************************************************/
#footer { background: url(footerBG.gif) left top no-repeat; clear: both; line-height: 1.25em /*15px*/; margin: 0 auto; padding: 8px 0 15px 10px; width: 960px }

#footer a { color: #9c8c05; text-decoration: none }

#footer p.info { float: left }

#footer p.logo { float: right }
#footer p.logo img { vertical-align: middle }
#footer p.logo a { margin: 0 0 0 25px }



/*************************************************************
  C L E A R F I X  =  clears floating elements
*************************************************************/
.clearfix       { display: inline-block }
.clearfix:after { clear: both; content: "."; display: block; font-size: 0; height: 0; visibility: hidden }

/* Hides from IE-mac \*/
* html .clearfix { height: 1% }
.clearfix { display: block }
/* End hide from IE-mac */



/*************************************************************
  T O G G L E   T E K S T
*************************************************************/
.dhtmlgoodies_title{
	/* Styling question */
	/* Start layout CSS */
	/*border-bottom: 1px solid #E5E5E5;*/
	text-decoration:underline;
	color: #9c8c05; 	
	
	/* End layout CSS */
	
	overflow:hidden;
	cursor:pointer;
}	
.dhtmlgoodies_content{	/* Parent box of slide down content */
	/* Start layout CSS */
/*	background-image:url(expert_content_patroon.png);
	background-repeat: repeat-x;
	background-position:top;*/
	/* End layout CSS */
		
	visibility:hidden;
	height:0px;
	overflow:hidden;
	position:relative;
}
.dhtmlgoodies_content_content{	/* Content that is slided down */
	padding:1px;	
	position:relative;
}
#print {
	float:right;
	margin-left:10px;
}

.input {
  margin: 0;
/*  background: white;*/
  float: left;
  clear: both;
}
.input span {
  position: absolute;
  margin-top:3px;
  margin-left:0px;
  padding-left:3px;
  height:19px;
  color: #999;
  background-color:#FFFFFF;
  font: 10px/18px Verdana, Geneva, sans-serif;
  width:154px;
}
.input input, .input textarea, .input select {
  position: relative;
  margin: 0;
  padding: 5px;
  margin-left: 3px;
  border-width: 1px;
  padding: 6px;
  background: transparent;
  font: inherit;
}

input.hidespan {
  background-color:white;
}
/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .input input, .input textarea, .input select { padding: 4px; }
}