/*************************************************/
/* CSS principal du site www.jlncreation.com     */
/* Auteur : Julien LIBERT                        */
/* Date : 11/06/2010                             */
/*************************************************/




/************************************/
/* Balises élémentaires             */
/************************************/

html, body
{
    height: 100%;
    width: 100%;
}

/*On enleve les marges*/
html, body, p, div
{
        margin: 0; 
        padding: 0;
}

img
{
    border: 0;
}

/* Couleur de fond, couleur du texte, police */
body
{
    background: #676265;    
    color: white;
    font-family: verdana;  
    font-size: 0.9em;
}


/* Caractères Gras*/
strong
{
    color: #a8cf38; 
}

/* Liens, Liens visités et liens survolés*/
a, a:visited
{
    
    color: #a8cf38;     
    text-decoration: none;
}

a:hover
{       
    color: #a8cf38;
    text-shadow: 1px 1px 3px #000000;     
}

/* Titres */
h1, h2, h3
{
    color: #a8cf38;     
    margin-bottom: 20px;
}

h3:first-letter
{
    color:#fff;    
}

/* Les Tableaux */
table, tr, td
{
    margin: 0;
    padding: 0;
    border: 0;
}

td
{
    
    padding-left: 5px;
    padding-right: 5px;
    width: 20%;
    vertical-align: top;    
}
td h3
{
    margin: 0;
}
td ul
{
    font-size: 0.8em;
}
/******Fin des tableaux******/

/* Les Listes */
ul
{                 
    
}
li
{
    
}

/****Fin des balises elementaires****/

/************************************/
/*                                  */
/*    Selecteur d'ID                */
/*                                  */
/************************************/

/* Le conteneur principal contient tout sauf le Footer */
#conteneur
{

}    
/* L'en-tête */
#header
{
    margin: 10px;    
}

/* Titre */
#titre
{    
    /* Permet de regrouper les éléments du titre et empeche #domaine de partir à droite de l'ecran*/
    display:inline-block;   
}

/* Nom */
#nom
{
    text-indent: -1em;   /* Retrait de la 1ere ligne*/
    padding-left: 1em;  /* Compensation pour le bloc nom*/
    padding-bottom: .1em; /* Ajoute un petit espace avec la ligne suivante*/
    color: #a8cf38;    
    font-size: 5em;      
    line-height: .75; /* enleve l'espace entre les lignes*/    
}
 
/* Spécialité */   
#specialite
{    
    font-style: italic;
    font-size: 1.75em;
}

/* Domaines */
#domaines
{
    text-align: right; /* Alignement à droite du bloc #titre */
    font-size: 1em;    
}

/* Conteneur englobant tout le corps du site */
#corps
{
    margin-top: 20px;       /* Marges supérieures par rapport au header */
    /* On centre le corps */
    margin-left: auto;
    margin-right: auto;
    /**********************/
    width: 990px;  /* Largeur du contenu */ 
    overflow: hidden;     /* On masque ce qui dépasse du cadre : les autres diapos */
    /*height: 100%; /* Hauteur */   
}

/* Le Contenu : toutes les diapos*/
#content
{
    width:400000px; /* Grande largeur pour contenir toutes les diapos */
    overflow: hidden;    /* On cache ce qui dépasse (permet de ne plus avoir la barre de scrolling)*/
}

/* Paragraphes du contenu */
#content p
{

    text-align: justify;
    margin-bottom: 20px;
}

#content h1
{
    margin-left: 40px;
}
/* Liste spécifique a #maintenance */
#maintenance li
{
    font-size: 0.8em;    
}

/* Le Background */
#background
{
    /* Suppression des marges */
    margin: 0;
    padding: 0;
    /*************************/
    /* On place le pied de page tout en bas de la fenêtre */
    position:absolute;
    bottom:0px;
    /*****************************************************/
    z-index: -1; /* On place l'image en fond */
    width: 100%; /* L'image doit prendre toute la largeur */    
}

/* Le Pied de page */
#footer
{
    margin-top: 5px;
    text-align: center;
}

/****************************/
/* Les Elements de la Carte */
/****************************/

/* La Carte */
#carte
{
    /* Réglage des marges de la carte */
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;    
    padding: 0;
    /*********************************/
    width: 600px;
    height: 350px;
    border: solid 1px #a8cf38;      /* Bordure Verte */
    box-shadow: 0px 0px 12px #a8cf38;      /* Effet d'ombre verte */
}

/* Texte contenu dans la carte */
.map_text
{
    color: black;    /* On précise car sinon il prend la couleur du site donc blanc en l'occurence (et blanc sur la bulle blanche... c'est invisible!)*/ 
}

/*** Fin elements Carte ***/

