@charset "utf-8";
/*------------------gemeenschappelijke layout--------------*/

body  {
	background: #6c6c6c;
	margin: 0; /* het is een goede gewoonte om de instellingen voor margin (marge) en padding (opvulling) van het element body op nul in te stellen en daarmee op de standaardinstellingen van de verschillende browsers */
	padding: 0;
	text-align: center; /* hiermee centreert u de container (het hoofdobject) in IE 5*-browsers Vervolgens wordt de tekst ingesteld op de standaardinstelling van links uitlijnen in de kiezer #container */
	color: #000000;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
}

div, h1, h2, h3, h4, h5, h6, p, pre, address, blockqoute, span, ul, ol, li, dl, dd, dt, img {
	margin: 0px;
	padding: 0px;
}
#container {
	width: 1000px;
	margin: 10px auto 0;
	text-align: left; /* hiermee wordt de instelling text-align: center voor het element body genegeerd. */
	background: url(../images/background.jpg);
} 
#image {
	background: url(../images/backgroundimage.gif) no-repeat 345px 30px;
}
#image404 {
	background: url(../images/sorry.jpg);
	height: 658px;
	width: 980px;
}
#top  {
	position: fixed;
	height: 50px;
	width: 62px;
	top: 141px;
	right: 0px;
}
#header{
	height: 45px;
}
/*------------------Main Navigatie: Alg--------------*/

#header #navMain  {
	height: 30px;
	width: 486px;
	padding-left: 35px;
	padding-right: 24px;
	float: left;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 30px;
	font-weight: bold;
}
#header #navSub   {
	width: 445px;
	float: right;
	padding-left: 0px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}
#header #navMain ul li  {
	display: inline;
	color: #FFF;
}
/*------------------Main Navigatie: Spatiering! --------------*/
#header #navMain ul #LiWeb, #header #navMain ul #LiFoto, #header #navMain ul #LiCursus, #header #navMain ul #LiMagazijn  {
	padding-right: 40px;
}
#header #navMain ul #LiContact {
	padding-right: 0px;
}
/*------------------Main Navigatie: Knoppen--------------*/
#header #navMain ul #LiWeb a:link, #header #navMain ul #LiWeb a:visited {
	color: #FFF;
	text-decoration: none;
}
#header #navMain ul #LiWeb a:hover, #header #navMain ul #LiWeb a:active {
	color: #FFB93F;
}
#header #navMain ul #LiWeb a.currentWeb {
	color: #FFB93F;
	text-decoration: none;
	cursor:default;
}
#header #navMain ul #LiFoto a:link, #header #navMain ul #LiFoto a:visited {
	color: #FFF;
	text-decoration: none;
}
#header #navMain ul #LiFoto a:hover, #header #navMain ul #LiFoto a:active {
	color: #AB2F62;
}
#header #navMain ul #LiFoto a.currentFoto {
	color:#AB2F62;
	text-decoration: none;
	cursor:default;
}
#header #navMain ul #LiCursus a:link, #header #navMain ul #LiCursus a:visited {
	color: #FFF;
	text-decoration: none;
}
#header #navMain ul #LiCursus a:hover, #header #navMain ul #LiCursus a:active {
	color: #A64826;
}
#header #navMain ul #LiCursus a.currentCursus {
	color: #A64826;
	text-decoration: none;
	cursor:default;
}
#header #navMain ul #LiMagazijn a:link, #header #navMain ul #LiMagazijn a:visited {
	color: #FFF;
	text-decoration: none;
}
#header #navMain ul #LiMagazijn a:hover, #header #navMain ul #LiMagazijn a:active {
	color: #7Ba626;
}
#header #navMain ul #LiMagazijn a.currentMagazijn {
	color: #7Ba626;
	text-decoration: none;
	cursor:default;
}
#header #navMain ul #LiContact a:link, #header #navMain ul #LiContact a:visited {
	color: #FFF;
	text-decoration: none;
}
#header #navMain ul #LiContact a:hover, #header #navMain ul #LiContact a:active {
	color: #3D62BA;
}
#header #navMain ul #LiContact a.currentContact {
	color: #3D62BA;
	text-decoration: none;
	cursor:default;
}

