/*-----------------------------------------------------------------------------
  [CSS - Common]
  
  Feuille de style du zoning
  
  1. General
  2. Pagelayout
  	
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------
  [1. General]
*/

*{
	border: 0;
	font-family: arial;
	margin: 0;
	outline: 0;
	padding: 0;
}

body{
	background: #7a0d68 url(../images/common/bg-pattern.gif) repeat-x;
	margin: 0;
	padding: 0;
}

p{
	margin: 0;
}

ul, li {
	list-style-type: none; 
}

a{
	color: #4f0029;
	text-decoration: none;
}

a:hover{
	color: #4f0029;
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6{
	font-weight: normal;
}

h2{
	color: #4f0029;
	font-size: 19px;
	margin: 30px 0 5px 30px;
}

h3{
	background: url(../images/common/h3-arrow.gif) no-repeat 0 12px;
	color: #4f0029;
	font-family: arial;
	font-size: 20px;
	font-weight: bold;
	margin: 0;
	padding: 10px 0 0 30px;
}

h4{
	color: #4f4f4f;
	font-family: arial;
	font-size: 14px;
	font-weight: bold;
	margin: 15px 0 0 30px;
}

custom{
	color: #e9036a;
}

.box:hover, 
#newsletter-form input.box:hover{
	color: #555;
}

/*---------------------------------------------------------------------
  [2. Pagelayout]
*/

#container{
	background: url(../images/common/default-background.jpg) no-repeat center top;
	height: 951px;
	margin: 0 auto;
}

