/*  
Website Name: Gezonde Wijkaanpak Infographic
Theme URI: http://www.rivm.nl
Description: custom website for RIVM - Gezonde Wijkaanpaak infographic
Design: Today
Design URI: http://www.today.nl
Author: Atypisch webdesign & webdevelopment
Author URI: http://www.atypisch.nl
*/


html,body {
	color: #000;
	margin: 0; 
	padding: 0;
	font-size: 12px;
	line-height: 14.4px;
	text-align: left;
	background: #fff;
	font-family: 'RijksoverheidSans-Regular', 'Sans-Serif';
}

h1, h2, h3, h4, h5 {
	font-family: 'RijksoverheidSans-Bold', 'Sans-Serif';
	margin: 0;
	font-weight: normal;
}

h1 { font-size: 30px; }
h1.page_header {
	font-size: 30px;
	line-height: 30px;
	color: #fff;
	padding: 20px 0 20px 0;
	letter-spacing: 1px;
}
h2 { font-size: 24px; }
h2.item_header {
	padding: 20px 0 20px 0;
	font-size: 24px;
	color: #fff;
	line-height: 30px;
	width: 100%;
	text-align: center;
}

h2.item_header_purple {
	padding: 35px 0 20px 0;
	font-size: 24px;
	color: #42145f; 
	line-height: 30px;
	width: 100%;
	text-align: center;
}

h3 { font-size: 18px; line-height: 22px; }



/* main wrapper */
#wrapper {
	float: left;
	margin: 0;
	padding: 0; 
	width: 100%;
}

#header {
	float: left;
	width: 100%;
	height: 155px;
	background-color: #fff;
	background-image: url(images/rijksinstituut_logo.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 201px 117px ;
}

#header_slogan {
	float: left;
	width: 100%;
	height: 64px;
	background-color: #ca005d;
	padding: 0;
	margin: 0;
	text-align: center;
}

/* container is used for centering */
.container {
	padding: 0;
	border: 0;
	text-align: left; 
	margin-left: auto; 
	margin-right: auto;
	width: 600px;
}
/*main items*/
#item_1 {
	float: left;
	width: 100%;
	height: 474px;
	padding: 0;
	margin: 0;
	background-color: #6dcbe9;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-image: url(images/backgrounds/background_02.png);
}

#item_2 {
	float: left;
	width: 100%;
	height: 511px;
	padding: 0;
	margin: 0;
	background-color: #c60063;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-image: url(images/backgrounds/background_03.png);
}

#item_3 {
	float: left;
	width: 100%;
	height: 504px;
	padding: 0;
	margin: 0;
	background-color: #c60063;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-image: url(images/backgrounds/background_04.png);
}

#item_4 {
	float: left;
	width: 100%;
	height: 227px;
	padding: 0;
	margin: 0;
	background-color: #c60063;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-image: url(images/backgrounds/background_05.png);
}

#item_5 {
	float: left;
	width: 100%;
	height: 217px;
	padding: 0;
	margin: 0;
	background-color: #007ccb;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-image: url(images/backgrounds/background_06.png);
}

#footer {
	float: left;
	width: 100%;
	height: 105px;
	padding: 25px 0 50px 0;
	margin: 0;
	background-color: #fff;
}

/* positioning divs */
.section {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
}

.wrapper_relative {
	position: relative;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

/* elements and different classes*/
.transition {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.item_description {
	font-family: 'RijksoverheidSerif-Italic', 'Sans-Serif';
	font-size: 17px;
	font-weight: normal;
	line-height: 21px;
	color: #42145f;
	text-align: center;
	width: 100%;
	padding: 20px 0 20px 0;
	margin: 0;
}

/*button wraps placement*/
#item_1 .button_wrap { 
	position: absolute;
	z-index: 1;
	width: 193px;
	height: 44px;
	padding: 0;
	margin: 0;
}

#item_1 .button_wrap_1 { top: 57px;	left: 108px; } 
#item_1 .button_wrap_2 { top: 57px;	left: 320px; } 
#item_1 .button_wrap_3 { top: 110px;	left: 108px; } 
#item_1 .button_wrap_4 { top: 110px;	left: 320px; } 

/* #item_1 */
#item_1 a.button:link, #item_1 a.button:visited {
	float: left;
	padding: 8px 15px 8px 53px;
	width: 125px;
	height: 28px;
	border-radius: 8px;
	color: #42145f;
	text-decoration: none;
	font-size: 14px;
	font-family: 'RijksoverheidSans-Regular', 'Sans-Serif';
	background-repeat: no-repeat; 
	background-color: #fff;
}

