/*
	Style Sheet pour le site Web du Commissariat au commerces
	Implémenté par Solutions ZEN info
	info@solutions-zen.com
*/

* {margin:0;padding:0;}
html {margin:0; padding:0;} /* pour Opera qui met les marges dans le tag HTML */


body {
	background-color : #ffffff;
	font : 12px arial,verdana,tahoma,sans-serif;
	text-align:center;
	height : 100%;
   margin-bottom: 1px; /* affiche le scrollbar à coup sûr. */
}

input, select, button	{
	font : 12px arial,verdana,tahoma,sans-serif;
	padding : 2px;
}
textarea	{
	font : 12px 'Courier New',Courier,monospace;
	padding : 2px;
}


/* Formatage du texte */
p, td, th, div, blockquote, ol, ul, nl, pre {
	font : 12px arial,verdana,tahoma,sans-serif;
} 						  
p {
	margin:0 0 8px 0;
	text-align:left;
}
table {   /* équivalent à "cellspacing 0 et padding 0"*/
    border-collapse: collapse;
    font : 12px arial,verdana,tahoma,sans-serif;
}
td {
   vertical-align : top;
}

pre { /* Browser specific (not valid) styles to make preformatted text wrap */
    overflow: hidden;
    margin:0 0 8px 0;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */   
}

/* Les couleurs du site */
.rouge {color:rgb(140,6,0);} /*  #8c0600  */

/* les LIENS */
a:link {color:#2f65ab;}
a:visited {color:#505194;}
a:hover {color:#8c0600;}
a:active {color:#5c92d8; border:none;}

ul {
	margin:  6px 0px 4px 0px;
   list-style-type : square;
   padding: 0px;
	/* border: 1px solid #ff0000;  */
}
nl, ol {
   margin:  6px 0px 4px 0px;
   padding: 0px;
}
li {
	font-size: 12px;
	margin : 0 0 2px 22px;
   padding: 0px;
	/* border: 1px solid #00ff00; */
}		 

h1 {   
   margin: 4px 0px 8px 0px;
   padding : 0px;
   color : #993333;
   font-size:30px;
   font-weight : normal;
}
h2 {font-size:20px; margin: 4px 0px 8px 0px; padding : 0px;}
h3 {font-size:18px; margin: 2px 0px 6px 0px; padding : 0px; color : #993333;}
h4 {font-size:14px; margin: 2px 0px 6px 0px; padding : 0px;}

/* Formatage des images */
img {
    margin : 2px;
    padding : 2px;
    border : none;
}


.diapo_onoff {
   margin : auto;
   height: 20px;
   width:40px;
   background : transparent url(images/playpause.gif) no-repeat 0px -20px;
   overflow:hidden;
   cursor : pointer;
}
/* *********************************************************** */
#complet { 	
	position:relative;	
	
	width : 780px;

	margin-right:auto;
   margin-left:auto;
	margin-top:0px;
	padding:0px;

   border-left : 1px solid #aba09b;
   border-right : 1px solid #aba09b;
   
}
/* *********************************************************** */
#entete {
   padding : 0px;

   margin : 0px 8px 6px 8px;
   text-align : center;
   border : 1px solid #aba09b; 
}
#entete img {
   margin : auto;
   margin-top: 5px;
   margin-bottom: 5px;
   padding : 0px;
}

/* *********************************************************** */

#menu_sections {
   background : transparent url(images/menu_sections.jpg) repeat-x top left;
   position : relative;   
   padding : 0px;
   margin : 4px 8px 2px 8px;
   height : 22px;
   border-bottom : 1px solid #aba09b;
}
#menu_sections p {
   background : transparent url(images/menu_sections.jpg) repeat-x top left;
   float : left;
   padding : 0px;
   margin : 0px 3px 0px 2px;
   font-size : 11px;
   text-align : center;
   height : 22px;
}
#menu_sections a {   
   display : block;
   text-decoration : none;
   margin  : 0px;
   padding : 2px 5px 5px 5px;
   font-weight : bold;
   overflow : hidden;    
   color : #333333;
}
#menu_sections a:visited {
   color : #333333;
}
#menu_sections a:hover {
   color : #ffffff;/*#774444;*/
}
#menu_sections a:active {
   color : #777777;
}

/* *********************************************************** */
#menu_pages {
   background : transparent url(images/menu_pages.jpg) repeat top left;
   float : left;
   margin : 0px;
   padding: 10px 0px 10px 0px;
   text-align : center;
   
}

#menu_pages p {
   margin : 4px 14px 3px 14px;
   padding : 0px;
   text-align : left;
   background-color : rgb(227,224,219);
}
a.menu_pages_lien {
   color : #333333;
   text-decoration : none;
   font-size : 11px;
   font-weight : bold;
   display : block;
   background : transparent url(images/puce.jpg) no-repeat 2px 3px;
   padding : 2px 2px 2px 24px;
}
a.menu_pages_lien:visited {
   color : #333333;
}
a.menu_pages_lien:hover {
   color : #774444;
}
a.menu_pages_lien:active {
   color : #777777;
}

