/**
 * Base styles
 *
 * @package    BardCanvas
 * @subpackage Responsive Template
 * @author     Alejandro Caballero - lava.caballero@gmail.com
 */

body     { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; background-color: #E5E5E5; }
th       { font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 11pt; }
td       { font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 11pt; }
#header  { font-size: 12pt; }
#footer  { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; padding-bottom: 20px; }

#content { line-height: normal; }
@media all and (max-width: 720px) { #content {padding-right: 0;} }
@media all and (max-width: 480px) { #content {padding-left:  0;} }

body.home, body.main                              { }
body.home #body_wrapper, body.main #body_wrapper  { padding: 20px; max-width: 1000px; margin: auto; }

@media all and (min-width: 1800px) { body.home #body_wrapper, body.main #body_wrapper  { max-width: 1400px; } }
@media all and (max-width: 1024px) { body.home #body_wrapper, body.main #body_wrapper  { padding: 10px; max-width: none; } }
@media all and (max-width:  768px) { body.home #body_wrapper, body.main #body_wrapper  { padding:  5px; } }
@media all and (max-width:  480px) { body.home #body_wrapper, body.main #body_wrapper  { padding:  2px; } }

.dropdown_menu { font-family: Arial, Helvetica, sans-serif; }
body.popup     { background-color: transparent; color: black; }

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

h1 { font-family: Arial, Helvetica, sans-serif; font-size: 32px; line-height: normal; }
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 26px; line-height: normal; }
h3 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: normal; }

body.admin h1, body.popup h1 { font-size: 14pt; }
body.admin h2, body.popup h2 { font-size: 13pt; }
body.admin h3, body.popup h3 { font-size: 12pt; }

section h1 { font-size: 14pt; }
section h2 { font-size: 13pt; }
section h3 { font-size: 12pt; }

a { text-decoration: none; }

h1 a.small        { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; }
h1 a.small:before { content: '[' }
h1 a.small:after  { content: ']' }

/* Forms */

#post_form  textarea[name="title"]  { font-family: Arial, Helvetica, sans-serif; font-size: 18pt; min-height: 34px; height: 34px; }
#media_form textarea[name="title"]  { font-family: Arial, Helvetica, sans-serif; font-size: 18pt; min-height: 34px; height: 34px; }
#post_form textarea[name="excerpt"] { font-family: 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: 32px; }
h2 .emojione { height: 26px; }
h3 .emojione { height: 20px; }

/* 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: #c0f 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: #c0f; border-radius: 3px; }
#user_profile_tabs .tab.current { color: white; background-color: #c0f; }

#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: 10px; 
                                            border: 1px solid #D6D6D6; border-radius: 3px; background-color: #F9F9F9;
                                            font-size: 11pt; line-height: normal; }
body#tinymce[data-id="account_signature"] { 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-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; }

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