/*
  Theme Name: beutelpost
  Theme URI: http://www.beutelpost.de/
  Description: Theme von www.beutelpost.de
  Author: Christoph Friedrich
  Author URI: http://www.beutelpost.de/
  */

  /* Allgemeine Notiz:
  /* margin-left:auto; margin-right:auto -> auf beiden Seiten gleichviel Abstand -> zentriert */
  
  /* BEREICHE */
  /* Header-Bereich ohne großen Abstand zum oberen Browserrand mittig ausrichten. Die Breite beträgt 846 Pixel, weil die Header-Grafik 846 Pixel breit ist. */
  .header    {margin-top:0px;  margin-left:auto; margin-right:auto; width:846px}
  /* Menü-Bereich ohne extra Abstand zum Header (optischer Abstand ist durch Leere in der Header-Grafik gegeben) mittig ausrichten. Die Breite beträgt 570 Pixel, weil die Textspalte auch 570 Pixel breit sein soll. Text zentrieren wegen Seitenzahlen am Seitenende. */
  .menu      {display:none}
  /* Hauptteil-Bereich mit 20 Pixeln Abstand zum Menü mittig ausrichten. Die Breite beträgt 570 Pixel, weil die Textspalte 570 Pixel breit sein soll. Innenabstand auf 0 Pixel setzen und den Text linksbündig ausrichten. */
  .hauptteil {margin-top:20px; margin-left:auto; margin-right:auto; width:570px; padding:0px; text-align:left}         
  /* Den Footer-Bereich mit 20 Pixeln Abstand zum Hauptteil mittig ausrichten. Die Breite beträgt 560 Pixel, weil 570 Pixel MINUS 2*5 Pixel padding-Abstand = 560 Pixel. Hintergrund soll weiß sein und ein feiner Rahmen drumherum. Schrift soll Calibri bei 8pt sein. Text zentriert. */
  .footer    {display:none}
   
  /* BESTANDTEILE DES HAUPTTEILS */
  /* Den Beitrag mit 20 Pixeln Abstand zum darüberliegenden Element anlegen und einen Innenabstand von 10 Pixeln zu jedem Objekt setzen. Die Textspalte soll 550 Pixel breit sein. Durch den Innenabstand von 10 Pixeln auf jeder Seite kommt man zur optischen Breite von 570 Pixeln. Der Beitrag muss mindestens 212 Pixel hoch sein, damit der Stempel hineinpasst. Der Beitrag soll auf weißem Hintergrund geschrieben sein. Um den gesamten Beitrag soll ein feiner Rahmen gezogen werden, wobei der untere Rand nicht durchgezogen, sondern gepunktet sein soll, um die anschließenden Kommentare optisch vom Text abzugrenzen, aber nicht abzuschneiden. */
  .beitrag         {margin-top:20px; padding:10px; min-height:212px; background-color:white; border:1px solid black}
  /* Die 404-Seite sieht genauso aus wie ein normaler Beitrag, nur dass natürlich keine Kommentare zugelassen sind -> Der untere Rand muss auch durchgezogen sein. Dazu braucht es diesen Zusatz. */
  .vierhundertvier {border: 1px solid black}
  /* Den Stempel mit 10 Pixeln Abstand zu jeder Seite rechts ausrichten, also den Text links vorbeifließen lassen. */
  .stempel         {margin:10px; float:right}
  /* Die Überschrift wird in Times New Roman (einer Serifenschrift) bei Größe 30 geschrieben. */
  .ueberschrift    {font-family:Times New Roman, serif; font-size:30pt;}
  /* Die Überschrift wird in Times New Roman (einer Serifenschrift) bei Größe 20 geschrieben. */
  .ueberschrift-kasten-suche    {margin-top:20px; padding:10px; width:550px; background-color:white; border:1px solid black; font-family:Times New Roman, serif; font-size:15pt;}
  /* Der Text wird in Arial (einer serifenlosen Schrift) bei Größe 12 angezeigt. */
  .text            {font-family:Arial, sans-serif;      font-size:12pt}
  /* Die Kommentarzeile wird direkt, also ohne Abstand, an den Text angeschlossen, wobei ein Innenabstand von 10 Pixeln zu jeder Seite eingehalten werden soll. Die Kommentarzeile soll genau wie der Text ebenfalls 550 Pixel breit, weiß hinterlegt und in Arial in Schriftgröße 12 geschrieben sein. Drumherum ist ein feiner Rahmen, wobei der obere Rand ausgeblendet wird, da dieser schon durch den gepunkteten unteren Rand des Textes gebildet wird. */
  .kommentarbereich{margin:0px; padding:10px; width:550px; background-color:white; font-family: Arial, sans-serif; font-size:12pt; border:1px solid black; border-top-width:0px}
  /* Die Kommentare werden erst ausgeblendet und später per JavaScript eingeblendet. */
  .kommentare      {display:none}
  
  .ganzlinks {float:left}
  .ganzrechts {float:right}
  
  /* LINKS */      
  /* Links im Text werden schwarz, aber mit Unterstreichung dargestellt, wobei die Unterstreichung nicht durch eigentliches Unterstreichen, sondern durch Sichtbarmachen des unteren Rahmens des a-Elements realisiert wird. */
  .beitrag a       {color:black; text-decoration:none; border-bottom:1px solid black}
  /* Der Link der Überschrift zum Artikel wird optisch nicht hervorgehoben. Diese Angaben müssen sein, damit die ansonsten geltenden Angaben von ".beitrag a" überschrieben werden. */
  .ueberschrift a  {color:black; text-decoration:none; border-width:0px}
  /* Der [...]-Link in Ausschnitten (excerpt) wird schwarz und ohne jegliche Unterstreichung angezeigt. */
  a.weiterlesen       {color:black; text-decoration:none; border-bottom-width:0px}  

  /* Der Link zu den Kommentaren wird schwarz, aber mit Unterstreichung dargestellt, wobei die Unterstreichung nicht durch eigentliches Unterstreichen, sondern durch Sichtbarmachen des unteren Rahmens des a-Elements realisiert wird. */
  .kommentarbereich a       {color:black; text-decoration:none; border-bottom:1px solid black}
  /* Links im Menü werden schwarz und komplett ohne Unterstreichung dargestellt. (Sie sind durch die Umrahmung als Buttons zu erkennen.) Der Hover-Effekt wird durch die .menu-button:hover-Formatierung realisiert. */
  .menu a {color:black; text-decoration:none}
  /* Links im Footer werden genauso angezeit wie Links im Beitragstext. */
  .footer a {color:black; text-decoration:none; border-bottom:1px solid black}
       
  /* BILDER */  
  /* Bilder in einem Beitrag werden mit einer Breite von 550 Pixeln und ohne Rand dargestellt. */
  /* .text a img {width:550px; border-width:0px} */
  /* Smileys sollten natürlich nicht so riesig sein :D Breite der Smileys von wordpress in wp-includes/images/smileys: 15 Pixel */
  img .wp-smiley {width:15px}

  /* Facebook-Hinweis ausblenden */
  .facebookhinweis {display:none}