/**
*
*   Projekt: Yoga und Trauma
*   ======================================================
*
*   Kommentare in Anlehnung an CSSDoc-Style 
*   (Kommentare für einzelne Anweisungen stehen am Ende der selben Spalte)
*   @see   http://cssdoc.net/
*
*   @site           www.yogaundtrauma.de
*   @version        2.1
*   @date           2009-04-08
*   @lastmodified   2010-02-04
*   @author         Manuela Kruse
*
*/  

/** =I
*
*   @section    Inhaltsverzeichnis
*   ======================================================
*
*   I....Inhaltsverszeichnis
*   C....Farbendefinitionen
*   G....Grundeinstellungen (reset)
*   E....HTML-Elemente
*   K....Klassen
*   H....Hauptseitenbereiche
*/

/** =C
*
*   @section    Farbdefinitionen
*   ======================================================
*
*   @colordef   #D7D7D7; Grauton (wrapper-Hintergrund)
*   @colordef   #e3e3e3; heller Grauton (Schriftfarbe: Gedicht/Kopfbereich)
*   @colordef   #4d6f89; Blauton (Ueberschriften: Schriftfarbe, Unterstriche)
*   @colordef   #4d6f89; Blauton (Definitionsliste: Link, Unterstriche)
*   @colordef   #404dbd; Blauton (Link)
*   @colordef   #834289; Lila (besuchter Link)
*   @colordef   #272727; fast Schwarz (Link: Navigation, h3-Ueberschrift der Marginale)
*
*
**/

/** =G
*
*   @section    Grundeinstellungen ( Reset )
*   =========================================================
*
*   @note       Kurzform
*/

* {
     margin: 0px;
     padding: 0px;
     font-size: 1em;
}

/** =E
*
*   @section    HTML-Elemente
*   =========================================================
*
*   @note       Standart-HTML-Elemente wie Ueberschriften,
*   @note       Absaetze, Links, Aufzaehlungen...
*/

body {
     background: #D7D7D7 url("body_bg.jpg") repeat-x;
     font-family: "Verdana", "Helvetica", "Bitstream Vera Sans", sans;
     font-size: 83%;
     line-height: 1.6em;
}

h1 {
     color: #4d6f89;
     border-bottom: 1px solid #4d6f89;
     font-size: 1.55em;
     margin: 10px 0 25px 64px;
     width: 88%;
}

h2 {
     color: #4d6f89;
     border-bottom: 1px dashed #4d6f89;
     font-size: 1.37em;
     margin: 25px 0 10px;
}

h3, h3 a { 
     margin: 20px 0 5px;
     font-size: 1.12em;
     color: #4d6f89;
     text-decoration: underline;
}

h3 a { 
     font-size: 1em;
}

p {
     font-size: 1em;
     margin-bottom: 15px;
}

sup {
     font-size: 0.85em;
}

#content ul {
     margin: -5px 0 15px;
}


li {
     list-style-type: none;
}

ol {
     margin: -5px 0 15px;
}

ol li {
     list-style-image: none;
     list-style-type: decimal;
     margin: 0px 0 5px 20px;
     font-size: 1em;
}

dl {
	 margin-bottom: -10px;
     padding: 0 0px 0 5px;
	 line-height: 1.4em;
}

dt {
     margin-bottom: 0px;
     font-size: 1em;
}

dt a {
     color: #4d6f89;
	 text-decoration: underline;
}

dd {
     margin: -1px 0px 0px 10px;
     font-size: 1em;
}

a {
     color: #404dbd;
}

a:visited {
     color: #834289;
}

a:focus {
     outline: none; /* @note    damit die gepunktete Umrandung von im focus stehenden Links nicht angezeigt wird ( ggf. löschen, da es evtl. die Zugänglichkeit verschlechtert!? */
}

blockquote {
	 margin-top: 20px;
     padding: 15px 10px 0;
     background-color: #dbe3e8;
     border: 1px solid #cacaca;
     font-size: 0.98em;
}

fieldset {
     padding: 0 5px;
}


