 <style>
  .ui-tooltip, .arrow:after {
    background: whitesmoke;
  }
    .ui-tooltip {
    padding: 5px 10px;
    color: #595959;
    border-radius: 7px;
    font:  12px "Helvetica Neue", Sans-Serif;
   
  }
  .arrow {
    width: 70px;
    height: 14px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -14px;
  }
  .arrow.top {
    top: -14px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 3px 5px 5px -5px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }
  </style>
            <div style="float:right;margin:5px;">
                <div  class="bookcoverFrame_large">
                  <tmpl_if booktocURL>
                     <a href="<tmpl_var booktocURL>" style="text-decoration:none;"><img style='border:none;' src='<tmpl_var bookcoverURL default=/theme/opals/image/nocover.gif>' default-bookcover height=160 alt="Book cover image"></a>
                  <tmpl_else>
                     <img src='<tmpl_var bookcoverURL default=/theme/opals/image/nocover.gif>' default-bookcover  height=160 alt="Image for cover for else branch"><br>
                     <center><tmpl_if isbn_first><a id="<tmpl_var isbn_first>" style="display:none;" target="_blank" rel="noopener"><img src="//code.google.com/apis/books/images/gbs_preview_button1.gif" border="0" style="margin: 3px" alt="Preview button 1"/></a></tmpl_if></center>

                  </tmpl_if>
              </div>
             <!-- RESERVE --> 
             <tmpl_unless  hideRsrvFn>
                <tmpl_if reservable>
                    <div style="display:inline-block;margin-top:15px;margin-left:20px">
                        <opl-reserve-request 
                            rec='{rid:<tmpl_var rid>,title:"<tmpl_var title escape=html>",totalHolding:<tmpl_var totalHolding default=1>, bookcoverURL:"<tmpl_var  bookcoverURL>"}'>
                        </opl-reserve-request></div>
                </tmpl_if>
            </tmpl_unless>
            
            <!--BOOKING:: subscription DB-->
            <tmpl_if show_bkgSubsDB>
                <a href="/bin/circ/booking?rid=<tmpl_var rid>" style="text-decoration:none"><div  title="Click to book this title"
                   style="margin-left:35px;cursor:pointer;width:50px;background:#CA5000;font-weight:bold;padding-top:3px; 
                         display:inline-block;padding-bottom:3px; padding-left:9px; padding-right:5px;color:white;margin-top:5px">Book it</div></a>

           </tmpl_if>
            </div>   


         <div style='margin:5px;text-align:left'>
             <span class="recDetailTitle" hl="true" style="color:#a86028"><tmpl_var titleFm></span>
             <tmpl_if subtitleFm>: <span class="recDetailTitle" hl="true" style='font-size:10pt;color:#a86028'><tmpl_var subtitleFm> </span></tmpl_if> 
             <tmpl_if title_880>
                / <tmpl_var title_880>
            </tmpl_if>
                      
              
            <tmpl_if nameOfPart><strong><tmpl_loop nameOfPart>&nbsp;<tmpl_var item> </tmpl_loop></strong></tmpl_if>
            <tmpl_if numOfPart><tmpl_loop numOfPart><span class='dataTxt' hl="true">: <tmpl_var item></span></tmpl_loop><br></tmpl_if>
            <tmpl_if title_series_a><br><br><strong><tmpl_var recInfo_seriesTitle_lbl>: </strong><a href='/bin/search/searchPage?zid=<tmpl_var zid>;kw0=<tmpl_var title_series_a escape=HTML>;sf0=5 '><span  hl="true"><tmpl_var title_series_a></span></a> <span class='dataTxt' hl="true"><tmpl_var title_series_v></span></tmpl_if>
                       <br>
