/* @group Elements */

/**
FARBEN
Grundfarben
rot         #27333a
blau        #0053a6

Default     #e1001b
Languages   #e33272
Cultures    #ff6200
Health      #028d36
Management  #728490
Media       #00a4b6


#4d4d4d -> Schriftfarbe, Linkfarbe
#0053a6 -> Linkfarbe hover
#f5f5f5 -> Hintergrundfläche Footer
#27333a -> Schriftfarbe Footer, Breadcrumb

SCHRIFTEN
Grundschrift: Arial, sans-serif;
Webfont für Titel und NavMain: Graphik bold

http://pxtoem.com/
base:           15px -> .938em;
base comressed: 14px -> .875em;

Normalansicht                       | Ansicht Compressed
15px => 1em / Grundschrift          | 14px => 1em Grundschrift
80px => 5.333em / H1 big (home)     | 60px => 4.286em / H1 big (home) compressed
60px => 4em / H1 normal             | 48px => 3.429em / H1 normal compressed
40px => 2.667em / H1 compact        | 35px => 2.5em / H1 compact compressed

38px => 2.533em / H2
25px => 1.667em / H3
20px => 1.333em / H4

10px => 0.666em /


*/

/*
@font-face {
    font-family: 'Graphik Bold';
    font-style: normal;
    font-weight: 400;
    src: local('Graphik Bold'), url('../../font/Graphik-Bold.woff') format('woff');
}
@font-face {
	font-family: 'GraphikWeb-Super';
	src: url('../../font/GraphikWeb-SuperH-.eot') format('embedded-opentype'),
	     url('../../font/GraphikWeb-SuperH.woff') format('woff'),
	     url('../../font/GraphikWeb-SuperH.svg') format('svg'),
	     url('../../font/GraphikWeb-SuperH.ttf') format('opentype');
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
}
*/

@font-face {
	font-family: 'GraphikWeb-Semibold';
	src: url('../../font/GraphikWeb-Semibold-.eot') format('embedded-opentype'),
	     url('../../font/GraphikWeb-Semibold.woff') format('woff'),
	     url('../../font/GraphikWeb-Semibold.svg') format('svg'),
	     url('../../font/GraphikWeb-Semibold.ttf') format('opentype');
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
}

@media screen {

    body {
        font-family: Arial, sans-serif;
        font-size: .938em; /* = 15px Grundschrift */
        line-height: 1;
        color: #4d4d4d;
        background-color: #fff;
    }
    .skinLayoutCompressed body {font-size: .875em;/* = 14px Grundschrift */}

/*
    input:focus, textarea:focus {
        outline: 1px solid red;
    }
*/


    /* RICHTEXT styles */
    h1.base, .richtext h1 {
        color: #e1001b; /* default skin */
        font-family: 'GraphikWeb-Semibold', Arial, sans-serif;
        font-size: 3em;
        font-weight: bold; /* not very clever, but we need a bolder font */
        line-height: 1.1;

        padding: .2em 0; /* für Unter- und Oberlänge der Schrift */
        margin: 0 10px .2em -2px;

        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
    }
        .bodyTitleBig h1.base { /* for home */
            font-size: 5.333em;
            line-height: 1;
            margin-left: -3px;
            text-transform: uppercase;
        }
        .bodyTitleCompact h1.base {
            font-size: 2.667em;
            line-height: 1.1;
            margin-left: -2px;
        }

            .skinLayoutCompressed h1.base {font-size: 3.429em;}
            .skinLayoutCompressed .bodyTitleBig h1.base {font-size: 4.286em;}
            .skinLayoutCompressed .bodyTitleCompact h1.base {font-size: 2.5em;}

    h2.base, .richtext h2 {
        color: #27333a;
        font-size: 1.333em;
        font-weight: bold;
        line-height: 1.2;
        padding-bottom: .2em; /* für Unterlänge der Schrift */
        margin-bottom: .2em;
    }
    
    h3.base, .richtext h3 {
        color: #e1001b;
        font-family: 'GraphikWeb-Semibold', Arial, sans-serif;
        font-size: 1.667em;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: .333em;
        padding-bottom: .2em; /* für Unterlänge der Schrift */
        overflow: hidden;
    }
    .richtext h3.base, .richtext h3 {
        color: #27333a;
        font-family: Arial;
        font-size: 1.2em;
    }

    h4.base, .richtext h4 {
        color: #27333a;
        font-size: 1.333em;
        font-weight: bold;
        line-height: 1.2;
        padding-bottom: .2em; /* für Unterlänge der Schrift */
        margin-bottom: .2em;
    }
    .richtext h4.base, .richtext h4 {
        font-size: 1.067em;
    }

    h5.base, .richtext h5 {
        color: #27333a;
        font-size: 1em;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: .4em;
    }

    /* heading colors */
    .skinClusterLanguages h1.base, .skinClusterLanguages .richtext h1, .skinClusterLanguages h3.base, .skinClusterLanguages .richtext h3 {color: #e33272;}
    .skinClusterLanguages .richtext h3.base, .skinClusterLanguages .richtext h3 {color: #27333a;}
    .skinClusterCultures h1.base, .skinClusterCultures .richtext h1, .skinClusterCultures h3.base, .skinClusterCultures .richtext h3 {color: #ff6200;}
    .skinClusterCultures .richtext h3.base, .skinClusterCultures .richtext h3 {color: #27333a;}
    .skinClusterHealth h1.base, .skinClusterHealth .richtext h1, .skinClusterHealth h3.base, .skinClusterHealth .richtext h3 {color: #028d36;}
    .skinClusterHealth .richtext h3.base, .skinClusterHealth .richtext h3 {color: #27333a;}
    .skinClusterManagement h1.base, .skinClusterManagement .richtext h1, .skinClusterManagement h3.base, .skinClusterManagement .richtext h3 {color: #728490;}
    .skinClusterManagement .richtext h3.base, .skinClusterManagement .richtext h3 {color: #27333a;}
    .skinClusterMedia h1.base, .skinClusterMedia .richtext h1, .skinClusterMedia h3.base, .skinClusterMedia .richtext h3 {color: #00a4b6;}
    .skinClusterMedia .richtext h3.base, .skinClusterMedia .richtext h3 {color: #27333a;}


    p.base, .richtext p,
    ul.base, .richtext ul,
    ol.base, .richtext ol {
        line-height: 1.333;
        margin-bottom: 1em;
        max-width: 94%; /* Grosse Ausnahme, dass Breite beschränkt wird - http://dev.terrific.klubschule.namics.com/index/cluster/cluster/languages */
    }


}


@media print {

    body {
        font: 8pt/1.2 Arial, Helvetia, sans-serif;
        background-color: #fff;
        color: #000;

        margin: 0;
        width: 100%;
    }

    img { border: 0; }
    
    th, td {
        vertical-align: top;
        padding-right: 1em;
        text-align: left;
    }
    th {font-weight: bold;}
    caption {display: none;}

    h1 { font-size: 18pt;}
    h2 { font-size: 14pt;}
    h3 { font-size: 12pt;}
    h4 { font-size: 10pt;}


    h1, h2, h3, h4, h5, h6, p, ul, ol, table {
        margin: .5em 0 .3em 0;
    }
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    table {
        margin-top: 1em;
        /* other definitions see base-table... */
    }

}
/* @end */
/* Localized */