/*
    20 juillet 2007
    echavanon@neptune.fr
    FPI - CSS
    Front end
*/

/*  ----------------------------------------------------------------------------
    ARCHITECTURE
*/

html, body {
    margin: 0;
    padding: 0;
}


body{
    background:#fff url(background/bg_rayures_white.gif) repeat left top;
}

#conteneur{
	position: relative;
		/* permet au bloc de servir de référent pour
		   ses descendants positionnés en absolu */
	min-height: 100%;
    padding:0;
    width:1136px;
    text-align: left; /* on rétablit l'alignement normal du texte */
    margin:auto;
    margin-top:70px;
    color:#494544;
}


div#conteneur #fake_header {
	margin-top: 0; /* évite tout risque de fusion des marges */
}
div#conteneur #footer {
	margin-bottom: 0; /* évite tout risque de fusion des marges */
}

/* --- PIED DE PAGE --- */
div#fake_footer {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
		/* pour que le bloc prenne toute la largeur du bloc de référence
		   Note : le bloc de référence est le plus proche ancêtre positionné
		   en relatif ou en absolu */
	height: 1px;
}


#header{
    height:21px;
    /*background:url(background/maquette_01.png) no-repeat left top;*/
}




#left_slot{
    position: absolute;
    left:0;
    padding:0;
    margin:0;
    width:181px;
    height:561px;
}


#right_slot{
    position: absolute;
    right:0;
    padding:0;
    margin:0;
    width:33px;
    height:561px;
    /*background:url(background/maquette_04.png) no-repeat left top;*/
}

#main_slot{
    padding:0;
    width:922px;
    margin:0 33px 0 181px;
    text-align:justify;
    /*background:url(background/bg_centre.png) no-repeat center top;*/
}
#principal{
    height:504px;
    width:922px;
}

#rubriques{
    margin:0;
    height:57px;
    width:862px;
}


/*  ----------------------------------------------------------------------------
    Popup
*/
#overlay{
    top:0;
    left:0;
    display:none;
    position:absolute;
    z-index:50;
    width:100%;
    height:100%;
    min-height:100%;
    margin: 0;
    padding: 0;
    background:#000000;
    opacity:0.70;
    filter: alpha(opacity=70);
    -moz-opacity: 0.70;
}

.popup{
    position:absolute;
    display:none;
    z-index:100;
    opacity:0.90;
    filter: alpha(opacity=90);
    -moz-opacity: 0.90;
}
/*  ----------------------------------------------------------------------------
    Bas de page
*/
#footer{
    text-align:right;
    padding-right:70px;
    font-size:10px;
}
#footer, #footer a, #footer a:link{
    color:#AFAFAF;
}
#credits{
    border:3px solid #DFDFDF;
    -moz-border-radius:3px;
    border-radius:3px;
    background:#FFF;
	top: 200px;
	left: 50%;
	width: 400px;
	margin-left:-200px;
	padding:10px 20px;
}

#credits h2{
    padding:0;
    margin:0 0 5px 0;
    color:#8F8F8F;
}

#credits h3{
    text-align:left;
    color:#6F6F6F;
    border-top:1px solid #EEEEEE;
    margin:0 0 5px 0;
    padding-top:5px;
}

#credits #trigger_close{
    color:#AFAFAF;
    text-align:right;
}

/*  ----------------------------------------------------------------------------
    Menu de gauche
*/
#logo_accueil{
    display:block;
    margin:0 0 0 0px;
    background:url(static/logo3.png) no-repeat left top;
    height:106px;
    width:160px;
    cursor:pointer;
}

#logo_accueil span{
    display:none;
}

#left_slot ul{
    margin:10px 26px 0 0;
}
#left_slot ul li{
    margin:0;
    padding:0;
}

#left_slot ul li a, #left_slot ul li a:link, #left_slot ul li a:visited{
    color:#AFAFAF;
    text-decoration:none;
    background:url(background/carre_gris.gif) no-repeat center right;
    padding:2px 16px 2px 0px;
    margin:0;
    text-align:right;
    display:block;
}


#left_slot ul li a:hover, #left_slot ul li a.visited{
    color:#3B3E3F;
    background:url(background/carre_rouge.gif) no-repeat center right;
}

/*  ----------------------------------------------------------------------------
    Rubriques
*/
#rubriques a{
    padding:10px 5px 0 5px;
    margin:6px 6px 2px 6px;
    display:block;
    float:left;
    font-size:10px;
    text-decoration:none;
    color:#9F9F9F;
    text-align:center;
    background:url(buttons/bouton-triangle_off.png) no-repeat top center;
    

}
#rubriques a:hover, #rubriques a.visited{
    color:#3B3E3F;
    background:url(buttons/bouton-triangle_on.png) no-repeat top center;
}



/*  ----------------------------------------------------------------------------
    Pages d'info
*/