<tmpl_if author><strong><tmpl_var recInfo_author_lbl>: </strong><a href='/bin/search/searchPage?zid=<tmpl_var zid>;kw0=<tmpl_var author escape=HTML>;sf0=1003'> <span  hl="true"><tmpl_var author></span> </a><tmpl_if author_880> <br> <span class='dataTxt' hl="true"><tmpl_var author_880></tmpl_if></span> <br></tmpl_if>
<tmpl_if responsibleStmnt><strong><tmpl_var recInfo_RelatedNameslbl>:</strong> <tmpl_var responsibleStmnt><br></tmpl_if>            
<tmpl_if illustrator><strong>Illustrator: </strong><tmpl_loop illustrator><tmpl_var item><tmpl_unless __last__>, </tmpl_unless></tmpl_loop><br></tmpl_if>
            <strong><tmpl_var recInfo_format_lbl>: </strong><span class='dataTxt_sm'><tmpl_loop format>
                  <img src='/theme/opals/image/medium/<tmpl_var item>.png' alt="Type of record is <tmpl_var item>">&nbsp;&nbsp;<tmpl_var itemTxt></tmpl_loop></span><br>
            <tmpl_if language><strong><tmpl_var languageLbl>: </strong><span class='dataTxt'  hl="true"><tmpl_var language></span><br></tmpl_if>
            <tmpl_if summary><strong><tmpl_var recInfo_summary_lbl>: </strong><span class='dataTxt'  hl="true">
                <ul><tmpl_loop summary><li style="text-align:left;"><tmpl_var item></li></tmpl_loop></ul></span><br></tmpl_if>
            <tmpl_if citationRefNote><strong><tmpl_var recInfo_citationRefNote_lbl>: </strong><span class='dataTxt'  hl="true">
                <ul><tmpl_loop citationRefNote><li style="text-align:left;"><tmpl_var item></li></tmpl_loop></ul></span><br></tmpl_if>
             
            <tmpl_if subject>
                <strong><tmpl_var recInfo_subject_lbl>: </strong>
                 <span class='dataTxt'>
                     <ul><tmpl_loop subject>
                         <li style="text-align:left;"><a href='/bin/search/searchPage?zid=<tmpl_var zid>;kw0="<tmpl_var item escape=html>";sf0=21'><span hl="true"><tmpl_var item></span></a></li>
                         </tmpl_loop>
                      </ul>    
                 </span><br>
            </tmpl_if>     
           <tmpl_if awards><strong><tmpl_var recInfo_awards_lbl default='Awards'>: </strong>
                <span class='dataTxt'><ul><tmpl_loop awards><li style="text-align:left;"><tmpl_var item></li></tmpl_loop></ul></span>
           </tmpl_if>   
            <tmpl_if contentNote>
              <strong><tmpl_var recInfo_contentNote_lbl>: </strong> 
                    <tmpl_loop contentNote>
                            <tmpl_if format><span hl="true"> <tmpl_var format></span></tmpl_if><br>
                
                            <tmpl_if toc><menu> <ul>
                                <tmpl_loop toc> 
                                  <tmpl_if miscInfo> <li style="text-align:left;"><span class='dataTxt' hl="true"><tmpl_var miscInfo> </span> </tmpl_if>
                                    <tmpl_if titleRespList><ul>
                                    <tmpl_loop titleRespList>
                                        <li style="text-align:left;">
                                            <span hl="true"><tmpl_var cnTitle><tmpl_if cnResp> / <tmpl_var cnResp></tmpl_if></span>
                                        </li>
                                    </tmpl_loop></ul></tmpl_if>
                                  
                                    <tmpl_if cnUriList> 
                                        <ul>
                                            <tmpl_loop cnUriList> 
                                                <li style="text-align:left;"><a href='<tmpl_var uri>'><tmpl_var uri></a></li>
                                            </tmpl_loop>
                                        </ul>
                                    </tmpl_if>
                                    <tmpl_if miscInfo></li> </tmpl_if>
                                </tmpl_loop> <!--END:tmpl_loop toc-->
                                </ul></menu>
                            </tmpl_if>
                  </tmpl_loop><!--END:tmpl_loop contentNote-->
            </tmpl_if>
          
          
            <tmpl_if  studyProgram>
            <tmpl_loop studyProgram>
            <strong><tmpl_var studyPrgm_name></strong><ul class='dataTxt'><tmpl_if interestLevel><li style="text-align:left;"> <tmpl_var arl_interestLevelTxt>: <b><tmpl_var interestLevel></b></li></tmpl_if>
                                                        <tmpl_if readingLevel><li style="text-align:left;"> <tmpl_var arl_readindLevelTxt> :<b><tmpl_var readingLevel></b></li></tmpl_if>
                                                        <tmpl_if pointValue><li style="text-align:left;"> <tmpl_var arl_pointTxt>: <b><tmpl_var pointValue></b> </li></tmpl_if>
                                                        <tmpl_if quizNumber><li style="text-align:left;"> <tmpl_var alr_quizNumTxt>: <b><tmpl_var quizNumber></b> </li> </tmpl_if><br>
                                                        </ul>
            </tmpl_loop>
            </tmpl_if>

            <tmpl_if showARL>
                <tmpl_if lexileMeasure>
                    <div style="text-align:left;"><strong>Lexile Measure: </strong><span class='dataTxt'><tmpl_var lexileMeasure></span></div><br>
                </tmpl_if>

            <tmpl_if fountasPinnell>
                <div style="text-align:left;"><strong>Fountas&Pinnell: </strong><span class='dataTxt'><tmpl_var fountasPinnell escape='html'></span></div><br>
            </tmpl_if>
          
            </tmpl_if>

            <tmpl_if note>
            <div style="text-align:left;"> 
                <strong><tmpl_var recInfo_note_lbl>:</strong>
                    <ul class='dataTxt'><tmpl_loop note>
                        <li style="text-align:left;"><span hl="true"><tmpl_var item></span></li></tmpl_loop>
                    </ul>
            </div>
            </tmpl_if>
             
            <tmpl_if publicNotes>
                <div style="text-align:left;"><strong>Public Note: </strong>
                <span class='dataTxt'><tmpl_var publicNotes escape='html'></span></div><br>
            </tmpl_if>

           <tmpl_if keywordTag>
                <strong><tmpl_var keywordTag_lbl default="Keywords">:</strong>
                <ul class='dataTxt'><tmpl_loop keywordTag>
                        <span hl="true"><tmpl_var item></span><br></tmpl_loop>
                    </ul>

            </tmpl_if>

            <tmpl_if lccn>
               <div style="text-align:left;"> <strong>LCCN: </strong> <span class='dataTxt'><tmpl_var lccn> </span> </div></tmpl_if>
            <tmpl_if isbn>
                <div style="text-align:left;"><strong><tmpl_var sf_att7_lbl>: </strong><tmpl_loop isbn> <span class='dataTxt' hl="true"> <tmpl_unless __first__>, </tmpl_unless><tmpl_var item></span> </tmpl_loop></div></tmpl_if>
            <tmpl_if copyright>
                <div style="text-align:left;"><strong><tmpl_var recInfo_copyright_lbl>: </strong> <span class='dataTxt' hl="true"><tmpl_var copyright> </span> </div></tmpl_if>
            <tmpl_if placePublication>
                <div style="text-align:left;"><strong><tmpl_var recInfo_place_lbl>: </strong> <span class='dataTxt' hl="true"><tmpl_var placePublication></span></div></tmpl_if>
            <tmpl_if namePublisher>
                <div style="text-align:left;"><strong><tmpl_var recInfo_publisher_lbl>: </strong> <span class='dataTxt' hl="true"><tmpl_var namePublisher> </span></div></tmpl_if>
            <tmpl_if datePublication>
              <div style="text-align:left;">  <strong><tmpl_var recInfo_pubDate_lbl>: </strong> <span class='dataTxt' hl="true"><tmpl_var datePublication> </span> <br></tmpl_if>
                           <tmpl_if page>
                <strong><tmpl_var recInfo_page_lbl>: </strong> <span class='dataTxt' hl="true"><tmpl_var page> </span> <br></tmpl_if>
              </div>
          <tmpl_unless isOPALSEbook>
            <tmpl_if uriList>
            <div style="text-align:left;">
              <strong>URI: </strong>
              <ul><tmpl_loop uriList>
                    <li style="text-align:left;">
                        <a href='<tmpl_var uri>' onclick="logOnlineAccess('<tmpl_var uri>');" 
                          <tmpl_if isEbook>isEbook=1</tmpl_if> target='URIwindows' rid=<tmpl_var rid>><span hl="true"
                        opl-tooltip="<tmpl_if uri_desc><tmpl_var uri_desc escape=html><tmpl_else><tmpl_var webLink2MoreInfo ></tmpl_if>"
                        ><tmpl_var uri></span></a>
                    </li>
                  </tmpl_loop>
              </ul>
              </div>
            </tmpl_if>
        </tmpl_unless>

        </div> 
<script>
    var uid=<tmpl_var uid default=0>;
    var rid=<tmpl_var rid default=0>;
    function logOnlineAccess(url){
        var param={op:'logOnlineAcces',uid:uid,rid:rid,url:url};
        $.post("/bin/ajax/report/collection", param, function(rs){
            });
     }
      // Function to process GBS info and update the dom.
      function ProcessGBSBookInfo(booksInfo) {
        for (isbn in booksInfo) {
         var element = document.getElementById(isbn);
         var bookInfo = booksInfo[isbn];
         if (bookInfo) {
          element.href = bookInfo.preview_url;
          if (bookInfo.preview == "full" ||
              bookInfo.preview == "partial") {
            element.style.display = '';
          }
         }
       }
     }
    $(function() {
    $( document ).tooltip(
    {      position: {
        my: "center bottom-15",
        at: "center top",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }}
    }
    );
  });
</script>
<tmpl_if showGooglePreview>
<script src="//books.google.com/books?jscmd=viewapi&bibkeys=<tmpl_var isbn_first>&callback=ProcessGBSBookInfo"></script>
 </tmpl_if>

