@charset "utf-8";

/**********************************************************************/
/* 1. Global reset courtesy of Eric Meyer:                            */
/*    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/    */
/*    (slightly modified version)                                     */
/**********************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, 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-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}


/**********************************************************************/
/* 2. Some very basic helper styles which always come in handy        */
/**********************************************************************/

/* Browser scroll bar always on */
/* html { height: 100%; }
body { height: 101%; } */

/* Hide elements the screen user doesn't need */
.invisible {
    position: absolute;
    left: -9999em;
}

a.invisible:focus {
    position: static;
    left: 0;
}

/* New clearfix */
/* http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ */
.clearfix:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    font-size: 0;
    visibility: hidden;
}

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.cboth { clear: both; }

/**********************************************************************/
/* 3. Basic styles against the reset                                  */
/**********************************************************************/

body {
    background: #edf2e1;
    color: #333;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    line-height: 1.5;
}

code, kbd, var,
tt, pre { font-family: Consolas, "Courier New", Courier, monospace; }

pre { font-size: .8125em; }

p code, p kbd,
p var, p tt { line-height: 1; }

a:link,
a:visited { text-decoration: underline; }

a:active,
a:focus { outline: 1px dotted #888; }

strong, dt { font-weight: bold; }

em { font-style: italic; }

abbr[title] {
    border-bottom: 1px dotted #888;
    cursor: help;
}

a abbr { cursor: pointer!important; }

del {
    color: #888;
    text-decoration: line-through;
}

ins {
    border-bottom: 1px dashed #888;
    text-decoration: none;
}

sub { vertical-align: text-bottom; }
sup { vertical-align: text-top; }

sub, sup {
    font-size: 75%;
    line-height: 1;
}

ol { list-style-type: decimal; }
ul { list-style-type: disc; }

ol { padding-left: 2.25em; }
ul { padding-left: 1em; }

blockquote {
    color: #41843d;
    font-variant: small-caps;
    margin: 0 0 20px;
    padding: 0;
    width: 400px;
}

/* text-indent doesn't make sense in IE6 + IE7  */
/* because it doesn't do :before or :after      */
* html blockquote { text-indent: 0em; }
*:first-child+html blockquote { text-indent: 0; }

blockquote { quotes: "\201E" "\201C" "\201A" "\2018"; }
blockquote:lang(de) { quotes: "\201E" "\201C" "\201A" "\2018"; }
blockquote:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019"; }

blockquote p:before { content: open-quote; }
blockquote p:after { content: close-quote; }

/* Safari support */
blockquote * { quotes: none; }
blockquote > *:before { content: "\201E"; }
blockquote > *:after  { content: "\201C"; }

*[lang~='de'] blockquote > *:before,
blockquote[lang~='de'] > *:before { content: "\201E"; }
*[lang~='de'] blockquote > *:after,
blockquote[lang~='de'] > *:after { content: "\201C"; }

*[lang~='en'] blockquote > *:before,
blockquote[lang~='en'] > *:before { content: "\201C"; }
*[lang~='en'] blockquote > *:after,
blockquote[lang~='en'] > *:after { content: "\201D"; }

blockquote p.no-quotes { quotes: none; }
blockquote > p.no-quotes:before { content: ""; }
blockquote > p.no-quotes:after  { content: ""; }

blockquote p { margin-bottom: 0; }

p.no-quotes {
    font-variant: normal;
    margin-bottom: 0;
    text-align: right;
    text-indent: 0;
}

legend, label, select,
input, textarea { font-family: Arial, Helvetica, Verdana, sans-serif; }

input, textarea, select { font-size: 1em; }

label { font-weight: normal; }

label, button,
input[type=button],
input[type=submit] { cursor: pointer; }

fieldset {
    display: block;
    margin: 0 0 1em;
}

input, textarea { padding: 2px; }

/* This positions an unstyled legend element */
/* correctly in IE6 + IE7                    */
* html legend,
*:first-child+html legend {
    position: relative;
    left: -10px;
}


/**********************************************************************/
/* 4. Images with or w/out captions                                   */
/**********************************************************************/

img { vertical-align: bottom; }

img, .img-caption { margin-bottom: 1em; }

.img-single { display: inline; }

.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.img-left {
    float: left;
    margin-right: 2.5em;
}

.img-right {
    float: right;
    margin-left: 2.5em;
}

.img-caption { border: 1px solid #aaa; }

.img-caption img {
    border: none;
    display: block;
    margin-bottom: 0;
}

.img-caption p {
    background: #eee;
    border-top: 1px solid #aaa;
    font-size: .75em;
    margin: 0;
    padding: .25em;
    text-align: center;
}

#content a.img-link:link,
#content a.img-link:visited,
#content a.img-link:hover,
#content a.img-link:focus,
#content a.img-link:active {
    background: transparent;
    display: inline-block;
}


/**********************************************************************/
/* 5. Screen styles                                                   */
/**********************************************************************/

p, ol, ul, dl,
address, pre, table { margin-bottom: 1em; }

li ol, li ul { margin-bottom: 0; }

#seite {
    background: #fff url(../img/body-bg.png) top left no-repeat;
    border: 1px solid #41843d;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 4px 4px 4px #888;
    -moz-box-shadow: 4px 4px 4px #888;
    -webkit-box-shadow: 4px 4px 4px #888;
    color: #333;
    margin: 10px auto 20px;
    max-width: 99%;
    width: 960px;
}

#header h1 {
    color: #41843d;
    font-size: 60px;
    font-weight: normal;
    margin: 24px 0 0;
}

#header p {
    color: #93bd3a;
    font-size: 24px;
    margin-bottom: 48px;
    padding-left: 16px;
}

#nav {
    display: inline;
    float: left;
    list-style: none;
    padding: 0;
    padding-top: 370px;
    width: 30%;
}

#nav li {
    margin-bottom: 2px;
    padding-left: 6px;
}

#nav strong,
#nav a { padding: 2px 4px; }

#nav a:link,
#nav a:visited,
#nav strong {
    background: #41843d;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

#nav a:hover,
#nav a:active,
#nav a:focus {
    background: #a2b992;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #333;
}

#content {
    display: inline;
    float: right;
    width: 70%;
}

a:link,
a:visited {
    color: #41843d;
    text-decoration: underline;
}

a:hover,
a:active,
a:focus {
    background: #93bd3a;
    color: #000;
}

#content #laufweite { width: 400px; }

#content h2 {
    font-size: 24px;
    margin-bottom: 16px;
}

#content h3, #content h4,
#content h5, #content h6 {
    font-size: 18px;
    margin-bottom: 16px;
}

#startseite #content,
#hilfe #content,
#kosten #content,
#ueber #content,
#kontakt #content,
#impressum #content {
    background-position: 432px 136px;
    background-repeat: no-repeat;
}


#startseite #content { background-image: url(../img/mood-start.jpg); }
#hilfe #content { background-image: url(../img/mood-hilfe.jpg); }
#kosten #content { background-image: url(../img/mood-kosten.jpg); }
#ueber #content { background-image: url(../img/mood-ueber.jpg); }
#kontakt #content { background-image: url(../img/mood-kontakt.jpg); }
#impressum #content { background-image: url(../img/mood-impressum.jpg); }

#unterschrift {
    background: url(../img/unterschrift.png) 80% 0% no-repeat;
    height: 110px;
    text-indent: -999em;
}