/*BUT CREER UN DESIGN MINIMALISTE --->  TEINTE  VERTE */

/* LES BALISES GENERALES */

body{
	margin: 0;
	padding: 0;
	font-size: 83%;
	font-family: verdana, 'times new roman', arial, 'sans serif';}
	
/*FORMULAIRES*/
form{
	width: 84%;
	margin: 26px auto;}

form label{
	width: 36%; 
	display: block;
	float: left;}

form p{ margin: 2px 0.5%; padding: 2px 1px; }

fieldset{	
	padding: 4px;
	background: #fad0fa;
	border:none;
	margin-top: 12px;}

legend{ font-weight: bold;}

input, textarea, select{ border: 1px solid gray;}
input:hover, textarea:hover{ border: 1px solid #3996c9;}
input:focus, textarea:focus, select:focus{border: 1px solid #3996c9;}
input[type=submit]:hover{ border-color: #fad0fa;}

.label_exception{ /*pour tous les champs de formulaire avec un affichage non standard */
	float:none;
	display:inline;}

#type{ margin-left: 8px;} /*input radio du choix de type de revision*/

#soumission_cle{ margin: auto; display: block;}

/*--Pour que les boutons radio ne soit pas entourés sous ie--*/
input#choix{ border: none;}


/* TOUS LES DETAILS SPECIFIQUES SELON LA RUBRIQUE POUR LES FORMULAIRES*/
#f_contacts textarea{ width: 98%; margin-top: 2px;}

#f_creation_compte textarea{ width: 85%; }

#f_poster, #f_easy_text{ width: 90%; } /*formulaire plus long */

#f_langues{margin: 20px 0 15px 0; width: 92%;}

#f_langues fieldset{  background-color: #ededed;}

#f_langues #langues{ margin-bottom:1px; }


form.f_listes{ background: black; -moz-border-radius: 2px; color: white; width:40%; text-align:center;}

/*--------------TABLEAUX---------------------*/
table{
	width: 100%;
	margin: 22px auto;
	border-collapse: collapse; }
	
th{ padding: 5px;}
td{ border: 1px solid #fad0fa; padding: 7px 0 7px 3px;}
thead, tfoot{ background: #fad0fa;  }


.td_img img{width: 180px;}


a img{ border: none;}
	
kbd{ border: 1px solid #d2d2d2; padding: 1px 2px;}

cite{font-weight: bold; margin-left: 4%;margin-bottom: 1px;}

blockquote{ margin-left: 9%; margin-top: 1px;}

ul{ list-style: none; }

a{ color: #0013a8;}

h2{
	border: 1px solid #f4bdf4; 
	border-width: 0 0 1px 2px;
	padding: 0 0 2px 4px;
	margin: 25px 0 10px 12px;
	font-size: 1.3em;}
	
h3{ font-size:1.1em;}

h4{ margin-left:3px;}


/*------------------DANS LORDRE DU CODE----------------------------*/	

ul#liens_evitement{ 
	margin: 0; 
	margin-bottom: 0;
	text-align:center;
	background-color: #c171c0;}
	
ul#liens_evitement li{
	display:inline; 
	margin: 1px 4px;}
	
ul#liens_evitement a{ color: #fff; }
	
h1{
	text-align:center;
	margin-bottom: 0;
	margin-top: 0;
	background-color: #c171c0;
	padding: 18px;}

	
div#cles_aleatoire{
	position:absolute;
	top: 10px;
	right:10px;
	z-index:20;}
	
#page{
	padding: 20px;
	margin-left: 17%;
	background: #ffebff url(../images/designs/violet/bord-top-page.png) no-repeat top left;}

	
#menu{ /*FIXER UN ABSOLU POUR POUVOIR UTILISER TRANQUILLEMNT LES FLOATS DANS LA PAGE*/
	position: absolute;
	left: 0;
	top: 81px;
	width: 17%;}

.sous_menu1{
	margin: 0 0 15px 0;
	padding: 0;
	list-style-type: none;
	background-color: #c171c0; /*c171c0*/
	padding: 7px;
	color: white;}

.sous_menu1 li{
	margin: 0;
	padding: 0;}

.sous_menu1 a{
 display: block;
 text-decoration: none;
 margin: 0;
 padding-left: 7px;
 line-height: 1em; 
 height:100%;
 font-weight: bold;
 color: #fff; 
 line-height:1em;}

.sous_menu1 a:hover{
 background-color: black;
}


#menu h2{ /*titre sous-menu*/
	border: solid #262019 2px; 
	font-size: 1.2em;
	border-width: 0 0 2px 0;
	margin: 12px 0 3px 1%;
	padding: 0; 
	color: black;
	text-align: center;}
	

.sous_menu2, .sous_menu2 li, #revision_cles, #boite_a_outils{
	margin: 0;
	padding: 1px 0 0 2px;	
	line-height: 1.2em;}


.sous_menu2 a, #revision_cles a, #boite_a_outils a{
	color: #313d9b;
	text-decoration: none;
	padding-left: 5px; /*pour placer la puce au survol*/
	color: black;
}

.sous_menu2 a:hover, #revision_cles a:hover, #boite_a_outils a:hover{ text-decoration: underline;}	

#page{ min-height: 380px;}

#page ul li ul, ol li ol, ol li ol{ list-style-image: none; }
#page li{padding: 1px; }


#pied{
	margin-right: 0.5%;
	padding: 8px 2% 30px 2%;
	background-color: #c171c0;
	min-height: 100px;}
	
