/* Notes to self - try to keep zero margins on block els - 
 * e.g. if something at the end of a page has a 1em margin and everything before it is position:fixed
 * the margin will appear at the top of the page!
 * Also percentage widths dont account for margins - 100% may mean screen width but offset by margins of containing divs!
 * If using html5 line-heights are inherited differently in html5 - so may need to tweak iustyle.css e.g.
   .jh_openaccesslogo {
  margin-top: -0.25em;
  }
 */

/* jnl colours */
.logocolours_a {
color:#6baadd;
background-color:#0451a0;
}
.logocolours_b {
color:#2b5629;
background-color:#679f29;
}
.logocolours_c {
color:#efa680;
background-color:#df3d01;
}
.logocolours_d {
color:#f7f5b6;
background-color:#f8cc00;
}
.logocolours_e {
color:#dda6cc;
background-color:#a42c78;
}
.logocolours_f {
color:#50b848;
background-color:#c4d931;
}
.logocolours_j {
color:#9a4724;
background-color:#e97905;
}
.logocolours_s {
color:#32669a;
background-color:#4890cd;
}
.logocolours_m {
color:#ffffff;
background-color:#990000;
}
.logocolours_u {
color:#ffffff;
background-color:#aaa;
}
.logocolours_x {
color:#ffffff;
background-color:#aaa;
}
.fore_a, .linkcolours_e a, .RandThumbs_a a {
  color:#003366;
}
.fore_b, .linkcolours_b a, .RandThumbs_b a {
  color:#263a15;
}
.fore_c, .linkcolours_c a, .RandThumbs_c a {
  color:#c30f00;
}
.fore_d, .linkcolours_d a, .RandThumbs_d a {
  color:#4d3f00;
}
.fore_e, .linkcolours_e a, .RandThumbs_e a {
  color:#401434;
}
.fore_f, .linkcolours_f a, .RandThumbs_f a {
  color:#1f481d;
}
.fore_j, .linkcolours_j a, .RandThumbs_j a {
  color:#43260a;
}
.fore_s, .linkcolours_s a, .RandThumbs_s a {
  color:#162d41;
}
.fore_m, .linkcolours_m a, .RandThumbs_m a {
  color:#990000;
}
.fore_u, .linkcolours_u a, .RandThumbs_u a {
  color:#990000;
}
.fore_x, .linkcolours_x a, .RandThumbs_x a {
  color:#990000;
}

