/* if_format1.css -- CSS boehmwanderkarten V2.0 mit responsivem Design */
/* 21.08.2019 */

/* R E S P O N S I V E S   D E S I G N */
/* ----------------------------------- */

/* RESPONSIVE 1: FLEXBOX WÄHLEN */
/* ---------------------------- */


body{
  font-family: Univers,Helvetica,Arial,Calibri,Verdana,sans-serif;
  font-family: sans-serif;
  font-size:1em;
  color:black;
  background-color: RGB(252,255,248);


  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


/* RESPONSIVE 2: KLASSEN FÜR RESPONSIVITÄT */
/* --------------------------------------- */

/* unbenutzt */

/* RESPONSIVE 3: BREITE NAVIGATION : ARTICLE = 1 : 5 */
/* ------------------------------------------------- */

nav {
  flex: 1;
  border: 1px solid black;
  margin: 0.5em;
  padding: 0.5em;
  background-color: RGB(224,255,192);
}

article {
  flex: 5;
  margin: 0.5em;
  padding:0.5em;
}

/* RESPONSIVE 4: WENN MEDIUM SCHMALER ALS 10EM, DANN FLEX-DIRECTION AUF COLUMN STELLEN */
/* ----------------------------------------------------------------------------------- */

/* @media all and (max-width: 512px) { */     /* theoretisch sind 10em besser, das packt JS aber nicht */
/*   body {                            */
/*     flex-direction: column;         */
/*   }                                 */
/* }                                   */

/* RESPONSIVE 5: KLASSEN ZUR EINSTELLUNG BILDGRÖSSE */
/* ------------------------------------------------ */



/* img {width:100%;}  DAS EHER NICHT MACHEN -- ZOOMT JEDES BILD AUF SEITENBREITE */

.is95 {width:95%;}
.is90 {width:90%;}
.is85 {width:85%;}
.is80 {width:80%;}
.is75 {width:75%;}
.is70 {width:70%;}
.is65 {width:65%;}
.is70 {width:60%;}
.is55 {width:55%;}
.is50 {width:50%;}
.is45 {width:45%;}
.is40 {width:40%;}
.is35 {width:35%;}
.is30 {width:30%;}
.is25 {width:25%;}
.is20 {width:20%;}
.is15 {width:15%;}
.is10 {width:10%;}
.is05 {width:5%;}

/* S T A M M D E F I N I T I O N E N */
/* --------------------------------- */

/* HAUPTDEFINITIONEN */
/* ----------------- */

body {
       font-family: Univers,Helvetica,Arial,Calibri,Verdana,sans-serif;
       font-size:1em;
       color:black;
       background-color:#fcfff8;
     }

/* LINKSTILE */
/* --------- */

a:link     {color:#50b000;font-weight:bold;text-decoration:none;}
a:visited  {color:#40a060;font-weight:bold;text-decoration:none;}
a:hover    {color:#ff0080;font-weight:bold;text-decoration:underline;}

/* Hier die Stile noch einmal als Klasse definiert - für den CSS-Test */

.link    {color:#50b000;font-weight:bold;text-decoration:none;}
.visi    {color:#40a060;font-weight:bold;text-decoration:none;}
.hove    {color:#ff0080;font-weight:bold;text-decoration:underline;}

/* TEXTARTEN */
/* --------- */

.text    {color:#000000;font-weight:normal;} /* TEXTFABE   000000        */
.dyas    {color:#d09030;font-weight:bold;}   /* ZWEITFARBE d09030        */
.tria    {color:#907060;font-weight:bold;}   /* DRITTFARBE 907060        */
.quad    {color:#508098;font-weight:bold;}   /* VIERTFARBE 508098        */
.warn    {color:#ff4000;font-weight:bold;}   /* HERVORTRETENDE FARBE     */
.grey    {color:#b0b0b0;font-weight:bold;}   /* ZURÜCKTRETENDE FARBE     */
.whit    {color:#e0e0e0;font-weight:bold;}   /* VERBORGENE FARBE         */

/* VERWEISEBENEN

.sit1  {font-size:0.85em;font-weight:bold;text-decoration:underline;}     LINK 1. ORDNUNG
.sit2  {font-size:0.85em;font-weight:bold;text-decoration:none;}          LINK 2. ORDNUNG
.sit3  {font-size:0.70em;font-weight:bold;text-decoration:none;}          LINK 3. ORDNUNG   */

/* TEXTGRÖSSEN */
/* ----------- */

.page    {font-size:2.80em;}       /* SEITENÜBERSCHRIFT                */
.sec1    {font-size:2.00em;}       /* 1. ORDNUNG                       */
.sec2    {font-size:1.70em;}       /* 2. ORDNUNG                       */
.sec3    {font-size:1.40em;}       /* 3. ORDNUNG                       */
.larg    {font-size:1.20em;}       /* GROSSSCHRIFT                     */
.norm    {font-size:1.00em;}       /* NORMALSCHRIFT                    */
.sman    {font-size:0.85em;}       /* KLEINSCHRIFT N[ORMAL] (ALT SMAL) */
.smal    {font-size:0.70em;}       /* KLEINSCHRIFT L[ITTLE] (NEU SMAL  */
.smax    {font-size:0.60em;}       /* KLEINSCHRIFT E[XTRA]  (NEU)      */
.tiny    {font-size:0.50em;}       /* WINIZIGSCHRIFT        (NEU)      */

/* HINTERGRUNDSTILE */
/* ---------------- */

.bnor    {background-color:#fcfff8;}
.bdya    {background-color:#e0ffc0;}
.btri    {background-color:#80ff80;}
.bwar    {background-color:#ffa0a0;}

/* MOVE OVER STILE */
/* --------------- */

.motaba  {background-color:none;}         /* AUSSENTABELLE   */
.motabb  {background-color:#000000;}      /* BORDERTABELLE   */
.motabc  {background-color:#e0ffc0;}      /* COLUMNTABELLE   */
.motabd  {background-color:white;}        /* DISTANZTABELLE  */
.motabe  {background-color:#beige;}       /* EIGENTL. TAB.   */
.motxtt  {font-size:1.20em;font-weight:bold;background-color:#cccccc;}  /* TITELSCHRIFT   */
.motxtn  {font-size:1.00em;}                                            /* NORMALSCHRIFT  */
.motxts  {font-size:0.85em;}                                            /* KLEINSCHRIFT   */

.moout1  {font-size:1.20em;font-weight:bold;font-style:normal}    /* LINKS AUF FREMDE SEITEN */
.moout2  {font-size:1.00em;font-weight:bold;font-style:normal}
.moout3  {font-size:0.85em;font-weight:bold;font-style:normal}
.moout4  {font-size:0.70em;font-weight:bold;font-style:normal}
.moout5  {font-size:0.70em;font-weight:bold;font-style:normal}
.moout6  {font-size:0.70em;font-weight:bold;font-style:normal}

.moown1  {font-size:1.20em;font-weight:bold;font-style:normal;background-color:#a0f060}    /* LINK AUF SICH SELBST */
.moown2  {font-size:1.00em;font-weight:bold;font-style:normal;background-color:#a0f860}
.moown3  {font-size:0.85em;font-weight:bold;font-style:normal;background-color:#a0f860}
.moown4  {font-size:0.70em;font-weight:bold;font-style:normal;background-color:#a0f860}
.moown5  {font-size:0.70em;font-weight:bold;font-style:normal;background-color:#a0f860}
.moown6  {font-size:0.70em;font-weight:bold;font-style:normal;background-color:#a0f860}

/* [ENDE] */