body {
/*    padding-top: 50px;
    padding-bottom: 20px;*/
    font-family: sans-serif;
    background-color: #EEE !important;
     padding-bottom: 50px !important;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
/**** end of default css classes ^^ */



/* custom class settings*/

/*create customized horizontal rules when we need them */
/*webRule creates a stylized horizontal rule; must use !important here because css from bootstrap or PubHub sometimes overrides*/
hr.webRule {
    height: 12px !important;
    border-top: 3px solid #080530 !important;
    border-radius: 5px !important;
    box-shadow: inset 0 12px 12px -12px #080530 !important;
}

/*webRule2 is for side navigations; color matches but no shadow*/
hr.webRule2
{
    border-top: 3px solid #080530 !important;
    border-radius: 5px !important;
}
/***** end customized horizontal rules */




/*********** print only the div that is selected on the page and NOT the entire website
    *** used for the Capitol Maps page to allow a button click event to ONLY print the map image selected
*** set print page size to landscape */
@media print {
    @page img {
        size: landscape;
        margin: 5cm;
    }
}


/*** use chevron to collapse a panel or expand it*/
/*** found the answer here https://stackoverflow.com/questions/18325779/bootstrap-3-collapse-show-state-with-chevron-icon
    ******/
.panel-heading .accordion-toggle:after {
    /* symbol to "open" panels */
    /* I USED CHEVRON DOWN to open panel*/
    font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
    content: "\e113"; /* adjust as needed, taken from bootstrap.css */
    float: right; /* adjust as needed */
    color: #080530; /* adjust as needed */
}

.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "closing" panels */
    /* I USED CHEVRON UP to open panel*/
    content: "\e114"; /* adjust as needed, taken from bootstrap.css */
}
.panel-heading:hover {
    cursor: pointer;
}

    .panel-heading:hover h3 {
        text-decoration: underline;
    }
/**end accordion panel formatting*/


/*** panel anchor tags on capitol maps page were not formatting correctly; added custom class*/
.capMapPanel a {
    font-size: 16px;
    color: #337ab7 !important;
}

    .capMapPanel a:hover {
        color: #080530 !important;
    }



/*Entry-Title is the class formatting for base page headings in website*/
h2.entry-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0;
    padding-bottom: 0;
}

/*nix the padding and margin (overrides any other class setting) on any element by adding this class*/
.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}


#rightSideBar {
    font-family:sans-serif;
    max-height: 100%;
    max-width: 100%;
}
/*css for the iframe for the right nav*/
.rNav-Iframe {
    border: 3px solid black;
    max-height: 100%;
    max-width: inherit;
    width: 275px;
    height: 255px;
}

.rNav-widget-title {
    font-family: Calibri;
    font-weight: 800;
    line-height: 1.1;
    color: #080530;
    font-size: 20px;
}


/****** rNav-bullet ==> custom formatting for the bulleted lists on the right navigation menus*/
.rNav-bullet {
    padding-bottom: 5px;
}

.rNav-bullet:hover,
.rNav-bullet a:hover {
    color: #c18a03 !important;
    /*    text-decoration: none !important;*/
}



/*custom bullet uses glypicon-chevron-right for right nav menu lists*/
#rNav-bullet ul {
    list-style: none;
    padding: 0;
}

#rNav-bullet li {
    /*gotta style and size it! */
    display: list-item;
    float: none;
    font-size: 16px;
    color: #9D9D9D;
    line-height: 2;
}




/*need to specify the font for the text of these list items because glyphicon reverts font to times yuk */
#rNav-bullet li span {
    font-family: sans-serif !important;
}
/***** end rNav-bullet formatting */



/*customized bottom padding for aside elements*/
aside {
    padding-bottom: 20px;
}