#wrap-content{
	height: 951px;
	margin: 0 auto;
	width: 920px;
}

	#top-content-line{
		background: url(../images/common/top-content-line.png) no-repeat;
		display: block;
		height: 6px;
		margin: 0;
		width: 918px;
	}

		#content{
			background: url(../images/common/default-content-bg-pattern.gif) no-repeat;
			margin: 0;
		}

			#left-content{
				background: #fff url(../images/common/default-content-background.jpg) no-repeat;
				float: left;
				height: 535px;
				width: 697px;
			}
			
				#left-content p{
					color: #4f4f4f;
				}
				
				#left-content p a{
					font-weight: bold;
				}
				
			#text-content{
				margin: 0 0 0 20px;
				overflow: hidden;
				width: 600px;
			}
			
				#text-content p{
					font-size: 12px;
					line-height: 18px;
					margin: 0 0 4px 30px;
				}
				
				#text-content ul{
					margin: 0 0 5px 27px;
				}
				
				#text-content li{
					background: url(../images/common/arrow.gif) no-repeat 7px 7px;
					color: #4f4f4f;
					margin: 0 0 2px 3px;
					padding: 0 0 0 18px;
				}
				
					#text-content ul li a{
						color: #4f4f4f;
						margin: 0;
						padding: 1px;
					}
					
					#text-content ul li a:hover{
						background: #4f4f4f;
						color: #fff;
						text-decoration: none;
					}
					
				#newsletter-feedback{
					margin: 20px 0 0 0;
				}
				
				#backlink{
					margin: 50px 0 0 30px;
				}
					
			a#extend-content-btn{
				background: #c4c4c4 url(../images/common/more-content.gif) no-repeat 300px 8px;
				color: #6c1f4c;
				cursor: pointer;
				display: block;
				height: 30px;
				padding: 12px 0 0 30px;
				position: absolute;
				text-align: center;
				width: 667px;
				z-index: 500;
			}
			
			a#extend-content-btn:hover{
				background: #e1e1e1 url(../images/common/more-content.gif) no-repeat 300px 8px;
				text-decoration: none;
			}
			
			#right-content{
				height: 598px;
				margin: 0 0 0 652px;
				position: absolute;
				width: 250px;
			}
			
			a.maecialink{
				color: #e2007d;
			}
				
				#newsletter{
					background: url(../images/common/newsletter-bg-pattern.gif) repeat-x;
					height: 60px;
					margin: 0 0 0 45px;
					padding: 5px 10px 0 15px;
					width: 200px;
				}
				
					div.block{
						margin: 2px 0 0 0;
						width: 165px;
					}
					
					#newsletter-form div.block{
						float: left;
					}
					
					#newsletter-form p{
						color: #fff;
						font-size: 15px;
						margin: 0 0 0 3px;
					}
					
					#newsletter-form p b{
						font-weight: normal;
						margin: 0 0 0 5px;
					}
					
					#newsletter-form p i{
						color: #bc70a7;
						font-size: 14px;
					}
					
					#newsletter-form input{
						background: url(../images/common/newsletter-input.gif) repeat-x;
						border: 1px #ccc solid;
						color: #c1c0c1;
						float: left;
						font-style: italic;
						height: 20px;
						padding: 3px 3px 0 3px;
						width: 165px;
					}
					
					div.content-action{
						float: left;
						width: 20px;
					}
					
					#newsletter-form .submit-button{
						background: url(../images/common/newsletter-submit.gif) repeat-x;
						border: 0;
						color: #fff;
						cursor: pointer;
						float: left;
						font-size: 10px;
						font-style: normal;
						height: 25px;
						margin: 3px 0 0 12px;
						padding: 0;
						width: 28px;
					}
					
					#newsletter-form .submit-button:hover{
						background: url(../images/common/newsletter-submit.gif) repeat-x 0 -25px;
					}
					
				#context-info{
					background: url(../images/common/context-info-background.jpg) no-repeat;
					height: 345px;
					margin: 2px 0 5px 0;
					overflow: hidden;
					padding: 18px 0 0 0;
					width: 271px;
				}
				
					#context-info h2{
						font-family: arial;
						font-size: 14px;
						font-weight: bold;
						margin: 0 10px 0 50px;
					}
					
					#context-info p, 
					#context-info ul{
						color: #4f4f4f;
						font-size: 11px;
						line-height: 14px;
						margin: 5px 10px 0 50px;
					}
					
					#context-info li{
						background: url(../images/common/arrow.gif) no-repeat 0 6px;
						
						padding: 0 0 0 10px;
					}
					
						a.plusbutton{
							background: url(../images/common/context-more-info.jpg) no-repeat;
							color: #5d1c56;
							display: block;
							font-size: 16px;
							height: 32px;
							margin: 10px 0 0 5px;
							padding: 16px 0 0 20px;
							width: 150px;
						}
						
						a.plusbutton:hover{
							background: url(../images/common/context-more-info.jpg) no-repeat 0 -47px;
							text-decoration: none;
						}
						
						#context-info .plusbutton p a:hover{
							text-decoration: none;
						}
					
					#kyrielle-promo{
						clear: both;
						height: 355px;
						margin: 0 0 0 60px;
						width: 200px;
					}

						#kyrielle-presentation{
							height: 266px;
						}
						
							#kyrielle-presentation p{
								color: #fff;
								font-size: 11px;
								margin: 10px 0 15px 11px;
								width: 200px;
							}
							
							#kyrielle-presentation img{
								margin: 0 0 0 10px;
							}
						
						a.kyrielle-button {
							background: url(../images/common/kyrielle-button.gif) no-repeat;
							color: #fff;
							display: block;
							font-size: 14px;
							height: 25px;
							margin: 0 0 2px 0;
							padding: 10px 0 0 0;
							text-align: center;
							text-decoration: none;
							width: 210px;
						}

						a.kyrielle-button:hover{
							background: url(../images/common/kyrielle-button.gif) no-repeat 0 -35px;
							color: #fff;
							text-decoration: none;
						}
						
						a.kyrielle-button i{
							color: #bc70a7;
						}
					
				#contact-info{
					background: url(../images/common/contact-background.png) no-repeat;
					bottom: 0;
					color: #fff;
					height: 167px;
					left: 55px;
					position: absolute;
					width: 140px;
					padding: 2px 0 0 72px;
				}
				
					#contact-info h1{
						margin: 12px 0 2px 1px;
					}
					
					#contact-info p{
						font-size: 12px;
						margin: 3px 0 0 0;
					}