/*————————————————————————————————————————
		Style pour Vendez-en-ligne.com
		par Didier.Ciochetto.free.fr
		Créé en mai 2004.
	—————————————————————————————————————————*/	
	 


html
{
	background-color: white;
}


body
{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 0.9em;
	
	margin-top: 95px;
	margin-left: 12em;

	padding: 1ex;
	padding-top: 0;	
}


pre
{
	/* La m^ police que body. Utilisé dans récapitulatif de commande. */
	font-family: Arial, Verdana, Helvetica, sans-serif;
}




/*++ Les grosses classes, présentation générales. ++*/

.logo
{
	position: absolute;
	top: 0;
	left: 0;
/*	width: 281px;
	height: 115px;
	/* Inutile sauf si pas d'image pour garder la m^ taille. */
}

.logomf
{
	position: absolute;
	top: 0;
	left: 60%;
/*	width: 281px;
	height: 115px;
	/* Inutile sauf si pas d'image pour garder la m^ taille. */
}




.menuOnglets
{
	position: relative;
	/* position: absolute serait mieux,
	le hic c'est que IE et Op continuent à prendre les marges en compte... :-o */
	top: -25px;
	left: 120px;
	width: 70%;
}



.onglet, .ongletActif
{
	background-image: url("style/onglet.png");
	background-repeat: no-repeat;
	background-position: top center;
		
	width: 81px;
	height: 24px;
	padding: 0;
	
	text-align: center;
	font-size: 0.8em;
	font-weight: bold;
}

.ongletActif
{
	background-color: #EAC299;
}

.onglet a, .ongletActif a
{
	color: black;
	text-decoration: none;
	display: block;
	
	width: 64px;
	height: 16px;
	padding: 3px 5px;
	margin-top: 3px;
	margin-left: 2px;
}


.onglet:hover, .onglet a:hover /* Pas top le a:hover, mais mieux que rien pour les antiquités. */
{
	background-color: #FCF2E9;
}
.onglet>a:hover /* Pour les + récents, on cache ce fond, et on le laisse que sur onglet. */
{
	background-color: transparent;
}






.identification, .inscription
{
	position: absolute;
	top: 145px;
	right: 1ex;	
	
	width: 120px;
	height: 140px;
	
	padding-top: 20px;
	padding-left: 20px;

	font-size: 0.8em;
	font-weight: bold;
	background-image: url("style/fond_cadre.png");
	background-repeat: no-repeat;
}



div.inscription
{
	float: right;
}

div.inscription#surId
{
	margin-top: 20em;
}

div.inscription#surAccueil
{
	top: 35em;
	left: 1em;
	
	background: none;
}



table#tableauId
{
	padding-right: 8em;
}

p#texteId
{
	margin-top: 5em;
	padding-right: 150px;
}



.identification input#id, .identification input#mdp,
.inscription input#courriel
{
	font-size: 0.8em;
	font-weight: bold;
	width: 10em;
}



.supplementaire1
{
	position: relative;
	top: -28px;
	height: 1.5em;
	padding-top: 7px;

	/* Là aussi position absolute avec width: 100% serait le mieux, mais... */
	margin-left: -14em;
	margin-right: -1em;

	background-image: url("style/barre_onglet.png");
	background-color: #E5B484; 
	/* Alors c'est une couleur qui correspond à rien.
	 Entre la vraie couleur, et celle que ie affiche... :-| */
	background-position: left;
	background-repeat: repeat-y;
}


.panier
{
	position: absolute;
	 /*/!\¤\   DOIT être en position absolute parce que dans la page panier,
	           il est affiché à la fin. */
	          
	top: 105px;
	left: 1ex;
	height: 2em;

	font-size: 0.8em;
}



.recherche
{
	position: absolute;
	top: 100px;
	right: 1ex;
	height: 2em;
	
	font-size: 0.8em;
}


.recherche input
{
	font-size: 0.9em;
	margin: 0;
	padding: 0;
}


