/* By www.meercommunicatie.nl */
/* This stylesheet sets advanced styling and layout (positioning, floating etcetera) for high resolution screens. */
/* It will be used by CSS-capable user agents that understand the mediatype "screen". */

/* some useful hacks:

Show only to IE/MAC:
html>body element {}

Show only to IE/WIN/MAC
* html element {}

Show to modern browsers like Opera, Safari, Mozilla and Firefox, but also IE/MAC
html>body element {}
}

When an element visually disappears in IE/WIN, try to apply position: relative to the element, or apply a width or height to the element.
When unwanted white space is visible in IE/WIN, try to set a height of 1px for that element using a hack that only feeds to IE/WIN.

*/

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	background-color: #D3C57D;
}

/* for IE/WIN; when viewed in 800*600, the visual simply disappears */

* html {
	overflow-x: hidden;
}

/* z-indexes */

#visual_effect {
	z-index: 10;
}

#content,
#logo_cando,
#menu {
	z-index: 100;
}

#logo,
#address,
#lang {
	z-index: 1000;
}

/* Hide elements that are not needed on high resolution screens: */

.skip {
	display: none;
}

/* #wrapper */

#wrapper {
	position: relative;
	margin: 0 auto;
	background: #F4F0DE url(../img/branding/visual.jpg) no-repeat top right;
	width: 995px;
	min-height: 100%;
}

/* for IE/WIN */
* html #wrapper {
	height: 100%;
}

html#pg_adres_route #wrapper {
	background-image: url(../img/branding/visual_wl.jpg);
}

html#pg_geschiedenis #wrapper {
	background-image: url(../img/branding/visual_rad.jpg);
}

html#pg_deli_universal #wrapper {
	background-image: url(../img/branding/visual_ml.jpg);
}

html#pg_algemene_voorwaarden #wrapper {
	background-image: url(../img/branding/visual_roma.jpg);
}

/* for browsers with better CSS support that might read the preceding rule
html>body #wrapper {
	height: auto;
	height: 100%;
}
*/

/* #logo */

#logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 749px;
	height: 80px;
	margin-right: 246px;
	background-color: #F4F0DE;
}

#logo img {
	margin: 23px 0 0 21px;
}

/* #lang */

#lang {
	position: absolute;
	top: 88px;
	left: 704px;
}

#lang p {
	display: none;
}

#lang ul,
#lang ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#lang ul li {
	float: left;
	display: block;
	margin-right: 10px;
}

#lang ul li a {
	display: block;
	border: 1px solid #F4F0DE;
}

#lang ul li a:hover {
	border: 1px solid white;
}

#lang ul li#lang_nl a {
	background: url(../img/branding/lang_nl_hoveractive.png) no-repeat 1px 1px;
}

#lang ul li#lang_en a {
	background: url(../img/branding/lang_en_hoveractive.png) no-repeat 1px 1px;
}

#lang ul li a:hover img {
	visibility: hidden;
}

/* #content */

#content {
	position: relative;
	height: 100%;
	margin-right: 246px;
	background-color: white;
}

#content #content_wrapper {
 	padding: 130px 50px 64px 50px;
}

h1,
h2 {
	margin-right: -25px;
	margin-left: -25px;
}

/* #menu */

#menu {
	position: absolute;
	top: 80px;
	left: 0;
	width: 100%;
}

#menu h2 {
	display: none;
}

#menu ul,
#menu ul li {
	background-color: #4F3A00;
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu ul {
	background-color: #4F3A00;
	margin-right: 246px;
	padding-left: 18px;
}

/* clear float without source markup */
#menu ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* clear float for IE/WIN */
* html #menu ul {
	height: 1px;
}

/* undo this for IE/MAC */
html>body #menu ul {
	height: auto;
}


#menu ul li {
	float: left;
}

#menu ul li a {
	font-weight: bold;
	line-height: 22px;
	padding-top: 4px;
	text-decoration: none;
	display: block;
	margin: 0 8px;
	color: white;
}

#menu ul li a:hover {
	border-bottom: 5px solid #D3C57D;
}

/* active menu-items */

#pg_activiteiten #menu #mi_activiteiten a,
#pg_adres_route #menu #mi_adres_route a,
#pg_geschiedenis #menu #mi_geschiedenis a,
#pg_deli_universal #menu #mi_deli_universal a,
#pg_algemene_voorwaarden #menu #mi_algemene_voorwaarden a {
	border-bottom: 5px solid #D3C57D;
}


/* #address */

#address {
	font-size: 85%;
	line-height: 1.1;
	position: absolute;
	top: 21px;
	right: 270px;
}

#address p {
	float: left;
	margin-left: 25px;
}

#address,
#address a {
	color: #4F3A00;
}

/* #logo_cando */

#logo_cando {
	position: absolute;
	bottom: 0;
	right: 272px;
}

#logo_cando img {
	float: left;
}

/* #visual_effect */
/* this element is used to achieve the effect of a white background for the content */
/* it was needed because height: 100% does not work in most modern browsers */
html>body #visual_effect {
	height: 100%;
	width: 749px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: white;
}