@import url(/include/css/editor.php);

/** =COLORS **
brown		#9c3a00
orange		#fda21e
lime		#b8c313
yellow		#fdca1f

gray		#666666
silver		#d6d6d6
*/




.fruit-nav .fruitblend a,
#extra .fruitblend h2 a { color:#9c3a00; }

.fruit-nav .concentrate a,
#extra .concentrate h2 a { color:#fda21e; }

.fruit-nav .smoothies a,
#extra .smoothies h2 a { color:#b8c313; }

.fruit-nav .vegetables a,
#extra .vegetables h2 a { color:#fdca1f; }



body {
	background: url('/image/drops.jpg') repeat-x left top;
	}


/** =LAYOUT **/

#container {
	width: 963px;
	margin: 0px auto 0px auto;
	}
#header,
#footer {
	padding: 0px 9px;
	}
#wrapper {
	background: url('/image/wrapper.png') repeat-y center top;
	}
#wrapper-end {
	min-height: 300px;
	padding: 0px 19px;
	overflow: hidden;
	background: url('/image/wrapper-end.jpg') no-repeat center bottom;
	}


/** LANGSWITCH 2 **/
#langswitch_cont {
	position: relative;
	z-index: 20;
	width: 963px;
	height: 24px;
	margin: 11px auto 0px auto;
}
	#langswitch {
		display: block;
		width: 240px;
		position: absolute;
		right: 4px;
		background: url(/image/pixel.gif);
	}
		#langswitch ul,
		#langswitch li {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		
		#langswitch ul.trigger {
			background: url(/image/lang-bg.png) no-repeat 3px 0px;
			height: 20px;
		}
		#langswitch ul.items {
			background: url(/image/lang-choice-bg.png) no-repeat left top;
			padding-top:4px;
			display: none;
		}
		
			#langswitch li.bottom {
				background: url(/image/lang-choice-bg.png) no-repeat scroll left bottom;
				margin-right: 10px;
				position: absolute;
				bottom: -18px;
				width: 240px;
				height: 18px;
				text-indent: -999em;
			}
			#langswitch li.div {
				height: 14px;
				background: url('/image/lang-line.gif') no-repeat left center;
				text-indent: -999em;
				margin: 0 auto;
				width: 220px;
			}

			#langswitch li span,
			#langswitch li a {
				color: #666666;
				text-decoration: none;
				cursor: pointer;
				}
			#langswitch li a:hover span {
				color: #FDA21E;
			}

			#langswitch li span {
				line-height: 20px;
				margin-left: 17px;
			}

			#langswitch .label {
				width: 110px;
				display: inline-block;
				}
			#langswitch .lang {
				text-transform: uppercase;
				}

#header {
	clear: both;
	height: 228px;
	/* position: relative; */
	background: url('/image/header.png') no-repeat center top;
	}
#hp #header {
	height: 328px;
	}

#logo {
	z-index: 50;
	margin-top: 13px;
	margin-top: -10px;
	margin-left: 2px;
	position: absolute;
	}

#navigation {
	clear: both;
	margin-left: 244px;
	/*
	height: 200px;
	padding: 28px 0px 0px 244px;
	background: url('/image/visual.jpg') no-repeat center bottom;
	}
#hp #navigation {
	height: 300px;
	background: url('/image/visual-home.jpg') no-repeat center bottom;
	*/
	}

#header {
	height: 215px;
	padding-top: 28px;
	}
#hp #header {
	height: 300px;
	}

#visuals {
	margin-top: 15px;
	margin-left: 10px;
	height: 144px;
	width: 925px;
	position: relative;
	}
	#photos {
		position: absolute;
		z-index: 1;
		overflow: hidden;
	}
	#payoff {
		width: 455px;
		height: 72px;
		background: url(/image/payoff.png) no-repeat top left;
		position: absolute;
		left: 458px;
		top: 24px;
		z-index: 2;
		text-indent: -999em;
	}

	#cornerNE,
	#cornerSE,
	#cornerSW  {
		width: 18px;
		height: 18px;
		background: red;
		position: absolute;
		right: 0;
		z-index: 2;
		background:url(/image/corners_white.png) no-repeat top right;
		
	}
		#cornerSE {
			right: 0;
			bottom: 0;
			background-position: bottom right;
		}
		#cornerSW  {
			left: 0;
			bottom: 0;
			background-position: bottom left;
		}
	/*VISUAL HOME*/
	#visuals.home {
		height: 244px;
	}
	#visuals.home #payoff {
		top: 74px;	
	}

	
	
	
/** =CONTENT - HOMEPAGE **/

#hp h1,
#home-intro {
	padding-left: 20px;
	}
#hp h1 {
	font-size: 125%;
	margin-top: 15px;
	margin-bottom: 10px;
	}
#home-intro {
	overflow: auto;
}

