/* --- POSITIONNEMENT --- */

/* Page */
html, body {
	height: 100%; /* Voir -> Note 1 ci-dessous */
}
body {
	padding: 0;
	color: #F0E39E;
}

/* Général */
a {
	color: #003896;
}
a:hover, a:focus {
	color: #FF9C03;
}
#global {
	min-height: 100%; /* -> 1 */
	width: 1024px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto;
	background-repeat: repeat-y;
	background-image: url(../images/fond-global-blanc.gif);
}
/* En-tête */
#entete {
	height: 170px;
	background-image: url(../images/sm-header2.gif);
	background-repeat: no-repeat;
}
#entete-pro/* En-tête */
 {
	height: 150px;
	background-image: url(../headder/head-outillage.jpg);
	background-repeat: no-repeat;
	margin-right: 6px;
	margin-left: 6px;
}
#accespro {
	width: 179px;
	float: right;
	margin-right: 29px;
	text-align: center;
	color: #FFFFFF;
}
#accespro a {
	color: #FFFFFF;
}
#accespro a:hover, #accespro a:focus {
	color: #33CCFF;
}
.texte14 {
	font-size: 14px;
	color: #005398;
}
.texte28 {
	font-size: 28px;
	color: #003896;
}
/* Menu de navigation */
#navigation {
	height: 15px;
	position: relative;
	width: 490px;
	top: 119px;
	left: 467px;
}
#navigation a {
	color: #FFFFFF;
	font-size: 14px;
	text-decoration: none;
}
#navigation a:hover, #navigation a:focus {
	color: #33CCCC;
}
#navigation-pro/* Menu de navigation */
 {
	padding: 4px 15px;
	background-image: url(../navigation/fond-orange.gif);
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	margin-right: 6px;
	margin-left: 6px;
	height: 24px;
	text-align: right;
}
#navigation-pro  a {
	color: #FFFFFF;
	font-size: 14px;
	text-decoration: none;
}
#navigation-pro  a:hover, #navigation-pro  a:focus {
	color: #33CCCC;
}

/* Contenu */
#contenu {
	color: #005398;
	background-color: #FFFFFF;
	margin-left: 0px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	height: auto;
	margin-top: 0px;
	background-image: url(../images/picto-logo.gif);
	background-repeat: no-repeat;
}

/* Contenu principal */
#contenu a {
	color: #003896;
}
#contenu a:hover, #contenu a:focus {
	color: #FFFFFF;
}
#contenu p {
	line-height: 1.5;
}
#contenu-texte-vignettes {
	width: auto;
	background-repeat: no-repeat;
	height: auto;
	padding-top: 60px;
}
#galeriecyan {
	width: 920px;
	background-image: url(../images/fondcyangalerie.jpg);
	background-repeat: no-repeat;
	padding-left: 30px;
	padding-top: 10px;
	margin-bottom: 0px;
	margin-top: 20px;
	height: 500px;
}
#nav-galerie {
	width: 650px;
	float: left;
	margin-top: 13px;
}
#logo-galerie {
	float: right;
	margin-right: 15px;
}
#nav-cartouche {
	background-image: url(../navigation/fond-cartouche.jpg);
	background-repeat: no-repeat;
	height: 455px;
}
#lien-cartouch01 {
	width: 120px;
	padding-top: 93px;
	position: relative;
}
#lien-cartouch02 {
	width: 133px;
	margin-top: 92px;
}
#lien-cartouch03 {
	width: 181px;
	padding-top: 10px;
}


/* Pied de page */
#pied {
	font-size: 12px;
	color: #005398;
	margin-top: 130px;
}




#pied p {
	margin: .5em 0;
	text-align: center;
}
#pied a {
	color: #FF9900;
}
#pied a:hover, #pied a:focus {
	color: #003896;
}
#copyright {
	text-align: left;
	font-size: 1em;
	color: #FFFFFF;
}


/* --- NOTES ---

1.	Pour pouvoir utiliser une hauteur (height) ou une hauteur minimale
	(min-height) sur un bloc, il faut que sont parent direct ait lui-même une
	hauteur déterminée (donc toute valeur de height sauf "auto": hauteur en
	pixels, em, autres unités...).
	Si la hauteur du parent est en pourcentage, elle se réfère alors à la
	hauteur du «grand-père», et ainsi de suite.
	Ainsi, pour pouvoir utiliser un "min-height: 100%" sur div#contenu, il nous
	faut:
	- un parent (body) en "height: 100%";
	- le parent de body également en "height: 100%".

2.	Il faut éviter que les marges des enfants de div#global ne se transmettent
	à leur parent. Notamment, le margin-top du premier enfant (ici, div#entete),
	et le margin-bottom du dernier enfant (ici, div#pied).
	On évite ce problème grâce à la propriété CSS overflow, qui bloque la
	fusion des marges. En savoir plus sur la fusion des marges:
	http://web.covertprestige.info/test
		04-blocs-imbriques-et-fusion-des-marges.html

3.	Les marges automatiques à gauche et à droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global à gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global à droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global à droite avec un retrait (à droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

*/
form {
	margin-top: 0px;
	margin-bottom: 2px;
}
#retouraccueil {
	position: absolute;
	width: 77px;
	height: 15px;
	background-image: url(../images/flechebleue.gif);
	background-repeat: no-repeat;
	margin-right: 0px;
	float: left;
}
#retouraccueil a {
	color: #0033CC;
}
#menu-bas {
	background-image: url(../navigation/fondlienbas.jpg);
	background-repeat: no-repeat;
	height: 100px;
	width: 980px;
	margin-left: 6px;
	margin-top: 30px;
}
#bande-animation {
	height: 100px;
	width: auto;
	margin-left: 130px;
	margin-top: 40px;
}
#menu-bas-lien {
	margin-bottom: 5px;
	margin-left: 10px;


}
.bouton-contact {
	width: 32px;
	height: 35px;
	position: relative;
	left: 875px;
	top: 5px;
}.retour-accueil {
	width: 32px;
	height: 21px;
	margin-left: 140px;
	margin-top: 80px;
}
#TDfilet {
	background-image: url(../images/filet-bleu.gif);
	background-repeat: repeat-y;
	background-position: right;
}
.vignette {
	display: inline;
	padding-right: 11px;
	padding-bottom: 11px;
}