@import "menubar.css";
@import "content.css";
@import "image.css";
@import "popuphelp.css";


/* ~~~~~~~~~~~ STYLES GENERAUX (grosses modifications déconseillées) ~~~~~~~~~~~ */
/** General defaults **/
INPUT {margin: 0;}
ul, dl, li { text-align: left;}
/* for debugging purpose */
pre { text-align:left; }

textarea.description {
  height: 100px;
  width: 500px;
  overflow: auto;
}

a:link, a:visited {
	text-decoration: none;
	color: #0066CC;
}
a:hover {
	color: #FF6234;
}


body {
	background-image:url("theme/bg.jpg");
	font-size:11px;
	font-family:arial;
	margin: 0;
	padding: 0;
}
	
#centre {
	margin-right:10px;
	margin-left: 155px;
	width:auto;
	text-align:left;
	margin-top:5px;
	background:#FFFFFF;
}

.fenetre {
	border:1px solid #C4C4C4;
   -moz-border-radius: 6px;
	}
	
#conteneur {
	margin-top:5px;
	margin-bottom:5px;
	width:850px;
	background:#FFFFFF;
	}
#conteneur2 {
	width:780px;
	margin:0 auto;
	}

.fenetre_popup {
	border:1px solid #C4C4C4;
   -moz-border-radius: 6px;
	}
	
#conteneur_popup {
	margin-top:5px;
	margin-bottom:5px;
	width:600px;
	background:#FFFFFF;
	}
#conteneur2_popup {
	width:600px;
	margin:0 auto;
	}
	
#middle {	
	border:1px solid #C4C4C4;
	background:#FFFFFF;
	-moz-border-radius: 6px;
	margin:0 auto;
	}

.pied {
	clear:both;
	text-align:center;
	margin-bottom:5px;
	background:#FFFFFF
	}
	
.footer {
	text-align:center;
	clear:both;
	padding:7px;
	margin-bottom:5px;
}

img.avatar {
float: left; 
padding-right: 6px;
}

p.avatar {
	margin: 0 0 10px 0;a
	font-size:11px;
	}

IMG {
    border: none;
}


/* ~~~~~~~~~~~ HEADER ~~~~~~~~~~~ */

#url {
	color:#FFCDA0;
	color: #1275D8;
	letter-spacing:1px;
	font-size:13px;
	}
h1 {
	letter-spacing:3px;
	font-family: Arial;
	font-size: 15px;
	color:#FF9900;
	font-variant: small-caps;
	margin-top:10px;
	margin-bottom:10px;
	padding:0;
	background:#FFFFFF
	}
	
#fenetre {
	border:1px solid #C4C4C4;
	-moz-border-radius: 6px;
	padding-left:5px;
}

.Style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FF9900;
}
.Style2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #0066CC; }

	
/* ~~~~~~~~~~~ BILLETS ~~~~~~~~~~~ */

h2 {
	letter-spacing:1px;
	font-size:12px;
	border-bottom:1px solid #99CC00;
	color:#FF9900;
	text-align:left;
	margin:8px 0 5px 2px;
	}
	
h2 a:visited, h2 a:link, h2 a:hover { /* Titre billet */
	color:#FF9900;
	}
	
div.billet { /* Contenu billet */
	text-align:justify;
	margin-right:8px;
	}
	
div.billet-header { /* Header billet (auteur, date, catégorie) */
	margin-top:0px;
	margin-bottom:3px;
	font-size:10px;
	color:#808080;
	}
	
