@charset "ISO-8859-1";

/* carinapape.net - CascadingStyleSheets - Carina Pape, 2021 */

/* allgemeine Elemente */

/*
div.fullWidth {
  width: 100%;
}
*/

body
    {
     background-color: #000000;
     /*background-image: url("./ressourcen/flag_of_ukraine.svg.webp");*/
     background-position: center;
     background-attachment: fixed;
     font-family: "Verdana";
     font-size: 100%;
     color: #FFFFFF;
    }

p
  { margin-top: 0px;
   margin-bottom: 20px;
   font-size: 0.7em; /* 8pt; */
  }

h1
  {
   margin: 0px;
   font-size: 0.75em; /* 9pt; */
   font-weight: bold;
  }

h2
  {
   margin-top: 0px;
   margin-bottom: 15px;
   font-size: 0.75em; /* 9pt; */
   font-weight: bold;
  }

h3
  {
   margin-top: 0px;
   margin-bottom: 25px;
   font-size: 0.75em; /* 9pt; */
   font-weight: bold;
  }

h4
  {
   margin-top: 0px;
   margin-bottom: 25px;
   font-size: 0.75em; /* 9pt; */
   font-weight: bold;
  }

a
 {
  font-size: 0.8em; /* 7pt; */
  color: #FFFFFF;
  text-decoration: none;
 }

a:hover { text-decoration: underline; }

blockquote
 {
  margin: 0.0em;
  text-align: right;
  font-size: 0.7em; /* 8pt; */
  font-style: italic;
 }

cite { font-size: 0.9em; /* 8pt; */ }

img { border: none; }

ul {
    list-style-type: none;
    text-align: left;
    font-size: 0.7em; /* 8pt; */
  }

nav li { list-style: none; }

/* allgemeine Klassen */

.center { text-align: center; }

.right { text-align: right; }

.pdf_list { list-style-image: url(ressourcen/pdf.ico); }

.jpg_list { list-style-image: url(ressourcen/jpg.ico); }

.link_list { list-style-image: url(ressourcen/link.ico); }

.small { margin-top: 0px;
        margin-bottom: 20px;
        font-size: 0.8em; /* ?pt; */
       }

/* NICHT GENUTZT .disc_list { list-style-type: disc; } */

/* Pseudotabellen */

    div.table { 
      display: table; 
      width: 100%;
      border-collapse:collapse;

      table-layout:fixed;
    }
    div.tr { 
      display:table-row; 
    }
    div.td { 
      display:table-cell;
      padding: 30px;
      text-align: center;
      /* Testrand */
      border-width: 0px;
      border-style: solid;
      border-color: #FFFFFF;      
    }

/* Boxen */

.box0
     /* außen */
     {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 800px;
      height: 500px;
      margin-left: -400px;
      margin-top: -250px;
      /* Testrand */
      border-width: 0px;
      border-style: solid;
      border-color: #FFFFFF;
     }

.box1
     /* links */
     {
      position: relative;
      float: left;
      width: 100px;
      height: 500px;
      background-image:url(./ressourcen/RotBackground_1.jpg);
      z-index: 1;
      /* Testrand */
      border-width: 0px;
      border-style: dashed;
      border-color: #FF0000;
     }

.box2
     /* mitte */
     {
      position: relative;
      float: left;
      width: 200px;
      height: 500px;
      background-image:url(./ressourcen/RotBackground_2.jpg);
      z-index: 1;
      /* Testrand */
      border-width: 0px;
      border-style: dashed;
      border-color: #00FF00;
     }

.box3
     /* rechts */
     {
      position: relative;
      float: left;
      width: 500px;
      height: 500px;
      background-image:url(./ressourcen/RotBackground_3.jpg);
      z-index: 1;
      /* Testrand */
      border-width: 0px;
      border-style: dashed;
      border-color: #0000FF;
     }

.box1a
      /* Links */
      {
       position: absolute;
       top: 60%;
       left: 50%;
       width: 90px;
       height: 45%;
       margin-left: -45px;
       z-index: 2;
       /* Testrand */
       border-width: 0px;
       border-style: dotted;
       border-color: #FFFFFF;
      }

