/* * * * * ehemalige interne Styles * * * * */

/*

Lustat Contao Theme - Seitenlayouts und Styles

Gemäss Auswertung binden alle Seitenlayouts, die noch auf die internen Styles zurückgreifen, auch die Datei layout.css ein. Deshalb können die internen Styles in den Anfang übernommen werden (die internen Styles wurden jeweils vor den externen geladen)

Betroffene Layouts:
- Analysen - Querschnittsthemen - Regionale Disparitäten 2020
- Analysen - Webartikel - Corona Reporting
- Analysen - Webartikel (Seitenspalte für Navigation und andere Webartikel)
- Erhebung Gemeindefinanzen
- Homepage
- Homepage Kopie für Eckdaten (Kombination mit altem Layout)
- Indikatoren (angepasste Navigation ab der dritten Ebene)
- Indikatoren statische Seiten (angepasste Navigation ab der dritten Ebene)
- Inhalte - Kontakte
- Inhalte - Team
- Inhalte (Navigation auf der linken Seite)
- Mobile App - Artikel
- Spitex
- Startseite

*/


/* * * ehemalige interne Styles: Inhalte * * */

a.tooltips {
    position: relative;
}

a.tooltips span {
    width: 400px;
    position: absolute;
    display: none;
    padding: .5em 1em;
    background-color: rgba(111, 111, 111, .95);
    border: 1px solid rgba(196, 196, 196, .95);
    border-radius: 6px;
    color: #fff;
}

a.tooltips span:after {
    width: 0;
    height: 0;
    left: 10%;
    top: 100%;
    position: absolute;
    content: '';
    border-top: 8px solid rgba(111, 111, 111, .95);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

a:hover.tooltips span {
    bottom: 100%;
    display: block;
    margin-bottom: .5em;
    margin-left: -2em;
    z-index: 999;
}

div.ce_lustat_indikator div.highchart {
    width: 100%;
    margin: 2em auto;
}

img {
    display: block;
}

.ce_gallery img,
p img {
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
}

div.ce_indikatoren_icon {
    float: left;
    padding: .5em 1.5em 1em 1em;
}

div.ce_image.block + div.ce_text > p:first-child {
    margin-top: 2em;
}


/* * * ehemalige interne Styles: Layout_Desktop_0000 * * */

#container {
    margin-top: 20px;
}

#header {
    padding-top: 10px;
    border-bottom: 1px solid #c4c4c4;
}

div#main div.inside {
    font-size: 100%;
    line-height: 1.7em;
    font-weight: normal;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

aside#left div.inside {
    margin-top: 68px;
    padding-right: 40px;
}

*[class*="grid"],
.mod_article *[class*="ce_"],
.mod_article *[class*="mod_"] {
    margin-right: 10px;
    margin-left: 10px;
}

.mod_article div.ce_table {
    margin: 0;
}

#header-slider [class*="ce_"] {
    margin: 0;
}

.slider-wrapper .ce_text {
    margin-right: 0;
    margin-left: 0;
}

ul,
li {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: square;
}

li {
    margin-left: 2em;
}

#wrapper-footer {
    padding-top: 20px;
    padding-bottom: 30px;
}

#wrapper-footer .clear {
    height: 40px;
    margin-right: 10px;
    margin-left: 10px;
    border-bottom: 1px solid #c4c4c4;
}

.ce_gallery > ul > li {
    float: none;
    clear: both;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0;
}


/* * * ehemalige interne Styles: Layout_Desktop_0768 * * */

@media (min-width: 768px) {

    #wrapper,
    #wrapper-header,
    #wrapper-footer {
        width: 744px;
        margin: 0 auto;
    }

    #wrapper-header .inside {
        margin-right: 10px;
        margin-left: 10px;
    }

    *[class*="grid"] {
        float: left;
        display: inline;
    }

    .grid2 {
        width: 228px;
        min-height: 220px;
    }

    .grid4 {
        width: 352px;
    }

    .grid6 {
        width: 724px;
    }

    .mod_article.grid1,
    .mod_article.grid2,
    .mod_article.grid3,
    .mod_article.grid4,
    .mod_article.grid5,
    .mod_article.grid6,
    .mod_article.grid7,
    .mod_article.grid8,
    .mod_article.grid9,
    .mod_article.grid10,
    .mod_article.grid11,
    .mod_article.grid12 {
        margin-right: 0;
        margin-left: 0;
    }

    .ce_gallery > ul {
        margin-right: -10px;
        margin-left: -10px;
    }

    .ce_gallery > ul > li,
    .ce_gallery > ul > li.col_first {
        float: left;
        clear: none;
        margin-right: 10px;
        margin-left: 10px;
    }

    .ce_gallery > ul > li {
        width: 212px;
    }
}


