/*
 *  kfps-hengste/hp-content-side-bar.css
 *
 *  V1.10, 23.09.2025
 *
 */
                                     
@media screen {
                                   /*** content layout 1 using inline-block ***/
  nav.content1-side-bar {
    box-sizing: border-box;
    display: inline-block;

    width: 20%;

    /*background-color: #D0D0D0;*/
  }

                                   /*** content layout 2 using table ***/
  nav.content2-side-bar {
    box-sizing: border-box;
    display: table-cell;

    vertical-align: top;

    /*padding: 0.8em;*/

    /*box-shadow: -4px 1px 6px rgba(0, 0, 0, 0.5);*/

    /*background-color: rgba(255, 255, 255, 0.5);*/
    background-color: #888888;
  }

  div.content2-bar-top-spacer {
    padding: 4px;

    /*-webkit-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
    box-shadow: inset 3px 3x 5px rgba(0, 0, 0, 0.3);*/

    background: #F6F6F6;
    background-image: url("../mods/gfx/shadow-inset.png");
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABYCAYAAAA0lJ22AAAABHNCSVQICAgIfAhkiAAAADdJREFUGNPtyKENACAQBMHNBXEkCL7/np4yvgwwFIHAjBhy5VZVIdsoItAcE/XR77kZ0UDweYMDQg4Hk//svxUAAAAASUVORK5CYII=');
    background-repeat: repeat;
  }

  div.content2-bar-top-spacer-no-shadow {
    padding: 4px;

    /*-webkit-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
    box-shadow: inset 3px 3x 5px rgba(0, 0, 0, 0.3);*/

    background: #F0F0F0;
  }

  div.content2-side-bar-wrapper {
    box-sizing: border-box;

    margin: 0;
    padding: 0.8em;

    background-color: #888888;
  }

  span.side-bar-headline {
    box-sizing: border-box;
    color: #FFFFFF;
    text-align: center;

    /*padding: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;*/

    font-weight: bold;

    /*border: 1px solid #FFFF00;*/
  }

  div.content2-sb-link-container {
    box-sizing: border-box;

    padding: 0.5em;
    padding-left: 38px;
    margin-bottom: 1.5em;

    font-size: smaller;

    border: 1px solid black;
    background: #f3f3f3;
  }
                                   /** link list **/
  ul.content2-sb-link-list {
    list-style-image: url("../../gfx/waterlelie-16x16.png");
  }

  li.content2-sb-link-item {
    list-style-position: outside;

    padding: 0.3em;
  }

  li.content2-sb-link-item a:link,
  li.content2-sb-link-item a:visited
  {
    color: black;
    text-decoration: none;
  }

  li.content2-sb-link-item a:hover
  {
    text-decoration: underline;
  }

  div#content2-lang-buttons {      /** Language buttons **/
    display: block;
    box-sizing: border-box;

    vertical-align: top;
    text-align: center;

    margin: 0;
    margin-top: 5px;
    margin-bottom: 10px;

    /*background-color: #A030A0;*/
  }

  div#content2-lang-buttons a:link,
  div#content2-lang-buttons a:visited
  {
    text-decoration: none;
  }

  div#content2-lang-buttons img {
    width: auto;
    height: 1.3em;
  }

  div.side-bar-num-buttons {       /** number buttons **/
    /*width: 6em;*/
    text-align: center;
    margin: auto;
    padding-top: 1em;

    /*border: 1px solid #00FFFF;*/
  }

  div.side-bar-num-button {
    /*text-align: right;*/
    padding-left: 0.5em;
    padding-right: 0.3em;

    /*border: 1px solid #00FFFF;*/
  }

  div.side-bar-num-button a:link,
  div.side-bar-num-button a:visited
  {
    color: white;
    text-decoration: none;
    text-align: center;
  }

  div.side-bar-num-button:hover,
  div.side-bar-num-button:focus
  {
    background-color: #B3B3B3;
  }

  p.side-bar-text {
    text-align: center;
    margin-top: 1em;
    padding-left: 0.5em;
    padding-right: 0.3em;

    /*border: 1px solid #00FFFF;*/
  }

}

/*
 * Galaxy S5:       360 x  640, pixel-ratio 3
 * Galaxy S4:       320 x  640, pixel-ratio 3
 * Galaxy S3:       320 x  640, pixel-ratio 2
 * iPhone 4 + 4S:   320 x  480, pixel-ratio 2
 * iPhone 5 + 5S:   320 x  568, pixel-ratio 2
 * iPhone 6:        375 x  667, pixel-ratio 2
 * iPhone 6+:       414 x  736, pixel-ratio 3
 * HTC One:         360 x  640, pixel-ratio 3
 * iPad mini, 1+2:  768 x 1024, pixel-ratio 1
 * iPad 3+4:        768 x 1024, pixel-ratio 2
 * Galaxy Tab       800 x 1280
 */

                                         /*** Breitenabhängige Styles ***/

@media screen and (min-width: 1281px) {  /**  XL  **/
}

@media screen and (max-width: 1280px) {  /**  LA  **/
}

@media screen and (max-width: 768px) {   /**  ME  **/
}

@media screen and (max-width: 480px) {   /**  SM  **/
}

@media screen and (max-width: 414px) {   /**  XS  **/
  div#content2-lang-buttons {
    display: none;
  }
}

@media print {                           /** Drucken **/
  nav.content1-side-bar {
    display: none;
  }
  nav.content2-side-bar {
    display: none;
  }
}