/**
 * Base styles
 *
 * @package    Onix template
 * @author     Alejandro Caballero - lava.caballero@gmail.com
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Myriad Pro */
@font-face {
    font-family: 'Myriad Pro';
    font-style: normal;
    font-weight: normal;
    src: url('v2/fonts/myriad_pro/Myriad-Pro_31655.ttf') format('truetype');
}
@font-face {
    font-family: 'Myriad Pro';
    font-weight: bold;
    font-style: normal;
    src: url('v2/fonts/myriad_pro/Myriad-Pro-Bold_31631.ttf') format('truetype');
}
@font-face {
    font-family: 'Myriad Pro';
    font-weight: normal;
    font-style: italic;
    src: url('v2/fonts/myriad_pro/Myriad-Pro-Italic_31634.ttf') format('truetype');
}
@font-face {
    font-family: 'Myriad Pro';
    font-weight: bold;
    font-style: italic;
    src: url('v2/fonts/myriad_pro/Myriad-Pro-Bold-Italic_31626.ttf') format('truetype');
}

/* Novecento Wide */
@font-face {
    font-family: 'Novecento Wide';
    font-style: normal;
    font-weight: normal;
    src: url("v2/fonts/novecento_wide/Novecento%20WideNormal.woff") format("woff"),
         url("v2/fonts/novecento_wide/Novecento%20WideNormal.ttf")  format("truetype");
}
@font-face {
    font-family: 'Novecento Wide';
    font-style: normal;
    font-weight: bold;
    src: url("v2/fonts/novecento_wide/Novecento%20WideBold.woff") format("woff"),
         url("v2/fonts/novecento_wide/Novecento%20WideBold.ttf")  format("truetype");
}

/* References */