/* * * ehemalige interne Styles: Layout_Desktop_0960 * * */

@media (min-width: 960px) {

    #wrapper,
    #wrapper-header,
    #wrapper-footer {
        width: 960px;
    }

    .grid2,
    .grid4 {
        width: 300px;
    }

    .grid6 {
        width: 460px;
    }

    #footer div.anmeldung > p {
        text-align: right;
    }

    .ce_gallery > ul > li {
        width: 206px;
    }
}


/* * * ehemalige interne Styles: Layout_Desktop_1200 * * */

@media (min-width: 1200px) {

    #wrapper,
    #wrapper-header,
    #wrapper-footer {
        width: 1200px;
    }

    .grid2 {
        width: 180px;
    }

    .grid4 {
        width: 380px;
    }

    .grid6 {
        width: 580px;
    }

    .ce_gallery > ul > li {
        width: 210px;
    }
}


/* * * * * bestehende externe Styles * * * * */

/* * * * * * * * * * Schrift: Source Sans Pro * * * * * * * * * */

/* source-sans-pro-200italic - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 200;
    src: local(''),
    url('../fonts/source-sans-pro-v14-latin-200italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/source-sans-pro-v14-latin-200italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-200 - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 200;
    src: local(''),
    url('../fonts/source-sans-pro-v14-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/source-sans-pro-v14-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-300 - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: local(''),
    url('../fonts/source-sans-pro-v14-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/source-sans-pro-v14-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-300italic - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 300;
    src: local(''),
    url('../fonts/source-sans-pro-v14-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/source-sans-pro-v14-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-regular - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('../fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/source-sans-pro-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-italic - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    src: local(''),
    url('../fonts/source-sans-pro-v14-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/source-sans-pro-v14-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-600 - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    src: local(''),
    url('../fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/source-sans-pro-v14-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-600italic - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 600;
    src: local(''),
    url('../fonts/source-sans-pro-v14-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/source-sans-pro-v14-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-700 - latin */
/*@font-face {*/
/*    font-family: 'Source Sans Pro';*/
/*    font-style: normal;*/
/*    font-weight: 700;*/
/*    src: local(''),*/
/*    url('../fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'), !* Chrome 26+, Opera 23+, Firefox 39+ *! url('../fonts/source-sans-pro-v14-latin-700.woff') format('woff'); !* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *!*/
/*}*/

/* source-sans-pro-700italic - latin */
/*@font-face {*/
/*    font-family: 'Source Sans Pro';*/
/*    font-style: italic;*/
/*    font-weight: 700;*/
/*    src: local(''),*/
/*    url('../fonts/source-sans-pro-v14-latin-700italic.woff2') format('woff2'), !* Chrome 26+, Opera 23+, Firefox 39+ *! url('../fonts/source-sans-pro-v14-latin-700italic.woff') format('woff'); !* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *!*/
/*}*/

/* source-sans-pro-900 - latin */
/*@font-face {*/
/*    font-family: 'Source Sans Pro';*/
/*    font-style: normal;*/
/*    font-weight: 900;*/
/*    src: local(''),*/
/*    url('../fonts/source-sans-pro-v14-latin-900.woff2') format('woff2'), !* Chrome 26+, Opera 23+, Firefox 39+ *! url('../fonts/source-sans-pro-v14-latin-900.woff') format('woff'); !* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *!*/
/*}*/

/* source-sans-pro-900italic - latin */
/*@font-face {*/
/*    font-family: 'Source Sans Pro';*/
/*    font-style: italic;*/
/*    font-weight: 900;*/
/*    src: local(''),*/
/*    url('../fonts/source-sans-pro-v14-latin-900italic.woff2') format('woff2'), !* Chrome 26+, Opera 23+, Firefox 39+ *! url('../fonts/source-sans-pro-v14-latin-900italic.woff') format('woff'); !* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *!*/
/*}*/


/* * * * * * * * * * LUSTAT Logo * * * * * * * * * */

/* Header: Bereich für das Logo */
#header #logo {
    height: 59px;
    margin: auto;
    width: 77px;
}

/* Header: Logo als Blockelement und Grösse definieren */
#header #logo img {
    display: block;
    width: 100%;
}


/* Vertikalen Scroll-Balken immer zeigen */
html {
    overflow-y: scroll;
}

/* * * * * * * * * * Schriftart und Schriftfarbe * * * * * * * * * */
body {
    font: 100% 'Source Sans Pro';
    color: #3e3e3e;
}


/* * * * * * * * * * Überschriften * * * * * * * * * */

/* Ebene 1 */
h1 {
    margin-top: 1.5em;
    margin-bottom: .5em;
    font-size: 200%;
    line-height: 1em;
    font-weight: bold;
}

