html {
	border: 0px;
}

body {
	background-color: white;
	text-align: center;
	margin: 0px;
	border: 0px;
}

ul {
	
}

p {
	margin: 0px;
}

/*******************************************************************************
** FONTS
*******************************************************************************/

/**
 * All styles that should have the standard font.
 */
body, table, input, textarea, select {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 11px;
	line-height: 150%;
}

/**
 * All styles that should have the lighter gray color.
 */
div.topside {
	color: gray;
}

/*******************************************************************************
** Styles that make out the lay-out of the page.
*******************************************************************************/

/**
 * All styles that should be centered on the page or that make out the width of
 * some main page elements.
 */
div.topside, div.blackbar div, div.maindiv div.centerdiv, #kerndiv div {
	margin-left: auto;
	margin-right: auto;
	width: 835px;
	text-align: justify;
}

/**
 * Topside of the page contains a (bulleted) list of artists and the main
 * logo.
 */
div.topside {
	margin-top: 10px;
	margin-bottom: 10px;
	height: 83px;
	overflow: hidden;
}

	div.topside img.logo {
		float: left;
		margin: 2px;
	}
	
	div.topside ul {
		margin-top: 35px;
		float: left;
		width: 580px;
		padding-left: 0px;
		margin-left: 10px;
		margin-bottom: 0px;
	}
	
	div.topside li {
		display: block;
		float: left;
		background-image: url("/graphics/kunsthuizen/bullet.png");
		background-repeat: no-repeat;
		background-position: left;
		padding-left: 12px;
		margin-right: 3px;
	}

/**
 * Both top and bottom of the page contain black - full width - bars.
 */
div.blackbar {
	background-color: black;
	clear: left;
	margin-bottom: 9px;
}

	div.blackbar img {
		margin: 7px;
		margin-left: 18px;
	}

/**
 * Main div is a 100% wide div, with a light gray top border
 */
div.maindiv {
	border-top: 1px solid #C2C2C2;
}

/**
 * Left column, containing the menu and ... if applicable ... the logos.
 */
div.maindiv div.centerdiv div.lftcol {
	width: 140px;
	float: left;
	overflow: hidden;
}

	/**
	 * The main menu on the lefthand side of the page.
	 */
	#leftmenu, .submenu {
		font-weight: bold;
		text-transform: uppercase;
		line-height: 100%;
	}
	
	#leftmenu {
		overflow: hidden;
	}
	
		#leftmenu a, .submenu a {
			display: block;
			color: white;
			padding: 7px;
			text-decoration: none;
			text-align: left;
		}
		
		#leftmenu a:hover, .submenu a:hover {
			background: black;
		}
	
		#leftmenu a.selectedlink, .submenu a.selectedlink {
			background: black;
		}
	
	/**
	 * The block containing the logos on the homepage.
	 */
	div.maindiv div.centerdiv div.lftcol div.logos {
		background-repeat: repeat-x;
		background-position: top;
		height: 240px;
	}
	
		div.maindiv div.centerdiv div.lftcol div.logos a {
			display: block;
			padding-top: 4px;
			padding-bottom: 3px;
			background-color: white;
		}
		
		/**
		 * A white rectangle to place instead of the logos on the location-specific
		 * homepages.
		 */
		div.maindiv div.centerdiv div.lftcol div.logos div.whiteness {
			height: 240px;
			background-color: white;
			overflow: hidden;
		}
		
/*
 * The central content block on the website, which may be divided into
 * 4 rectangles on the homepage.
 */
