/*
 Theme Name:   Brown in the Great War - general (offshoot of exhibits - general child theme)
 Description:  Framework theme to use as a starting point for exhibits
 Author:       Kerri Hicks -- Brown University Digital Technologies
 Template:     responsive
 Version:      1.0.0
 Text Domain:  firstreadings-general
*/

body {
    background-color: #fff;
    /* 
    font-family : 'Source Sans Pro' ; 
 */
    font-size: 1em;
    color: #333;
}

a {
    text-decoration: underline;
    color: #c00404;
}

a:hover {
    color: #666;
    text-decoration: underline;
}

/* Customizations for the very-top menu, in header.php */
ul.top-menu {
    float: none;
    margin: 0px;
    padding: 0px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
    text-align: center;
}

ul.top-menu li a {
    padding-left: 1.8vw !important;
    padding-right: 1.8vw !important;
    text-decoration: none;
}

/* Removes extra spacing at the top of the page in header.php */
.skip-container {
    padding: 0px;
}

/* Overrides the 960px max width, for full screen width goodness in header.php */
#container {
    max-width: 100%;
    padding: 0px 0px;
}

/* This is the top area of the header, the brown bar with red stripe, containing the shield and Brown University Library text in header.php */
#logo {
    padding: 0px;
    width: 100%;
    margin: 0px 0px 0px 0px;
    height: 67px;
    background: -webkit-linear-gradient(top, #bf0017 7%, #280907 0%);
    background: -moz-linear-gradient(top, #bf0017 7%, #280907 0%);
    background: -o-linear-gradient(top, #bf0017 7%, #280907 0%);
    background: -ms-linear-gradient(top, #bf0017 7%, #280907 0%);
}

/* Styling site-wide project menu, in header.php */
#exhibits_bar {
    background-color: #fff;
    padding: 0px 10px;
}

#exhibits_bar a {
    font-size: .9em;
    font-weight: bold;
    color: #6B0920;
    text-decoration: none;
}

#logo img.narrow {
    display: none;
}

@media screen and (max-width: 1000px) {
    #logo img.wide {
        display: none;
    }

    #logo img.narrow {
        display: inline;
        float: left;
    }
}

/* styling for home page splash screen at top, in home-page.php */
#wrapper,
#home_page_hero {
    margin: 0px 0px 0px -1px;
    padding: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

div#home_page_hero {
    margin-top: 0px !important;
    width: 100%;
    min-height: 150px !important;
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



#home_page_hero .widget-wrapper,
#home_page_hero .widget-wrapper .widget-title h3 {
    background-color: transparent;
    border: 0px solid;
    border-radius: 0px;
    margin: 0px;
}

/* By default, the theme hides the sub header menu in responsive mode. This makes it visible again. */
.js .sub-header-menu {
    display: flex;
}

ul#menu-a-sub-header-menu {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

ul#menu-a-sub-header-menu li a {
    font-size: .9em;
}

ul#menu-a-sub-header-menu li a:hover {
    color: #FF498D;
}

ul#menu-a-sub-header-menu li:first-child a {
    font-weight: bold;
}

#content {
    margin: 0px 0px 0px 20px;
}

.post-entry {
    width: 95%;
}

.post-entry p {
    line-height: 1.7em;
}

#content-full {
    margin: 0px 15% 0px 15%;
    width: 70%;
}

#content-full h1 {
    font-size: 1.75em;
}

.page-template-home-page h1 {
    display: none;
}

.footnotes ol {
    clear: both;
}

sup,
sub,
small {
    font-size: 65%;
}



/* footer styles from main library web site */
#footer {
    clear: both;
    max-width: 100%;
    margin: 0px auto;
    padding: 0px;
}

#footerw {
    margin: auto;
    clear: both;
    width: 100%;
    min-height: 140px;
    background: #2b0b07;
    padding: 1px 0px 0px 0px;
    border: 0;
    font-size: 100%;
    font: inherit;
    color: #ad8d89;
    vertical-align: baseline;
    background: -webkit-linear-gradient(top, #bf0017 3%, #280907 0%);
    background: -moz-linear-gradient(top, #bf0017 3%, #280907 0%);
    background: -o-linear-gradient(top, #bf0017 3%, #280907 0%);
    background: -ms-linear-gradient(top, #bf0017 3%, #280907 0%);
}

#footer_contents {
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 4.5%;
    padding-left: 4.5%;
}

#footer_contents .social_media_links {
    position: relative;
    float: right;
    text-align: right;
    height: auto;
    width: auto;
    margin: 0px 10px 30px 120px;
}

#footer_contents .social_media_links a {
    position: relative;
    float: right;
    width: auto;
    border-bottom: 0;
    border-bottom: none;
    border: 0;
    border: none;
    text-decoration: none;
}