#item_1 a.button:hover, #item_1 a.button:active {
	background-color: #42145f;
	color: #fff;
}

/* specific buttons */
#item_1 a.button_1:link, #item_1 a.button_1:visited {
	background-image: url(images/icons/icon_01.png);
	background-position: 12px 12px;
	background-size: 21px 20px;
	padding: 16px 15px 0 53px;
}

#item_1 a.button_1:hover, #item_1 a.button_1:active {
	background-image: url(images/icons/icon_01-diap.png);
}

#item_1 a.button_2:link, #item_1 a.button_2:visited {
	background-image: url(images/icons/icon_02.png);
	background-position: 12px 10px;
	background-size: 25px 26px;
}

#item_1 a.button_2:hover, #item_1 a.button_2:active {
	background-image: url(images/icons/icon_02-diap.png);
}

#item_1 a.button_3:link, #item_1 a.button_3:visited {
	background-image: url(images/icons/icon_03.png);
	background-position: 8px 12px;
	background-size: 34px 19px;
}

#item_1 a.button_3:hover, #item_1 a.button_3:active {
	background-image: url(images/icons/icon_03-diap.png);
}

#item_1 a.button_4:link, #item_1 a.button_4:visited {
	background-image: url(images/icons/icon_04.png);
	background-position: 12px 10px;
	background-size: 26px 23px;
}

#item_1 a.button_4:hover, #item_1 a.button_4:active {
	background-image: url(images/icons/icon_04-diap.png);
}


/* #item_2 */
#item_2 a.button:link, #item_2 a.button:visited {
	position: absolute;
	top: 12px;
	left: 193px;
	z-index: 1;
	padding: 12px 8px 12px 8px;
	width: 195px;
	height: 22px;
	border-radius: 8px;
	color: #42145f;
	text-decoration: none;
	font-size: 24px;
	line-height: 24px;
	font-family: 'RijksoverheidSans-Bold', 'Sans-Serif';
	font-weight: normal;
	background-repeat: no-repeat; 
	background-color: #fff;
	text-align: center;
}

#item_2 a.button:hover, #item_2 a.button:active {
	background-color: #42145f;
	color: #fff;
}

#item_2 .item_description { 
	position: absolute;
	top: 50px;
}


/* item 3 */

/*button wraps placement*/
#item_3 .button_wrap { 
	position: absolute;
	z-index: 1;
	width: auto;
	max-width: 225px;
	height: auto;
	padding: 0;
	margin: 0;
}

#item_3 .button_wrap_1 { top: 57px;	left: 200px; } 
#item_3 .button_wrap_2 { top: 172px;	left: 437px; } 
#item_3 .button_wrap_3 { top: 340px;	left: 435px; } 
#item_3 .button_wrap_4 { top: 420px;	left: 215px; } 
#item_3 .button_wrap_5 { top: 330px;	left: 20px; } 
#item_3 .button_wrap_6 { top: 160px;	left: 20px; } 

/* #item_3 */
#item_3 a.button:link, #item_3 a.button:visited {
	float: left;
	padding: 8px;
	border: 2px solid #fff;
	border-radius: 8px;
	color: #42145f;
	text-decoration: none;
	font-size: 16px;
	line-height: 17px;
	font-family: 'RijksoverheidSans-Regular', 'Sans-Serif';
	background-repeat: no-repeat; 
	background-color: #fff;
}

#item_3 a.button:hover, #item_3 a.button:active {
	/* different specifics for each button */
}

/* specific buttons */
#item_3 a.button_1:link, #item_3 a.button_1:visited {
	color: #c60063;	
	max-width: 225px;
}

#item_3 a.button_1:hover, #item_3 a.button_1:active {
	color: #fff;
	background-color: #c60063;
}

/* special div for button 2 */
#item_3 .button_2 {
	float: left;
	max-width: 128px;
	height: auto;
	padding: 0;
	margin: 0;
	padding: 8px;
	border: 2px solid #fff;
	border-radius: 8px;
	color: #42145f;
	background-color: #fff;
	font-size: 16px;
	line-height: 17px;
	color: #c60063;
	font-family: 'RijksoverheidSans-Regular', 'Sans-Serif';
}

#item_3 .button_2:hover {
	color: #fff;
	background-color: #c60063;
}

#item_3 .button_2 a:link, #item_3 .button_2 a:visited { color: #a90061; font-weight: bold; text-decoration: none;}
#item_3 .button_2 a:hover, #item_3 .button_2 a:active,
#item_3 .button_2:hover a:link, #item_3 .button_2:hover a:visited{ color: #fff; }
#item_3 .button_2 a:hover, #item_3 .button_2 a:active { text-decoration: underline; }

