/*************************************************************************************************************/
@font-face {
  font-family: 'ColaLig';
  src: url('fonts/colaborate_light.eot');
  src: local('☺'),
  url('fonts/colaborate_light.woff') format('woff'),
  url('fonts/colaborate_light.ttf') format('truetype'),
  url('fonts/colaborate_light.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

  /*todo eliminare sta roba */
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
pre, a, big, code, em, img, small, strong, sub, sup, center, ol, ul, li, fieldset, form, label, legend, table, tr, th, td, footer, header, menu, nav, section { /*b, u, i, */
  margin: 0;
  padding: 0;
  border: 0;
  font-family:ColaLig, basic, serif;
  font-size:13px;
  color: #58595B;
  vertical-align: baseline;
}

body { background: url("") repeat-y scroll center center #EFEFEF; }
 /*  body,
  html {
    position: fixed;
  }*/
form { margin:0; }

a:link {
  color: #003366;
  text-decoration: none;
}

a:visited{
  color: #003366;
}
a:hover {
  color: #58595B;
  text-decoration: underline;
}

#fo h1, #fo h2, #fo h3 { color: #003366; }

textarea { resize: none; }

  /************************************************************************************/
  /* TOP */
#fo #topHome {
  top: 0px;
  height: 70px;
  position: absolute;
  width: 100%;

}

#fo #top {
  height: 70px;
  margin-left: auto;
  margin-right: auto;
  width: 940px;
}

#fo #top img {
  padding-left:10px;
  padding-top: 5px;
}

#fo #horizontalMenuHome{
  top: 70px;
  position: absolute;
  z-index: 10;
  right: 50%;
}

#fo #horizontalMenuHomeIn{
  position: relative;
  right: -50%;
}

#fo #horizontalMenu {
  position: relative;
  z-index: 25;
  margin-left: auto;
  margin-right: auto;
  width: 940px;
}

#fo #boxIntroText  { position: absolute; }
#fo #boxIntroText p {
  color: #003366;
  margin-top: -25px;
  margin-left: 200px;
  font-size:22px;
  font-weight: bolder;
}

  /************************************************************************************/
  /*LANGUAGE*/
#fo #langContainer{
  float: right;
  padding-right: 10px  ;
  text-transform: uppercase;
  vertical-align: baseline;
}

#fo .areaFlags a, #fo .areaFlags a:hover {
  font:12px Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  padding: 2px;
}

#fo .areaFlags a:hover { text-decoration: underline; }

#fo .activeLanguage{
  font:12px Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: bold;
}

#fo .activeLanguage, #fo .areaFlags  {
  font:12px Arial, Helvetica, sans-serif;
  padding: 5px;
  margin: 5px;
  font-weight: bold;
}

#fo .activeLanguage, #fo .areaFlags a:hover{
  color: #58595B;
  text-decoration: underline;
}

  /************************************************************************************/
  /* AREA CENTRALE CONTENUTI */
  /* GOOGLE MAP*/
#fo #mapContainer {
  top:70px;
  width: 100%;
  position: absolute;
}
#fo .legendaMap {
  background-color: white;
  border: 1px solid #D4D4D4;
  border-radius: 6px 6px 6px 6px;
  box-shadow: #666 0 0 10px;
  -moz-box-shadow: #666 0 0 10px;
  -webkit-box-shadow: #666 0 0 10px;
  -ms-box-shadow: #666 0 0 10px;
  width: 200px;
  padding: 15px;
  position: absolute;
  top: 10px;
  right: 10px;
}

#fo .legendaItem{
  margin-bottom: 10px;
}

  /* modifica dei testi presenti nella GoogleMap */
#fo #map_canvas .gmnoprint div, #fo #map_canvas span   { font-size: 14px !important; }
#fo #map_canvas .gmnoprint, #fo #map_canvas span { font-size: 8px !important; }
#fo #map_canvas .customGmnoprint span { font-size: 12px !important; }

#fo #contentHome {
  position:absolute;
  top:750px;
  right: 50%;
}

#fo #contentContainer {
  position: relative;
  right: -50%;
}

  /* end template home */
#fo #content, #fo #contentHome {
  clear: both;
  height: auto !important;
  min-height: 450px;
  width: 940px ;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 0 0 0;
}