#footer a {
    font-size: 1.0em;
    color: #efcc00;
    border-bottom: 1px dotted;
}

#footer,
#footer a {
    font-weight: 700;
}

div.images {
    clear: both;
}

div.image {
    float: left;
}

.timeline {
    width: 105%;
}

.timenav-tag-row-2 {
    display: none;
}

.twitter {
    font: #666;
    width: 40%;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    float: right;
    display: block;
}

.quotetext {
    color: #6B0920;
    font-size: 1.3em;
}

.callout {
    font: #666;
    width: 38%;
    margin: -55px 0px 0px 0px;
    padding: 0 2% 0 2%;
    float: right;
    display: block;
    background-color: #ddd;
}

.callout img {
    width: 90%;
    display: block;
}

/* homepage widget */
#widgets {
    float: right;
}


/* 
.callout p:first-child:before {
display: block;
content: "\201C";
font-size: 160px;
left: -70px;
top: 70px;
position: relative;
color: #FF498D ;
font-family : Georgia ; 
}
 */

.callout p {
    margin-left: 30px;
}

.callout h3 {
    font-size: 1.5em;
}

.storiestext,
.col-620 {
    float: left;
    width: 54%;
    padding-left: 20px;
}

.gallery .gallery-item {
    width: 24%;
}


@media screen and (max-width: 980px) {
    .callout {
        width: 100%;
        float: left;
        margin: 10px 0px 20px 10px;
    }

    .storiestext {
        width: 100%;
    }

}

.post-meta {
    display: none;
}

.navigation {
    display: none;
}

/* sets width on category pages to 100%.  */
.category .col-620 {
    width: 100%;
}

.category .post-data {
    display: none;
}

.category div.post {
    clear: both;
    margin-bottom: 10px;
    border-top: 1px solid #ccc;
}

/* styling for catlist plugin */
.catlist {
    clear: both;
}

.catlist li {
    list-style-type: none;
    border: 1px solid #ccc;
    margin: 10px;
    width: 60%;
    padding: 10px;
    overflow: hidden;
}

.catlist li a:first-child {
    display: block;
    clear: both;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.2em;
}

.catlist li img {
    float: right;
    margin: 20px;
}

.catlist li a:last-child {
    font-size: .8em;
    clear: both;
    display: block;
    text-align: right;
}

/* 
end catlist styles
 */

img .cat_thumb {
    margin-left: 60px;
}

#content-archive {
    margin: 0px 20px;
}

.hangingindent {
    text-indent: -2em;
    margin-left: 2em;
}

.logo_gallery img {
    margin-right: 6vw !important;
}

.home #footer-widget {
    padding: 0px;
    float: right;
    width: 100%;
}

.home #footer-widget h3 {
    padding: 10px 10px 5px 10px;
    font-size: 1.2em;
}

.home #footer-widget form#searchform {
    padding: 5px;
    margin: 0px;
}

.home #search-4 {
    clear: both;
    width: 100%;
}

/*
Content/Sidebar Half Page
*/

#content.grid.col-460 {
    margin: 0px 20px 0px 20px;
}

.widgets {
    margin: 0px;
}

.widget-wrapper {
    padding: 0px;
    border: 0px solid #e5e5e5;
    background-color: #f9f9f9;
    margin: 10px 0px 20px 10px;
}

/*
timeline js 
*/
.vco-timeline .vco-navigation .timenav-background .timenav-tag-row-1,
.vco-timeline .vco-navigation .timenav-background .timenav-tag-row-3,
.vco-timeline .vco-navigation .timenav-background .timenav-tag-row-5 {
    background: #000000 !important;
}

@media screen and (max-width: 980px) {

    .grid,
    .grid-left {
        width: 95%;
    }
}

@media screen and (max-width: 480px) {
    .gallery .gallery-item {
        width: 100%;
    }
}

-----------------------------------------------------------------------------------
/*
 *
 * SECTION of additions due to differences under Responsive 4 : 2020 YF
 *
 */

// Added from <Responsive 3>/core/style.css

.top-menu {
    float: right;
    margin: 10px 0;
    padding: 0;
}

.top-menu li {
    display: inline;
    list-style-type: none;
}

.top-menu li a {
    border-left: 1px solid #cccccc;
    color: #333333;
    font-size: 11px;
    padding: 0 4px 0 8px;
}