/** =K
*
*   @section    Klassen
*   =========================================================
*
*   @note       globale Klassen, kombinierte Klassen mit HTML-Elementen
*/

.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}

.ueberschrift-zwei-zeilen {
     margin-top: -5px;
}
.abstand-name {
     padding-top: 10px;
     margin-bottom: 2px;
}

.element-border-bottom {
	 padding-bottom: 17px;
     border-bottom: 1px solid #4d6f89;
}

.p-up {
     margin-top: 25px; /* gößerer Abstand eines Abstatzes nach oben */
}

.p-bottom {
     padding-bottom: 10px; /* größerer Abstand eines Absatzes nach unten */
}

.p-small {
     margin-bottom: 5px;
}

.ohne-abstand {
     margin-bottom: 0px !important; /* für Absatz im Impressum vor den img */
}

.underline {
     text-decoration: underline;
}

p.zugangswege {
     margin: 0px 0 -3px;
}

p.zugangswege-unterstes {
     margin: 0px 0 7px;
}

p.kl-helfer {
     margin: 0px 0 -10px;
}

.einzug-klein {
     padding-left: 15px;
}

.email-arbeitskreis {
     margin: -10px 0 5px -7px;
}

.suche form {
     margin: -10px 0 -5px;
     padding: 0px;
     border: none;
}

.suche {
     margin: 25px 3px 15px;
     padding: 0 0 0 10px;
     background-color: #dbe3e8 ; /*#dbe4e9*/
     border: 1px solid #cacaca;
     line-height: 1em;
}

.suche label {
	 margin: 0;
     padding-top: 5px;
}

.einzug {
     padding-left: 15px;
}

p.zitat {
	 margin: -10px auto 5px;
	 width: 210px;

}

p.cite {
	 margin: 0px 0px 10px;
     padding-left: 18px;
     text-decoration: underline;
     font-size: 0.93em;
}

.mittig {
    text-align: center;
}

.rechts {
    text-align: right;
}

.links {
    text-align: left;
}

.sonderzeichen {
     padding-left: 0.15em; /* werden damit ein wenig nach rechts verschoben */
}

#content .aufzaehlung {
     margin-left: 120px;
}

.chaplin {
     padding-left: 30px;
}

.chaplin-hervorhebung {
     font-style: italic;
     letter-spacing: 0.07em;
     text-transform: uppercase;
}

.top-link {
	 margin-top: -10px;
	 width: 100%;
     text-align: right;
}

.fussnote {
     padding-left: 38px;
     font-size: 0.93em;
     text-indent: -13px; 
}

.unterueberschrift-h2 {
     margin-top: -9px;
     color: #4d6f89;
}

.schrift-etwas-groesser {
     font-size: 105%;
}

.schrift-groesser {
     font-size: 115%;
}

.schrift_klein {
     font-size: 75%;
}

.schrift_etwas_kleiner {
     font-size: 85%;
}

.schrift_einwenig_kleiner {
     font-size: 0.93em;
}

.inline {
     display: inline;
     margin-bottom: -3px;
}

.print {
     display: none;
}

.errors {
    color: #e9273e;
}

.error-email {
    margin: 15px 0 -15px;
    color: red;
}

.bullet-erfahrungsberichte {
    padding-left: 20px;
    background: url(bullet.png) no-repeat 0px 8px;
}

.col1-box {
    margin: 0px 2px 0px 0;
    padding: 0px;
    padding-bottom: 0px;
    height: 20px;
    width: 205px;
    background: url("col1_box_bg.png") top left no-repeat;
}

.col1-box-content {
    margin: 0px 0 0px;
    padding: 7px 10px 10px 17px;
    background: url("col1_box_bg1.png") bottom left no-repeat;
}

.col1-box p {
    margin: 5px 0 -5px;
}

.logo {
     margin-left: 10px;
}

.fotolinks {
     margin: -1px 15px 0px 0px;
     float: left;
}


.bild-rechts {
	 border: 1px solid #4d6f89;
     margin: 0px 0px 0px 15px;
     float: right;
}

