[re-design] oscss - tutorial intégré

Messagepar cymbeline » Jeu 26 Juil 2007, 00:16

Bonjour,

Lorsque je me suis attaqué à oscss et que j'ai vu les 29 feuilles de styles a gérer, je me suis dit OUPS ! va y avoir du boulot pour débrousailler tout ça, retrouver les correspondances entre feuilles de style et fichiers.php y compris avec le wiki, sans parler du deboguage. :/

J'ai travaillé à partir du template clean et j'ai ré-organisé les feuilles de style pour pouvoir s'y retrouver plus facilement, ajouté quelques règles manquantes et commenté le code, j'ai aussi renseigné la réciprocité des fichiers à l'intérieur des feuilles Il y a aussi pas mal de règles insérées dans le code pour visualiser et déboguer sur le site (border:1px solid #couleur), il suffit de les décommenter pour les utiliser.

En attendant de pouvoir les livrer avec un template (ou si quelqu'un veut les utiliser pour en créer un...;)), je les mets ici comme support.

Le but étant de pouvoir se dire en regardant sont site "Je veux modifer ça", et y avoir accès le plus rapidement possible.

************************
ORGANISATION - METHODE
************************

Pour gérer le design d'une boutique (oscss), nous pouvons décomposer son fonctionnement en 9 parties principales.

I ° - Le template (gabarit), voir guide ci-dessus et le wiki, se gère avec le fichier stylesheet.css.

II ° - Gérer l'aspect général du site (les liens, titres, boutons, fieldset...) avec le fichier general.css.

III ° - Gérer la présentation des produits (nouveaux, promotion, ainsi que leurs attributs : commentaires, options), avec le fichier Products.css

IV ° - Gérer la présentation des comptes utilisateurs ou clients (enregistrement, adresses, commandes...) avec le fichier Account.css.

V ° - Gérer la présentation du processus d'achat (panier, paiement...) avec Checkout.css.

VI ° - Gérer la présentation des différentes boxes (categorie, specials...) avec le fichier Boxes.css.

VII ° - Gérer la présentation des informations (CGV, cookie usage...) avec le fichier information.css.

VIII ° - Gérer la recherche dans le site avec le fichier advanced_search.css.

IX ° - Gérer le menu de navigation (haut) avec le fichier menu.css (c'est une boxe à part).
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar cymbeline » Jeu 26 Juil 2007, 00:17

I ° - General.css

Code: Tout sélectionner
/* +----------------------------------------------------------------------+
// | Nom du fichier : general.css                           |
// +----------------------------------------------------------------------+
// | Copyright (c) : 2006 => oscss (http://www.oscss.org/)                |
// | Released under the GNU General Public License               |
// +----------------------------------------------------------------------+
// | Auteur : Cymbeline                                             |
// +----------------------------------------------------------------------+
// | Site      :   oscss/demo                                      |
// | Creation   :    01-01-2007                            |
// | Modifie   :                               |
// | Version   :  1.1                            |
// +----------------------------------------------------------------------+
*/
ul {
 padding: 0;
  margin: 0;
 list-style:none;
}

li {
  padding: 0;
  margin: 0;
}

p {
 padding: 0;
  margin: 0;
}

img {
 border: 0px none;
  margin: 0;
}

a {
 color: #ff6600;
  text-decoration:none; 
}

a:hover {
  color: #333333;
 text-decoration: underline; 
}
a:active {
  color: #333333;
}
a:visited {
  color: #ff6600;
}

em {
 color: #FF4040;
  font-style: normal;
  display: block;
  border: 1px solid #F00;
  padding: 10px;
 margin-bottom: 15px;
 background: #FEE;
}

acronym { cursor: help; border: 0; }

h2{
  font-size: 1.2em;
  margin: 1em 0;
}

h3{
  font-size: 1em;
  margin: 0.8em 0;
}

/* ------- compatibility IE6 --------- */

html>body fieldset {
 padding-top : 1em;
 top : 0;
}


legend {
 position :relative;
  top : -1em;
  padding : 0.4em;
}


/* ---------- class diverses ------------------------ */


.floatLeft { float:left; }
.floatRight { float:right; }
.underline { text-decoration: underline; }
.spacer { clear:both; visibility:hidden;}

abbr, acronym { cursor: help; }

/* ---- Marque les produits indisponible // se gère dans admin->configuration->stock  --- */
/* ---- il faut donner une valeur pour l'affichage des produits hors stock : ici j'ai choisi INDISPONIBLE --- */
/* ---- cette mention se rajoute dans les titres des produits concernés --- */
.markProductOutOfStock{
 margin: 0px;
  padding: 0px 0px 0px 30px;
 color: #ff6000;

}
/* +----------------------------------------------------------------------+
// | ContentBox, peut-être considéré comme class conteneur global, utilisé aussi dans d'autres fichier comme par ex    dans account.css
// +----------------------------------------------------------------------+*/

div.contentBox {}

div.contentBox h3 {}

/* +------------------------------------------------------------------------------------------------------+
// | Splitpage result (ventilation des produits sur plusieurs pages avec : Pages de résultat : 12[Suiv >>]
// +------------------------------------------------------------------------------------------------------+*/

div#splitPageTop {
 list-style-type: none;
 margin: 20px 5px 0px 5px;
  padding: 0px 0px 20px 0px;
 border-bottom: 1px solid #333;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 1em;
}


div#splitPageTop a {
  color: #FF8000;
  /*font-weight: bold;*/
}

div#splitPageTop a:hover {
  color: #FFFFFF;
  background: #333333; 
}

div#splitPageTop span.jump {
  font-weight:bold;
}

div#splitPageBottom {
  list-style-type: none;
 margin: 10px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  border-top: 1px solid #333;
 clear:both;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 1em;
}
div#splitPageBottom a {
 color: #FF8000;
  font-weight: bold;
}

div#splitPageBottom a:hover {
 color: #FFFFFF;
  background: #333333;
   
}

div#splitPageBottom span.jump {
  font-weight:bold;
}

p.sP1 {float:left; /*word-spacing:1mm;*/ }
p.sP2 {float:right; /*letter-spacing:0.5mm;*/}

/* +----------------------------------------------------------------------+
// | Tous les formulaires de compte et de mot de passe
// +----------------------------------------------------------------------+*/

fieldset.account {
  padding: 10px 10px 10px 10px;
 margin: 0px 0px 0px 0px; 
  width: 495px; 
 border: 4px dash #7c5d3d;
}

fieldset.account p {
  margin: 10px 0px 0px 0px;
 padding: 0px;
  width: 495px;
 /*border: 1px solid lime;*/
 
}

fieldset.account label {
  width: 250px;
  line-height: 25px;
 margin-right: 10px;
  float: left;
 text-align: right;
 cursor: help;
}

p.formBt {
  text-align:center;
}

fieldset {
  margin: 0px;
 padding: 0px 0px 0px 0px;
  width: 540px; 
 border: none;
 
}

fieldset p {
  margin: 0px;
  padding: 0px;
 /*border: 1px solid red;*/
  /*text-align: center;*/
 
}
fieldset p span{
 margin: 0px;
  padding: 0px;
 /*border: 1px solid lime;*/
 
}

fieldset label {
  /*float: left; */
 margin: 0px;
  padding: 0px;
 /*width: 180px; */
  /*line-height: 25px; */
 /*text-align: right; */
 cursor: help;
}

fieldset input {
  margin: 0px;
  padding: 0px;
 /*border:1px solid gray;*/
  /*background-color: #FF6699; */
}
fieldset checkbox {
  margin: 0px;
  padding: 0px;
 /*border:1px solid gray;*/
  /*background-color: #FF6699; */
}
fieldset textarea {
  margin: 0px;
  padding: 0px;
 width: 550px;
 /*border:1px solid gray;*/
  /*background-color: #FF6699; */
}

fieldset select {
  width:180px;
}
.gender{
 margin: 10px;
 padding: 10px;
  /*height: 50px;*/
 /*border: 1px solid blue;*/
}
p.gender span{
  margin: 0px 0px 0px 0px;
  padding: 0px;
 /*border: 1px solid purple;*/
}
/* +----------------------------------------------------------------------+
// | Les boutons
// +----------------------------------------------------------------------+*/

div.navBt {
  text-align:right;
  margin: 2em 1em 1em 0em;
}

a.navBt {
 width: 100px;
  height:25px;
 text-decoration:none;
  color:white;
  text-align:center;
  /*font-size: 1em; */
  /*font-weight:bold;*/
 font-family: Verdana, Arial, Helvetica, sans-serif;
  background:#ff5200;
 margin: 0px;
  padding:2px 2px 2px 2px;

}

a.navBt:hover {
  text-decoration:none;
  background: #333;
 color: #FFFFFF;
}
a.navBt:active {
  text-decoration:none;
  background: #333;
 color: #FFFFFF;
}
a.navBtMini {
 margin: 0px;
  padding: 2px;
   font-size:0.85em;
   text-decoration: none;
    color:white;
    background:#ff5200;
 
}

a.navBtMini:hover {
  text-decoration:none;
 background:#333;
  color: #fff;
}

a.navBt.process {
 width: 100px;
  height:25px;
 text-decoration:none;
  color:white;
  text-align:center;
  /*font-size: 1em; */
  /*font-weight:bold; */
  background:#ff5200;
 margin: 0px;
  padding:2px 2px 2px 2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

a.navBt.process:hover {
  text-decoration:none;
  background: #333;
 color: #FFFFFF;
}

/* +----------------------------------------------------------------------+
// | Les boutons imput
// +----------------------------------------------------------------------+*/

input.submitBt {
  width: 200px;
  height:25px;
 text-decoration:none;
  color:white;
  text-align:center;
  font-size: 1em;
  font-weight:bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
  background:#ff5200;
 margin: 10px 0px 10px 0px;
  padding:2px 2px 2px 2px;
}

input.submitBt:hover{
  text-decoration:none;
  background: #333;
 color: #FFFFFF;
 cursor:pointer;
}
/* ---------- divers ------------------------ */
.notice {
  margin: 10px 0px 10px 0px;
  padding: 0px;
 color:#ff0000;
 /*font-weight:bold; */
}
/* ---------- Mise en forme prix speciaux ------------------------ */
span.productSpecialPrice {
 color: #ff0000;
}
 /* +----------------------------------------------------------------------+
// |  Les effets de la souris
// +----------------------------------------------------------------------+*/

/*   mouseover effects */
#mouseOver {
  background-color: #ccc;
 }
/*
#mouseOutpost {
 background-color: #000000;
 
}
*/
 /* +----------------------------------------------------------------------+
// |  Les messages, alertes
// +----------------------------------------------------------------------+*/
 .messageStack{
 margin:0em 1em 0em 0em;
 padding:0px 0px 0px 0px;
  border: 1px solid red;
 }
 
 .messageStackError{
   background-color: #FF0000;
  color: #FFFFFF;
 font-weight: bold;
}


 .messageStackWarning {
 background-color: #ffb3b5;
}

.messageStackSuccess {
 background-color: #99ff00;
}
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar cymbeline » Jeu 26 Juil 2007, 00:19

II ° - Products.css

Code: Tout sélectionner
/* +----------------------------------------------------------------------+
// | Nom du fichier : products.css                             |
// +----------------------------------------------------------------------+
// | Copyright (c) : 2006 => oscss (http://www.oscss.org/)                |
// | Released under the GNU General Public License               |
// +----------------------------------------------------------------------+
// | Auteur : Cymbeline                                             |
// +----------------------------------------------------------------------+
// | Site      :   oscss/demo                                  |
// | Creation   :    01-01-2007                            |
// | Modifie   :                               |
// | Version   :  1.1                            |
// +----------------------------------------------------------------------+
// | Description :                                    |
// |                                                 |
// | Gère la présentation des produits dans les différentes pages d'oscss |
// |                                                                      |
// | - Regroupe les pages : (1) product_info                              |
// |               (2) products_listing                          |
// |               (3) specials                                  |
// |               (4) product_new                               |
// |               (5) whatsnew                                  |
// |               (6) index_category_nested                     |
// +----------------------------------------------------------------------+
*/

/* +--------------------------------------------------------------------------------------------------------+
// |                                    NPage (1) : product_info                                         |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les produits, leurs images, leurs options, permettre à l'utilisateur de laisser   |
// |            une critique, présenter des produits pour la vente additionnelle.                           |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur un produit dans un listing pour obtenir son descriptif          |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentproduct_info.php                                       |
// |                      - catalogincludesmodulesalso_purchased_products.php                          |
// |                      - catalogincludesmodulesproduct_reviews.php                                 |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur global
// +----------------------------------------------------------------------+*/

div#productInfo{
  margin: 0px;
  padding: 0px;
 /*border: 1px solid red;*/
}

/*-------------titre-------------*/
div#productInfo h1 {
 margin: 0px 0px 10px 0px;
  padding: 0px 0px 0px 10px;
  height: 20px;
 text-align:center;
  background-color: #333;
 color: white;
 
  /*border: 1px solid blue;*/
}
/*-------------Gestion de l'image-------------*/
#productImage {
 float: left;
  width: 100px;
 height: 120px;
  margin: 0px 0px 10px 10px;
  padding: 0px 0px 0px 0px;
  /*background-image: url(../images/loupe.jpg);*/
 background-position: bottom;
  background-repeat: no-repeat;
   /*border-width: 0px 0px 1px 0px; */
 /*border:1px solid blue;*/
 
}
/*-------------Gestion du model et du prix-------------*/
#productInfoSpec {
   float:right;
  margin: 20px 0px 0px 0px;
 padding: 0px;
 width: 400px;
 font-size: 1.3em;
 color: #ff5200;
 font-weight: bold;
  /*border: 1px solid yellow;*/
}
#productInfoSpec p.productModel{/*-- le modèle --*/
  margin:0px;
 padding:0px 0px 20px 0px;
   /*border: 1px solid orange;*/
}
#productInfoSpec p.productPrice{/*-- le prix --*/
  margin:0px;
 padding:0px;
  /*border: 1px solid blue;*/
}
/*-------------Bloc de description du produit-------------*/

#productDescription {
  /*float:right; */
 clear: both;
  margin: 0px 0px 10px 0px;
 padding: 20px 10px 20px 10px;
   width: 538px;
 text-align: justify;
  color: #333;
  border-top:1px dotted #666;
 border-bottom:1px dotted #666;
}
#productDescription h3{
   margin: 0px;
  padding: 0px;
 color: #996000;
 /*text-decoration: underline;*/
}
#productDescription li{
  margin: 2px 0px 2px 0px;
  padding: 0px;
 color: #333333;
 /*border: 1px solid red;*/
}
#productDescription li.argument_co{
  margin: 2px 0px 3px 0px;
  padding: 0px;
 color:#ff5200;
  font-weight: bold;
}
.date_dispo{
 margin: 0px;
  padding: 0px;
 text-align: right;
  font-style: italic;
 font-size: 1em;
 font-weight: bold;
  color: #FF0000;
}
div#productInfo form#cart_quantity {
  width:136px;
  text-align:center;
  margin: 0px 0px 0px 0px;
 /*border: 1px solid red;*/
}
/*-------Taille des boutons "Select" dans otpions disponibles-------------------------*/
div#productInfo select{
   width: 160px;
}
/*-------------------------Mise en forme : "pour + d'infos....." ------------------*/
#productUrl {
   margin: 10px 0px 10px 0px;
  padding: 0px;
 width: 560px;
 text-align:center;
  color: #333;
  /*border: 1px solid green;*/
}
#productUrl a{
   font-weight: bold;
  /*border: 1px solid green;*/
}
/*--------Mise en forme : "produit ajouter à notre catalogue telle date" --------------*/
#productDateAdded {
   margin: 10px 0px 10px 0px;
  padding: 0px;
 width: 560px;
 text-align:center;
  color: #FF3333;
 font-weight: bold;
  /*border: 1px solid orange;*/
}
/*-----------------les options des produits-------------------------*/
#productOptions{
  margin: 0px;
  padding: 5px 5px 10px 5px;
  width: 555px;
 background-color: #ddd;
 /*border: 1px solid yellow;*/
}
#productOptions p{
  margin: 10px;
 padding: 0px;
 /*border: 1px solid green;*/
}
#productOptions a{
  color : #ff6000;
  text-decoration:underline;
}
#productOptions a:hover{
  color : #333;
}
#productOptions a:active{
  color: #3333FF;
}
#productOptions a:visited{
 color: #3333FF;
}

/*---gère le bouton ajouter au panier, regarder aussi dans general.css (input.submitBt) pour la mise en forme ---*/
div#productInfo p.formBt{
  margin: 0px 0px 10px 0px;
 padding: 0px;
 width: 560px;
 /*border: 1px solid red;*/

}
div#productInfo .submitBt {} /*--permet de gérer le bouton indépendament ICI--/*
/* +----------------------------------------------------------------------+
// | Les critiques "reviews"
// +----------------------------------------------------------------------+*/

/*---- correspnd au conteneur : critiques actuelles + les notes attribuées (étoiles)--*/
#currentReviews {
   display: block;
   font: 1em  Georgia, Arial, sans-serif; color:#000;
  width: 556px;
   margin: 50px 0px 0px 0px;
  padding: 3px 0px 2px 0px;
   height: 20px;
 color: #333;
  /*background: transparent url(../images/separator_1.gif) bottom no-repeat;*/
  border-top: 1px solid #ff6000;
  border-bottom: 1px solid #ff6000;
 /*border: 1px solid red;*/
}
/*---- correspnd à : critiques actuelles --*/

#currentReviews p.currentReviews {
   float: left;
 /*border: 1px solid blue;*/
}
/*---- correspnd à : note moyenne + les étoiles --*/
#currentReviews p.averageReviews {
   float: right;
 /*border: 1px solid lime;*/
 
}
/*---- correspnd à l'image des étoiles --*/
#currentReviews p img {
   vertical-align:middle;
  /*border: 1px solid lime;*/

}


/*-----conteneur de la critique -------------*/
blockquote.review {
  width: 440px;
  margin: 1em auto;
  padding: 0px 5px 0px 5px;
 background: #C1C19E url(../images/review_top.gif) top no-repeat;
  /*border: 1px solid blue;*/

}

/*----- correspond à la critique (le texte) -------------*/

blockquote.review p.review {
 color: #fff;
  padding: 1em 1em 1em 2em;
 margin: 0px 0px 0px 0px;
  background: transparent url(../images/review_bottom.gif) 97% 100% no-repeat;
  /*border: 1px solid red;*/

}
/*---conteneur de l'auteur de la critique---*/
blockquote.review p cite {
  color: #666;
  display: block;
 text-align: right;
  padding: 1px 6px 6px 6px;
 margin: 0 -5px;
 background: #CCCC99 url(../images/review_cite.gif) bottom left no-repeat;
 border-top: 1px solid #FFF;
 /*border: 1px solid lime;*/

}
/*----- correspond à : "par...." (l'auteur de la critique) -------------*/
blockquote.review cite {
 display: block;
 font-size: 0.8em;
 line-height: 1.5;
 /*border: 1px solid red;*/

}

