/* 

Theme "one" general styles, common to all color schemes.
Positioning, dimensions and other general properties are set here.

Itai Hareven, Telem, April 2005

sections:
 - the ususal preliminaries (basic default styles)
 - overall layout of the page
 - link lists, general rules
 - zone-specific styles:
 		Header, A, B, Interact, MerakezInfo, D, footer
- userPrefs form
- absolutely positioned submenus
- invasion of the body switchers (applying user's font-size prefs)

*/


/*  THE USUAL PRELIMINARIES  */
BODY {background-color:white; padding:5px; margin:0; font:12px Arial; text-align:center;}
DIV, TABLE, FORM, SPAN {direction:rtl;} 
/* No tables in the page layout.
Tables copied from some old homepages sometimes exist inside zone D,
their directionality is set explicitly as inline style  */
DIV , FORM {padding:0; margin:0; text-align:right;}
IMG {margin:0; padding:0; border:0;}
.ltr , .english  {direction:ltr;}
.prompt {color:blue; text-decoration:underline; cursor:pointer; cursor:hand;}


/*  ***** OVERALL LAYOUT OF THE PAGE *******  */

/*  since the "gate" has fluid design, we need to prevent collapse of the gate when the window is narrow   */
#container {min-width:755px;}
/* a replacement for min-width in IE, based on Shea's "min-height:fixed" solution in Mezzoblue.
The situation is different, but Shea's main trick is exactly what we need  */
* HTML BODY {padding-left:770px;}
* HTML  #container {margin-left:-760px;}
/* in direction RTL some browser bugs cause problems with the above, so these 3 are LTR  */
BODY, #container, #Header  {direction:ltr;}


/*  layout of the main divs */
#container {position:relative; background-color:white; padding:0 5px;}
#development {position:absolute; top:16px; left:40%; width:8.33em; height:1.167em; border:dashed 2px red; background-color:white; text-align:center; font-weight:bold;}
#Header {overflow:visible;}
#Main {position:relative; width:100%; background-color:white;}
	#semester {position:absolute; top:1.833em; right:13.083em; width:20px; height:140px;}
			#semesterName {display:none;}
	#A {position:absolute; top:1.833em; right:0; width:13.083em; height:33.33em;}
	#B {position:absolute; top:0; left:0px; width:12.5em; height:31.66em; background:right bottom no-repeat;} 
	#Interact {width:100%; height:1.583em;}
	#Info {position:relative; margin:0 15em 0 auto; width:55%;}
		#MerakezInfo {width:25em; margin:10px 1.666em 5px 0;}
		#MessageBoard {text-align:center; width:95%; margin:0 15px 5px 0;}
		#MessageBoard IFRAME {width:98%; height:12.5em; padding:0.5em 0; border-style:solid; text-align:right; border-width:1px 0;}
	#D {position:relative; text-align:center;  margin-top:15px; z-index:100;}
	#Footer {position:relative; margin:30px auto 0 auto; text-align:center; width:33.33em; font-size:0.8em;}



/* ****** LINK LISTS, GENERAL RULES ********  */
UL, OL, LI {direction:rtl;}
.linkList , .linkList UL {list-style:none; padding:0; margin:0;}
.linkList LI {padding:0; margin:0;}
.linkList A {display:block; text-decoration:none; font-weight:bold; margin:0; white-space:nowrap;}

/* submenus in any zone initially not displayed:*/		
.linkList UL {display:none; z-index:100;}
.linkList UL LI {background-image:none;}
.linkList UL A {font-weight:normal; background-image:none;}
/* show a submenu when its opener is "open":*/
.MO_01_open UL, .MO_02_open UL, .MO_03_open UL ,  .MO_09_open UL {display:block;}
/* menu openers change height when opened since submenu is contained */
 LI.MO_01_open,  LI.MO_02_open ,  LI.MO_03_open , LI.MO_09_open {height:auto !important;}
/* arrow cursor for menu openers:*/
.MO_01 A, .MO_01_open A , .MO_02 A, .MO_02_open A , .MO_03 A, .MO_03_open A  , .MO_09 A, .MO_09_open A {cursor:default}
/* restore hand cursor for submenu items:*/
.linkList LI LI A {cursor:pointer; cursor:hand;}


/*  *****ZONE-SPECIFIC STYLES *****  */ 

/* COURSE HEADER */
/*  submenus in this zone are defined at the end of this stylesheet */
#Header .startDiv {color:red; font-weight:bold; text-align:center;}

