/* ----------------- feuille de styles CSS ---------------------*/

/* Ce fichier définit les styles visuels des différents éléments des pages.
 * Dans l'ordre, avec le noms des blocs principaux :
 * - balises html generales
 * - textes
 * - global (bloc) 960 px de large centré
	 * - entete (bloc)
	 		* - menu (bloc)
	 * - contenu-global (bloc)
			* - colonne-gauche (bloc)
		 	* - contenu (bloc 740 pixel exploitable )
	* - menu-bas (bloc)
	* - pied (bloc)
	* - liens techniques (bloc)
* - msai (bloc)

*/

/* vert Code PANTONE 382 = #BED600 rgb(190, 214, 0), http://www.pantone-france.com/pages/pantone/colorfinder.aspx
/* bleu Code PANTONE 306 = #00BCE2
/* http://www.zeald.com/Resources/Effective+Website+Design+-+Tips++Tricks/Convert+Pantone+Colours+to+RGB.html


/* balises html generales
============================================================ */

* {
	margin: 0;
	padding: 0;
}

body {
	color: #000;
	background-color: #fff;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

a:link, a:visited {
	text-decoration: none;
	color: #00c;
}

a:hover, a:active {
	text-decoration: underline;
	color: #000;
}

p {
	margin: 0 0 10px 0;
	padding:  0 0 5px 0;
	text-align: justify;
}
 
img {
	border: none;
	margin: 0;
	padding: 0;
}

.centrer { /* classe passe partout pour centrer */
	text-align: center;
}

.conclusion {
	font-size: 14px;
	background-color: #eee;
	padding: 10px;
}

.envoi_form {
	font-size: 24px;
	color: #006699;
	font-weight: bold;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}


/* global
=======================================================*/

#global {
	width: 960px;
	margin: 0px auto;
	background-color: #fff;
}

/*  entete 
=======================================================*/

#entete {
}

#flashcontent {
	width: 960px;
	height: 159px;
}

/* menu haut 
=======================================================*/

#menu {
	height: 16px;
	padding: 2px 0;
	text-align : right;
	background-color : #369;
	white-space : nowrap;
}

#menu a {
	padding: 2px 10px;
	text-decoration: none;
	color: #fff;
	border-left: 2px solid #fff;
}

#menu a.select {
	color: #369;
	padding: 2px 10px 2px 10px;
	background-color : #fff;
}

#menu a:hover, #menu a:active {
	background-color : #00BCE2;
	color: #fff;

}

/* contenu-global
=======================================================*/

#contenu-global {
    padding: 10px 0 5px;
}

#contenu-global h1 {
	color : #369;
	margin: 0px 0px 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #369;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: italic;
	font-weight: bold;
}

#contenu-global h2 {
	color : #369;
	margin-bottom: 10px;
	font-size: 16px;
}

#contenu-global h4 {
	margin-bottom: 10px;
	font-size: 12px;
}

/* colonne-gauche
=======================================================*/

#colonne-gauche {
	float: left;
	width: 200px;
}

#colonne-gauche p.menu-bg-top {
	background-image: url(../images/navigation/menu-bg-haut.gif);
	margin: 0px;
	padding: 0px;
	background-repeat: no-repeat;
	height: 35px;
	width: 200px;
}

#colonne-gauche p.menu-bg-top-bleu {
	background-image: url(../images/navigation/menu-bg-haut-bleu.gif);
	margin: 0px;
	padding: 0px;
	background-repeat: no-repeat;
	height: 33px;
	width: 200px;
}

#colonne-gauche p.menu-bg-middle {
	background-image: url(../images/navigation/menu-bg-milieu.gif);
	margin: 0px;
	padding: 0px;
	text-indent: 10px;
}

#colonne-gauche p.menu-bg-bottom {
	background-image: url(../images/navigation/menu-bg-bas.gif);
	margin: 0px;
	padding: 0px;
}

#colonne-gauche p a {
	display: block;
	text-decoration: none;
	color: #369;
}

#colonne-gauche p a.select-g {
	display: block;
	text-decoration: none;
	color: #369;
	border-left: 2px solid #00BCE2;
	border-right: 2px solid #00BCE2;
	background: #fff;
}

#colonne-gauche p a:hover, #colonne-gauche ul li a:active {
	border-left: 2px solid #f00;
	border-right: 2px solid #f00;
	background: #eee;
	color: #f00;
}

/* contenu 
=======================================================*/

#contenu {
	margin: 0 0 0 200px;
	padding: 0px 10px 5px;
	color: #000;
}

#contenu h3 {
	padding: 0;
	color : #336699;
	font-size: 16px;
	font-weight: bold;
}

#contenu p {
	color : #000;
	margin-left: 10px;
}

#contenu ul {
	margin: 0 0 10px 0;
	padding: 0;
}

#contenu ul li {
	margin: 0 20px;
}

/* menu-bas
=======================================================*/

#menu-bas {
	background-color: #eee;
	text-align: center;
		clear: both;
}

/* pied
=======================================================*/

#pied {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	clear: both;
	overflow: hidden;
	color: #000;
	width: 960px;
	height: 45px;
	border-top : 1px solid #000;
	border-bottom : 1px solid #000;
}

