/* DataPager Style */
/* Quelle: http://thibautvs.com/blog/?p=718 */

/*---------------------------------------------------------------*/

/* Sehr wichtig: Änderungen in diesem css wie Buttonbreite oder Button-Margin MÜSSEN auch hier geändert werden: suchergebnisse.aspx.cs -> test_Pixel_laenge() */

/* DataPager hat eine individuelle Fontgrösse */
.DataPager_CSS_Font_15_for_Mobile {
    /* font von: "Zurück" und "Weiter" wenn inaktiv */
    font-family: Arial, sans-serif; /* Arial = Ausnahme hier! */
    font-size: 15px;
    color: #bac6d3;
    display: inline-block;
}

/*---------------------------------------------------------------*/

/* Sehr wichtig: Änderungen in diesem css wie Buttonbreite oder Button-Margin MÜSSEN auch hier geändert werden: suchergebnisse.aspx.cs -> test_Pixel_laenge() */

/* Page number (except active one) */
.General_Style_DataPager_CSS_for_Mobile a.DataPager_CSS_NumericLink_for_Mobile {
    color: #0d8cbd;
    border: 1px solid #dddddd;
    padding: 0.3em 0.7em 0.3em 0.7em !important;
    margin: 0px 3px 0px 3px !important; /* Abstand zwischen den Buttons */
    text-align: center;
    text-decoration: none;
    font-family: Arial, sans-serif; /* Arial = Ausnahme hier! */
    font-size: 14px; /* Nur dies bestimmt die Grösse der Box: font-size innerhalb der Box*/
    border-radius: 2px;
    /* line-height: 28px !important;*/ /* Höhe der Box: hat keine Wirkung, nur font-size bestimmt die Grösse der Box! */
}

    /* Sehr wichtig: Änderungen in diesem css wie Buttonbreite oder Button-Margin MÜSSEN auch hier geändert werden: suchergebnisse.aspx.cs -> test_Pixel_laenge() */

    /* Page number mouse over */
    .General_Style_DataPager_CSS_for_Mobile a.DataPager_CSS_NumericLink_for_Mobile:hover,
    /* Active page number */
    .General_Style_DataPager_CSS_for_Mobile span span {
        color: #0d8cbd;
        background-color: #d8eff8;
        border: 1px solid #0d8cbd; /* hervorheben, da draufgeklickt! */
        padding: 0.3em 0.7em 0.3em 0.7em !important; /* die aktive Box kann hier grösser gemacht werden */
        margin: 0px 3px 0px 3px !important; /* Abstand zwischen den Buttons */
        text-align: center;
        font-family: Arial, sans-serif; /* Arial = Ausnahme hier! */
        font-size: 14px; /* Nur dies bestimmt die Grösse der Box: font-size innerhalb der Box*/
        border-radius: 2px;
        /* line-height: 28px !important;*/ /* Höhe der Box: hat keine Wirkung, nur font-size bestimmt die Grösse der Box! */
    }

/*---------------------------------------------------------------*/

/* Sehr wichtig: Änderungen in diesem css wie Buttonbreite oder Button-Margin MÜSSEN auch hier geändert werden: suchergebnisse.aspx.cs -> test_Pixel_laenge() */

/*  Drei Punkte: "..."
    Styling der drei Punkte des asp:DataPager (wenn Nummerierung aufhört):
    Lösung, wie man die drei Punkte styled (die 3 Punkte sind das Symbol aller weiteren Pages, welche ab Page 9 nicht mehr angezeigt werden):
    Quelle: https://stackoverflow.com/questions/12050889/how-to-style-asp-net-datapager-ellipsis */
