/* Theme Name: iopp-AUG16
 * Theme URI: 
 * Description: iopp-AUG16
 * Version: 1.0
 * Author: Paul Matson
 * Tags: IOPP
*/


/*
Paul Matson
Design studio
IOP Publishing

– Merged in from iopp/style.css
1. Reset
2. Microclearfix
3. Typography
4. Layout
5. Atomic
6. Arrk's responsive code (font-sizes removed)
7. Print styles

*/




/* 1. Reset ------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-text-size-adjust: 100%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  font-size: 62.5%;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
  text-decoration: none;
}

/* change border colour */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input {
  vertical-align: middle;
  -webkit-appearance: none;
  border-radius: 0;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
}

input[type="radio"] {
  -webkit-appearance: radio;
}

sup, sub {
  font-size: 75%;
  height: 0;
  line-height: 1;
  vertical-align: baseline;
  _vertical-align: bottom;
  position: relative;
}

sup {
  bottom: 1ex;
}

sub {
  top: .5ex;
}



/* 2. Microclearfix ------ */

/* new microclearfix */

.cf:after {
    content: " ";
    display: table;
    clear: both;
}




/* 3. Typography ------ */



/* Self-hosted webfonts – FontSpring */

@font-face {
    font-family: 'FranklinGothicFSCondensed';
    src: url('../fonts/FranklinGothic-Cd-webfont.woff') format('woff'),
         url('../fonts/FranklinGothic-Cd-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FranklinGothicFSCondensedItal';
    src: url('../fonts/FranklinGothic-CdIt-webfont.woff') format('woff'),
         url('../fonts/FranklinGothic-CdIt-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FranklinGothicFSDemiCondensed';
    src: url('../fonts/FranklinGothic-DemiCd-webfont.woff') format('woff'),
         url('../fonts/FranklinGothic-DemiCd-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FranklinGothicFSDemiCondensedItal';
    src: url('../fonts/FranklinGothic-DemiCdIt-webfont.woff') format('woff'),
         url('../fonts/FranklinGothic-DemiCdIt-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



/* Body sets default font, size 16px/1.6rem, line 24px/2.4rem */
/* All rem sizes are in units of 10px due to html font-size: 62.5% setting */
body {
  color: #222;
  font-size: 16px; /* iop.css */
  font-size: 1.6rem;
  line-height: 1.35;
  overflow-x: hidden; 
  font-family: 'FranklinGothicFSCondensed',Arial,sans-serif;;
}

/* bold and italic styles, specifiying fonts */
i, em, .italic {     
        font-family: 'FranklinGothicFSCondensedItal',Arial,sans-serif;
        font-style: normal;
}

b, strong {     
        font-family: 'FranklinGothicFSDemiCondensed',Arial,sans-serif;
        font-weight: normal;
}

b i, strong i, 
b em, strong em, 
i strong, em strong,
i b, i strong
 {     
        font-family: 'FranklinGothicFSDemiCondensedItal',Arial,sans-serif;
        font-weight: normal;
}


button, input, select, textarea {
    font-family: 'FranklinGothicFSCondensed',Arial,sans-serif;;
}

/* links */

a:link, a:visited {
    color: #CC0000;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    outline: 0;
}
a:active {
    color: #CC0000;
    outline: 0;
}
a:focus {
    outline: thin dotted;
}


/* img */

img {
    border: 0;
    height: auto;
}

img, object, embed {
    max-width: 100%;
}


/* lists */

ul {
    margin: 0 0 1em;
    padding: 0 0 0 1em;
    list-style-type: disc;
}

ol {
    margin: 0 0 1em;
    padding: 0 0 0 1em;
    list-style-type: decimal;
}


/* paragraph */

/* is news-article needed? 
// could define the non-news article paragraphs instead?
*/
.news-article p , .news-article-narrow p{
    margin: 0 0 1em;
}

p.standfirst, p.stand-first {
    color: #000000;
    margin: 0 0 1em;
    font-size: 19.5px;
    font-size: 1.95rem;
}

.col240 p.stand-first {
    color: #868ea4;
}


h1 {
    margin: 0 0 .5em 0;
    font-weight: normal;
    font-size: 30px;
    font-size: 3rem;
    line-height: 1.2;
    color: #868ea4;
}

h2 {
    font-size: 19px;
    font-size: 1.9rem;
    margin: 1em 0;
    font-weight: normal;
}

h3 {
    margin: 1em 0 .25em;
    font-size: 19px; 
    font-size: 1.9rem;
    font-weight: normal;
    font-family: 'FranklinGothicFSDemiCondensed', Arial, sans-serif;
}

h4 {   
    margin: 0 0 .25em;
    font-size: 16px; 
    font-size: 1.6rem;
    font-weight: normal;
    font-family: 'FranklinGothicFSDemiCondensed', Arial, sans-serif;
}

h5 {
    margin: 1em 0 .25em;
    font-size: 18px; 
    font-size: 1.8rem;
    font-weight: normal;
    font-family: 'FranklinGothicFSDemiCondensed', Arial, sans-serif;
}


h6 {
    margin: 0 0 .25em;
    font-size: 16px; 
    font-size: 1.6rem;
    font-weight: normal;
    font-family: 'FranklinGothicFSDemiCondensed', Arial, sans-serif;
}



/* Box headings */

.box h4
{
    text-transform: uppercase;
}

.box h3 {
    color: #8F92B5;
    font-size: 17px;
    font-size: 1.7rem;
    margin-top: 0;
    margin-bottom: 1em;
}

.box h5, .box h4, .box h6 {
    color: #8F92B5;
}


.index-box h3 {
    font-size: 17px;
    font-size: 1.7rem;
    border-top: 6px solid #afb5cc;
    color: #8F92B5;
    margin-top: 0;
    margin-bottom: 1em;
}
.index-box h5 {
    border-top: 6px solid #afb5cc;
    color: #CC0000;
    margin-top: 0;
}
.index-box h6{
    color: #CC0000;
}

#iop-for ul {
    font-size: 18px;
    font-size: 1.8rem;
}

/* nav */

.nav {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: normal;
    font-family: 'FranklinGothicFSDemiCondensed', Arial, sans-serif;
}

/* news article headings */

.article h2, .article2 h2, .article-img h2, .article2-img h2 {
    font-size: 16px;
    font-size: 1.6rem;
    margin: 0;
}


/* location and date */

span.location {
    font-size: 14px;
    font-size: 1.4rem;
    margin: .5em 0 0 2em;
    display: block;
    float: left;
}

span.date {
    font-size: 14px;
    font-size: 1.4rem;
    margin: .5em 0 0 0;
    display: block;
    float: left;
}


.caption {
    float: left;
    font-size: 14px;
    font-size: 1.4rem;
    margin-bottom: .5em;
    max-width: 100%;
}


/* About us font sizes  */

.aboutus-circle-text1 {
    font-size: 16px;
    font-size: 1.6rem;
}
.aboutus-circle-text2 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1;
}

.aboutus-circle1 span {
    font-size: 53px;
    font-size: 5.3rem;
    line-height: 37px;
}
.aboutus-circle1 .size2 span {
    font-size: 32px;
    font-size: 3.2rem;
}

.aboutus-circle1-wrapper p, .aboutus-circle2-wrapper p {
    font-size: 16px;
    font-size: 1.6rem;
}



/* Forms */

form label {
        margin-bottom: 1em;
}

.button {
    background: #AF1B28;
    color: #FFF;
    border: none;
    padding: 5px 20px;
}
.form-row {
    margin-bottom: 10px;
}

/* Messagefocus forms */

/* MF Form should be given this class  */

.mf-form {
    width: 75%;
}

.mf-form p {
    clear:both;
    margin-bottom: 0;
    margin-top: 1em;

}

/* MessageFocus classes */

.amf-el label {
    margin: 3px 0 5px 0;
    display: block;
}
.amf-el label span {
    margin:0; 
}
.amf-el-inner input,
.amf-el-inner select {
    margin: 0 0 20px 0;
    font-size: 16px; /* iop.css */
    font-size: 1.6rem;
}
.amf-el-inner input[type="text"],
.amf-el-inner textarea {
    /* font-size: 1.2em; */
    background-color: #fff;
    border: 1px solid #999;
    width: 100%;
    padding: 5px;
    margin: 0 0 20px 0;
    background-color: #efefef;
}
.amf-el-inner input[type="radio"],
.amf-el-inner input[type="checkbox"] {
    float: left;
    margin: 5px 5px 5px 0;
}
.amf-type-radio,
.amf-type-checkbox { margin-bottom: 20px; }
.radio-group-option {
    clear: both;
    margin: 10px 0;
}

.amf-el input.button { 
    font-size: 18px;
    font-size: 1.8rem; 
    margin: 1em 0;
    border-radius: 2px;
    box-sizing: border-box;
    }

.amf-el input.button:hover {
    background-color: #850909;
    cursor: pointer;
}


/* Button */
.red-button {
    color: #FFF;
    float: left;
}
.red-button a{
    padding: 6px 13px 10px 12px;
    color: #FFF;
    background: #cc0000;
    text-decoration: none;
}
.red-button a:hover{
    background: #000;
    padding: 6px 13px 10px 12px;
    text-decoration: none;
}

/* validation error message */


.validationerrormsg {
    color: #D8000C;
    margin-top:3px;
    padding-left:20px;
    margin-left:10px;
    padding-bottom:5px;
    padding-top: 2px;
}



/* 4. Layouts ------ */

.pagination span{
    margin:0 10px 0 0;
}

.caption img {
    float: none;
    margin: 4px 15px 4px 0;
}


/* *** Container *** */
#container {
    width: 960px;
    padding: 0;
    margin: 0 auto;
    padding: 0 10px;
}

#container li {
    margin-bottom: 5px;
}

.news-article-narrow ul {
    margin-top: 5px;
}

/* Home, News, Awards and prizes
Also new class for archives */
.col320 .article-img img,
.col320-nomargin .article-img img,
.news-archives .article-img img {
    width: 120px;
    /* height: 90px; height removed */
}

.csr-logo {
    float: left;
    width: 120px;
    padding-right: 15px;
}
.csr-logo img{
    margin: 0;
    width: 120px;
}

.partner-diagram img {
    margin: 0;
    padding:0;
}
.framed {
    border: 1px solid #afb5cc;
    overflow: hidden;
}
.framed  .framed-col2 img{
    float: none;
}
.article-img .imgAuto img, .image-grid .imgAuto img, .aboutLogoimg img, .aboutLogoBig img{
    width: auto;
    height: auto;
}

.col160 {
    width: 160px;
    margin: 0;
    float: left;
}
.col160.spacer {
    margin-left: 40px;
    float: left;
}
.col240 {
    width: 240px;
    float: left;
}

.col240 p.index-stand-first {
    margin: 0 0 20px;
}

.col240double {
    width: 680px;
    float: left;
    margin-left: 40px;
}
.col240double-nomargin {
    width: 680px;
    float: right;
}
.col320 {
    width: 320px !important;
    margin-left: 40px;
    float: left;
}
.col320-nomargin {
    width: 320px !important;
    float: left;
}
.col320 .news-article, .col320 .news-article-narrow{
    margin: 0;
}
.col350 {
    width: 350px;
    float: left;
}
.col720 {
    width: 720px;
    float: left;
}
.col50-percent {
    width: 48%;
    float: left;
}
.row, .row2 {
    display: block;
    float: left;
}
.news-article, .sitemaplist {
    width: 680px;
    margin-left: 40px;
    float: left;
}
.news-article-narrow {
    width: 560px;
    margin-left: 40px;
    float: left;
}


.testimonial-blockquote {
    width: 80%;
    margin: 0;
    float: left;
}

/* *** Social media links - icons *** */

a.social-links {
    width: 32px;
    height: 32px;
    display: block;
    float: left;
    margin: 0 3px 10px 0;
    background-color: #5280d1;
}

a.social-links2 {
    width: 16px;
    height: 16px;
    display: block;
    float: left;
    margin: 2px 5px 3px 0;
    background-color: #5280d1;
}
a.social-links2:hover, a.social-links2:focus {
    background-color: #4472c2;
}
p.socialLinks-wrap {
    margin: 0;
    padding: 0;
    clear: both;
}
a.social-links:hover, a.social-links:focus {
    background-color: #4472c2;
}
.col240  a.social-links {
    float: left;
    margin: 0 3px 20px 0;
}

/* *** .col-list sidebar *** */

.col-list ul {
    margin-top: 6px;
    padding: 0;
    list-style-type: none;
}
.col-list ul li {
    margin-bottom: 0;
    overflow: hidden;
    border-top: 1px solid #D1D5E0;
    padding-top:0;
    /* letter-spacing: 0.015em; */
}
.col-list ul li a {
    display: block;
    padding-bottom: 6px;
    text-decoration: none;
}
.col-list ul li a:hover {
    text-decoration: underline;
}
.col-list ul li a.selected {
    color: #000;
    text-decoration: none;
}
.col-list ul ul li a {
    margin-left: 10px;
}
.sidebar {
    color: #AFB5CC;
}
.sidebar-logo-border {
    padding: 6px 0 12px 0;
    border-top: 6px solid #AFB5CC;
    border-bottom: 1px solid #D1D5E0;
}

/* *** sidebar boxes *** */

.box {
    clear: right;
    margin-bottom: 2em;
}

.box h3, .box h5
{
    border-top: 6px solid #afb5cc;
}

#partnerspanel h3 {
    margin-top: 0;
}


