/* These styles should ensure a reasonable view of imported sup html. 
 For a 'better' view have to use javascript (cif_sup.js) on page load to manipulate the
 sup sections - e.g. to add dynamic section display and to group sections into
 text/datablocks/extra tables (simply cant do this with html that wasnt designed for this purpose)
 
 Assumes the imported sup html is within a div with id #sup_imported
 and with class name of sup_datareport (current Acta E as well as new category) or sup_rescomm (new Acta E + Acta C) 
 combined with sup_e or sup_c for journal:
 e.g. 
  <div id="sup_imported" class="sup_datareport sup_e"> - for current Acta E AND new Acta E data reports
  <div id="sup_imported" class="sup_rescomm sup_e"> - for new Acta E research communications
  <div id="sup_imported" class="sup_rescomm sup_c"> - for Acta C (all Acta C currently treated as research comms)
 
*/

/* never display: */
#sup_imported div.contentslist,
#sup_imported div.synopsis,
#sup_imported div.abstract,
#sup_imported div.relatedliterature,
#sup_imported div.schemes,
#sup_imported div.acknowledgements,
#sup_imported div.references,
#sup_imported div.publreferences,
#sup_imported div.computingdetails,
#sup_imported div.tablewrapcrystaldatashort,
#sup_imported div.tablewrapcrystaldatashort,
#sup_imported div.tablewrapdatacollectionshort,
#sup_imported div.tablewraprefinementdatashort,
#sup_imported div.tablewrapgeomshort,
#sup_imported div.tablewraphbondsshort,
#sup_imported div.tablewrapexptl,
#sup_imported div.tablewrapxtablepubl,
#sup_imported .actac_oldstyle {
  display:none;
}
#sup_imported .datablock999 {
  display:none;
}
#sup_imported .toplink, #sup_imported a[name] {
  display:none;
}
/* might display - but hide initially: */
#sup_imported div.comment,
#sup_imported div.experimental,
#sup_imported div.refinement,
#sup_imported div.publbody,
#sup_imported div.figures {
  display:none;
}

/* now display depending on jnl etc */
#sup_imported.sup_datareport.sup_e div.comment,
#sup_imported.sup_datareport.sup_e div.experimental,
#sup_imported.sup_datareport.sup_e div.refinement,
#sup_imported.sup_datareport.sup_e div.publbody,
#sup_imported.sup_datareport.sup_e div.figures {
  display:block;
}

#sup_imported div[class^='datablock'] {
  margin:0;
  margin-top:1em;
  padding:.5em;
  
}

/* text sections */
#sup_imported.sup_datareport.sup_e div.comment,
#sup_imported.sup_datareport.sup_e div.experimental,
#sup_imported.sup_datareport.sup_e div.refinement,
#sup_imported.sup_datareport.sup_e div.bodysection,
#sup_imported.sup_datareport.sup_e div.figures {
  position:relative;
  width:auto;
  background:#efefef;
  border:1px solid #efefef;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 5px;  
  -khtml-border-radius: 5px;
  margin:0;
  padding:.5em;
  padding-top:0;
}

#sup_imported div.figures div.heading2 {
  display:none;
}

/* tables */
#sup_imported table.tabledata, #sup_imported table.noborder { 
  width: 99%;
  margin-left:0em;
  table-layout:auto!important;
}

#sup_imported table.tabledata td {
  padding:0;
  padding-left:.5em;
  padding-right:.5em;
 
}
/* table wrappers - exptl sections and figs */
#sup_imported div.specialdetails,
#sup_imported div.tablewrapcrystaldatalong, #sup_imported div.tablewrapdatacollectionlong, #sup_imported div.tablewraprefinementdatalong,
#sup_imported div.tablewrapcrystaldatashort, #sup_imported div.tablewrapdatacollectionshort, #sup_imported div.tablewraprefinementdatashort {
  position:relative;
  width:auto;
  overflow-x:auto;
  background:#efefef;
  border:1px solid #aaa;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 5px;  
  -khtml-border-radius: 5px;
  margin:0;
  margin-right:.5em;
  margin-top:1em;
  padding:.5em;
  
}
#sup_imported div.specialdetails td,
#sup_imported div.tablewrapcrystaldatalong td, #sup_imported div.tablewrapdatacollectionlong td, #sup_imported div.tablewraprefinementdatalong td,
#sup_imported div.tablewrapcrystaldatashort td, #sup_imported div.tablewrapdatacollectionshort td, #sup_imported div.tablewraprefinementdatashort td {
  min-width:14em;
  background:#ffffff;
  border:1px solid #efefef;
}

