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

/* @import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"); */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url("https://fonts.googleapis.com/css?family=Inter:500,400");

/* Inhereted fonts */

@font-face { font-family: 'Trajan Pro 3';                               font-weight: normal; src: url("fonts/aoc/TrajanPro3Regular.ttf"); }
@font-face { font-family: 'Trajan Pro 3';                               font-weight: bold;   src: url("fonts/aoc/TrajanPro3Bold.ttf"); }
@font-face { font-family: 'Myriad Pro';                                 font-weight: normal; src: url("fonts/aoc/MyriadPro-Regular.otf"); }
@font-face { font-family: 'Myriad Pro';                                 font-weight: bold;   src: url("fonts/aoc/MyriadPro-Bold.otf"); }
@font-face { font-family: 'Myriad Pro';            font-style:  italic;                      src: url("fonts/aoc/MyriadPro-It.otf"); }
@font-face { font-family: 'Myriad Pro';            font-style:  italic; font-weight: bold;   src: url("fonts/aoc/MyriadPro-BoldIt.otf"); }
@font-face { font-family: 'Atiba';                                      font-weight: normal; src: url("fonts/aoc/Atiba.ttf"); }

/* New font defs */

@font-face { font-family: "Trajan Pro 3-Regular";  font-style: normal;  font-weight: 400;    src: url("fonts/tpl/TrajanPro3-Regular.otf")     format("opentype"); }
@font-face { font-family: "General Sans-Medium";   font-style: normal;  font-weight: 500;    src: url("fonts/tpl/GeneralSans-Medium.otf")     format("opentype"); }
@font-face { font-family: "General Sans-Regular";  font-style: normal;  font-weight: 400;    src: url("fonts/tpl/GeneralSans-Regular.otf")    format("opentype"); }
@font-face { font-family: "General Sans-Bold";     font-style: normal;  font-weight: 700;    src: url("fonts/tpl/GeneralSans-Bold.otf")       format("opentype"); }
@font-face { font-family: "Satoshi-Medium";        font-style: normal;  font-weight: 500;    src: url("fonts/tpl/Satoshi-Medium.ttf")         format("truetype"); }

@font-face { font-family: "General Sans";          font-style: normal;  font-weight: 400;    src: url("fonts/tpl/GeneralSans-Regular.otf")    format("opentype"); }
@font-face { font-family: "General Sans";          font-style: normal;  font-weight: 700;    src: url("fonts/tpl/GeneralSans-Bold.otf")       format("opentype"); }
@font-face { font-family: "General Sans";          font-style: normal;  font-weight: 700;    src: url("fonts/tpl/GeneralSans-Bold.otf")       format("opentype"); }
@font-face { font-family: "General Sans";          font-style: italic;  font-weight: 700;    src: url("fonts/tpl/GeneralSans-BoldItalic.otf") format("opentype"); }

/* References */

:root {
    --ref-color0: #F8F7FA; /* Normal text */
    --ref-color1: #FFBF00; /* Headings */
    --ref-color2: #FFBF00; /* Links on dark backgrounds, bold in headings */
    --ref-color3: #3F2704; /* Links on light backgrounds */
    --ref-color4: #FFBF00; /* Buttons, post rating stars, big highlight characters, lines */
    --ref-color5: #000000; /* Content frames, sidebars */
    --ref-color6: #FFBF00; /* Footer bullets */
    
    --ref-color-hlinks:   #F5F2FA;
    --ref-color2-lighter: #FFF1A0; /* Active links, hover */
    --ref-color3-lighter: #7f5009; /* Hovering links on light backgrounds */
    --ref-color4-border:  #BF9B30; /* Button border */
    --ref-color-dark-gray: #5f5b67;
    
    --text-color:    #F8F7FA; /* --ref-color0 */
    --text-bg-color: #000000; /* --ref-color5 */
    --text-cf-color: #151515; /* Content frames */
    
    --headings-font: 'Trajan Pro 3-Regular', 'Times New Roman', Times, serif;
    --body-font:     'General Sans', Arial, Helvetica, sans-serif;
    --body-alt-font: 'Satoshi-Medium', Arial, Helvetica, sans-serif;
    --tables-font:   'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    --mono-font:     'Roboto Mono', Consolas, 'Lucida Console', 'Courier New', monospace;
    
}

