/*
  Saphyra Interactive Main CSS
*/

 font.welcomeToSaphyraWorld { font: 12px Trebuchet MS, sans-serif; }
 b.saphyraBoldTitle { border: 1px dotted silver; padding: 3px; color: darkred; }
 font.saphyraSecondTitle { font-size: 14px; }
 i.colorItalic { color: navy; font-weight: bold; }
 span.publicText { font: 11px Verdana, sans-serif; color: #666666; font-weight: normal; letter-spacing: 1px; }
 td.formulaireCell { text-align: right; padding-right: 15px; }
 td.formulaireCellButton { text-align; padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px;}
 font.formulaireText { font: 12px Arial, sans-serif; font-weight: bold; color: gray;}
 input.formulaireImageButton {border: 0px; }
 input { font: 10px Verdana, sans-serif; font-weight: bold; color: #52B0FC; border: 1px solid silver; }
 /*
	Lors de développement et integration, il arrive souvent de "styler" les champs des formulaires.

		Mettre un background à un input ou un textarea, cela donne un effet plus sympa qu'un champ blanc encadré en noir.

		Certains développeurs (moi le premier) créent une image ayant deux états : 

			L'état par défaut, affiché lorsqu'on arrive sur le formulaire,
			L'état 'erreur', qui est affiché lorsqu'un champ est vide par exemple.

		Le problème est que les nouveaux navigateurs autorisent le redimensionnement de ces champs par défaut.

		L'utilisateur peut alors voir le background "erreur" affiché en dessous du bloc par défaut.

		Pour palier à ce problème, une petite ligne de code est nécessaire :

		textarea{ resize:none;}

		Celle-ci empêche le redimensionnement des champs textarea dans vos formulaires.

		Source de cette solution : bbxdesign.com
 */
 textarea.formulaireTasks { resize: none; width: 176px; height: 123px; font: 10px Verdana, sans-serif; font-weight: bold; color: #52B0FC; border: 1px solid silver; }