/*
yardener-green: rgb(90, 144, 10);

 */
/*
from : https://www.joshwcomeau.com/css/custom-css-reset/
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
    margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
    height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: Arial,sans-serif,Verdana, Geneva, Tahoma;
}
/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
    font: inherit;
}
/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root, #__next {
    isolation: isolate;
}

body{
    margin: 0%;
    padding: 0% 5% 0% 5%;
    display: flex;
    flex-direction: column;
}
nav{
    display:flex;
}
.navbar {
    width:100%;
    font-family: "Lato", Sans-serif;
    text-transform: uppercase;
    background-color: rgb(90, 144, 10);
    color:white;
    margin: 15px 0 15px 0;
}
.navbar-brand{
    float:left;
    text-decoration:none;
    font-family: Arial, sans-serif, Verdana;
    padding: 0.2em 0.7em;
    font-size:1.2em;
    color:white;
}
.navbar-nav{
    margin: 0%;
}
.navbar .navbar-nav .nav-item{
    display:inline;
    list-style: none;
}
.navbar-nav .nav-item a{
    text-decoration:none;
    display: inline-block;
    font-size: 1.0rem;
    font-weight:800;
    padding: 0.9em 0.7em;
    color:white;
}
.navbar-nav .nav-item a:hover{
    background-color:rgba(232, 232, 232, 0.7);
    color:  rgb(90, 144, 10);
}
.toggle-collapse {
    float: right;
    width: 10%;
    height: 45px;
    margin: 0.4em 0.7em;
    color: rgba(232, 232, 232, 0.7);
    border: 1px solid rgba(232, 232, 232, 0.3);
    border-radius: 3px;
    cursor: pointer;
    display:none;
}


#header{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
    align-items:center;
    padding: 0 25px 0 25px;
}
.linkbutton{
    text-decoration:none;
    color: rgb(90, 144, 10);
    background-color:white;
    padding:0 5px 0 5px;
}
#searchdiv{
    flex-basis: 60%;
}
.search-box{
    font-size:1.1rem;
    padding:5px;
    border:1px solid rgb(90, 144, 10);
    border-radius: 5px;
    width: 90%;
    min-width:125px;
}
.yardener-fa{
    color: rgb(90, 144, 10);
    cursor:pointer;
    /*border: 1px solid rgb(90, 144, 10);
    border-radius:5px;
    padding:5px;*/
}
.submenu {
    position: absolute;
    border: 1px solid rgb(90, 144, 10);
    background-color: rgb(244, 244, 244);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow:hidden;
    text-transform: none;
}
.submenu, submenu2{
    z-index:99;
}
.submenu ul{
    list-style:none;
    padding: 0;
}
.submenu ul li{
    color: rgb(0,0,0);
    background-color: rgb(244, 244, 244);
}
.submenu ul li a{
    color: rgb(90, 144, 10) !important;
    background-color: rgb(244, 244, 244);
    width:100%;
}
.submenu ul li:hover {
    color: rgb(244, 244, 244) !important;
    cursor:pointer;
    background-color: rgb(90, 144, 10) !important;
}
.submenu ul li a:hover {
    color: rgb(244, 244, 244) !important;
    cursor:pointer;
    background-color: rgb(90, 144, 10) !important;
}
.social-btn-bg{
    border: 1px solid rgb(245, 245, 245);
    background-color: rgb(245, 245, 245);
    border-radius: 8px;
}
.hidden {
    display:none;
}
#content{
    position:relative;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    flex-basis:100%;
    box-sizing:border-box;
    font-size:1.2rem;
}
#readmore{
}
.read-more-text{
    margin-top:3.0rem;
    font-size: 1.5rem;
    color: rgb(90, 144, 10);
    font-weight: 700;
}
#readmore-links{
    margin:auto;
    text-align:left;
}
.current-page-link {
    color: rgb(90, 144, 10);
    font-weight:800;
}
.subpage-links{
    list-style-image: url('/images/bullet.svg');
}
.subpage-links li a{
    text-decoration-color: rgb(90, 144, 10);
    color: rgb(100, 90, 90);
    font-weight: 800;
    font-size:1.1em;

}
.social-top-links{
    display:inline-block;
}
/*search results*/
.results{
    display:flex;
    flex-wrap:wrap;
}
#page-results{
    flex-basis:45%;
}
#question-results{
    flex-basis:45%;
}
/*show question page*/
.question{
    border: 1px solid  rgb(90, 144, 10);
    color:  rgb(90, 144, 10);
    font-weight: 800;
}
.answer{
   font-weight:800;
}
.search-result-info{
    font-size:1.1em;
    font-weight: 600;
    color: rgb(90, 144, 10);
}
/* end search results*/
#columnMiddle2 {
    border: 3px solid rgb(90, 144, 10);
    padding: 1rem;
    margin-top:1.5rem;
    border-radius:1.1rem;
    font-size:1.2rem;
    flex-basis:100%;
    max-width:100%;
}
#footer{
    display:flex;
    justify-content:center;
    margin-bottom:2.5rem;
}
#columnRight{
    flex-basis:30%;
}
.copy{
    text-align: center;
}
.copy img{
    margin: 0 auto;
}
#share{
    flex-basis:100%;
}
#breadcrumbs{
    width:100%;
}
h1{
    color: rgb(90, 144, 10);
}
.amazon-link-image{
    margin:auto;
}
.social-link{
    cursor:pointer;
}

