/**
 * Layout.css - Navigation styles
 * 
 * @author  Webstores <info at webstores dot nl>
 *          Copyright (c) Webstores internet totaalbureau <http://www.webstores.nl/>
 * 
 * Colors
 * - Green:  #7AB51D
 * - Purple: #4D125B
 * - Lilla:  #B68FBF
 */

/* Navigation */

#navigation {
	float: right;
	margin: 5px 0 0;
	padding: 0;
	height: 35px;
	list-style: none;
}

#navigation li {
	position: relative;
	float: left;
	margin-left: 1px;
}

#navigation li:hover,
#navigation li.sfhover,
#navigation li.selected {
	background-position: 100% 100%;
}

#navigation li:hover,
#navigation li.sfhover {
	z-index: 10;
}

#navigation li a {
	display: block !important;
	display: inline-block;
	padding-left: 15px;
	height: 35px;
	background: url(../img/navigation-sprite.gif) no-repeat 0 0;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	line-height: 35px;
}

#navigation li a span {
	display: block;
	padding-right: 15px;
	background: url(../img/navigation-sprite.gif) no-repeat 100% 0;
	color: #B68FBF;
}

#navigation li:hover a,
#navigation li.sfhover a,
#navigation li.selected a {
	background-position: 0 100%;
}

#navigation li:hover a span,
#navigation li.sfhover a span,
#navigation li.selected a span {
	background-position: 100% 100%;
	color: white;
}


/* Sub level navigation */

#navigation .subnav {
	position: absolute;
	display: none;
	margin: 0;
	padding: 0;
	top: 30px;
	right: -1px !important;
	right: -2px; /* IE6 positioning bug */
	width: 240px;
	background-color: #300138;
	border: 1px solid white;
	list-style: none;
	z-index: -1;
}

#navigation li:hover .subnav,
#navigation li.sfhover .subnav {
	display: block;
}

#navigation .subnav li {
	display: block !important;
	display: inline;
	float: none;
	margin: 0;
}

#navigation .subnav li:hover a,
#navigation .subnav li.sfhover a {
	background-color: #4D125B;
	color: white;
}

#navigation .subnav a,
#navigation .subnav li .subnav a {
	position: relative;
	display: block;
	background: none;
	color: #B68FBF;
}

#navigation .subnav a:hover,
#navigation .subnav li .subnav a:hover {
	background-color: #4D125B;
	color: white;
}


/* Deeper level navigation */

#navigation .subnav li .subnav {
	display: none;
	top: -1px;
	right: 0;
	left: -242px;
}

#navigation .subnav li:hover .subnav,
#navigation .subnav li.sfhover .subnav {
	display: block;
}


/* Page navigation */

#menu {
	margin: 10px 0 0;
	padding: 0;
	background: url(../img/menu-bg.gif) no-repeat bottom left;
	list-style: none;
}

#menu li {
	border-top: 1px solid white;
}

#menu li.first {
	border: 0;
}

#menu li a {
	display: block;
	padding: 6px 30px 6px 10px;
	width: 180px;
	font-weight: bold;
	text-decoration: none;
}

#menu li.first a {
	background: url(../img/menu-bg.gif) no-repeat;
}

#menu li.selected a {
	background: white url(../img/arrow-down-purple.gif) no-repeat 95% 50% !important;
}

#menu li a:hover,
#menu li.first a:hover {
	background: white url(../img/arrow-right-purple.gif) no-repeat 95% 50%;
	color: #4D125B;
}


/* Page sub level navigation */

#menu .subnav {
	margin: 0;
	padding: 0 0 5px;
	background: white;
	list-style: none;
}

#menu .subnav li {
	border: 0;
}

#menu .subnav li a {
	padding: 0 15px;
	width: 190px;
	background: none !important;
	line-height: 25px;
	color: #B68FBF;
}

#menu .subnav li a:hover,
#menu .subnav li.selected a {
	color: #4D125B;
}


/* Service navigation */

#service-nav {
	float: left;
	margin: 0;
	padding: 20px 0 10px;
	height: 20px;
	list-style: none;
	overflow: hidden;
}

#service-nav li {
	float: left;
	margin-right: 10px;
}

#service-nav li a {
	float: left;
	text-decoration: none;
	color: #91549F;
}

#service-nav li a:hover {
	color: white;
}