#fo #ww4_printFilter { padding-bottom: 20px; }

  /* LIST MODE */
#fo #docList { margin-top: 40px; }
#fo #docList .listEl { margin-bottom: 25px; }

#fo #docList .firstDoc {
  padding-bottom: 30px;
  height: 100%;
}

#fo #docList .borderBottom {
  border-bottom: 1px dotted #58595B;
  margin-bottom: 10px;
}

#fo .buttonMore {
  float: right;
  padding-bottom: 30px;
}

#fo #docList .imgThumbExpanded img {  max-height: 100px; }
#fo #docList .imgThumb img { max-height: 70px; }
#fo #docList .imgThumb {
  float:left;
  width: 90px;
  height: 80px;
  margin: 0 10px 0 0;
}

#fo #docList .mb_video {
  display:block;
  margin-top: 30px;
  padding:0 0 0 50px;
}

  /* SHOP LIST */
#fo .shopWrapper {
  padding-top: 30px;
}

#fo .shopWrapper h1 {
  padding-bottom: 30px;
}

#fo .shopWrapper .shopListEl {
  min-height: 150px;
  width: 430px;
}

#fo .shopWrapper .shopFloat{
  float: left;
  margin-right: 15px;
}

#fo .shopWrapper .filesContainer {
  display: inline-table;
  width: 90%;
}

#fo .shopWrapper .filesContainer .singleFile {
  padding: 30px;
}

#fo .tableRow {
  width: 100%;
  display: table-row;
}

#fo .tableCell {
  padding-top: 30px;
  display: table-cell;
  vertical-align: middle;
}

#fo .tableCell img{
  display: block;
  margin-left: auto;
  margin-right: auto
}

#fo .shopWrapper .filesContainer .singleFile .singleFileTitle {
  width: 100%;
  padding-top: 5px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#fo .shopWrapper .seeAlso {
  margin-bottom: 20px;
  color: #58595B;
  font-size: 12px;
  float: right;
  margin-top: -40px
}

#fo .shopWrapper .thumbImg {
  border: 5px solid #E5E5E5;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 10px;
}

  /*  PAGINATORE */
#fo #content .fo_paginator_div { width: 940px; }

#fo #content .fo_paginator {
  margin-left: auto;
  margin-right: auto;
}

#fo .fo_paginator_numbers { vertical-align: middle; }

#fo .fo_paginator_selected {
  font-size: 13px;
  color: #58595B;
}

#fo .fo_paginator img {
  width: 20px;
  height: 20px;
}

#fo .fo_paginator_next {
  background-image: url(/applications/webwork/site_smallcodes/media/next.png);
  background-repeat: no-repeat;
  padding-right: 2px;
}

#fo .fo_paginator_prev {
  background-image: url(/applications/webwork/site_smallcodes/media/prev.png);
  background-repeat: no-repeat;
  padding-right: 2px;
}

#fo .fo_paginator_first {
  background-image: url(/applications/webwork/site_smallcodes/media/first.png);
  background-repeat: no-repeat;
  padding-right: 2px;
}

#fo .fo_paginator_last {
  background-image: url(/applications/webwork/site_smallcodes/media/last.png);
  background-repeat: no-repeat;
}

  /*  EDIT MODE */
#fo #ww4_printFilter p, #fo #docList p { padding-top: 10px; }

#fo #ww4_printFilter .docTools {
  float: right;
  margin-top: -40px;
  margin-right: 10px;
}

#fo #content .pageTitle {
  font-size:15px;
  margin-bottom: 10px;
}

#fo #content .docTitle, #fo #content .docTitle a {
  margin-bottom: 10px;
  color: #003366;
}

#fo #docList .summaryTitle {
  font-style: italic;
  font-size: 12px;
}

#fo .text {
  margin-top: 25px;
  margin-left: 10px;
  font:13px;
  float: left;
  width: 100%;
}

  /*SINGLE FILES*/
#fo #ww4_printFilter .singleFilesContainer, #fo #docList .singleFilesContainer { clear: both; }
#fo #ww4_printFilter .singleDoc, #fo #docList .singleDoc { padding: 15px 20px 0 0; }
#fo #ww4_printFilter .singleDoc span a, #fo #ww4_printFilter .singleDoc .imgDida, #fo #docList .singleDoc span a, #fo #docList .singleDoc .imgDida {
  color: #003366;
  padding-left:5px;
  font-size:12px;
  vertical-align: top;
}

