html { width: 100%; height: 100%; overflow-y: scroll; }

body {  text-align: center; overflow: hidden; background: url(../assets/new/bg/full.gif) top center; }

a { outline: none; }

/* Begin Hurray hacks! */	
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix { display: inline-block; }
/* End Hurray hacks! */	

div.contentBlockWrapper,
.siteWidth { width: 950px; margin: auto; text-align: left; display: block; position: relative; }

div.contentBlockWrapper { height: 685px; }

#topLayer { z-index: 2; height: 60px; position: relative; top: 0; left: 0; width: 100%; }

#contentLayer { position: relative; overflow: hidden; margin: auto; left: 0; width: 100%; height: 685px; text-align: center; margin-bottom: 172px; z-index: 1; }

#logo { position: absolute; left: -23px; top: -26px; z-index: 2; }

/* When we have JS, we will animate the logo with a different starting position */
body.js #logo { top: -10px; }

#menu { float: right; top: 15px; position: relative; list-style: none; display: block; z-index: 1; }
	#menu li { float: left; }
	#menu a { outline: none; float: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: lighter; text-decoration: none; line-height: 33px; height: 30px; margin: 0 7px 0 11px; position: relative; color: white; background: url(../assets/new/menu/item.png) repeat-x; }
		#menu a .helper1,
		#menu a .helper2 { z-index: 2; width: 8px; height: 30px; top: 0; display: block; position: absolute; }
		#menu a.activeItem,
		#menu a:hover { background: url(../assets/new/menu/item-hover.png); }
		#menu a .helper2 { right: -8px; background: url(../assets/new/menu/item-right.png) no-repeat; }
		#menu a .helper1 { left: -8px; background: url(../assets/new/menu/item-left.png) no-repeat; }
		#menu a.activeItem .helper1,
		#menu a:hover .helper1 { background: url(../assets/new/menu/item-left-hover.png) no-repeat; }
		#menu a.activeItem .helper2,
		#menu a:hover .helper2 { background: url(../assets/new/menu/item-right-hover.png) no-repeat; }