.box1b1
      /* Impressum de*/
      {
       position: absolute;
       top: 95%;
       left: 50%;
       width: 90px;
       height: 2%;
       margin-left: -45px;
       z-index: 2;
       /* Testrand */
       border-width: 0px;
       border-style: dotted;
       border-color: #FFFFFF;
      }

.box1b2
      /* Impressum en */
      {
       position: absolute;
       top: 95%;
       left: 50%;
       width: 90px;
       height: 2%;
       margin-left: -45px;
       z-index: 2;
       /* Testrand */
       border-width: 0px;
       border-style: dotted;
       border-color: #FFFFFF;
      }

.box1c
      /* Links */
      {
       position: absolute;
       top: 1%;
       left: 50%;
       width: 90px;
       height: 5%;
       margin-left: -45px;
       z-index: 2;
       /* Testrand */
       border-width: 0px;
       border-style: dotted;
       border-color: #FFFFFF;
      }

.box2a
      /* Domain */
      {
       position: absolute;
       top: 5%;
       left: 50%;
       width: 160px;
       height: 20px;
       margin-left: -80px;
       text-align: center;
       z-index: 2;
       /* Testrand */
       border-width: 0px;
       border-style: dotted;
       border-color: #FFFFFF;
      }

.box2b
      /* Titel */
      {
       position: absolute;
       top: 20%;
       left: 50%;
       width: 160px;
       height: 75px;
       margin-left: -80px;
       z-index: 2;
       /* Testrand */
       border-width: 0px;
       border-style: dotted;
       border-color: #FFFFFF;
      }

.box2c
      /* Bild */
      {
       position: absolute;
       top: 40%;
       left: 50%;
       width: 160px;
       height: 55%;
       margin-left: -80px;
       z-index: 2;
       /* Testrand */
       border-width: 0px;
       border-style: dotted;
       border-color: #FFFFFF;
      }

.box3a
      /* Text */
      {
       position: absolute;
       top: 15%;
       left: 50%;
       width: 90%;
       height: 80%;
       margin-left: -225px;
       overflow:auto;
       text-align: justify;
       z-index: 2;
       /* Testrand */
       border-width: 0px;
       border-style: dotted;
       border-color: #FFFFFF;
       padding-right: 25px
      }

.box3a1
      /* Text scroll*/
      {
       position: absolute;
       top: 5%;
       left: 50%;
       width: 95%;
       height: 90%;
       margin-left: -225px;
       overflow:auto;
       text-align: justify;
       z-index: 2;
       /* Testrand */
       border-width: 0px;
       border-style: dotted;
       border-color: #FFFFFF;
       padding-right: 25px
      }

.box3a2
      /* Text nonscroll*/
      {
       position: absolute;
       top: 5%;
       left: 50%;
       width: 90%;
       height: 90%;
       margin-left: -225px;
       overflow:auto;
       text-align: justify;
       z-index: 2;
       /* Testrand */
       border-width: 0px;
       border-style: dotted;
       border-color: #FFFFFF;
       padding-right: 25px
      }

.box3 a { font-size: 1.0em; /* 8pt; */
         font-weight: bold;
       }
      
@media only screen and (max-width: 800px), (max-height:500px)
{}
 
/* 
    Viewports bis zu 760px | Das Design unterhalb von 760 px wendet sich in erster Linie an Smartphones. Die Inhalte folgen einander linear.
    
    760 bis 980px | Die Breite von 760 bis 980 Pixel gilt den Tabletts, aber auch an Browserfenster auf großen Monitoren, die nicht den gesamten Monitor einnehmen.
    
    980 bis 1280 Pixel | Die klassische Browserfenstergröße zwischen 980 bis 1279 px bekommt ein klassisches Zwei-Spalten-Layout.
    
    ab 1280 Pixel| Auf großen Monitoren bei einem groß aufgezogenem Browserfenster bleibt das Layout unverändert, nur Schrift und Bilder werden größer.
*/

/*
320 Pixel (iPhone Hochformat)
480 Pixel (iPhone Querformat)
649 (Kleines Tablet Querformat)
768 Pixel (iPad Hochformat)
1024 Pixel (iPad Querformat)
1200 Pixel (Laptop)
1600 Pixel (Mega-Displays und TV
*/