/* 	==|== NS Homepage ========================================================
	Author	:	LBi Lost Boys

	NS Homepage specific styling
	======================================================================== */

/**
 *	Exceptions for home page
 */
.homepage #content { padding-top:0; }
.homepage h1 {
	position:absolute;
	left:-3000em;
}

/**
 *	Application panel
 *
 */
#application-panel {
	position:absolute;
	top:15px;
	right:20px;
	width:300px;
	z-index:600;
}
	#application-panel h2 {
		margin-bottom:9px;
		line-height:18px;
	}
    #application-panel .reisplanner .location-to {
        padding-bottom: 0;
    }
    #application-panel .state {
        margin:0 0 5px 0;
    }
    #application-panel .state ol.links {
        margin:0;
    }
	#application-panel .state hr {
		margin:0;
	}

	#application-panel .state h2 {
		display: none;
	}
    #application-panel .state-homepage {
        margin-bottom: 10px;
        padding-bottom: 3px;
    }
        #application-panel .state-homepage ol.links > li {
            padding-bottom: 0;
            padding-top: .5em;
        }


#application-panel .links.attention {
    line-height: 1.166666667;
    margin: 0 0 -8px 6px;
    position: relative;
}


#application-panel .news-collection p {
	margin-bottom:5px;
}

#application-panel .news-collection .separator {
	margin:0.25em 0;
}

#application-panel .box-section{
    padding-bottom:5px;
}

#application-panel .buttons {
    margin-bottom: 4px;
    padding-top: 8px;
}
    #application-panel .buttons .more {
    	margin: 4px 0 0 5px;
    }
#application-panel .reisplanner + hr {
    margin-top: .33333333em;
}

.spoorkaart {
	float:right;
}

/* homepage specific reisplanner exceptions */

body .reisplanner label { width:65px; }
body .reisplanner input.text,
body .reisplanner select { width:175px; }
body .reisplanner input.station { width:125px; }
body .reisplanner .location-type { width:90px; }
body .reisplanner .option { padding-left:65px; }
body .reisplanner fieldset.alternative label { width:93px; }

/**
 *	Carrousel
 *
 */
#campaigns {
	position:relative;
	width:980px;
	float:left;
	padding-bottom:1em;
	background:#7F7FB2;
	color:#FFF;
	margin:0 -10px;
	-webkit-transform:translateZ(0);
}
body.js-enabled #campaigns {
	min-height:36.46em;
	padding:0;
}

	#campaigns-index {
		display:none;
		width:100%;
		margin:0 0 -1px;
		padding:0;
		position:absolute;
		bottom:0; left:0;
		z-index:500;
		background:url("../../../images/home/index.png");
		letter-spacing:1px;
		list-style:none outside;
	}
	body.js-enabled #campaigns-index {
		display:block;
	}
		#campaigns-index li {
			float:left;
			margin:0;
			padding:0 1px 0 0;
			background:url("../../../images/home/index-separator.png") 100% 0 repeat-y;
		}
			#campaigns-index li a {
				display:block;
				float:left;
				padding:4px 16px 3px 16px;
				color:#EEE !important;
				text-decoration:none;
				text-shadow:#808080 0 1px 2px;
			}
			#campaigns-index li a:hover {
				background:url("../../../images/home/index-active.png") -400px 100% repeat-y;
			}
			#campaigns-index li.active a,
			#campaigns-index li.active a:hover {
				background:url("../../../images/home/index-active.png") -400px 100% repeat-y;
				color:#FFF;
				text-decoration:none;
				text-shadow:#444 0 1px 2px;
			}
	#campaigns div.campaign {
		width:563px;
		padding:7.5em 385px 2em 32px;
		background-repeat:no-repeat;
	}
	#campaigns div.campaign.calamity {
		background-color: #7F7FB2;
	}
	body.js-enabled #campaigns div.campaign {
		position:absolute;
		left:0;	top:0;
		z-index:100;
		display:none;
		min-height:27em;
	}
		.campaign h2 {
			margin:-0.85em 0 -0.1em 0;
			padding:10px 0 20px 0;
			font-size:680%;
			font-weight:normal;
			line-height:1.0;
			color:#FFF;
			letter-spacing:2px;
			zoom: 1;
			position: relative;
		}
		.campaign.calamity h2 {
			font-size: 3.7em;
		}
		.campaign p {
			float:left;
			clear:left;
			margin:0 20px 0.5em 0;
			font-size:149%;
			width:16em;
		}
			.campaign p.actions {
				font-size:100%;
				width:auto;
				padding-bottom: 0;
			}

		.campaign .sticker {
			float:left;
			margin:0 0 5px 0;
		}
			.campaign .button {
				clear:both;
				float:left;
				margin:10px 0 0 0;
			}
		
			.campaign h2.alt-text {
			    display:none;
			}

#application-panel .reisplanner .location-to:before,
#application-panel .reisplanner .location-to:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
#application-panel .reisplanner .location-to:after,
#application-panel .reisplanner .location-to:after {
    clear: both;
}
#application-panel .reisplanner .location-from, #application-panel .reisplanner .location-to  {
    zoom:1;
}


/* business list */
/*
*	Is used in homepages:
*	Zakelijk
*/

#application-panel .button.shy {
	margin-bottom		: 5px;
}

.business li {
	float				: left;
	width				: 33%;
}

	.business li a {
		display			: block;
		padding			: 80px 5px 5px;
		text-align		: center;
		background		: url("../../images/zakelijk/business.png") no-repeat 15px 0;
	}

		.business li.zzp a 			{ background-position	: 15px 0; 	}
		.business li.mkb a 			{ background-position	: -185px 0; }
		.business li.enterprise a 	{ background-position	: -385px 0; }

		.business li.zzp a:hover 		{ background-position	: 15px -200px;   }
		.business li.mkb a:hover 		{ background-position	: -185px -200px; }
		.business li.enterprise a:hover { background-position	: -385px -200px; }

		.business li a:hover {
			text-decoration	: none;
		}

	.business li a strong {
		display			: block;
	}

		.business li a:hover strong {
			text-decoration	: underline;
		}