div.topSfeer { position: relative; }
	div.topSfeerInner { background-color: #f1f2e9; padding: 8px 18px; position: relative; height: 208px; overflow: hidden; }
		div.topSfeerInner img { float: left; width: 457px; height: 208px; }
		div.topSfeerInner table { float: left; width: 457px; height: 208px; background-color: #e2007a; }

div.topText { color: white; padding: 0 25px; text-align: left; }

div.topText h1,
div.topText h2,
div.topText h3 { color: white; }

h2.subTitle { font-size: 1.2em; }

.bl, .br, .tr, .tl { position: absolute; display: block; height: 10px; width: 9px; z-index: 2; }

.bottom,
.top { height: 10px; margin: 0 9px; line-height: 10px; background-color: #f1f2e9; z-index: 1; display: block; }

span.bl { left: 0; bottom: 0; background: url(../assets/new/corners/bl.png) no-repeat bottom left; }
span.br { right: 0; bottom: 0; background: url(../assets/new/corners/br.png) no-repeat bottom right; }
span.tl { left: 0; top: 0; background: url(../assets/new/corners/tl.png) no-repeat top left; }
span.tr { right: 0; top: 0; background: url(../assets/new/corners/tr.png) no-repeat top right; }

div.contentWrapper { position: relative; z-index: 6; overflow: hidden; }
div.contentBlock { width: 100%; overflow: visible; position: relative; margin-top: 14px; }

div.subMenu,
div.contentWrapper,
div#lightboxContent { background: #f1f2e9; border: 2px solid #c3c3c1; padding: 25px; padding-bottom:35px;  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

div.contentScrollWrapper { overflow-y: auto; overflow-x: hidden; height: 363px; }
div.content { text-align: left; }

body.js div.contentHelper2 {
	overflow: hidden;
}

.ecards a {display: block; float: left; margin: 20px; border: 1px solid white; line-height: 0px;}
.ecards a:hover { border: 1px solid #E2007A; }

div.subMenu { float:left; width: 140px; margin-right: 29px; z-index: 2; position: relative; }
	div.subMenu li { list-style: none; }
		div.subMenu a { background: transparent url(../assets/new/menu-bullet.gif) no-repeat left 3px; padding-left: 22px; display: block; line-height: 15px; padding-bottom: 8px; padding-top: 2px; color: #2d2d2d; text-decoration: none; text-align: left; }
		div.subMenu a:hover,
		div.subMenu a.activeItem { color: #e2007a; background-image: url(../assets/new/menu-bullet-hover.gif); }

#footerLayer { position: fixed; z-index: 6; width: 100%; bottom: 0; left: 0; background: #303030; }
	#footerLayer a { outline: none; }
	
	#footerHeader { height: 57px; background:url(../assets/new/bg/footer-header.gif) repeat-x; position: relative; }
		#toggleFooter { line-height: 28px; position: absolute; left: 490px; top: 12px; padding-left: 30px; color: #8d8d8d; font-size: 0.85em; cursor: pointer; display: none; }
		#toggleFooter:hover { color: white; }
			#toggleFooter span { position: absolute; left: 0; top: 0; background: no-repeat top left; height: 28px; width: 23px; }
			#toggleFooter span.open { background-image: url(../assets/new/arrow-down.png); }
			#toggleFooter span.closed { background-image: url(../assets/new/arrow-up.png); }
			
		#maildoorLink { position: relative; float: left; padding-left: 48px; background: url(../assets/new/icons/maildoor.png) left no-repeat; line-height: 34px; height: 34px; color: white; text-decoration: none; top: 8px; }
		#maildoorLink:hover { color: #E2007A; }
	
	#logos { overflow: hidden; }
		#logos a { float: left; color: white; text-decoration: none; line-height: 115px; height: 115px; margin-right: 55px; }
		#logos a:hover { color: #E2007A; }
	
		#hateLink { padding-left: 160px; background: url(../assets/new/ihatelogo.gif) left no-repeat; }
		#hateLink:hover { background-image: url(../assets/new/ihatelogo-over.gif); }
		#digitalboardroomLink { background: url(../assets/new/digitalboardroom.gif) no-repeat left; padding-left: 55px; }
		#digitalboardroomLink:hover { background-image: url(../assets/new/digitalboardroom-over.gif); }
		#hpLink { background: url(../assets/new/hp.gif) no-repeat left; padding-left: 55px; }
		#hpLink:hover { background-image: url(../assets/new/hp-over.gif); }
	
	#bookletLink { bottom: 0; position: absolute; right: 60px; line-height: 0; }
		#vraaghemaan { position: absolute; left: -120px; top: -65px; display: none; }
		#bookletLink:hover #vraaghemaan { display: block; }
		
.viewCard,
.viewMessage { width: 439px; overfolow: hidden; float: left; }
.viewCard { text-align:center; }
.viewCard img { border: 1px solid #E2007A; }

blockquote { background-color:white; border:1px solid #E2007A; margin:5px 10px; padding:5px 10px; }

a.followOnTwitter { position: absolute; left: 348px; }
a.followOnLinkedin { position: absolute; left: 227px; }
	a.followOnLinkedin img { margin-top: 10px; }
	
.popupmessageInfo {
	display: none;
	float: right;
	margin-top: 5px;
}

#lightbox {
	position: absolute;
	display: none;
	left: 0;
	top: 0;
	width: 100%;
	text-align: center;
}

#lightboxInner {
	position: relative;
	text-align: left;
	width: 700px;
	margin: auto;
}

#lightboxContent {
	background-color: #f1f2e9;
	padding: 5px 20px;
	border-left: 2px solid #e2007a;
	border-right: 2px solid #e2007a;
}

#lightboxCloseLink {
	position: absolute;
	right: -16px;
	cursor: pointer;
	display: block;
	top: -16px;
	z-index: 1000;
	width: 38px;
	height: 38px;
}

form {
	font-size: 14px;
}

form#bookletForm {
	padding: 1px 5px;
}

form div.leftSide {
	float: left;
	width: 300px;
}

form div.rightSide {
	float: right;
}

form div.rightSide textarea {
	clear:both;
	float: left;
	display:block;
	height:160px;
	width: 250px;
	overflow:auto;
	padding-left:4px;
}

label {
	display:block;
	font-size: 14px;
	float:left;
	height:20px;
	line-height:19px;
	margin-bottom:5px;
	vertical-align:middle;
}

label.labelWide {
	width:120px;
	clear:left;
}

label.labelSmall {
	padding-right: 8px;
}

textarea,
input.text {
	border-top: 1px solid #9a9a9a;
	border-left: 1px solid #9a9a9a;
	border-bottom: 1px solid #eeeeee;
	border-right: 1px solid #eeeeee;
}

input.text {
	float:left;
	font-size:0.85em;
	height:15px;
	line-height:15px;
	margin-bottom:5px;
	margin-right:7px;
	padding: 1px 4px;
	vertical-align:middle;
}

.rightSide input.text {
	margin-right: 0;
}

input.small {
	width:40px;
}

input.wide {
	width:150px;
}

input.checkbox {
	float: left;
	margin: 3px 5px 0 0;
}

#merchandiseForm ul {
	display: block;
	width: 250px;
	position: relative;
	clear: both;
}

#merchandiseForm li {
	display: block;
	width: 100%;
	height: 25px;
}

#mailpageForm .labelWide {
	width: 60px;
}

#mailpageForm textarea {
	width: 100%;
	height: 125px;
	overflow: auto;
}

#mailpageForm div.persoonlijkBericht {
	padding: 10px 0;
	clear: both;
}

#loginForm label {
	float: left;
	clear: left;
	width: 110px;
}

#loginForm .submit {
	float: left;
	clear: left;
}

.textLoginTop { display: block;	margin-bottom: 10px; }

.textLoginBottom { display: none; }

.textLoginBottom a { display: block; }

div.ajaxLoader { background: #232323 url(../assets/images/ajax-loader.gif) no-repeat center center; display: none; height: 50px; width: 50px; position: fixed; left: 20px; bottom: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; z-index: 1000; }

pre { background: #fff; text-align:left; }

.share_links { line-height: 20px; position: absolute; right: 25px; margin-top:6px; width: 550px; right: 25px;  }
a.share_article { position: absolute; text-decoration: none; margin-top: 5px; }
.share_links .pre_text { margin-right: 5px; float: right; }
.share_links .addthis_toolbox { float: right; display: inline; }
.share_links .addthis_button_expanded span { color: #e2007a; background-image: url(../assets/new/menu-bullet-hover.gif); }