/* home-page boxes */
.index-box {
    clear: right;
    height: 100%;
}


/* unsure where this is used. Depreciated homepage code? */
.index-grey-box {
    float: left;
    width: 960px;
    background-color: #D1D5e0;
}

.index-grey-box h3 {
    border-top: 6px solid #cc0000 !important;
    text-indent: 8px;
    color: #000 !important;
}
.index-grey-box h3 {
    margin: 0;
}
.index-grey-box a{
    color: #CC0000;
}

/* grey-box */
.grey-box {
    float: left;
    background: #D1D5e0;
    padding: 0px 5px 20px 5px;
    margin-bottom: 37px;
}
.grey-box-text-toppad {
    padding-top: 19px;
}
.grey-box-scroll {
    float: left;
    text-indent: 8px;
    background: #D1D5e0;
    margin-bottom: 30px;
}

.grey-box-topborder , .grey-box-thumb, .grey-box-thumb-last{
    background: #D1D5e0;
    border-top: 6px solid #cc0000;
}
.grey-box-topborder {
    width: 100%;
}
.grey-box h3 {
    color: #000 !important;
    margin: 0;
}

.grey-box-thumb {
    margin-right: 20px;
}
.grey-box-thumb, .grey-box-thumb-last{
    float: left;
    margin-bottom: 35px;
    padding: 0 5px;
    width: 145px;
}
.grey-box-thumb h5, .grey-box-thumb-last h5{
    padding-top: 2px;
}
.grey-box-thumb .more2, .grey-box-thumb-last .more2{
    padding-bottom: 8px;
    float: left;
}
.grey-box-nowrap-text-460 {
    width: 460px;
    float: left;
}
.grey-box-thumb .grey-box-thumb-img, .grey-box-thumb-last .grey-box-thumb-img {
    padding: 9px 0 4px 0;
}
.grey-box-thumb h3, .grey-box-thumb-last h3 {
    margin: 0 0 .25em 0;
    color: #CC0000;
    font-size: 18px;
    font-size: 1.8rem;
}
.grey-box-thumb-img{
    padding:12px 0 0 0;
    margin: 0;
}



