/* designed by Reynald Bouttard iglooscope.com - Conception Reynald Bouttard iglooscope.com*/

/* ----------------------------------------------------------------------------
	
	fond de page	 #68655d 	gris 
	navigation		#49453c	gris foncé
	couleur font 1	#8ab4ed 	bleu pale
	couleur font 2	#ffffff	blanc
	couleur logo	#719fdc	bleu iglooscope
----------------------------------------------------------------------------*/

/*------global------------------------*/



body
{
margin: 0;
padding: 0;
height: 100% ;
background: #68655d ;
font-family:  Helvetica, Lucida grande, Arial, Verdana;
color: #ffffff;
font-size:11px;
line-height: 1.8em;
text-align: center ;

}

*
{
outline: none ;
}

img 
{ 
border: 0 
}

a
{
color: white ;
}

a.italic
{
color: #ffffff ;
text-decoration: none ;
font-style: italic ;
}

a.italic:hover
{
color: #000000 ;
background: #ffffff ;
font-style: italic ;
}

a.cont
{
color: #ffffff ;
font-style: italic ;
}

a.cont:hover
{
color: #000000 ;
background: #ffffff ;
font-style: italic ;
}

a.blog
{
text-decoration: none ;
}



.hidden
{
visibility: hidden ;
}


.topheader
{
width: 100% ;
height: 8px ;
margin: 0 ;
padding: 0 ;
background: url(images/commun/topheader_bg.gif) repeat ;
}

#top
{
width: 100% ;
height: 140px ;
background: url(images/commun/footer_bg.jpg) repeat ;
margin: 0 auto;
}

#header
{
width: 800px ;
height: 140px;
background: url(images/commun/footer_bg.jpg) repeat ;
margin: 0 auto;
}

#logo
{
width: 400px ;
height: 140px ;
float: left ;
margin: 0 ;
padding: 0 ;
background: url(images/commun/logo.gif) no-repeat;
}

#navigation
{
background: url(images/commun/footer_bg.jpg) repeat ;
width: 320px ;
height: 40px ;
margin: 60px 0 0 0 ;
padding: 0 ;
float: left ;
text-align: center ;
}

#menu
{
width: 320px ; /*fixer une largeur à ul permet de centrer l'element float:left ce dessous* avec margin: 0 auto */
height: 40px ;
list-style: none;
padding: 0 ;
margin: 0 ;

}

#menu li
{
float: left ;
margin: 0 ;
padding: 0 ;

}

#menu a
{
display: block ;
width: 80px ;
height: 40px ;
margin: 0 ;
padding: 10px 0 0 0 ;
font-size: 130% ;
font-weight: bold ;
color: #ffffff ;
text-align: center ;
text-decoration: none ;
background: url(images/commun/bgnav.gif) no-repeat;
}

#menu  a:hover.home
{

color: #c5c5c5 ;
}

#menu li a#active.home
{
background: url(images/commun/bgnav_active.gif) no-repeat;
}

#menu  a:hover.mportfolio
{
color: #c5c5c5 ;

}

#menu li a#active.mportfolio
{
background: url(images/commun/bgnav_active.gif) no-repeat;
}

#menu  a:hover.blog
{
color: #c5c5c5 ;
}

#menu li a#active.blog
{
background: url(images/commun/bgnav_active.gif) no-repeat;
}

#menu  a:hover.contact
{
color: #c5c5c5 ;
}

#menu li a#active.contact
{
background: url(images/commun/bgnav_active.gif) no-repeat;
}

	/*-------------------------------------index.html------------------------------------------*/
#centre
{
text-align: left ;
width: 800px ;
min-height: 200px ;
margin: 20px auto;
margin-bottom: 0 ;
padding: 0 0 15px 0 ;
position: relative;
}

#centre_gauche
{
width: 530px ;
text-align: justify ;
float: left ;
margin: 0 auto ;
}

#centre_droite
{
width: 230px ;
text-align: justify;
float: right ;
margin: 0 auto ;
}

p.main
{
color: #fff ;
font-size: 120%;
border-left: 1px solid #6b6965;
padding: 0 20px 0 20px ;
text-align: justify ;
}

h2.main
{
height: 40px ;
margin: 15px 0 ;
color: #ffffff;
font-size: 150%;
padding-left: 15px ;
padding-top: 5px ;
text-align: left ;
background: url(images/accueil/title.jpg) no-repeat ;
}

h2.mainf
{
height: 40px ;
margin: 15px 0 ;
color: #ffffff;
font-size: 150%;
padding-left: 25px ;
padding-top: 5px ;
text-align: left ;
background: url(images/accueil/title.jpg) no-repeat ;
}

h2.mainfb
{
height: 40px ;
margin: 15px 0 ;
color: #ffffff;
font-size: 150%;
padding-left: 25px ;
padding-top: 5px ;
text-align: left ;
background: url(images/accueil/titleb.jpg) no-repeat ;


}

h2.mainp
{
height: 40px ;
margin: 15px 0 ;
color: #ffffff;
font-size: 150%;
padding-left: 25px ;
padding-top: 5px ;
text-align: left ;
background: url(images/accueil/titlep.jpg) no-repeat ;
}

h2.slogan1
{
padding-top: 65px ;
font-size: 190% ;
color: #8ab4ed ;
}

h2.slogan2
{
font-size: 190% ;
color: #ffffff ;
}

.container
{
width:800px;
margin: 0 auto;
position: relative;
overflow:hidden;
}

#centre_bas
{
text-align: center ;
width: 800px ;
margin: 5px auto;
padding-bottom: 5px ;
}
/*********************** 1er étage centre    du fichier  index************************/
#centre_haut
{
text-align: center ;
background: url(images/commun/footer_bg.jpg) repeat ;
margin: 0 auto;
padding: 0 ;
width: 100%;
height: 100px ;
color: #ffffff ;

}

