/* ---[ All ]--- */

html, body {
	font-family: 'Verdana';
	background: #003d7a url(/layouts/waterinzicht/images/bg_body.png) top center;
}

#wpr-page {
	background: transparent url(/layouts/waterinzicht/images/bg_body_line.gif) repeat-x 0 30px;
	text-align: center;
}

#page {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	text-align: left;
}

/* ---[ Header ]--- */

#wpr-header {
	position: relative;
	height: 60px;
}

#header {

}

#logo {
	position: absolute;
	left: 5px;
	top: 12px;
}

#logo a {
	outline: none;
	display: block;
	width: 172px;
	height: 18px;
	text-indent: -9000px;
	background: transparent url(/layouts/waterinzicht/images/bg_sprite.png) no-repeat 0 0;
}

#slogan {
	position: absolute;
	top: 38px;
	right: 5px;
}

#slogan p {
	display: block;
	width: 277px;
	height: 13px;
	text-indent: -9000px;
	background: transparent url(/layouts/waterinzicht/images/bg_sprite.png) no-repeat 0 -19px;
}

/* ---[ Content ]--- */

#wpr-main {
	background: transparent url(/layouts/waterinzicht/images/bg_main.png) repeat top left;
}

.M-home #wpr-main {
	background: none;
}

#main {
	margin: 0 -5px -5px -5px;
	padding: 0 5px 5px 5px;
	background: transparent url(/layouts/waterinzicht/images/bg_main_arrows.png) no-repeat bottom left;
}

/* ---[ Footer ]--- */

#wpr-footer {
	clear: both;
	margin: 50px 0 20px 0;
	width: 960px;
}

.project #wpr-footer {
	margin-top: 100px;
}

#footer {
	padding: 0 0 0 10px;
}

#footer p {
	font-size: 85%;
	color: #fff;
}

#footer p .opmaat {
	color: #cc0000;
}

#footer p .opmaat-keywords {
	 color: #339900;
}

#footer p a {
	color: #fff;
}

/* ---[ Clearing elements ]--- */

/* clear float container without source markup - http://www.positioniseverything.net/easyclearing.html */
#wpr-page:after,
#wpr-header:after,
#wpr-main:after,
#main:after,
#wpr-footer:after,
#wpr-content:after,
#content:after,
#wpr-sidebar-left:after,
#wpr-sidebar-right:after,
#projects:after,
#projects ul:after,
#projects .project .thumbnail:after,
#project-page-meta ul:after,
.project-coordinates ul li:after,
.content:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
}

/* ---[ Layout ]--- */

#wpr-sidebar-left,
#wpr-content,
#wpr-sidebar-right {
	float: left;
}

#wpr-sidebar-left,
.TLR.locaties #wpr-sidebar-left {
	display: none;
}

.LR #wpr-sidebar-left,
.TLR #wpr-sidebar-left {
	display: block;
	width: 480px;
}

.LR #wpr-sidebar-left {
	margin: -5px 0 0 -5px;
	padding: 5px 0 0 5px;
	background: transparent url(/layouts/waterinzicht/images/bg_main_arrows.png) no-repeat top left;
}

#sidebar-left {
	padding: 30px;
}

#wpr-content {
	margin: -5px -5px 0 -5px;
	padding: 5px 5px 0 5px;
	width: 960px;
	background: transparent url(/layouts/waterinzicht/images/bg_main_arrows.png) no-repeat top left;
}

.LR #wpr-content {
	display: none;
}

#content {

}

#wpr-sidebar-right,
.TLR.locaties #wpr-sidebar-right {
	display: none;
}

.LR #wpr-sidebar-right,
.TLR #wpr-sidebar-right {
	display: block;
	width: 480px;
}

.LR #wpr-sidebar-right {
	margin: -5px -5px 0 0;
	padding: 5px 5px 0 0;
	background: transparent url(/layouts/waterinzicht/images/bg_main_arrows.png) no-repeat top right;
}

#sidebar-right {
	padding: 30px;
}

/* ---[ Mainmenu ]--- */

#wpr-mainmenu {
	position: absolute;
	top: 38px;
	left: 5px;
	width: 960px;
}

#mainmenu {

}

#mainmenu ul li {
	float: left;
	margin-right: 10px;
}

#mainmenu ul li ul {
	display: none;
}

#mainmenu ul li a {
	display: block;
	text-decoration: none;
	color: #6699ff;
}

#mainmenu ul li.current a,
#mainmenu ul li a:hover {
	color: #66ffff;
}

#mainmenu ul#homemenu li.current a {
	color: #6699ff;
}

#mainmenu ul#homemenu li.current a:hover,
.home #mainmenu ul#homemenu li.current a {
	color: #66ffff;
}

/* ---[ Submenu ]--- */

#wpr-submenu {
	margin: 0 -30px 30px 0;
	padding: 0 30px 10px 0;
	border-bottom: 1px solid #000;
}

.projecten #wpr-submenu {
	display: none;
}

#submenu {

}

#submenu ul li {

}

#submenu ul li a {
	display: block;
	padding: 3px 0;
	color: #6699ff;
	font-size: 93%;
	text-decoration: none;
}

