/*----------------------------------------------*/
/* Titre : feuille de style du design du site CHAPPAZ - prodevap sarl
/* Auteur : Florian Hacquebart
/* Date de création : 25/07/2008.
/* Date de modification : 27/08/2008.
/*----------------------------------------------*/

/*----------------------------------------------*/
/* Définition du design global du site.
 * L'ensemble des bordures de la partie body sont supprimés.
 * Une police par défaut est définie pour l'ensemble du site.
 */
body {
	background-color: #eddfca;
	margin: 0;
	font-family: Tahoma, Georgia, "Times New Roman", sans-serif, monospace, serif;
	font-size: 0.8em;
	line-height: 18px;
	width: 100%;
}
/*----------------------------------------------*/
/*
  *
  */
div#page {
	width: 1000px;
	margin: auto;
}
/*----------------------------------------------*/
/* Définition du header du site.
 * Il possède une hauteur fixe correspondant à la taille de l'image
 * du header.
 */
div#header {
	margin: 0;
	padding-left: 120px;
	background: url("images/header-fond.png") no-repeat;
	height: 150px;
}
/*----------------------------------------------*/
/* Définition de la barre de menu d'accès rapide.
 * Ceci définit le bloc génarale du menu (hauteur, couleur de fond et bordures).
 */
div#barre_rapide {
	padding-left: 15px;
	padding-right: 15px;
	height: 45px;
	background: url("images/fond-corps.png") repeat-y;
	font-variant: small-caps;
	font-size: 1.5em;
	text-decoration: underline;
}
/*----------------------------------------------*/
/* Définition du style de la liste dans la barre d'accès rapide.
 * Pas de marges, pas de puces. Les éléments passent block.
 */
div#barre_rapide ul {
	margin: 0;
	list-style-type: none;
}
div#barre_rapide ul li {
	height: 45px;
	display: block;
	line-height: 45px;
	text-align: center;
	min-width: 270px;
	max-width: 270px;
	margin: 0;
}
/*----------------------------------------------*/
/* Définition du style pour les boutons de la barre
 * rapide qui seront sur la gauche et la droite.
 */
.barre_gauche {
	float: left;
	margin:0;
}
.barre_droite {
	float: right;
	margin:0;
}
/*----------------------------------------------*/
/* Définition du style des liens de la barre rapide.
 * Il y a un style spécial lors du survol du lien (changement de couleur).
 */
div#barre_rapide ul li a {
	color: #3276a2;
}
div#barre_rapide ul li a:hover {
	color: #3276a2;
	text-decoration: underline;
	font-weight: bold;
}
div#barre_rapide ul li:hover {
	background-color: #beccd5;
}
/*----------------------------------------------*/
/* Définition du style pour l'affichage du contenu de
 * la page (menu et données).
 */
div#corps {
	overflow: auto;
	background: url("images/fond-corps.png") repeat-y;
	padding-top: 15px;
	padding-bottom: 35px;
	margin: auto;
} 
/*----------------------------------------------*/
/* Définition du design du menu.
 * Le menu possède une taille définie et se dispose
 * à gauche du design.
 */
div#menu {
	margin-left: 20px;
	float: left;
	width: 180px;
}
/*----------------------------------------------*/
/* Définition du style pour un élément du menu.
 * C'est à dire le titre et les rubriques pour un sous menu.
 */
div#menu .element_menu {
	background-color: #edf7fb;;
	border-left: 5px solid #a6c1db;
	border-top: 1px solid #a6c1db;
	border-right: 1px solid #a6c1db;
	border-bottom: 1px solid #a6c1db;
	padding-top: 0;
}
/*----------------------------------------------*/
/* Définition du style des titres disponibles dans le menu.
 * Ces titres permettent de séparés les différentes parties du menu (tuto, communauté, mon compte,...).
 * Définition d'une couleur de fond particulière, d'une bordure en bas en pointillé.
 */
div#menu div.element_menu h3 {
	background-color: #a6c1db;
	color: black;
	text-indent: 10px;
	border-bottom: 2px dotted #a6c1db;
	margin-top: 0;
}
/*----------------------------------------------*/
/* Définition du style des listes principales du menu.
 * Une puce particulière est utilisé.
 */
div#menu div.element_menu ul {
	color: #c76733;
	font-weight: bold;
	padding: 0;
	padding-left: 20px;
	margin: 0;
	margin-left: 1px;
	margin-bottom: 10px;
	list-style-image: url("images/menu/puce_menu.png");
}
/*----------------------------------------------*/
/* Définition du style des liens dans le menu.  */
div#menu div.element_menu ul a {
	color: #1d7dd7;
	font-weight: normal;
	text-decoration: none;
}
/*----------------------------------------------*/
/* Définition du style des liens dans le menu
 * lors du survol de la souris.
 */
