/* Reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
   margin:    0;
   padding:   0;
   border:    0;
   font-size:16px;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
   display: block;
}

img {
   border: 0;
}

/* Lists */

ul {
   list-style-image:url('icons/t_green.png');
}

a {
   text-decoration: none;
   color:           #008000;
}

p .selected {
   font-weight: bold;
}

a:hover {
   text-decoration: underline;
   color:           #f3198f;
}

p, li, a {
  margin-top:    2px;
  margin-bottom: 2px;
}

/*  Typography presets
    ------------------  */

p, td, pre {
   font-size: 16px;
}

h1, h2, h3, h4, h5, h5 {
   font-weight: bold;
}

h1, .headtext {
   font-size:      32px;
   letter-spacing: -1px;
   line-height:    48px;
}

h2 {
   font-size:   28px;
   font-weight: normal;
   line-height: 48px;
}

h3 {
   font-size:   24px;
   line-height: 48px;
}

h4 {
   font-size:   20px;
   line-height: 48px;
}

h5 {
   font-size:   20px;
   line-height: 48px;
}

h6 {
   font-size:   18px;
   line-height: 24px;
}

small {
   font-size:   14px;
   font-weight: normal;
   line-height: 24px;
}

body {
   font-weight: normal;
}

.bold {
   font-weight: bold;
}

.no_break {
   display: block;
}

/*    Default Layout  */

body {
   padding-top:    2px;
   padding-bottom: 2px;
   position:       relative;
   margin:         0px auto;

   color: rgb( 0,0,0 );
}

span {
   font-size: inherit;
}

hr {
   border:        none;
   margin-bottom: 10px;
   margin-top:    10px;

   /* helles bläuliches violett */
   border-top:    1px solid #ccccff;
   clear:         both;
}

h1, h2, h3, h4, h5, h6, .headtext {
   color:       rgb( 40, 0, 153 );
   font-weight: bold;
}

pre {
   color:       rgb(0, 51, 0);
   font-weight: bold;
}

ul, ol {
   margin-left: 20px;
}

/* Tabellen */

table {
   border-collapse: collapse;
   margin-top:      16px;
   margin-bottom:   16px;
}

th, td {
   padding-left:  8px;
   padding-right: 8px;
   border:        0px;
}

.TableWithBorder {
    border-collapse:collapse;
}

.TableWithBorder td, .TableWithBorder th {
   border:         1px solid;
   padding-top:    4px;
   padding-bottom: 4px;
}

nav {
   display:        flex;
   flex-direction: row;
   flex-wrap:      wrap;
   align-items:    flex-start;
   margin-bottom:  16px;
   margin-left:     0px;
}

header nav {
   margin-bottom:  0px;
}

nav a, nav p, nav p i, header a, header p i {
   white-space:    nowrap;
   border-radius:    14px;
   margin-left:       4px;
   margin-right:      4px;
   margin-top:        4px;
   margin-bottom:     4px;
   padding-right:     4px;
   padding-left:      4px;
   padding-top:       4px;
   padding-bottom:    4px;
}

.navigation_image .navigation_top_image {
   position:       relative;
   margin:         0px;
}

.navigation_top_image {
   vertical-align: top;
}

.navigation_image {
   margin-right:   4px;
   vertical-align: middle;
}

nav a, header a {
   color:            rgb(  40,   0, 153 );
   background-color: rgb( 204, 255, 204 );
}

header p i, nav p i {
   color:            rgb(  40,   0, 153 );
   background-color: rgb( 255, 255, 204 );
}

header .emphasis a , nav .emphasis a {
   color:            rgb(  40,   0, 153 );
   background-color: rgb( 204, 255, 255 );
}

/* Header */

header {
   display:         flex;
   flex-direction:  row;
   flex-wrap:       wrap;
   align-items:     flex-end;
   margin-bottom:   16px;
}

header, footer, article {
   margin-left:  0px;
   margin-right: 0px;
}

header hr, footer hr {
   border:        none;
   margin-top:      4px;
   margin-bottom:   4px;
   width:         100%;

   /* helles bläuliches violett */
   border-top: 3px solid #ccccff;
   clear:      both;
}

header h1 {
   width: 100%;
}

header h2 {
   margin-left: 8px;
}

header .headtext {
   margin-left: 16px;
}

