/******************************** WEBFONTS ******************************************/

@font-face {
	font-family: 'SourceSansProBlack';
	src: url('/fonts/SourceSansPro-Black-webfont.eot');
	src: url('/fonts/SourceSansPro-Black-webfont.eot?#iefix') format('embedded-opentype'),
	url('/fonts/SourceSansPro-Black-webfont.woff') format('woff'),
	url('/fonts/SourceSansPro-Black-webfont.ttf') format('truetype'),
	url('/fonts/SourceSansPro-Black-webfont.svg#SourceSansProBlack') format('svg');
	font-weight: normal;
	font-style: normal;

}
h4, .pageIntro h1, .pageIntro h2, .fancyButton span, #letterVarOptions a.main {
	font-family: 'SourceSansProBlack';
}

/******************************** GENERAL STYLES ************************************/
.printOnly {
	display: none !important;
}
body {
	background: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 0px 0px 30px 0px;
	margin: 0px;	
}
body#beheer {
	background: #e5e5e5 url(/css/gfx2011/background_body.png) repeat-x left top;
}
.cleaner {
	clear: both;
	width: auto !important;
}
.left {
	float: left;	
}
.right {
	float: right;	
}

div.warning {
	color: #FFFFFF;
	background: #F90;
	padding: 15px;
	font-weight: bold;
}
div.error {
	color: #FFFFFF;
	background: #CC0000;
	padding: 15px;	
	font-weight: bold;
}
.errormessage,
.message {
	font-size: 20px;
	font-family: georgia;
	margin: 20px 0px 30px 0px;
	padding: 20px 20px 20px 70px;
	min-height: 30px;
	color: #333;
	text-shadow: 0px -1px 0px #a1e3f7;
}
.errormessage a,
.message a {
	color: #333;	
}
.errormessage ul,
.message ul {
	padding-left: 20px;
}

.message {
	color: #333;
	background: #FFFFCC url(/css/gfx2011/warning.png) no-repeat 20px 20px;
	border: 1px solid #F3AD1B;
}
.errormessage {
	color: #333;
	background: #FFE6E6 url(/css/gfx2011/error.png) no-repeat 20px 20px;
	border: 1px solid #CC0000;
}
.no-display {
	display: none;
}

/****************** WARNINGS AND ERRORS **********************/
.message, .warning,
p.error, div.error,
div.warning {
	padding: 20px 20px 20px 60px;
	margin-bottom: 10px;
	border: 1px solid #CC0000;
	font-family: georgia;
	font-size: 15px;
	color: #000000;
	overflow: hidden;
}
.warning h3, .error h3,
.warning a,
.error a {
	color: #CC0000;	
}
.warning, .message {
	background: #FFC url(/css/gfx2011/warning.png) no-repeat 20px 20px;
}
.error {
	background: #FFE6E6 url(/css/gfx2011/warning.png) no-repeat 20px 20px;	
}
li.warning, li.message {
	border-left: 0;
	border-right: 0;
	background: #FFC url(/css/gfx2011/warning.png) no-repeat 20px 20px !important;	
	padding: 20px 20px 20px 60px !important;
}