#pied p {
	padding: 2px 15px 0 15px;
	margin : 0;
}

#pied a:link, #pied a:visited {
	text-decoration: none;
	color: #999;
}

#pied a:hover, #pied a:active {
	color: #000;
}

.right {
	float : right;
}
.left {
	float : left;
}

/* msai
=======================================================*/
#msai {
	text-align: right;
	margin-top: 10px;
	margin-right: 10px;
	font-size: 9px;
}

#msai a:link, #msai a:visited {
	text-decoration: none;
	color: #999;
}

#msai a:hover, #msai a:active {
	color: #000;
}

/* page accueil 
=======================================================*/

#wrap {
	height: 574px;
	width: 736px;
	position: relative;
	background-image: url(../images/accueil-bg.jpg);
}

#wrap #accueil-citadine {
	font-size: 14px;
	color: #fff;
	position: absolute;
	left: 218px;
	top: 469px;
}

#wrap #accueil-escapade {
	font-size: 14px;
	color: #fff;
	position: absolute;
	left: 483px;
	top: 469px;
}

#wrap #accueil-presentation {
	font-size: 14px;
	color: #fff;
	position: absolute;
	left: 206px;
	top: 500px;
	width: 510px;
}

#wrap #smiley-anime {
	position: absolute;
	left: 430px;
	top: 200px;
	width: 85px;
	height: 85px;
}

#wrap #prime-achat {
	position: absolute;
	left: 197px;
	top: 230px;
	width: 530px;
	height: 40px;
	background-color: #BDD600;
	text-align: center;
	font-size: 1.7em;
	font-weight: bold;
	color: #FFF;
}

#wrap a:link, #wrap a:visited, #wrap a:active {
	color: #fff;
	text-decoration: none;
}

#wrap a:hover  {
	color: #00BCE2;
	background-color: #FFF;
}

/* page garanties et informations
=======================================================*/

#contenuavecfond {
	background-image: url(../images/ville-fond.jpg);
	background-repeat: no-repeat;
	height: 555px;
}

#contenuavecfond #smiley {
	float: right;
	margin-right: 20px;
}

/* page le bon choix
=======================================================*/

.textedecale {
	text-decoration: blink;
	padding-left: 50px;
}

#flashcontent-produit {
	width: 740px;
	height: 30px;
	margin-bottom: 20px;
}

/* page notre gamme et velos
=======================================================*/

.velo {
	margin-right: 7px;
	margin-bottom: 5px;
	margin-left: 7px;
	float: right;
}

#velo-droit {
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 30px;
	float: right;
	width: 350px;
	text-align: center;
}

#caracteristiques {
}

#caracteristiques-droit {
	float: right;
	width: 120px;
}

.tab_gamme {
	width: 630px;
	background-color: #eee;
	border: 2px solid #00BCE2;
	padding: 0px;
	margin: 0px;
}

.tab_gamme_velo {
	width: 590px;
	background-color: #eee;
	border: 2px solid #00BCE2;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 10px;
	margin-left: 10px;
}

.tab_titre {
	font-weight: bold;
	background-color: #00BCE2;
	text-align: center;
	color: #fff;
	font-size: 16px;
}

/* page les-plus et commander
=======================================================*/

#franfinance-entete {
	width: 700px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding-top: 15px;
	padding-right: 20px;
	padding-bottom: 15px;
	padding-left: 0;
}

table#franfinance {
	border: medium solid #000;
	border-collapse: collapse;
	width: 736px;
}

table#franfinance thead {
	font-weight: bold;
	text-align: center;
}

table#franfinance td, th {
	border: thin solid #000;
	width:25%;
}

table#franfinance tbody th {
	text-align: left;
	text-indent: 15px;
	font-weight: normal;
}

table#franfinance td {
	text-align: left;
	text-indent: 15px;

}

#franfinance-pied {
	font-size: 9px;
	line-height: 90%;
	background-color: #eee;
	padding:10px;
	text-align: justify;
}

.solutions-prix {
	font-size: 14px;
}


/* page liens 
=======================================================*/

.tab_liens {
background-color: #eee;
border: thin dotted #00f;
}


/* pages de commandes/caddies
======================================================*/
.asterix { color:red; }

.erreur { 
 font: 12px verdana, arial, sans-serif;
 background-color:#F00;
 padding:3px;
 color:#FFF;
 margin-bottom:10px;
 font-weight:bold;
}

.info { 
 font: 12px verdana, arial, sans-serif;
 background-color:#CCFFCC;
 padding:3px;
 color:#336600;
 margin-bottom:10px;
}

table#classic {
 background-color:#EEE;
 margin-top:10px;
 width:700px;
}

table#classic th {
 background-color:#00BCE2; 
 color:#FFFFFF;
 padding:5px;
 font-family:arial,helvetica,sans-serif; 
 font-size: 11pt; 
 border:0px;
}

table#classic td {
 background-color:#EEE; 
 padding:2px;
 color:#000;
 border:0px;
}

fieldset {
 border-color:#369;
 padding:10px;
 color:#000;
}

legend {
 color : #369;
 font-weight:bold;
}