/*******************************************************************************
    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#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: 0.5em;	
}


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

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

body div#contents div#grid div.patch h2,
body div#contents div#grid div.patch p,
body div#contents div#grid div.patch div  {
}

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

body div#contents div#grid div.size1,
body div#contents div#grid div.size2,
body div#contents div#grid div.size3 {

}

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

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

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

body div#contents div#grid div.size2 {
	width: 405px;
}

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

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

/******************************************************************************/
/* 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 */
}

/******************************************************************************/
/* 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;
}