/* CSS Document */
html{
font-size:100%;
}

body {
	margin: 0;
	text-align: center;/*correct IE bug */
 	background-color: #898989; /* dark grey background */
 	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.7em;
	color: #FFFFFF;
	height: 100%;
}

span#hide {/*back to graphic version on the text only version - hide on the graphic version*/
	position: absolute;
	top: -1000px;
}



/**************
common tag
**************/


h1{
color:#db001b;
font-size:1.5em;}
h4{
color:#d7001a;
margin-bottom:5px;}
h5{
text-decoration:underline;
margin-bottom:5px;
font-size:1em;

}
/**************
general class
**************/


/**************
main structure
**************/


div#header {
	height: 105px;
	width: 965px;
	display:block;
	border: 0;
	margin: 0;
	padding: 0;
	padding-left:8px;
}

div#main {
	width: 1077px;
	display:table;/*compulsory to have the content that push the bottom*/
	border: 0;
	margin: 0;
	padding: 0;
	}
#contentAll{
	background-image:url(../Resources/bkg_main.gif);
	background-repeat:repeat-y;
	background-position:left;
}

/* from here be really carefull of size  margin and padding - if a div doesn't have enough space it will go under the other.

quick reminder :
-> FOR ALL BROWSER : width or height = content size + padding + border.
-> FOR IE : width or height = content size including padding and border.

 */
 
div#contentAll{
	position:relative;
	}
 
 div#contentAndRight{ /* div that contains the main content and the right column necessary to allow a background behind the right column - if no background is needed then get rid of it */ 
	float:left;
	width:785px;/* Width of content and right div becarefull of padding and border */
}
 
div#left {
	float:left;
	width: 180px;
	min-height: 400px; /* understood by all browser will set the size to that minimum size if not enough content. IE will need a proper height  */
	height: 100%; /* compulsory for the content to push other bloc down  */
	display:block;
	border: 0;
	margin: 0;
	padding: 0;
}

div#content{/*Bottom link menu*/
	float:left;
	min-height: 400px; /* understood by all browser will set the size to that minimum size if not enough content. IE will need a proper height  */
	height: 100%; /* compulsory for the content to push other bloc down  */
	width:565px;
	display:block;
	border: 0;
	margin: 0;
	padding:20px 30px 20px 40px;

}
#menuTopBanner{
	float:left;
	background-color: #8f8f8f; /* light orange */
	width: 635px; /* if smaller than the main width will stay on the left - if a right align is needed then add : float:right; note that the left div will go up the gap */
	height: 12px;
	display: block;
	border: 0;
	margin: 0;
	padding: 0;
	padding-top:1px;
}
div#right {
	float:left;
	width: 135px;
	min-height: 400px; /* understood by all browser will set the size to that minimum size if not enough content. IE will need a proper height  */
	height: 100%; /* compulsory for the content to push other bloc down  */
	display:block;
	margin: 0;
	border: 0;
	padding: 0;
	padding-left:15px;

}

div#footer{/* includes everything:  main div  and footer*/
 	position: relative;/* global div position */
 	margin: auto;
	width: 965px;/* page size */
	height: 20px;
	text-align: left;
	
}



/**************
header class
**************/
#rightTop{
border-top:2px  #FFFFFF solid;
border-bottom:2px  #FFFFFF solid;
height:66px;
display:block;
margin-left:10px;
margin-top:10px;
padding:20px 10px 0px 10px;
float:left;
}


/**************
Menu class
**************/
#menuTopBanner ul li{
display:inline;
padding-left:15px;
}
#menuTopBanner ul li a{
color:#FFFFFF;
}
#menuTopBanner ul li a:hover{
color:#db001b;
}
/** Home **/
div#homeSetUp{
margin-top:5px;
}
div#homeSetUp p{
margin-top:30px;
width:284px;
color:#000000;
}

#imgBox{
margin-top:100px;
}
#imgBox li{
display:inline;
margin-right:5px;
}

/**************
left column class
**************/
#home{
width:153px;
background-color:#db001b;
margin:0px 10px 10px 14px;
color:#FFFFFF;
padding-top:2px;
padding-left:6px;
}

#bottomLeft{
position:absolute;
bottom:10px;
left:10px;
font-size:0.7em;
color:#b0b1b3;
}

/*menu second level*/
#menuSecond{
color:#878889;
line-height:20px;
margin-left:17px;
}

.hide{
display: none;
}


.show{
display: block;
clear: both;
}
.show li{
list-style-image:url(../Resources/menu_List.gif);
list-style-position:outside;
vertical-align:middle;
margin-left:18px;
}

.menu1{
display:block;
cursor: pointer;
color:#878889;
line-height:13px;
font-weight:bold;
font-size:0.5em;
margin-top:7px;
font-variant:small-caps;
}
.menu1:hover{
color: #d7001a;
text-decoration: none;
}
.submenu{
font-size:9px;}

/*bottom images*/

#bottomLeft img{
margin-bottom:20px;
}
.clearAll{
clear:both;}

/**************
main content class
**************/
p.mainPara{
font-size:18px;
color:#878889;
line-height:18px;
}
#content p{

}


/**************
right column class
**************/
#news{
background-image:url(../Resources/bkg_news.gif);
background-repeat:repeat-y;
margin-left:-15px;
padding-left:15px;
padding-top:5px;
padding-bottom:5px;
}

#rightBottom{
margin-top:100px;
margin-bottom:-15px;
font-size:14px;
}
#imgRightBottom{
margin-left:-15px;
margin-top:10px;
}
#right ul li a{
color:#FFFFFF;
}
#right p{
font-size:10px;}

/**************
footer class
**************/
#footerText {
margin-top:5px;
margin-left:-40px;
}

#footerText a{
color:#FFFFFF;
font-size:0.6em;
}
#footerText a:hover{
color:#db001b;
}