/**
*
* @note                           the layout library
* 
* @appdef                         semigator
* @app-myapp-theme  
* @app-myapp-used                 True
* @media                          screen
* @valid                          true
* 
* @author                         Alp Uçkan
* @version                        1.0
* @link                           http://www.semigator.de/
*
*
* main layout elements:
*
* @layout-width                   980px   81,667em        100%
* @layout-padding-macro            16px    1.333em          1.633%
* @layout-padding-micro             7px     .583em           .714%
* @layout-margin-bottom            10px     .833em          1.020%
* @layout-margin-right             12px    1.000em          1.224%
*
* @layout-sidebar-width           184px    15.333em        18.776%
*
*
* content elements:
*
* @content-widthfap3col1          561px                    57.215%
* @width-fap2cCol1                470px                    47.959%
* @width-fap1cCol1                                         97.143%
*
* seminar detail page (66:33):
*
* @content-widthfap2t1Col1        636px                    64.898%
* @width-fap2t1Col2               314px                    32.040%
*
*
*/


/**
* @section                        html elements
*/

#Canvas                           { width: 100%; overflow: hidden; }
#Canvas .corset                   { width: 100%; min-width: 1010px; max-width: 1010px; margin: 0 auto; }

/**
* @section                        faux absolute positioning
*/

.screen                           { float: left; position: relative; width: 100%; display: block; }
.section                          { float: left; position: relative; left: 100%; }

.limitedWidth                     { margin: auto; width: 700px; text-align: left; }

/**
* @section                        3 Cols, FAP
*/

.fap3cCol1                        { margin-left: -78.367%; width: 57.215%; }
.fap3cCol2                        { margin-left: -98.367%; width: 18.776%; }
.fap3cCol3                        { margin-left: -20.000%; width: 18.776%; }

/**
* @section                        2 Col, FAP
*/

.fap2cCol1                        { margin-left: -98.367%; width: 47.959%; }
.fap2cCol2                        { margin-left: -49.184%; width: 47.959%; }

/**
* @section                        1 Col, FAP (100% width)
*/

.fap1cCol1                        { margin-left: -98.367%; width: 97.143%; }

/**
* @section                        2 Col, FAP (80:20)
*/

.fap2d1Col1                       { margin-left: -98.367%; width: 77.215%; }

/**
* @section                        2 Col, FAP (66:33)
*/

.fap2t1Col1                       { margin-left: -98.367%; width: 64.898%; }
.fap2t1Col2                       { margin-left: -31.836%; width: 30.203%; }
.fap2t1Col2                       { margin-left: -31.836%; width: 32%; }

/**
* @section                        3 Col, FAP (20:47:33)
* fap3cCol2
* fap3t1Col1
* fap2t1Col2
*/

.fap3t1Col1                       { margin-left: -78.367%; width: 44.898%; }

/**
* @section                        2 Col, FAP (20:80)
*/

.fap1d2Col1                       { margin-left: -78.367%; width: 77.215%; }

/**                                       
* @section                        float classes
*
*                                 Example markup 1 (float left/right, no width):
*                                 
*                                 <div class="scf">
*                                   <div class="flL">
*                                     left floated content
*                                   </div> <!-- /flL -->
*                                   <div class="flR">
*                                     right floated content
*                                   </div> <!-- /flR -->
*                                 </div> <!-- /scf -->
*                                 
*                                 Example markup 2 (float left/right 50/50):
*                                 
*                                 <div class="scf">
*                                   <div class="c2-1">
*                                     50% width; left side
*                                   </div> <!-- /c2-1 -->
*                                   <div class="c2-2">
*                                     50% width; right side
*                                   </div> <!-- /c2-2 -->
*                                 </div> <!-- /scf -->
*                                 
*                                 Example markup 3 (float left/left/right 33/33/33):
*                                 
*                                 <div class="scf">
*                                   <div class="c3-1">
*                                     33% width; left side
*                                   </div> <!-- /c3-1 -->
*                                   <div class="c3-2">
*                                     33% width; middle
*                                   </div> <!-- /c3-2 -->
*                                   <div class="c3-3">
*                                     33% width; right side
*                                   </div> <!-- /c3-3 -->
*                                 </div> <!-- /scf -->
*
*/                                

.flR                              { float: right; }
                                  
.flL,                             
.c2-1,                            
.c2-2,                            
.c3-1,                            
.c3-2,                            
.c3-3,                            
.c4-1,                            
.c4-2,                            
.c4-3,                            
.c4-4                             { float: left; }
                                  
/**                               
* @section                        2 cols (float)
*/                                
                                  
.c2-1,                            
.c2-2                             { width: 50%; }
                                  
/**                               
* @section                        3 cols (float)
*/                                
                                  
.c3-1,                            
.c3-2,                            
.c3-3                             { width: 32%; margin-right: 1.3%; }
                                  
/**                               
* @section                        4 cols (float)
*/                                
                                  
.c4-1,                            
.c4-2,                            
.c4-3,                            
.c4-4                             { width: 25%; }
                                  
/**                               
* @section                        layouts based on 'display: inline-block'
*/                                
                                  
.iblock                           { display: -moz-inline-stack; /* <-- this is needed for Firefox2 to display inline blocks */ display: inline-block; vertical-align: top; height: 1%; }

/**
* @section                        2 cols (float) *** DEPRACATED! Please use float classes above ***
*/

.twoColContainer                  { margin-bottom: 1em; overflow: hidden; width: 100%; }
.twoColContainer .col1            { width: 49%; float: left; }
.twoColContainer .col2            { width: 49%; float: right; }
.twoColContainer .col2.right      { text-align: right; }
.twoColContainer .col1.wide,
.twoColContainer .col2.wide       { width: auto; }

/**
* @section                        3 cols (float) *** DEPRACATED! Please use float classes above ***
*/

.threeColContainer                { margin-bottom: 1em; overflow: hidden; width: 100%; }
.threeColContainer .col1          { width: 32.5%; float: left; margin: 0 1% 0 0; }
.threeColContainer .col2          { width: 32.5%; float: left; margin: 0 1% 0 0; }
.threeColContainer .col3          { width: 32.5%; float: left; }
.threeColContainer .cols2and3     { width: 65.0%; float: left; margin: 0 1% 0 0; }

/**
* @section                        Class for limiting content to 50em
*/

.centerLayout                     { width: 100%; max-width: 50em; margin: 0 auto; }