div.contentblock {
	width: 638px;
	float: left;
	overflow: hidden;
	border-left: 1px solid #C2C2C2;
	border-bottom: 1px solid #C2C2C2;
}

	div.contentblock div.rgtcol {
		width: 124px;
		padding: 8px;
		height: 234px;
		border-left: 1px solid #F1F1F1;
		float: right;
	}
	
		div.contentblock div.rgtcol img {
			border: 0px;
		}

		div.contentblock div.rgtcol div.placeholder {
			height: 13px;
			overflow: hidden;
		}

		div.contentblock div.rgtcol a.feature {
			display: block;
			border: 1px solid silver;
			margin-top: 5px;
		}
		div.contentblock div.rgtcol a.feature:hover {
			margin-top: 4px;
			margin-bottom: 1px;
			margin-left: -1px;
			border: 1px solid gray;
			border-right: 2px solid #838F1B;
			border-bottom: 2px solid #838F1B;
		}
	
	div.contentblock h1.pagetitle {
		background-color: black;
		color: white;
		text-transform: uppercase;
		padding: 2px;
		padding-left: 15px;
		font-size: 14px;
		margin: 0px;
	}
	
	div.contentblock div.padding {
		padding: 15px;
	}
	
			div.contentblock #photoplayer {
				height: 225px;
				width: 247px;
				float: left;
				overflow: hidden;
				border-right: 1px solid #C2C2C2;
				margin: 0px;
			}
			
			div.contentblock #hptext1, div.contentblock #hptext2 {
				height: 229px;
				width: 232px;
				float: left;
				line-height: 13px;
				padding: 8px;
				padding-top: 6px;
				overflow: hidden;
				background-repeat: repeat-y;
			}
			
			div.contentblock #hptext1 {
				background-position: left;
				height: 212px;
			}
			
			div.contentblock #hptext2 {
				background-position: right;
				height: 222px;
				width: 231px;
				border-right: 1px solid #C2C2C2;
			}
		
			div.contentblock #newstuff {
				width: 389px;
				height: 236px;
				padding: 0px;
				float: right;
			}
			
				div.contentblock #newstuff a {
					display: block;
					text-decoration: none;
					color: black;
					height: 114px;
					overflow: hidden;
					padding: 3px;
					padding-right: 0px;
					width: 315px;
					cursor: pointer;
				}
				
				div.contentblock #newstuff a:hover {
					background-color: #F6FFED;
					border-right: 2px solid #7C871A;
					border-bottom: 2px solid #7C871A;
				}
				
				div.contentblock #newstuff h1 {
					margin: 0px;
					margin-bottom: 1px;
					margin-right: 5px;
					background-color: black;
					color: white;
					padding: 2px;
					padding-bottom: 1px;
					text-transform: uppercase;
					font-size: 14px;
					text-align: center;
				}
				
				div.contentblock #newstuff div.hp_new {
					background-position: center;
					background-repeat: no-repeat;
					float: left;
					border: 1px solid black;
					width: 100px;
					height: 90px;
					margin-right: 2px;
				}
			
#bottommenu, #kunsthuizen {
	float: left;
	width: 375px;
	overflow: hidden;
}

	#bottommenu a, #bottommenu span, #kunsthuizen a {
		display: block;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 12px;
		padding: 3px;
		padding-left: 10px;
		padding-right: 10px;
		font-weight: bold;
	}

	#bottommenu a, #bottommenu span {
		color: white;
		float: left;
	}
	
	#bottommenu a:hover {
		color: #E50038;
	}
	
	#bottommenu a.selectedlink {
		color: #E50038;
	}
	
	#bottommenu a, #bottommenu span {
		border-left: 1px solid white;
	}
	
	#kunsthuizen a {
		float: right;
	}
	
.copyright {
	text-align: right;
	font-size: 10px;
	padding-right: 30px;
	color: gray;
}

/*******************************************************************************
** Styles that are used for blocks on the page with a special purpose.
*******************************************************************************/

.rightBoxContainer {
	float: right;
	margin-left: 20px;
	width: 285px;
	margin-bottom: 15px;
}

/*
 * The inTextBlock links are blocks that may be clicked to show another link
 * with extra info.
 */
a.inTextBlockLeiden, a.inTextBlockDelft, a.inTextBlockAlkmaar, a.inTextBlockUitleen,
		a.columnBlock {
	border: 1px solid black;
	margin: 0px;
	color: black;
	display: block;
	text-decoration: none;
}

a.inTextBlockLeiden, a.inTextBlockDelft, a.inTextBlockAlkmaar, a.inTextBlockUitleen {
	padding: 15px;
	padding-top: 5px;
	padding-bottom: 10px;
}

a.inTextBlockLeiden, a.inTextBlockDelft, a.inTextBlockAlkmaar {
	width: 255px;
}