#page_info, #illustration{
    margin:5px;
    padding:30px;
    height:434px; /* 504px -5 -5 -30 -30 */
}
#page_info{
    width:280px; /* 350px - margin de 5px - padding de 30px */
    background:#fff;
    opacity:0.90;
    filter: alpha(opacity=90);
    -moz-opacity: 0.90;
    float:left;
    font-size:11px;
    text-align:justify;
    display:none; /* sera affiché via JS */
}
#illustration{
    width:600px; /*922-281 -5 -5 -0 -0 : (margin de 5px + padding de 0px) */
    margin:1px 1px 1px 330px;
}

#page_info h1{
    display:none;
}

/*
#illustration #loader{
    width:590px;
}*/


/*  ----------------------------------------------------------------------------
    Page d'accueil
*/

#contenu_accueil{
    position:absolute;
    left:50%;
    z-index:50;
    top:100px;
    width:152px;
    margin-left:-76px; /* Pour centrer le module, on fait une marge négative sur la moitié de la largeur */
}
#logo_accueil_top{
    background:url(static/logo2.png) no-repeat center top;
    height:77px;
    margin-bottom:30px;
}
#logo_accueil_bottom{
    background:url(static/design_communication.png) no-repeat center bottom;
    margin-top:30px;
    height:9px;
}


#liste_accueil{
    text-align:center;
    width:auto;
}


#liste_accueil table{
    margin:auto;
    border-collapse:collapse;
}

#liste_accueil table td{
    padding:0;
}
#contenu_accueil p.intro_text{
    display:none;
}



/*  ----------------------------------------------------------------------------
    Contenu de la rubrique
*/

#realisations_slot{
    margin:0 5px 0 0;
    padding:2px 2px 2px 0;
    height:504px; /* 504px -5 -5 -2 -2 ? Pas nécessaire ?? */
    width:170px; /* 164px +5 -0 +2 +2 (- margin de 5px - padding de 2px )*/
    background:url(background/slot_white.gif) no-repeat right top;
    color:#AFAFAF;
    /*opacity:0.90;
    filter: alpha(opacity=90);
    -moz-opacity: 0.90;*/
    float:left;
    display:none;
}


#rubrique_content{
    margin:170px 6px 0 10px;
    height:320px;/* Grrr ... Obligé de spécifier ici aussi pour avoir l'ascenceur*/
    overflow:hidden; /* Cet overflow sera surchargé via javascript */
}

#rubrique_content table{
    margin:0;
    border-collapse:collapse;
}

#rubrique_content table td{
    padding:0;
}

#illustration_realisation{
    margin:3px 0px 6px 0;
    padding:0;
    height:491px; /* 504px -2 -5 -0 -0 */
    width:731px; /*922-181 -5 -5 -0 -0 : (margin de 5px + padding de 0px) */
    margin-left:181px;
}



#realisations_slot div.realisation_mini{
    padding:0 2px;
}

.realisation_mini a, .realisation_mini a:visited, .realisation_mini a:link{
    color:#4F4F4F;
}
.realisation_mini a:hover{
    color:#9F6D6F;
}



div.realisation_mini h3{
    background:url(background/carre_gris.gif) no-repeat 0px 6px;
    text-align:left;
    font-weight:normal;
    font-size:10px;
    padding-left:10px;
    margin:15px 0 0 0;
}
div.realisation_mini p{
    text-align:left;
    padding:0;
    margin:0 0 5px 0;
}



#rubrique_content div.visited h3{
    background:url(background/carre_rouge.gif) no-repeat 0px 6px;
    color:#4F4F4F;
}
/*
#rubrique_content div.visited table{
    background:#D90612;
}*/

#realisations_slot div.realisation_mini table{
    margin:5px 0;
}

/* Ascenceur */
#scrollbar{
    float:left;
    height:40px;
    width:21px;
    height:499px;
}

#scrollbar a{
    display:block;
    width:20px;
    height:9px;
    margin:4px 0;
}

#scrollbar a span{
    display:none;
}

#scrollbar a.prev{
    margin-top:472px;
    background:url(buttons/bouton-triangle_off.gif) no-repeat left top;
}
#scrollbar a.next{
    background:url(buttons/bouton-triangle_desc_off.gif) no-repeat left top;
}
#scrollbar a.prev:hover{
    background:url(buttons/bouton-triangle_asc.gif) no-repeat left top;
}
#scrollbar a.next:hover{
    background:url(buttons/bouton-triangle_desc.gif) no-repeat left top;
}



/* miniatures d'accueil et de réalisation */

a.thumbnail, a.thumbnail:link, a.thumbnail:visited{
    display:block;
    margin:0;
    padding:0;
    text-decoration:none;
}

a.thumbnail img{
    border:1px solid transparent;
    /*padding:5px;*/
}

a.thumbnail:hover img{
    border:1px solid #fff;
}

div.realisation_mini a.thumbnail:hover img{
    border:1px solid #C6C7C8;
}


a:active, a:focus{
   outline:none;
}


span.logo_mattcom, span.logo_neptune{
    padding:2px 2px 2px 20px;
}
span.logo_neptune{
    background:url(static/neptune_mini_web.gif) no-repeat left center;
}
span.logo_mattcom{
    background:url(static/favicon.gif) no-repeat left center;
}


a, a:link, a:visited{
    color:#4F4F4F;
}