@charset "UTF-8";
/* Body */
body {
	font-family: source-sans-pro;
	/*background-color: #C83234;*/
	/*background-image: url(../app/data/media/bg_magnes_m1.jpg);*/
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10%;
	font-style: normal;
	font-weight: 200;
	position: absolute;
}
/* Container - not visible, contain all page sections upper panel, screen , and footer*/
.container {
	width: 948px;
	height: 612px;
	position: absolute;
	
	--red-custom: #F27064;
	--blue-custom: #7C9DC3;
	--white: #FFFFFF;
	--black: #000000;
	--black-transparent: #00000000;
	--darkBlue-custom: #002A4B;
	
	--ansSingleUpGraphic: url(../images/ansBtnRoundUp.png);
	--anssingleCheckedTrueGraphic:  url(../images/ansBtnRoundSelectedTrue.png);
	--ansSingleCheckedFalseGraphic: url(../images/ansBtnRoundSelectedFalse.png);
	--ansMultiUpGraphic: url(../images/ansBtnRecUp.png);
	--ansMultiCheckedTrueGraphic: url(../images/ansBtnRecSelectedTrue.png);
	--ansMultiCheckedFalseGraphic: url(../images/ansBtnRecSelectedFalse.png);
	--ansCheckBtnQmcGraphic: url(../images/checkButtonAns.png);
	--ansCheckBtnFbGraphic:url(../images/fb_graphic_small.png);
	
	--small-space-between-btn-and-text: 16px;
	
	/* for qdragG act */
	/*
	we move those to screen class which was also moved to different file
	--height-of-act-QDragG: 64px;
	--QdragG-reka-image: url(../images/closet1.png); 
	*/
	
}

/*//messageBox moved*/
/*//////////// buttons on the upper panel ////////////*/

/*class with propperties share by all uppwer buttons */
.headerButtons {
	position: absolute;
	width: 51px;
	height: 51px;
	margin-top: 11.75px;
	border: none;
	cursor: pointer;
}
#menuButton {
	margin-left: var(--left-menuBtn);/*0.1;*/
	background-image: url(../images/menu_graphic1.jpg);
}
#menuButton:enabled {
}
#menuButton:disabled {
	/*put here  pic for dim*/
	background-image: url(../images/menu_graphic1_dim.jpg);
}
/*mouseovver* (will replace all statments in :enable and disabled*/
#menuButton:hover {
	margin-left: calc(var(--left-menuBtn) + var(--offset-hover-forHeaderBtns));/*2px;*/
}

