/* ========================================================================

	Maritiem Digitaal Styles - layout
	acdhirr for trilobiet.nl 2010
	
	you are using Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
	
======================================================================== */	


/* ------------------------------------------------------------------------
	HTML Redefs 
------------------------------------------------------------------------ */
body {
	padding: 0;
	margin: 0;
	font-family: Trebuchet MS, Verdana, Arial, Sans-serif;
	font-size: 13px;
	background: url(../img/bgpage.png) repeat-x white;
	line-height: 1.4em;
}	


/* ------------------------------------------------------------------------
	General classes
------------------------------------------------------------------------ */
.textOnly {
	display: none;
}


/* ------------------------------------------------------------------------
	Layout
------------------------------------------------------------------------ */

#layCanvas {
	position: absolute;
	top: 0; left: 50%;
	width: 994px;
	margin-left: -497px;
}

#layHead {
	position: absolute;
	top: 0; left: 0;
	width: 994px;
	height: 67px;
	background: black;
	border-bottom: solid 1px #808080;
}

	#layHead h1 {
		position: absolute;
		top: 13px; left:0;
		width: 375px;
		height: 50px;
		background: url(../img/NL/logo.png) no-repeat;
		border: none;
	}
	
	#layHead form {
		position: absolute;
		right: 0; top: 13px;
		width: 340px;
		height: 36px;
		background: url(../img/zoekbox2.png) no-repeat;
	}
	
		#layHead form input[type=text] {		
			position: absolute;
			left: 8px; top: 3px;
			width: 280px;
			height: 25px;
			background: transparent;
			border: none;
			font-size: 1.4em;
		}		

		#layHead form input[type=submit] {		
			position: absolute;
			right: 1px; top: 3px;
			width: 50px;
			height: 30px;
			background: transparent;
			border: none;
			cursor: pointer;
		}
		
	#layHead #Y0 {
		position: absolute;
		top: 0; right: 0;
		height: 67px; width: 338px;
		background: url(../img/home-yellow-bg-0.jpg);
	}

#layMenu {
	position: absolute;
	top: 69px; left: 0;
	width: 994px;
	height: 35px;
	background: #333;
	z-index: 20;
}


	#layMenu ul.sitenavi {
		list-style-type: none;
		margin: 7px 0 0 0;
		padding: 0;
		font-size: 13px;
		font-weight: bold;
	}

		#layMenu ul.sitenavi a {
			color: #ccc;
			white-space: nowrap;
		}
	
			#layMenu ul.sitenavi a:hover {
				color: #fff;
			}

		#layMenu ul.sitenavi li {
			float: left;
			padding: 0;
			margin: 0 3em 0 0;
			position: relative;
		}

			#layMenu ul.sitenavi li ul {
				z-index: 100;
				background: none repeat scroll 0 0 #333;
				display: none;
				position: absolute;
				border-style: solid;
				border-color: white;
				border-width: 1px;
				margin: 10px 0 0 -15px;
				padding: 5px 14px;
				opacity: 0.96;
			}

				#layMenu ul.sitenavi li ul li {
					padding: 5px 0 !important;
					overflow: hidden;
					font-size: 90%;
					clear: left;
				}

	#layMenu ul.langnavi {
		position: absolute;
		right: 0; top: 0;
		list-style-type: none;
		margin: 7px 0 0 0;
		padding: 0;
		font-size: 13px;
		font-weight: bold;
	}

		#layMenu ul.langnavi a {
			color: #ccc;
		}
	
			#layMenu ul.langnavi a:hover {
				color: #fff;
			}

		#layMenu ul.langnavi li {
			float: left;
			padding: 0;
			margin: 0 0 0 1em;
		}
		
#layContent {
	position: absolute;
	top: 106px; left: 0;
	width: 994px;
	margin: auto;
	padding: 20px 0 50px 0;
}

	#layContent #Foot {
		padding: 0 0 20px 0;
		margin: 20px 0;
		clear: both;
		border-top: 2px dotted #999;
	}
	
		#layContent #Foot #GoogleTranslateBranding {
			float: right;
			padding: 20px 0 5px 0;
		}	

		#layContent #Foot .menu {
			padding: 20px 0;
			text-align: center;
		}

			#layContent #Foot .menu ul {
				list-style-type: none;
			}
			
				#layContent #Foot .sitenavi {
					max-width: 700px;
				}
	
					#layContent #Foot .sitenavi li.group a {
						display: none;
					}
	
					#layContent #Foot .sitenavi li {
						float: left;
						margin: 0 1em 0 0;
						font-size: 90%;
					}
					
					#layContent #Foot .sitenavi li ul.subnav {
						display: block;
					}
					
					#layContent #Foot .sitenavi li.group .subnav a {
						display: inline;
					}	
	
					#layContent #Foot .menu li a {
						color: #999;
					}
					
						#layContent #Foot .menu li a:hover {
							color: navy;
						}
						
				#layContent #Foot .langnavi {
					position: absolute;
					right: 0px;
					width: 110px;				
				}
	
					#layContent #Foot .langnavi li {
						float: right;
						margin: 0 0 0 10px;
					}


			#layContent #Foot .menu ul ul {
				display: none;
			}
			
			#layContent #Foot .menu ul li.hideInFooter {
				display: none;
			}


		#layContent #Foot .credits {				
			float: right;
			clear: right;
			font-size: 90%;
			color: #999;
		}

			#layContent #Foot .credits a {				
				color: #999;
			}
			
		#layContent #Foot .button-selections {
			display: none;
		}

/* ------------------------------------------------------------------------
	Home page styles
------------------------------------------------------------------------ */
#home {
	background: url(../img/bghome.png) repeat-x;
}

#home #layBanner {
	position: absolute;
	left: 0; top: 68px;
	height: 224px;
	width: 100%;
}

	#Largepic {
		position: absolute;
		left: 0; top: 0;
		height: 223px; /* allow for a 1px bottom border */
		width: 655px;
		overflow: hidden;
	}
		
	#home #layBanner .mask {
		position: absolute;
		top: 0;	left: 0;
		height: 244px; width: 655px;
		background: url(../img/home-mask.png);
	}
	
	#RandomImage {
		margin-top: -100px;
	}

#home #laySearch {
	position: absolute;
	top: 0; right: 0;
	width: 298px; height: 160px;
	background: url(../img/home-yellow-bg-1.jpg);
	padding: 10px 20px;
}

	#home #laySearch h3 {
		background: url(../img/NL/searchheader.png) no-repeat;
		width: 285px; height: 40px;
	}

	#home #laySearch form {
		position: absolute;
		left: 25px; top: 50px;
		width: 285px;
		height: 36px;
		background: url(../img/zoekbox1.png) no-repeat;
	}
	
		#home #laySearch form input[type=text] {		
			position: absolute;
			left: 8px; top: 3px;
			width: 225px;
			height: 25px;
			background: transparent;
			border: none;
			font-size: 1.4em;
		}		

		#home #laySearch form input[type=submit] {		
			position: absolute;
			right: 1px; top: 3px;
			width: 50px;
			height: 30px;
			background: transparent;
			border: none;
			cursor: pointer;
		}
		
		#home #laySearch #Introtext {
			position: absolute;
			top: 100px;	width: 285px;
			height: 65px; left: 25px;
			font-size: 11px;
			overflow: hidden;
			font-size: 11px;
			font-weight: bold;
			line-height: 1.4em;
		}	
	

#home #layMenu {
	top: 247px;
	height: 44px;
	border-top: solid 1px #9D9B9B;
	background: url(../img/home-yellow-bg-2.jpg) no-repeat top right transparent;
}

	#home #layMenu .menu {
		position: absolute;
		width: 100%;
		z-index: 10;
	}
	
	#home #layMenu ul.sitenavi li ul {
		border-width: 1px 5px 5px 5px;
		padding: 5px 10px;
		margin: 15px 0 0 -15px;
	}
	
	#home #layMenu ul.langnavi {
		right: 32px;
	}

	#home #layMenu .mask {
		position: absolute;
		top: 0; left: 0;
		height: 43px; /* covers all but last pixel row to suggest a border */
		width: 655px;
		background: white;
		opacity: 0.2;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 
		filter: alpha(opacity=20);			
	}
	
	#home #layMenu ul.sitenavi,
	#home #layMenu ul.langnavi {
		font-size: 15px;
		color: white;
		margin: 11px 0;
	}
	
	#home #layMenu a:hover {
		text-decoration: none;
	}


#home #layContent {
	top: 293px;
	padding: 0;
}

	#home #Sidebar {
		float: right;
		width: 288px;
		background: url(../img/bgsidebar3.png) no-repeat;
		padding: 7px 25px;
	}
	
		#home #Sidebar h3 {
			font-weight: bold;
			font-size: 14px;
			float: left;
			margin-right: 10px;
		}

		#home #Sidebar div.iconlink {
			display: block;
			border-bottom: 2px dotted #E7B715;
			clear: right;
			min-height: 70px;
			padding: 5px 0px;
			vertical-align: middle;
		}
		
			#home #Sidebar a.iconlink  {
				display: block;
				height: 70px;
			}

				#home #Sidebar a.iconlink:hover  {
					text-decoration: none;
				}

			#home #Sidebar .iconlink .head {
				color: #540;
				display: block;
				float: left;
				font-size: 15px;
				font-weight: bold;
				padding-top: 30px;
				width: 198px;
				white-space: nowrap;
			}

			#home #Sidebar div.iconlink img {
				margin: -8px -10px 0 0;
				float: right;
			}


#home #Maincol {
	margin: 30px 0 50px 0;
	width: 625px;
	padding: 0 20px 0 0;
}

#home #IntroText {
}

#home #CollectionsList {
	clear: left;
	height: 220px;
	margin: 30px 0 0 0;
}

	#home #CollectionsList li {
		font-size: 1.2em;
		display: block;
		height: 100px;
		width: 125px;
		float: left;
	}

	#home #CollectionsList a {
		color: #333;
	}
	
	#home #CollectionsList a:hover {
		text-decoration: none;
	}

		#home #CollectionsList .imagewrapper {
			position: relative;
		}
		
			#home #CollectionsList .imagewrapper .porthole {
				display: none;
			}
		
				#home #CollectionsList .imagewrapper:hover .porthole {
					display: inline;
				}
	
			#home #CollectionsList .imagewrapper span {
				display: none;
			}	
				
				#home #CollectionsList .imagewrapper:hover span {
					display: block;
					position: absolute;
					width: 600px;
					top: 80px;
					left: 0;
					z-index: 10;
					font-size: 15px;
					font-weight: bold;			
					color: #763;
				}	
		
			#home #CollectionsList .imagewrapper img {
				position: absolute;
			}


#home #FeaturedCollection {
	margin: 30px 0 0 0;
	clear: left;
}

	#home #FeaturedCollection h1 span {
		text-transform: lowercase;
	}
	
	#home #FeaturedCollection .randompic {
		height: 175px;
		position: relative;
		margin: 15px 0 0 0;
	}
	
	#home #FeaturedCollection .randompic a.image {
		display: block;
		float: left;
		margin: 0 10px 0 0;
		width: 250px;
		height: 175px;
		border: 1px solid #999;
		background-position: 50% 30%;
		background-color: #ddd;
		background-repeat: no-repeat;
	}
	
	#home #FeaturedCollection .randompic a.image img {
		display: none;
	}
	
	#home #FeaturedCollection .randompic .wheretofind {
		margin-top: 1em;
	}
	
	#home #FeaturedCollection .randompic .wheretofind img {	
		vertical-align: middle;
		border: none;
	}	
	
	#home #FeaturedCollection .randompic .showmore {
		margin-top: 1em;
		font-weight: bold;
		text-transform: lowercase;
	}


#home #LastComments {
	margin: 20px 0 50px 0;
	clear: left;
}

	#home #LastComments .comment {
		padding: 0 0 .5em 0;
		margin: 0 0 1.5em 0;
		font-size: 90%;
		height: 100px;
	}

		#home #LastComments .comment a {
			background: url("../img/noimg.jpg") no-repeat scroll 30px 30px white;
			display: block;
			margin: 0 15px 5px 0;
			height: 100px;
			width: 100px;
			float: left;
		}

		#home #LastComments .comment div {
			width: 100px;
			height: 100px;
			float: left;
			background-position: 35% 35%;
			background-repeat: no-repeat;
			background-color: #333;
			border: solid 1px transparent;
		}
		
			#home #LastComments .comment div:hover {
				border: solid 1px #000;
			}

			#home #LastComments .comment div img {
				display: none;
			}
			
		#home #LastComments .comment h4 {
			font-weight: bold;
			margin: 0 0 .5em 0;
		}