body     {font-family: arial,helvetica}

p        {font-size: 10pt;}

p2       {font-size: 10pt;
          color: #9e3038;}

h1       {font-size: 25pt;
          font-weight: 100;
          color: #9e3038;}
a        {text-decoration: none;
          color: #9e3038;}

#navi    {margin-top: -35px;
          width: 960px;
          height: 35px;
          background-color: black;
          opacity: 0.5;
          filter: alpha(opacity=50)}

nav      {margin-top: -35px;}

ul, li {
	margin: 0;
	padding: 0;
}

/* style of 1st level ul */
ul#menu {     
}
/* 1st level list is floating for horizontal menu */
#menu li {
	float: left;
	position: relative;
	list-style: none;
	margin: 0 0 0 5px;
	padding: 0;
	/* transition effect for background */
	transition: background .2s ease-in-out;
	-webkit-transition: background .2s ease-in-out;
	-moz-transition: background .2s ease-in-out;
	-o-transition: background .2s ease-in-out;
}
/* links and sectionheaders style */
#menu li a, 
#menu li span.sectionheader {
	display: block;
	color: #fff;
	line-height: 35px;
	padding: 0 11.5px;
	text-decoration: none;
}
/* 1st level links style */
#menu li a.menuitem, #menu li span.menuitem.sectionheader {
	
	color: white;
	font-weight: 100;
}
/* hover or current style */
#menu li:hover, 
#menu li.current,
#menu .current {
	-webkit-box-shadow:inset 0 -5px 0px 0px #f09e2d;
        -moz-box-shadow:inset 0 -5px 0px 0px #f09e2d;
         box-shadow:inset 0 -5px 0px 0px #f09e2d;
}
/* description is wrapped in info span */
#menu span.info {
	display: block;
	line-height: 1;
	display: block;
	font-size: 11px;
	padding-bottom: 10px;
	text-transform: none;
	text-shadow: none;
	color: #aaa;
	font-weight: normal;
}
/* 2nd level */
#menu .submenu {
	position: absolute;
	z-index: 100;
	width: auto;
	top: -9999em; /* hide first */
	left: -9999em;
	opacity: 0; /* set opactiy to 0 for transtion effect */
	width: 240px; /* flyout will depend on this, if you change it dont forget about #menu .submenu li.flyout ul */
	/* animate dropdown */
	transition: width .4s ease-in-out;
	-webkit-transition: width .4s ease-in-out;
	-moz-transition: width .4s ease-in-out;
	-o-transition: width .4s ease-in-out;
	border-radius: 0 0 6px 6px;
	transition: opacity .4s ease-in-out;
	-webkit-transition: opacity .4s ease-in-out;
	-moz-transition: opacity .4s ease-in-out;
	-o-transition: opacity .4s ease-in-out;
}
/* position wrapping div on hover */
#menu li:hover .submenu {
	top: 35px;
	opacity: .95;
	left: 0;
}
/* if parent has class right, position it to right */
#menu li:hover.right .submenu {
	left: auto;
	right: 0;
}
/* width of mega dropdown, you can add more classes like this, depending on your site structure */
#menu li.two_col:hover .submenu {
	width: 350px;
}
/* reset transition animations */
#menu li li {
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
}
/* style of 2nd level unordered list */
#menu .submenu ul {
	background: #444;
	border-radius: 0 6px 6px 6px;
	padding: 10px 0;
	box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.3);
}
#menu .submenu ul li {
	display: block;
	float: left;
}
/* if 2nd level item has no children or has class flyout */
#menu .submenu ul li.no-sub, #menu .submenu ul li.flyout, #menu .submenu ul li.flyout li {
	float: none;
}
/* position 3rd level flyout */
#menu .submenu li.flyout ul {
	position: absolute;
	width: 240px;
	top: -9999em;
	left: -9999em;
}
#menu .submenu li.flyout:hover ul {
	position: absolute;
	left: 230px;
	top: 0;
}
/* style of second level links */
#menu li ul li a.menuitem,
#menu li ul li span.menuitem.sectionheader,
#menu li ul li a, 
#menu li ul li span.sectionheader {
	display: block;
	padding: 0 10px;
	line-height: 24px;
	text-shadow: none;
	transition: color .4s ease-in-out;
	-webkit-transition: color .4s ease-in-out;
	-moz-transition: color .4s ease-in-out;
	-o-transition: color .4s ease-in-out;
}
/* uppercase for mega dropdown parent items */
#menu li ul li a, #menu li ul li.sectionheader span {
	display: block;
}
/* remove uppercase if it's not mega dropdown */
#menu li ul li.no-sub a, #menu li ul li.flyout a, #menu li ul li.no-sub span.sectionheader, #menu li ul li.flyout span.sectionheader {
	text-transform: none;
}
/* link color of sublevels */
#menu li ul li a:hover, #menu li ul li a.current {
	color: #b11d09;
}
#menu .submenu li ul {
	position: static;
	display: block;
	box-shadow: none;
	border-radius: 0 0 6px 6px;
}
#menu .submenu li ul li {
	float: none;
}
/* width of mega dropdown columns, should fit inside #menu li.two_col:hover .submenu width  */
#menu .two_col .submenu ul li {
	width: 165px;
}
/* clearfix - clearing floats */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
/* html .clearfix {
 zoom: 1;
 }
 /* IE6 */
:first-child+ html .clearfix {
	zoom: 1;
}/* IE7 */


nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}

nav ul {
  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

nav ul li {
	float: left;
}
	
	nav ul li a {
		display: block; padding: 25px 40px;
		color: #757575; text-decoration: none;
	}

nav ul ul {
	background: #f09e2d; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid 
		border-bottom: 1px solid 
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #f09e2d;;
			}

#wrapper {margin: auto;
          margin-top: -60px;
          width: 960px;}
#top     {width: 960px;
          height: 65px;}
#logo    {float: left;
          position: absolute;
          z-index: 1;
          margin-top: -28px;}
#homeknop {float: right;
           padding: 10px;
           color: #9e3038;}           

#content  {width: 590px; 
           float: left;
           margin-left: 182px;
           color: #585759;}

#handtekening {margin-top: -10px;}

.clear    {clear: both;}

#pageback {width: 100%;
           height: 650px;
           background: url(https://karin-janssen.nl/uploads/images/pageback.jpg) repeat-x;}

#belmijterug {float: right;
              margin-right: 40px;}

#footer   {float: left;
           margin-left: 182px;
           margin-top: 20px;
           color: #9e3038;
           font-size: 11pt;
           padding-bottom: 50px;}
/* Stylesheet: KarinJanssenCSS Modified On 2014-08-14 17:09:22 */
