/*
CSS-Datei fuer Mark-Site mit CMBasic vom 21.Mai 2017
Copyright CSS-Datei Walo Zach http://www.zawadi.ch 
Basis für Schriftgrösse in body auf 0.85em eingestellt
Hintergrund in body auf #3c3c3b; mit url(background.jpg)
Basis für Schriftfarbe in body auf black gesetzt 
*/

/* Die Standardeinstellungen des Browsers werden zurückgesetzt */
* {
  margin: 0px;
}
/* Hintergrundfarbe für den ganzen sichtbaren Bereich */
body {
  background: #383431 url(background.jpg) top center repeat-x;
  font-size: 0.85em;
  font-familiy:Arial,Verdana,Helvetica,sans-serif;	
  font-color: black;
}
/* Hintergrundfarben für die einzelnen DIVs */
#mother {
  background-color: transparent;
  //max-width: 1000px; 
  width: 1020px;
  margin: auto;
  padding: 0px;
}
#logo {
  background-color: transparent;
  width: 100%;
  color: white;
  height: 150px;
  padding: 30px 0px 20px 10px;
}
#logo h1 {
  font: 4em Arial;
  color: white;
}
#logo h2 {
  font: 2em Arial;
  color: white;
}

#navi {
  background-color: transparent;
  float: left;
  width:20%;
  font: 0.9em Arial;
  color: white;
  margin: 0px 0px 0px 10px;
  padding: 0px 0px 0px 0px;
}

#content {
  width: 75%;
  background-color: #1d1d1b;
  float: right;
  //font: 1em Arial;
  font: 1.2em Arial;
  font-style: normal; 
  color: white;
  border-top-width: 3px; 
  border-right-width: 3px;
  border-left-width: 3px;
  border-bottom-width: 0px;
  border-style: solid;
  border-color: white;
  margin: 0px 0px 0px 0px;
  padding: 10px 10px 10px 20px;
}

#footer {
  background-color: transparent;
  height: 20px;
  font-size: 0.7em;
  padding: 20px 0px 20px 430px;  
  clear: both;
}

#footer a:link {
  background-color: transparent;
  text-decoration: none;
  color: black;
}

#path  { color: white; font-size: 0.8em; padding: 0px 0px 10px 10px; width: 100% }

/* Listenstile für Menüeintrag im Navibereich topmenu*/
#topmenu {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font: 0.8em Arial;
  padding-left: 0px;
  text-align: right;
}

#topmenu ul {
  padding: 3px;
  border-bottom: 1px solid silver; 
  margin-bottom: 8px;
}

#topmenu li {
  display: inline;
}

#topmenu a {
  padding: 3px 1em;
  margin-right: 3px;
  border: 1px solid silver;
  text-decoration: none; 
  border-bottom: 0;
}

#topmenu a:link {
  background-color: #CCCCCC;
  text-decoration: none;
  color: black;
}

#topmenu a:visited {
  background-color: #CCCCCC;
  text-decoration: none;
  width: 100%;
  color: black;
}

#topmenu a:hover {
  background-color: #999999;
  width: 100%;
  color: black;
}

#topmenu .obermenuhigh {
  padding: 3px 1em;
  margin-right: 3px;
  border: 1px solid silver;
  background-color: #CCCCCC;
  color: white;
  border-bottom: 0;
}
/* ENDE Listenstile für Menüeintrag im topmenu */

/* Listenstile fuer Menueeintrag im Navibereich */
#navi ul { list-style-type: none; margin-top: 0px; margin-left: 10px; padding-left: 10px }
#navi ul ul {  padding-left: 10px; margin-left: 10px; }
#navi ul li a  { color: white; font-weight: bold; background-color: transparent; text-transform: uppercase; text-indent: 0; list-style-type: none; margin-top: 1px; padding: 4px 4px 4px 0; border-color: silver; border-style: none none solid; border-width: 0; display: block  }
#navi ul ul li a  { color: white; font-weight: lighter; background-color: transparent; text-transform: capitalize; text-indent: 0px; margin-top: 1px; padding: 4px 4px 4px 0px;  display: block }
#navi a:link { text-decoration: none; width: 140px; display: block }
#navi a:visited { text-decoration: none; width: 140px; display: block }
#navi a:hover { color: red; background-color: transparent; width: 140px; display: block }
#navi ul .obermenuhigh  { color: #999999; font-weight: bold; text-transform: uppercase; list-style-type: none; list-style-image: url(pfeil.gif); margin-top: 1px; padding: 4px 4px 4px 0px; border: 0px; width: 140px; display: block }
#navi ul ul .submenuhigh { color: #999999; font-weight: bold; list-style-image: url(pfeil.gif); margin-top: 1px; padding: 4px 4px 4px 0px; border: 0px; width: 140px; display: block }
/* ENDE Listenstile fuer Menueeintrag im Navibereich */

