/*********************************************************************************************
* 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{
 margin:0;/* positie vanaf bovenkant */
 left:50%;/* positie vanaf zijkant */
 margin-left: -500px;/* 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-image: url('../img/bg.jpg');
 background-repeat:repeat-x;
 background-color:#ffa1bb;

}

/* 
** uitlijning backgroundContainer **
word gebruikt voor schaduw in te plaatsen
*/
#backgroundContainer{
 width:1000px;/* breedte backgroundContainer */
 height:auto;/* hoogte backgroundContainer */
}

/** uitlijning container **/
#container{
 margin-left: 40px;/*naar rechts verplaatsen */
 width: 1000px;/* breedte container */ 
 height: auto;/* hoogte container */
}

/** uitlijning header **/
#header{
 background-image: url('../img/header.jpg');
 background-color:#ffa1bb;
 height:477px;
}

/** uitlijning menuBoven **/
#menuBoven{
 background-image: url('../img/menu.jpg');
 background-repeat:repeat-x;
 position:absolute;
 left:50px;
 width: 1000px;/* breedte van menu */
 height: 30px;/* hoogte van menu */
}


/** uitlijning menuLeft **/
#menuLeft{
 float:left;/* positie linkerkant menuLeft*/
 background-color: #f9d7e4;/* achtergrond kleur menuLeft */
 height: 500px;/* hoogte van menuLeft */
 min-height:500px;/* minimale hoogte menuLeft*/
 width: 160px;/* breedte menuLeft */
}

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

#menuRight{
 float:left;/* positie linkerkant menuLeft*/
 background-color: #f9d7e4;/* achtergrond kleur menuLeft */
 height: 500px;/* hoogte van menuLeft */
 min-height:500px;/* minimale hoogte menuLeft*/
 width: 160px;/* breedte menuLeft */
}

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


/** uitlijning contentContainer **/
#contentContainer{
 height: 100px;/* hoogte contentContainer */
 min-height:100px;/* minimale hoogte contentContainer */
 width: 950px;/* breedte contentContainer */
 background-color:#ffa1bb;
}

/**
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*/
 width: 450px;/* breedte content */
 height: 500px;/* hoogte contentContainer */
 min-height:500px;/* minimale hoogte contentContainer */
 border:0px solid #e32d70;/* lijn rechterkant en kleur*/
background-color:#ffa1bb;
}

/**
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 footer **/
#footer{
 width:1000px;/* breedte backgroundFooter */
 height:30px;/* hoogte backgroundFooter */
}

/* 
** uitlijning backgroundFooter **
word gebruikt voor schaduw in te plaatsen
*/
#backgroundFooter{
 border-top:0px solid #e32d70;/* lijn bovenkant en kleur footer*/
 background-color: #e6487c;/* achtergrondkleur footer */
 width: auto;/* breedte footer */
 height: 0px;/* hoogte footer */
 border-left:0px solid #e32d70;/* lijn rechterkant en kleur*/
}