#fo #ww4_printFilter .imgThumb img, #fo #docList .imgThumbExpanded img {
  float: left;
  border: 1px solid #DEDEDE;
  margin: 0 5px 3px 0;
  padding: 4px;
  width: 100px;
}

#fo #ww4_printFilter .imgHome img {
  width: 200px;
}

#fo #ww4_printFilter .imgThumb, #fo #docList .imgThumbExpanded {
  width: 100%;
  margin-bottom:10px;
}

#fo #ww4_printFilter .singleDoc .banner .imgDida, #fo #docList .singleDoc .banner .imgDida  { font-weight: bold; }
#fo #ww4_printFilter .singleDoc .banner .imgDida p, #fo #docList .singleDoc .banner .imgDida p  { font-weight: normal; padding-left: 120px;}

#fo div#imgDisplay {
  background-color: #58595B;
  border: 1px solid #D4D4D4;
  box-shadow: #666 0 0 10px;
  -moz-box-shadow: #666 0 0 10px;
  -webkit-box-shadow: #666 0 0 10px;
  -ms-box-shadow: #666 0 0 10px;
}

#fo .imgDescription {
  color: #fff;
  text-align: center;
  padding: 4px 0;
  font-size: 12px;
}

#fo div#imgDisplay .imgDescription {
  padding: 4px;
  font-size: 11px;
}

#fo .closeGallery {
  position:absolute;
  top:5px;
  right:5px;
  cursor:pointer;
}

  /* DOCUMENT CHILDREN */
#fo .childrenList  { clear: both; }
#fo #docList .childrenList  { margin-top: 140px; }

  /*LINK*/
#fo #ww4_printFilter #dynamicLink li,  #fo #linksContainer li, #fo #docList #dynamicLink li a{
  background-image: url(/applications/webwork/site_smallcodes/media/arrowRight.png);
  background-repeat: no-repeat;
  background-position: left center;
  text-decoration: none;
  list-style: none outside none;
  margin-top: 30px;
  padding-left: 30px;
}

#fo #docList #dynamicLink li {
  list-style: none outside none;
  padding-top: 20px;
}

#fo #content .customImage {
  min-height: 450px;
  background-repeat: no-repeat;
}

#fo #links  { padding-bottom: 50px; }
#fo #links td { padding-bottom: 20px; }

#fo #linksContainer { margin-top: 25px; }
#fo #linksContainer .pimpa {
  margin-top: 180px;
  margin-left: 40px;
  height: 350px;
}

#fo #linksContainer li { margin-top: 0; }
#fo #ww4_printFilter #dynamicLink img { height: 40px; }


  /* FLOATING IMAGES LINK */
#fo #floatingLinksContainer {
  background: none repeat scroll 0 0 #C7C8C9;
  border-radius: 5px 5px 5px 5px;
  margin-top: 25px;
  margin-bottom: 20px;
  padding: 5px;
}

#fo .box_link {
  background: none repeat scroll 0 0 white;
  border-radius: 5px 5px 5px 5px;
  padding: 5px;
  margin: 10px;
  float: left;
  /* altezza uniforme per il box con immagine */
  min-height: 160px;
}

#fo .box_link span { font-size: 11px; }
#fo .box_link img { max-width: 450px; }

#fo .clearfix:after { clear: both; }

#fo .clearfix:before, #fo .clearfix:after {
  content: "";
  display: table;
}

#fo .contact {
  padding-top: 50px;
  border: 0;
}

  /*********************** IMAGE GALLERY ********************************/
#fo #galleryThumbs { margin-top: 30px; }

#fo .scrollGalNumber {
  position:relative;
  z-index:100;
  color:white;
  font-family:sans-serif;
  font-size:15px;
  font-weight:bold;
  margin-top:-20px;
  margin-right: 105px;
  padding-left: 5px;
  background-color: #58595B;
  opacity:1;
}

#fo #scrollArea{ margin-top: 10px; }

#fo .gallImageSingleImage .gallImageTitle{
  font-size: 14px;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 50px;
  text-align: center;
}

  /************************************************************************************/
  /** MENU  **/