#Header .linkList {height:1.167em; line-height:1em; margin-right:15px; width:98%;}
#Header .linkList LI {float:right; border-right:solid 1px; padding:0  0.5em;}
#Header .linkList LI {display:inline;}   /* helps Firefox   */
#Header .linkList A {display:inline; margin:0 5px;}
#Header .linkList LI.L_02 ,  #Header .linkList LI.MO_02 ,   #Header .linkList LI.MO_02_open {float:left;}

#Header .endDiv {position:relative; width:100%; height:56px; background-position:right top; text-align:center;}
	#courseLogo {position:absolute; top:0px; right:0px; width:188px; height:56px; background:white none top right no-repeat;}
	#telemLinks {position:absolute; top:0px; left:0px; width:161px; height:4.67em; z-index:70;}
		#telemLinks  A { text-decoration:none; font-size:1.2em; font-weight:bold;}
		#openu, #telem {display:block; position:absolute; top:22px; left:26px; width:42px; height:27px;}
		#telem {left:81px;}
	#courseName {
					position:relative; top:26px; margin:0 auto;
					height:2em; font-size:1.5em; font-weight:bold; 
					text-align:center; vertical-align:middle;
					}
	#courseNumber {margin:0 2px 0 0; font-size:0.8em;}



/* *****  ZONE A ******   */
#A .linkList LI	{width:13.083em; height:1.745em; background:white right top repeat-x; line-height:1.5em;}
/* pixie's rollover - here we use 6 "bullets" in the same gif */
#A .linkList A {width:11.417em; height:100%; padding:0 1.666em  0 0; background:transparent 12.083em 6px no-repeat;}
#A .linkList A:HOVER {background-position:12.083em -19px;}
#A SPAN.unflicker {display:block; width:100%; height:100%; margin:0; padding:0; background:transparent 12.083em -19px no-repeat;}

/* menu openers */
#A .MO_01 A ,  #A .MO_02 A  {background-position:12.083em -44px  !important;}
#A .MO_01 A:HOVER , #A .MO_01 SPAN.unflicker {background-position:12.083em -69px  !important;}
#A .MO_02 A:HOVER , #A .MO_02 SPAN.unflicker {background-position:12.083em -69px  !important;}

#A .MO_01_open A  ,  #A .MO_02_open A {background-position:12.083em  -94px  !important;}
#A .MO_01_open A:HOVER , #A .MO_01_open SPAN.unflicker {background-position:12.083em  -119px  !important;}
#A .MO_02_open A:HOVER , #A .MO_02_open SPAN.unflicker {background-position:12.083em  -119px  !important;}

#A .MO_02 A ,   #A .MO_02_open A {color:black;}


/* submenus */
#A .linkList UL {margin-top:3px; background:white none;}
#A .linkList LI LI 	{margin-right:7px; width:12.5em; height:1.5em; line-height:1.166em; background:white none; border-right:solid 1px;}
#A .linkList LI LI A {padding:0px 1.083em 4px 0px; height:auto; background:white none;}
#A .linkList LI LI A:HOVER {background-image:none;}

/* emphasized buttons */
#A  .L_02  A , #A  .L_02  A:VISITED , #A  .L_02  A:HOVER , #A .L_02 SPAN.unflicker {background-position:12.25em 6px !important;}
#A  .L_03  A ,  #A  .L_03  A:VISITED , #A  .L_03  A:HOVER , #A .L_03 SPAN.unflicker {background-position:12.25em 6px !important;}


/* ****** ZONE B ****** */
.boldLinks A {font-weight:bold}
.normalLinks A {font-weight:normal}
#B1 {background-color:white;}
#B2  .linkList LI {width:12.5em; border-bottom:solid 1px;}
#B1 .linkList LI {width:12.333em; background:transparent 10em 2px no-repeat;}
#B1 .linkList A {width:9.833em; height:1.583em; padding:0.5em 2.5em 0 0; background:transparent 10em 2px no-repeat;}
#B2 .linkList A {width:11.67em; height:1.583em; padding:0.5em 10px 0 0;}

/* emphasized buttons */
#B2  .linkList .L_02 A  {color:black !important;}