/*POUR LES NOTES DE BAS DE PAGE*/ 
#notes{ 
	width: 80%;
	color:#c171c0;
	margin: 60px auto;
	padding: 2px;}

/*----------STYLE SPECIFIQUE A UNE RUBRIQUE OU UNE PAGE--------------------------*/
/*CONNEXION-*/
#connexion{
	width: 240px;
	height: 190px; 
	margin: 100px auto;
	padding: 5px;
	padding-top: 40px;
	text-align: center;}	
	
	
/*ECRAN DE REVISION POUR LES 3 TYPES DE RÉVISION ----------> Même si cela me chier faire une imbrication de div pour faire un cadre extensible...*/ 
#ecran_de_revision{
	position: relative; /*pour placer le compteur de caractère en absolu*/
	width: 250px; 
	border: 0;
	background: #fad0fa;
	margin: 35px auto 0 auto;
	padding-top: 5px;
	height: 250px;
	-moz-border-radius: 10px;}
	
#caractere{  /* affichage du caractère en mode 1 (caractère vers pinyin), et 3(caractere vers français) */
	font-size: 46px; 
	text-align:center;
	margin: 6px 0;}

#ecran_de_revision #fr{ /*affichage du francais en mode  2(français vers caractère)*/ 
	text-align:center;
	margin: 12px auto 1px auto;
	height: 78px;
	width: 78%;}
		
#ecran_de_revision  #formulaire_revision{ width: 85%; margin: 10px auto;} /*input text de l'écran de révision*/
	
#compteur_liste{ /* compteur de caractère se trouvant dans l'écran de révision forme: 1/20*/
	position: absolute;
	text-align: right;
	right: 12px;
	top: -10px !IMPORTANT;
	top: 2px;
	width: 20%;
	color: #c171c0;
	font-weight: bold;}	

	
#ecran_resultat_revision{
	width: 80%;
	margin: 20px auto;
	padding-top: 10px;
	border: 1px solid #c171c0;
	background: #fad0fa;}	
	
#termine{ /*les resultats de la revision une fois la liste révisée complètement (pourcentage de réussite et recommencez etc...)*/
	text-align:center;
	padding-top: 10px;
	height: 180px;
	color: red;}

.infos_ecran_de_revision, .faux, .infos_formulaire{ 
	width: 92%;
	margin: 15px auto;
	border: solid 1px violet;
	padding: 2px;
	height: 110px;
	min-height: 110px;}
	
