/* v6 SOLSTIS & RESONEO

Derniere mise a jour 14/09/2006

Feuille de style des gabarits pour www.cybernetix.fr avec spip

0. Elements charte graphique
1. Styles generaux
2. Structure du site
	2.1 Structure de l entete
	2.2 Structure du corps
		- partie centrale (dimension, position)
		- menu de navigation
	2.3 Structure du pied de page
		- dimension, position, style
		- liens
3. Elements et gabarits specifiques
	3.1 Sommaire
	3.2 Plan du site
	3.3 Fil ariane / chemin de fer
	3.4 Sous-menu de rubrique
	3.5 Recherche
	3.6 Actualite
	3.7 Offres emploi
	3.8 Contact (icone/lien + formulaire)
	3.9 Telechargement


*/
/*============================================================================
0. Charte graphique

bleu institutionnel : rgb(23,26,150) #171A96
bleu division : rgb(64,151,204) #408DCC
rouge actualite : rgb(255,0,0) #F00
rouge pied a:hover : #DF2722
============================================================================*/

/*============================================================================
1. Styles generaux
============================================================================*/

body {
	background: url(fond.jpg) top left repeat-x;
	margin: 0; 
	padding: 0;
	font-family: Arial, sans-serif;
	font-size: 0.8em; 
	line-height: 1.4em; 
	color: #333; 
}

img { border: none; }

ul, ol, li { margin: 0; padding: 0; }

a { 
text-decoration: none; 
color: #333; 
}

a:hover { 
text-decoration: underline; 
}

h1 {
	color: #f00; 
	font-size: 1.7em;
	font-weight: 100;
	letter-spacing: 0.1em;
	margin: 0;  

}

h2 {
	color: #333; 
	font-size: 1.1em; 
	font-weight: bold; 
	margin: 20px 0 10px 0; 
	padding-bottom: 5px; 
	border-bottom: 1px solid #BED6EE;
}

h3 {
	font-family: Arial, sans-serif; 
	color: #333; 
	font-size: 0.9em;
	font-weight: bold; 
	margin-bottom: -5px; 
	text-transform: uppercase; 	
}


.affiche{
visibility: visible;
}

.cache{
display: none;
}

/*============================================================================
2. Structure du site
============================================================================*/
/* 2.1 Structure de l entete ===============================================*/


#banniere{
background-repeat: no-repeat;
width: 988px;
height: 177px; /* la hauteur est différente pour le sommaire, cf. 3.1 Sommaire */ 
margin : 0 auto 0 auto;
}

#bandeau {
display: none;
}

#form-rech{
display: inline;
float: right;
margin-right: 22px;
margin-top: 150px; /* marge différente pour le sommaire, cf. 3.1 Sommaire */ 
}

#form-rech .forml{
color: #A6C5E4;
}

#ok{
background-color: #171A96;
color: #FFF;
font-weight: bold;
font-size: 1em;
width: 30px;
height: 24px;
border-style: outset;
border-color: #171A96;
}

#trad{
display: inline;
float: right;
margin-right: 22px;
margin-top: 155px;
}

/* 2.2 Structure du corps ==================================================*/
#main {
width: 988px; 
margin: auto;
}

/* Menu de navigation principale */
#navigation {
float: left;
width: 202px;
}

#navigation a, #navigation span{ 
	display: block;
	width: 100%;
	height: 100%;
	color: #FFF;
	text-decoration: none;
	font-variant: small-caps; 
	font-size: 0.9em;
	font-weight: bold;
}

#navigation ul {
list-style: none;
}

#institutionnels{
margin-left: 17px;
}

#institutionnels li, #divisions  li {
margin:0 0 5px 0;
}

li h2 {
	margin: 0;
	line-height: 27px;
	text-align: right;
	background-color: #DF2722;
	height: 100%;
	color: #FFF;
	text-decoration: none;
	font-variant: small-caps; 
	font-weight: bold;
	padding:0 13px 0 0;
	font-size:0.9em;
	width:172px;

}

a.lienrubIns{
background-image: url(institutionnel.gif);
background-position: top left;
background-repeat: no-repeat;
}

a:hover.lienrubIns {
background-image: url(institutionnel-o.gif);
background-position: top left;
background-repeat: no-repeat;
}

#divisions {
margin-top: 25px;
}

a.lienrubDiv {
background-image: url(division.gif);
background-position: top left;
background-repeat: no-repeat;
}

a:hover.lienrubDiv {
background-image: url(division-o.gif);
background-position: top left;
background-repeat: no-repeat;  
}

#institutionnels .affiche a, #institutionnels .affiche span{
padding: 3px 13px 0 0;
background-color: #2529A6;
}

#divisions .affiche a, #divisions .affiche span {
padding: 3px 13px 0 0;
background-color: #0167BB;
}

#institutionnels .affiche a.selected, #divisions .affiche a.selected,
#institutionnels .affiche span.selected, #divisions .affiche span.selected {
background-color: #DF2722;
}

.affiche li{
width: 172px;
line-height: 27px;
font-size: 16px;
text-align: right;
}

#institutionnels .affiche li{
margin: 0;
}

#divisions .affiche li{
margin: 0 0 0 17px;
}

#divisions .affiche a:hover, #institutionnels .affiche a:hover {
background-color: #DF2722;
}

/* Contenu de la page */
#contenu {
margin: 0 22px 0 215px;
text-align: left; 
background-color: #FFF;
height: auto !important;
height: 390px;
min-height: 390px;
width: auto !important;
width: 747px;
min-width: 747px;
}

#contenu .spip_logos {
float: left;
padding: 0 10px 0 0;
}

