@CHARSET "UTF-8";

.pastelButton {
	cursor: pointer;
	display: block;
	/* pour centrer : margin: auto; width: 200px;    (et voir .pastelButton *) */

	/* à partir d'ici : aspect du bouton en attendant le chargement de pastelButton ou si javascript est désactivé */
	background: #F5F5F5;
	padding: 5px 10px 6px 7px;
	border-width: 1px 2px 2px 1px;
	border-style: solid;
	border-color: #DDD #CCC #AAA #DDD;
	color: #3C3C3C;
}
.pastelButton * {
	position: relative;
	color: #3C3C3C;
	/* Fin de l'aspect sans JS */

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	display: block;
	/* float: left;  à mettre si on ne précise pas le width de .pastelButton, pour que la largeur du bouton s'adapte au texte */ 
}
.pastelButton .level1 {
	padding: 1px;
	background-image: url(shade.png);
	background-position: bottom;
}
.pastelButton .level2 {
	padding: 5px;
	border-width: 1px;
	border-style: ridge;
	border-color: #CCC;
	color: #fff;
	text-decoration: none;
	text-shadow: 2px 2px 4px #333;
	text-align: center;
}
.pastelButton.redpink .level1 {
	background-color: #FF80CD;
}
.pastelButton.pink .level1 {
	background-color: #E880FF;
}
.pastelButton.purple .level1 {
	background-color: #9A80FF;
}
.pastelButton.blue .level1 {
	background-color: #80A7FF;
}
.pastelButton.lightblue .level1 {
	background-color: #85DFFF;
}
.pastelButton.lightgreen .level1 {
	background-color: #ACFF80;
}
.pastelButton.green .level1 {
	background-color: #80FF9E;
}
.pastelButton.yellow .level1 {
	background-color: #FFF780;
}
.pastelButton.red .level1 {
	background-color: #FF8080;
}
.pastelButton:hover .level1 {
	background-color: #80A7FF;
}
.pastelButton.Selected .level1 {
	background-color: #80A7FF;
}
.pastelButton:active .level1 {
	background-color: #444;
}
.pastelButton:hover .level2 {
	border-style: inset;
	text-shadow: 3px 3px 3px #000;
}
.pastelButton:active .level2 {
	border-style: inset;
}