/*******************************************************************************
    GRID CSS FOR TEMPLATE FRAMEWORK 
    
    Author: $Author: evbmn $
    Version: $Rev: 2371 $ - $Date: 2011-04-27 09:27:59 +0200 (Mi, 27 Apr 2011) $ - $HeadURL: http://be-subversion.eu.schering.net/svn/webkit/TemplateFrameWork/trunk/TeamsiteBranches/NewBranch/static/css/grid.css $
    $Id: grid.css 2371 2011-04-27 07:27:59Z evbmn $
    
    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#contents {
    float:left;
}

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

body div#contents 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#contents div#grid { /* very important to use this selector due to CSS specifity */
    background-color: transparent;
    padding: 0;
}

body div#contents div#grid div.patch { /* fixed width */
    overflow:hidden !important;
}

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

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

body div#contents div#grid div.size1,
body div#contents div#grid div.size2,
body div#contents 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#contents div#grid div.size1 {
	width: 12.1875em !important; /* 195px@font-size:16px */
}

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

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

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

body div#contents div#grid div.size3 {
/* uses complete width of container */
	width: 37.1875em !important;
}

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

body div#contents 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#contents 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#contents.homepage div.illu {
    width:49.0625em;
}

* html body div#contents div#grid {
    z-index: 1;
}

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

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

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

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

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

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

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


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

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

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

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

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

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