#creation_compte_infos{
	margin: 15px auto;}

.infos_formulaire, #creation_compte_infos{ /*on s'en sert aussi dans tout le site pour les autres trucs que les formulairses, d'ailleurs il faut que je change le nom*/
		border: solid 2px #c5e7fb;
		width: 74%;} 

.faux{ border-color: red;} /*si mauvaise réponse*/		
		
#type2_reponse{ /*l'affichage de la réponse pour le mode 2 est spécifique à ce mode: car on affiche au survol le caractère et l'utilisateur dit si il a bien écrit le caractère*/ 
	color: #e34e30;
	display:none; /* on cache le caractère et on l'affiche avec javascript pas d'autres choix à - de foutre un lien mais je m'y refuse c'est trop con*/
	width:100%;
	text-align:center;
	margin: auto;
	font-size: 52px;
	background: #c5e7fb;
	height:66px;
	padding-top: 12px;}

	
/*AFFICHAGE DES LISTES*/
ol#listes_detaillees{ /*l'affichage détaillé comme son nom l'indique*/
	width: 88%;}

#listes_detaillees li{ 
	border: 1px solid #ffebff; 
	padding-left: 5px; 
	margin-bottom: 2px;}
	
#listes_detaillees li:hover, #listes_detaillees li:focus{ border: solid 1px #97a6b9;}

/*l'affichage du caractère pour la liste détaillée et aussi pour le dico*/
.caractere, .caractere_liste_cachee{ font-size: 2em; 	font-weight: bold;}
.caractere_classique{  font-size: 1.8em;}
.prononciation{ color: #762c2c; font-family: Arial; font-weight: bold}	/*l'affichage de la prononciation pour la liste détaillée et aussi pour le dico*/


/*---------------PINYIN CACHES-------------------*/
ul#liste_pinyin_cache{
	width: 88%;
	margin: 15px auto;
	list-style: none;}

#liste_pinyin_cache li{ display: inline;}
.caractere_liste_cachee{ font-size: 1.9em; cursor: pointer;}
.prononciation_liste_cachee{ color: #efefef; font-family:Arial;}
#liste_pinyin_cache  .prononciation_liste_cachee:hover { color: green }

.parenthese{ color: #f4f9fd;}

/*LISTE COLOREE*/
ul#liste_coloree{
	width: 88%;
	margin: auto;
	list-style-type: none; 
	list-style-image: none;}
	
#liste_coloree li{
	float: left;
	width: 43px;
	text-align: center;}
	
#liste_coloree .caractere_colore_ton1, #liste_coloree .caractere_colore_ton2, #liste_coloree .caractere_colore_ton3, #liste_coloree .caractere_colore_ton4 , #liste_coloree .caractere_colore_ton5{
	font-size: 2.1em;
	display: block;
	font-family: "Simsun";
	margin: 1px 0 -10px 0;}

#liste_coloree .caractere_colore_ton1{color: red;}
#liste_coloree .caractere_colore_ton2{color: green;}
#liste_coloree .caractere_colore_ton3{color: blue;}
#liste_coloree .caractere_colore_ton4{color: black;}
#liste_coloree .caractere_colore_ton5{color: gray;}
#liste_coloree .liste_coloree_pinyin{ font-size: 0.7em; font-family : Arial; }


/* ----------- QUICK  PINYIN  --------------*/
#notes_revision{ 
	position: absolute;
	padding:5px;
	top: 240px;
	right: 50px;
	border: 2px solid  #2e4a95;
	text-align: center;}
	
	
	
/* ----------- LES FICHES --------------*/

ul#onglets{ 
	font-size: 1em;
	padding-left: 2px;
	padding-bottom : 26px !IMPORTANT; 
	padding-bottom : 33px; 
	border-bottom : 1px solid #9EA0A1;
	margin-left : 0;}
		
