/*

	Stylesheet for Van Marcke Unicef
	
	Media:      screen, projection
	Copyright:  Netlash <http://www.netlash.com>
	author:     Stephen stephen@netlash.com>

*/

/*
	Reset
*/

body, form, ol, ul, dl, li, dt, dd, td, th ,tr, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { border:0; }
fieldset { margin: 0; padding: 0; border: 0; }
input, select, textarea { font-size: 100%; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }
th { text-align: left; }
a:focus { overflow: hidden; }

/*
	Clearfix
*/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*
	General
*/

body {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #313131;
	background: #FFFCE4 url(../images/background.gif) no-repeat center 0; /*blinks 2 times*/ 
}

/*
	Typography and text styles
*/

/* General */

p {
	padding: 0 0 13px 0;
}

strong, th, thead td, h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

h3, h4, h5, h6 {
	color: #1B4061;
}

/* Headings */

h1 {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 24px;
	padding: 0 0 12px 0;
	margin: 0 0 14px 0;
	color: #00345b;
	border-bottom: 1px solid #CBE8E5;
	font-style: normal;
	line-height: 1.3;
}

h2 {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 16px;
	padding: 0 0 12px 0;
	color: #0C7F9B;
	line-height: 1.3;
}

h3 {
	font-size: 13px;
	padding: 0 0 6px 0;
}

h4 {
	font-size: 13px;
	padding: 0 0 3px 0;
}

/* Links */

a {
	border-bottom: 1px solid #666;
	text-decoration: none;
}

a:link {
	color: #00ACCC;
	border-color: #BFEAF2;
}

a:visited {
	color: #018CA6;
	border-color: #BFEAF2;
}

a:hover {
	color: #00ACCC;
	border-color: #00ACCC;
}

a:active {
	color: #00ACCC;
	border-color: #BFEAF2;
}

/* side color link */

#side a:link {
	color: #1B4061;
	border-color: #96B5B6;
}

#side a:visited {
	color: #1B4061;
	border-color: #96B5B6;
}

#side a:hover {
	color: #1B4061;
	border-color: #1B4061;
}

#side a:active {
	color: #1B4061;
	border-color: #96B5B6;
}

/* footer color link */

#footer a:link {
	color: #4B4A43;
	border-color: #A3A293;
}

#footer a:visited {
	color: #4B4A43;
	border-color: #A3A293;
}

#footer a:hover {
	color: #4B4A43;
	border-color: #4B4A43;
}

#footer a:active {
	color: #4B4A43;
	border-color: #A3A293;
}

/* .content defaults */

.content ul {
	list-style: none;
	padding: 0 0 20px 12px;
}

.content ul li {
	background: url(../images/bullet.png) no-repeat 0 8px;
	padding-left: 16px;
}

.content ol {
	list-style-type: decimal;
	padding: 0 0 20px 12px;
}

.content dl {
	padding: 0 0 20px 12px;
}

.content ul ul,
.content ul ol,
.content ol ul,
.content ol ol {
	padding-bottom: 0;
}

.content code {
	font-family: Monaco, "Courier New", monospace;
}

.content pre {
	font-size: 12px;
	line-height: 18px;
	background: #F5F5F5;
	margin: 0 0 12px 0;
	padding: 10px;
}

.content blockquote,
.content q {
	font-style: italic;
	color: #666;
}

.content blockquote {
	padding: 0 10px; 
	padding: 20px 0;
}

.content cite,
.content em {
	font-style: italic;
}

.content table {
	border-top: 1px solid #CBE8E5;
	border-left: 1px solid #CBE8E5;
}

.content td, 
.content th {
	border-right: 1px solid #CBE8E5;
	border-bottom: 1px solid #CBE8E5;
	font-size: 11px; 
	padding: 12px;
}

.content th {
	font-weight: 700;
	background: #CBE8E5;
}

/*
	Page structure and layout
*/

#container {
	width: 916px;
	margin: 0 auto;
}

