
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: url('images/bg_body.jpg') 0 0 repeat-x #fcfcfc;
}

#container {
	width: 982px;
	margin: 0 auto;
}

/* Header
-------------------------------------------------------------- */

#header {
	width: 982px;
	height: 113px;
}

	#logo {
		width: 201px;
		height: 104px;

		float: left;
		margin-left: 21px;
		*display: inline; /* BUG IE 6*/
	}

	#tools {
		display: block;
		width: 760px;
		height: 104px;
		float: left;
	}

		#tools #toolbar {
			display: block;
			width: 683px;
			height: 30px;			
			float: right;
			margin-top: 67px;

			background: url('images/bg_toolbar.jpg') 0 0 no-repeat;
		}

			#menu {
				display: block;
				height: 30px;
				float: left;

				margin-left: 35px;
			}

				#menu a {
					display: block;
					height: 20px;
					float: left;
					padding: 4px 14px 0px 14px;
					margin-top: 3px;

					font-size: 12px;
					color: #68c3a8;

					background: url('images/bg_menu_a.jpg') right no-repeat;
				}

				#menu a.contact {
					background: none;
				}

				#menu a:hover {
					height: 27px;
					margin-top: 0px;

					color: #e1faf2;

					background: url('images/bg_menu_a_hover.jpg') center center no-repeat;
					text-decoration: none;
				}
				
				#menu .active {
					height: 27px;
					margin-top: 0px;

					color: #e1faf2;

					background: url('images/bg_menu_a_hover.jpg') center center no-repeat;
					text-decoration: none;
				}
				

	#infobar {
		display: block;
		width: 982px;
		height: 20px;

	}

	#infobar #btn_allProducts {
		display: block;
		width: 127px;
		height: 16px;
		padding: 4px 0px 0px 35px;
		
		background: url('images/customer/bg_allProducts_btn.jpg') 0px 0px no-repeat;

		color: #e2f3ff;

		float: left;
	}

		#infobar #btn_allProducts:hover {
			background: url('images/customer/bg_allProducts_btn_hover.jpg') 0px 0px no-repeat;
		}

	#infobar #breadcrumb {
		display: block;
		width: 795px;
		height: 16px;
		padding: 4px 0px 0px 25px;

		background: url('images/customer/bg_breadCrumb.jpg') 0px 0px no-repeat;

		float: left;

		color: #e9fff9;
	}

		#infobar #breadcrumb a {
			color: #014733;
		}

	#menuCategories {
		display: block;
		width: 982px;
		height: 93px;

	}

		#menuCategories a {
			display: block;
			height: 93px;
			width: 89px;
			float: left;

			text-align: center;
			color: #323232;
			font-size: 10px;
			font-weight: bold;
			text-transform: uppercase;
			text-decoration: none;
			font-family: Helvetica, Arial, sans-serif;
			letter-spacing: -1px;
		}

		#menuCategories a.one-line {
			height: 26px;
			padding-top: 67px;
		}

		#menuCategories a.two-lines {
			height: 32px;
			padding-top: 61px;
		}

			#menuCategories a.materiaux_de_construction {
				width: 91px;
				background: url('images/menuCategories/bg_materiaux_de_construction.jpg') 0px 0px no-repeat;
			}

			#menuCategories a.beton {
				background: url('images/menuCategories/bg_beton.jpg') 0px 0px no-repeat;
			}

			#menuCategories a.materiaux_de_toiture {
				background: url('images/menuCategories/bg_materiaux_de_toiture.jpg') 0px 0px no-repeat;
			}

			#menuCategories a.piscine_et_spas {
				background: url('images/menuCategories/bg_piscine_et_spas.jpg') 0px 0px no-repeat;
			}

			#menuCategories a.carrelages {
				background: url('images/menuCategories/bg_carrelages.jpg') 0px 0px no-repeat;
			}

			#menuCategories a.menuiserie {
				background: url('images/menuCategories/bg_menuiserie.jpg') 0px 0px no-repeat;
			}

			#menuCategories a.outillages_et_materiels {
				background: url('images/menuCategories/bg_outillages_et_materiels.jpg') 0px 0px no-repeat;
			}

			#menuCategories a.securite_et_protection {
				background: url('images/menuCategories/bg_securite_et_protection.jpg') 0px 0px no-repeat;
			}

			#menuCategories a.amenagement_des_abords {
				background: url('images/menuCategories/bg_amenagement_des_abords.jpg') 0px 0px no-repeat;
			}

			#menuCategories a.materiaux_recycles {
				background: url('images/menuCategories/bg_materiaux_recycles.jpg') 0px 0px no-repeat;
			}

			#menuCategories a.divers {
				width: 90px;
				background: url('images/menuCategories/bg_divers.jpg') 0px 0px no-repeat;
			}

			#menuCategories a:hover {
				background-position: bottom;
			}