/***********************************************/
/*          Vignettes des réalisations         */
/***********************************************/

/* vignette de Jausiers*/
#pic_jausiers
{
    background-image: url('../images/thumb/location_jausiers_s.jpg');
}
/* vignette de l'APAPA*/
#pic_apapa
{
    background-image: url('../images/thumb/apapa_asso_s.jpg');
}
/* vignette du Cabinet Prandi */
#pic_prandi
{
    background-image: url('../images/thumb/cabinet_prandi_s.jpg');
}

/* Propriétés communes pour les vignettes des sites */  
#pic_jausiers, #pic_prandi, #pic_apapa
{
    display: inline-block;     
    width: 150px;
    height: 150px;
}

/********Fin des vignettes des réalisations*******/



/***************Fin des selecteurs d'ID**********************/

/************************************/
/*                                  */
/*    Selecteur de Classe           */
/*                                  */
/************************************/


/* Met en Gras... */
.gras
{
    font-weight: bold;
}   

/* Arrondi les bords */                    
.arrondi
{
    /* Bords sup-gauche et inf-droit arrondis */
    -moz-border-radius: 25px;    /* Pour Mozilla */
    -webkit-border-radius: 25px; /* Pour Chrome, Safari, Android...*/
    -khtml-border-radius: 25px; /* Pour Konqueror...*/
    border-radius: 25px; /* Pour le reste ... */
}

/* Permet de mettre en retrait le texte */
.retrait
{
    margin-left: 40px;
}
/* Le contour "Green Glow" typique du site */
.contour
{
    -moz-box-shadow: 0px 0px 12px #a8cf38;
    -webkit-box-shadow: 0px 0px 12px #a8cf38;
    -khtml-box-shadow: 0px 0px 12px #a8cf38;
    box-shadow: 0px 0px 12px #a8cf38;    
}

/* Attributs supplémentaires pour les classes .arrondi enfant du contenu */
#content > .arrondi
{
    background-position: 10px 30px;    /* Decale la petite image logo */
    /* Bords sup-gauche et inf-droit arrondis */
    -moz-border-radius: 25px 0px 25px 0px;    /* Pour Mozilla */
    -webkit-border-radius: 25px 0px 25px 0px; /* Pour Chrome, Safari, Android...*/
    -khtml-border-radius: 25px 0px 25px 0px; /* Pour Konqueror */
    border-radius: 25px 0px 25px 0px; /* Pour le reste ... */
    /******************************************/   
    background-color: rgba(65, 65, 65, 0.5);   /* Couleur de fond avec transparence */    
    float: left;     /* Permet d'aligner les blocs horizontalement */ 
    width: 800px; /* Taille des diapos */
    /* Espacement entre les diapos */
    margin-left: 75px;
    margin-right : 75px;
    /*******************************/
    /* Marge intérieure des diapos */
    padding: 20px;
}

/* Images du site */
.picture, .picture_colonne
{
    margin: 20px;
    /* Le Fameux Green Glow du site */
    border: solid 2px #a8cf38;     
    -moz-box-shadow: 0px 0px 12px #a8cf38;
    -webkit-box-shadow: 0px 0px 12px #a8cf38;
    -khtml-box-shadow: 0px 0px 12px #a8cf38;
    box-shadow: 0px 0px 12px #a8cf38;
    /********************************/
}

/* Images du site a aligner avec du texte */
.picture_colonne
{    
    float: left;
}

/* Disposition des créations et des icones de service*/
.creations, .services
{    
    /* On cherche surtout à les centrer... */
    text-align: center;
    margin-top: 20px; /* Petit espace avec ce qui précède*/
    margin-left: auto;
    margin-right: auto;
}

/* Dispositions des icones de services en page d'accueil*/
.services > div
{
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
}
/* Liens spéciaux  pour les services*/
.services
{
    font-weight: bold;
    font-size: 1.2em;
}


/* Liens spécifiques lors dans les lightbox affichant l'adresse des sites*/    
.lien_site
{
    margin-top: 10px;
    text-align: center;
}   

/* Style de l'adresse */
.adresse
{
    font-weight: bold;
}

/* Les boutons du site */
.bouton
{
    font: bold 1.1em arial,verdana,tahoma,sans-serif;  /* Caractères */
    color: inherit;     /* On fait hérité de la couleur du texte sinon NOIR par défaut.*/
    margin: 50px ;
    padding: 9px 11px 9px 11px;
    background: #676265; /* Couleur de fond */


    /* Bords arrondis */
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;  
    /******************/
    
    /* Effet Green Glow */
    border: 1px solid #a8cf38;
    -moz-box-shadow: 0px 0px 12px #a8cf38;
    -webkit-box-shadow: 0px 0px 12px #a8cf38;
    -khtml-box-shadow: 0px 0px 12px #a8cf38;
    box-shadow: 0px 0px 12px #a8cf38;           
    /********************/

    /* On prépare les transitions vers les autres états   */
    /* On evite Opera car cela n'est pas joli :( */
    -webkit-transition-duration: 0.20s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-duration: 0.20s;
    -moz-transition-timing-function: ease-out;  
    /*---------------------------------------------------*/
}
     