#submenu ul li ul li.current a,
#submenu ul li ul li a:hover {
	color: #66ccff;
}

#submenu ul li ul li,
#submenu ul li ul li ul li {
	padding-left: 30px;
}

/* ---[ Content ]--- */

.content {
	padding: 0;
}

.M-home .content {
	padding: 30px;
	background: transparent url(/layouts/waterinzicht/images/bg_main.png) repeat top left;
}

.M-home .content.logo-home,
.M-home .content.module {
	padding: 0;
	background: none;
}

/* ---[ Paragraph formatting ]--- */

.content p {
	font-size: 93%;
	line-height: 150%;
	color: #66ccff;
}

.content.project-summary p {
	font-size: 85%;
	color: #6699ff;
}

/* ---[ Table formatting ]--- */

.content table {

}

.content table tr td {

}

/* ---[ Headers ]--- */

.content h1,
.content h2,
.content h3 {
	color: #66ccff;
}

.content h1 {
	font-size: 93%;
	font-weight: bold;
}

.content h2 {
	font-size: 93%;
	font-weight: bold;
}

.content h3 {

}

/* ---[ Links ]--- */

.content a {
	color: #66ccff;
}

.content.project-summary a {
	color: #6699ff;
}

.content a:hover {

}

/* ---[ Images ]--- */

.content img,
.content img.left {

}

.content img.right {

}

/* ---[ Text formatting ]--- */

.content strong {

}

.content em {

}

/* ---[ Lists ]--- */

.content ul {

}

.content ul li {
	margin-left: 0;
	padding: 0.1em 0 0.1em 0.7em;
	list-style-type: none;
	background: transparent url(/layouts/waterinzicht/images/bg_bullets.gif) no-repeat 0 0.75em;
	font-size: 93%;
	color: #66ccff;
}

.content ul li ul li {
	margin-left: 0.5em;
}

.content ul li ul li ul li {
	margin-left: 1em;
}

/* ---[ projects ]--- */

#projects {

}

#projects #form-filter {
	margin: 20px 30px;
}

#projects #form-filter label {
	margin-right: 10px;
	color: #66ccff;
	text-transform: uppercase;
	font-size: 85%;
	font-weight: bold;
}

#projects #form-filter select {
	border: 1px solid #66ccff;
	color: #66ccff;
	background-color: #4b4b98;
}

#projects ul {
	margin: 0;
	padding: 0;
}

#projects ul li.project {
	float: left;
	margin: 0 0 30px 0;
	padding: 0;
	width: 240px;
	background: none;
}

#projects ul li.project.odd {
	margin-top: 30px;
}

#projects ul li.project p,
#projects ul li.project img {
	margin: 0;
	float: none;
	line-height: 0;
}

#projects ul li.project a {
	display: block;
	overflow: hidden;
	height: 24px;
	background: transparent url(/layouts/waterinzicht/images/bg_sprite.png) repeat-x 0 -65px;
	padding: 3px;
	text-decoration: none;
	color: #000066;
}

#projects ul li.project a:hover,
#projects ul li.project.hover a {
	background-position: 0 -95px;
}

#projects ul li.project.hover {
	cursor: pointer;
}

#projects ul li.project a span {
	clear: both;
}

.content.project-images.slideshow {
	position: relative;
	overflow: hidden;
	height: 360px;
}

.content.project-images.slideshow .image {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: -960px;
	padding: 1px 1px 0 1px;
	width: 957px;
	height: 359px;
	text-align: center;
}

.content.project-images.slideshow .image.show {
	left: 0;
}

#info-link {
	float: right;
	margin-bottom: -30px;
	height: 30px;
	width: 60px;
}

#info-link.hover,
#info-link.current {
	background: transparent url(/layouts/waterinzicht/images/bg_sprite.png) repeat-x 0 -65px;
}

#info-link a {
	display: block;
	padding: 8px 8px 8px 0;
	background: transparent url(/layouts/waterinzicht/images/bg_info_bullet.gif) no-repeat 47px center;
	color: #66ccff;
	font-size: 77%;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	outline: 0
}

#images-menu {
	float: right;
	margin: 0 60px -30px 0;
	height: 30px;
}

#images-menu ul li {
	float: left;
	background: transparent url(/layouts/waterinzicht/images/bg_imagesmenu_separator.png) no-repeat top right;
}

#images-menu ul li a,
#images-menu ul li span {
	display: block;
	padding: 8px 5px;
	height: 14px;
	width: 15px;
	color: #66ccff;
	font-size: 77%;
	text-decoration: none;
	text-align: center;
	outline: 0;
}

#images-menu ul li.current a,
#images-menu ul li a:hover {
	background: transparent url(/layouts/waterinzicht/images/bg_sprite.png) repeat-x 0 -65px;
}

#images-menu ul li span {
	padding: 6px 8px;
	height: 18px;
	width: auto;
	background: none;
	font-size: 93%;
	font-weight: bold;
}

.content.project-images p,
.content.project-images img {
	margin: 0;
	float: none;
}

