/* ============= */
/* = Color Ref = */
/* ============= */

/* background grey : #E6E6E6 */
/* Black : #1A171B */
/* Light Grey : #808080 */

body {
	background-image: url('/layout_images/grey_pattern.gif');
/*	background-color: #E6E6E6;*/
	font-family: courier, monospace;
	height: 100%; 
	margin: 0; 
  text-align: center; /* for IE7 */
}

img { border: 0; }

#wrapper { 
/* Build column */
	padding-left: 30px;
	padding-right: 20px;
/*	background-color: #E6E6E6;*/
  width: 936px;
  margin: 0 auto;
  text-align: left;
	position: relative;
}

#header {
	width: 926px;
}

#footer {
	width: 926px;	
/*	height: 70px;*/
	color: #808080;
	font-size: 11px;
	clear: both; /* Stop float */
	padding-top: 40px;
	padding-bottom: 20px;
}

#footer h3 {
	font-family: georgia, serif;
}

.capsule_form > table { width: 936px; margin: 10px 0px; }
.capsule_form > td { padding-top: 10px; width: 25%; }

/* ========== */
/* = Layout = */
/* ========== */

#logo_area {
	float: left;
}

#menu {
	padding-top: 21px;
	float: right;
	width: 458px;
	letter-spacing: 1px;
}

#menu a {
	font-size: 26px;
	font-family: courier,monospace;
	color: black;
	text-decoration: none;
	border: none;
}

#menu a:hover, a.active_link {
	color: white;
}

#block_pattern {
	width: 458px;
	height: 20px;
	background-image: url('/layout_images/grey_pattern.gif');
}

.hr_pattern {
	width: 926px;
	height: 4px;
	background-image: url('/layout_images/grey_pattern.gif');
}

#title {
	margin: 25px;
/*	float: left;*/
}	

a {
	color: #808080;
}

#designsite {
	margin-bottom: -35px;
/*	position:relative;*/
/*	right: 70px;*/
	float: right;
}

#logodesignsite {
	margin-bottom: -11px;
	position:relative;
}

/* =============== */
/* = Feature Box = */
/* =============== */

/* Just for sizes
.format_s { width: 458px; }
.format_l { width: 692px; }
.format_xl { width: 926px; }
*/

.feature_box {
	/* En commun avec tous les formats */
	float: left;
	margin-top: 50px;  /* A régler dés qu'il y aura un titre dans la box XL si y a un titre ??*/
}

.feature_box  .white_block { background-color: white; margin: 0px 10px 0px 0px; padding: 0; padding-bottom: 25px; }
/*.feature_box img { margin-bottom: 10px; }*/
.feature_box img { margin-top: 12px; }

.feature_box_content, .feature_box h3, .white_block > p {
	padding-left: 25px;
}

.format_xs h3, .format_m h3, .format_xs .feature_box_content, .format_m .feature_box_content {
	padding-right: 25px; 
}


.feature_box h3{
	font-family: georgia, serif;
	font-weight: normal;
	color: #1A171B;
/*	margin-top: -10px;*/
	top: -10px;
	position:relative;
	margin-bottom: 0px;
}

.feature_box h4, .feature_box_content b {
	font-family: georgia, serif;
	font-size: 12px;
	color: #1A171B;
	margin-bottom: 0px;
}

.feature_box_content, .feature_box p {
	font-family: courier, monospace;
	font-size: 11px;
	color: #808080;
	margin-bottom: 0px;
}

.view_more { position: relative; top: 26px; left: 25px; padding: 2px; width: 80px; height: 12px; font-size: 11px; background-color: white; color: #808080; }
.view_more:hover { cursor: pointer; }

/* ================================================================== */
/* = Important: margin-rights are image's offset + 10px real margin = */
/* ================================================================== */

/* ====== */
/* = XS = */
/* ====== */

.format_xs .white_block { 
	width: 224px;
}

.format_xs p{
	width: 174px;
	margin-right: 10px;
}

/* ===== */
/* = S = */
/* ===== */
	
.format_s .white_block {
	width: 300px;	
	margin-right: 166px;
}

.format_s img {
	width: 224px;
	float: right;
	margin-right: -156px;
	position:relative;
	clear: right;
}

.format_s p{
	width: 182px;	
}

/* ===== */
/* = M = */
/* ===== */
	
.format_m .white_block { 
	width: 458px;
}

.format_m p {
	margin-top: 15px;
	width: 408px;
}

/* ===== */
/* = L = */
/* ===== */

.format_l .white_block {
	width: 300px;
	margin-right: 402px;
	position:relative;
}

.format_l img {
	width: 460px;
	float: right;
	margin-right: -392px;
	position:relative;
	clear: right;
}

.format_l p{
	width: 182px;	
}

.format_l h4{
	width: 182px;
}

/* ====== */
/* = XL = */
/* ====== */
	
.format_xl .white_block { 
	width: 460px;
	margin-right: 476px;
}

.format_xl p {
	width: 182px;
}

.format_xl img{
	width: 692px;
	float: right;
	margin-right: -466px;
	position:relative;
	clear: right;
}