#menu_pages .titre_menu_pages {
   color : #ffffff;
   padding : 4px;
   font-weight: bold;
   font-size : 14px;
}

#contenu_pages {
   float : right;
   text-align : left;
   padding: 0px;
   margin : 12px 5px 12px 5px;
}

/* *********************************************************** */
#table_contenu {
   padding: 0px;
	margin-right: auto;
   margin-left: auto;
	margin-top: 4px;
   margin-bottom : 10px;
   /* background-color : #ccccdd; /* pour tests*/
}
/* *********************************************************** */
#pied_de_page {
   clear : both;
	position:relative;
	text-align:center;
	margin-right:auto;
   margin-left:auto;
	margin-top:6px;
	padding:12px 0px 6px 0px;

   border-top : 6px solid #eeeeee;
   /* background-color : #aba09b; /* pour tests */
}

/* *********************************************************** */


.elements {
   position : relative;
   text-align : left;
   padding : 0px;
   /* border : 1px dotted #000000; /* pour tests*/
   margin : 0px 2px 4px 2px;
   /* background-color : #eeeeff; /* pour tests */
}

.album {
   position : relative;
   padding : 0px;
   /*background-color : #ccccbb; /* pour tests*/
   /*border : 1px dotted #000000; /* pour tests*/
   margin : 0px 0px 4px 0px;
   text-align : center;
}
.album_img {   
   position :absolute;   
   text-align : center;
   
   left : 0px;
   top : 30px;
   width : 100%;
   
}
.album_img img {   
   margin : auto;
}


/* *********************************************************** */
/* Styles des articles dans l'accueil */
#boite_articles {
   position : relative;
   padding : 6px;
   /*border : 1px dotted #000000; /* pour tests*/
   margin : 0px 0px 4px 0px;
}

.pad_onglets {
  background-color : transparent;
  height:10px;
  font-size:10px;
  line-height:10px;
  margin : 0px;
  padding: 0px;
}
#onglet_art_recents {

   background : transparent url(images/Onglet_actif.gif) no-repeat top left;
   font-size : 13px;
   font-weight : bold;
   
   margin : 0px;
      
   text-align : center;
   height : 31px;
   width : 150px;
   float : left;
   overflow : hidden;
}
#contenu_art_recents {
   background : #fcf7ee url(images/degrade.jpg) repeat-x top left;
   clear:both;
   margin : 0px;
   padding : 4px;
}
.art_titre {
   margin : 0px;
   margin-bottom : 2px;
   cursor : pointer;
}
.art_auteur {
   color : #666666;
   text-align : right;
}
.art_date {
   color : #666666;
   font-size : 10px;
   margin : 0px 0px 4px 0px;
   padding : 0px;
}
.art_separateur {
   line-height : 1px;
   height : 1px;
   font-size : 1px;   
   background-color : rgb(193,4,53);
   border : 1px solid rgb(171,160,155);
   margin  : 0px;
   padding : 0px;
}

#onglet_art_historique {
   background : transparent url(images/Onglet_passif.gif) no-repeat top left;
   font-size : 13px;
   font-weight : bold;
   margin : 0px;
   text-align : center;
   height : 31px;
   width : 150px;
   float : left;
   overflow : hidden;

   cursor : pointer;
   color : #666666;
}
#contenu_art_historique {
   background : #fcf7ee url(images/degrade.jpg) repeat-x top left;
   text-align : left;
   clear : both;
   margin : 0px;
   padding : 4px;
   display : none;
}
#contenu_art_historique i {
   color : #666666;
   font-size : 10px;
}
#contenu_art_historique a {   
   padding : 0px;
   margin : 0px;
   color : rgb(193,4,53);
   font-size : 12px;
   font-weight : bold;
}

/* *********************************************************** */
/* Styles de la page d'articles */
#page_art_contenu {
   text-align : left;
   padding: 0px;
   margin : 12px 5px 12px 5px;
}
#page_art_historique {
   background : #fcf7ee url(images/degrade.jpg) repeat-x top left;
   float : right;
   text-align : left;
   width : 240px;
   margin : 8px;
   padding : 4px 0px 4px 0px;
}

#page_art_historique i {
   color : #666666;
   font-size : 10px;
}
#page_art_historique a {
   display : inline;
   margin : 0px;
   color : rgb(193,4,53);
   font-size : 12px;
   font-weight : bold;
}

/* *********************************************************** */
/* Styles des options d'administration */

#msg_admin {
   background-color : #aba09b;
   font-weight : bold;
   padding : 6px;
   margin : 0px;
   text-align : center;
}

#admin_options_generales {
   float : right;
   padding : 6px 30px 6px 30px;
   margin : 8px 8px 2px 6px;
   background-color : #aba09b;
}