@media only screen and (max-width: 767px) {

   html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
   p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
   img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
   dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
   table, caption, tbody, tfoot, thead, tr, th, td,
   article, aside, canvas, details, figure, figcaption, hgroup, 
   menu, footer, header, nav, section, summary, time, mark, audio, video {
      margin:     0;
      padding:    0;
      border:     0;
      font-size: 15px;
   }

   body {
      margin: 0px auto;
   }

   hr {
      margin-bottom: 10px;
      margin-top:   10px;
   }

   h1, .headtext {
      font-size:   22px;
      font-weight: bold;
      line-height: 24px;
   }

   h2 {
      font-size:   20px;
      font-weight: bold;
      line-height: 24px;
   }

   h3 {
      font-size:   18px;
      font-weight: bold;
      line-height: 24px;
   }

   h4 {
      font-size:   16px;
      font-weight: bold;
      line-height: 24px;
   }

   h5 {
      font-size:   15px;
      font-weight: bold;
      line-height: 24px;
   }

   h6 {
      font-size:   15px;
      font-weight: bold;
      line-height: 24px;
   }

   p, td, pre {
      font-size:     15px;
      margin-top:     4px;
      margin-bottom:  4px;
   }

   span {
      font-size: inherit;
   }

   ol {
      margin-left: 32px;
   }

   ul, .margin_1, .topic_1 {
      margin-left: 25px;
   }

   /* Tabellen */

   table {
      margin-top:    8px;
      margin-bottom: 8px;
   }

   th, td {
      padding-left:  4px;
      padding-right: 4px;
   }

   .TableWithBorder td, .TableWithBorder th {
      padding-top:    2px;
      padding-bottom: 2px;
   }

   /* Header */

   header {
      display:         flex;
      flex-direction:  row;
      flex-wrap:       wrap;
      align-items:     flex-end;
      margin-bottom:   16px;
   }

   header, footer, article {
      margin-left:  0px;
      margin-right: 0px;
   }

   /* Navigation */

   nav a, header a, header p i {
      border-radius:   4px;
      margin-left:     4px;
      margin-right:    4px;
      margin-top:      4px;
      margin-bottom:   4px;
      padding-top:     2px;
      padding-bottom:  2px;
      padding-left:    5px;
      padding-right:   5px;
   }

   hr {
      border: none;
      margin-bottom: 10px;
      margin-top: 10px;

      /* helles bläuliches violett */
      border-top: 1px solid #ccccff;
      clear: both;
   }

} /* END Mobile Default */

/*    Mobile Layout: 320px
      Width: 320px
      Usable for screen from: 320px
*/

@media only screen and (max-width: 479px) {
  
   body {
      width: 320px;
   }

   ol {
      margin-left: 32px;
   }

   .adapted_img {
      max-width: 300px;
   }

   header .adapted_img {
      width: 200px;
   }

} /* END Mobile Layout: 320px. */

/*    Wide Mobile Layout: 480px;
      Width: 464px
      Usable for screen from: 480px
*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
  
   body {
      width: 480px;
   }

   ol {
      margin-left: 32px;
   }

   .adapted_img {
      max-width: 460px;
   }

   header .adapted_img {
      width: 200px;
   }

   .Spacer64 {
      width: 56px;
   }

}  /*  END Wide Mobile Layout: 480px. */

/*    Tablet Layout: 768px
      Width:   720px
      Usable for screen from: 768px
*/

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  
   body {
      width: 720px;
   }

   .adapted_img {
      max-width: 500px;
   }

} /* END Tablet Layout: 768px. */


/*    Standard Layout: 1024px
      Width: 960px;
      Usable for screen from: 1024px
*/

@media only screen and (min-width: 1024px) and (max-width: 1263px) {

   body {
      width: 960px;
   }
   
   .adapted_img {
      max-width: 760px;
   }

} /*  END  Standard Layout: 1024px */

 
/*    Wider Screen: 1344px
      Width: 1200px;
      Usable for screen from 1264
*/

@media only screen and ( min-width: 1264px ) and ( max-width: 1551px ) {

   body {
      width: 1230px;
   }

   .adapted_img {
      max-width: 940px;
   }

   header {
      justify-content: flex-start;
   }

   header, footer, article {
      margin-left:  20px;
      margin-right: 8px;
   }

   header h2 {
      margin-left: 24px;
   }

   header + nav {
      margin-left: 16px;
   }

}  /* END   Wider Screen: 1366px */


/*    Super sized Layout: 1600px
      Width: 1584px;
      Usable for screen from: 1552px
*/

@media only screen and (min-width: 1552px) {

   body {
      width: 1230px;
   }

   .adapted_img {
      max-width: 960px;
   }

   .annotation {
      width: 222px;
   }

   .inline_annotation {
      width: 942px;
   }

   header {
      justify-content: flex-start;
   }

   header, footer, article {
      margin-left:  20px;
      margin-right: 8px;
   }

   header h2 {
      margin-left: 24px;
   }

   header + nav {
      margin-left: 16px;
   }

} /*  END  Super sized Layout */