/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Horizontal list navigation "Shiny Buttons"
 *
 * @version         1.2
 * @lastmodified    $Date:2011-02-17 12:00:00 +0200 $
 */

@media all
{
    .hlist { width:880px; float:right; display:inline; position:relative; background:#ebebeb; border: 1px solid #ccc; }

    .hlist ul { padding:0; margin:0; list-style:none; position:relative; z-index:100;}
    .hlist > ul { border-left:1px transparent solid; border-right:1px transparent solid; }

    .hlist ul li { display:inline; float:left; margin:0; padding:0; }
    .hlist > ul > li { border-left:1px #ccc solid; border-right:1px transparent solid; }
    .hlist > ul > li.first { border-left:1px transparent solid; }
    .hlist > ul > li.last { border-right:1px transparent solid; }

    .hlist ul li a,
    .hlist ul li span.lang_item { display:block; float:left; width:auto; text-decoration:none; font-size:116.67%; line-height:1em; font-weight:normal; padding:0.5em 1em 0.5em 1em; cursor:pointer; background:transparent; }
    .hlist ul li span.lang_item { float:none; }
    .hlist > ul > li > a span { }
    .hlist > ul > li > a span.down,
    .hlist > ul > li span.down { padding-right:16px; background:url(../../../../img/zo_v1.2/arrow-down.png) no-repeat right center; }

    .hlist > ul > li > a:hover,
    .hlist > ul > li > a:focus,
    .hlist > ul > li > a:active,
    .hlist > ul > li > span.active { background:#e1e1e1; color:#231f20; text-decoration:none; outline: 0 none; }

    .hlist > ul > li > a:hover span {}
    .hlist > ul > li > a:hover span.down { padding:0 16px 0 0; background:url(../../../../img/zo_v1.2/arrow-down.png) no-repeat right center; }

    .hlist > ul > li.first:hover { border-left:1px #ccc solid; }
    .hlist > ul > li.last:hover { border-right:1px #ccc solid; }

    .hlist > ul > li.active { background:#e1e1e1; border-left:1px #ccc solid; border-right:1px transparent solid; }
    .hlist > ul > li.active.last { border-right:1px #ccc solid; }

    .hlist > ul > li.active a:focus,
    .hlist > ul > li.active a:hover,
    .hlist > ul > li.active a:visited,
    .hlist > ul > li.active a:active { background:transparent; color:#231f20; text-decoration:none; }

    /* Default list styling */
    .hlist ul li:hover {position:relative; z-index:200;}
    .hlist > ul > li:hover {border-right:1px #e1e1e1 solid;}

    /* keep the 'next' level invisible by placing it off screen. */
    .hlist ul ul {display:none; position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

    .hlist ul li:hover ul {display:block; left:-1px; top:28px; padding: 8px 0; background:#ebebeb; border:1px #ccc solid; white-space:nowrap; width:auto; height:auto; z-index:300;}
    .hlist ul li:hover ul li {display:block;  position:relative; float:none; width:auto; font-weight:normal;}
    .hlist ul li:hover ul li a,
    .hlist ul li:hover ul li span.lang_item {display:block; float:none; width:auto; text-decoration:none; color:#231f20; font-size:100%; line-height:1em; }
    .hlist ul li:hover ul li a:hover,
    .hlist ul li:hover ul li span.lang_item:hover {background:#e1e1e1; }

    
    .hlist > ul.droplist > li { width: auto; }
    .hlist > ul.droplist > li.first { border-left:1px #ccc solid; }
    .hlist > ul.droplist > li.last { border-right:1px #ccc solid; }

    .hlist > ul.droplist li:hover ul { width: 62px; }
    .hlist > ul.droplist li:hover ul#translation_bar { width: auto; }


  .hlist_plain {
    /* (en) containing floats in IE */
    width:auto;
    overflow:hidden;
    /* (en) containing floats in all other browsers */
    float:left;
    display:inline;
    /* (en|de) Bugfix:IE - collapsing horizontal margins */
    position:relative;
    /* (en) Repeat the main color from the image */
    background:transparent;
    border: 0 none;
    line-height:0;
    float:left;
  }

  .hlist_plain ul {
    margin:0;
    padding:0;
    /* (en|de) Bugfix:IE - Doubled Float Margin Bug */
    display:inline;
    float:left; /* LTR */
    /* (en) Left margin of the first button  */
    border-left:1px transparent solid;
    border-right:1px transparent solid;
  }

  .hlist_plain ul li {
    border-left:1px #ccc solid;
    border-right:1px transparent solid;
    /* (en|de) Bugfix:IE - Doubled Float Margin Bug */
    display:inline;
    float:left; /* LTR */
    font-size:100%;
    line-height:1em;
    list-style-type:none;
    margin:0;
    padding:0;
  }
  .hlist_plain ul li.first {
/*    border-left:1px transparent solid;*/
  }
  .hlist_plain ul li.last {
    border-right:1px transparent solid;
  }

  .hlist_plain ul li a,
  .hlist_plain ul li strong {
    background:transparent;
    display:block;
    font-size:1em;
    font-weight:normal;
    margin:0;
    padding:0.5em 1em 0.5em 1em;
    text-decoration:none;
    width:auto;
  }

  .hlist_plain ul li a:focus,
  .hlist_plain ul li a:hover,
  .hlist_plain ul li a:active  { background:#e1e1e1; color:#231f20; text-decoration:none; outline: 0 none; }

  .hlist_plain > ul > li:hover { border-right:1px #e1e1e1 solid; }
  .hlist_plain > ul > li.first:hover { border-left:1px #ccc solid; }
  .hlist_plain > ul > li.last:hover { border-right:1px #ccc solid; }

  .hlist_plain ul li.active {
    /* (en) Repeat the main color from the image */
    background:#e1e1e1;
    border-left:1px #ccc solid;
    border-right:1px #ebebeb solid;
  }
  .hlist_plain ul li.active.last {
    border-right:1px #ccc solid;
  }

  .hlist_plain ul li.active strong,
  .hlist_plain ul li.active a:focus,
  .hlist_plain ul li.active a:hover,
  .hlist_plain ul li.active a:visited,
  .hlist_plain ul li.active a:active { background:transparent; color:#231f20; text-decoration:none; }

    .menu
    {
        overflow:hidden;
        position:relative;
        left: 0;
    }
    .menu ul
       {
        float:left;
        position:relative;
        left:50%;
        text-align:center;
    }
    .menu ul li
       {
        border-right: #FFFFFF 2px solid;
        float:left;
        height:23px;

        position:relative;
        right:50%;
    }
    .menu ul li.first
       {
        border-left: #FFFFFF 2px solid;
    }
    .menu ul li a
        {
        color: #FFFFFF;
        font-weight: bold;
        text-decoration:none;
        float:left;
        padding: 4px 10px;
        height: 15px;
        white-space: nowrap;
    }
    .menu ul li a:hover
        {
        background: #B2B2B2;
    }

    /*****************************************
    ============= LANGUAGE BAR
    *****************************************/
    .lang
        {
        position: absolute;
        text-transform: uppercase;
        top: 0;
    }
    .lang ul
       {
        display: inline-block;
        height:23px;
    }
    .lang ul li
       {
        float:left;
        border-right: #FFFFFF 2px solid;
        height:23px;
    }
    .lang ul li.first
       {
        border-left: none;
    }
    .lang ul li a.lang_item,
    .lang ul li span.lang_item
        {
        color: #FFFFFF;
        font-weight: bold;
        text-decoration:none;
        float:left;
        padding: 4px 10px;
        height: 15px;
    }
    .lang ul li a.lang_item:hover
        {
        background: #B2B2B2;
    }
}