/*----- correspond à l'image (les étoiles) de  : "par...." (l'auteur de la critique) -------------*/
span.reviewRate img{
   vertical-align: middle;
 /*border: 1px solid yellow;*/
}

span.reviewRate{}
span.reviewDate{}

/*-----  zone de saisie de la critique-------------*/

textarea#review {
  width:420px;
  height: 120px;
  /*border: 1px solid blue;*/
}
/*---- fieldset pour laisser une critique-----*/
form#product_reviews_write fieldset {
   width:430px;
  margin: 0 auto;
 /*border:0px 0px 0px 0px;*/
 /*border: 1px solid purple;*/
 border: none;
}
/*--------titre du fieldset ---------*/
form#product_reviews_write fieldset legend{
  /*border: 1px solid purple;*/
}
/*--------paragraphe du fieldset : correspond aux différents textes et boutons ---------*/
form#product_reviews_write fieldset p{
  margin: 10px 0px 20px 0px;
  padding: 0px;
 text-align: center;
 /*border: 1px solid orange;*/

}
/*-----tire : correspond à "classement" ------*/
form#product_reviews_write fieldset h4{
    float: left;
 margin: 2px 0px 0px 60px;
 padding: 0px;
 text-align: center;
 /*border: 1px solid lime;*/
}
/* +---------------------------------------------------------------------------------------------------------------+
// | La vente additionnelle "also_purchased_products.php" :: "Les clients qui ont acheté ce produit ont aussi acheté"
// +---------------------------------------------------------------------------------------------------------------+*/
#alsoPurchased{
  margin: 20px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 /*border: 1px solid red;*/
}
/*---------titre----------*/
#alsoPurchased h4{
 margin: 10px 0px 20px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid red;*/
}
/*---------Mini conteneur articles----------*/
#alsoPurchased .alsoPurchasedTabs{
 margin: 10px 2px 4px 2px;
   padding: 10px 0px 0px 0px;
  float: left;
  width: 180px; 
 height:180px;
   background:transparent;
 background-image: url(../images/fd_new_product.jpg);
  background-repeat: no-repeat;
 /*border: 1px double orange;*/
}
/*---------idem correspond aux Minis conteneurs articles----------*/
#alsoPurchased dl.alsoPurchasedTabs{
 margin: 0px;
    padding:0px;
  /*border: 1px double purple;*/

}
/*-------------------- titres des produits ------------------------*/
#alsoPurchased dl.alsoPurchasedTabs dt.name{
    margin: 0px 0px 20px 0px;
 padding: 3px 0px 3px 0px;
 text-align:center;
  /*border: 1px solid green;*/
}
/*-------------------- Lien cliquable dans le titre des produits (mise en forme) --------*/
#alsoPurchased dl.alsoPurchasedTabs dt.name a{
    color: #999999;
 font-weight: bold;
  text-decoration: none;
}
#alsoPurchased dl.alsoPurchasedTabs dt.name a:hover{
    color: #000000;
  font-weight: bold;
}
/*---------- gestion de l'image du produit --------------*/
#alsoPurchased dl.alsoPurchasedTabs dd.image{
  margin: 0px 40px 0px 40px;
  padding: 0px;
 width: 100px;
  height: 100px;
 /*border: 1px solid blue;*/
}


/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (2) : products_listing                                    |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les PRODUITS d'une catégorie ; exemple : je clique sur graphics cards de la       |
// |            catégories hardware dans le menu déroulant des "catégories", j'obtiens un listing, il se    |
// |            gère ICI. (s'il n'y a pas de sous categories sinon voir => Page (6) : index_category_nested)|
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentindex_products.php                                     |
// |                      - catalogincludesmodulesproduct_listing.php                                |
// |                      - catalogincludesmodulesproduct_listing_div_version.php (non traité ici, c'est |
// |                        une option si l'on préfère gérer la liste avec des div plutot qu'une liste de  |
// |                        définition.                                                                     |
// +--------------------------------------------------------------------------------------------------------+
*/
 /* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/

.listing { margin: 0px; padding: 0px;}
/* +----------------------------------------------------------------------+
// | Conteneur de l'article dl
// +----------------------------------------------------------------------+*/
dl.listing {
 float: left;
 width:550px;
 height: 145px;
  background:#F0E2CA;
  margin: 10px 5px 5px 5px;
 padding: 0px 0px 0px 0px;
 background-image: url(../images/fd_listing_produit.jpg);
  background-repeat: repeat-x;
  /*border: 1px solid red;*/
}
dl.listing span{
 color: #FF6600;
 
}
/* +----------------------------------------------------------------------+
// | bordure haute de l'article dl
// +----------------------------------------------------------------------+*/
dl.listing div.listingTop {}

/* +----------------------------------------------------------------------+
// | bordure basse de l'article dl
// +----------------------------------------------------------------------+*/
dl.listing div.listingBottom {}

/* +----------------------------------------------------------------------+
// | Définition, nom de l'article (liens cliquables)
// +----------------------------------------------------------------------+*/
dl.listing dt {
 font-weight:bold;
  margin: 3px 0px 0px 10px;
  padding: 0px;
}
dl.listing dt a{
  color: #FFFFFF;
 font-weight: normal;
}
dl.listing dt a:hover{
  color: #FFFFFF;
 font-weight: bold;
}
/* +----------------------------------------------------------------------+
// | Image de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productImage {
    float: left;
  margin: 25px 0px 0px 0px;
  padding:0px 0px 0px 0px;
}
/* +----------------------------------------------------------------------+
// | Fabricant de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productManufacturer {
  margin: 0px;
 padding: 0px;
}
dl.listing dd.productManufacturer a{
  color: ff6600;
  text-decoration: underline;
}
dl.listing dd.productManufacturer a:hover{
 color: ff6600;
  text-decoration: none;
  font-weight: bold;
}
dl.listing dd.productManufacturer a:active{
 color: #0033FF;
 text-decoration: underline;
}

dl.listing dd.productManufacturer span {}
/* +----------------------------------------------------------------------+
// | Model de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productModel {
  margin: 30px 0px 0px 0px;
  padding: 0px;
}
dl.listing dd.productModel span{}
/* +----------------------------------------------------------------------+
// | Prix de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productPrice {
  float:right;
 margin: -25px 30px 0px 0px;
  padding: 0px 0px 0px 0px;
  /*border:  1px solid blue;*/
  font-size: 1.2em;
 color: #ff5200;
}
dl.listing dd.productPrice span{
 color: #333;
}
dl.listing dd.productPrice span.productSpecialPrice {/*--Prix spécial---*/
 color: #FF5200;
 font-weight: bold;
}

/* +----------------------------------------------------------------------+
// | Quantité de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productQuantity {
 margin:0px;
  padding:0px;
}
dl.listing dd.productQuantity span{}
/* +----------------------------------------------------------------------+
// | Poids de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productWeigth {
  margin:0px;
  padding:0px;
}
dl.listing dd.productWeigth span {}
/* +----------------------------------------------------------------------+
// | achat de l'article
// +----------------------------------------------------------------------+*/
dl.listing div.listingBuy {
 float:right;
 margin: 0px 30px 0px 0px;
  padding: 0px 0px 0px 0px;
  /*border: 1px solid green;*/
 
}

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (3) : specials                                             |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les PRODUITS en PROMOTION                                                         |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentspecials.php                                           |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur_principal
// +----------------------------------------------------------------------+*/

.special{
    float: left;
 margin: 10px 1px 10px 1px;
  padding: 0px;
 width: 275px;
 height: 190px;
  background-image: url(../images/fd_promotions.jpg);
 background-repeat: no-repeat;
  /*border: 1px solid yellow;*/
 
}
/* +----------------------------------------------------------------------+
// | Conteneur de l'article dl
// +----------------------------------------------------------------------+*/

dl.special { margin: 10px 1px 5px 1px; padding:0px;}

/* +----------------------------------------------------------------------+
// | Définition, nom de l'article (liens cliquables)
// +----------------------------------------------------------------------+*/
dl.special dt.productName{
  margin: 10px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 height: 45px;
 text-align: center;
 color: white;
 /*border: 1px solid blue;*/
 
}
dl.special dt.productName a{
  margin: 0px;
 padding: 0px;
 color: white;
}
dl.special dt.productName a:hover{
 margin: 0px;
 padding: 0px;
 color: white;
 font-weight: bold;
  text-decoration: underline;
}
/* +----------------------------------------------------------------------+
// | Image de l'article
// +----------------------------------------------------------------------+*/
dl.special dd.productImage{
 
  margin: 10px 0px 0px 20px;
 padding: 0px 0px 0px 0px;
 width: 100px;
 height: 100px;
  /*border: 1px solid orange;*/
}
/* +----------------------------------------------------------------------+
// | Prix normal de l'article
// +----------------------------------------------------------------------+*/
dl.special dd.productPrice{
    /*float: left;*/
 margin: -20px 3px 0px 0px;
 padding: 0px 0px 0px 0px;
 text-align: right;
  /*text-decoration: line-through;*/
  color: #333333;
 /*border: 1px solid red;*/
}

/* +----------------------------------------------------------------------+
// | Prix special de l'article
// +----------------------------------------------------------------------+*/
dl.special dd.productSpecialPrice{

  margin: 0px 3px 0px 0px;
 padding: 0px 0px 0px 0px;
 text-align: right;
  color: #ff5200;
 font-size: 1.2em;
 font-weight: bold;
}

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (4) : Product_new                                        |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les NOUVEAUX produits.                                                            |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentproducts_new.php                                       |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/ 
.productsNew { 
  margin: 0px;
 padding: 0px;
}
/* +----------------------------------------------------------------------+
// | Conteneur de l'article dl
// +----------------------------------------------------------------------+*/
dl.productsNew{
 float: left;
 width:550px;
 height: 145px;
  background:#F0E2CA;
  margin: 10px 5px 5px 5px;
 padding: 0px 0px 0px 0px;
 background-image: url(../images/fd_listing_produit.jpg);
  background-repeat: repeat-x;
  /*border: 1px solid red;*/
}
dl.productsNew span{
 color: #FF6600;
}
/* +----------------------------------------------------------------------+
// | Définition, nom de l'article (liens cliquables)
// +----------------------------------------------------------------------+*/
dl.productsNew dt {
 font-weight:bold;
  margin: 3px 0px 0px 10px;
  padding: 0px;
}
dl.productsNew dt a{
  color: #FFFFFF;
 font-weight: normal;
}
dl.productsNew dt a:hover{
  color: #FFFFFF;
 font-weight: bold;
}
/* +----------------------------------------------------------------------+
// | Image de l'article
// +----------------------------------------------------------------------+*/
dl.productsNew dd.productImage{
  float: left;
  margin: 25px 10px 0px 10px;
  padding:0px 0px 0px 0px;
  width: 100px;
 height: 100px;
}
/* +----------------------------------------------------------------------+
// | Date d'ajout de l'article
// +----------------------------------------------------------------------+*/
dl.productsNew dd.productDateAdded{
 
  margin: 25px 0px 0px 10px;
 padding: 0px 0px 0px 0px;
 color: #333333;
}
/*------------ titre "date d'ajout : " -----------------------*/
dl.productsNew dd.productDateAdded span{}
/* +----------------------------------------------------------------------+
// | Fabricant de l'article
// +----------------------------------------------------------------------+*/
dl.productsNew dd.productManufacturer{
  margin:0px 0px 0px 10px;
 padding:0px 0px 0px 0px;
  color: #333333;
}
/*------------ tire "fabricant : " -----------------------*/
dl.productsNew dd.productManufacturer span{}
/* +----------------------------------------------------------------------+
// | Prix de l'article
// +----------------------------------------------------------------------+*/
dl.productsNew dd.productPrice{
  /*float:right; */
 margin: 0px 10px 0px 0px;
  padding: 0px 0px 0px 0px;
  /*border:  1px solid blue;*/
  font-size: 1.2em;
 color: #ff5200;
}
/*------------ tire "prix : " -----------------------*/
dl.productsNew dd.productsPrice span{}
/* +----------------------------------------------------------------------+
// | Acheter l'article
// +----------------------------------------------------------------------+*/
dl.productsNew div.productBuynow {
 float: right;
 margin: 20px 10px 0px 0px;
 padding: 0px 0px 0px 0px;
  /*border: 1px solid green;*/
}
/* +----------------------------------------------------------------------+
// | ???
// +----------------------------------------------------------------------+*/
dl.productsNew div.spacer {
  clear: right;
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (5) : Whatsnew_infobox                                    |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les produits en INDEX ou en cliquant sur "catalogue" du Breadcrumb.               |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludesmodulesnew_products.php                                       |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur
// +----------------------------------------------------------------------+*/
.newProduct{ 
    margin: 4px 2px 4px 2px;
    padding:0px;
  float: left;
  width: 180px; 
 height:180px;
   background:transparent;
 background-image: url(../images/fd_new_product.jpg);
  background-repeat: no-repeat;
 /*border: 1px double orange;*/
}
/* +----------------------------------------------------------------------+
// | Titre
// +----------------------------------------------------------------------+*/
.newProduct h4 {} /*----inexistant dans new_products.php----*/
/* +----------------------------------------------------------------------+
// | Mini conteneur de l'article
// +----------------------------------------------------------------------+*/
dl.newProduct{}
/* +----------------------------------------------------------------------+
// | Définition, nom de l'article (liens cliquables)
// +----------------------------------------------------------------------+*/
dl.newProduct dt.name{
  margin:0px;
 padding: 3px 0px 3px 0px;
 /*background-color: #333333;*/
  height: 40px;
 /*border: 1px solid green;*/
  text-align:center;
  vertical-align: middle;
}
dl.newProduct dt.name a{
 color: #999999;
 font-weight: bold;
  text-decoration: none;
}
dl.newProduct dt.name a:hover{
  color: #000000;
 font-weight: bold;
}
/* +----------------------------------------------------------------------+
// | Image de l'article
// +----------------------------------------------------------------------+*/
dl.newProduct dd img { 
 width: 80px;
 height: 80px;
  /*border: 1px solid green;*/
}
dl.newProduct dd.image { 
 margin: 0px 0px 0px 0px;
 padding: 0px 40px 2px 40px;
 /*border: 1px solid red;*/
}
/* +----------------------------------------------------------------------+
// | Prix de l'article
// +----------------------------------------------------------------------+*/
dl.newProduct dd.price { 
  margin: 0px;
 padding: 0px 0px 0px 0px;
 color: #FF5200;
 text-align: center;
 font-weight: bold;
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (6) : index_category_nested                                |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les CATEGORIES lorsque l'on clique dessus dans les categories déroulantes.        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentindex_category_nested.php                              |
// |                      - catalogincludescontentindex.php                                              |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur
// +----------------------------------------------------------------------+*/
div#index {
 /*border: 1px solid purple;*/
}

/*------------------------- Image d'en-tête des catégories -------------------*/
div#headingCatImg {
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
   text-align:left;
  /*border: 1px solid orange;*/
}

#indexDefaultTitle {
    padding: 15px 0 15px 0 ; 
    background: transparent url(images/table_background_default.gif) no-repeat  right;
    border: 1px solid blue;
}
/* +----------------------------------------------------------------------+
// | Conteneur des images
// +----------------------------------------------------------------------+*/
div#categoriesImages {
 margin: 20px 0px 0px 0px;
 padding: 0px;
 height: 500px; 
    border: 0px solid #000;
   /*border: 1px solid yellow;*/
 background-color: #ff6000;
  background-image: url(../images/fd_cat_casque.jpg);
 background-position: right;
 background-repeat: no-repeat;
}
/*------------------------- les vignettes -------------------*/
div#categoriesImages .categoriesThumbs {
  /*float:left;*/
 /*width: 100px;*/
   margin: 0px 0px 10px 10px;
  padding: 0px;
 /*height: 20px;*/
 width: 180px;
   text-align:left;
  background-color: transparent;
    /*border-top: 1px solid #999;*/
    /*border-right: 2px solid #555;*/
    /*border-bottom: 2px solid #555;*/
    /*border-left: 1px solid #999;*/
}
/*------------------------- les liens sous les vignettes -------------------*/
div#categoriesImages .categoriesThumbs a{
  margin: 0px;
  padding: 0px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
div#categoriesImages .categoriesThumbs a:hover{
 color: #fff;
  font-weight: bold;
  text-decoration: underline;
}
/*------------------------ Les fabricants -------------------*/
fieldset.manufacturerFilter {
  border:0px;
}
/* +----------------------------------------------------------------------+
// | Class diverses
// +----------------------------------------------------------------------+*/
/*-------------- gère les titres des différentes pages --------------------*/
.french{
  color:#666666;
}
/*-------------- Salutations de l'utilisateur --------------------*/
p.customerGreeting{
 color: #FF00FF;
}

.textMain{
  /*border: 1px solid blue;*/
}
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar cymbeline » Jeu 26 Juil 2007, 00:20

III ° - Account.css

Code: Tout sélectionner
/* +----------------------------------------------------------------------+
// | Nom du fichier : products.css                             |
// +----------------------------------------------------------------------+
// | Copyright (c) : 2006 => oscss (http://www.oscss.org/)                |
// | Released under the GNU General Public License               |
// +----------------------------------------------------------------------+
// | Auteur : Cymbeline                                             |
// +----------------------------------------------------------------------+
// | Site      :   oscss/demo                                  |
// | Creation   :    01-01-2007                            |
// | Modifie   :                               |
// | Version   :  1.1                            |
// +----------------------------------------------------------------------+
// | Description :                                    |
// |                                                 |
// | Gère la présentation des produits dans les différentes pages d'oscss |
// |                                                                      |
// | - Regroupe les pages : (1) product_info                              |
// |               (2) products_listing                          |
// |               (3) specials                                  |
// |               (4) product_new                               |
// |               (5) whatsnew                                  |
// |               (6) index_category_nested                     |
// +----------------------------------------------------------------------+
*/

/* +--------------------------------------------------------------------------------------------------------+
// |                                    NPage (1) : product_info                                         |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les produits, leurs images, leurs options, permettre à l'utilisateur de laisser   |
// |            une critique, présenter des produits pour la vente additionnelle.                           |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur un produit dans un listing pour obtenir son descriptif          |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentproduct_info.php                                       |
// |                      - catalogincludesmodulesalso_purchased_products.php                          |
// |                      - catalogincludesmodulesproduct_reviews.php                                 |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur global
// +----------------------------------------------------------------------+*/

div#productInfo{
  margin: 0px;
  padding: 0px;
 /*border: 1px solid red;*/
}

