/* vvv UPDATED DISPLAY OF PERSONNEL LIST (NOW FITS BETTER ON PAGES WITH SIDEBARS) vvv */

div.view-people,
div.doe-list {
    overflow:visible;
}

#block-views-publications-doe-pubs-block {
    clear:both;
}

#block-views-publications-doe-pubs-block img {
    float: left;
    max-width: 230px;
    margin-right: 20px;
}

div.doe-list .views-row {
    float:left;
    min-height:180px;
}

div.doe-list .media-left img {
    max-width: 100%;
}

div.doe-list h3 {
    clear:both;
}

div.view-people .views-row,
div.doe-list .views-row {
    width:47%;
    padding:0;
    min-width: 250px;
    overflow:hidden;
    max-height: 180px;
}

div.view-people .views-row-odd,
div.doe-list .views-row {
    margin-right:20px;
}

div.doe-list .media-right {
    width:50%;
}

div.view-people .views-row .views-field-nothing-1,
div.doe-list .views-row .media-right {
    padding-right: 10px;
    padding-top: 10px;
    margin-left:10px;
}

div.view-people .views-row .views-field-nothing-1 .person-name a {
    font-family:Helvetica,"Trebuchet MS", "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:15px;
    font-weight:bold;
    margin-top:5px;
}

div.view-people .views-row .views-field-nothing-1 .affiliation ul {
    font-size:11px;
    line-height:11px;
}

div.view-people .views-row .views-field-nothing-1 .affiliation {
    font-size:11px;
    line-height:13px;
    margin-top:5px;
}

div.doe-list .views-row p {
    font-size:13px;
    line-height:15px;
}

/* you may be able to remove the "important" when this rule is in the right place */
.view-people .views-row .views-field-nothing-2 {
    margin-right:10px !important;
    float:left !important; /*@media only screen and (max-width: 480px) rule somewhere turns off float... but this looks weird when it stacks */
}

@media only screen and (max-width: 1000px) and (min-width: 754px) {
    div.doe-list .views-row h4 {
        font-size:14px;
    }
    
    div.doe-list .views-row p {
        font-size: 12px;
        line-height: 14px;
    }
}

@media only screen and (max-width: 754px) {
    div.view-people .views-row,
    div.doe-list .views-row {
        width:100%;
        max-height:none;
    }
}
@media only screen and (max-width: 560px) {
    div.doe-list .media-right {
        width: 100%;
    }
}