/*********************************************************************************************
* Naam			:	template.css															 *
* Authur		:	Martijn Hof																 *
* Omschrijving	:	Dit is een standaard template die elke keer opnieuw kan worden gebruikt  *
*					Graag zo min mogelijk hier in aanpassen									 *
*********************************************************************************************/

/** uitlijning body **/
body{
 z-index:1;
 background-image: url('../img/headerBg.png');
 background-repeat:repeat-x;
 margin:0;/* positie vanaf bovenkant */
 left:50%;/* positie vanaf zijkant */
 margin-left: -410px;/* min de helft van de breedte van de container bepaalt het midden */
 position: absolute;/* position absolute wil zeggen dat een element nog alle kanten op kan op de website */
 background-color:#FFFFFF;/* achtergrondkleur van de body */
}



/** uitlijning container **/
#container{
 z-index:2;
 background-image: url('../img/header.png');
 background-repeat:no-repeat;
 width: 800px;/* breedte container */ 
 height: auto;/* hoogte container */
 background-color: #FFFFFF;/* achtergrond kleur container */
}

/** uitlijning header **/
#header{
 width: auto;/* breedte header */
 height: 184px;/* hoogte header */
}

#space{
 height:50px;
}

#banner{
 width: auto;/* breedte header */
 height: auto;/* hoogte header */
}

#menuHeader{
 background-image: url('../img/menuBg.png');
 background-repeat:repeat-x;
 width: auto;/* breedte header */
 height: 74px;/* hoogte header */
}

/** uitlijning contentContainer **/
#contentContainer{
 background-color: #FFFFFF;/* achtergrondkleur contentContainer */
 height: 500px;/* hoogte contentContainer */
 min-height:500px;/* minimale hoogte contentContainer */
 width: auto;/* breedte contentContainer */
}


/** uitlijning contentContainer **/
#contentContainerTop20{
 background-color: #FFFFFF;/* achtergrondkleur contentContainer */
 height: 300px;/* hoogte contentContainer */
 min-height:300px;/* minimale hoogte contentContainer */
 width: auto;/* breedte contentContainer */
}

/**
Deze optie is nodig om contentContainer in 
hoogte automatisch mee te laten gaan.
Daarom is in contentContainer de hoogte en 
de minimale hoogte aangegeven
**/
div[id] #contentContainer{
 height:auto;/* auto hoogte voor contentContainer */
}

/** uitlijning content **/
#content{
 float:left;/* positie linkerkant content*/
 background-color: #e43474;/* achtergrondkleur content */
 width: 800px;/* breedte content */
 height: 500px;/* hoogte contentContainer */
 min-height:500px;/* minimale hoogte contentContainer */
}

/**
Deze optie is nodig om content in 
hoogte automatisch mee te laten gaan.
Daarom is in content de hoogte en 
de minimale hoogte aangegeven
**/
div[id] #content{
 height:auto;/* auto hoogte voor content */
}


/** uitlijning content **/
#contentTop20{
 float:left;/* positie linkerkant content*/
 background-color: #e43474;/* achtergrondkleur content */
 width: 800px;/* breedte content */
 height: 250px;/* hoogte contentContainer */
 min-height:250px;/* minimale hoogte contentContainer */
}

/**
Deze optie is nodig om content in 
hoogte automatisch mee te laten gaan.
Daarom is in content de hoogte en 
de minimale hoogte aangegeven
**/
div[id] #contentTop20{
 height:auto;/* auto hoogte voor content */
}

/** uitlijning footer **/
#footer{
 background-color: #FFFFFF;/* achtergrondkleur footer */
 width: auto;/* breedte footer */
 height: 20px;/* hoogte footer */
}