/* Elements outside drawing */
div#content #left_navigation  { position: static;   } /* instead of fixed */

/*     
    content = left-navigation + payload  
    payload = subject + tutorial
*/
div#payload  { margin-left: 1em; }
											 /* shorten distance from tutorial */
div#payload #subject  { margin-left: 8em; margin-bottom: 15px; }

										/* width declared here */
div#payload .intro, 
div#payload .demo, 
div#payload .synopsis { width: 68em;
	                    margin: 0px; padding: 0px;
	                    border: solid black 1px;}     

/* the 2 paralled subdivisions: wrap_draw_control and parallel_to_canvas */

div#payload #wrap_draw_control  { float: left; margin: 0px 10px; 
	                                           padding: 0px;}

div#payload #parallel_to_canvas { margin-left: 5px; padding: 0px 0px;}

div#payload #control { 
                        width: 220px; margin: 0px auto; padding: 0px 10px;
                        border: 1px solid black; 
                        font-size: 15px;
                      }

div#payload #fast_fwd     {  font-size: 15px;  color: black; border: 0px; }

div#payload #start_stop   {  font-size: 15px; border: 0px;
                             background: orange; color: black } 
/* End of Elements outside drawing */

/* 
   Important:
   1) All lines and pointers must be with zero margin and padding (to avoid
	  insanity in synchronizing Css props and Jscript dhtml elements). 
      We gave an id to the drawing, and set properties for all div & p elements.
   
      Prior to that, we had done (works, but needs update with new class names):
        p[class~="cl_"]  { margin: 0px; padding: 0px;}
        p[class~=box]    { margin: 0; padding: 0; } 
       ...

   2) All CSS SELECTORS must START WITH THE SAME HIERARCHY: either they all begin
      with:  a)   div#content #id_drawing  ...
             b)   div#id_drawing ...

      (Reason: we had the first 3 declarations with a), and all other with b); 
               result: the box titles 'margin: auto' did not work any more! 
               why:  the top declaration was more 'specific' and it was not
                     overridden by the second...
      Chosen: b)
*/

/* Exception: cl_drawing is part of the payload (not of cl_drawing..) */
div#payload .cl_drawing { top: 0px; left: 0px; 
                          border: solid black 2px; 
                          background-color: #6666FF;  /* eee */
                          font-size: 15px;
                        }

div#id_drawing      { font-size: 15px; }
div#id_drawing  div { margin: 0px; padding: 0px;}
div#id_drawing  p   { margin: 0px; padding: 0px;}

div#id_drawing .grid    {  border: dotted black 1px; 
                           filter:alpha(opacity=10); opacity: .2; }

@media print {  div#payload .grid { opacity: 0 }  }


div#id_drawing .cl_drawing p { font-size: 15px; } 

/* tutorial */
div#payload .cl_drawing .cl_tutor   { border: solid black 1px; background: white;
                                      padding: 10px 5px; font-size: 15px; }

/* 'cl_tutor pre' did not inherit font-size from 'cl_tutor', as another setting
   (that I do not remember, perhaps for pre) took over 
*/
div#payload .cl_drawing .cl_tutor  pre  { margin: 0; padding: 0; width: 320px;
										  font-size: 15px; border: solid black 0px;}

div#id_drawing #id_tutor_box_0 { }    /*  left  box         */
div#id_drawing #id_tutor_box_1 { }    /*  mid or double box  */
div#id_drawing #id_tutor_box_2 { }    /*  right box          */
/* end tutorial */


/* classes for (innerHtml) 'pointer' paragraphs:

  a) All pointers are <p> tags, whose position is declared above as 'absolute'.
     The pointers are drawn as innerHTML of the div, eg:
     '<p class="cl_super">super</p>' + '<p class="cl_iv_tbl">iv_tbl</p>' + ..
    
  b) Each pointer has a class (eg, 'cl_super') which sets its coordinates
     'top' and 'left' (values are relative to the box containing the pointer).
     
  c) The code that draws a connection needs to know the coordinates of the
     2 pointers. Unfortunately it cannot read them from CSS. Therefore we
     need to hardcode them there also; we do it with literals:
       var Y_KLASS_INST  = 30 + HALF_H_PTR;
       var Y_SUPER       = 30 + HALF_H_PTR;
       ..
*/

/* pointer 'labels' in a box; coordinates relative to top left of a box 
   remember: the distance is to the upper tip of the label (because they
   are just paragraphs), not to the center of the label; put a border in 
   case of doubt
*/
div#id_drawing .cl_klass_instA { left: 10px; top: 30px;   }  /* instA klass ptr */