/*custom button for right nav menu imput*/
.btn-rNav {
    color: whitesmoke;
    background-color: #808080;
    border-color: #000000;
}

    .btn-rNav:focus,
    .btn-rNav.focus {
        color: whitesmoke;
        background-color: #808080;
        border-color: #081927;
    }

    .btn-rNav:hover {
        color: #fff;
        background-color: #6f6969;
        border-color: #081927;
    }

    .btn-rNav:active,
    .btn-rNav.active,
    .open > .dropdown-toggle.btn-rNav {
        color: whitesmoke;
        background-color: #808080;
        background-image: none;
        border-color: #081927;
    }

        .btn-rNav:active:hover,
        .btn-rNav.active:hover,
        .open > .dropdown-toggle.btn-rNav:hover,
        .btn-rNav:active:focus,
        .btn-rNav.active:focus,
        .open > .dropdown-toggle.btn-rNav:focus,
        .btn-rNav:active.focus,
        .btn-rNav.active.focus,
        .open > .dropdown-toggle.btn-rNav.focus {
            color: whitesmoke;
            background-color: #081927;
            border-color: #052139;
        }

    .btn-rNav.disabled:hover,
    .btn-rNav[disabled]:hover,
    fieldset[disabled] .btn-rNav:hover,
    .btn-rNav.disabled:focus,
    .btn-rNav[disabled]:focus,
    fieldset[disabled] .btn-rNav:focus,
    .btn-rNav.disabled.focus,
    .btn-rNav[disabled].focus,
    fieldset[disabled] .btn-rNav.focus {
        background-color: #d9dbdd;
        border-color: #d9dbdd;
    }
/*end custom button for right nav menu imput*/



/********** TO DO - look into converting Senator photos page into a Grid for better device responsiveness; instead of using panel divs  ******/

/* SOMETIMES col-sm-3 items would skip a div for some reason, leaving blank space
    (presumably due to a tiny overflow from the div or panel content)
    between my senator photos!
    SOLUTION found answer here: https://stackoverflow.com/questions/37460834/how-to-prevent-bootstrap-columns-jump-from-one-part-to-the-other-or-under-each-o
    **** wrap all content in a Row DIV and then apply flex-row class to that same Row DIV
    like this:  <div class="row flex-row nopadding">
    *** this also DRASTICALLY improves responsiveness of the div - as screen narrows, it drops from 4 column, to 3, to 3 columns, etc.
    *****/
.flex-row {
    display: flex;
    flex-wrap: wrap;
}
/*** end fix for column skipping a div */


/*** end testing*/

/*panels with no border no shadow */
.panel-no-border {
    border-width: 0;
    box-shadow: none
}

.panel-custBg {
    background-color: #EEE !important;
}

/*senator photos are 200 wide x 300 high
    This setting keeps their text centered under photos */
.panel-senator {
    width: 200px !important;
}

.senator-Text {
    text-align: center;
/*    font-size: medium;*/
    width: 200px;
    padding-bottom: 30px;
    padding-top: 20px !important;
}




/* 08.18.2022 converted topic areas on home->index to a GRID format (was formerly in a panel class)
    much more responsive on different screen sizes without having to change a lot of width settings!!!   */
.grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

    .grid li {
        padding: 10px;
    }




/****** topic area formatting *****/
.topicArea-title {
    text-align: center;
    font-family: inherit;
    font-weight: bold;
    line-height: 1.1;
    font-size: 20px;
}

.topicBtn,
.topicBtn:visited {
    background-color: #080530;
    color: #9D9D9D !important;
    max-width: 100%;
    width: 380px;               /* when deployed, this max width is rendered in Chrome browser slightly smaller than debugging, so this % is for DEPLOYED appearance! */
                                /* debug px was 360px */
}

.topicBtn:hover
{
    background-color: #6f6969;
    color: ghostwhite !important;
}


.topicText2 {
    text-align: center;
    font-size: medium;
    max-width: 100%;
    width: 380px;
}

/*topicText3 is not currently used */
/*.topicText3 {
    text-align: center;
    font-size: smaller;
    max-width: 100%;
    width: 380px;
}*/
/* end of topic area item formatting*/




