/* allgemeines Stylesheet */
span.Name     { width: 220px; float: left; }
span.Feld     { width: 70px; float: left; background-color: #ffeebb; margin-right: 10px; }
span.t-links  { width: 110px; float: left; height: 2em; }

/* Felder für Tabelle Termine */
span.dummy    { width: 10px; white-space: normal;}
span.t-header { font-family:Arial,sans-serif; font-style:italic; text-align: left; white-space: normal;}
span.t-button, span.t-sorte, span.t-funk, span.t-herk, span.t-date, span.t-diff {
  float: left; white-space: normal; }  
/* Felder für Termine allgemein */
span.t-Art    { width: 30px; background-color: #EBF4F1; float: left; white-space: normal;}
span.t-Var    { width: 60px; background-color: #CFE4DD; float: left; white-space: normal;}
span.t-Zeit   { width: 70px; background-color: #EBF4F1; float: left; white-space: normal;}
span.t-Aus    { width: 120px; background-color: #CFE4DD;float: left; white-space: normal;}
span.t-Taetig { width: 100px; background-color: #EBF4F1;float: left; white-space: normal;}
span.t-Beschr { width: 440px; background-color:#FFFBCB; float: left; white-space: normal;}
/* Felder für private Termine  */
span.t-PBez   { width: 320px; background-color: #CFE4DD;float: left; white-space: normal;}    
span.t-PArt    { width: 50px; background-color: #EBF4F1;float: left; white-space: normal;}
span.t-PMonat  { width: 50px; background-color: #CFE4DD;float: left; white-space: normal;}
span.t-PBeschr { width: 440px; background-color:#FFFBCB;float: left; white-space: normal;}

span.schalt   { background-color: lightgreen; }

/* Felder für Tabelle myseason + mydetail */
span.t-satz    { width: 20px; float: left; }
span.t-pname   { width: 250px; float: left; white-space: normal; }
span.t-button  { width: 80px; min-width: 60px; }
span.t-sorte   { width: 130px; background-color:#EBF4F1; }
span.t-funk    { width: 105px; background-color:#EBF4F1; }
span.t-herk    { width: 95px; background-color:#EBF4F1; }
span.t-date    { width: 60px;  background-color:#FFFBCB; text-align: right; }
span.t-diff    { width: 40px;  background-color:#EBF4F1; text-align: right; }

.hoverElement:hover .hoverDescription { display:block; }
.hoverElement:hover .hoverZusatz { display:block; }
span.hoverTarget { text-decoration: underline dotted; cursor: pointer; }
span.hoverDescription, span.hoverZusatz { display:none; background-color: #008800; color: #fff; padding: 5px; position: absolute; text-align: left; max-width:200px; z-index: 10; }
span.hoverZusatz { margin-left: 75px; }

a.info   { color:#4E6363; text-decoration: dotted underline; font-weight: normal; }
a span {display: none; position: absolute; color:#ccffff; background:#008800; padding: 5px; z-index: 1; } 
a:hover span {display: block; text-align: center; font-family:Arial,sans-serif; visibility: visible; }

div.newLine { clear: both; }
div.form { background-color: white; width: 400px; float: left; border-style: solid; border-width: 2px; border-color: green; padding: 5px 5px 5px 5px; margin: 5px;}
div.form2 { border-color: green; margin: auto; }

div.formsingle { background-color: white; max-width: 600px; float: left; border-style: solid; border-width: 2px; border-color: green; padding: 5px; margin: 5px;}
div.left { float:left; margin-left:10px; }
div.impressum { display:block; padding:5px 15px 5px 15px; font-style:italic; background-color:azure; font-size: 85%; }
div.error     { color:red; }

/* margin: top right bottom left */
h1 { font-family:Arial,sans-serif; font-size: 200%; text-align:left; color:darkolivegreen; margin: 15px 3px 3px auto;}
h2 { font-family:Arial,sans-serif; font-size: 130%; text-align:left; color:#00868B; margin: 25px 3px 3px auto;}
h3 { font-size: 115%; text-align: left; color:#47615A; margin: 20px 3px 0px auto; }
h4 { font-size: 100%; text-align: left; color:black; margin: 5px 3px 0px auto; font-style:italic; }

div.foot { position: fixed; bottom:30px; width:250px; }

.schalt, .schaltsmall, .schaltleft, .schaltright, input.button {
  background-color:lightgreen; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
.schalt { float: right; margin-right:10px; min-width:80px; border:3px outset ThreeDLightShadow; }
.schaltsmall { float: right; height:1.4em; min-width:60px; width:80px; margin-top:3px; }
.schaltleft { float: left; height:1.4em; min-width:60px; width:80px; margin-top:3px; margin-left:15px; }
.schaltright { float: top; height:1.4em; width:110px; margin: 3px 15px 3px 5px; border: outset ThreeDLightShadow;  }
.screen  { visibility:visible; } 
input.button { margin-left:10px; margin-right:10px; min-width:80px; width:100px; color:black; }

input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled  { 
  color:dimgrey; background-color:lightgrey; cursor: not-allowed; } 
  
input[type=text]:invalid{ color:red;}
input[type=text]:valid  { color:#006633;}
input[required]{ background-color:lightpink; }

label, label.short { float: left; text-align: left; margin-right: 0.5em; margin-bottom: 0.5em; }
label { width: 15em; }
label.short { width: 15em; }
label.box { float: left; }
label.line { margin: 0px; padding: 0px; }

select.small { width:120px; display:block; }

body.bild  { background-image:url('radieschen2.jpg'); background-repeat:no-repeat; background-position:right 0px;  max-width:900px;}
body, body.normal { max-width:900px; margin-left:auto; margin-right:auto; padding-left:5px; padding-right:2px;
  background-color:white; }
body.breit { max-width:1200px; margin-left:auto; margin-right:auto; padding-left:5px; padding-right:2px;}

pre { margin:0px; padding:0px; font-size:115%; width:800px;}

.form-control { margin-right: 10px; float:right;}
.form-group   { margin-top: 10px; margin-bottom: 10px; clear: both;}

.hervor  { font-weight:bold; }
.signal  { color: red; }
.legende { max-width: 1200px; font-size: 90%; font-family:Arial,sans-serif; font-style:italic; text-align: left; }
.error   { font-family:Arial,sans-serif; font-size:115%; color: red; }
.inhalt  { background-color: #ffeebb; padding:5px; float:left; }

.einrueck1 { margin-left:0em; margin-top:5px;}
.einrueck2 { margin-left:2em; margin-top:5px;}
.einrueck3 { margin-left:4em; margin-top:5px;}
.center  { text-align: center; }
.right   { text-align: right; padding: 0 20px 0 0; }
.small   { font-size: 75%; }
.tiny    { font-size: 50%; }
.big     { font-size: 150%; }
.colbig  { max-width: 600px; }
.right   { float:right; }
.left    { float:left;  }

.linkzeile { line-height: 2; }

.hidden   { display:none; }
.unhidden { display:block; }
.collapse { visibility:collapse; }

/* display macht Probleme beim Drucken, weglassen scheinbar keine Probleme */
.wrapper { margin:0; padding:0; white-space:normal; max-width: 900px; /* display:inline-block;*/  }  

a.weiter { color:grey; font-weight:normal; }
a.weiter:link    { color:grey; font-weight:normal;}
a.weiter:visited { color:grey; }
a:weiter:hover   { color:white; }

/* Links =================================================================== */
a         { color: #00e; font-weight:bold; }
a:visited { color: #551a8b; }
a:hover   { color: #3104B4; }
a:focus   { outline: thin dotted; border-radius: 5px;}
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

div.menu    { text-align: right; }

/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design. This example overrides the primary ('mobile first') styles */
/* Mini-Mobile -------------------------------- */
@media only screen and (max-width: 319px) {
  body.bild { background-image:none; }
  pre { margin:0px; padding:0px; font-size:50%; }
  /* Felder für Tabelle myseason */
  span.t-sorte, span.t-funk, span.t-herk  { display:none; } 
  label.short { width: 10em; }
  div.form { background-color: white; width: 350px; float: left; border-style: solid; border-width: 2px; border-color: green; padding: 5px 5px 5px 5px; margin: 5px;}
  p.screen  { visibility:visible; } 
  }
  /* Smartphones (portrait and landscape) ----------- */
  @media only screen and (min-width : 320px) and (max-width : 480px) {
  body.bild { background-image:none; }
  pre { margin:0px; padding:0px; font-size:50%; }
  span.t-funk, span.t-herk { display:none; } 
  label.short { width: 10em; }
  div.form { background-color: white; width: 350px; float: left; border-style: solid; border-width: 2px; border-color: green; padding: 5px 5px 5px 5px; margin: 5px;}
  p.screen  { visibility:visible; } 
  }
  
  /* Smartphones (portrait) ----------- */
  @media only screen and (max-width : 320px) {
  body.bild { background-image:none; }
  pre { margin:0px; padding:0px; font-size:50%; }
  span.t-sorte, span.t-herk { display:none; } 
  label.short { width: 10em; }
  div.form { background-color: white; width: 350px; float: left; border-style: solid; border-width: 2px; border-color: green; padding: 5px 5px 5px 5px; margin: 5px;}
  p.screen  { visibility:visible; } 
  }
  /* Smartphones (landscape) ----------- */
  @media only screen and (min-width : 321px) and (max-width: 480px) {
  span.t-herk { display:none; } 
  label.short { width: 10em; }
  div.form { background-color: white; width: 350px; float: left; border-style: solid; border-width: 2px; border-color: green; padding: 5px 5px 5px 5px; margin: 5px;}
  p.screen  { visibility:visible; } 
  }
  /* zwischen Smartphones und iPads + iPhones */
@media only screen and (min-width: 481px) and (max-width: 767px) {
  body.bild { background-image:none; }
  pre { margin:0px; padding:0px; font-size:80%; }
  span.t-funk { display:none; }
  label.short { width: 10em; }
  p.screen  { visibility:visible; } 
  }
  /* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { 
  body.bild { background-image:none; }
  p.screen  { visibility:visible; } 
  }
  /* iPads (portrait) ----------- */
  @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { 
  body.bild { background-image:none; }
  p.screen  { visibility:visible; } 
  }

 /* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== 
   margin top right bottom left   */
@media print {
  /* { background: ... display: none !important; visibility: hidden; }  Black prints faster: h5bp.com/s */
body.bild   { background-image:none;}

div.menu { visibility: hidden; display: none; }
.screen { visibility: hidden; display: none; }

h1 { font-family:Arial,sans-serif; font-size: 150%; text-align:left; color:#698B69; margin: 0px 3px 3px auto; }
h2 { font-family:Arial,sans-serif; font-size: 120%; text-align:left; color:#00868B; margin: 20px 3px 3px auto; }
h3 { font-size: 100%; text-align: left; color:#47615A; margin: 0px 3px 0px auto; }
h4 { font-size: 100%; text-align: left; color:black; margin: 0px 3px 0px auto; font-style:italic; }

.wrapper { margin:0; padding:0; white-space:normal; max-width: 900px; display:float;  }  

@page { margin: 1.0cm 1.0cm 1.0cm 1.0cm; padding:0; size: landscape; }
p, h2, h3, h4 { orphans: 3; widows: 3; }
   h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */

/* Links nicht auszeichnen -------------------------------------------------- */
a                { text-decoration: none;}
a:visited        { text-decoration: none;}
a.info           { text-decoration: none;}
a.weiter         { text-decoration: none;}
a.weiter:link    { text-decoration: none;}
a.weiter:visited { text-decoration: none;}
a:weiter:hover   { text-decoration: none;}
a span           { text-decoration: none;}
a                { text-decoration: none;}
a:hover span     { text-decoration: none;}
a:hover          { text-decoration: none;}
a:focus          { text-decoration: none;}
a:hover, a:active {text-decoration: none;}

span.hoverTarget { text-decoration: none; cursor: none; } 
#login { display:none; }

span.t-pname   { width: 250px; float:left; }
span.t-button  { width: 80px; min-width: 60px; float:left; }
span.t-sorte   { width: 130px; float:left; white-space: normal; }
span.t-funk    { width: 100px; float:left; white-space: normal; }
span.t-herk    { width: 100px; float:left; white-space: normal; }
span.t-date    { width: 70px;  float:left; text-align: right; white-space: normal;}
span.t-diff    { width: 55px;  float:left; text-align: right; white-space: normal;}

}