/* Bouton survolé et sélectionné */
.bouton:hover, .bouton:focus
{
    background: #a8cf38; /* On change le fond */
    /* Ombrage accentué */
    -moz-box-shadow: 0px 0px 25px #a8cf38; 
    -webkit-box-shadow: 0px 0px 25px #a8cf38;  
    -khtml-box-shadow: 0px 0px 25px #a8cf38;  
    /*box-shadow: 0px 0px 25px #a8cf38; /* On evite pour Opera car effet non reussi */    
}

/* Bouton cliqué */
.bouton:active
{
    text-shadow: 1px 1px 3px #000;     
    background: #a8cf38; /* On change le fond */    
}

/* Permet de présenter du contenu sous forme de colonnes */
.colonne_gauche
{
    width: 250px;
    float: left;    
}
/* Permet de présenter du contenu sous forme de colonnes */
.colonne_droite
{
    width: 250px;
    float: right;
}
/* Permet de présenter du contenu sous forme de colonnes */
.colonne_centre
{

    margin-left: 250px;
    margin-right: 250px;
}


/********************** Fin Selecteur de Classe *****************/


/********************************/
/* Partie Formulaire de Contact */
/********************************/

form li
{
    list-style: none;
}
/* Regroupe les champs d'un formulaire */
fieldset 
{
    /* Positionnement */
    width: 650px;
    margin: 0;
    padding: 30px;
    /*****************/
    border: 0; /* On supprime la bordure */
}
/* Spécificités du titre des formulaire */
legend
{
    color: #fff;   
}
/* Spécificité du label du bloc message */
.form_message label
{
    display: block;
}


/* mise en page de form_message dans le formulaire */
li.form_message
{
    padding-top: 10px;
}

/* Champs et zones de texte d'un formulaire */
.champs_texte, .zone_texte
{
    width: 220px;
    background: #676265; /* Couleur du Fond */
    margin: 20px;
    padding: 5px 14px;    
    color: #fff;     /* Couleur du texte à l'intérieur des champs sinon noir par défaut a spécifier*/
    font: normal 1.2em verdana,tahoma,sans-serif; /* Taille de la police de caractère */
    /* Effet Green Glow */
    border: solid 1px #a8cf38; 
    -moz-box-shadow: 0px 0px 12px #a8cf38;
    -webkit-box-shadow: 0px 0px 12px #a8cf38;
    -khtml-box-shadow: 0px 0px 12px #a8cf38;
    box-shadow: 0px 0px 12px #a8cf38;
    /********************/
    
    /* Animation prévue lors d'une transition */
    -o-transition-duration: 0.10s;
    -o-transition-timing-function: ease-out;
    -webkit-transition-duration: 0.10s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-duration: 0.10s;
    -moz-transition-timing-function: ease-out;  
    /*----------------------------------------*/
}

/* Spécificités des zones de texte */
.zone_texte
{
    width: 500px; /* Taille */
    /* Contours arrondis spécifiques*/
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px;    
    -khtml-border-radius: 15px;    
    border-radius: 15px;    
}


/* Spécificités lors de la sélection d'un champ de formulaire */
.champs_texte:focus, select:focus, textarea:focus
{
    /* Green Glow accentué */
    border: solid 3px #a8cf38;
    -moz-box-shadow: 0px 0px 25px #a8cf38;
    -webkit-box-shadow: 0px 0px 25px #a8cf38;
    -khtml-box-shadow: 0px 0px 25px #a8cf38;
    box-shadow: 0px 0px 25px #a8cf38;              
    /***********************/
}
/* Message d'Erreur lors de la non validation deu formulaire */
.erreur
{
    font-size: 1.1em;
    padding-left: 25px;
    background: url(../images/icones/croix.png) left no-repeat;
    display: inline;
    color: #dd4751;
    display: none;    
}

/* Message lors de la réusite de l'envoi du formulaire */
#message_envoye
{
    width: 500px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    min-height: 200px;
    background: url(../images/icones/check.png) top left no-repeat;  /* Icone de Check */
}
/* On baisse le titre pour qu'il soit en face de l'icone Check */
#message_envoye h2
{
    padding-top: 10px;
    margin-left: 60px;
}

/********* Fin Formulaire de Contact **************/


/***************** FIN DU CSS PRINCIPAL *******************/