/*
 Theme Name:   BlackCrystal
 Theme URI:    http://blackcrystal.net/
 Description:  BlackCrystal
 Author:       Sergei Miami
 Author URI:   http://blackcrystal.net/miami
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  blackcrystal
*/

@font-face {
    font-family: 'ClearSans';
    font-weight: normal;
    src: url('font/ClearSans-Light.woff') format('woff'),
    url('font/ClearSans-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'ClearSans';
    font-weight: bold;
    src: url('font/ClearSans-Regular.woff') format('woff'),
    url('font/ClearSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'ClearSansThin';
    font-weight: normal;
    src: url('font/ClearSans-Thin.woff') format('woff'),
    url('font/ClearSans-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'ProximaNova';
    font-weight: normal;
    src: url('font/ProximaNova-Reg.woff') format('woff'),
    url('font/ProximaNova-Reg.otf') format('opentype');
}

@font-face {
    font-family: 'ProximaNova';
    font-weight: bold;
    src: url('font/ProximaNova-Bold.woff') format('woff'),
    url('font/ProximaNova-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'ProximaNovaThin';
    font-weight: normal;
    src: url('font/ProximaNova-Light.woff') format('woff'),
    url('font/ProximaNova-Light.otf') format('opentype');
}

/*** reset ***/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*** something for transposh */

.widget_transposh .no_translate br {
    display: none;
}

/*** something for main */

body {
    line-height: 1.7;
    background-color: #f5f5f5;
    font-family: ClearSans, Helvetica, Arial, system-ui;
    font-size: 12pt;
    color: #222;
}

a, a:link, a:visited {
    color: #1234f8;
    text-decoration: none;
}

a:hover, a:active {
    text-decoration: underline;
}

sup {
    vertical-align: top;
    font-size: 0.7em;
    top: 1em;
}

em {
    font-style: italic;
}

#bc-nav {
    padding: 3em 0 1em;
    background: transparent url('bgtop.png') repeat-x top;
    line-height: 2.2em;
}
#bc-nav .logo {
    display: none;
    height: 40px;
    width: auto;
}

#primary-menu {

}

#primary-menu li {
    display: inline;
    margin-right: .5em;
}

#primary-menu li.menu-item-home a::before {
    content: "";
}

#primary-menu li a {
    padding: 5px 5px 5px 0;
    text-decoration: none;
    font-size: 250%;
    font-family: ProximaNovaThin, ClearSansThin, Helvetica, Arial, system-ui;
    white-space: nowrap;
    letter-spacing: -1px;
}


#primary-menu li.current-menu-item a,
#primary-menu li.current-page-parent a {
    color: #222;
}

#map {
    position: fixed;
    top: 30px;
    right: 5px;
    width: 100px;
    height: 100%;
    z-index: 100;
}

.widget-title {
    font-weight: bold;
}
#blackcrystal-search {
}

#blackcrystal-search .text {
    padding: .7em 30px .7em .7em;
    width: 70%;
    border: 1px solid #ddd;
    font-size: 1.0em;
}
#blackcrystal-search .submit {
    font-size: 17px;
    position: absolute;
    width: 35px;
    margin-left: -35px;
    padding: .5em;
    background: transparent;
    border: 0;
    cursor: pointer;
}


#breadcrumbs {
    margin-top: 3em;
}

.wrap {
    width: 90%;
    min-width: 300px;
    max-width: 1150px;
    margin: 0 auto;
}

.clearfix { clear: both; }
.more-link, .btn, input[type=submit], input[type=button], button {
    font: inherit;
    display: inline-block;
    margin: 0.1em 0 0;
    padding: .5em 1em;
    text-decoration: none;
    color: #fff;
    background: #1234f8;
    border: 0;
    cursor: pointer;
}
.more-link:hover, .more-link:active, .btn:hover,
input[type=submit]:active, input[type=button]:active, button:active,
input[type=submit]:hover, input[type=button]:hover, button:hover {
    background: #333;
    text-decoration: none;
}
.more-link:link, .more-link:visited, .btn:focus {
    color: #fff;
    text-decoration: none;
}

#content {
}

#sidebar {
    margin-top: 2em;
}

#sidebar aside {
    margin-bottom: 1em;
}

@media (min-width: 782px) {
    #content {
        float: left;
        width: 66%;
    }

    #sidebar {
        margin-top: 0;
        float: right;
        width: 30%;
    }
    #bc-nav { padding: 2em 0; }
    #bc-nav .logo { display: inline; }
    #bc-nav li a { font-size: 250%; }
}


#content h1, #content h2, #content h3 {
    margin: .5em 0 0;
    line-height: 1.2em;
}

#content p {
    margin: .5em 0 .3em;
}

#content h1 {
    font-size: 190%;
}

#content h2 {
    font-size: 160%;
}

#content h3 {
    font-size: 120%;
}

#content h1, #content h2, #content h3 {
    font-family: ProximaNova, ClearSansThin, Helvetica, Arial, serif;
    font-weight: normal;
    letter-spacing: -1px;
}

