@charset "UTF-8";
/* CSS Document */
html, body{height: 100%; margin: 0; padding: 0}

body{
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

#content{
	margin: 0 auto;
	padding: 0 0 0 35px;
	border: 3px solid #000;
	border-top: none;
	border-bottom: none;
	width: 910px;
	height: auto;
	text-align: left;
}

a{
	color: #eb6722;
	text-decoration: underline;
}
a:hover{text-decoration:none}
img.img-actu{margin-left: 15px}
iframe{margin-left: 15px}
/************* MENU ***************/

#content ul#menu{
	float: left;
	margin: 30px 0 0 8px;
	padding: 0;
	height: 83px;
	border-left: 2px solid #000;
	list-style-type: none;
}

ul#menu li a{
	font-size: 0.85em;
	text-decoration: none;
	color: #000;
	margin: 0 0 0 8px;
	padding: 0;
	height: 1.2em;
	display: block;

}	
ul#menu li a:hover{font-weight:bold}

/* Administration */

a.lien-admin{
	font-size:1.2em;
	text-decoration: none;
	font-weight: bold;
	}
	a.lien-admin:hover, a.lien-admin:active{text-decoration: underline}
	
ul.actions{
	clear: both;
	list-style: none;
}

label{
	display: block;
}
div.input{margin: 10px 0}
input[type=text]{width: 98%; }

/* Menu vélos */
ul#menu-velos{
	list-style: none;
	width: 860px;
	clear: both;
	margin-left: 15px;
	padding: 0;	
	}
	ul#menu-velos li{
		display: inline;
		}
		ul#menu-velos li a{
			display: block;
			float: left;
			height: 93px;
			text-indent: -9999px;
			text-align: center;
		}
		ul#menu-velos li a.vtt{
			width: 127px;
			background: url(../img/nav-vtt.jpg) top center no-repeat;
		}
		ul#menu-velos li a.vtc{
			width: 126px;
			background: url(../img/nav-vtc.jpg) top center no-repeat;
		}
		ul#menu-velos li a.ville{
			width: 131px;
			background: url(../img/nav-ville.jpg) top center no-repeat;
		}
		ul#menu-velos li a.junior{
			width: 132px;
			background: url(../img/nav-junior.jpg) top center no-repeat;
		}
		ul#menu-velos li a.trikke{
			width: 111px;
			background: url(../img/nav-trikke.jpg) top center no-repeat;
		}
		ul#menu-velos li a.course{
			width: 115px;
			background: url(../img/nav-course.jpg) top center no-repeat;
		}
		ul#menu-velos li a.electrique{
			width: 117px;
			background: url(../img/nav-electriques.jpg) top center no-repeat;
		}
		ul#menu-velos li a.promotions{
			width: 111px;
			background: url(../img/nav-promo.jpg) top center no-repeat;
		}
		ul#menu-velos li a:hover, ul#menu-velos li a:active{
			background-position: bottom center;
			text-indent: 0;
		}
		

	/* Menu vtt */
	ul#nav-vtt{
		list-style: none;
		width: 550px;
		clear: both;
		padding: 0;
		margin-bottom: 600px;
		}
		ul#nav-vtt li{
			display: inline;
			}
			ul#nav-vtt li a{
				display: block;
				float: left;
				height: 154px;
				text-indent: -9999px;
				text-align: center;
				width: 195px
			}
			ul#nav-vtt li a.vtt-rigide{
				background: url(../img/vtt-rigide.jpg) top center no-repeat;
				margin: 0 100px 0 35px;
			}
			ul#nav-vtt li a.vtt-suspendu{
				background: url(../img/vtt-suspendu.jpg) top center no-repeat;
			}
			ul#nav-vtt li a.scooter-electrique{
				background: url(../img/electrique-scooter.png) top center no-repeat;
				margin: 0 100px 0 35px;
			}
			ul#nav-vtt li a.velo-electrique{
				background: url(../img/electrique-velo.png) top center no-repeat;
			}
			ul#nav-vtt li a:hover, ul#nav-vtt li a:active{
				background-position: bottom center;
			}
			ul#nav-vtt li a:hover, ul#nav-vtt li a:active{
				background-position: bottom center;
			}
			

/*********** PANNEAU ACCUEIL ****************/
#panneaux{
	clear: both;
	background: url(../img/fond-clear.png) 2px 0 repeat-y;
	margin:0;
	padding-left: 2px;
	text-align: justify;
	overflow: hidden
}

#panneaux-categories{
	clear: both;
	background: url(../img/fond-categories.png) 2px 0 repeat-y;
	margin:0;
	padding-left: 2px;
	text-align: justify;
	overflow: hidden
}
#panneaux-velos{
	clear: both;
	background: url(../img/fond-velos.png) 0 0 repeat-y;
	margin-top: 25px;
	text-align: justify;
	overflow: hidden;
	min-height: 700px
}
#photo-velo{
	background: #fff url(../img/recherche-pt.jpg) bottom left no-repeat;
	width: 283px;
	height: 170px;
	padding-bottom: 30px;
	text-align: center;
}
#photo-velo img{width: 220px;}
#velo-recherche{
	float:left;
	width: 274px;
	padding-left: 8px;
}
#velo{
	float:left;
	width: 590px;
	margin: -200px 0 0 0;
	background: url(../img/haut-panneau-velo.jpg) 6px 0 no-repeat;
	padding: 0 0 0 20px;
}
#velo p#nav-vel{
	width: 565px;
	font-size: 0.8em;
	height: 10px
}

