/*===============================================
	  STRUCTURE FOR  - SCROLLING - TABLES

    The 2 divs that sit side by side are
    tbl_T_flow    
        tbl_X_flow and 
        scrollbar_side 
    2019 try drop float:left use linline-block instead

===============================================*/

    /* 05.13 this is the "row" component; wh-space nowarp plus inline-block prevents scrollbar wrapping */
div.tbl_T_flow  { white-space:nowrap; }     
div.tbl_X_flow  { display : inline-block;
                  white-space: normal;
           
        }  	/* width not needed; 14.09  add relative for .xpand  */
div.tbl_X_flow.basic_scrolling  {  height:400px; overflow-y:scroll;   }  	/* */

    /* 14.0921 try expandable div within X-flow */ 
div.xpand { position:absolute; bottom:0; right:4px; width:8px; height:8px; background-color:#d66;
                cursor:nw-resize;}

    /* 2015.12 not div # scrollholder..t 1  */            
div.scrollholder_class {
                        position:relative;           /* REQUIRED for IE7 to make hidden overflow actually hidden */
                        display:inline-block; 
                                            /* 2020.05 float:left; */
                        height:300px;
                        overflow:hidden;
                        border-top: 1px solid #333;
                        border-bottom: 1px solid #333;
                         }

div.scrollholder_class.D500 { height:500px; }
div.scrollholder_class.D750 { height:750px; }
div.scrollholder_class.D800 { height:800px; }
div.scrollholder_class.D960 { height:960px; }
div.scrollholder_class.D1000 { height:1000px; }
div.scrollholder_class.D1200 { height:1200px; }

	
    /* position: MUST be relative to allow the scrolling call "shiftTo" to set the text's offset
    z-index: not necessary - is only essential on the dragbar to get it to the top level;
    border is just decoration for debugging -  turn it off
    2013.1219 but NOT wasn overflow hidden on the scrollbody - its the HOLDER that does it
    2014.01 try a resize? xx not on scrollBody */

div.scrollbody { position:relative; }  

    /* positioning of main scrollbar track  2019 NOT float:left; 
        2020.02 cut out the border on the track; increae cursor depth*/
div.scrollbar_side {
	display:inline-block;
    vertical-align:top;
    margin-top:20px;    border: 0px solid #aaa;
	width:16px;
	/* height MUST be set - same as above; 100% ONLY ok if the wrapper T-flow
	    has height - but that affects ALL pages, not good for tab#5 jobspage*/
	height:  300px;
    margin-left:-2px;   /* 2019 can't reduce slight offset */
    
}
div.scrollbar_side.D500 { height:500px; }
div.scrollbar_side.D750 { height:750px; }
div.scrollbar_side.D800 { height:800px; }
div.scrollbar_side.D960 { height:960px; }
div.scrollbar_side.D1000 { height:1000px; }
div.scrollbar_side.D1200 { height:1200px; }

    /* div.scrollbar_side*/
 div.track_side {
    width:                  16px;
    height:                 100%;
    background:         #ddd;        /* OR an image e.g. url('../images/red_16.gif') 0px 0px repeat-y; */
    position:       relative;
}

        /* top is overridden by the scolling class   div.scrollbar_side div.track_side
        2015.1229 split out the (transparent) image we can have a coloured knob
        */
 div.track_cursor{
    position : absolute;     left:-3px;
    background-color:   var(--root-font-color);    /* was #DD9; yellowish */
    border: 2px solid #FCC;      /*  #888; was 999 but faint */
    width : 21px;
    height:  24px;
   
    cursor:                 pointer;
    border-radius: 6px;
    -moz-border-radius: 6px;         /* FF3.6+ */
    -webkit-border-radius: 6px;         /* Chrome,Safari4+ */
}
div.track_cursor_image{
    width  : 21px;
    height : 16px;
    /*2017.11  background:  url('/images/scroll_knob.png'); */
	
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center center;
    opacity:   0.6
    filter: alpha(opacity=60); /* For IE8 and earlier */

}