.ad-para{
    margin: 15px 0 15px 0;
    border-top: 3px solid rgb(90, 144, 10);
    border-bottom: 3px solid rgb(90, 144, 10);
    box-sizing: border-box;
    overflow: auto;
}
.no-ad-borders{
    border-top:none !important;
    border-bottom:none !important;
}
#footer{
    margin-top: 2.0rem;
}
/*
Ask nancy
 */
.askT{
    margin:auto;
    background-color: rgb(90, 144, 10);
    color:white;
    font-weight:800;
    border: none;
    border-radius: 15px;
    border-collapse: collapse;
    flex-basis:100%;
    font-size:1.1rem;
}
.askT table > tr {
    background-color: rgb(90, 144, 10);
}
.askT table > tr > td,th {
    padding:15px;
}
.form-div{
    text-align: center;
    margin-top: 30px;
    flex-basis:100%;
    align-self: center;
    width:100%;
    font-size:1.1rem;
}
.details{
    padding: 1.2rem 1rem 0 10rem;
    text-align: left;
    padding-left: 1rem;
    font-size: 1.1rem;
}
.askT > div{
    margin-top: 1.2rem;
    text-align: left;
    padding-left: 1rem;
    font-size:1.4rem;
}
#question{
    width:98%;
    font-size:1.1em;
    text-align:left;
}
.askT > div > input{
    width:98%;
}
#uploadimagebtn{
    text-align:center;
}
#addimage{
    margin:auto;
    width:auto;
    padding:0.5rem;
    border-radius:0.7rem;
}
#submit-div{
    text-align:center;
    padding-bottom:1.5rem;
    border-radius:0.2rem;
}
#submit-btn{
    margin:auto;
    width:auto;
    padding:0.5rem;
    border-radius:0.7rem;
}
#recaptcha{
    display:flex;
    justify-content:center;
}
.image-div{
    display:flex;
    justify-content:center;
}
.image-div > input{
    flex-basis:50%;
}
#agree-div{
    display:flex;
    justify-content:center;
}
#message{
    color:red;
    text-align:left;
    padding:3%;
}
.agree-div-class{
    display:flex;
    justify-content:center;
}
#sharename{
    width:25%;
    height:1.5em;
}
#affirmcopy{
    width:25%;
    height:1.5em;
}
#horizb{
    text-align:center;
}
/*blog posts*/
.local-blog-link{
    text-decoration:none;
    color: rgb(90, 144, 10);
    font-weight: 600;
    cursor:pointer;
}
.image-credit{
    font-size:0.8em;
}
.blog-post-list-item {
    max-width:23%;
    flex-basis:100%;
    flex-shrink: 0;
    border:2px solid rgb(90, 144, 10);
    padding: 1.2rem;
    cursor:pointer;
    /*background-color:  rgb(90, 144, 10);
    color:white;*/
    color: rgb(90, 144, 10);
    border-radius: 1.0rem;
    margin:1%;
}
.blog-post-list-title{
    width:100%;
    text-align:left;
    font-weight:600;
    font-size:2.0rem;
    clear: both;
}
.post-summary{
    color:black;

}
.blog-post-list-item img{
    max-width:100%;
}
.blog-item-post-date{
    position:relative;
    width:100%;
    font-size: 0.9rem;
    font-weight: 400;
    /*text-align:right;*/
    margin-top:0.5rem;
    margin-bottom:0.5rem;
}
.posted-by{
    float:right;
    color: black;
}
.post-date{
    float:left;
    color:black;
}
.blog-item-post-creator{
    font-weight:400;
    font-size: 0.9em;
    margin-top: 1.0em;
}
.blog-post-thumb{
    position: relative !important;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
#recent-posts-div {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}
/*editing*/
.border{
    border: 1px solid rgb(90, 144, 10);
}
.expandable{
    overflow:auto;
    resize:both;
}
#page_data{
    width:90vw;
    /*height:150vh;*/
    height:auto !important;
    overflow:hidden !important;
}
.page-meta-fields{
    width:90vw;
}
#post_data{
    width:90vw;
    height:auto !important;
    overflow:hidden !important;
}
.post-meta-fields{
    width:85vw;
    border-top:2px solid rgb(90, 144, 10);
    border-bottom:2px solid rgb(90, 144, 10);
    padding:1em 0 1em 0;
    overflow:hidden;
    height:auto;
}
.edit-post-help{
    display:inline-block;
    max-width:40vw;
    margin-left:3em;
}
#thumb{
    width:50vw;
    margin:auto;
    height:auto !important;
    overflow:hidden !important;
}
#fixed-top-button{
    position:relative;
    margin-left:45%;
}
.searchT{
    width:90%;
    margin:auto;
}
.searchT td input{
    width:70%;
}
.searchT tr td:first-of-type{
    color: rgb(90, 144, 10);
    font-weight:800;
}
/*editing responsive video fixes*/
.auto-resizable-iframe {
    max-width: 560px;
    margin: 0px auto;
}