div.billet-pied { /* Pied billet (commentaires, trackbacks) */
	margin-top:6px;
	margin-bottom:10px;
	margin-right:8px;
	color:#808080;
	text-align:right;
	}

	/* CALENDRIER */
   table.calendrier {border: 0; background-color: #fff;}
   table.calendrier td, th {text-align: center; border: 0}
   table.calendrier th {height: 10px; font-size: 7pt;}
   table.calendrier td {width: 19px; height: 10px; font-size: 8pt;}
   table.calendrier .calendrier-mois {font-weight: bold; margin-top: 3px; font-size: 8pt; text-align: center}
   table.calendrier .calendrier-mois a{text-decoration: none}
   table.calendrier .calendrier-prec, table.calendrier .calendrier-suiv {font-weight: normal;}
   table.calendrier th {text-align: center;}
   table.calendrier td.lien-jour {font-weight: bold; background-color: #FCFCFC;}
   table.calendrier td.lien-jour-selectionne {font-weight: bold; background-color: #F9F9F9;}
   table.calendrier td.lien-jour a {text-decoration: none;}
   
/* ~~~~~~~~~~~ MENU ~~~~~~~~~~~ */

#gauche {
	width:140px;
	float:left;
	padding:0px;
	margin-top:-8px;
	text-align:left;
	background:#FFFFFF
	}

.menugauche {
	/*list-style: none;*/
	padding: 0;
	margin-top: 0px;
	margin-left: 5px;
	margin-bottom:11px;
}

.menugauche li {
	margin: 0;
	padding: 0;
	padding-bottom:3px;
	font-family:verdana;
	font-size:9px;
}

#menugauche ul, li {
margin-left : 5px;
padding-left : 0px;
}

p {margin: 0 0 10px 0;}

/* PAGES */

#archives {
	text-align:justify;
	}
#trackbacks {
	margin-top:5px;
	margin-bottom:10px;
	text-align:left;
	}
#commentaires {
	margin-top:5px;
	margin-bottom:30px;
	text-align:left;
	}
	
div.commentaire-header { /* Header billet (auteur, date, catégorie) */
	margin-bottom:5px;
	font-size:11px;
	color:#808080;
	}
	
div.commentaire { /* Contenu billet */
	text-align:justify;
	margin-bottom:15px;
	background : #FEFEFE;
	padding:9px;
	padding-top:15px;
	padding-bottom:15px;
	border:1px solid #F1F1F1;
	color:#555555
	}
	
UL {
  list-style: none;
  padding: 0;
  margin: 0;
}


LI.selected {
  font-weight:bold;
}


UL.categoryUl {
  list-style: none;
  padding: 0;
  margin: 0;
}

LI.categoryLi {
  border: 1px solid gray;
  padding: 0px 5px;
  margin-bottom: 5px;
}


#centre ul.categoryActions a img, ul.categoryActions a {
  border: none;
}
/* Thumbnails customization */
#centre UL.thumbnails SPAN, #centre UL.thumbnails SPAN.wrap2 A, #centre UL.thumbnails SPAN.pic2 A {
  width: 160px;			/* max thumbnail width + 2px */
  margin-top: 5%;
  text-align:center;
  margin:5px;
}

.*#centre UL.thumbnails SPAN, #centre UL.thumbnails SPAN.wrap2 A, #centre UL.thumbnails SPAN.pic2 A {
  width: 160px;			/* max thumbnail width + 2px */
  margin-top: 5%;
  text-align:center;
  margin:5px;
}
#centre UL.thumbnails SPAN.wrap2, #centre UL.thumbnails SPAN.pic2 {
  height: 140px;		/* max thumbnail height + 2px */
}
#centre UL.thumbnails SPAN.wrap2, #centre UL.thumbnails SPAN.pic2 {
  border: 0px solid #aaaaaa;	/* thumbnails border color and style */
  -moz-border-radius: 4px;	/* round corners with Geko */
  border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
}
#centre UL.thumbnails SPAN.wrap2:hover, #centre UL.thumbnails SPAN.pic2:hover {
  border-color: yellow;		/* thumbnails border color when mouse cursor is over it */
}
#centre UL.thumbnails SPAN.thumbLegend {
  font-size: 80%;		/* font size */
  height: 3em;			/* max legend height (don't set auto to be Geko friendly)*/
  display: block;		/* display: hide if you don't want legend */
  overflow: hidden;		/* oversized legend is clipped */
  text-align:center;
}
/* Thumbnail "elastic" layout */
#centre UL.thumbnails {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;	/* to center the whole collection in #content */
}
#centre UL.thumbnails LI { display: inline }