/********** customized hover effects for home page topic area images *************/
/***** found how-to info here: https://www.youtube.com/watch?v=tF3RE5CGt9U ****/
/*.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, lfr));
}
*/
.img-wrapper {
    position: relative;
    overflow: hidden;
    max-height: 100%;
          height: 200px;
    max-width: 100%;
        width: 380px;
        margin-bottom: .5em
}

    .img-wrapper > img {
        display: block;
        width: 100%;
        height: 100%;
        /*aspect-ratio: 1/1;*/ /*this forces image to be squares, not rectangles - we may not use this*/
        object-fit: cover; /*handles oddly shaped images to fit in space perfectly*/
        object-position: center; /*focuses image on center of image*/

        padding-bottom: 2px;
    }

    /*format any text that will display over the top of the image during hover actions or fade*/
    .img-wrapper > .imgContent {
        position: absolute;
        inset: 0;
        font-size: 2rem;
        font-size: 100%;
        font-weight: bold;
        padding: 1rem;
        background: rgba(255,255,255, .4);
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 100%;
        height: 204px;
        max-width: 100%;
        width: 390px;
    }

    .img-wrapper > img,
    .img-wrapper > .imgContent {
        transition: 200ms ease-in-out;
    }

.imgContent:hover {
    color: black !important;
    text-decoration: none !important;
}

    /*settings for blur of image (higher # is more blurry) */
    .img-wrapper > img.blur {
        filter: blur(0px);
    }
    .img-wrapper:hover > img.blur {
        filter: blur(5px);
    }

    /*settings for grayscale of image  */
    .img-wrapper:hover > img.gray {
/*        -webkit-filter: grayscale(1);*/
        filter: grayscale(1); /* 1 = 100% grayscale*/
    }

    /*settings for zoom of image (higher ratio zooms more. 1.1 is a 10% zoom in) */
    .img-wrapper:hover > img.zoom {
        transform: scale(1.1);
        opacity: 0.5;
    }

    /*settings for fade effect of any content text in the div class imgContent */
    .img-wrapper > .imgContent.fade {
        opacity: 0;     /*no hover = no opacity*/
    }
    .img-wrapper:hover > .imgContent.fade {
        opacity: 1;     /*if hovering = set opacity*/
    }

    /*setting for sliding the imgContent text in from various directions on hovering*/
    .img-wrapper > .imgContent.slide-left {
        transform: translateX(-100%);
    }
    .img-wrapper:hover > .imgContent.slide-left {
        transform: translateX(0);
    }
    .img-wrapper > .imgContent.slide-right {
        transform: translateX(100%);
    }
    .img-wrapper:hover > .imgContent.slide-right {
        transform: translateX(0);
    }
    .img-wrapper > .imgContent.slide-down {
        transform: translateY(-100%);
    }
    .img-wrapper:hover > .imgContent.slide-down {
        transform: translateY(0);
    }
    .img-wrapper > .imgContent.slide-up {
        transform: translateY(100%);
    }
    .img-wrapper:hover > .imgContent.slide-up {
        transform: translateY(0);
    }
/**** end topic area image formatting ** */




/*----------------------------------------------------------------*/
/*    left navigation sidebar hover toggle                */
/*             found here: https://codepen.io/dalisc/pen/qzRGxQ
*/
/** if need more icons, see Google Font library here: https://fonts.google.com/icons?icon.style=Outlined
    */
/*----------------------------------------------------------------*/
.sidebar {
    height: 650px; /* 100%;*/ /*100% only is 100% of content, NOT window size*/
    width: 65px;
    position: inherit; /* original value was  fixed;  */

    /*z-index: 0;*/ /* add this back if sidebar slider doesn't stay on top*/
    /*    top: 0;
    left: 0;*/


    background-color: #080530;
    transition: 0.5s;
    overflow-x: hidden;
    white-space: nowrap;
}

    .sidebar a {
        padding: 8px 8px 8px 22px;
        text-decoration: none;
        line-height: 2;  /*space the links vertically*/
        font-size: 16px;
        color: #9D9D9D !important;
        display: block;
    }

    .sidebar a:hover {
            color: ghostwhite !important;
    }

/*main .sidebar {
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 36px;
    margin-left: 40px;
}*/