.email-links {
     margin: 0px 0px 0px 0px;
     padding-top: 3px;
     float: left;
}

.flagge {
     padding-left: 5px;
}

.farbig {
     color: #4d6f89;
}

#margi h3 {
     color: #272727;
     text-decoration: none;
}

#content ul li {
     background: url("bullet.png") 0px 8px no-repeat;
     margin: 0px 0 0px 10px;
     padding-left: 15px;
     font-size: 1em;
}

ol li.unterpunkt-1 {
     margin: 0px 0 0px 45px;
     font-size: 1em;
}

ul li.unterpunkt-1 {
     margin: 2px 0 0px 45px;
     font-size: 1em;
}

ol.download {
     list-style-image: none;
     list-style-type: decimal;
     margin: 10px 0 10px 80px;
     font-size: 1em;
}


/**
*
*   @subsection Tabellen
*   ------------------------------------------------------
*/

table {
     margin: 5px auto 10px;
     width: 100%;
     border-collapse: collapse;
     border: 1px solid #979797;
}

table.gesamtuebersicht {
     border: none;
}

.volle-breite {
     width: 100%;
}

th, td {
     padding: 0.3em 1em;
}

th {
     background: url("box-g_head_bg2.jpg") repeat-x;
     font-size: 1.1em;
 }
 
td {
     border-top: 1px solid #bababa;
     font-size: 1em;
}

 
.gesamtuebersicht td {
     border-top: none;
     font-size: 1em;
     vertical-align: top;
}
  
.gesamtuebersicht td.td-border {
     border-top: 1px solid #bababa;
     text-decoration: underline;

}

.gerade {
     background-color: #dbe3e8;
}

.ungerade {
     background-color: #ccd4d9;
}

/**	
*	@subsection Boxen
*	------------------------------------------------------
*/

/* ---- Zitate im Hauptinhaltsbereich ---- */

.quote-content {
	 margin: 20px 10px 20px;
	 padding: 10px;
	 background-color: #dbe3e8;  /*#e0e0e0*/
	 font-size: 1em;
}

.cite {
	 margin: -15px 0 15px 20px;
	 font-size: 1em;
}


/* ---- Infoboxen ( Seitenleiste ) ---- */

.box-g {
	 margin: 25px 3px;
	 background-color: #dbe3e8 ; /*#dbe4e9*/
	 border: 1px solid #cacaca;
}

.box-g h3 {
	 margin: 0px;
	 padding: 2px 10px;
	 background: url("box-g_head_bg1.jpg") repeat-x;
	 font-size: 1.08em !important;
	 font-weight: normal;
}

.box-g h4 {
	 margin: 0px;
	 padding: 2px 10px;
	 background: url("box-g_head_bg1.jpg") repeat-x;
     font-weight: normal;	 
}

.box-g h3.zwei-zeilen, .box-g h4.zwei-zeilen {
	 background: url("box-g_head_bg2.png") repeat-x;	
}

.box-g ul {
	 margin: 10px 0;
}

#margi .box-g li {
	 padding-left: 12px;
	 text-indent: -15px;
	 list-style-type: none;
	 font-size: 1em;
}

.box-g li li {
	 padding-left: 5px;
	 font-size: 1em;
}

.box-g-content {
	 margin: 10px 10px 0px 10px;
}


/** =H
*
*   @section    Hauptseitenbereiche
*   =========================================================
*
*   @note       Kopf-, Navigations- und Fussbereich, Spalten
*/

/** 
*   @subsection Container
*   =====================
*
*   @note       umschließender div-container der Seite
*/ 

#wrapper {
	 width: 990px;
	 margin: 0 auto;
	 position: relative;
}

#wrapper-topleft {
	 background-image: url("wrapper_topleft_bg.jpg");
	 background-repeat: repeat-y;
	 width: 15px;
	 height: 370px;
	 overflow: hidden;
	 position: absolute;
	 top: 20px;
}

