/* ------------------------------------ *
 CSS
 vendredi 16 septembre 2005 13:31:40
 Feuille de style du site Internet de la compagnie Didascalies
 * ------------------------------------ */

/*---------
*principal
----------*/
body {
background-color : black;
text-align:center;/*pour régler le probleme d'alignement*/
}

/*conteneur principal qui contiendra l'nsemble des éléments de toutes les pages*/
#conteneur {
margin-left : auto;
margin-right: auto;
width:800px;/*ces trois premieres instructions pour tout centrer automatiquement*/
height : auto;/*la hauteur s'ajuste automatiquement*/
text-align : justify;
background-color : black;
}

/*logo principal du site*/
#header {
background : url('design/header.gif') no-repeat;
width: 800px;
height: 100px;
}

#skin {
position : absolute;
margin-left : 800px;
width : 100px;
text-align : center;
color : white;
}

/*-----------------
Menu de navigation
------------------*/
#menu {
width: 800px;
height: 45px;
margin-left:60px;
margin-top : 10px;
text-align : center;
}

#menu a  {
color : white;
font : bold 1.1em Helevetica;
text-decoration : none;
background-image : url('design/menu.jpg');
width : 102px;
height : 45px;
line-height : 10pt;
}

a#menu1 {
display : block;
float : left;
}
#menu a:hover{
background-image : url('design/menu2.jpg');
}

a#menu2 {
display : block;
margin-left : 14px;
float : left;
}
a#menu2:hover{
}

a#menu3 {
display : block;
margin-left : 14px;
float : left;
}
a#menu3:hover{
}

a#menu4 {
display : block;
margin-left : 14px;
float : left;
}

a#menu4:hover{
}

a#menu5 {
display : block;
margin-left : 14px;
float : left;
}
a#menu5:hover{
}

a#menu6 {
display : block;
margin-left : 14px;
float : left;
}

a#menu6:hover{
}

a#menu7 {
display : block;
margin-left : 14px;
float : left;
}

a#menu7:hover{
}
/*--------------------------------------------------------------------------------------------------
définition des éléments placés au centre de la page (la principale partie qui se change par include)
---------------------------------------------------------------------------------------------------*/
#centre {
margin-top : 10px;
padding : 10px;
width : 100%;
position : static !important;
}
#centre H1 {
color : white;
font-size : 20px;
min-width : 385px;
min-height : 30px;
background-image : url('design/sous_titre.gif');
background-repeat : no-repeat;
margin-left : 0px;
background-position : left bottom;
text-indent : 0.5cm;
}
#centre H2 {
color : white;
font-size : 25px;
font-weight : bold;
min-height : 20px;
background-image : url('design/sous_sous_titre.gif');
background-repeat : no-repeat;
margin-left : 50px;
background-position : middle;
text-indent : 1.5cm;
}
#centre p {
color : white;
text-indent : 0.5cm;
font-weight : bold;
}
#centre blockquote {
color : red;
text-indent : 0.5cm;
font-weight : bold;
}
#centre LI {
color : white;
font-weight : bold;
}

/*------------------------------------------------
définition des éléments pour la page de spectacle
-------------------------------------------------*/
.photo_presse {
float : right;
margin-left : 5px;
}
.photo_spectacle {
float : right;
margin-left : 5px;
}
.photo_activite {
float : right;
margin-left : 5px;
}
.separateur {
background-image : url('design/separateur.gif');
margin-left : auto;
margin-right : auto;
margin-top : 20px;
width:500px;
height:20px;
}
.tarif {
margin-left:auto;
margin-right:auto;
width:80%;
border:2px solid white;
text-align:center;
color:white;
font-weight:bold;
padding : 10px;
background-color: red;
}
.top {
text-align:center;
font-weight:bold;
margin-top : 10px;
}

/*---------------------------------------------------------------------------------
définition des éléments du menu d'administration lorsque la personne est connectée
----------------------------------------------------------------------------------*/
#menu_admin {
position : fixed !important;
position : normal;
border-left : 1px solid red;
border-right : 1px solid red;
border-bottom : 1px solid red;
position : absolute;
margin-left : -100px;
top : 180px;
width: 100px;
text-align : left ;
}
a#top_admin {
        background-image : url('design/admin_title.gif');
        text-size : small;
        width:100px;
        height : 30px;
        text-indent : -9000px;
        display : block;
        }
#menu_admin p {
color : white;
font-weight : bold;
width : 100px;
}
#action_admin {
        width : 80px;
        height : 30px;
        left : auto;
        right : auto;
        }
#suppr {
        background-image : url('design/suppr.gif');
        repeat : no-repeat;
        width : 45px;
        height : 30px;
        vertical-align : middle;
        position : absolute;
        }
#modif {
        background-image : url('design/modif.gif');
        repeat : no-repeat;
        width : 45px;
        height : 30px;
        vertical-align : middle;
        position : absolute;
        margin-left : 50px;
        }
#admin0 {
        background-image : url('design/admin0.gif');
        width : 100px;
        height : 36px;
        background-repeat : no-repeat;
        display : block;
        }
#admin1 {
        background-image : url('design/admin1.gif');
        width : 100px;
        height : 36px;
        background-repeat : no-repeat;
        display : block;
        }
#admin2 {
        background-image : url('design/admin2.gif');
        width : 100px;
        height : 36px;
        background-repeat : no-repeat;
        display : block;
        }
#admin3 {
        background-image : url('design/admin3.gif');
        width : 100px;
        height : 36px;
        background-repeat : no-repeat;
        display : block;
        }