#fo #horizMenuContainer {
  width:940px;
}

#fo .menuheader {
  min-height:51px;
  position: relative;
  z-index: 30;
}

#fo .menu-main {
  float: left;
  margin-top: 25px;
  text-transform: uppercase ;
  padding-right: 10px;
}

#fo .menu {
  font: xnormal Georgia, Arial;
  min-height: 20px;
  height: auto;
  margin-bottom: 4px;
}

#fo .menu * {
  line-height: 14px;
  z-index: 1000
}

#fo .menu .button {
  background: none repeat scroll 0 0 #F9F8F5;
  border: 1px solid #D2CECA;
  border-radius: 6px 6px 6px 6px;
  font-size: 16px;
  padding: 5px;
  -moz-box-shadow: inset 1px -1px 1px #A5A5A5;
  -webkit-box-shadow: inset -1px 1px 1px #A5A5A5;
  box-shadow: inset 1px -1px 1px #A5A5A5;
}

#fo .menu h2 a.active, #fo .menu h2 a:hover{
  -moz-box-shadow: -1px -1px 1px #A5A5A5;
  -webkit-box-shadow: -1px -1px 1px #A5A5A5;
  box-shadow: -1px -1px 1px #A5A5A5;

  border-bottom: 1px solid #D9DDE0;
  border-right: 1px solid #D9DDE0;
}

#fo .menu h2 a {
  background: none repeat scroll 0 0 #EFEFEF !important;
  border-radius: 6px 6px 6px 6px !important;
  font-size: 16px !important;
  color: #003366;
  height: 20px;
  margin: 0 20px 0 0;
  text-align:center;
  text-decoration: none;
}

#fo .menu>li {
  float: left;
  height: 14px;
  list-style-type: none;
}

#fo .subMenu { margin:20px 0 30px 0; }
#fo .menuSeparator { border: 1px dotted #003366; }
#fo .subMenu .button {
  font-size: 12px !important;
  padding: 4px !important;
}

  /************************************************************************************/
  /* FORM*/
#fo .formContainer {
  background-color: #C7C8C9;

  color: #003366;
  width: 550px;
  padding: 10px 35px 35px 30px;
  margin-bottom: 30px;
  margin-left: 150px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-shadow: 2px 2px 3px #A7A9AA;
}

#fo .formContainer .mailtext { font-size: 16px; }

#fo #form {
  font-size: 12px;
  line-height: 15px;
}

#fo #form td { padding-top: 10px; }
#fo #form input[type=text], #fo #form textarea {
  border: 1px solid #BBB4AC;
  color: #666666;
  font-size: 14px;
  padding: 4px;
  text-align: left;
  width:100%
}

#fo form .formButton {
  min-width: 50px;
  position: relative;
  padding: 5px 10px;
  border: 2px solid #fff;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  background-color: #003366;
}

#fo form .button { cursor: pointer }
#fo form .button:hover { text-decoration: none }

  /*END-FORM*/
  /************************************************************************************/
  /*FOOTER*/
#fo #footerx {
  clear: both;
  padding: 10px 0;
  width: 940px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #003366;
}

#fo #footerx a {
  color: #003366;
  font-size:16px;
  font-weight: normal;
}
#fo #footerx a:hover, #fo #footerx a:active { color: #58595B }

#fo #footerx p, #fo #footerx li, #fo #footerx a {
  margin-bottom: 4px;
  text-decoration: none;
}

#fo .footerContainer {
  width:33%;
  float: left;
  margin-bottom: 20px;
}

#fo .socialTool{
  float: left;
  padding: 5px 0 15px 5px;
}
#fo .socialTool a img{ width: 25px; }

#fo .copyright .copyTitle{ font-weight: bold; }

#fo .copyright div {
  font-size:16px;
  line-height: 20px;
}

#fo .copyright {
  clear: both;
  padding-right:30px;
}
  /*END-FOOTER*/

  /*SITEMAP*/
#fo #siteMapContainer{ text-transform: lowercase; }

#fo #siteMap .nodeMapWrapper {
  float:left;
  margin-right: 15px;
}

#fo #siteMap .itemsMapWrapper{ margin-left: 10px; }

#fo #siteMap dt.nodeMap{
  font-size: 16px;
}