/*-------------titre-------------*/
div#productInfo h1 {
 margin: 0px 0px 10px 0px;
  padding: 0px 0px 0px 10px;
  height: 20px;
 text-align:center;
  background-color: #333;
 color: white;
 
  /*border: 1px solid blue;*/
}
/*-------------Gestion de l'image-------------*/
#productImage {
 float: left;
  width: 100px;
 height: 120px;
  margin: 0px 0px 10px 10px;
  padding: 0px 0px 0px 0px;
  /*background-image: url(../images/loupe.jpg);*/
 background-position: bottom;
  background-repeat: no-repeat;
   /*border-width: 0px 0px 1px 0px; */
 /*border:1px solid blue;*/
 
}
/*-------------Gestion du model et du prix-------------*/
#productInfoSpec {
   float:right;
  margin: 20px 0px 0px 0px;
 padding: 0px;
 width: 400px;
 font-size: 1.3em;
 color: #ff5200;
 font-weight: bold;
  /*border: 1px solid yellow;*/
}
#productInfoSpec p.productModel{/*-- le modèle --*/
  margin:0px;
 padding:0px 0px 20px 0px;
   /*border: 1px solid orange;*/
}
#productInfoSpec p.productPrice{/*-- le prix --*/
  margin:0px;
 padding:0px;
  /*border: 1px solid blue;*/
}
/*-------------Bloc de description du produit-------------*/

#productDescription {
  /*float:right; */
 clear: both;
  margin: 0px 0px 10px 0px;
 padding: 20px 10px 20px 10px;
   width: 538px;
 text-align: justify;
  color: #333;
  border-top:1px dotted #666;
 border-bottom:1px dotted #666;
}
#productDescription h3{
   margin: 0px;
  padding: 0px;
 color: #996000;
 /*text-decoration: underline;*/
}
#productDescription li{
  margin: 2px 0px 2px 0px;
  padding: 0px;
 color: #333333;
 /*border: 1px solid red;*/
}
#productDescription li.argument_co{
  margin: 2px 0px 3px 0px;
  padding: 0px;
 color:#ff5200;
  font-weight: bold;
}
.date_dispo{
 margin: 0px;
  padding: 0px;
 text-align: right;
  font-style: italic;
 font-size: 1em;
 font-weight: bold;
  color: #FF0000;
}
div#productInfo form#cart_quantity {
  width:136px;
  text-align:center;
  margin: 0px 0px 0px 0px;
 /*border: 1px solid red;*/
}
/*-------Taille des boutons "Select" dans otpions disponibles-------------------------*/
div#productInfo select{
   width: 160px;
}
/*-------------------------Mise en forme : "pour + d'infos....." ------------------*/
#productUrl {
   margin: 10px 0px 10px 0px;
  padding: 0px;
 width: 560px;
 text-align:center;
  color: #333;
  /*border: 1px solid green;*/
}
#productUrl a{
   font-weight: bold;
  /*border: 1px solid green;*/
}
/*--------Mise en forme : "produit ajouter à notre catalogue telle date" --------------*/
#productDateAdded {
   margin: 10px 0px 10px 0px;
  padding: 0px;
 width: 560px;
 text-align:center;
  color: #FF3333;
 font-weight: bold;
  /*border: 1px solid orange;*/
}
/*-----------------les options des produits-------------------------*/
#productOptions{
  margin: 0px;
  padding: 5px 5px 10px 5px;
  width: 555px;
 background-color: #ddd;
 /*border: 1px solid yellow;*/
}
#productOptions p{
  margin: 10px;
 padding: 0px;
 /*border: 1px solid green;*/
}
#productOptions a{
  color : #ff6000;
  text-decoration:underline;
}
#productOptions a:hover{
  color : #333;
}
#productOptions a:active{
  color: #3333FF;
}
#productOptions a:visited{
 color: #3333FF;
}

/*---gère le bouton ajouter au panier, regarder aussi dans general.css (input.submitBt) pour la mise en forme ---*/
div#productInfo p.formBt{
  margin: 0px 0px 10px 0px;
 padding: 0px;
 width: 560px;
 /*border: 1px solid red;*/

}
div#productInfo .submitBt {} /*--permet de gérer le bouton indépendament ICI--/*
/* +----------------------------------------------------------------------+
// | Les critiques "reviews"
// +----------------------------------------------------------------------+*/

/*---- correspnd au conteneur : critiques actuelles + les notes attribuées (étoiles)--*/
#currentReviews {
   display: block;
   font: 1em  Georgia, Arial, sans-serif; color:#000;
  width: 556px;
   margin: 50px 0px 0px 0px;
  padding: 3px 0px 2px 0px;
   height: 20px;
 color: #333;
  /*background: transparent url(../images/separator_1.gif) bottom no-repeat;*/
  border-top: 1px solid #ff6000;
  border-bottom: 1px solid #ff6000;
 /*border: 1px solid red;*/
}
/*---- correspnd à : critiques actuelles --*/

#currentReviews p.currentReviews {
   float: left;
 /*border: 1px solid blue;*/
}
/*---- correspnd à : note moyenne + les étoiles --*/
#currentReviews p.averageReviews {
   float: right;
 /*border: 1px solid lime;*/
 
}
/*---- correspnd à l'image des étoiles --*/
#currentReviews p img {
   vertical-align:middle;
  /*border: 1px solid lime;*/

}


/*-----conteneur de la critique -------------*/
blockquote.review {
  width: 440px;
  margin: 1em auto;
  padding: 0px 5px 0px 5px;
 background: #C1C19E url(../images/review_top.gif) top no-repeat;
  /*border: 1px solid blue;*/

}

/*----- correspond à la critique (le texte) -------------*/

blockquote.review p.review {
 color: #fff;
  padding: 1em 1em 1em 2em;
 margin: 0px 0px 0px 0px;
  background: transparent url(../images/review_bottom.gif) 97% 100% no-repeat;
  /*border: 1px solid red;*/

}
/*---conteneur de l'auteur de la critique---*/
blockquote.review p cite {
  color: #666;
  display: block;
 text-align: right;
  padding: 1px 6px 6px 6px;
 margin: 0 -5px;
 background: #CCCC99 url(../images/review_cite.gif) bottom left no-repeat;
 border-top: 1px solid #FFF;
 /*border: 1px solid lime;*/

}
/*----- correspond à : "par...." (l'auteur de la critique) -------------*/
blockquote.review cite {
 display: block;
 font-size: 0.8em;
 line-height: 1.5;
 /*border: 1px solid red;*/

}

/*----- correspond à l'image (les étoiles) de  : "par...." (l'auteur de la critique) -------------*/
span.reviewRate img{
   vertical-align: middle;
 /*border: 1px solid yellow;*/
}

span.reviewRate{}
span.reviewDate{}

/*-----  zone de saisie de la critique-------------*/

textarea#review {
  width:420px;
  height: 120px;
  /*border: 1px solid blue;*/
}
/*---- fieldset pour laisser une critique-----*/
form#product_reviews_write fieldset {
   width:430px;
  margin: 0 auto;
 /*border:0px 0px 0px 0px;*/
 /*border: 1px solid purple;*/
 border: none;
}
/*--------titre du fieldset ---------*/
form#product_reviews_write fieldset legend{
  /*border: 1px solid purple;*/
}
/*--------paragraphe du fieldset : correspond aux différents textes et boutons ---------*/
form#product_reviews_write fieldset p{
  margin: 10px 0px 20px 0px;
  padding: 0px;
 text-align: center;
 /*border: 1px solid orange;*/

}
/*-----tire : correspond à "classement" ------*/
form#product_reviews_write fieldset h4{
    float: left;
 margin: 2px 0px 0px 60px;
 padding: 0px;
 text-align: center;
 /*border: 1px solid lime;*/
}
/* +---------------------------------------------------------------------------------------------------------------+
// | La vente additionnelle "also_purchased_products.php" :: "Les clients qui ont acheté ce produit ont aussi acheté"
// +---------------------------------------------------------------------------------------------------------------+*/
#alsoPurchased{
  margin: 20px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 /*border: 1px solid red;*/
}
/*---------titre----------*/
#alsoPurchased h4{
 margin: 10px 0px 20px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid red;*/
}
/*---------Mini conteneur articles----------*/
#alsoPurchased .alsoPurchasedTabs{
 margin: 10px 2px 4px 2px;
   padding: 10px 0px 0px 0px;
  float: left;
  width: 180px; 
 height:180px;
   background:transparent;
 background-image: url(../images/fd_new_product.jpg);
  background-repeat: no-repeat;
 /*border: 1px double orange;*/
}
/*---------idem correspond aux Minis conteneurs articles----------*/
#alsoPurchased dl.alsoPurchasedTabs{
 margin: 0px;
    padding:0px;
  /*border: 1px double purple;*/

}
/*-------------------- titres des produits ------------------------*/
#alsoPurchased dl.alsoPurchasedTabs dt.name{
    margin: 0px 0px 20px 0px;
 padding: 3px 0px 3px 0px;
 text-align:center;
  /*border: 1px solid green;*/
}
/*-------------------- Lien cliquable dans le titre des produits (mise en forme) --------*/
#alsoPurchased dl.alsoPurchasedTabs dt.name a{
    color: #999999;
 font-weight: bold;
  text-decoration: none;
}
#alsoPurchased dl.alsoPurchasedTabs dt.name a:hover{
    color: #000000;
  font-weight: bold;
}
/*---------- gestion de l'image du produit --------------*/
#alsoPurchased dl.alsoPurchasedTabs dd.image{
  margin: 0px 40px 0px 40px;
  padding: 0px;
 width: 100px;
  height: 100px;
 /*border: 1px solid blue;*/
}
/* +--------------------------------------------------------------------------------------------------------+
// | Gestion du module ultrapics :: images supplémentaires
// +------------------------------------------------------------------------------------------------------+*/
/*-------conteneur global---------*/
#additionalImages{
  margin: 0px;
  padding: 10px 0px 10px 0px;
 width: 560px;
 float: left;
  border-bottom: 1px solid #ccc;
  /*border: 1px solid red;*/
}
/*------- titre : images supplémentaires ---------*/
#additionalImages h3{
  margin: 5px 0px 10px 0px;
 padding: 0px;
 /*border: 1px solid orange;*/
}
/*--------- gestion des vignettes :: popup -----------------------*/
#additionalImages a{
  margin: 0px 0px 0px 30px;
 padding: 0px;
 float: left;
  /*border: 1px solid yellow;*/
}
/*--------- gestion des petites images s'il n'y a pas de grande -----------------------*/
#littlePics img{
 margin:0px;
 padding: 0px;
 float: left;
  /*border: 1px solid green;*/
}
/*--------- gestion des grandes images s'il n'y a pas de petite -----------------------*/
#bigPics img{
    margin: 0px;
 padding: 0px;
 text-align: left;
 /*border: 1px solid orange;*/
}
/* +--------------------------------------------------------------------------------------------------------+
// | Gestion du module individual shipping :: frais d'envoi individuel
// +------------------------------------------------------------------------------------------------------+*/
/*------ conteneur----------*/
#productShip{
  margin: 0;
  padding: 0;
 width: 560px;
}
/*------ gestion du teste ----------*/

#productShip p{
 margin: 0;
  padding: 0;
 color: red;
 font-weight: bold;
  font-size: 1em;
 border: 1px solid red;

}


/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (2) : products_listing                                     |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les PRODUITS d'une catégorie ; exemple : je clique sur graphics cards de la       |
// |            catégories hardware dans le menu déroulant des "catégories", j'obtiens un listing, il se    |
// |            gère ICI. (s'il n'y a pas de sous categories sinon voir => Page (6) : index_category_nested)|
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentindex_products.php                                     |
// |                      - catalogincludesmodulesproduct_listing.php                                |
// |                      - catalogincludesmodulesproduct_listing_div_version.php (non traité ici, c'est |
// |                        une option si l'on préfère gérer la liste avec des div plutot qu'une liste de  |
// |                        définition.                                                                     |
// +--------------------------------------------------------------------------------------------------------+
*/
 /* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/

.listing { margin: 0px; padding: 0px;}
/* +----------------------------------------------------------------------+
// | Conteneur de l'article dl
// +----------------------------------------------------------------------+*/
dl.listing {
 float: left;
 width:550px;
 height: 145px;
  background:#F0E2CA;
  margin: 10px 5px 5px 5px;
 padding: 0px 0px 0px 0px;
 background-image: url(../images/fd_listing_produit.jpg);
  background-repeat: repeat-x;
  /*border: 1px solid red;*/
}
dl.listing span{
 color: #FF6600;
 
}
/* +----------------------------------------------------------------------+
// | bordure haute de l'article dl
// +----------------------------------------------------------------------+*/
dl.listing div.listingTop {}

/* +----------------------------------------------------------------------+
// | bordure basse de l'article dl
// +----------------------------------------------------------------------+*/
dl.listing div.listingBottom {}

/* +----------------------------------------------------------------------+
// | Définition, nom de l'article (liens cliquables)
// +----------------------------------------------------------------------+*/
dl.listing dt {
 font-weight:bold;
  margin: 3px 0px 0px 10px;
  padding: 0px;
}
dl.listing dt a{
  color: #FFFFFF;
 font-weight: normal;
}
dl.listing dt a:hover{
  color: #FFFFFF;
 font-weight: bold;
}
/* +----------------------------------------------------------------------+
// | Image de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productImage {
    float: left;
  margin: 25px 0px 0px 0px;
  padding:0px 0px 0px 0px;
}
/* +----------------------------------------------------------------------+
// | Fabricant de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productManufacturer {
  margin: 0px;
 padding: 0px;
}
dl.listing dd.productManufacturer a{
  color: ff6600;
  text-decoration: underline;
}
dl.listing dd.productManufacturer a:hover{
 color: ff6600;
  text-decoration: none;
  font-weight: bold;
}
dl.listing dd.productManufacturer a:active{
 color: #0033FF;
 text-decoration: underline;
}

dl.listing dd.productManufacturer span {}
/* +----------------------------------------------------------------------+
// | Model de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productModel {
  margin: 30px 0px 0px 0px;
  padding: 0px;
}
dl.listing dd.productModel span{}
/* +----------------------------------------------------------------------+
// | Prix de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productPrice {
  float:right;
 margin: -25px 30px 0px 0px;
  padding: 0px 0px 0px 0px;
  /*border:  1px solid blue;*/
  font-size: 1.2em;
 color: #ff5200;
}
dl.listing dd.productPrice span{
 color: #333;
}
dl.listing dd.productPrice span.productSpecialPrice {/*--Prix spécial---*/
 color: #FF5200;
 font-weight: bold;
}

/* +----------------------------------------------------------------------+
// | Quantité de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productQuantity {
 margin:0px;
  padding:0px;
}
dl.listing dd.productQuantity span{}
/* +----------------------------------------------------------------------+
// | Poids de l'article
// +----------------------------------------------------------------------+*/
dl.listing dd.productWeigth {
  margin:0px;
  padding:0px;
}
dl.listing dd.productWeigth span {}
/* +----------------------------------------------------------------------+
// | achat de l'article
// +----------------------------------------------------------------------+*/
dl.listing div.listingBuy {
 float:right;
 margin: 0px 30px 0px 0px;
  padding: 0px 0px 0px 0px;
  /*border: 1px solid green;*/
 
}

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (3) : specials                                             |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les PRODUITS en PROMOTION                                                         |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentspecials.php                                           |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur_principal
// +----------------------------------------------------------------------+*/

.special{
    float: left;
 margin: 10px 1px 10px 1px;
  padding: 0px;
 width: 275px;
 height: 190px;
  background-image: url(../images/fd_promotions.jpg);
 background-repeat: no-repeat;
  /*border: 1px solid yellow;*/
 
}
/* +----------------------------------------------------------------------+
// | Conteneur de l'article dl
// +----------------------------------------------------------------------+*/

dl.special { margin: 10px 1px 5px 1px; padding:0px;}

/* +----------------------------------------------------------------------+
// | Définition, nom de l'article (liens cliquables)
// +----------------------------------------------------------------------+*/
dl.special dt.productName{
  margin: 10px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 height: 45px;
 text-align: center;
 color: white;
 /*border: 1px solid blue;*/
 
}
dl.special dt.productName a{
  margin: 0px;
 padding: 0px;
 color: white;
}
dl.special dt.productName a:hover{
 margin: 0px;
 padding: 0px;
 color: white;
 font-weight: bold;
  text-decoration: underline;
}
/* +----------------------------------------------------------------------+
// | Image de l'article
// +----------------------------------------------------------------------+*/
dl.special dd.productImage{
 
  margin: 10px 0px 0px 20px;
 padding: 0px 0px 0px 0px;
 width: 100px;
 height: 100px;
  /*border: 1px solid orange;*/
}
/* +----------------------------------------------------------------------+
// | Prix normal de l'article
// +----------------------------------------------------------------------+*/
dl.special dd.productPrice{
    /*float: left;*/
 margin: -20px 3px 0px 0px;
 padding: 0px 0px 0px 0px;
 text-align: right;
  /*text-decoration: line-through;*/
  color: #333333;
 /*border: 1px solid red;*/
}