.element_centre_haut
{
width:800px ;
height: 100px ;
text-align: left;
margin: 0 auto ;
padding: 0 ;
background: url(images/accueil/igloo_ours_haut.jpg) no-repeat ;
}

/***********************fin 1er étage centre du fichier index *******/

/**********début 2eme étage centre fichier index**********/

#centre_haut_niv2
{
text-align: center ;
background: #68655d;
margin: 0 auto;
padding: 0 ;
width: 100%;
height: 160px ;
color: #ffffff ;
}

.element_centre_haut_niv2
{
width: 800px ;
height: 160px ;
text-align: left;
margin: 0 auto ;
padding: 0;
background: url(images/accueil/igloo_ours_bas.jpg) no-repeat ;
}

/**************fin 2eme étage du fichier index**********/

#centre_haut_niv2_portfolio
{
text-align: center ;
background: #68655d;
margin: 0 auto;
padding: 0 ;
width: 100%;
height: 100px ;
color: #ffffff ;
}

.element_centre_haut__portfolio
{
width:800px ;
height: 100px ;
text-align: left;
margin: 0 auto ;
padding: 0 ;
background: url(images/portfolio/galets_haut.jpg) no-repeat ;
}





.element_centre_haut_niv2_portfolio
{
width:800px ;
height: 100px ;
text-align: left;
margin: 0 auto ;
padding: 0 ;
background: url(images/portfolio/galets_bas.jpg) no-repeat ;
}


#centre_bas_droite
{
width: 230px ;
text-align: justify;
float: right ;
margin: 5px auto ;
}

#centre_bas_gauche
{
width: 530px ;
text-align: justify ;
float: left ;
margin: 5px auto ;
}

				/*-----------------------------------------------contact.php--------------------------------------------------*/

#centre_haut_niv2_contact
{
text-align: center ;
background: #68655d;
margin: 0 auto;
padding: 0 ;
width: 100%;
height: 70px ;
color: #ffffff ;
}

.element_centre_haut__contact
{
width:800px ;
height: 100px ;
text-align: left;
margin: 0 auto ;
padding: 0 ;
background: url(images/contact/contact_haut.jpg) no-repeat ;
}





.element_centre_haut_niv2_contact
{
width:800px ;
height: 70px ;
text-align: left;
margin: 0 auto ;
padding: 0 ;
background: url(images/contact/contact_bas.jpg) top no-repeat ;
}


#global
{
min-height: 100% ;
position: relative ;
margin: 0 auto ;
}

#centrec
{
text-align: left ;
width: 800px ;
min-height: 700px ;
margin: 0 auto;
margin-bottom: 0 ;
padding: 0 0 15px 0 ;
position: relative;
}
				
#centre_contact
{
text-align: center ;
width: 750px ;
height: 400px ;
margin: 0 auto;
padding-bottom: 89px ; 
}

#gauche_contact
{
margin: 0 ;
float: left ;
width: 320px ;
text-align: left ;

}

#droite_contact
{
margin:  0;
float: right ;
width: 400px ;
height: 390px ;
text-align: left ;
padding-bottom: 89px ;

}

#formcontact
{
padding: 10px 0 0 0 ;
margin: 0 0 10px 0 ;
padding-left: 50px ;
color: #8ab4ed ;
text-align: left ;
font-size: 120% ;
background: url(images/contact/fond_formcontact.jpg) no-repeat top;
height: 400px ;

}

input {
border:1px solid #719fdc;
background-color:white;
color:black;
}

textarea
{
border:1px solid #719fdc;
width: 265px ;
background-color:white;
color:black;
text-align: left ;
overflow: hidden ;
}

p.contact
{
font-size: 130% ;
padding: 20px 5px;
text-align: justify ;
color: #ffffff ;
}

.mail
{
color: #8ab4ed ;
}

/*----------------------------------------------portfolio------------------------------------*/

h2.tportfolio
{
text-align: left ;
color: #719fdc ;

}
.portfolio
{
width : 660px ;
height: 320px ;
margin: 10px auto ;
padding: 10px ;
text-align: left ;
}

.portfolioimg
{
width: 200px ;
height: 200px ;
float: left
}

.portfolioserv
{
padding-left: 80px ;
width: 200px ;
height: 200px ;
float: left
}

.portfolioserv a
{
font-size: 120% ;
color: #719fdc ;
text-decoration: underline ;
}


.portfoliotech
{
width: 180px ;
height: 200px ;
float: right ;
}

.tech
{
color: #a4a4a4 ;
}


#footer
{
text-align: center ;
background: url(images/commun/footer_bg.jpg) repeat ;
margin: 0 auto;
width: 100%;
color: #ffffff ;

}

#footer_contact
{
text-align: center ;
background: url(images/commun/footer_bg.jpg) repeat ;
margin: 0 auto;
width: 100%;
color: #ffffff ;
position: absolute ;
bottom : 0 ;
left: 0 ;
}


#centre-footer
{
line-height: 1.4em ;
margin: 0 auto;
text-align: center ;
padding: 5px 0 ;
width: 800px ;
word-spacing: 5px ;
}

#menufooter
{
list-style-type: none ;
}

#menufooter li
{
display: inline ;
text-align: center ;
}
#menufooter a
{
color: #8ab4ed ;
font-size: 130% ;
text-align: center ;
padding-right: 25px ;
text-decoration: none ;
}

#menufooter a:hover
{
text-decoration: overline ;
color: #ffffff ;
}
.pied
{
padding: 10px 0 0 0 ;
text-align: left ;
display: block ;
}