#texte-standard {
text-align: left;
padding: 10px 25px;
}

#texte-standard h3 {
	font-family: Arial, sans-serif;
}

.image-article {
text-align: center;
}

.liste-doc {
list-style: square inside ;
color: #21248A;
}

.liste-doc a {
color: #21248A;
font-weight: bold;
}

.liste-doc a:hover {
color: #F00;
}

#alaune {
background-image: url(fond-nav-droite.jpg);  
padding: 10px; 
line-height: 1.1em;
}

#alaune h2 { 
margin: 20px 0 0 0;
text-transform: uppercase;
}

#pagination {
text-align: center;
}

#presentation, #actus {
background-color: #FFF;
padding: 15px;
border: none;
}

#presentation {
background: #FFF url(fond-bloc.gif) no-repeat bottom;
}

#actus{
height: auto !important;
height: 200px;
min-height: 200px;
}

#element-detail {
padding: 30px;
}

/* 2.3 Structure du pied de page ===========================================*/
#pied{
clear: both; 
width: 949px; 
background-color: #B2E3FB; 
margin: 0 22px 0 17px; 
padding: 2px 0;
border-top: 1px dotted #CCC; 
font-size: 10px; 
color: #171A96; 
text-align: center; 
word-spacing: 6pt; 
letter-spacing: 2pt; 
}

#pied a{
color: #171A96; 
}

#pied a:visited {
color: #171A96; 
}

#pied a:hover {
color: #DF2722; 
}

#pied .selected {
color: #DF2722;
}

/*============================================================================
3. Elements specifiques
============================================================================*/
/* Sommaire ================================================================*/
#sommaire #banniere {
height: 256px;
}

#sommaire #form-rech {
margin-top: 200px;
}

#sommaire #trad {
margin-top: 205px;
}

#sommaire #contenu{
background: none;
}

/* Plan du site ============================================================*/
.plan-ins, .plan-div{
width: 49%;
margin-bottom: 20px;
text-align: left;
float: left;
}

.plan-ins li, .plan-div li{
margin-top: 5px;
}

.plan-ins a:hover, .plan-div a:hover{
text-decoration: none;
color: #0CF;
}

.plan1 {
font-variant: small-caps;
font-size: 1.1em;
font-weight:  bold;
list-style: none;
}

.plan1 ul {
margin-bottom: 20px;
}

.plan-ins .plan1 a {
border-bottom: 1px #171A96 solid;
}

.plan-div .plan1 a{
border-bottom: 1px #408DCC solid;
}

.plan2 {
	list-style: url(rond-rouge.gif) ;
	margin-left: 25px;
	font-size: 0.8em;
	font-weight:  normal;
}

.plan3 {
list-style: url(trait-rouge.gif) ;
margin-left: 25px;
font-size: 0.9em;
}

.plan-ins .plan2 a, .plan-ins .plan3 a,
.plan-div .plan2 a, .plan-div .plan3 a {
border: none;
}

/* Fil d ariane ============================================================*/
#fil-ariane {
width: 500px;
position: relative;
top: 150px;
left: 215px;
font-size: 1em; 
font-weight: bold; 
font-style: italic; 
color: #FFF; 
}

#fil-ariane a { 
font-weight: normal;
color: #FFF;
}

/* Sous-menu ===============================================================*/
#ss-menu {
float: right;
background: #FFF url(fond-nav-droite.jpg) top left repeat-x;
padding: 10px;
height: auto !important;
height: 280px;
min-height: 280px;
width: 140px;
margin: 0 0 0 10px;
}

#ss-menu ul {
list-style: url(trait-bleu.gif) ;
margin-left: 25px;
}

#ss-menu a {
color: #21248A;
font-weight: bold;
}

#ss-menu a:hover {
color: #F00;
}

#ss-menu .selected {
color: #F00;
font-weight: bold;
font-style : italic;
}

/* Recherche ===============================================================*/
#recherche h3 {
margin: 0;
}

h3 a {
font-size: 0.8em;
}

.pertinence {
float: right;
margin-top: -10px;
}

#pagination {
margin: 20px auto 0 auto;
}

/* Actualite ===============================================================*/
#autres-actus {
float: right;
background: #FFF url(fond-nav-droite.jpg) top left repeat-x;
width: 140px;
height: auto !important;
height: 280px;
min-height: 280px;
line-height: 1.1em;
padding: 10px;
margin-left: 10px;
}

#autres-actus ul{
list-style: none;
margin-bottom: 10px;
}

#autres-actus li{
margin-bottom: 5px;
}

.date {
color: #000; 
font-weight: bold;
font-size: 1em; 
line-height: 30px;
}

.savoir-plus{
display: block;
font-weight: bold;
text-align: right;
line-height: 20px;
margin-bottom: -10px;
}

.savoir-plus a {
color:#21248A;
font-style: italic;
}

.savoir-plus a:hover {
color: #F00;
}

/* Offres emploi ===========================================================*/
.liste-annonce {
list-style: square ;
margin-left: 25px;
}

/* Contact =================================================================*/
/* bouton lien contact */
#contact {
clear: right;
float: right;
width: 140px;
}

#contact a {
text-decoration: none;
color: #21248A;
font-size: 1.2em;
font-weight: bold;
}

#contact a:hover{
color: #F00; 
text-decoration: underline; 
}

/* formulaire contact */
#msg-contact #contenu {
background: #FFF url(fond-nav-droite.jpg) top left repeat-x;
}

/* Telechargement ==========================================================*/
.icone-doc {
float: left;
}

h2 a {
color: #21248A;
}

h2 a:hover{
color: #F00;
}


/*============================================================================
                                     FIN
============================================================================*/