#home #container {
	background: url(../images/side_boy.jpg) no-repeat right bottom;
}

	/* General */

	/* Header */

	/* Logo */

	#logo h1, #logo h2 {
		width: 74px;
		height: 74px;
		background: url(../images/logo.png) no-repeat 0 0;
		text-indent: -9999px;
		float: left;
		margin: 21px 0 0 67px;
		display: inline; /* IE6 Double margin-fix */
		padding-bottom: 3px;
	}

	#logo h1 a, #logo h2 a {
		width: 100%;
		height: 100%;
		display: block;
		overflow: hidden;
		border-bottom: none;
	}

	/* language */

	#language ul {
		float: right;
		background: url(../images/lang_bg.png) no-repeat 0 0;
		width: 70px;
		padding-left: 7px;
		height: 41px;
		line-height: 41px;
		margin-right: 8px;
	}

	#language ul li {
		float: left;
		padding-left: 3px;
	}

	#language ul li a {
		float: left;
		padding: 0 6px;
		color: #FFF;
		font-size: 11px;
		font-weight: 700;
		border-bottom: none;
	}

	#language ul li a:link, #language ul li a:visited {
		color: #A3A293;
	}

	#language ul li a:hover, #language ul li a:active, #language ul li a:focus {
		color: #4B4A43;
	}

	#language ul li.selected a:link,
	#language ul li.selected a:visited,
	#language ul li.selected a:hover,
	#language ul li.selected a:focus,
	#language ul li.selected a:active {
		color: #4B4A43;
	}


	/* Navigation */

	#navigation ul {
		float: left;
		padding: 48px 0 0 37px;
		height: 38px;
		font-weight: 700;
		font-size: 11px;
		letter-spacing: 0.05em;
	}

	#navigation ul li {
		float: left;
		padding-right: 3px;
		line-height: 38px;
	}

	#navigation li a {
		background: url('../images/bg_navigation.png') no-repeat right top;
		border: none;
		padding: 0;
		display: block;
		height: 38px;
		color: #FFF;
		float: left;
		border-bottom: none;
		cursor: pointer;
	}

	#navigation li a span {
		background: transparent url('../images/bg_navigation_left.png') no-repeat left top;
		padding: 0 14px;
		display: block;
		float: left;
		min-width: 8px;
		cursor: pointer;
	}

/* link & visited */
	#navigation li a:link, #navigation li a:visited {
		background-position: right top;
	}
	
	#navigation li a:link span, #navigation li a:visited span {
		background-position: left top;
	}

/* hover & focus */
	#navigation li a:hover, #navigation li a:focus {
		background-position: right -38px;
	}
	
	#navigation li a:hover span, #navigation li a:focus span {
		background-position: left -38px;
	}

/* active */
	#navigation li a:active {
		background-position: right top;
	}
	
	#navigation li a:active span {
		background-position: left top;
	}

/* selected */
	#navigation li.selected a:link, 
	#navigation li.selected a:visited,
	#navigation li.selected a:hover, 
	#navigation li.selected a:active,
	#navigation li.selected a:focus {
		background-position: right -76px;
	}
	
	#navigation li.selected a:link span, 
	#navigation li.selected a:visited span,
	#navigation li.selected a:hover span, 
	#navigation li.selected a:active span,
	#navigation li.selected a:focus span {
		background-position: left -76px;
	}

	/* subNavigation */

	#subNavigation {
		background: #3BBACF;
		margin: 0 0 0 177px;
		width: 489px;
		padding: 10px 60px 10px 27px;
		overflow: hidden;
	}

	#subNavigation ul li {
		float: left;
		padding: 0 1px;
	}

	#subNavigation ul li a {
		float: left;
		padding: 0 10px;
		color: #FFF;
		border-bottom: none;
		height: 24px;
		line-height: 24px;
	}

	#subNavigation ul li a:link, #subNavigation ul li a:visited {
		color: #FFF;
		background: #3BBACF;
	}

	#subNavigation ul li a:hover, #subNavigation ul li a:focus {
		color: #FFF;
		background: #08A5C4;
	}

	#subNavigation ul li a:active {
		color: #FFF;
		background: #3BBACF;
	}

	#subNavigation ul li.selected a:link,
	#subNavigation ul li.selected a:visited,
	#subNavigation ul li.selected a:hover,
	#subNavigation ul li.selected a:focus,
	#subNavigation ul li.selected a:active {
		color: #FFF;
		background: #08A5C4;
	}

	/* Content */

	#content {
		position: relative;
		float: left;
		display: inline; /*IE6 double margin fix */
		padding: 20px 32px 40px 32px;
		width: 502px;
		border-right: 5px solid #3BBACF;
		border-left: 5px solid #3BBACF;
		margin-left: 177px;
		background: #FFF;
		min-height: 350px;
	}

	#home #content {
		padding-bottom: 0;
	}

 #bottom {
		position: absolute;
		background: #FFF url(../images/content_bg.png) no-repeat 0 bottom;
		bottom:0;
		left: -5px;
		width: 576px;
		height: 9px;
		font-size: 0;
		line-height: 0;
	}

 #home #bottom {
		background: #FFF url(../images/content_bg_home.png) no-repeat 0 bottom;
	}

 /* Side */

	#side {
		padding-top: 66px;
		float: right;
		width: 163px;
		padding-bottom: 201px;
		font-size: 13px;
		color: #005C73;
		background: url(../images/bg_side.gif) no-repeat 0 bottom;
	}

	#home #side {
		padding-top: 0px;
		background: none;
	}

	#contactPage #side {
		padding-top: 203px;
		background: url(../images/side_boy.gif) no-repeat 0 bottom;
	}


	#side h3 {
		padding: 0 0 10px 0;
		margin: 0 0 8px 0;
		border-bottom: 1px solid #65D2DE;
	}

	.questions {
		width: 119px;
		padding: 24px 12px 0 24px;
		background: #D7EDDD url(../images/bg_side_top.png) no-repeat 0 0;
	}

	.sideBlock {
		width: 119px;
		padding: 24px 12px 0 24px;
		background: #D7EDDD url(../images/bg_side_top.png) no-repeat 0 0;
		font-size: 11px;
	}

	#side .bottom {
		width: 157px;
		line-height: 0;
		font-size: 0;
		background: url(../images/bg_side_bottom.png) no-repeat 0 0;
		height: 6px;
	}
	/* Footer */

	#footer {
		color: #A3A293;
		float: left;
		padding: 0 32px;
		width:512px;
		margin: 12px 0 24px 177px;
		height: 38px;
		line-height: 38px;
		background: url(../images/footer_bg.png) no-repeat 0 0;
		display: inline; /* IE6 Double margin-fix */
	}

	#footer strong {
		font-family: Georgia, Times, 'Times New Roman', serif;
		font-style: italic;
	}

	/*
		Home
	*/