#item_3 a.button_3:link, #item_3 a.button_3:visited {
	color: #c60063;	
	max-width: 136px;
	padding: 5px;
}

#item_3 a.button_3:hover, #item_3 a.button_3:active {
	color: #fff;
	background-color: #c60063;
}

#item_3 a.button_4:link, #item_3 a.button_4:visited {
	color: #42145f;	
	max-width: 150px;
}

#item_3 a.button_4:hover, #item_3 a.button_4:active {
	color: #fff;
	background-color: #42145f;
}

#item_3 a.button_5:link, #item_3 a.button_5:visited {
	color: #42145f;	
	max-width: 120px;
}

#item_3 a.button_5:hover, #item_3 a.button_5:active {
	color: #fff;
	background-color: #42145f;
}

#item_3 a.button_6:link, #item_3 a.button_6:visited {
	color: #007bc7;	
	max-width: 120px;
}

#item_3 a.button_6:hover, #item_3 a.button_6:active {
	color: #fff;
	background-color: #007bc7;
}


/* #item_4 */
/*button wraps placement*/
#item_4 .button_wrap { 
	position: absolute;
	z-index: 1;
	width: auto;
	width: 170px;
	height: 155px;
	padding: 0;
	margin: 0;
}

#item_4 .button_wrap_1 { top: 55px;	left: 50px; } 
#item_4 .button_wrap_2 { top: 55px;	left: 215px; } 
#item_4 .button_wrap_3 { top: 55px;	left: 380px; } 

#item_4 a.button:link, #item_4 a.button:visited {
	float: left;
	padding: 8px;
	border: 0;
	color: #42145f;
	text-decoration: none;
	font-size: 15px;
	line-height: 17px;
	width: 170px;
	height: 25px;
	padding: 120px 0 0 0;
	background-repeat: no-repeat; 
	background-color: transparent;
	background-size: 98px 96px;
	background-position: center 20px;
	text-align: center;
	font-family: 'RijksoverheidSans-Bold', 'Sans-Serif';
}

#item_4 a.button:hover, #item_4 a.button:active {
	/* different specifics for each button */
}

/* specific buttons */
#item_4 a.button_1:link, #item_4 a.button_1:visited {
	background-image: url(images/icons/icon_05.png);
}

#item_4 a.button_1:hover, #item_4 a.button_1:active {
	background-image: url(images/icons/icon_05-diap.png);
}

#item_4 a.button_2:link, #item_4 a.button_2:visited {
	background-image: url(images/icons/icon_06.png);
}

#item_4 a.button_2:hover, #item_4 a.button_2:active {
	background-image: url(images/icons/icon_06-diap.png);
}

#item_4 a.button_3:link, #item_4 a.button_3:visited {
	background-image: url(images/icons/icon_07.png);
}

#item_4 a.button_3:hover, #item_4 a.button_3:active {
	background-image: url(images/icons/icon_07-diap.png);
}


/* item 5 */
#link_description {
	position: absolute;
	top: 62px;
	left: 265px;
	width: 260px;
	padding: 0;
	margin: 0;
	color: #fff;
	font-size: 18px;
	line-height: 22px;
	font-family: 'RijksoverheidSans-Bold', 'Sans-Serif';
}

#link_wrap {
	position: absolute;
	top: 116px;
	left: 242px;
	width: 298px;
	height: 68px;
	padding: 0;
	margin: 0;
	font-size: 19px;
	line-height: 22px;
	font-family: 'RijksoverheidSans-Bold', 'Sans-Serif';
}

#link_wrap a:link, #link_wrap a:visited {
	float: left;
	color: #c60063;
	width: 280px;
	height: 26px;
	overflow: hidden;
	padding: 8px 0 0 22px;
	margin: 0;
	text-decoration: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-image: url(images/backgrounds/bg_link.png);
	background-size: 298px 68px;
	background-position: left top;
}

#link_wrap a:hover, #link_wrap a:active {
	color: #42145f;
	background-position: left -34px;
}

#footer_left {
	float: left;
	font-family: 'RijksoverheidSans-Regular', 'Sans-Serif';
	width: 200px;
	height: auto;
	padding: 0 0 0 57px;
	margin: 0;
	font-size: 12px;
}

#footer_left b {
	font-family: 'RijksoverheidSans-Bold', 'Sans-Serif';
	font-weight: normal;
}

#footer_right {
	position: absolute;
	top: 100px;
	right: 30px;
	font-size: 16px;
	padding: 0;
	margin: 0;
	font-family: 'RijksoverheidSerif-Regular';
} 


.font_italic_pink {
	font-family: 'RijksoverheidSerif-Italic';
	color: #a90061;
}