/* ======================================== GLOBAL DEFINITION */

           /* Hier alle Schriftarten eintragen, 
            * die serverseitig bereitgestellt werden sollen. */
@font-face {
   font-family: 's1' ;
      src: url('../schrift/s1.ttf');
} 

html {
/* -------------------------- Schriftgrösse Hauptsteuerung-[1]  */
   font-size:15px;
   font-family: 's1', 'Arial';
   font-style: normal ;
   font-weight: normal ;
   color: #000000;
   background: url('../img/hintergrundbinaer.png')  repeat fixed  /* center */ ;
   background-size: 300px ;
   background-color: #deebf7 ; /* Hintergrund ganze Seite */
   
}

* {
   margin:0; 
   padding:0
}

body {
/* -------------------------- Horizontal-[1] Seitenbreite */
   width: 800px ;
   margin: 0 auto 0 auto; /* Oben/Unten 0 - Links/Rechts auto (=zentriert) */

/* -------------------------- Schriftgrösse Hauptsteuerung-[2]  */
   font-size: 1.20em; 
}

/* ----------------------------- Anker Formatangaben*/
a {
   font-size  : 1.00em;
   color: #000000     ;
}

/*           'a.link:focus': Ein Link bleibt markiert,  */
a.link:hover, a.link:focus {
   background: #b9d8f5;
}
/*            Untermenu innerhalb Inhalt (zB: Sortierung)*/
a.rahmen-rot {
   margin: 0 2px 0 0;
   padding: 0 1% 0 1%;
   border-style: solid;
   border-width: 0.2em;
   border-color: #F05050;
} 
/*            bei rahmen-rot keine Anzeige Background ('a.link:hover' deaktiviert)*/
a.rahmen-rot:hover {
   background: none;
}

/* ----------------------------- Paragraph Formatangaben*/
p {
   font-size  : 1.00em;
   color: #000000;
   line-height: 1.20em;
   margin: 0px 0 10px 0;
}
/* ----------------------------- Ueberschriften Formatangaben*/
/*                               (je kleiner die Schrift desto dunkler die Farbe, optischer Ausgleich)*/
h1 {
   font-size  : 1.80em;
   font-weight: normal ;
   color:#0e61a1; 
   margin: 12px 0 12px 0;
}
h2 { 
   font-size  : 1.40em;
   font-weight: normal;
   color: #0e568d; 
   margin: 12px 0 12px 0;
}
h3 {
   font-size  : 1.20em;
   font-weight: normal;
   color: #0d4e80; 
   margin: 12px 0 5px 0;
}
/* ----------------------------- Listen Formatangaben*/
                              /* ul: Unsortierte Liste */
                              /* Klasse einzug: */
ul.einzug {
   list-style-position: outside;
   margin: 0 0 0 20px;
   font-size  : 1.00em;
   font-weight: normal ;
   color: #000000;                            /* Listenzeichen Farbe Standard schwarz */
   list-style-type: disc;                       /* Listenzeichen Standard Punkt */
}
ul.zeilenabstand-plus{ line-height: 1.50em; }
                                                /* Listenzeichen weiter Varianten */
