@charset "utf-8";
/*** CSS: Main Horsestreet ***/

/** HELP ***************************************************************

  Constructie van een dynamische 'box':
  	
	<div class="boxdeco" style="width: xx%"><div class="inner">
		inhoud hier
	</div></div>

  Evt. kun je ook de class 'boxleft' of 'boxright' gebruiken om de div 
  te aligneren. DIV met class 'inner' VERPLICHT!
  
************************************************************************/

/** HTML **/
body {
	background-color: #bca68d;
	font-family: Calibri, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: medium;
}
p {
	padding-bottom: 0.5em;
	padding-top: 0.5em;
}
a:link, a:visited {
	color: #993300;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	color: #594734;
	text-decoration: none;
}
h2 {
	color: #6a6655;
	font-family: "Calisto MT", Georgia, "Times New Roman", Times, serif;
	font-size: large;
}
h3 {
	color: #6a6655;
	font-family: "Calisto MT", Georgia, "Times New Roman", Times, serif;
	font-size: medium;
	margin-left: 10px;
}
a img {
	border: 0;
}

/** Horse Street **/
div#hs {
	margin: 0 auto 0 auto;
	width: 976px;
}
	div#hs div#nav {
		background-color: #7c7764;
		background-image: url("images/nav_bg.jpg");
		background-repeat: no-repeat;
		background-position: top;
		font-family: "Calisto MT", Georgia, "Times New Roman", Times, serif;
		font-weight: bold;
		height: 44px;
	}
		div#hs div#nav ul#nav_list {
			padding-top: 4px;
		}
			div#hs div#nav ul#nav_list li {
			/* Display the navigational lists horizontally */
				display: inline;
				list-style-type: none;
				padding-right: 0.25em;
			}
				div#hs div#nav ul#nav_list li a {
					color: #e7d9d6;
				}
	div#hs div#header {
		background-color: #ede7dd;
		background-image: url("images/header.jpg");
		background-repeat: no-repeat;
		background-position: top;
		height: 160px;
	}
		div#hs div#header h1 {
			display: none;	
		}
	div#hs div#content {
		background-color: white;
		background-image: url("images/content_bg.png");
		background-repeat: repeat-y;
		background-position: top center;
		padding: 0 20px 0.5em 20px;
	}
		div#hs div#content p {
			text-align: justify;
		}
		div#hs div#content div.boxdeco {
			background-image: url("images/box_topleft.png");
			background-position: top left;
			background-repeat: no-repeat;
			max-width: 800px;
			margin-bottom: 1em;
			border-bottom: 2px solid #ddd2c6;
		}
			div#hs div#content div.boxdeco div.inner {
				background-image: url("images/box_topright.png");
				background-position: top right;
				background-repeat: repeat-x;
				margin-left: 2px;
			}
				div#hs div#content div.boxdeco h2 {
					text-align: center;
					padding-top: 8px;
				}
				div#hs div#content div.boxdeco p {
					margin: 0 0.5em 0 0.5em;
					text-align: left;
				}
				div#hs div#content div.boxdeco tr.clickable:hover {
					background-color: #bca68d;
					color: #993300;
					cursor: pointer;
				}
					div#hs div#content div.boxdeco tr.clickable:hover td {
						text-decoration:underline;
					}

/** Classes **/
.boxleft {
	float: left;
	margin: 1em 0 0 0;
}
.boxright {
	float: right;
	margin: 1em 0 0 0;
}