/*
--------------------------------------------------
TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
  CSS of the site www.spirales-webdesign.net
  Author:   Patricia Cardet
  Version:  April 19, 2006
TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
----------------------------------------------- */	   



/* Couleurs utilisées ------------------------------------------------------------ 
marine		= #000033
bleu ciel	= #D4E6F7	145,175,230
bleu roi	= #55A0FF  	85,160,255	(hover)
orange 		= #FF9900
orange2		= #006633 	(hover)
grey		= #F2F2F2
white 		= #FFFFFF
black 		= #000000
*/

/* ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo 
**
* - General
*
* - Elements pour Index
*
* - Elements pour Pages
*
* - Liens Index
*
* - Class Font-size
*
* - Formulaires
**
0000000000000000000000000000000000000000000000000000000000000000000 */

/* START  General ------------------------------------------------  */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
  	font-weight: normal;
	font-variant: normal;
	color: #D4E6F7;
	}

body
	{
	font-size: 90%;
	text-align: left;
	color: #D4E6F7;
	background-color: #000033;
	}

.orange {
    color: #FF9900;
	background-color: transparent;
	font-weight: bold;
}



/* START  Elements pour page Index ---------------------------*/

#container_spirale_1
 {
    position: absolute;
	left:2%;
	top:5%;
	}

#container_spirale_2  {
    position: absolute;
	left:100%;
	top:50%;
}


#container_enseigne {
    position: absolute;
	width: 10em;
	left: 23em;
	top: 14em;

}
#container_spirale_fleche {
    position: absolute;
	left: 8em;
	top: 60%;
}

#container_footer_index {
    position:relative;
	right:45em;
	bottom: 1em;
	padding: 2em 0 0 0;
	margin-top: 3.5em; 
	margin-left: auto; 
	margin-bottom: -1em;
	margin-right: auto;
	width: 40em;
	background: #000033;
	text-align:center;
}

/*END  Elements pour page Index ------------------------------------*/


/*START  Elements pour pages  -------------------------------------*/

	
#container_page
	{
		margin: 0;
		padding: 0;
		width: 98%;
		text-align: left;
		background-color: #000033;
		color: #D4E6F7;
		border: none;
	}
	
#header
	{
		height: 1em;
		background-color: #000033;
	}
	
#container_spirale
	{
		position:absolute;
		left: 7px;
		padding-top:0;
		width: 23%;
		margin-right:3.3em;
		margin-top: 1em;
		background-color: #000033;
		z-index: 3;
}	
	
#container_texte {
		margin: 0 20% 0 22%;
		padding-left: 12em;
		padding-top: 15em;
		padding-right: 0;
		background-color: #000033;
		overflow:visible;
		z-index:5;
}
					
#container_navigation {

    position: relative;
	left:3px;
	top: 0;
	width: 150px;
	height: 20em;
    padding-left: 3em;
	margin-right:3em;
    background-color: #000033;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
	
#container_droite {
    position:absolute;
    width: 10%;
    min-height:60%;
    height:60%;
    right:1em;
    padding:10px;
    background-color: #000033;
}
	
	 
#navigation_footer {
    font-size:x-small;
	color: #D4E6F7;
	height: 4em;
	
}

.container_cadre {
    position: relative;
    left:0;	
    width:40em;
    height: auto;
    border: 1px solid #D4E6F7;
    padding:2em;
	_padding:2em;
	margin-bottom: 1em;
	overflow:auto;
}

.label_cadre {
    position: absolute; 
	text-align:left;
	padding-left: 3em;
	padding-right: 4em;
	top: 1.5em;
	}
	
.image_portfolio {
	border: 1px solid #D4E6F7;
	padding: 0.2em;
	margin-left: 2em;
	float:right;
}	

.image_liens {
	border: 1px solid #D4E6F7;
	padding: 0.2em;
	background-color:#000033;
}	


.tableau {
    border-color:#000033;
	padding:0.1em:
	
}
/*END  Elements pour pages  -------------------------------------*/


/* START  Class font-size ---------------------------------------*/
.xx-small {
  font-size:xx-small; 
  }
   
.x-small { 
  font-size:x-small;
  }
  
.small {
  font-size:small;
  }

.medium {
  font-size:medium;
  }

.large {
  font-size:large;
  } 
  
.x-large {
  font-size:x-large;
  }
  
.xx-large {
  font-size:xx-large;
  }    
 
/* END  Class font-size ------------------------------------*/


/*START Elements pour Pages --------------------------------*/

html>body {
  font-size: small;
}

p, blockquote {
    font-size: 1em;
	font-weight: normal;
	font-variant: normal;
	color: #D4E6F7;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
   text-decoration: none;
   color: #D4E6F7;
   text-align: left;

}
h1 {
   font-size: 2.0em;
}

h2 {
   font-size: 1.8em;
}

h3 {
   font-size:1.5em;
}

h4 {
   font-size: 1.3em;
}

h5 {
   font-size:1.1em;
     
}

h6 {
   font-size:1em;
}

