@charset "UTF-8";

/**
 * Basic layout
 * @project orgaplus Homepage
 * @version 1.0
 * @author Udo Rau <rau@orgaplus.de>
 * @copyright orgaplus Software GmbH
 */


/**
 * Basic structure
 * @section layout
 */
 
/* float/clear, position, top-left-right-bottom, width/min-width, height/min-height, margin, padding, display, white-space */ 


html,body { height: 100%; }
body      { width: 100%; margin: auto; padding: 0; }

#mainWrap        { margin: auto; min-height: 100%; }
* html #mainWrap { height: 98%; } /* iehack */

/* [START] Der logoWrap enthält jetzt die komplette obere Zeile */
#logoWrap              { position: fixed; width: 100%; margin-left: 0; z-index:888;}
#logoWrap_imgContainer { float: left; width: 109px; height: 90px;  margin: 0; padding: 0.5em; }

#description           { width: 100%; padding: 42px 0 0 145px; }

#metaWrap              { width: 100%; margin: 0; padding: 0.5em 0 0 145px; }
#brotkrumennavi        { float:left; width: 30%; }
#metaMenuWrap          { float:right; width:50%; padding-right: 150px; }
ul#meta                { margin: 0; padding: 0; display: inline; }
ul#meta li             { padding: 0.2em 0.2em 0 0.2em; display: inline; white-space: nowrap; }
ul#meta li a           { padding: 0 3px; }

#bannerWrap            { clear: both; padding-bottom: 0.2em; }
/* [ENDE] Der logoWrap enthält jetzt die komplette obere Zeile */

#mainNavWrap           { clear: both; position:fixed; top: 115px; left:0; width:180px; margin: 0 0.5em; z-index:999;}
#main1NavWrap          { clear: both; margin: 0; padding: 0 0 1em 0.5em; display: block; }


#mainContent   { clear: both; min-height: 25em; padding: 180px 230px 3em 200px; margin: 0; }
#mainContent p { padding: 0 0.5em 0 0.5em; }

#contentRight  { position: fixed; top: 110px; right: 0px; width: 220px; margin: 0 0.5em; z-index:999;}

#footerWrap    { bottom: 0; left: 0; margin: 0.5em 0.5em 0.5em 24em; padding: 1px; width: 75%; }



/**
 * Klassen der Links der Hauptnavigation
 * @section mainMenuLinks
 */


/***************************/
/* Menüs erster Hierarchie */
/***************************/
.m1  { padding: 0px; margin: 0px; margin-top: 15px; }
.m1b { padding: 0px; margin: 0px; margin-top: 15px; } /* active */
.m1c { padding: 0px; margin: 0px; margin-top: 15px; } /* over */

/* Menüs zweiter Hierarchie */
.m2  { padding: 0px; padding-top: 2px; }
.m2b { padding: 0px; padding-top: 2px; } /* active */
.m2c { padding: 0px; padding-top: 2px; } /* over */

/* Menüs dritte Hierarchie */
.m3  { padding: 0px; padding-top: 1px; }
.m3b { padding: 0px; padding-top: 1px; } /* active */
.m3c { padding: 0px; padding-top: 1px; } /* over */

/* Menüs vierte Hierarchie */
.m4  { padding: 0px; }
.m4b { padding: 0px; } /* active */
.m4c { padding: 0px; } /* over */

/* Menüs fünfte Hierarchie */
.m5  { padding: 0px; }
.m5b { padding: 0px; } /* active */
.m5c { padding: 0px; } /* over */






/**
 * Typo3-spezifische Layouts
 * @section Typo3-layouts
 */

.layout-0     { padding: 0 1em; }
.layout-1     { padding: 0 1em; }
.layout-1 IMG { padding: 0.3em; margin: 0px auto; }
.layout-2     { padding: 0; }
.layout-3     { padding: 0 1em; }



/**
 * FCE-Elemente
 * @section fce
 */

/* Für die 2-spaltigen FCEs */
.fceLeftWrap  { float: left;  width: 50%; }
.fceRightWrap { float: right; width: 50%; }
/* layout-0 ist für die weiterführenden Links */
/* layout-1 ist bspw. für orgaplus-Listen */
.layout-1 .fceLeftWrap      { padding: 0; margin: 0; }
.layout-1 .fceRightWrap     { padding: 0; margin: 0; }
.layout-1 .fceLeftWrap IMG  { padding: 0; margin: 0; }
.layout-1 .fceRightWrap IMG { padding: 0; margin: 0; }
/* layout-2 ist bspw. für normalen zweispaltigen Text mit grauem Hintergrund */
.layout-2 .fceLeftWrap       { float: left;  width: 49%; padding: 0; margin: 0; }
.layout-2 .fceRightWrap     { float: left;  width: 49%; padding: 0; margin: 0; margin-left:0.3em;}
.layout-2 .fceLeftWrap IMG  { padding: 0; margin: 0; }
.layout-2 .fceRightWrap IMG { padding: 0; margin: 0; }


