/**
* Standard-CSS-Bibliothek
*
* Die Standard-Bibliothek für CSS, Reset, Floating, etc.
*
* Frontend-Performance:
*
* Bei Projekte die sehr schnell gerendert werden müssen sind die folgenden Selektoren besonders zu beachten:
*   .hq => High quality Modus beim Skalieren siehe fixes section
*   .rhq => High quality Modus beim Skalieren für GIF Dateien siehe fixes section
*
* @author Joram Höfs <joram@fliks.com>
* @version 1.2
* @date 2008-04-02 Datei erstellt: Joram Höfs
* @date 2009-03-12 Refaktorierung: Joram Höfs
* @date 2009-09-25 Refaktorierung: Joram Höfs
*/

/*------------------------------------------------------------------------------------------------------*/

/**
* Basisreset
* @section reset
*/

	/**
	 * Masterreset
	 */
	* {
		font-size: 1em;
		font-weight: 500;
		margin: 0;
		outline: 0;
		padding: 0;
	}

	/**
	 * Listen wieder lesbar machen nachdem Masterreset
	 */
	ol li, ul li {
		margin: 0 0 0 15px;
	}

	/**
	 * Linkstandard: Links sind immer blau, niemals unterstrichen
	 */
	a, a:hover, a:active, a:visited, a:link, a:focus {
		color: #0005FF;
		text-decoration: none;
	}

	/**
	 * Aktive und hover Links werden unterstrichen
	 */
	a:hover, a:active, a:focus {
		text-decoration: underline;
	}

	/**
	 * Kein Border für Bilder, Problem bei Verlinkung: blauer Rand
	 */
	img {
		border: 0;
	}
	
	/**
	 * Strong 
	 */
	strong {
	    font-weight: 600;
	}
	
/*------------------------------------------------------------------------------------------------------*/

/**
 * Fixes
 * @section fixes
 */	

	/**
	 *
	 * HQ - High quality als Standard für alle Bilder im Internet Explore ab 6.0
	 *
	 * Skalierungsmethodefür Bilder im Internet Explorer auf bikubisch setzen - führt im Großteil der Fälle zu einer besseren Bildqualität
	 * wenn mittels width/height innerhalb vom Browser skaliert wird.
	 *
	 * Durch den erhöhten Rechenaufwand ist abzuwägen ob die Frontend-Performance des Projekte gegebenfalls zu stark beeinträchtigt wird.
	 *
	 * @bugfix 
	 * @affected Internet Explorer 6+7+
	 * @css-for Internet Explorer 6+7+
	 * @see http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx
	 */
	img, img.hq {
		-ms-interpolation-mode: bicubic;
	}

	/**
	 *
	 * HQ - High quality als Standard für alle Bilder im Gecko ab 1.9 / Firefox 3.6
	 *
	 * Skalerieungmethode für Bilder im Gecko billiniar setzen - führt im Großteil der Fälle zu einer besseren Bildqualität
	 * wenn mittels width/height innerhalb vom Browse skaliert wird.
	 *
	 * Durch den erhöhten Rechenaufwand ist abzuwägen ob die Frontend-Performance des Projekte gegebenfalls zu stark beeinträchtigt wird.
	 *
	 * @bugfix 
	 * @affected Gecko 1.9+ / Firefox 3.6+
	 * @css-for Gecko 1.9+ / Firefox 3.6+
	 * @see https://developer.mozilla.org/en/CSS/image-rendering
	 */
	img, img.hq {
		image-rendering: optimizeQuality;
	}
	
	/**
	 * Skalerieungmethode für Bilder im Internet Explorer auf den Standard (nearest-neighbor) zurücksetzen wenn es Probleme geben sollte.
	 *
	 * @bugfix 
	 * @affected Internet Explorer 6+7+
	 * @css-for Internet Explorer 6+7+
	 * @see http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx
	 */
	img.nn {
		-ms-interpolation-mode: nearest-neighbor;
	}
	
	/**
	 * Skalerieungmethode für Bilder im Gecko auf crisp-edges (aktuell nearest-neigbor algo) stellen
	 *
	 * @bugfix 
	 * @affected Gecko 1.9+ / Firefox 3.6+
 	 * @css-for Gecko 1.9+ / Firefox 3.6+
 	 * @see https://developer.mozilla.org/en/CSS/image-rendering
	 */
	img.nn {
		image-rendering: -moz-crisp-edges;
	}
	
	/**
	* Optimiert Bildqualität im Gecko und IE7 für GIF-Grafiken
	*
    * Wenn GIF-Grafiken im HQ-Modus gerendet werden soll muss .rhq verwendet werden
	*
	* @bugfix 
    * @affected Gecko 1.9+ / Firefox 3.6+ / Internet Explore 7+
    * @css-for Gecko 1.9+ / Firefox 3.6+ / Internet Explorer 7+
    * @see https://developer.mozilla.org/en/CSS/image-rendering
	*/
	img[src$=".gif"], img.hq[src$=".gif"] { 
        image-rendering: -moz-crisp-edges;         /* Gecko 1.9+ */
        -ms-interpolation-mode: nearest-neighbor;  /* IE 7+ */
    }
    
    /**
	 *
	 * RHQ - Real high quality für GIF-Grafiken.
	 *
	 * Normalerweise werden GIF-Grafiken auch denn mit -moz-crisp-edges bzw. nearest-neigbor skaliert auch dann wenn
	 * sie eigentlich mittels der .hq-Klasse auf highquality geschaltet werden sollten. Dieses Verhalten, bzw. überschreiben
	 * der high quality Einstellungen durch nearest neigbor soll einen robusten Umgang sichern.
	 *
	 * Sollten jedoch GIF-Grafiken wirklich bikubisch bzw. bilinear skaliert werden so ist die hier definierten Klasse .rhq einzusetzen.
	 *
	 * Durch den erhöhten Rechenaufwand ist abzuwägen ob die Frontend-Performance des Projekte gegebenfalls zu stark beeinträchtigt wird.
	 *
	*/
    img.rhq[src$=".gif"] {
        image-rendering: optimizeQuality;
     	-ms-interpolation-mode: bicubic;
     }

