/*
 * CSS styles for reflowable image books
 *
 * Harry Plantinga, 2016
 */

body		{ margin-left:0.4in; margin-right:0.4in; font-family:Georgia; }
div1		{ zoom: 0.25; }     /* hi-res for more accuracy with image pixel coords */
.yellowBox	{ border:thin solid yellow; z-index:2; -webkit-box-sizing: border-box; }
.greenBox	{ border:thin solid lightgreen; z-index:2; -webkit-box-sizing: border-box; }
.redBox		{ border:thin solid #F48; z-index:2; -webkit-box-sizing: border-box; }
.pageImage	{ z-index:1; }

/*
 * navigation block
 */
#nav        { width:100%; text-align:center; background-color:#FFE; margin:0in;
	          position:fixed; top:-2pt; left:-2pt; z-index:3; font-size:140% }
#nav a      { text-decoration:none; }
#nav p      { margin:0pt; padding:6pt; font-size:70%; color:#aaa; overflow:hidden; }
#nav .left  { float:left; white-space:nowrap; width:60% }
#nav .right { float:right; }
#reflowForm { font-size:12pt; margin-top:0pt; margin-bottom:12pt; }
#reflowForm div { display:inline; }


/**************************************************************************

    There are five book modes, defined as classes on <div1>:
        * reflowMode: show reflowable page images, sized to fill window
        * fixedMode:  show reflowable images, but used fixed block sizes
                         (mainly for testing)
        * imageMode:  show whole page images; hide text
        * blockMode:  show images for OCR blocks, expanded
        * textMode:   show text rather than images

    reflow.js will add one class of textMode, imageMode, reflowMode, 
    fixedMode, or blockMode to a <div1> element corresponding to a page. 

**************************************************************************/

div.block           { margin-top:48pt; }    /* inter-div spacing */
div#spacer          { margin-top:1.25in; }     /* space before first div */

/*******************************************
 * reflow mode: reflowable images          *
 *******************************************/

.reflowMode div                   /* don't use block coords */
{
    position:relative;
    width:auto !important;
    height:auto !important; 
    left:0 !important;
    top:0em !important; 
    background-image:none !important;
}

.reflowMode p
{
    margin-left:0pt !important;   /* don't use paragraph margin/indent */
    text-indent:0pt !important;
}

.reflowmode w
{
    display:inline-block;         /* display words as images */
    overflow:hidden;
    color:rgba(170,140,110,0.0);
    -webkit-box-sizing:border-box;
}

.reflowMode .pageImage { display:none; }


/*******************************************
 * textMode: plain ol' text, no images     *
 *******************************************/

.textMode div
{
    position:relative;
    width:auto !important; 
    height:auto !important;
    left:0 !important;
    top:8em !important;
    background-image:none !important;
}

.textmode p
{
    margin-left:0pt !important;
    text-indent:0pt !important;
}

.textMode w                       /* like reflow mode, but show text */
{
    display:inline;
    color:black;
    background-image:none !important;
}

.textMode .pageImage { display:none; }


/********************************************
 * fixedMode: reflow with fixed block sizes *
 ********************************************/

.fixedMode .block
{
    position:absolute;
    margin-top:0pt !important;
    background-image:none !important;
}

.fixedMode w
{
    display:inline-block;
    overflow:hidden;
    color:rgba(170,140,110,0.0);
    -webkit-box-sizing:border-box;
}

.fixedMode .pageImage { display:none; }


/********************************************
 * imageMode: page images only              *
 ********************************************/

.imageMode .block             /* hide everything */
{
    display:none;  
    left: -1in !important;
    top: -1in;
    background-image:none !important;
}

.imageMode .pageImage         /* show page image */
{
    display:block;
    position:absolute; top:0; left:-0.5in; 
}


/********************************************
 * blockMode: show image for OCR blocks     *
 ********************************************/

.blockMode .block             /* don't use block coords */
{
/*  width:auto !important;  */
/*  zoom: 2; 		    */
/*  height:auto !important; */
    margin-top:96pt !important; 
}

.blockMode .pageImage { display:none; }

.blockMode w { display:none; }