@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Template for designing a screen layout
 * (de) Gestaltungsvorlage für die Erstellung eines Screenlayouts
 *
 * @copyright       Copyright 2005-2009, 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)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.2
 * @revision        $Revision:392 $
 * @lastmodified    $Date:2009-07-05 12:18:40 +0200 (So, 05. Jul 2009) $
*/

@media screen, projection
{
    /**
     * (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera
     * (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera
     *
     * @workaround
     * @affected IE8, FF, Webkit, Opera
     * @css-for all
     * @valid CSS3
    */

    body { overflow-y:scroll; }

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

    /**
     * Design of the Basic Layout | Gestaltung des YAML Basis-Layouts
     *
     * @section layout-basics
    */

    /* Page margins and background | Randbereiche & Seitenhintergrund */
    body {
        background: #d0af6d;


    }

    /* Layout:Width, Background, Border | Layout:Breite, Hintergrund, Rahmen */
    .page_margins {
        margin: 0 20px 42px 20px;
        width: 980px;
    }
    .page{  }

    /* Design of the Main Layout Elements | Gestaltung der Hauptelemente des Layouts */
    #header { height: 42px  }
    #topnav {  }

    #topnav ul li {
        display: inline; list-style-type: none;
								font-size: 0.9em;
    }

    #main { background: #fff url(../../images/bg-content.jpg) top left; }
    #main { background: #fff url(../../images/bg-content-sub.jpg) top left; }
    #main { background: #fff url(../../gfx/main-bg-default.jpg) top left repeat-y;  }

    #footer {  }


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

    /**
     * Formatting of the Content Area | Formatierung der Inhaltsbereichs
     *
     * @section layout-main
    */

    #col1 {width: 185px; padding-bottom:200px; clear: both}
    #col1_content {}
    #col1_header { background: transparent url(../../images/corner_left_col1.gif) no-repeat left top;}

    #col2 {width: 161px; }
    #col2_content {}
    #col2_header {}

    #col3 {width: 793px; margin: 0px 0  0 187px; padding-bottom: 20px;}
    #col3_content {position: relative;}
    #col3_header {  background: #2f689b; width: 794px; border-left: 3px solid #fff; border-right: 3px solid #fff; border-bottom: 6px solid #fff; padding-left: 180px }


    #col2_content img {
        margin: 0;
        padding: 0;
        border: 0;
        width: 161px;
    }

    #col1_header, #col2_header, #col3_header, #col4_header {
        height: 34px;
        background: #2F689B;
        z-index: 5;
    }


    .subcr, .subcl, #footer ul li, #footer ul, #breadcrumb ul, #breadcrumb ul li, #nav ul, #nav ul li, 
    .searchbox-sword, .searchbox-submit, .dottet-line,.main-content-left .index-teaserbox h2, 
    .main-content-left .index-teaserbox h3, .main-content-left .index-teaserbox h4, .main-content-left .product-teaser-content h2  {
        padding: 0;
        margin: 0;
    }
    .subcr {
        /*font-family: Georgia, Times, Serif;*/
        margin-bottom: 140px;
    }
    .subcolumns {
        width: 793px;
    }

    .main-content-left {
        width: 581px;
        
    }
    .main-content-left {width: 531px; padding: 0px 8px 0px 18px}

    .main-content-right {
        width: 210px;
        margin-left: 3px;
        margin-right: 13px;
    }

    #logo {
      width: 930px;
      height: 28px;
      margin: 0px;
      padding: 43px 0 39px 50px;

      background: url(../../gfx/bg-logo.jpg) top left no-repeat;
    }
    
    
    #search_wrapper {float: left; width: 555px; height: 34px; overflow: hidden}
    #social_wrapper {float: right; width: 100px;}   
    
    #social_wrapper a.social_button {
        display: block; 
        float: left; 
        width: 22px; 
        height: 22px; 
        
        margin-right: 4px; 
        margin-top: 5px;
    }
    
    #social_wrapper a.activate_social_button {
        font-size: 11px;
        color: #000;        
    }
    
    #social_wrapper img {width: 22px; height: 22px}
    
    ul.social_media_list {margin: 0; padding: 0; margin-top: 10px}
    ul.social_media_list li {display: block; float:left; list-style: none; margin: 0; padding: 0; height: 25px}
    
    .social_buttons_active {clear: both;}
    
    ul.social_media_list li.facebook_button_active {padding-top: 5px; margin-right: 5px; overflow: hidden; width: 85px;}
    ul.social_media_list li.twitter_button_active {padding-top: 5px; margin-right: 5px; width: 68px; overflow: hidden;}
    ul.social_media_list li.gplus_button_active {padding-top: 2px; width: 40px; overflow: hidden;}
    
    .social_buttons_inactive {clear: both;}

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

    /**
     * Design of Additional Layout Elements | Gestaltung weiterer Layoutelemente
     *
     * @section layout-misc
    */


    /*BREADCRUMB
    ---------------------------------------------------------------*/
    #breadcrumb {
        background: #fff;
        height: 31px;
        line-height: 31px;
        padding-left: 18px;
        font-size: 0.9em;
        
    }

    .graybg #breadcrumb {
        background: #f4f4f4;
    }

    #breadcrumb ul {
        display: inline;
        list-style-type: none;
        margin-left: 3px;
    }

    #breadcrumb ul li {
        display: inline;
        list-style-type: none;
        color:#0057A8;
								height: 30px;
								line-height: 30px;
    }

    #breadcrumb ul li span
    {
        padding:0 3px;
    }




    /**
    * ------------------------------------------------------------------------------------------------- #
    *
    * Skiplinks
    *
    * (en) Visual styling for skiplink navigation
    * (de) Visuelle Gestaltung der Skiplink-Navigation
    *
    * @section content-skiplinks
    */

    #skiplinks a.skip:focus,
    #skiplinks a.skip:active {
        color:#fff;
        background:#333;
        border-bottom:1px #000 solid;
        padding:10px 0;
        text-decoration:none;
    }


    /* MAIN NAVIGATION
    ---------------------------------------------------------------*/
    #nav
    {

    }

    #nav a:focus,
    #nav a:hover,
    #nav a:active{text-decoration:none;}
    
    #nav ul {
        list-style-type: none;
        background: #f4f4f4;
        padding-top: 11px;
        background: #f4f4f4 url(../../images/corner_nav.gif) no-repeat left top;        
    }

    #nav ul li {
        border-bottom: 1px solid #fff;
        display: block;
        background: #f4f4f4 url(../../images/corner_nav_level1.gif) no-repeat left top;        

    }
    #nav ul li a {
        line-height: 28px;
        display: block;
        padding-left: 28px;
        background: url(../../images/nav-no.jpg) 15px 12px no-repeat;
        color: #000;
        display: block;
        width: 157px;
    }

    #nav ul li.fachinfos a {
        
        height: 28px;
        display: block;
        padding-left: 28px;
        background: #fafafa url(../../images/nav-act.jpg) 15px 11px no-repeat;
        color: #0057a8;
    }

    #nav ul li.active
    {
        background: #b54409 url(../../images/corner_nav_level1_act.gif) no-repeat left top;        
    }

    #nav ul li.active a{
        background: url(../../images/main-nav1-cur.gif) 15px 12px no-repeat;
        color: #fff;
    }
    #nav ul li ul li a, #nav ul li.active ul li a,
    #nav ul li.swp_product_search.active ul li a {
        padding-left: 40px;
        background: #fff url(../../images/nav-no.jpg) 27px 9px no-repeat;
        color: #000;
        line-height: 22px;
        display: block;
        width: 145px;
    }
    #nav ul li ul li {
        border-bottom: 0px;
        line-height: 22px;
        width: 185px;
        display: block;      
    }
    
    #nav ul li ul li.active a, #nav ul li.active ul li.active a {
        padding-left: 40px;
        background: #f7ece6 url(../../images/main-nav2-cur.gif) 27px 9px no-repeat;
        color: #b54409;
        
    }

    #nav ul li ul li a:hover, #nav ul li.active ul li a:hover {
        padding-left: 40px;
        background: #f7ece6 url(../../images/main-nav2-cur.gif) 27px 9px no-repeat;
        color: #b54409;
    }


    #nav ul li ul{
        padding: 8px 0px;
        background: #fff;
        width: 185px;
    }

    #nav ul li ul li ul{
        padding: 8px 0px 18px;
        background: #fff;
    }

    #nav ul li ul li ul li {
        border-bottom: 0px;
        line-height: 18px;
        background: none;

    }

    #nav ul li ul li ul li a, #nav ul li.active ul li.active ul li a, #nav ul li ul li ul li a:hover, #nav ul li.active ul li.active ul li a:hover  {
        padding-left: 40px;
        background: none;
        color: #000;
        line-height: 18px;
        display: block;
        width: 145px;
    }

    #nav ul li ul li ul li.active a, #nav ul li.active ul li ul li.active a {
        padding-left: 40px;
        background: #ffffff;
        color: #b54409;
        font-weight: bold;
    }
    
    #nav ul li ul li ul li.active
    {
        background:#ffffff;
    }

    #nav ul li.swp_product_search a {
        background: url("../../images/search_icons.png") no-repeat scroll 13px 8px;
    }

    #nav ul li.swp_product_search.active a{
        background: url("../../images/search_icons.png") no-repeat scroll 13px -52px;
    }



    .clearer {
        clear: both;
    }
    .dotted-line {
        background:transparent url(../../images/dotted_line.gif) repeat-x scroll left top;
        border:none;
    }
    
    .dotted-line-bottom {
        background:transparent url(../../images/dotted_line.gif) repeat-x scroll left bottom;
        border:none;
    }    

    /* LANGUAGE NAVIGATION
    ---------------------------------------------------------------*/
    #header #topnav { 
        right: 25px;
    }

    #topnav ul li a, #topnav ul li {
        color: #fff;

    }
    #topnav ul li.active {
        color: #f5e4c1;
    }


    /* FOOTER
    ---------------------------------------------------------------*/
    #footer, .quicknav  {
        text-align: center;
        height: 48px;
        line-height: 48px;
        font-size: 1em;
    }
    #footer ul li, 
    #footer ul ,
    .quicknav ul li,
    .quicknav ul
    {
        display: inline; list-style-type: none;position: relative;
    }
    .quicknav ul {
      width: 600px;
    }
    #footer, #footer a,
    .quicknav, .quicknav a {
        color: #fff;
    }

    #footer a ,
    .quicknav a
    {
        margin-left: 14px;
    }
    
    #footer span.print_link a, .quicknav span.print_link a {
        background: transparent url(../../images/ico_print.png) center left no-repeat;
        padding-left: 20px;
    }
    
    #footer span.recommend_link a, .quicknav span.recommend_link a {
        background: transparent url(../../images/ico_mail.png) center left no-repeat;
        padding-left: 20px;
    }
    
    #footer a {
        font-weight: bold;
    }

    #footer .copyright, #footer ul,
    .quicknav .copyright, .quicknav ul
    {

        margin-right: 14px;
    }

    #footer .copyright,
    .quicknav .copyright {
        color: #f5e4c1;
    }

    #header-quicknav {
      width: 900px;
      float: left;
    }
    #header-quicknav {
      text-align: left;
      line-height: 42px;
      padding-left: 40px;
    }

    /* FORMULARS
    ---------------------------------------------------------------*/
    
    legend { display:none; }
    
    select { border:1px solid #bebebe; height:22px; }

    .text_small { font-size:11px; }
    
    .button
    {
        background:transparent url(../../images/btn_bg.png) repeat-x scroll 0 0;
        color:#0057A8;
        cursor:pointer;
        font-size:11px;
        height:26px;
        margin:11px 11px 11px 0;
        padding:5px !important;
        width:auto;
        border:1px solid #bebebe;
    }
    
    .text
    {
        font-size:12px;
        height:15px;
        padding:2px 6px 5px;        
    }
    
    label 
    {
        font-family:arial; font-weight:700;
    }     
    
}