/*==============================================================================
	STANDARD STYLES
	
==============================================================================*/

body {
	font-family: verdana, arial, sans-serif;
	font-size: 70%;
/*	font-size: 60%; /* ie */
	color: #000;
	font-style: normal;
	line-height: 1.4em;
	margin: 0;
	padding: 0;
	margin-left: 70px;
	position: relative;
}

input, select, textarea {
	font-family: verdana, arial, sans-serif; /* body font is ignored by these elements */
	font-size: 1em;
	padding: 1px 2px 0 2px;
}


/***********************************************************
   GENERAL AND CONTAINER
***********************************************************/


div#container {
	width: 692px;
	height: auto;
	margin: 0 auto;
	position: relative;
}

ul, ol {
	margin: 0 0 0 5px;
	padding: 0;
	} 

li {
	margin: 0;
	padding: 0;
	}

table, td, th {
	margin: 0;
	padding: 0;
	text-align: left;
	vertical-align: top;
	}

th { font-weight: bold; }


/***********************************************************
   START GENERIC STYLES FOR INPUTFIELDS DO NOT EDIT !!!
***********************************************************/


form { margin: 0; }

label {
	display: block;
	margin-top: 2px;
	}

div.gender label { display: inline; }

input.firstName, input.middleName, inout.lastNanme, input.street, 
input.postcode, input.city, input.country, input.email, input.username, 
input.password, input.phone, input.title, input.filename, input.description, 
input.remarks, select, textarea {
	display: block;
	width: 300px;
	}

input.gender { display: inline; }

input#middleName, input#postcode { width: 90px; }


/***********************************************************
  STYLES FOR ERRORMESSAGE AND MESSAGE
***********************************************************/


div.message,
div.error {
	color: #000;
	font-weight: bold;
	border: 1px solid #FF0000;
	padding: 10px 10px 20px 50px;
	margin: 10px 0;
	background: url(http://static.occhio.nl/images/attention.gif) #FFDDDD no-repeat 10px 10px;
	}

div.message {
	border: 1px solid #3B89EF;
	background: url(http://static.occhio.nl/images/attention-info.gif) #D2DFF1 no-repeat 10px 5px;
	}

div.message ul,
div.error ul {
	margin-left: 10px;
*	margin-left: 15px; /* ie */
	}


/***********************************************************
  Content
***********************************************************/

h1 {	
	font-style: normal;
	font-weight: bold;
	letter-spacing: 3px;
	color: #000;
	font-size: 1.3em;
	line-height: 1.5em;
	margin: 0 0 12px 0;
	}

h2 {
	font-style: normal;
	font-weight: bold;
	color: #000;
	font-size: 1.1em;
	line-height: 1.2em;
	margin: 0;
	}

h3, h4, h5, h6 {
	font-style: normal;
	font-weight: normal;
	color: #000;
	font-size: 1em;
	line-height: 1em;
	margin: 0 0 0 0;
	}
	h4 { font-size: 0.8em; }
	h5 { font-size: 0.6em; }
	h6 { font-size: 0.4em; }

p { margin: 0 0 15px 0; }

a, a:link, a:visited, a:hover {
	color: #f90;
	text-decoration: underline;
	}
	a:hover { color: #000; text-decoration: underline; }

img { 
	border: 0; 
	margin: 0;
	}
img.home { 
	border: 0; 
	margin-left: 5px;
	}
img.cursussen { 
	border: 0; 
	margin-top: 57px;
	}

a.skipmenu {
	display: none;
	}
		
	div#sidebarLeft {
		width: 170px;
		height: auto;
		position: absolute;
		top: 125px;
		left: -5px;
		}
		
		div#submenu {
			width: 169px;
			height: 159px;
			padding-top: 10px;
			background-color: #FF9900;
			color: #FFFFFF;
			line-height: 20px;
			font-weight: bold;
			position: absolute;
			top: 300px;
			left: -5px;
			}
			
			div#submenu a { color: #FFFFFF; text-decoration: none; }
			div#submenu a:hover { color: #303030; text-decoration: none; }
	
	div.photoLeft {
		width: 170px;
		height: auto;
		position: absolute;
		top: 125px;
		left: -5px;
		}
	div.photoLeft2 {
		width: 170px;
		height: auto;
		position: absolute;
		top: 300px;
		left: -5px;
		}
	div.photoLeft3 {
		width: 170px;
		height: auto;
		position: absolute;
		top: 475px;
		left: -5px;
		}
	
	div#content { 
		width: 340px;
		height: auto;
		position: absolute;
		top: 126px;
		left: 170px; 
		}
		
		#content ul {
			padding-left: 5px;
			}
		#content li {
			margin-left: 12px;
			}
		#content img {
			float: right;
			margin-right: 6px;
			margin-bottom: 6px;
			}
		div#tijden {
			width: 80px;
			height: auto;
			float: left;
			}
		div#dagen {
			width: 110px;
			height: auto;
			float: left;
			}
		div#prijzen {
			width: 160px;
			height: auto;
			float: left;
			}
		div#smal {
			width: 40px;
			height: auto;
			float: left;
			}
			
	div#sidebarRight {
		width: 170px;
		height: auto;
		position: absolute;
		top: 125px;
		left: 521px;
		line-height: 0;
		}	
		
		div#sidebarRight img { 
			margin: 0px;
			margin-bottom: 6px;