.top-menu>li:first-child>a {
    border-left: none;
}

.top-menu li a:hover {
    color: #333333;
}


// Sub-header Menu -- legacy menu class from Responsive 3

.sub-header-menu {
    max-width: 1800px;
    float: left;
    padding: 0;
}


// Added due to <Responsive 4>/core/style.min.css containing a color (#fff) for this div id

#content-full {
    background-color: transparent !important
}

// adds to earlier #footer styles


#footer {
    margin: auto;
    clear: both;
    min-height: 140px;
    background: #2b0b07;
    border-top: 4px solid #c81700;
    padding-bottom: 7%;
    margin-top: 2em;
}

#footer_contents {
    max-width: 1480px;
    font-size: 0.8em;
    margin-top: 1em;
    margin-right: auto;
    margin-left: auto;
    padding-right: 4.5%;
    padding-left: 4.5%;
}


.default-layout #footer-wrapper {
    padding: 0 0px;
}



// End SECTION of changes needed for Responsive 4


/*------------------------------------------------------------------*/
/**********************************************
 *  * *
 *   * * Added due to <Responsive 4.9.6> changes
 *    * * Previous version was Responsive 4.0.5
 *     * * 
 *      * * 2/2024 YF
 *       * *
 *        * ***********************************************
 *         *
 *          */
* styling for home page splash screen at top,
in home-page.php */ #wrapper,
#home_page_hero {
    clear: both;
    position: relative;
}

/* Sub-header Menu -- legacy menu class from Responsive 3
 *  *  the following empty li css seems necessary for the float to work?
 *   *  */
ul.sub-header-menu {
    list-style: none !important;
}

.sub-header-menu .menu-item {
    margin-right: 10px;
    float: left;
    display: flex;
}

.sub-menu {
    display: flex;
    flex-direction: column;
}

ul.sub-header-menu {
    list-style: none !important;
}

/* copied in after 'inspecting' production website, is from old style.min.css */
.sub-header-menu .menu-item a {
    border-left: 1px solid #e5e5e5;
    color: #333 !important;
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-weight: 600 !important;
    height: auto;
    line-height: 35px;
    margin: 0;
    padding: 0 0.9em;
    position: relative;
    text-decoration: none;
    text-shadow: none;
}

/*Modified the below section from #menu-a-sub-header-menu in old version to .sub-header menu (4.9.x). */
ul.sub-header-menu {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

ul.sub-header-menu li a {
    font-size: 1.0em !important;
    font-weight: 600 !important;
    font-family: 'Minion-Pro', Minion, Georgia, serif !important;
}

ul.sub-header-menu li a:hover {
    color: #1caf97 !important;
}

.sub-header-menu>li:first-child>a {
    border-left: none;
}

body {
    background-color: #fff !important;
    color: #fff;
}

#content-full {
    margin: 0px 5% 0px 5%;
    width: 90%;
}

/* FLEX FIX The newer Responsive theme adds more container layers under our "flex" setup, between our existing target container and our original flexed container, so we have to similarly flex the intermediate containers*/
/*  
 *   *   * don't need this top level... or the background color.
 *    *    * #wrapper.site-content.clearfix 
 *     *    */
.content-outer.container {
    /*intermediate container, have to flex */
    display: flex !important;
    flex-flow: row wrap !important;
    min-width: 100% !important;
    height: auto;
}

.row {
    /*intermediate container, have to flex*/
    display: flex !important;
    flex-flow: row wrap !important;
    min-width: 100% !important;
    height: auto;
}

#primary.content-area.grid.col-620 {
    /*intermediate container for sub-menu, have to flex */
    display: flex !important;
    flex-flow: row wrap !important;
    min-width: 100% !important;
    height: auto;
}

#footer {
    /*intermediate container for footer, have to flex */
    display: flex !important;
    flex-flow: row wrap !important;
    min-width: 100% !important;
    height: auto;
}

#footer-wrapper {
    /*intermediate container for footer, have to flex */
    display: flex !important;
    flex-flow: row wrap !important;
    min-width: 100% !important;
    height: auto;
}

/* // END SECTION of changes needed for Responsive 4.9.6 */

.menu-item {
    position: relative !important;
}

.sub-menu {
    display: none !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 1rem;
    background-color: #fff;
    padding: 0.5rem 0;
}

.menu-item {
    font-size: 0.8rem;
}
.menu-item-has-children:hover .sub-menu {
    display: flex !important;
    width: 15rem;
}

.res-iconify {
    display: none !important;
}


#wrapper {
    max-width: 100% !important;
}

#content-full {
    width: 100% !important;
}