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

  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#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;}

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

#column01 ul#navigation li a#nav07 { background-position:left -240px;}
#column01 ul#navigation li a#nav07:hover { background-position:right -240px;}
#nav07Active #column01 ul#navigation li a#nav07 { background-position:right -240px;}


/* subnavigation */
#column01 #navigation ul {color:#6b6b6b; list-style:none; margin:0; padding:0; width:170px;}
#column01 #navigation ul li {background:url(/img/css_backgrounds/arrow-subnav.gif) no-repeat 13px 10px; border-left:18px solid #b1b1b1; margin:-2px 0 0 0; padding:10px 0 5px 35px }
#column01 #navigation ul li a {background:none; color:#6b6b6b; display:inline; text-indent:0;}
#column01 #navigation ul li a:hover {color:#999}

/* shortlinks */
.shortLinks {float:left; margin:0 0 15px 0; width:300px; padding:10px; background:#f4f4f4; border:1px solid #b1b1b1; border-left:15px solid #b1b1b1;}

#home .shortLinks {width:90%;}
#home .shortLinks p.link a {color:#333; text-decoration:none;}

/* afslanken divs */
#item01, #item02, #item03, #item04, #item05 {display:block;}

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

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

#column02 .innercol {float:left; margin-right:3px;}
#column02 .innercol .shortLinks  {margin-top:-15px; width:85%;}

.promo {color:#c00; font-weight:bold; text-transform:uppercase; text-align:center}
#nav03Active #column02 {width:540px;}

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

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

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

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