@CHARSET "UTF-8";

/************ RESET & BASE CSS ********************/

* { margin:0; padding:0; }

html {
    font-size: 100%; /* Évite un bug d'IE 6-7. (1) */
    height: 100%;
}
body {
    font-family: Arial, Helvetica, FreeSans, sans-serif;
    font-size: .8em;
    line-height: 1.4em;
    color: #300;
    background: black url('bg.jpg') repeat-x fixed;
    height: 100%;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Arial black', Arial, Helvetica, FreeSans, sans-serif;
    margin: 1em 0 .5em 0; /* Rapproche le titre du texte. (5) */
    line-height: 1.2;
    font-weight: bold; /* Valeur par défaut. (6) */
    font-style: normal;
}
h1 {
    font-size: 2.25em;
    margin-top: 0;
}
h2 {
    font-size: 2em;
}
h3 {
    font-size: 1.5em;
}
h4 {
    font-size: 1.25em;
}

/* Listes */
ul, ol {
    margin: .75em 0 .75em 32px;
    padding: 0;
}

/* Paragraphes */
p {
    margin: .75em 0; /* Marges plus faibles que par défaut. (7) */
}
address {
    margin: .75em 0;
    font-style: normal;
}

/* Liens */
a { color: #300; text-decoration: none; }
a:hover, a:focus, a:active { text-decoration: underline; }
a.mail { color: #00f; }

a img {
    border: none;
}

/* Divers éléments de type en-ligne (8) */
em {
    font-style: italic;
}
strong {
    font-weight: bold;
}

/* Formulaires */
form, fieldset {
    margin: 0;
    padding: 0;
    border: none;
}
input, button, select {
    vertical-align: middle; /* Solution pb. d'alignement. (9) */
}



/************** Mise en page ********************/

#page {
    position: relative;
     min-height: 100%;
     margin: 0 auto;
     width: 800px;
     background-color: white;
     overflow: hidden;
     border-left: 1px solid black;
     border-right: 1px solid black;
}

#bandeau {
     position: relative;
     top: -9px;
     width: 100%;
     height: 60px;
     background: #990000;
}

#menu {
     float: right;
     margin: 0;
     padding: 0;
     position: relative;
     top: -65px;
}

#menu address {
     color: white;
     font-size: 0.9em;
     line-height: 1.2;
     margin-left: 33px;
}

#menu ul li {
     list-style: none;
     float: left;
     height: 30px;
     margin: 0;
     padding: 0;
}
#menu ul a {
     font-size: 1.1em;
     font-weight: bold;
     padding: 0 20px 12px 0;
     background: url('btnmenu.gif') bottom right;
}
#menu ul a:hover, #menu ul a.select {
     text-decoration: none;
     background-position: bottom left;
}

#content {
     padding: 100px 45px;
}

/************** home ********************/
div.home {
     width: 440px;
     margin: 0 auto;
    text-align: right;
    font-weight: bold;
}


/************** Catalog ********************/
div.catalogitem {
     width: 735px;
     height: 280px;
     margin-top: 20px;
     padding-top: 20px;
     border-top: 1px solid #300;
}
div.catalogitem.first {
     border: 0;
}

.vignette {
     float: left;
}
div.catalogitem img {
     width: 310px;
     height: 260px;
     border: 1px solid black;
}
.texte {
     float: left;
     margin-left: 40px;
     width: 360px;
}

p.detail {
     background: url('moredetail.gif') no-repeat 0 ;
     padding: 10px 0 10px 35px;
     padding-top: 10px;
     line-height: 30px;
     font-size: 1.2em;
     font-weight: bold;
     position: relative;
     left: -15px;
}



/************** fiche (template1) ********************/
div.template1.chapo {
     margin-bottom: 50px;
}

div.template1.chapo .main-info {
     float: left;
     width: 280px;
}
div.template1.chapo .description {
     width: 420px;
     margin-left: 280px;
}

div.template1.chapo .main-info h2 {
     margin: 10px 0 0 20px;
     font-weight: bold;
}
div.template1.chapo .main-info p {
     margin: 0 0 0 20px;
     font-weight: bold;
}

div.template1.colleft {
     float: left;
     width: 330px;
}
div.template1.colleft h4 {
     margin-top: 0;
}
dl.template1.colright {
     border-left: 1px solid #300;
     margin-left: 50%;
     padding-left: 30px;
}
dl.template1.colright dt {
     font-weight: bold;
     font-size: 1.1em;
}
dl.template1.colright dd {
     margin-bottom: 1.1em;
}


div.template1.colleft ul {
     list-style: none;
     margin-left: 0;
}

#banner { text-align: center; margin-bottom: 50px; }

#banner img { border: 1px solid black; }
#banner #nav img { border: none; }

#banner #nav { 
     width: 100%;
     position: relative;
}

#nav a.back {
     display: block;
     position: absolute;
     right: 0;
     top: 0;
     font-weight: bold;
     background: url('prev.gif') left no-repeat;
     padding-left: 20px;
}



/************** feeling-book ********************/
div.feeling { position:relative; width:370px; padding-left:340px; text-align:left; }
div.feeling img { position: absolute; left:0; bottom: 0; }


/************** liens & contact ********************/
ol.links {
     float: right;
     width: 288px;
     list-style: none;
}
ol.links li { border-bottom: 1px solid #300; }
ol.links li.last { border: none; }