/* +----------------------------------------------------------------------+
// | Prix special de l'article
// +----------------------------------------------------------------------+*/
dl.special dd.productSpecialPrice{

  margin: 0px 3px 0px 0px;
 padding: 0px 0px 0px 0px;
 text-align: right;
  color: #ff5200;
 font-size: 1.2em;
 font-weight: bold;
}

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (4) : Product_new                                        |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les NOUVEAUX produits.                                                            |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentproducts_new.php                                       |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/ 
.productsNew { 
  margin: 0px;
 padding: 0px;
}
/* +----------------------------------------------------------------------+
// | Conteneur de l'article dl
// +----------------------------------------------------------------------+*/
dl.productsNew{
 float: left;
 width:550px;
 height: 145px;
  background:#F0E2CA;
  margin: 10px 5px 5px 5px;
 padding: 0px 0px 0px 0px;
 background-image: url(../images/fd_listing_produit.jpg);
  background-repeat: repeat-x;
  /*border: 1px solid red;*/
}
dl.productsNew span{
 color: #FF6600;
}
/* +----------------------------------------------------------------------+
// | Définition, nom de l'article (liens cliquables)
// +----------------------------------------------------------------------+*/
dl.productsNew dt {
 font-weight:bold;
  margin: 3px 0px 0px 10px;
  padding: 0px;
}
dl.productsNew dt a{
  color: #FFFFFF;
 font-weight: normal;
}
dl.productsNew dt a:hover{
  color: #FFFFFF;
 font-weight: bold;
}
/* +----------------------------------------------------------------------+
// | Image de l'article
// +----------------------------------------------------------------------+*/
dl.productsNew dd.productImage{
  float: left;
  margin: 25px 10px 0px 10px;
  padding:0px 0px 0px 0px;
  width: 100px;
 height: 100px;
}
/* +----------------------------------------------------------------------+
// | Date d'ajout de l'article
// +----------------------------------------------------------------------+*/
dl.productsNew dd.productDateAdded{
 
  margin: 25px 0px 0px 10px;
 padding: 0px 0px 0px 0px;
 color: #333333;
}
/*------------ titre "date d'ajout : " -----------------------*/
dl.productsNew dd.productDateAdded span{}
/* +----------------------------------------------------------------------+
// | Fabricant de l'article
// +----------------------------------------------------------------------+*/
dl.productsNew dd.productManufacturer{
  margin:0px 0px 0px 10px;
 padding:0px 0px 0px 0px;
  color: #333333;
}
/*------------ tire "fabricant : " -----------------------*/
dl.productsNew dd.productManufacturer span{}
/* +----------------------------------------------------------------------+
// | Prix de l'article
// +----------------------------------------------------------------------+*/
dl.productsNew dd.productPrice{
  /*float:right; */
 margin: 0px 10px 0px 0px;
  padding: 0px 0px 0px 0px;
  /*border:  1px solid blue;*/
  font-size: 1.2em;
 color: #ff5200;
}
/*------------ tire "prix : " -----------------------*/
dl.productsNew dd.productsPrice span{}
/* +----------------------------------------------------------------------+
// | Acheter l'article
// +----------------------------------------------------------------------+*/
dl.productsNew div.productBuynow {
 float: right;
 margin: 20px 10px 0px 0px;
 padding: 0px 0px 0px 0px;
  /*border: 1px solid green;*/
}
/* +----------------------------------------------------------------------+
// | ???
// +----------------------------------------------------------------------+*/
dl.productsNew div.spacer {
  clear: right;
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (5) : Whatsnew_infobox                                    |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les produits en INDEX ou en cliquant sur "catalogue" du Breadcrumb.               |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludesmodulesnew_products.php                                       |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur
// +----------------------------------------------------------------------+*/
.newProduct{ 
    margin: 4px 2px 4px 2px;
    padding:0px;
  float: left;
  width: 180px; 
 height:180px;
   background:transparent;
 background-image: url(../images/fd_new_product.jpg);
  background-repeat: no-repeat;
 /*border: 1px double orange;*/
}
/* +----------------------------------------------------------------------+
// | Titre
// +----------------------------------------------------------------------+*/
.newProduct h4 {} /*----inexistant dans new_products.php----*/
/* +----------------------------------------------------------------------+
// | Mini conteneur de l'article
// +----------------------------------------------------------------------+*/
dl.newProduct{}
/* +----------------------------------------------------------------------+
// | Définition, nom de l'article (liens cliquables)
// +----------------------------------------------------------------------+*/
dl.newProduct dt.name{
  margin:0px;
 padding: 3px 0px 3px 0px;
 /*background-color: #333333;*/
  height: 40px;
 /*border: 1px solid green;*/
  text-align:center;
  vertical-align: middle;
}
dl.newProduct dt.name a{
 color: #999999;
 font-weight: bold;
  text-decoration: none;
}
dl.newProduct dt.name a:hover{
  color: #000000;
 font-weight: bold;
}
/* +----------------------------------------------------------------------+
// | Image de l'article
// +----------------------------------------------------------------------+*/
dl.newProduct dd img { 
 width: 80px;
 height: 80px;
  /*border: 1px solid green;*/
}
dl.newProduct dd.image { 
 margin: 0px 0px 0px 0px;
 padding: 0px 40px 2px 40px;
 /*border: 1px solid red;*/
}
/* +----------------------------------------------------------------------+
// | Prix de l'article
// +----------------------------------------------------------------------+*/
dl.newProduct dd.price { 
  margin: 0px;
 padding: 0px 0px 0px 0px;
 color: #FF5200;
 text-align: center;
 font-weight: bold;
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (6) : index_category_nested                                |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les CATEGORIES lorsque l'on clique dessus dans les categories déroulantes.        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentindex_category_nested.php                              |
// |                      - catalogincludescontentindex.php                                              |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur
// +----------------------------------------------------------------------+*/
div#index {
 /*border: 1px solid purple;*/
}

/*------------------------- Image d'en-tête des catégories -------------------*/
div#headingCatImg {
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
   text-align:left;
  /*border: 1px solid orange;*/
}

#indexDefaultTitle {
    padding: 15px 0 15px 0 ; 
    background: transparent url(images/table_background_default.gif) no-repeat  right;
    border: 1px solid blue;
}
/* +----------------------------------------------------------------------+
// | Conteneur des images
// +----------------------------------------------------------------------+*/
div#categoriesImages {
 margin: 20px 0px 0px 0px;
 padding: 0px;
 height: 500px; 
    border: 0px solid #000;
   /*border: 1px solid yellow;*/
 background-color: #ff6000;
  background-image: url(../images/fd_cat_casque.jpg);
 background-position: right;
 background-repeat: no-repeat;
}
/*------------------------- les vignettes -------------------*/
div#categoriesImages .categoriesThumbs {
  /*float:left;*/
 /*width: 100px;*/
   margin: 0px 0px 10px 10px;
  padding: 0px;
 /*height: 20px;*/
 width: 180px;
   text-align:left;
  background-color: transparent;
    /*border-top: 1px solid #999;*/
    /*border-right: 2px solid #555;*/
    /*border-bottom: 2px solid #555;*/
    /*border-left: 1px solid #999;*/
}
/*------------------------- les liens sous les vignettes -------------------*/
div#categoriesImages .categoriesThumbs a{
  margin: 0px;
  padding: 0px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
div#categoriesImages .categoriesThumbs a:hover{
 color: #fff;
  font-weight: bold;
  text-decoration: underline;
}
/*------------------------ Les fabricants -------------------*/
fieldset.manufacturerFilter {
  border:0px;
}
/* +----------------------------------------------------------------------+
// | Class diverses
// +----------------------------------------------------------------------+*/
/*-------------- gère les titres des différentes pages --------------------*/
.french{
  color:#666666;
}
/*-------------- Salutations de l'utilisateur --------------------*/
p.customerGreeting{
 color: #FF00FF;
}

.textMain{
  /*border: 1px solid blue;*/
}
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar cymbeline » Jeu 26 Juil 2007, 00:22

IV ° - Checkout.css

Code: Tout sélectionner
/* +----------------------------------------------------------------------+
// | Nom du fichier : checkout.css                             |
// +----------------------------------------------------------------------+
// | Copyright (c) : 2006 => oscss (http://www.oscss.org/)                |
// | Released under the GNU General Public License               |
// +----------------------------------------------------------------------+
// | Auteur : Cymbeline                                             |
// +----------------------------------------------------------------------+
// | Site      :   oscss/demo                                    |
// | Creation   :    01-01-2007                            |
// | Modifie   :                               |
// | Version   :  1.1                            |
// +----------------------------------------------------------------------+
// | Description :                                    |
// |                                                 |
// | Gère la présentation des pages lors du processus de commande         |
// |                                                                      |
// | - Regroupe les pages : (1) shopping_cart                             |
// |                        (2) checkout_shipping                         |
// |               (3) checkout_shipping_address                 |
// |               (4) checkout_payment                          |
// |               (5) checkout_payment_address                  |
// |               (6) checkout_confirmation                     |
// |               (7) checkout_success                          |
// +----------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------------------------------------+
// |  Barre qui affiche la progression du client dans les étapes de sa commande
// |  ::info livraison :: info paiement :: confirmation :: fini::
// |  se retrouve dans les pages checkout_confirmation, payment...
// +----------------------------------------------------------------------------------------------------+*/
ul.checkoutBar {
  margin: 10px 5px 10px 0px;
  padding: 0px;
 width: 560px;
 height: 19px;
 background-color: #000000;
  /*border: 1px solid red;*/
}

ul.checkoutBar li{
 margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 25px;
  /*text-align:center;*/
  float:left;
 /*width:130px;*/
  display:block;
  /*border:1px solid yellow;*/
  /*border-width: 0px 0px 1px 0px;*/
  color: #FFFFFF;
 /*border: 1px solid blue;*/
}
ul.checkoutBar li a{
  text-decoration: underline;
}
ul.checkoutBar li a:hover{
  color: #ff8000;
}
ul.checkoutBar li.currentCheckoutBar {
  color: #FF8000;
}

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (1) : shopping_cart                                         |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présenter les produits qui sont dans le panier                                              |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur panier ou après avoir cliquer sur acheter dans une page produit |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentshopping_cart.php                                      |
// |                                                                                                    |
// |                                                                                                    |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/
div#shoppingCart {
  margin: 0px;
  padding : 0px;
  /*border: 1px solid red; */
}
/* +----------------------------------------------------------------------+
// | Titre "Qu'y a t'il dans mon panier ?"
// +----------------------------------------------------------------------+*/
div#shoppingCart h1 {
 margin: 0px 0px 20px 0px;
   padding: 0px; 
   background: transparent url(../../../images/table_background_cart.gif) no-repeat  right;
}
/* +----------------------------------------------------------------------+
// | Conteneur du fieldset
// +----------------------------------------------------------------------+*/
div#cartContent {
  margin: 0px 0px 0px 0px;
  padding : 0px 0px 0px 0px;
  /*border: 1px solid green;*/
  width: 500px;
}
/* +----------------------------------------------------------------------+
// | Fieldset
// +----------------------------------------------------------------------+*/
div#cartContent fieldset{
 margin: 0px 0px 0px 0px;
  padding : 20px 0px 0px 0px;
  border: none;
 width: 560px;
}
div#cartContent fieldset legend{/*--- je l'ai supprimé dans shopping_cart.php ---*/
 margin: 0px 0px 0px 0px;
  padding : 0px 0px 0px 0px;
 /*border: 1px solid red;*/
}
/* +----------------------------------------------------------------------+
// | Cartouche des produits
// +----------------------------------------------------------------------+*/
div.cartProduct {
  margin: 10px 0px 10px 0px; 
  padding: 20px 0px 0px 0px; 
  clear: left;
 width: 540px;
  height: 100px;
  border-top: 1px solid #ccc ;
  border-bottom: 1px solid #ccc ;
 /*border: 1px solid lime;*/
 /*background-color: #CCCCCC;*/
}
/* +----------------------------------------------------------------------+
// | Suppression de l'article (contient la croix + la case à cocher)
// +----------------------------------------------------------------------+*/
div.cartProduct p.cartDelete {
 float: left;
 margin: 30px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  width: 120px;
 /*border: 1px solid red; */
 
}

/*------------ infobulle -----------------------*/
div.cartProduct p.cartDelete label{
   width:15px;
    background: transparent url(../images/cross.gif) no-repeat ;
    margin: 0px 0px 0px 0px;
 padding:0px 0px 0px 0px;
  /*border: 1px solid blue;*/
}
/*----Affiche "supprimer" ici il est caché ----------------*/
div.cartProduct p.cartDelete span{
  width:30px;
  margin: 0px 0px 0px 0px;
 padding:0px 0px 0px 20px;
  /*visibility: hidden; */
  /*text-indent: -9999px;*/
 /*border: 1px solid lime;*/
}
/* +----------------------------------------------------------------------+
// |Image de l'article cliquable
// +----------------------------------------------------------------------+*/
div.cartProduct a.tn {
 float: left;
 width: 100px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid red;*/
}
div.cartProduct a.tn img { 
  /*border: 3px solid green; */
  /*border-width: 0;*/
}
/* +----------------------------------------------------------------------+
// | Informations concernant  l'article
// +----------------------------------------------------------------------+*/
div.cartProduct ul {
   float:left;
   margin: 0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  width: 300px;
 height: 80px;
 /*border: 2px dotted yellow;*/
}
div.cartProduct li {
   list-style: none;
    font-size: small;
   line-height: 1.2em;
    margin: 0px;
   padding: 0px;
 /*border: 1px dotted orange;*/
}
/*------------ nom de l'article -----------------------*/
div.cartProduct li.cartName {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 10px;
  background-color:#000000;
 color: #FFFFFF;
 font-weight:bold;
   /*border-left: 1px solid;*/
 /*border: 1px solid purple;*/
}
/*------------ quantité d'article -----------------------*/
div.cartProduct li.cartQty {
  padding: 0px;
    margin: 20px 0px 0px 40px;
  color: #666;   
   /*border-left: 1px solid;*/
 /*border: 1px solid lime;*/
}
div#cartContent input {
  width:2em;
 margin: 0px 0px 0px 0px;
 padding:0px 0px 0px 0px;
  /*border: 1px solid yellow; */
 
}
/*------------ Prix de l'article -----------------------*/
div.cartProduct li.cartPrice {
  margin: 0px;
  padding: 10px 0px 0px 0px;
  height: 30px;
   color: #ff5200;
 font-weight: bold;
  font-size: 1em;
   font-style: italic;
    margin: -30px 0px 0px 200px; 
    /*border-left: 1px solid;*/
 /*border: 1px solid red;*/
}
div.cartProduct span.cartAttributes {
  font-weight:normal;
   font-style: italic;
   font-size:0.8em;
  color:#000000;
 
}
/* +----------------------------------------------------------------------+
// | Sous-total des articles
// +----------------------------------------------------------------------+*/
p.cartSubTotal  {
  text-align:right;
 margin: 0px 0px 20px 0px;
   padding: 0px 0px 0px 40px;
  width: 500px;
 /*color: #FFCCFF;*/
 /*border: 1px solid red;*/
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (2) : checkout_shipping                                    |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présente les informations de livraisons pour la commande en cours                           |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur commander depuis le panier                                      |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentcheckout_shipping.php                                  |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +---------------------------------------------------------------------------------+
// |  conteneur principal
// +---------------------------------------------------------------------------------+*/
#checkoutShipping {
  /*border: 1px solid orange;*/
}
/* +----------------------------------------------------------------------+
// |  titre "Information livraison"
// +----------------------------------------------------------------------+*/
div#checkoutShipping h1  { 
   padding: 0px 0px 10px 0px;
  margin: 0px 0px 0px 0px;
}
/* +----------------------------------------------------------------------+
// |  Adresse d'expédition
// +----------------------------------------------------------------------+*/
.shippingAddress {
  margin: 0px;
  padding: 0px;
 border-bottom: 1px solid #ccc ;
}
/*--------------titre I :: Adresse d'expédition + (P)aragraphe -------------*/
.shippingAddress h3 {
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
 text-decoration: underline;
}
.shippingAddress p {
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #333;
}
/*------------titre II ::  adresse d'expédition (retenue) + (P)aragraphe-------------------------*/
.shippingAddress  h4 {
 color:#ff6000;
}

.shippingAddress p.currentAdress {
 color: #66FF66;
}
/* +----------------------------------------------------------------------+
// |  Méthode d'expédition
// +----------------------------------------------------------------------+*/
.shippingMethod {
  margin: 0px;
  padding: 10px 0px 0px 0px;
  border-bottom: 1px solid #ccc ;
 /*border: 1px solid blue;*/
}
/*--------------titre :: Méthode d'expédition + (P)aragraphe "Veuillez choisir...." -------------*/
.shippingMethod h3 {
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #FF6000;
 text-decoration:underline;
}
.shippingMethod p {
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 /*color: #CC99FF;*/
}
.shippingMethod p.infoText {
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #666666;
}
/* +----------------------------------------------------------------------+
// |  Sélection de la méthode d'expédition // les cases à cocher
// +----------------------------------------------------------------------+*/
div.shippingMethod p.shippingSelect  {
   text-align:left;
    background-color: #CCCCCC;
    margin:0.4em 0em 0em 0em;
  padding:0px 0px 0px 0px;
  /*border: 1px solid #fff;*/
}
/* +----------------------------------------------------------------------+
// |  onmouseover="this.id='mouseOver';" onmouseout="this.id='mouseOutpost'
// |  il se gèrent dans general.css
// +----------------------------------------------------------------------+*/

/*--------------TITRES des noms de méthode :: Correspond à "Frais d'envoi" +   -------------*/
/*--------------"Frais au total" + "Tableau de coût de livraison par zone et régions"-------*/
div.shippingMethod span.methodName  {
   color: #333;
}
/*--------------ICON des noms de méthode :: S'il y a des icones ?? -------------*/
/*-------------------------------------NON TESTE----------------------------------*/
div.shippingMethod span.methodIcon  {
   color: #FFFFFF;
}
/*--------------LIBELLES des titres de méthode :: Correspond à "Forfait" + -------------*/
/*-----------------------------  Meilleurs choix"  -----------------------------------*/
div.shippingMethod span.methodTitle  {
   color: #0033FF;
}
/*--------------PRIX des méthodes :: Correspond à "Forfait" + -------------*/
/*-----------------------------  Meilleurs choix"  -----------------------------------*/
div.shippingMethod span.methodPrice  {
    color: #FF0000;
}
/*-Attibuts du texte général :: Correspond à "Pas de livraison possible vers le pays sélectionné "-*/

div.shippingMethod span {
    color: #999999;
}
/* +----------------------------------------------------------------------+
// | Ajout des commentaires
// +----------------------------------------------------------------------+*/
.checkoutComment {
 margin: 20px 0px 20px 0px;
  padding: 0px 0px 0px 0px;
 width: 560px;
 /*border: 1px solid red;*/
  /*color: #FF9900;*/
 text-align: left;
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (3) : checkout_shipping_address                                 |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présente les informations de LIVRAISON (adresse) pour la commande en cours                  |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur changer d'adresse depuis la page information LIVRAISON          |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentcheckout_shipping_address.php                          |
// |                      - catalogincludesmodulescheckout_new_address                                   |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// |  conteneur principal
// +----------------------------------------------------------------------+*/
#checkoutShippingAddress {
  /*border: 1px solid red;*/
}

/* +----------------------------------------------------------------------+
// |  titre "Information livraison"
// +----------------------------------------------------------------------+*/

div#checkoutShippingAddress h1{}


/*-----Gérés aussi dans checkout_shipping.css donc je désactive -------------*/


/* +----------------------------------------------------------------------+
// |  Adresse d'expédition
// +----------------------------------------------------------------------+*/
/*
.contentBox shippingAddress {
 border: 1px solid blue;
}
*/
/*--------------titre I :: Adresse d'expédition + (P)aragraphe -------------*/
/*
.contentBox shippingAddress h3 {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #000099;
}
.contentBox shippingAddress p {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #0099FF;
}
*/

