/*
Cascading Style Sheet (CSS) voor de website van Het Stenen Tijdperk (Diederik Pomstra) op http://www.het-stenen-tijdperk.nl/
Datum laatste update: 7 jan. 2010
Auteur: Marc Smeehuijzen
E-mail: marc.smeehuijzen@easytech.nl
Resolutie: Deze style sheet is geoptimaliseerd voor de opmaak van webpagina's op een schermresolutie van 1024 x 768 pixels.
Browsers: De style sheet is getest met Microsoft Internet Explorer 7.0 en 8.0 en Mozilla Firefox 3.5.5.
Validatie: Deze file is succesvol gevalideerd als CSS 2.1 door de W3C CSS validator op http://jigsaw.w3.org/css-validator/ op 16 Dec. 2009.
Copyright 2010 Het Stenen Tijdperk.
*/

/***** GLOBAL STYLES *****/

/* Het statement 'background: url(menubackground2.jpg) repeat-y left;' is er voor om te zorgen dat het menu - de groene kolom links in beeld - altijd doorloopt tot de onderkant van het scherm. Hiervoor wordt een 1-pixel donkergroen lijntje (#5C743D = menu-achtergrondkleur) - wat overgaat in een heel lang lichtgroen lijntje (#F4FFE4 = content achtergrondkleur) - herhaald. */
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	margin: 0em;
	background-image: url(menubackground2.jpg);
	background-repeat: repeat-y;
	background-position: left;
}

a {
	color: #993300;
}
	
a:hover {
	color: #5C743D;
}

h1 {
	font-size: 1.45em;
	margin-top: 1em;
	color: #5C743D;
}

h2 {
	font-size: 1.25em;
	color: #993300;
	margin-top: 1.6em;
}

.h2klein {
	font-size: 0.8em;
}

/* Deze class wordt gebruikt voor paragraphs waar geen ruimte mag zijn boven en onder de paragraph. */
p.nospacetopbottom {
	margin-top: 0em;
	margin-bottom: 0em;
}

/* Deze class wordt gebruikt voor paragraphs waar geen ruimte mag zijn boven de paragraph. */
p.nospacetop {
	margin-top: 0em;
}

/* Deze class wordt gebruikt voor paragraphs waar geen ruimte mag zijn onder de paragraph. */
p.nospacebottom {
	margin-bottom: 0em;
}

/***** HEADER MET LOGO/FOTO EN TITEL WEBSITE *****/ 

div.header {
	background-color: #D5EDB3;
}

/* Logo/foto */
div.header-logo {
	float: left;
}

/* Normaal gesproken krijgen plaatjes die ook een hyperlink zijn, automatisch een blauwe border. Dit zou niet mooi staan rond het Stenen Tijdperk logo/foto. Daarom wordt dit m.b.v. onderstaande style uitgezet. */
img.logo {
	border-style: none;
}

/*
img.logo:hover {
	border-style: none;
}
*/

/* Titel: Het Stenen Tijdperk */
div.header-titel {
	float: left;
	background-color: #D5EDB3;
	font-size: 1.8em;
	letter-spacing:.14em;
	color: #5C743D;
	padding-top: 0.3em;
	padding-left: 11em;
}

/* Ondertitel: Gereedschappen en technieken van onze voorouders */
div.header-ondertitel {
	float: left;
	background-color: #D5EDB3;
	font-size: 0.9em;
	color: #993300;
	letter-spacing:.2em;
	padding-top: 0.4em;
	padding-left: 14em;
}

/* Deze class wordt gebruikt omdat floating elementen in CSS geen ruimte innemen. Deze niet-floatende div zorgt toch voor wat inhoud. */
div.header-filler {
	background-color: #D5EDB3;
	height: 36px;
}

div.groenelijn {
	background-color: #5C743D;
	height: 0.15em;
}

div.wittestippellijn {
	background-color: #99CC66;
	height: 0.15em;
	background-image: url(dashed_line.gif);
}

/***** MENU *****/

div.menu {
	float: left;
	width: 209px;
	background-color: #5C743D;
}

.menu-selected {
	padding-left: 1em;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	margin: 0em;
	font-weight: bold;
	color: #993300;
	background: #99CC66;
	border-bottom: 1px solid #F4FFE4;
}

.menu-notselected {
	padding-left: 1em;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	margin: 0em;
	color: #D5EDB3;
	font-weight: bold;
	border-bottom: 1px solid #F4FFE4;
}

.menu-notselected:hover {
	padding-left: 1em;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	margin: 0em;
	color: #993300;
	font-weight: bold;
	border-bottom: 1px solid #F4FFE4;
	background: #99CC66;
}

a.menu {
	text-decoration: none;
	color: #D5EDB3;
}