/* Spezielles Titelformat aus kombinierten Überschriften der Ebene 3 über der Ebene 1 */
h3 + h1 {
    margin-top: 0;
}

/* Ebene 2 */
h2 {
    margin-top: 3em;
    padding-bottom: .5em;
    border-bottom: 1px solid #c4c4c4;
    font-size: 100%;
    font-weight: bold;
}

/* Ebene 2 im Footer */
footer h2 {
    border-bottom: 0;
}

/* Ebene 3 */
h3 {
    margin-top: 2em;
    margin-bottom: .5em;
    padding: 0;
    font-size: 1rem;
    font-weight: bold;
}

/* Ebene 3 - Abstand direkt nach einer H2-Überschrift verkleinern */
h2 + div > h3,
h2 + h3 {
    margin-top: 0;
}


/* * * * * * * * * * Text * * * * * * * * * */

/* Abstände bei Absätzen */
p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Abstände bei sortierten Listen */
ol {
    margin: 0;
    padding: 0;
}


/* * * * * * * * * * Tabellen * * * * * * * * * */

div.ce_basis_mitarbeiterKontaktinformationen {
    overflow-x: auto;
}

div.ce_table.ce_basis_mitarbeiterKontaktinformationen {
    margin-top: 3em;
}

table#kontaktinformationen {
    margin-left: 10px;
    white-space: nowrap;
    width: calc(100% - 20px);
}

table#kontaktinformationen th {
    cursor: pointer;
    padding-left: 0.5em;
    padding-right: 1em;
    text-align: left;
}

table#kontaktinformationen > tbody > tr {
    transition: 0.5s;
}

table#kontaktinformationen > tbody > tr:hover {
    background-color: #86bce1;
    cursor: default;
}

table.webartikel {
    margin-bottom: 2em;
    width: calc(100% - 2px);
}

table.webartikel th {
    background-color: #e4e4e4;
    border: 1px solid #c4c4c4;
    padding-left: 0.5em;
    padding-right: 0.5em;
    vertical-align: top;
}

table.webartikel td.zweispalten {
    width: 50%;
}

table.webartikel td.dreispalten {
    width: 30%;
}

table.webartikel td.vierspalten {
    width: 25%;
}

table.webartikel td.entwicklung-positiv {
    color: #00b400;
}

table.webartikel td.entwicklung-negativ {
    color: #e80000;
}

table.webartikel th.text,
table.webartikel td.text {
    text-align: left;
}

table.webartikel th.zahl,
table.webartikel td.zahl {
    text-align: right;
}

table.webartikel td.abstand {
    column-span: 2;
    border: none;
    height: 10px;
}

/* * * * * * * * * * Links * * * * * * * * * */

a {
    text-decoration: none;
    color: #0072ba;
}

a.ohnelink {
    color: #3e3e3e;
}

a:hover {
    text-decoration: underline;
}

a.ohnelink:hover {
    text-decoration: none;
}


/* * * * * * * * * * Links mit Symbolen * * * * * * * * * */

/* Grösse, Abstände und Farbe */
div.ce_download a,
div.ce_downloads a,
div.ce_hyperlink a,
div.download a,
div.link > a {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 38px;
    vertical-align: baseline;
    background-repeat: no-repeat;
    line-height: 40px;
    text-decoration: none;
    color: #3e3e3e;
    background-size: 30px;
    background-position: left center;
}

/* Farbe (Hover) */
div.ce_download a:hover,
div.ce_downloads a:hover,
div.ce_hyperlink a:hover,
div.download a:hover,
div.link > a:hover {
    color: #0072ba;
}

/* Formatierung der Dateigrösse */
div.ce_download a span,
div.ce_downloads a span {
    font-size: 70%;
}

/* Liste: Abstände und Listensymbol */
div.ce_downloads ul {
    margin: 0;
    list-style-type: none;
}

/* Listenelemente: Abstände */
div.ce_downloads ul li {
    margin: 0;
}


/* * * * * * * * * * * * * * * * * * * * Media Queries * * * * * * * * * * * * * * * * * * * */

@media (min-width: 768px) {

    /* * * * * * * * * * LUSTAT Logo * * * * * * * * * */
    /* Header: Bereich für das Logo */
    #header #logo {
        float: left;
        height: 84px;
        margin-left: 0;
        width: 110px;
    }
}

/* * * * * Cookie-Hinweis * * * * */

.cookiebar {
    z-index: 100;
}


/* * * * * Fixed Footer * * * * */

#footer {
    background-color: #f3f3f3;
    border-top: 1px solid #c4c4c4;
    font-size: 0.8rem;
    margin-top: 100px;
    padding-bottom: 20px;
}