#onglets li{
	float : left;
	height : 21px; 
	background-color: violet;
	margin : 2px 1px 0 2px !important;  
	margin : 4px 1px 0 2px; 
	border : 1px solid #9EA0A1;
}

#onglets li#onglet_actif
{
	border-bottom: 1px solid #ffebff;
	background-color: #ffebff;
}

#onglets a
{
	display : block;
	text-decoration : none;
	padding : 4px;}

#onglets a:hover{ text-decoration: underline;}	
	
table#t_fiches td{
	padding: 2px 0 3px 3px;}
	
table#t_fiches thead, table#t_fiches tfoot{ font-size: 1.3em; }



/* GUESS STROKES */

table.t_guess_st{
	width: 92px; 
	margin: 14px 23px;
	float: left;}
	
.t_guess_st td{
	font-size: 1.2em;
	width: 50%;
	text-align: center; }
	
td.ts1{ 
	font-size: 3em;
	padding: 1px;}
	
.ts2, .ts3, .ts4{ cursor: pointer; }
	
	
/*-------------QUICK HAN--------------*/
.quickhan_cara{ 
		background: blue;
		color: blue;}
		
.fg{ color: white; }
	
#notes_revision span{ 	font-size:50px;}

/*DICTIONNAIRE-*/
div.tableau_cles{
	width: 98%;
	border: 1px #d9d9d9 solid;
	margin: auto;}

.tableau_cles p{ float: left; margin: 2.5px;}

.tableau_cles hr{ visibility:hidden; clear:both;}
	
.tableau_cles a{ 
	position: relative;
	text-decoration:none;
	color: black; 
	border: 1px solid #f4f9fd;}
		
.tableau_cles .bulle { display: none;} /*l'info bulle que l'on cache*/

.tableau_cles a:hover, .tableau_cles a:focus{
	color: #348abc;
	border-color: gray; 
	background: none;  
	z-index: 500;}

.tableau_cles a:hover .bulle, .tableau_cles a:focus .bulle{ /* au survol du lien on l'affiche*/
	display: inline; 
	position: absolute;
	text-align:center;
	padding-top:16px;
	top: 15px; 
	left: 10px;
	font-size: 1.2em; 
	background: url(../images/designs/violet/bulle.png) no-repeat top left;
	width: 175px;
	height: 100px;
	font-weight: bold;}
	
/*on modifie la position de la trad par rapport au pinyin de la clé pour ne pas qu'il soit l'un sur l'autre*/	
.tableau_cles a:hover .traduction, .tableau_cles a:focus .traduction{ color: black;}

#f_dico{margin-top: 0;}


h4.titre_tab_cles{ margin-bottom: 1px; }

.couleur_nb_traits{ color: red;}
a.cles_frequentes{ color: #1b1beb;}

/* PLACEMENT DES LI AU SURVOL POUR LES ASSOCIATIONS*/
li.association:hover{
	position: relative;
	background: white;
	border: 1px solid black;
	font-size: 20px;}

	
ul.liste_cles{	
	float: left;
	width:25%;}	

/*LES STATISTIQUES*/
#barre_connaissance_global{ /*tout en haut de la page de stats après le titre connaissance global*/
	width: 40%;
	margin: 15px auto;
	border: 1px solid #23bc40;
	border-right-width: 2px;
	position:relative;}

#barre_connaissance_global div{ /*système du pourcentage: ici le width dépend des résultats et se modifie avec un style dans la balise*/
	position: 	absolute;
	top: 0;
	width: 100%; /*---par defaut se modifier directement dans le fichier de stats---*/
	padding-left: 1px;
	background-color: #b7ff8f; /*la couleur de fond du "taux"*/}  

#barre_connaissance_global span{ position:relative }

/*REDEFINITION SPECIAL POUR LE TABLEAU DE STATS*/
table#stats{ 
	width: 16%; 
	float: left; 
	margin: 12px 1%;}