pre, code {
    padding: 4px 12px;
    margin: 0;
    font-family: monospace,ClearSans, Helvetica, Arial;
    font-size: 90%;
    overflow-x: auto;
    background-color: #fff;
    border: 9px solid #f3f3f3;
}

code {
    padding: 4px;
    border: 1px solid #f3f3f3;
    border-radius: 0;
}



blockquote {
    background-color: #f9f9f9;
    border-left: 5px solid #ccc;
    padding: 10px;
    font-family: ClearSansThin, Helvetica, Arial, system-ui;
    line-height: 1;
    margin: 0;
}

blockquote p {
    font-size: 11pt;
}

img {
    max-width: 100%;
    height: auto;
}

input, textarea {
    font-size: 1.0em;
    border: 1px solid #ddd;
    padding: .7em 30px .7em .7em;
    color: #333;
}

input[type=text], textarea {
}

.cscfForm .control-group {
    margin-bottom: .5em;
}

.cscfForm .form-control {
    width: 80%;
}

#sidebar blockquote {
    min-width: 140px;
}

.postmeta {
    color: #aaa;
}
.postmeta a {
    color: #666;
}


/* widgets */

.widgettitle span {
    font-family: ProximaNova, ClearSansThin, Helvetica, Arial, system-ui;
    font-weight: normal;
    letter-spacing: -1px;
}
.widget_recent_entries ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.widget_recent_entries li {
    margin-bottom: 3px;
    border-left: 5px solid #ccc;
    padding: 3px 10px;
    background-color: #f9f9f9;
}

#footer {
    background: transparent url('bgbottom.png') repeat-x top;
    border-top: 0;
    padding-top: 2em;
    padding-bottom: 2em;
    margin-top: 5em;
    text-align: center;
    color: #666;
}

#footer nobr {
    margin: 0 .2em;
}

.page-title {
    display: none;
}

/*** columns by miami ***/

.columns {
    float: left;
    padding-right: 1%;
}

.three.columns {
    width: 32%;
}

.three.columns.double {
    width: 64%;
}

.two.columns {
    width: 49%;
}

.clear.columns {
    clear: both;
    width: 100%;
    display: block;
}

@media (max-width: 640px) {
    .columns {
        float: none;
        padding-right: 0;
        width: 100%;
    }
}

.comment-form label {
    display: inline-block;
    margin-right: 0;
    width: 100px;
}

article ul {
    list-style: disc inside;
}

article ol {
    list-style: decimal inside;
}

.qtranxs-available-languages-message {
    background-color: #f9f9f9;
    border-left: 5px solid #ccc;
    padding: 10px;
    font-family: ClearSansThin, Helvetica, Arial;
}

ul.eclipseEnlighterJS li {
    white-space: nowrap;
}

a.btn-primary {
    color: #fff;
}

.intro {
    background: transparent url('earth.png') no-repeat top right;
    background-size: contain;
    padding-right: 50%;
    min-height: 250px;
    display : flex;
    align-items : center;
    font-size: 13pt;
    font-family: ClearSansThin, Helvetica, Arial, system-ui;
}
.intro p {
    line-height: 1.3em;
}
.intro span {
    background-color: rgba(255,255,255,.8);
}

.wp-block-advanced-gutenberg-blocks-summary {
    background: transparent;
    padding: 16px 0;
    border-radius: 0;
}
.wp-block-advanced-gutenberg-blocks-summary__title {
    display: none;
}
.wp-block-advanced-gutenberg-blocks-summary__list {
    margin-left: 0;
}
.wp-block-advanced-gutenberg-blocks-summary li {
    padding: 0;
}

@media (prefers-color-scheme: dark) {
    /* Dark theme styles go here */

    body {
        background-color: #333;
        color: #fff;
    }

    a, a:link, a:visited {
        color: #578cfd;
    }

    #primary-menu li.current-menu-item a,
    #primary-menu li.current-page-parent a {
        color: #777;
    }

    .intro {
        background: transparent url('earth-dark.png') no-repeat top right;
    }
    .widget_recent_entries li {
        border-color: #575757;
        background-color: #3d3d3d;
    }
    blockquote {
        border-color: #575757;
        background-color: #3d3d3d;
    }
    #blackcrystal-id-widget img {
        opacity: .2;
    }
    #blackcrystal-id-widget:hover img {
        opacity: .5;
    }
    pre, code {
        background-color: #3d3d3d;
        border-color: #575757;
    }

    input[type="text"], input[type="email"], textarea {
        background-color: #2c2c2c;
        color: inherit;
    }
    .more-link, .btn, input[type="submit"], input[type="button"], button {
        color: #fff;
        background: #11279f;
    }
    .more-link:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover {
        background: #202020;
    }

    #footer {
        background: transparent url('bgbottom-dark.png') repeat-x top;
    }

    #footer {
        color: #aaa;
    }
}

@media (prefers-color-scheme: light) {
    /* Light theme styles go here */
}