/* submenus */
#B .linkList UL {margin-right:15px; width:11.166em;}
#B1 .linkList UL {width:11.5em;}
#B .linkList UL LI {width:100%; border-style:solid; height:1.417em; border-width:1px 0 0 0;}
#B .linkList UL A {width:auto; height:1em; padding:0.33em 3px 1px 0; display:list-item; list-style:square inside;}

/* departments */
#human, #human A {background-image:url(dept/human.gif) !important;}  /* history */
#nature, #nature A {background-image:url(dept/nature.gif) !important;}
#socio, #socio A {background-image:url(dept/socio.gif) !important;}
#economy, #economy A {background-image:url(dept/economy.gif) !important;}
#arts, #arts A {background-image:url(dept/arts.gif) !important;}  /* literature & art */
#TAMID, #TAMID A {background-image:url(dept/TAMID.gif) !important;} 
#teach, #teach A {background-image:url(dept/teach.gif) !important;}  /* ovdey hora'a */
#tech_school, #tech_school A {background-image:url(dept/tech_school.gif) !important;}

#B2  #courseBooklet.hoveret1 A {background-color:red; color:white; font-weight:bold;}
#B2  #courseBooklet.hoveret2 A {background-color:white; color:red; font-weight:bold; border:solid 1px red;}
#B2  #courseBooklet.hoveret3 A {background-color:white; color:darkred; font-weight:bold; border:ridge 3px red; width:90%}
#B2  #courseBooklet.hoveret4 A {background-color:white; color:darkred; font-weight:bold; border:inset 3px red; width:90%}
#B2  #courseBooklet.hoveret5 A {background-color:#C00000; color:white; font-weight:bold; border:solid 1px white; border-width:1px 0;}
#B2  #courseBooklet.hoveret6 A {background-color:#C00000; color:white; font-weight:bold; border:solid 1px white; border-width:1px 0; letter-spacing:0.16em;}
#B2  #courseBooklet.hoveret7  A {background-color:blue; color:white; font-weight:bold;}
#B2  #courseBooklet.hoveret8 A {background-color:blue; color:white; font-weight:bold; border:solid 2px darkred; border-width:2px 0;}
#B2  #courseBooklet.hoveret9 A {background-color:#40FF40; color:black; font-weight:bold;}
#B2  #courseBooklet.hoveret10 A {background-color:#40FF40; color:#C00000; font-weight:bold;}


/* disciplines */
#B1 .L_02 , #B1 .L_02 A {background-position:10.917em 10px !important;}

#login {width:80px; text-align:center; margin:10px 33px; border:solid 1px; background-color:white; font-size:0.83em;}
#login A {display:block; text-decoration:none; font-weight:bold; width:100%; padding:2px 0; margin:0;}
#logout_button {text-align:center; display:none;}
#login_button {text-align:center;}
#b_bottom {width:12.5em; height:12px;}


/*  ****** ZONE Interact *******  */
/*  submenus in this zone are defined at the end of this stylesheet */
#Interact {background:white none top right repeat-x;}
#Interact .linkList {height:1.833em; margin-right:178px;}
#Interact .linkList LI {display:inline; float:right; height:1.833em; background:transparent right top no-repeat;}
#Interact .linkList A {display:inline; display:inline-block; padding:0 33px 0px 13px; 
			background:transparent right top no-repeat; border-right:solid 1px;}
			
/* hack to help IEwin clickability, hide from IE5mac \*/
* HTML #chat  A {width:2.2em; border:none !important;}  
* HTML #liveLesson  A {width:3em; border:none !important;} 
* HTML #interwise  A {width:3em; border:none !important;} 
* HTML #matalotSystem A {width:6em; border:none !important;} 
 /*  End hide from IE5mac  */ 

#Interact .endDiv {position:absolute; top:30px; right:15em; width:33.333em; color:darkred; border:solid 1px darkred; text-align:center;}


/* *****  MerakezInfo  ******  */
#MerakezInfo .startDiv   {font-size:1.2em; font-weight:bold;}
#MerakezInfo .startDiv A {text-decoration:underline;}


/*  ******* ZONE D  **********  */
#D TABLE {margin:0 auto;}
#D .startDiv {text-align:center;}
#D .endDiv {text-align:center;}


