/* need to put everything in a media query so that respond.js parses and places it after responsive.css stuff */
@media all and (min-width:0px) {
  a.title-arrow:after { background-image: url('/sebin/z/n/icon-arrow-right-blue.png') }
  #article-slider-container .controls a { background:#f5f5f5 url('/sebin/t/m/icon-arrow-right-gray.png') no-repeat center }
  body.js #dept-nav-container > a.trigger:after { background: url('/sebin/n/v/icon-arrow-down-blue.png') no-repeat center }
  #toolbar > .tool.subscribe .icon { background: url('/sebin/f/p/icon-arrow-down-white.png') no-repeat center }
  .tool.search:after { background: url('/sebin/v/j/icon-toolbar-search.png') no-repeat center }
  #toolbar > .tool.menu:after { background: url('/sebin/h/q/icon-toolbar-menu.png') no-repeat center }
  #logo > a { background: url('/sebin/j/v/jhhr-logo.png') no-repeat center }
  #search-form input#submit { background: url('/sebin/v/j/icon-toolbar-search.png') no-repeat center }
  #browse > .contents > .wrap:after { background: url('/sebin/f/p/icon-arrow-down-white.png') no-repeat center }
  #browse > .download > a:after { background: url('/sebin/j/x/icon-pdf-white.png') no-repeat center }
  #issue-contents .issue-home .caption a:after { background: url('/sebin/l/w/icon-home-white.png') no-repeat center }
  #on-the-cover .title-arrow:after { background-image: url('/sebin/z/n/icon-arrow-right-blue.png'); background-repeat: no-repeat; }
  .issue-block > .options > a.download:after { background: url('/sebin/l/g/icon-pdf-blue.png') no-repeat center }
  body.js #article.wish .details .trigger.active:before { background-image: url('/sebin/d/u/icon-minus.svg') }
  #dept-nav .item.active::after { background: url('/sebin/b/x/triangle-down-black.svg') no-repeat }
  body.js #article.wish .details .trigger:before { background-image: url('/sebin/h/y/icon-plus.svg') }

  #footer .logo img { display:none }
  #footer .logo img.ie8 { display:block }

  .article.hasMedia .details,
  #contributors .con.hasMedia .details,
  #article .author-wrap.hasMedia .details,
  #article-slider .article.hasMedia .details { width:70% }

  ol.styled li > .wrap { width:95% }

  #article-slider-container .controls .prevBtn {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  }
}

@media all and (min-width:460px) {
  #article-slider .article.hasMedia .details { width:60% }
}

@media all and (min-width:500px) {
  #article.two-col #cols-container > .col1 { width:63% }
}

@media all and (min-width:768px) {
  #overview #cols-container > .col1 { width: 55% }
  #overview #cols-container > .col2 { width: 37% }
  #letter-editor > .cols > .col2 { width:60% }
}

@media all and (min-width:1000px) {
  .article.hasMedia.big .details { width:55% }
}

@media all and (min-width:1200px) {
  #overview #cols-container > .col1 { width: 654px }
  #article.two-col #cols-container > .col1 { width: 709px }
}