/*------------------Footer-------------*/
#footer {
	padding: 30px 10px 20px 599px;
} 
/*-------------------------------------Twee kolommen/layout styles--------------*/
#sidebar1 {
	float: left; /* aangezien dit een zwevend element betreft, moet er een breedte worden opgegeven */
	width: 315px; /* de achtergrondkleur wordt weergegeven over de lengte van de inhoud in de kolom, maar niet verder */
	padding: 25px 24px 25px 35px;
}

/*------------------sitebar--------------*/
#sidebar1 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	position: relative;
}
#sidebar1-tutorials{
	width: 480px;
	padding: 25px 24px 25px 35px;
	float: left;
	color: #FFF;
	font-size: .8em;
}

/*------------------opmaak --------------*/
#header h1 {
	margin: 0; /* door de marge van het laatste element in het element div voor #header op 0 in te stellen voorkomt u het wegvallen van marges – een onverklaarbare ruimte tussen div-elementen. Als om het element div een rand loopt, is dit niet nodig aangezien dit tevens het wegvallen van de marge voorkomt */
	padding: 10px 0; /* door het gebruik van padding (opvulling) in plaats van een marge (via het element margin) kunt u het element van de randen van het element div vandaan houden */
	font-size: 1.4em;
}
#sidebar1 h4  {
	font-size: 1em;
	padding-top: 1em;
	padding-bottom: .5em;
}
#sidebar1 p {
	font-size: 0.8em;
	line-height: 160%;
	color: #FFF;
}
#twitter {
	margin-left: -70px;


}

#container #image #sidebar1 #outerdiv {
	height: 800px;
	width: 500px;
	overflow: hidden;
	position: relative;
	border-top: 2px solid #666;
}
#container #image #sidebar1 #innerframe {
	position: absolute;
	top:-50px;
	height: 800px;
	width: 500px;
}

#sidebar1 #caption1, #sidebar1 #caption2,#sidebar1 #caption3, #sidebar1 #caption4, #sidebar1 #caption5, #sidebar1 #caption6, #sidebar1 #caption7, #sidebar1 #caption8, #sidebar1 #caption9, #sidebar1 #caption10, #sidebar1 #caption11, #sidebar1 #caption12, #sidebar1 #caption13, #sidebar1 #caption14, #sidebar1 #caption15 {
	position:absolute;
	top:420px
	!important;
	top:420px;
	left:35px;
	width:374px;
	overflow:hidden;
	visibility: visible;
}

#sidebar1 #caption1{

}
#container #image #sidebar1 .kopjegeel {
	font-size: 1em;
	color: #e3a538;
	font-weight: bold;
}
#container #image #sidebar1 .kopjerood {
	font-size: 1em;
	color: #AB2F62;
	font-weight: bold;
}
#container #image #sidebar1 a:link, #container #image #sidebar1 a:visited {
	color: #FFF;
	text-decoration: underline;
}
#container #image #sidebar1 a:hover {
	color: #999;
	text-decoration: none;
}
#container #sidebar1 img {
	margin-bottom: 25px;
}
#container #sidebar1 ul {
	margin-left: 20px;
}
#container #image #sidebar1 #flashcontent {
	color: #FFF;
}
#container #image #sidebar1 #TekstenWebsites {
	color: #FFF;
}


/*------------------mainContent --------------*/
#mainContent {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	position: relative;
} 
#mainContent h1 {
	font-size: 1.1em;
	border-bottom: 1px solid #000;
	margin-bottom: 1em;
	font-weight: normal;
}
#mainContent h2 {
	font-size: 1em;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 0.5em;
	font-size: 1em;
}
#mainContent h2.extra {
	background: url(../images/vlinderH2.gif) no-repeat;
	border-style: none;
	padding-left: 35px;
}
#mainContent h3.googleletter {
	font-family: 'Reenie Beanie', arial, serif;
	font-size: 1.8em;
	padding: 1em 1em .5em;
}
#mainContent h3{
	font-size: .9em;
	padding-top: 1em;
	padding-bottom: 0.4em;
	font-weight: bold;
	color: #000;
}
#mainContent h4 {
	font-size: 0.9em;
	padding-bottom: 0.4em;
	padding-top: 1em;
}
#mainContent h5 {
	font-size: 0.9em;
	font-weight: bolder;
	font-style: italic;
	padding-bottom: .3em;
}

