/* -------------------------------------------------------------- 

  1. Structure
  2. Header
  3. Navigation
  4. Column01
  5. Column02
  6. Column03
  7. Footer
	
  always include reset.css, it will reset your style
  for all browers, it includes the clearfix	
  
  typography specs must be specified in typography.css
  form specs must be specified in forms.css
  
  ID en class naming => use capitals for seperation: navHome
  
/*-------------------------------------------------------------- */


/*------------ imports -----------*/
@import url(typography.css);
@import url(forms.css);

/*-------------------------------------------------------------------------------------  1. Structure --------------------------------*/

body       { background:#f4f4f4; }
#container { padding:28px 0 0 0; width:800px; margin:0 auto;  } 
#wrapper   { border:2px solid #000; }

#header     { background:url(../img/css_backgrounds/bg-header.gif) no-repeat left top; width:796px; height:223px; overflow:hidden; }
#navigation {  }
#content    { background:#fff; }
#column01   { width:220px; float:left; overflow:hidden;}
#column02   { width:500px; float: left; border-left:1px solid #e0e0e0; min-height:400px; height:auto !important; height:400px; margin:0 0 10px 0; padding:5px 10px 5px 10px}
#column03   {  }
#footer     { text-align:center; clear:both; padding:6px 0 10px 0}


.left    { float: left; }
.right   { float: right; }
.clear   { clear: both; }
.hide    { display: none; }
.first     { margin-top:0; padding-top:0; }
.last  { margin-bottom:0; padding-bottom:0; }


/*-------------------------------------------------------------------------------------  2. Header --------------------------------*/

#header a { display:block; width:796px; height:223px; text-indent:-9999px; overflow:hidden; }
#header h1, #header h2 { text-indent:-9999px;}


/*-------------------------------------------------------------------------------------  4. Column01 --------------------------------*/

/* navigation */
#column01 ul#navigation {margin:0 0 0 1px; padding:0 0 183px 0; background:url(/img/css_backgrounds/keiko-afslankcenter-haacht.jpg) no-repeat left bottom;}
#column01 ul#navigation li {list-style:none; margin:0 0 2px 0; padding:0}
#column01 ul#navigation li a { display:block; width:203px; height:37px; background:url(../img/css_backgrounds/bg-navigation.gif) no-repeat left top; text-indent:-9999px;}

#column01 ul#navigation li a#nav01 { background-position:left top;}
#column01 ul#navigation li a#nav01:hover { background-position:right top;}
#nav01Active #column01 ul#navigation li a#nav01 { background-position:right top;}

#column01 ul#navigation li a#nav02 { background-position:left -40px;}
#column01 ul#navigation li a#nav02:hover { background-position:right -40px;}
#nav02Active #column01 ul#navigation li a#nav02 { background-position:right -40px;}

#column01 ul#navigation li a#nav02b { background-position:left -200px;}
#column01 ul#navigation li a#nav02b:hover { background-position:right -200px;}
#nav02bActive #column01 ul#navigation li a#nav02b { background-position:right -200px;}


#column01 ul#navigation li a#nav03 { background-position:left -80px;}
#column01 ul#navigation li a#nav03:hover { background-position:right -80px;}
#nav03Active #column01 ul#navigation li a#nav03 { background-position:right -80px;}

#column01 ul#navigation li a#nav04 { background-position:left -120px;}
#column01 ul#navigation li a#nav04:hover { background-position:right -120px;}
#nav04Active #column01 ul#navigation li a#nav04 { background-position:right -120px;}

#column01 ul#navigation li a#nav05 { background-position:left -160px;}
#column01 ul#navigation li a#nav05:hover { background-position:right -160px;}
#nav05Active #column01 ul#navigation li a#nav05 { background-position:right -160px;}

/* afslanken divs */

#item01, #item02, #item03, #item04, #item05 {display:block;}

/* gallery */
p.gallery a {text-decoration:none;}

/*-------------------------------------------------------------------------------------  5. Column02 --------------------------------*/

/* item description */
#column02 #itemName {  }

/*-------------------------------------------------------------------------------------  6. Column03 --------------------------------*/

/* item description */
#column03 #itemName {  }

/*-------------------------------------------------------------------------------------  7. Footer --------------------------------*/

/* item description */
#footer #itemName {  }