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

@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&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');

.--headings { font-family: 'Exo', Arial, Helvetica, sans-serif;              }
.--body     { font-family: 'Montserrat', Arial, Helvetica, sans-serif;       }
.--tables   { font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif; }
.--mono     { font-family: 'Roboto Mono', Consolas, 'Lucida Console', 'Courier New', monospace;       }

/* References */

.ref-color0 { color: #202123 } /* Normal text */
.ref-color1 { color: #22266D } /* Headings */
.ref-color2 { color: #3DA4DF } /* Links on dark backgrounds, bold in headings */
.ref-color3 { color: #0032DF } /* Links on light backgrounds */
.ref-color4 { color: #00BFFF } /* Buttons, post rating stars, big highlight characters, lines */
.ref-color5 { color: #F4F4F4 } /* Content frames, sidebars */
.ref-color6 { color: #545490 } /* Footer bullets */

body     { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 12pt;
           color: #202123; background-color: #e7e7e7; }
th       { font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 11pt; color: #202123; }
td       { font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 11pt; color: #202123; }
#header  { font-family: 'Exo', Arial, Helvetica, sans-serif; font-size: 12pt;
           text-shadow: 0 0 20px black; }
#footer  { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; }
#content { line-height: 1.2em; padding-top: 20px; }

#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: transparent; }

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

h1 { font-family: 'Exo', Arial, Helvetica, sans-serif; font-size: 14pt; line-height: 16pt; }
h2 { font-family: 'Exo', Arial, Helvetica, sans-serif; font-size: 13pt; line-height: 15pt; }
h3 { font-family: 'Exo', 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: 'Exo', Arial, Helvetica, sans-serif;        font-size: 18pt; min-height: 34px; height: 34px; }
#media_form textarea[name="title"]   { font-family: 'Exo', Arial, Helvetica, sans-serif;        font-size: 18pt; min-height: 34px; height: 34px; }
#post_form  textarea[name="excerpt"] { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 12pt; min-height: 30px; height: 30px; }

body.mce-content-body { background-color: white; 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: white; background-color: #00BFFF; 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; }

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

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