@import url(style.reset.css);

body, html {
	width: 100%;
	height: 100%;
}

body {
	background-color: #a5d9fe;
	background-image: url(images/background.jpg);
	background-repeat: repeat-y;
	background-position: center 0;
}

div#page {
	position: relative;
	width: 912px;
	margin-left: -456px;
	left: 50%;
	top: 0;
	font-size: 1em;
}
	
	div#top {
		width: 912px;
		height: 140px;
		background-image: url(images/background_top.jpg);
		overflow: hidden;
	}
		
		h1 {
			width: 671px;
			height: 68px;
			background-image: url(images/logo.jpg);
			line-height: 20em;
			overflow: hidden;
			margin: 22px auto 0 auto;
		}
		
		ul#marques {
			margin-left: 10px;
		}
			ul#marques li {
				float: left;
			}
	
	div#gauche {
		width: 674px;
		margin-left: 22px;
		float: left;
		display: inline;
	}
		
		div.bloc {
			position: relative;
			width: 333px;
			height: 329px;
			float: left;
			display: inline;
			margin-bottom: 2px;
		}
			
			div.bloc img {
				position: absolute;
				left: 17px;
				top: 60px;
			}
			
			div.puces {
				margin-top: 295px;
			}
				
				div.puces a {
					display: block;
					width: 20px;
					height: 20px;
					overflow: hidden;
					line-height: 30em;
					background-image: url(images/puce.jpg);
				}
				div.puces a:hover {
					width: 16px;
					height: 16px;
				}
				div.puces a.selected {
					width: 16px;
					height: 16px;
				}
				
				div.puces ul.gauche {
					margin: 0 0 0 14px;
				}
					div.puces ul.gauche li {
						float: left;
						margin-right: 3px;
					}
				
				div.puces ul.droite {
					margin: 0 14px 0 0;
					float: right;
					display: inline;
				}
					div.puces ul.droite li {
						float: left;
						margin-left: 3px;
					}
		
		div.gauche {
			/*margin-left: 22px;*/
		}
		div.droite {
			margin-left: 8px;
		}
		
		div#bloc1 {
			background-image: url(images/background_bloc1.jpg);
		}
			div#bloc1 ul.gauche li a:hover,
			div#bloc1 ul.droite li a:hover,
			div#bloc1 ul.gauche li a.selected,
			div#bloc1 ul.droite li a.selected {
				border-width: 3px;
			}
			div#bloc1 ul.gauche li a {
				border: 1px solid #ec7fad;
			}
			div#bloc1 ul.droite li a {
				border: 1px solid #5076b4;
			}
		
		div#bloc2 {
			background-image: url(images/background_bloc2.jpg);
		}
			div#bloc2 ul.gauche li a:hover,
			div#bloc2 ul.droite li a:hover,
			div#bloc2 ul.gauche li a.selected,
			div#bloc2 ul.droite li a.selected {
				border-width: 3px;
			}
			div#bloc2 ul.gauche li a {
				border: 1px solid #eb6f5e;
			}
			div#bloc2 ul.droite li a {
				border: 1px solid #e75695;
			}
		
		div#bloc3 {
			background-image: url(images/background_bloc3.jpg);
		}
			div#bloc3 ul.gauche li a:hover,
			div#bloc3 ul.droite li a:hover,
			div#bloc3 ul.gauche li a.selected,
			div#bloc3 ul.droite li a.selected {
				border-width: 3px;
			}
			div#bloc3 ul.gauche li a {
				border: 1px solid #ca0e1d;
			}
			div#bloc3 ul.droite li a {
				border: 1px solid #f4a167;
			}
		
		div#bloc4 {
			background-image: url(images/background_bloc4.jpg);
		}
			div#bloc4 ul.gauche li a:hover,
			div#bloc4 ul.droite li a:hover,
			div#bloc4 ul.gauche li a.selected,
			div#bloc4 ul.droite li a.selected {
				border-width: 3px;
			}
			div#bloc4 ul.gauche li a
			{
				border: 1px solid #5aaa33;
			}
			div#bloc4 ul.droite li a
			{
				border: 1px solid #00BF85;
			}
	
	div#droite {
		width: 196px;
		height: 688px;
		margin-left: 3px;
		background-image: url(images/background_droite.jpg);
		background-repeat: no-repeat;
		background-position: 0 0;
		float: left;
	}
		
		div#droite p#texte {
			width: 140px;
			margin: 22px 0 0 30px;
			font-family: Arial, Verdana;
			font-size: 0.7em;
			letter-spacing: 1px;
			line-height: 17px;
			color: #0075d0;
		}
		
		div#droite img#dessin {
			width: 110px;
			height: 61px;
			margin: 10px 0 0 45px;
		}
		
		div#droite p#offre {
			width: 140px;
			margin: 10px 0 0 30px;
			font-family: Arial, Verdana;
			font-size: 0.8em;
			color: #0075d0;
			text-align: center;
		}
			div#droite p#offre a {
				color: #0075d0;
			}
			div#droite p#offre a:hover {
				font-weight: bold;
			}
		
		div#droite p#ouverture {
			width: 160px;
			margin: 30px 0 0 20px;
			font-family: Arial, Verdana;
			font-size: 0.8em;
			line-height: 18px;
			color: #fd2d4f;
		}
		
		div#droite img#logo2 {
			width: 153px;
			height: 21px;
			margin: 30px 0 0 20px;
		}
		
		div#droite p#adresse {
			width: 160px;
			margin: 15px 0 0 20px;
			font-family: Arial, Verdana;
			font-size: 0.8em;
			color: #fd2d4f;
		}
			div#droite p#adresse a {
				color: #fd2d4f;
			}
			div#droite p#adresse a:hover {
				font-weight: bold;
			}
	
	div#signature {
		position: relative;
		text-align: center;
		width: 912px;
		bottom: 0;
		margin: auto;
		font-family: Trebuchet MS;
		font-size: 0.7em;
		letter-spacing: 0.2em;
	}
	
		div#signature a {
			text-decoration: none;
			color: #a0a0a0;
		}
		div#signature a:hover {
			color: #d8015d;
		}