div#menu div.element_menu ul a:hover {
	color: #8b1c1c;
}
/*----------------------------------------------*/
/* Définition du style des liens dans le menu
 * lors du clic.
 */
div#menu div.element_menu ul a:active {
	background-color: #f1e7d7;
}
/*----------------------------------------------*/
/* Définition du style pour le contenu de la page.
 * Ce bloc possède une couleur de fond, des bordures
 * et occupe un maximum de place possible.
 */
div#contenu {
	margin-left: 230px;
	width: 700px;
	padding: 10px;
	background-color: #f3f9ff;
	border: 1px solid #6c5733;
}
/*----------------------------------------------*/
/* Définition du titre principal de la page en cours
 * de visualisation.
 */
div#contenu h1 {
	color: #bc4920;
	text-transform: uppercase;
	text-align:center;
	font-size: 2em;
}
/*----------------------------------------------*/
/* Définition du style des titres principaux, puis des
  * sous-titres des pages.
 */
div#corps div#contenu h2 {
	width: 90%;
	margin-top: 3%;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	height: 40px;
	line-height: 40px;
}
div#corps div#contenu h3 {
	margin-top: 2%;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	height: 20px;
	text-indent: 100px;
	text-decoration: underline;
}
div#corps div#contenu h2:before {
	content: url("images/puce-titre.png");
}
/*----------------------------------------------*/
/* Définition du style des paragraphes
  * contenus dans le corps des pages.
  */
div#corps div#contenu p {
	text-indent: 30px;
}
/*----------------------------------------------*/
/* Définition du style des sous-titres contenu à l'intérieure
 * d'une news. Le sous-titre est décalé, de couleur rouge, souligné.
 */
div#corps div#contenu div.news h3 {
	text-indent: 30px;
	text-decoration: underline;
	color: #bc4920;
}
/*----------------------------------------------*/
/* Définition de l'affichage des listes du contenu.
 */
div#contenu ul li {
	margin-bottom: 18px;
}
/*----------------------------------------------*/
/* Définition des liens de l'ensemble du bloc d'affichage des données (contenu). */
div#corps div#contenu a {
	color: #498b1c;
	text-decoration: underline;
}
div#corps div#contenu a:hover {
	color: #8b1c1c;
	text-decoration: none;
}
div#corps div#contenu a:active {
	background-color: #f1e7d7;
}
div#corps div#contenu a img {border:0}
/*----------------------------------------------*/
/* Définition du style du footer.
 * Il occupe la totalité de la largeur de la fenetre.
 */
div#footer {
	clear: both;
	width: 100%;
	margin: 0;
	bottom: 0;
	padding-top: 5px;
	padding-left: 10px;
	/*padding-right: 10px;*/
	background: url("images/footer.png") no-repeat;
	height: 150px;
}
/*----------------------------------------------*/
/* Indique que les paragraphes à l'intérieur du footer
 * ne possède pas de marges extérieures.
 */
div#footer p {margin:0;padding:5px;text-align:center}
/*----------------------------------------------*/
/* Configuration du bloc récaptitulatif des liens
  * du site. Le texte sera centré avec une taille légèrement plus petite.
  */
div#recap-liens {
	text-align: center;
	font-size: 0.9em;
}
/*----------------------------------------------*/
/* Definition du design des label des formulaires.
 *
 */
label {
	display: block;
	width: 120px;
	float:left;
}
/*----------------------------------------------*/
/* Definition du design des differentes categories
 * d'un formulaire.
 */
fieldset {
	background-color: #bdcdd7;
	border-color: #5a5a5a;
	border-style: dashed dashed dashed solid;
	border-width: 1px 1px 1px 3px;
	margin-bottom: 50px;
	padding: 5px;
}
/*----------------------------------------------*/
/* Definition des titres des categories d'un formulaire.
 *
 */
legend {
	background-color: #ffe3c3;
	border: 1px solid black;
}
/*----------------------------------------------*/
/* Definition du style des champs de saisie des
 * formulaires.
 */
.champ_saisie {
	
	border-color: #a9957d;
	border-style: solid;
	border-width: 1px 1px 1px 3px;
}
.champ_saisie:focus {
	background-color: #efefce;
}
/*----------------------------------------------*/
/* Definition du style des boutons (d'envoi ou d'annulation)
 * des formulaires.
 */
.bouton {
	background-color: #d7e7f6;
	border-color: #a9957d;
	border-style: solid;
	border-width: 1px 1px 1px 3px;
}
.bouton:hover {
	background-color: #d6f9d9;
}
/*----------------------------------------------*/
/*Configuration du style des liens du bloc récapitulatif.
  * Un style est appliqué pour l'affichage des liens, un autre lors du survol et un dernier lors
  * du clic sur le lien.
  */
a {
	color: #1d7dd7;
}
a:hover {
	color: #8b1c1c;
	text-decoration: none;
}
a:active {
	text-decoration: underline;
	font-weight: bold;
	background-color: white;
}