/*  ----------------------------------------------------------------------------------------------------------  */
/*      KONZ 4.0 Landing Page
/*      Author: Ingo Blenke
/*      Author URI: www.id-on.de
/*  ----------------------------------------------------------------------------------------------------------  */

/*  ----------------------------------------------------------------------------------------------------------  */
/*                                             1. Resets  
/*  ----------------------------------------------------------------------------------------------------------  */

/*  meyer-reset with minor changes */
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    font-weight:inherit;
    font-style:inherit;
    font-family:inherit;
}
textarea, input {
    font-size:100%;
    font-weight:inherit; /* IE will ignore inherits here */
    font-style:inherit;
    font-family:inherit;
}
:focus {outline:0;} /* remember to define focus styles! */

body {line-height:100%;}

ol, ul {list-style:none;}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse:separate;
    border-spacing:0;
}
caption, th, td {
    text-align:left;
    font-weight:normal;
}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

/* if graphic buttons are used */
button {
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    overflow:visible; /* IE */
    white-space:nowrap; /* IE */
}

/*  ==========================================================================================================  */
/*                                             2. Generic
/*  ==========================================================================================================  */

body {
    color:#222;
    font-size:13px;
    line-height:140%;
    background:#fff url(../img/body_bg.png) repeat-x 0 0;
    font-family:'helvetica', 'arial', sans-serif;
}
.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}

a {
    text-decoration:none;
    color:#ae0000;
}
a:hover, a:focus {
    text-decoration:underline;
}

/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */

.clear {clear:both;}
    
/*  ----------------------------------------------------------------------------------------------------------  */
/*                                             3. Structure
/*  ----------------------------------------------------------------------------------------------------------  */

/*body {font:13px/140% 'arial', 'verdana', sans-serif;}*/

#wrapper {
    width:767px;
    margin:0 auto;
}
    #header {
        height:113px;
        background:url(../../img/widgets/microsite/microsite_header.png) no-repeat left top;
        position:relative;
    }
        #header a {
            position:absolute;
            top:20px;
            left:15px;
            width:135px;
            height:50px;
            text-indent:-9999px;
        }
        #fakenav {
            height:32px;
            padding-left:20px;
            background:url(../../img/widgets/microsite/microsite_nav_bg.png) repeat-x left top;
        }
            #fakenav li {
                float:left;
                height:32px;
                margin-right:10px;
            }
                #fakenav a {
                    float:left;
                    color:#fff;
                    padding:0 10px;
                    font:13px/32px 'trebuchet ms', 'lucida grande', 'helvetica', 'arial', sans-serif;
                }
    #stage-wrapper {
        padding:0 20px;
        background:url(../../img/widgets/microsite/microsite_wrapper_bg.png) no-repeat left top;
    }
        #stage {
            border-bottom:1px dotted #aaa;
            background:url(../../img/widgets/microsite/microsite_stage_bg.png) repeat-x left 33px;
        }


/* Taken from the main projects CSS */
/* -------------------------------------------------------------------------------------------------- */

button strong, .button {
    display:inline-block;
    height:30px;
    padding-left:24px;
    font-size:13px;
    background:url(../../img/widgets/microsite/button_sprite.png) no-repeat left top;
}
    button span, .button span {
        display:block;
        height:100%;
        line-height:30px;
        color:#fff;
        padding-right:12px;
        background:url(../../img/widgets/microsite/button_sprite.png) no-repeat right -120px;
    }
    button:hover strong, button:focus strong,
    .button:hover, .button:focus {
        text-decoration:none;
        background-position:0 -60px;
    }
    button:hover span, button:focus span,
    .button:hover span, .button:focus span {
        background-position:right -150px;
    }
ul.more {
    margin:8px 0 0;
    clear:both;
}
    .more li {margin:5px 0 0 0;}
    .more li:first-child {margin:0;}

        .more a, a.more, a.back-link {
            padding-left:20px;
            background:url(../../img/widgets/microsite/icons_sprite.png) no-repeat left -13px;
        }

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

#productpack {
    margin:21px 0 25px 30px;
    float:left;
    display:inline; /* IE */
    width:230px;
}

#prodinfo {
    width:430px;
    float:left;
    display:inline; /* IE */
    margin:33px 0 0 20px;
}
    #microsite #prodinfo {
        background:#FFFFFF;
        border:1px solid #CCCCCC;
        padding:8px 10px 0 15px;
        margin-top:28px;
        width:410px;
    }
        #microsite ul#buttons {margin-bottom:15px;}
    
    h1 {
        font:bold 18px/120% 'trebuchet ms', 'lucida grande', 'helvetica', 'arial', sans-serif;
        margin:8px 0 12px;
    }
    #featurelist li {
        padding:5px 0 5px 40px;
        margin:0 0 3px;
        background:url(../../img/widgets/microsite/microsite_arrow.png) no-repeat left center;
    }
    ul#buttons {margin:10px 0;}

        #buttons li {
            margin-right:10px;
            float:left;
        }
        #featurelist li strong {font-weight:bold;}

#content {padding:20px 0 0;}

.box {margin:0 0 20px;}

.box h2 {
    font:bold 18px/120% 'trebuchet ms', 'lucida grande', 'helvetica', 'arial', sans-serif;
    border:1px solid #aaa;
    border-bottom-style:dotted;
    padding:4px 10px;
}
    .box-content {
        padding:10px;
        border:1px solid #aaa;
        border-top:0;
    }
h3 {
    font:bold 14px/120% 'trebuchet ms', 'lucida grande', 'helvetica', 'arial', sans-serif;
    margin:4px 0 12px;
}
#price {
    display:block;
    font-size:13px;
}
    #price strong {
        font-weight:bold;
        font-size:16px;
    }
#footer {
    margin-top:30px;
    height:50px;
    background:#eee url(../../img/widgets/microsite/footer_bg.png) repeat-x left top;
    text-align:center;
}
    #footer ul {
        width:767px;
        margin:0 auto 16px;
        padding:16px 0 0;
    }
        #footer li {
            display:inline;
            padding:0 10px;
            border-left:1px solid #ccc;
        }
        #footer li:first-child {
            margin-left:0;
            border:0;
        }
            #footer a {color:#555;}


/* Microsite */
#productpack .guter-rat {
    background:url(../../img/guter-rat.png) no-repeat left top;
    height:103px;
    width:91px;
    margin:15px 0 0;
}

#microsite #featurelist #price {
    background:none;
    margin:20px 0 0;
    padding-left:0;
}