/* *** home-page iop-for *** */
#iop-for {
    margin-bottom: 30px;
}

#iop-for ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 95%;
}

#iop-for h3 {
    padding-bottom: 15px;
    margin-bottom: 0;
    margin-top: 0;
    background-color: #d1d5e0;
    text-indent: 5px;
    color: #000;
    border-color: #c00;
}
#iop-for ul {
    margin: 0;
    padding: 0 0 90px 0;
    background-repeat: no-repeat;
    background-position: 0 5px;
    position: relative;
}
#iop-for ul li div {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 90px;
    width: 240px;
}
#iop-for ul li a.iop-for-partners + div {
    background-image: url(../img/home/iopfor-1.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    -o-background-size: contain;
    display: block;
}
#iop-for ul li a.iop-for-librarians + div {
    background-image: url(../img/home/iopfor-3.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    -o-background-size: contain;
    display: none;
}
#iop-for ul li a.iop-for-researchers + div {
    background-image: url(../img/home/iopfor-2.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    -o-background-size: contain;
    display: none;
}
#iop-for ul li a.iop-for-funders + div {
    background-image: url(../img/home/iopfor-4.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    -o-background-size: contain;
    display: none;
}

#iop-for ul li a,
#iop-for ul li a:link,
#iop-for ul li a:visited { 
    display: block;
    padding: 2px 0 11px 0;
    text-indent: 5px;
    background-color: #d1d5e0;
    border-top: 1px solid #afb5cc;
    -webkit-transition: background 0.2s ease;
    -moz-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
    transition: background 0.2s ease;
}
#iop-for ul li:hover, #iop-for ul li a:hover {
    background-color: #AFB5CC;
    text-decoration: none;
}


/* officeMap homepage - no longer used */

.officeMap
{ margin: 0 auto; 
  width: 960px;
 }

.officeMap img {
    margin-top: 2em;
}


/* *** article - imgs  *** */
.news-article .article, .news-article .article-img, .news-article-narrow .article, .news-article-narrow .article-img {
    width: 100%;
}
.article, .article-img {
    clear: left;
}
.article, .article2, .article-img, .article2-img {
    border-top: 1px solid #D1D5E0;
    margin-bottom: 20px;
    float: left;
    width: 100%;
}

.article p, .article2 p, .article-img p, .article2-img p {
    margin: 0 !important;
    clear: both;
}
.news-articles-img {
    width: 100%;
    float: left;
    text-align: center;
}
.news-articles-img  img{
    float: none;
}
.news-article img, .news-article-narrow img {
    float: left;
    margin: 0px 15px 10px 0;
}
.titles-websites .article-img p, .titles-websites .article2-img p{
    clear: right;
}
.article img, .article2 img, .article-img img, .article2-img img {
    border: 0;
    float: left;
    margin: 5px 13px 8px 0
}

.news-article .social-links > img {
    margin-top: 0;
}

.news-article span.date, .news-article-narrow span.date {
    margin: 6px 15px 5px 0;
}
.news-article span.location, .news-article-narrow span.location {
    margin: 6px 0 5px 0;
}

/* news-article languages */
.news-article .languages {
    margin-bottom: 20px;
}
.news-article .languages ul{
    list-style-type: none;
    padding-left: 0px !important;
    padding-bottom: 0px;
    border-bottom: 1px solid #D1D5E0;
    overflow: hidden;
}
.news-article .languages ul li{
    list-style-type: none;
    display: inline;
    padding: 2px 20px 0px 0px;
    float: left;
}

/* header */

.header {
    border-top: 6px solid #000;
    background-color: #af1b28;
    height: 110px;
}
.header-content {
    width: 960px;
    margin: 0 auto;
    position: relative;
    height: 110px;
    padding: 0 10px;
    background-color: #af1b28;
    margin-top: -6px;
    border-top: 6px solid #000;
}

.IOP-logo {
    width: 20.5%;
    height: 93px;
    border: 0px;
    margin: 6px 0 0 0;
    padding: 0;
    display: block; 
    float: left;
}
.IOP-logo:hover {
    border: none;
}

a.IOP-logotext {
    float: left;
    color: #000;
    text-decoration: none;
    padding: 10px 0 0 21px;
}

.search {
    text-align: right;
    width: 242px;
    float: right;
}

.search a.customer-service-button {
    text-align: right;
    color: #fff;
    padding: 2px 11px 3px 11px;
    border: none;
    position: absolute;
    right: 0;
    top: 5px;
}
.search a.customer-service-button:hover {
    color: #000000;
    text-decoration: none;
}


/* nav */

.nav-container {
    background-color: #AF1B28;
    width:100%;
    overflow:hidden;
}

.nav {
    background-color: #af1b28;
    margin: 0 auto;
    padding: 0 10px;
    width: 960px;
}

.nav ul{
    list-style-type: none;
    padding: 0;
    margin: 0;

}
.nav li{
    float: left;
    line-height: 26px;
    background-color: #AF1B28;
}

.nav li a {
    color: #fff;
    text-decoration: none;
    margin: 0 1em;
}

.nav li:first-of-type a {
    margin-left: 0;
}

.nav li a:hover {
    color: #000;
}

/* previously a.on */
li.current_page_item a {
  color: #868ea4; 
}

.nav li.current_page_item a {
  color: #000; 
}


/* previously nav-bg-color */

li.menu-item-1137,
li.menu-item-1138,
li.menu-item-1140,
li.menu-item-1142
 {
    margin-left: -0.1em;
}

li.menu-item-1137 a,
li.menu-item-1138 a,
li.menu-item-1140 a,
li.menu-item-1142 a
{
    color: #FFF;
    margin: 0;
    background: #850909;
    padding: 0.5em 1em;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

li.menu-item-1137 a:hover,
li.menu-item-1138 a:hover,
li.menu-item-1140 a:hover,
li.menu-item-1142 a:hover,
li.menu-item-1137.current_page_item a,
li.menu-item-1138.current_page_item a,
li.menu-item-1140.current_page_item a,
li.menu-item-1142.current_page_item a 
{
    background: #000;
    color: #FFF;
}


/* top drop down css */

a#topdropdown {
    color: #fff;
}

#topdropdown {
    display: block;
    z-index: 10;
    background: #000;
    padding: 7px 7px;
}
.the_menu {
    display:none;
    z-index: 100;
    float: left;
    position: relative;
    padding-top: 8px;
}
.the_menu li {
    background-color: #AF1B28;
    float: none;
    border-bottom: 1px solid #BF1C2A;
}
.the_menu li a {
    color:#fff;
    text-decoration:none;
    padding: 5px 10px;
    display:block;
}

.the_menu li a:hover {
    padding:5px 10px;
    font-weight:bold;
    color: #000;
}


/* *** breadcrumb  *** */

.bread-crum-container {
    background-color: #D1D5E0;
}
.bread-crumb {
    margin: 0 auto;
    width: 960px;
    overflow: hidden;
    padding: 2px 10px 4px;
    background-color: #D1D5E0;
}
.bread-crumb ul {
    margin: 0 auto;
    padding: 0;
}
.bread-crumb ul li {
    float: left;
    list-style-type: none;
    margin-top: 4px;
    background: transparent url(../images/breadcrumb-arrow.png) no-repeat right; 
    padding-right: 21px;
}
.bread-crumb ul li:last-child {
    background-image: none;
}


