/* $header: $                                              */
/* Copyright 2004 - 2023 by KukiSoft                       */
/* security.css                                            */
/*                                                         */
/* Zweck: Die generelle Formatierung der Tutorials.        */

*
{
  margin: 0;
  padding: 0;
}

html, body
{
  height: 100%;
}

header
{
  position: relative;
  width: 100%;
  height: 1.7em;  /* Die Höhe des header */
}

a
{
  text-decoration: none;  /* Das Underline unter den Links deaktivieren */
}

table
{
  width: 100%;
}

table tbody tr td
{
  vertical-align: top;
  /* height: 120%; */
  padding: 0.1em 0 0.1em 0;
}

/* Muss bei Labels in Tabellen verwendet werden. (Höhenausgleich) */
table tbody tr .label
{
  padding-top: 0.3em;
}

input:not([type=button]):not([type=submit]):not([type=reset]):not([type=checkbox])
{
  width: 100%;
  padding: 0.2em 0 0.2em 0.1em;
  
  box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}

input[type=button], input[type=submit], input[type=reset]
{
  padding: 2px 5px;
  margin-left: 0.6em;
  margin-right: -0.4em;

  cursor: pointer; /* forces the cursor to change to a hand when the button is hovered */
  background-color: #dddddd;  /* #aaeeee; */
  
  /* give the button curved corners, alter the size as required */
  border-radius: 4px;
  
  /* Der Button bekommt einen kleinen Schatten */
  box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}

input[type=button]:hover, input[type=button]:focus,
input[type=submit]:hover, input[type=submit]:focus,
input[type=reset]:hover, input[type=reset]:focus
{
  /* Der Button bekommt einen grösseren Schatten (Push-Effekt) */
  box-shadow: 0 0 4px rgba(0, 0, 0, .75);
}


/* Grundsätzliche Formatierung der Schriften */

h1, h2, h3, h4
{
  background: transparent;  /* Alle Schriften haben einen transparenten Hintergrund */
  font-size: 1em;

  margin: 0 0 0.4em 0;
}

h1
{
  font-size: 3em;
}

h2
{
  font-size: 2em;
}

h3
{
  font-size: 1.5em;
}

h4
{
  padding: 0.5em 0 0 0;
}

/* Für alle elemente mit einem Required-Attribute, wenn das Feld leer ist. */
:required:invalid
{
  background: #ffdcdc;
}
:required:valid
{
  background: #ffffdc;
}

/* Generelle Formatierungen der Seite */

#content
{
  width: 42em;
  margin: 0px auto;  /* div-Element horizontal zentriert */
  background-color: #eeeeee;
  
  border: 1px solid;
  border-color: #808080 #555533 #555533 #808080;
  border-radius: 5px;
  border-width: 1px 3px 3px 1px;
}

#contentblock
{
  padding: 2em;
  left: 0;
  right: 0;
}

#contentblock noscript h5
{
  margin-top: -1.2em;
  padding-bottom: 0.6em;
  font-size: 100%;
}

.nowrap
{
  white-space: nowrap;  /* Diese Blöcke werden nicht umgebrochen. */
}

.teaser
{
  font-weight: bold;
}

.alignRight
{
  text-align: right;
}

.width0_6em { width: 0.6em; }
.width1em { width: 1em; }
.width5em { width: 5em; }
.width6em { width: 6em; }
.width10em { width: 10em; }
.width12em { width: 12em; }

.distanceSmall
{
  padding-bottom: 0; /* Kein Abstand nach diesem Block */
}

.distance
{
  padding-bottom: 0.5em; /* Einen Abstand nach diesem Block */
}

.errorborder
{
  border: 1px solid red;
}

.errorblock
{
  padding-left: 2em;
  color: red;
}

.infoblock
{
  color: blue;
}

.noScriptColor
{
  color: red;
}