#spotlight {
	background: url(../images/pipe.png) no-repeat center 50px;
	padding-bottom: 20px;
	padding-top: 12px;
	}

	#consumer, #pro {
		width: 236px;
	}

	#consumer {
		float: left;
	}

	#pro {
		float: right;
	}

	.imageholder {
		width: 230px;
		height: 250px;
		overflow: hidden;
		border: 3px solid #00BACF;
		background: #FFF;
		margin-bottom: 12px;
	}

	.imageholder h3 {
		background: #00BACF;
		text-align: center;
		padding: 6px 0;
		color: #FFF;
	}

	#spotlight .readMore li {
		padding-left: 0;
		display: block;
		width: 230px;
		background: none;
	}

/*
	Pagination
*/

.pagination-wrap {
	width: 100%;
	overflow: hidden;
}

.pagination {
	float: left;
	position: relative;
	left: 50%;
}

.pagination ul {
	padding: 18px 0;
	z-index: 2;
	overflow: hidden;
	position: relative;
	left: -50%;
}

.pagination li {
	float: left;
	list-style: none;
	margin: 0 5px 0 0;
	text-decoration: none;
	padding: 0;
	line-height: 15px;
	font-size: 12px;
	text-align: center;
}

.pagination li span {
	float: left;
	display: block;
	padding: 4px 5px;
	color: #ccc;
	min-width: 12px;
}

.pagination li.currentpage span {
	font-weight: 700;
	color: black;
}

.pagination li.selected span {
	padding: 4px 5px;
	font-weight: 700;
	color: black;
}

.pagination li a:link,
.pagination li a:visited {
	float: left;
	display: block;
	padding: 3px 4px;
	border: 1px solid #ddd;
	text-decoration: none;
	min-width: 12px;
}

li.ellipsis {
	margin: 0;
}

li.ellipsis span {
	color: black;
}

.pagination li a:hover,
.pagination li a:active {
	background: #eee;
	border: 1px solid #bbb;
	color: black;
}

.nextpage, .previouspage {
	font-size: 11px !important;
}

.pagination li.nextpage {
	margin-left: 10px;
}

.pagination li.previouspage {
	margin-right: 15px;
}

/* forms */

label {
	font-size: 13px;
	display: block;
	padding: 4px 0;
}

input.input-text, input.inputText, input.text, input.password,input.input-submit, input.inputSubmit, textarea {
	font-size: 13px;
	font-family: "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
	background: #D7EDDE;
	border: none;
	padding: 6px;
	color: #005C73;
	margin: 0;
}

input.input-radio {
	margin: 0 3px 0 0;
	padding: 0;
}

input[disabled] {
	color: #005C73;
}

textarea {
	line-height: 1.5;
	width: 474px;
	height: 250px;
	padding: 12px;
}

input.input-text, input.inputText, input.text, input.password {
	width: 230px;
}

input:focus, textarea:focus {
	background: #E7F4EB;
}

@-moz-document url-prefix() {
	input[type="text"]:focus,
	textarea:focus { 
		background: #E7F4EB;
	}
}