.content.project-content h1,
#filter-description h1 {
	display: block;
	margin: 0;
	padding: 6px 15px;
	height: 18px;
	background: transparent url(/layouts/waterinzicht/images/bg_sprite.png) repeat-x 0 -35px;
}

#filter-description {
	margin: 30px 0 -60px 0;
}

#filter-description.showcontent {
	margin: 0;
}

#project-page-meta {
	float: left;
	margin: 0 0 -100px 0;
	width: 960px;
	height: 100px;
}

#project-page-meta ul {
	padding: 10px 15px 0 15px;
}

#project-page-meta ul li {
	float: left;
	margin: 0;
	padding: 0 10px 10px 0;
	background: none;
	font-size: 93%;
	color: #66ccff;
}

#project-page-meta ul li.key {
	color: #6666cc;
}

/* ---[ partner logos module ]--- */

#wpr-partner-logos {
	position: absolute;
	left: 0;
	margin: 0;
	width: 100%;
	height: 120px;
	background: transparent url(/layouts/waterinzicht/images/bg_partner_logos.png) top left;
}

#partner-logos {
	margin: 0 auto;
	width: 960px;
	height: 120px;
}

#partner-logos ul {
	margin: 0;
}

#partner-logos ul li {
	margin: 0;
	padding: 0;
	float: left;
	background: none;
}

#partner-logos ul li a {
	display: block;
	height: 45px;
	background: transparent none no-repeat top left;
	text-indent: -9000px;
	outline: 0;
}

#partner-logos ul li.leven-met-water a:hover,
#partner-logos ul li.ministerie-verkeer-waterstaat a:hover,
#partner-logos ul li.provincie-zuid-holland a:hover,
#partner-logos ul li.water-net a:hover,
#partner-logos ul li.stowa a:hover,
#partner-logos ul li.bam a:hover,
#partner-logos ul li.woningbouw a:hover,
#partner-logos ul li.provincie-drenthe a:hover {
	background-position: 0 -45px;
}

#partner-logos ul li.leven-met-water a {
	width: 120px;
	background-image: url(/layouts/waterinzicht/images/bg_logo_leven_met_water.png);
}

#partner-logos ul li.ministerie-verkeer-waterstaat a {
	width: 165px;
	background-image: url(/layouts/waterinzicht/images/bg_logo_ministerie_verkeer_waterstaat.png);
}

#partner-logos ul li.provincie-zuid-holland a {
	width: 59px;
	background-image: url(/layouts/waterinzicht/images/bg_logo_provincie_zuid_holland.png);
}

#partner-logos ul li.water-net a {
	width: 101px;
	background-image: url(/layouts/waterinzicht/images/bg_logo_water_net.png);
}

#partner-logos ul li.stowa a {
	width: 169px;
	background-image: url(/layouts/waterinzicht/images/bg_logo_stowa.png);
}

#partner-logos ul li.bam a {
	width: 81px;
	background-image: url(/layouts/waterinzicht/images/bg_logo_bam.png);
}

#partner-logos ul li.woningbouw a {
	width: 130px;
	background-image: url(/layouts/waterinzicht/images/bg_logo_woningbouw.png);
}

#partner-logos ul li.provincie-drenthe a {
	width: 135px;
	background-image: url(/layouts/waterinzicht/images/bg_logo_provincie_drenthe.png);
}

.M-home #wpr-footer {
	margin-top: 170px;
}

/* ---[ logo home ]--- */

.logo-home {
	margin: 100px 0;
}

.logo-home p,
.logo-home p img {
	margin: 0;
	float: none;
	height: 105px;
}

.M-home .logo-home p {
	float: none;
	width: 960px;
}

.logo-home p.intro {
	width: 920px;
	height: 95px;
	padding: 10px 20px 0 20px;
	background: transparent url(/layouts/waterinzicht/images/bg_main.png) repeat top left;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size: 85%;
}

.logo-home p.intro img {
	margin: -10px -20px 0 10px;
}

/* ---[ home actueel ]--- */

.news-image,
.news-content {
	float: left;
	height: 100px;
}

.news-image {
	width: 240px;
}

.news-content {
	width: 600px;
}

.news-content p {
	font-size: 85%;
}

.news-content h2 {
	margin: 0 0 10px 0;
	font-size: 108%;
	text-transform: uppercase;
	font-weight: normal;
}

.news-content h2 em {
	font-style: normal;
	color: #6699ff;
}

/* ---[ google maps locations ]--- */

#map {
	margin: 1px;
	height: 600px;
}

#map a {
	display: block;
	text-decoration: none;
	line-height: 150%;
	text-transform: uppercase;
}

#map a img {
	float: none;
	margin: 10px 0 0 0;
}

.map-info-window {
	margin-bottom: 10px;
}

/* ---[ Personal remarks ]--- */

.niels  { background-color: #336600 !important; border-left: 5px solid #333300 !important; padding-left: 5px !important; }
.robbert { background-color: #cc3300 !important; border-left: 5px solid #cc0000 !important; padding-left: 5px !important; }

.niels:before {
    content: 'Niels: ';
}

.robbert:before {
    content: 'Robbert: ';
}