#mainContent p {
	font-size: 0.8em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#container #image #mainContent ul {
	margin-left: 40px;
	list-style: circle;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#container #image #mainContent ul li {
	padding-left: 10px;
	list-style: circle;
	margin-left: 40px;
	color: #000;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-size: 0.8em;
}
#container #image #mainContent ol li  {
	font-size: .8em;
	padding-left: 20px;	padding-left: 10px;
	margin-left: 40px;
	color: #000;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-size: 0.8em;
}


#container #mainContent a:link{
	color: #000;
	text-decoration: underline;
}

#container #mainContent a:visited{
	color: #000;
	text-decoration: underline;
	}
#container #mainContent a:hover{
	color: #666;
	text-decoration: none;
	}
#container #mainContent a:active{
	color: #666;
	text-decoration: none;
}

#container #image #mainContent p.breadcrumb {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 0.6em;
	color: #999;
	padding-bottom: 1em;
}
#container #image #mainContent p.klein {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 0.6em;
	color: #000;
	padding-bottom: 1em;
}

#container #image #mainContent .breadcrumb a:link {
	color: #999;
}
 #container #image #mainContent .breadcrumb a:visited {
	color: #999;
}
#container #image #mainContent .breadcrumb a:hover {
	color: #666;
	text-decoration:none;
}
/*------------------mainContent Specifiek --------------*/
#container #mainContent .Kopdefault h1, #container #mainContent .Kopdefault h2, #container #mainContent .Kopdefault h3, #container #mainContent .Kopdefault h4 {
	color: #000;
}
#container #mainContent .Kopweb h1, #container #mainContent .Kopweb h2, #container #mainContent .Kopweb h4 {
	color: #e3a538;
}
#container #mainContent .Kopfoto h1, #container #mainContent .Kopfoto h2, #container #mainContent .Kopfoto h4  {
	color: #8c2650;
}
#container #mainContent .Kopcursus h1, #container #mainContent .Kopcursus h2, #container #mainContent .Kopcursus h4  {
	color: #8c3D20;
}
#container #mainContent .Kopmagazijn h1, #container #mainContent .Kopmagazijn h2, #container #mainContent .Kopmagazijn h4  {
	color: #668c20;
}
#container #mainContent .Kopcontact h1, #container #mainContent .Kopcontact h2, #container #mainContent .Kopcontact h4  {
	color: #2E4A8C;
}
#container #image #mainContent .Kopcursus object  {
	margin-bottom: 10px;
	margin-left: 15px;
}


#container #image #mainContent .Kopcursus table .datum{
	color: #9c5216;
	font-weight: bold;
}
#container #image #mainContent .Kopcursus #listNav  {
	margin: 0px;
	padding: 0px;
	line-height: 40px;
	height: 40px;
	width: 360px;
	text-decoration: none;
}
#container #image #mainContent .Kopcursus #listNav ul  {
	margin: 0px;
	padding: 0px;
	text-decoration: none;
}
#container #image #mainContent .Kopcursus #listNav li  {
	display: inline;

}
#container #image #mainContent .Kopcursus #listNav ul li a {
	text-decoration: none;
	text-decoration: none;
	padding: 3px;
	background: #FCECDC;
	margin-right: 5px;
	border: 1px solid #d48b41;
}
#container #image #mainContent .Kopcursus #listNav a:hover {
	color: #000;
	background: #e7b17b;
}
#container #image #mainContent #blok {
	color: #000;
	background: #DFE2EE;
	padding: 0px 10px 10px;
	border: 1px solid #8080C0;
}
#container #image #mainContent .Kopcursus #form2 {
	font-size: 0.8em;
}
#cursussen-blokje {
background: #E8E8E8;
padding: 15px;
border: 1px solid #8c3D20;
}
#container #image #mainContent .Kopmagazijn #Info {
	height: 100px;
	width: 360px;
	overflow: scroll;
	overflow-x: hidden;
	list-style: circle;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	border: 1px dotted #668c20;
	margin: 5px;
	color: #000;
	background: #FFE;
}
#container #image #mainContent .Kopmagazijn #Info ul li a:link {
	color: #688c20;
}
#container #image #mainContent .Kopmagazijn #Info ul li a:hover {
	color: #666;
}
#container #image #mainContent .Kopmagazijn #nieuws {
	overflow-x: hidden;
	list-style: circle;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	border: 1px solid #666;
}
#container #image #mainContent #nieuws h2.geel {
	overflow: scroll;
	overflow-x: hidden;
	list-style: circle;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #e3a538;
	font-weight: bold;
	font-size: .9em;
}
#contact-blokje {
	background: #E8E8E8;
	padding: 15px;
	border: 1px solid #315b9d;
}