div#id_drawing .cl_super  { left: 5px; top: 15px;   }  /* super ptr : was 20px  */
div#id_drawing .cl_klass  { left: 5px; top: 40px;   }  /* klass ptr   */
/* master_helper_module (mhm): stretch left to 2px only */
div#id_drawing .cl_mhm    { left: 5px; top: 60px; color: #ff0000;  } 

div#id_drawing .cl_meth_list { left: 2px; top: 85px;  } 
div#id_drawing .cl_meth0     { left: 2px; top: 102px;  }
/* next method inserted in AC::Basep alone: same spot as meth1 */
div#id_drawing .cl_inherited_w_h { left: 2px; top: 120px; color: red; }

/* In mini_proxy: pointer to methods (in mini_mod) */
div#id_drawing .mini_proxy_meth { left: 5px; top: 40px;  }

/* in mini_module: we don't draw any more 'methods' label
   div#id_drawing .mini_mod_meth  { left:  2px; top: 12px;  } 
*/
div#id_drawing .mini_mod_meth0 { left:  2px; top: 15px;  }
div#id_drawing .mini_mod_meth1 { left:  2px; top: 35px;  }
/****** End of css classes whose values hardcoded in javascript Constants */


div#id_drawing .boxClass  { background: aqua;  
	                        border: 1px solid black; opacity: 0.9;
	                      }
div#id_drawing .boxMeta   { background: orange; 
	                        border: 1px solid black; opacity: 0.9;
	                      }
div#id_drawing .boxModule { background: red;   
	                        border: 1px solid black; opacity: 0.9;
					      }
div#id_drawing .boxProxy  { background: silver;   
	                        border: 1px solid black; opacity: 0.9;
					      }
					
div#id_drawing .boxMongrel,
div#id_drawing .boxCGI         { background: aqua;   
	                             border: 1px solid black; opacity: 0.9;
					           }
					
div#id_drawing .boxRouting  { background: red;   
	                          border: 1px solid black; opacity: 0.9;
					        }

/* definitions for aRef, reference to Instance (I) */
div#id_drawing #id_aRef { font-size: 1.1em; font-style: italic }
div#id_drawing .cl_aRef { border: 0px solid black; opacity: 1;  }

/* definitions for Instance of A (instA) */
div#id_drawing #id_instA { background: violet }
div#id_drawing .cl_title_inst {  position: relative; top: -10px;  margin: auto;  
                              background: white; width: 45px;  font-size: 15px;
                              border: 1px solid black; }
/* end to instA */

/* definitions for boxes */
div#id_drawing #id_A {  }
div#id_drawing #id_B {  }
div#id_drawing #id_O {  }

/* the content of the boxes is a series of <p> tags (to/from which connections
   are done between boxes): declare them as position absolute, without padding
   and margin
*/
div#id_drawing div   { margin: 0px; padding: 0px }
div#id_drawing p     { position: absolute; margin: 0px; padding: 0px; ;}

div#id_drawing #id_proxy_M1p  { }
div#id_drawing #id_mod_M1     { }

/* properties in class boxes */

div#id_drawing .cl_title {  position: absolute; top: -10px;  margin: auto;  
                         background: white; left: 2%; right: 2%; /*width: 100px; */
                         border: 1px solid black; text-align: center }

div#id_drawing .cl_title_mongrel {  
						 position: absolute; top: -10px;  margin: auto;  
                         background: white; left: 5%; right: 5%; /*width: 80px; */
                         border: 1px solid black; text-align: center }

div#id_drawing .cl_title_cgi {  
						 position: absolute; top: -10px;  margin: auto;  
                         background: white; left: 10%; right: 10%;
                         border: 1px solid black; text-align: center }

div#id_drawing .cl_title_routes {  
						 position: absolute; top: -10px;  margin: auto;  
                         background: white; left: 8%; right: 8%;
                         border: 1px solid black; text-align: center }

div#id_drawing .cl_line            { border: solid black 1px  }
div#id_drawing .cl_line_aRef_instA { border: solid black 1px  }
div#id_drawing .cl_line_instA_A    { border: solid black 1px  }

/************ Define a class per segment
              cssClass is based on the names of boxes it connects
*/

/* Class AC::Base - Meta AC::Basep     */
      