#home-intro div, #home-intro p.readmore {
	display: inline;
	margin-right: 20px;
	width: 430px;
	float: left;
}	

	#home-intro div.right {
		float: right;
	}
	#home-intro p.readmore {
		float: right;
		margin-top: .5em;	
	}
	

#extra {
	overflow: hidden;
	margin-top: 0px;
	padding-left: 15px;
	background: url('/image/extra.png') no-repeat center 50px;
	}
#extra h2 {
	height: 155px;
	line-height: 1;
	overflow: hidden;
	}
#extra h2 a {
	font-size: 12pt;
	padding-top: 105px;
	text-align: center;
	}
#extra a {
	display: block;
	text-decoration: none;
	}
#extra .body {
	height: 6.5em;
	overflow: hidden;
	margin-bottom: 1em;
	}
#fruit01 h2 a { background: url('/image/fruit-home-01.png') no-repeat center top; }
#fruit02 h2 a { background: url('/image/fruit-home-02.png') no-repeat center top; }
#fruit03 h2 a { background: url('/image/fruit-home-03.png') no-repeat center top; }
#fruit04 h2 a { background: url('/image/fruit-home-04.png') no-repeat center top; }


/** CONTENT - DEFAULT **/

#content {
	float: left;
	width: 595px;
	padding-top: 30px;
	padding-left: 50px;
	}

#pagetitle {
	margin-bottom: 20px;
	line-height:18pt;
	}
h1.parent {
	color: #fda21e;
	}
h2.sub {
	line-height: 1;
	}


#sidebar {
	float: right;
	width: 230px;
	}

.fruit-nav {
	margin: 0;
	padding: 0;
	width: 230px;
	list-style: none;
	}
.fruit-nav li {
	/*height: 90px;*/
	margin-top: 10px;
	background: url('/image/fruit-nav-bg.png') no-repeat center 10px;
	margin-bottom: 10px;
	}
	
.fruit-nav li div.img {
	background: yellow;
	display: block;
	overflow: auto;
}
.fruit-nav li div.img a {
	float: left;
	overflow: hidden;
	font-size: 12pt;
	line-height: 1;
	font-weight: bold;
	text-decoration: none;
	padding: 25px 0 0 15px;
	}
.fruit-nav li div.img a span {
	display: inline;
	float: right;
	height: 50px;
}
.fruit-nav #fruit01 { background: url('/image/fruit-nav-01.png') no-repeat right 5px; }
.fruit-nav #fruit01 a span { width: 110px; }
.fruit-nav #fruit02 { background: url('/image/fruit-nav-02.png') no-repeat right 0px; }
.fruit-nav #fruit02 a span { width: 110px; }
.fruit-nav #fruit03 { background: url('/image/fruit-nav-03.png') no-repeat right 0px; }
.fruit-nav #fruit03 a span { width: 90px; }
.fruit-nav #fruit04 { background: url('/image/fruit-nav-04.png') no-repeat right 5px; }
.fruit-nav #fruit04 a span { width: 105px; }

#moreinfo {
	margin-top: 30px;
	}
#moreinfo .more-body {
	margin-bottom: 20px;
	border-top: 1px solid #d6d6d6;
	}
#moreinfo h2 {
	color: #b8c313;
	line-height: 1;
	margin-top: 10px;
	}
#moreinfo ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	}
#moreinfo li {
	margin: 0px;
	line-height: 1.4;
	padding: 0px 0px 0px 8px;
	background: url('/image/arrow-list.gif') no-repeat left 5px;
	}
#moreinfo li a {
	text-decoration: none;
	}
	#moreinfo li a strong {
		font-weight: normal;
	}

#moreinfonav li.active {
	display: none;
}

/** =FOOTER **/

#footer {
	height: 30px;
	overflow: hidden;
	margin-top: 60px;
	background: #ffffff url('/image/logo-footer.gif') no-repeat 19px center;
	}
#footer p {
	}
#footer ul {
	float: right;
	width: auto;
	list-style: none;
	margin-right: 9px;
	}
#footer li {
	float: left;
	width: auto;
	margin-left: 5px;
	padding-left: 5px;
	border-left: 1px solid #d6d6d6;
	}
#footer li.first {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
	}
#footer a {
	color: #444444;
	text-decoration: none;
	}


/** =CLASSES **/

.readmore {
	overflow: hidden;
	}
.readmore a {
	float: right;
	width: 140px;
	height: 48px;
	color: #ffffff;
	display: block;
	text-align: center;
	line-height: 24px;
	font-weight: 600;
	text-decoration: none;
	background: url('/image/readmore.gif') no-repeat;
	letter-spacing:-0.5px;
	}

.coll .readmore a {
	width: 102px;
	background: url('/image/learn-more.gif') no-repeat;
	}

.coll {
	float: left;
	width: 214px;
	margin: 0px 5px;
	}
	
	
/* Geeft aan welke statische teksten nog vertaald moeten worden */
.vertalen {
	border:1px solid #FF0;
	background-color:#F00;
	color:#FF0;
}