/* *** footer  *** */

.footer, .footer .footer-content a:link, .footer .footer-content a:visited {
    color: #fff;
}
.footer .footer-content a:hover {
    color: #AFB5CC;
}
.footer {
    background-color: #000;
    min-height: 161px;
    clear: both;
    margin-top: 30px;
}
.footer-content {
    width: 960px;
    min-height: 143px;
    padding: 18px 10px 0 10px;
    margin: 0 auto;
    background-color: #000000;
}

.footer-content ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;

}
.footer-content ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.footer-content p {
    clear: left;
}

.footer-social-pad {
    width: 100px;
    margin-left: 40px;
}

a#IOP-logo-foot {
    float: left;
    margin-bottom: 57px;
}


/* about us */

.aboutus-circle1 {
    width: 120px;
    height: 107px;
    margin: 0 auto;
    padding-top: 16px;
    background: url(../img/aboutUs/circle.gif) 0 0 no-repeat;
}
.aboutus-circle1 span{
    color: #FFF;
    float: none;
    margin: 0;
}
.aboutus-circle1  .size2 {
    padding-top: 20px;
    padding-bottom: 5px;
}
.aboutus-circle1-wrapper, .aboutus-circle2-wrapper {
    float: left;
    margin: 20px 0;
    text-align: center;
}
.aboutus-circle1-wrapper p, .aboutus-circle2-wrapper p {
    margin: 11px 0 0 0;
}
.aboutus-circle1-wrapper {
    width: 200px;
}
.aboutus-circle2-wrapper {
    width: 200px;
    margin-left: 40px;
}
.aboutus-circle1-pad {
    padding-top: 9px;
}


/* table */
.data-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 16px;
}

