/* Module complet */
#kalendar
{	
	width: 224px;
	height: 250px;
	
	margin: 0;
	padding: 0;
}

/* Elément composé du mois actuel et de l'année */
#kal_entete
{
	background-image: url("../images/entete.png");
	width: 224px;
	height: 49px;
	
	position: absolute;
	margin: 0;
}

/* Elément composé des jours de la semaine et du calendrier */
#kal_corps
{
	background-image: url("../images/corps.png");
	width: 224px;
	height: 153px;
	
	position: absolute;
	margin: 49px 0 0 0;
}

/* Elément composé des jours du mois sélectionné */
#kal_calendrier
{
	float: left;
	width: 185px;
	
	margin: 12px 0 0 22px;
}

/* Elément complémentaire du design */
#kal_cg_navigation
{
	background-image: url("../images/cg_navigation.png");
	width: 22px;
	height: 24px;
	
	position: absolute;
	margin: 202px 0 0 0;
}


/* Elément complémentaire du design */
#kal_cd_navigation
{
	background-image: url("../images/cd_navigation.png");
	width: 22px;
	height: 24px;
	
	position: absolute;
	margin: 202px 0 0 202px;
}

/* Bouton de gauche (Précédent) */
#kal_btg
{
	background-image: url("../images/btg_off.png");
	width: 51px;
	height: 24px;
	
	position: absolute;
	margin: 202px 0 0 22px;
}

/* Bouton de gauche activé (Précédent) */
#kal_btg:hover
{
	background-image: url("../images/btg_on.png");
	width: 51px;
	height: 24px;
}

/* Bouton de gauche désactivé (Précédent) */
#kal_btg_no
{
	background-image: url("../images/btg_no.png");
	width: 51px;
	height: 24px;
	
	position: absolute;
	margin: 202px 0 0 22px;
}

/* Bouton du centre (Accueil) */
#kal_btc
{
	background-image: url("../images/btc_off.png");
	width: 77px;
	height: 24px;
	
	position: absolute;
	margin: 202px 0 0 73px;
}

/* Bouton du centre activé (Accueil) */
#kal_btc:hover
{
	background-image: url("../images/btc_on.png");
	width: 77px;
	height: 24px;
}

/* Bouton de droite (Suivant) */
#kal_btd
{
	background-image: url("../images/btd_off.png");
	width: 52px;
	height: 24px;
	
	position: absolute;
	margin: 202px 0 0 150px;
}

/* Bouton de droite activé(Suivant) */
#kal_btd:hover
{
	background-image: url("../images/btd_on.png");
	width: 52px;
	height: 24px;
}

/* Bouton de droite désactivé (Suivant) */
#kal_btd_no
{
	background-image: url("../images/btd_no.png");
	width: 52px;
	height: 24px;
	
	position: absolute;
	margin: 202px 0 0 150px;
}

/* Elément composé de la fin du design et du copyright */
#kal_pied
{
	background-image: url("../images/pied.png");
	width: 224px;
	height: 24px;
	
	position: absolute;
	margin: 226px 0 0 0;
}

/* Paragraphe */
p
{ margin: 0; }

/* Paragraphe présent dans le pied (Copyright) */
#kal_pied p
{
	font-size: 10px;
	
	text-align: center;
	margin: 12px 0 0 0;
}

/* Paragraphe présent dans le corps (Calendrier)  */
#kal_corps p
{
	font-size: 12px;
	
	text-align: center;
	margin: 10px 0 0 0;
}

/* Paragraphes présent dans les boutons */
#kal_btg p, #kal_btc p, #kal_btd p
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	
	color: #00008b;
	
	text-align: center;
	margin: 5px 0 0 0;
}

/* Couleur du texte activé présent dans les boutons */
#kal_btg:hover p, #kal_btc:hover p, #kal_btd:hover p
{ color: #8b0000; }

/* Couleurs des liens hypertextes */
#kal_calendrier a
{
	text-decoration: none;
	color: #00008B;
	cursor: pointer;
}

/* Couleurs des liens hypertextes au survol */
#kal_calendrier a:hover
{
	color: #8B0000;
	cursor: pointer;
}

/* L'intitulé du mois et de l'année présent dans l'en-tête */
.kal_mois, .kal_annee
{
	font-size: 20px;
	color: #8b0000;
	
	padding: 0;
}

/* L'intitulé du mois présent dans l'en-tête */
.kal_mois
{
	float: left;
	margin: 22.5px 0 0 22.5px;
}

/* L'intitulé de l'année présent dans l'en-tête */
.kal_annee
{
	float: right;
	margin: 22.5px 22.5px 0 0;
}

/* Case présente dans le calendrier */
.kal_case
{
	float: left;
	
	margin: 3px 3px 0 3px;
	padding: 0;
	
	width: 18px;
	height: 16px;
	
	background-color: #d2d5ea;
	border: 1px outset #FFFFFF;
}

/* Case présente dans le calendrier et signalant le jour actuel */
.kal_aujourdhui
{
	float: left;
	
	margin: 3px 3px 0 3px;
	padding: 0;
	
	width: 18px;
	height: 16px;

	background-color: #7fff7f;
	border: 1px outset #008c00;
}

/* Case présente dans le calendrier et signalant le jour actuel */
.kal_jour_choisi
{
	float: left;
	
	margin: 3px 3px 0 3px;
	padding: 0;
	
	width: 18px;
	height: 16px;

	background-color: #7f7fff;
	border: 1px outset #00008c;
}

/* Numéro présent dans les cases pour différencier les jours */
.kal_numero
{
	float: right;
	margin: 3px 1px 0 0;
	
	font-size: 10px;
}

/* Case vide pour décaler les jours afin de coller avec la semaine (lundi, mardi, mercredi, ...) */
.kal_vide
{
	float: left;
	
	margin: 3px 4.5px 0 3.5px;
	padding: 0;
	
	width: 18px;
	height: 18px;
	
	background-color: #e2e4f1;
}

/* Case activée */
.kal_case:hover, .kal_aujourdhui:hover, .kal_jour_choisi:hover
{
	background-color: #a5b6d5;
	border: 1px inset #00008b;
}