#wrapper-topright {
	 background-image: url("wrapper_topright_bg.jpg");
	 background-repeat: repeat-y;
	 width: 15px;
	 height: 370px;
	 overflow: hidden;
	 position: absolute;
	 top: 20px;
	 right: 0px;
}

/**
*	@subsection Kopfbereich
*	=======================
*/

#top-left {
	 height: 20px;
	 background-image: url("top_bg_left.jpg");
	 background-position: left bottom;
	 width: 950px;
	 z-index: 20;
}

#top {
	 height: 20px;
	 background-image: url("top_bg.jpg");
	 background-position: left bottom;
	 position: relative;
	 top: 0px;
	 left: 21px;
	 z-index: 30;
}

#top-right {
	 height: 20px;
	 background-image: url("top_bg_right.jpg");
	 background-position: left bottom;
	 width: 20px;
	 position: absolute;
	 top: 0px;
	 right: 0px;
	 z-index: 40;
}

#header {
	 background-image: url("header_bg_poem.jpg");
	 background-repeat: no-repeat;
	 background-position: bottom left;
	 width: 960px;
	 height: 330px;
	 position: relative;
	 top: 0px;
	 left: 15px;
}

#header a {
	 text-decoration: none;
}

#header img {
	 border: 0px;
}

/**
*   @subsection Inhaltsbereich
*   =========================================================
*
*   @note       umschließender div-container - Inhaltsbereich 
*   @note       bzw. Spalten für die Inhalte und ggf. Navigation 
*/

#main {
     margin-top: 0px; 
     margin-left: 0px;
     padding: 10px 0;
     background: url("main_bg.png") left top repeat-y;
     width: 990px;
}

#main-1 {
     margin-top: 0px; 
     margin-left: 0px;
     padding: 10px 0;
     background: url("main_bg_1.png") left top repeat-y;
     width: 990px;
}

/** =H
*
*   @section    Seiten-Elemente
*   =========================================================
*
*   @note       Gedicht, Boxen, Tabellen, Zitate...
*/

/**
*	@subsection Gedicht - Kopfbereich
*	=================================
*/

#poem{
	 margin: 20px 0 0 332px;
	 position: absolute;
}

#header .poem {
	 margin-bottom: 0px;
	 font-size: 1.2em;
	 vertical-align: top;
	 text-align: center;
	 color: #e3e3e3;
}

#header .big {
	 font-size: 1.4em;
	 margin-bottom: 9px;
}

#header #poem .distance {
	 margin-bottom: 9px;	
}

/** 
*   @subsection Navigation
*   ======================================================
*/

/**
*   @note 1. Ebene 
*   ==============
*/

#topnav {
     position: relative;
     top: 0px;
     left: 15px;
     background-image: url("topnav_bg.jpg");
     background-repeat: repeat-x;
     font-family:"Trebuchet MS","Bitstream Vera Sans", sans;
     width: 960px;
     height: 39px;
     z-index: 60;
}

#topnav ul {
     position: absolute;
     top: -22px;
     width: 100%;
     display: inline;
     padding-top: 30px;
     padding-left: 65px;               /* horizontale box-g-content Position der ersten Menueebene*/
}

#topnav li {
     display: inline;
}

#topnav a {
	 margin: 0 1px;
     padding: 10.2px 10.8px 9px;            /* mittlerer Wert für den Abstand der Menueeinträge der ersten Ebene */
     text-decoration: none;
     font-size: 1em;
     color: #272727;
     letter-spacing: 0.082em; 
}

#topnav .current {
     background: url("mainnav_bg_current.jpg") bottom right repeat-x;
     margin: 0 -1px;
     padding: 9.2px 11.8px 11px;            /* mittlerer Wert einen px mehr als für topnav a ? */
     font-size: 1em;
     color: #272727;
     letter-spacing: 0.082em;
     border-right: 1px solid #a7a7a7;
     border-left: 1px solid #a7a7a7;
}

#topnav .active {
	 margin: 0 -1px;
     background: url("mainnav_bg_current.jpg") bottom right repeat-x;
     padding-top: 9.2px;
     padding-bottom: 11px;
     font-size: 1em;
     color: #272727;
     letter-spacing: 0.082em;
     border-right: 1px solid #a7a7a7;
     border-left: 1px solid #a7a7a7;
}