.data-table th { text-align: left; border-bottom: 1px solid #000;  }
.data-table td { border-bottom: 1px solid #CCC; }



/* extras */

span.credit {
    letter-spacing: 0.015em;
    margin: 0 0 10px 0;
    display:block;
}

.titles-websites .framed img.framed-img {
    border: 0;
    /* width: 119px;
    height: 143px; */
    margin: 10px 13px 0 0;
}
.titles-websites .framed img.framed-logo {
    border: 0;
    width: 149px;
    height: 24px;
}
.border-top{
    border-top: 1px solid #D1D5E0;
    margin-bottom: 25px;
    float: left;
    padding-bottom: 25px;
}
.index-header {
    border-top: 6px solid #000;
    background-color: #af1b28;
    height: 140px;
    margin-bottom: 25px;
    position: relative;
    padding: 0 10px;
}
span.index-more {
    float: none;
    margin: 0;
    display: block;
}
#mycustomscroll {
    width: 200px;
    height: 208px;
    overflow: auto;
    position: relative; /* IE overflow fix, position must be relative or absolute*/
}

.sliderkit-count {
    display: none;
}


/* cookies */

.cookies-banner { /* font-size: 1.2em; */ }

#cookieBanner { display:none;}

.cookies-banner-wrap {width: 100%;background: #EDEDED;}

.cookies-banner { width: 960px; margin: 0 auto;position: relative;background: #EDEDED;padding: 15px 0;}

.cookies-banner-close {float: right;text-align: right;margin-top: -3px;cursor: pointer;}



/* Merged in from iopp/style.css  */

.hide-menu { display: none; }

.partner-diagram img {
    margin: 0 !important;
}
.menu-footer-menu-3-container {
    margin-left: 50px;
    float: left;
    width: 100%;
}
.menu-footer-menu-4-container {
    width: 100%;
    margin-left: 100px;
}


/* Atomic */

.clear {
    clear: both;
}
.floatLeft {
    float: left;
}
.floatRight {
    float: right;
}
.headingNoMarginPadding {
    margin: 0;
    padding:0;
}
.alignCenter {
    text-align: center;
}
.margin0 {
    margin: 0px;
}
.nomargin {
    margin: 0px !important;
}
.margin-top20 {
    margin-top: 20px;
}
.marginBottom25 {
    margin-bottom: 25px;
}
.marginTop25 {
    margin: 25px 0 0 0;
}
.marginTopBottom25 {
    margin-top: 25px;
    margin-bottom: 25px;
}
.marginTop30 {
    margin: 30px 0 0 0;
}
.clearnone {
    clear: none;
    margin-top: 0;
}
.padding-top10 {
    padding-top: 10px;
}
.padding-top20 {
    padding-top: 20px;
}
.padding-right20 {
    padding-right: 20px;
}
.padding-Bottom40 {
    float: left;
    padding-bottom: 40px;
}
.displayNone {
    display : none;
}
.red-bold {
    color: #CC0000;
    font-size: 1em;
    margin: 0 !important;
}

.bdr {
    border: 1px solid #ccc;
    box-sizing: border-box;
}









/* Media queries from Arrk */


/* Mobile */
/* for Safari nav Contact Us issue */
/* @media screen and (-webkit-min-device-pixel-ratio:0) {
    .nav a, .nav a:link, .nav a:visited {
        margin-right: 0.9em;
        margin-left: 0.95em;
    }
    .nav .nav-bgcolor a{
        margin-right: 0;margin-left: 0;
    }
}
*/
@media only screen and (max-device-width: 768px) and (orientation:portrait) {
    #container, .index-header, .header, .footer-content, .bread-crumb {
        padding: 0;
    }
    .row, body, #container, .innerRow, .bread-crum-container {
        width: 100%;
        min-width: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .footer-content, #container{
        width: 100%;
        max-width: 980px;
        overflow: hidden !important;
    }
    .nav, .header-content{
        width: 94%;
        max-width: 980px;
        padding: 0 3%;
        overflow: hidden !important;
    }
    .bread-crumb {
        width: 94%;
        max-width: 980px;
        overflow: hidden !important;
    }
    .footer {
        height: auto;
    }
    .footer-content .col160 {
        width: 142px;
    }
    .footer-content  .spacer  {
        margin-left: 0;
    }
    .col240 {
        width: 182px;
        padding: 0 0 0 3%;
    }
    .col320 {
        width: 235px;
    }
    .col320-nomargin {
        width: 235px;
    }
    .col240double {
        width: 490px;
        margin-left: 40px;
        float: left;
    }
    .col240double-nomargin {
        width: 513px;
        float: left;
    }
    .testimonial-blockquote {
        width: 74%;
    }
    .col720 {
        width: 470px;
        float: left;
    }
    .news-article, .news-article-narrow  {
        width: 520px;
        margin-left: 20px;
    }
    .IOP-logo {
        height: auto;
    }
    #topdropdown, .the_menu {
        width: 94% !important;
    }
    #top-search {
        float: left;
        margin-bottom: 12px;
    }
    .nav {
        /* font-size: 1.25em; */
    }
    .nav a, .nav a:link, .nav a:visited {
        margin-left: 0.3em;
        margin-right: 0.3em;
        line-height: 1.7em;
    }
    .nav .nav-bgcolor ul{
        padding: 0;
    }
    .nav .nav-bgcolor {
        background: #850909;
    }
    .nav .nav-bgcolor a {
        line-height: 1.7em;
        padding: 0.4em 0.45em 0.45em 0.45em;
    }
    .nav .nav-bgcolor a:hover  {
        padding: 0.4em 0.45em 0.45em 0.45em;
    }
    .nav-bgcolor a{
        margin: 0 !important;
    }
    /*     .titles-websites .framed img.framed-img {
        width: 96px;
        height: 115px;
    } */

    .map-imgholder {
        width: 48%;
        float: left;
    }
    .map-text-scroll-wrapper {
        width: 48%;
        padding: 0 2%;
    }
    #mycustomscroll {
        height: 149px;
    }
    .grey-box-thumb{
        margin-right: 30px;
    }
    .textfield{
        width: 95%;
    }
    #iop-for ul li div {
        width: 100%;
        height: 69px;
    }
    #iop-for img {
        width: 100%;
    }
    #iop-for ul {
        padding: 0 0 69px 0;
    }
    .index-grey-box {
        width: 98% !important;
    }
    #locations-map img {width: 50%;}
    #locations-map div.text-block {margin: 0 20px; width: 300px;}
    #locations-map ul.text-list li {/* font-size: 0.9em; */ width: 95px;}

    .scroll-panel, #scroll-onmain {
        width: 520px !important;
    }
    .aboutus-circle1-wrapper, .aboutus-circle2-wrapper {
        width: 160px;
    }
    .aboutus-circle2-wrapper {
        margin-left: 20px;
    }
    .grey-box-thumb, .grey-box-thumb-last {
        width: 150px !important;
    }
    .grey-box-thumb {
        margin-right: 20px;
    }
    .footer .col240 {
        width: 170px;
    }
    .footer .col240double {
        width: 535px;
        margin-bottom: 30px;
    }
    .footer-content .col160 {
        width: 130px;
    }
    .login_textfield {
        width: 95% !important;
    }
  
    .article-img .col350, .article-img .col350-nomargin {
        width: 285px;
    }
    .article-img .imgAuto img, .aboutLogoimg img {
        height: 77px;
        width: 102px;
    }
    .aboutLogoBig img {
        height: 35px;
        width: 154px;
    }
    .nav-container {
        height: 27px;
    }
    .framed-col2 {
        width: 96px;
        float: left;
    }
    /*    .titles-websites .framed img.framed-logo {
        width: 83px;
        height: 14px;
    } */
    a.IOP-logotext {
        padding: 17px 0 0 12px;
    }
    span.index-more {
        display: block;
    }
    .homemap {
        margin: 0 0 0 2.5%;
    }
    .framed-col1 {
        float: left;
        width: 134px;
    }
    .header, .header-content {
        height: 86px;
    }
    .index-box.titles-websites .more2, .index-box.titles-websites h2, .index-box.titles-websites p {
        /* font-size: 1em; */
    }
    #iop-for ul li a.iop-for-partners + div {
        background-size: contain;
    }
    #iop-for ul li a.iop-for-librarians + div {
        background-size: contain;
    }

    #iop-for ul li a.iop-for-researchers + div {
        background-size: contain;
    }
    #iop-for ul li a.iop-for-funders + div {
        background-size: contain;
    }
    .csr-logo{
        float: left;
        width: 99px;
        padding-right: 5px;
    }
    .csr-logo img{
        width: 100%;
    }
    .footer-content {
        padding: 18px 0 0 0;
    }
    object {
        width: 100%;
        max-width: 970px;
        overflow: hidden !important;
    }
    .devicePad {
        padding: 0 3%;
    }
    .col240 p.index-stand-first {
        font: 1.1em/1.35em 'FranklinGothicFSCondensed',Arial,sans-serif;
    }
    .cookies-banner { width: 100%; }
}
/*If width Less than 768px*/
@media handheld, only screen and (max-device-width: 767px){
    #container, .index-header, .header, .footer-content {
        padding: 0;
    }
    .row, body, #container, .innerRow , .bread-crum-container {
        width: 100%;
        min-width: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .header-content, .footer-content ,.bread-crumb, .nav-container {
        width: 100%;
        max-width: 767px;
        padding: 0;
        overflow: hidden !important;
    }
    .header{
        width: 98.3%;
        padding: 0 1%;
    }
    .bread-crumb{
        width: 98%;
        padding: 0 1%;
    }
    .nav-container {
        padding: 0;
        width: 100%;
    }
    .nav {
        height: auto;
        /* font-size: 1.2em; */
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .nav a#topdropdown{
        margin: 0;
    }
    .footer {
        height: auto;
    }
    .footer-content .col160 {
        width: 112px;
    }
    .footer-content  .spacer  {
        margin-left: 0;
    }
    .col240 {
        width: 160px;
        padding: 0 1%;
    }
    .col320 {
        margin-left: 20px;
        width: 228px;
    }
    .col320-nomargin {
        width: 228px;
    }
    .col240double {
        width: 450px;
        margin-left: 20px;
        float: left;
    }
    .col240double-nomargin {
        width: 450px;
        float: left;
    }
    .col720 {
        width: 470px;
        float: left;
    }
    .IOP-logo {
        height: auto;
        padding: 0 1%;
    }
    .news-article, .news-article-narrow  {
        width: 71%;
        margin-left: 20px;
    }
    #topdropdown {
        margin: 0;
        padding-left: 1em;
        width: 100% !important;
    }
    .the_menu{
        margin: 0;
        padding-left: 1em;
        width: 98% !important;
    }
    .nav-container {
        height: auto;
    }
    #top-search-wrap {
        float: left;
        margin-bottom: 7px;
    }
    #top-search {
        float: left;
        margin-bottom: 7px;
    }
    .header {
        height: 80px;
    }
    .header-content {
        height: 82px;
    }
    a.IOP-logotext {
        padding: 17px 0 0 12px;
    }
    .nav {
        /* font-size: 1.3em; */
    }
    .nav a, .nav a:link, .nav a:visited {
        margin-right: 12px;
    }
    .nav a, .nav a:link, .nav a:visited {
        margin-left: 0;
        padding-left: 0.45em;
    }
    .nav .nav-bgcolor {
        width: 98%;
    }
    .nav .nav-bgcolor ul{
        padding: 0;
    }
    .nav ul {
        padding: 0 3%;
    }
    .nav .nav-bgcolor a {
        background: #850909;
        float: none;
        line-height: 1.7em;
        padding: 0.4em 0.45em 0.25em 0.45em;
    }
    .nav .nav-bgcolor a:hover  {
        padding: 0.4em 0.45em 0.25em 0.45em;
    }
    .search {
        width:190px;
        margin-bottom: 25px;
    }
    .search input.text {
        width: 160px;
    }
    .nav-container{
        padding-bottom: 0px;
    }
    .aboutus-circle1-wrapper {
        width: 100px;
    }
    .aboutus-circle2-wrapper {
        width: 125px;
        margin-left: 60px;
    }
    .textfield{
        width: 97%;
    }
    .index-grey-box {
        width: 100% !important;
        max-width: 767px;
    }
    .article-img img{
        width: 120px;
        /* height: 90px; */
    }
    .customerServices .article-img img{
        width: 120px;
        height: 160px;
    }
    .scroll-panel {
        width: 512px;
    }
    .scroll-panel, #scroll-onmain {
        width: 466px !important;
    }
    .article-img .imgAuto img, .aboutLogoimg img  {
        width: 101px;
        height: 42px;
    }
    .aboutLogoBig img {
        height: 46px;
        width: 202px;
    }
    .col350.aboutLogo {
        width: 245px;
    }
    /*
    .titles-websites .framed .framed-col2 img {
        width: 82px;
        height: 13px;
    } */
    .footer .col240 {
        padding: 0 3%;
    }
    .the_menu li a:hover {
        padding-left: 0.45em;
        padding-right: 0.45em;
    }
    .nav .nav-bgcolor {
        background: none;
    }
    .nav .nav-bgcolor a {
        margin-right: 0em;
    }
    .testimonial-blockquote {
        width: 70%;
    }
    .footer .col240double {
        width: 437px;
        margin: 0;
    }
    .footer-content ul {
        font: 1em/1.35em 'FranklinGothicFSCondensed',Arial,sans-serif;
    }
    .footer-content .col160 {
        width: 108px;
    }
    .homemap {
        margin: 0 2.5%;
    }
    #locations-map div.text-block {
        margin: 0 20px;
    }
    .framed-col1 {
        float: left;
        width: 132px;
    }
    .index-box.titles-websites .more2, .index-box.titles-websites h2, .index-box.titles-websites p {
        /*  font-size: 1em; */
    }
    #iop-for ul li div {
        width: 100%;
        height: 60px;
    }
    #iop-for img {
        width: 100%;
    }
    #iop-for ul {
        padding: 0 0 60px 0;
    }
    .csr-logo{
        float: left;
        width: 89px;
        padding-right: 5px;
    }
    .csr-logo img{
        width: 100%;
    }
    .clear-right-text  img, img.clear-right-text, .caption {
        float: none;
    }
    .footer-content {
        padding: 18px 0 0 0;
    }
    .header, .header-content {
        height: 85px;
    }
    #locations-map img {
        width: 50%;
    }
    object {
        width: 100%;
        max-width: 757px;
        overflow: hidden !important;
    }
    .devicePad {
        padding: 0 1%;
    }
    .homeLogopad {
        margin-bottom: 15px;
    }
    .col240 p.index-stand-first {
        font: 1em/1.35em 'FranklinGothicFSCondensed',Arial,sans-serif;
    }
    .cookies-banner { width: 100%; }
}