/*------------------------------------------------------------------------------------------------------*/

/**
* Typographie
* @section typo
*/

	/**
	* Basisschrift & Basisschriftgröße
	*
	* Setzt die Basisschriftgröße auf 10px
	* Die meisten populären UAs haben die Basisschriftgröße auf 16px
	*
	* Diese Faustregel mag nicht vollkommen der Realität entsprechen aber der Praxis und man kann damit recht
	* effektiv arbeiten.
	*
	* 16px x 62.5% = 10px
	*
	* Nun entspricht 1em = 10px
	* @see http://www.maratz.com/blog/archives/2005/10/21/typetesters-base-font-size/
	*
	*/
	body {
		font: 62.5% "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;       
	}
	
	/**
	 * Anführungszeichen für den deutschsprachigen Raum
	 * Sind als Standard gesetzt für <q>
	 */
	q, q:lang(de) {
		quotes: '„' '“' '‚' '‘';
	}

	/**
	 * Anführungszeichen für den englischspachigen Raum
	 */
	q:lang(en) {
		quotes: '“' '”' "‘" "’";
	}

	/*------------------------------------------------------------------------------------------------------*/

	/**
	* Schriftausrichtung
	* @subsection typo-align
	*/
		
		/**
		 * Text links
		 */
		.typ_lft {
			text-align: left;
		}

		/**
		 * Text rechts
		 */
		.typ_rgt {
			text-align: right;
		}

		/**
		 * Text mittig
		 */
		.typ_cen {
			text-align: center;
		}

	/*------------------------------------------------------------------------------------------------------*/

	/**
	* Schriftstille
	* @subsection typo-style
	*/

		/**
		 * Schriftschnitt fett
		 */
		.typ_b {
			font-weight: 600;
		}

		/**
		 * Schriftschnitt kursiv
		 */
		.typ_i {
			font-style: italic;
		}

		/**
		 * Schrift unterstrichen
		 */
		.typ_u {
			text-decoration: underline;
		}

		/**
		 * Schrift durchgestrichen
		 */
		.typ_s {
			text-decoration: line-through;
		}