.error::selection,
.warning::selection		 { color: #FFFFFF; background: #CC0000; }
.error::-moz-selection,
.warning::-moz-selection	{ color: #FFFFFF; background: #CC0000; }
/******************************** CONTAINERS ************************************/
#siteContainer {
	margin: 0 auto;
	width: 90%;
	max-width: 1600px;
	background: #FFFFFF;	
	-webkit-border-radius: 0px 0px 15px 15px;
	-mox-border-radius: 0px 0px 15px 15px;
	border-radius: 0px 0px 15px 15px;
	box-shadow: 0px 0px 5px #AAA;
	margin-top: 38px;	
}
#header {
	background: #eaeaea;
	position: relative;
	padding-top: 100px;
}
#content {
	padding: 20px;	
	background: url(/css/gfx2011/background_content.png) repeat-x left top;
	position: relative;
}
#pagecontent {
	clear: both;
	position: relative;	
}
/******************************** LOGIN SCREEN ***********************************/
#loginContainer {
	width: 467px;
	padding: 160px 20px 14px 20px;	
	background: #FFFFFF url(/css/gfx2011/logo.svg) no-repeat 50% 27px;
	background-size: 75%;
	margin: 100px auto 0;
}
#loginContainer form {
	overflow: hidden;
	zoom: 1;	
}
#loginContainer .error {
	background: #FFE6E6 url(/css/gfx2011/warning.png) no-repeat 20px 20px;	
	border: 1px solid #CC0000;	
	color: #CC0000;
	padding: 15px 15px 15px 65px;
}
#loginContainer ol {
	padding: 0px;
	margin: 0px;	
}
#loginContainer label {
	display: block;
	color: #505050;
	font-size: 17px;
}	
#loginContainer .fancySubmit,
#loginContainer .fancyInput {
	width: 455px;	
	margin: 6px 0px;
	padding: 5px;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #DFDFDF; 
	background-image: -moz-linear-gradient(#FEFEFE, #DFDFDF);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#DFDFDF));
	background-image: -webkit-linear-gradient(#FEFEFE, #DFDFDF); 
	background-image: -o-linear-gradient(#FEFEFE, #DFDFDF);
	border: 1px solid #dfdfdf;
	-moz-box-shadow: 0px 0px 2px #DDD;
	-webkit-box-shadow: 0px 0px 2px #DDD;
	box-shadow: 0px 0px 2px #DDD;
	outline: none;
}
#loginContainer .fancySubmit {
	width: auto;
	font-size: 17px;
	color: #505050;	
	padding: 6px 20px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}
#loginLogos {
	/* url(/css/gfx2011/fancy_pantsy_badges.png) no-repeat 50% 50% */
	background: #FFFFFF ;
	color: #888;
	width: 480px;
	text-align: center;
	padding: 14px;	
	margin: 20px auto;
	right: 0px;
	position: relative;
}
/******************************** HEADER PROFILE *********************************/
#profile {
	position: absolute;
	right: 20px;
	top: 24px;
	text-align: right;
}
#profile h4,
#profile h4 a {
	color: #353535;
	font-size: 25px;
	font-weight: bold;
	margin: 0px;
	text-decoration: none;
}
#profile a {
	color: #afafaf;
	font-size: 11px;	
}
#logo {
	position: absolute;
	top: 20px;
	left: 20px;
	text-decoration: none;
}
/*#logo img:first-child {
	width: 40%;
}*/
#logo > img:last-of-type {
    height: 55px;
    margin-left: 30px;
}
/******************************** HELP *******************************************/
#help {
	position: absolute;
	top: -17px;
	right: 17px;
}
#helpSubmit {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 0;
	color: #FFF;
	font-size: 18px;
	text-shadow: 0px 1px #777;
	line-height: 22px;
	font-weight: bold;
	background: #97c11f;
	box-shadow: 0px 1px 0px #999, 0px 0px 2px rgba(0,0,0,.2);
	position: relative;
}
#helpSubmit:hover {
	-webkit-animation: pulsate 700ms infinite;
	-moz-animation: pulsate 700ms infinite;
	-o-animation: pulsate 700ms infinite;
	animation: pulsate 700ms infinite;
}
#editSubmit {
	width: 16px;
	height: 16px;
	left: 10px;
	border-radius: 50%;
	border: 0;
	color: #FFF;
	font-size: 12px;
	text-shadow: 0px 1px #777;
	line-height: 2px;
	font-weight: normal;
	background: #ae2d26;
	box-shadow: 0px 1px 0px #999, 0px 0px 2px rgba(0,0,0,.2);
	position: relative;
}
#editSubmit:hover {
	background: #ffec5c;
	color: #000;
}
#editSubmit.exists {
	background: #47ae35;
}
@-webkit-keyframes pulsate {
	0% 		{ -webkit-transform: scale(1);	}
	50% 	{ -webkit-transform: scale(1.1); }
	100% 	{ -webkit-transform: scale(1);	}
}
@-moz-keyframes pulsate {
	0% 		{ -moz-transform: scale(1);	}
	50% 	{ -moz-transform: scale(1.1); }
	100% 	{ -moz-transform: scale(1);	}
}
@-o-keyframes pulsate {
	0% 		{ -o-transform: scale(1);	}
	50% 	{ -o-transform: scale(1.1); }
	100% 	{ -o-transform: scale(1);	}
}
@keyframes pulsate {
	0% 		{ transform: scale(1);	}
	50% 	{ transform: scale(1.1); }
	100% 	{ transform: scale(1);	}
}


