/*******************************************************************************
    GRID CSS FOR TEMPLATE FRAMEWORK 
    
    Author: $Author: EQEEE $
    Version: $Rev: 1222 $ - $Date: 2009-12-15 18:29:53 +0100 (Di, 15 Dez 2009) $ - $HeadURL: http://be-subversion.eu.schering.net/svn/webkit/TemplateFrameWork/trunk/TeamsiteBranches/NewBranch/html/css/grid.css $
    $Id: grid.css 1222 2009-12-15 17:29:53Z EQEEE $
    
    adopted by eqeee (juri.leino@bayerhealthcare.com)
    GRID CSS FOR BHC CORPORATE SITES 
    from bexcc (xavier.colomesfornos@bayerbbs.com)

    In the grid we have BOXES of 1 or 2 or 3 blocks size. This is achieved 
    by inserting the class "size1", "size2" or "size3". 
    To make a box 2 rows high, insert the class "rows2".
    Make it 3 rows high by using "rows3". 
    A div with class attribute of "patch size2 rows2"
    renders a box of 2 by 2 blocks

    Most of the styles override old stylessheets, 
    therefore they have to be "!important". 
    TODO: Remove them by finding the correct depth and specificity

    The order of the block define the float (l/r) and the final layout.
    If you want to add another teaser or "patch" in a row use "left" or "right"
    classes.
    Example:
    <div class="patch size1 left"></div><div class="patch size2 left"></div>

*******************************************************************************/


/******************************************************************************/
/* BOX FLOATS */
/******************************************************************************/

body div#content div#grid div.left {
	float:left;
}

body div#content div#grid div.right {
	float:right;
}

/******************************************************************************/
/* COMMON STYLES FOR ALL BOXES */
/******************************************************************************/

body div.str {
	padding-top:0 !important; /* to remove old styles */
}


html body div#content div#grid { /* very important to use this selector due to CSS specifity */
	background-color: transparent;
    margin-left: 11.25em; /* 170+10 = 180px@font-size:16px */
    margin-top:0.6875em;
	padding: 0;
	width: 38.4375em; /* add 10px of patch's right-margin to width => 615px@font-size:16px */
}

body div#content div#grid div.patch { /* fixed width */
	overflow:hidden !important;
	margin:0 .625em .625em 0;	
}

body div#content div#grid div.patch h2,
body div#content div#grid div.patch p,
body div#content div#grid div.patch div  {
	margin:.5em 0;
}

/******************************************************************************/
/* single height BOXES */
/******************************************************************************/

body div#content div#grid div.size1,
body div#content div#grid div.size2,
body div#content div#grid div.size3 {
	height:12.1875em !important; /* 195px@font-size:16px */
	min-height:10.9375em !important; /* 175px@font-size:16px */
/*	better omit padding here, for easier size measurement without the need to 
    subtract padding
    -> add padding to container or all children of patches/tiles 
    padding:.625em !important;	
*/    
    /* 10px@font-size:16px */
}

/******************************************************************************/
/* single width BOX */
/******************************************************************************/

body div#content div#grid div.size1 {
	width: 12.1875em !important; /* 195px@font-size:16px */
}

/******************************************************************************/
/* double width BOX */
/******************************************************************************/

body div#content div#grid div.size2 {
	width: 25em !important; /* 400px@font-size:16px */
}

/******************************************************************************/
/* triple width BOX */
/******************************************************************************/

body div#content div#grid div.size3 {
	width: 37.8125em !important; /* 605px@font-size:16px */
}

/******************************************************************************/
/* DOUBLE HEIGHT BOXES */
/* NOTE: 2x2 boxes are size2 + col boxes */
/******************************************************************************/

body div#content div#grid div.rows2 {
	height: 25em !important; /* 400px @16px fontsize */
	min-height: 25em !important; /* 400px @16px fontsize */
}

/******************************************************************************/
/* TRIPLE HEIGHT BOXES */
/* NOTE: only 1x3 boxes are style guide compliant (2x3 or even 3x3 are not) */
/******************************************************************************/

body div#content div#grid div.rows3 {
	height: 37.8125em !important; /* 605px @16px fontsize */
	min-height: 37.8125em !important; /* 605px @16px fontsize */
}


/******************************************************************************/
/* IE6 hacks  */
/******************************************************************************/
/* to fit the world famous box model in IE6 */

* html body div#content.homepage div.illu {
    width:49.0625em;
}

* html body div#content div#grid {
	width:37.8125em;
    z-index: 1;
}

* html body div#content div.tools h6 {
    width: 15.5em !important;
    margin: 0 !important;
}

* html body div#content div.tools {
	margin: 1.666em 0 0 0 !important;
    padding: 0 !important;
	width: 14.9em;
    z-index: 10;
}

* html body div#content div#grid div.size1,
* html body div#content div#grid div.size2,
* html body div#content div#grid div.size3 { 
	height:12em;
}

* html body div#content div#grid div.size1 { 
	width:12em;
}

* html body div#content div#grid div.size2 { 
	width:24em;
}

* html body div#content div#grid div.size3 { 
	width:36em;
}

* html body div#content div#grid div.rows2 { 
	height:24em;
}

* html body div#content div#grid div.rows3 { 
	height:36em;
}

/******************************************************************************/
/* DEBUG MODE */
/******************************************************************************/
/* to use insert class debug in the body */


* html body.debug div#content div.tools {
	background-color:#FEE !important;
}

body.debug div#content div#grid {
	background-color:#EEE !important;
}

body.debug div#content div#grid div.patch * {
	display:none !important;
}

body.debug div#content div#grid div.size1 {
	background-color:#FFCC00;
}

body.debug div#content div#grid div.size2 {
	background-color:#D9DEE1;
}

body.debug div#content div#grid div.size3 {
	background-color:#C0CECF;
}