:root { /* Admin CP Stuff */ /* Styles for the file permissions section. */ --perm_read_bg_color: hsl(101, 78%, 86%); --perm_writable_bg_color: hsl(0, 100%, 87%); --perm_execute_bg_color: hsl(31, 95%, 84%); --perm_custom_bg_color: hsl(100, 5%, 76%); --perm_no_change_bg_color: hsl(0, 0%, 93%); --perm_groups_bg_color: hsl(0, 0%, 100%); --manage_boards_li_recycle_board_bg_color: hsl(180, 33%, 90%); --manage_boards_li_redirect_board_bg_color: hsl(60, 33%, 90%); --move_smileys_link_hover_img_border_color: hsl(208, 44%, 61%); --move_smileys_selected_item_border_color: hsl(39, 100%, 59%); /* Alternating colors */ --stripes_even_bg_color: hsl(0, 0%, 5%); --stripes_odd_bg_color: hsl(206, 30%, 5%); --alternative_bg_color: hsl(0, 0%, 5%); --alternative_bg_2_color: hsl(202, 21%, 3%); /* AJAX Notification Bar */ --ajax_in_progress_bg_color: hsl(0, 0%, 100%); --ajax_in_progress_border_color: hsl(27, 100%, 49%); --ajax_in_progress_border_style: solid; --ajax_in_progress_border_width: 4px; --ajax_in_progress_link_color: hsl(39, 100%, 50%); --ajax_in_progress_txt_color: hsl(27, 100%, 49%); /* Auto Suggest Control */ --auto_suggest_border_color: var(--border_color); --auto_suggest_border_style: solid; --auto_suggest_border_width: 1px; --auto_suggest_border_radius: 3px; --auto_suggest_item_bg_color: var(--window_bg_color); --auto_suggest_item_hover_bg_color: var(--window_bg_odd_color); --auto_suggest_item_hover_txt_color: var(--body_txt_color); /* Body */ --body_bg_color: linear-gradient(180deg, hsl(215, 55%, 94%) 60%, hsl(212, 83%, 80%) 100%); --body_txt_color: hsl(0, 0%, 30%); --body_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; --body_font_size: 85%; --body_line_height: 150%; --border_color: hsl(214, 30%, 99%) hsl(214, 30%, 89%) hsl(214, 30%, 89%) hsl(214, 30%, 99%); --border_style: solid; --border_width: 1px; --html_bg_color: linear-gradient(180deg, hsl(215, 55%, 94%) 60%, hsl(212, 83%, 80%) 100%); --heading_font_size: 1em; --heading_txt_color: hsl(0, 0%, 27%); --highlight_txt_color: hsl(27, 100%, 50%) !important; --horizontal_rule_bg_color: hsl(214, 30%, 99%); --horizontal_rule_box_shadow: 0 1px 0 hsl(214, 30%, 89%)inset; --info_link: hsl(213, 46%, 34%); --link: hsl(213, 46%, 24%); --link_hover: hsl(213, 46%, 44%); --moderation_link_bg_color:hsl(0, 100%, 30%); --moderation_link_border_radius: 50%; --strong_txt_color: hsl(0, 0%, 0%); --option_bg_hover_color: hsl(214, 36%, 91%); --select_txt_color: hsl(0, 0%, 0%); --selection_bg_color: hsl(213, 46%, 24%); --selection_txt_color: hsl(0, 0%, 100%); --wrapper_bg_color: hsl(0, 0%, 99%); --wrapper_border_color: hsl(214, 9%, 31%); --wrapper_border_style: solid; --wrapper_border_width: 5px; --wrapper_border_radius: 0px; --wrapper_box_shadow: none; --inner_section_bg_color: transparent; --inner_wrap_bg_color: hsl(0, 0%, 100%); --inner_wrap_border_color: hsl(214, 30%, 99%); --inner_wrap_border_style: solid; --inner_wrap_border_width: 1px; --checkbox_and_radio_bg_color: hue-rotate(0deg); --toggle_switch: hsl(213, 46%, 34%); /* Breadcrumb */ --breadcrumb_bg_color: hsl(252, 4%, 96%); --breadcrumb_border_color: hsl(300, 5%, 90%); --breadcrumb_border_style: solid; --breadcrumb_border_width: 1px; --breadcrumb_border_radius: 5px; --breadcrumb_box_shadow: 0px 0px 1px 1px hsl(210, 22%, 35%)inset; --breadcrumb_divider_color: hsl(0, 0%, 0%); --breadcrumb_divider_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; --breadcrumb_divider_font_size: 83.33%; --breadcrumb_divider_line_height: 150%; --breadcrumb_font_size: 0.9em; --breadcrumb_link_color: hsl(213, 46%, 34%); --breadcrumb_txt_color: hsl(0, 0%, 87%); /* Buttons */ --button_bg_color: linear-gradient(180deg, hsl(312, 4%, 96%) 0%, hsl(312, 4%, 95%) 100%); --button_bg_hover: linear-gradient(180deg, hsl(214, 18%, 92%) 0%, hsl(214, 18%, 89%) 100%); --button_bg_active: linear-gradient(180deg, hsl(312, 4%, 96%) 0%, hsl(312, 4%, 95%) 100%); --button_bg_focus: linear-gradient(180deg, hsl(312, 4%, 96%) 0%, hsl(312, 4%, 95%) 100%); --button_border_color: hsl(0, 0%, 87%) hsl(0, 0%, 87%) hsl(0, 0%, 87%) hsl(0, 0%, 83%); --button_border_style: solid; --button_border_width: 1px; --button_border_radius: 3px; --button_box_shadow: none; --button_font_size: 0.7rem; --button_line_height: 2em; --button_min_height: calc(2em + 2em * (0.9 - 0.85)); /* "input" font size minus ".button" font size */ --button_active_border_color: hsl(0, 0%, 60%); --button_active_border_style: solid; --button_active_border_width: 1px; --button_active_font_weight: bold; --button_hover_border_color: hsl(0, 0%, 87%) hsl(0, 0%, 83%) hsl(0, 0%, 87%) hsl(0, 10%, 87%); --button_hover_box_shadow: none; --button_txt_color: hsl(0, 0%, 34%); --button_txt_color_active: hsl(0, 0%, 2%); --button_txt_color_hover: hsl(0, 0%, 2%); --button_txt_color_focus: hsl(0, 0%, 2%); --button_txt_color_active_and_focus: hsl(0, 0%, 32%); --button_txt_color_hover_and_focus: hsl(0, 0%, 32%); /* Board Index */ --forum_title_link_color: hsl(0, 0%, 0%); --forum_title_font_size: 2em; --forum_title_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; --children_bg_color: linear-gradient(180deg, hsl(214, 29%, 92%) 0%, hsl(214, 29%, 90%) 100%); --children_box_shadow: 0px 1px 0px hsla(0, 0%, 0%, 5%)inset; --news_bg_color: hsl(252, 4%, 96%); --news_left_bg_color: hsl(252, 4%, 90%); --sub_bar_bg_color: linear-gradient(180deg, hsl(214, 27%, 52%) 0%, hsl(214, 27%, 42%) 100%); --sub_bar_link_color: hsl(0, 0%, 100%); --up_contain_bg_color: hsl(214, 30%, 95%); --information_bg_color: hsl(214, 30%, 95%); --information_border_color: hsl(300, 5%, 90%); --information_border_style: solid; --information_border_width: 1px; --information_border_radius: 0 0 7px 7px; --moderationbuttons_check_focus_box_shadow: 0 0 4px hsl(205, 65%, 57%); /* Category */ --cat_bg_color: linear-gradient(180deg, hsl(212, 36%, 69%) 0%, hsl(212, 45%, 60%) 100%); --cat_bar_collapsed_border_radius: 6px; --cat_bar_desc_txt_color: hsl(0, 0%, 100%); --cat_bar_link_color: hsl(0, 0%, 100%); --cat_bar_strong_txt_color: hsl(0, 0%, 100%); --cat_bar_border_radius: 0px; /* Info Center*/ --info_block_information_bg_color: hsl(214, 30%, 95%); --info_block_icon_bg_color: hsl(204, 24%, 6%); --info_center_container_bg_color: hsl(214, 30%, 95%); --info_center_border_radius: 3px; --info_center_box_shadow: 0px 2px 0px hsl(210, 11%, 4%); --roundframe_bg_color: hsl(214, 30%, 95%); --roundframe_border_radius: 7px; /* Title Bar */ --title_bar_bg_color: linear-gradient(180deg, hsl(214, 27%, 47%) 0%, hsl(214, 27%, 45%) 100%); --title_bar_border_radius: 0px; --title_bar_link: hsl(0, 0%, 100%); /* Calendar colors for birthdays, events and holidays */ --birthday_txt_color: hsl(284, 90%, 40%); --event_txt_color: hsl(120, 90%, 28%); --holiday_txt_color: hsl(218, 100%, 50%); --warn_moderate_txt_color: hsl(39, 100%, 50%); --warn_watch_txt_color: hsl(120, 100%, 25%); /*Error, Info, and Notice Boxes. */ --error_box_bg_color: hsl(0, 100%, 90%); --error_box_border_color: hsl(353, 60%, 50%); --error_box_border_style: solid; --error_box_border_width: 2px; --notice_box_bg_color: hsl(50, 100%, 90%); --notice_box_border_color: hsl(48, 100%, 57%); --notice_box_border_style: solid; --notice_box_border_width: 1px; --notice_box_txt_color: hsl(0, 0%, 10%); --info_box_bg_color: hsl(120, 100%, 90%); --info_box_border_color: hsl(120, 100%, 25%); --info_box_border_style: solid; --info_box_border_width: 1px; --info_box_txt_color: hsl(0, 0%, 13%); --desc_box_border_color: hsl(0, 0%, 77%); --desc_box_border_style: solid; --desc_box_border_width: 1px; /* File Error */ --errorfile_table_td_bg_color: hsl(0, 0%, 98%); --errorfile_table_current_bg_color: hsl(0, 87%, 88%); --errorfile_table_file_line_bg_color: hsl(0, 0%, 93%); --errorfile_table_file_line_current_bg_color: hsl(0, 93%, 77%); /* Code Blocks */ --code_bg_color: hsl(0, 0%, 95%); --code_border_color: hsl(0, 0%, 87%); --code_border_top_color: hsl(0, 0%, 93%); --code_border_bottom_color: hsl(0, 0%, 87%); --code_border_radius: 2px; --code_font_size: 0.78rem; --code_header_font_size: 0.9em; --code_header_txt_color: hsl(0, 0%, 40%); /* Colors for background of posts requiring approval */ --approve_bg_color: hsl(0, 100%, 6%); --approve_bg_color_2: hsl(0, 100%, 7%); --approve_txt_color: hsl(0, 0%, 93%); /* FieldSet */ --fieldset_legend_txt_color: hsl(0, 0%, 0%); --fieldset_border_color: hsl(214, 30%, 99%) hsl(214, 30%, 89%) hsl(214, 30%, 89%) hsl(214, 30%, 99%); --fieldset_border_style: solid; --fieldset_border_width: 1px; --fieldset_border_radius: 3px; /* Footer */ --footer_bg_color: hsl(0, 0%, 99%); --footer_border_color: hsl(210, 23%, 25%); --footer_border_style: solid; --footer_border_width: 1px; --footer_copyright_box_shadow: 0px -1px 0px hsl(0, 0%, 0%) inset; --footer_copyright_border: 1px solid hsl(212, 25%, 24%); --footer_font_size: 0.9em; --footer_txt_color: hsl(0, 0%, 10%); --footer_logo_filter: none; /* Generic & Progress Bar */ --generic_bar_bar_bg_color: hsl(214, 17%, 98%); --generic_bar_bar_box_shadow: 4px -4px 8px hsla(0, 0%, 100%, 0.5) inset, 4px 4px 8px hsla(0, 0%, 100%, 0.9) inset; --generic_bar_bar_border_radius: 1px; --generic_bar_border_color: hsl(0, 0%, 0%); --generic_bar_border_style: solid; --generic_bar_border_width: 1px; --generic_bar_border_radius: 2px; --generic_bar_bg_color: hsl(210, 22%, 96%); --generic_bar_txt_color: hsla(0, 0%, 3%); --generic_bar_span_txt_shadow: 1px 1px hsla(0, 0%, 0%); --generic_bar_vertical_bar_box_shadow: 4px -4px 4px hsla(0, 0%, 0%, 0.1) inset, 4px 4px 4px hsla(0, 0%, 100%, 0.3) inset; --progress_bar_border_radius: 4px; --progress_bar_txt_color: hsla(0, 0%, 0%, 0.8); --progress_bar_bar_bg_color: hsl(100, 67%, 55%); --progress_bar_bar_bg_image: linear-gradient(135deg, hsla(0, 0%, 100%, 0.15) 25%, transparent 25%, transparent 50%, hsla(0, 0%, 100%, 0.15) 50%, hsla(0, 0%, 100%, 0.15) 75%, transparent 75%, transparent); --progress_bar_bar_box_shadow: -1px 1px 0 hsla(0, 0%, 100%, 0.25) inset, 1px -1px 0 hsla(0, 0%, 0%, 0.1) inset; --progress_yellow_bar_bg_color: hsl(47, 92%, 54%); --progress_green_bar_bg_color: hsl(100, 67%, 55%); --progress_red_bar_bg_color: hsl(6, 88%, 63%); --progress_blue_bar_bg_color: hsl(191, 76%, 55%); /* Header */ --header_bg_color: hsl(0, 0%, 99%) url(../images/custom/header_bg.png); --header_border_radius: 0px; --header_border_color: hsl(214, 9%, 31%); --header_border_style: solid; --header_border_width: 5px; --header_box_shadow: 0px 0px 5px 0px hsl(0, 0%, 0%) inset; --top_info_border_color: hsl(210, 31%, 42%); --top_info_border_style: solid; --top_info_border_width: 1px; --top_info_link_hover_txt_color: hsl(213, 46%, 34%); --top_info_link_color: hsl(213, 46%, 99%); --top_info_link_txt_color: hsl(213, 46%, 34%); --top_info_active_link_color: hsl(213, 46%, 34%); --top_info_hover_link_color: hsl(39, 100%, 50%); --top_info_link_hover_border_color: hsl(0, 0%, 0%); --top_info_link_focus_border_color: hsl(210, 31%, 42%); --top_menu_bg_color: var(--window_bg_color); --top_menu_box_shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); --top_menu_border_radius: 3px; --top_section_bg_color: url(../images/custom/container_bg.png) repeat; --top_section_box_shadow: 0px 1px 0px hsl(223, 24%, 20%)inset; --top_section_border_color: hsl(210, 23%, 25%); --top_section_border_style: solid; --top_section_border_width: 1px; /* Input, Button, Select, Textarea */ --ibst_txt_color: hsl(0, 0%, 3%); --ibst_bg_color: linear-gradient(180deg, hsl(312, 4%, 96%) 0%, hsl(312, 4%, 95%) 100%); --ibst_box_shadow: 0px 0px 1px 0px hsl(0, 0%, 83%)inset; --ibst_border_color: hsl(0, 0%, 87%) hsl(0, 0%, 87%) hsl(0, 0%, 87%) hsl(0, 0%, 83%); --ibst_border_style: solid; --ibst_border_width: 1px; --ibst_disabled_bg_color: linear-gradient(180deg, hsl(214, 18%, 70%) 0%, hsl(214, 18%, 70%) 100%); --ibst_disabled_border_color: hsl(0, 0%, 31%); --ibst_disabled_txt_color: hsl(0, 0%, 90%); --ibst_focus_bg_color: linear-gradient(180deg, hsl(214, 18%, 92%) 0%, hsl(214, 18%, 89%) 100%); --ibst_focus_border_color: hsl(0, 0%, 50%); --ibst_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; --ibst_font_size: 85%; --ibst_font_line_height: 150%; --ibst_hover_bg_color: linear-gradient(180deg, hsl(214, 18%, 92%) 0%, hsl(214, 18%, 89%) 100%); --ibst_hover_border_color: hsl(0, 0%, 77%) hsl(0, 0%, 77%) hsl(0, 0%, 77%) hsl(0, 0%, 73%); --ibst_textarea_hover_bg_color: var(--ibst_hover_bg_color); /* Maintenance Mode */ --errorfile_table_bg_color: hsl(206, 30%, 95%); --errorfile_table_td_current_bg_color: hsla(33, 92%, 51%, 0.2); --errorfile_table_td_current_border_color: hsla(0, 0%, 0%, 0.2); --errorfile_table_td_current_border_style: solid; --errorfile_table_td_current_border_width: 1px; /* Menu */ --amt_active_bg_color: hsla(0, 0%, 0%, 0.2); --amt_bg_color: hsl(0, 100%, 10%); --amt_border_radius: 5px; --amt_txt_color: hsl(0, 0%, 90%); --dropmenu_bg_color: hsl(252, 4%, 96%); --dropmenu_box_shadow: 0px 0px 1px 1px hsl(0, 0%, 99%) inset; --dropmenu_border_color: hsl(0, 0%, 93%); --dropmenu_border_style: solid; --dropmenu_border_width: 1px; --dropmenu_hover_bg_color: hsl(212, 45%, 69%); --dropmenu_link_color: hsl(0, 0%, 30%); --dropmenu_link_hover_color: hsl(0, 0%, 100%); --dropmenu_strong_txt_color: hsl(0, 0%, 17%); --dropmenu_subsections_font_size: 83.33%; --dropmenu_subsections_line_height: 150%; --menu_bg_color: linear-gradient(hsl(252, 4%, 96%), hsl(252, 4%, 95%)); --menu_bg_hover_color: hsl(212, 45%, 65%); --menu_border_color: hsl(0, 0%, 93%); --menu_border_style: solid; --menu_border_width: 1px; --menu_button_border_width: 1px; --menu_button_border_style: solid; --menu_button_border_color: hsl(0, 0%, 93%); --menu_button_box_shadow: -1px 0px 0px 0px hsl(0, 0%, 99%) inset; --menu_box_shadow: none; --menu_link_bg_active_color: linear-gradient(hsl(212, 45%, 69%), hsl(212, 45%, 60%)); --menu_link_bg_active_hover_color: linear-gradient(hsl(212, 45%, 69%), hsl(212, 45%, 60%)); --menu_link_bg_focus_color: linear-gradient(hsl(212, 45%, 69%), hsl(212, 45%, 60%)); --menu_link_bg_hover_color: linear-gradient(hsl(212, 45%, 69%), hsl(212, 45%, 60%)); --menu_link_color: hsl(213, 46%, 34%); --menu_link_active_color: hsl(0, 0%, 100%); --menu_link_active_hover_color: hsl(0, 0%, 0%); --menu_link_focus_color: hsl(0, 0%, 100%); --menu_link_hover_color: hsl(0, 0%, 100%); /* Mentions */ --atwho_view_bg_color: hsl(0, 0%, 10%); --atwho_view_border_color: hsl(0, 0%, 13%); --atwho_view_border_style: solid; --atwho_view_border_width: 1px; --atwho_view_box_shadow: 0 0 5px rgba(0, 0, 0, 0.1); --atwho_view_border_radius: 3px; --atwho_view_small_txt_color: hsl(0, 0%, 47%); --atwho_view_strong_text: hsl(225, 100%, 60%); --atwho_view_cur_bg_color: hsl(225, 100%, 60%); --atwho_view_cur_txt_color: hsl(0, 0%, 100%); --atwho_view_cur_small_txt_color: hsl(0, 0%, 100%); --atwho_view_cur_strong_txt_color: hsl(0, 0%, 100%); /* On/Off Icons (User) */ --on_off_border_radius: 50%; --on_bg_color: hsl(100, 75%, 63%); --on_border_color: hsl(100, 61%, 55%); --off_bg_color: hsl(0, 3%, 65%); --off_border_color: hsl(0, 2%, 58%); /* Pagination */ --current_page_txt_color: hsl(213, 46%, 34%); /* Popup Windows */ --popup_container_bg_color: hsla(204, 33%, 24%, 0.5); --popup_content_bg_color: hsl(214, 30%, 95%); --popup_content_txt_color: hsl(0, 0%, 3%); --popup_content_border_color: hsl(214, 30%, 99%); --popup_content_border_radius: 6px 6px 2px 2px; --popup_content_box_shadow: 0px 0px 1px 1px hsl(214, 30%, 89%); --popup_heading_txt_color: hsl(0, 0%, 0%); --popup_window_bg_color: hsl(214, 30%, 90%); --popup_window_box_shadow: 0px 0px 5px 0px hsl(214, 30%, 89%)inset; --popup_window_border_color: hsl(214, 30%, 99%); --popup_window_border_radius: 7px 7px 3px 3px; /* Post Bit Section */ --display_head_txt_color: hsl(0, 0%, 58%); --poster_online_link_color: hsl(213, 46%, 34%); --key_post_info_link_color: hsl(213, 46%, 34%); --keyinfo_postinfo_modified_txt_color: hsl(0, 0%, 80%); --subject_title_link_color: hsl(0, 0%, 0%); --page_number_txt_color: hsl(213, 46%, 34%); --inner_border_color: hsl(214, 30%, 89%); --inner_border_style: solid; --inner_border_width: 1px; --inner_box_shadow: 0 1px 0 hsl(214, 30%, 99%) inset; --signature_border_color: hsl(214, 30%, 89%); --signature_box_shadow: hsl(214, 30%, 99%); /* Post Draft Options */ --post_draft_options_bg_color: var(--window_bg_color); --post_draft_options_border_color: var(--border_color); --post_draft_options_border_style: solid; --post_draft_options_border_width: 1px; --post_draft_options_border_left_color: var(--border_color); --post_draft_options_border_left_style: solid; --post_draft_options_border_left_width: 1px; --post_draft_options_border_radius: 0 0 4px 4px; --post_draft_options_settings_border_color: var(--border_color); --post_draft_options_settings_border_style: solid; --post_draft_options_settings_border_width: 1px; --post_draft_options_settings_strong_txt_color: var(--body_txt_color); /* Post Options */ --post_options_bg_color: linear-gradient(180deg, hsl(252, 4%, 96%) 0%, hsl(252, 4%, 98%) 100%); --post_options_border_color: var(--border_color); --post_options_border_style: solid; --post_options_border_width: 1px; --post_options_border_radius: 4px 0px 4px 4px; --post_options_border_color_hover: var(--border_color); --post_options_link_border_radius: 3px; --post_options_font_weight: normal; /* Post BBC Links */ --bbc_link_border_color: hsl(218, 29%, 74%); --bbc_link_hover_border_color: hsl(220, 33%, 30%); --bbc_link_hover_border_style: solid; --bbc_link_hover_border_width: 1px; /* Profile Section */ --activity_stats_bg_color: hsl(0, 0%, 93%); --activity_stats_border_color: var(--border_color); --activity_stats_border_style: solid; --activity_stats_border_width: 1px; --detailedinfo_border_color: var(--border_color); --detailedinfo_border_style: solid; --detailedinfo_border_width: 1px; --detailedinfo_txt_color: var(--body_txt_color); --counter_txt_color: hsl(0, 0%, 5%); --list_posts_box_shadow: 0 1px 0 hsl(0, 0%, 100%) inset; --pick_theme_selected_bg_color: hsl(206, 33%, 83%); --unread_pm_bg_color: hsl(120, 100%, 90%); --unread_notify_hover_bg_color: hsl(214, 30%, 97%); /* Progress Bars & Generic Bars & Warning Bars & Personal Message Bar*/ --personal_messages_capcity_bar_bg_color: hsl(206, 30%, 95%); --personal_messages_capcity_bar_border_color: hsl(0, 0%, 68%); --personal_messages_capcity_bar_border_style: solid; --personal_messages_capcity_bar_border_width: 1px; --personal_messages_empty_capacity_bar_bg_color: hsl(111, 41%, 73%); --personal_messages_filled_capacity_bar_bg_color: hsl(42, 100%, 47%); --personal_messages_full_capacity_bar_bg_color: hsl(0, 93%, 49%); --warning_level_none_bar_bg_color: hsl(100, 67%, 55%); --warning_level_watched_bar_bg_color: hsl(51, 100%, 50%); --warning_level_moderated_bar_bg_color: hsl(39, 100%, 50%); --warning_level_muted_bar_bg_color: hsl(6, 88%, 63%); /* Quote Blocks */ --quote_block_alt_bg: hsl(198, 48%, 95%); --quote_block_standard_bg: hsl(224, 55%, 92%); --quote_block_border_color: hsl(195, 17%, 26%); --quote_block_border_style: solid; --quote_block_border_width: 1px; --quote_block_border_lr_color: hsl(0, 0%, 27%); --quote_block_border_lr_style: solid; --quote_block_border_lr_width: 2px; --quote_block_font_size: 0.85rem; --quote_cite_border_color: hsla(0, 0%, 0%, 0.1); --quote_cite_border_style: solid; --quote_cite_border_width: 1px; --quote_cite_before_font_size: 22px; --quote_cite_before_font_style: normal; --quote_cite_font_size: 0.9em; --quote_header_txt_color: hsl(0, 0%, 77%); --quote_header_font_size: 0.9em; --quote_txt_color: hsl(0, 0%, 77%); /* Mobile Menu Icon */ --mobile_menu_icon_bg_color: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); /* Registration Section */ --coppa_contact_bg_color: hsl(0, 0%, 10%); --coppa_contact_border_color: hsl(0, 0%, 13%); --coppa_contact_border_style: solid; --coppa_contact_border_width: 1px; --coppa_contact_txt_color: hsl(0, 0%, 83%); --valid_input_bg_color: hsl(100, 100%, 97%); --invalid_input_bg_color: hsl(0, 100%, 97%); /* Social Icons */ --social_icons_border_color: hsl(214, 30%, 99%) hsl(214, 30%, 89%) hsl(214, 30%, 89%) hsl(214, 30%, 99%); --social_icons_border_color_hover: hsl(214, 30%, 89%) hsl(214, 30%, 99%) hsl(214, 30%, 99%) hsl(214, 30%, 89%); --social_icons_box_shadow: 0px 0px 1px hsl(0, 0%, 0%, .3); /* Two Factor Auth Code Container */ --tfacode_bg_color: hsl(206, 74%, 89%); /* The "new" button */ --new_button_bg_color: hsl(215, 18%, 21%); --new_button_border_radius: 2px; --new_button_font_family: verdana, sans-serif; --new_button_font_size: 9px; --new_button_font_weight: 700; --new_button_line_height: 15px; --new_button_txt_color: hsl(0, 0%, 100%); --new_button_txt_color_visited: hsl(0, 0%, 100%); --new_button_txt_color_hover: hsl(0, 0%, 100%); /* The Color Switcher */ --styleselect_color_blue: hsl(212, 36%, 19%); --styleselect_color_red: hsl(0, 66%, 19%); --styleselect_color_green: hsl(153, 46%, 24%); /* Toggle */ --toggle_bg: #f7f7f7 url(../images/icons/toggle.png) no-repeat 0 0 / 17px; --toggle_bg_hover: hsl(208, 45%, 83%); --toggle_border_color: hsl(0, 0%, 77%); --toggle_border_style: solid; --toggle_border_width: 1px; --toggle_border_radius: 4px; --toggle_box_shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 1px #fff inset, 0 -5px 4px rgba(0,0,0,.1) inset; --toggle_box_shadow_hover: 0 1px 2px rgba(0, 0, 0, 0.25) inset; /* ToolTips */ --tooltip_bg_color: hsl(0, 0%, 100%); --tooltip_border_color: hsl(0, 0%, 67%); --tooltip_border_style: solid; --tooltip_border_width: 1px; --tooltip_txt_color: hsl(0, 0%, 20%); --tooltip_border_radius: 4px; --tooltip_box_shadow: 1px 2px 4px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.05) inset; /* Window Backgrounds */ --window_approve_topic_bg_color: hsl(0, 100%, 90%); --window_approve_post_bg_color: hsl(0, 100%, 90%); --window_bg_color: hsl(214, 30%, 95%); --window_bg_even_color: hsl(214, 30%, 95%); --window_bg_odd_color: hsl(214, 30%, 95%); --window_locked_bg_color: hsl(218, 20%, 92%); --window_sticky_bg_color: hsl(209, 35%, 92%); --window_sticky_locked_bg_color: hsl(22, 35%, 92%); --window_target_bg_color: hsl(60, 100%, 94%); --window_table_row_bg_hover_color: hsl(214, 30%, 97%); /* Video Container */ --video_container_bg_color: hsl(0, 0%, 0%); /* Basic Colors */ --black: hsl(0, 0%, 0%); --white: hsl(0, 0%, 100%); --red: hsl(0, 100%, 50%); --blue: hsl(240, 100%, 50%); --green: hsl(120, 100%, 25%); } [data-theme='dark'] { /* Admin CP Stuff */ /* Styles for the file permissions section. */ --perm_read_bg_color: hsl(101, 78%, 86%); --perm_writable_bg_color: hsl(0, 100%, 87%); --perm_execute_bg_color: hsl(31, 95%, 84%); --perm_custom_bg_color: hsl(100, 5%, 76%); --perm_no_change_bg_color: hsl(0, 0%, 93%); --perm_groups_bg_color: hsl(0, 0%, 100%); --manage_boards_li_recycle_board_bg_color: hsl(180, 33%, 90%); --manage_boards_li_redirect_board_bg_color: hsl(60, 33%, 90%); --move_smileys_link_hover_img_border_color: hsl(208, 44%, 61%); --move_smileys_selected_item_border_color: hsl(39, 100%, 59%); /* Alternating colors */ --stripes_even_bg_color: hsl(0, 0%, 5%); --stripes_odd_bg_color: hsl(206, 30%, 5%); --alternative_bg_color: hsl(0, 0%, 5%); --alternative_bg_2_color: hsl(202, 21%, 3%); /* AJAX Notification Bar */ --ajax_in_progress_bg_color: hsl(0, 0%, 100%); --ajax_in_progress_border_color: hsl(27, 100%, 49%); --ajax_in_progress_border_style: solid; --ajax_in_progress_border_width: 4px; --ajax_in_progress_link_color: hsl(39, 100%, 50%); --ajax_in_progress_txt_color: hsl(27, 100%, 49%); /* Auto Suggest Control */ --auto_suggest_border_color: var(--border_color); --auto_suggest_border_style: solid; --auto_suggest_border_width: 1px; --auto_suggest_border_radius: 3px; --auto_suggest_item_bg_color: var(--window_bg_color); --auto_suggest_item_hover_bg_color: var(--window_bg_odd_color); --auto_suggest_item_hover_txt_color: var(--body_txt_color); /* Body */ --body_bg_color: linear-gradient(180deg, hsl(215, 55%, 30%) 40%, hsl(215, 55%, 7%) 100%); --body_txt_color: hsl(0, 0%, 80%); --body_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; --body_font_size: 85%; --body_line_height: 150%; --border_color: hsl(214, 30%, 8%) hsl(214, 30%, 1%) hsl(214, 30%, 1%) hsl(214, 30%, 8%); --border_style: solid; --border_width: 1px; --html_bg_color: linear-gradient(180deg, hsl(215, 55%, 30%) 40%, hsl(215, 55%, 0%) 100%); --heading_font_size: 1em; --heading_txt_color: hsl(0, 0%, 90%); --highlight_txt_color: hsl(27, 100%, 50%) !important; --horizontal_rule_bg_color: hsl(214, 30%, 1%); --horizontal_rule_box_shadow: 0 1px 0 hsl(214, 30%, 8%)inset; --info_link: hsl(213, 46%, 84%); --link: hsl(213, 46%, 84%); --link_hover: hsl(213, 46%, 54%); --moderation_link_bg_color:hsl(0, 100%, 30%); --moderation_link_border_radius: 50%; --strong_txt_color: hsl(0, 0%, 100%); --option_bg_hover_color: hsl(214, 36%, 11%); --select_txt_color: hsl(0, 0%, 0%); --selection_bg_color: hsl(213, 46%, 84%); --selection_txt_color: hsl(0, 0%, 0%); --wrapper_bg_color: hsl(0, 0%, 1%); --wrapper_border_color: hsl(214, 9%, 31%); --wrapper_border_style: solid; --wrapper_border_width: 5px; --wrapper_border_radius: 0px; --wrapper_box_shadow: none; --inner_section_bg_color: transparent; --inner_wrap_bg_color: hsl(0, 0%, 100%); --inner_wrap_border_color: hsl(214, 30%, 8%); --inner_wrap_border_style: solid; --inner_wrap_border_width: 1px; --checkbox_and_radio_bg_color: hue-rotate(0deg); /* Breadcrumb */ --breadcrumb_bg_color: hsl(252, 4%, 6%); --breadcrumb_border_color: hsl(300, 5%, 10%); --breadcrumb_border_style: solid; --breadcrumb_border_width: 1px; --breadcrumb_border_radius: 5px; --breadcrumb_box_shadow: 0px 0px 1px 1px hsl(210, 22%, 15%)inset; --breadcrumb_divider_color: hsl(0, 0%, 100%); --breadcrumb_divider_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; --breadcrumb_divider_font_size: 83.33%; --breadcrumb_divider_line_height: 150%; --breadcrumb_font_size: 0.9em; --breadcrumb_link_color: hsl(213, 46%, 84%); --breadcrumb_txt_color: hsl(0, 0%, 87%); /* Buttons */ --button_bg_color: linear-gradient(180deg, hsl(214, 18%, 8%) 0%, hsl(214, 18%, 7%) 100%); --button_bg_hover: linear-gradient(180deg, hsl(214, 18%, 7%) 0%, hsl(214, 18%, 8%) 100%); --button_bg_active: linear-gradient(180deg, hsl(214, 18%, 8%) 0%, hsl(214, 18%, 7%) 100%); --button_bg_focus: linear-gradient(180deg, hsl(214, 18%, 8%) 0%, hsl(214, 18%, 7%) 100%); --button_border_color: hsl(214, 18%, 10%) hsl(214, 18%, 10%) hsl(214, 18%, 10%) hsl(214, 18%, 7%); --button_border_style: solid; --button_border_width: 1px; --button_border_radius: 3px; --button_box_shadow: none; --button_font_size: 0.7rem; --button_line_height: 2em; --button_min_height: calc(2em + 2em * (0.9 - 0.85)); /* "input" font size minus ".button" font size */ --button_active_border_color: hsl(214, 18%, 10%) hsl(214, 18%, 7%) hsl(214, 18%, 10%) hsl(214, 18%, 10%); --button_active_border_style: solid; --button_active_border_width: 1px; --button_active_font_weight: bold; --button_hover_border_color: hsl(214, 18%, 10%) hsl(214, 18%, 7%) hsl(214, 18%, 10%) hsl(214, 18%, 10%); --button_hover_box_shadow: none; --button_txt_color: hsl(0, 0%, 99%); --button_txt_color_active: hsl(0, 0%, 100%); --button_txt_color_hover: hsl(0, 0%, 98%); --button_txt_color_focus: hsl(0, 0%, 98%); --button_txt_color_active_and_focus: hsl(0, 0%, 72%); --button_txt_color_hover_and_focus: hsl(0, 0%, 72%); /* Board Index */ --forum_title_link_color: hsl(0, 0%, 100%); --forum_title_font_size: 2em; --forum_title_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; --children_bg_color: linear-gradient(180deg, hsl(214, 29%, 12%) 0%, hsl(214, 29%, 10%) 100%); --children_box_shadow: 0px 1px 0px hsla(0, 0%, 100%, 5%)inset; --news_bg_color: hsl(252, 4%, 6%); --news_left_bg_color: hsl(252, 4%, 0%); --sub_bar_bg_color: linear-gradient(180deg, hsl(214, 27%, 17%) 0%, hsl(214, 27%, 10%) 100%); --sub_bar_link_color: hsl(0, 0%, 100%); --up_contain_bg_color: hsl(214, 30%, 5%); --information_bg_color: hsl(214, 30%, 5%); --information_border_color: hsl(300, 5%, 10%); --information_border_style: solid; --information_border_width: 1px; --information_border_radius: 0 0 7px 7px; --moderationbuttons_check_focus_box_shadow: 0 0 4px hsl(205, 65%, 57%); /* Category */ --cat_bg_color: linear-gradient(180deg, hsl(212, 36%, 19%) 0%, hsl(212, 45%, 14%) 100%); --cat_bar_collapsed_border_radius: 6px; --cat_bar_desc_txt_color: hsl(0, 0%, 100%); --cat_bar_link_color: hsl(0, 0%, 100%); --cat_bar_strong_txt_color: hsl(0, 0%, 100%); --cat_bar_border_radius: 0px; /* Info Center*/ --info_block_information_bg_color: hsl(214, 30%, 5%); --info_block_icon_bg_color: hsl(204, 24%, 6%); --info_center_container_bg_color: hsl(214, 30%, 5%); --info_center_border_radius: 3px; --info_center_box_shadow: 0px 2px 0px hsl(210, 11%, 4%); --roundframe_bg_color: hsl(214, 30%, 5%); --roundframe_border_radius: 7px; /* Title Bar */ --title_bar_bg_color: linear-gradient(180deg, hsl(214, 27%, 17%) 0%, hsl(214, 27%, 15%) 100%); --title_bar_border_radius: 0px; --title_bar_link: hsl(0, 0%, 100%); /* Calendar colors for birthdays, events and holidays */ --birthday_txt_color: hsl(284, 90%, 40%); --event_txt_color: hsl(120, 90%, 28%); --holiday_txt_color: hsl(218, 100%, 50%); --warn_moderate_txt_color: hsl(39, 100%, 50%); --warn_watch_txt_color: hsl(120, 100%, 25%); /*Error, Info, and Notice Boxes. */ --error_box_bg_color: hsl(0, 100%, 5%); --error_box_border_color: hsl(353, 60%, 20%); --error_box_border_style: solid; --error_box_border_width: 2px; --notice_box_bg_color: hsl(50, 100%, 10%); --notice_box_border_color: hsl(48, 100%, 57%); --notice_box_border_style: solid; --notice_box_border_width: 1px; --notice_box_txt_color: hsl(0, 0%, 100%); --info_box_bg_color: hsl(120, 100%, 90%); --info_box_border_color: hsl(120, 100%, 25%); --info_box_border_style: solid; --info_box_border_width: 1px; --info_box_txt_color: hsl(0, 0%, 13%); --desc_box_border_color: hsl(0, 0%, 77%); --desc_box_border_style: solid; --desc_box_border_width: 1px; /* File Error */ --errorfile_table_td_bg_color: hsl(0, 0%, 98%); --errorfile_table_current_bg_color: hsl(0, 87%, 88%); --errorfile_table_file_line_bg_color: hsl(0, 0%, 93%); --errorfile_table_file_line_current_bg_color: hsl(0, 93%, 77%); /* Code Blocks */ --code_bg_color: hsl(0, 0%, 5%); --code_border_color: hsl(0, 0%, 17%); --code_border_top_color: hsl(0, 0%, 13%); --code_border_bottom_color: hsl(0, 0%, 27%); --code_border_radius: 2px; --code_font_size: 0.78rem; --code_header_font_size: 0.9em; --code_header_txt_color: hsl(0, 0%, 40%); /* Colors for background of posts requiring approval */ --approve_bg_color: hsl(0, 100%, 6%); --approve_bg_color_2: hsl(0, 100%, 7%); --approve_txt_color: hsl(0, 0%, 93%); /* FieldSet */ --fieldset_legend_txt_color: hsl(0, 0%, 100%); --fieldset_border_color: hsl(214, 30%, 8%) hsl(214, 30%, 1%) hsl(214, 30%, 1%) hsl(214, 30%, 8%); --fieldset_border_style: solid; --fieldset_border_width: 1px; --fieldset_border_radius: 3px; /* Footer */ --footer_bg_color: hsl(0, 0%, 1%); --footer_border_color: hsl(210, 23%, 25%); --footer_border_style: solid; --footer_border_width: 1px; --footer_copyright_box_shadow: 0px -1px 0px hsl(0, 0%, 0%) inset; --footer_copyright_border: 1px solid hsl(212, 25%, 24%); --footer_font_size: 0.9em; --footer_txt_color: hsl(0, 0%, 90%); --footer_logo_filter: invert(93); /* Generic & Progress Bar */ --generic_bar_bar_bg_color: hsl(214, 17%, 28%); --generic_bar_bar_box_shadow: 4px -4px 8px hsla(0, 0%, 0%, 0.1) inset, 4px 4px 8px hsla(0, 0%, 10%, 0.3) inset; --generic_bar_bar_border_radius: 1px; --generic_bar_border_color: hsl(0, 0%, 0%); --generic_bar_border_style: solid; --generic_bar_border_width: 1px; --generic_bar_border_radius: 2px; --generic_bar_bg_color: hsl(210, 22%, 16%); --generic_bar_txt_color: hsla(0, 0%, 93%); --generic_bar_span_txt_shadow: 1px 1px hsla(0, 0%, 0%, 0.8); --generic_bar_vertical_bar_box_shadow: 4px -4px 4px hsla(0, 0%, 0%, 0.1) inset, 4px 4px 4px hsla(0, 0%, 100%, 0.3) inset; --progress_bar_border_radius: 4px; --progress_bar_txt_color: hsla(0, 0%, 0%, 0.8); --progress_bar_bar_bg_color: hsl(100, 67%, 55%); --progress_bar_bar_bg_image: linear-gradient(135deg, hsla(0, 0%, 100%, 0.15) 25%, transparent 25%, transparent 50%, hsla(0, 0%, 100%, 0.15) 50%, hsla(0, 0%, 100%, 0.15) 75%, transparent 75%, transparent); --progress_bar_bar_box_shadow: -1px 1px 0 hsla(0, 0%, 100%, 0.25) inset, 1px -1px 0 hsla(0, 0%, 0%, 0.1) inset; --progress_yellow_bar_bg_color: hsl(47, 92%, 54%); --progress_green_bar_bg_color: hsl(100, 67%, 55%); --progress_red_bar_bg_color: hsl(6, 88%, 63%); --progress_blue_bar_bg_color: hsl(191, 76%, 55%); /* Header */ --header_bg_color: hsl(0, 0%, 1%) url(../images/custom/header_bg_dark.png); --header_border_radius: 0px; --header_border_color: hsl(214, 9%, 31%); --header_border_style: solid; --header_border_width: 5px; --header_box_shadow: 0px 0px 5px 0px hsl(0, 0%, 0%) inset; --top_info_border_color: hsl(210, 31%, 42%); --top_info_border_style: solid; --top_info_border_width: 1px; --top_info_link_hover_txt_color: hsl(0, 0%, 100%); --top_info_link_color: hsl(213, 46%, 94%); --top_info_link_txt_color: hsl(213, 46%, 94%); --top_info_active_link_color: hsl(213, 46%, 94%); --top_info_hover_link_color: hsl(39, 100%, 50%); --top_info_link_hover_border_color: hsl(0, 0%, 0%); --top_info_link_focus_border_color: hsl(210, 31%, 42%); --top_menu_bg_color: var(--window_bg_color); --top_menu_box_shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); --top_menu_border_radius: 3px; --top_section_bg_color: url(../images/custom/container_bg.png) repeat; --top_section_box_shadow: 0px 1px 0px hsl(223, 24%, 20%)inset; --top_section_border_color: hsl(210, 23%, 25%); --top_section_border_style: solid; --top_section_border_width: 1px; /* Input, Button, Select, Textarea */ --ibst_txt_color: hsl(0, 0%, 93%); --ibst_bg_color: linear-gradient(180deg, hsl(214, 18%, 16%) 0%, hsl(214, 18%, 15%) 100%); --ibst_box_shadow: 0px 0px 1px 0px hsl(0, 0%, 0%)inset; --ibst_border_color: hsl(0, 0%, 2%); --ibst_border_style: solid; --ibst_border_width: 1px; --ibst_disabled_bg_color: linear-gradient(180deg, hsl(214, 18%, 30%) 0%, hsl(214, 18%, 30%) 100%); --ibst_disabled_border_color: hsl(0, 0%, 31%); --ibst_disabled_txt_color: hsl(0, 0%, 89%); --ibst_focus_bg_color: linear-gradient(180deg, hsl(214, 18%, 12%) 0%, hsl(214, 18%, 14%) 100%); --ibst_focus_border_color: hsl(0, 0%, 0%); --ibst_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; --ibst_font_size: 85%; --ibst_font_line_height: 150%; --ibst_hover_bg_color: linear-gradient(180deg, hsl(214, 18%, 12%) 0%, hsl(214, 18%, 14%) 100%); --ibst_hover_border_color: hsl(322, 36%, 30%); --ibst_textarea_hover_bg_color: var(--ibst_hover_bg_color); /* Maintenance Mode */ --errorfile_table_bg_color: hsl(206, 30%, 95%); --errorfile_table_td_current_bg_color: hsla(33, 92%, 51%, 0.2); --errorfile_table_td_current_border_color: hsla(0, 0%, 0%, 0.2); --errorfile_table_td_current_border_style: solid; --errorfile_table_td_current_border_width: 1px; /* Menu */ --amt_active_bg_color: hsla(0, 0%, 0%, 0.2); --amt_bg_color: hsl(0, 100%, 10%); --amt_border_radius: 5px; --amt_txt_color: hsl(0, 0%, 90%); --dropmenu_bg_color: hsl(252, 4%, 6%); --dropmenu_box_shadow: 0px -1px 0px 1px hsl(0, 0%, 0%) inset; --dropmenu_border_color: hsl(0, 0%, 10%) ; --dropmenu_border_style: solid; --dropmenu_border_width: 1px; --dropmenu_hover_bg_color: hsl(212, 45%, 29%); --dropmenu_link_color: hsl(0, 0%, 90%); --dropmenu_link_hover_color: hsl(0, 0%, 100%); --dropmenu_strong_txt_color: hsl(0, 0%, 17%); --dropmenu_subsections_font_family: Arial, sans-serif; --dropmenu_subsections_font_size: 83.33%; --dropmenu_subsections_line_height: 150%; --menu_bg_color: linear-gradient(hsl(252, 4%, 6%), hsl(252, 4%, 5%)); --menu_bg_hover_color: hsl(212, 45%, 29%); --menu_border_color: hsl(0, 0%, 10%); --menu_border_style: solid; --menu_border_width: 1px; --menu_button_border_width: 1px; --menu_button_border_style: solid; --menu_button_border_color: hsl(0, 0%, 0%); --menu_button_box_shadow: -1px 0px 0px 0px hsl(0, 0%, 10%) inset; --menu_box_shadow: none; --menu_link_bg_active_color: linear-gradient(hsl(212, 45%, 29%), hsl(212, 45%, 24%)); --menu_link_bg_active_hover_color: linear-gradient(hsl(212, 45%, 29%), hsl(212, 45%, 24%)); --menu_link_bg_focus_color: linear-gradient(hsl(212, 45%, 29%), hsl(212, 45%, 24%)); --menu_link_bg_hover_color: linear-gradient(hsl(212, 45%, 29%), hsl(212, 45%, 24%)); --menu_link_color: hsl(213, 46%, 94%); --menu_link_active_color: hsl(0, 0%, 100%); --menu_link_active_hover_color: hsl(0, 0%, 0%); --menu_link_focus_color: hsl(0, 0%, 100%); --menu_link_hover_color: hsl(0, 0%, 100%); /* Mentions */ --atwho_view_bg_color: hsl(0, 0%, 10%); --atwho_view_border_color: hsl(0, 0%, 13%); --atwho_view_border_style: solid; --atwho_view_border_width: 1px; --atwho_view_box_shadow: 0 0 5px rgba(0, 0, 0, 0.1); --atwho_view_border_radius: 3px; --atwho_view_small_txt_color: hsl(0, 0%, 47%); --atwho_view_strong_text: hsl(225, 100%, 60%); --atwho_view_cur_bg_color: hsl(225, 100%, 60%); --atwho_view_cur_txt_color: hsl(0, 0%, 100%); --atwho_view_cur_small_txt_color: hsl(0, 0%, 100%); --atwho_view_cur_strong_txt_color: hsl(0, 0%, 100%); /* On/Off Icons (User) */ --on_off_border_radius: 50%; --on_bg_color: hsl(100, 75%, 63%); --on_border_color: hsl(100, 61%, 55%); --off_bg_color: hsl(0, 3%, 65%); --off_border_color: hsl(0, 2%, 58%); /* Pagination */ --current_page_txt_color: hsl(213, 46%, 34%); /* Popup Windows */ --popup_container_bg_color: hsla(204, 33%, 24%, 0.5); --popup_content_bg_color: hsl(214, 30%, 5%); --popup_content_txt_color: hsl(0, 0%, 93%); --popup_content_border_color: hsl(214, 30%, 8%); --popup_content_border_radius: 6px 6px 2px 2px; --popup_content_box_shadow: 0px 0px 1px 1px hsl(214, 30%, 1%); --popup_heading_txt_color: hsl(0, 0%, 100%); --popup_window_bg_color: linear-gradient(180deg, hsl(252, 4%, 6%) 0%, hsl(252, 4%, 8%) 100%); --popup_window_box_shadow: 0px 0px 5px 0px hsl(0, 0%, 0%)inset; --popup_window_border_color: hsl(214, 30%, 8%); --popup_window_border_radius: 7px 7px 3px 3px; /* Post Bit Section */ --display_head_txt_color: hsl(0, 0%, 58%); --poster_online_link_color: hsl(213, 46%, 34%); --key_post_info_link_color: hsl(213, 46%, 34%); --keyinfo_postinfo_modified_txt_color: hsl(0, 0%, 80%); --subject_title_link_color: hsl(0, 0%, 100%); --page_number_txt_color: hsl(213, 46%, 34%); --inner_border_color: hsl(0, 0%, 0%); --inner_border_style: solid; --inner_border_width: 1px; --inner_box_shadow: 0 1px 0 hsl(214, 30%, 8%) inset; --signature_border_color: hsl(0, 0%, 0%); --signature_box_shadow: hsl(214, 30%, 8%); /* Post Draft Options */ --post_draft_options_bg_color: var(--window_bg_color); --post_draft_options_border_color: var(--border_color); --post_draft_options_border_style: solid; --post_draft_options_border_width: 1px; --post_draft_options_border_left_color: var(--border_color); --post_draft_options_border_left_style: solid; --post_draft_options_border_left_width: 1px; --post_draft_options_border_radius: 0 0 4px 4px; --post_draft_options_settings_border_color: var(--border_color); --post_draft_options_settings_border_style: solid; --post_draft_options_settings_border_width: 1px; --post_draft_options_settings_strong_txt_color: var(--body_txt_color); /* Post Options */ --post_options_bg_color: linear-gradient(180deg, hsl(252, 4%, 96%) 0%, hsl(252, 4%, 98%) 100%); --post_options_border_color: var(--border_color); --post_options_border_style: solid; --post_options_border_width: 1px; --post_options_border_radius: 4px 0px 4px 4px; --post_options_border_color_hover: var(--border_color); --post_options_link_border_radius: 3px; --post_options_font_weight: normal; /* Post BBC Links */ --bbc_link_border_color: hsl(218, 29%, 74%); --bbc_link_hover_border_color: hsl(220, 33%, 30%); --bbc_link_hover_border_style: solid; --bbc_link_hover_border_width: 1px; /* Profile Section */ --activity_stats_bg_color: hsl(0, 0%, 93%); --activity_stats_border_color: var(--border_color); --activity_stats_border_style: solid; --activity_stats_border_width: 1px; --detailedinfo_border_color: var(--border_color); --detailedinfo_border_style: solid; --detailedinfo_border_width: 1px; --detailedinfo_txt_color: var(--body_txt_color); --counter_txt_color: hsl(0, 0%, 85%); --list_posts_box_shadow: 0 1px 0 hsl(0, 0%, 100%) inset; --pick_theme_selected_bg_color: hsl(206, 33%, 3%); --unread_pm_bg_color: hsl(120, 100%, 90%); --unread_notify_hover_bg_color: hsl(214, 30%, 17%); /* Progress Bars & Generic Bars & Warning Bars & Personal Message Bar*/ --personal_messages_capcity_bar_bg_color: hsl(206, 30%, 95%); --personal_messages_capcity_bar_border_color: hsl(0, 0%, 68%); --personal_messages_capcity_bar_border_style: solid; --personal_messages_capcity_bar_border_width: 1px; --personal_messages_empty_capacity_bar_bg_color: hsl(111, 41%, 73%); --personal_messages_filled_capacity_bar_bg_color: hsl(42, 100%, 47%); --personal_messages_full_capacity_bar_bg_color: hsl(0, 93%, 49%); --warning_level_none_bar_bg_color: hsl(100, 67%, 55%); --warning_level_watched_bar_bg_color: hsl(51, 100%, 50%); --warning_level_moderated_bar_bg_color: hsl(39, 100%, 50%); --warning_level_muted_bar_bg_color: hsl(6, 88%, 63%); /* Quote Blocks */ --quote_block_alt_bg: hsl(198, 48%, 15%); --quote_block_standard_bg: hsl(224, 55%, 12%); --quote_block_border_color: hsl(195, 17%, 26%); --quote_block_border_style: solid; --quote_block_border_width: 1px; --quote_block_border_lr_color: hsl(0, 0%, 27%); --quote_block_border_lr_style: solid; --quote_block_border_lr_width: 2px; --quote_block_font_size: 0.85rem; --quote_cite_border_color: hsla(0, 0%, 0%, 0.1); --quote_cite_border_style: solid; --quote_cite_border_width: 1px; --quote_cite_before_font_size: 22px; --quote_cite_before_font_style: normal; --quote_cite_font_size: 0.9em; --quote_header_txt_color: hsl(0, 0%, 77%); --quote_header_font_size: 0.9em; --quote_txt_color: hsl(0, 0%, 77%); /* Mobile Menu Icon */ --mobile_menu_icon_bg_color: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); /* Registration Section */ --coppa_contact_bg_color: hsl(0, 0%, 10%); --coppa_contact_border_color: hsl(0, 0%, 13%); --coppa_contact_border_style: solid; --coppa_contact_border_width: 1px; --coppa_contact_txt_color: hsl(0, 0%, 83%); --valid_input_bg_color: hsl(100, 100%, 7%); --invalid_input_bg_color: hsl(0, 100%, 7%); /* Social Icons */ --social_icons_border_color: hsl(214, 30%, 12%) hsl(214, 30%, 8%) hsl(214, 30%, 8%) hsl(214, 30%, 12%); --social_icons_border_color_hover: hsl(214, 30%, 1%) hsl(214, 30%, 9%) hsl(214, 30%, 9%) hsl(214, 30%, 1%); --social_icons_box_shadow: 0px 0px 3px hsl(0, 0%, 0%); /* Two Factor Auth Code Container */ --tfacode_bg_color: hsl(206, 74%, 89%); /* The "new" button */ --new_button_bg_color: hsl(215, 18%, 10%); --new_button_border_radius: 2px; --new_button_font_family: verdana, sans-serif; --new_button_font_size: 9px; --new_button_font_weight: 700; --new_button_line_height: 15px; --new_button_txt_color: hsl(0, 0%, 100%); --new_button_txt_color_visited: hsl(0, 0%, 100%); --new_button_txt_color_hover: hsl(0, 0%, 100%); /* The Color Switcher */ --styleselect_color_blue: hsl(212, 36%, 19%); --styleselect_color_red: hsl(3, 46%, 24%); --styleselect_color_green: hsl(153, 46%, 24%); /* Toggle */ --toggle_bg: #f7f7f7 url(../images/icons/toggle.png) no-repeat 0 0 / 17px; --toggle_bg_hover: hsl(208, 45%, 83%); --toggle_border_color: hsl(0, 0%, 77%); --toggle_border_style: solid; --toggle_border_width: 1px; --toggle_border_radius: 4px; --toggle_box_shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 1px #fff inset, 0 -5px 4px rgba(0,0,0,.1) inset; --toggle_box_shadow_hover: 0 1px 2px rgba(0, 0, 0, 0.25) inset; /* ToolTips */ --tooltip_bg_color: hsl(0, 0%, 100%); --tooltip_border_color: hsl(0, 0%, 67%); --tooltip_border_style: solid; --tooltip_border_width: 1px; --tooltip_txt_color: hsl(0, 0%, 20%); --tooltip_border_radius: 4px; --tooltip_box_shadow: 1px 2px 4px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.05) inset; /* Window Backgrounds */ --window_approve_topic_bg_color: hsl(0, 100%, 5%); --window_approve_post_bg_color: hsl(0, 100%, 5%); --window_bg_color: hsl(214, 30%, 5%); --window_bg_even_color: hsl(214, 30%, 5%); --window_bg_odd_color: hsl(214, 30%, 5%); --window_locked_bg_color: hsl(218, 20%, 5%); --window_sticky_bg_color: hsl(209, 35%, 5%); --window_sticky_locked_bg_color: hsl(22, 35%, 5%); --window_target_bg_color: hsl(60, 100%, 4%); --window_table_row_bg_hover_color: hsl(214, 30%, 7%); /* Video Container */ --video_container_bg_color: hsl(0, 0%, 0%); /* Basic Colors */ --black: hsl(0, 0%, 0%); --white: hsl(0, 0%, 100%); --red: hsl(0, 100%, 50%); --blue: hsl(240, 100%, 50%); --green: hsl(120, 100%, 25%); } /* You can find detailed information at https://wiki.simplemachines.org/smf/Curve2_CSS /* Index */ html { background: var(--body_bg_color); scroll-padding-top: 3rem; } body { background: var(--body_bg_color); font-family: var(--body_font_family); font-size: var(--body_font_size); line-height: var(--body_line_height); color: var(--body_txt_color); display: flex; flex-direction: column; min-height: 100vh; margin: 20px 0px; background-repeat: repeat-x; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1008%26quot%3b)' fill='none'%3e%3cpath d='M-9.77 182.82C170.3 183.99 325.71 346.61 690.65 350.82 1055.59 355.03 1205.77 590.28 1391.07 593.69' stroke='rgba(255%2c 255%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-263.2 403.66C-112.04 401.98 95.24 234.72 317.67 235.66 540.11 236.6 500.33 548.74 608.11 583.83' stroke='rgba(255%2c 255%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-163.47 497.5C25.05 494.29 279.78 256.15 551.23 256.7 822.68 257.25 777.99 629.86 908.58 669.75' stroke='rgba(255%2c 255%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-75.27 244.06C53.37 242.37 211.35 83.27 416.61 92.86 621.87 102.45 548.27 521.43 662.55 606.24' stroke='rgba(255%2c 255%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-21.76 305.1C153.67 310.35 291.54 571.08 626.76 573.9 961.98 576.72 1112.17 645.27 1275.28 645.38' stroke='rgba(255%2c 255%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1008'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e"); } ::selection { text-shadow: none; background: var(--selection_bg_color); color: var(--selection_txt_color); } /* General reset */ * { box-sizing: border-box; padding: 0; margin: 0; } ul, ol { list-style: none; } ul.normallist { list-style-type: disc; padding: 0 0 0 15px; } table { empty-cells: show; } abbr { border-bottom: 0.1em dotted; } input, button, select, textarea { color: var(--ibst_txt_color); font-family: var(--ibst_font_family); font-size: var(--ibst_font_size); line-height: var(--ibst_font_line_height); background: var(--ibst_bg_color); outline: none; border: var(--ibst_border_width) var(--ibst_border_style); border-color: var(--ibst_border_color); vertical-align: middle; border-radius: 3px; box-shadow:none; padding: 0.3em 0.4em; } input:hover, textarea:hover, button:hover, select:hover { outline: none; border-color: var(--ibst_hover_border_color); background: var(--ibst_hover_bg_color); } textarea:hover { background: var(--ibst_textarea_hover_bg_color); } input:focus, textarea:focus, button:focus, select:focus { outline: none; border-color: var(--ibst_focus_border_color); background: var(--ibst_focus_bg_color); } input, button, select { padding: 0 0.4em; height: 2em; line-height: 2em; } select { padding: 0.22em 0.2em; /* selects don't apply line-height */ } /* Selects with more than one line */ select[size] { height: auto; } input[type="file"] { padding: 2px; height: auto; } /* Remove default mozilla dotted borders */ input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner { border: 0; } /* Prevent inputs and images overflowing */ img, input, select, textarea { max-width: 100%; } /* This is a specific issue on Ubuntu - Chrome */ #chrome input { font-family: "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif; } /* The following is necessary */ textarea { font-size: 1em; } /* Use a consistent monospace font everywhere */ .monospace, .bbc_code, .phpcode, pre { font-family: "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace; } .sceditor-container textarea, .sceditor-container textarea:focus { box-shadow: none; } #quick_edit_body_container textarea, .move_topic textarea, dd textarea { width: 100%; min-height: 100px; } /* Apply the font only to these elements */ input, button, select { font-size: 0.75rem; } /* Number inputs don't support size nor width, so add some common ones here and set a default... */ input[type="number"] { padding-right: 0; /* Removes weird white space after arrows in some browsers */ width: calc(4ch + 15px + 0.8em); } input[type="number"][size="2"], input[type="number"][size="1"] { width: calc(2ch + 15px + 0.8em); } input[type="number"][size="3"] { width: calc(3ch + 15px + 0.8em); } input[type="number"][size="5"] { width: calc(5ch + 15px + 0.8em); } input[type="number"][size="6"] { width: calc(6ch + 15px + 0.8em); } select option { padding: 0 4px; color: var(--select_txt_color); } select { color: var(--ibst_txt_color); } option:not(:checked) { background: var(--ibst_bg_color)!important; } option:hover { background: var(--option_bg_hover_color)!important; } /* Fieldsets are used to group elements */ fieldset { padding: 18px; margin: 0 0 6px 0; border: var(--fieldset_border_width) var(--fieldset_border_style); border-color: var(--fieldset_border_color); border-radius: var(--fieldset_border_radius); } fieldset legend { font-weight: bold; color: var(--fieldset_legend_txt_color); box-shadow: none; border: none; } summary { margin: 5px 0; } /* Define strong as bold, and em as italics */ /* Note: in some particular places, strong has been redefined as font-weight: 600; */ /* This gives a better effect for those areas, and will default to bold for fonts which do not support numerical font-weight */ strong, .strong { font-weight: bold; color: var(--strong_txt_color); } .cat_bar strong { color: var(--cat_bar_strong_txt_color); } em, .em { font-style: italic; } /* Default color on these tags */ h1, h2, h3, h4, h5, h6 { font-size: var(--heading_font_size); color: var(--heading_txt_color); } /* All input elements that are checkboxes or radio buttons shouldn't have a border around them */ input[type="checkbox"], input[type="radio"] { border: none; background: none; vertical-align: middle; box-shadow: none; margin: 0 3px; filter: var(--checkbox_and_radio_bg_color); } .moderationbuttons_mobile_check { display: none; } /* Give disabled input elements a different style */ input[disabled], textarea[disabled], select[disabled], .button.disabled, .button[disabled]:hover { background: var(--ibst_disabled_bg_color); color: var(--ibst_disabled_txt_color); border-color: var(--ibst_disabled_border_color); opacity: 0.8; cursor: default; } /* Standard horizontal rule.. ([hr], etc.) */ hr { border: none; margin: 12px 0; height: 2px; background: var(--horizontal_rule_bg_color); box-shadow: var(--horizontal_rule_box_shadow); } /* This is about links */ a, a:visited { color: var(--link); text-decoration: none; } a:hover { color: var(--link_hover); text-decoration: underline; cursor: pointer; transition: linear 0.3s; } /* Help popups require a different styling of the body element. */ /* Deprecated? */ body#help_popup { padding: 12px; } #likes li { clear: both; padding: 1px 0; display: flex; align-items: center; } #likes .avatar { height: 5em; width: 5em; margin: 0 10px 0 0; } #likes li .like_profile { flex: 1 0 auto; } #likes li .like_time { padding: 4px 0; } #likes .description { font-style: italic; opacity: 0.4; font-size: 0.9em; display: block; } /* The "new" button */ .new_posts, a.new_posts { display: inline-block; position: relative; top: -2px; padding: 0 4px; background: var(--new_button_bg_color); color: var(--new_button_txt_color); font-family: var(--new_button_font_family); font-size: var(--new_button_font_size); font-weight: var(--new_button_font_weight); line-height: var(--new_button_line_height); border-radius: var(--new_button_border_radius); opacity: 0.8; } a.new_posts:visited { color: var(--new_button_txt_color_visited); } .new_posts:hover, .new_posts:focus { color: var(--new_button_txt_color_visited); text-decoration: none; opacity: 1; } label:hover { background: transparent; } /* Common classes to easy styling. ------------------------------------------------------- */ .floatright { float: right; } .floatleft { float: left; } .floatnone { float: none; } .flow_auto { overflow: auto; } .flow_hidden { overflow: hidden; } .clear { clear: both; } .clear_left { clear: left; } .clear_right { clear: right; } /* Default font sizes: small (8pt), normal (10pt), and large (14pt). */ .smalltext, tr.smalltext th { font-size: 0.9em; } .largetext { font-size: 1.4em; } h3.largetext { font-size: large; } .xlargetext { font-size: x-large; } .centertext, .centercol { margin: 0 auto; text-align: center; } .righttext { margin-left: auto; margin-right: 0; text-align: right; } .lefttext { margin-left: 0; margin-right: auto; text-align: left; } .justifytext { text-align: justify; } .double_height { line-height: 2em; } /* some common padding styles */ .padding { padding: 8px; } .main_section, .lower_padding { padding-bottom: 6px; } .half_content { width: 50%; display: inline-block; vertical-align: top; } .half_content:nth-of-type(odd) { margin-right: -0.25em; padding-right: 0.3%; } .half_content:nth-of-type(even) { margin-left: -0.2em; padding-left: 0.3%; } /* Blockquote stylings */ blockquote { margin: 0 0 8px 0; padding: 6px 10px; font-size: var(--quote_block_font_size); border: var(--quote_block_border_width) var(--quote_block_border_style) var(--quote_block_border_color); border-left: var(--quote_block_border_lr_width) var(--quote_block_border_lr_style) var(--quote_block_border_lr_color); border-right: var(--quote_block_border_lr_width) var(--quote_block_border_lr_style) var(--quote_block_border_lr_color); } blockquote cite { display: block; border-bottom: var(--quote_cite_border_width) var(--quote_cite_border_style) var(--quote_cite_border_color); font-size: var(--quote_cite_font_size); margin-bottom: 3px; } blockquote cite::before { color: var(--quote_txt_color); font-size: var(--quote_cite_before_font_size); font-style: var(--quote_cite_before_font_style); content: "\275D"; margin-right: 3px; vertical-align: middle; } .bbc_standard_quote { background-color: var(--quote_block_standard_bg); } .bbc_alternate_quote { background-color: var(--quote_block_alt_bg); } /* A code block - maybe PHP ;). */ .bbc_code { display: block; font-size: var(--code_font_size); background: var(--code_bg_color); border: 1px solid var(--code_border_color); border-top: 2px solid var(--code_border_top_color); border-bottom: 3px solid var(--code_border_bottom_color); border-radius: var(--code_border_radius); margin: 1px 0 6px 0; padding: 3px 12px; overflow: auto; white-space: nowrap; max-height: 25em; } /* The "Quote:" and "Code:" header parts... */ .codeheader { color: var(--code_header_txt_color); font-size: var(--code_header_font_size); padding: 0 2px; } .quoteheader { color: var(--quote_header_txt_color); font-size: var(--quote_header_font_size); padding: 0 2px; } /* For links to change the code stuff... */ .codeoperation { font-weight: normal; } /* Expand code bbc */ .expand_code { max-height: none; } /* Styling for BBC tags */ .bbc_link { border-bottom: var(--bbc_link_hover_border_width) var(--bbc_link_hover_border_style) var(--bbc_link_hover_border_color); } .bbc_link:hover { text-decoration: none; border-bottom: var(--bbc_link_hover_border_width) var(--bbc_link_hover_border_style) var(--bbc_link_hover_border_color); } .bbc_size { line-height: 1.4em; } .bbc_color a { color: inherit; } .bbc_table { font: inherit; color: inherit; } .bbc_table td { font: inherit; color: inherit; vertical-align: top; } .bbc_list { text-align: left; padding: 0 0 0 35px; list-style-type: inherit; } .bbc_float { margin-bottom: 1em; /* default max-width to use if none was specified in the BBC */ max-width: 45%; } .bbc_float.floatleft { margin-right: 1em; clear: left; } .bbc_float.floatright { margin-left: 1em; clear: right; } .bbc_img { object-fit: contain; } .postarea .bbc_img.resized:hover { cursor: pointer; } .bbc_img.original_size { height: auto !important; width: auto !important; max-height: none; max-width: 100%; } /* No image should have a border when linked. */ a img { border: 0; } /* Those collapse and expand icons are wonderful. */ .toggle_up::before, .toggle_down::before { width: 28px; height: 17px; display: inline-block; background: transparent url(../images/custom/collapse.png) no-repeat 0 0 / 28px; overflow: hidden; content: ''; vertical-align: middle; margin: 0px 5px 0 5px; border: none; border-radius: 3px; box-shadow: none; transition: background-color 0.25s; padding: 0; } .toggle_down::before { background: transparent url(../images/custom/expand.png) no-repeat 0 0 / 28px; box-shadow: none; } /* Generally, those [?] icons. This makes your cursor a help icon. */ .help { cursor: help; opacity: 0.9; } .help:hover { opacity: 1; } /* Highlighted text - such as search results. */ .highlight { font-weight: bold; color: var(--highlight_txt_color); font-size: 1.1em; background-color: inherit; } /* the page navigation area */ .pagesection { padding: 2px 0; overflow: hidden; } .pagesection .pagelinks { display: inline-block; } .pages::after, .jump_to::after, .code::after, strong[id^='child_list_']::after { content: ": "; } .pages { font-size: 0.9em; margin-left: 7px; } #main_content_section .pagesection { margin: 4px 0 0 0; } .pagelinks .button { padding: 0 5px; } .nav_page { padding: 0 1px; } .expand_pages { font-weight: bold; cursor: pointer; } .current_page { padding: 0px; color: var(--current_page_txt_color); font-weight: bold; } .current_page::before, .codeoperation::before { content: "["; } .current_page::after, .codeoperation::after { content: "]"; } /* Posts and personal messages displayed throughout the forum. */ .post { overflow: auto; line-height: 1.4em; padding: 1px 0; } /* Calendar colors for birthdays, events and holidays */ .birthday { color: var(--birthday_txt_color); } .event { color: var(--event_txt_color); } .holiday > span { color: var(--holiday_txt_color); } /* Events that are currently selected on the calendar. Won't see it much, probably. */ .sel_event { font-weight: bold; } .warn_moderate { color: var(--warn_moderate_txt_color); } .warn_watch, .success { color: var(--warn_watch_txt_color); } a.moderation_link, a.moderation_link:visited { font-weight: bold; padding: 2px 7px 2px 7px; background: var(--moderation_link_bg_color); border-radius: var(--moderation_link_border_radius); border-radius: 50%; } /* AJAX notification bar ------------------------------------------------------- */ #ajax_in_progress { background: var(--ajax_in_progress_bg_color); border-bottom: var(--ajax_in_progress_border_width) var(--ajax_in_progress_border_style) var(--ajax_in_progress_border_color); color: var(--ajax_in_progress_txt_color); text-align: center; font-size: 1.6em; padding: 8px; width: 100%; line-height: 25px; position: fixed; top: 0; left: 0; } #ajax_in_progress a { color: var(--ajax_in_progress_link_color); text-decoration: underline; font-size: 0.9em; float: right; margin-right: 20px; } /* Lists with settings use these a lot. ------------------------------------------------------- */ dl.settings { clear: right; overflow: auto; margin: 0 0 10px 0; padding: 5px; } dl.settings dt { width: 56%; float: left; margin: 0 0 10px 0; clear: both; } dl.settings dt.windowbg { width: 98%; float: left; margin: 0 0 3px 0; padding: 0 0 5px 0; clear: both; } dl.settings dd { width: 42%; float: right; margin: 0 0 3px 0; } dl.settings img { margin: 0 10px 0 0; vertical-align: middle; } /* a general table class */ table.table_grid { border-collapse: collapse; margin: 0; width: 100%; } table.table_grid td { padding: 3px; } /* Some predefined widths (mostly for tables) */ .table_grid.half_content, .half_table { width: 50%; } .equal_table { width: 33%; } .quarter_table { width: 25%; } .small_table { width: 10%; } .table_icon { width: 5%; } .title_bar th, .windowbg th { padding: 4px 8px; } .title_bar .sort_down, .title_bar .sort_up { margin: -3px 0 0 2px; } /* GenericList */ .additional_row { padding: 6px 0 6px 0; } .additional_row::after { content: ""; display: block; clear: both; } img.sort, .sort { margin-bottom: -4px; margin-left: 4px; } /* table_grid styles for Profile > Show Permissions. */ #permissions table.table_grid td { padding: 5px 10px; cursor: default; } .postbg { border-left: var(--border_width) var(--border_style) var(--border_color); border-right: var(--border_width) var(--border_style) var(--border_color); } /* Styles used by the auto suggest control. ------------------------------------------------------- */ .auto_suggest_div { position: absolute; visibility: hidden; border-radius: var(--auto_suggest_border_radius); outline: none !important; border: var(--auto_suggest_border_width) var(--auto_suggest_border_style) var(--auto_suggest_border_color); z-index: 100; } .auto_suggest_item { background: var(--auto_suggest_item_bg_color); padding: 1px 4px; } .auto_suggest_item_hover { background: var(--auto_suggest_item_hover_bg_color); cursor: pointer; color: var(--auto_suggest_item_hover_txt_color); padding: 1px 4px; } /* Styles for the standard dropdown menus. ------------------------------------------------------- */ .dropmenu, #top_info { position: relative; } .dropmenu { font-size: 0em; } /* Level 1 button background. */ .dropmenu > li { display: inline-block; margin: 0px 0px; font-size: 0.76rem; line-height: 1.9em; padding: 0px; } #top_info > li { display: inline-block; margin: 0px; font-size: 0.9em; line-height: 1.9em; padding: 0px 0px; text-transform: uppercase; } .button_login a.open, .button_signup a.open { color: var(--top_info_link_color) !important; } /* Disable default focus outlines */ .dropmenu a { outline: 0; box-shadow: 0px 0px 5px 0px transparent inset; } /* For cases where we want to spotlight something specific to an item, e.g. an amount */ .amt { margin-left: 3px; padding: 3px 5px; color: var(--amt_txt_color); background: var(--amt_bg_color); border-radius: var(--amt_border_radius); font-weight: 700; font-family: Verdena, sans-serif; text-align: center; } .dropmenu li .active .amt, #top_info li .active .amt { background: var(--amt_active_bg_color); color: inherit; } #top_info .top_menu.visible { display: block; } /* Needed for new PM notifications. */ .dropmenu li strong { color: var(--dropmenu_strong_txt_color); } .dropmenu li a { padding: 10px 16px 10px 16px; display: block; border: none; color: var(--menu_link_color); font-weight: 700; border-right: var(--menu_button_border_width) var(--menu_button_border_style) var(--menu_button_border_color); box-shadow: var(--menu_button_box_shadow); text-transform: uppercase; text-decoration: none; } #top_info > li > a { color: var(--top_info_link_color); padding: 8px 13px 8px 13px; display: block; font-size: 1.3em; background: var(--cat_bg_color); margin: 0px 4px; } /* Level 1 active button. */ .dropmenu a.active { background: var(--menu_link_bg_active_color); color: var(--menu_link_active_color); font-weight: bold; } #top_info a.active { color: var(--top_info_active_link_color); font-weight: bold; } /* Level 1 hover effects. */ .dropmenu > li:hover > a { color: var(--menu_link_hover_color); cursor: pointer; text-decoration: none; } .dropmenu > li > a:focus { color: var(--menu_link_focus_color); cursor: pointer; text-decoration: none; background: var(--menu_link_bg_focus_color); } #top_info > li > a:focus, #top_info > li > a.open { color: var(--top_info_link_txt_color); cursor: pointer; text-decoration: none; } #top_info > li:hover > a { color: var(--top_info_link_hover_txt_color); text-decoration: none; opacity: 0.9; } #top_info > li:hover > a i.fa-solid.fa-envelope::before, #top_info > li:hover > a i.fa-solid.fa-envelope::before { content: "\f2b6"; } #top_info > li > a:focus i.fa-solid.fa-envelope::before, #top_info > li > a.open i.fa-solid.fa-envelope::before { content: "\f2b6"; } /* Level 1 active button. */ .dropmenu li a.active:hover, .dropmenu li:hover a.active { background: var(--menu_link_bg_active_hover_color); color: var(--menu_link_active_hover_color); text-shadow: none; } .dropmenu > li > a { background: linear-gradient(to bottom, var(--menu_bg_hover_color) 50%, transparent 50%); background-size: 100% 200%; background-position: left bottom; } .dropmenu > li:hover > a { color: var(--menu_link_hover_color); cursor: pointer; text-decoration: none; background-position: right top; transition: linear 0.45s; } a.mobile_user_menu, a[class^="mobile_generic_menu_"] { display: none; } #main_menu { background: var(--menu_bg_color); border: var(--menu_border_style); border-width: var(--menu_border_width); border-color: var(--menu_border_color); width: 100%; } .unread_links li { display: inline; font-size: 0.9em; line-height: 2.2em; padding: 0px; } /* User information. */ #profile_menu_top::after { content: " \25BC"; } .profile_user_info, .profile_user_avatar { display: inline-block; margin: 0 9px; vertical-align: middle; } .profile_user_avatar img.avatar { max-width: 100px; } .profile_username { font-size: 150%; display: block; } .profile_user_links ol { margin-left: 0; clear: both; column-count: 2; } .profile_user_links li { font-size: .8rem; line-height: 2em; padding-left: 10px; -webkit-hyphens: auto; hyphens: auto; } /* Fixes bug with border-box on scrollable js */ .scrollable, .scrollable *, #profile_menu { box-sizing: content-box; } .top_menu.scrollable { max-height: 30em; } .pm_unread, .alerts_unread { margin-top: 5px; border-top: var(--border_width) var(--border_style) var(--border_color); } .unread_notify { border-bottom: var(--border_width) var(--border_style) var(--border_color); } .no_unread { margin-top: 5px; text-align: center; } .unread_notify:hover { background: var(--unread_notify_hover_bg_color); text-decoration: none; } .unread_notify:last-child { border-bottom: none; } .unread_notify { display: flex; align-items: center; padding: 6px 5px; line-height: 20px; } .unread_notify.alert_read { opacity: 0.5; outline: none; filter: grayscale(1); } .unread_notify strong { font-weight: 600; } .unread_notify .avatar { width: 40px; height: 40px; object-fit: scale-down; margin: 4px 4px 4px 0; display: inline-block; color: transparent; /* For broken images */ vertical-align: bottom; } .unread_notify_image { position: relative; width: 44px; margin-right: 4px; text-align: center; } .unread_notify_image span.alert_icon { display: block; line-height: 1em; } .unread_notify_image .avatar + .alert_icon { width: auto; position: absolute; right: 0; top: 0; } .unread_notify .details { display: inline-block; vertical-align: top; max-width: calc(100% - 48px); } #pm_menu .subject { font-weight: bold; } /* Levels 2 and 3 submenu wrapper. */ .dropmenu li ul { z-index: 90; position: absolute; display: none; min-width: 18.2em; padding: 0.5em; font-weight: normal; box-shadow: var(--dropmenu_box_shadow); background: var(--dropmenu_bg_color); border: var(--dropmenu_border_width) var(--dropmenu_border_style) var(--dropmenu_border_color); border-top: none; } .top_menu { z-index: 90; position: absolute; display: none; min-width: 18.2em; padding: 0.5em; font-weight: normal; border: none; border-radius: var(--top_menu_border_radius); box-shadow: var(--top_menu_box_shadow); background: var(--top_menu_bg_color); font-size: 1em; } /* Level 2 link background. */ .dropmenu li li { margin: 0; padding: 0; width: 18.2em; font-size: 1em; border-radius: var(--top_menu_border_radius); border: none; } /* Necessary to allow highlighting of 1st level while hovering over submenu. */ .dropmenu li:hover li a, .dropmenu li li a { background: none; padding: 4px 9px; color: var(--dropmenu_link_color); border: none; line-height: 2em; box-shadow: none; } .dropmenu li li a > img { vertical-align: middle; } /* The profile/pm menus are declared off .dropmenu li ul for consistency but have other characteristics. */ .top_menu { min-width: 26em; } .top_menu .login { width: 100%; } .top_menu .login dt { text-align: left; width: 55%; } .top_menu .login dd { width: 43%; } .top_menu .login input { width: 90%; } /* Level 3 submenu wrapper positioning. */ .dropmenu li ul ul { margin: -2em 0 0 15.3em; } /* Level 3 maintains font-size the same as Level 2. */ .dropmenu li li li a { font-size: 1em; } /* Levels 2 and 3 hover effects. */ .dropmenu li li:hover { border: none; } .dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover { background: var(--dropmenu_hover_bg_color); color: var(--dropmenu_link_hover_color); text-decoration: none; border: none; } /* Reposition Level 2 submenu as visible on hover. */ .dropmenu li:hover ul { display: block; } /* Hiding Level 3 submenu off hover. */ .dropmenu li:hover ul ul, .dropmenu li ul ul, .dropmenu li:hover ul ul ul, .dropmenu li ul ul ul { left: -9999px; } /* Reposition as visible on hover. */ .dropmenu li li:hover ul, .dropmenu li li ul { left: -14px; } .dropmenu li li.subsections > a::after { position: absolute; padding: 5px 0; right: 10px; font-family: var(--dropmenu_subsections_font_family); font-size: var(--dropmenu_subsections_font_size); line-height: var(--dropmenu_subsections_line_height); content: "\25ba"; } /* Highlighting of current section */ .dropmenu li li a.chosen { font-weight: bold; } /* The extra menu rows for admin sections, etc. */ #adm_submenus { margin: 0 0 6px 0; overflow: hidden; } /* Styles for the standard button lists. ------------------------------------------------------- */ .buttonlist, .buttonrow, .pagelinks { z-index: 100; padding: 5px 0 5px 0; } .button, .quickbuttons > li > a, .inline_mod_check { display: inline-flex; padding: 0px 8px; color: var(--button_txt_color); font-size: var(--button_font_size); line-height: var(--button_line_height); text-transform: uppercase; cursor: pointer; min-height: var(--button_min_height); border: var(--button_border_width) var(--button_border_style); border-color: var(--button_border_color); border-radius: var(--button_border_radius); box-sizing: border-box; vertical-align: middle; background: var(--button_bg_color); box-shadow: none; } a.button { color: var(--button_txt_color); } html[lang="el-GR"] .button, html[lang="el-GR"] .quickbuttons > li > a, html[lang="el-GR"] .inline_mod_check { text-transform: capitalize; } .pagesection .button { color: var(--button_txt_color); } .button:hover, .button:focus, .quickbuttons > li:hover > a, .quickbuttons > li > a:focus { color: var(--button_txt_color_hover_and_focus); border-color: var(--button_hover_border_color); text-decoration: none; transition: 0.25s; } .button:hover, .button:focus { color: var(--button_txt_color_hover); } .button:hover, #search_form .button:hover { background: var(--button_bg_hover); } /* the active one */ .button.active { background: var(--button_bg_active); color: var(--button_txt_color_active); font-weight: var(--button_active_font_weight); border: var(--button_active_border_width) var(--button_active_border_style) var(--button_active_border_color); } .button.active:hover, .button.active:focus { color: var(--button_txt_color_active_and_focus); background: var(--button_bg_focus); box-shadow: none; } .cat_bar .button { box-shadow: none; } /* In a .buttonrow, the buttons are joined together */ .buttonrow { margin: 0 5px; } .buttonrow .button { display: table-cell; border-radius: 0; } .buttonrow .button:first-child { border-radius: 3px 0 0 3px; } .buttonrow .button:last-child { border-radius: 0 3px 3px 0; } /* in a titlebg, the buttonlist is of small height */ .titlebg .buttonlist { margin: 0; padding: 0; } /* Styles for the general looks of the theme. ------------------------------------------------------- */ /* Box-shadow only on this one. */ #wrapper { clear: both; background: var(--wrapper_bg_color); border: none; box-shadow: none; border-radius: var(--wrapper_border_radius); overflow: hidden; } /* Set maximum width limit for content */ #top_section .inner_wrap, #wrapper, #footer .inner_wrap, .footer_copyright, #main_menu .inner_wrap { max-width: 1200px; margin: 0 auto; } /* The framing graphics */ /* The top bar. */ #top_section { border-bottom: var(--top_section_border_width) var(--top_section_border_style) var(--top_section_border_color); box-shadow: var(--top_section_box_shadow); background: var(--top_section_bg_color); clear: both; } #top_section::after { content: ""; display: block; clear: both; } #top_section .inner_wrap { flex-direction: row; flex-wrap: nowrap; display: flex; justify-content: space-between; align-items: center; } .top_time { display: inline-flex; align-items: center; margin: 0px; padding: 0px; font-size: 2em; font-weight: 700; } #top_info { padding: 0px; line-height: 1.3em; max-width: 100%; display: inline-flex; align-items: center; margin: 0px; } #pm_menu, #alerts_menu, #profile_menu { right: 0; padding-right: 10px; } #profile_menu_top > img.avatar { height: 18px; width: 18px; margin: 2px 5px 0 0; float: left; } .notice { font-weight: bold; } #languages_form, #search_form { padding: 0px; } #languages_form { margin: 0 0 0 10px; } /* The logo and slogan. */ #header { background: var(--header_bg_color) no-repeat; border: none; border-radius: var(--header_border_radius); box-shadow: none; padding: 0 12px; display: flex; align-items: center; min-height: 80px; width: 100%; } #header::after { content: ""; display: block; clear: both; } /* The main title. */ h1.forumtitle { font-size: var(--forum_title_font_size); font-family: var(--forum_title_font_family); padding: 0px; margin: 0px 0px 0px 10px; font-weight: 600; text-transform: uppercase; flex: 1; } h1.forumtitle a { color: var(--forum_title_link_color); } /* Float these items to the right */ #siteslogan { padding: 0px 0px 0px 0px; font-size: 1.3em; font-family: Verdana, sans-serif; font-weight: 700; align-content: center; } img#smflogo { padding: 0px; font-size: 1.4em; } /* Tweak the SMF logo */ img#smflogo { margin: 0px; } /* Even guests need to be aligned */ .welcome { padding: 0 10px; line-height: 2.5em; } .user_panel { padding: 0px; margin: 0px; display: inline-flex; } /* /* The user info, news, etc.*/ #upper_section { padding: 4px 0px 2px 0px; } #inner_section { background: var(--inner_section_bg_color); padding: 0px; } #inner_section::after { content: ""; display: block; clear: both; } /* The upper_section, float the two each way */ #inner_wrap { display: flex; justify-content: space-between; align-items: center; } #upper_section #inner_wrap { padding: 6px 0px; } .user { padding: 0px 4px 0px 4px; white-space: nowrap; align-items: baseline; display: inline-flex; } .user:only-child { width: 100%; display: flex; justify-content: space-between; } .user:not(:last-child) time:not(:last-child)::after, .user .unread_links li:not(:last-child)::after { content: " • "; margin: 0 1ch; } ul li.greeting { font-weight: bold; } /* The login form. */ #guest_form { overflow: hidden; font-size: 0.9em; margin-left: -2px; } /* News section. */ #inner_wrap .news { padding: 0 4px 0px 1ch; font-size: 0.9em; display: inline-flex; align-items: baseline; max-width: 50%; } #inner_wrap .news h2 { line-height: initial; } #inner_wrap .news h2, #inner_wrap .news p { display: inline; padding-left: 1ch; } .news_section { padding: 0px; margin: 8px 0px; font-size: 0.9em; display: flex; max-width: 100%; background: var(--news_bg_color); height: max-content; } .news_section_left { margin: 0px; padding: 0px 10px; background: var(--news_left_bg_color); font-size: 20px; } .news_section_right { margin: 0 ; width: 100%; padding: 0px 5px 0px 5px; } .news_section i { line-height: initial; padding: 4px 5px; font-size: 1.4em; } .news_section p { display: inline; } /* The navigation list (i.e. linktree) */ .navigate_section { padding: 0px 12px; margin: 10px 0px 0px 0px; width: 100%; } #main_content_section .navigate_section { margin: 4px 0 0 0; padding: 0; } .navigate_section ul { background: var(--breadcrumb_bg_color); margin: 0px; padding: 0 10px; font-size: var(--breadcrumb_font_size); overflow: hidden; border: var(--breadcrumb_border_width) var(--breadcrumb_border_style) var(--breadcrumb_border_color); border-radius: var(--breadcrumb_border_radius); } .navigate_section ul li { float: left; padding-bottom: 3px; line-height: 1.1em; color: var(--breadcrumb_txt_color); } .navigate_section ul li a, .navigate_section ul li em { padding: 4px 0 4px; margin-top: -4px; display: inline-block; color: var(--breadcrumb_link_color); } .navigate_section ul li span { display: inline-block; margin-top: 8px; } .navigate_section ul li .dividers { color: var(--breadcrumb_divider_color); font-family: var(--breadcrumb_divider_font_family); font-size: var(--breadcrumb_divider_font_size); line-height: var(--breadcrumb_divider_line_height); padding: 0 2px 0 6px; } .navigate_section ul li .board_moderators a { padding: 4px 0; } .navigate_section a:hover span { text-decoration: underline; } /* The content section */ #content_section { margin: 0 auto; clear: both; } #main_content_section { padding: 5px 12px 0px 12px; } #main_content_section::after { content: ""; display: block; clear: both; } /* Footer is now full-width by default. */ /* The footer with copyright links etc. */ #footer { margin: 0px; padding: 8px 12px; background: var(--footer_bg_color); border-top: none; display: flex; justify-content: space-between; align-content: center; font-family: var(--body_font_family); } #footer hr { border-bottom: var(--footer_copyright_border); box-shadow: var(--footer_copyright_box_shadow); padding: 0px; margin: 0px; } #footer li, #footer p, #footer a { font-size: var(--footer_font_size); color: var(--footer_txt_color); font-weight: 700; text-transform: uppercase; } #footer img{ filter: var(--footer_logo_filter); } #footer p { align-content: center; } #footer li.copyright { display: block; font-family: Verdana, sans-serif; /* Copyright must be Verdana! */ } #footer ul { align-content: center; align-items: center; } .footer_menu_section { padding: 4px 0px 10px 0px; } @media screen and (min-width:800px) { .footer_menu_section { display: flex; flex-direction: row; flex-wrap: nowrap; } } .footer_menu_section ul { flex: 1; font-size: 1.3em; } .footer_menu_section ul li{ padding: 4px 0px; } .footer_menu ul li a { margin: 0px; padding: 6px 0px; display: block; } .footer_menu_section p { flex: 2; } .footer_copyright { margin-top: 4px; } .footer_menu li h3 { background: var(--cat_bg_color); padding: 4px 0px; text-align: center; color: var(--title_bar_link); text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5); font-size: 2em; } .footer_menu li { text-align: center; background: var(--window_bg_color); font-size: 1em; border: var(--border_width) var(--border_style); border-color: var(--border_color); position: relative; } .footer_menu li h3.footer_menu_image_heading { background: transparent; padding: 0px 0px; text-align: center; color: var(--title_bar_link); text-shadow: 2px 2px 2px rgb(0, 0, 0); text-transform: uppercase; font-size: 2em; position: absolute; top: 45%; left: 0; right: 0; } .footer_menu ul li img { max-height: 215px; width: 100%; } .footer_top_inner_wrap { margin: 12px 12px 0px 12px; } #footerfix { flex: 1 0 auto; } /* The posting icons */ #postbuttons_upper ul li a span { line-height: 19px; padding: 0 0 0 6px; } .mark_read { margin: -13px 0px 6px 0px; float: right; } .mark_read .buttonlist { margin: 0px 0px 0px 4px; padding: 0; } .fix_rtl_names { display: inline-block; } /* The quick buttons */ .quickbuttons { margin: 0 0 5px; clear: right; float: right; text-align: right; } #recent .quickbuttons { margin: 0; } .quickbuttons > li { float: left; } .quickbuttons > li > a, .inline_mod_check { display: block; height: auto; padding: 0 4px; line-height: 1.375rem; border-radius: 0; } .quickbuttons > li:first-child > a { border-radius: 4px 0 0 4px; } .quickbuttons > li:last-child > a, .inline_mod_check:last-child { border-radius: 0 4px 4px 0; } .quickbuttons > li:only-child > a, .inline_mod_check:only-child { border-radius: 4px; margin: 2px; height: 23px; } .inline_mod_check input { position: relative; top: -1px; height: auto; } .moderationbuttons_check:focus { box-shadow: var(--moderationbuttons_check_focus_box_shadow); } .quick_edit, .post_options { position: relative; } /* Drop part of QuickButtons */ .post_options ul { display: none; position: absolute; top: 100%; right: -1px; z-index: 90; padding: 6px; background: var(--post_options_bg_color); font-weight: var(--post_options_font_weight); text-align: left; border: var(--post_options_border_width) var(--post_options_border_style) var(--post_options_border_color); border-radius: var(--post_options_border_radius); } .post_options:hover ul { display: block; } .post_options ul a { display: block; width: 12em; padding: 0 6px; line-height: 2.2em; text-decoration: none; border: 1px solid transparent; border-radius: var(--post_options_link_border_radius); } .post_options ul a:hover, .post_options ul a:focus { border-color: var(--post_options_border_color_hover); } /* Note: The next declarations are for keyboard access with js disabled. */ .quickbuttons ul li a:focus { margin: 0 -9910px 0 9910px; } /* Cancel for hover and/or js access. */ .quickbuttons ul li:hover a:focus, .quickbuttons ul li a:focus { margin: 0; } /* Fixes for quickbuttons Fix for quote on reply box */ #post_modify { border-radius: 4px; } /* The jump to box */ #display_jump_to { padding: 5px 0; margin: 4px 0; float: right; font-size: 1em; } #topic_icons #message_index_jump_to { padding: 0; float: right; } /* The category separator string is 29 dashes */ #display_jump_to_select, #message_index_jump_to_select, #search_jump_to_select, #quick_mod_jump_to_select { width: 29ch; } .quickModifyMargin { margin: 10px 0 5px 0; padding-bottom: 5px; } /* Styles for edit event section ---------------------------------------------------- */ #post_event .roundframe { padding: 12px 12%; overflow: auto; } #post_event fieldset { padding: 6px; clear: both; } #post_event span.label { margin: 0 0.5em 0 2px; min-width: 60px; display: inline-block; } .event_options { line-height: 25px; display: flex; flex-flow: row wrap; } .event_options div { min-height: 25px; margin-bottom: 5px; flex: 1 0 auto; } .event_options_left { box-sizing: border-box; width: 55%; min-width: 238px; } .event_options_right { box-sizing: border-box; width: 45%; min-width: 270px; } .event_options_left div, .event_options_right div { white-space: nowrap; } #post_event #event_main input { margin: 0; } #event_time_input { clear: left; } #event_time_input > div { display: flex; } #event_time_input input.date_input { width: 40%; margin: 2px 0.5ch 0; flex: 1 1 auto; } #event_time_input input.time_input { width: 13ch; margin: 2px 0.5ch 0; flex: 0 1 auto; } #post_event input[type="checkbox"] { height: auto; } #post_event input[type="text"][disabled] { color: transparent; } #post_event select, #event_options input[type="text"], #tz { max-width: calc(100% - 75px); } #post_event select, #evtitle, #event_location { width: calc(100% - 75px); } #post_event input[type="checkbox"] + select { max-width: calc(100% - 95px); } /* Styles for the recent messages section. ---------------------------------------------------- */ #readbuttons_top .pagelinks, #readbuttons .pagelinks { padding-bottom: 12px; width: 60%; } #readbuttons .pagelinks { padding-top: 12px; } #recent { clear: both; } /* Styles for the move topic section. */ .move_topic { width: 710px; margin: auto; text-align: left; } div.move_topic fieldset { margin-top: 1ex; padding: 6px; } /* Styles for the report topic/user section. */ #report_form dl.settings dt { width: 20%; } #report_form dl.settings dd { width: 79%; } #report_comment { width: 70%; } /* Styles for the split topic section. */ div#selected, div#not_selected { width: 49%; } ul.split_messages li a.split_icon { padding: 0 6px; opacity: 0.8; } ul.split_messages li a.split_icon:hover { opacity: 1; } .split_messages, .message_header { margin-bottom: 8px; } /* Styles for the merge topic section. */ ul.merge_topics li { list-style-type: none; } dl.merge_topic dt { width: 25%; } dl.merge_topic dd { width: 74%; } fieldset.merge_options { clear: both; } .custom_subject { margin: 6px 0; } /* Styles for the login areas. ------------------------------------------------------- */ .login { width: 540px; max-width: 100%; margin: 0 auto; } .popup_content .login { width: 100%; } .login dl { overflow: auto; clear: right; } .login dt, .login dd { margin: 0 0 5px 0; width: 44%; padding: 1px; } .login dt { float: left; clear: both; text-align: right; font-weight: bold; } .login dd { width: 54%; float: right; text-align: left; } .login p { text-align: center; } .login input[type="submit"] { margin: 1em 0 0 1em; } .login p:not(:last-of-type) input[type="submit"] { margin-bottom: 1em; } /* Additional register fields */ #registration fieldset { border: none; padding: 0; margin: 0; } #registration .roundframe { border-top: none; } dl.register_form { margin: 0; clear: right; } dl.register_form dt { font-weight: normal; float: left; clear: both; width: 50%; margin: 6px 0 0 0; } dl.register_form dt span { display: block; } dl.register_form dd { float: left; width: 49%; margin: 6px 0 0 0; } #confirm_buttons { text-align: center; padding: 12px 0; } .coppa_contact { padding: 4px; width: 32ex; background: var(--coppa_contact_bg_color); color: var(--coppa_contact_txt_color); margin-left: 5ex; border: var(--coppa_contact_border_width) var(--coppa_contact_border_style) var(--coppa_contact_border_color); } .valid_input { background: var(--valid_input_bg_color); } .invalid_input { background: var(--invalid_input_bg_color); } /* Styles for maintenance mode. ------------------------------------------------------- */ #maintenance_mode img.floatleft { margin-right: 12px; } /* Custom profile fields like to play with us some times. */ #admin_content .custom_field { margin-bottom: 15px; } #admin_login .centertext { padding: 12px; } #admin_login .centertext .error { padding: 0 0 12px 0; } #admin_login .centertext a.help img, .custom_field a img { vertical-align: middle; } tr.windowbg td, tr.bg td, .table_grid tr td { padding: 4px 8px; } #credits p { font-style: italic; } .errorfile_table { background: var(--errorfile_table_bg_color); border-collapse: collapse; } .errorfile_table .file_line { text-align: right; padding-right: 6px; } .errorfile_table td.current { font-weight: bold; border-top: var(--errorfile_table_td_current_border_width) var(--errorfile_table_td_current_border_style) var(--errorfile_table_td_current_border_color); border-bottom: var(--errorfile_table_td_current_border_width) var(--errorfile_table_td_current_border_style) var(--errorfile_table_td_current_border_color); border-width: 1px 0 1px 1px; background: var(--errorfile_table_td_current_bg_color); } .generic_menu { margin: 5px 0; background: var(--menu_bg_color); } /* Small fix for topics */ .quickbuttons .main_icons::before, .button .main_icons::before { margin: -3px 3px 0 1px; } .main_icons.gender_None::before { background: none; } .main_icons.gender_0::before { display: none; } /* This is a small fix for dropmenu icons */ .dropmenu .main_icons::before, #profile_menu .main_icons::before, .dropmenu img { margin: -3px 4px 0 0; vertical-align: middle; } /* Styles for (fatal) errors. ------------------------------------------------- */ #fatal_error { width: 80%; margin: 0 auto 10px auto; } .errorbox::before, .noticebox::before, .infobox::before { width: 16px; height: 16px; background: url(../images/icons/main_icons_sprite.png) no-repeat -57px -83px; left: 10px; content: ""; position: absolute; top: 50%; margin-top: -8px; } .errorbox, .noticebox, .infobox { padding: 7px 10px 7px 35px; margin-bottom: 12px; position: relative; } .errorbox { background-color: var(--error_box_bg_color); border-top: var(--error_box_border_width) var(--error_box_border_style) var(--error_box_border_color); border-bottom: var(--error_box_border_width) var(--error_box_border_style) var(--error_box_border_color); } .errorbox h3 { padding: 0; margin: 0; font-size: 1.1em; text-decoration: underline; } .errorbox p { margin: 12px 0 0 0; } .errorbox p.alert { padding: 0; margin: 0 4px 0 0; float: left; width: 12px; font-size: 1.5em; } .errorbox span { text-decoration: underline; } /* Styles for info boxes ------------------------------------------------- */ .noticebox::before { background-position: -83px -83px; } .infobox::before { background-position: -161px -83px; } .noticebox { color: var(--notice_box_txt_color); background: var(--notice_box_bg_color); border-top: var(--notice_box_border_width) var(--notice_box_border_style) var(--notice_box_border_color); border-bottom: var(--notice_box_border_width) var(--notice_box_border_style) var(--notice_box_border_color); } .infobox { color: var(--info_box_txt_color); background: var(--info_box_bg_color); border-top: var(--info_box_border_width) var(--info_box_border_style) var(--info_box_border_color); border-bottom: var(--info_box_border_width) var(--info_box_border_style) var(--info_box_border_color); } .descbox { padding: 7px 10px 7px 10px; border: var(--desc_box_border_width) var(--desc_box_border_style) var(--desc_box_border_color); margin: 6px 0; } /* Styles for stats bars and progress bars. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .generic_bar, .progress_bar { border: var(--generic_bar_border_width) var(--generic_bar_border_style) var(--generic_bar_border_color); background: var(--generic_bar_bg_color); min-height: 16px; line-height: 1.4em; border-radius: var(--generic_bar_border_radius); position: relative; overflow: hidden; color: var(--generic_bar_txt_color); } .generic_bar span, .progress_bar span { position: relative; z-index: 2; text-shadow: var(--generic_bar_span_txt_shadow); display: inline-block; padding: 0 5px; } .generic_bar .bar, .progress_bar .bar { position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; background: var(--generic_bar_bar_bg_color); transition: width .3s; border-radius: var(--generic_bar_bar_border_radius); box-shadow: var(--generic_bar_bar_box_shadow); display: block; } .generic_bar.vertical { width: 15px; } .generic_bar.vertical .bar { right: 0; top: auto; box-shadow: var(--generic_bar_vertical_bar_box_shadow); } .progress_bar { border-radius: var(--progress_bar_border_radius); text-align: center; font-weight: bold; color: var(--progress_bar_txt_color); } .progress_bar .bar { box-shadow: var(--progress_bar_bar_box_shadow); background-color: var(--progress_bar_bar_bg_color); background-size: 30px 30px; background-image: var(--progress_bar_bar_bg_image); } .progress_yellow .bar { background-color: var(--progress_yellow_bar_bg_color); } .progress_green .bar { background-color: var(--progress_green_bar_bg_color); } .progress_red .bar { background-color: var(--progress_red_bar_bg_color); } .progress_blue .bar { background-color: var(--progress_blue_bar_bg_color); } /* Styles for the profile section. ------------------------------------------------- */ dl { overflow: auto; } /* The basic user info on the left */ #basicinfo { width: 20%; float: left; } #detailedinfo { width: 79.5%; float: right; } #basicinfo > * { margin-bottom: 3px; } #basicinfo h4 { font-size: 1.4em; font-weight: normal; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; /* IE fallback */ overflow-wrap: break-word; } #basicinfo h4 span.position { font-size: 0.8em; display: block; } #basicinfo img.avatar, dl.settings img.avatar { display: block; max-width: 160px; height: auto !important; } #basicinfo ul { list-style-type: none; } #basicinfo .icon_fields li { display: block; float: left; margin-right: 5px; height: 20px; } #basicinfo #userstatus { display: block; clear: both; } #basicinfo #userstatus img { vertical-align: middle; } #detailedinfo dl, #tracking dl { clear: right; overflow: auto; margin: 0 0 18px 0; padding: 0 0 15px 0; border-bottom: var(--detailedinfo_border_width) var(--detailedinfo_border_style) var(--detailedinfo_border_color); } #detailedinfo dt, #tracking dt { width: 35%; margin: 0 0 3px 0; font-weight: bold; color: var(--detailedinfo_txt_color); } #detailedinfo dd, #tracking dd { width: 65%; float: left; margin: 0 0 3px 0; } #detailedinfo .noborder { border-bottom: 0; } #detailedinfo dt.clear { width: 100%; } #personal_picture { display: block; margin-bottom: 4px; } #avatar_server_stored div { float: left; } #avatar_upload { overflow: auto; } #smileypr { margin-left: 10px; } .edit_avatar_img { margin: 0 0 1em; } /* Activity by time */ #activitytime { margin: 6px 0; } .activity_stats { margin: 10px 0; } .activity_stats li { width: 4.16%; float: left; text-align: center; } .activity_stats li span { display: block; border: var(--activity_stats_border_width) var(--activity_stats_border_style) var(--activity_stats_border_color); border-left: none; border-right: none; background: var(--activity_stats_bg_color); } .activity_stats li.last span { border-right: none; } .activity_stats li .generic_bar { height: 100px; border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin: 0 auto; } .activity_stats li .generic_bar span { position: absolute; top: -1000em; left: -1000em; } .profile_pie { background: url(../images/stats_pie.png); background-size: auto 20px; float: left; height: 20px; width: 20px; margin: 0 12px 0 0; text-indent: -1000em; } /* View posts */ .topic .time { float: right; } .counter { padding: 5px 6px 1px 2px; font-size: 2.2em; font-weight: bold; color: var(--counter_txt_color); float: left; } .topic_details { padding: 0 4px 4px 4px; } .counter + .topic_details { margin-left: 25px; } .list_posts { border-top: var(--border_width) var(--border_style) var(--border_color); padding-top: 1em; margin-top: 1em; margin-bottom: 1em; clear: both; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } .topic h4 { margin: 3px 0; } .topic .post { margin: 0 12px; min-height: 80px; height: auto !important; height: 80px; } .topic .mod_icons { text-align: right; margin-right: 12px; } #creator dt { width: 40%; } #creator dd { width: 55%; margin: 0 0 10px 2px; } .centericon { vertical-align: middle; } .sizefix { width: 16px; height: 16px; } .boardslist > ul > li { margin: 12px; } .boardslist > ul > li > ul { columns: 2 250px; } .boardslist > ul > li > ul > li { break-inside: avoid; display: inline-block; vertical-align: top; width: 100%; } .boardslist a { font-weight: bold; border-bottom: var(--border_width) var(--border_style) var(--border_color); display: block; margin-bottom: 0.5em; } .boardslist a:hover { text-decoration: none; border-bottom: var(--border_width) var(--border_style) var(--border_color); } .boardslist label { display: inline-block; text-indent: -3ch; margin: 0 3ch; } #theme_settings { overflow: auto; margin: 0; padding: 0; } #theme_settings li { margin: 10px 0; padding: 0; } /* Paid Subscriptions */ #paid_subscription { width: 100%; } #paid_subscription dl.settings { margin-bottom: 0; } #paid_subscription dl.settings dd, #paid_subscription dl.settings dt { margin-bottom: 4px; } /* Pick theme */ #pick_theme { width: 100%; float: left; } #pick_theme .selected { background: var(--pick_theme_selected_bg_color); } /* Signature preview */ #preview_signature, #preview_signature_display { width: 100%; overflow: hidden; } /* Issue a warning */ #warn_body { width: 100%; font-size: 0.9em; } #warn_temp { font-size: smaller; } /* Warning level bar */ .warning_level { text-align: center; font-weight: bold; max-width: 250px; } .warning_level.none .bar { background-color: var(--warning_level_none_bar_bg_color); } .warning_level.watched .bar { background-color: var(--warning_level_watched_bar_bg_color); } .warning_level.moderated .bar { background-color: var(--warning_level_moderated_bar_bg_color); } .warning_level.muted .bar { background-color: var(--warning_level_muted_bar_bg_color); } /* Styles for the statistics center. ------------------------------------------------- */ #statistics .roundframe { margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; } dl.stats dt { width: 50%; float: left; margin: 0 0 4px 0; line-height: 1.5em; clear: both; font-size: 1em; overflow: hidden; word-wrap: break-word; /* IE fallback */ overflow-wrap: break-word; } dl.stats dd { width: 48%; font-size: 1em; float: left; margin: 0 0 4px 2%; } dl.stats { padding: 5px; } /* Forum history table. */ #stats td, #stats th { width: 15%; padding: 4px; text-align: center; } #stats tr.windowbg th.lefttext { text-align: left; } #stats tr.windowbg th.stats_month { width: 25%; padding: 0 2em; text-align: left; } #stats tr.windowbg td.stats_day { padding: 0 3.5em; text-align: left; } /* Styles for the personal messages section. ------------------------------------------------- */ #personal_messages h3 span#author, #personal_messages h3 span#topic_title { float: left; } #personal_messages h3 span#author { margin: 0 0 0 6px; } #personal_messages h3 span#topic_title { margin: 0 0 0 9em; } #personal_messages div.labels { padding: 0 12px 0 0; } #personal_messages .capacity_bar { background: var(--personal_messages_capcity_bar_bg_color); display: block; margin: 6px 0 0 12px; height: 12px; border: var(--personal_messages_capcity_bar_border_width) var(--personal_messages_capcity_bar_border_style) var(--personal_messages_capcity_bar_border_color); width: 10em; } #personal_messages .capacity_bar span { border-right: var(--personal_messages_capcity_bar_border_width) var(--personal_messages_capcity_bar_border_style) var(--personal_messages_capcity_bar_border_color); display: block; height: 12px; } #personal_messages .capacity_bar span.empty { background: var(--personal_messages_empty_capacity_bar_bg_color); } #personal_messages .capacity_bar span.filled { background: var(--personal_messages_filled_capacity_bar_bg_color); } #personal_messages .capacity_bar span.full { background: var(--personal_messages_full_capacity_bar_bg_color); } #personal_messages .reportlinks { padding: 6px 1.3em; } #personal_messages .pm_inline_time { display: none; } #search_labels li { padding: 4px 6px; } #manrules div.righttext { padding: 4px 1px; } dl.addrules dt.floatleft { width: 15em; padding: 0 15px 6px 15px; } #addrule fieldset { clear: both; } #to_item_list_container div, #bcc_item_list_container div { float: left; margin-right: 10px; } .unread_pm { background: var(--unread_pm_bg_color); } /* Styles for the show alerts section. ------------------------------------------------- */ #alerts .alert_inline_time { display: none; } #alerts .quickbuttons { display: flex; margin: 4px 0; } #alerts .quickbuttons li, #alerts .alert_time { white-space: nowrap; } #alerts .alert_image { width: 65px; padding: 6px 0; text-align: center; vertical-align: middle; } #alerts .alert_image > div { position: relative; } #alerts .alert_image .avatar { max-width: 80%; max-height: 80%; margin-top: 4px; vertical-align: bottom; } #alerts .alert_image span.alert_icon { display: block; width: 100%; line-height: 1em; } #alerts .alert_image .avatar + .alert_icon { width: auto; position: absolute; right: 0; top: 0; } /* Styles for the memberlist section. ------------------------------------------------- */ #mlist_search { margin: auto; max-width: 500px; } #mlist .selected { white-space: nowrap; } #mlist .is_online { width: 60px; } #mlist .email_address { width: 25px; } #mlist .website_url { width: 70px; } #mlist .icq, #mlist .skype { width: 30px; } #mlist .post_count { width: 115px; } /* Styles for the search section. ------------------------------------------------- */ #searchform fieldset { text-align: left; padding: 0; border: none; } #searchform .roundframe { border-radius: 0; margin: 0; padding: 32px; } #searchform .alt { border-top: 0; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; } #searchform p.clear { clear: both; } #advanced_search { text-align: center !important; } #advanced_search dl#search_options { margin: 0 auto; width: 600px; padding-top: 12px; overflow: hidden; } #advanced_search dt { padding: 2px; text-align: right; width: 20%; } #advanced_search dd { width: 75%; float: left; padding: 2px; margin: 0 0 0 6px; text-align: left; } #search_results { margin-bottom: 5px; } /* Styles for the help section. ------------------------------------------------- */ #help_container { padding: 0 0 8px 0; } #helpmain { margin: 12px 0 0 0; padding: 8px 20px 12px 20px; border: var(--border_width) var(--border_style) var(--border_color); overflow: auto; } #helpmain p { margin: 10px 0; line-height: 1.5em; } #helpmain ul { line-height: 2em; margin: 0 0 0 25px; } #helpmain ul li { list-style-type: disc; } #helpmain ul li a { font-weight: bold; } /* Styles for the tooltips ------------------------------------------------------- */ .tooltip { position: absolute; z-index: 999; left: -9999px; word-wrap: break-word; /* IE fallback */ overflow-wrap: break-word; max-width: 350px; padding: 6px 9px; color: var(--tooltip_txt_color); background: var(--tooltip_bg_color); border: var(--tooltip_border_width) var(--tooltip_border_style) var(--tooltip_border_color); border-radius: var(--tooltip_border_radius); box-shadow: var(--tooltip_box_shadow); } /* Styles for popup windows */ .popup_container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--popup_container_bg_color); z-index: 6; } #genericmenu > .popup_container { z-index: 5; } #adm_submenus > .popup_container { z-index: 4; } .popup_window, #main_menu .popup_window, #genericmenu .popup_window, #adm_submenus .popup_window { position: relative; width: auto; z-index: 99; box-shadow: var(--popup_window_box_shadow); border: 1px solid var(--popup_window_border_color); border-radius: var(--popup_window_border_radius); margin: 0 auto; padding: 0; } .popup_window { top: 15%; width: 480px; padding: 0 6px 6px 6px; background: var(--popup_window_bg_color); } .popup_heading { padding: 10px 8px; color: var(--popup_heading_txt_color); } .popup_content { color: var(--popup_content_txt_color); line-height: 1.6em; max-height: 30em; overflow: auto; padding: 10px 8px; background: var(--popup_content_bg_color); border: 1px solid var(--popup_content_border_color); border-radius: var(--popup_content_border_radius); box-shadow: var(--popup_content_box_shadow); } #main_menu .popup_heading, #genericmenu .popup_heading, #adm_submenus .popup_heading { display: none; } #main_menu .popup_container, #genericmenu > .popup_container, #adm_submenus > .popup_container { display: block; position: relative; background: none; margin: 0; height: auto; /* In case anything fishy happens in the situations where this used make sure it stays still */ } .main_icons.hide_popup { float: right; color: var(--white); } .popup_heading > .main_icons.hide_popup { float: right; color: var(--white); background: rgba(0, 0, 0, 0.5); text-align: center; padding: 0px 2px 4px 2px; border-radius: 50%; } .popup_heading .icon { vertical-align: middle; margin: -4px 4px 0 0; } .generic_list_wrapper, .windowbg, .approvebg, .approvebg2 { background: var(--window_bg_color); margin: 0px; padding: 12px 16px; border: var(--border_width) var(--border_style) var(--border_color); overflow: auto; } /* Here comes the glory... */ .windowbg:nth-of-type(even), .bg.even { background: var(--window_bg_even_color); } .windowbg:nth-of-type(odd), .bg.odd { background: var(--window_bg_odd_color); } /* Highlight the target item */ .windowbg:target { background: var(--window_target_bg_color); } /* Add some hover on table rows */ tr.windowbg:hover { background: var(--window_table_row_bg_hover_color); } /* Special treatment for #forumposts area */ #forumposts .windowbg, #forumposts .approvebg, #forumposts .approvebg2, #pmFolder .windowbg { overflow: visible; } /* Nobody wants locked topics to stand out much. */ .windowbg.locked { background: var(--window_locked_bg_color); } /* Sticky topics get a different background */ .windowbg.sticky { background: var(--window_sticky_bg_color); } /* Locked AND sticky are a bit more technical */ .windowbg.sticky.locked { background: var(--window_sticky_locked_bg_color); } /* Awaiting approval is a bit special, topics first */ .windowbg.approvetopic { background: var(--window_approve_topic_bg_color); } /* Unapproved posts in approved topics */ .windowbg.approvepost { background: var(--window_approve_post_bg_color); } .generic_list_wrapper .additional_row { margin: 0; padding: 5px 0; border-radius: 0; } .generic_list_wrapper table.table_grid { border-bottom: var(--border_width) var(--border_style) var(--border_color); } div#editlang_desc { margin-bottom: 8px; } .topic_details .smalltext { font-size: 0.9em; } .table_grid tr.windowbg td.centercol { text-align: center; } tr.windowbg { box-shadow: none; } #postmodify #message { width: 100%; } #postmodify .lastedit { font-weight: bold; } /* Colors for background of posts requiring approval */ .approvebg { color: var(--approve_txt_color); background: var(--approve_bg_color); } .approvebg2 { color: var(--approve_txt_color); background: var(--approve_bg_color_2); } div#manage_boards dl dd textarea[name=desc] { margin-top: 1px; } .bold_text { font-weight: bold; } /* Profile > This needed for responsive (get rid of
) */ .infolinks { display: block; } #groups .windowbg { box-shadow: none; border-radius: 0; border-top: 0; margin: 0; } #groups .padding { margin: 0 0 25px 0; } .groupmembership textarea { width: 100%; } .groupmembership .righttext { margin-top: 1ex; } /* BoardIndex */ /* This place covers board places (boardindex/messageindex/recent) */ #boardindex_table { flex: 6; } .boardindex_table:not(:last-child) { margin-bottom: 15px; } h3 .collapse { float: right; margin: 4px 4px 0 0; } .board_icon { text-align: center; padding: 8px 4px 0px 4px; width: 60px; flex-shrink: 0; } .board_icon a { display: inline; text-decoration: none; } .board_icon a:hover, .board_icon a:focus { display: inline; text-decoration: none; } .board_icon a::before { display: inline; font-family: "Font Awesome 6 Free"; font-size: 2em; content: "\f086"; color: var(--link); } .board_icon a.board_on::before { font-weight: 900; } .board_icon a:hover::before { color: var(--link_hover); text-decoration: none; } .board_icon a.board_on2::before { font-weight: 900; } .board_icon a.board_off::before { font-weight: 900; opacity: 0.5; } .board_icon a.board_redirect::before { font-weight: 900; content: "\f0a9"; } .boardindex_table .board_icon { width: 80px; } .boardindex_table .info { width: calc(55% - 80px); } .boardindex_table .board_stats { padding: 10px 10px 10px 10px; display: flex; justify-content: center; } .boardindex_table .board_stats p { border: none; text-align: center; padding: 0px 10px; } .board_stats_post_txt { font-weight: 400; } .board_stats_post_numbers { font-size: 1.3em; font-weight: 700; } .info { overflow: hidden; overflow-wrap: break-word; padding: 5px 5px 5px 0; flex-grow: 1; } .info .subject { font-weight: 700; font-size: 1em; } .board_stats { width: 20%; font-size: 1em; margin: 0 0 0 auto; } .board_icon, .info, .board_stats, .lastpost { display: inline-block; align-self: center; } .lastpost { width: 24%; font-size: 0.9em; position: relative; display: inline-flex; padding-top: 3px; } .lastpost .board_avatar { padding-top: 7px; } .board_avatar { display: inline-flex; justify-content: center; align-items: center; margin-right: 2px; } .board_avatar img{ width: 35px; height: 35px; border-radius: 50%; } @media (max-width: 855px) { .board_avatar { display: none; } } .board_lastpost { padding: 3px 0px 0px 0px; } .main_container { margin-bottom: 20px; } .up_contain { background: var(--up_contain_bg_color); overflow: hidden; border: var(--border_width) var(--border_style); border-color: var(--border_color); margin: 0px 0px 0px 0px; display: flex; flex-wrap: wrap; } /* Child boards */ .children { background: var(--children_bg_color); box-shadow: var(--children_box_shadow); border: none; padding: 5px; width: 100%; } .children p { font-size: 0.9em; } .children span::after { content: ", "; } .children span:last-of-type::after { content: ""; } p.moderators { font-size: 0.9em; font-weight: bold; } span.postby { display: block; } /* Info Center */ #info_center { clear: both; padding: 0px; } .info_center_roundframe { margin: 0px; padding: 0px; border: none; overflow: hidden; min-width: 250px; } .info_center_roundframe .sub_bar { margin: 10px 0px 0px 0px; } .info_center_roundframe .sub_bar:first-child { margin: 0px } #info_center .sub_bar { border: none; margin-bottom: -1px; } #upshrink_stats { margin-top: 0px; } #ic_recentposts { background: var(--info_block_information_bg_color); line-height: 1.6em; width: 100%; margin: 0px; font-size: 0.9em; } #ic_recentposts th { text-align: left; padding: 0 4px 0 0; } #ic_recentposts td { border-top: var(--border_width) var(--border_style) var(--border_color); padding: 0 4px 0 0; vertical-align: top; } #ic_recentposts tr:first-child td { border-top: none; } #ic_recentposts .recentpost strong { width: 40%; } #ic_recentposts .recentposter { width: 15%; } #ic_recentposts .recentboard { width: 20%; } #ic_recentposts .recenttime { width: 25%; } #ic_recentposts .recenttime strong { color: var(--body_txt_color); } #ic_recentposts .windowbg { background: none; } #upshrink_stats p.inline { background: var(--info_block_information_bg_color); border: var(--border_width) var(--border_style); border-color: var(--border_color); margin: 0; padding: 6px 6px; line-height: 1.6em; font-size: 0.9em; } #upshrink_stats p.inline span { margin: 0; padding: 4px 0 0 0; } #upshrink_stats span.membergroups { display: block; } /* Info Center Blocks */ .info_center_container { background: var(--info_center_container_bg_color); margin: 5px 0px; box-shadow: var(--info_center_box_shadow); border-radius: var(--info_center_border_radius); } .info_block_icon { display: block; min-height: 100%; padding: 3px 10px 3px 8px; min-width: 30px; background: var(--info_block_icon_bg_color); } .info_block_information { background: var(--info_block_information_bg_color); border-radius: var(--info_center_border_radius); } .row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; } .column { flex-basis: 100%; flex: 1; } .column_disable { flex-basis: 100%!important; } @media screen and (max-width:860px) { .row { display: flex; flex-direction: column; flex-wrap: wrap; gap: 0px; } } ._0 { flex: 0; } ._6 { flex: 6; } .info_stats_orb { border-radius: 50%; background: var(--cat_bg_color); } /* MessageIndex */ /* Start with description and other things */ #description_board, .filter_row { padding: 8px 10px; border-radius: 6px 6px 0 0; border-bottom: none; box-shadow: none; } #description_board h3, #description_board div { display: inline-block; } #description_board h3::after { content: " - "; } /* Topic list */ #topic_header { margin: 0; border-radius: 0; display: flex; padding: 8px 0px; } #topic_header div { font-weight: bold; font-size: 1.1em; padding: 0; } #topic_header input { margin-top: 5px !important; } #topic_container .windowbg { border: var(--border_width) var(--border_style); border-color: var(--border_color); display: flex; padding: 0; margin: 0; overflow: hidden; } #topic_container .lastpost, #topic_header .lastpost { width: 23%; } #topic_container .lastpost, #topic_container .board_stats { flex-shrink: 0; } .icon img, .moderation input { margin-top: 15px; } .moderation { display: inline-block; width: 35px; flex-shrink: 0; vertical-align: middle; text-align: center; } /* Quick moderation selects and submit */ #quick_actions { margin: 6px 0; } /* Icons and jump to */ #topic_icons::before { display: block; height: 8px; clear: both; content: ""; } #topic_icons .information { font-size: .9em; border-radius: 4px; } #topic_icons p { padding: 0 12px 0 4px; line-height: 2em; } /* Should lose this before RC1. It's a kludge. Can be fixed by new image */ #topic_icons .floatleft img:first-child { padding: 0 2px; } /* Display */ /* Poll question */ #poll { overflow: hidden; } /* Poll vote options */ #poll_options ul.options li { padding: 6px 0 6px 25px; } /* Poll results */ #poll_options dl.options { padding: 12px 0 12px 25px; line-height: 1.4em; } #poll_options dl.options dt { padding: 4px 0; width: 30%; max-width: 30em; float: left; clear: left; } #poll_options dl.options .voted { font-weight: bold; } #poll_options dl.options dd { width: 60%; max-width: 45em; float: left; margin: 0 0 4px 0; text-align: right; } /* Poll notices */ #poll_options p { margin: 0 18px 2px 18px; padding: 0 6px 6px 6px; } div#pollmoderation { overflow: auto; } /* Styles for edit poll section. */ #edit_poll dl.poll_options dt { width: 33%; } #edit_poll dl.poll_options dd { width: 65%; } /* Linked events */ .event_title { font-size: larger; vertical-align: middle; } .event_title + a { margin-left: 1em; } /* On to the posts */ #forumposts { clear: both; margin: 8px 0 0 0; } #forumposts .cat_bar { margin: 0 0 -4px 0; } /* Topic information */ #forumposts .catbg img { margin: 0 4px -2px 0; } #forumposts .catbg span { white-space: pre; /* Specific sizing for clarity without ClearType. */ font-size: 0.818em; font-weight: normal; padding: 2px 0; } /* poster and postarea + moderation area underneath */ .post_wrapper::after { content: ""; display: block; clear: both; } /* poster details and list of items */ .poster { float: left; /* Don't set this in em.It will eat too much space if people need to set large text sizes. */ width: 160px; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; /* IE fallback */ overflow-wrap: break-word; } .poster h4 { font-size: 1.3em; text-align: left; font-weight: 700; } .poster h4, .poster h4 a, .poster li:hover h4 a, .poster h4 a:hover .poster li h4 a, .poster h4 a:focus { margin: 0; padding: 0; } .poster .profile .profile_icons li, .poster .im_icons li { display: table-cell; padding: 0px 1px; } /* The visible stuff below the avatar. */ .user_info > li { margin: 3px 0 0 0; text-align: left; } .user_info li.im_icons, .user_info li.profile { text-align: left; display: flex; } .poster li.membergroup { font-weight: bold; } /* @todo Re-code this a bit to give background on anchor. */ .poster li.poster_online, .poster li.poster_online:hover { padding: 1px 1px 1px 1px; margin: 3px 10px; } .poster li.poster_online a { color: var(--poster_online_link_color); line-height: 1.6em; } .poster li.poster_online:hover, .poster li.poster_online:hover a { text-decoration: underline; } .poster li.warning a img { vertical-align: bottom; padding: 0 2px; } .poster img { vertical-align: middle; } img.avatar { object-fit: scale-down; } .poster img.avatar { max-width: 100%; } .postarea, .moderatorbar { margin: 0 0 0 175px; } .postarea div.flow_hidden { width: 100%; } .moderatorbar { clear: right; } .messageicon { display: inline-block; } .messageicon img, #iconList img { vertical-align: middle; } .keyinfo .postinfo { padding: 1px 0 5px 0; line-height: 1.5em; font-size: 0.9em; font-weight: bold; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .keyinfo .postinfo::after, .under_message::after { content: ""; clear: right; display: block; } .keyinfo .postinfo a, .keyinfo .postinfo a strong { color: var(--key_post_info_link_color); } .keyinfo .postinfo .spacer { flex: 1 1 auto; } .keyinfo .postinfo .modified { color: var(--keyinfo_postinfo_modified_txt_color); font-weight: normal; font-style: italic; padding: 2px 4px 0 4px; } /* PMs postinfo */ #personal_messages .keyinfo .postinfo { flex-direction: column; align-items: flex-start; font-weight: normal; } #reason::before { content: " - "; } .subject_title a { font-size: 0.9em; color: var(--subject_title_link_color); font-weight: bold; } .subject_hidden a { display: none; } .page_number { color: var(--page_number_txt_color); font-weight: bold; padding: 4px 0 0 4px; line-height: 1.5em; } .inner { padding: 7px 8px 2px 2px; margin: 0; border-top: var(--inner_border_width) var(--inner_border_style) var(--inner_border_color); box-shadow: var(--inner_box_shadow); min-height: 85px; word-wrap: break-word; /* IE fallback */ overflow-wrap: break-word; } img.smiley { vertical-align: bottom; } .attachments { padding: 12px 0 0 0; } .attached { padding: 0 6px 8px 6px; max-width: 100%; display: inline-block; vertical-align: top; } .attachments_top { margin: 0 auto; text-align: center; } .attachments hr { clear: both; margin: 12px 0; } .show_on_hover:hover span { display:none; } .show_on_hover:hover:before { content:attr(data-hover); } /* Separator of posts. More useful in the print stylesheet. */ #forumposts .post_separator { display: none; } /* Next and previous topic links */ .nextlinks { text-transform: capitalize; } /* Styles for the quick reply area. */ #quickreply { clear: both; } #quickreply_options .roundframe { margin: 0; padding: 8px 10% 12px 10%; border-top-left-radius: 0; border-top-right-radius: 0; } #quickReplyExpand { float: right; margin: 2px 2px 0 2px; } /* Styles for edit post section */ form#postmodify .roundframe { padding: 12px 12%; margin: 12px 0 0 0; } #post_header { padding: 6px; overflow: hidden; } #post_header dt { float: left; padding: 0; width: 15%; margin: 6px 0 0 0; font-weight: bold; } #post_header dd { float: left; padding: 0; width: 83%; margin: 4px 0; } #post_header img { vertical-align: middle; } ul.post_options { margin: 0 0 0 12px; padding: 0; overflow: hidden; } ul.post_options li { margin: 2px 0; width: 49%; float: left; } #post_additional_options_header { margin-top: 0.5em; } #post_additional_options { overflow: hidden; } #post_additional_options .progress_bar { height: 22px; } #post_settings, #postAttachment, #postAttachment2, #attachment_previews { padding: 10px 0; } #postAttachment dd, #postAttachment2 dd { margin: 4px 0; } #postAttachment dd { width: 45%; float: left; } #postAttachment dt, #postAttachment2 dt { font-weight: bold; } #post_draft_options { background: var(--post_draft_options_bg_color); border: var(--post_draft_options_border_width) var(--post_draft_options_border_style) var(--post_draft_options_border_color); border-left: var(--post_draft_options_border_left_width) var(--post_draft_options_border_left_style) var(--post_draft_options_border_left_color); border-top: none; border-radius: var(--post_draft_options_border_radius); } #post_draft_options .settings dd, #post_draft_options .settings dt { width: 50%; border-top: var(--post_draft_options_settings_border_width) var(--post_draft_options_settings_border_style) var(--post_draft_options_settings_border_color); padding: 5px 10px; margin: 0; } #post_draft_options .settings dd:first-of-type, #post_draft_options .settings dt:first-child { border-top: none; /* Some people are OCD, like me. :P */ } #post_draft_options .settings strong { color: var(--post_draft_options_settings_strong_txt_color); } #post_confirm_buttons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; } #post_confirm_buttons, #shortcuts { padding: 12px 0; } #post_confirm_buttons .smalltext { flex: 1; word-break: break-word; margin: 0 5px 0 0; } #post_confirm_buttons .post_button_container { vertical-align: top; } #post_confirm_buttons .padding { flex: 1 100%; } .post_verification { margin-top: 6px; } .post_verification #verification_control { margin: 4px 0 4px 12px; } /* The BBC buttons */ #bbcBox_message { margin: 10px 6px; } #bbcBox_message div { margin: 2px 0; vertical-align: top; } #bbcBox_message div img { margin: 0 1px 0 0; vertical-align: top; } #bbcBox_message select { margin: 0 2px; } /* The smiley strip */ #smileyBox_message { margin: 6px; } /* All the signatures used in the forum. If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */ .signature, .attachments, .under_message, .custom_fields_above_signature, .custom_fields_below_signature { width: 100%; overflow: auto; clear: right; padding: 12px 0 3px 0; border-top: 1px solid var(--signature_border_color); box-shadow: 0 1px 0 var(--signature_box_shadow) inset; line-height: 1.4em; font-size: 0.9em; } .under_message { overflow: visible; border: none; box-shadow: none; } .smflikebutton { margin-top: 4px; } .like_count, .smflikebutton:last-child { margin-bottom: 4px; } /* Events */ .edit_event { margin: 0 10px; vertical-align: top; } /* ModerationButtons */ #moderationbuttons { float: left; } #moderationbuttons_strip { float: left; margin: 4px 0 4px; } #moderationbuttons ul li { padding: 0 6px 4px 0; margin: 0; } /* File error */ .errorfile_table { font-family: monospace; border-spacing: 1px; } .errorfile_table td { background: var(--errorfile_table_td_bg_color); } .errorfile_table .current { background: var(--errorfile_table_current_bg_color); } .errorfile_table .file_line.current { background: var(--errorfile_table_file_line_current_bg_color); } .errorfile_table .file_line { background: var(--errorfile_table_file_line_bg_color); } /* General Classes */ /* Cat_bar / catbg */ div.cat_bar { background: var(--cat_bg_color); padding: 0px; border-radius: var(--cat_bar_border_radius); } .cat_bar.collapsed, .cat_bar.cat_bar_round { border-radius: var(--cat_bar_collapsed_border_radius); } .cat_bar h3 { padding: 8px 12px 8px 12px; text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5); text-transform: uppercase; } /* Styles for rounded headers. */ .cat_bar .desc { color: var(--cat_bar_desc_txt_color); font-size: 13px; line-height: 1.3em; font-weight: normal; margin: 0px 0px 0px 4px; } .cat_bar .desc a { color: var(--cat_bar_link_color); font-weight: 600; } h3.catbg { overflow: hidden; font-size: 1.1em; } h3.catbg, h3.catbg a, h3.catbg a:hover { color: var(--cat_bar_link_color); } h3.catbg a:hover { text-decoration: none; } h3.catbg .main_icons::before, h3.catbg .icon { margin: 0 5px 0 0; } .cat_bar + .windowbg, .cat_bar + .roundframe { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } .cat_bar + .title_bar { margin-top: 0; } /* Roundframe */ .roundframe { margin: 0px; padding: 10px; background: var(--roundframe_bg_color); border: none; border-radius: var(--roundframe_border_radius); overflow: hidden; } /* TitleBar & SubBar */ .title_bar { background: var(--title_bar_bg_color); color: var(--title_bar_link); border-radius: var(--title_bar_border_radius); margin: 0px; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); text-transform: uppercase; } .sub_bar { border-bottom: 2px var(--border_style) var(--border_color); border-top: none; background: var(--sub_bar_bg_color); clear: both; text-transform: uppercase; } h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg { background: none; color: var(--title_bar_link); font-weight: bold; overflow: hidden; padding: 9px 12px 8px 12px; font-size: 0.9em; text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5); } .title_bar a, .titlebg a { background: none; color: var(--title_bar_link); text-decoration: none; text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5); } .subbg a { background: none; color: var(--sub_bar_link_color); text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5); text-decoration: none; } .title_bar + .windowbg, .title_bar + .roundframe { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } /* Other */ /* Information */ .information { background: var(--information_bg_color); overflow: auto; padding-bottom: .5em; border: var(--information_border_width) var(--information_border_style) var(--information_border_color); border-top: none; border-radius: var(--information_border_radius); margin: 0 0 10px 0; padding: 12px 9px 8px 9px; } .generic_list_wrapper .information div { background: none; } .information a:not(.button) { font-weight: bold; } p.information img { vertical-align: middle; } #messageindex .information { border-radius: 0; margin: 0; } #topic_icons .information, #messageindex .information { border-top: var(--information_border_width) var(--information_border_style) var(--information_border_color); } .topic_pages { font-size: 0.75em; margin: 0 0 0 5px; } .topic_pages::before { content: "\00ab "; } .topic_pages::after { content: " \00bb" } /* Mentions */ .atwho-view { position: absolute; top: 0; left: 0; display: none; margin-top: 18px; background: var(--atwho_view_bg_color); border: var(--atwho_view_border_width) var(--atwho_view_border_style) var(--atwho_view_border_color); border-radius: var(--atwho_view_border_radius); box-shadow: var(--atwho_view_box_shadow); min-width: 120px; z-index: 11110 !important; } .atwho-view .cur { background: var(--atwho_view_cur_bg_color); color: var(--atwho_view_cur_txt_color); } .atwho-view .cur small { color: var(--atwho_view_cur_small_txt_color); } .atwho-view strong { color: var(--atwho_view_strong_tex); } .atwho-view .cur strong { color: var(--atwho_view_cur_strong_txt_color); font-weight: bold; } .atwho-view ul { list-style: none; padding: 0; margin: auto; } .atwho-view ul li { display: block; padding: 5px 10px; border-bottom: var(--atwho_view_border_width) var(--atwho_view_border_style) var(--atwho_view_border_color); cursor: pointer; } .atwho-view small { font-size: smaller; color: var(--atwho_view_small_txt_color); font-weight: normal; } /* On/Off Icons (User) */ .on, .off { display: inline-block; width: 14px; height: 14px; border-radius: var(--on_off_border_radius); border: 1px solid transparent; vertical-align: middle; } .on { background: var(--on_bg_color); border-color: var(--on_border_color); } .off { background: var(--off_bg_color); border-color: var(--off_border_color); } #userstatus .smalltext { margin: 0 0 0 5px !important; } /* Styles for print media. */ @media print { #headerarea { display: none; } .tborder { border: none; } } /* Who */ .action_who #upper_show { margin-top: 6px; } .action_who #lower_pagesection { margin-top: 4px; } .action_who #lower_pagelinks { margin-top: -4px; } .action_who select { margin-top: -1px !important; } span.member.hidden { display: inline-block; font-style: italic; } /* Icons (converted from img to css) */ /* Stay here till I find a better place for you guys */ h3.profile_hd::before { vertical-align: middle; } h3.profile_hd::before, .main_icons.profile_hd::before { content: ""; background: url(../images/icons/profile_hd.png) no-repeat; height: 24px; width: 24px; display: inline-block; } .main_icons.profile_sm::before { background: url(../images/icons/profile_sm.png) no-repeat; } .xx { background: url(../images/post/xx.png) 2px no-repeat; padding: 25px 6px 25px 18px; } /* Topic/Board follow-alert menu */ .notify_dropdown strong { font-size: 1.1em; } .notify_dropdown a { display: block; padding: 0.5em; text-decoration: none; border: 1px solid transparent; border-radius: 3px; } .notify_dropdown a:hover, .notify_dropdown a:focus { border-color: var(--border_color); } .notify_dropdown span { font-size: 0.9em; } /* Some new stuff */ #display_head { clear: both; margin: -7px 0px 10px 0px; } #display_head p { color: var(--display_head_txt_color); } #display_head span { margin: -4px 0 0 0; } .display_title { font-weight: normal; font-size: 26px; margin-bottom: 0.25em; line-height: 1.05em; overflow-wrap: break-word; } #reported_posts .main_icons, #reported_members .main_icons { margin: -3px 1px 0 0; } #reported_posts .quickbuttons li a, #reported_members .quickbuttons li a { background: none; } /* Some colors for generic usage */ /* Sometimes there will be an error when you post */ /* Messages that somehow need to attract the attention. */ .red, .meaction, .error, .alert, .warn_mute { color: var(--red); } .blue { color: var(--blue); } .green { color: var(--green); } /* Adding some classes for generic usage and JS rules */ .hidden { display: none; } .inline_block { display: inline-block; } .block { display: block; margin: 0 0 5px 0; } /* Alternating colors */ .stripes:nth-of-type(even) { background-color: var(--stripes_even_bg_color); } .stripes:nth-of-type(odd) { background-color: var(--stripes_odd_bg_color); } .alternative { background-color: var(--alternative_bg_color); } .alternative2 { background-color: var(--alternative_bg_2_color); } .centerbox { top: 50%; left: 50%; transform: translate(-50%, -50%); } .dz-image-preview { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; margin-top: 12px; } #attachment_previews { display: none; } #attachment_previews div.descbox > div, #attachment_previews div.errorbox > div, #attachment_previews div.infobox > div { padding: 10px; } #attachment_previews .attach-preview { flex: 0 0 auto; width: 170px; } #attachment_previews .attachment_info { flex: 1 1 auto; width: 250px; } #attachment_previews .attach-ui { min-height: 36px; padding: 10px 0; float: right; } input[name="attachBBC"] { width: 100%; margin-top: 10px; } .attachment_info .progress_bar, .attachment_info .attached_BBC, a#attach_cancel_all, a#attach_upload_all, .attach-ui { display: none; } .attachment_info .progress_bar { margin: 6px 0; } .attached_BBC_width_height label { min-width: 100px; display: inline-block; } .attached_BBC_width, .attached_BBC_height { margin: 10px 1em 0 0; display: inline-block; } .attachment_info input[type="number"] { width: 5em; } #attachment_upload { min-height: 50px; } #drop_zone_ui { display: none; } #total_progress { width: 50%; display: none; } #max_files_progress, #max_files_progress_text { display: none; } /* Hide this from desktop users sshh... our little sekrit */ .mobile_buttons, .mobile_display { display: none; } /* Two-Factor Auth code container */ .tfacode { background: var(--tfacode_bg_color); padding: 5px; display: inline-block; } /* TFA QR block */ .tfa_qrcode { padding: 6% 8%; } .tfa_qrcode img { width: 140px; } /* This was named as "winfo" before, but its better named noup */ .noup { border-top-left-radius: 0; border-top-right-radius: 0; margin: 0 0 10px 0 !important; } .information.noup { border-radius: 0; margin: 0 !important; border-bottom: none; } .windowbg.noup { box-shadow: none; } /* Make the reCAPTCHA dialog centered to match the positioning of the built-in verification */ .g-recaptcha { display: inline-block; } /* If its collapsed you know what to do */ .collapsed { opacity: 0.5; transition: 1s; } .collapsed:hover { opacity: 1; } /* Lets not allow our textarea in news section overflow too much to left */ tr[id^='list_news_lists_'] textarea { width: 100%; resize: vertical; min-height: 100px; } /* Responsive Youtube embed */ .videocontainer { max-width: 560px; } .centertext .videocontainer, .justifytext .videocontainer { margin: 0 auto; } .righttext .videocontainer { margin: 0 0 0 auto; } .lefttext .videocontainer { margin: 0 auto 0 0; } .videocontainer > div { position: relative; padding-bottom: 56.25%; } .videocontainer iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .videocontainer video { object-fit: contain; background: var(--video_container_bg_color); max-width: 100%; } .backtrace:not(:last-child) { padding-bottom: 0.5em; border-bottom: var(--border_width) var(--border_style) var(--border_color); margin-bottom: 0.5em; } /* To break or not to break that is the question indeed */ .word_break { word-break: break-all; } div.sceditor-container:not(.sceditor-maximize) { z-index: 4; } #attach_current_directory { word-break: break-word; } /* Add max-width for theme thumbnails */ img.theme_thumbnail { max-width: 250px; } #lang_main_files_list .name, #member_list .email, #approve_list .email { word-break: break-word; } /*Font Awesome Icons Stuff*/ .main_icons, .icon { margin-inline-end: 0px; display: inline-flex; justify-content: center; align-items: center; } .main_icons.error { color: unset; } .centericon { vertical-align: middle; } .main_icons::before { content: ""; width: 16px; height: 16px; display: inline; background: transparent; vertical-align: middle; } .main_icons.home::before { content: "\f015"; } .main_icons.search::before { content: "\f002"; } .main_icons.admin::before { content: "\f7d9"; } .main_icons.moderate::before { content: "\f637"; } .main_icons.mlist::before { content: "\f0c0"; } .main_icons.lock::before, .main_icons.security::before { content: "\f023"; } .main_icons.sticky::before { content: "\f249"; } .main_icons.poll::Before { content: "\f681"; } .menu_icon::before, .toggle_down::before, .toggle_up::before, .errorbox::before, .infobox::before, .noticebox::before, .main_icons { font-family: "Font Awesome 5 Free"; font-weight: 900; } .main_icons.help::before { content: "\f059"; } .main_icons.search::before, .main_icons.engines::before { content: "\f002"; } .main_icons.quick_edit_button::before, .main_icons.modify_button::before { content: "\f044"; } .main_icons.check::before { content: "\f059"; } .main_icons.invalid::before { content: "\f071"; } .main_icons.gender_2::before { content: "\f221"; } .main_icons.select_above::before { content: "\f0d8"; } .main_icons.select_here::before { content: "\f0d9"; } .main_icons.select_below::before { content: "\f0d7"; } .main_icons.watch::before { content: "\f1e5"; } .main_icons.move::before, .main_icons.next_page::before { content: "\f35a"; } .main_icons.general::before, .main_icons.boards::before, .main_icons.topics_views::before { content: "\f200"; } .main_icons.gender_1::before { content: "\f222"; } .main_icons.features::before { content: "\f1de"; } .main_icons.posters::before { content: "\f091"; } .main_icons.replies::before, .main_icons.topics_replies::before { content: "\f46d"; } .main_icons.history::before, .main_icons.time_online::before, .main_icons.scheduled::before { content: "\f017"; } .main_icons.views::before { content: "\f200"; } .main_icons.last_post::before { content: "\f14d"; } .main_icons.starters::before, .main_icons.people::before, .main_icons.membergroups::before, .main_icons.mlist::before { content: "\f500"; } .main_icons.poll::before { content: "\f681"; } .main_icons.previous_page::before { content: "\f359"; } .main_icons.inbox::before { content: "\f0e0"; } .main_icons.permissions::before, .main_icons.login::before { content: "\f2f6"; } .main_icons.login { width: max-content; } .main_icons.www::before { content: "\f0ac"; } .main_icons.exit::before, .main_icons.logout::before { content: "\f2f5"; } .main_icons.switch::before { content: "\f079"; } .main_icons.replied::before, .main_icons.send::before { content: "\f658"; } .main_icons.im_on::before { content: "\f075"; } .main_icons.im_off::before { content: "\f075"; } .main_icons.split_desel::before { content: "\f0a8"; } .main_icons.split_sel::before { content: "\f0a9"; } .main_icons.mail::before { content: "\f0e0"; } .main_icons.warning_mute::before { content: "\f4b3"; } .main_icons.alerts::before, .main_icons.warn_button::before, .main_icons.warning_moderate::before { content: "\f071"; } .main_icons.mail_new::before { content: "\f0e0"; } .main_icons.drafts::before, .main_icons.reply_button::before, .main_icons.reply_all_button::before { content: "\f573"; } .main_icons.warning_watch::before { content: "\f06a"; } .main_icons.calendar_export::before { content: "\f271"; } .main_icons.calendar::before { content: "\f133"; } .main_icons.calendar_modify::before { content: "\f304"; } .main_icons.plus::before { content: "\f055"; } .main_icons.warning::before, .main_icons.moderate::before { content: "\f637"; } .main_icons.themes::before { content: "\f55d"; } .main_icons.support::before { content: "\f590"; } .main_icons.liked_users::before, .main_icons.liked_messages::before, .main_icons.like::before { content: "\f004"; } .main_icons.unlike::before { content: "\f7a9"; } .main_icons.current_theme::before { content: "\f482"; } .main_icons.stats::before { content: "\f080"; } .main_icons.right_arrow::before { content: "\f0da"; } .main_icons.left_arrow::before { content: "\f0d9"; } .main_icons.smiley::before { content: "\f580"; } .main_icons.server::before { content: "\f233"; } .main_icons.ban::before, .main_icons.ignore::before { content: "\f05e"; } .main_icons.boards::before { content: "\f07b"; } .main_icons.regcenter::before { content: "\f304"; } .main_icons.posts::before { content: "\f15b"; } .main_icons.sort_down::before { content: "\f884"; } .main_icons.change_menu2::before, .main_icons.sent::before { content: "\f061"; } .main_icons.post_moderation_moderate::before { content: "\f071"; } .main_icons.sort_up::before { content: "\f885"; } .main_icons.post_moderation_deny::before { content: "\f023"; } .main_icons.post_moderation_attach::before { content: "\f0c6"; } .main_icons.post_moderation_allow::before { content: "\f138"; } .main_icons.personal_message::before { content: "\f0e0"; } .main_icons.permissions::before, .main_icons.signup::before { content: "\f084"; } .main_icons.paid::before { content: "\f53a"; } .main_icons.packages::before { content: "\f466"; } .main_icons.filter::before { content: "\f0b0"; } .main_icons.change_menu::before { content: "\f060"; } .main_icons.package_ops::before { content: "\f085"; } .main_icons.reports::before { content: "\f0c5"; } .main_icons.news::before { content: "\f1ea"; } .main_icons.delete::before, .main_icons.prune::before, .main_icons.remove_button::before { content: "\f1f8"; } .main_icons.modifications::before { content: "\f12e"; } .main_icons.maintain::before, .main_icons.admin::before { content: "\f7d9"; } .main_icons.administration::before, .main_icons.home::before { content: "\f015"; } .main_icons.frenemy::before { content: "\f506"; } .main_icons.attachment::before { content: "\f0c6"; } .main_icons.lock::before, .main_icons.security::before { content: "\f023"; } .main_icons.error::before, .main_icons.disable::before { content: "\f06a"; } .main_icons.languages::before { content: "\f1ab"; } .main_icons.recent_posts::before { content: "\f086"; } .main_icons.members_request::before { content: "\f234"; } .main_icons.members_delete::before { content: "\f503"; } .main_icons.members::before { content: "\f0c0"; } .main_icons.members_watched::before { content: "\f507"; } .main_icons.sticky::before { content: "\f08d"; } .main_icons.corefeatures::before, .main_icons.settings::before, .main_icons.manrules::before, .main_icons.manlabels::before { content: "\f085"; } .main_icons.calendar::before { content: "\f073"; } .main_icons.logs::before { content: "\f022"; } .main_icons.valid::before { content: "\f00c"; } .main_icons.approve::before, .main_icons.enable::before, .main_icons.approve_button::before, .main_icons.read_button::before { content: "\f00c"; } .main_icons.close::before { content: "\f05e"; } .main_icons.details::before { content: "\f15c"; } .main_icons.merge::before { content: "\f0c1"; } .main_icons.folder::before { content: "\f078"; } .main_icons.restore_button::before { content: "\f2f1"; } .main_icons.split_button::before { content: "\f127"; } .main_icons.unapprove_button::before, .main_icons.unread_button::before, .main_icons.hide_popup::before { content: "\f00d"; } .main_icons.quote::before { content: "\f10e"; } .main_icons.quote_selected::before { content: "\f246"; } .main_icons.notify_button::before { content: "\f0f3"; } .main_icons.profile_sm::before { content: "\f007"; background: none; } /* BoardStats Flex Grid Thingy thing thing */ .boardstats_grid_row { background: linear-gradient(180deg, var(--window_bg_even_color) 0%, var(--window_bg_odd_color) 100%); flex-basis: 100%; padding: 4px 10px; margin: 0px; text-align: left; font-size: 0.9em; border: var(--border_width) var(--border_style); border-color: var(--border_color); } @media screen and (min-width:800px) { .boardstats_grid_column { display:flex; flex-direction:column; flex-wrap:nowrap } .boardstats_flex { flex:1 } } /* Recent Flex Grid Thingy thing thing */ .recent_grid_column { background: linear-gradient(180deg, var(--window_bg_even_color) 0%, var(--window_bg_odd_color) 100%); flex-basis: 100%; padding: 4px 10px; margin: 0px; text-align: left; font-size: 0.9em; border: var(--border_width) var(--border_style); border-color: var(--border_color); } .recentpost i { color: var(--link); text-decoration: none; } @media screen and (min-width:800px) { .recent_grid_row { display:flex; flex-direction:row; flex-wrap:nowrap } .recent_grid_flex { flex:1 } } /* Social Icons */ .social-icons { font-size: 1.5em; overflow: hidden; display: flex; } .social_icons i { width: max-content; } .social-icons a, .social_icons i { margin: 0px 2px; width: 30px; display: inline-flex; border: 1px solid; border-color: var(--social_icons_border_color); text-align: center; justify-content: center; align-content: center; padding: 5px; border-radius: 50%; box-shadow: var(--social_icons_box_shadow); text-decoration: none; } .social-icons i:hover { transition: linear 0.5s; text-decoration: none; border-color: var(--social_icons_border_color_hover); box-shadow: none; } .social-icons a:hover { transition: linear 0.5s; box-shadow: 0px 1px 1px hsl(0, 0%, 0%, .3) inset; text-decoration: none; border-color: var(--social_icons_border_color_hover); } /*Light&Dark Mode Switcher*/ .theme-switch-wrapper { padding: 0px; font-size: 1.8em; width: 21px; margin: 0px; } .theme-switch { display: inline-flex; color: var(--toggle_switch); } .theme-switch input { display:none; } .slider { background-color: transparent; bottom: 0; cursor: pointer; } .slider:before { background-color: transparent; content: "\f185"; transition: .4s; font-family: "Font Awesome 6 Free"; font-weight: 700; } input:checked + .slider { background-color: transparent; } input:checked + .slider:before { background-color: transparent; } input:checked + .slider:before { content: "\f186"; font-weight: 700; font-family: "Font Awesome 6 Free"; } /* SCEditor Stuff */ div.sceditor-toolbar { background: var(--cat_bg_color)!important; } div.sceditor-group { border: none!important; } /* Color Picker */ .styleselectblue i{ color: var(--styleselect_color_blue); border: none; text-decoration: none; margin: 0px 2px; } .styleselectblue i:hover, .styleselectred i:hover, .styleselectgreen i:hover{ filter: brightness(1.75); text-decoration: none; } .styleselectred i{ color: var(--styleselect_color_red); border: none; text-decoration: none; margin: 0px 2px; } .styleselectgreen i{ color: var(--styleselect_color_green); border: none; text-decoration: none; margin: 0px 2px; }