/* Die ungebundenen Klassen erscheinen als Auswahloptionen im linken Pull-down-Menue von TinyMCE! */

/* Ueberschriften gestalten */
h1  { font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bolder; font: 1.4em Arial; line-height: 1.4; margin-top: 10px; padding: 4px }
h2 	{ font-family: Arial, Verdana, Helvetica, sans-serif; font: 1.1em Arial; line-height: 1.4; padding-bottom: 1px; margin-bottom: 1px;}
h3 	{ font-family: Arial, Verdana, Helvetica, sans-serif; font: 1em Arial; line-height: 1.4; margin-bottom: 1px; padding-bottom: 1px; }

/* Absatz und div */
p, div 	{ padding-right: 3px;}
p 	{margin-top: 3px; margin-bottom: 5px; }

/* Tag b zusaetzlich einfaerben */
b 	{ color: #999999; }

/* Zeichenformat strong = schwarz */
strong { color: white; }

/* normaler Listenstil, beschraenkt auf Inhaltsbereich */
#content ul  { font-size: 1em; line-height: 1.4; margin-left: 0.7em; padding-left: 0.7em }

/* Hovereffekt fuer Links */
a:link { color: gray; text-decoration: underline; }
a:hover { color: white; text-decoration: none; background-color: gray; }
a:visited { color: gray; text-decoration: underline; }

/* Hier beginnen die ungebundenen Klassen, zu erkennen
am Punkt vor dem Klassennamen 
Diese werden im Auswahlmenue von TinyMCE gezeigt */

/* Gestaltung des rechts ausgerichteten News-Kastens */
.kasten  { font: 0.9em Arial; line-height: 1.3; float: right; margin: 3px; padding: 3px; border: dotted 1px #999999; width: 170px }
.kasten h3 { margin-top: 0px; }

/* Beginn der Newskasten-Formate */
.boxcover { font: 0.9em Arial; line-height: 1.3; margin-top: 10px; float: right; width: 200px; padding: 3px; padding-left: 10px; }
.box  { font: 0.9em Arial; line-height: 1.3; float: right; margin-top: 10px; padding-right: 0px; border: solid 1px #666666; width: 100% }
.box h3 { background-color: #999999;  color: white; padding: 3px; margin-top: 0px;}
.box div { padding: 3px; }
/* Ende der neuen Newskasten-Formate */

/* Einfuehrungsabsatz */
.lead, .lead p 	{ font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;  font-size:  1em; line-height: 1.5em; font-weight: bold; margin-top: 5px; margin-bottom: 10px; }
.lead img { padding: 5px;}

/* grauer Rahmen mit Umrandung */
.rahmen  		{ font-size: 1em; font-family: Arial, Verdana, Helvetica, sans-serif; background-color: #eeeeee; padding: 3px; border: solid 1px #666666; width: 90% }

/* Rahmen mit gestrichelter Umrandung */
.tipp  { font-size: 1em; font-family: Arial, Verdana, Helvetica, sans-serif; margin-top: 8px; margin-bottom: 10px; padding: 3px; border: dotted 1px #666666; width: 90% }
code, .code { font-family: 'Courier New', Courier, monospace; font-size: 1em;  color: #000099; }

/* Bildunterschrift */
.bu {margin-top: 0px; font-size: 0.75em; font-weight: bold;}

/* Linie interessant gestalten */
hr  { }

/* Luft fuer Tabellen */
table th, th, tbody { padding: 1px; }

/* Links innerhalb von Absaetzen mit kleinem Zeichen versehen */
#content p a { display: inline; }

/* Media Queries */
/* bis 850 Pixel Bildschirmbreite, z.B. Tablet */
@media (max-width: 850px) { 
  body { margin: 0; padding: 0;}   
  #search {display: none;}    -> Suchfeld wird entfernt
} 

/* Format fuer zuletzt geaendert usw. */
.datum { font-size: 0.8em; }

/* bis 600 Pixel Bildschirmbreite, z.B. Smartphone */
@media (max-width: 600px) { 
   body { margin: 0; padding: 0;} 
  #logo { width: 100%;}        -> Kopfbild  wird kontinuierlich verkleinert
  #logo h1 {display: none;}  -> Titel Mark wird entfernt  
  #logo h2 {display: none;}  -> Titel künstlerische Aktivitäten wird entfernt
  #navi {display: block; float: none !important; width: 100%; }  
  #footer{display: none;}   -> Fusszeile wird entfernt
  #content {display: block; float: none !important; width: 95%; }  -> Inhalt wird als Block angezeigt  
}