/*  ******* FOOTER *******   */
#Footer DIV {text-align:center;}
.note {display:none; color:black;  background-color:#FFFACD; text-decoration:none; cursor:default; border:solid 1px black;  width:220px; padding:3px;}
.toggler_open  .note {display:block; position:absolute; top:-30px; left:50px; z-index:100;}


/*  ******** UserPrefs Form ********  */
#userPrefs {list-style:none; position:absolute; top:18px; left:100px; width:25em; z-index:1000; background-color:white; padding:5px; margin:0; display:none; border:solid 1px;}
#userPrefs LI {list-style:none; margin:0; padding:0;}
	#userPrefs FORM {margin:0; padding:0;}
	#closeButton {border-style:solid; border-width:0 2px 2px 0; float:left; padding:0; margin:-5px 0 0 -3px; width:12px; height:12px; font:14px Arial; font-weight:bold; line-height:16px; text-align:center; vertical-align:middle;}
		#closeButton A {text-decoration:none;}
	#userPrefs  A.currentFS {text-decoration:none; color:dimgray; border:solid 1px; font-weight:bold; cursor:default;}
	#userPrefs  A.offeredFS {text-decoration:none; font-weight:bold;}
	#fs12  {font-size:12px;}
	#fs14  {font-size:14px;}
	#fs16  {font-size:16px;}
	#fs18  {font-size:18px;}
	#checkboxes  {float:left; margin-left:15px;}
	#userPrefsButtons {text-align:center; margin:30px 0 0 0 ;}
		#userPrefsButtons Button {font-size:0.8em; background-color:ghostwhite;}
	#fsChooserDiv {}
	

 
/* *******   Absolutely Positioned Submenus  *******  */
#Header .linkList UL,  #Interact .linkList UL {position:absolute;  width:12.5em; border:solid 1px; padding:4px 1.5em 4px 0.5em; list-style:square outside; background:white none; }
#Header .linkList UL LI , #Interact .linkList UL LI {display:list-item; height:auto; background:white none !important; border:none; float:none; margin:0; padding:0;}
#Header .linkList UL A , #Interact .linkList UL A  {display:inline !important; padding:0; height:14px; line-height:14px; border:none; background:white none !important;}
#Header .linkList UL A:HOVER , #Interact .linkList UL A:HOVER {text-decoration:underline;}



/*  ********  And now... Clarke & Edwards'  Invasion of the Body Switchers !  *********  */

/*  most font sizes as well as most positions and dimensions of elements are in em's , 
	so resizing the BODY font causes a proportional resize of most elements  */
BODY.fs12 {font-size:12px;}
BODY.fs14 {font-size:14px;}
BODY.fs16 {font-size:16px;}
BODY.fs18 {font-size:18px;}

/*  zoom the logo -  IE  only  */
*  HTML  BODY.fs14 #courseLogo {zoom:1.14; background-position: right -3px;}
*  HTML  BODY.fs16 #courseLogo {zoom:1.14; background-position: right -3px;}
*  HTML  BODY.fs18 #courseLogo {zoom:1.14; background-position: right -3px;}

/*  dimensions that need to be resized explicitly  */
BODY.fs14  #Interact .linkList {margin-right:202px;}
BODY.fs16  #Interact .linkList {margin-right:202px;}
BODY.fs18  #Interact .linkList {margin-right:256px;}

BODY.fs14  #A   ,   BODY.fs14  #semester {top:23px;}
BODY.fs16  #A   ,   BODY.fs16  #semester {top:23px;}
BODY.fs18  #A   ,   BODY.fs18  #semester {top:20px;}

BODY.fs14  #B  {top:12px;}
BODY.fs16  #B  {top:14px;}
BODY.fs18  #B  {top:20px;}

BODY.fs14  {padding-left:770px;}
BODY.fs14  #container {margin-left:-760px; min-width:755px;}

BODY.fs16 {padding-left:830px;}
BODY.fs16  #container {margin-left:-820px; min-width:815px;}

BODY.fs18 {padding-left:880px;}
BODY.fs18  #container {margin-left:-870px; min-width:865px;}


BODY.fs14  #Info {width:48%;}
BODY.fs14  #MessageBoard {width:95%;}
BODY.fs14  #MessageBoard  IFRAME {98%;}

BODY.fs16  #Info  {width:44%; margin-right:14.5em;}
BODY.fs16  #MessageBoard {width:100%;}
BODY.fs16  #MessageBoard  IFRAME {98%;}

BODY.fs18  #Info {width:50%; margin-right:14em; }
BODY.fs18  #MessageBoard {width:100%;}
BODY.fs18  #MessageBoard  IFRAME {width:80%;}


BODY.fs18  #A .linkList LI	{height:1.667em;}