input.input-submit, input.inputSubmit, button {
	font-size: 11px;
	font-family: "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
	cursor: pointer;
	overflow: visible;
	background: #26B6D1;
	border: 2px solid #EBE6D1;
	color: #FFF;
	font-weight: 700;
	padding: 3px 6px;
	margin: 0;
}

input.input-submit:hover, input.inputSubmit:hover {
	border-color: #EBE6D1;
	color: #FFF;
	background: #00375B;
}

input.input-submit:active,
input.input-submit:focus {
	border-color: #667278;
	color: #FFF;
	background:#667278 repeat-x scroll 0 bottom;
}

select, option {
	font-family: Arial, sans-serif;
	font-size: 12px;
}

.formError {
	font-size: 11px;
	font-weight: 700;
	font-family: Georgia, Times, 'Times New Roman', serif;
	color: #FC2F60;
	display: block;
	clear:both;
	font-style: italic;
	margin: 3px 0;
}

.formSuccess {
	font-size: 11px;
	font-weight: 700;
	font-family: Georgia, Times, 'Times New Roman', serif;
	color: #1B4061;
	display: block;
	clear:both;
	font-style: italic;
	margin: 3px 0;
	padding: 6px 12px;
	background: #DAEEDC;
}

form p
{
	padding-bottom: 12px;
}

/* checkboxes */

#contact .checkbox {
	padding-top: 6px;
	padding-left: 0;
}

#contact li.label_checkbox_pair {
	padding-left: 0;
	background: none;
	clear: both;
	float: none;
	position: relative;
}

#contact li.label_checkbox_pair input {
	left: 0;
	position: absolute;
	top: 4px;
	margin: 0;
	width: auto !important; /* IE6 fix */
	background: none; /* IE6 fix */
}

#contact li.label_checkbox_pair label {
	display: block;
	margin-left: 22px;
	width: 150px;
	padding: 0 0 3px 0;
}


/* General classes */

.hidden { display: none; }
.block { display: block; }
.noPadding { padding: 0 !important; }
.noMargin { margin: 0 !important; }
.floatLeft { float: left; }
.floatRight { float: right; }
.noBorder { border: none; }

/* Like Buttons */

	a.likeButton {
		font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
		background: url('../images/bg_buttons.png') no-repeat right top;
		border: none;
		padding: 0;
		height: 28px;
		line-height: 28px;
		font-size: 10px;
		color: #FFF;
		float: right;
		border-bottom: none;
		cursor: pointer;
	}

	a.likeButton span {
		background: transparent url('../images/bg_buttons_left.png') no-repeat left top;
		padding: 0 16px;
		float: left;
		min-width: 8px;
		cursor: pointer;
	}

/* link & visited */
	a.likeButton:link, a.likeButton:visited {
		color: #FFF;
		background-position: right top;
	}
	
	a.likeButton:link span, a.likeButton:visited span {
		color: #FFF;
		background-position: left top;
	}

/* hover & focus */
	a.likeButton:hover, a.likeButton:focus {
		color: #FFF;
		background-position: right -56px;
	}
	
	a.likeButton:hover span, a.likeButton:focus span {
		color: #FFF;
		background-position: left -56px;
	}

/* active */
	a.likeButton:active {
		color: #FFF;
		background-position: right top;
	}
	
	a.likeButton:active span {
		color: #FFF;
		background-position: left top;
	}

	/* Share this overides */

		#share {
			text-align: right;
			padding-top: 12px;
			padding-bottom: 24px;
			border-top: 1px solid #CBE8E5;
			clear: both;
		}

		#container #share .stico_default {
			background: none !important;
		}

		.stbuttontext {
			font-family: 'Lucida Grande', Verdana, Arial, sans-serif !important;
			padding: 8px 16px;
			min-width: 8px;
			cursor: pointer;
			line-height: 1 !important;
			background: #fff url(../images/bg_share.png) no-repeat center center !important;
		}

		a.stbutton {
			border: none !important;
			padding: 8px 0 !important;
			font-size: 10px !important;
			color: #FFF !important;
			border-bottom: none !important;
			cursor: pointer !important;
		}

/* Image classes */

img.alignLeft {
	float: left;
	padding: 0 15px 30px 0;
}

img.alignRight {
	float: right;
	margin: 0 0 15px 30px;
	border: 3px solid #00BACF;
}

/* the whale */

#whaleholder {
	position: relative;
}

#whaleholder #whale {
	position: absolute;
	width: 150px;
	height: 154px;
	right: 50px;
	top: -92px;
	background: url(../images/whale.png) no-repeat 0 0;
}
