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

	Maritiem Digitaal Styles - content
	acdhirr for trilobiet.nl 2010
	
======================================================================== */	


/* ------------------------------------------------------------------------
	HTML Redefs 
------------------------------------------------------------------------ */
a {
	text-decoration: none;
	color: navy
}

	a:hover {
		text-decoration: none;
	}

	a.external {
		padding-right: 17px;
		background: url(../img/external.png) no-repeat right 50%;
	}

td, th {
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

/* ------------------------------------------------------------------------
	General classes
------------------------------------------------------------------------ */
.message {
	color: green;
}

.noBorder {
	border: none !important;
}

.highlight {
	color: green;
	font-weight: bold;
}

.thumb {
	margin: 0 5px 5px 0;
	width: 80px;
	height: 80px;
	padding: 2px;
	border: dotted 1px #999;
	float: left;
}
	
	.thumb a {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		width: 80px;
		height: 80px;
	}
	
		.thumb:hover  {
			background: #eee;
			border: solid 1px #000;
		}
		
		.thumb a img {
			width: 80px;
			max-height: 80px;
		}

.addthis_toolbox a:hover {
	text-decoration: none;
}

			
/* ------------------------------------------------------------------------
	Content styles
------------------------------------------------------------------------ */

/* autocomplete picklist */	
#Tempsug {
	border: solid 1px #999;
	border-top: none;
	padding: 5px;
	height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
	width: 245px;
	background: white;
	position: absolute;
}

	#layHead #Tempsug, .homepage #Tempsug {
		font-weight: bold;
		position: absolute;
		z-index: 100;
		top: 36px;
		border-top: none;
	}

	#layHead #Tempsug {
		width: 326px;
		background: #FFCE10;
		border: solid 2px #FFCE10;
		border-top: none;
	}
	
	.homepage #Tempsug {
		width: 271px;
		background: #FFDE10;
		border: solid 2px #FFDE10;
		border-top: none;
	}
	
	#Tempsug li {
		cursor: default;
	}


/* on hover image preview */
#pimg {
		position: absolute;
		z-index: 9999;
		max-width: 230px;
		padding: 0 15px 15px 0;
		background: url(../img/dropshadow.png) bottom right;
}

	#pimg div {
		border: solid 1px #333;
		/*outline: solid 1px white;*/
		padding: 5px;
		background: #eef;
		text-align: center;
		font-weight: normal;
		background: white;
	}

	#pimg h3 {
		font-weight: normal;
	}
	
	#pimg img {
		max-width: 205px;
	}

	/* pimg resides in body! */
	body#getsimplesearch #pimg {
		max-width: 300px;
		display: block;	
	}


/* headers ------------------------------------------------------------- */

h1 {
	color: #A27715;
	font-size: 1.5em;
	letter-spacing: 1px;
	padding: 0 0 .3em 0;
	border-bottom: dotted 2px #A27715;
	margin: 0 0 .5em 0;
	line-height: 1.5em;
}

h2 {
	color: #666;
	font-size: 1.2em;
}


/* general styling -------------------------------------------------------- */

.errors {
	list-style-type: disc;
	color: #CC0000;
}

.searchform-large {
}

	.searchform-large th {
		padding: .7em 2em .7em 0;
		width: 10em;
	}

	.searchform-large tr {
		border-bottom: dotted 1px #aaa;
	}
	
	.searchform-large td {
		padding: .7em 2em .7em 0;
	}

	.searchform-large button {
		background: #E7B715;
		border: 2px solid #888888;
		color: #333333;
		font-size: 1.2em;
		font-weight: bold;
		padding: 0.1em 2em;
	}

	.searchform-large select,
	.searchform-large input[type='text'] {
		width: 250px;
		padding: .2em;
		border: solid 1px #999;
	}
	
		.searchform-large input[type='text']:hover {
			background: #ddd;
			border: solid 1px black;
		}

.searchutils {
}

	.searchutils h1 {
		font-size: 1.2em;
		margin-top: 2em;
	}


table.detail {
	width: 100%;	
	margin: 5px 0  20px 0;
}

	table.detail tr {
		border-bottom: dotted 1px #aaa;
	}

	table.detail th {
		padding: 0.2em 1.5em 0.2em 0;
		width: 11em;
		font-weight: bold;
		font-size: 90%;
		text-align: right;
		text-transform: lowercase;
		color: #666;
	}

	table.detail td {
		padding: 0.2em 2em 0.2em 0;
	}

	table.detail td hr {
        color:transparent;
        border:none;
        border-top:1px dotted #aaa;
        height:1px;
        margin: 4px 0 2px;
	}
	

		
/* results ------------------------------------------------------------- */
/* also used for selections */

table.results {
	width: 100%;
	margin-top: 2em;
}

	table.results tr {
	}

	table.results th {
		background: #666;
		color: white;
		text-align: center;
		padding: .2em 1em .2em 1em;
		font-weight: bold;
		border-right: solid 1px #aaa;
	}

	table.results td {
		padding: .2em 1em .2em 1em;
		vertical-align: middle;
		border-bottom: dotted 2px #999;
	}
	
	table.results td:first-child + td {
		width: 300px;
	}
	
		table.results td.image {
			text-align: center;
			padding: 5px;
		}

		table.results td.image div {
			padding: 5px;
			border-left:1px dotted #999;
			border-right:1px dotted #999;
		}
		
			table.results td.image div img  {
				border: solid 1px #000;
			}
			
	table.results td .creators {
		color: #784410;
		margin-top: .5em;
	}
			
		table.results td .creators a {	
			color: #784410;
		}
			
/* overridden thumb properties */			
.resultsgallery {
	margin-top: 2em;
}			
	
	.resultsgallery .thumb {
		position: relative;
		height: 180px;
		width: 180px;
		margin: 0 15px 15px 0;
	}
			
		.resultsgallery .thumb a {
			height: 180px;
			width: 180px;
		}
			
			/* fit and keep aspect ratio */
			.resultsgallery .thumb a img {
				width: 140px;
				max-height: 140px;
			}

.resultsgallery .number {
	position: absolute;
	top: 0;	left: 0; 
	padding: 2px 4px 4px 4px;
	color: #777;
}



/* pagination --------------------------------------------------------- */		
.pagination {
	width: 100%;
	margin: 1em 0;
	padding: 1em 0;
	text-align: center;
	border: 1px dotted #000;
}

	.pagination a {
		border: solid 1px transparent;
	}

	.pagination a:hover {
		border: solid 1px #666;
	}

	.pagelist {
		width: 33%;
		height: 4em;
		text-align: center;	
		display: inline;	
	}

		.pagelist span, .pagelist a {
			padding: 0 .5em;
			color: #009;
			font-weight: bold;
		}
		
		.pagelist .disabled {
			color: #999;
		}
		
		.pagelist .active {
			color: white;
			background: #333;
		}
	
	.pageprev {
		width: 50%;
		text-align: right;
		display: inline;	
	}
	
	.pagenext {
		width: 50%;
		text-align: left;
		display: inline;	
	}

		.pageprev a, .pagenext a {
			padding: 0 .5em;
			font-weight: bold;
			font-size: 1.5em;
		}


/* selections --------------------------------------------------------- */
#formMailSelections {
	margin: 1em 0;
}


/* detail ------------------------------------------------------------- */
#Detail {
	width: 600px;
	float: left;
}

	#Detail .view {	
		width: 100%;
		background: #333;
		text-align: center;
		padding: 10px 0;
		margin: 0 0 1px 0;
	}
	
		#Detail .view img {	
			max-height: 95%;
			max-width: 95%;
		}
	

	#Detail .thumbs {
		width: 100%;
		overflow-x: auto;
		background: #666;
	}

		#Detail .thumbs li {
			float: left;
			width: 100px;
			height: 100px;
			border-color: white;
			border-style: solid;
			border-width: 0 1px 1px 0;
		}
		
		#Detail .thumbs .thumb {
			display: block;
			height: 100%;
			width: 100%;
			opacity: 0.6;
			border: none;
			padding: 0;
			margin: 0;
		}
		
			#Detail .thumbs li:hover .thumb {
				opacity: 1;
				border: none;
			}
		
		#Detail .thumbs img {
			display: none;
		}
		
	#Detail .marhisdatalink {
		margin-left: 6px;
		cursor: pointer;
	}

		#Detail .marhisdatalink img {
			vertical-align: middle;
		}


	#Detail .comments {
	}
	
		#Detail .comments .comment {
			padding: 0 0 1em 11em;
			margin: 0 0 1em 0;
			border-bottom: dotted 1px #aaa;
		}
		
		#Detail .comments .commentheader {
			font-weight: bold;
			font-size: 90%;
			display: block;
			color: #888;
			margin: 0 0 .5em 0;
		}

			#Detail .comments .commentheader:hover {
				color: #000;
			}

		#Detail .comments .userupload {
			background: #666;
			text-align: center;
			padding: 20px;
			margin: 1em 0;
		}

			#Detail .comments .userupload img {
				max-width: 410px;
			}

	#Detail .controls {
		float: right;
		margin: 5px 0 0 0;
	}
	
		#Detail .controls span {
			margin-left: 5px;
		}


#CommentForm {
}

	#CommentForm input, #CommentForm textarea {
		 width: 90%;
	}
	
	#CommentForm .subhead {
		display: block;
		margin: 1em 0 .5em 0;
	}


#Related {
	width: 338px;
	float: right;
}

	#Related .gallery .relateditem {
		margin: 0 0 5px 0;
		font-size: 90%;
		font-weight: bold;
		overflow: hidden;
	}

		#Related .gallery .relateditem a span {
			font-weight: normal;
			color: black;
		}

		/* make square */
		#Related .gallery .relateditem a img {
			width: 80px;
			height: 80px;
		}


			
/* search history ----------------------------------------------------------- */			

table.searchhistory {
	margin: 0 0 1em 0;
}

	table.searchhistory td {
		padding: .2em 2em .2em 0;
		vertical-align: middle;
		border-bottom: dotted 1px #aaa;
		vertical-align: top;
	}


	

/* collections ----------------------------------------------------------- */			
.collection {
}

	.collection .thumb {
		margin: 0 13px 13px 0;
	}

		/* make square */
		.collection .thumb a img {
			width: 80px;
			height: 80px;
		}


/* comments page --------------------------------------------------------- */			
#Comments {
}

	#Comments .commentsquicksearch {
		float: right;
	}

	#Comments .comment {
		border: solid 1px #CCC;
		border-color: #CCC #AAA #AAA #CCC;
		width: 300px;
		padding: 5px;
		margin: 0 0 10px 0;
		float: left;
		cursor: pointer;
		background: url("../img/paper1a.jpg") repeat scroll -20px -20px transparent;
	}
	
		#Comments .col {
			float: left;
			width: 340px;
		}
	
		#Comments .lastcol {
			float: left;
			width: 310px;
		}
	
	#Comments h4 {
		padding: 0 0 .3em 0;
		margin-bottom: .5em;
		border-bottom: dotted 2px #666;
		font-size: 1.2em;
		text-transform: capitalize;
	}

		#Comments h4 a {
			color: #333;
		}

	#Comments .image {
		padding: 5px;
		text-align: center;
		width: 80px;
		float: right;
	}
	
		#Comments .image img {
			max-width: 80px;
		}


/* museums page --------------------------------------------------------- */			
#Museums {
}

	#Museums .museum {
		padding: 0 1px 20px 0;
	}

		#Museums .museum .museumhead {
			width: 100%; 
			height: 100px; 
			background-position: 30% 50%;
		}

		#Museums .museum .museumdesc {
			padding: 1em 1em 0 0;
		}
		
			#Museums .museum .museumdesc h2 {
				color: #A27715;
				font-size: 1.2em;				
			}
			
			
/* blogs page --------------------------------------------------------- */			
#Blogs {
}		

	#Blogs .blog {
		margin: 0;
		min-height: 85px;
		padding: 40px 0 0;
		border-top: dotted 2px #ccc;
	}	
	
		#Blogs .bloglist .blog:first-child {
			border: none;
		}
	
		#Blogs .blog img {
			float: left;
			margin: -30px 20px 0 0;
		}

		#Blogs .blog h2 {
			margin-bottom: 0.5em;
		}	
		
/* help page --------------------------------------------------------- */			
#Helppage {
}		

	#Helppage h3 {
		margin: 1em 0;
	}
		
	#Helppage ul {	
		list-style-type: disc;
		padding-left: 1.5em;
	}
	
/* links page -------------------------------------------------------- */			
#Links {
}

	#Links h2 {
		margin: 1em 0 .5em 0;
		padding: 0 0 .5em 0;
		border-bottom: dotted 2px #AAA;
		text-transform: capitalize;
	}