:root {
    --ref-color0:         #808080; /* Normal text */
    --ref-color1:         #696969; /* Headings */
    --ref-color2:         #f4be00; /* Links on dark backgrounds, bold in headings */
    --ref-color2-lighter: #FFE3B7;
    --ref-color2-darker:  #b76300;
    --ref-color3:         #696969; /* Links on light backgrounds */
    --ref-color4:         #f4be00; /* Buttons, post rating stars, big highlight characters, lines */
    --ref-color5:         #F4F4F4; /* Content frames, sidebars */
    --ref-color6:         #696969; /* Footer bullets */
    --ref-gray:           #141319; /* Gray backgrounds */
    --ref-purple:         #3c3c6d;
    --ref-ruby:           #9a031e;
    --ref-border-gradient: linear-gradient(90deg, #995316 0%, #F5B243 13%, #DA8408 31%, #F8C654 50%, #E08908 74%, #DA8408 86%, #995316 100%);
    
    --headings-font: 'Novecento Wide', Arial, Helvetica, sans-serif;
    --body-font:     'Myriad Pro', Arial, Helvetica, sans-serif;
    --tables-font:   'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    --mono-font:     'Roboto Mono', Consolas, 'Lucida Console', 'Courier New', monospace;
    
    --black-pixel-50: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=');
    --black-pixel-25: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNksAcAAEUAQRtOwGEAAAAASUVORK5CYII=');
}

.ref-color0 { color: var(--ref-color0); } /* Normal text */
.ref-color1 { color: var(--ref-color1); } /* Headings */
.ref-color2 { color: var(--ref-color2); } /* Links on dark backgrounds, bold in headings */
.ref-color3 { color: var(--ref-color3); } /* Links on light backgrounds */
.ref-color4 { color: var(--ref-color4); } /* Buttons, post rating stars, big highlight characters, lines */
.ref-color5 { color: var(--ref-color5); } /* Content frames, sidebars */
.ref-color6 { color: var(--ref-color6); } /* Footer bullets */

body     { font-family: var(--body-font), Arial, Helvetica, sans-serif; font-size: 14pt;
           color: white; background: black url('v2/body-background.jpg') top center repeat-y;
           max-width: 1920px; margin-left: auto; margin-right: auto; }
th       { font-family: var(--tables-font), 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 12pt; color: white; }
td       { font-family: var(--tables-font), 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 12pt; color: white; }
#header  { font-family: var(--body-font), Arial, Helvetica, sans-serif; font-size: 14pt;  }
#footer  { font-family: var(--body-font), Arial, Helvetica, sans-serif; font-size: 14pt; padding: 30px 10px 10px 10px; }
#content { line-height: 1.2em; padding-top: 20px; }

#admin_menu { font-family: var(--tables-font), 'arial narrow', arial, helvetica, sans-serif; font-size: 10pt; }
.dropdown_menu { font-family: var(--body-font), Arial, Helvetica, sans-serif; }
.dropdown_menu .main_menu_item { line-height: 24px; padding-left: 15px; padding-right: 15px; }
body.popup { background-color: transparent; }

textarea, pre, .fixed_font, code { font-family: 'Roboto Mono', Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 11pt; }
textarea.no_fw_font              { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 11pt; }

h1 { font-family: var(--headings-font), Arial, Helvetica, sans-serif; font-size: 14pt; line-height: 18pt; }
h2 { font-family: var(--headings-font), Arial, Helvetica, sans-serif; font-size: 13pt; line-height: 17pt; }
h3 { font-family: var(--headings-font), Arial, Helvetica, sans-serif; font-size: 12pt; line-height: 16pt; }

body.admin h1 { font-size: 14pt; line-height: 16pt; }
body.admin h2 { font-size: 13pt; line-height: 15pt; }
body.admin h3 { font-size: 12pt; line-height: 14pt; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; color: white; }
h2, h3, h4, h5, h6 { font-weight: bold; }

h1 a.small        { font-family: arial, helvetica, sans-serif; font-size: 12pt; font-weight: bold; }
h1 a.small:before { content: '[' }
h1 a.small:after  { content: ']' }

.principal_data { font-size: 1.2em; }

/* Scrollbars */
/* @see https://codepen.io/stephenpaton-tech/full/JjRvGmY */

/* noinspection CssUnknownProperty */
* { scrollbar-width: auto; scrollbar-color: #000000 #f4be00; }
*::-webkit-scrollbar       { width: 16px; }
*::-webkit-scrollbar-track { background: #f4be00; }
*::-webkit-scrollbar-thumb { background-color: #000000; border-radius: 10px; border: 3px solid #f4be00; }

/* Forms */

#post_form  textarea[name="title"]   { font-family: var(--body-font), Arial, Helvetica, sans-serif; font-size: 18pt; min-height: 34px; height: 34px; }
#media_form textarea[name="title"]   { font-family: var(--body-font), Arial, Helvetica, sans-serif; font-size: 18pt; min-height: 34px; height: 34px; }
#post_form  textarea[name="excerpt"] { font-family: var(--body-font), Arial, Helvetica, sans-serif; font-size: 12pt; min-height: 30px; height: 30px; }

body.mce-content-body { background-color: white; margin: 0 10px; }
.mce-btn button:hover { color: black; }
.mce-menu.mce-floatpanel { background-color: silver; }
.mce-btn .mce-txt { overflow-y: hidden; }

/* Emojione adjustments */

body     .emojione { height: 12pt; }
th       .emojione { height: 11pt; }
td       .emojione { height: 11pt; }
#header  .emojione { height: 12pt; }
#footer  .emojione { height: 11pt; }

.fixed_font   .emojione ,
code          .emojione { height: 10pt; }

h1 .emojione { height: 14pt; }
h2 .emojione { height: 13pt; }
h3 .emojione { height: 12pt; }

/* Admin - modules manager */

#modules_listing tr {
    -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    1px 1px 5px 0 rgba(0, 0, 0, 0.25);
    box-shadow:         1px 1px 5px 0 rgba(0, 0, 0, 0.25);
}

#modules_listing td { color: black; }

/* Admin - settings manager */

.settings_group {
    -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    1px 1px 5px 0 rgba(0, 0, 0, 0.25);
    box-shadow:         1px 1px 5px 0 rgba(0, 0, 0, 0.25);
}

.settings_group td { color: black; }

/* Thumbnail placeholders */

.thumbnail { border: 1px solid; background-color: transparent; }

.nav_table .thumbnail     {
    display: inline-block; line-height: 0;
    border: 1px solid; background-color: transparent;
    position: relative; width: 230px; height: 110px; overflow: hidden;

}
.nav_table .thumbnail img {
    position: absolute; left: 50%; top: 50%; max-width: 100%; height: auto;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform:     translate(-50%,-50%);
    transform:         translate(-50%,-50%);
}

.posts_index .thumbnail     { border: none; }
.posts_index .thumbnail img { width: 100%; }

/* User profile styles */

#user_profile_area    { background-color: white; box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25); position: relative; }
#user_profile_heading { background: #808080 center center no-repeat; background-size: cover; 
                        width: 100%; height: 300px; display: table; }

#user_profile_area .details                { width: 100%; height: 300px; padding: 0 10px 10px 195px;
                                             display: table-cell; text-align: left; vertical-align: bottom;
                                             color: white; font-weight: bold; text-shadow: 2px 2px 5px black; }
#user_profile_area .display_name           { font-size: 20pt; margin-bottom: 5px; }
#user_profile_area .display_name .emojione { height:    20pt; }
#user_profile_area .handler                { font-size: 14pt; margin-bottom: 5px; }
#user_profile_area .extras                 { font-size: 12pt; }

#user_profile_area .avatar     { background-color: white; padding: 5px;
                                 border: 1px solid silver; border-radius: 3px;
                                 display: inline-block; position: absolute; margin-top: 165px; margin-left: 20px; }
#user_profile_area .avatar img { width: 150px; height: 150px; }

