/**
 * @name Kalnik.net Screen-Stylesheet
 * @description Bildschirm-Darstellung von Kalnik.net
 * @author Sascha Quasthoff
 * @copyright Sascha Quasthoff 2008
 * @version 1.0
 * @date 21.05.2008
 */


/* @group Allgemeines */

    @import url('reset.css');

    .autoclear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
    .autoclear { display: inline-table; }

    /* Hides from IE-mac \*/
    * html .autoclear {height: 1%;}
    .autoclear {display: block;}
    /* End hide from IE-mac */

    .corner { background-image: url(images/round-corners.jpg); background-repeat: no-repeat;
              width: 11px; height: 11px; position: absolute; z-index: 99; }
    .shadow_bottom { background: url(images/shadow-bottom.gif) repeat-x left bottom;
                     width: 100%; height: 10px; position: absolute; bottom: 0; left: 0; z-index: 0; }
    .left_top     { top: 0; left: 0; height: 10px; width: 10px; background-position: top left; }
    .right_top    { top: 0; right: 0; height: 10px; width: 11px; background-position: right top; }
    .left_bottom  { bottom: 0; left: 0; height: 11px; width: 10px; background-position: left bottom; }
    .right_bottom { bottom: 0; right: 0; height: 11px; width: 11px; background-position: right bottom; }

/* @end */





/* @group Schrift */

    body { font: normal 62.5%/140% Arial, Helvetica, sans-serif; }

/* @end */





/* @group Struktur */

    body { background: url(images/body-bg.jpg) repeat-x left top; padding-bottom: 2.5em; }

    #site { background: url(images/site-bg.gif) repeat-y left top;
            position: relative; margin: 2.5em auto 5em; padding: 0 3.7em; width: 830px; }

    #footer { background: url(images/footer-bg.gif) no-repeat left bottom; margin-left: -3.7em;
              position: absolute; bottom: -30px; height: 30px; width: 904px; }

    #navi { background: white url(images/shadow-right.gif) repeat-y right top; position: relative; }

    #content.wide { margin-top: 5px; }
    #content.narrow { float: left; min-height: 20px; margin-top: 5px; width: 625px; }

    #wrapper { background: url(images/content-bg.jpg) repeat-y left top; position: relative; margin-top: 2px; width: 826px; }
    .content_top { background: url(images/content-top-bg.jpg) no-repeat left top; position: absolute; top: 0; left: 0; width: 826px; height: 11px; }
    .content_bottom { background: url(images/content-bottom-bg.jpg) no-repeat left top; position: absolute; bottom: 0; left: 0; width: 826px; height: 11px; }

    #wrapper.wide { background-image: url(images/content-wide-bg.jpg); }
    .wide .content_top { background-image: url(images/content-wide-top-bg.jpg); }
    .wide .content_bottom { background-image: url(images/content-wide-bottom-bg.jpg); }

    .column { float: left; width: 382px; }
    .first_col { padding: 2em 10px 30px 20px; }
    .second_col { padding: 2em 20px 30px 10px; }

    .startbox { height: 160px; }
    *+html .startbox { height: 160px; margin-bottom:2.5em !important; }

/* @end */


#logo { margin-left: -3.7em; }





/* @group Navigationslisten */


    /* Navigation */
    #navi { margin-top: 5px; width: 825px; }
    #navi ul { min-height: 30px; }
    *+html #navi { height: 60px !important; }
    #navi li { border-left: 1px solid black; display: inline; }
    #navi li.first { border:none; }
    #navi #main a { padding: .25em .75em .5em; line-height: 100%; }
    #navi #meta a { padding: .5em .75em .25em; }
    *+html #navi #meta a { padding: 0 .75em; }
    *+html #navi #main a { padding: 0 .75em; }
    *+html #navi #main { margin-top: -6px; margin-bottom:10px; }
    * html #navi #meta a { padding: 0 .75em; }
    * html #navi #main a { padding: 0 .75em; }
    * html #navi #main { margin-top: -6px; margin-bottom:10px; }
    #navi a { color: black; font-size: 1.2em; font-weight: bold; text-decoration: none; padding: 0 .75em; line-height: 250%; }
    #navi a:hover { color: #fa9f2d; text-decoration: none; }
    #navi li.active a { color: #fa9f2d; text-decoration: underline; }


    /* Unternavigation */
    #subnavi { float: left; margin: 5px 4px 0 0; padding: 15px 8px; width: 180px; z-index: 99; }
    #subnavi a { color: black; font-size: 12px; font-weight: bold; text-decoration: none;
                 float: left; padding: 4px 7px; width: 164px;}
    #subnavi a:hover { background: #ffebd2; }
    #subnavi li { float: left; }
    #subnavi li.active a { background: #f7cb92; }
    #subnavi li li a { font-weight: normal; padding-left: 14px; width: 157px; }
    #subnavi li li.active a { background: #ffebd2; }


/* @end */





/* @group Elemente */


    /* Inline-Elemente */
    a { color: #fa9f2d; outline: none; text-decoration: none; }
    a:hover { color: #fa9f2d; text-decoration: underline; }


    /* Ueberschriften */
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.4em; margin: 1em 0 .75em; font-weight: bold; }
    h4 { font-size: 1.2em; margin: 1em 0 .75em; line-height: 140%; font-weight: bold; }


    /* Absaetze */
    p { color: black; font-size: 1.2em; line-height: 140%; margin: 1em 0; }


    /* Listen */
    .produktuebersicht { margin-top: 15px; }
    .produktuebersicht li { float: left; width: 280px; padding-bottom: 15px; margin: 0 15px 15px; }
    .produktuebersicht p { padding-right: 15px; margin: 0; }
    .produktuebersicht li.even p { border-right: none; }
    .produktuebersicht strong { font-size: 13px; line-height: 190%; }
    .produktuebersicht img { float: left; margin-right: 15px; }

/* @end */





/* @group Formulare */

    form { padding: 2em; }
    *+html form { margin-bottom:25px;}
    form div { float: left; margin: .5em 0; width: 100%; }
    legend { font-size: 1.4em;  }
    label { font-size: 1.3em; font-weight: bold; width: 20%; float: left; line-height:110%; }
    input, textarea { border: 1px solid #999;
                      width: 75%; float: right; }

    .buttons input { border: 1px solid #666; width: auto; float: left; margin-left: 25%; }

/* @end */



/* @group TinyMCE-spezifisches */

.mceContentBody .column { background: white !important; width: 47% !important; padding: 2em 1% 30px 2% !important; }

/* @end */