@import url('reset.css');
body {
   padding: 0;
   margin: 0 5px;
   background-color:#fff;
   font: 12px Arial, Sans-Serif;
}
hr.clear {clear: both; visibility: hidden;}
#page {
   background-color:#fff; 
   margin:0 auto;
   padding:0 0 5px 0;
   color:#000;
   width: 950px;
}

a { text-decoration: none; color: #00e; }
a:hover { text-decoration: underline; }
/* Navigation  {{{ */
#page #navigation {background-color:#fff; color: #fff; height: 65px;}
#page #navigation li { display: inline; }
#page #navigation li a { float: left; width: 152px; height: 0; padding-top: 65px; overflow: hidden; }
#page #navigation li.first a { width: 190px; }
#page #navigation li a { background-image: url(http://www.activpermis.com/design/i/m_haut2.png); background-repeat: no-repeat; }
/* Bouton */
#page #navigation li#bt-activ a { background-position: 0 0; }
#page #navigation li#bt-connaitre a { background-position: -190px 0; }
#page #navigation li#bt-boutique a { background-position: -342px 0; }
#page #navigation li#bt-internet a { background-position: -494px 0; }
#page #navigation li#bt-prestation a { background-position: -646px 0; }
#page #navigation li#bt-telechargement a { background-position: -798px 0; }
/* Bouton hover */
#page #navigation li#bt-activ a:hover { background-position: 0 0; }
#page #navigation li#bt-connaitre a:hover { background-position: -190px -60px; }
#page #navigation li#bt-boutique a:hover { background-position: -342px -60px; }
#page #navigation li#bt-internet a:hover { background-position: -494px -60px; }
#page #navigation li#bt-prestation a:hover { background-position: -646px -60px; }
#page #navigation li#bt-telechargement a:hover { background-position: -798px -60px; }
/* Bouton .actif */
#page #navigation li#bt-activ a.actif { background-position: 0 0; }
#page #navigation li#bt-connaitre a.actif { background-position: -190px -120px !important; }
#page #navigation li#bt-boutique a.actif { background-position: -342px -120px !important; }
#page #navigation li#bt-internet a.actif { background-position: -494px -120px !important; }
#page #navigation li#bt-prestation a.actif { background-position: -646px -120px !important; }
#page #navigation li#bt-telechargement a.actif { background-position: -798px -120px !important; }
/* }}} */
/* Menu {{{ */
#page #menu {background-image: url(http://boutique.activpermis.com/design/i/b_haut.png); background-repeat: no-repeat; background-color:#fff; width: 200px; float: left;}
#page #menu ul {padding-top: 5px; padding-bottom: 20px; background-image: url(http://boutique.activpermis.com/design/i/b_bas.png); background-repeat: no-repeat; width: 200px; float: left; background-position: bottom left;}
#page #menu li { background-image: url(http://boutique.activpermis.com/design/i/b_centre.png); background-repeat: repeat-y; width: 200px; padding: 3px 7px 0 7px;}
#page #menu li a { display: block; padding: 5px 5px; width: 174px; border:solid 1px #888; background-color: #ccc; color: #333; font-weight: bold; text-decoration: none;}
#page #menu li.first {padding-top: 15px;}
#page #menu li a:hover { background-color: #616161; color: #eee; }
#page #menu li a.actif { background-color: #e8b206 !important; color: #eee !important; }
#page #menu.pub {background-image: none;}
/* }}} */
/* Contenu {{{ */
#page #contenu { background-color:#fff; color: #000; width: 550px; float: left; }
/* Liste article */
#page #contenu ul, #page #contenu ul li { margin: 0; padding:0; }
#page #contenu ul li { float: left; }
#page #contenu ul li.clear { clear: left; }
#page #contenu ul li ul.article { background-color: #fff; width: 168px; margin: 0 0 10px 10px; border: 1px solid #888; overflow: hidden; }
#page #contenu ul li ul.article li { float: none; text-align: center; }
#page #contenu ul li ul.article li.thumb { padding: 5px 0; }
#page #contenu ul li ul.article li.nom, #page #contenu ul li ul.article li.detail, #page #contenu ul li ul.article li.prix { padding: 3px 2px; }
#page #contenu ul li ul.article li.nom { font-size: 14px; height: 2em;}
#page #contenu ul li ul.article li.prix { font-weight: bold; font-size: 14px; }
#page #contenu ul li ul.article li.panier a { display: block; padding: 3px 0; width: 168px;  background-color: #ccc; color: #333; font-weight: bold; }
#page #contenu ul li ul.article li.panier a:hover { background-color: #616161; color: #eee; text-decoration:none; }

#page #contenu ul.detail { background-color: #fff;  margin: 0 auto; overflow: hidden; width: 530px; height: 400px; border: solid 0px #888; display: block; }
#page #contenu ul.detail li { float: none; width: 240px; }
#page #contenu ul.detail li.photo { width: 240px; padding: 5px; float: left; }
#page #contenu ul.detail li.nom, #page #contenu ul.detail li.lien, #page #contenu ul.detail li.panier, #page #contenu ul.detail li.prix { text-align: center; padding: 1px 2px 3px; }
#page #contenu ul.detail li.nom { font-size: 14px; padding-top: 5px; float: left; }
#page #contenu ul.detail li.lien { clear: left; }
#page #contenu ul.detail li.prix { float: left; text-align: left; font-size: 14px; padding: 5px; }
#page #contenu ul.detail li.panier a { display: block; padding: 2px 0; width: 240px; border:solid 0 #888; background-color: #ccc; color: #333; font-weight: bold; }
#page #contenu ul.detail li.panier a:hover { background-color: #616161; color: #eee; text-decoration: none; }
#page #contenu ul.detail li.description { background-color: #fff; float: left; font-size: 14px; margin-top: 5px; padding: 5px; width: 264px; }
#page #contenu span.tarif { font-weight: bold; }
#page #contenu ul.detail li.prix td.nombre { font-weight: bold; text-align: right; padding: 1px 5px 1px 0; }

#page #contenu #panier table { margin: 1px auto; width:530px; }
#page #contenu #panier table td.nombre, #page #contenu #panier table th.nombre { text-align: right; }
#page #contenu #panier table th { font-weight: bold; }
#page #contenu #panier table th, #page #contenu #panier table td { padding: 3px 5px; border: 1px solid #888; }
#page #contenu #panier table td.quantite { text-align: center; }
#page #contenu span.error { font-weight: bold; color: red; }
#page #contenu h2 { margin: 0 auto 5px; width:530px; font-size: 14px; font-weight: bold; background-color: #888; padding: 5px 0; text-align: center; }
#page #contenu h3 { margin: 0 auto 5px; width:530px; font-size: 14px; font-weight: bold; color: #cc5606;}
#page #contenu p.paiement { margin: 0 auto 5px; width:250px; font-size: 12px; font-weight: bold; padding: 5px 0; text-align: center; float: left;}
#page #contenu p.adresse { margin: 0 auto 5px; width:530px; font-size: 12px; font-weight: bold; padding: 5px 0; }
#page #contenu p.instruction { margin: 0 auto 5px; width:530px; font-size: 12px; text-align: center; padding: 5px 0; }
#page #contenu p.message { margin: 0 auto 5px; width:530px; font-size: 14px; padding: 5px 0; }

#page #contenu form#adresse, #page #contenu form#expedition { width: 480px; margin: 2px auto; display: block;}
#page #contenu form fieldset { padding: 1em; border: 1px solid #888; font-weight: bold; margin: 0 0 3px;}
#page #contenu form li { padding: 3px; }

#page #contenu form#adresse li label { display: block; width: 120px; text-align: right;  float: left;}
#page #contenu form label { font-size: 12px; padding: 0 2px; margin: 2px 0; color: #008;}
#page #contenu form li.error {border: solid 1px red; padding: 3px; background-color: #fcc;}
#page #contenu form li.error span {color: red;}
#page #contenu form p.button {text-align: center;}
#page #contenu .imprimante {display: none;}


#page #contenu p {margin: 0 auto 5px; width:530px; font-size: 14px;  padding: 5px 0; text-align: justify;}
#page #contenu p.telechargement {text-align: left;}
#page #contenu p#pub_accueil {margin:0; padding:0 4px; width: 550px;}

/* }}} */
/* Info {{{ */
#page #info { background-color:#fff; width: 200px; float: left; }
#page #info #minipanier, #page #info #login { background-image: url(http://boutique.activpermis.com/design/i/b_haut.png); background-repeat: no-repeat; width: 200px; }
#page #info #minipanier ul, #page #info #login ul { padding-top: 5px; padding-bottom: 20px; background-image: url(http://boutique.activpermis.com/design/i/b_bas.png); background-repeat: no-repeat; background-position: bottom left;}
#page #info #minipanier ul { margin-top: 20px; }
#page #info #minipanier li, #page #info #login li { background-image: url(http://boutique.activpermis.com/design/i/b_centre.png); background-repeat: repeat-y; width: 200px; padding: 10px 7px 0 7px; text-align: center}
#page #info #minipanier li a, #page #info #login li a { display: block; padding: 5px 5px; width: 174px; border:solid 1px #888; background-color: #ccc; color: #333; font-weight: bold; text-decoration: none;}
#page #info #minipanier li a:hover, #page #info #login li a:hover { background-color: #616161; color: #eee; }
#page #info #minipanier li a.actif, #page #info #login li a.actif { background-color: #e8b206 !important; color: #eee !important; }
#page #info #minipanier span.panier_rempli {padding: 3px; background-color:#e8b206; color: #000; font-weight:bold; line-height: 2em;}

#page #info #login #login_ae li { padding: 10px 0 0 0; }
#page #info #login #login_ae li.error { padding: 10px 5px; width: 190px; font-weight: bold; color: red;}


/* }}} */
/* Pied {{{ */
#page #pied { border-top: solid 1px #888; background-color: #ccc;}
#page #pied p { text-align: center; }
#page #pied p.adresse { font-size: 10px; padding: 5px 0 15px; }
/* }}} */