.ref-color0 { color: var(--ref-color0); }
.ref-color1 { color: var(--ref-color1); }
.ref-color2 { color: var(--ref-color2); }
.ref-color3 { color: var(--ref-color3); }
.ref-color4 { color: var(--ref-color4); }
.ref-color5 { color: var(--ref-color5); }
.ref-color6 { color: var(--ref-color6); }

.--headings { font-family: var(--headings-font); }
.--body     { font-family: var(--body-font);     }
.--tables   { font-family: var(--tables-font);   }
.--mono     { font-family: var(--mono-font);     }

/* Base stuff */

body     { font-family: var(--body-font); font-size: 12pt; color: var(--text-color); background-color: var(--text-bg-color); margin: 0; padding: 0; }
th       { font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 11pt; color: var(--ref-color5); }
td       { font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 11pt; color: var(--ref-color5); }
#header  { font-family: var(--body-font); font-size: 12pt; text-shadow: none; }
#footer  { font-family: var(--body-font); font-size: 12pt; }
#content { line-height: 1.2em; padding-top: 20px; }

body[data-is-known-user="false"] #content { padding-top: 72px; }

a, a:link, .pseudo_link { text-decoration: none; }

#admin_menu { font-family: 'roboto condensed', 'arial narrow', arial, helvetica, sans-serif; font-size: 10pt; }
.dropdown_menu { font-family: Arial, Helvetica, sans-serif; }
body.popup { background-color: black; }

/* Responsiveness */

#header, #content_wrapper, #footer { padding-left: 0; padding-right: 0; }

@media all and (max-width: 480px) {
    #header #menu_holder      { text-align: center; flex-wrap: wrap; }
    #header .menu             { width: 100%; padding-top: 10px; margin-left: 0; margin-right: 0; }
}

body.admin #header, body.admin #content_wrapper, body.admin #footer { padding-left: 0; padding-right: 0; }

@media all and (min-width: 1440px) {
    body:not(.admin,.popup) #menu_holder  ,
    body:not(.admin,.popup) #body_wrapper { width: 1440px; margin-left: auto; margin-right: auto; }
    body:not(.admin,.popup) #menu_holder  { padding-left: 0; padding-right: 0; }
}

/* Note: this is preset on the core styles, around line 100 */
@media all and (max-width: 700px)
{
    #header .main_menu_item           { display: inline-block; }
    #header .special_menu_item        { display: inline-block; }
    #header .main_menu_item.current   { display: inline-block; float: initial; }
    #main_menu_trigger.main_menu_item { display: inline-block; }
}

/* Note: this is the override */
@media all and (max-width: 900px)
{
    #header .main_menu_item           { display: none; }
    #header .special_menu_item        { display: none; }
    #header .main_menu_item.current   { display: inline-block; float: none; }
    #main_menu_trigger.main_menu_item { display: inline-block; }
}

/* Note: this is preset on the core admin styles, around line 30 */
@media all and (max-width: 700px)
{
    #admin_menu_trigger       { display: inline-block; }
    #admin_menu .item         { display: none; }
    #admin_menu .item.current { display: inline-block; }
}

/* Note: this is the override */
@media all and (max-width: 900px)
{
    #admin_menu_trigger       { display: inline-block; }
    #admin_menu .item         { display: none; }
    #admin_menu .item.current { display: inline-block; }
}

/* Body stuff  */

textarea, pre, .fixed_font, code { font-family: 'Roboto Mono', Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 10pt; }
textarea.no_fw_font              { font-family: var(--body-font); font-size: 12pt; }

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

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: ']' }

/* Forms */

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

body.mce-content-body { color: var(--text-color); background-color: var(--text-bg-color); margin: 0 10px; }

/* 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);
}

/* 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);
}

/* 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: #22266D 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: #22266D; border-radius: 3px; }
#user_profile_tabs .tab.current { color: var(--ref-color3); 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: 11pt; line-height: normal; }
body#tinymce[data-id="account_signature"] { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; 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 */

.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; }

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

/* 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; }