.grad_a {
  background:#0451a0;
  background: -webkit-gradient(linear, left top, left bottom, from(#0451a0), to(#3674b3));
  background: -webkit-linear-gradient(top, #0451a0, #3674b3); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #0451a0, #3674b3); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #0451a0, #3674b3); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #0451a0, #3674b3); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #0451a0, #3674b3);
  color:#fff;
}
.grad_b {
  background:#679f29;
  background: -webkit-gradient(linear, left top, left bottom, from(#679f29), to(#85b254));
  background: -webkit-linear-gradient(top, #679f29, #85b254); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #679f29, #85b254); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #679f29, #85b254); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #679f29, #85b254); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #679f29, #85b254);
  color:#fff;
}
.grad_c {
  background:#df3d01;
  background: -webkit-gradient(linear, left top, left bottom, from(#df3d01), to(#e56434));
  background: -webkit-linear-gradient(top, #df3d01, #e56434); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #df3d01, #e56434); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #df3d01, #e56434); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #df3d01, #e56434); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #df3d01, #e56434);
  color:#fff;
}
.grad_d {
  background:#f8cc00;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8cc00), to(#f8c44d));
  background: -webkit-linear-gradient(top, #f8cc00, #f8c44d); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #f8cc00, #f8c44d); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #f8cc00, #f8c44d); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #f8cc00, #f8c44d); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #f8cc00, #f8c44d);
  color:#fff;
}
.grad_e {
  background:#a42c78;
  background: -webkit-gradient(linear, left top, left bottom, from(#a42c78), to(#b65693));
  background: -webkit-linear-gradient(top, #a42c78, #b65693); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #a42c78, #b65693); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #a42c78, #b65693); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #a42c78, #b65693); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #a42c78, #b65693);
  color:#fff;
}
.grad_f {
  background:#c4d931;
  background: -webkit-gradient(linear, left top, left bottom, from(#c4d931), to(#d0e15a));
  background: -webkit-linear-gradient(top, #c4d931, #d0e15a); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #c4d931, #d0e15a); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #c4d931, #d0e15a); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #c4d931, #d0e15a); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #c4d931, #d0e15a);
  color:#fff;
}
.grad_j {
  background:#e97905;
  background: -webkit-gradient(linear, left top, left bottom, from(#e97905), to(#ed9437));
  background: -webkit-linear-gradient(top, #e97905, #ed9437); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #e97905, #ed9437); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #e97905, #ed9437); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #e97905, #ed9437); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #e97905, #ed9437);
  color:#fff;
}
.grad_s {
  background:#4890cd;
  background: -webkit-gradient(linear, left top, left bottom, from(#4890cd), to(#6da6d7));
  background: -webkit-linear-gradient(top, #4890cd, #6da6d7); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #4890cd, #6da6d7); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #4890cd, #6da6d7); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #4890cd, #6da6d7); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #4890cd, #6da6d7);
  color:#fff;
}
.grad_m {
  background:#990000;
  background: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#ad3333));
  background: -webkit-linear-gradient(top, #990000, #ad3333); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #990000, #ad3333); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #990000, #ad3333); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #990000, #ad3333); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #990000, #ad3333);
  color:#fff;
}
.grad_u {
  background:#aaa;
  background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#bbb));
  background: -webkit-linear-gradient(top, #aaa, #bbb); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #aaa, #bbb); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #aaa, #bbb); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #aaa, #bbb); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #aaa, #bbb);
  color:#fff;
}
.grad_x {
  background:#aaa;
  background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#bbb));
  background: -webkit-linear-gradient(top, #aaa, #bbb); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #aaa, #bbb); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #aaa, #bbb); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #aaa, #bbb); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #aaa, #bbb);
  color:#fff;
}
.grad_grey {
background:#eee;
  background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#eee));
  background: -webkit-linear-gradient(top, #ccc, #eee); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #ccc, #eee); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #ccc, #eee); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #ccc, #eee); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #ccc, #eee);
}
.grad_grey_up {
background:#eee;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
  background: -webkit-linear-gradient(top, #eee, #ccc); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #eee, #ccc); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #eee, #ccc); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #eee, #ccc); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #eee, #ccc);
}
.grad_grey_to_white {
background:#eee;
  background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
  background: -webkit-linear-gradient(top, #ccc, #fff); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #ccc, #fff); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #ccc, #fff); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #ccc, #fff); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #ccc, #fff);
}
.back_mid_a {
  background-color: #cde5fe;
}
.back_light_a, .RandThumbs_a div.randthumbs_caption {
  background-color: #e6f2fe!important;
}
.back_hover_a:hover {
  background-color: #e6f2fe;
}
.back_mid_b {
  background-color: #e6f5d6;
}
.back_light_b, .RandThumbs_b div.randthumbs_caption {
  background-color: #f3faeb!important;
}
.back_hover_b:hover {
  background-color: #f3faeb;
}

.back_mid_c {
  background-color: #ffdacc;
}
.back_light_c, .RandThumbs_c div.randthumbs_caption {
  background-color: #ffece6!important;
}
.back_hover_c:hover {
  background-color: #ffece6;
}

.back_mid_d {
  background-color: #fff1b3;
}
.back_light_d, .RandThumbs_d div.randthumbs_caption {
  background-color: #fff6cc!important;
}
.back_hover_d:hover {
  background-color: #fff6cc;
}

.back_mid_e {
  background-color: #f4d7e9;
}
.back_light_e, .RandThumbs_e div.randthumbs_caption {
  background-color: #faebf4!important;
}
.back_hover_e:hover {
  background-color: #faebf4;
}

.back_mid_f {
  background-color: #f3f7d4;
}
.back_light_f, .RandThumbs_f div.randthumbs_caption {
  background-color: #f6f9e1!important;
}
.back_hover_f:hover {
  background-color: #f6f9e1;
}

.back_mid_j {
  background-color: #fee6cd;
}
.back_light_j, .RandThumbs_j div.randthumbs_caption {
  background-color: #fef2e6!important;
}
.back_hover_j:hover {
  background-color: #fef2e6;
}

.back_mid_s {
  background-color: #c3dbef;
}
.back_light_s, .RandThumbs_s div.randthumbs_caption {
  background-color: #dfecf6!important;
}
.back_hover_s:hover {
  background-color: #dfecf6;
}

.back_mid_m {
  background-color: #dddddd;
}
.back_light_m, .RandThumbs_m div.randthumbs_caption {
  background-color: #efefef!important;
}
.back_hover_m:hover {
  background-color: #efefef;
}

.back_mid_u {
  background-color: #ffffff;
}
.back_light_u, .RandThumbs_u div.randthumbs_caption {
  background-color: #ffffff;
}
.back_hover_u:hover {
  background-color: #eeeeee;
}

.back_mid_x {
  background-color: #ffffff;
}
.back_light_x, .RandThumbs_x div.randthumbs_caption {
  background-color: #ffffff;
}
.back_hover_x:hover {
  background-color: #eeeeee;
}

/* horizontal full-width toolbar incl. menus 
 defaults to white on grey */

.toolbar, .toolbar_menu {
  border:0;
  position:relative;
  font-size:10pt;
  line-height:120%;
  font-weight:600;
}
.toolbar a, .toolbar_menu a {
  text-decoration:none;
  color:#ffffff;
}
.toolbar_menu input {
  font-size:10pt;
  border:0;
}
.toolbar a:hover, .toolbar_menu a:hover {
  color:#ffffff;
}
.toolbar img {
  vertical-align:middle;
}

/* items on toolbar */
div.toolbar_item {

display:inline-block;
padding-right:1em;
padding-left:1em;
margin:0;
padding-bottom:0.3em;
padding-top:0.3em;
user-select:none;
-moz-user-select:none; 
}

div.toolbar_menu { 
  display:none;
  padding:1em;
  padding-top:.3em;
  margin:0;
  margin-top:.3em;
  z-index:1;
  position:absolute;
  margin-left:-1em;
}

@media only screen and (max-width: 600px) { 
  div.toolbar_item {
    padding-right:0;
  }
}

/* specific toolbars: */
#socialtoolbar {
  margin:0;
  clear:both;
  text-align:center;
  padding-top:1em;
  padding-bottom:.5em;
}

#socialtoolbar div.toolbar_item {
  padding-top:1px;
  padding-bottom:2px;
} 


/* adaptive stuff */
@media only screen and (max-width: 800px) {
  .toolbar_item.hideat800, .hideat800 {
    display:none;
  }
}
@media only screen and (max-width: 600px) {
  .toolbar_item.hideat600, .hideat600 {
    display:none;
  }
}
@media only screen and (max-width: 500px) { 
  .toolbar_item.hideat500, .hideat500 {
    display:none;
  }
}
@media only screen and (max-width: 400px) { 
  .toolbar_item.hideat400, .hideat400 {
    display:none;
  }
}
@media only screen and (max-width: 300px) { 
  .toolbar_item.hideat300, .hideat300 {
    display:none;
  }
}



/* tables */


table { /* default in iucr styles */
    border-collapse: collapse;
    border-spacing: 0px;
}
table.layout {
  width:auto;
}
table.layout, table.layout tbody td {
  margin:0;
  margin-left:0;
  margin-right:0;
  margin-top:0;
  margin-bottom:0;
  padding-left:0;
  padding-right:0;
  padding-top:0;
  padding-bottom:0;
  border:0;
  border-spacing:0;
  border-collapse:collapse;
}


/* borders */

.rounded {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}

.shadow {
    -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;
    
}
.shortshadow {
    -moz-box-shadow: 3px 3px 5px #aaa; /*x-offset y-offset radius colour */
    -webkit-box-shadow: 3px 3px 5px #aaa;
    box-shadow: 3px 3px 5px #aaa;  
}
.shortshadow {
    -moz-box-shadow: 3px 3px 5px #aaa; /*x-offset y-offset radius colour */
    -webkit-box-shadow: 3px 3px 5px #aaa;
    box-shadow: 3px 3px 5px #aaa;  
}

.noshadow {
    -moz-box-shadow: none; /*x-offset y-offset radius colour */
    -webkit-box-shadow: none;
    box-shadow: none;
    
}
.small_popup_border {
    border:1px solid #ccc;
    -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-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;  
}

/* forms */

::-moz-focus-inner {
  border: 0;
  outline:0;
  outline-style: none;
  -moz-outline-style:none;
}

form input,
form textarea, form select, input,
textarea, select {
  border: 1px solid #aaa;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}

form input,
form textarea, form select, input,
textarea, select, input:focus, input:hover,
textarea:focus, textarea:hover,
select:focus, select:hover, input:active,
textarea:active, select:active {
 -webkit-box-shadow: none;
 -moz-box-shadow:  none;
 box-shadow:  none;
 outline:0!important;
 outline-style:none!important;
 -moz-outline-style:none;
}

/* sepecific forms */

#footer_search input#fs_submit {
   height:1.75em;
   width:2em;
   padding:0;
   margin:0;
   font-size:150%;
    color: transparent;
    background-color: #eee;
    background-image: url(//publcif.iucr.org/widgets/images/magnifier_24.png);
    background-repeat: no-repeat;
    background-size: 1.2em;
    background-position: 50% 50%;
    
    border:1px solid #bbb;
}


#footer_search {
   padding:0;
   padding-left:.5em;
   padding-right:.5em;
   margin:0;
   clear:both;
   
}
#hd_search input, #footer_search input {
  background-color:white;
  position:relative;
  z-index:0;
  margin-top:.2em;
  font-family:inherit;
  font-size:100%;
  padding-top:1px;
  padding-bottom:1px;
}
#hd_go {
  padding-left:.5em;
  padding-right:.5em;
  padding-top:1px;
  padding-bottom:1px;
}
#hd_search label, #footer_search label {
   position:absolute;
   z-index:0;
   margin: 5px 0px 5px 5px;
   color: #666;
   
}
#hd_search label {
    left:.5em;
}
#footer_search td {
 text-align:left;
 vertical-align:top;
}
/* header links */
#header {
 position:relative;
 left:0;
 width:auto;
 margin:0;
}
#hd_top {
 position:relative;
} 
#hd_navigate {
 margin-top:0;
}
#hd_icon {
  display:inline-block;
  float:none;
}
#hd_right {
  
  position:static;
  float:none;
}
#hd_rightx {
   
  position: absolute;
  margin-top:.5em;
  margin-right:.5em;
  text-align:right;
right:0em;
top:0px;
  height: 8em;
}

#hd_mlink {
    position: absolute;
    top: .5em;
    right: .5em;
    white-space: nowrap;
}

#hd_search {

  position: absolute;
bottom: 0px;
right: 0em;
white-space: nowrap;
/*margin-bottom:1em;*/
}
.hd_blink {
  margin:0;
}



@media only screen and (max-width: 850px) { 
    #jpage_b .hd_jicon_subtitle  {
        display: none;
    }
}
@media only screen and (max-width: 500px) {
  .hd_blink {
  margin:0;
}
#hd_icon {
  margin-top:1em;
}
}
@media only screen and (max-width: 600px) {
.hd_blink {
  margin:0;
}
}
@media only screen and (max-width: 400px) {
  #jpage #hd_cjoi {
    display:none;
  }
   
  #hd_search {

margin-bottom:.5em;
margin-top:.5em;
}
#hd_search_form {
    float:left;
}

  #hd_mlink {
    position: relative;
    top: 0em;
    right: .5em;
    white-space: nowrap;
}
#hd_icon {
  margin-top:0em;
}
#hd_blink {
  margin:0;
}
}




#hd_cjoi, #hd_iucr, #hd_it, #hd_wdc {
    display: inline-block;
    vertical-align:middle;
    float: none;
    padding: 1px 4px; 
    margin-left:.5em;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    text-align: center;
    font-weight: bold;
    border: 1px solid transparent;
    font-size: 120%;
}
#hd_cjoi { 
padding: 0 0;
}
#hd_cjoi img {
  vertical-align:middle;
  padding:0;
  margin:0;
}
#hd_iucr {
    color: #B9141A;
    background-color: #C9CFD3;
}
#hd_it {
    background-color: #090;
    color: #FFF;
}
#hd_wdc {
    color: #FFF;
    background-color: #CCC;
}
/* copyright etc */