/*------------titre II ::  adresse d'expédition (retenue) + (P)aragraphe-------------------------*/
/*
.contentBox shippingAddress  h4 {
 color:#66CC00;
}

.contentBox shippingAddress p.currentAdress {
  color: #66FF66;
}
*/
/* +----------------------------------------------------------------------+
// |  Entrées du carnet d'adresses
// +----------------------------------------------------------------------+*/
.OtherShippingAddress {
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 10px 0px;
  border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
}
/*--------------titre :: Entrées du carnet d'adresses + (P)aragraphe "Veuillez choisir...." -------------*/
.OtherShippingAddress h3 {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
 text-decoration: underline;
}
.OtherShippingAddress p {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #333;
}
/*--------------titre :: Veuillez choisir + (P)aragraphe -------------*/
.OtherShippingAddress h4 {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
}
/* +----------------------------------------------------------------------+
// |  Nouvelle adresse de facturation
// +----------------------------------------------------------------------+*/
#checkoutShippingAddress h3{
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
 text-decoration: underline;

}
/*- ---- TEXTE : "Veuillez utilisez ce formulaire..........cette commande" -*/
#checkoutShippingAddress p{
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #333;
}
/*-------------------------------------------------------------------------------------------------*/
/*----------------------------------le formulaire se gère dans general.Css-------------------------*/
/*-------------------------------------------------------------------------------------------------*/



/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (4) : checkout_payment                                    |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présente les informations de paiement pour la commande en cours                             |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur continuer depuis la page information livraison                  |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentcheckout_payment.php                                   |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +---------------------------------------------------------------------------------+
// |  conteneur principal(suppression de la class OrderProcess du fichier checkout_payment.php)
// +---------------------------------------------------------------------------------+*/
#checkoutPayment {
 /*border: 1px solid orange;*/
}
/* +----------------------------------------------------------------------+
// |  titre "Information paiement"
// +----------------------------------------------------------------------+*/

div#checkoutPayment h1  { 
 margin:0px;
   padding: 0px ; 
}
/* +----------------------------------------------------------------------+
// | Conteneur : Adresse de facturation
// +----------------------------------------------------------------------+*/
.billingAddress {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid blue;*/
}
/*--------------titre I :: explication concernant l'adresse de facturation + (P)aragraphe -------------*/
.billingAddress h3 {
  margin: 0px 0px 10px 0px;
 padding: 0px;
 color: #ff6000;
 text-decoration: underline;
}
.billingAddress p {
 margin: 0px 0px 20px 0px;
 padding: 0px;
 color: #333;
}
.billingAddress a {
  text-decoration: underline;
}

/*------------titre II ::  adresse de facturation retenue + (P)aragraphe-------------------------*/
.billingAddress  h4 {
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
}

.billingAddress p.currentAdress {
 color: #333;
}
/* +----------------------------------------------------------------------+
// |  Conteneur Méthode de paiement
// +----------------------------------------------------------------------+*/
.paymentMethod {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 border-color: #ccc;
 border-top: 1px solid;
  border-bottom: 1px solid;
 /*border: 1px solid yellow;*/
}
/*--------------titre I :: Methode de paiement -------------*/
.paymentMethod h3 {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
 text-decoration:underline;
}
/*-------------- texte d'information :: "veuillez choisir....commande" -------------*/
.paymentMethod p.textInfo {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #333;
}
/*-------------- pavé renseignements carte de crédit -------------*/
div.methodSelect{
  margin: 10px 0px 20px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid black;*/
  /*background-color: #999999;*/

}
/*--- pavés choix de la méthode : "carte de crédit", "à la livraison"...(avec les cases à cocher) + background -------------*/
.methodName{
 color: #333;
  font-weight: bold;
  /*border: 1px solid red;*/
}
.clearer {
 margin: 0px;
  padding: 0px;
 /*height: 20px;*/
   /*background-color: #CCFF99;*/
  /*border: 1px solid lime;*/
}

/*--------------- Erreur paiement----------------------*/
.paymentError{
 color: #FFFFFF;
 background-color: #FF0000;
}
/*---- Titres des fields :: propriétaire, numéro, date d'expiration de la carte -------*/
.paymentFields{
  margin: 10px 0px 10px 0px;
  padding: 0px;
 color: #333;
  /*border: 1px solid red;*/
}
/* +----------------------------------------------------------------------+
// | Ajout des commentaires :: se gère avec checkout_shipping
// +----------------------------------------------------------------------+*/

.checkoutComment {}
/* +----------------------------------------------------------------------+
// | Gestion des conditions générales de vente (creation d'une class "cgv"
// | rajoutée dans checkout_payment.php pour le fieldset correspondant (ligne 136)
// +----------------------------------------------------------------------+*/
fieldset.cgv {
 margin: 30px 0px 20px 0px;
 padding: 0px 0px 0px 0px;
 /*background-color: #FFFFCC;*/
  border: none;
}
fieldset.cgv legend{
 color: #0033FF;
 font-weight:bold;
 
  /*background-color: #000000;
  color: #FFFFFF;*/
}
/*---- J'ai lu et accepté les cgv -------*/
fieldset.cgv label{
 margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 width: 380px;
 /*height: 30px;*/
   /*background-color:#CC99FF;*/
 color: #333;
  /*font-weight: bold;*/
  text-align: left;
}
fieldset.cgv a{
  text-decoration: underline;
}
/* +------------------------------------------------------------------------------------+
// |  Continuer la procédure de commande
// +------------------------------------------------------------------------------------+*/
.formBt {
 margin: 20px 0px 20px 0px;
  padding: 0px 0px 0px 0px;
 text-align: left;
}

/*--------------anciens fichiers-------------------*/
/*
fieldset.selectPayment {
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin:1em 0em 0em 0em;
}

fieldset.selectPayment p {
  margin: 0.6em 0em 0em 0em;
   
}

fieldset.selectPayment label {
 width: 180px;
  line-height: 20px;
 margin: 0px 5px 0px 0px;
 float: left;
 text-align: right;
}
*/
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (5) : checkout_payment_address                                |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présente les informations de facturation (adresse) pour la commande en cours                |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur changer d'adresse depuis la page information  PAIEMENT          |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentcheckout_payment_address.php                           |
// |                      - catalogincludesmodulescheckout_new_address                                   |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +---------------------------------------------------------------------------------+
// |  conteneur principal
// +---------------------------------------------------------------------------------+*/
#checkoutPaymentAddress {
  margin: 0px;
  padding: 0px;
 /*border: 1px solid orange;*/
}
/* +----------------------------------------------------------------------+
// |  titre "Information paiement"
// +----------------------------------------------------------------------+*/

div#checkoutPaymentAddress h1  { 
  margin: 0px;
    padding:  0px ; 
}
/* +----------------------------------------------------------------------+
// |  Adresse de facturation
// +----------------------------------------------------------------------+*/
.paymentAddress {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid blue;*/
}
/*--------------titre I :: Adresse de facturation + (P)aragraphe -------------*/
.paymentAddress h3 {
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
 text-decoration: underline;
}
.contentBox_paymentAddress p {
  margin: 0px;
  padding: 10px 0px 10px 0px;
 color: #333;
}
/*------------titre II ::  adresse de facturation (retenue) + (P)aragraphe-------------------------*/
.paymentAddress  h4 {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
}

.paymentAddress p.currentAdress {
 color: #333;
}
/* +----------------------------------------------------------------------+
// |  Entrées du carnet d'adresses
// +----------------------------------------------------------------------+*/
.AddressBookEntries {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 10px 0px;
  border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;

}
/*--------------titre I :: Entrées du carnet d'adresses -------------*/
.AddressBookEntries h3 {
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
 text-decoration: underline;
}
/*--------------titre II :: Veuillez choisir -------------*/
.AddressBookEntries h4 {
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
}
/*- ---- TEXTE : "Veuillez choisir l'adresse.......... envoyée ailleurs" -*/
.AddressBookEntries p{
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #333;
}
/* +----------------------------------------------------------------------+
// |  Nouvelle adresse de facturation
// +----------------------------------------------------------------------+*/
div#checkoutPaymentAddress h3{
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
 text-decoration: underline;

}
/*- ---- TEXTE : "Veuillez utilisez ce formulaire..........cette commande" -*/
div#checkoutPaymentAddress p{
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #333;
}
/*-------------------------------------------------------------------------------------------------*/
/*----------------------------------le formulaire se gère dans general.Css-------------------------*/
/*-------------------------------------------------------------------------------------------------*/

/* +------------------------------------------------------------------------------------+
// |  Continuer la procédure de commande
// +------------------------------------------------------------------------------------+*/
.formBt {
 margin: 20px 0px 20px 0px;
  padding: 0px 0px 0px 0px;
 text-align: left;
}

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (6) : checkout_confirmation                                 |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présente le recapitulatif de la commande                                                    |
// |                                                                                                        |
// | sur le site : S'obtient en cliquant sur continuer depuis la page information paiment                   |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentcheckout_confirmation.php                              |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// |  Conteneur principal
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation {
 margin: 0px;
  padding: 0px;
 /*border: 1px solid blue;*/

}
/* +----------------------------------------------------------------------+
// |  titre "Confirmation commande"
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation h1 {}
/* +----------------------------------------------------------------------+
// | Autres titres
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation h4  {
    margin: 0px;
  padding: 0px;
}
/* +----------------------------------------------------------------------+
// |  Mise en forme générale des tableaux
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation table  { 
    font-size:1em;
    width:98%;
    margin: 20px 0px 20px 0px;
  padding: 0px 0px 0px 0px;
   border-collapse: collapse;
  /*border: 1px solid red;*/
}
/* +----------------------------------------------------------------------+
// |  definit les cellules d'en-tête
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation table thead th  { 
   vertical-align: bottom;
    border: 1px solid gray; 
   white-space: normal;
    background:#000;
}
/* +----------------------------------------------------------------------+
// |  definit les cellules
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation table tbody td  { 
    vertical-align: middle;
    border: 1px solid gray; 
   white-space: normal;
}
/* +----------------------------------------------------------------------+
// | Détails des adresses TABLEAU
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation table.invoiceAdress{
 
  /*color: #FF0000;  */
}

/* +----------------------------------------------------------------------+
// |  adresse de livraison en-tête (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation table thead th.deliveryAddress  {
 color: #fff; 
 
}
div#checkoutConfirmation table tbody td.deliveryAddress  {
 color: #333; 
}
/* +----------------------------------------------------------------------+
// |  adresse de facturation en-tête (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation table thead th.billingAdress  {
  color: #fff;
 
}
div#checkoutConfirmation table tbody td.billingAdress  {
 color: #333;
 
}
/* +----------------------------------------------------------------------+
// |  détails des produits achetés TABLEAU
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation table.invoiceDetails{

 /*color: #9933FF; */
 
}
/* +----------------------------------------------------------------------+
// |  détails des PRODUITS (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation table thead th.invoiceProducts  {
  color: #fff;
 
}
div#checkoutConfirmation table tbody td.invoiceProducts  {
 color: #333;
 
}

/* +----------------------------------------------------------------------+
// |  détails des QUANTITES (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation table thead th.invoiceQty  {
  color: #fff;
 
}
div#checkoutConfirmation table tbody td.invoiceQty   {
 color: #333;
 
}
/* +----------------------------------------------------------------------+
// |  détails des TAXES (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation table thead th.invoiceTaxes  {
  color: #fff;
 
}

div#checkoutConfirmation table tbody td.invoiceTaxes   {
 color: #333;
 
}
/* +----------------------------------------------------------------------+
// |  détails des PRIX (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#checkoutConfirmation table thead th.invoicePrice  {
 color: #fff;
 
}
div#checkoutConfirmation table tbody td.invoicePrice   {
 color: #333;
 
}
/* +---------------------------------------------------------------------------------------------------------+
// |  détails des TOTAUX (les tires : TITLE ; le contenu : TEXT) :: contenu uniquement(TBODY TD) pas d'entête
// +---------------------------------------------------------------------------------------------------------+*/

div#checkoutConfirmation table tbody td.otTtitle  {
  text-align:right;
 border: 0px solid gray;
  color: #000000; 
}
div#checkoutConfirmation table tbody td.otText  {
 color: #0033FF;
 
}

/*---------------------------------------------------------------------------------------*/
/* les infos suivante apparaissent si on laisse un commentaire à l'étape précédente et
que l'on mentionne une carte de crédit pour le règlement. */
/*---------------------------------------------------------------------------------------*/
/* +------------------------------------------------------------------------------------+
// |  Infos confirmation paiement
// +------------------------------------------------------------------------------------+*/
.paymentInformation {
 margin: 10px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
  text-align: center;

}
.paymentInformation h3{
 margin: 10px 0px 20px 0px;
  padding: 0px 0px 0px 0px;
 color: #666666;

}

/* +------------------------------------------------------------------------------------+
// |  Infos commentaires client
// +------------------------------------------------------------------------------------+*/
.comment {
 margin: 0px;
  padding: 0px;
 /*border: 1px solid purple;*/
 text-align: center;
 border-bottom: 1px solid #ccc;

}

.comment h3{
 margin: 10px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 color: #ff6000;
}
.comment blockquote{
  margin: 10px 0px 0px 0px;
 padding: 0px;
 /*border: 1px solid purple;*/
 color: #333;
  text-align: justify;
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (7) : checkout_success                                   |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  présente le texte de fin de commande avec les remerciements                                 |
// |                                                                                                        |
// | sur le site : S'obtient en cliquant sur continuer depuis la page information facturation               |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentcheckout_success.php                                   |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// |  Conteneur principal
// +----------------------------------------------------------------------+*/
div#checkoutSuccess{
 margin: 0px;
  padding: 0px;
 /*border: 1px solid orange;*/
}
/* +----------------------------------------------------------------------+
// |  Titre : " Votre commande vient d'être prise en compte !"
// +----------------------------------------------------------------------+*/
div#checkoutSuccess h1  {}
/*------------ TEXTE : " Votre commande vient.......jours ouvrés ------------*/ 
.text_success{
 margin: 20px 5px 5px 0px;
 padding: 0px;
 padding: 0px;
 color: #333
}
/*------------ TEXTE : " Vous pouvez voir.......cliquant sur historique" ------------*/ 
.text_see_orders{
  margin: 20px 5px 5px 0px;
 padding: 0px;
 color: #333;
}
/*------------ TITRE : " Merci d'avoir fait vos achats en ligne avec nous !" ------------*/ 

div#checkoutSuccess h3  {
  margin: 20px 0px 0px 0px;
 padding: 0px;
 color: #ff6000;
 text-align: center;
}
/*------------ Gestion des liens dans le texte ------------*/ 
div#checkoutSuccess a{
 margin: 0px;
  padding: 0px;
 color: #ff6000;
 text-decoration: underline;
}
div#checkoutSuccess a:hover{
  margin: 0px;
  padding: 0px;
 color: #fff;
  text-decoration: none;
  background-color: #000000;
}
/*---Je prends la gestion du bouton ici pour éviter des pbm parents/enfants--------*/
div#checkoutSuccess .navBt a{
 color: #fff;
  background-color: #ff5200;
  text-decoration: none;
}
div#checkoutSuccess .navBt a:hover{
 color: #fff;
  background-color: #000;
 text-decoration: none;
}

/* +----------------------------------------------------------------------------------------------------+
// |  Tableau
// +----------------------------------------------------------------------------------------------------+*/
div#checkoutSuccess table  { 
    font-size:1em;
    width:98%;
    margin: 1em 0em 1em 0em;
    border-collapse: collapse;
}
/* +----------------------------------------------------------------------------------------------------+
// |  En-tête du tableau
// +----------------------------------------------------------------------------------------------------+*/
div#checkoutSuccess table thead th  { 
    vertical-align: bottom;
    border: 1px solid gray; 
   white-space: normal;
    background:#E1C897;
}
/* +----------------------------------------------------------------------------------------------------+
// |  Cellules du tableau
// +----------------------------------------------------------------------------------------------------+*/
div#checkoutSuccess table tbody td  { 
    vertical-align: middle;
    border: 1px solid gray; 
   white-space: normal;
  color: #FF0000;
}
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar cymbeline » Jeu 26 Juil 2007, 00:23

V ° -Boxes.css

Code: Tout sélectionner
/* +----------------------------------------------------------------------+
// | Nom du fichier : boxes.css                              |
// +----------------------------------------------------------------------+
// | Copyright (c) : 2006 => oscss (http://www.oscss.org/)                |
// | Released under the GNU General Public License               |
// +----------------------------------------------------------------------+
// | Auteur : Cymbeline                                             |
// +----------------------------------------------------------------------+
// | Site      :   oscss/demo                                            |
// | Creation   :    01-01-2007                            |
// | Modifie   :                               |
// | Version   :  1.1                            |
// +----------------------------------------------------------------------+
// | correspondance PHP : - catalogincludesboxes                        |
// |                                                                      |
// +----------------------------------------------------------------------+
*/
/*------------Conteneur général des différentes Box--------*/
.boxes {
  margin: 0px;
  padding:0px;
  /*line-height: 1.4em; /* bug d'IE */
 background: transparent;
  width: 180px;
  /*color: #7C5D3D;*/
}

.boxes ul  {
 padding: 0px 0px 0px 0px;
  margin: 12px 0px 0px 0px;
 width: 180px;
  /*border: 1px solid blue;*/
}

.boxes li  {
  margin: 0px;
  padding: 1px 0px 1px 0px;
 display: block;
  line-height: 1.1em;
 /*border: 1px solid yellow;*/
}

.boxes a{
 text-decoration: none; 
  padding: 0px;
 margin: 0px;
}

.boxes li a{
 color: #000000;
  background: transparent;
  font-size: 0.8em;
}

.boxes li a:hover{ 
  color: #000000;
  text-decoration: none;
 font-weight: bold;
}

/* +----------------------------------------------------------------------+
// |Box login
// +----------------------------------------------------------------------+*/ 

#loginBox fieldset {}

#loginBox fieldset input {}

#loginBox {}

#loginBox h4 {}

/* +----------------------------------------------------------------------+
// |Box Categories // Menu déroulant
// +----------------------------------------------------------------------+*/

#categoriesBox h4 {
   width:180px;
  height: 20px;
    margin: 0px;
    padding: 0px;
   color: #FFFFFF;
   font-size: 0.9em;
 background-image: url(../images/fd_cat_nav.jpg);
  background-repeat: repeat-x;
  text-align: center;
 font-family: Geneva, Arial, Helvetica, sans-serif;
    /*text-indent:-9999px;*/
    /*background: transparent url(../images/boxes/categories.png) no-repeat;*/
}

#categoriesBox { /*----------Conteneur principale de la categoriBox-------------*/
 width: 180px;
 margin:0px;
  padding: 0px;
 list-style: none;
 z-index:10;
 font-family: Geneva, Arial, Helvetica, sans-serif;
  /*border: 1px solid red;*/
}
#categoriesBox ul{ /*----------Conteneur 1er niveau -------------*/
  margin:0px;
  padding: 0px;
 /*border: 1px solid lime;*/
}