/*iPhone Landscape ()*/
@media handheld, only screen and (max-device-width: 480px) and (orientation:landscape) {
    body {
        -webkit-text-size-adjust: none;
    }
    body, #container, .innerRow , .header, .footer, .nav-container{
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .row, .header-content, .footer-content ,.bread-crumb{
        width: 100%;
        overflow: hidden !important;
        max-width: 470px;
    }
    .nav-container {
        padding: 0;
        width: 100%;
    }
    .bread-crumb{
        width: 94.5%;
        padding: 0 3%;
        height: auto;
    }
    .header, .footer {
        width: 94.5%;
        padding: 0 3%;
        overflow: hidden !important;
    }
    .footer {
        height: auto;
        padding-top: 18px;
    }
    .col240, .col160, .col320, .news-article, .news-article-narrow  {
        float: none;
        width: 94%;
        padding: 0 3%;
        margin: 0;
    }
    .news-article .col320 {
        padding: 0;
        width: 97%;
    }
    .col320-nomargin {
        float: none;
        width: 97%;
    }
    .col720 .news-article, .col720  .col320 {
        padding: 0;
    }
    .footer-content  .spacer  {
        margin-left: 0;
    }
    .search {
        margin-bottom: 25px;
        width:180px;
    }
    .search input.text {
        width: 150px;
    }
    .search a.customer-service-button{
        -moz-transition: background 0.3s ease 0s;
        border-radius: 3px 3px 3px 3px;
        color: #FFFFFF;
        display: block;
        float: right;
        font: 1em 'FranklinGothicFSCondensed',Arial,sans-serif;
        margin-top: 0;
        padding: 2px 11px 3px;
        text-align: right;
        width: 32%;
    }
    .search a.customer-service-button:hover{
        color: #000;
    }
    .IOP-logo {
        height: auto;
    }
    #topdropdown {
        padding: 7px 14px;
    }
    #topdropdown{
        width: 100% !important;
    }
    .the_menu {
        width: 97% !important;
    }
    .col240double {
        width: 100%;
        overflow: hidden;
        float: left;
        margin-left: 0;
    }
    .col240double-nomargin {
        width: 100%;
        overflow: hidden;
        float: left;
        margin-left: 0;
    }
    .col720 {
        width: 94%;
        float: left;
        padding: 0 3%;
    }
    .col320 {
        margin-left: 0;
    }
    .footer a.social-links {
        float: left;
    }
    .news-article {
        margin-left: 0;
        width: 94%;
        padding: 0 3%;
    }
    .nav {
        height: auto;
        /* font-size: 1.2em; */
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .nav a#topdropdown{
        margin: 0;
    }
    #top-search {
        float: left;
        margin-bottom: 7px;
    }
    .footer-content  .col160 {
        width: 108px;
        float: left;
    }
    a#IOP-logo-foot{
        margin-bottom: 10px;
    }
    img {
        margin: 0 3%;
        max-width: 94%;
    }
    img.sliderThumb   {
        margin: 0 auto;
    }
    a.banner {
        text-align: center; margin: 0 auto; display: block;
    }
    .map-text-scroll-wrapper {
        width: 100%;
    }
    #mycustomscroll {
        width: 93%;
    }
    .map-imgholder {
        width: 100%;
    }
    .map-imgholder img{
        width: 100%;
        max-width: 100%;
    }
    .map-text-scroll-wrapper {
        width: 94%;
        padding: 3%;
        border-top: none;
    }
    #locations-map {
        width: 100%;
    }
    #locations-map img{
        width: 98%;
        margin: 0;
    }
    #locations-map div.text-block {
        width: 94%;
        padding: 3%;
        margin: 0;
        border-top: none;
    }
    .grey-box-thumb, .grey-box-thumb-last {
        margin-bottom: 20px;
        width: 94%;
    }
    .aboutus-circle1-wrapper, .aboutus-circle2-wrapper {
        float: none;
        margin-left: 0;
        width: auto;
    }
    .magazine-grey-boxtext {
        width: 300px;
    }
    .validationerrormsg {
        margin-left:0px;
        margin-top: -5px;
        margin-bottom: 7px;
    }
    .textfield{
        width: 95%;
    }
    .validationerrormsg {
        margin-top: 3px;
        margin-left: 20px;
    }
    .form-row .floatRight {
        float: left;
        clear: left;
    }
    .nav a, .nav a:link, .nav a:visited {
        margin-left: 0;
        padding-left: 0.45em;
    }
    .the_menu li a:hover {
        margin-left: 0;
        padding-left: 0.45em;
    }
    .nav a, .nav .nav-bgcolor a{
        margin: 0 !important;
    }
    .nav .nav-bgcolor a{
        padding: 5px 10px;
        margin-left: 0 !important;
    }
    .nav .the_menu ul{
        padding: 0 ;
    }
    .nav-first-child {
        margin-left: 0.22em !important;
    }
    .index-grey-box {
        width: 100% !important;
    }
    a.IOP-logotext {
        padding: 0;
        /* font-size: 0.8em; */
    }
    #locations-map ul.text-list li {
        width: 32%;
    }
    .nav .nav-bgcolor a:hover {
        padding: 5px 10px !important;
        background-color: #000;
    }
    .nav-bgcolor {
        float: none;
    }
    .header {
        height: 50px;
    }
    .header-content {
        height: 42px;
        padding: 0;
    }
    .IOP-logo img{
        height: 35px;
    }
    .IOP-logo {
        padding: 0;
    }
    .col350.aboutLogo {
        width: 49%;
    }
    .aboutLogo .imgAuto img, .aboutLogoimg img {
        width: 93px;
        height: 40px;
    }
    .aboutLogoBig img {
        width: 186px;
        height: 42px;
    }
    #leftNavigationID {
        margin-bottom: 10px;
    }
    #leftNavigationID img{
        margin: 0 0 10px 0;
    }
    .col320 .news-article, .col320 .news-article-narrow{
        padding: 0;
    }
    .scroll-panel2 .scroll-item img {
        width: 54px;
    }
    .sitemap-align {
        width: 36%;
    }
    .index-box.titles-websites {
        margin-top: 25px;
    }
    .framed-col1 {
        float: left;
        width: 134px;
    }
    .csr-logo{
        float: left;
        width: 82px;
        padding-right: 5px;
    }
    .csr-logo img{
        width: 100%;
    }
    .sidebar-logo-border {
        margin-bottom: 30px;
    }
    .framed-col2 {
        float: left;
        width: 295px;
    }
    .nav .nav-bgcolor li {
        margin-right: 0.8em;
    }
    object {
        width: 100%;
        max-width: 470px;
        overflow: hidden !important;
    }
    .devicePad {
        padding: 0 3%;
    }
    img.index-instituteofphysics-logo {
        margin: 0;
    }
    .homeLogopad {
        margin-bottom: 15px;
    }
    #iop-for img {
        width: 100%;
    }
    #iop-for ul {
        padding: 0 0 162px 0;
    }
    #iop-for ul li div {
        width: 100%;
        height: 162px;
    }
    .article2-img {
        clear: both;
    }
    .cookies-banner { width: 100%; }
}
/*iPhone Portrait, Blackberry*/
@media handheld, only screen and (max-device-width: 460px) {
    body, #container, .innerRow ,.header, .footer {
        width: 100%;
        min-width: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .row, .header-content, .footer-content {
        width: 100%;
        max-width: 460px;
        overflow: hidden !important;
    }
    .bread-crumb, .bread-crumb ul{
        width: 100%;
        max-width: 460px;
        height: auto;
    }
    .bread-crumb{
        width: 94%;
        padding: 0 3% 3% 3%;
    }
    .header{
        width: 95%;
        padding: 0 2.5%;
        overflow: hidden !important;
    }
    .footer {
        height: auto;
        padding-top: 18px;
    }
    .footer-content  .spacer  {
        margin-left: 0;
    }
    .col240, .col160, .col320 {
        float: none;
        width: 94%;
        padding: 0 3%;
    }
    .news-article, .news-article-narrow  {
        float: none;
        width: 94%;
        padding: 0 3%;
        margin: 0;
    }
    .news-article .col320 {
        padding: 0;
        width: 97%;
    }
    #container {
        width: 100%;
        max-width: 460px;
        overflow: hidden !important;
    }
    .col320-nomargin {
        float: none;
        width: 97%;
    }
    .col720 .news-article, .col720  .col320 {
        padding: 0;
    }
    .search {
        margin-bottom: 25px;
        width:180px;
    }
    .search input.text {
        width: 150px;
    }
    .search a.customer-service-button{
        color: #FFFFFF;
        display: block;
        float: right;
        margin-top: 0;
        padding: 2px 11px 3px;
        text-align: right;
        width: 45%;
        -moz-transition: background 0.3s ease 0s;
        border-radius: 3px 3px 3px 3px;
        font: 0.9em 'FranklinGothicFSCondensed',Arial,sans-serif;
    }
    .search a.customer-service-button:hover{
        color: #000;
    }
    #topdropdown {
        padding: 0.5em 1.5em;
    }
    #topdropdown, .the_menu {
        width: 100% !important;
    }
    .col240double {
        width: 100%;
        overflow: hidden;
        float: left;
    }
    .col240double-nomargin {
        width: 100%;
        overflow: hidden;
        float: left;
    }
    .col720 {
        width: 94%;
        float: left;
        padding: 0 3%;
    }
    .col320 {
        margin-left: 0;
    }
    .news-article {
        margin-left: 0;
    }
    .nav-container {
        padding: 0;
        width: 100%;
    }
    .nav {
        height: auto;
        /* font-size: 1.2em; */
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .nav a#topdropdown{
        margin: 0;
    }
    #top-search {
        float: left;
        margin-bottom: 7px;
    }
    .footer-content {
        padding-bottom: 20px;
    }
    .footer .col240double {
        width: 100%;
        max-width: 470px;
    }
    .footer-content  .col160 {
        float: left;
        padding: 0 0 0 3%;
        margin-bottom: 10px;
        width: 47%;
        /* font-size: 0.9em; */
    }
    .footer-content .spacer {
        clear: left;
    }
    .header {
        height: 50px;
    }
    .header-content {
        height: 45px;
    }
    a#IOP-logo-foot{
        margin-bottom: 10px;
    }
    .col240double {
        margin-left: 0
    }
    img {
        margin: 0 3%;
        max-width: 94%;
    }
    img.sliderThumb   {
        margin: 0 auto;
    }
    a.banner {
        text-align: center;
        margin: 0 auto;
        display: block;
    }
    #mycustomscroll {
        width: 93%;
    }
    .map-imgholder {
        width: 100%;
    }
    .map-imgholder img{
        width: 100%;
        max-width: 100%;
    }
    .map-text-scroll-wrapper {
        width: 94%;
        padding: 3%;
        border-top: none;
    }
    #locations-map {
        width: 100%;
    }
    #locations-map img{
        width: 98%;
        margin: 0;
    }
    #locations-map div.text-block {
        width: 94%;
        padding: 3%;
        margin: 0;
        border-top: none;
    }
    .grey-box-thumb , .grey-box-thumb-last {
        margin-bottom: 20px;
        width: 94%;
    }
    .aboutus-circle1-wrapper, .aboutus-circle2-wrapper {
        float: none;
        margin-left: 0;
        width: auto;
    }
    .magazine-grey-boxtext {
        width: 135px;
    }
    .validationerrormsg {
        margin-left:0px;
        margin-top: -5px;
        margin-bottom: 7px
    }
    .textfield{
        width: 95%;
    }
    .nav .nav-bgcolor a{
        background: #850909;
        padding: 5px 10px;
        float: none;
    }
    .nav-bgcolor {
        float: none;
        clear: both;
    }
    .index-grey-box {
        width: 98% !important;
    }
    .nav .nav-bgcolor a:hover {
        padding-left: 0.8em;
        padding-right: 0.45em;
        background-color: #850909;
    }
    #locations-map a span.pin-point {
        width: 6px;
        height: 6px;
    }
    #scroll-onmain {
        width: 94%;
    }
    .scroll-panel, #scroll-onmain {
        width: 100% !important;
    }
    .grey-box-scroll {
        /* font-size: 1em; */
    }
    #leftNavigationID {
        margin-bottom: 10px;
    }
    #leftNavigationID img{
        margin: 0 0 10px 0;
    }
    .col320 .news-article, .col320 .news-article-narrow{
        padding: 0;
    }
    .red-button a {
        /* font-size: 0.9em; */
    }
    .the_menu li a:hover {
        padding-left: 0.8em;
        padding-right: 0.45em;
    }
    .testimonial-blockquote {
        width: 55%;
    }
    .index-box.titles-websites {
        margin-top: 25px;
    }
    .sidebar-logo-border {
        margin-bottom: 30px;
    }
    .col350.aboutLogo {
        width: 94%;
    }
    .nav .nav-bgcolor li {
        margin-right: 0.8em;
    }
    object {
        width: 100%;
        max-width: 450px;
        overflow: hidden !important;
    }
    .devicePad {
        padding: 0 3%;
    }
    img.index-instituteofphysics-logo {
        margin: 0;
    }
    .aboutLogoBig img {
        width: 154px;
        height: 35px;
    }
    .homeLogopad {
        margin-bottom: 15px;
    }
    #iop-for img {
        width: 100%;
    }
    #iop-for ul {
        padding: 0 0 118px 0;
    }
    #iop-for ul li div {
        width: 100%;
        height: 118px;
    }
    .article2-img {
        clear: both;
    }
    a.IOP-logotext{
        width: 166px;
        height: 14px;
        padding: 0;
        margin: -2px 0 0 0;

    }
    .cookies-banner { width: 100%; }
}
@media handheld, only screen and (max-device-width: 400px) {
    #topdropdown , .the_menu{
        margin: 0;
        padding-left: 1em;
        width: 100% !important;
    }
    .nav a, .nav a:link, .nav a:visited {
        padding-left: 0.8em;
    }
    .sitemap-align {
        width: 43%;
    }
    .footer-content .footer-social-pad {
        width: 30%;
        padding: 0;
    }
    .csr-logo{
        float: left;
        width: 67px;
        padding-right: 5px;
    }
    .csr-logo img{
        width: 100%;
    }
    .framed-col2 {
        float: left;
        width: 214px;
    }
    .clear-right-text  img, img.clear-right-text, .caption {
        float: none;
    }
    #iop-for img {
        width: 100%;
    }
    #iop-for ul {
        padding: 0 0 145px 0;
    }
    #iop-for ul li div {
        width: 100%;
        height: 145px;
    }
    .cookies-banner { width: 100%; }
}
@media handheld, only screen and (max-device-width: 399px) {
    .scroll-panel2 .scroll-item img {
        width: 30px;
        margin: 0 16px 0 0;
    }
    .sitemap-align {
        width: 55%;
    }
    .footer-content .footer-social-pad {
        width: 35%;
        padding: 0;
    }
    .csr-logo{
        float: left;
        width: 52px;
        padding-right: 5px;
    }
    .csr-logo img{
        width: 100%;
    }
    .framed-col2 {
        float: left;
        width: 144px;
    }
    object {
        width: 100%;
        max-width: 399px;
        overflow: hidden !important;
    }
    #iop-for img {
        width: 100%;
    }
    #iop-for ul {
        padding: 0 0 218px 0;
    }
    #iop-for ul li div {
        width: 100%;
        height: 218px;
    }
    .cookies-banner { width: 100%; }
}
@media handheld, only screen and (max-device-width: 360px) {
    .header-content, .header {
        height: 42px;
        padding-bottom: 10px;
    }
    .IOP-logotext  img{
        width: auto;
        height: auto;
    }
    .IOP-logo img {
        width: auto;
        height: auto;
    }
    #topdropdown {
        padding-left: 0.45em;
    }
    #iop-for img {
        width: 100%;
    }
    #iop-for ul {
        padding: 0 0 118px 0;
    }
    #iop-for ul li div {
        width: 100%;
        height: 118px;
    }
    a.IOP-logotext{
        width: 166px;
        height: 14px;
        padding:0;
        margin: -2px 0 0 0;
        clear: left;
    }
    .cookies-banner { width: 100%; }
}
/* for ipod landscape */
@media screen and (min-width: 380px) and (max-width: 480px) {
    #iop-for img {
        width: 100%;
    }
    #iop-for ul {
        padding: 0 0 162px 0;
    }
    #iop-for ul li div {
        width: 100%;
        height: 162px;
    }
    a.IOP-logotext{
        width: 166px;
        height: 14px;
        padding:7px 0 0 0;
        margin: 0;
        float: left;
        clear: none;
    }
    .cookies-banner { width: 100%; }
}