#topnav a:hover {
     background: url("topnav_bg_hover.jpg") top left repeat-x;
}

#topnav .active a:hover {
     background: none;
     text-decoration: underline;
}


/**
*   @note 2. Ebene 
*   ==============
*/

#topnav-second-level {
	 font-size: 0.93em;
	 height: 30px;
     background: url("topnav_secondlevel_bg.png") bottom left no-repeat;
}

#topnav-second-level ul {
     padding-top: 4px;
     padding-left: 82px;           /* horizontale box-g-content Position der zweiten Menueebene*/
}

#topnav-second-level li {
     display: inline;
}

#topnav-second-level a {
     padding: 0px 10.8px;            /* mittlerer Wert für den Abstand der Menueeinträge der zweiten Ebene */
     text-decoration: none;
     font-size: 0.93em;
     color: #272727;
}

#topnav-second-level .current {
     color: #fff;
     font-size: 0.93em;     
     padding: 0px 10.8px;
}

#topnav-second-level a:hover {
     text-decoration: underline;
}

/**
*   @subsection Kontaktformular
*   ====================
*/

.button{
     font-size: 11.5px;
     text-align:center;
     padding-left:0px;
     padding-top:2px;
     padding-bottom:2px;
     font-weight:bolder;
     color:black;
     cursor:pointer;
     display:inline;
     height: 28px;
     width:110px;
}

.text{
     padding: 2px;
     background-color: #d8d8d7;
     color: #4d6f89;
     border: 1px solid #7B7B7B;
}

.select{
     background-color: #d8d8d7;
     color: #4d6f89;
}

.text-rechts {
    text-align: right;
}

.stern {
    font-size: 0.75em;
    vertical-align: super;
}


label {
    display: block;
    padding-top: 10px;
    font-size: 0.97em;
}

label.label-stern {
    padding-top: 5px;
}

textarea {
     font-size: 1.2em;
}

/**
*   @subsection Bestellformular
*   ====================
*
*   @note: site: Downloads und Informationsmaterial
*/

ol.download li {
     list-style-image: none;
     list-style-type: decimal;
     margin: 0px 0 5px -23px;
     font-size: 1em;
}

#bestellformular fieldset {
	 margin-top: 10px;
     width: 96%;
     padding: 10px;
}

.bestellformular label.abstand-links {
    display: inline;
    padding-left: 35px;
}

.bestellformular label.label-float {
    display: block;
    float: left;
    width: 100px;
    clear: both;
    margin-top: 0px;
    padding-left: 30px;
    font-size: 0.97em;
}

.bestellformular .input-bestellung {
     margin-left: 30px;
}

.bestellformular input {
    margin-top: 8px;
}

.bestellformular input.input-abstand {
    margin-top: 38px;
}


/**
*   @subsection Hauptinhalt
*   =======================
*
*   @note Spalte: Hauptinhalt
*/

#content {
     margin: 3px 0 0 15px;
     padding: 10px 0px 10px 25px;
     float: left;
     width: 630px;
     background:url("TraseyoWeb1.gif") 20px 0px no-repeat;
}

/**
*   @subsection Marginale
*   =====================
*/

#margi {
	 margin: -15px 25px 10px 0;
	 padding: 0px 0px 10px 0px;
	 width: 230px;
     float: right;
}

.ohne-logo {
     margin-top: 57px;
}

/**
*   @subsection Fussbereich
*   =======================
*/

#footer {
     margin: 0 0 10px 25px;
     background: url("footer_bg.png") top left no-repeat;
     height: 28px;
     z-index: 20;
     clear: both;
}

#footer p {
     text-align: center;
     font-size: 0.9em;
}

#footer a {
     color: #272727;
}

#footer-left {
     position: relative;
     background: url("footer_bg_left.jpg") bottom left no-repeat;
     height: 28px;
     z-index: 30;
     clear: both;
}