*			margin-bottom: 4px;
			}
	
	div#footer {
		display: none;
		}
/***********************************************************
  Menu
***********************************************************/

ul, li {
	margin: 0;
	padding: 0;
	}
	
ul { padding: 0 0 0 14px; }

div#imgLogo {
	position: absolute;
	left: -70px;
	top: 29px;
	}

div#menu { 
	position: absolute;
	top: 84px; 
	left: 54px;
}

#menu ul span, #menu li span { display: none; }

#menu ul { 
	background-color:#FF9900;
	display:block;
	height:41px;
	padding:0;
	width:636px;
}
	
#menu li {
	margin: 0;
	padding: 0 16px 0 0;
	display: block;
	float: left;
	list-style: none;
	}
	
#menu a {
	width: 692px;
	height: 35px;
	display: block;
	position: relative;
	background-repeat: no-repeat;
	background-color: #FF9900;
	}
	
/* ------------ */
	body #mainmenu-0-0 a {
		width: 101px;
		background-image: url(/images/menu/webwinkel.gif);
		}
		body #mainmenu-0-0 a.active {
			width: 101px;
			background-position: 0 -35px;
			}
			body #mainmenu-0-0 a:hover {
				width: 101px;
				background-position: 0 -35px;
				}
				
/* ------------ */
	body #mainmenu-0-1 a {
		width: 74px;
		background-image: url(/images/menu/cursussen.gif);
		}
		body #mainmenu-0-1 a.active {
			width: 74px;
			background-position: 0 -35px;
			}
			body #mainmenu-0-1 a:hover {
				width: 74px;
				background-position: 0 -35px;
				}
				
/* ------------ 	 	
	body #mainmenu-0-2 a {
		width: 148px;
		background-image: url(/images/menu/knipkaart.gif);
		}
		body #mainmenu-0-2 a.active {
			width: 148px;
			background-position: 0 -35px;
			}
			body #mainmenu-0-2 a:hover {
				width: 148px;
				background-position: 0 -35px;
				}
				
 ------------ */				
	body #mainmenu-0-2 a {
		width: 80px;
		background-image: url(/images/menu/workshops.gif);
		}
		body #mainmenu-0-2 a.active {
			width: 80px;
			background-position: 0 -35px;
			}
			body #mainmenu-0-2 a:hover {
				width: 80px;
				background-position: 0 -35px;
				}
				
/* ------------			
	body #mainmenu-0-3 a {
		width: 82px;
		background-image: url(/images/menu/rakustoken.gif);
		}
		body #mainmenu-0-4 a.active {
			width: 82px;
			background-position: 0 -35px;
			}
			body #mainmenu-0-4 a:hover {
				width: 82px;
				background-position: 0 -35px;
				}
				
------------ */				
	body #mainmenu-0-3 a {
		width: 79px;
		background-image: url(/images/menu/eigenwerk.gif);
		}
		body #mainmenu-0-3 a.active {
			width: 79px;
			background-position: 0 -35px;
			}
			body #mainmenu-0-3 a:hover {
				width: 79px;
				background-position: 0 -35px;
				}
				
/* ------------ */				
	body #mainmenu-0-4 a {
		width: 72px;
		background-image: url(/images/menu/contact.gif);
		}
		body #mainmenu-0-4 a.active {
			width: 72px;
			background-position: 0 -35px;
			}
			body #mainmenu-0-4 a:hover {
				width: 72px;
				background-position: 0 -35px;
				}

div#submenu li {
	list-style-type: none;
	}
#submenu a.active {
	color: #000;
	}

body.mk-workshops strong {
	font-weight: normal;
	}
	
/*

Not working in IE:
PNG -> use javascript that Replaces PNG by GIF

Not working in Mac IE:
Some Flash with transparent background -> save as older flash version

*/