.material-icons,
.icon-text {
    vertical-align: middle;
}

.material-icons {
    padding-bottom: 3px;
    margin-right: 30px;
}

#main {
    padding: 16px;
    /*  margin-left:  85px; */
    transition: margin-left 0.5s;
}

@media screen and (max-height: 450px) {
    .sidebar {
        padding-top: 15px;
    }

        .sidebar a {
            font-size: 14px;
        }
}
/******* end left menu slideout menu */



/* style the css attributes for an unordered list with a heading*/
ul:before {
  /*  content: attr(data-header);*/  /*removed data-header; not being used and it was causing too much space between header and li items*/
    font-size: 100%;
    font-weight: bold;
    margin-left: -15px;
}

/*apply this to any DIV in order to not only hide it, but remove the space the hidden div will take up on the view
    use @media queries to SHOW this div on various screen sizes (smaller ones typically)
*/
.hideMe {
    display: none;
}





/**** media queries must go AFTER all default styling options *****/

/* media query tags for smaller screen sizes; handles responsiveness on diff devices
    820 x 1180 = ipad air
    1024 x 1366 = iPad Pro
    390 x 844 = iPhone 12 Pro
    375 x 667 = iphone SE 
*** according to best practices, set up views to work on the smallest devices first, then scale upwards to larger screens
    - this is most reliable method. see here: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries  */
/*------------------ media queries below ---------------*/

/* Extra small devices (phones, 600px and down) */
/* decided to start adjusting on any screen SMALLER than 767px for this site */
@media only screen and (max-width: 767px) {
    /*body {*/
        /*color here is ONLY to aid in debugging; NOT for published code*/
        /*color: blue;*/
    /*}*/
    /* on small screens we hide left nav and show those links under main content*/
    div#mySidebar {
        display: none;
    }
    div.hideMe{
        display: block;
    }

    /* right navigation loses its width on small screens; below fixes that */
    aside#nav_menu_1 {
        width: 200px;
        padding-left: 15px;
    }
    /*do not specify special settings here for main GRID; that way it will render 1 column wide on small screens */
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    /*body {*/
        /*color here is ONLY to aid in debugging; NOT for published code*/
        /*color: pink;*/
    /*}*/
    main {
        display: grid;
        grid-template-columns: auto auto; /* go down to 2 columns wide for small screens */
        column-gap: 10px;
    }
    /* right navigation loses its width on small screens; below fixes that */
    /* screens larger than 600 but smaller than 768 will receive below settings
        Since this is not set in larger @media queries below, it only affects screens under 768 
    */
    aside#nav_menu_1 {
        width: 200px;
        padding-left: 15px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    /*body {*/
        /*color here is ONLY to aid in debugging; NOT for published code*/
        /*color: lightgreen;*/
    /*}*/
    main {
        display: grid;
        grid-template-columns: auto auto; /* go down to 2 columns wide for small screens */
        column-gap: 20px;
    }

    /* below is needed in order to force the PubHub top and bottom nav bars to be centered! 
        for some unknown reason, when we publish this app, this was getting set to float: left which is wrong
        below does fix that. 
        if anyone decides they want the pubhub header and footer navbars to be left justified, just remove the below
    */
    ul.nav.navbar-nav {
        float: none;
    }
    /*end of fix for pubHub navbars to be centered */
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /*body {*/
        /*color here is ONLY to aid in debugging; NOT for published code*/
        /*color: violet;*/
    /*}*/
    main {
        display: grid;
        grid-template-columns: auto auto auto; 
        column-gap: 20px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /*body {*/
        /*color here is ONLY to aid in debugging; NOT for published code*/
        /*color: goldenrod;*/
    /*}*/
    main {
        display: grid;
        grid-template-columns: auto auto auto;   /*1fr 1fr 1fr;*/
        column-gap: 20px;
    }
}

/*very large screens! like our large center monitors*/
@media only screen and (min-width: 2500px) {
    main {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, auto) 1fr 1fr 1fr);
        column-gap: 20px;
    }
}



/*------------------end media queries for responsive design ---------------*/