@charset "utf-8";

html,body {
	height: 96%;
}

body {
	margin-top: 0px;
	margin-bottom: 2%; /* And stay of the bottom as well! */
	background-color: #FCEDF9;/*#F5F5F5; /* Fresh and white! */
	font-family: Georgia, Geneva, "Trebuchet MS", Monaco, Calibri, sans-serif; /* Monaco = iMac, Calibri = Windows Vista */
	font-size: 100%;
	color: #6d6d6d; 
}

a {
	color: #6d6d6d;
	text-decoration:none;
}

img 
{
	border: none; /* No lines under the text. */
	margin: 5px; /* Black beauty. */
}

table {
	border-collapse:collapse;
	margin-left: auto; /* centre les tables */
	margin-right: auto; /* centre les tables */
}

td, th {
	 border:1px solid #DDD;
	 text-align: left;
	 padding: 2px;
	 font-size: 12px;
}

th {
	text-align:center;
	background-color:#FFB0F9;
}

tr:hover {
	background-color:#FFD0FA;
}

textarea, input, select {
	border: 1px solid #AAA;
	font-size: 12px;
	font-family: Georgia, Geneva, "Trebuchet MS", Monaco, Calibri, sans-serif;
}

/* ************************* END GENERAL STYLING ************************* */


/* *************************  START DIV STYLING  ************************* */

#container { /* <DIV #1> */
	width: 100%; 
	margin-left: auto;
	margin-right: auto;
}
#header {
	margin-bottom:5px;
	width: auto;
	height: auto; /* No need to set height, just some padding around the headers is enough to get height. */
	background: url(../images/ban_repeat.jpg) top left repeat-x;
}
	#header h1 { /* The first line of text in the header, the big orange one. */
		font-size: 150%; /* Big font! 150% of the font-size of the body! */
		color: #DD8200; /* Orange color for textline one. */
		display: inline; /* This trick will display the both lines of text next to eachother instead of under eachother* */
		letter-spacing: 4px; /* A thick amount of spacing between the letters, to create a nice effect on the text. */
	}
	#header h2 {
		position: relative; /* All sizes, paddings and margins are measured relative to #header h1. */
		display: inline; /* The trick will only work if you add display: inline here as well, and add a <br /> between them in the HTML code. */
		vertical-align: center; /* Appear in the center of the #header. */
		font-size: 70%; /* 70% of the size of the font-size from the body. */
		font-weight: 100; /* a very sleek and lightweight font. 600 for big font. */
		text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
		color: #FFFFFF; /* Ocean blue color... */
		letter-spacing: 1px; /* spread those letters over your screen a bit more */
		font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
	}

#menu
{
	border: 1px solid #E4E4E4; /* Crazy about dotted and dashed borders! */
	-moz-border-radius: 0px 0px 25px 25px;
	border-radius: 0px 0px 25px 25px;
	
	width:250px;
	padding:0px;
	float: left;
	background-color: #F7A0F1;
	margin-bottom:7px;
}

.menuTitre
{
	padding:5px;
	text-align: center;
	font-variant:small-caps;
	font-weight:bold;
	font-size: 14px;
	color: #6d6d6d;
	background-color: #F7A0F1;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}

.menuItem
{
	background-image: url(../images/puce.gif);
	background-repeat: no-repeat;
	padding: 2px;
	padding-left:20px;
	font-size:13px;
	background-color: #FFDEFB;/*#F3FFC0;/*#00ACF4*/
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
.menuItem a {
	text-decoration:none;
	color: #6d6d6d;
}

#contenu {
	border: 1px solid #DDD;
	background-color: #FFDEFB;
	-moz-border-radius: 0px 0px 25px 25px;
	border-radius: 0px 0px 25px 25px;
	padding: 10px;
	padding-bottom: 20px;
	padding-top: 20px;
	margin-left: 260px;
}

.div_erreur {
	border: 1px solid #FF9999;
	padding:3px;
	background-color:#FFEEEE;
	text-align:center;
	color:#FF6666;
	font-weight:bold;
	font-size:15px;
}

.div_succes
{
	border: 1px solid #00ACF4;
	padding:3px;
	background-color:#CCF0FF;
	text-align:center;
	color:#00ACF4;
	font-weight:bold;
	font-size:15px;
}

input.classic, textarea.classic
{
	width: 250px;
}

input.tel
{
	width: 120px;
}

input.prix
{
	width: 50px;
}

img.indisponible {
	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
}

.action {
	/*border:1px solid #DDD;*/
}
	.action img {
		border:1px solid #DDD;
	}

#footer { /* The bottom, with the copyright notice. */
	
	border: 2px solid #FFFFFF;
	background-color: #F7A0F1;
	-moz-border-radius: 0px 0px 25px 25px;
	border-radius: 0px 0px 25px 25px;
	margin-bottom:5px;
	
	clear: both; /* Appear UNDER core_right, not next to it. Not even with changed width on #container. */
	/*width: 680px; /* 680px? Yep, the same width as #container. */
	/*height: 100px; /* Give it some height! */
	text-align: center; /* The text should appear on the rightside of the footer. */
	margin: 0px;
	margin-top: 7px;
	margin-bottom: 25px;
	padding-top: 25px;
}
	#footer p { /* The <p> within the footer is styled here. */
		text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
		/*background: #FFFFFF url(../images/diags.jpg)  0% 30% repeat-x; /* Those cool diagonal lines in the back. */
		font-size: 50%; /* An even smaller font then the list we just did. */
		color: #000000; /* Ocean blue color... */
		letter-spacing: 1px; /* spread those letters over your screen a bit more */
		font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
	}
	
	#footer a { /* The <a href="... tags in the footer are styled here. */
		text-decoration: none; /* No lines under the text. */
		color: #000000; /* Black beauty. */
	}
	
	#footer img { 
		border: none; /* No lines under the text. */
		margin: 5px; /* Black beauty. */
	}

#titre {
	text-align: center;
	font-variant: small-caps;
	margin-bottom: 40px;
}

div.mp3 {
	background-image: url(../images/sound.png);
	background-repeat: no-repeat;
	padding-left:20px;
	margin:5px;
	height:17px;
}

input.bouton {
	width: auto;
	background-color: #FFFFFF;
	border: 1px solid #F7A0F1;
	margin: 5px;
}

.input_plus {
	background-image: url(../images/plus.gif);
	background-repeat: no-repeat;
	padding-left:10px;
}

.input_http {
	background-image: url(../images/http.gif);
	background-repeat: no-repeat;
	padding-left:45px;
}

.formLabel
{
	width:120px;
	float:left; 
	text-align:right; 
	padding:3px;
}

.fromDiv
{
	padding:3px;
}
	.fromDiv input
	{
		width:120px;
	}

.btn {
	background: url(../images/btn.jpg) no-repeat;
	padding-top: 5px;
	height: 75px;
	width: 300px;
	text-align: center;
	cursor:hand;
}

.btn_dis {
	background: url(../images/btn_dis.jpg) no-repeat;
	padding-top: 5px;
	height: 75px;
	width: 300px;
	text-align: center;
	cursor:hand;
}

.btn_div {
	border: 1px solid #F7A0F1;
	background: #FEFEFE;
	width: 160px;
	margin: 10px;
	text-align: center;
	padding: 1px;
	padding-bottom: 3px;
}

.btn_div A {
	color: #000000;
	font-size: 14px;
}