ul, li {
	font-size:1em;
	line-height:150%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
/* END Elements pour pages -------------------------------------- */


/* START  Liens Index -------------------------------------------*/

a.lien_index img {
	border: none;
}

a.lien_index {
   color: #D4E6F7;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   text-decoration: none;
   background-color: #000033;
}

a:visited.lien_index {
   color:#D4E6F7;
   text-decoration: none;
   background-color: #000033;
}

a:hover.lien_index{
   color:#FFFFFF;
   text-decoration: none;
   background-color: #000033;
}

/* END  Liens Index ---------------------------------------*/




/* START  Liens 2 -------------------------------------------*/

a.lien2 img {
	border: none;
}

a.lien2 {
   color: #D4E6F7;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   text-decoration: underline overline;
  
}

a:visited.lien2 {
   color:#D4E6F7;
   text-decoration: underline overline;
   background-color:#000033;
}

a:hover.lien2 {
   color:#FFFFFF;
   text-decoration: underline overline;
   background-color:#000033;
}

/* END  Liens 2 ---------------------------------------------*/

/* START  Liens 3 -------------------------------------------*/

a.lien3 img {
	border: none;
}

a.lien3 {
   color: #D4E6F7;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   text-decoration: none;
   font-size:x-small;
}

a:visited.lien3 {
   color:#D4E6F7;
   text-decoration: none;
   background-color:#000033;
}

a:hover.lien3 {
   color:#FFFFFF;
   text-decoration: none;
   background-color:#000033;
}

/* END  Liens 3 ---------------------------------------------*/


/* START Listes --------------------------------------------- */
 .iconlist
{
list-style: none;
color: #D4E6F7;
border-color: #000033;
margin: 10px;
padding: 0;
}

li.niveau1
{
background-image: url(../images/SpiraleFlecheXXXS.gif);
background-repeat: no-repeat;
background-position: 0 50%;
color: #D4E6F7;
padding-left: 40px; /* espace image-texte */
margin-left: 0; /* indentation */
line-height:1.9em
}

li.niveau2
{
background-image: url(../images/SpiraleFlecheXXXXSb.gif);
background-repeat: no-repeat;
background-position: 0 5%;
padding-left: 30px; /* espace image-texte */
margin-left:40px; /* indentation */
line-height:inherit;
}

li.niveau3
{
background-image: url(../images/SpiraleFlecheMinib.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding-left: 20px; /* espace image-texte */
margin-left: 70px; /* indentation */
line-height:inherit;
}

li.niveau4
{
background-image: url(../images/SpiraleFlecheXXS.gif);
background-repeat: no-repeat;
background-position: 0 50%;
color: #D4E6F7;
padding-left: 50px; /* espace image-texte */
margin-left: 0px; /* indentation */
line-height:2.1em
}

/* 
END Listes
------------------------------------------------------------------
 */



/* START  Navigation Drapeau -------------------------------------*/
		
#line_vertical {
	position: relative;
	left:3%;
	height: 8em;
	top:1em;
	width:1px;
	} 				

#container_button1, #container_button2, #container_button3, #container_button4, #container_button5, #container_button6, #container_button7, #container_button8, #container_button9, #container_button10, #container_button11, #container_button12  {
position: absolute;
left:0;	
height: 1.6em;
background-color: #FF9900;
color:#000033;
font-size:9px;
padding-left:3px;
}


#container_button {
position: absolute;
left:0;	
height: 1.6em;
background-color: #FF9900;
color:#000033;
font-size:9px;
padding-left:4px;
}

#container_button1 {
	top: 5em;
	width: 9.5em;
}

#container_button2 {
	top: 7em;
	width: 11em;
}

#container_button3 {
	top:9em;
	width: 9em;
}
		
#container_button4 {
	top:11em;
	width: 8em;
}		
  
#container_button5 {
	top:13em;
	width: 10em;
}

#container_button6 {
	top: 15em;
	width: 9em;
}

#container_button7 {
	top: 17em;
	width: 8em;
}

#container_button8 {
	top:19em;
	width: 12.5em;
}


#container_button9 {
	top: 21em;
	width: 11em;
}

#container_button10 {
	top: 23em;
	width: 8em;
}

#container_button11 {
	top: 25em;
	width: 9em;
}

#container_button12 {
	top: 27em;
	width: 8em;
}

/* END  Navigation Drapeau -------------------------------------*/  

/* START  Liens Drapeau ------------------------------------*/

a img {
	border: none;
}

a {
   color: #000033;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   text-decoration: none;
}

a:visited {
   color:#000033;
   background-color: #FF9900;
   text-decoration: none;
}

a:hover {
   color:#55A0FF;
   text-decoration: none;
    
  }

/* END  Liens Drapeau ---------------------------------------------*/

/* START Navigation Footer --------------------------------------*/

.container {
	position:relative;
	padding: 30px;
	margin-top: 0.5em; 
	margin-left: auto; 
	margin-bottom: 1em;
	margin-right: auto;
	width: 80%;
	background: #000033;
}



#onglets {
	width: 100%;
	float: left;
	font-size: small;
	margin: 0 auto;
	padding: 0 10px 0 10px;
	border-top: 1px solid #D4E6F7; /* ligne horizontale */
	text-align:center;
}

#onglets li {
	float: left;
	margin: 0 auto; 
	padding: 0;
	display: inline;
	list-style: none;
	}
	
#onglets a:link, #onglets a:visited {
	float: left;
	font-size: 85%;
	line-height: 20px;
	font-weight: bold;
	margin: 0 10px 0 10px;
	background-color:#000033;
	text-decoration: none;
	color: #D4E6F7;
	}

#onglets a.active:link, #onglets a.active:visited, #onglets a:hover {
	border-top: 4px solid #FF9900;
	padding-bottom: 2px;
	color: #D4E6F7;
	}
/* END Navigation Footer
 ------------------------------------- */


/* START Formulaires 
---------------------------------------*/
.saisie input, .saisie textarea
        {
        color: #000033;
        font-size: 10px;
        background-color: #D4E6F7;
        padding: 3px;
        border: none;
        }