/* Für die 3-spaltigen FCEs */
.fceLeftWrap3   { float: left;  width: 33%; }
.fceMiddleWrap3 { float: left;  width: 33%; }
.fceRightWrap3  { float: right; width: 33%; }
/* layout-0 ist für die weiterführenden Links */
/* layout-1 ist bspw. für orgaplus-Listen */
.layout-1 .fceLeftWrap3        { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap3      { padding: 0; margin: 0; }
.layout-1 .fceRightWrap3       { padding: 0; margin: 0; }
.layout-1 .fceLeftWrap3 IMG    { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap3 IMG  { padding: 0; margin: 0; }
.layout-1 .fceRightWrap3 IMG   { padding: 0; margin: 0; }

/* Für die 4-spaltigen FCEs */
.fceLeftWrap4     { float: left;  width: 25%; }
.fceMiddleWrap1_4 { float: left;  width: 25%; }
.fceMiddleWrap2_4 { float: left;  width: 25%; }
.fceRightWrap4    { float: right; width: 25%; }
/* layout-0 ist für die weiterführenden Links */
/* layout-1 ist bspw. für orgaplus-Listen */
.layout-1 .fceLeftWrap4         { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap1_4     { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap2_4     { padding: 0; margin: 0; }
.layout-1 .fceRightWrap4        { padding: 0; margin: 0; }
.layout-1 .fceLeftWrap4 IMG     { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap1_4 IMG { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap2_4 IMG { padding: 0; margin: 0; }
.layout-1 .fceRightWrap4 IMG    { padding: 0; margin: 0; }

/* Für die 5-spaltigen FCEs */
.fceLeftWrap5     { float: left;  width: 20%; }
.fceMiddleWrap1_5 { float: left;  width: 20%; }
.fceMiddleWrap2_5 { float: left;  width: 20%; }
.fceMiddleWrap3_5 { float: left;  width: 20%; }
.fceRightWrap5    { float: right; width: 20%; }
/* layout-0 ist für die weiterführenden Links */
/* layout-1 ist bspw. für orgaplus-Listen */
.layout-1 .fceLeftWrap5         { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap1_5     { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap2_5     { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap3_5     { padding: 0; margin: 0; }
.layout-1 .fceRightWrap5        { padding: 0; margin: 0; }
.layout-1 .fceLeftWrap5 IMG     { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap1_5 IMG { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap2_5 IMG { padding: 0; margin: 0; }
.layout-1 .fceMiddleWrap3_5 IMG { padding: 0; margin: 0; }
.layout-1 .fceRightWrap5 IMG    { padding: 0; margin: 0; }








/**
 * Layout classes
 * @subsection layout-classes
 */
.csc-default{ margin:0; padding:0; }


.clearfix:after { content:"."; display:block; width:100%; clear:both; height:0; visibility:hidden; }
.clear { display:block; clear:both; }
.cl { display:block; clear:left; }
.cr { display:block; clear:right; }
.left { text-align:left; }
.right { text-align:right; }
.center { text-align:center; }
.fl { float:left; }
.fr { float:right; }
.fc { float:none; margin:0 auto; }
.fl-margin { float:left; margin:0 36px 0 12px; }
.fr-margin { float:right; margin:0 12px 0 36px; }
.fv-margin { float:right; margin: 0 12px 0 50px !important;}


/**
 * Sonstiges (noch nicht sortiert)
 * @subsection sonstiges
 */
.presse_vorschaubild { height:150px; width:100px; }

/* Dateilinks */
.csc-uploads-1   { margin-left: auto; margin-right: auto; }
.csc-uploads-1 p { margin: 0; padding: 0; }

/* Kontaktformular */
#mailform { width: 50%; margin-left: auto; margin-right: auto; }


.csc-textpic-imagewrap { margin: 0px auto; }




/**
 * Layout für kleine Anzeigen
 * @subsection small displays
 */
/* @media all and (orientation:portrait) {} */
 
/* @media all and (orientation:landscape) {} */
 
 
/* @media only screen and (min-device-width: ???px) and (max-device-width: 940px) { */
 /* Hier der CSS Code für Smartphones wie z.B. iPhone, Android, WebOS, Windows Phone 7 Geräte o.Ä. */
@media only screen and (max-device-width:1100px) {

   #headerWrap  { position: static; }
     #logoWrap        { position: static; width: 100%; margin-left: 0; z-index:100; }
     #description     { position: static; width: 80%; padding: 42px 0 0 145px; }
     #metaWrap        { position: static; width: 100%; margin: 0; padding: 0.5em 0 0 265px; z-index:100; }
     #brotkrumennavi  { position: static; float:none; width: 100%; padding: 0 0 0 120px; display: block; z-index:100; }
     #metaMenuWrap    { position: static; float:none; width: 100%; padding: 0 0 0 120px; display: block; z-index:100; }

     ul#meta          { margin: 0; padding: 0; display: inline; }
     ul#meta li       { padding: 0.2em 0.2em 0 0.2em; display: inline; white-space: nowrap; }
     ul#meta li a     { padding: 0 3px; }
     #bannerWrap      { clear: both; padding: 0 0.2em 0 240px; display: block; z-index:100; }

   #boxWrap     { position: absolute; top: auto; left: 0; width:360px; margin: -150px 0 0.5em 0; padding: 0.5em 0; z-index:999; }
     #mainNavWrap     { position: static; top: 0; left: 0; width:100%; margin: 0; }
     #contentRight    { position: static; top: 0; left: 0; width:100%; margin: 0; padding: 0; }

   #contentWrap { position: relative; top: auto; min-height: 25em; padding: 0.5em 0.5em 3em 380px; margin: 0; }
   #mainContent { position: static; top: 0; min-height: 0; padding: 0; margin: 0; }
   #footerWrap  { position: static; bottom: auto; left: 0; width: 95%; margin: 0.5em auto; padding: 1px; }
   
}
 
/* Computer und Tablet CSS */
/* Hier der CSS-Code für Tablets und Computer ab einer mindest Bildschirm Weite von 800 Pixeln */
/* @media only screen and (min-device-width: 800px) {} */

/* Hier der CSS-Code speziell für das iPad */
/* @media only screen and (device-width: 768px) {} */
 
/* Hier der CSS-Code speziell für das iPad im Portrait Modus */
/* @media only screen and (device-width: 768px) and (orientation:portrait) {} */




/*******/
/* EOF */
/*******/