#user_profile_tabs              { min-height: 45px; margin-bottom: 20px; margin-left: 190px; margin-top: 5px;
                                  padding-bottom: 5px; }
#user_profile_tabs .tab         { display: inline-block; padding: 5px 8px; text-align: center;
                                  color: #808080; border-radius: 3px; }
#user_profile_tabs .tab.current { color: black; background-color: var(--ref-color2); text-decoration: none; }

#user_info_sections { -moz-column-gap:   10px; -webkit-column-gap:   5px; column-gap:   5px; }
#user_info_sections { -moz-column-count:    2; -webkit-column-count:   2; column-count:   2; }

#user_info_sections section { display: inline-block; width: 100%; }
#user_info_sections section form .field:last-child { margin-bottom: 0; }
#user_info_sections .user_signature *   ,
#user_info_sections .user_bio       *   { margin-top: 0; margin-bottom: 0; }
#user_info_sections .user_signature img ,
#user_info_sections .user_bio       img { max-width: 100%; }

/* Signatures, for both base pages and tinymce */

.author_signature                         { margin-top: 20px; padding-top: 10px; padding-right: 20px;
                                            border-top: 2px solid silver; display: inline-block; width: auto;
                                            font-family: Arial, Helvetica, sans-serif; font-size: 12pt; line-height: normal; }
body#tinymce[data-id="account_signature"] { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; line-height: normal; }

.author_signature *, body#tinymce[data-id="account_signature"] *                 { margin-top: 1px; margin-bottom: 1px; }
.author_signature .emojione, body#tinymce[data-id="account_signature"] .emojione { height: 11pt; }

/* Search form styles */

.search_form .form_wrapper   { white-space: nowrap; overflow: hidden; }
.search_form input[name="s"] { font-size: 16px; width: 100%; padding: 6px 28px 6px 6px; }
.search_form .submit_icon    { font-size: 20px; line-height: 30px; z-index: 1;
                               position: absolute; margin-left: -28px; }

/* Sidebar generics */

.sidebar ul                { padding-left: 12px; margin-top: 2px; margin-bottom: 0; }
.sidebar ul li             { margin-top: 0; margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid silver; }
.sidebar ul li:last-child  { border-bottom: 0; padding-bottom: 0; }

/* ETC */

.framed_content { color: black; border-radius: 5px; }
.framed_content h1 , 
.framed_content h2 , 
.framed_content h3 , 
.framed_content h4 , 
.framed_content h5 , 
.framed_content h6 { color: black; }

.records_browser.filter_links                                { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
.records_browser.filter_links .framed_content                { cursor: pointer; padding: 2px 4px; line-height: 14pt; text-decoration: none; }
.records_browser.filter_links .framed_content.seamless_right { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.records_browser.filter_links .framed_content.seamless_left  { border-left:  none; border-top-left-radius:  0; border-bottom-left-radius:  0; margin-left:  0; }

.windowed_image { background: transparent center center no-repeat; background-size: cover; }

body.admin h1 a.framed_content, body.admin h1 .pseudo_link.framed_content { color: #696969; text-decoration: none; }
body.admin h2 a.framed_content, body.admin h2 .pseudo_link.framed_content { color: #696969; text-decoration: none; }
body.admin h3 a.framed_content, body.admin h3 .pseudo_link.framed_content { color: #696969; text-decoration: none; }

h1 .framed_content, h2 .framed_content, h3 .framed_content {
    font-size: 0.7em;
}

.pp_pic_holder { color: black; }

/* Media lists on record browsers */

.media_bullet         { padding: 0 0 4px 22px; margin-bottom: 2px; position: relative; color: #bf0060;
                        border-bottom: 1px solid silver; }
.media_bullet .bullet { position: absolute; margin-left: -22px; margin-top: 2px; }

.media_bullet:last-child { border-bottom: none; margin-bottom: 0; }

.media_bullet a, .media_bullet .pseudo_link { color: #bf0060; }

/* Record browsers overrides */

.nav_table tr { background-color: white; }
.nav_table td { color: black; }

.nav_table tr td a:not(.framed_content, .prettyPhoto) ,
.nav_table tr td .pseudo_link:not(.framed_content, .prettyPhoto) {
    filter: brightness(0.5);
}

.nav_table tr td .pseudo_link code ,
.nav_table tr td .pseudo_link code a ,
.nav_table tr td code.pseudo_link  ,
.nav_table tr td code .pseudo_link { background-color: white; }

.nav_table td code.pseudo_link  ,
.nav_table td code a            ,
.nav_table td code .pseudo_link {
    filter: brightness(1);
}

/* Moar adjustments */

.noty_bar.noty_type_success a            ,
.noty_bar.noty_type_success .pseudo_link { color: blue; }

.noty_bar.noty_type_information a            ,
.noty_bar.noty_type_information .pseudo_link { color: white; }

.products_grid { color: black; }
