/*
  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 */
  
  /* HINTERGRUNDFARBE */
  /* Der body bekommt einen angenehmen Braun-Orange-Ton als Hintergrundfarbe */
  body { background-color:#ee9b29 }
  
  /* 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      {margin-top:0px;  margin-left:auto; margin-right:auto; width:570px; text-align:center}
  /* 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    {margin-top:20px; margin-left:auto; margin-right:auto; width:560px; padding:5px; background-color:white; border:1px solid black; font-family:Calibri; font-size:8pt; text-align:center;}
   
  /* 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; width:550px; 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 und fett geschrieben. */
  .ueberschrift-kasten-suche    {margin-top:20px; padding:10px; width:550px; background-color:white; border:1px solid black; font-family:Arial, sans-serif; font-size:15pt; font-weight:bold; text-align:center;}
  /* 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}
  /**/
  .kategorietitel  {margin-top:20px; padding:10px; width:550px; background-color:white; border:1px solid black;}
  
  /* BESTANDTEILE DES MENÜS */
  /* Die Buttons im Menü bzw. Seitenzahlen in der Navigation am Seitenende haben einen weißen Hintergrund, einen feinen Rahmen, sind in Calibri bei 15pt geschrieben und haben in jede Richtung einen Innenabstand von 5 Pixeln. */
  .menu-button      {background-color:white;  border:1px solid black; font-family:Calibri; font-size:15pt; padding:5px}
  /* Wenn mit dem Mauszeiger auf den Button gezeigt wird, bekommt er dieselbe Farbe wie der Hintergrund der ganzen Seite. Sonst bleibt alles gleich. */
  .menu-button:hover{background-color:ee9b29; border:1px solid black; font-family:Calibri; font-size:15pt; padding:5px}
  /* Das Suchen-Feld im Menü ist genauso designt wie die anderen Buttons auch, nur dass es hier keinen Hover-Effekt gibt, weil der dort blöd aussehen würde. */
  .menu-suche       {background-color:white;  border:1px solid black; font-family:Calibri; font-size:15pt; padding:5px}
  /* Das Suchfeld muss 170 Pixel breit sein (bei weniger ist die Menüzeile nicht breit genug, bei mehr wird das Suchfeld in der nächsten Zeile angezeigt) und 25 Pixel hoch sein (so passt es optimal in die Menüzeile). Ein Innenabstand von 10 Pixeln nach links ist erforderlich, damit der eingegebene Suchtext erst dort anfängt, wo die Rundung der Ecke zu Ende ist und nicht hässlich am linken Rand klebt. Es hat einen feinen GRAUEN Rahmen (schwarz sieht komisch aus!) und runde Ecken (dreimalige Angabe wegen verschiedenen Browsern). */
  .suchfeld {width:110px; height:25px; padding-left:10px; border:1px solid #B3B3B3; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px}
  /* Die ... Flächen zwischen den Seitenzahlen werden von der Schriftformatierung genauso wie die Seitenzahlen designt, sonst aber direkt auf die Seite geschrieben (kein Rahmen, keine Hintergrundfüllung etc.) */
  .punktpunktpunkt  {font-family:Calibri; font-size:15pt; padding:5px}
  
  .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}
  /* Wenn mit dem Mauszeiger auf den Link gezeigt wird, ändert sich die Hintergrundfarbe in die Farbe des body-Hintergrunds. Ansonsten bleibt alles gleich. */
  .beitrag a:hover {background-color:ee9b29; 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}
  /* Auch wenn mit dem Mauszeiger auf den Link zum Artikel gezeigt wird, wird dieser nicht hervorgehoben. Diese Angaben müssen sein, damit die ansonsten geltenden Angaben von ".beitrag a" überschrieben werden. */
  .ueberschrift a:hover  {color:black; text-decoration:none; border-width:0px; background-color:white} 
  /* Der [...]-Link in Ausschnitten (excerpt) wird schwarz und ohne jegliche Unterstreichung angezeigt. */
  a.weiterlesen       {color:black; text-decoration:none; border-bottom-width:0px}
  /* Wenn mit dem Mauszeiger auf den Link gezeigt wird, ändert sich die Hintergrundfarbe in die Farbe des body-Hintergrunds. Ansonsten bleibt alles gleich. */
  a.weiterlesen:hover {background-color:ee9b29; text-decoration:none; border-bottom-width:0px}


  .wp-caption-text { /*font-weight:bold;*/ text-align:center; /*font-variant:small-caps;*/ font-family:Calibri; margin-top:0px; color:#444; }
    

  /* 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}
  /* Wenn mit dem Mauszeiger auf den Link gezeigt wird, ändert sich die Hintergrundfarbe in die Farbe des body-Hintergrunds. Ansonsten bleibt alles gleich. */
  .kommentarbereich a:hover {background-color:ee9b29; 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}
  /* Auch der Hover-Effekt ist genauso wie bei den Links im Beitragstext. */
  .footer a:hover {background-color:ee9b29; text-decoration:none; border-bottom:1px solid black}
  
  /* LIGHTBOX */
  #lightbox{	position: absolute;	left: 0; width: 100%; max-height:90px; z-index: 100; text-align: center; line-height: 0;}
  #lightbox img{ width: auto; height: auto; }
  #lightbox a img{ border: none; }
  
  #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
  #imageContainer{ padding: 10px; }
  
  #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
  #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
  #imageContainer>#hoverNav{ left: 0;}
  #hoverNav a{ outline: none;}
  
  #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
  #prevLink { left: 0; float: left;}
  #nextLink { right: 0; float: right;}
  #prevLink:hover, #prevLink:visited:hover { background: url(lightbox/images/prevlabel.gif) left 15% no-repeat; }
  #nextLink:hover, #nextLink:visited:hover { background: url(lightbox/images/nextlabel.gif) right 15% no-repeat; }
  
  #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }
  
  #imageData{	padding:0 10px; color: #666; }
  #imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
  #imageData #caption{ font-weight: bold;	}
  #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
  #imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
  
  #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
  /* ENDE LIGHTBOX */
       
  /* 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}