#fo #siteMap .nodeMap, #fo #siteMap .nodeMap a {

  font-weight: bold;
}

#fo #siteMap li.itemsMap a { color: #003366; }

#fo #siteMap li { list-style: none; }
  /*END-SITEMAP*/


  /****************** IMAGEPLUS **********************************************/
#fo .iplus_frame_table {
  border: 0px solid #fff;
  width:100%;
} 

 #fo .imageContainer{
     /*border: 1px red solid;*/ 
    vertical-align: middle;
     margin-top: 1px;  
  }
#fo table.iplus_frame_table td{ border-right: 1px solid #DDDDDD; }

#fo .iplus_spanImg {
  border:0px #0b559b solid;
  padding-top: 5px;
  vertical-align: baseline;
  cursor:pointer;
}
#fo .iplus_spanImg img {
  width: 10px;
  border:0;
  display:none ;

}

#fo .iplus_fileContainer {
  width:100%;
  background-color:#E0E0E0;
  margin-bottom:10px;
  width:100%;
  margin-bottom:10px;
}

#fo .iplus_divFileWrapper {
  position:absolute;
  -moz-box-shadow: 10px  10px 5px #B2B1B1;
  -webkit-box-shadow:  10px  10px 5px #B2B1B1;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#B2B1B1', Direction=135, Strength=10);
  box-shadow: 10px 10px 5px #E0E0E0;
  background-color: #E0E0E0;
  border:1px #6c6d6d solid;
  border-radius: 6px;
}

#fo table.iplus_mediaTable {
  margin-top: 0px!important;
  border: 0px;
  padding: 0px;
  text-align: center;
}

#fo table .iplus_mediaTableTop {
  font-size: 0.9em;
  text-align:right;
  height:10px;
}

#fo table .iplus_mediaTableDown{
  height:25px;
  min-height:25px;
  width:170px;
  min-width:170px;
}

#fo #iplus_popupMedia {
  border: 1px solid #000000;
  height:1px;
  position:absolute;
}

#fo .iplus_fileTitle,#fo .iplus_filedescription {
  margin-top: 10px;
}

#fo .iplus_tabMediaFrame {
  display:inline-block;
  position:absolute;
  font-weight:bold;;
  font-size: 12px;;
  text-align:center;
  vertical-align:middle;
  /*opacity:0.2;
  filter:alpha(opacity=20); *//* For IE8 and earlier */
  z-index:0.2;
}

#fo .iplus_div_wrapper {
  display:inline-block;
  position:absolute;
  font-weight:bold;;
  font-size: 12px;;
  text-align:center;
  vertical-align:middle;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  z-index:0.2;
}


  /****************** READ-ALONGS **********************************************/
#fo .ra_header {
  margin: 20px auto 0;
  font-size:13px;
  /*width: 500px;*/
  padding: 10px;
  text-align: center;
}
#fo .ra_content {

  font-size:13px;
}

#fo .ra_container {
  width: 100%;
  /*margin: 0 auto 20px;*/
  /*margin-right: auto;*/
  /*margin-left: auto;*/
  /*background: #fff;*/
  /*border: solid 1px #808080;*/
  /*border-radius: 5px;*/
}

#fo .ra_container .ra_menu {
  /*background: #ddd;*/
  /*top: 15px;*/
  /*padding: 10px;*/
  position: relative;
  height: 30px;
  /*border: solid 1px #808080;*/

}

#fo .ra_container .ra_player {
  position: absolute;
  /*top: 10px;*/
  right: 10px;
  width: 200px;
}

#fo .ra_container .ra_content {

  padding-top: 5px;
  /* altezza quanto il testo */
  min-height: 100%;
  /*line-height: 1.4;*/
}

  /* words highlight */