ul.farbig  {color          : #F05050;}        /* Farbe                          */
ul.kreis   {list-style-type: circle   ;}        /* Kreis                          */
ul.quadrat {list-style-type: square   ;}        /* Quadrat                        */
ul.listzahl{list-style-type: decimal  ;}        /* Zahl                           */
/* ----------------------------- */
/* (dl = description list = Beschreibungsliste)
 * (dt = description (list) term = Ausdruck)
 * (dd  =  description (list) description = Beschreibung) */
dl {
   font-size: 1.00em;
   margin-bottom: 50px;
   clear: left;
}
dt {	
   float: left;
   font-weight: bold;
   margin-right: 5px;
   padding: 5px; 
   width: 90px;
}
dd {

   position:  relative;
   margin:  2px 0;
   padding: 5px;   
}

/* ----------------------------- Bilder Formatangaben*/
img, a img {
   border: 0 none;
}
.bild_rahmen{
   margin: 15px 0;
   border: 7px solid; 
   border-color: #ffffff;
   box-shadow: 0px 0px 15px 3px
               #3091D9; 
/* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
}

/* ======================================== NAVIGATION */
nav {
/* -------------------------- Verikal-[1] Menuleiste Platzbedarf */
/* -------------------------- Horizontal-[2] */
   top         :  0px;
   height      : 30px;
   width       : 796px;
   border-width:  2px;
/* -----------------------------------*/
   border-color: #aedcff; border-style: solid;
   background  : #aedcff ;
   z-index: 99;
   position:  fixed  ;  /* Navigation scrollt nicht mit der Seite */
   margin: 0 ;
}

nav ul {
   list-style:  none ;
   position: relative;
   padding: 0px 0px;
}
/* 
nav ul li { 
   display: inline-block; 
}
*/
nav ul li a {
   display: block;
   float: left;
   width: auto;
   font-size:  1.00em;
   text-decoration: none;
   line-height: 1.00em;
   background: #FAFBFC; 

   padding: 2px 4px;
   margin: 1px;

   border: 3px #3091D9 solid;
   border-radius: 7px;
}
nav ul li a:hover {
   border: 3px #F05050 solid;
   background: #FAFBFC; 
}
#nav-aktiv {
   /* border: 5px #F05050 solid; */
   background: #ffc4c4;
   }

/* ======================================== HEADER */

header {
/* -------------------------- Verikal-[2] Platzierung Header */
/* -------------------------- Horizontal-[3] */
   top: 34px ; 
   height:  100px ;
   width: 796px ;
   border-width: 2px;
/* -----------------------------------*/
   position: fixed ;
   z-index: 0;
   background-color: #deebf7; 
   border-color: #3091D9; border-style:  solid;  
}
 
#logo-computeria{
   float: left;
   width:  420px   ;
   height: 125px ;
   margin: 5px 15px 0 20px;
   background: url('../img/computeria-logo.png')  no-repeat left top ;
   background-size: contain ;
}
#logo-opfikon{
   float: right ;
   width:  300px ;
   height: 125px;
   margin: 20px 25px 0 0;
   background: url('../img/opfikon-logo.png') no-repeat left top ;
   background-size:  contain ;
}

/* ======================================== CONTENT */

main	{
/* -------------------------- Vertikal-[3] Platzierung Inhalt */
   margin-top:138px; 
/* -------------------------- Horizontal-[4] */
   width: 800px;
/* -----------------------------------*/
   display:  block ;
   position: relative;
   background-color: #deebf7 ;
}

article {
/* -------------------------- Horizontal-[5] */
   float: left;
   width: 95.5%; /*MUSS % SEIN! (mit px kein automatischer Zeilenumbruch)*/
/* n % von 800  */
   padding: 0 2% 0 2%;
   
   margin-top: -2px;  /* Ueberlappen der Ränder (sonst doppelt) */
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;

   border-width: 2px;
/* -----------------------------------*/
   border-color:  #3091D9;  /* blau: #3091D9 rot: #E90000 #F05050 */
   border-style:  solid; 
/* box-shadow: 5px 10px 10px 0px #000000bf; */
   background: #FAFBFC;
}
article.spezial {
   background: #f5f5b6;
}
/* -----------------------------------*/