.auto-resizable-iframe > div {
    position: relative;
    padding-bottom: 75%;
    height: 0px;
}

.auto-resizable-iframe iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
/*answers*/
.asker{
    font-size:0.8em;
    margin:1.0em;
}
.question{
    margin:1.0em;
}
.answer{
    margin:1.0em;
}
/*quill editor*/
.float-right{
    float:right;
}
/*photos form*/
.country-select{
    font-size:1.4em;
    width:100%;
}
.simple-form-field{
    width:60%;
    margin:auto;
}
.simple-form-directions{
    font-size:1.1em;
    padding:1% 5% 1% 5%;
    text-align:left;
}
.simple-form-legal{
    font-size:0.8em;
    padding:1% 5% 1% 5%;
    text-align:left;
}
@media screen and (max-width:768px) {
    .simple-form-field{
        width:100%;
        flex-basis:100%;
    }

    .blog-post-list-item{
        max-width:100%;
        flex-basis:100%;
    }
    .searchT table, thead, tbody, th, td, tr {
        display:block;
    }
    .searchT td{
        text-align:center !important;
    }
    .searchT td input{
        width:90%;
        margin:auto;
    }
    .searchT tr td:first-of-type{
        color: rgb(90, 144, 10);
        font-weight:800;
        text-align:center !important;
    }
    #cboxes 	/* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    .social-top-links{
        display:none !important;
    }
    #yardener-logo-image{
        margin:auto;
    }
    .ad-para{
        border-top: 0px;
        border-bottom: none;
    }
    /*@media screen and (max-width:456px){*/
    #share{
        flex-basis:100%;
    }
    #breadcrumbs{
        flex-basis:100%;
    }
    #header{
        padding:0;
    }
    .navbar-brand{
        display:inline-block;
        float:none;
    }
    .toggle-collapse {
        display: inline-block;
        color:rgb(90, 144, 10);
        flex-shrink: 0;
        width: 2.3rem;
    }
    .navbar-nav{
        color: white;
        padding: 0%;
    }
    .navbar .navbar-nav .nav-item{
        display: block;
        list-style: none;
    }
    .navbar-collapse {
        width:100%;
        overflow: hidden;
        text-align: center;
        height: 0vh;
        transition: all 499ms ease;
    }
    .collapse{
        height: auto;
    }
    .subpage_links{

    }
    .subpage_links li a{
        text-decoration: none;
        cursor:pointer;
        font-size: 1.0rem;
        color: rgb(90, 144, 10);
    }
    /*https://www.google.com/search?q=hwo+to+make+embedded+youtube+video+responsive&oq=hwo+to+make+embedded+youtube+video+responsive*/
    .iframe-container{
        position:relative;
        width:100%;
        padding-bottom: 56.25%;
        height:0;
    }
    .iframe-container iframe{
        position:absolute;
        top: 0;
        left:0;
        width:100%;
        height:100%;
    }

    /*@media screen and (max-width:578px) {*/
    #logo {
        flex-basis:100%;
        text-align: center;
        width:100%
    }
    #searchdiv {
        flex-basis:100%;
        padding-left:1.5rem;
    }
    #signin {
        flex-basis:100%;
        margin-top:1.0rem;
    }
    .submenu {
        position: relative;
        width:100%;
        flex-basis:100%;
        justify-content:center;
    }
    .submenu ul li{
        text-align:center;
    }
    /*search results*/
    #page-results{
        flex-basis:100%;
    }
    #question-results{
        flex-basis:100%;
    }
    /* end search results*/
}