a.inTextBlockUitleen {
	margin-bottom: 15px;
}

	a.inTextBlockLeiden					{	border: 2px solid #2F91CA; }

	a.inTextBlockLeiden:hover		{	background-color: #E9F7FF; border-color: black; }

	a.inTextBlockDelft 					{	border: 2px solid #E60138; }

	a.inTextBlockDelft:hover		{	background-color: #FFF7F9; border-color: black; }

	a.inTextBlockAlkmaar				{	border: 2px solid #F18D0F; }

	a.inTextBlockAlkmaar:hover	{	background-color: #FFFBF5; border-color: black; }
	
	a.inTextBlockUitleen				{	border: 2px solid #2F91CA; }

	a.inTextBlockUitleen:hover	{	background-color: #E9F7FF; border-color: black; }

	a.columnBlock								{	border: 2px solid #2F91CA; }
	
	a.columnBlock:hover					{	background-color: #E9F7FF; border-color: black; }

		a.inTextBlockLeiden span.leesmeer,
		a.inTextBlockDelft span.leesmeer,
		a.inTextBlockAlkmaar span.leesmeer,
		a.columnBlock span.leesmeer {
			color: blue;
			text-decoration: underline;
			display: block;
			text-align: right;
		}
		
.contentblock .text .inTextBlockUitleen {
	text-decoration: none;
	color: black;
}
	
/**
 * Box 1 through 4 are used as "pop-up" boxes, that may be shown when an
 * inTextBlock link is clicked.
 */
#box1, #box2, #box3, #box4 {
	width: 530px;
	visibility: hidden;
	position: absolute;
	margin-left: 200px;
	display: block;
	text-decoration: none;
	color: black;
	padding: 10px;
	line-height: 150%;
	filter: alpha(opacity=95, style=0);
	opacity: 0.95;
}

	#box1 .contact_big, #box2 .contact_big, #box3 .contact_big, #box4 .contact_big {
		font-size: 19px;
		font-weight: bold;
		line-height: 125%;
	}

	#box1 {	top: 338px; background-color: #E9F7FF; border: 2px solid #2F91CA; }

		#box1 .contact_big { color: #2F91CA; }

	#box2 {	top: 495px; background-color: #FFF7F9; border: 2px solid #E60138; }
	
		#box2 .contact_big { color: #E60138; }

	#box3 {	top: 625px; background-color: #FFFBF5; border: 2px solid #F18D0F; }
	
		#box3 .contact_big { color: #F18D0F; }

	#box4 {	top: 625px; background-color: #F4F8D4; border: 2px solid #CADB29; }
	
		#box4 .contact_big { color: #F18D0F; }
		
	#box1 img.pic, #box2 img.pic, #box3 img.pic, #box4 img.pic {
		float: right;
		border: 1px solid gray;
		margin-left: 15px;
	}
	#box1 img.pic, #box2 img.pic, #box3 img.pic, #box4 img.pic {
		float: right;
		border: 1px solid gray;
		margin-left: 15px;
	}
	
	a.inTextBlockUitleen .leesmeer, #box1 .leesmeer, #box2 .leesmeer, 
			#box3 .leesmeer, #box4 .leesmeer {
		display: block;
		margin-top: 15px;
		color: navy;
	}
	
		
/*
 * The columnblock is the block for each column on the "column overview page".
 * Resembles the "intextBlock...etc" classes, so part of this block is also
 * defined in that (main) class
 */
a.columnBlock {
	width: 580px;
	overflow: hidden;
}
	
	a.columnBlock img {
		float: right;
		margin: 0px 0px 0px 15px;
		border: 0px;
	}
	
	a.columnBlock div {
		padding: 10px;
	}
	
	a.columnBlock h1 {
		padding: 0px;
		margin-left: 0px;
		margin-bottom: 6px;
	}
		
/**
 * This style is used for tables that have examples in them.
 */
.exampleTABLE {
	font-size: 11px;
	background: #EEEEEE;
	border: 1px solid #999999;
	margin-top: 9px;
	margin-bottom: 9px;
}

/*******************************************************************************
** Styles that are used for absolutely positioned blocks.
*******************************************************************************/

#kerndiv {
	height: 177px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: -15px;
}

	#kerndiv div {
		background-image: url("/graphics/kunsthuizen/kernpunten.png");
		background-position: right;
		background-repeat: no-repeat;
		height: 177px;
	}
	
#middleline {
	position: absolute;
	top: 401px;
	left: 0px;
	width: 100%;
	height: 1px;
	background-color: #C2C2C2;
	overflow: hidden;
}

/**
 * The submenu absolutely positioned div, which is positioned with JavaScript.
 */
.submenu {
	height: 54px;
	position: absolute;
	border: 1px solid white;
	border-left: 0px;
}

/*******************************************************************************
** Styles for the artwork overview
*******************************************************************************/

#artworks {
}

	#artworks div.prevbutton, #artworks div.nextbutton, #artworks div.artistselect {
		float: left;
		height: 16px;
		margin-top: 10px;
		margin-bottom: 7px;
		color: silver;
		font-size: 12px;
		padding-bottom: 3px;
		overflow: hidden;
	}
	#artworks div.prevbutton, #artworks div.nextbutton {
		width: 130px;
		text-align: right;
	}
	#artworks div.artistselect {
		width: 300px;
	}
	
		#artworks div.prevbutton a, #artworks div.nextbutton a {
			color: #6B6B6B;
			text-decoration: none;
		}
	
		#artworks div.prevbutton a:hover, #artworks div.nextbutton a:hover {
			color: red;
			text-decoration: none;
		}
		
	#artworks div.artistselect select {
		width: 180px;
	}		

	#artworks	div.artw {
		float: left;
		width: 102px;
		height: 202px;
		margin: 5px;
		overflow: hidden;
	}
	
		#artworks div.artw a.artworkimg {
			height: 102px;
			border: 1px solid gray;
			padding: 0px;
			margin: 0px;
			margin-bottom: 3px;
			display: block;
			overflow: hidden;
			text-align: center;
		}
		
			#artworks div.artw a.artworkimg img {
				border: 0px;
			}
		
		#artworks div.artw div.description {
			text-align: center;
			font-size: 10px;
			height: 76px;
			border: 1px solid black;
			border-bottom: 0px;
			overflow: hidden;
		}
		
		#artworks div.artw div.availability {
			text-align: right;
			color: #E4E4E4;
			font-size: 8px;
			border: 1px solid black;
			border-top: 0px;
			margin: 0px;
		}
		