#aide_top {
        background-image : url('design/aide_top.gif');
        margin: -5px 0 0 0;
        height: 5px;
        width:100px
        repeat : no-repeat;
        }
#aide_bottom {
        background-image : url('design/aide_bottom.gif');
        margin: 0 0 -5px 0;
        height: 5px;
        repeat : no-repeat;
        }

/*pour le menu de changement de style*/
#style {
        position : absolute;
        margin-top : -100px;
        margin-left : 800px;
        color : white;
        }

/*pour les info bulles d'aide*/
#info1,#info2,#info3 {
        position:absolute;
        padding: 5px;
        width:200px;
        height:200px;
        display:none;
        background-image : url('design/aide_border.gif');
        background-attachment : scroll !important;
        background-attachment : fixed;
        background-repeat:no-repeat;
        color:black;
        overflow:auto;
        cursor : pointer;
        }

/*-----------------------------------------------------------
définition de la colonne de droite avec les news importantes
------------------------------------------------------------*/
#droite {
border: 1px solid #FF4E00;
width : 150px;
margin-top : 10px;
float : right;
}
#droite H1 {
font-size : 14px;
padding : 10px;
width : 130px !important;
width : 135px;
margin-top : 0px;
background-color : red;
text-align : center;
color : white;
font-weight : bold;
}
#droite p {
font-size : 13.5px;
padding : 5px;
text-align : left;
line-height : 14pt;
color : white;
font-weight : bold;
}

/*footer*/
#bas {
margin-left : auto;
margin-right : auto;
width:600px;
height:50px;
margin-top : 10px;
text-align : center;
font-weight : bold;
color : red;
}

/*éléments généraux utilisés dans la page sans précision d'emplacement*/
h3#title {
        font-size : medium;
        color : red;
        font-weight: bold;
        border-bottom : 1px solid red;
        text-align : center;
        }
a {
color : red;
}
a:hover {
color : orange;
}
/*pour un affichage sur fond rouge*/
a.a_tarif {
color : white;
}
a:visited {
        color : #FF007E;
        }
a:visited:hover {
        color : orange;
        }
a.a_tarif:hover {
color : orange;
}

.texte {
color : #24038F;
text-indent : 0.5cm;
}
/*pour les signatures dans revue de presse*/
.signature {
color : #042400;
text-align : right;
font-style : italic;
}
.info {
padding : 10px;
width : 130px;
background-color : #EAB646;
text-align : center;
color : #24038F;
font-weight : bold;
}
.detail_info {
padding : 5px;
text-align : left;
}
/*** Mise en forme générale de la page ***/
#reservation {
    border: none;
    margin: auto;
    width : auto;
    padding: 0;
    width: 80%;    /*** Largeur du formulaire ***/
}
#titreForm, #piedForm { /*** Mise en forme du titre et du pied de formulaire ***/
    font: bold .8em arial, hevetica, sans-serif;
    color: white;
    background: #FF4E00;
    margin: 0;
    padding: .5em;
}
#piedForm {
    text-align: right; /*** Les boutons sont alignés à droite ***/
}
#piedForm input {
    font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
    margin-left: 1em;
    color : #24038F;
}
#corpForm { /*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
    border: 1px solid #C84105;
    color: black;
    background: #FFD599;
    margin: 0;
    padding: 1em;
}
#corpForm fieldset {    /*** Mise en forme des cadres ***/
    margin: 0;
    font-style: normal;
    padding: 0 1em 1em;
    border-color : orange;
}
#corpForm legend {  /*** Mise en forme des titres des cadres ***/
    font-weight: bold;
    color: #24038F;
    background: transparent;
}
#corpForm p {   /*** Mise en forme des lignes du formulaire ***/
    padding: .2em 0;
    margin: 0 0 .2em 0;
}
#corpForm fieldset#coordonnees label {  /*** Mise en forme des intitulés de champs ***/
    float: left;    /*** Très important, ne pas suprimer ! ***/
    width: 40%; /*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
    text-align: right;  /*** ... et ils sont alignés à droite... ***/
    margin: 0;
    padding: 0 .5em 0 0;
    color : #24038F;
}
#corpForm fieldset#detail label {  /*** Mise en forme des intitulés de champs ***/
    float: left;    /*** Très important, ne pas suprimer ! ***/
    width: 40%; /*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
    text-align: right;  /*** ... et ils sont alignés à droite... ***/
    margin: 0;
    padding: 0 .5em 0 0;
    color : #24038F;
}
#corpForm fieldset#vieprivee label {  /*** Mise en forme des intitulés de champs ***/
    float: left;    /*** Très important, ne pas suprimer ! ***/
    width: 100%; /*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
    margin: 0;
    padding: 0 .5em 0 0;
    color : #24038F;
}
#corpForm label:hover, #piedForm input {
    cursor: pointer;    /*** Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés ***/
}
#corpForm label.oblig {
    font-weight: bold;  /*** Mise en évidence des champs obligatoires ***/
}
#corpForm .legende {    /*** Mise en forme des aides contextuelles ***/
    font-style: italic;
    color: #6D50C9;
    background: transparent;
    margin: 0;
    padding: 0;
}
#corpForm .focus {  /*** Mise en avant des champs en cours d'utilisation ***/
    background: #FCEFC2;
    color: black;
}
#corpForm .normal { /*** Retour à l'état normal après l'utilisation ***/
    background: white;
    color: black;
}


.page {
        color : white;
        }