/******************************** QUICKSEARCH ************************************/
#search {
	position: absolute;
	right: 19px;	
	top: -15px;
	-webkit-border-radius: 15px;
	-mox-border-radius: 15px;
	border-radius: 15px;
	box-shadow: 0px 0px 3px #555;
	background: url(/css/gfx2011/background_inputfields.png) repeat-x left bottom;
}
#search input {
	width: 170px;
	border: 0px;
	padding: 9px 6px 7px 20px;
	background: transparent url(/css/gfx2011/icon_quicksearch.png) no-repeat 5px 50%;
	float: left;
	color: #999;
	font-size: 11px;
}
#search input:focus {
	color: #353535;	
}
#search button {
	border: 0px;
	background: transparent url(/css/gfx2011/icon_quicksearch_arrow.png) no-repeat 50% 50%;	
	float: left;
	width: 30px;
	height: 30px;
	border-left: 1px solid #dfdfdf;
}
/******************************** MAINMENU ************************************/
#mainmenu {
	border-bottom: 1px solid #c6c6c6;
	overflow: hidden;
}
#mainmenu ul {
	padding: 0px;
	margin: 0px;
	list-style: none;	
	padding-left: 20px;
	float: left;
}
#mainmenu ul.top {
	border-bottom: 1px solid #c6c6c6;	
	width: 100%;
}
#mainmenu ul.bottom {
	clear: both;
	width: 100%;
	background: #FFFFFF;
	background-image: -webkit-linear-gradient(top,transparent 96%, #c6c6c6 100%);
	background-image: -moz-linear-gradient(top,transparent 96%, #c6c6c6 100%);
	background-image: -ms-linear-gradient(top,transparent 96%, #c6c6c6 100%);
	background-image: -o-linear-gradient(top,transparent 96%, #c6c6c6 100%);
	background-repeat: repeat;
	background-size: 10px 31px;
	padding: 0px;	
}
#mainmenu ul li {
	float: left;
	margin-right: 3px;
}
#mainmenu ul.top li a {
	background: #e3e3e3;
	padding: 4px 20px;	
	display: block;
	font-weight: bold;
	color: #626262;
	border: 1px solid #c6c6c6;
	margin-bottom: -1px;
	text-decoration: none;
}
#mainmenu ul.bottom li a {
	padding: 6px 15px 6px 15px;
	display: block;	
	color: #636363;
}
#mainmenu ul.top li a:hover,
#mainmenu ul.top li a.active {
	background: #FFFFFF;
	color: #000000;	
	border-bottom: 1px solid #FFFFFF;
	margin-bottom: -1px;
}
#mainmenu ul.bottom li a:hover,
#mainmenu ul.bottom li a.active {
	 background: url(/css/gfx2011/arrow_mainmenu.png) no-repeat 50% 100%;
	 color: #000000;
}
#mainmenu .dashboardFiller {
	height: 5px;	
}
/******************************** PAGE INTRO ************************************/
.pageIntro {
	border-bottom: 1px solid #c6c6c6;
	margin-bottom: 30px;
	padding-bottom: 5px;
}
.pageIntro h1 {
	color: #96C11F;
	font-size: 30px;
}
.pageIntro h2 {
	color: #c6c6c6;
	font-size: 16px;
	line-height: 10px;	
}
/********************************* BUTTONS ****************************************/
.button {
	display: block;
	width: 28px;
	height: 23px;
	text-decoration: none;	
	float: left;
	margin-right: 3px;
	color: #F00 !important;
}

.button span {
	display: none;
}