#fo .ra_container .word-data { -x-background: #ffffee; }
#fo .ra_container .current-word {
  background: yellow;
  /*outline: solid 2px yellow;*/
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#fo .ra_container .aligned-word:hover {
  cursor: pointer;
  background: #FEFFDC;
}


  #mainCenter {
    float: left;
    width: 990px;
    min-height: 700px;
    vertical-align: middle;
    /*border: 1px #00ff00 solid;*/

  }

    /*
    .book_wrapper p,.ra_content, fo.description {
      font-size:18px;
      line-height: 16px;

      *//*margin:5px 5px 5px 15px;*//*
    }*/
  .book_wrapper {
    /*border:3px #ff0000 solid;*/
    padding-left: 35px;
    padding-top: 30px;
    width: 950px;

    /*margin:5px 5px 5px 15px;*/
  }

  .sj-book img {
    /*border:3px red solid;*/

    /*max-height: 651px;  */
    vertical-align: middle;
    /*margin:5px 5px 5px 15px;*/
  }

  .description {
    /*border:3px #ff0000 solid;*/
    padding: 10px;  
    margin: 5px;
    line-height: 20px;
    /*margin:5px 5px 5px 15px;*/
  }

  .ra_content {
    line-height: 15px;
    text-align:left;
    margin-left: 20px;
    margin-right: 20px;
  }
  .ra_content {
    text-align:justify;
  }

  .sj-book .b-counter {
    background: transparent none repeat scroll 0 0;
    border-top: 1px solid #ddd;
    bottom: 10px;
    box-shadow: 0 -1px 1px #fff;
    color: #222;
    display: block;
    font-size: 12px;
    height: 20px;
    margin-left: 40px;
    opacity: 0.8;
    padding: 5px 0 0;
    position: absolute;
    text-align: center;
    width: 80%;
  }

  #content {
    /*border: 1px #000000 solid;*/
    width: 100%;
    height: 100%;
  }
  #canvas {
    /*border: 1px #000000 solid;*/
    top: 0;
    width: 100%;
    height: 100%;
  }#book-zoom {
     /*border: 1px #000000 solid;*/
     top: 0;
     /*width: 100%;*/
     /*height: 100%;*/
   }
 




  /***************************************************************************************************************************************************************************************************************
  *
  * modifiche per maps
  *
  ***************************************************************************************************************************************************************************************************************/
  /* SCROLLGALLERY*/
#fo #image_gallery { float: left; }
#fo #absoluteURLs, #fo #absoluteURLs #image_gallery { width: 100%; }

#fo #absoluteURLs #image_gallery .image_gallery_table { width: 100% !important; }

#fo #image_gallery #galleryThumbs {
  position:relative;
  left:0;
  height:0
}
 
  #mainCenter {
    float: left;
    width: 990px;
    min-height: 700px;
    vertical-align: middle;
    /*border: 1px #00ff00 solid;*/

  }

    /*
    .book_wrapper p,.ra_content, fo.description {
      font-size:18px;
      line-height: 16px;

      *//*margin:5px 5px 5px 15px;*//*
    }*/
  .book_wrapper {
    /*border:3px #ff0000 solid;*/
    padding-left: 35px;
    padding-top: 30px;
    width: 950px;

    /*margin:5px 5px 5px 15px;*/
  }

  .sj-book img {
    /*border:3px red solid;*/

    max-height: 550px;
    vertical-align: middle;
    /*margin:5px 5px 5px 15px;*/
  }

  .description {
    /*border:3px #ff0000 solid;*/
    padding: 10px;
    margin: 5px;
    line-height: 20px;
    /*margin:5px 5px 5px 15px;*/
  }

  .sj-book p {
    line-height: 15px;
    text-align:left;
    margin-left: 20px;
    margin-right: 15px;
  }
  .ra_content p {
    text-align:justify;
    font-size: 13px;
  }

  .sj-book .b-counter {
    background: transparent none repeat scroll 0 0;
    border-top: 1px solid #ddd;
    bottom: 10px;
    box-shadow: 0 -1px 1px #fff;
    color: #222;
    display: block;
    font-size: 12px;
    height: 20px;
    margin-left: 40px;
    opacity: 0.8;
    padding: 5px 0 0;
    position: absolute;
    text-align: center;
    width: 80%;
  }

  #content {
    /*border: 1px #000000 solid;*/
    width: 100%;
    height: 100%;
  }
  #canvas {
    /*border: 1px #000000 solid;*/
    top: 0;
    width: 100%;
    height: 100%;
  }#book-zoom {
     /*border: 1px #000000 solid;*/
     top: 0;
     /*width: 100%;*/
     /*height: 100%;*/
   }
 
  @media (max-width: 1024px) {
   body, html {
    position: fixed;
    margin-left: 15px;
  }
  #slider-bar {
    position: relative;

  }
}