/*------------------------------------------------------------------------------------------------------*/

/**
* Boxen
* @section box
* Boxen, Zeilen, Spalten, Floating, etc.
*/

	/*------------------------------------------------------------------------------------------------------*/

	/**
	* Klassen zur Positionierung von Boxen
	* @subsection box-position
	*/

		/**
		 * Box links ausrichten 
		 */
		.box_lft {
			float: left;
		}

		/**
		 * Box rechts ausrichten
		 */
		.box_rgt {
			float: right;
		}

		/**
		 * Box zentriert ausrichten
		 */
		.box_cen {
			margin: auto;
		}

	/*------------------------------------------------------------------------------------------------------*/

	/**
	* Klassen um Floatings zu beenden
	* @subsection box-float
	*
	* Best Practice: Die Klassen in einem <br/> wie folgt im Markup verwenden: <br class="clf"/>
	*/

		/**
		 * br zum beenden der Floats
		 */
		br.clf, br.clf_lft, br.clf_rgt {
			visibility: hidden;
		}

		/**
		 * Float links beenden
		 */ 
		.clf_lft {
			clear: left;
		}

		/**
		 * Float rechts beenden
		 */
		.clf_rgt {
			clear: right;
		}

		/**
		 * Floats links/rechts beenden
		 */
		.clf {
			clear: both;
		}

/*------------------------------------------------------------------------------------------------------*/

/**
* Abgerundete Elemente
 * @section rounded-elements
 * Alle Variationen an Elementen mit abgerundeten Ecken
 */
 
     /**
     * Abgerundete Elemente müssen einen Rahmen haben
     */
     .re, .re_t, .re_b, .re_tl, .re_tr, .re_bl, .re_br {
         border: 1px solid #000;
     }

     /**
     * Abgerundete Ecken komplett
     */
     .re {
         border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
     }
     
     /**
     * Abgerundete Ecken oben
     */
     .re_t {
         border-top-left-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -webkit-border-top-left-radius: 5px;
         border-top-right-radius: 5px;
            -moz-border-radius-topright: 5px;
            -webkit-border-top-right-radius: 5px;
     }
     
     /**
     * Abgerundete Ecken unten
     */
     .re_b {
         border-bottom-left-radius: 5px;
             -moz-border-radius-bottomleft: 5px;
             -webkit-border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
             -moz-border-radius-bottomright: 5px;
             -webkit-border-bottom-right-radius: 5px;  
     }
     
     /**
     * Abgerundete Ecke oben links
     */
     .re_tl {
         border-top-left-radius: 5px;
             -moz-border-radius-topleft: 5px;
             -webkit-border-top-left-radius: 5px;    
     }
     
     /**
     * Abgerundete Ecke oben rechts
     */
     .re_tr {
         border-top-right-radius: 5px;
             -moz-border-radius-topright: 5px;
             -webkit-border-top-right-radius: 5px;    
     }
     
     /**
     * Abgerundete Ecke unten links
     */
     .re_bl {
         border-bottom-left-radius: 5px;
              -moz-border-radius-bottomleft: 5px;
              -webkit-border-bottom-left-radius: 5px;    
     }
     
     /**
     * Abgerundete Ecke unten rechts
     */
     .re_br {
         border-bottom-right-radius: 5px;
              -moz-border-radius-bottomright: 5px;
              -webkit-border-bottom-right-radius: 5px;    
     }
     
/*------------------------------------------------------------------------------------------------------*/

/**
* Navigation
* @section navigation
* Navigationen jeder Art
*/

	/*------------------------------------------------------------------------------------------------------*/

	/**
	* Vertikale Navigation
	* @subsection navigation-vertical
	*/

		/**
		* Navigationspunkt
		*/
		.v_nav li {
			list-style: none;
			margin: 0;
		}

		/**
		* Navigationslink
		*/
		.v_nav li a {
			display: block;
			width: 100%;
		}
		
	/*------------------------------------------------------------------------------------------------------*/

	/**
	* Horizontale Navigation
	* @subsection navigation-horizontal
	*/

		/**
		* Navigationspunkt
		*/
		.h_nav li {
			display: inline;
			list-style: none;
			margin: 0;
		}