/*** from class AC::Base  ***/
div#id_drawing .cl_line_ActCntr_Base_AC_Helpersp    { border: solid black 1px  }
div#id_drawing .cl_line_ActCntr_Base_ActCntr_Basep  { border: solid black 1px  }
div#id_drawing .cl_line_ActCntr_Base_AnonModuleBase { border: dotted black 1px }
div#id_drawing .cl_line_ActCntr_Base_ActCntr_Basep  { border: solid black 1px  }
/*** from Meta AC::Basep  ***/
div#id_drawing .cl_line_ActCntr_Basep_ClassMethodsp { border: solid black 1px  }

/*** from ActView  ***/
div#id_drawing .cl_line_ActView_Base_ActView_Basep   { border: solid black 1px  }

/*** from proxy AC_Helpersp ****/
div#id_drawing .cl_line_AC_Helpersp_AC_Helpers   { border: dotted black 1px  }

/*** from proxy ClassMethods ****/
div#id_drawing .cl_line_ClassMethodsp_ClassMethods { border: dotted black 1px  }

/*** from class ApplController  ***/
div#id_drawing .cl_line_ApplController_ActCntr_Base     { border: solid black 1px  }								
div#id_drawing .cl_line_ApplController_AnonModuleAppl { border: dotted black 1px }												 												
div#id_drawing .cl_line_ApplController_ApplControllerp    { border: solid black 1px  }

/*** from Meta ApplControllerp ***/
div#id_drawing .cl_line_ApplControllerp_ActCntr_Basep   { border: solid black 1px  }	
		
					
/*** from module 'Anon Module%Appl' ***/
     /* proxy -> proxy : solid */
div#id_drawing .cl_line_AnonModuleApplp_AnonModuleBasep { 
													border: solid black 1px }
     /* from proxy -> module: dotted */
div#id_drawing .cl_line_AnonModuleApplp_AnonModuleAppl {
													border: dotted black 1px }
	 /* from proxy -> proxy (interposed)*/
div#id_drawing .cl_line_AnonModuleApplp_ApplHelperp {
													border: solid black 1px }
													
													
/*** from Proxy of module 'Anon Module%Base' ***/
     /* proxy -> module */
div#id_drawing .cl_line_AnonModuleBasep_AnonModuleBase { border: dotted black 1px; }
     /* proxy -> ActView::Base */
div#id_drawing .cl_line_AnonModuleBasep_ActView_Base { border: solid black 1px; }

/*** from proxy of module ApplHelper ***/
     /* proxy -> module */
div#id_drawing .cl_line_ApplHelperp_ApplHelper { border: dotted black 1px; }
     /* proxy -> next proxy */
div#id_drawing .cl_line_ApplHelperp_AnonModuleBasep { border: solid black 1px; }

/**************/
/*** from class UserController  ***/
div#id_drawing .cl_line_UserController_ApplController     { border: solid black 1px  }								
div#id_drawing .cl_line_UserController_AnonModuleUser { border: dotted black 1px }												 												
div#id_drawing .cl_line_UserController_UserControllerp    { border: solid black 1px  }

/*** from Meta UserControllerp ***/
div#id_drawing .cl_line_UserControllerp_ApplControllerp   { border: solid black 1px  }	
		

/*** from proxy of module 'Anon Module%User' ***/
     /* proxy -> proxy : solid */
div#id_drawing .cl_line_AnonModuleUserp_AnonModuleApplp { 
													border: solid black 1px }
     /* from proxy -> module: dotted */
div#id_drawing .cl_line_AnonModuleUserp_AnonModuleUser {
													border: dotted black 1px }
	 /* from proxy -> proxy (interposed)*/
div#id_drawing .cl_line_AnonModuleUserp_UserHelperp {
													border: solid black 1px }

/*** from proxy UserHelperp ***/
div#id_drawing .cl_line_UserHelperp_AnonModuleApplp { border: solid black 1px }
div#id_drawing .cl_line_UserHelperp_UserHelper { border: dotted black 1px }
																							
/* vertically between Classes */
div#id_drawing .cl_line_User_Userp                  { border: solid black 1px  }

/*** mongrel, cgi, routing ***/
div#id_drawing .cl_line_Mongrel_CGI     { border: dotted black 1px; }
div#id_drawing .cl_line_Mongrel_Routing { border: dotted black 1px; }
div#id_drawing .cl_line_CGI_Mongrel     { border: dotted black 1px; }
div#id_drawing .cl_line_Routing_Mongrel { border: dotted black 1px; }

/*** from Anon V ***/
/* class to meta */
div#id_drawing .cl_line_AnonV_AnonVp { border: solid black 1px  }
/* class to proxy (of Anon for User) */
div#id_drawing .cl_line_AnonV_AnonModuleUserp { border: solid black 1px  }

/*********************** End of Drawing elements ***********************/