@charset "utf-8";

/*
/////////////////////////////////////

copyright		blanqo internet en communicatie
date			februari 2010
author 			Niels Westerhof

/////////////////////////////////////

media			screen
filename		layout.css
    	
/////////////////////////////////////
*/

html, body { width: auto; height: 100%; padding: 0; font: 90%/1.3em Arial, Helvetica, sans-serif; color: #444; background: #fff; margin: 0 auto; }

/*////////// globals //////////*/
	.invis { position: absolute; left: -1000em; top: -1000em; display: none !important; visibilty: hidden !important; }
	img { border: 0; vertical-align: bottom; }
	a:hover img { border: none; text-decoration: none; }
	
	a:link { text-decoration: none; }
	a:hover, a:visited:hover { text-decoration: underline; }
	a:visited { text-decoration: none; }
	a:active { text-decoration: none; }

/*////////// centering in browser //////////*/
div#center { visibility: hidden; width: 100%; height: 50%; margin-top: -337px; float: left; }

/*////////// site //////////*/
div.site { width: 1000px; height: 670px; clear: both; margin: 0px auto; background: #35449C; }

div.main { 
	width: 940px; 
	height: 530px; 
	padding: 25px 30px;
	background: #35449C url(http://www.zaai-ster.nl/uploads/image/bg/vandaag.jpg) 0 0 no-repeat; 
}
div.top-menu-bar { 
	width: 975px; 
	height: 40px; 
	padding: 0 20px 0 5px; 
	font-size: 12px; 
	text-transform: lowercase;
}
div.top-menu-bar div.top-menu ul { 
	float: left;
}
div.top-menu-bar div.top-menu-right ul,
div.bottom-menu ul { 
	float: right; 
}

/*////////// top menu //////////*/
div.top-menu>ul {
	height: 40px;
}
div.top-menu-bar ul li { 
	float: left; 
	display: inline-block; 
	line-height: 20px; 
	color: #fff; 
	margin: 0 0 0 15px;
	position: relative;
	padding: 10px 0;
}
div.top-menu-bar ul>li>a { 
	height: 20px; 
	padding: 0 7px; 
	color: #fff; 
	display: inline-block; 
	float: left; 
	line-height: 20px; 
}
div.top-menu-bar ul li a:hover { 
	color: #000; 
	text-decoration: none; 
}
div.top-menu-bar ul li ul {
	/* positioning submenu */
	position: absolute;
	top: 30px;
	left: 0;
	padding: 13px 0 0 0;
	/* positioning submenu */
	cursor: pointer;
	float: left;
	width: 125px;
	display: none;
	z-index: 4;
}
div.top-menu-bar ul li:hover ul {
	z-index: 200;	
}
div.top-menu-bar ul li:hover ul,
div.top-menu-bar ul li.active ul {
	display: block;
}
div.top-menu-bar ul li ul li {
	white-space: nowrap;
	display: block;
	margin: 0 0 04px 0;
	padding: 0;
	clear: left;
	z-index: 100;
}
div.top-menu-bar ul li ul li a,
div.top-menu-bar ul li ul li.active a {
	display: block;
	background: #fff; 
	color: #000; 
	text-decoration: none !important;
	text-transform: uppercase;
	font-size: 11px;
}
div.top-menu-bar ul li ul li a:hover,
div.top-menu-bar ul li ul li.active a {
	background: #000;
	color: #fff;
}
div.top-menu-bar ul li ul li.active a:hover {
	
}
div.top-menu-bar ul>li.active a { 
	text-decoration: underline; 
}
div.top-menu-bar ul>li.active a:hover { 
	background: #000;
	color: #fff;
	text-decoration: none; 
}

/*////////// menu on home //////////*/
.home_container {
	width: 900px;
	height: 295px;
	padding: 235px 20px 0 20px;
	float: left;
}
ul.home_menu  {
	width: 575px;
	height: 200px;
	float: left;
	display: inline-block;
}
ul.home_menu li {
	display:inline-block;
	float: left;
	margin: 0 5px 0 0;
}
ul.home_menu li a {
	width: 175px;
	height: 200px;
	background: url(../images/bg_transparent.png) 0 0 repeat;
	color: #000;
	display: block;
	float: left;
	text-decoration: none;
}
ul.home_menu li a span {
	width: 175px;
	cursor: pointer;
	display: block;
	font-size: 155%;
	margin: 25px 0 0;
	padding: 8px 0;
	text-align: center;
}
ul.home_menu li.main_1 a span {
	background: #92d7e7;
}
ul.home_menu li.main_2 a span {
	background: #85C440;
}
ul.home_menu li.main_3 a span {
	background: #fec022;
}
ul.home_menu li a:hover span {
	background: #fff;
}

/*////////// breadcrumb trail //////////*/
div.breadcrumb_trail {
	padding: 195px 0 10px 20px;
	float: left;
}
div.breadcrumb_trail_overview {
	padding: 15px 0 10px 20px;
	float: left;
}
.search_products {
	width: 290px;
	height: 30px;
	background: #fff;
	float: left;
	display: inline-block;
	text-align: right;
	padding-right: 5px;
	padding-left: 10px;
	line-height: 26px;
}
.search_products label {
	line-height: 29px;
}
.search_products input.search_input {
	border: 0;
	width: 150px;
	padding: 4px 8px;
	border-bottom: 1px solid #35449C;
}
ul.breadcrumb { 
	width: 555px;
	height: 30px;
	background: #fff;
	padding: 0 10px;
	float: left;
	display: inline-block;
}
div.breadcrumb_trail_overview ul.breadcrumb {
	/*width: 880px;*/
	margin: 0 20px 0 0;
}
ul.breadcrumb li { 
	display: inline; 
	font-size: 12px;
	line-height: 29px;
	list-style: none; 
	background: none; 
	padding: 0 0 0 2px; 
}
ul.breadcrumb li a { 
	color: #35449C; 
	padding: 0 13px 0 0; 
	background: url(../images/breadcrumb-item.png) 100% 4px no-repeat; 
}
ul.breadcrumb li.home { 
	background: transparent; 
	padding: 0; 
}
ul.breadcrumb li a:hover {
	text-decoration: underline; 
	color: #35449C; 
}

/*////////// product overview //////////*/
div.product-overview {
	float: left;
	padding: 10px 20px 10px 20px;
}
div.product-overview ul {
	padding: 10px 0;
	width: 250px;
	height: 430px;
	display: block;
	float: left;
}
div.searched_for {
	padding: 10px;
	width: 230px;
	height: 430px;
	display: inline-block;
	float: left;
	background: #6cc6da;
	margin: 0 20px 0 0;
}
div.product-overview ul li a {
	font-size: 12px;
	width: 200px;
	height: auto;
	line-height: 20px;
	display: block;
	float: left;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0 0 3px 0;
	padding: 0 35px 0 15px;
}
div.product-overview ul li a:hover {
	text-decoration: none;
}
/* category */
ul.category {
	background: #35449C;
	margin: 0 20px 0 0;
}
ul.category li a {
	color: #000;
}
ul.category li a:hover,
ul.category li.active a {
	color: #fff;
	background: #6cc6da;
}
ul.category li.active a {
	padding-right: 55px;
	position: relative;
	z-index: 2;
}

/* subcategory */
ul.sub_category {
	background: #6cc6da;
	margin: 0 20px 0 0;
}
ul.sub_category li a {
	color: #fff;
}
ul.sub_category li a:hover,
ul.sub_category li.active a {
	color: #000;
	background: #35449C;
}
ul.sub_category li.active a {
	padding-right: 55px;
	position: relative;
	z-index: 2;
}
a.back_products {
	font-size: 12px;
	color: #000;
	background: #35449C;
	text-decoration: none;
	display: block;
	margin: 10px 0 0 0;
	padding: 3px 10px;
	text-transform: uppercase;
}

/* products */
div.products {
	width: 610px;
	height: 430px;
	padding: 10px;
	display: block;
	float: left;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	background: #35449C;
}
div.product {
	width: 585px; 
	min-height: 100px; 
	display: block; 
	background: #fff; 
	margin: 0 0 10px 0;
	padding: 5px;
	position: relative;
	float: left;
}
div.product_photo {
	width: 110px;
	text-align: center;
	float: left;
	display: inline-block;
	position: relative;
}
img.pnn_over {
	position: absolute;
	z-index: 2;
}
div.product_recap {
	width: 475px;
	float: left;
	display: inline-block;
}
.product_topbar {
	width: 475px;
	display: block;
	font-size: 12px;
}
.product_topbar span {
	display: inline-block;
	float: left;
}
.product_title {
	width: 255px;
	font-weight: normal;
	text-transform: uppercase;
}
.product_brand {
	width: 110px;
	font-size: 11px;
}
.product_quality {
	width: 110px;
	font-size: 11px;
	text-align: right;
	text-transform: uppercase;
}
.product_unit {
	width: 475px;
	float: left;
	display: block;
	padding: 0 0 10px 0;
	font-size: 11px;
}
.product_description {
	width: 475px;
	float: left;
	display: block;
	font-size: 11px;
}

/*////////// bottom menu //////////*/
div.content-container {
	width: 900px; 
	height: 295px;
	padding: 0 20px 0 20px;
}
div.content-main {
	width: 575px;
	height: 180px;
	padding: 10px 0;
	float: left;
	background: #fff;
	display: block;
}
div.content {
	width: 555px;
	height: 180px;
	padding: 0 10px;
	background: #fff;
	overflow: auto;
}
div.content h1 {
	color: #35449C;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 15px;
	font-weight: strong;
	margin: 0 0 5px 0;
}
div.content h2 {
	color: #35449C;
	font-size: 14px;
	font-weight: normal;
	margin: 0 0 4px 0;
}
div.content h3 {
	letter-spacing: 1px;
	font-size: 12px;
	font-weight: normal;
	margin: 0 0 5px 0;
}
div.content p {
	font-size: 12px;
	margin: 0 0 12px 0;
}
div.content p a,
div.content ul a,
div.content ol a {
	color: #35449C;
	border-bottom: 1px dotted #35449C;
	padding: 0 2px;
}
div.content p a:hover,
div.content ul a:hover,
div.content ol a:hover {
	text-decoration: none;
	background: #35449C;
	color: #fff;
	border-style: solid;
}

div.pic-container {
	width: 175px;
	height: 175px;
	background: #fff;
	float: left;
	margin: 0 0 0 150px;
	text-align: center;
}
div.pic-container {
	padding: 25px 0 0 0;
}

/*////////// bottom menu //////////*/
div.bottom-menu-bar ul li { float: left; display: inline-block; line-height: 30px; color: #fff; margin: 0 25px 0 0; }
div.bottom-menu-bar ul li a { height: 30px; padding: 0 7px; color: #fff; display: inline-block; float: left; line-height: 30px; }
div.bottom-menu-bar ul li a:hover { color: #000; text-decoration: none; }
div.bottom-menu-bar ul li.active a { text-decoration: underline; }
div.bottom-menu ul li { margin: 0 0 0 15px; }

div.bottom-menu-bar { width: 950px; height: 30px; padding: 0 25px; }
div.footer { width: 990px; height: 20px; padding: 0 5px; background: #fff; color: #999; font-size: 11px; }
	div.footer ul { float: left; margin: 0 20px 0 0; }
		div.footer ul li { float: left; display: inline-block; line-height: 20px; }
			div.footer ul li { margin: 0 5px 0 0; padding: 0 0 0 1px; }
				div.footer ul li a { color: #888; }
				div.footer ul li a:hover { color: #35449C; }
				div.footer ul li.active a { color: #444; }
			
	div.footer ul.copyright { float: right; margin: 0; }
	div.footer ul.copyright li { margin: 0; padding: 0; }
div.footer ul.copyright li a { 
	color: #35449C; 
}
div.footer ul.copyright li a:hover { 
	color: #02b4ac; 
}