#footer_links {
  font-size:80%;
  text-align:center;
  margin:1em auto 0;
  width:95%;
}
#footer_links a {
  margin-right:1em;
  white-space:nowrap;
}

/* changes to iucr styles usually required for my pages */

/* no fixed header: */

#pagebody {
 margin-top:0;
}

#hd_navigatesmall {
  border:0;
  border-radius:0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -khtml-border-radius: 0;
  width:100%;
}

@media only screen and (max-width: 600px) {
  #hd_navigatesmall {
    width:100%;
  }
  
}
@media only screen and (max-width: 500px) {
  .hd_jicon_subtitle {
  display:none;
  }
}
/* anchors with names */

#article a[name], a[name] {
 padding-top: 0;
 margin-top: 0;
 display: inline;
}

 
 

/* side box designed for iucr pages - within div #side
 * which in turn is within #pagebody or jpage if no #pagebody
 */
.side_box_border {
  padding:0;
  border:1px solid #ccc;
  border-radius: 4px;
}
.side_box_titlebar {
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  background:#eee;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
  background: -webkit-linear-gradient(top, #eee, #ccc); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #eee, #ccc); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #eee, #ccc); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #eee, #ccc); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #eee, #ccc);
  margin:0;
  padding:.5em;
  color:#666666;
  font-weight:600;
}
.side_box_content {
  padding:1em;
}
.side_box_content h2 {
  margin-top:1em;
  margin-bottom:0;
}
.side_box_content p {
  margin-top:.5em;
}

/* 'div' buttons e.g.
 
<div class="pbl_button" onmouseup="...return false;" title="..." >
<img border="0" src="./images/cloud_24.png" />
</div>

<div class="pbl_textbutton" style="float:none;"><a href="javascript:void(null);" onclick="...return false;" title="...">
do something
</div>

<div class="pbl_uploadbutton" title="upload" >
<span><img border="0" src="http://publcif.iucr.org/widgets/images/upload_24.png"  /> Label </span>
<form method="post" enctype="multipart/form-data" action="..." target="...">
<input type="hidden" name="..." />
<input class="pbl_fileinput" name="..." type="file" onchange="this.parentNode..."  />
</form>
</div>

NB buttons float left by default
*/
div.pbl_button_wrapper { /* used when wanting to wrap with e,g, info boxes */
  position:relative;
  float:left;
}

div.pbl_uploadbutton, div.pbl_button, div.pbl_textbutton {
  text-align:center;
  position:relative;
  margin:1px;
  /*display:inline-block;*/
  vertical-align:middle;
  float:left;
  height:32px;
  width:32px;
  line-height:32px;
  border:1px solid #ccc;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  background-color:#eee;
  color:#666666;
  user-select:none;
  -moz-user-select:none; /*stops blinking curosr in text */
}
div.pbl_textbutton {
  width:auto;
  padding-left:.5em;
  padding-right:.5em;
}
div.pbl_uploadbutton:hover, div.pbl_button:hover, div.pbl_textbutton:hover {
  border:1px solid #aaa;
}
div.pbl_uploadbutton {
  overflow:hidden;
  width:auto;
  min-width:32px;
}
div.pbl_uploadbutton img, div.pbl_button img {
  vertical-align:middle;
  border:0;
}
div.pbl_uploadbutton span, .pbl_fileinput_label {
   position:relative;
   z-index:0;
   white-space:nowrap;
}
div.pbl_uploadbutton input[type="file"], input.pbl_fileinput {
  position:absolute;
  left:0px;
  top:0px;
  z-index:1;
  -moz-opb_pacity:0;
  filter:alpha(opacity: 0);
  opacity: 0;
  cursor:pointer;
}
div.pbl_button_group {
  float:left;
  position:relative;
}
div.pbl_button_help_left {
  text-align:left;
  position:relative;
  margin:1px;
 /* display:inline-block;*/
  vertical-align:middle;
  float:left;
  height:30px;
  display:none; 
  /*line-height:30px;*/
  clear:right;
  padding-left:1em;
}

/* 'checkbox' text input */
.pbl_tickbox {
  border:1px solid #aaa;
  width:14px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  color:transparent;
  text-indent: -1000em; /* hides the text */
  cursor:pointer;
}
.pbl_checked {
  background-image:url(//publcif.iucr.org/widgets/images/check_16.png);
  background-repeat:no-repeat;
  background-position:center;
}
.pbl_unchecked {
  background-image:none;
}
.pbl_tickLabel { 
  font-size: 10pt;
  text-align:left;
}
/*
div with wide left border to contain buttons, e.g.
<div class="pbl_toolborder" style="...extra styles..." >
  <div class="pbl_button"> ... 'img' button in the border ... </div>
  <div class="pbl_toolborder_content"> ... </div>
</div>

Or for more than one button:

<div class="pbl_toolborder" style="...extra styles..." >
  <div class="pbl_button_group">
    <div class="pbl_button"> ... 'img' button in the border ... </div>
    <div class="pbl_button"> ... 'img' button in the border ... </div>
  </div>
<div class="pbl_toolborder_content"> ... </div>
</div>

NB dimensions based on 32px buttons
-- see printcif for examples
*/
div.pbl_toolborder {
  border:1px solid #ddd;
  border-left:40px solid #ddd;
}
div.pbl_toolborder_content {
  position:relative;
  left:-30px;
  margin-left:30px;
  min-height:32px; /* will need to be number of buttons x32 */
}
div.pbl_toolborder div.pbl_button_group {
  width:36px;
}
div.pbl_toolborder div.pbl_button {
  left:-37px;
  margin:0;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
  background: -webkit-linear-gradient(top, #eee, #ccc); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #eee, #ccc); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #eee, #ccc); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #eee, #ccc); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #eee, #ccc);
}
#printcif_buttons div.pbl_uploadbutton, #printcif_buttons div.pbl_button, #printcif_buttons div.pbl_textbutton {
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
  background: -webkit-linear-gradient(top, #eee, #ccc); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #eee, #ccc); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #eee, #ccc); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #eee, #ccc); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #eee, #ccc);
}

div.pbl_toolborder_wide {
  border:1px solid #ddd;
  border-left:96px solid #ddd;
}
div.pbl_toolborder_content {
  position:relative;
  left:-30px;
  margin-left:30px;
  min-height:32px; /* will need to be number of buttons x32 */
}
div.pbl_toolborder_wide div.pbl_button_group {
  width:96px;
}
div.pbl_toolborder_wide div.pbl_button, div.pbl_toolborder_wide div.pbl_textbutton {
  left:-84px;
  margin:0;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
  background: -webkit-linear-gradient(top, #eee, #ccc); /* For Chrome and Safari */
  background:    -moz-linear-gradient(top, #eee, #ccc); /* For old Fx (3.6 to 15) */
  background:     -ms-linear-gradient(top, #eee, #ccc); /* For pre-releases of IE 10*/
  background:      -o-linear-gradient(top, #eee, #ccc); /* For old Opera (11.1 to 12.0) */
  background:         linear-gradient(top, #eee, #ccc);
}


/* page els - icons: */

div.iucr_jnls_icon {
  width:70px;
  height:70px;
  margin:1em;
  line-height:0;
}
div.iucr_jnls_icon div {
  float:left;
  margin:1px;
  line-height:0;
}
div.iucr_jnls_icon img {
  width:20px;
  height:20px;
}

/* page els - floating boxes */

.left_box {
 float:left; 
}
.right_box, .far_right_box {
 float:right; 
}
.far_right_box {
 text-align:right; 
}
@media only screen and (max-width: 600px) {
  .no_float_at_600 {
    float:none;
  }
  .far_right_box.no_float_at_600 {
    text-align:left;
  }
}
@media only screen and (max-width: 500px) {
  .no_float_at_500 {
    float:none;
  }
  .far_right_box.no_float_at_500 {
    text-align:left;
  }
}

.catchline_jnl_icon {
  width:40px;
  margin-right:1em;
  margin-bottom:1em;
}
@media only screen and (max-width: 500px) {
  .catchline_jnl_icon {
  width:40px;
  }
}
.catchline_container {
  padding-left:0;
}
@media only screen and (max-width: 300px) {
  .catchline_container {
  padding-left:.5em;
  }
}
.randthumbs_explore {
  position:relative;
  margin:0;
  padding:1em;
  padding-top:1.5em;
  
}
@media only screen and (max-width: 400px) {
  .randthumbs_explore {
  padding:.5em;
  }
}

div.table_wrap {
  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;
  padding:1em;
  clear:both;

  
}
div.table_wrap table {
  position:relative;
  border-collapse:separate;
  border-spacing:2px;
}
div.table_wrap td {
  background:#ffffff;
}

/* following changes needed when the #main div contains e.g. a wide table - 
 * if it floats without a width (i.e. auto) then it can be wider than the viewport 
 * so set float to none...
 */
@media (max-width: 800px) {#side { float: none; width: auto; clear: both; padding-left: 1em; padding-right: 1em;}}
@media (max-width: 768px) {#side { float: none; width: auto; clear: both; margin-left:0; margin-right:0;padding-left: 1em; padding-right: 1em;}}
@media (max-width: 400px) {#side { float: none; width: auto; clear: both; margin-left:0; margin-right:0;padding-left: .5em; padding-right: .5em;}}
@media only screen and (max-width: 800px) {
  #main {
  width:auto;
  float:none;
  padding-top:.5em;
  }
  #pagebody {
    clear:both;
    padding-top:.5em;
  }
  #hd_navigatesmall {
    margin-bottom:0;
  }
}
@media only screen and (max-width: 768px) {
  #main {
  width:auto;
  float:none;
  padding-top:.5em;
  }
  #pagebody {
    clear:both;
    padding-top:.5em;
  }
  #hd_navigatesmall {
    margin-bottom:0;
  }
}




/* char map */

.charMapWidget, .TexWidget, .TexWidgetEd, .hrefWidget {
-moz-box-shadow: 3px 3px 5px #aaa;
-webkit-box-shadow: 3px 3px 5px #aaa;
box-shadow: 3px 3px 5px #aaa;

background-color: #efefef; /*#f7f7f8;*/

}

table.charMapWidget {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

table.charmap {
  border:0;
  text-align:center;
  padding:0;
  border-spacing:1px; 
  margin:0;
}
td.charmap, td.charmap a {
  width:18px;
  height:18px;
  color:#000; 
  border:0;
  text-align:center;
  font-size:12px;
  vertical-align:middle;
  line-height: 18px;
  font-family:'Arial Unicode MS',Helvetica,sans-serif;
  
  
}
/*
td.charmap:hover {
cursor:pointer;
font-size:16px;
  font-weight:bold;
  display:block;
}
*/
.charmap a {
  display:block;
  color:#000;
  text-decoration:none;
  border:0;
  
}
.charmap a:hover {
  font-size:20px;
  font-weight:bold;
  
}
.charmaptitle {
  color:#000;
  font-size:12px;
  font-family:Arial,Helvetica,sans-serif;
  padding-left:5px;
  
}
.charmappreview {
  font-family:Times,Serif;
  height:60px;
  font-size:40px; 
  text-align:right;
  
}




input#hd_go {
   
float:left;
    width: 2em;
    height: auto;
    padding: 1px;
    margin-top: .2em;
    border-left: 0;
    border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    -khtml-border-radius: 0 3px 3px 0;
    color: transparent;
    background-color: #eee;
    background-image: url(//publcif.iucr.org/widgets/images/magnifier_24.png);
    background-repeat: no-repeat;
    background-size: 1.2em;
    background-position: 50% 50%;
    cursor: pointer;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:100%;
}
#hd_wordsx, #hd_wordsx:focus {
float:left;
    height: auto;
    padding: 1px;

    border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    -khtml-border-radius: 3px 0 0 3px;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:100%;
    z-index:1;
    position:relative;
    /*background:transparent;*/
    
    -webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
outline:none;
/*background:rgba(255,255,255,0.5);*/
}

#hd_search {
    position:relative;
}

#hd_search div.searchToolsLink {
float:left;
    display:inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-top: .2em;
    margin-left: 2px;
    background-image: url(//publcif.iucr.org/widgets/images/gear_24.png);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 50% 50%;
    cursor: pointer;
    
}
#footer_search input, #footer_search select {
   /* z-index:1;*/
  /*  position:relative;*/
        -webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
outline:none;
border:1px solid #bbb;
background:rgba(255,255,255);
}


@media only screen and (max-width: 850px) { 
    #jpage_b .hd_jicon_subtitle  {
        display: none;
    }
}