/*
	______________________ STYLESHEET INFORMATIE ______________________
	Auteur		: Arne Coomans
				  website	: http://arne.coomans.name/blog/
				  e-mail	: arne at coomans dot name
	Website		: Draaisma Geluidsverhuur

	______________________ STIJL INFORMATIE ______________________
	KLEUREN
	Achtergrond			: wit #ffffff
	kaders				: rood #bd1220
	highlights			: oranje #f29400
	tekst				: rood #bd1220
	TEKST
	Lettertype			: century gothic, verdana, arial, sans-serif
	Lettergrootte		: browser standaard*0.9 (0.9em)
*/

/* Hoofdelement: op de body worden een aantal settings bepaald, die vervolgens
	door het hele document worden overgenomen. */
html body {
	/* Tekstweergave */
	font-family			: 'century gothic', verdana, arial, sans-serif;
	font-size			: 0.9em;
	color				: #bd1220;
	/* Achtergronden */
	background			: white url('../afbeeldingen/zijbalk-1.png') top right repeat-y;
	/* Positionering en afmetingen */
	margin				: 0;
	padding				: 0;
}
a {
	background-color	: transparent;
	color				: #f29400;
}
img {
	padding				: 5px;
}
/* Titelweergave */
h1 {
	display				: none;
}

/* Wrapper: valt om de inhoud heen */
html body div#wrapper {
	width				: 838px;
	margin				: 0;
	padding				: 0;
	background			: url('images/page-background.png') top left no-repeat;
}
/* Content: Bevat de inhoud van de site zelf */
html body div#wrapper div#content {
	float				: left;
	margin				: 70px 0 0 130px;
	padding				: 3px;
	border				: 1px solid #bd1220;
	width				: 700px;
	display				: inline;
	background			: #f39400;
}
html body div#wrapper div#content a, html body div#wrapper div#content * a {
	color				: #bd1220;
}
html body div#wrapper div#content a:hover, html body div#wrapper div#content * a:hover {
	color				: #ffffff;
}
html body div#wrapper div#content h2, html body div#wrapper div#content h3, html body div#wrapper div#content h4 {
	margin				: 0.5em 0 0 0;
	padding				: 2px;
}
html body div#wrapper div#content h2 {
	font-size			: 2em;
	font-weight			: bold;
	letter-spacing		: 2px;
}
html body div#wrapper div#content h3 {

}
html body div#wrapper div#content h4 {

}
html body div#wrapper div#content p {
	margin				: 0.3em 0;
	padding				: 3px;
}
html body div#wrapper div#content img, html body div#wrapper div#content * img {
	margin				: 5px;
	padding				: 0;

}
/* Top-navigatie */
html body div#wrapper div#topnavigatie {
	float				: left;
	margin				: 0 0 0 -420px;
	padding				: 10px 0 0 20px;
	width				: 400px;
	height				: 70px;
	
}
/* Omdat JavaScript wordt gebruikt voor flash-activatie, leid het uitschakelen
	van javascript tot het uitschakelen van flash. 
	Hieronder staat dus de tekstuele representatie van de header, zonder animatie.
	Hierdoor wordt toegankelijkheid gegarandeerd.	
*/
html body div#wrapper div#topnavigatie ul {
	margin				: 0;
	padding				: 20px 0;
	list-style-type		: none;
	text-align			: right;
}
html body div#wrapper div#topnavigatie ul li {
	display				: inline;
}
html body div#wrapper div#topnavigatie ul li a {
	padding				: 10px 0.8em 15px 40px;
	background			: url('images/draaiknop.png') no-repeat center left;
	color				: #bd1220;
	font-size			: 1.05em;
	font-weight			: bold;
}

/* Zij-navigatie */
html body div#wrapper div#zijnavigatie {
	float				: left;
	margin				: 140px 0 0 -838px;
	padding				: 0 0 0 3px;
	width				: 125px;
}
html body div#wrapper div#zijnavigatie ul {
	margin				: 0;
	padding				: 0;
	list-style-type		: none;
}
html body div#wrapper div#zijnavigatie ul li {
	margin				: 0 0 8px 5px;
	text-align			: right;
}
html body div#wrapper div#zijnavigatie ul li a {
	letter-spacing		: 2px;
	font-size			: 1.1em;
	padding				: 0;
}
html body div#wrapper div#zijnavigatie ul li a:hover {
	color				: #bd1220;
}
html body div#wrapper div#zijnavigatie ul li ul ul {
	padding				: 0;
}
html body div#wrapper div#zijnavigatie ul li ul li {
	border				: 0;
	padding				: 4px 0;
	margin				: 0;
}
html body div#wrapper div#zijnavigatie ul li ul li a {
	padding				: 0 17px 0 0;
	letter-spacing		: 0;
	font-size			: 1em;
	background			: url('images/icon-draaisma-light.png') no-repeat right center ;
}
html body div#wrapper div#zijnavigatie ul li ul li a:hover {
	background			: url('images/icon-draaisma.png') no-repeat right center;
	color				: #bd1220;
}
/* Footer */
html body div#wrapper div#footer {
	clear				: both;
	font-size			: 8pt;
	height				: 55px;
	padding				: 0 0 0 441px;
	margin				: 0 0 50px 0;
	background			: url('images/footer-draaisma.png') no-repeat;
}
html body div#wrapper div#footer ul {
	margin				: 0;
	padding				: 0;
	list-style			: none;
}
html body div#wrapper div#footer ul li {
	display				: inline;
	padding				: 0 5px 0 5px;
}
html body div#wrapper div#footer ul li a {
	color				: #bd1220;
}
html body div#wrapper div#footer ul li address {
	display 			: inline;
}
html body div#wrapper div#footer ul li span {
	padding				: 0 16px 0 0;
	background-color	: transparent;
	display				: inline;
}
html body div#wrapper div#footer ul li span#icon-draaisma {
	background			: url('images/icon-draaisma.png') no-repeat top left;
}
html body div#wrapper div#footer ul li span#icon-arne {
	background			: url('images/icon-a-rne.png') no-repeat top left;
}