/**
 * Bildschirmlayout 
 *
 * basiert auf yaml (Version 3.3.1)
 * 
 * @copyright       Copyright 2005-2011, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 */

@media screen, projection
{
  /* Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera  */
  body { overflow-y:scroll; }

  /*------------------------------------------------------------------------------------------------------*/
  
   
  /*  Randbereiche & Seitenhintergrund */
  body { background:#f2f2f2; padding:20px 0 0 0; }

  
  /* Zentrierung des Layouts in alten IE-versionen */
  body { text-align:center; }
  .page_margins { text-align:left; margin:0 auto; }

 
  /* Layout: Breite, Hintergrund, Rahmen */
  /*-------------------------------------------------------------------------*/
  .page_margins { min-width:740px; max-width:80em; background:#fff; }
  .page { padding:10px; }
  
  
  /* Header Gestaltung */
  /*-------------------------------------------------------------------------*/
  #header {
    color:#299a0b;
    position:relative;
    margin: 0;
    padding: 70px 0px 0px 100px;
    height: 150px;
    background-image:  url(../../images/nalama_header_06.jpg);
  }
  
  /* #topnav innerhalb von #header absolut positionieren */
  #topnav { 
    background:transparent; 
    color:#aaa; 
    position:absolute;
    top:10px;
    right:10px; 
    text-align:right; 
  }

 
  #main { background:#fff; padding:10px 0 7px 0;} /*unten weniger, da optisch der Schatten dazu kommt*/

  #footer {
    background:#f2f2f2; 
    color:#999;
    margin-top: 0px;
    padding:0px 10px 0px 10px;
    line-height:1em;
  }


  /* Absicherung der korrekten Positionierung */
  #header, #nav, #main, #footer { clear:both; }
  
  
  /**
   *-------------------------------------------------------------------------------------------------- #
   * Formatierung der Inhalts-Container
   *
   * |-------------------------------|
   * | #header                       |
   * |-------------------------------|
   * | #col3   | #col1               |
   * | flexible| 75%                 |
   * |-------------------------------|
   * | #footer                       |
   * |-------------------------------|
   */

  /* #col1 ist die Hauptinhaltsspalte (rechts)*/
  #col1 { width: 75%; float:right; margin-bottom: -100px;}/*Hack gegen padding-bottom aus col3*/ 
  #col1_content { padding: 10px 30px 0px 30px;  } 

  /* #col2 muss man nicht abschalten da es nicht im html enthalten ist*/
  /*#col2 { display:none; }*/

  /* #col3 ist die statische linke Spalte */
  #col3 { 
    margin-left: 0; margin-right: 75%; 
    background:/*#e9ecf2*/ transparent url("../../images/bmbf_logo.png") no-repeat bottom center;
  }
  #col3_content { padding: 10px 10px 100px 20px; } /*unten Platz für BMBF Logo*/

  /* grafischer Spaltentrenner zw. #col1 und #col3*/
  /* #main {
    margin:40px 0 0 0;
    background-color: transparent;
    background-image: url("../../images/bg_left_flexible_25percent_blau2.gif");
    background-repeat:repeat-y;
    background-position: 25% 0;
  }  
  */
   /* Grafikfreier Spaltentrenner zw. #col1 und #col3*/
  #col3 {border-right: 1px #ccd1d9 solid;}
  #main {margin: 0}
  
  /* Mindesthöhen für die Seite über statische Spalte*/
  #col3 { min-height: 450px; } /* moderne Browser */
  * html #col3 { height: 450px; } /* IE 5.x + 6.0 */


 /**
  * ------------------------------------------------------------------------------------------------- #
  * Gestaltung der layoutabhängigen Elemente
  */
  
  #header h1 { 
    font-size:200%;  
    color:#299a0b;
    letter-spacing:-1px;
    line-height:65%;
  }  
  #header span { color:#999; }

  #topnav a { color:#999; font-weight:normal; background:transparent; text-decoration:none; }
  #topnav a:focus,
  #topnav a:hover,
  #topnav a:active {color:#333; background-color:transparent; text-decoration:none; }

  #footer a { color:#999; background:transparent; font-weight:normal; text-decoration:none; }
  #footer a:focus,
  #footer a:hover,
  #footer a:active {color:#333; background-color:transparent; text-decoration:none; }

  
 /**
  * ------------------------------------------------------------------------------------------------- #
  * Anpassung der Haupt-Navigation  ('Shiny-Buttons')
  */
 
  .hlist{
    /* Einfassen der Floats im IE */
    width:100%;
    overflow:hidden;
    /* Einfassen der Floats in allen anderen Browsern */
    float:left;
    display:inline;
    /* Bugfix:IE - collapsing horizontal margins */
    position:relative;
    background:#fff url("../../images/hlist_bg_bluegray_passive.gif") repeat-x bottom left;
    line-height:1.4em;
    margin:0;
    padding:0;
    height: 27px;
    /*text-transform:uppercase;*/
    /*font-family:Georgia, "Times New Roman", Times, serif;*/
  }
  .hlist ul {
    margin:0;
    padding:0;
    /* Bugfix:IE - Doubled Float Margin Bug */
    display:inline;
    float:left; 
  }
  /* Linke Ausrichtung der Hauptnavigation */
  .hlist ul { margin-left:25%; }
  
  .hlist ul li {
    /* Kerbe zwischen den Buttons */
    border-left:1px #fff solid; 
    border-right:1px #aaa solid; 

    /* Bugfix:IE - Doubled Float Margin Bug */
    display:inline;
    float:left;
    list-style-type:none;
    
    line-height:1.4em;
    margin:0;
    padding:0;
    height: 27px;
  }

  /* Styling der einzelnen Buttons über die Links*/
  .hlist ul li a,
  .hlist ul li strong {
    background:transparent;
    color:#666;
    display:block;
    /*font-size:107.69%;  /*14 Pixel*/
    font-size:100%;  /*13 Pixel*/
    font-weight:bold;
    line-height:1.4em;
    margin:0;
    padding:0.3em 0.8em 0.3em 0.8em;
    text-decoration:none;
    width:auto;
  }
  
  /* Hovereffekte für nicht aktivierte Buttons */  
  .hlist ul li a:focus,
  .hlist ul li a:hover,
  .hlist ul li a:active { 
    color:#299a0b;
    text-decoration:none; 
    outline: 0 none; 
    cursor:pointer;
  }

  /* aktivierte Buttons */  
  .hlist ul li.active{
   
    background:#fff url("../../images/hlist_bg_bluegray_active.gif") repeat-x bottom left;
    margin:0;
    padding:0;
    height: 27px;
  
    /* Kerbe zwischen den Buttons */
    border-left:1px #fff solid; 
    border-right:1px #aaa solid; 
  }
  .hlist ul li.active a,
  .hlist ul li.active strong {
    color: #299a0b;
  }

  /* Hovereffekte für aktivierte Buttons */  
  .hlist ul li.active strong,
  .hlist ul li.active a:focus,
  .hlist ul li.active a:hover,
  .hlist ul li.active a:active { 
    color:#6dcc0f; 
    text-decoration:none; 
  }



 /**
  * -------------------------------------------------------------------------- #
  * Anpassung der Unter-Navigation  (klassisch vertikal)
  */
  /* Titel */
  h6.vlist {
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-style: normal;
    font-size:123.0769%; /*16 Pixel*/
    width:100%;
    padding:3px 0px 3px 0; 
    margin:0;
    color: #666;
  }

  /* Die Navigation */
  .vlist {
    width:100%;
    overflow:hidden;
    margin:0;
    list-style-type:none;
    font-size:100%; /*13 Pixel*/
  }

  .vlist ul {
    line-height:1.5em;
    list-style-type:none;
    margin:0;
    padding:0;
  }

  .vlist li {
    line-height:1.5em;
    float:left; 
    width:100%;
    margin:0;
    padding:0;
  }


  .vlist a,
  .vlist strong,
  .vlist span {
    display:block;
    padding:1px 0px 1px 0; 
    text-decoration:none;
  }

  .vlist a,
  .vlist a:visited {
    color:#027AC6;
  }

  .vlist a:focus,
  .vlist a:hover,
  .vlist a:active { background-color:#eee; color:#111; text-decoration:none; outline: 0 none; }

  .vlist li span,
  .vlist li strong {
    display:block;
    font-weight:normal;
    color:#299a0b;
  }

  /* active list element */
  .vlist li.active {
    color:#299a0b;
    font-weight:normal;
  }


  /* Level 1 */
  .vlist li a,
  .vlist li strong,
  .vlist li span { width:92%; padding-left:8%; font-weight:normal; }

  .vlist li.leaf a,
  .vlist li.leaf strong,
  .vlist li.leaf span {  
    background: url("../../images/menu-leaf.gif") no-repeat 0 0.5em;
  } 
  .vlist li.collapsed a,
  .vlist li.collapsed strong,
  .vlist li.collapsed span {  
    background: url("../../images/menu-collapsed.gif") no-repeat 0 0.5em;} 
  }
  .vlist li.expanded a,
  .vlist li.expanded strong,
  .vlist li.expanded span {  
    background: url("../../images/menu-expanded.gif") no-repeat 0 0.5em;
  } 
  
  .vlist li a:focus,
  .vlist li a:hover,
  .vlist li a:active { background-color:#eee; color:#111; text-decoration:none; outline: 0 none; }

  /* Level 2 */
  .vlist li ul li a,
  .vlist li ul li strong,
  .vlist li ul li span { width:84%; padding-left:16%; font-weight:normal; } 

  .vlist li ul li.leaf a,
  .vlist li ul li.leaf strong,
  .vlist li ul li.leaf span {  
    background: url("../../images/menu-leaf.gif") no-repeat 1em 0.5em;}

  .vlist li ul li.collapsed a,
  .vlist li ul li.collapsed strong,
  .vlist li ul li.collapsed span {  
    background: url("../../images/menu-collapsed.gif") no-repeat 1em 0.5em;}
  
  .vlist li ul li.expanded a,
  .vlist li ul li.expanded strong,
  .vlist li ul li.expanded span {  
    background: url("../../images/menu-expanded.gif") no-repeat 1em 0.5em;} 
  

  /*.vlist li ul li a, 
  .vlist li ul li a:visited { color:#666; }*/
  .vlist li ul li a:focus,
  .vlist li ul li a:hover,
  .vlist li ul li a:active { background-color:#eee; color:#111; text-decoration:none;}

  /* Level 3 */
  .vlist li ul li ul li a,
  .vlist li ul li ul li strong,
  .vlist li ul li ul li span { width:76%; padding-left:24%;  font-weight:normal;} 

  .vlist li ul li ul li.leaf a,
  .vlist li ul li ul li.leaf strong,
  .vlist li ul li ul li.leaf span {  
    background: url("../../images/menu-leaf.gif") no-repeat 2em 0.5em;} 

  .vlist li ul li ul li.collapsed a,
  .vlist li ul li ul li.collapsed strong,
  .vlist li ul li ul li.collapsed span {  
    background: url("../../images/menu-collapsed.gif") no-repeat 2em 0.5em;} 

  .vlist li ul li ul li.expanded a,
  .vlist li ul li ul li.expanded strong,
  .vlist li ul li ul li.expanded span {  
    background: url("../../images/menu-expanded.gif") no-repeat 2em 0.5em;} 


  /*.vlist li ul li ul li a,
  .vlist li ul li ul li a:visited{ color:#666; }*/
  .vlist li ul li ul li a:focus,
  .vlist li ul li ul li a:hover,
  .vlist li ul li ul li a:active { background-color:#eee; color:#111; text-decoration:none; }

 

 /**
  * ------------------------------------------------------------------------------------------------- #
  * Gestaltung der Seitenrand-Schatten
  */
 
  .page_margins {
    border: 0 none;
    background-image:  url(../../images/shadow_border_left.gif);
    background-repeat:repeat-y;
    background-position:left;
  }
  .page {
    border: 0 none;
    margin: 0 0 0 5px; padding: 10px 15px 10px 10px;
    background-image:  url(../../images/shadow_border_right.gif);
    background-repeat:repeat-y;
    background-position:right;
  }
  .border-top {
    overflow:hidden;
    width: auto;
    height: 20px;
    font-size:0;
    margin-bottom: -15px;
    background-image:  url(../../images/shadow_border_top.gif);
    background-repeat:repeat-x;
    background-position:top left;
  }
  .border-bottom {
    overflow:hidden;
    width: auto;
    height: 20px;
    margin-top: -15px;
    font-size:0;
    background-image:  url(../../images/shadow_border_bottom.gif);
    background-repeat:repeat-x;
    background-position:bottom left;
  }
  .edge-tl {
    float:left;
    width: 20px;
    height: 20px;
    font-size:0;
    background-image:  url(../../images/shadow_corner_tl.gif);
    background-position: top left;
  }
  .edge-tr {
    position:relative; /* IE Fix | z-index */
    float:right;
    width: 20px;
    height: 20px;
    font-size:0;
    background-image:  url(../../images/shadow_corner_tr.gif);
    background-position: top right;
  }
  .edge-bl {
    float:left;
    width: 20px;
    height: 20px;
    background-image:  url(../../images/shadow_corner_bl.gif);
    background-position: bottom left;
  }
  .edge-br {
    position:relative; /* IE Fix | z-index */
    float:right;
    width: 20px;
    height: 20px;
    background-image:  url(../../images/shadow_corner_br.gif);
    background-position: bottom right;
  }


 /**
  * ------------------------------------------------------------------------------------------------- #
  * Skiplinks 
  * Visuelle Gestaltung der Skiplink-Navigation
  */
  
  #skiplinks a.skip:focus,
  #skiplinks a.skip:active { 
    color:#fff; 
    background:#333; 
    border-bottom:1px #000 solid;
    padding:10px 0;
    text-decoration:none;
  }