/* Allgemein */

body {
    font-family     : sans-serif;
    font-size       : 13px;
}

strong {
    font-weight     : bold;
}

em {
    font-style      : italic;
}

a {
    color           : black;
    text-decoration : underline;
}

a img {
    border          : none;
}

/* Layout */

body {
    background      : maroon url('/pix/bg.jpg') repeat top;
    color           : white;
    margin          : 0;
    padding         : 0;
}

#canvas {
    width           : 800px;
    margin          : 0 auto;
    padding         : 0 10px;
    background      : white url('/pix/canvasbg.jpg') repeat-y top;
    color           : black;
}

#navi {
    display         : block;
    margin          : 0;
    padding         : 0 1px;
    border          : solid #aaaaaa;
    border-width    : 0 20px;
    background-color: #e4e4e4;
}

#navi li {
    display         : inline-block;
    margin          : 0;
    padding         : 0;
}

#navi a,
#navi strong.da {
    display         : inline-block;
    margin          : 0;
    padding         : .5em 1em .4em;
    font-weight     : bold;
    font-size       : 1.1em;
    text-decoration : none;
    color           : #888;
    text-shadow     : 1px 1px 0 #efefef;
}

#navi a:before,
#navi strong.da:before {
    content         : '.:: ';
    text-shadow     : none;
}

#navi a:before {
    color           : #aaaaaa;
}

#navi strong.da {
    background-color: #800;
    color           : white;
    text-shadow     : 0 0 5px white;
}

#navi a:hover {
    background-color: #aaaaaa;
    color           : white;
    text-shadow     : 0 0 5px #efefef;
}

#navi a:hover:before {
    color           : #e4e4e4;
}

#content {
    border          : solid #efefef;
    border-width    : 0 20px;
    margin          : 0;
    padding         : 20px 40px 30px;
}

address {
    background-color: #e4e4e4;
    color           : #aaaaaa;
    font-size       : .9em;
    font-style      : normal;
    border          : solid #aaaaaa;
    border-width    : 0 20px;
    margin          : 0;
    padding         : 25px 40px;
}

address a {
    color           : inherit;
    margin-left     : 1em;
}

address:hover {
    background-color: #efefef;
    color           : #888;
    border-color    : #e4e4e4;
}

/* Typo */

#content {
    line-height     : 150%;
}

#content h1 {
    font-family     : serif;
    font-size       : 2em;
    font-weight     : normal;
    letter-spacing  : .1ex;
    margin          : 1.2em 0 1em;
    padding         : 0 0 .3em;
    border-bottom   : 4px solid #d38b88;
}

#content h2 {
    font-size       : 1.3em;
    font-weight     : bold;
    color           : #444;
    margin          : 1.5em 0 1em;
    padding         : 0 0 .2em;
    border-bottom   : 3px solid #d38b88;
}

#content h3 {
    font-size       : 1.2em;
    font-weight     : bold;
    margin          : 1.5em 0 1em;
    clear           : right;
}

/* Spezialitäten */

#groups {
    float           : right;
    width           : 247px;
    margin          : 0 0 20px 30px;
    padding         : 5px 0 0 5px;
    background-color: #efefef;
}

#groups a {
    display         : inline-block;
    width           : 100px;
    height          : 25px;
    background-color: #e4e4e4;
    color           : #efefef;
    text-align      : right;
    margin          : 0 2px 2px 0;
    padding         : 55px 10px 0;
    font-size       : 15px;
    letter-spacing  : .1ex;
    font-weight     : bold;
    text-decoration : none;
}

#groups a:hover {
    background-color: #aaaaaa;
    color           : white;
    text-shadow     :
        0 0 1px black,
        0 0 1px black,
        0 0 1px black,
        0 0 1px black,
        0 0 1px black,
        0 0 5px black,
        0 0 5px black;
}


#groups a#group_standard {
    background      : black url('/pix/groups/standard_gray.jpg') no-repeat top left;
}

#groups a#group_standard:hover {
    background      : black url('/pix/groups/standard.jpg') no-repeat top left;
}


#groups a#group_latein {
    background      : black url('/pix/groups/latein_gray.jpg') no-repeat top left;
}

#groups a#group_latein:hover {
    background      : black url('/pix/groups/latein.jpg') no-repeat top left;
}


#groups a#group_gesellschaftskreise {
    background      : black url('/pix/groups/gesellschaftskreise_gray.jpg') no-repeat top left;
}

#groups a#group_gesellschaftskreise:hover {
    background      : black url('/pix/groups/gesellschaftskreise.jpg') no-repeat top left;
}


#groups a#group_jugend {
    background      : black url('/pix/groups/jugend_gray.jpg') no-repeat top left;
}

#groups a#group_jugend:hover {
    background      : black url('/pix/groups/jugend.jpg') no-repeat top left;
}


#groups a#group_kinder {
    background      : black url('/pix/groups/kinder_gray.jpg') no-repeat top left;
}

#groups a#group_kinder:hover {
    background      : black url('/pix/groups/kinder.jpg') no-repeat top left;
}


#groups a#group_kooperationen {
    background      : black url('/pix/groups/kooperationen_gray.jpg') no-repeat top left;
}

#groups a#group_kooperationen:hover {
    background      : black url('/pix/groups/kooperationen.jpg') no-repeat top left;
}


#welcome {
    margin-right    : 280px;
}

table#training {
    border-spacing  : 1px;
}

#training th, #training td {
    padding         : .5em 1ex;
    text-align      : left;
}

#training thead th {
    font-weight     : normal;
    background-color: #e4e4e4;
    color           : #444;
}

#training tbody th, #training tbody td {
    font-weight     : normal;
    background-color: #efefef;
    color           : #444;
}

#training tbody tr:nth-child(even) th,
#training tbody tr:nth-child(even) td {
    background-color: #e4e4e4;
    color           : #444;
}

#training tbody td:first-of-type {
    font-weight     : bold;
    color           : black !IMPORTANT;
}

#training tbody tr.day th {
    font-weight     : bold;
    text-align      : center;
    background-color: #d38b88;
    color           : black;
}

#archiv_jahre {
    font-size       : 1.2em;
    line-height     : 150%;
}

#archiv_jahre a {
    margin-right    : 1ex;
    text-decoration : none;
    font-weight     : bold;
    color           : #800;
}

#archiv_jahre a:hover {
    border-bottom   : 3px solid #d38b88;
}

#meldeformular th {
    font-weight     : bold;
    text-align      : right;
    vertical-align  : top;
    padding         : 5px;
}

#meldeformular td {
    padding         : 5px;
}

#meldeformular input[type=text],
#meldeformular textarea {
    width           : 55ex;
    font-size       : 1em;
    font-family     : inherit;
    padding         : .3em;
    border          : 1px inset #aaaaaa;
    background-color: #efefef;
}

#meldeformular textarea {
    height          : 4em;
}

#meldeformular .formalia {
    text-align      : right;
}