#categoriesBox ul li{ /*----------Conteneur 1er niveau liste-------------*/
 width: 178px;
 margin: 3px 0px 3px 0px; 
  padding: 1px 0px 1px 0px;
 text-align:center;
  border: 1px solid #999999;
  /*height: 20px;*/
}
#categoriesBox ul li a{ /*----------descriptif liste de liens du 1er niveau-------------*/
  margin: 0px; 
  padding: 0px;
 color: #000000;
 font-weight: bold;
 
}
#categoriesBox ul li a:hover, #categoriesBox ul li a:active{ /*----------descriptif liste de liens du 1er niveau-------------*/
  margin: 0px; 
  padding: 0px 5px 0px 5px;
 color: #FFF;
  font-weight: bold;
  /*border: dotted 1px #ff5200;*/
 background-color: #ff8000;
 
}
#categoriesBox li ul{ /*----------Conteneur 2eme niveau "à l'intérieur du 1er"-------------*/
 /*position: absolute;*/
 width: 156px;
 padding: 0px 0px 0px 0px;
  margin: 0px 10px 0px 10px;
  /*text-align: center; */
  /*border: 1px solid orange;*/
 /*background-color: #66FFFF;*/
 
}
#categoriesBox li ul li{ /*----------descriptif liste de liens du 2eme niveau-------------*/
  width: 156px;
 height: 16px
  padding: 3px 0px 3px 0px;
  margin: 3px 0px 3px 0px;
  /*text-align: center;*/
 /*border: 1px solid blue;*/
}

#categoriesBox li li{
 /*width: 156px;*/
 height: 16px;
 padding: 0px 0px 2px 0px;
  margin-right: 0px 0px 0px 0px;
  border: none;
 background-image: url(../images/fd_bt_cat_2emniveau.jpg);
 background-repeat: repeat-x;
 
 
}

#categoriesBox li li a{ 
 
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  font-weight: bold;
  color: #ffffff;
 
}
#categoriesBox li li a:hover{ 
 
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  color: #000000;
 border: none;
 background-color: transparent;
 
 
}
/* +----------------------------------------------------------------------+
// |Box special
// +----------------------------------------------------------------------+*/ 

.specialContent {}
.specialContent img {}

/* +----------------------------------------------------------------------+
// |Box Cart
// +----------------------------------------------------------------------+*/ 
#cartBox {
  width: 178px;
 height: 70px;
 margin:0px 0px 10px 0px;
  padding:0px 0px 0px 0px;
  border: 1px solid #999999;
  background-image: url(../images/panier.jpg);
  background-repeat: no-repeat;
 
 
 
}
#cartBox h4 {
    width:178px;
  height: 20px;
    margin: 0px;
    padding: 0px;
   color: #FFFFFF;
   font-size: 0.9em;
 background-image: url(../images/fd_cat_nav.jpg);
  background-repeat: repeat-x;
  text-align: center;
 font-family: Geneva, Arial, Helvetica, sans-serif;
    /*text-indent:-9999px;*/
    /*background: transparent url(../images/boxes/categories.png) no-repeat;*/
}
#cartBox ul {}
#cartBox li {}
#cartBox a {}

/* +----------------------------------------------------------------------+
// |Box best
// +----------------------------------------------------------------------+*/ 
ul.bestsellersContent {}
ul.bestsellersContent li {}
/* +----------------------------------------------------------------------+
// |Languages
// +----------------------------------------------------------------------+*/ 
.languageContent {}
.languageContent img {}
.languageContent li {}
/* +----------------------------------------------------------------------+
// |Search
// +----------------------------------------------------------------------+*/ 

#searchBox  {
  margin: 20px 0px 10px 2px;
  padding: 0px;
}

#searchBox input {
  width:80px;
}

#searchBox h4 {
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
 /*display:none; */
}

#searchBox input.submitBt  {
 padding:0px 0px 0px 0px;
  margin:5px 0px 0px 0px;
 border-width:0px;
 /*width: 28px;*/
  /*height: 19px;*/
 /*background: transparent url(../images/bouton_ok.png) 0px 0px no-repeat;*/
}

#searchBox input.submitBt:hover {
 border-width:0px;
 /*width: 28px;*/
  /*height: 19px;*/
 /*background: transparent url(../images/bouton_ok.png) -32px 0px no-repeat;*/
}


/* +----------------------------------------------------------------------+
// |Information
// +----------------------------------------------------------------------+*/
#informationBox{
  width: 178px;
 margin:10px 0px 10px 0px;
 padding:0px 0px 0px 0px;
  border: 1px solid #999999;
  /*background-image: url(../images/panier.jpg);*/
  /*background-repeat: no-repeat;*/
 font-family: Geneva, Arial, Helvetica, sans-serif;
}
#informationBox h4 {
   width:178px;
  height: 20px;
    margin: 0px;
    padding: 0px;
   color: #FFFFFF;
   font-size: 0.9em;
 background-image: url(../images/fd_cat_nav.jpg);
  background-repeat: repeat-x;
  text-align: center;
 font-family: Geneva, Arial, Helvetica, sans-serif;
    /*text-indent:-9999px;*/
    /*background: transparent url(../images/boxes/categories.png) no-repeat;*/
}

#informationBox ul{
    margin:0px;
  padding: 0px;
 /*border: 1px solid lime;*/
}
#informationBox li{
    width: 176px;
  margin: 3px 0px 3px 0px; 
  padding: 3px 0px 3px 0px;
 text-align:center;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;

}
#informationBox ul li a{
   /*background-color:#CC66FF;*/
   color: #000000;
}
#informationBox ul li a:hover{
   /*background-color:#CC66FF;*/
   color: #000000;
}
/* +----------------------------------------------------------------------+
// |Nouveautés Box
// +----------------------------------------------------------------------+*/ 
#whats_newBox{}
/* +----------------------------------------------------------------------+
// |Fabricants Box
// +----------------------------------------------------------------------+*/
#manufacturersBox{}
/* +----------------------------------------------------------------------+
// |Critiques Box
// +----------------------------------------------------------------------+*/ 
#ReviewsBox{}
/* +----------------------------------------------------------------------+
// |Devises Box
// +----------------------------------------------------------------------+*/ 
#currenciesBox{}
/* +----------------------------------------------------------------------+
// |Promotions Box
// +----------------------------------------------------------------------+*/ 
#specialsBox{}
/* +----------------------------------------------------------------------+
// |Historique de commande Box
// +----------------------------------------------------------------------+*/ 
#order_historyBox{}
/* +----------------------------------------------------------------------+
// |Meilleures ventes Box
// +----------------------------------------------------------------------+*/ 
#best_sellersBox{}
/* +----------------------------------------------------------------------+
// |Dire à un ami Box
// +----------------------------------------------------------------------+*/
#tell_a_friendBox{}
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar cymbeline » Jeu 26 Juil 2007, 00:24

VI ° - Information.css

Code: Tout sélectionner
/* +----------------------------------------------------------------------+
// | Nom du fichier : informations.css                         |
// +----------------------------------------------------------------------+
// | Copyright (c) : 2006 => oscss (http://www.oscss.org/)                |
// | Released under the GNU General Public License               |
// +----------------------------------------------------------------------+
// | Auteur : Cymbeline                                             |
// +----------------------------------------------------------------------+
// | Site      :   oscss/demo                                    |
// | Creation   :    01-01-2007                            |
// | Modifie   :                               |
// | Version   :  1.1                            |
// +----------------------------------------------------------------------+
// | Description :                                    |
// |                                                 |
// | Gestion des différentes pages de textes indépendantes comme les      |
// | conditions générales de vente, le plan du site, expédition et        |
// | retours...  OU des pages crées par le webmaster                      |
// |                                                                      |
// | - Regroupe les pages : (1)  Conditions                               |
// |                        (2)  Contact_us                               |
// |              (3)  Cookie_usage                             |
// |               (4)  Privacy                              |
// |               (5)  Sitemap                                  |
// |               (6)  Shipping                             |
// |               (7)  Tell a friend                            |
// |               (8)  Extra page                               |
// |               (9)  Extra page                               |
// |               (10) Extra page                               |
// |               (11) Extra page                               |
// |               (12) Extra page                               |
// |               (13) Extra page                               |
// +----------------------------------------------------------------------+
*/
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (1) : conditions                                        |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher les conditions générales de vente                                                   |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur conditions générales de vente                                   |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentcondiditons.php                                        |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur global
// +----------------------------------------------------------------------+*/
#conditions{
  margin: 0px;
  padding: 0px;
 /*border: 1px solid blue;*/
}
/*-------------titre-------------*/
div#conditions h1 {  /*--peut aussi se gérer avec la "class" french dans products.css --*/
 margin: 0px 0px 30px 0px;
 padding: 0px;
 /*border: 1px solid red;*/
}
div#conditions h3 { 
  margin: 10px 0px 10px 0px;
  padding: 0px;
 font-family: Geneva, Arial, Helvetica, sans-serif;
  text-align:left;
  font-size: 0.9em;
 color: #ff6200;
 text-decoration: underline;
 /*border: 1px solid red;*/
}
/*-------------paragraphe-------------*/
div#conditions p{ 
  margin: 10px 0px 10px 0px;
  padding: 0px;
 font-family: Geneva, Arial, Helvetica, sans-serif;
  text-align: justify;
  font-size: 0.9em;
 color: #333;
  /*border: 1px solid purple;*/
}
/*-------------Liste-------------*/
div#conditions li{ 
 margin: 0px;
  padding: 0px;
 font-family: Geneva, Arial, Helvetica, sans-serif;
  text-align: justify;
  font-size: 0.9em;
 color: #333;
  /*border: 1px solid purple;*/
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (2) : Contact_us                                        |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Gérer le formulaire de contact                                                               |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur contact                                                         |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentcontact_us.php                                         |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/
div#contactUs { 
  margin: 0px;
  padding: 0px;
  /*border: 1px solid red;*/
}

/*--------titre---------*/
div#contactUs h1  { /*--peut aussi se gérer avec la "class" french dans products.css --*/
   margin: 0px 0px 20px 0px;
 padding: 0px; 
}
div#contactUs p.infoText{}

/*--------Le formulaire---------*/

div#contactUs fieldset p{
 margin: 0px;
  padding: 10px 0px 10px 0px;
 /*border: 1px solid lime;*/
 
}
div#contactUs fieldset label{
  margin: 0px 10px 0px 0px;
  padding: 0px;
 width: 200px;
  line-height: 20px;
 float: left;
 text-align: right;
 cursor: help;
  /*border: 1px solid purple;*/
 
}
div#contactUs fieldset textarea{}
/*--------Le bouton d'envoi du formulaire---------*/
div#contactUs fieldset p.submitBt{
 margin: 0px;
  padding: 0px;
 text-align: center;
 /*border: 1px solid lime;*/
 
}

/* +----------------------------------------------------------------------+
// | voir general.css pour le formulaire et la gestion des fieldset
// +----------------------------------------------------------------------+*/

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (3) : cookie_usage                                       |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher les informations concernant l'utilisation des cookies                               |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site:                                                                                           |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentcookie_usage.php                                       |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/
#cookieUsage { 
 margin: 0px;
 padding: 0px;
 color: #333;

}
/* +----------------------------------------------------------------------+
// | Titres
// +----------------------------------------------------------------------+*/

#cookieUsage h1  {/*--peut aussi se gérer avec la "class" french dans products.css --*/
 margin: 0px 0px 20px 0px; 
   padding: 0px; 
}
#cookieUsage h2  {
  margin: 0px 0px 20px 0px; 
   padding: 0px; 
 color: #ff6000;
 text-decoration: underline;
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (4) : Privacy                                               |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher les informations "mentions légales" ou vie privée                                   |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur "mentions légales" ou "vie privée"                              |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentprivacy.php                                            |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/
#privacy{
  margin: 0px;
  padding: 0px;
 /*border: 1px solid lime;*/
}
/* +----------------------------------------------------------------------+
// | Titres
// +----------------------------------------------------------------------+*/

#privacy h1  {/*--peut aussi se gérer avec la "class" french dans products.css --*/
  margin: 0px 0px 20px 0px; 
   padding: 0px; 
}

#privacy h3  {/*--peut aussi se gérer avec la "class" french dans products.css --*/
 margin: 10px 0px 10px 0px;
  padding: 0px;
 font-family: Geneva, Arial, Helvetica, sans-serif;
  text-align:left;
  font-size: 0.9em;
 color: #ff6200;
 text-decoration: underline;
 /*border: 1px solid red;*/
}
/* +----------------------------------------------------------------------+
// | Paragraphe
// +----------------------------------------------------------------------+*/

#privacy p  {/*--peut aussi se gérer avec la "class" french dans products.css --*/
 margin: 10px 0px 10px 0px;
  padding: 0px;
 font-family: Geneva, Arial, Helvetica, sans-serif;
  text-align: justify;
  font-size: 0.9em;
 color: #333;
  /*border: 1px solid purple;*/
}

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (5) : Sitemap                                           |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher le plan du site                                                                     |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur plan du site                                                    |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentsitemap.php                                            |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/

#sitemap{
  Margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 width: 560px;
 /*border: 1px solid orange;*/
}
/*-----------Liste-------------------*/
#sitemap ul{
 Margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 width: 560px;
 /*border: 1px dotted red;*/
 
}

#sitemap ul li{
  margin: 0px;
  padding: 0px;
 display:block;
  width:560px; 
  /*border: 1px solid blue;*/
}
#sitemap ul li a{
 Margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 text-decoration: none;
  color: #ffffff;
 background-color: #ff6000;
  width:560px;
 
}
#sitemap ul li a:hover{
  Margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 text-decoration: none;
  color: #000;
}

/* +----------------------------------------------------------------------+
// | les listes sont intégrées les unes dans les autres
// +----------------------------------------------------------------------+*/ 
#sitemap ul li ul{
  margin: 0px;
  padding: 0px;
 display:block;
  width:560px; 
  /*border: 1px solid red;*/
}
#sitemap ul li ul li{
  margin: 0px;
  padding: 0px;
 width:560px; 
 
}
#sitemap ul li ul li a{
  Margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 width: 560px;
 text-decoration: underline;
 color: #ff6000;
 background-color: #fff;
}
#sitemap ul li ul a:hover{
  Margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 text-decoration: underline;
 color: #333;
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (6) : Shipping                                           |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher les infos expeditions et retour                                                     |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur expeditions et retours du site                                  |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentshipping.php                                           |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/

#shipping{
 Margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 border: 1px solid orange;
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (7) : Tell a friend                                         |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité :  Afficher un formulaire pour expedier l'adresse du site à un ami                             |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur dire à un ami                                                   |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontenttell_a_friend.php                                      |
// |                                                                                                   | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/
#tellAfriend{}

#tellafriend h1{}

fieldset.tellaFriend {}

fieldset.tellaFriend input {}
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar cymbeline » Jeu 26 Juil 2007, 00:25

VII ° - Advanced_search.css

Code: Tout sélectionner
/* +----------------------------------------------------------------------+
// | Nom du fichier : advanced_search.css                      |
// +----------------------------------------------------------------------+
// | Copyright (c) : 2006 => oscss (http://www.oscss.org/)                |
// | Released under the GNU General Public License               |
// +----------------------------------------------------------------------+
// | Auteur : Cymbeline                                             |
// +----------------------------------------------------------------------+
// | Site      :   oscss/demo                                    |
// | Creation   :    01-01-2007                            |
// | Modifie   :                               |
// | Version   :  1.1                            |
// +----------------------------------------------------------------------+
// | Description :                                    |
// |                                                 |
// | Gestion du moteur de recherche                                       |
// |                                                                      |
// |                                                                      |
// | - Regroupe les pages : (1)  advanced_search                          |
// |                        (2)  advanced_search_result                   |
// |                                                               |
// +----------------------------------------------------------------------+
*/
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (1) : advanced_search                                     |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : permettre de faire des recherches sur le site                                                |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur recherche avancée                                               |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentadvanced_search.php                                    |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur global
// +----------------------------------------------------------------------+*/
#advancedSearch{
  margin: 0px;
  padding: 0px;
 /*border: 1px solid orange;*/
}
/*-------------titre : 'Recherche avancée"-------------*/
#advancedsearch h1 {
 margin: 0px 0px 20px 0px;
 padding: 0px 0px 0px 0px;
}
#advancedSearch p{
  margin: 20px 0px 20px 0px;
  padding: 0px;
 /*border: 1px solid orange;*/
}
/* +----------------------------------------------------------------------+
// | Le fieldset
// +----------------------------------------------------------------------+*/
fieldset.advancedSearch { 
 width: 495px;
  padding: 10px 10px 10px 10px;
  margin: 0px 0px 0px 0px;
 border: none;
 
}
fieldset.advancedSearch legend { 
 color: #3366FF;
 
}

fieldset.advancedSearch input {
  width: 200px;
}

fieldset.advancedSearch p.check input {
 text-align:left;
 width:15px;
}


fieldset.advancedSearch p {
  margin: 1em 0em 0em 0em;
  padding: 0em 0em 0em 0em;
}

fieldset.advancedSearch label {
 width: 200px;
  margin: 0px 10px 0px 0px;
  float: left;
 text-align: right;
}

p.formBt {
 text-align:center;
}

p.check{
 
  /*border: 1px solid red;*/
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (2) : advanced_search_result                             |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Retourner les résultats de recherche                                                         |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur continuer dans le moteur de recherche                           |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentadvanced_search_result.php                             |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur global
// +----------------------------------------------------------------------+*/
#advancedSearchResult{
  margin: 0px;
  padding: 0px;

}

/*-------------titre : "Produits répondant aux critères de recherche"-------------*/
div#advancedSearchResult h1 {
 margin: 0px 0px 0px 0px;
    padding: 0px 0px 40px 0px ; 
}

div#advancedSearchResult .infoText {
    color: #333;
}
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar cymbeline » Jeu 26 Juil 2007, 00:26

VIII ° - Menu.css

Code: Tout sélectionner
/* +----------------------------------------------------------------------+
// | Nom du fichier : menu.css                              |
// +----------------------------------------------------------------------+
// | Copyright (c) : 2007 => oscss (http://www.oscss.org/)                |
// | Released under the GNU General Public License               |
// +----------------------------------------------------------------------+
// | Auteur : Cymbeline                                             |
// +----------------------------------------------------------------------+
// | Site      :   oscss/demo                                            |
// | Creation   :    01-01-2007                            |
// | Modifie   :                               |
// | Version   :  1.1                            |
// +----------------------------------------------------------------------+
// | correspondance PHP : - catalogincludesboxesmenu.php               |
// |                                                                 | 
// |                                                                     |
// |                                                                    |
// +----------------------------------------------------------------------+
*/


#navcontainer ul{
  position: absolute;
 margin: 0px;
  padding: 0px;
 left: 275px;
  top: 20px;
  width: 480px;
 height: 25px;
 /*border: 1px solid orange;*/

}
#navcontainer li{
 display: inline;
  list-style-type: none;
  /*border: 1px solid red;*/
  font-size: 0.9em;
 font-weight:bold;
 margin:0px;
 padding: 0px 0px 0px 11px;
}
#navcontainer a{
 color:#FFF;
 text-decoration:none;
}