section {
   float: left;
   width: 100%;
   margin: 0;
}
.aktuelle_info {
   z-index: 0;
   float: left;
   width: 95.5%; 
   font-size:   1.00em;
   text-decoration: none;
   line-height: 1.300em;
   background: #beffdf; 

   padding: 5px 15px;
   border: 3px #3091D9 solid;
   border-radius: 7px;
   margin: 0; 
   text-align: center;
}
.warnung {
   font-size:   1.40em;
   color: #ebe99f;
   line-height: 1.500em;
   background: #a84068; 

}
.aktuelle_info_stop_SAV {
   z-index: 0;
   float: left;
   width: 95.5%; 
   font-size:   1.40em;
   text-decoration: none;
   line-height: 1.500em;
   background: #d35283; 
   
   padding: 5px 15px;
   border: 3px #3091D9 solid;
   border-radius: 7px;
   /* margin: 0; */
   text-align: center;
}
#aktuelle_info_hover:hover {
   background: #beffdf; 
   border: 3px #F05050 solid;
}
/* ======================================== Diverse Formatangaben als Klassen */
/* -------------------------- Schriften klein */
.schrift-klein     { font-size: 0.75em }
/* -------------------------- Spaltenaufteilung */
.spalte-1-2 { width: 46.7%; margin: 5px 25px 5px 0px ; } /* 1/2 */
.spalte-1-3 { width: 33.0%; margin: 5px 25px 5px 0px ; } /* 1/3 */
.spalte-2-3 { width: 60.0%; margin: 5px 25px 5px 0px ; } /* 2/3 */
/* -------------------------- Rahmen grau breit*/
.rahmen-grau-oben      { border-top:     3px   #9e9e9e solid; }
.rahmen-grau-unten     { border-bottom:  3px   #9e9e9e solid; }
.rahmen-grau-links     { border-left:    3px   #9e9e9e solid; }
.rahmen-grau-rechts    { border-right:   3px   #9e9e9e solid; }
.rahmenbox-grau        { border:         3px   #9e9e9e solid; }
/* -------------------------- Rahmen schwarz dünne*/
.rahmen-schwarz-oben   { border-top:     1px   #000000 solid; }
.rahmen-schwarz-unten  { border-bottom:  1px   #000000 solid; }
.rahmen-schwarz-links  { border-left:    1px   #000000 solid; }
.rahmen-schwarz-rechts { border-right:   1px   #000000 solid; }
.rahmenbox-schwarz     { border:         1px   #000000 solid; }
/* ---------------------------------------------------------- */
.abstand-oben  { margin-top:    15px; }
.abstand-unten { margin-bottom: 15px; }
/* ---------------------------------------------------------- */

/* ======================================== FOOTER */
footer {
   position: relative;
   font-size  : 1.0em;
   float: left;
   width: 100%;
}
.footerfarbe{
   background-color: #deebf7;
}

.betreuer {
   font-size  : 0.65em; /* (kleinstmöglich) */
   color: #a0a0a0;
   float: right ;
   margin: 0px 0 0 0;
   text-align: left;    
   background-color: #eeeeee;

}

/* ======================================== RESPONSIVE DESIGN */

/* ======================================== 1 */
@media screen and (max-width: 815px) {
html{
   background: none ;
   background-color: #deebf7 ; 
   }
    
body { 
   width: 98.8% ;
   float:  left;
} 

header { width: 98.8% ; }
   #logo-computeria  { width: 370px; }
   #logo-opfikon     { width: 240px; } 

nav { width: 98.8%; }

main	{ 
   width: 100.5% ; 
   margin-top:125px; 
   }

section.spalte-1-2 { width: 43.0%; }
section.spalte-1-3 { width: 30.0%; }
section.spalte-2-3 { width: 58.0%; } 

footer { width: 100.5%; }
/*-----------------------------------*/}

/* ======================================== 2 */
@media screen and (max-width: 700px) {
header { height:  74px;}
   #logo-computeria  { width: 300px;  } 
   #logo-opfikon     { width: 200px;  } 

main	{ margin-top:112px; }

.aktuelle_info{width: 93% }
  
section {
   width: 98%;
}
section.spalte-1-2 { width:100%; }
section.spalte-1-3 { width:100%; }
section.spalte-2-3 { width:100%; } 
/*-----------------------------------*/}

/* ========================================  3 */
@media screen and (max-width: 640px) {

html { font-size: 13px;}
main { margin-top: 86px; width: 100.2% ;}
article { width: 95%; }

header { top: 30px;  width: 98%;  height:  52px;}
   #logo-computeria  { width: 200px;  margin: 5px 0 0 5px;} 
   #logo-opfikon     { width: 150px;  margin: 10px 10px 0 0; } 

nav {
   height: 26px;
   width: 98%; 
   font-size: 0.9em;
   }
nav ul li a { border-radius: 5px; }

.aktuelle_info{width: 85% }

footer { width: 100.2%; }
/*-----------------------------------*/}