#sup_imported div.figures {
  margin-bottom:1em;
}
#sup_imported div.figures td {
  background:#efefef;
  border:3px solid #efefef;
}

/* tables wrappers - geom tables */
#sup_imported div.tablewrapgeomshort, #sup_imported div.tablewraphbondsshort, 
#sup_imported div.tablewrapcoords, #sup_imported div.tablewrapadps, 
#sup_imported div.tablewrapgeomlong, #sup_imported div.tablewraphbondslong, 
#sup_imported div.tablewrapexptl, #sup_imported div.tablewrapxtable {
  position:relative;
  width:auto;  
  overflow-x:auto;
  border:1px solid #aaa;
  background:#efefef;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 5px;  
  -khtml-border-radius: 5px;
  margin:0;
  margin-right:.5em;
  margin-top:1em;
  padding:.5em;
   
}

#sup_imported div.tablewrapxtable {
  margin-right:1em;
  margin-left:.5em;
}

#sup_imported div.tablewrapgeomshort td, #sup_imported div.tablewraphbondsshort td,
#sup_imported div.tablewrapcoords td, #sup_imported div.tablewrapadps td,
#sup_imported div.tablewrapgeomlong td, #sup_imported div.tablewraphbondslong td,
#sup_imported div.tablewrapexptl td, #sup_imported div.tablewrapxtable td {
  min-height:1em;
  min-width:6em;
  background:#ffffff;
  border:1px solid #efefef;
}



@media only screen and (max-width: 600px) { 
  #sup_imported div.tablewrapgeomshort, #sup_imported div.tablewraphbondsshort, 
  #sup_imported div.tablewrapcoords, #sup_imported div.tablewrapadps, 
  #sup_imported div.tablewrapgeomlong, #sup_imported div.tablewraphbondslong, 
  #sup_imported div.tablewrapexptl, #sup_imported div.tablewrapxtable {
    padding-left:.5em;
    -webkit-overflow-scrolling: touch;
  }
  #sup_imported div.tablewrapgeomshort td, #sup_imported div.tablewraphbondsshort td,
  #sup_imported div.tablewrapcoords td, #sup_imported div.tablewrapadps td,
  #sup_imported div.tablewrapgeomlong td, #sup_imported div.tablewraphbondslong td {
    white-space: nowrap; 
  }
  #sup_imported div.tablewrapcrystaldatashort, #sup_imported div.tablewrapdatacollectionshort, #sup_imported div.tablewraprefinementdatashort, 
  #sup_imported div.tablewrapcrystaldatalong, #sup_imported div.tablewrapdatacollectionlong, #sup_imported div.tablewraprefinementdatalong {
    -webkit-overflow-scrolling: touch;
  }
  #sup_imported table.tabledata { 
   -webkit-overflow-scrolling: touch;
  }
}

/* headings etc */
#sup_imported .heading1, #sup_imported .heading2, #sup_imported .heading3, #sup_imported .heading4 {
  color:#666;
  font-weight:bold; 
  line-height:1.5em;
}
#sup_imported .heading1 {
  font-size:110%;
}
#sup_imported .heading2 + p:empty, #sup_imported .heading3 + p:empty {
  display:none;
}
#sup_imported .heading4 {
  display:inline;
}
#sup_imported .heading4 + p {
  display:inline;
  margin-left:1em;
}

#sup_imported div.specialdetails b {
  color:#666;
}

#sup_imported span.section_number {
  display:inline!important;
}

/* images */
#sup_imported div.figures img {
    -moz-box-shadow: 3px 3px 10px #aaa; /*x-offset y-offset radius colour */
    -webkit-box-shadow: 3px 3px 10px #aaa;
    box-shadow: 3px 3px 10px #aaa;
    border:0;
  
}

/* if using javascript to reformat: */
#sup_imported {
  display:none;
}