* {
	padding:0px;
	margin:0px;
}
body{
	background-color:#1c1a1c;
	color:silver;
	font-size:18px;
	font-family: verdana;
}
a{color:orange}	
input {
	background-color:#e6e6e6;
	color:#1c1a1c;
}
hr {
	width:90%;
}
table.a{
	font:18px arial;
	margin-left:20px;
}
input {background-color:#e6e6e6;}
table.a td {
	border-left:1px solid #aaaaaa;
	border-bottom:1px solid #aaaaaa;
	padding:4px;
}
div.arr{
	background: url(degrade.png) repeat-y;
	border:4px solid silver;
	border-radius:10px;
	padding:10px;
	margin:10px;
	color:#ffffff;
	float:left;
}
/* HEADER --------------------------------------------------- */
#header {
	clear:both;
	width:100%;
	background-color:black;
	background:url(1.jpg) repeat-x;
	height:30px;
}
#header a {
	float:right;
	margin-right:10px;
	color:#ffffff;
	text-decoration:none;
	padding:4px;
}
/* AJOUTER UN MOUVEMENT ---------------------------------------*/
/*div#divajout {
	/*background: url(degrade2.png) repeat-y;* /
	margin-right:10px;
	width:200px;
}*/
div.clic {
	margin-left:15px;
	color:#dddddd;
	/*font:18px arial;*/
	cursor:default;
}
div.clic:hover {
	background-color:#778264;
	color:#000;
}
/* TOTAL DE CE MOIS -------------------------------------------*/
div#divtotal {
	font-weight:300;
	width:300px;
}
#choisirmois {
	/*border:1px dotted gray;*/
	font:22px arial;
	margin:Auto;
	width:80%;
	text-align:center;
}
#choisirmois a{
	font:22px arial;
	color:orange;
	text-decoration:none;
}
#tableTotaux, #tableMouvements {
	font-size:16px;
}
/* MOUVEMENTS DE CE MOIS ---------------------------------------*/
/*#divmouvements {
	width:380px;
}*/

/* GRAPHIQUE -----------------------------------*/
canvas {
	margin:2px 0px;
	border:1px solid #333;
}
div.courbe {
	width:512px;
	padding:4px;
}
span#titre {
	float:left;
	font-weight:bold;
}
span#coords {float:right;}
span.val{color:gold;font-weight:bold}
table.data{
	float:left;
	border-bottom:1px solid silver;
}

/* RESPONSIVE --------------------------------- */

/* min-width pour grandes résolutions */
@media screen and (min-width: 640px) {
	/* message personnalisé
	body:before {
		content: "Version mobile > 640px";
		display: block;
		text-align: center;
		font-style: italic;
		color:orange;
	}*/
	#divajout, #divtotal {
		width:30%;
		clear:none;
		float:left;
	}
	#divmouvements {
		/*width:30%;*/
		clear:none;
		/*float:right;*/
	}
}
/* max-width pour faibles résolutions */
@media screen and (max-width: 640px) {
	/* message personnalisé*/
	body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color:orange;
	}

	#divajout, #divtotal, #divmouvements {
		background: url(degrade.png) repeat-y;
		clear:both;
		width:100%;
		margin-bottom:10px;
	}
}