#navcontainer a:link, #navlist a:visited{
 
}

#navcontainer a:hover{
 color:#ffcc66;
  text-decoration:none;
}
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar cymbeline » Jeu 26 Juil 2007, 00:28

Voilà, il faudra remettre les petits traits à leur place ;) pour le design des feuilles de style.

Adapter votre stylesheet, voici une copie du mien.

Code: Tout sélectionner
/* +----------------------------------------------------------------------+
// | Nom du fichier : stylesheet.css                          |
// +----------------------------------------------------------------------+
// | Copyright (c) : 2006 => oscss (http://www.oscss.org/)                |
// | Released under the GNU General Public License               |
// +----------------------------------------------------------------------+
// | Auteur : Cymbeline                                             |
// +----------------------------------------------------------------------+
// | Site      :   oscss/demo                                  |
// | Creation   :    01-01-2007                            |
// | Modifie   :                               |
// | Version   :  1.1                            |
// +----------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// |les imports css
// +----------------------------------------------------------------------+*/


@import url(css/boxes.css);
@import url(css/general.css);
@import url(css/products.css);
@import url(css/informations.css);
@import url(css/menu.css);
@import url(css/index.css);
@import url(css/checkout.css);
@import url(css/advanced_search.css);
@import url(css/account.css);





/* +----------------------------------------------------------------------+
// | BODY - HTML
// +----------------------------------------------------------------------+*/
body {
  font-family: verdana, Helvetica, arial sans-serif;
  background-color:#ffffff;
 margin: 0px;
  padding: 0px;
 z-index: 1;
 
 
 
}
/* +----------------------------------------------------------------------+
// |  MISES EN FORME DIVERSES
// +----------------------------------------------------------------------+*/
.hr_css{
  color: #f0eaf6;
 width: 100%;
  height: 1px;
  margin:0;
 padding: 0;
}
.gras{ font-weight:bold;}
img{border: none;}
.texte_orange{color:#ff6000;}

/*------------ Les titres -----------------------*/
h1 { font-size: 1.3em; color:#381d59; margin:0; padding:0px;}
h2 { font-size: 1.2em; color:#381d59; margin:0; padding:0px;}
h3 { font-size: 1.1em; color:#381d59; margin:0; padding:0px;}
h4 { font-size: 1em; color:#ff8000; margin:0; padding:0px;}
h5 { font-size: 0.9em; color:#381d59; margin:0; padding:0px;}

/* +----------------------------------------------------------------------+
// | CONTENEUR PRINCIPAL "intègre toutes les boîtes"
// +----------------------------------------------------------------------+*/
#conteneur {
  position: absolute;
 width: 760px;
 /*height: 1200px;*/
 padding: 0px;
 /*height: 495px;*/
  left: 50%;
  margin: 0px 0px 0px -380px;
 top: 30px;
  /*background-image: url(img/conteneur.jpg);
 background-repeat:repeat-y;*/
 /*border: 1px solid red;*/
  z-index: 2;
}
/* +----------------------------------------------------------------------+
// |  top
// +----------------------------------------------------------------------+*/
/*
#top {
 position: absolute;
 width: 760px;
 height: 40px;
 top: 70px;
  left: 50%;
  margin-left: -380px;
  padding: 0px;
 border: 1px solid lime;

}

*/
/* +----------------------------------------------------------------------+
// |  HEADER
// +----------------------------------------------------------------------+*/
#header {
  margin: 0px;
  padding: 0px;
 height: 70px;
 background-image: url(images/fond_header_nav.jpg);
  background-repeat: no-repeat;
 background-position: right;
 /*border: 1px solid lime;*/
 
   
}

#header img{
 /*float: left;*/
  margin: 0px;
  padding: 0px;
 
}
#header h1{
 
  font-family: Verdana, Helvetica, arial,sans-serif;
  color: #ff8000;
 font-size: 0.6em;
 padding: 0px;
 margin: 0px;
}

/* +----------------------------------------------------------------------+
// |  BREADCRUMB
// +----------------------------------------------------------------------+*/

#breadCrumb {
 
    position: relative;
   width : 754px;
  height : 30px;
  top: 10px;
  left: 50%;
  margin-left: -377px;
  padding: 5px 0px 0px 5px;
 font-size: 0.7em;
 color: #FFFFFF;
  background-image: url(images/fond_breadcrumb.jpg);
  background-repeat:repeat-x;
 /*border: 1px solid lime;*/
 
 
}



#breadCrumb a{
  color: #FFFFFF;
 text-decoration: none;
}

#breadCrumb a:hover{
 color: #000000;
 text-decoration: none;
}

/*
#filAriane a.breadCrumb:hover{
  border: 1px solid red;
  height: 20px;
 color: #FFFF33;
}

*/


/* +----------------------------------------------------------------------+
// | Conteneur central
// +----------------------------------------------------------------------+*/
#conteneur_central {
  float: left;
  width: 760px;
 margin: 10px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 /*background-color: #FFFFCC;*/
  /*border: 1px solid blue;*/
 
}
#pageContent{
  float:left;
 top: 100px;
 width : 560px;
  margin: 15px 0px 0px 0px;
  padding: 20px 0px 20px 0px;
  font-size: 0.8em;
 text-align:justify;
 /*background-color: #FF99FF;*/
  color: #000000;
 /*border: 1px solid green;*/
}
/* +----------------------------------------------------------------------+
// |  Conteneur droit
// +----------------------------------------------------------------------+*/
#right {
  /*position: absolute;*/
  float: right;
  /*margin-left: 450px;*/
 right: 0px;
 left: 580px;
  top: 100px;
 width: 180px;
 /*clear: both;*/

  /*background-color: #CCCCCC;*/
  padding: 0px 0px 0px 0px;
 margin: 15px 0px 0px 0px;
 /*border: 1px solid red;  */
}

#right a {
 color: red;
}


/* +----------------------------------------------------------------------+
// | FOOTER
// +----------------------------------------------------------------------+*/
#footer {
    clear: both;
  width: 760px;
 height: 100px;
  margin: 10px 0px 0px 0px;
 padding : 0px 0px 0px 0px;
  border-top: 5px solid black;
  font-size: 0.8em;
 color: #666666;
 text-align:center;
}
#footer p{
   margin: 4px 4px;
  padding: 0;
 font-size:0.8em;
}

#footer img{
   margin: 10px;
 padding: 0px;
 /*border: 1px solid red;*/
 
}
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar cymbeline » Jeu 26 Juil 2007, 00:29

Je pense que cela peut aider, et j'espère qu'un oscss_garden verra le jour :)

++
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar j4k » Jeu 26 Juil 2007, 10:24

excellent travail, il faudrait en faire un package et l'intégrer en tant que template debug sur la finale
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar Christophe » Mar 31 Juil 2007, 13:49

Bonjour,

effectivement cela risque de fortement m'aider !

juste une petite question.

- Products.css et Account.css sont identiques, est-ce normal ?
- Index.css n'est pas listé ?

Merci
Christophe
Christophe
Membre actif
 
Messages: 18
Inscription: Mar 08 Aoû 2006, 17:56

Messagepar cymbeline » Mar 31 Juil 2007, 15:28

Non ce n'est pas normal, à force de copier/coller....:)

Voici donc le account.css

Code: Tout sélectionner
/* +----------------------------------------------------------------------+
// | Nom du fichier : account.css                             |
// +----------------------------------------------------------------------+
// | Copyright (c) : 2006 => oscss (http://www.oscss.org/)                |
// | Released under the GNU General Public License               |
// +----------------------------------------------------------------------+
// | Auteur : Cymbeline                                             |
// +----------------------------------------------------------------------+
// | Site      :   oscss/demo                                    |
// | Creation   :    01-01-2007                            |
// | Modifie   :                               |
// | Version   :  1.1                            |
// +----------------------------------------------------------------------+
// | Description :                                    |
// |                                                 |
// | Gestion du/des comptes utilisateurs : enregistrement, adresses,      |
// | livraisons, commandes, login, password....                           |
// |                                                                      |
// | - Regroupe les pages : (1)  account                                  |
// |                        (2)  account_edit                             |
// |               (3)  account_history                          |
// |               (4)  account_history_info                 |
// |               (5)  account_newsletter                       |
// |               (6)  account_password                       |
// |               (7)  address_book                           |
// |               (8)  address_book_process                   |
// |               (9)  create_account                           |
// |               (10) create_account_success                   |
// |               (11) password_forgotten                       |
// |               (12) login                                    |
// |               (13) logoff                                   |
// +----------------------------------------------------------------------+
*/
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (1) : account                                             |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher les informations général du compte utlisateur                                       |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en se connectant sur son compte                                                 |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentaccount.php                                            |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur global
// +----------------------------------------------------------------------+*/
#account{
 margin: 0px;
  padding: 0px;
 /*border: 1px solid green;*/
}
/*-------------titre-------------*/
div#account h1 {  /*--peut aussi se gérer avec la "class" french dans products.css --*/
 margin: 0px 0px 30px 0px;
 padding: 0px;
 /*border: 1px solid red;*/
}
/*--Modif apportée dans account.php : "<h4><?php echo OVERVIEW_TITLE; ?></h4>" faisait parti de "<div class="contentBox overview">"--*/
/*--Je l'ai sorti pour + de commodités --*/
div#account h4{
   margin: 0px 0px 20px 0px;
   padding: 0px;
   color: white;
   background-color: #333;
   text-align: center;
}
/* +-----------------------------------------------------------------------+
// | Gère les mini conteneurs (des infos) EN GLOBALITE, les mini-conteneurs
// | peuvent aussi se gérer individuellement avec leurs "Class" respectives (ci-dessous).
// +----------------------------------------------------------------------+*/
div#account .contentBox {
  /*height:70px; */
 width: 560px;
 margin: 0px 0px 30px 0px; 
 padding:5px 0px 5px 0px;
  /*border: 1px solid yellow; */
  border: 1px solid;
  border-color: #ccc #fff #ccc #fff;
}
div#account .contentBox h3{
 margin: 0px; 
  padding: 0px;
 color: #996600;
 /*border: 1px solid yellow; */
}
div#account .contentBox ul {
  margin: 5px 0px 0px 0px;
  padding: 0px;
}
div#account .contentBox ul li {
 margin: 5px 0px 5px 0px;
  padding: 0px;
 /*border: 1px solid orange; */
}
div#account .contentBox li a { /*-Le reste (les boutons) se gère dans general.css avec "a.navBtMini" :: V/ci-dessous -*/
 margin: 5px;
  padding: 3px;
 color: #ff6000;
 text-decoration: underline;
}
/*----Je prefers gérer ici les boutons pour des problèmes de gestion parent/enfant la balise (a) étant dans (li)
      il y a des soucis entre les liens en "texte" et les liens en "boutons"--*/
div#account .contentBox li a.navBtMini {
 font-size:0.85em;
   text-decoration:none;
   color:white;
    background-color:#ff5200;
}
div#account .contentBox li a.navBtMini:hover {
 text-decoration:none;
 background-color:#333;
  color: #fff;
}
div#account .contentBox li a:hover { /*-Le reste (les boutons) se gère dans general.css avec "a.navBtMini"-*/
  color: #fff;
  background-color: #333;
 text-decoration: none;
}
div#account .contentBox p{
 margin: 20px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 text-align: center;
 /*border: 1px solid orange; */
}
/* +----------------------------------------------------------------------+
// | Gère le mini conteneur "aperçu général ; commandes précédentes"
// +----------------------------------------------------------------------+*/
div#account .overview{
  /*border: 1px solid blue; */
}
div#account .overview ul li {
 /*text-align:right; */
  display:inline;
}
div#account .overview ul  {
 /*clear:both; */
  /*text-align:right; */
}
div#account .overview h3 {}

div#account .overview p {}

div#account .overview p a {
  margin: 5px;
  padding: 3px;

 
}
/* +----------------------------------------------------------------------+
// | Gère le mini conteneur "Mon compte"
// +----------------------------------------------------------------------+*/
div#account .myAccount{
 /*border: 1px solid lime; */
}
div#account .myAccount h3{
  /*border: 1px solid blue; */
}
div#account .myAccount ul{
  /*border: 1px solid yellow; */
}
div#account .myAccount ul li{
 /*border: 1px solid lime; */
}
div#account .myAccount li a{
  /*border: 1px solid orange; */
}
div#account .myAccount li a:hover{
  /*border: 1px solid lime; */
}
/* +----------------------------------------------------------------------+
// | Gère le mini conteneur "Mes commandes"
// +----------------------------------------------------------------------+*/
div#account .myOrders{
 /*border: 1px solid orange; */
}
div#account .myOrders h3{
 /*border: 1px solid orange; */
}
div#account .myOrders ul{
 /*border: 1px solid orange; */
}
div#account .myOrders ul li{
  /*border: 1px solid orange; */
}
div#account .myOrders li a{
 /*border: 1px solid orange; */
}
div#account .myOrders li a:hover{
 /*border: 1px solid orange; */
}
/* +----------------------------------------------------------------------+
// | Gère le mini conteneur "Notification courrier électronique"
// +----------------------------------------------------------------------+*/
div#account .myEmail{
 /*border: 1px solid purple; */
}
div#account .myEmail h3{
  /*border: 1px solid purple; */
}
div#account .myEmail ul{
  /*border: 1px solid purple; */
}
div#account .myEmail ul li{
 /*border: 1px solid purple; */
}
div#account .myEmail li a{
  /*border: 1px solid purple; */
}
div#account .myEmail li a:hover{
  /*border: 1px solid purple; */
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (2) : account_edit                                         |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher les informations du compte utlisateur                                               |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur "afficher ou modifier les informations de mon compte" dans      |
// |              account.php                                                                               |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentaccount_edit.php                                       |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur global
// +----------------------------------------------------------------------+*/
#accountEdit{
 /*border: 1px solid red;*/
}
/*--------titre---------*/
#accountEdit h1 { /*--peut aussi se gérer avec la "class" french dans products.css --*/}
/* +----------------------------------------------------------------------+
// | voir general.css pour le formulaire et la gestion des fieldset
// +----------------------------------------------------------------------+*/
fieldset.account p.gender input {
 width:2em;
  padding: 1px; 
}

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (3) : account_history                                     |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher toutes les commandes passées par le client                                          |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur "afficher toutes mes commandes" dans account.php                |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentaccount_history.php                                    |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur global
// +----------------------------------------------------------------------+*/
#accountHistory{
  border: 0px;
  padding: 0px;
 /*border: 1px solid orange;*/
}

div#accountHistory h1  {/*--peut aussi se gérer avec la "class" french dans products.css --*/
 margin: 0px 0px 20px 0px;
 padding: 0px;
}
/* +----------------------------------------------------------------------+
// | "mini conteneur"
// +----------------------------------------------------------------------+*/
div#accountHistory dl  {
  /*background: #F1E6CF;*/
  padding:0.2em 0.2em 0.2em 0.2em;
  margin: 0em 1em 1em 0em;
  /*border: 1px solid blue;*/
}

/* +----------------------------------------------------------------------+
// | titre des "mini conteneur"
// +----------------------------------------------------------------------+*/
div#accountHistory dl dt  {
  background: #000;
 color: #FFFFFF;
 padding:0.2em 0.2em 0.2em 0.2em;
  margin: 0px 0px 0px 0px;
  /*border: 1px solid red;*/
}
/* +----------------------------------------------------------------------+
// | Contenu des "mini conteneur"
// +----------------------------------------------------------------------+*/
div#accountHistory dl dd  {
 maring: 0px;
  padding: 0px;
 /*border: 1px solid purple;*/
}
/* +----------------------------------------------------------------------+
// | EXTENSION POSSIBLE : Rajouter la balise <span> sur les dd du fichier account_history.php
// | comme pour product_listing.php afin de séparer les titres et les commentaires,
// | ex : <dd><?php echo '<span>' . TEXT_ORDER_DATE .'</span> ' . tep_date_long($history['date_purchased']) ;?></dd>
// +----------------------------------------------------------------------+*/
/* +----------------------------------------------------------------------+
// |  titre des commentaires : ex >> "statut de la commande :" en couleur ; le texte en normal
// +----------------------------------------------------------------------+*/
div#accountHistory dl dd span {
  color: #ff6000;
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (4) : account_history_info                              |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher le détail d'une commande passée par le client                                       |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur "afficher" après avoir choisi une commande dans le recapitulatif|
// |              des commandes (account_history.php)                                                       |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentaccount_history_info.php                               |
// |                                                                                                   | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// |  titre "information commande"
// +----------------------------------------------------------------------+*/

div#accountHistoryInfo h1  { /*--peut aussi se gérer avec la "class" french dans products.css --*/
  margin: 0px 0px 20px 0px;
 padding: 0px;
  }
/* +----------------------------------------------------------------------+
// |  titre "Commande numero ..... "
// +----------------------------------------------------------------------+*/

div#accountHistoryInfo h2  {
 margin: 10px 0px 20px 0px;
  padding: 0px;
  text-align: center;
  color: #ff6000;
 /*border: 1px solid purple;*/
  }
/* +----------------------------------------------------------------------+
// |  titre "date de la commande "
// +----------------------------------------------------------------------+*/

div#accountHistoryInfo h3 {
  margin: 0px;
  padding: 0px;
 color: #333;
  font-weight: bold;
  /*border: 1px solid blue;*/
}
/* +----------------------------------------------------------------------+
// |  titre "Historique de la commande " et " liens de téléchargement "
// +----------------------------------------------------------------------+*/