.editButton 		{ background: url(/css/gfx2011/button_edit.png) no-repeat left top; }
.deleteButton 		{ background: url(/css/gfx2011/button_delete.png) no-repeat left top; }
.kandidatenButton 	{ background: url(/css/gfx2011/button_kandidaten.png) no-repeat left top; }
.statusButton 		{ background: url(/css/gfx2011/button_status.png) no-repeat left top; }
.viewButton 		{ background: url(/css/gfx2011/button_view.png) no-repeat left top; }
.loginButton 		{ background: url(/css/gfx2011/button_status.png) no-repeat left top; }

.topButtonRowHigh {
	margin: 20px 0px;	
}
.topButtonRowHigh .left .fancyButton {
	float: left;
	margin-right: 5px;
}
.topButtonRowHigh .right .fancyButton {
	float: right;
	margin-left: 5px;
}
.buttonRow {
	float: right;
	position: absolute;
	z-index: 100;
	width: 100%;	
}
.buttonRowLow {
    float: right;
    position: absolute;
    z-index: 1;
    width: 100%;
}
.topButtonRow {
	float: right;
	right: 5px;
	top: -20px;
}
.topButtonRow > div {
	float: right;	
}
.topButtonRow > div.left {
	float: left;
}
.topButtonRow > div.cleaner {
	float: none;
}
.topButtonRow .fancyButton {
	margin-left: 8px;
}
.bottomButtonRow > div {
	float: right;
}
.bottomButtonRow .fancyButton {
	margin-right: 8px;
}
.topButtonRow > div,
.bottomButtonRow > div {
	width: auto;	
}
.bottomButtonRow {
	right: 20px;
}
.buttonRow .fancyButton {
	float: left;
}

.twoColumns .topButtonRow .fancyButton {
	float: right;
}

.fancyButton:hover span {
	color: #96C11F;
}
.greyButton:hover span {
	color: #333333;	
}

.cancelButton span,
.deleteButton span 			{ background-image: url(/css/gfx2011/button_icon_delete.png); 		}
.saveButton span 			{ background-image: url(/css/gfx2011/button_icon_save.png); 		}	
.addButton span 			{ background-image: url(/css/gfx2011/button_icon_add.png); 			}
.editButton span 			{ background-image: url(/css/gfx2011/button_icon_edit.png); 		}
.generateButton span		{ background-image: url(/css/gfx2011/button_icon_gear.png); 		}
.clockButton span			{ background-image: url(/css/gfx2011/button_icon_clock.png); 		}
.talkButton span			{ background-image: url(/css/gfx2011/button_icon_talk.png); 		}
.goodButton span			{ background-image: url(/css/gfx2011/button_icon_good.png);			}
.letterButton span  		{ background-image: url(/css/gfx2011/button_icon_letter.png);   	}
.exportButton span  		{ background-image: url(/css/gfx2011/button_icon_export.png);   	}
.archiveButton span 		{ background-image: url(/css/gfx2011/button_icon_archive.png);  	}
.offerButton span 			{ background-image: url(/css/gfx2011/button_icon_offer.png);  		}
.fileButton span 			{ background-image: url(/css/gfx2011/button_icon_file.png);  		}
.attachementButton span		{ background-image: url(/css/gfx2011/button_icon_attachement.png); 	}
.leftButton span			{ background-image: url(/css/gfx2011/button_icon_left.png); 		}
.userButton span			{ background-image: url(/css/gfx2011/button_icon_user.png); 		}
.intrawisButton span  		{ background-image: url(/css/gfx2011/button_icon_intrawis.png);   	    }
.memoButton span  		{ background-image: url(/css/gfx2011/note.png);     }
.emailButton span			{ background-image: url(/css/gfx2011/button_icon_email.png); 		}
.downButton span			{ background-image: url(/css/gfx2011/button_icon_down.png); 		}

/*************************************** COLUMNS *****************************************/
.oneColumns > div 	{ width: 100%; 		}
.twoColumns > div 	{ width: 50%; 		}
.threeColumns > div 	{ width: 33.33%; 	}
.fourColumns > div 	{ width: 25%; 		}
.fiveColumns > div 	{ width: 20%; 		}
.sixColumns > div 	{ width: 16.66%; 	}

.divColumns > div {
	float: left;
	display: block;
	position: relative;
}
.divColumns div cite {
	display: block;
	padding: 6px 10px;	
}

.divColumns .leftColumn { width: 49%; margin-right: 2%; }
.divColumns .rightColumn { width: 49%; }
/*************************************** HUIS DETAILS IN UNFOLD **************************************/
.unfoldLinksRow {
	margin: 10px 0px;	
	color: #005C9C;
}
.unfoldLinksRow a {
	color: #005C9C;	
}
.unfoldFactsheet ol {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.unfoldFactsheet li {
	overflow: hidden;
	zoom: 1;
}
.unfoldFactsheet.threeColumns > div {
	width: 31%;
	padding: 1%;
}
.unfoldFactsheet.twoColumns > div {
	width: 48%;
	padding: 1%;
}

.unfoldFactsheet .left {
	color: #000000;
	width: 50%;	
}
.unfoldFactsheet .right {
	color: #505050;	
	width: 50%;
}
.unfoldFactsheet i {
	color: #FF0000;	
}
.houseOverview .column2 { width: 20% !important; }
.houseOverview .column3 { width: 42% !important; }
/*************************************** ENERGIELABEL **************************************/

.pijltje {
	line-height: 30px;
	font-weight: bold;
	display: block;
	text-decoration: none;
	color: #000000 !important;		
	font-size: 18px;
	width: 17px;
	padding: 4px 0px 4px 22px;
	float: left;
	position: relative;
}
.pijltje:after {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 19px solid transparent;
   border-left: 13px solid red;
   border-bottom: 19px solid transparent;
   left: 39px;
   top: 0px;
   z-index: 4;
}

.pijltjeA { background: #00A456; padding-left: 14px; }
.pijltjeA:after { left: 31px; border-left-color: #00A456; }
.pijltjeB { background: #63B752; }
.pijltjeB:after { border-left-color: #63B752; }
.pijltjeC { background: #C1D645; }
.pijltjeC:after { border-left-color: #C1D645; }
.pijltjeD { background: #FFF12D; }
.pijltjeD:after { border-left-color: #FFF12D; }
.pijltjeE { background: #F6B832; }
.pijltjeE:after { border-left-color: #F6B832; }
.pijltjeF { background: #E86E2C; }
.pijltjeF:after { border-left-color: #E86E2C; }
.pijltjeG { background: #E02228; }
.pijltjeG:after { border-left-color: #E02228; }
.pijltjeX { background: #AAAAAA; }
.pijltjeX:after { border-left-color: #AAAAAA; }

.pijltje:hover,
.pijltjeActive {
	color: #FFFFFF !important;
	font-size: 27px;
	padding: 4px 4px 4px 18px;
}
.pijltjeA:hover,
.pijltjeA.pijltjeActive {
	padding: 4px 4px 4px 10px;	
}
.pijltjeActive:before {
	content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-right: 3px solid transparent;
   border-bottom: 4px solid #F2F2F2;
   border-left: 3px solid transparent;
   right: 8px;
   bottom: 0px;
   z-index: 4;	
}
/*************************************** FANCYBOX IFRAME **************************************/
#iframeBody {
	background: #FFFFFF;
}
/*************************************** SETTING LIST **************************************/
#settingList ul {
	list-style: none;
	overflow: hidden;
}
#settingList li {

}
#settingList strong {
	display: block;
	font-size: 24px;
	line-height: 24px;
	display: block;
	margin-bottom: 6px;
	color: #505050;
	text-shadow: 0 1px #FFF;
}
#settingList a {
	padding: 10px;
	text-decoration: none;
	text-align: center;
	display: block;
	width: 273px;
	height: 100px;
	float: left;
	background: #EAF3D2;
	margin: 0 20px 20px 0;
	color: #888888;
	border-radius: 10px;
	box-shadow: 0px 2px 2px rgba(0,0,0,.2);
}
#settingList a:hover {
	background: #EEEEEE;
	box-shadow: 0 0 1px 1px #505050 inset;
}
/*************************************** MEMO'S *********************************************/
.memoList  {
	list-style: none;
}
.memoList li {
	margin: 10px;
	background: #FFC;
	box-shadow: 0px 0px 4px #999;	
	padding: 20px;
	border-radius: 10px;
}
.memoList h3 {
	font-weight: bold;
	margin-bottom: 6px;	
}
/*************************************** HOUSE DETAILS **************************************/
.houseDetails {
	width: 100%;
	border-collapse: separate;	
}
.houseDetails th {
	padding: 10px 0px 14px 0px;
	font-size: 18px;
	font-family: georgia;
	background-color: #F7F7F7;
	text-indent: 10px;
	border-bottom: 1px solid #DDD;
	color: #417CBD;
	text-shadow: 0px 1px 0px #a1e3f7;
	border-top: 1px solid #DDD;	
}
.houseDetails td {
	background-color: #F7F7F7;
	padding: 10px 10px;
	border-top: 2px solid #FFFFFF;
	border-bottom: 1px solid #DDD;
	vertical-align: top;
}
.houseDetails td.leftColumn {
	font-weight: bold;
	text-align: right;
	width: 200px;	
}
.surfaceTotal,
.surfaceRow {
	border-top: 1px solid #DDD;	
	padding: 8px 0px;
}
.surfaceTotal {
	border-color: #000000;	
}
.houseOfferError {
	color: #CC0000;
	background: #FFFFCC url(/css/gfx2011/warning.png) no-repeat 20px 20px;
	border: 1px solid #CC0000;
	margin: 20px 0px;
	padding: 18px 20px 20px 70px;
	width: 600px;
	font-weight: bold; 
	float: left;	
}

.customsettings { border: 2px solid maroon; padding: 8px; margin: 10px; border-radius: 4px  }
.customsettings .customlabel { font-weight: bold; font-size: 16px; }
.customsettings .custominfo { font-size: 11px; color: #888 }
.customsettings ul { margin-left: 20px }

/* internal mail settings */
.newmail {background:url(/layout/email.png) no-repeat 5px 5px;}
.openedmail {background:url(/layout/email_open.png) no-repeat 5px 5px;}
.maillink {
	position:relative;
	padding: 7px 8px;
	margin-left: 10px;
	font-size: 1px;
	font-size: 0px;
	background: url(/layout/email_go.png) no-repeat bottom;
}
.maillink span {
	position: absolute;
	top:0;
	right:0;
	margin: -7px -5px 0 0;
	padding: 0 2px;
	background-color: #EDF4FE;
	border: 1px solid #96B5E3;
	border-radius: 50%;
	font-size: 9px;
	line-height: 10px;
	color: #3c7924;
	font-weight: bold;
	text-align: center;
}
.maillink span.warn {
	background-color: red;
	color: #fff;
	border-color: black;
}
.maillink span.m0 { display: none }
/* when dialog is shown, the body should not be scrollable */
/*
.cufon-active body { overflow:hidden }*/


.horizontallist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.horizontallist li {
	display: block;
	float: left;
}

.horizontallist li a.fancyButton {
	font-size: 12px;
}
.fa-red{
    color:red;
}
.fa-green{
    color:green;
}
.fa-orange{
	color:orange;
}
.fa-gray{
    color: #a1a1a1;
}
/* WN request */
.wnRequestHeader {
    width: 70%;
    font-size: 11pt;
}
.wnRequestHeader tr:first-child td {
    font-size: 16pt;
    color: #96C11F;
    font-family: 'SourceSansProBlack';
}
.wnRequestHeader td:nth-child(odd) {
    font-weight: 600;
    color: #9d9d9d;
}
.red {
    color: red;
}
.green {
    color: green;
}
.wnBadge {
    background-color: orange;
    min-width: 20px;
    height: 15px;
    display: inline-block;
    line-height: 17px;
    text-align: center;
    border-radius: 10px;
    color: #ffffff;
    font-weight: bold;
}

.advance-link img {
    width: 100%;
}
.pointer {
	cursor: pointer;
}

.dropzone {
	box-sizing: border-box;
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 99998;
	justify-content: center;
	padding-top: 50px;
	background: rgba(96, 167, 220,.8);
	border: 11px dashed #60a7dc;
}

.dropzone div {
	text-align: center;
	font-size: 50px;
}