body{font-family:Helvetica, Arial, "sans serif";
  background-color:#FFF; color:#666; line-height:1.5em;
  font-size:0.8em; padding-left:50px; background-image:url(../images/bg_gradient.jpg); background-repeat:repeat-x; background-attachment:fixed;}
  
  


  h1, h2, h3, h4, h5, h6{padding-bottom:1em;} 
  
  #header h1{padding-bottom:0em; margin-bottom:3em;}
  #header h1 a{display:block; margin-bottom:0px; height:19px; width:175px; background-image:url(../images/karima_kara.png); background-repeat:no-repeat;
  text-indent:-9000px;}
  
  p{padding-bottom:1.5em;} 
 
  .page ul{unicode-bidi:embed; margin:0 0 1.5em; display:block; margin-left:1em;}
  .page ol ul, .page ul ul{margin-top:0; margin-bottom:0;}

  li{display:list-item; unicode-bidi:embed;}

  #photo-gallery img.header{padding:0;}
  #photo-gallery a img{border:1px solid #ddd; padding:1px;}
  #photo-gallery a{margin:3px;}
  #photo-gallery h3{font-weight:normal;}
  hr{color:#FFF; background-color:#FFF; border:0;}


.page li{display:list-item;}
  #header{position:fixed; margin-top:100px; top:0; left:0;}
  

*html #header { /* only ie6 : hack position fixed */
        position: absolute;
        top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
} 
  
  
  #nav-holder li{list-style-type:none; width:150px; font-size:80%; padding:0 0 0 5px; margin-left:43px; border-left:2px solid #000; margin-bottom:1px;}
  #nav-holder a{display:block; padding:2px 0 2px; border-bottom:1px solid #DDD; color:#777; text-decoration:none;}

  #nav-holder li.bio{border-color:#275879;}
  #nav-holder li.international{border-color:#cc702e;}
  #nav-holder li.project{border-color:#9b5525;}
  #nav-holder li.management{border-color:#d58a50;}
  #nav-holder li.professional{border-color:#62793a;}
  #nav-holder li.education{border-color:#7f9d49;}
  #nav-holder li.additional{border-color:#c8972e;}
  #nav-holder li.contact{border-color:#ac9c77;}
  #nav-holder li.photo-gallery{border-color:#ac9c77;}
  
  #content{overflow:hidden; width:710;}

  .select{background-image:url(../images/please_select.png); background-repeat:no-repeat; text-indent:-9999px; overflow:hidden;}

  .page{position:relative; margin:0px 0 600px 250px; padding:250px 25px 110px 200px; width:475px; background-color:#FFF; background-repeat:no-repeat;}

  .page h2{position:absolute; top:117px; left:-50px; width:220px; padding:10px; color:#FFF; font-weight:normal; padding-bottom:1.5em;}

   #bio{background-image:url(../images/bio_bg_bw.jpg);}
   #professional{background-image:url(../images/professional_bg_bw.jpg);}
   #project{background-image:url(../images/project_bg_bw.jpg);}
   #management{background-image:url(../images/management_bg_bw.jpg);}
   #additional{background-image:url(../images/additional_bg_bw.jpg);}
   #photo-gallery{background-image:url(../images/photo-gallery_bg_bw.jpg);}
   #contact{background-image:url(../images/business_card_bw.jpg);}
   
   #international{background-image:url(../images/international_bg_bw.jpg);}
   #education{background-image:url(../images/education_bg_bw.jpg);}
   #bio h2{background-color:#275879;}
   #international h2{background-color:#cc702e;}
   #project h2{background-color:#9b5525;}
   #management h2{background-color:#d58a50;}
   #professional h2{background-color:#62793a;}
   #education h2{background-color:#7f9d49;}
   #additional h2{background-color:#c8972e;}
   #contact h2{background-color:#ac9c77;}
   #photo-gallery h2{background-color:#ac9c77;}
   
   .page img.header{position:absolute; top:0; left:0;}
  .activePage{border:1px solid #F00;}
  .padding{position:relative;}
  #toc{position:relative; background-color:transparent; padding:100px 0 0; width:690px; height:1500px;}


/*toc blocks*/

  #toc ul, #toc li{
    display:inline;
  }

  #toc a{padding:10px; display:block; position:absolute; color:#FFF; text-decoration:none;}

  .toc-international a{
    top:50px;
    left:90px;
    position:absolute;
    overflow:hidden;
    background-color:#cc702e;
    width:269px;
    height:179px;
    background-repeat:no-repeat;
  }

  .toc-project a{
    top:190px;
    left:380px;
    background-color:#9b5525;
    width:269px;
    height:149px;
    background-repeat:no-repeat;
 }

  .toc-management a{
    top:250px;
    left:190px;
    background-color:#d58a50;
    width:169px;
    height:89px;
  }

  .toc-professional a{
    top:50px;
    left:400px;
    background-color:#62793a;
    width:169px;
    height:29px;
  }

  .toc-education a{
    top:100px;
    left:400px;
    background-color:#7f9d49;
    width:169px;
    height:29px;
  }

  .toc-additional a{
    top:360px;
    left:380px;
    background-color:#c8972e;
    width:169px;
    height:49px;
  }

  .toc-bio a{
    top:0px;
    left:0px;
    background-color:#275879;
    width:69px;
    height:29px;
  }
  
  .toc-contact a{
    top:376px;
    left:120px;
    background-color:#ac9c77;
    width:69px;
    height:34px;
  }

  .date{
    font-size:0.85em;
    display:block;
    width:190px;
    position:absolute;
    left:0;
    text-align:right;
  }

  /*The image in the "#contact" div is covering the email address, and making it unclickable.
    Adding a z-index to the "a" */

  #contact a{position:relative; z-index:100;}

  .hidden{display:none;}