/*
	This stylesheet is for styles common to all pages of the web site.
	Styles that are specific to a page should be placed in the specific
	page.
*/


/**
 * The body is assigned values that will affect the whole page. 
 * 1) We set a background bitmap for the browser. 
 * 2) We specify a font-size that is 80% of the default font size (this is not 
 *    recomended as we give a font size that is smaller than the default). This
 *    is only for the "look".
 * 3) We specify the default font for the whole page.
 * 4) We specify that the text for the whole page should be center aligned. 
 *    This is is a patch to center the "div.body" (see below) on the browser. 
 *    The "div.body" returns the the text alignment to its default left value.
 */
body
{
/*	border: thin dotted #800080; *//* for debugging */
	background-image: url(fond2.png);
	font-size: 75%; /* This is not very user friendly */
	font-family: 'trebuchet ms', verdana, arial, helv, sans-serif;
	text-align:center; /* Patch 1 for MS Explorer to center main page */
}


/**
 * Patch 2 for MS Explorer and Opera: Normally, font properties are inherited 
 * from the values specified in the body selector (above). This is not the case 
 * for MS Explorer and Opera. We therefore respecify the font properties for 
 * all elements on the page. Add new selector in the list as needed.
 */
input, textarea, select, table
{
	font-family: 'trebuchet ms', verdana, arial, helv, sans-serif;
	font-size: 100%;
}


/**
 * The div.body is the outer most division and holds everything in the page.
 * 1) The div.body is given a width that is 65 times the height of the default
 *    font. This gives a decent page witdth with a normal font. The page width
 *    is adjusted automatically when the default font is changed.
 * 2) The text alignment is returned to its default left value. This is to
 *    restore the default value that was changed in the body selector (see 
 *    above) to center this division on the browser.
 * 3) For conformant browsers, to center a page, we simply set the left and 
 *    right magins to auto (see patch 1)
 *
 * The div.body contains three regions the div.header, the div.center and the
 * div.footer (see below). Each region sits on top of the other.
 */
div.body
{
	/* border: thin dotted #800080;*/ /* for debugging */
	width: 75em;
	text-align:left; /* patch 1 for MS Explorer */
	margin-left: auto; /* standard way to center page in browser (see patch 1) */
	margin-right: auto; /* standard way to center page in browser (see patch 1) */
}


/**
 * The header contains only the MechaTools logo.
 */
div.header 
{
	background-color: white;
	background-image: url(entete-back2.gif); /* Fail FF IE OP */
	background-repeat: no-repeat;
	background-position : center right;
}

div.header img { /* ratio 4.63 (463px x 100px)*/
/*	width: 46.3em;
	height: 10em;*/	
}

/**
 * The div.center region is given a wide blue margin on both sides and a narrow
 * blue margin at the bottom. It is given a background image that we see on the
 * left because of a padding of 10em (15%). The rest of the background image is 
 * covered by two regions:
 *
 * 1) The menu (div.menu)
 * 2) The data (div.data)
 */
div.center 
{
	background-image: url(packgrnd-new3.gif);
	border-color: #3399FF;
	border-style : solid;
	border-top-width : 0px;
	border-right-width : 0.5em;
	border-left-width : 0.5em;
/*	border-right-width : 7px;
	border-left-width : 7px;*/
	border-bottom-width : 1px;
	padding-left : 10em; /*	patch 3 for MS Excporer this should be: padding-left: 15%; */
	
}

/**
 * The footer hold the copyright.
 * 1) The copyright text is centered.
 * 2) The copyright text is white.
 * 3) The background color is silver.
 */
div.footer 
{
	text-align:center;
	color: white;
	background-color: silver;
}


/**
 * The data region has 
 * 1) A thin red top border
 * 2) Padding (10px) all around so the text is not touching the border.
 * 3) A background color white (and a foreground black)
 * 
 * the data holds the main title and is then sub divided in three regions:
 * 1) The left  (div.dataLeft)
 * 2) The right (div.dataRight)
 * 3) The clear (div.clear)
 */
div.data
{
	border-style : solid;
	border-top-width : 0px;
	border-right-width : 0px;
	border-left-width : 0px;
	border-bottom-width : 0px;
	padding : 1px; /* Patch 4 for FireFox white background becomes transparent otherwise */
	padding-top : 1em; /* Patch 5 for MS Explorer fix the vertical position of header */
	background-color: White;
	color: Black;
}


/**
 * Define a header style.
 * 1) The font size is set to 100% which reduces the default h1 font size.
 * 2) The font color is set to dark blue.
 * 3) The height of the box holding the header is set to 49px i.e. the height 
 *    of the background image.
 * 4) A gif is used as a backgroud.
 */
h1
{
	font-size: 120%;
	color: #000080;
/*	border: thin dotted #800080;*/ /* for debugging */
	height: 49px;
	background-image: url(bg-head-new3.gif); /* 475*49*/
	background-repeat: no-repeat;
	background-position : left;
/*	padding: 0em;*/
/*	padding-bottom: 50px;*/
	margin: 1em;
}

h2
{
	font-size: 110%;
	color: #000080;
/*	border: thin dotted #800080;*/ /* for debugging */
/*	height: 49px;*/
/*	padding: 0em;*/
/*	padding-bottom: 50px;*/
/*	margin: 1em;*/
}

/**
 * This div contains information that should be displayed in left hand side of
 * the div.data below the main title. This column width represents 60% of the 
 * area. Because of a MS Explorer bug, we must use "em" units instead of %. We
 * use the float left property to move the column to the left of div.dataRight.
 */
div.dataLeft
{
	margin : 1em;
/*	border: thin dotted #800080; */
	width: 35em; /*	Patch 3 for MS Excporer this should be: width: 60%; */
	float: left;
}


/**
 * This div contains information that should be displayed in right hand side of
 * the div.data below the main title. This column width represents 40% of the 
 * area. Because of a MS Explorer bug, we must use "em" units instead of %. This
 * colum will be placed to the right of div.dataLeft because of the float 
 * property.
 */
div.dataRight
{
	margin : 1em;
/*	border: thin dotted #800080;*/
	width: 23em; /*	patch 3 for MS Excporer this should be: width: 40%; */
	float: left;
}


/**
 * This div.clear is just a place holder for the clear property. This grows the 
 * surrounding box to the maximum size of dataRight and dataLeft.
 */
div.clear
{
	clear: both; 
}

/**
 * For links to look like blue buttons
 */
a.button {
	font-weight: bold;
	font-size: 90%;
	padding: 0em 0.5em;
	text-decoration: none;
	color: white;
	background-color: #0157BF;
	border-top: 2px #cce3ff solid;
	border-left: 2px #cce3ff solid;
	border-bottom: 2px #31557f solid;
	border-right: 2px #31557f solid;
	
}

/**
 * For links to look like blue buttons
 */
a.button:hover {
	background-color: #1B90DF;
	border-top: 2px #31557f solid;
	border-left: 2px #31557f solid;
	border-bottom: 2px #cce3ff solid;
	border-right: 2px #cce3ff solid;
}

em {
	color : red;
}

/**
 * For images that may be enlarged by clicking on them
 */
img.enlargeable {
	width : 100%;
	border : 2px;
}
/**
 * For the movie image for interactive demo
 */
img.movie {
	float:left; 
	margin: 2px;
}

div.movie {
	clear: both;
}