#centre UL.thumbnails SPAN.wrap1 {
  margin: 0 5px 5px 5px;
  display: table-cell; display: inline-table; display: inline-block;
  vertical-align: top;		/* OK with Opera and IE6 not Geko */
  text-align: center;		/* to center the thumbnail and legend in Geko/Opera */
  background-image:url(theme/imgsalbum.gif);
  background-repeat: no-repeat;
  width:170px;
  height:150px;
}
.*#centre UL.thumbnails SPAN.wrap1 {
  margin: 0 5px 5px 5px;
  display: table-cell; display: inline-table; display: inline-block;
  vertical-align: top;		/* OK with Opera and IE6 not Geko */
  text-align: center;		/* to center the thumbnail and legend in Geko/Opera */
  background-image:url(theme/imgsalbum.gif);
  background-repeat: no-repeat;
  width:170px;
  height:150px;
}
#centre UL.thumbnails SPAN.pic1 {
  margin: 0 5px 5px 5px;
  display: table-cell; display: inline-table; display: inline-block;
  text-align: center;		/* to center the thumbnail and legend in Geko/Opera */
  width:170px;
  height:150px;
}
.*#centre UL.thumbnails SPAN.pic1 {
  margin: 0 5px 5px 5px;
  display: table-cell; display: inline-table; display: inline-block;
  text-align: center;		/* to center the thumbnail and legend in Geko/Opera */
  width:170px;
  height:150px;
}
#centre UL.thumbnails SPAN.wrap2  {
  margin: 0;			/* important reset the margins */
  display: table-cell;		/* block prevents vertical-align here */
  vertical-align: middle;	/* Ok with Opera and Geko not IE6 */
  text-align: center;
}

#centre UL.thumbnails SPAN.pic2 {
  margin: 0;			/* important reset the margins */
  display: table-cell;		/* block prevents vertical-align here */
  vertical-align: middle;	/* Ok with Opera and Geko not IE6 */
  text-align: center;
}

#centre UL.thumbnails SPAN.wrap2 A, #centre UL.thumbnails SPAN.pic2 A {
  display: block;
  border-bottom: none;
}
#centre UL.thumbnails IMG {
  margin-bottom: -4px;  /* why ??? something wrong with Geko and Opera ignored by IE6*/
}

/* fix IE with another layout */
* html #centre UL.thumbnails SPAN.wrap2 {
  display: block;
  position: relative;
  text-align: left;
}
* html #centre UL.thumbnails SPAN.wrap2 A {
  overflow: visible;
  position: absolute;
  top: 5%;
  text-align: center;
}
* html #centre UL.thumbnails SPAN.pic2 {
  display: block;
  position: relative;
  text-align: left;
}
* html #centre UL.thumbnails SPAN.pic2 A {
  overflow: visible;
  position: absolute;
  top: 5%;
  text-align: center;
}
* html #centre UL.thumbnails IMG.thumbnail {
  position: relative;
  top: 0%;
}

#centre .navigationBar, #centre .additional_info {
    margin: 10px 0;
    text-align: center;
}

#centre .pageNumberSelected {
    font-style: italic;
}

#centre .additional_info {
    font-size: 110%;
}

#centre FORM {
    text-align: left;
}

/* content defaults */
#centre dl, dd { margin: 10px; }
#centre dt {
  margin-bottom: 5px;
  font-style: italic;
  font-size: 110%;
}

/* actions */
ul.categoryActions {
  margin: 0 0 0 0;
  width: auto;
  padding: 0;
  text-indent: 0;
  list-style: none;
  text-align: center;
}

#centre div.titrePage ul.categoryActions {
  float: right;
  text-align: center;
  margin-bottom: 10px;
}

#centre ul.categoryActions li {
  display: inline;
}

#centre ul.categoryActions a img, ul.categoryActions a {
  border: none;
}

/* User comments */

#centre DIV#comments {
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: padding-box;
}
#centre DIV.comment {
  margin: 0 0 0.5em 0;
  padding: 0;
  overflow: hidden; /* these 2 lines ensure the floating child is kept in the DIV */
  width: 100%;	    /* don't ask why. It's a very usefull trick                   */
}

#centre DIV.comment A.illustration {
  display: block;
  float: left;
  margin: 0.5em 0 0 0.5em;
}

#centre DIV.comment P.commentHeader {
  text-align: right;
  margin: 0.5em 0.5em 0 0;
}

#centre DIV.comment UL.actions {
  text-align: center;
  margin: 0.2em;
}

