/* CSS to be used by all pages.  @import must be first!  */

@import url('https://fonts.googleapis.com/css?family=Hind:600,400');
/* @import url('https://fonts.googleapis.com/css?family=Baloo'); */
@import url('https://fonts.googleapis.com/css?family=Exo+2:400,700i,900|Open+Sans:400,700&display=swap');


/***********************************************************************/
/* Specify all colors that aren't just shades of gray here             */
/* This file defines the default color as well                         */
/* Each category has its own custom colors defined in its own file     */


::selection {
    background: hsla(  9, 61%, 50%, 1.0);
    color:      white;
}

a.btn,
div.separator,
section.search-and-social,
div.section-divider           { background-color: hsla(  9, 61%, 50%, 1.0); }

section.results               { border-top:       1px solid #eee; }
h3.node-header                { border-bottom:    1px solid #eee; }

div.cat-item:hover, 
div.site-item:hover           { background-color: hsla(  9, 61%, 50%, 0.07); }

.slick-prev:before,
.slick-next:before,
a, a:visited, li.social-link  { color:            hsla( 11, 59%, 42%, 1.0); }
section.cats aside:hover      { background-color: hsla( 11, 59%, 42%, 0.2); }
hr                            { border-color:     hsla( 11, 59%, 42%, 0.2); }

section.alt-search            { border-bottom: 1px solid hsla(  9, 61%, 50%, 0.1); }
div.site-item                 { border-top:    1px solid hsla(  9, 61%, 50%, 0.1); }
div.site-item:first-of-type   { border-top: none; }

a:hover, li.social-link:hover { color: hsla( 11, 59%, 42%, 0.8); text-decoration: none !important; }
div.separator                 { background: hsla(  9, 61%, 50%, 1.0); }

div.current-cat {
   background: url(/css/category-icons/world.svg) no-repeat 0 0;
   background-size: 3em 3em;
   background-position: 0.5em 0.5em;
   min-height: 3.3em;
   font-weight: 600;
}


/***********************************************************************/

/* html { max-width: 1200px; margin: 0 auto; } */

body {  font-family: 'Hind', sans-serif; font-size: 16px; font-weight: 400;
        color: #333; margin: 0; padding: 0; }

#page { width: 100%; margin: 0 auto; position: relative; }

a  { text-decoration: none; }

div.text-body {
  padding: 25px;
}

a.table-of-contents { margin: 0 10px; }

.hidden { display: none; }

.padded { padding: 20px; }

table            { table-layout: fixed; }
td               { word-wrap: break-word; }
td div.faq-num   { display: inline-block; width: 25px; text-align: left; }
td:first-of-type { padding-right: 20px;}

div.feedback-block,
table.table-form { border: 1px solid #888; padding: 10px; margin: 10px; }
div.td-label { float: left; margin-right: 20px; }
div.td-input { display: inline-block; }
div.td-descr { float: left; font-size: 0.9em; margin: 10px; clear: both; }

div.fail-label { color: red; }

table.category-outer-box {
  width: 45%;
}

.themed-background {
/*  border: 1px solid #aaa;  */
/*  border-radius: 5px;  */
    background-color: #f5f5f5;
    box-shadow: 5px 5px 5px #aaaaaa;
}

div.suggestion-block {
    padding: 20px;
}

div.info-block {
    background-color: #f3f3e3;
    border: 1px solid #aaa;
    margin: 1em 0;
    clear: both;
    padding: 0.5em 1.2em;
}

div.info-item {
    padding: 10px 0;
}

div.important-info {
    font-weight: bold;
}

div.error-go-back {
    text-align: center;
    padding: 100px 50px;
}

.wordwrap {
    /* wrap long text and urls */
    white-space: pre;            /* CSS 2.0 */
    white-space: pre-wrap;       /* CSS 2.1 */
    white-space: pre-line;       /* CSS 3.0 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: -moz-pre-wrap;  /* Mozilla */
    word-wrap:   break-word;     /* IE 5+ */
}

.header-margin.no-search { margin-top: 84px; }

.mobile-only { display: none; }

.admin-only {   background: #f55; color: white; 
                margin-bottom: 10px; padding: 5px 10px; }

/* Use this to debug issues with margins, padding, ... */
/*div { border: 1px solid red; }*/

/* Text */

h1 { margin: 0 0   1em 0; font-size: 2.0em; font-weight: 600; }
h2 { margin: 0 0  .2em 0; font-size: 1.3em; font-weight: 600; line-height: 1em; }
h3 { margin: 0 0  .2em 0; font-size: 1.1em; font-weight: 400; }
h4 { margin: 0 0  .5em 0; font-size: 1.0em; font-weight: 400; }

/* aside h2 { text-decoration: underline; } */
aside h3 a:hover { font-weight: normal; text-decoration: underline; }

.d-outer  { background-color: lightblue; padding: 3px; }
.d-inner  { background-color: lightblue; border: 2px solid white; padding: 2px; }

div.have-read { padding: 1em 0;  font-weight: 600; }

label { font-weight: 600; }

span.subtext { font-size: 0.8em; }

p { margin: 0 0 1em 0; }

hr { width: 85%; }

/* Alphabar */

span.start  { margin-right: 4px;   }
span.pipe   { margin:       0 6px; }
span.end    { margin-left:  4px;   }

div.alphanumeric span.links   { font-size: 1.5em; display: inline-block; width: 0.8em; }
div.alphanumeric span.current { font-size: 1.8em; margin-right: 0.5em; font-weight: 600; color: #999; }

/******************/

.error-block{
    background-color: #F8F8BA;
    border: 1px solid red;
    color: red;
    margin: 1em 0;
    padding: 1em;
}

a.btn       { 
    font-size: 1.2em; 
    text-decoration: none; 
    color: white;
    transition: color .3s;
    transition: background-color .3s;
    border: 1px solid white; 
    padding: 1px 15px; 
}

a.btn:hover { 
    color: white;                       transition: color .3s; 
    background-color: rgba(0,0,0,0.4);  transition: background-color .3s; 
}

select {
    font-size: 1.1em;
    margin: 5px;
    border: 2px solid #ccc;
}

select:focus {
    outline: none !important;
    border: 2px solid #eee;
    box-shadow: 2 2 10px #ddd;
}

select.node-select {
    position: relative;
    left: 50px; 
    top: 15px;
}

#advanced-search-icon {
    position: relative;
    top: 3px;
    color: #ddd;
    transition: color .2s; 
}

#advanced-search-icon:hover {
    color: #fff;
    transition: color .2s; 
}

i.search-submit-button {
    font-size: 1.5em;
    margin: 0 9px;
    position: relative;
    top: 3px;
    color: #ddd;
    transition: color .2s; 
}

i.search-submit-button:hover { 
    cursor: pointer;
    color: #fff;
    transition: color .2s; 
}

div.advanced-search-option.search-help {
    margin-left: 60px;
    margin-top: 25px;
}

#node-search-home { text-align: center; }

#advanced-search-link {
    color: white;
    font-weight: 600;
    padding: 0px 10px;
    display: none;       /* hide this until we update the search help */
}

#advanced-search-link:hover { text-decoration: underline !important; }

div.separator {
    width: 100%;
    height: 3px;
}

#patreon-link {
    color: white;
}

#patreon-div {
    display: inline-block;
    padding-right: 10px;
}

/*************** Tooltips ***************/

/* on hover, show tooltip in white text on black background with 
   rounded corners, and an arrow on top pointing up to the element */

.tooltip {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.tooltip .tooltiptext {
    visibility: hidden;
    min-width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 8px 10px;
    position: absolute;
    z-index: 1;
    top: 120%;
    left: 50%;
    margin-left: -285%;
    opacity: 0;
    transition-delay: 0.3s;
    transition-property: opacity;
    transition-duration: 0.5s;
    font-family: 'Hind', sans-serif;
    font-weight: bold;
    font-size: 15px;   /* with 1 em, site-item tooltip is smaller than others */
}

.tooltip .tooltiptext.wide {
    min-width: 210px;
}

.tooltip .tooltiptext.low {
    top: 200%;
}

.tooltip .tooltiptext.left {
    left: 10px;
    margin-left: -7px;
}

.tooltip .tooltiptext.right {
    left: inherit;
    margin-left:inherit;
    right: 0%;
    margin-right: -9px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip .tooltiptext.left::after {
    left: 15px;
}

.tooltip .tooltiptext.right::after {
    right: 7px;
    left: initial;
    margin-left: initial;
    margin-right: 7px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/*************** Header ***************/

#head-wrapper {
    height: 220px;
}

div.twitter-follow {
    display: block;
    position: fixed;
    bottom: 13px; right: 15px;
    z-index: 2;
}

/* can only follow personal Facebook accounts, not Facebook Pages (for businesses, organizations, websites, ...) */
div.fb-follow { display: none; }

div.fb-like {
    display: block;
    position: fixed;
    bottom: 12px; right: 185px;
    z-index: 2;
}

/* twitter icon is higher than fb on the node and tree viewer pages, so adjust for it */
div.twitter-follow.viewer { bottom: 0px; }

/* Section - All 

   Includes a pseudo-html element (section::after) to make sure section is sized 
   to hold all elements inside
*/

section        { padding: 0 0; }
section::after { content:''; display: block; clear: both; }


/************** Section - Search **************/

section.search-and-social {  
    padding-top: 2px; 
    padding-bottom: 0px;
    color: #fff; 
}

#search-form {
    margin-block-end: 12px;
}

#more-search-options:hover { cursor: pointer; }
#more-search-options.hide-if-no-search-help { visibility: hidden; }

#share-google { display: none; }

section div.social {
    float: right;
    margin-top:   13px;
    margin-right: 15px;
}

section div.basic-search {
    display: inline-block;
    padding-top: 10px;
}

section div.advanced-search {
/*  display: inline-block;  */
    display: none; 
    margin-top: 10px;
}

section div.basic-search .text-box  { 
    width: 25em; 
    height: 2em;
    border: 2px solid #ccc;
    font-size: 1.1em;
    padding: 4px;
    margin-left: 0px;
    margin-top: 2px;
}

section div.basic-search .text-box:focus {
    outline: none !important;
    border: 2px solid #eee;
    box-shadow: 2 2 10px #ddd;
}

section div.basic-search input.btn   {
    width: 35px;
    font-size: 1.2em;
    text-decoration: none; 
    color: #fff; 
    border: 1px solid #fff;
    background: no-repeat;
    background-size: 25px 1.2em;
    background-image: url(../img/search.svg);
    background-position: center;
    transition: background-color .3s; 
    background-color: #ddd; 
    position: relative;
    left: 10px;
    top: 1px;
}

section div.basic-search input.btn.viewer {
    top: 5px;
}

section div.basic-search input.btn:hover {
    transition: background-color .3s;
    background-color: #fff;
}

#more-search-options {
    margin: 0 10px 0 25px;
    font-size: 1.3em;
}

section div.advanced-search a.btn   {
    display: block;
    margin: 1px 24px 0;
    font-size: 1.2em; 
    text-decoration: none;
    color: #fff; 
    border: 1px solid #fff;
    transition: background-color .3s; 
}

section div.advanced-search a.btn:hover {
    background-color: rgba(0,0,0,.5);
}

/* RAD try eliminating the basic search icon for now */
/* section div.basic-search input.btn  { display: none; } */
.advanced-search-option { display: none; }

fieldset.login        { width: 500px; }
fieldset.login button { margin-top: 10px; }
#div-forgot           { padding: 15px 0; }

/************** Social **************/

/* Font Awesome customization */
div.social .fa {
    color: #ddd;
    transition: color .2s;
    margin: 0px 2px;
    cursor: pointer;
}

div.social .fa:hover {
    color: #fff;
    transition: color .2s;
}

/************** Forms ***************/

form label                           { padding-right: 10px; }
div.form-item                        { padding: 5px; padding-bottom: 20px; border-bottom: 1px solid #ccc; }
div.form-new-item                    { margin: 8px; padding: 5px 0px 15px; border-top: 1px solid #eee; }
div.form-new-item div                { margin: 0 15px; }
div.form-new-item div.radio          { display: inline-block; }
div.form-new-item div.button         { width: 100%; text-align: center; padding-top: 20px; }
div.form-new-item input.radio        { width: auto; }
div.form-new-item input.password     { width: 10em; }
div.form-new-item textarea           { width: 80%; }
div.form-new-item input.email        { width: 40em; }
div.form-new-item input.captcha      { width: 10em; }
div.form-radio-item div              { margin: 0 20px 20px; }

#flag-form-details       { display: none; }
#current-listing-details { margin: 0 20px; padding-bottom: 30px; }
#current-listing-details div.form-item div { margin: 0 20px; }

div.g-recaptcha {
    clear: both;
    padding: 10px;
}

div.form-container {
    padding: 7px;
}

form div.field-name {
    font-weight: bold;
    float: left;
    clear: both;
    min-width: 150px;
}

form div.field-explanation {
    color: #666;
    font-size: 0.9em;
    font-style: italic;
    clear: both;
    margin: 0px 30px;
}

#apply-category-message { margin: 0 30px 15px; }

#public-abuse-check-status {
    padding-top: 10px;
    margin-top: 20px;
    border-top: 1px solid #eee;
}

img.audio-assist {
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin-left: 10px;
}

.editor-details img, .editor-main img {
    max-width: 400px;
    max-height: 400px;
}

.content:not(.description):not(.faq) { margin-top: 85px; }

footer.from-footer    { clear: both;  border-top: 1px solid #ccc;  padding-top: 10px; }

/* CSS to be used by the main (language-selection) home page */

div.all-leaves   { text-align: center; }
div.main-leaf    { text-align: center; }
div.other-leaves { text-align: center; display: none; }


html {
    scroll-behavior: smooth;
}

div.choose-your-language { text-align: center; padding-top: 40px; color: hsla( 11, 59%, 42%, 1.0);
                           font-family: "Exo 2"; font-weight: 900; font-size: 1.4em; }

div.choose-lang-wrapper {
    text-align: center;
}

div.choose-lang  {
    border: 1px solid darkgray;
    background: #f5f6f7;
    padding: 5px;
    padding-left: 17px;
    text-align: center;
    margin-bottom: 60px;
    display: inline-block;
}

div.choose-lang:hover {
    cursor: pointer;
    background: white;
}

#expand-lang-arrow {
    margin: 0px 10px;
    font-size: 1.3em;
    position: relative;
    top: 3px;
}

div.acorns-and-leaf { display: inline-block; }

div.single-leaf {
    background: url(/img/art-leaf.png) center center no-repeat;
    background-size: contain;
    width: 270px;
    height: 146px;
    padding: 2px 70px;
}

div.single-acorn {
    background: url(/img/art-acorn.png) center center no-repeat;
    background-size: contain;
    width: 54px;
    height: 69px;
    display: inline-block;
    text-align: center;
}

div.single-acorn.not-used {
    visibility: hidden;
}

div.half-acorn {   /* for centering an even number of acorns */
    width: 30px;
    display: none;
/*  display: inline-block; */
    visibility: hidden;
}

div.single-acorn:hover {
    cursor: pointer;
    filter: brightness(1.5);
}

div.lang-code {
    display: inline-block;
    position: relative;
    top: 32px;
    color: white;
    font-family: "Exo 2";
    font-size: 0.9em;
    font-weight: 900;
    text-shadow: 1px 1px #0c0b09;
}

/* Leaf labels start off hidden.  Proper label is shown when corresponding acorn is active */
div.leaf-label {
    display: none;
    position: relative;
    top: 61px;
    left: 10px;
    color: white;
    font-family: "Exo 2";
    font-size: 1.4em;
    font-weight: 900;
    text-shadow: 1px 1px #0c0b09;
}

/* Region label starts off displayed, narrower width than languages to force 2/3 lines */
div.leaf-label.region {
    display: inherit;
    top: 48px;
    left: 78px;
    width: 140px;
}

div.leaf-label.two-lines   { top: 48px; }
div.leaf-label.three-lines { top: 35px; }

div.leaf-labels  { text-align: center; }

div.acorns-top-row    { position: relative; top:  0px; margin-top: 40px; }
div.acorns-bottom-row { position: relative; top:  0px; margin-bottom: 50px; }

div.single-acorn { position: relative;  vertical-align: middle; }
div.lang-code.zh { top: 25px; } 

div.acorn-1  { transform: rotate(-32deg); top:  41px; left: 4px; }
div.acorn-2  { transform: rotate(-19deg); top:  11px; left: 0px; }
div.acorn-3  { transform: rotate(  0deg); top:  -5px; left: 0px; }
div.acorn-4  { transform: rotate( 13deg); top:   1px; left: 1px; }
div.acorn-5  { transform: rotate( 24deg); top:  20px; }
div.acorn-6  { transform: rotate( 29deg); top: -27px; }
div.acorn-7  { transform: rotate( 13deg); top:  -6px; }
div.acorn-8  { transform: rotate(  0deg); top:   0px; }
div.acorn-9  { transform: rotate(-13deg); top:  -6px; }
div.acorn-10 { transform: rotate(-16deg); top: -23px; }

div.pref-langs { text-align: center; padding: 40px; padding-top: 20px; }
div.pref-lang  { padding: 10px; color: black; display: inline-block; width: fit-content; height: 70px; margin: 0px 10px; }
div.pref-lang a.lang-str { display: inline-block; position: relative; top: 9px; font-family: "Exo 2"; font-weight: 900; font-size: 1.2em; }

/* Footer */

footer             { width: 100%; font-size: .9em; margin: 20px 0; color: #999; text-align: center; }
footer div         { display: inline-block; }
footer .left-side  { float: left;  padding-left: 10px; }
footer .right-side { float: right; padding-right: 10px; }
footer .build     { width: 100%; padding-top: 0; text-align: center; }
footer .build a   { color: transparent; }
footer .build p   { color: transparent; }


/*************** Large screens ***************/

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

    .mobile-only { display: none; }
}


/*************** Medium screens ***************/

@media screen and (max-width: 900px) {
    
    .mobile-only { display: none; }

    /* Text */
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.2em; }
    h3 { font-size: 1.1em; }
    h4 { font-size: 1.0em; }
}


/*************** Medium-Small screens ***************/

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

    .content:not(.description):not(.faq) { margin-top: 0px !important; }

    h1 { font-size: 1.5em; }
    h2 { font-size: 1.2em; }
    h3 { font-size: 1.1em; }
    h4 { font-size: 1.0em; }
    
    h3.stat     { font-size:  .9em; }    
    a.btn       { font-size: 1.0em; }
    input.btn   { font-size:  .9em; }

    div.form-new-item input:not(.submit) { width: 100%; }
    div.form-new-item input.radio        { width: auto; }
    div.form-new-item textarea           { width: 100%; }
    div.form-new-item input.email        { width: 100%; }

    .non-mobile  { display: none;  visibility: hidden;  width: 0px;  height: 0px; }
    .mobile-only { display: inherit; }
    
    fieldset.login { width: 90%; }

    /* Section - Search */  

    section div.basic-search { width: 82%; }

    section div.basic-search .text-box { width: 82%; margin-top: 6px; }
    section.search-and-social { padding-top: 0px; }

    select.node-select { display: inherit; left: 0px; top: 12px; }

    div.single-leaf { padding: 0px; }
}


/*************** Small screens ***************/

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

    /* Make the icon and top category big and eliminate the sub-categories */
    /* Make the icon and top category the custom category color            */

    h2.top-cat { margin-top: 15px; font-size: 1.5em; }
    h3.sub-cat { height: 0px; visibility: hidden; }

    #public-abuse-report-text   { width: 150px; }
    #public-abuse-captcha-image { width: 150px; }

    /* Footer */
    footer .build  { padding-top: 1em; }
}


/*************** Even smaller screens ***************/

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

}


@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}