/*//////////// menu ////////////*/
.screen_menu {
	position: absolute;
	top: 72px;
	left: 0px;
	width: 210px;
	background-color: var(--red-custom);
	display: block;
	
	--margin-screen_menu_item: 5px;
}
.screen_menu_item {
	/*position: absolute;*/
	width: calc(100% - 2 * var(margin-screen_menu_item));/*200px;*/
	height: 20px;
	background-color: var(--white);
	margin: var(--margin-screen_menu_item) /*5px*/;
	cursor: pointer;
	text-align: right;
	padding-right: 10px;
	box-sizing: border-box;
	font-family: Alef;
	font-size: 14px;
	white-space: nowrap;
	direction: rtl;
	overflow: hidden;
	text-overflow:ellipsis; /*clip */
}
#next {
	background-image: url(../images/next_graphic1.jpg);
	left: var(--left-next); /*57.6px;*/
}
#next:enabled {
}
#next:disabled {
	/*put here  pic for dim*/
	background-image: url(../images/next_graphic1_dim.jpg);
	cursor: default;
}
/*mouseovver* (will replace all statments in :enable and disabled*/
#next:hover {
	left: calc(var(--left-next) - var(--offset-hover-forHeaderBtns));/*55.6px;*/
}
#prev {
	left: var(--left-prev); /*117.05px;*/
	background-image: url(../images/prev_graphic1.jpg);
}
#prev:enabled {
}
#prev:disabled {
	/*put here  pic for dim*/
	background-image: url(../images/prev_graphic1_dim.jpg);
	cursor: default;
}
/*mouseovver* (will replace all statments in :enable and disabled*/
#prev:hover {
 
	left: calc(var(--left-prev) - var(--offset-hover-forHeaderBtns));/*115.05px;*/
}
#dictionary {
	left: var(--left-dictionary); /*180.55px;*/
	background-image: url(../images/dictionary_graphic1.jpg);
}
#dictionary:enabled {
}
#dictionary:disabled {
	background-image: url(../images/dictionary_graphic1_dim.jpg);
	cursor: default;
}
#dictionary:hover {
	
	left: calc(var(--left-dictionary) - var(--offset-hover-forHeaderBtns));/*178.55px;*/
}
#preAudio:disabled {
	background-image: url(../images/voice_graphic1_dim.jpg);
	cursor: default;
}
#preAudio:hover {
	
	left: calc(var(--left-preAudio) + var(--offset-hover-forHeaderBtns));/*253.05px;*/
}
#preAudio {
	position: absolute;
	border: none;
	cursor: pointer;
	left: var(--left-preAudio); /*251.05px;*/
	background-image: url(../images/voice_graphic1.jpg);
}
#audio {
	position: absolute;
	border: none;
	cursor: pointer;
	left: var(--left-audio);/*325.05px;*/
	top: 22px;
	visibility: hidden;
}
/*/////////// lines between buttons on the upper panel //////////////////*/
.headerVerticalLineS {
	position: absolute;
	width: 4px;
	height: 22px;
	top: 27.3px;
	left: 57px;
	background-image: url(../images/header_vertical_line1.jpg);
}
#headerVerticalLine1 {
	left: 57px;
}
#headerVerticalLine2 {
	left: 112.4px;
}
#headerVerticalLine3 {
	left: 170.35px;
}
#headerVerticalLine4 {
	left: 241.55px;
}
#headerVerticalLine5 {
	left: 315.4px;
}
/* header section */
.header {
	width: 100%;
	height: 68.2px;
	background-color: var(--white);/*border-bottom: 1px solid #2C9AB7;*/
	
	--offset-hover-forHeaderBtns: 2px;
	--left-next: 57.6px;
	--left-prev: 117.05px;
	--left-dictionary: 180.55px;
	--left-preAudio: 251.05px;
	--left-audio: 325.05px;
	--left-menuBtn: 0.1px;
}
/*------------ screen Section and its elements -----------------*/
#courseTitle {
	direction: rtl;
	position: absolute;
	width: 948px;
	height: 570px;
	background-color: var(--black-transparent);
	top: 120px;
	left: 0px;
	font-family: Alef;
	font-size: 168px;
	font-weight: bold;
	text-align: center;
	color: var(--white);
	line-height: 90%;
	cursor: default;
}
#courseTitleLine {
	direction: rtl;
	position: absolute;
	width: 604px;
	height: 39px;
	/*background-color: var(--black-transparent);*/
	top: 20px;
	right: 20px;
	font-family: Alef;
	font-size: 32px;
	font-weight: bold;
	text-align: right;
	color: var(--darkBlue-custom);
	line-height: 90%;
	cursor: default;
}
#nav_line {
	direction: rtl;
	color: var(--darkBlue-custom);
	font-family: Alef;
	font-size: 30px;
	font-weight: bold;
	text-align: right;
	position: absolute;
	width: 948px;
	height: 45px;
	/*background-color: #45BC4100;*/
	top: 82px;
	left: 0px;
	cursor: default;
	padding-right: 20px;
	padding-top: 8px;
	box-sizing: border-box;
}


/*------------- footer --------------- */
.my_footer {
	width: 100%;
	background-color: var(--white);
	top : 751.85px;
	height: 39.2px;
	position: absolute;
}
/* More info */
footer {
	background-color: var(--white);
	padding-bottom: 35px;
}
/*class for the properties of the text that is perminant in the buttom of the software*/
#rightsReserved {
	direction: rtl;
	position: absolute;
	/*background-color: rgba(255, 255, 255,0);*/
	text-align: right;
	font-family: Alef;
	color: var(--darkBlue-custom);
	font-size: 18px;
	width: 100%;
	box-sizing: border-box;
	top : 791.05px;
	height: 20px;
	padding-right: 20px;/*content: "כל הזכויות שמורות ©";*/
}
#counterScreens {
	direction: ltr;
	position: absolute;
	/*background-color: rgba(255, 255, 255,0);*/
	text-align: left;
	font-family: Alef;
	color: var(--red-custom);
	font-size: 18px;
	width: 100%;
	box-sizing: border-box;
	top : 791.05px;
	height: 20px;
	padding-left: 20px;
	cursor: default;
}


/* signed-texts options on the richText field */

/*
.fb_small_act_text{
	
	cursor: default;
	position: absolute;
	box-sizing: border-box;
	
	font-family: Alef;
	font-size: 28px;
	text-align: right;
	color: var(--black);
	padding-top: 2px;
	padding-right: 70px;
	
	background-color: var(--white);
	

}
.fb_small_act_btn{
	
	cursor: pointer;
	position: absolute;
	top:0px;
	
	width: 54px;
	height: 40px;
	background-image: var(--ansCheckBtnFbGraphic);
	
	background-size: auto;
	background-repeat: no-repeat;
	

}
*/