#container img.left {
	border: 1px solid #000;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}
.Kopcursus img    {
	margin-right: 5px;
	margin-bottom: 5px;
	border: 1px solid #8c3D20;
}
.Kopweb img {
	border: 1px solid #000;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 20px;
}
.Kopmagazijn img {
	border: 1px solid #688c20;
	margin: 5px 5px 5px 0px;
}
#container #image #mainContent .geenrand {
	border-style: none;
}
#container #mainContent #slotje a:link, #container #mainContent #slotje a:visited{
	border-style: none;
	background: url(../images/slotje2.gif) no-repeat left top;
	display: block;
	height: 76px;
	width: 57px;
}
#container #mainContent #slotje a:hover, #container #mainContent #slotje a:active{
	border-style: none;
	background: url(../images/slotje2-open.gif) no-repeat left top;
	display: block;
	height: 76px;
	width: 57px;
}
#container img.right {
	border: 1px solid #000;
	margin: 10px 0px 10px 10px;
}
#container blockquote {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.5;
	margin-left: 2em;
	padding-right: 1em;
	padding-left: 1.2em;
	padding-top: 3em;
	background: url(../images/upQuote.gif) no-repeat;
}
#container blockquote .quote {
	line-height: 1.2;
	font-weight: bold;
	background: url(../images/downQuote.gif) no-repeat right bottom;
	text-align: right;
	display: block;
	padding-bottom: 4em;
	padding-right: 1.2em;
	width: 320px;
}
#container #image #mainContent .Forelle {
		font-weight: normal;
	font-style: normal;
	line-height:normal;
	font-family: 'ForelleRegular', sans-serif;
	font-size-adjust: 0.23;
	font-size: 2em;
}

/*-----------------@ad font0face------------*/
@font-face {
	font-family: 'ForelleRegular';
	src: url('forelle-webfont.eot');
	src: local('☺'), url('forelle-webfont.woff') format('woff'), url('forelle-webfont.ttf') format('truetype'), url('forelle-webfont.svg#webfontLgAox6Un') format('svg');
	font-weight: normal;
	font-style: normal;
}
.Forelle {
	font-weight: normal;
	font-style: normal;
	line-height:normal;
	font-family: 'ForelleRegular', sans-serif;
	font-size-adjust: 0.23;
	font-size: 2em;
		}
/*------------------Footer --------------*/
#footer p {
	padding: 10px 0;
	text-align: left;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 0.7em;
}

#footer a:link, #footer a:visited {
	color: #000;
	text-decoration: none;
}
#footer a:hover{
	color: #999;
}
#mainContent {
	margin-left: 569px;
} 
#mainContent .Kopdefault, #mainContent .Kopweb, #mainContent .Kopfoto, #mainContent .Kopcursus, #mainContent .Kopmagazijn, #mainContent .Kopcontact {
	margin-right: 55px;
	margin-top: 90px;
}

/*----------------------------------------------------------------------------------------*/

.fltrt { /* dit exemplaar van class kan worden gebruikt om een element aan de rechterzijde van uw pagina te laten zweven. Het zwevende element moet voorafgaan aan het element dat, op de pagina, naast het zwevende element moet staan. */
	float: right;
	margin-left: 8px;
}

.fltlft { /* dit exemplaar van class kan worden gebruikt om een element aan de linkerzijde van uw pagina te laten zweven. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* dit exemplaar van class moet op een element div of break zijn geplaatst en dient het laatste element te zijn vóór de afsluiting van een container (hoofdobject) die op zijn beurt een zwevend object volledig dient te bevatten */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#google_translate_element {
	position: absolute;
	top: 50px;
	right: 60px;
}
/*---------------------------lightbox---------------------------------------*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ 
display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
#container #image #mainContent .Kopweb p small a {
	color: #000;
}
.klein {
	font-size: .6em;
}
#container #image #mainContent .Kopcursus .restricted {
	background: #F73548;
	border: 5px dotted #FFF;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
	color: #FFF;
}
#container #image #mainContent .Kopcursus .restricted h2 { 
    color: #FFF;
	}