input#soumettre
{
	vertical-align: -8px;
}





.rubriques
{
	position: absolute;
	top: 140px;
	left: 1em;
	width: 13em;

	font-size: 0.8em;
}




.carreRubrique
{
	text-align: center;
	background-color: #FCF2E9;
	border: 1px solid #E6BA8D;
	padding: 0.3ex;
}

.carreRubrique a
{
	text-decoration: none; 
	color: black;
}

.carremf
{
	text-align: center;
	background-color: #FCF2E9;
	border: 1px solid #E6BA8D;
	padding: 0.3ex;
	position: absolute;
	left: 340px;
}

.rondRubrique
{
	background-color: #FCF2E9;
	padding: 1ex;
	padding-left: 1em;
	margin-bottom: 2em;
	border-radius: 1em;
}


.rondRubrique a
{
	color: black;
}

.sousRub
{
	margin-left: 3em;
	color: black;
}




.arborescence
{
	font-size: 0.8em;
}

.arborescence a
{
	color: black;
}




.pieddepage
{
	text-align: center;
	margin-top: 4em;
}

.pieddepage a
{
	color: black;
	font-size: 0.8em;
	font-weight: bold;
	padding-left: 2em;
	padding-right: 2em;
}



/* Les produits sur l'accueil. */
#sommaire
{
	margin-left: 0;
	margin-right: 140px;
	margin-top: -1em;
}

#sommaire td
{
	padding: 1ex;
	width: 50%;
}




/*++ Toutes ces classes de présentation contenant des menus ne sont pas
	imprimées. Sauf le logo. ++*/
@media print
{
	.menuOnglets, .identification, .panier, .recherche, .rubriques, .pieddepage, .tri
	{
		display: none;
	}

	body
	{
		margin: 120px 0 0 0;
	}
}


/*-- Fin classes générales. --*/








/*++ Les titres. ++*/

h1
{
	color: #E4B280;
	font-size: 1.4em;
}

h2
{
	font-size: 1.2em;
	margin-top: 2em;
}

h2.nomProduit
{
	margin-top: 0;
}


h2 a
{
	padding-left: 2em;
}


h3
{
	font-size: 1em;
}

/* Les couleurs avec :hover sont pareils que celles du niveau inférieur. */
h1 a:hover, h2, h2 a
{
	color: #D67E36;
}


h2 a:hover, h3, h3 a
{
	color: #AF5F25;
}


h3 a:hover
{
	color: #84491E;
}




h1 a:hover, h2 a:hover, h3 a:hover
{
	text-decoration: none;
}

h1 a:hover:after, h2 a:hover:after, h3 a:hover:after
{
	content: " »";
}





/*++ Les éléments communs. ++*/

p
{
	text-align: justify;
	margin: 1ex;
}



a img { border:0; }




/*+ Les liens +*/

a
{
	color: #A40106;
}


a:hover
{
	color: red;
	text-decoration: none;
	background: none; 
	/* Correction d'un bug ie. Merci Alsacreations. */	
}


/*--*/



form
{
	margin: 0;
}


small
{
	font-size: 0.8em;
}


th
{
	border: 1px dotted black;
	border-collapse: separate;
}


/* Quand on passe en application/xml l'alignement par défaut n'est pas le m^. */
td
{
	vertical-align: top;
}



kbd 
{
	padding: 0px 1px;
	border-width: 1px 2px 2px 1px;
	border-style: outset;
	background: #faf6f6;
}




/* Pour les synthétiseurs vocaux : épeler les abbr et parler normalement les acronymes.
   de smilissimo.free.fr */
@media aural
{
	abbr { speak:spell-out; }
	acronym { speak:normal; }
}


/* Pour imprimer, on met le contenu de l'infobulle entre parenthèses. */
@media print
{
	acronym[title]:after, abbr[title]:after
	{
		content: " (" attr(title) ")";
	}
}