#stats th	{ font-size: xx-small;}

#stats td{ text-align: center; }


#fil_ariane{ font-size: 0.9em; } /*POUR LES PAGES OU IL Y A DES UN FIL D'ARIANE*/

/*----------------------------------COURS--------------------------------------------*/
ul#infos_lecon{
	border: 3px #aac2db dotted;
	width: 180px;
	list-style: none;
	padding: 2px;
	float: right;
	margin: 0 2% 18px 2%;}

div#grammaire hr{ width: 50%; margin: auto; }

#pub_gram{
	width: 33%;
	height: 270px;
	float: right;
	border: 2px solid #e3dfe7;
	background: url(../../../TEST/imgad.gif) no-repeat;
	overflow: auto;
}

/*----------------------------------FORUM--------------------------------------------*/
/*----PAGE DE PROFIL------*/
div#profil{
	width: 86%;
	margin: 30px auto;
	padding: 15px 1%;
	border: 1px solid #69cd70;
	border-bottom-width: 2px;}
	
#profil .avatar{
	width: 85px; 
	height: 85px;
	text-align: center;
	border:1px solid #69cd70;
	border-right-width: 2px;
	border-bottom-width: 2px}
	
#profil p{
	margin-bottom: 10px;}
	
ul.actions_forum{  /*les pages et ajout nouvelle reponse*/
		margin: 4px 0;
		text-align: right;
		list-style: none;}
		
.actions_forum li{ 
	display: inline;
	margin-left: 20px;}
	
.actions_forum form{ display: inline; }
	
/*ON REDEFINIT LES PARTICULARITES DU TABLEAU DES FORUMS*/
table#forum_forum{ margin: 0 auto; } 
	
#auteur{ width: 86px;}
#dernier_message{ width: 20%; } 
.reponse, .vus{ width: 7%; }

table .message{ 	
	padding-bottom: 6px; 
	vertical-align:top;}


.date_post a{ float: right; margin-right: 2px;}
	
/*-------------------------------DIVERS CLASS UTILES----------------------------------*/
.centre{text-align: center; margin: 0 auto;}
.centre_texte{ text-align: center; }
.auto{ margin: auto;}
.clear{ clear: both; }
.spacer{clear:both; visibility: hidden;}
.remonter{ text-align: right; margin-right: 25px; margin-top: 20px;}
.marge_haute{ margin-top: 28px; }
.souligne{ text-decoration: underline; }
.text_cache{ text-indent: -5000px;}
.float_left{ float: left; margin-left: 3.5%;}
.float_right{ float: right; margin-right: 3.5%;}		 


/*---------HANCOD------ */
h4.t1, h5.t2{ margin-bottom: 0; margin-top: 2px; font-size: 1.08em;}
h5.t2{ font-size: 0.95em; }

.info, .attention{ 
  background: url(../images/designs/pingouin-bleu/info.png) no-repeat;
	margin: 5px 3% 8px 1.5%; 
	padding-left: 33px;
	color: #319c21;
	min-height: 32px;}
	
.attention{ 
	background: url(../images/designs/pingouin-bleu/attention.png) no-repeat;
	color: #f40a25;}
	
.exemple{ margin: 5px 0 12px 8%;}

.exemple p{
	background: #d6d8db;
	color: #f4f9fd;
	border: 1px solid gray;
	border-left-width: 2px; 
	padding: 3px 2%;
	margin-left: 0;
	margin-top: 0;
	font-size: 1.20em;
	width: 85%; 
	color: black;}

.secret{ 
	border: 1px dotted gray;
	padding: 5px;
	width: 90%;
	color: #f4f9fd;}

.secret *{ visibility: hidden;}	
.secret:hover { color: black;}
.secret:hover *{ visibility: visible;}		
	
/*QUELQUES COULEURS*/
.red{ color: red}
.blue, a.blue{ color: blue}
.green{ color: green}

/*DIVERS*/
#cles_aleatoire{ display: none; }