@charset "UTF-8";

/* Public styles */

/* basemod */
@media screen, projection
{
  /*-------------------------------------------------------------------------*/

  /* (en) Marginal areas & page background */
  /* (de) Randbereiche & Seitenhintergrund */
  body { background: #f4f4f4 url("/common/images/bg.gif") repeat-y center; padding: 10px 0; }

  /* Layout Alignment | Layout-Ausrichtung */
  .page_margins { margin: 0 auto; }

  /* Layout Properties | Layout-Eigenschaften */
  .page_margins { width: 780px; background: #fff; }
  .page { padding: 10px; }
  #header { padding: 0; color: #000; }
  #header #topnav { top: 6px; right: 0; color: #aaa; background: transparent; }
  #print { display: none; }
  #nav { overflow: hidden; }
  #main { margin: 10px 0; background: #fff; }
  #banner { clear: both; padding: 0 20px; margin: 10px 0; }
  #footer { color: #808080; font-size: 0.9em; text-align: center; }

  /* (en) navigation: horizontal adjustment | (de) horizontale Ausrichtung  */
  #nav ul { margin-left: 20px; }

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

  /**
   * (en) Formatting content container
   * (de) Formatierung der Inhalts-Container
   *
   */

  #col1 { float: left; width: 20%;  margin:0 }
  #col2 { float: right; width: 20%;  margin:0 }
  #col3 { width: auto; margin: 0 20% 0 20%}
  #col1_content { padding: 0 10px 0 0; }
  #col2_content { padding: 0 0 0 10px; }
  #col3_content { padding: 0 10px }


  /* set column dividers */ 
  #col3 { border-left: 1px #ddd solid }
  #col3 { border-right: 1px #ddd solid }
	
  /*-------------------------------------------------------------------------*/
  
/**
 * @section generic classes for layout switching
 * @see     ...
 *
 * .hidecol1 -> 2-column-layout (using #col2 and #col3)
 * .hidecol2 -> 2-column-layout (using #col1 and #col3)
 * .hideboth -> single-column-layout (using #col3)
 */

.hideboth #col3 { margin-left: 0; margin-right: 0; }
.hideboth #col3_content{ padding-left: 10px; padding-right: 10px; }

.hidecol1 #col3 { margin-left: 0; margin-right: 20%; }
.hidecol1 #col3_content{ padding-left: 10px; }

.hidecol2 #col3 { margin-left: 20%; margin-right: 0; }
.hidecol2 #col3_content{ padding-right: 10px; }

.hideboth #col1, .hideboth #col2, .hidecol1 #col1, .hidecol2 #col2 { display:none; }

}


/* content */
@media all
{

 /**
  * ------------------------------------------------------------------------------------------------- #
  *
  * Generic Content Classes
  *
  * (en) standard classes for positioning and highlighting
  * (de) Standardklassen zur Positionierung und Hervorhebung
  *
  * @section content-generic-classes
  */

  .highlight { color: #f60; }
  .dimmed { color: #888; }

  .left { float: left; display:inline; margin-right: 1em; margin-bottom: 0.15em; }
  .right { float: right; display:inline; margin-left: 1em; margin-bottom: 0.15em; }
  .center { display:block; text-align:center; margin: 0.5em auto; }
  
    .announce h2 {
     margin: 0 0 10px;
     padding: 0;
    }
    .textright {
     text-align: right;
    }
    .small {
     font-size: 0.8em;
    }
    .large {
     font-size: 1.3em;
    }
    .red {
     color: #900;
    }
    .green {
     color: #090;
    }
    .blue {
     color: #009;
    }
    .highlighted {
     background: #f0f0f0;
     border: 1px solid #b0b0b0;
     color: #303030;
     padding: 3px;
    }
    .bold {
     font-weight: 700;
    }
    .announce {
     background-color: #f4f4f4;
     border-left: 4px solid #ccc;
     clear: left;
     color: #505050;
     font-size: 0.9em;
     line-height: 1.5em;
     margin: 10px 0 15px;
     padding: 7px 5px 2px 5px;
     width: 126px;
    }
    .announce p {
     margin: 10px 0 0;
     padding: 0;
    }
    .postinfo {
     background-color: #f4f4f4;
     border-left: 4px solid #ccc;
     color: #606060;
     font-size: 0.9em;
     line-height: 1.4em;
     margin: 1px 0 20px;
     padding: 8px 5px 8px 8px;
    }
    .block {
     background: #f0f0f0;
     padding: 10px;
    }
    .photo {
     background-color: #f0f0f0;
     border: 1px solid #d8d8d8;
     margin:0 0 15px;
     padding:2px;
    }
    .clearing {
     clear: both;
     margin: 0;
     padding: 0;
     visibility: hidden;
    }
    .hide {
     display: none;
    }
    
    .phone {
        padding-left: 22px;
        background: url(/shared/icons/telephone.png) no-repeat 2px 1px;
    }
    .fax {
        padding-left: 22px;
        background: url(/shared/icons/printer_empty.png) no-repeat 2px 1px;
    }

 /**
  * ------------------------------------------------------------------------------------------------- #
  *
  * Tables | Tabellen
  *
  * (en) Generic classes for table-width and design definition
  * (de) Generische Klassen für die Tabellenbreite und Gestaltungsvorschriften für Tabellen
  *
  * @section content-tables
  */

  table { width: auto; border-collapse:collapse; margin-bottom: 0.5em; border-top: 2px #999 solid; border-bottom: 2px #999 solid; }
  table caption { font-variant:small-caps; }
  table.full { width: 100%; }
  table.fixed { table-layout:fixed; }

  th,td { padding: 0.5em; }
  thead th { color: #000; border-bottom: 2px #800 solid; }
  tbody th { background: #e0e0e0; color: #333; }
  tbody th[scope="row"], tbody th.sub { background: #f0f0f0; }

  tbody th { border-bottom: 1px solid #fff; text-align: left; }
  tbody td { border-bottom: 1px solid #eee; }

  tbody tr:hover th[scope="row"],
  tbody tr:hover tbody th.sub { background: #f0e8e8; }
  tbody tr:hover td { background: #fff8f8; }

 /**
  * ------------------------------------------------------------------------------------------------- #
  *
  * Miscellaneous | Sonstiges
  *
  * @section content-misc
  */

 /**
  * (en) Emphasizing external Hyperlinks via CSS
  * (de) Hervorhebung externer Hyperlinks mit CSS
  *
  * @section             content-external-links
  * @app-yaml-default    disabled
  */

/*
  #col3 a[href^="http://www.usfi.org"], #col3 a[href^="/"]
  {
    padding-left: 12px;
    background-image: url('your_image.gif');
    background-repeat: no-repeat;
    background-position: 0 0.45em;
  }
*/
    
    .surround_floats {
     width: 100%;  /* Einfassen der Floats im IE */
     float: right; /* Einfassen der Floats in allen anderen Browsern */
    }
    
    input[type="submit"], input[type="reset"], button {
        padding: 0.2em 0.6em;
    }
    
    #loader {
        background: #fff;
        border: 3px double #000;
        padding: 5px;
        width: 120px;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 99;
    }
    #loader img {
        border: none;
        background: transparent;
        vertical-align: middle;
        margin-right: 5px;
    }
    
    #lang a {
        margin-left: 2px;
    }
    #lang img {
        opacity: 0.6;
    }
    #lang img.active, #lang img:hover {
        opacity: 1;
    }
    
    #banner {
        height: 175px;
        color: #fff;
        padding: 0;
        background: #233657 url("/common/images/front.jpg") no-repeat top right;
        position: relative;
    }
    
    #logo {
        float: right;
    }
    
    #titleimage {
        float: left;
        border-right: 1px solid #ccc;
        height: 175px;
        width: auto;
    }

    #search {
        margin: 10px;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    #search form {
        margin: 0;
    }
    #search .input {
        font-size: 12px;
        width: 110px;
        border: 1px solid #000;
        vertical-align: middle;
        padding: 1px 1px 1px 18px;
        height: 15px;
        background: #fff url(/shared/icons/magnifier.png) no-repeat 1px 1px;
    }
    #search .submit {
        font-size: 11px;
        border: 1px solid #000;
        vertical-align: middle;
        height: 19px;
        padding: 1px 5px;
    }


    #nav {
        border-top: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0;
        padding: 4px 0;
    }
    #nav a {
        padding: 2px 6px;
        margin: 1px 2px 1px 0;
        text-decoration: none;
        letter-spacing: 1px;
        background-color: #f0f0f0;
    }
    #nav a:hover {
        text-decoration: none;
        background-color: #e0e0e0;
    }
    #nav a.active {
        padding: 2px 6px;
        margin: 1px 2px 1px 0;
        color: #fff;
        text-decoration: none;
        letter-spacing: 1px;
        background-color: #a0a0a0;
    }
    #nav a.active:hover {
        text-decoration: none;
        background-color: #a0a0a0;
    }


    #micronav {
        color: #808080;
        font-size: 0.9em;
        margin: 0 0 10px 0;
        padding: 0 0 5px;
        border-bottom: 1px dotted #d0d0d0;
    }
    #micronav a {
        color: #808080;
        text-decoration: none;
    }
    #micronav a:hover {
        text-decoration: underline;
    }

    #bottomnav {
        background: #fafafa;
        border-top: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0;
        padding: 5px 0;
    }
    
    #sidenav ul {
        list-style: none;
        width: auto;
        margin: 0 0 20px 0;
        padding: 0;
        font-size: 1.1em;
    }
    #sidenav ul ul {
        font-size: 1.0em;
        margin: 4px 0 0 4px;
    }
    #sidenav li {
        list-style: none;
        margin: 0 0 4px 0;
        padding: 0;
    }
    #sidenav a {
        height: 20px; /* IE Bug */
        font-weight: bold;
        text-decoration: none;
        color: #505050;
        display: block;
        padding: 2px 10px 2px 10px;
        background: #f4f4f4;
        border-left: 4px solid #ccc;
    }
    #sidenav ul ul a {
        border-left: none;
        font-weight: normal;
    }
    #sidenav a:hover {
        background: #f0f0f0;
        border-left: 4px solid #999;
    }
    #sidenav ul ul a:hover {
        border-left: none;
    }
    #sidenav a.active, #sidenav a.activenode {
        background: #eaeaea;
        color: #286ea0;
        border-left: 4px solid #286ea0;
    }
    #sidenav ul ul a.active, #sidenav ul ul a.activenode {
        border-left: none;
    }
    #sidenav a.active:hover, #sidenav a.activenode:hover {
        background: #eaeaea;
        color: #286ea0;
        border-left: 4px solid #286ea0;
    }
    #sidenav ul ul a.active:hover, #sidenav ul ul a.activenode:hover {
        border-left: none;
    }
    
    #col3 {
        
    }
    #col3 img {
        padding: 1px;
        display: inline;
        vertical-align: middle;
    }
    #col3 .ZMSTextarea {
        text-align: justify;
    }
    #col3 .ZMSGraphic img {
        padding: 0;
        background-color: #fff;
        border: none;
    }
    
    #headline {
        margin-bottom: 0.6em;
    }
    
    #footer img {
        vertical-align: middle;
    }
    #footer a { 
        color: #808080;
    }
    #copyright {
        padding: 10px 0;
    }
    
    /* Remove duplicate bullets on IE6, due to IE8.js and inline style */
    * html #filelist li {
        filter: none;
    }
    
    #sitemap li {
        max-width: 400px;
    }
    #sitemap a {
        text-decoration: underline;
    }
    .sitemap {
        margin: 2em 0 2em 5px;
    }
    .sitemap ul {
       margin: 0.5em 0;
       padding-left: 20px;
       !padding-left: 0;
    }
    .sitemap li {
       margin: 0.5em 0;
       list-style: none;
       background: url(/shared/icons/page_white_text_width.png) no-repeat left top;
       padding-left: 20px;
    }
    .sitemap li.ZMS {
        background: url(/shared/icons/house.png) no-repeat left top;
    }
    .sitemap li.ZMSFolder {
        background: url(/shared/icons/folder.png) no-repeat left top;
    }
    .sitemap li.ZMSFile {
        background: url(/shared/icons/application.png) no-repeat left top;
    }
    .sitemap li.ZMSLinkElement {
        background: url(/shared/icons/world_link.png) no-repeat left top;
    }


    
    #cover {
        display: none;
    }
    #cover_outer, #cover_dim {
        display: table;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        overflow: hidden;
    }
    #cover_dim {
        background-color: #000;
        opacity: 0.80;
    }
    #cover_inner {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        /* IE6/7 fixes: */
        !position: relative;
        !top: 50%;
        !zoom: 1;
    }
    #cover_content {
        display: table; /* FF2 fix */
        display: inline-block;
        margin: 0 auto;
        text-align: left;
        /* IE6/7 fixes: */
        !position: relative;
        !top: -50%;
        /* Individual style: */
        background: #fff;
        padding: 10px;
    }
    .close_cover {
        cursor: pointer;
    }
    
  /**
   *  YAML Forms - visual styling
   *
   *  (en) visual form styling area
   *  (de) Festlegung des optischen Erscheinungsbildes
   */

  form.yform {
    background: #f4f4f4;
    border: 1px #ddd solid;
    margin: 0 0 1em 0;
    padding: 10px;
  }

  form.yform fieldset {
    border: 1px #ddd solid;
    background: #fafafa;
    margin: 0 0 1em 0;
    padding: 0.5em 1em;
  }

  form.yform legend {
    font-size: 125%; font-weight: normal; color: #000;
  }

  form.yform label {
    color: #666;
  }

  form.yform .type-text input,
  form.yform .type-text textarea,
  form.yform .type-select select {
    font-family:  Arial, Helvetica, sans-serif; /* proportional fonts for all form elements */
    border: 1px solid #ddd;
  }

  /* :hover and :focus status on form fields | Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus */
  form.yform div input:focus,
  form.yform div select:focus,
  form.yform div textarea:focus,
  form.yform div input:hover,
  form.yform div select:hover,
  form.yform div textarea:hover,
  form.yform div input:active,
  form.yform div select:active,
  form.yform div textarea:active {
    border: 1px #a66 solid;
    background: #fff;
  }

  /* Styling of buttons | Gestaltung von Buttons */
  form.yform .type-button input {
    border-top: 1px #ddd solid;
    border-left: 1px #ddd solid;
    border-right: 1px #444 solid;
    border-bottom: 1px #444 solid;
    color: #000;
    background: #454545 url(images/button_gray.png) top left repeat-x;
    padding: .5em 1.2em;
  }

  form.yform .type-button input#reset { color: #300; background: #661717 url(images/button_red.png) top left repeat-x; }
  form.yform .type-button input#submit { color: #330; background: #5e5607 url(images/button_yellow.png) top left repeat-x; }

  /* :hover and :focus status on buttons | Effekt zur Hervorhebung von Schaltern bei :hover oder :focus */
  form.yform div.type-button input:focus,
  form.yform div.type-button input:hover,
  form.yform div.type-button input:active {
    border-top: 1px #444 solid;
    border-left: 1px #444 solid;
    border-right: 1px #ddd solid;
    border-bottom: 1px #ddd solid;
    color: #fff;
    background: #555; 
  }

  form.yform div.type-button input#reset:focus,
  form.yform div.type-button input#reset:hover,
  form.yform div.type-button input#reset:active {
    background: #800; color: #fff;
  }

  form.yform div.type-button input#submit:focus,
  form.yform div.type-button input#submit:hover,
  form.yform div.type-button input#submit:active {
    background: #880; color: #fff;
  }

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

 /**
  * Vertical-Forms - technical base (standard)
  *
  * |-------------------------------|
  * | fieldset                      |
  * |-------------------------------|
  * |   label                       |
  * |   input / select / textarea   |
  * |-------------------------------|
  * | /fieldset                     |
  * |-------------------------------|
  *
  * (en) Styling of forms where both label and input/select/textarea are styled with display: block;
  * (de) Formulargestaltung, bei der sowohl label als auch input/select/textarea mit display: block; gestaltet werden
  *
  * WARNING: This part contains several IE-stability-fixes. Don't edit this part if you are not sure, what you're doing!
  */

  /* General form styling  | Allgemeine Formatierung des Formulars */
  form.yform { overflow: hidden; }
  form.yform fieldset { overflow: hidden; }
  form.yform legend { background: transparent; border: 0; }
  form.yform label { display:block; cursor: pointer; }
  form.yform .message { display: block; margin-bottom: 0.5em; color: #666; }

  /* Hiding of hidden fields (otherwise ugly spaces in Firefox) | Versteckte Felder wirklich verstecken (sonst ggf. häßliche Lücken im Firefox) */
  form.yform input[type=hidden] { display: none !important; }

  /* Highlight mandatory fields | Pflichtfeldkennzeichnung hervorheben */
  form.yform sup { color: #800; font-weight: bold; }

  /* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
  form.yform div.type-text,
  form.yform div.type-select,
  form.yform div.type-check,
  form.yform div.type-button {
    margin: 0.5em 0;
    position: relative;
    overflow: hidden;
  }

  /* styling standard form elements with 'almost' equal flexible width | Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite */
  form.yform .type-text input,
  form.yform .type-text textarea {
    display: block;
    position: relative;
    padding: 0.3em 0.3em;
    width: 58.5%;
  }

  form.yform .type-select select {
    display: block;
    position: relative;
    padding: 0.3em 2px 0.3em 1px;
    width: 60%;
    cursor: pointer;
  }
  form.yform .type-select select optgroup {
    font-style: normal;
    font-weight: bold;
  }

  form.yform .type-check input { cursor: pointer; }
  form.yform .type-check label { display: inline; }

  /* Styling of buttons | Gestaltung von Buttons */
  form.yform .type-button input {
    width: auto;
    cursor: pointer;
  }

  /* Styling of error-messages | Fehlermeldungen */
  form.yform div.error {
    border: 1px #a00 dashed;
    background: #faf4f4;
    padding: 0.5em;
  }

  form.yform div.error label { color: #000; font-weight:bold; }
  form.yform div.error .message { color: #800; }

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

 /**
  * Columnar forms display - technical base (optional)
  *
  * |-------------------------------------------|
  * | fieldset                                  |
  * |-------------------------------------------|
  * |                                           |
  * |   label   |   input / select / textarea   |
  * |                                           |
  * |-------------------------------------------|
  * | /fieldset                                 |
  * |-------------------------------------------|
  *
  * (en) Styling of forms where label floats left of form-elements
  * (de) Formulargestaltung, bei der die label-Elemente nach links fließen
  *
  * WARNING: This part contains several IE-stability-fixes. Don't edit this part if you are not sure, what you're doing!
  */

  /* Columnar display | Spalten-Darstellung */
  .columnar .type-text label,
  .columnar .type-select label {
    float: left;
    width: 30%; /* Can be fixed width too | Kann auch eine fixe Angabe sein */
  }

  /* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels */
  .columnar div.type-check { padding-left: 30%; }
  .columnar div.error .message { margin-left: 30%; }

  .columnar div.type-text input,
  .columnar div.type-text textarea { width: 67.8%; }
  .columnar div.type-select select { width: 69.4%; }
  
  /* width adjustments for IE 5.x & IE6 | Breitenanpassung für Internet Explorer 5.x und 6.0 */
  * html .columnar div.type-text input,
  * html .columnar div.type-text textarea { width: 67.2%; }
  * html .columnar div.type-select select { width: 68.8%; }
  
 /*------------------------------------------------------------------------------------------------------*/

 /**
  * Forms Fieldset/Legend-Bug in IE
  * @see http://www.mattheerema.com/web-design/2006/04/getting-fieldset-backgrounds-and-legends-to-behave-in-ie/
  *
  * @workaround
  * @affected IE 5.x/Win, IE6, IE7
  * @css-for IE 5.x/Win, IE6, IE7
  * @valid yes
  */
  
  /* IE5.x & IE6 */
  * html form.yform legend { position:absolute; top: -.5em; left: .5em; }
  * html form.yform fieldset { overflow:visible; height: 1%; margin-top:1.5em; padding-top:1.5em; }

  /* IE7 */
  *+html form.yform legend { position:absolute; top: -.5em; left: .5em; }
  *+html form.yform fieldset { overflow:visible; height:1%; margin-top:1.5em; padding-top:1.5em; }
}