/* 	'margin-bottom: 0em' en 'padding-bottom: 0.85em' zijn hacks voor IE7 omdat deze geen margins heeft rond paragraphs. */
a.menu-emailadres {
	padding-left: 1em;
	margin-bottom: 0em;
	padding-bottom: 0.85em;
	font-weight: bold;
	font-size: 0.9em;
	color: #000000;
}

a.menu:hover {
	background: #99CC66;
	color: #D5EDB3;
}

/***** CONTENT *****/

/* Deze div wordt gebruikt als de content uit 1 kolom bestaat. */
div.content-1col {
	margin-left: 210px;
	padding-top: 1em;
	padding-left: 3.5em;
	padding-right: 3em;
	max-width: 54em;
}

/* Deze div wordt gebruikt als de content uit 2 kolommen bestaat. */
div.content-2col {
	margin-left: 210px;
	padding-top: 1em;
	padding-left: 3.5em;
	padding-right: 2em;
	max-width: 58em;
}

div.plaatjes {
	padding-top: 5.4em;
	float: right;
	width: 27%
}

div.plaatjeshelft {
	padding-top: 5.4em;
	float: right;
	width: 50%
}

div.plaatjeshelftparagpadtop {
	padding-top: 1em;
	float: right;
	width: 50%
}

div.plaatjeshelftheadpadtop {
	padding-top: 4.5em;
	float: right;
	width: 50%
}

/* Er is een 'filler' nodig om te zorgen dat de rest van de regel mooi vol komt te zitten.
background-color: #3B5323; (= donker-groen)
background-color: #603311; (= donker-bruin)
*/
div.plaatjes-filler {
	background-color: #603311;
/*	padding: 0.3em; */
}

/* Voor horizontale plaatjes */
div.plaatjehoro {
	float: left;
	width: 300px;
}

/* Voor horizontale plaatjes met een right margin*/
div.plaatjehororightmargin {
	float: left;
	width: 300px;
	margin-right: 4em;
}

/* Voor 3 horizontale plaatjes */
div.drieplaatjehoro {
	float: left;
	width: 200px;
}

/* Voor 3 horizontale plaatjes met een right margin*/
div.drieplaatjehororightmargin {
	float: left;
	width: 200px;
	margin-right: 3.6em;
}

/* Deze class wordt gebruikt voor beschrijvingen van foto's die onder elkaar staan. */
.caption {
	margin-top: 0em;
	margin-bottom: 3.5em;
	font-size: 0.85em;
	color: #525C65;
}

/* Deze class wordt gebruikt voor beschrijvingen van foto's die naast elkaar staan. */
.captionhoro {
	margin-top: 0em;
	margin-bottom: 1.5em;
	font-size: 0.85em;
	color: #525C65;
}

div.texthelft {
	float: left;
	width: 40%;
}

div.text {
	float: left;
	width: 63%;
}

div.plaatjeshome {
	padding-top: 1em;
	float: right;
	width: 22%
}

div.texthome {
	float: left;
	width: 73%;
}

/* De wrapper bevat de menu div en de content div. Het is de bedoeling dat de menu div (de donkergroene balk) meegroeit met de content div als deze groter wordt. Hier word een truck voor gebruikt genaamd 'Faux Columns'. De wrapper krijgt als achtergrondplaatje een donkergroen lijntje (1 pixel hoog) en deze wordt verticaal herhaald en links gepositioneerd. Als de content div dus groot wordt, dan wordt de menu div 'onderaan aangevuld' met de groene lijntjes tot deze evenlang is. Meer info bijv.: http://www.alistapart.com/articles/fauxcolumns/ 
div.wrapper {
	background: url(menubackground.jpg) repeat-y left;
} */

/* Broodkruimelpad*/
#breadcrumb{
	font-size: 0.85em;
}

.copyright {
	font-size: 0.7em;
}

div.thumbnail {
	float: left;
	margin-right: 4.5em;
	margin-bottom: 2em;
}

/* Deze class wordt gebruikt omdat floating elementen in CSS geen ruimte innemen. Deze niet-floatende div zorgt toch voor wat inhoud. Ik heb hem met font-size: 0em wel zo klein mogelijk gelaten. */
div.spacer {
	clear: both;
	font-size: 0em;
}

.bottommargin {
	margin-bottom: 1.8em;
}

.rightmargin {
	margin-right: 4em;
}

.rightmarginsmall {
	margin-right: 3em;
}

.rightbottompadding {
	padding-right: 1em;
	padding-bottom: 1.5em;
}

.tableheader {
	font-size: 1.25em;
	color: #993300;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
}

/* 	'margin-bottom: 0em' en 'padding-bottom: 1em' zijn hacks voor IE7 omdat deze geen margins heeft rond paragraphs. */
.ie7marginhack {
	margin-top: 0em;
	padding-top: 1em;
}