#centre DIV.comment BLOCKQUOTE {
  margin: 1em 0.5em 0.5em 150px; /* margin-left corresponds to maximum thumbnail width + ~10px */
  padding: 0.5em;
}
/*------------------------------------------------------*/

#the_page {
    /* Just in case another template needs an inner frame */
    border: 1px solid #e0e0e0;
    width:100%;
    padding-top: 5px;	
    padding-bottom:30px;
    text-align:center;
    display:block;
    background:#3f3f3f;
}

IMG {
    border: none;
}

HR.separation {
  visibility: hidden;
  clear: both;
}

#copyright {
    clear: both;
    font-size: 83%;
    text-align: center;
    margin: 0 0 10px 0;
}

/** General defaults **/
INPUT {margin: 0;}
ul, dl, li { text-align: left;}
/* for debugging purpose */
pre { text-align:left; }

/** forms **/

form { padding: 0em; }

form p {
	text-align: center;
	margin-top: 2em;
	margin-bottom: 2em;
}
.small {
	font-size: 80%;
}

textarea.description {
  height: 100px;
  width: 500px;
  overflow: auto;
}
select.categoryList {
  width: 100%;
}

/** go to an admin.css ? **/

.table2 {
  border: 1px solid black; 
  margin: 1em auto;
  padding: 0;
}

.table2 TD, .table2 TH {
  padding: 0 1em;
}

form#add_virtual p { text-align: left; }
FORM#categoryOrdering, FORM#addVirtual {
  padding-left: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
  padding-right: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
}
FORM#categoryOrdering p {
	text-align: left;
	margin-top: 1em;
	margin-bottom: 1em;
}
UL.categoryUl {
  list-style: none;
  padding: 0;
  margin: 0;
}

LI.categoryLi {
  border: 1px solid gray;
  padding: 0px 5px;
  margin-bottom: 5px;
}

form#categoryOrdering ul.categoryActions {
  float: right;
  margin-top: 5px;
}

form#cat_modify table { width: auto; }

/**
 * Filter forms are displayed label by label with the input (or select...)
 * below the label
 */
FIELDSET {
  padding: 1em;
  margin: 1em;
}

FORM.filter FIELDSET LABEL {
  display: block;
  float: left;
  width: auto;
  margin-right: 10px;
  padding: 0;
}

FORM.filter FIELDSET LABEL INPUT,
FORM.filter FIELDSET LABEL SELECT,
FORM.filter FIELDSET LABEL TEXTAREA {
  display: block;
  margin: 0.5em 0;
}

FORM.filter FIELDSET P,
FORM.filter FIELDSET INPUT,
FORM.filter FIELDSET TEXTAREA {
  clear: left;
  display: block;
}

FORM.filter INPUT[type="submit"] {
  margin-top: 1em;
}

FORM.properties UL, FORM#update UL {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

FORM.properties LI, FORM#update UL  {
  margin-bottom: 0.5em;
  padding: 0;
  line-height: 1.8em;
}

FORM.properties LABEL {
  float: left;
  width: 50%;
  text-align: right;
  margin: 0;
  padding: 0 0.5em 0 0;
}

FORM.properties LABEL.mandatory {
  font-weight: bold;
}

FORM.properties .focus {
  background-color: whitesmoke;
}

FORM.properties .nofocus {
  background-color: lightgrey; /* must be the same as input background-color */
}

FIELDSET.elementEdit A {
  display: block;
  float: right;
}

TABLE.doubleSelect {
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

TABLE.doubleSelect TD {
  padding: 0 5px;
  width: 50%;
}

FORM#categoryPermissions LI {
  display:inline;
  white-space: nowrap;
}

#theHeader {
}

#theHeader H1 {
  margin-bottom: 0.5em;
}

#theHeader P {
  margin-top: 0;
  padding: 0;
}

BODY#theAdminPage #theHeader P { 
  display: none;
}

BODY#thePopuphelpPage #copyright {
  color: green;
  display: none;
}

FORM#addComment FIELDSET LABEL {
  clear: both;
}

FORM#addComment FIELDSET INPUT[type="hidden"] {
  display: none;
}

/* button tools */
UL.actions {
  text-indent: 0;
  list-style: none;
}
UL.actions  LI {
  display: inline;
}
UL.actions  A {
  border: none;
}