/*++ Petites classes diverses. ++*/

.cache
{
	display: none;
}



.plus
{
	text-decoration: underline;
}



.adroite
{
	text-align: right;
}

.centre
{
	text-align: center;
}


.fond1
{
	background-color: #F8F8F8;
}


.fond2
{
	background-color: #F0F0F0;
}

.fond1:hover, .fond2:hover
{
	background-color: white;
}


.tableForm
{
	width: 85%;
	margin: 1em;
	margin-left: 2em;
}


.barré
{
	color: gray;
	text-decoration: line-through;
}


.quantitePanier
{
	float: right;
	font-size: 0.8em;
	color: teal;
}

.quantitePanier input
{
	font-size: 0.8em;
	color: teal;
}


.important
{
	color: red;
}

.valide
{
	color: green;
}


table#facture
{
	width: 90%;
	border-collapse: collapse;
}







/*++ Partie boutique, les produits. ++*/

.produit, .detail
{
	border: 2px solid #E2BDA0;
	margin: 2em 2em 1em 2em;
	padding: 0.5em;
	border-radius: 1em;
}

/* Produit et détail sont pareils sauf que produit a un hover. */
.produit:hover
{
	background-color: #FEFAF6;
}



.miniature, .miniatureBasse
{
	float: right;
	position: relative;
	margin-left: 1ex;
	width: 55px;
	height: 60px;
	border:1px solid #A3907C;
}

.miniature
{
	top: -2em;
	margin-bottom: -2em;
}

.miniatureBasse
{
	top: -1ex;
	margin-bottom: -1ex;
}



/* Les autres produits présentés dans la fiche d'un produit. */
.autre
{
	text-decoration: none;
	width: 35px;
	height: 42px;
}



.cadreImage
{
	float: right;
	position: relative;
	top: -3em;
	margin: 0;
	margin-bottom: -3em;
	margin-left: 2ex;
}



.image#Livres
{
	width: 140px;
	height: 190px;
}



.image#CD_audio
{

	width: 190px;
	height: 190px;
}





.legende
{
	visibility: hidden;
	display: block;
	color: black;
	text-decoration: none;
	text-align: center;
}

a:hover span.legende
{
	visibility: visible;
}





.prix
{
	float: right;
	color: green;
	font-size: 1.2em;
	font-weight: bold;
	clear: left;
	margin-left: 1ex;
}

.prixht
{
	font-size: 0.7em;
	color: black;
	font-weight: normal;
}


.contenu
{
	display: block;
	padding: 1em 2em;
	font-style: normal;	
	/* Parce qu'on est dans un <var> donc sinon italique. */
}


.tri, .petitFlottant
{
	float: right;
	font-size: 0.8em;
	margin-top: -2em;
}

.tri select, .tri input
{
	font-size: 1em;
}



.planSite
{
	list-style-type: square;
}

.promotion, .valide
{
	color: green;
}


.tableVoirAussi
{
	width: 100%;
	text-align: center;
}




table.tableChoix
{
	margin: auto;
}


a.lienPanier
{
	color: #AF5F25;
	font-size: large;
	background-color: #FCEFE4;
}

a.lienPanier:hover
{	
	color: #84491E;
	background-color: #FFDACA;
}





/* Descente d'un pixel de certaines images. */
a:hover img.bouton
{
	margin-top: 1px;
	margin-bottom: -1px;
}

/* Heu, pareil mais inutile de dire qui marche pas si on joint les 2... */
input[type="image"]:hover
{
	margin-top: 1px;
	margin-bottom: -1px;
}




p.accueil_haut
{
	position: absolute;
	top: 26em;
	right: 1ex;
	
	width: 19ex;
	font-size: small;
	
}







/* Les styles spécifiques à Mozilla à importer
  tant que tout le monde ne supporte pas les CSS 3. */

.rondRubrique, .produit, .detail
{
	-moz-border-radius: 1em;
}