/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Template for designing a screen layout
 * (de) Gestaltungsvorlage für die Erstellung eines Screenlayouts
 *
 * @copyright       Copyright 2005-2009, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.2
 * @revision        $Revision:392 $
 * @lastmodified    $Date:2009-07-05 12:18:40 +0200 (So, 05. Jul 2009) $
 */

@media screen, projection
{
/** 
 * (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera 
 * (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera 
 *
 * @workaround
 * @affected IE8, FF, Webkit, Opera
 * @css-for all
 * @valid CSS3
 */

body { overflow-y:scroll; }

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

/**
 * Design of the Basic Layout | Gestaltung des YAML Basis-Layouts
 *
 * @section layout-basics
 */

/* Page margins and background | Randbereiche & Seitenhintergrund */
body { text-align: center; background: #e2e6f2 url(../../img/body-bg.png) repeat-x  0 0 ;}

/* Layout:Width, Background, Border | Layout:Breite, Hintergrund, Rahmen */
.page_margins { width:  960px; text-align:left; margin: 0 auto; }
.page{ }


#sm {
    display:none!important;
}

#topnav { 
    position: static; 
    color: #7f7f7f; 
    background: transparent; 
    font-size: 85%; 
    padding: 0.9em 0; 
    margin:  0 6px; 
    width:  648px; 
    float: right;
}
#sm {float:left;}
#sm .info {
	display: none !important;
}



/* Design of the Main Layout Elements | Gestaltung der Hauptelemente des Layouts */
#header { height: 226px; position: relative; margin: 0 6px;}

#header .left {position: absolute; left: 0; top: 0; width: 226px; height: 226px;}
#header .center {position: absolute; left: 232px; top: 0; width: 484px; height: 226px;}
#header .right {position: absolute; left: 722px; top: 0; width: 226px; height: 226px; color: #fff; background: #afc816 url(../../img/header-tueddelchen.gif) no-repeat 10px 28px;}

#header #keyvisual-img {position: absolute; left: 232px; top: 0; width: 716px; height: 226px; no-repeat 10px 28px;}

#header .right p {
    text-align: right;
    height:  226px;
    display: table-cell; 
    vertical-align: middle; 
    width: 210px;
    font-weight: bold;
    font-size: 140%;
    line-height: 1.25em;
}

#header .left .box-tl {display: block; position: absolute; left: 0; top: 0; width: 110px; height: 110px; background: #04579c url(../../img/logo-part1.png) no-repeat 16px 26px;}
#header .left .box-tr {display: block; position: absolute; right: 0; top: 0; width: 110px; height: 110px; background: #04579c url(../../img/logo-part2.png) no-repeat 23px 25px;}
#header .left .box-bl {display: block; position: absolute; left: 0px; bottom: 0; width: 110px; height: 110px; background: #afc816;}
#header .left .box-br {display: block; position: absolute; right: 0px; bottom: 0; width: 110px; height: 110px; background: #87a0cb;}

#nav {
    position: relative; 
    margin: 6px; 
    background: transparent url(../../img/nav-bg.gif) no-repeat left center;
    } 

#main { 
    padding: 20px 6px 0 6px;
    background: #fff url(../../img/col1-bg.png) no-repeat 6px 0px;
    width: 948px;
    float: left;
 }
 
.startseite #main {
    padding-top: 0;
}
 
#footer {
    width: 100%;
    background: #f5f5f5;
    border-top: #c1c2c3 dotted 1px;
}


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

/**
 * (en) Formatting content container
 * (de) Formatierung der Inhalts-Container
 *
 * |-------------------------------|
 * | #header                       |
 * |-------------------------------|
 * | #col1   | #col3     | #col2   |
 * | 226px   | 496px     | flexible|
 * |-------------------------------|
 * | #footer                       |
 * |-------------------------------|
 */


#col1 { width: 226px; margin: 0;}
#col2 { width: 496px; float:left; margin: 0;}
#col3 { margin-left: 722px; margin-right: 0; }

#col1_content { margin: 0; padding: 0 }
#col2_content { margin: 0 22px; padding: 0;}
#col3_content { margin: 0; padding: 0; border-left: #c1c2c3 dotted 1px; }


/**
 * 
/*------------------------------------------------------------------------------------------------------*/
 
/**
 * @section generic classes for layout switching
 * @see layout-main
 *
 * .hidecol-R -> 2-column-layout (using #col1 and #col2)
 * .hidecol-L -> 2-column-layout (using #col2 and #col3)
 * .hideboth -> single-column-layout (using #col2)
 */

 #main.hideboth,
 #main.hidecol-L {background: #fff;}
 
.hideboth #col2 { margin-left: 0; margin-right: 0; width: 100%;}

.hideboth #col2_content { margin: 0;}

.hidecol-R #col2 { 
    float: right; 
    margin-right: 0; 
    margin-left: -5px; 
    width: 722px;     
    }

.hidecol-L #col2 { width: 722px;}

.hideboth #col1, 
.hideboth #col3, 
.hidecol-L #col1, 
.hidecol-R #col3 { display:none; }


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

/**
 * Design of Additional Layout Elements | Gestaltung weiterer Layoutelemente
 *
 * @section layout-misc
 */
  
#header h1 {
    margin: 0;
    padding: 0;
    text-indent: -1000em;
    font-size: 100%;
    line-height:  1em;
}

.gfx-pageheader {
    margin:0.5em 0 1em 0;
    text-indent:  -10000em;
}


/* Colorbox Pluszeichen */

a.colorbox {
    position: relative;
    display: block;
}

a.colorbox div {
    position: absolute;
    left: 0;
    bottom: 14px;
    width: 17px;
    height: 13px;
    background: green url(../../img/click-enlarge.png) no-repeat left bottom;
}

DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image a.colorbox div {
    bottom: 0px;
}
  
/**
 * ------------------------------------------------------------------------------------------------- #
 *
 * Skiplinks 
 *
 * (en) Visual styling for skiplink navigation
 * (de) Visuelle Gestaltung der Skiplink-Navigation
 *
 * @section content-skiplinks
 */
 
#skiplinks a.skip:focus,
#skiplinks a.skip:active { 
  color:#fff; 
  background:#333; 
  border-bottom:1px #000 solid;
  padding:10px 0;
  text-decoration:none;
}



}