.admin_options {
   position  : absolute;
   right : 1px;
   top : 1px;
   z-index : 100;

   height : 20px;
   text-align : center;
   font-weight : bold;

   padding : 0px 6px 0px 6px;
   margin : 0px;
   /*background-color : #eeffcc;*/
}
.admin_bouton {
   vertical-align : middle;
   cursor : pointer;
   width : 16px;
   height : 16px;
   padding : 0px;
   margin : 2px;
}

.div_form_admin {
   display : none;
   margin: 4px;
}

#element_modifier_contenu { /* textarea */
   width : 470px;
   height : 470px;
   padding : 4px;

}
#article_modifier_contenu { /* textarea */
   width : 470px;
   height : 300px;
   padding : 4px;

}

#div_modifier_article {   
   position : relative;
   margin : 4px;
}

#div_modifier_elements {
   position : relative;
   margin : 4px;
}

/** pour la fenêtre de preview d'images... **/
.fenetre {
    position : absolute;/* ----------- Position à partir du dessus du bouton !
                                (si on met le relatif plus haut, ca fuck le menu) -----------*/
    top : -410px;
    left : 180px;
    width  : 480px;     /* ----------- POUR IE ca prend absolument une largeur -----------*/
    background-color : #333333; /* - même couleur que les images de coin (intérieur)... -*/

    text-align : center;
    font-size : 1.0em;
    display : none;
    margin : 0px;
    padding : 0px;
    overflow : hidden;
    
}

.fenetre_titre {

    font-size : 1.0em;
    display : none;
    margin : 0px;
    padding : 0px;
    overflow : hidden;
}

.fenetre_contenu {

    font-size : 1.0em;
    display : none;
    margin : 0px;
    padding : 0px;
    overflow : hidden;

}


.fenetre_menu {
    background-color : rgb(171,160,155);
    text-align : left;
    font-size : 1.2em;
    display : block;
    margin : 0px;
    padding : 4px;
    cursor : move;

}



/** pour la fenêtre de sélection par calendrier... **/

 .boite_calendrier {
     width  : 230px;
     background-color : #eeeeee;
     position : absolute;
     top : -40px;
     left : 222px;

     display : none;
     margin : 0px;
     padding : 0px;
     overflow : hidden;

     z-index : 100;

     text-align : center;
 }


 .boite_calendrier_contenu {
     background-color : #ddddcc;
     font-size : 12px;

     margin : 0;
     padding : 0;
     overflow : hidden;

 }

 .boite_calendrier_menu {
     background-color : rgb(171,160,155);
     text-align : left;
     font-size : 14px;

     margin : 0px;
     padding : 4px;
     cursor : move;

 }


 .grille_calendrier {
     position : relative;     
     height : 210px;
     width : 214px;
     padding : 0px;
     margin : auto;
     /* background-color : #eeeeee; /* pour tests */
 }
 .grille_mois {
     font-weight : bold;
     font-size : 14px;
     text-align : center;
     height : 24px;
     padding : 0px;
 }
 .grille_nom_jour {
     float : left;
     width : 28px;
     height : 24px;
     background-color : #bbcccc;
     margin : 1px;
     padding : 0px;
     font-weight : bold;
     text-align : center;
 }

 .grille_jour {
     /* les couleurs de fond sont dans la fonction directement, selon le jour */

     float : left;
     width : 28px;
     height : 24px;
     margin : 1px;
     padding : 0px;
     vertical-align : top;
     overflow : hidden;
     cursor : pointer;
 }
 .grille_jour p {         /* ATTENTION NE PAS METTRE DE PADDING AILLEUR A CAUSE DES FLOATS */
     padding : 3px;
     margin : 0px;
     text-align : right;
 }

 .grille_vide {
     float : left;
     width : 28px;
     height : 24px;
     /* background-color : #eeeeee; /* pour tests */
     margin : 1px;
     padding : 0px;
 }


 /* classes pour l'album photo ... */
#image_medias_pres {
   display : block;
   position : relative;
   margin : 0px;
   padding: 0px;
   text-align :center;   
}
.image_medias_src {
   display : none;
   visibility : hidden;
   position : relative;
   /*width : 430px;*/
   padding : 10px;
   margin : 15px;
   background-color : #111100;
}
.albums_medias_titre {
   clear : both;
   padding : 4px 2px;
   cursor : pointer;
   background-color : #e4e100;
}
.albums_medias {
   display : none;   
   clear : both;
   position : relative;   
   margin : 7px;
   padding : 5px 0px;
   background-color : #e4e1cc;
}
.medias_thumbs {
   display : block;
   position : relative;
   float: left;
   margin : 5px;
   padding : 0px;
   height : 100px;
}
.medias_thumbs img {
   position : relative;
   cursor : pointer;
   padding : 5px;
   background-color : #111100;
   margin : 0px;
}