/*******************************************************************************
** Styles for the artist overview
*******************************************************************************/

#artists {
}
	
	#artists div.selectdiv {
		margin-left: 7px;
		_margin-left: 15px;
		padding: 8px;
		width: 550px;
		padding-top: 0px;
		background: #F2F2F2;
		border: 1px solid silver;
		overflow: hidden;
		height: 35px;
	}

	#artists div.artist {
		float: left;
		width: 178px;
		height: 130px;
		border: 1px solid #999999;
		margin: 7px;
		text-align: left;
		background-color: #F2F2F2;
	}
	
		#artists div.artist a {
			font-size: 12px;
			text-decoration: none;
			color: gray;
		}
	
		#artists div.artist a:hover {
			color: red;
		}

		#artists div.artist h1 {
			background: black;
			padding: 2px;
			color: white;
			margin: 0px;
		}
		
			#artists div.artist h1 a {
				font-weight: bold;
				color: white;
			}
		
		#artists div.artist img {
			float: right;
			border: 1px solid black;
		}
		
	#artists div.artist div.descr, #artists div.artist div.descr div {
		padding: 3px;
	}
	
/*******************************************************************************
** Styles for the messages overview and a specific message
*******************************************************************************/

#messages {
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 15px;
	padding-top: 0px;
}

/*******************************************************************************
** Styles of the advanced searchform.
*******************************************************************************/
	
form.searchform {
	padding: 15px;
	border: 1px solid #999999;
	background-color: #EEEEEE;
	margin-top: 15px;
}

form.searchform select {
	width: 150px;
}

/*******************************************************************************
** Styles for the popup window, in which the following items are featured:
** - Columns
*******************************************************************************/
	
	#popup {
	
	}
	
		#popup img {
			border: 1px solid black;
			margin: 10px;	
		}
		
		#popup button {
			background-color: #E50038;
			border:1px solid white;
			font-weight: bold;
			font-family: Tahoma, Verdana, Arial, Georgia, sans-serif;
			font-size: 11px;
			padding: 2px;
			color: white;
		}
		
		#popup .header, #popup .footer {
			position: absolute;
			background: black;
			color: white;
			font-size: 14px;
			text-transform: uppercase;
			padding: 4px;
			font-weight: bold;
			width: 100%;
			height: 20px;
		}
		
		#popup .header {	top: 0px; left: 0px; }
		
		#popup .footer {	bottom: 0px; left: 0px; }
		
		#popup .contentdiv {
			text-align: justify;
			padding-top: 10px;
			padding-left: 15px;
			padding-right: 15px;
			height: 432px;
			overflow: auto;
			margin-top: 28px;
			margin-bottom: 28px;
		}
		
/*******************************************************************************
** Styles for the artwork details
*******************************************************************************/
	
	/**
	 * The main table that holds all the artwork details.
	 */
	#artworkdetails {
		
	}
	
		#artworkdetails td {
			vertical-align: top;
		}
		
			#artworkdetails table td {
				text-align: left;
			}
	
		#artworkdetails img {
			border: 1px solid black;
			margin-bottom: 10px;
			margin-right: 10px;
		}
		
		#artworkdetails span.gift {
			font-size: 14px;
			color: red;
		}
		
		#artworkdetails button {
			background-color: #E50038;
			border:1px solid white;
			font-weight: bold;
			font-family: Tahoma, Verdana, Arial, Georgia, sans-serif;
			font-size: 11px;
			padding: 2px;
			color: white;
		}
		
		#artworkdetails div.availability {
			padding-left: 50px;
			text-align: left;
		}