/********************************************/
/* *** print styles *** */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important;
  font-family: Arial, sans-serif; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }

/**** SD Turn off items ****/
.header-content .IOP-logo,
.header-content .search,
.nav-container,
.sliderkit,
.sliderkit-nav,
.sliderkit-count,
.sliderkit-panels,
#iop-for,
#leftNavigationID,
.footer .col240double,
a#IOP-logo-foot,
#partnerspanel,
.red-button,
.grey-box-thumb,
.grey-box-thumb-last,
.framed-col2 img,
.homemap h3,
a[class^="more"]
    { display: none }

.header { height: auto; }

.header-content { margin: 0 0 8px 0; }

a.IOP-logotext { font-size: 22px; }
a.IOP-logotext span { font-family: Arial, sans-serif;
    font-weight: bold; }

.bread-crumb ul { border-top: 1px solid #999999; 
    padding: 1px 0 0 0;
    list-style-type: none; 
    margin: 0 0 30px 0; }

.bread-crumb li { float: left; margin-right: 4px; font-size: 13px; }
.bread-crumb li:after { content: " >"; }
.bread-crumb li:last-child:after { content: "";} 

/*** SD Turning visuals of links off ***/
a:link, a:visited {background: transparent; color:#333; text-decoration:none;}
a:link[href^="http://"]:after, 
a[href^="http://"]:visited:after,
a:link[href^="/"]:after, 
a[href^="/"]:visited:after,
a:link[href^="n"]:after, 
a[href^="n"]:visited:after {content: " (" attr(href) ") "; display: none !important; }
a[href^="/"] {color:#000000;}

/*** SD Generic items ***/
p { font-family: Arial, Sans-serif;
    margin: 0 0 15px 0;
    font-size: 14px;
    line-height: 20px; }


h1, h2, h3, h4, h5, h6, 
a.IOP-logotext,
.bread-crumb li { font-family: Arial, sans-serif; }

.news-article ul li,
.news-article-narrow ul li { font-family: Arial, Sans-serif;
    font-size: 14px;
    line-height: 20px; }    

span.date,
span.location,
span.journal-titles { display: inline-block;
    margin: 0 15px 5px 0;
    font-family: 'FranklinGothicFSBook',Arial, sans-serif;
    font-size: 13px; }

/*** SD Homepage items ***/
.index-stand-first { border-top: 1px solid #999999; 
    padding: 1px 0 0 0; }
    
.homemap { border-top: 1px solid #cccccc; 
    padding-top: 1px;
    margin-top: 15px;
    display: block; 
    clear: both; }

#locations-map img { display: none; }

#locations-map .text-block ul li { width: 50%; 
    float: left; 
    font-family: Arial, Sans-serif;
    font-size: 14px;
    line-height: 20px;
    padding: 0;
    margin: 0; }    
    
/*** SD News article ***/
.news-article h1,
.news-article-narrow h1 { 
    margin: 40px 0 10px 0;
    display: block;
    clear: both; }

.news-article img,
.news-article p img,
.news-article-narrow img,
.news-article-narrow p img { float: left;
    margin: 0 20px 15px 0; }
    
.footer-content { padding-top: 40px; }
.footer-content p { border-top: 1px solid #999999; 
    padding: 1px 0 0 0;
    font-family: 'FranklinGothicFSBook',Arial, sans-serif;
    font-size: 13px; }

/*** SD Listings page ***/
.box h3, 
.index-box h3, 
.index-box h5 { font-size: 16px;
    margin: 40px 0 0 0;
    clear: both; }


.col320-nomargin h3,
.col320 h3 { margin-top: 15px; }


.article-img, 
.article { clear: both;
    display: block;
    border-top: 1px solid #cccccc;
    margin: 10px 0 20px 0;
    padding-top: 5px; }
    

.article-img { min-height: 90px; }
.framed { min-height: 145px; }


.article-img .article-img { border-top: 0;
    padding: 0;
    margin:0; }


.article-img img { float: left;
    margin-right: 0;
    border-right: 15px solid transparent;
    border-bottom: 5px solid transparent; }

    
.article-img h2,
.article h2 { margin-top: 0; 
    font-size: 18px; }

}
/* end print styles */