#velo img.logo-marque{
	float: right;
	margin-right: 30px;
	width: 170px
}
#nav-vel a.suivant{
	display: block;
	float: right;
}
#nav-vel a.precedent{
	display: block;
	float: left;
}
#velo p#chemin{font-size: 0.8em}
#velo h2{
	margin: 10px 0;
	color: #000;
}
#velo h2.barre, span.barre{text-decoration: line-through}
#velo h2.reduc, span.reduc{color: #eb6722}
#velo p{
	width: 565px;
}
#marques-contact{
	float: left;
	width: 568px;
}
#marques-contact p{
	margin-left: 12px;
	width: 540px
}

#espace-cycles{
	float: left;
	width: 273px;
}

#actualites{
	float: left;
	width: 273px;
	margin-left: 22px;
}

#actualites hr{
	width: 255px;
}

#marques-affaires{
	float: left;
	width: 273px;
	margin-left: 22px;
}

#velos-electriques{
	clear: both;
	width: 890px;
	background: url(../img/fond-gris-890.png) top left repeat-y;
	margin-bottom: 0;
	padding-bottom: 0;
	overflow: hidden;
}
#velos-electriques p{
	margin-left: 12px;
	width: 854px;
	text-align: justify;
}
#velos-electriques p.last{margin-bottom: 0; padding-bottom: 0}

#espace-cycles p, #actualites p, #marques-affaires p{
	padding-left: 14px;
	width: 249px;
}


#clear{
	clear: both;
}

#pied, #pied-categorie, #pied-blanc, #pied-velos{
	background: url(../img/pied-accueil.png) bottom center no-repeat;
	margin: 0 auto;
	height: 113px;
	width: 100%;
	z-index: 999
}
#pied-velos{background: url(../img/pied-velos.jpg) bottom center no-repeat}
#pied-blanc{background: url(../img/pied-blanc.png) bottom center no-repeat}
#pied-categorie{background: url(../img/pied-categorie.png) bottom center no-repeat}


img{border: 0; margin:0; padding:0}
img#logo{float: left}
img#banniere{ margin: 20px 0}
div.miniature{
	width: 220px;
	height: 165px;
}
/************** Marques ***********/

h2{
	margin-left: 15px;
	width: 540px;
	font-size: 1.2em;
	color: #eb6722
}

p.gitane{
	background: url(../img/logo-gitane.png) 0 0 no-repeat;
	padding-top: 60px
}

p#ktm, p#whistle, p#bianchi, p#easy, p#matra, p#definitive, p#orka, p#gt, p#bh {padding-top: 60px}
p#orka{background: url(../img/logo-orka.jpg) 0 0 no-repeat}
p#ktm{background: url(../img/logo-ktm.png) 0 0 no-repeat}
p#whistle{background: url(../img/logo-whistle.png) 0 0 no-repeat}
p#bianchi{background: url(../img/logo-bianchi.png) 0 0 no-repeat}
p#easy{background: url(../img/logo-easybike.png) 0 0 no-repeat}
p#matra{background: url(../img/logo-matra.png) 0 0 no-repeat}
p#definitive{background: url(../img/logo-definitive.png) 0 0 no-repeat}
p#gt{background: url(../img/logo-gt.png) 0 0 no-repeat}
p#bh{background: url(../img/logo-bhbike.png) 0 0 no-repeat}

/************* Vignettes résultats *************/
div#resultats{
	background: url(../img/bas-gris-890.png) top left no-repeat;
	width: 890px;
}
div#resultats-seuls{width: 890px; clear: both}
div#resultats-affaires{width: 890px; clear: both; min-height: 400px}
div.vignette{
	margin: 20px 0;
	padding: 20px 0 0 0;
	float: left;
	width: 266px;
	padding-left: 26px;
	border-right: 1px dotted black;
	position: relative
}
img.occasion{position: absolute;  top: 190px; left:22px}
div.last{border:none}
div.vignette h1{
	font-size: 1em;
	margin-top: 0;
	padding-top: 0
}
div.vignette h1 a{text-decoration: none}
div.vignette h1 a:visited{color:#eb6722}
div.vignette h1 a:hover{text-decoration: underline}
div.vignette p.prix{font-weight: bold}
div#resultats-affaires div.affaires{
	width: 890px;
	clear: both;
	height: 200px;
	margin: 0;
	padding: 0;
	}
	div#resultats-affaires div.affaires h2{
		margin-left: 0;
	}
	div#resultats-affaires div.affaires h2 span.reduc{
		color: #eb6722;
	}
	div#resultats-affaires div.affaires h2 span.barre{
		font-size: 0.8em;
		text-decoration: line-through;
		color: #000;
	}
	div#resultats-affaires div.affaires img{
		float: left;
		margin: 0 10px 5px 0;
	}
	div#resultats-affaires div.affaires p{
		padding: 0 10px 0 0;
		text-align: justify;
	}
hr{
	clear: both;
	margin: 0  30px 0 10px;
}
p.suivant{
	clear: both;
	width: 890px;
	text-align: right;
	margin-bottom: 0;
}
p.precedent{
	clear: both;
	margin-bottom: 0;
}
form{clear:both}
ul#catalogue{
	margin-left: 60px;
	margin-top: -12px;
	list-style-type: none;
	position: absolute;
	padding: 0 0 10px 0;
	background: #fff;
	visibility: hidden;
}
#catalogue li{
	margin-left: 20px;
	padding: 0;
	border-left: solid 2px black;
}