@import url("https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css");
@import url("/Assets/CSS/Chatranjali.css");

body {
	background: url("/Assets/Images/Blackboard.jpg") no-repeat fixed center;
	background-size: cover;
}

page.text {
	color: #FFFFFF;
}
page.lite {
	color: #BA73B0;
}
page.dark {
	color: #954A8B;
}
page.gram {
	z-index: 1;	/* This index enables the "Beginner/Adavnced" menu button of grammar pages */
}

/* Hindi and French translation */
french {
	color: #AAA;
}
hindi ~ french {
	display: none;
}
	hindi ~ french::before {
		content: " : ";
	}
hindi {
	cursor: help;
}
	hindi:hover + french, french:hover {
		display: inline;
	}

/* Transliteration attributes (to be used with JavaScript Begin functions) */
trans {
	font-style: italic;
}
trans::before {
	content: " (";
	color: #FFF;
	font-style: normal;
}
trans::after {
	content: ")";
	color: #FFF;
	font-style: normal;
}

/* Generic headings */
#Sources {
	width: 100%;
	text-align: center;
}
	#Sources img {
		display: inline;
		vertical-align: middle;
		padding: 5rem;
		width: 10vw;
	}
		#Sources img:first-child {
			width: 6vw;
		}

#Objectives, #Lessons, #Instructions, [id^='Help'] {
	margin-top: 3rem;
}
	#Objectives li:first-child, #Lessons li:first-child, #Instructions li:first-child {
		padding-top: 1rem;
	}
	#Instructions li li:first-child, #Lesson li li:first-child {
		padding-top: 0;
	}
	#Instructions button {
		margin: 0 0.2rem;
	}
	[id^="Help"] {
		text-align: left;
	}
	[id^="Hel"] + div {
		margin: 2rem 0 !important;
	}

	#Sources::before, #Objectives::before, #Lessons::before, #Instructions::before {
		display: block;
		text-align: left;
		margin-left: -2.5rem;
		font-size: 1.8rem;
		font-weight: bold;
	}
	#Sources::before {
		margin-left: -0.5rem;
		content: "Sources";
	}
	#Objectives::before {
		content: "Objectifs";
	}
	#Lessons::before {
		content: "Fiche(s) correspondante(s)";
	}
	#Instructions::Before {
		content: "Instructions";
	}
	[id^='Help']::before {
		content: "Aide";
	}

li.easy::before, li.medium::before, li.difficult::before {
	content: "Difficulté : "
}
li.easy::after {
	content: "facile";
	color: #4CAF50;
}
li.medium::after {
	content: "moyen";
	color: #FF9800;
}
li.difficult::after {
	content: "difficile";
	color: #F44336;
}

/* Exercise attributes */
.mas {
	color: #8888FF;
}
.fem {
	color: #FF8888;
}
.aux {
	color: #5DF340;
}
.pst {
	color: #A6529A;
}
.erg {
	color: #666699;
}
.eng {
	color: #DDB9D7;
}

.hover, .exact, .wrong, .light {
	color: #FFFFFF;
	text-align: center;
	transition: background 1s;
}
.hover {
	background: rgba(255, 255, 255, 0.2);
}
.exact {
	background: #4CAF50;
}
.light {
	background: #FF9800 !important;
}
.wrong {
	background: #F44336;
}
.stuck {
	background: #AAAAAA;
	cursor: pointer;
}
.stuff {
	cursor: pointer !important;
}

.god {
	color: #4CAF50;
}
.bof {
	color: #FF9800;
}
.bad {
	color: #F44336;
}
.ran {
	color: #AAAAAA !important;
	cursor: pointer;
}

.goodAnswer {
	color: #4CAF50;
	display: none;
}

div[id^="Result"] {
	margin: 5vh;
	height: 7rem;
	font-size: 0.9rem;
	text-align: center;
}
div[id^="Message"] {
	position: relative;
	width: fit-content;
	height: fit-content;
	margin: 1rem auto;
	padding: 0.8rem;
	text-align: center;
	transition: all 1s;
}
#CloseButton {
	position: absolute;
	right: 0.4rem;
	top: 0;
	cursor: pointer;
	transition: all 1s;
}
	#CloseButton:hover {
		opacity: 0.5;
	}