/* Main
-------------------------------------------------------------- */

#main {
}

	.filled {
		background: url('images/customer/bg_main.gif') 0px 0px repeat-y;
	}

	.blank {
		background: url('images/customer/bg_main_blank.gif') 0px 0px repeat-y;
	}

#main .column {
	float: left;
}

#main .two-columns #mainLeft {
	width: 196px;

	padding-left: 1px;

	_overflow: hidden; /* BUG IE 6 */
}

#main .two-columns #mainRight {
	width: 774px;
	padding-right: 1px;

	_overflow: hidden; /* BUG IE 6 */
}

	#main #mainRight .leftSide {
		
	}

	#main #mainRight .rightSide {
	}

	#main #mainRight .leftSideHomepage {
		width: 382px;
		float: left;
	}

	#main #mainRight .rightSideHomepage {
		width: 382px;
		float: left;
	}

		#main .two-columns #mainRight #page {
			background: url('images/customer/bg_page.gif') 0px 0px repeat-y;
		}

			#main .two-columns #mainRight #page .leftSide {
				width: 566px;

				padding-left: 1px;
				float: left;
			}

			#main .two-columns #mainRight #page .rightSide {
				width: 196px;
				
				padding-right: 1px;
				float: left;
			}

/* Footer
-------------------------------------------------------------- */

#footer{
	display: block;
	width: 966px;
	height: 21px;

	background: url('images/bg_footer.jpg') 0px 0px no-repeat;

	margin: 0 auto 10px auto;
	padding: 5px 7px 0px 7px;
	
	text-align: left;
	font-size: 11px;

	color: #585858;
}

	#footer a {
		color: #525252;
	}

	#footer a:hover {
		color: #159371;
		text-decoration: underline;
	}

/* Products > Products List Pager
-------------------------------------------------------------- */

.pagerTop {
	height: 23px;
	border-top: 1px solid #e7e7e7;

	font-size: 10px;
	font-weight: bold;
}

.pagerBottom {
	height: 23px;
	border-top: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;

	position: relative;
	top: -1px;

	font-size: 10px;
	font-weight: bold;
}

	.pagerTop a,
	.pagerBottom a {
		display: block inline;
		margin-right: 3px;
		padding: 0px 2px 2px 2px;

		color: #000000;
		text-decoration: none;
		text-align: center;
	}
	
	.pagerTop a.current,
	.pagerBottom a.current {
		height: 10px;
		padding-bottom: 0px;
		border-bottom: 2px solid #ff6600;

		color: #ff6600;
	}

	.pagerTop a:hover,
	.pagerBottom a:hover {
		background-color: #ff6600;

		color: #ffffff;
	}

	.pagerTop .left,
	.pagerBottom .left {
		width: 25%;
		height: 18px;
		padding-top: 5px;
		float: left;

		text-align: left;
	}

	.pagerTop .center,
	.pagerBottom .center {	
		width: 50%;
		height: 18px;
		float: left;
		padding-top: 5px;

		text-align: center;
	}

	.pagerTop .right,
	.pagerBottom .right {
		width: 25%;
		height: 20px;
		float: right;
		padding-top: 3px;

		text-align: right;
	}

	.pagerTop .input,
	.pagerBottom .input {
		padding: 0px;
		border-color: #c7c7c7;
		background-color: #ffffff;

		font-size: 9px;
		color: #000000;
	}

/* Float Elements
-------------------------------------------------------------- */

.floatLeft { float:left; }
.floatRight { float:right; }

/* Misc classes
-------------------------------------------------------------- */

.cadre,
.notice, 
.important    { padding: 10px; margin-bottom: 0px; border: 2px solid #ddd; font-size: 12px; }

.cadre      {  margin-bottom: 10px; }
.notice      { background: #e3eef8; color: #4d87be; border-color: #72aade; }
.important    { border-color: #0070bc; background-color: #c5e2f6; color: #1882ca;}
.importantText { color: #09a458; }
	
	.notice a    { color: #4d87be; }
	.important a  {text-decoration: underline;}
	.important a:hover {text-decoration: none;}