.DataPager_CSS_Three_Dots_for_Mobile {
    /* Extra grosser Font, damit die 3 Punkte (...) gross werden, damit man sie vor dem Wort "Weiter" sieht */
    line-height: 10px; /* Zeilenhöhe muss gering sein, sonst wird durch den grossen Font gesamter DataPager nach unten geschoben und hat fast keinen Abstand mehr zur Listview */
    font-family: Arial, sans-serif; /* Arial = Ausnahme hier! */
    font-size: 22px;
    color: #3162aa;
    padding: 0px 0px 0px 0px !important;
    margin: 0px 3px 0px 3px !important; /* Abstand zwischen den Buttons */
    outline: none !important; /* Entfernt in Chrome das blaue Umrandungs-Highlight wenn draufgeklickt wird: https://github.com/kenwheeler/slick/issues/1562 */
}

/* Sehr wichtig: Änderungen in diesem css wie Buttonbreite oder Button-Margin MÜSSEN auch hier geändert werden: suchergebnisse.aspx.cs -> test_Pixel_laenge() */

/* Linker svg-Image-Button: "<<" (Zurück/Privious)  */
.DataPager_CSS_SVG_Left_for_Mobile {
    /*position der weiter/zurueck Bilder*/
    vertical-align: middle;
    padding: 0px 0px 0px 0px !important;
    margin: -2px 3px 0px 3px !important; /* Abstand zwischen den Buttons */
    width: 27px !important;
    height: 27px !important;
    border-color: #dddddd;
    border-style: solid;
    border-width: 1px;
    outline: none !important; /* Entfernt in Chrome das blaue Umrandungs-Highlight wenn draufgeklickt wird: https://github.com/kenwheeler/slick/issues/1562 */
}

/* Sehr wichtig: Änderungen in diesem css wie Buttonbreite oder Button-Margin MÜSSEN auch hier geändert werden: suchergebnisse.aspx.cs -> test_Pixel_laenge() */

/* Rechter svg-Image-Button: ">>" (Weiter/Next) */
.DataPager_CSS_SVG_Right_for_Mobile {
    /*position der weiter/zurueck Bilder*/
    vertical-align: middle;
    padding: 0px 0px 0px 0px !important;
    margin: -2px 3px 0px 3px !important; /* Abstand zwischen den Buttons */
    width: 27px !important;
    height: 27px !important;
    border-color: #dddddd;
    border-style: solid;
    border-width: 1px;
    outline: none !important; /* Entfernt in Chrome das blaue Umrandungs-Highlight wenn draufgeklickt wird: https://github.com/kenwheeler/slick/issues/1562 */
}

/* Sehr wichtig: Änderungen in diesem css wie Buttonbreite oder Button-Margin MÜSSEN auch hier geändert werden: suchergebnisse.aspx.cs -> test_Pixel_laenge() */

/* Ganz linker svg-Button: "|<" (First) */
.DataPager_CSS_SVG_Left_Last_for_Mobile {
    vertical-align: middle;
    padding: 0px 0px 0px 0px !important;
    margin: -2px 3px 0px 0px !important; /* Achtung: Nur nach recht ein Abstand nach Button, da letztes Element links! */
    width: 27px !important;
    height: 27px !important;
    border-color: #dddddd;
    border-style: solid;
    border-width: 1px;
    outline: none !important; /* Entfernt in Chrome das blaue Umrandungs-Highlight wenn draufgeklickt wird: https://github.com/kenwheeler/slick/issues/1562 */
}

/* Sehr wichtig: Änderungen in diesem css wie Buttonbreite oder Button-Margin MÜSSEN auch hier geändert werden: suchergebnisse.aspx.cs -> test_Pixel_laenge() */

/* Ganz rechter svg-Button: ">|" (Last) */
.DataPager_CSS_SVG_Right_Last_for_Mobile {
    vertical-align: middle;
    padding: 0px 0px 0px 0px !important;
    margin: -2px 0px 0px 3px !important; /* Achtung: Nur nach links ein Abstand vor Button, da letztes Element rechts! */
    width: 27px !important;
    height: 27px !important;
    border-color: #dddddd;
    border-style: solid;
    border-width: 1px;
    outline: none !important; /* Entfernt in Chrome das blaue Umrandungs-Highlight wenn draufgeklickt wird: https://github.com/kenwheeler/slick/issues/1562 */
}

/*---------------------------------------------------------------*/