div#accountHistoryInfo h4 {
 margin: 1em 0em 0em 0em;
  color: #fff;
  background-color: #000000;
  /*border: 1px solid red;*/
}
/* +----------------------------------------------------------------------+
// |  Mise en forme générale des tableaux
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table  { 
 font-size:1em;
  width:98%;
  margin: 1em 0em 1em 0em;
  border-collapse: collapse;
}
/* +----------------------------------------------------------------------+
// |  definit les cellules d'en-tête
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table thead th  { 
 vertical-align: bottom;
  border: 1px solid gray; 
 white-space: normal;
  background-color: #000;
 color: #FFFFFF;
}
/* +----------------------------------------------------------------------+
// |  definit les cellules
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table tbody td  { 
 vertical-align: middle;
  border: 1px solid gray; 
 white-space: normal;
}


/* +----------------------------------------------------------------------+
// |  TABLEAU "Adresse de livraison" + "Adresse de facturation"
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table.invoiceAdress{
 
  color: #FFF;
  /*border: 1px solid red;  */
}
/* +----------------------------------------------------------------------+
// |  en-tête "Adresse de livraison" (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table thead th.deliveryAddress  {
  color: #FFF; 
 
}
div#accountHistoryInfo table tbody td.deliveryAddress  {
 color: #333; 
}
/* +----------------------------------------------------------------------+
// |  en-tête "Adresse de facturation" (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table thead th.billingAdress  {
  color: #FFF;
 
}
div#accountHistoryInfo table tbody td.billingAdress  {
 color: #333;
 
}
/* +----------------------------------------------------------------------+
// |  TABLEAU détails des produits achetés "produits" + "quantité" + "taxe" + "prix"
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table.invoiceDetails{
 
  color: #FFCC66;
 /*border: 1px solid red;  */
}
/* +----------------------------------------------------------------------+
// |  détails des PRODUITS (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table thead th.invoiceProducts  {
  color: #FFF;
 
}
div#accountHistoryInfo table tbody td.invoiceProducts  {
 color: #333;
 
}
/* +----------------------------------------------------------------------+
// |  détails des "QUANTITES" (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table thead th.invoiceQty  {
  color: #FFF;
 
}
div#accountHistoryInfo table tbody td.invoiceQty   {
 color: #333;
 
}
/* +----------------------------------------------------------------------+
// |  détails des "TAXES" (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table thead th.invoiceTaxes  {
  color: #FFF;
 
}
div#accountHistoryInfo table tbody td.invoiceTaxes   {
 color: #333;
 
}
/* +----------------------------------------------------------------------+
// |  détails des "PRIX" (THEAD TH) et contenu (TBODY TD)
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table thead th.invoicePrice  {
 color: #FFF;
 
}
div#accountHistoryInfo table tbody td.invoicePrice   {
 color: #333;
 
}
/* +----------------------------------------------------------------------+
// |  détails des "TOTAUX" (les titres : TITLE ; le contenu : TEXT) :: contenu uniquement(TBODY TD) il n'y a pas d'entête
// +----------------------------------------------------------------------+*/

div#accountHistoryInfo table tbody td.otTtitle  {
 text-align:right;
 border: 0px solid gray;
  color: #000000; 
}
div#accountHistoryInfo table tbody td.otText  {
 color: #0033FF;
 
}
/* +----------------------------------------------------------------------+
// |  Tableau "Historique de la commande"
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table.invoiceHistory{
 
  color: #333;
 /*border: 1px solid blue; */
}
/* +----------------------------------------------------------------------+
// |  Liens de téléchargement
// +----------------------------------------------------------------------+*/
div#accountHistoryInfo table.download{
 
  color: #333; 
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (5) : account_newsletters                                  |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher le formulaire d'inscription à la newsletter                                         |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur "S'abonne ou se désabonne des bulletins d'information" dans     |
// |              account.php                                                                               |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentaccount_newsletters.php                                |
// |                                                                                                   | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur global
// +----------------------------------------------------------------------+*/
#accountNewsLetters{
  /*border: 1px solid red;*/
}
/*------titre--------*/
#accountNewsLetters h1  { /*--peut aussi se gérer avec la "class" french dans products.css --*/
  padding: 15px 0px 15px 0px ; 
  background: transparent url(../../../images/table_background_account.gif) no-repeat  right;
}
/* +----------------------------------------------------------------------+
// | voir general.css pour le formulaire et la gestion des fieldset
// +----------------------------------------------------------------------+*/
fieldset.account{}


/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (6) : account_password                                     |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher le formulaire de modification du mot de passe                                       |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur "Modifier le mot de passe de mon compte" dans account.php       |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentaccount_password.php                                   |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur global
// +----------------------------------------------------------------------+*/
#accountPassword{
 margin: 0px;
  padding: 0px;
 /*border: 1px solid red;*/
}
/*------titre--------*/
#accountPassword h1 { /*--peut aussi se gérer avec la "class" french dans products.css --*/
  margin: 0px 0px 20px 0px;
 padding: 0px;
}
/* +----------------------------------------------------------------------+
// | voir general.css pour le formulaire et la gestion des fieldset
// +----------------------------------------------------------------------+*/
#accountPassword form {
   margin: 0 auto ; 
}

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (7) : Address_book                                         |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher le carnet d'adresses personnel du client                                            |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur "Ajouter ou modifier des entrées dans mon carnet d'adresses"    |
// |              dans account.php                                                                          |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentaddress_book.php                                       |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// |  Avertiisement sur le nombre d'entrées possible dans le carnet, en bas de page
// +----------------------------------------------------------------------+*/
p.warning {
  clear:both;
   text-align:center;
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 /*color: red;*/
}

/* +----------------------------------------------------------------------+
// |  Conteneur principal du carnet d'adresse
// +----------------------------------------------------------------------+*/

#addressBook{
 /*border: 1px solid yellow;*/

}
/* +----------------------------------------------------------------------+
// |  TITRE "Carnet d'adresses personnel"
// +----------------------------------------------------------------------+*/

div#addressBook h1  {/*--peut aussi se gérer avec la "class" french dans products.css --*/   
    margin: 0em 0em 1.5em 0em;
 padding: 15px 0em 15px 0em ; 
  /*border: 1px solid blue;*/
}
/* +----------------------------------------------------------------------+
// |  Adresse principale
// +----------------------------------------------------------------------+*/
/*-----Conteneur--------*/
.primaryAddress{
  /*border: 1px solid green;*/
}
/*--- 1er TITRE "adresse principale" ----*/
.primaryAddress h3{
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #ff6000;
 text-decoration: underline;
 /*border: 1px solid red;*/
 
}
/*--- Texte d'explication sur l'utilisation de l'adresse principale ----*/
.primaryAddress .infoText{
  color: #333;
}
/*---- 2eme TITRE "adress principale" ---*/
.primaryAddress h4{
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #FF6000;
 /*border: 1px solid green;*/
}
/*--- Texte de l'adresse en cours ----*/
.primaryAddress .address{
 color: #333;
}
/* +----------------------------------------------------------------------+
// |  Entrées du carnet d'adresse
// +----------------------------------------------------------------------+*/
/*------ Conteneur ----*/
.addressBookEntry{
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 10px 0px;
  color: #333;
  /*border: 1px solid blue;*/
 border-top: 1px solid #ccc;
 /*border-bottom: 1px solid #ccc;*/
}
/*----- TITRE "entrées du carnet d'adresses" -------*/
.addressBookEntry h3{
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 color: #FF6200;
 text-decoration:underline;
  text-align: center;
 /*border: 1px solid yellow;*/
}
/*-- Adresse en cours ----*/
.addressBookEntry .infoText{
  color: #333;
  font-weight: bold;
  /*border: 1px solid purple; */
}
/*--- Détail de l'adresse en cours ---*/
.addressBookEntry p.address{
  margin: 0px 0px 10px 0px;
 padding: 0px;
 color: #333;
  border-bottom: 1px solid #ccc; 
}
/*---- Boutons "editer" et "supprimer" ---*/
.addressBookEntry .bt{
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid #000000;*/
   
}
/* les autres boutons se gèrent avec général.css --------*/

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (8) : Address_book_process                                |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher le formulaire pour ajouter une nouvelle entrée au carnet d'adresses                 |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur "Ajouter adresse" dans address_book.php                         |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentaddress_book_process.php                               |
// |                      - catalogincludesmodulesaddress_book_details.php (pour le formulaire)          | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// |  Conteneur principal du carnet d'adresse
// +----------------------------------------------------------------------+*/

#adressBookProcess{
  margin: 0px;
  padding: 0px;
 color: #333;
  /*border: 1px solid yellow;*/

}
/*--- 1er TITRE "Nouvelle entrée carnet d'adresses" ----*/

#adressBookProcess h1{/*--peut aussi se gérer avec la "class" french dans products.css --*/
  margin: 0px;
  padding: 0px;
 /*border: 1px solid yellow;*/

}
#adressBookProcess h3{
  margin: 0px;
  padding: 0px;
 /*border: 1px solid yellow;*/

}
#adressBookProcess p{
 
  /*border: 1px solid yellow;*/

}
/* +----------------------------------------------------------------------+
// | voir general.css pour le formulaire et la gestion des fieldset
// | il se gère avec >> catalogincludesmodulesaddress_book_details.php
// +----------------------------------------------------------------------+*/


/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (9) : create_account                                       |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher le formulaire pour créer un compte client                                           |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant sur nouveau client                                                  |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentcreate_account.php                                     |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// |  Conteneur principal
// +----------------------------------------------------------------------+*/
#createAccount  {
 margin: 0px;
   padding: 0px ;
 /*border: 1px solid orange; */
}
#createAccount  a{
  color: #ff6000;
 text-decoration:underline;
 /*border: 1px solid orange; */
}
#createAccount  a:hover{
  color: #333;
  text-decoration:underline;
 /*border: 1px solid orange; */
}
/* +----------------------------------------------------------------------+
// |  TITRE "Information de mon compte"
// +----------------------------------------------------------------------+*/
#createAccount h1{/*--peut aussi se gérer avec la "class" french dans products.css --*/
  margin: 0px 0px 20px 0px;
 padding: 0px;
 /*border: 1px solid blue;*/
}
/* +----------------------------------------------------------------------+
// | voir general.css pour le formulaire et la gestion des fieldset
// +----------------------------------------------------------------------+*/
#createAccount fieldset{
 margin: 0px;
  padding: 0px;
}
#createAccount fieldset legend{
 margin: 0px 0px 0px 0px;
  padding: 20px 0px 0px 0px;
  color: #3366FF;
}
#createAccount fieldset label{
  margin: 0px 10px 0px 0px;
  padding: 0px;
 width: 250px;
  line-height: 20px;
 float: left;
 text-align: right;
 cursor: help;
  /*border: 1px solid purple;*/
}
#createAccount fieldset p{
  margin: 10px 0px 10px 0px;
  padding: 0px;
 /*border: 1px solid lime;*/
}

/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (10) : create_account_success                                 |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher un message lorsque le compte est crée                                               |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en validant le formulaire pour un nouveau client                                |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentcreat_account_success.php                              |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/
#createAccountSuccess  {
  margin: 0px;
   padding: 15px 0px 15px 0px ;
 /*border: 1px solid orange; */
}
#createAccountSuccess a{
  color: #ff6000;
 text-decoration:underline;
 /*border: 1px solid orange; */
}
#createAccountSuccess a:hover{
  color: #333;
  text-decoration:underline;
 /*border: 1px solid orange; */
}
#createAccountSuccess .navBt{
 color: #FFF;
  text-decoration:none;
 /*text-decoration:underline; */
 /*border: 1px solid orange; */
}
#createAccountSuccess .navBt a:hover{
 color: #FFF;
  text-decoration:none;
 /*text-decoration:underline; */
 /*border: 1px solid orange; */
}
/* +----------------------------------------------------------------------+
// |  TITRE ""
// +----------------------------------------------------------------------+*/
#createAccountSuccess h1 { /*--peut aussi se gérer avec la "class" french dans products.css --*/
  margin: 0px 0px 20px 0px;
 padding: 0px;
 /*border: 1px solid orange; */
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (11) : password_forgotten                                    |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher un formulaire en cas d'oubli du mot de passe                                        |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant "mot de passe perdu" ou autre texte significatif                    |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentpassword_forgotten.php                                 |
// |                                                                                                   | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/

#passwordForgotten{
  Margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid yellow;*/
}
/* +----------------------------------------------------------------------+
// |  TITRE "J'ai oublié mon mot de passe !"
// +----------------------------------------------------------------------+*/
#passwordForgotten h1{/*--peut aussi se gérer avec la "class" french dans products.css --*/
 Margin: 10px 10px 10px 10px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid green;*/
}
/* +----------------------------------------------------------------------+
// |  TEXTE "Si vous avez oublié....nouveau mot de passe"
// +----------------------------------------------------------------------+*/
div#passwordForgotten div.infoText{
  /*border: 1px solid blue;*/
}
/* +----------------------------------------------------------------------+
// | le Fieldset voir general.css pour le formulaire et la gestion des fieldset
// +----------------------------------------------------------------------+*/
#passwordForgotten fieldset{
 /*border: 1px solid green;*/
  width: 560px;
}
/*--- couleur du texte à l'intérieur du fieldset, ici : "adresse email" ---*/
#passwordForgotten fieldset p{
  Margin: 0px 0px 0px 0px;
  padding: 10px;
}
/*--- Contenur-descriptif du champ de saisie >> ici : "adresse email" ---*/
#passwordForgotten fieldset label{
  /*border: 1px solid lime;*/
}
/*--- Class sur le fieldset ---*/
.logoff{
 margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid green;*/
}
.logoff p{
 margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid orange;*/
}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (12) : login                                              |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Afficher un formulaire pour se connecter au site lorsque l'on est client, ouvrir une session |
// |           afficher les informations de son compte                                                      |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant "mon compte"                                                        |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentlogin.php                                              |
// |                                                                                                   | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/

#login{
  Margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid orange;*/
}
/* +----------------------------------------------------------------------+
// |  TITRE "Bienvenue, veuillez ouvrir une session"
// +----------------------------------------------------------------------+*/
#login h1{/*--peut aussi se gérer avec la "class" french dans products.css --*/
  Margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid orange;*/
}
/* +----------------------------------------------------------------------+
// |  TITRE "Nouveau client" et "client enregistré"
// +----------------------------------------------------------------------+*/
#login h3{
 Margin: 10px 10px 20px 0px;
 padding: 0px 0px 0px 0px;
 color: #FF0000;
 /*border: 1px solid blue;*/
}
#login p{
 Margin: 20px 0px 20px 0px;
  padding: 0px;
 color: #0033CC;
 /*border: 1px solid yellow;*/
}
/* +----------------------------------------------------------------------+
// |box Nouveau Client
// +----------------------------------------------------------------------+*/ 
div.contentBox.newCustomer{
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 /*border-top: 1px solid #ccc;*/
 border-bottom: 1px solid #ccc;
  /*border: 1px solid lime;*/
}
/*--- Titre : "Je suis un nouveau client." ----*/
div.contentBox.newCustomer h4{
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid orange;*/
}
/* +----------------------------------------------------------------------+
// |Fieldset Client enregistré voir general.css pour le formulaire et la gestion des fieldset
// +----------------------------------------------------------------------+*/
.returningCustomer{
 margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid blue;*/
 
}
fieldset.returningCustomer{

  /*border: 1px solid red;*/

}
/* +--------------------------------------------------------------------------------------------------------+
// |                                    Page (13) : logoff                                                |
// +--------------------------------------------------------------------------------------------------------+
// | Utilité : Fermer une session                                                                           |
// |                                                                                                        |
// |                                                                                                        |
// | sur le site: S'obtient en cliquant "fermer la session" ou "deconnexion"                                |
// |                                                                                                        |
// +--------------------------------------------------------------------------------------------------------+
// | correspondance PHP : - catalogincludescontentlogoff.php                                             |
// |                                                                                                    | 
// |                                                                                                       |
// |                                                                                                    |
// +--------------------------------------------------------------------------------------------------------+
*/
/* +----------------------------------------------------------------------+
// | Conteneur principal
// +----------------------------------------------------------------------+*/

#logoff{
 Margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 /*border: 1px solid orange;*/
}
/* +----------------------------------------------------------------------+
// |  TITRE "Fermer la session"
// +----------------------------------------------------------------------+*/
#logoff h1{/*--peut aussi se gérer avec la "class" french dans products.css --*/
  Margin: 0px 0px 20px 0px;
 padding: 0px 0px 0px 0px;
 border: 1px solid blue;
}
/* +----------------------------------------------------------------------+
// |  TEXTE
// +----------------------------------------------------------------------+*/
#logoff p{
  Margin: 0px 0px 0px 0px;
  padding: 10px;
  color: #99CCFF;
}

Index.css n'est pas listé ?

Non car ton index est un "fichier d'appel" si je peux appeler ça ainsi, par défaut il présente les nouveaux produits, ce sera donc dans Products.css -> et Page (5) : Whatsnew_infobox.
Une autre soluce pour s'y retrouver, navigue sur ton site et affiche la page source de tes pages tu pourras te repérer avec les tags.

++
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar Christophe » Mar 31 Juil 2007, 15:31

Merci beaucoup

Christophe
Christophe
Membre actif
 
Messages: 18
Inscription: Mar 08 Aoû 2006, 17:56

Messagepar Aspekt » Mer 01 Aoû 2007, 19:45

Absolument merveilleux! moi aussi c'est le bordel complet lorsque je souhaite modifier le css et j'en perd meme la tête :)

Grand merci a toi ;)
Aspekt
Membre inactif
 
Messages: 3
Inscription: Sam 03 Mar 2007, 00:49

Messagepar MIMATA » Lun 06 Aoû 2007, 13:22

Bonjour,

Démarche intéressante en effet mais lorsque je remplace les feuilles de styles du template clean par les tiennes, le design explose et le template clean n'est plus respecté, c'est normal ?

Pour index.css, j'ai pas compris ce que tu disais. Il est appelé dans stylesheet.css mais il n'existe pas dans le dossier css ?!
MIMATA
Membre inactif
 
Messages: 8
Inscription: Sam 10 Mar 2007, 17:10
Localisation: Toulouse

Messagepar cymbeline » Mar 07 Aoû 2007, 12:29

Bonjour,

pour l'index.css (j'ai compris vos interrogations:)) , dans mon stylsheet.css et dans les imports il y a :

@import url(css/index.css);

, j'ai oublié de supprimer cette ligne qui n'appelle rien du tout.


La gestion de l'index se fait avec la page "product.css" et à l'intérieur voir 5 et 6, en fait il y a des règles conjointes à plusieurs fichiers PHP.

++
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar dAvydAv » Mar 07 Aoû 2007, 16:47

Merci !!!!
J'ai cessé de m'arracher les cheveux en essayant de modifier les css.

J'ai cependant de gros bugs d'affichages des boxes sur firefox et safari... Est-ce normal?
dAvydAv
Membre actif
 
Messages: 59
Inscription: Lun 06 Aoû 2007, 18:44

Messagepar cymbeline » Mar 07 Aoû 2007, 22:27

Bonjour,

Pour les bugs avec firefox et safari c'est possible, c'est la seule plateforme de test qui manque à mes développements et visiblement j'ai un problème de compatibilité avec, en ce qui concerne mes objectifs et mes besoins ce n'est pas dramatique, néanmoins, il reste à chacun le soin d'adapter les feuilles de styles en fonctions de vos propres besoins et de faire vos test.

Je n'ai pas livré un template, donc si vous utiliser ses feuilles de styles en remplacement de celles existantes, c'est normal que le design soit explosé. :) puisque les règles css sont faites pour mon site.

J'envisage de livrer un template avec tout ceci intégré, mais quand....?
Sinon, si quelqu'un peut le faire, tout est utilisable de suite pour en construire un.;)

++
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers


Retourner vers Design

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron