/* Light mode */
:root { --totl-primary-background: #fff; --totl-primary-font-color: #000; --totl-filter-videos-image: invert(0); --totl-header-background: rgba(255,255,255,.93); --totl-brand-name-color: #444; --totl-second-background: #f8f8f8; --totl-border-line: 1px solid #f5f5f5; --totl-nav-color: #000; --totl-nav-background-hover: #ebebeb; --totl-nav-border: 1px solid #e9e9e9; --totl-showmenu-background-hover: #ebebeb; --totl-donate-banner-background: #f6e3a9; --totl-donate-button-color: #006cd8; --totl-a-color: #1d6fdc; --totl-footer-a-color: #595959; background-color: var(--totl-primary-background); color: var(--totl-primary-font-color); --totl-primary-sidebar-background: #f5f5f5; --totl-sidebar-icon-background: #373737; --totl-svg-fill-color-hover: #ebebeb; --totl-fig-cap:#666; --totl-browser-lamp-filter: invert(0) brightness(1); }
/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root { --totl-primary-background: #232323; --totl-primary-font-color: #fff; --totl-filter-videos-image: invert(1); --totl-header-background: #232323; --totl-brand-name-color: #fff; --totl-second-background: #313131; --totl-border-line: 1px solid #6f6f6f; --totl-nav-color: #fff; --totl-nav-background-hover: #444444; --totl-nav-border: 1px solid #333333; --totl-showmenu-background-hover: #444444; --totl-donate-banner-background: #ffbe00; --totl-donate-button-color: #0053a7; --totl-a-color: #2a9cff; --totl-footer-a-color: #ffffff; background-color: var(--totl-primary-background); color: var(--totl-primary-font-color); --totl-primary-sidebar-background: #1c1c1c; --totl-sidebar-icon-background: rgba(255,255,255,.882); --totl-svg-fill-color-hover: #474747; --totl-fig-cap:#afafaf; --totl-browser-lamp-filter: invert(1) brightness(2); }
}
html { font-size: 16px}
body, html { height: 100% }
body { font-size: 1rem; line-height: 20px; padding: 0; margin: 0; width: 100%; font-family: Arial,Helvetica,sans-serif }
main { height: initial; display: block; width: 100%;overflow: hidden; }

.center iframe, .promo, header { left: 0; right: 0 }
header { box-shadow: 0 0 5px rgba(0,0,0,.26); position: relative}
.footerMenu, .footerMenu li { list-style-type: none }
.brandname, nav a { font-weight: 400 }
.brandname { font-family: Verdana; color: var(--totl-brand-name-color); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-left: 54px; font-size: 18px; position: absolute; top: 17px; left: 0; cursor: pointer }

#headlamp { -webkit-filter: var(--totl-browser-lamp-filter); filter: var(--totl-browser-lamp-filterr) }

a { color: var(--totl-a-color) }

/* Donation Box Styles */
.donatebox{
    background: black;
    /*   background: var(--totl-donate-banner-background);*/
    color:white
}
.donatecontent{
    width: 1000px;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
}
.donatetext{margin-bottom:8px;}

.payment-methods{
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.25rem;
}
.payment-methods i {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}
.payment-methods__paypal {
    aspect-ratio: 101 / 32;
    background-image: url(/images/payments/paypal-logo-white.svg);
    height: 1rem;
}
.payment-methods__gpay {
    aspect-ratio: 41 / 17;
    background-image: url(/images/payments/icon-gpay.svg);
    height: 1rem;
}
.payment-methods__visa {
    aspect-ratio: 1 / 1;
    background-image: url(/images/payments/visa.svg);
    filter: brightness(3);
    height: 1.5rem;
}
.payment-methods__mastercard {
    aspect-ratio: 1 / 1;
    background-image: url(/images/payments/mastercard.svg);
    height: 1.5rem;
}
.payment-methods__amex {
    aspect-ratio: 1 / 1;
    background-image: url(/images/payments/amex.svg);
    height: 1.5rem;
}

@media only screen and (max-width:480px), only screen and (max-device-width:480px) {
   .donatecontent{width: 100%;}
}
@media(max-width:640px) {
   .donatecontent{width: 100%;}
}
/* End of Donation Box Styles */

.accessible { display: none; touch-action: none }
article, aside, footer, header, nav, section { display: block }
.brandname, nav, nav a, figure { display: inline-block }

h2 { margin: 10px 0 }
.leftboxside p, .rightboxside p, .leftbigboxside p { text-align: justify }

.crossline { border-left: 2px solid #4d90fe; padding-left: 20px; display:none }

#wraphead { min-height: 56px; align-items: center; display: flex; position: relative; margin: 0; padding: 0 16px }
header .icon { position: relative; display: inline; margin: 0; top: 1px }

.show-menu { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 399; position: absolute; top: 5px; right: 5px; height: 45px; width: 45px; border-radius: 50% }
    .show-menu:hover { background: var(--totl-showmenu-background-hover); cursor: pointer }
#menuToggle { height: 12px; width: 20px; border-radius: 50%; position: absolute; top: 0; bottom: 0; margin: auto; left: 0; right: 0 }
    #menuToggle span { display: block; width: 20px; height: 2px; margin-bottom: 3px; position: relative; background: var(--totl-primary-font-color) }
nav { height: 36px;right: 30px; position: absolute; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px)}
    nav a { color: var(--totl-nav-color); font-family: verdana; font-variant: normal; text-align: center; float: left; padding: 8px 20px; text-decoration: none; transition: .3s }

.subnav .innersubnav li a, .subnav .innersubnav li a:visited { text-decoration: none }

nav a:hover { background-color: var(--totl-nav-background-hover) }
nav a:active { box-shadow: inset 0 0 5px rgba(0,0,0,.7) }

.subnav { width: 100%; height: 30px }
    .subnav .innersubnav { width: 1000px; height: 30px; margin: auto }
        .subnav .innersubnav ul { float: right; margin: 0 }
            .subnav .innersubnav li { display: inline-block; margin: 10px }
                .subnav .innersubnav li a:hover { text-decoration: underline }

.brandname, .linklogodownload { text-decoration: none }

.search-container { float: right }
.search-container form{ position: relative }
.search-container .searchicon { position: absolute; top: 5px; left: 5px; height: 20px; width: 20px; padding: 3px; border-radius: 20px}
.search-container .searchicon:hover { background: var(--totl-svg-fill-color-hover); cursor: pointer }
.search-container .searchicon svg { fill: var(--totl-sidebar-icon-background)}
.search-container input[type=search] { color: var(--totl-primary-font-color); background: var(--totl-primary-sidebar-background); border: 0; border-radius: 5px; height: 35px; padding: 10px 10px 10px 40px; box-sizing: border-box; outline: none; width: 100%; max-width: 975px; -webkit-appearance: none; appearance:none }

.hidden { display: none }
figure, h1, h2, h3, h4 { padding: 0; margin: 0 }

main section { position: relative; width: 970px; margin: 50px auto 0; text-align: justify }
main section a img { border: 0 }

.stylebold { font-weight: 700 }
figcaption { margin: 10px 0 0; font-variant: small-caps; font-family: Arial; font-weight: 700; color: var(--totl-fig-cap) }

.linkplay, .linkplay:active, .linkplay:visited { cursor: pointer; background-image: -webkit-image-set(url(/images/youtube-play-small.webp) 1x,url(/images/youtube-play-small@2x.webp) 2x); background-image: image-set(url(/images/youtube-play-small.webp) 1x,url(/images/youtube-play-small@2x.webp) 2x); background-image: url(/images/youtube-play-small.webp); background-repeat: no-repeat; color: #167ac6; text-decoration: none; font-size: 14.4px; line-height: 32px; background-size: 35px 25px; padding: 6px 6px 6px 50px; background-position: 2px 2px }
.linkplay:hover { color: #08c; text-decoration: underline }

.promo { display: block; width: 90%; font-size: 16px; color: #000; text-decoration: none; margin: 0 auto; position: relative; z-index: 500 }
.promo:hover { color: #47b4ef }
.promo .highlight { color: var(--totl-donate-button-color); text-decoration: underline }

.footerMenu li a, footer a:link, footer a:visited { text-decoration: none }

footer { z-index: 800; position: relative; float: left; width: 100%}
    footer .footertop { width: 1000px; margin: auto }
        footer .footertop a { padding: 15px 0 }
    footer .footerbottom { background-color: var(--totl-second-background); height: 145px}
    footer .footertext { margin: 0 auto; width: 1000px; position: relative }

.copyright { float: left; margin: 20px 0 0; padding:15px 0}
.footerMenu { padding: 0; float: right; margin: 15px 0 0 0}
footer .footerTopWrapper ul { list-style: none; padding: 0; margin: 0 0 10px}

.footerMenu li { position: relative; display: inline; float: left; padding: 5px }
footer .footerTopWrapper .onefourth { vertical-align: top; display: inline-block; width: 180px; margin-top: 30px; position: relative;margin-right: 20px; margin-bottom: 60px }
.footerMenu li a { text-transform: uppercase; color: var(--totl-primary-font-color); padding: 15px }
.footerMenu li a:last-of-type { padding:15px 0px 15px 15px }
footer li { color: var(--totl-primary-font-color); line-height: 18px; margin-bottom: 0 }
footer a, footer a:visited { color: var(--totl-footer-a-color)}
footer a:hover { text-decoration: underline; color: #000 }

hr { border-top: 1px solid #808080; border-bottom: 0; padding: 0; margin: 0 }
#turnoffthelights-chrome-thanks-button div, #turnoffthelights-firefox-thanks-button div, #turnoffthelights-ie-thanks-button div, #turnoffthelights-opera-thanks-button div, #turnoffthelights-safari-thanks-button div { font-weight: 700 }

a.glassbutton, a.glassbutton:visited { font-family: 'PT Sans',arial,serif; text-align: center; display: inline-block; cursor: pointer; font-size: 18px; padding: 15px 35px; margin: 0; text-decoration: none; background: #1a73e8; border: 0; color: #fff; border-radius: 2px }
a.glassbutton:hover { background: #174ea6; text-decoration: none }
a.glassbutton img { vertical-align: bottom }

button.glassbutton, button.glassbutton:visited { font-family: 'PT Sans',arial,serif; text-align: center; display: inline-block; cursor: pointer; font-size: 18px; padding: 15px 35px; margin: 0; text-decoration: none; background: #1a73e8; border: 0; color: #fff; border-radius: 26px }
button.glassbutton:hover { background: #174ea6; text-decoration: none }

.textleft { padding-top: 100px; float: left; width: 475px }
.textleft, .textright { display: inline-block }
.textright { float: right }
    .textleft p { font-size: 16px; line-height: 1.5; text-align: justify }
.introbrowser { width: 1100px; height: 880px; margin: 10px auto 25px }
.introtitel { font-size: 45px; line-height: 1.5em }
.introend { height: 10px; margin: 10px auto 25px; background-image: linear-gradient(to right,#fff 0,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,#fff 100%),linear-gradient(to bottom,rgba(190,190,190,.75),rgba(190,190,190,0) 2px) }

.producttitle { margin: 5px 0 .3em;font-size: 22px; font-weight: 400; line-height: 1.4; padding: 30px 0 22px; font-style: normal; color: #000 }
.sectionproducttitle { font-size: 13px; font-weight: 700; font-style: normal; line-height: 1.5; color: #000; margin: 0; padding: 0 }

.wideads { width: 970px; min-height: 100px; height: 250px; text-align: center; position: relative; margin: 30px auto }
.wideads iframe { width: 970px; height: 90px; border: 1px solid #EEEEEE }

.ratebutton { display: inline-block; cursor: pointer; font-size: 18px; padding: 15px 35px; margin: 0; text-decoration: none; background-color: rgba(255,207,0,1); border: 0; color: #3e3e3e }
    .ratebutton:hover { color: #3e3e3e; background: #e4bb08; text-decoration: none }

.center { text-align: center }
.center iframe { position: absolute; margin: auto }

.btnblogsubscribe { border-radius: 2px; background-color: #1a73e8; color: white; width: 320px; height: 30px; display: flex; justify-content: center; flex-direction: column; text-align: center; font-family: verdana; cursor: pointer; text-decoration: none; font-size: 16px }
.btnblogsubscribe:hover { background: #174ea6; text-decoration:none;color:white }
.subscribeemail { display: inline-block; padding: 0}
.subscribeemail div { display: block; height: 34px; line-height: 34px; float: left; margin-right: 30px }

.learnbox { position: relative; width: 100%; border-top: var(--totl-border-line); height: 50px; content-visibility: auto }
.learninner { width: 1000px; margin: 10px auto 0 }

footer a { display: block }
footer .inner { width: 1000px; margin: 0 auto; overflow: hidden; font: 400 14px/1.285 Helvetica,Arial,sans-serif }
footer #footer-socialmedia { padding: 20px 0; background: var(--totl-second-background); content-visibility: auto }
footer #footer-socialmedia .title { float: left; width: 20%; font: 700 20px/1.25 Helvetica,Arial,sans-serif }
footer #footer-socialmedia ul { float: right; width: 80%; margin: 0; padding: 0 }
footer #footer-socialmedia li:first-child { margin-left: 0; float: left }
footer #footer-socialmedia li { margin-left: 85px; float: left; display: inline }
#footer-socialmedia li a { display: flex; align-items: center; flex-direction: column }
#footer-socialmedia li a svg { margin: 0 auto 1em; fill:var(--totl-primary-font-color) }

#show-menu, .show-menu { display: none }
#show-menu:checked ~ #menu { display: block }

.tips { cursor: help; color: #808080 }

.flag { display: inline-block; margin-right: 5px; height: 9px }
    .flag .redstroke { display: inline-block; background: #FF0F21; height: 12px; width: 4px}
    .flag .yellowstroke { display: inline-block; background: #FFE936; height: 12px; width: 4px}
    .flag .blackstroke { display: inline-block; background: black; height: 12px; width: 4px}

/* for the top navigation bar only */
@media only screen and (max-width:1085px), only screen and (max-device-width:1085px) {
    header { z-index: 900 }
    .show-menu { display: block }
    .brandname, section { display: inline-block }
    nav { width: 320px; top: 56px; display: none; float: right; height: 404px; border-bottom: var(--totl-nav-border); box-shadow: 0 2px 5px rgba(0,0,0,.26) }
        nav a { padding: 10px 0; border-bottom: var(--totl-nav-border); width: 100%;position: relative; text-decoration: none; margin: 0; text-align: center }
            nav a:first-child { border-top: var(--totl-nav-border) }
        nav .search-container { width: calc(100% - 40px); padding: 20px; color: #fff }
        .brandname, .promo, a.glassbutton, nav a, nav a:hover { text-decoration: none }
        header, nav .search-container, nav a { background: var(--totl-header-background) }
    header, nav { right: 0 }
        nav a, section p { margin: 0 }
    #wraphead { display: block }
    .learninner, footer .inner, footer .footertop, footer .footertext { width: 100% }
}
/*---*/

@media only screen and (max-width:480px), only screen and (max-device-width:480px) {
    nav { width: 100%; left: 0; right: 0 }
    main section{width: calc(100% - 20px);margin: 50px auto 0;padding: 10px;}

    #wraphead, nav a { text-align: center }
    .footerMenu, footer .footerTopWrapper .onefourth li { list-style-type: none }
    .subnav, .subnav .innersubnav { display: inline-block; width: 100%; height: 30px }
    .brandname { margin-left: 25px }
    header { padding: 0; top: 0; z-index: 1001 }
    #wraphead { margin: 0 auto; width: 100%; padding: 0 }

    section { width: calc(100% - 20px); margin: 50px auto 0; padding: 10px }
    figure img { width: 100% }

    .promo, a.glassbutton { font-weight: 700 }
    .promo { display: block; width: 100%; margin: 20px auto 10px; text-align: center; font-size: 16px; color: #000; left: 0; right: 0; position: absolute; z-index: 500 }

    .copyright { float: none }
    .footerMenu { padding: 0; float: right; margin: 15px 20px 0 }
    footer #footer-socialmedia .title { width: calc(100% - 20px); text-align: center; margin: 10px }
    footer #footer-socialmedia ul { float: none; width: 100%; margin: 0; padding: 0; text-align: center }
        footer #footer-socialmedia li, footer #footer-socialmedia li:first-child { margin: 10px; float: none; display: inline-block }
    .learnbox { height: 94px }
    .learninner { width: 100%; text-align: center }
    .subscribeemail div { float: none; margin-right:initial }
    footer .inner { width: 100%; margin: 0 auto; overflow: hidden; font: 400 14px/1.285 Helvetica,Arial,sans-serif }
    footer .footertop { width: 100%; margin: auto }
    footer .footerbottom { height: 145px; text-align: center }
    footer .footertext { margin: 0 auto; width: 100%; position: relative }
    footer .footerTopWrapper { width: 100% }
        footer .footerTopWrapper a { padding: 16px 0 }
        footer .footerTopWrapper .onefourth { margin: auto; display: block; text-align: center }
    .textright img { width: 100%; height: auto }
}

.left, .left img { float: left }
.left, .right { width: 49% }
    .right, .right img { float: right }

@media(max-width:640px) {
    .wideads { width: 100% }
    .wideads iframe { width: 300px; height: 250px }
    .introbrowser { width: 100%; height: auto; margin: 10px auto 25px }
    .textleft { display: block; float: left; width: 90%; margin: 10px auto; padding: 10px }
    .left, .right { float: none; width: 100% }
}

/* Google Adsense */
.respontotl, .respontotlrect { display: inline-block; width: 300px; height: 250px }
@media(min-width:500px){.respontotl{width:468px;height:60px}}
@media(min-width:800px){.respontotl{width:728px;height:90px}}
@media(min-width:1000px){.respontotl{width:970px;height:90px}}
@media(min-width:500px){.respontotlrect{width:300px;height:250px}}
@media(min-width:800px){.respontotlrect{width:970px;height:250px}}
@media print{}