/* INTRODUCTION /* This is the standard Elkarte default theme. /* This file contains essential layout code only. /* Colors, gradients, images, etc. are in _variantname.css. /* /* All theme variants depend on this layout code for stability. /* It is better to copy code to a variant CSS file for testing. /* ------------------------------------------------------- */ /* $CONTENTS - still a bit WIP. @todo /* /* $GENERAL.............Global resets, clearfixes, etc. /* $COMMON..............Common classes to drive you bonkers. /* $BBC.................Quotes, code blocks, BBC styles. /* $AJAX................The "loading" bar (quick edit, etc). /* /* $MAIN................Forum header, wrapper, and footer. /* $MENUS...............Main and secondary menus. /* $LINKTREE............The breadcrumbs. /* $BUTTONS.............Most button strips. /* $PAGELINKS...........Page navigation links. /* /* $TABLES..............Generic tables (error log, etc.). /* $SETTINGS............Generic lists for settings pages. /* $BOARDS..............Board index, sub-boards, and message index. /* /* $TOPICS..............The display template (topic view), including send. /* $EDITOR..............Main editor (posts, events, polls) and topic summary. /* $MODERATE............Move topic, split topic, merge topic. /* /* $PROFILE.............The profile areas. /* $PERSONAL............The personal messages (PM) areas. /* $CALENDAR............Wombats (and the calendar). /* $STATISTICS..........The statistics centre. /* /* $HELP................Help pages, help icons and pop-ups, tooltips. /* $SEARCH..............Search pages, including memberlist search. /* $MEMBERLIST..........The memberlist table. /* $LOGIN...............Login and registration, maintenance mode. /* /* $BOXES...............Message boxes (error, warning, info, etc). /* $PROGRESS............Nifty progress bars. /* $MEDIA...............Experimental media queries. /* ------------------------------------------------------- */ /* $GENERAL */ /* ------------------------------------------------------- */ /* Put this here to make it easy to find. */ /* Width control for top bar, header, main content and footer content. */ .wrapper { margin: 0 auto; /* Next controls forum width, when it is not set in admin. */ width: 90%; /* Next limits maximum width on wide screens. */ /* Sized in em, since some people require larger text. */ /* For ease of reading, content really should not be too wide. */ max-width: 90em; /* Next is just for some testing. */ /*min-width: 100%;*/ } /* Cursor declared here.Should not be required anywhere else. */ a:hover, a.new_win:hover { cursor: pointer; } body { margin: 0; padding: 0 0 0 0; /* Set a font-size that will look the same in all browsers. */ /* Start with the best Vista/W7 font, then Mac, Linux, then old fallbacks. */ /* this results in a base 14pt and pt to em translation approx as so /* 9 - .643, 10 - .714, 11 - .786, 12 - .857, 13 - .929, 14 - 1, 15 - 1.071, 16 - 1.143 /* 17 - 1.214, 18 - 1.286, 19 - 1.357, 20 - 1.429, 21 - 1.5, 22 - 1.571, 23 - 1.643 /* 24 - 1.714, 25 - 1.786, 26 - 1.857, 27 - 1.929, 28 - 2, 29 - 2.071 */ font: 87.5%/150% "Segoe UI", "Helvetica Neue", "Liberation Sans", "Nimbus Sans L", "Trebuchet MS", Arial, sans-serif; } /* Tables should show empty cells. */ table { empty-cells: show; } /* Global box sizing, for stabilising fluid layouts. */ /* IMPORTANT: Do not declare div here (borks jQuery menus). */ /* Default most elements to zero padding and margin. */ /* Declare these separately to divs to avoid padding and margin problems. */ h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd ,dt, p, fieldset, form, input, button, select, .input_text, textarea, .editor { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; font-weight: normal; font-size: 1em; } /* Declarations for specific elements. @todo - Maybe simplify - test. */ .wrapper, div.windowbg, div.windowbg2, .roundframe, .description, .information, .successbox, .warningbox, .category_header, .generic_list_wrapper, .submitbutton, .grid8, .grid17, .grid20, .grid25, .grid30, .grid33, .grid50, #description_board .generalinfo { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Collection of pseudo element clearfixes. */ .category_header:after, .wrapper:after, #main_content_section:after, #main_container:after, .attachment_name:after, .editor_wrapper:after { display: block; clear: both; content: ""; } .quickbuttons:after { display: block; clear: both; content: ""; } /* @todo */ .statistics>.flow_hidden>.category_header:after { display: none; } /* Set list-style to none by default. Best in most places.*/ ul, ol { list-style: none; } /* No image should have a border when linked. */ /* @todo - I'm sure this would be better done with specific classes /* rather than global tag name. */ a img { border: 0; } /* Style the different types of inputs to be uniform for all browsers. */ /* NOTE: This does require some browser-specific code to get good results. */ /* Paddings on all types of inputs are set here. */ /* If specific styling is wanted for some inputs, be aware of browser /* differences when adding custom padding, or it will drive you mental. */ /* ALSO: This is still not quite pixel perfect everywhere for all browsers, /* in particular not for Internet Explorer. They can live with it. */ /* .button_submit - covers input[type=submit], input[type=button], button[type=submit] and button[type=button] .linkbutton - covers links, to make them look like a submit button. .button_reset - covers input[type=reset] and button[type=reset] .input_check - covers input[type=checkbox] .input_radio - covers input[type=radio] .input_text - covers input[type=text] .input_file - covers input[type=file] */ input, button, select, textarea, .editor { font: 87.5%/150% "Segoe UI", "Helvetica Neue", "Liberation Sans", "Nimbus Sans L", "Trebuchet MS", Arial, sans-serif; } /* The following is necessary. */ textarea, .editor { border-radius: 4px; font-size: 1em; } .sceditor-container { margin: 0 0 6px 0; } /* Gecko-specific reset - makes buttons consistent with other browsers. */ /* Yes, rotten browser-specific code. It will save some dramas though. */ button::-moz-focus-inner, input[type='button']::-moz-focus-inner, input[type='reset']::-moz-focus-inner, input[type='submit']::-moz-focus-inner, select::-moz-focus-inner { border: 0; padding: 0; } /* Declarations for inputs, selects and buttons */ input, .input_text, button, select { padding: 0 6px; min-height: 2em; max-height: 2em; height: 2em; vertical-align: middle; } select { padding: 0 0 0 2px; } .input_text { font-size: .876em; } select option { padding: 0 4px; } /* Special form elements need to be addressed */ select#cat, select#suggestions, select#file , input[type="file"] { height: auto; max-height: none; } .select_multiple { min-height: 10em; height: auto; } input[type="number"] { padding: 0 0 0 6px; } /* No borders around checkboxes or radio buttons, and middle aligned. */ .input_check, .input_radio { border: none; background: none; vertical-align: middle; margin: 0 2px 2px; } /* Common button styling. */ /* It is being replaced with three classes: */ /* .button_submit is not floated */ /* .right_submit is right floated */ /* .left_submit is left floated */ /* The button_reset class may need attention too. */ .button_submit, .right_submit, .left_submit, .button_reset, /* Anchors styled to look like buttons. */ /* These have standard body text size. Can be chained with smalltext class. */ .linkbutton:link, .linkbutton_right:link, .linkbutton_left:link, .linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited { padding: 0 6px; display: inline-block; } .left_submit, .linkbutton_left { float: left; } .right_submit, .linkbutton_right { float: right; } /* Hover effects. */ .button_submit:hover, .right_submit:hover, .left_submit:hover, .button_reset:hover, .linkbutton:hover, .linkbutton_right:hover, .linkbutton_left:hover { cursor: pointer; } /* Dont show disabled buttons as active on hover */ input[type=submit][disabled]:hover, button[disabled], button[disabled]:hover { border: 1px solid #afafaf; border-top: 1px solid #cfcfcf; border-left: 1px solid #bfbfbf; box-shadow: 1px 1px 2px #e5e5e5; } .linkbutton:link, .linkbutton_right:link, .linkbutton_left:link, .linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited { font-size: 0.857em; line-height: 1.929em; } /* @todo - A common, tag-agnostic class to hold submit buttons, etc. */ /* Old markup had crud like
*/ /* Use new class that is defined to suit, and with a sensible name. */ .submitbutton { text-align: right; padding: 6px 0; overflow: auto; } #post_confirm_buttons { padding: 0 1px 1px 0; } /* @todo - Test this out some more. */ .submitbutton .button_submit, .submitbutton .linkbutton, .submitbutton .right_submit { padding: 0 6px; margin-right: 0.2em; margin-left: 0.2em; } /* @todo mostly for those go buttons that don't have a form id */ .button_submit.submitgo { margin-bottom: 4px; } /* IE has its own padding needs */ #ie select, #ie8 select, #ie9 select { padding: 0 0 0 6px; } /* the new "button" */ /* @todo - Might add extra fallbacks. Possibly monospace. */ /* @todo - Also, look at deprecating spans here. */ .new_posts, .require_approval { font-weight: bold; line-height: 1.12px; } .new_posts, .require_approval { display: inline; padding: 1px 4px 2px 4px; font-size: .643em; font-family: verdana, sans-serif; } .new_posts:hover { text-decoration: underline; } del .bbc_link:link, del .bbc_link:visited { text-decoration: line-through; } .childboards .new_posts { font-size: 0.857em; padding: 1px 3px 2px; } /* Standard horizontal rule.. ([hr], etc.) */ hr { margin: 12px 0; height: 1px; } /* Fieldsets are used to group elements. */ /* @todo - Can we do this by class? What about default styling? Needed? */ /* Declaring as overflow: auto; is probably a good idea. Test for teh bugz. */ fieldset { overflow: auto; border: none; } strong { color: #666; font-weight: bold; } /*...and em as italics */ em { font-style: italic; } .table_grid_perms { table-layout: fixed; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } .grid8 { width: 8%; } .grid17 { width: 17%; } .grid20 { width: 20%; } .grid25 { width: 25%; } .grid30 { width: 30%; } .grid33 { width: 33%; } .grid50 { width: 49.5%; } /* $COMMON */ /* ------------------------------------------------------- */ /* HTML5 additions for deprecated tags. */ .tt { font-family: monospace; } /* Alternative for u tag. */ .underline { text-decoration: underline; } /* @todo - Test this everywhere. */ .standard_category { clear: both; margin: 1em 0 0 0; } /* @todo - Test this everywhere. */ .standard_category>.content { margin: 4px 0 0 0; overflow: auto; } /* Floats, overflows, clears. @todo */ .floatright { float: right; } .floatleft { float: left; } .flow_auto { overflow: auto; } .flow_hidden { overflow: hidden; } .clear { clear: both; } .clear_left { clear: left; } .clear_right { clear: right; } /* Default font sizes (defined in em, so IE can resize): small (12px default), /* normal (14px default), and large (16px default). /* Since these are purely presentational classes, they should be used sparingly. */ /* @todo - th shouldn't be required. */ .smalldescription, .smalldescription th, .smalltext, .smalltext th { font-size: 0.857em; } .largetext { font-size: 1.286em; } .centertext { text-align: center; } .righttext { text-align: right; } .lefttext { text-align: left; } .double_height { line-height: 2em; } .nowrap { white-space: nowrap; } .wordbreak { word-break: break-all; } /* Styles for main headers. */ .category_header, .forum_category .category_header { padding: 4px 10px 2px 10px; font-size: 1.214em; line-height: 1.8em; } /* Styles for subsection headers. @todo */ .secondary_header { margin: 12px 0 0 0; font-size: 1.143em; line-height: 1.8em; padding: 1px 10px 1px; } .category_header .icon { margin: 0 5px 0 0; vertical-align: text-top; } /* Category Header icons as sprites ------------------------------------------------- */ .hdicon:before { background-image: url(../images/icons/header.png); background-repeat: no-repeat; content: ""; display: inline-block; height: 24px; width: 30px; vertical-align: text-bottom; } /* broke formatting for compactness */ .cat_img_attachments:before {background-position: 0 0;} .cat_img_buddies:before {background-position: 0 -24px;} .cat_img_config:before {background-position: 0 -48px} .cat_img_contacts:before {background-position: 0 -72px;} .cat_img_helptopics:before {background-position: 0 -96px;} .cat_img_inbox:before {background-position: 0 -120px;} .cat_img_login:before {background-position: 0 -144px;} .cat_img_mail:before {background-position: 0 -168px;} .cat_img_moderation:before {background-position: 0 -192px;} .cat_img_plus:before {background-position: 0 -216px;} .cat_img_posts:before {background-position: 0 -240px;} .cat_img_profile:before {background-position: 0 -264px;} .cat_img_search:before {background-position: 0 -288px;} .cat_img_stats_info:before {background-position: 0 -312px;} .cat_img_topics:before {background-position: 0 -336px;} .cat_img_write:before {background-position: 0 -360px;} .cat_img_database:before {background-position: 0 -384px;} .cat_img_address:before {background-position: 0 -408px;} .cat_img_calendar:before {background-position: 0 -432px;} .cat_img_minus:before {background-position: 0 -456px;} .cat_img_star:before {background-position: 0 -480px;} .cat_img_clock:before {background-position: 0 -504px;} .cat_img_eye:before {background-position: 0 -528px;} .cat_img_piechart:before {background-position: 0 -552px;} .cat_img_talk:before {background-position: 0 -576px;} h2 a.collapse { margin: 2px 4px -2px 0; float: right; } /* Upshrink image in the general category headers */ #category_toggle, #category_toggle_more, #upshrink_header, .package_toggle { display: block; float: right; padding: 0 16px; overflow: hidden; position: relative; } #category_toggle span, #category_toggle_more span, #upshrink_header span, .package_toggle span { background-repeat: no-repeat; background-image: url(../images/_light/expcol.png); position: absolute; top: 50%; margin-top: -30px; left: 50%; margin-left: -58px; padding: 47px 50px; } /* Upshrink image in the page top for the header collapse */ #collapse_button .linklevel1 { display: block; overflow: hidden; position: relative; padding: 0; margin-right: 1px; } .collapse {background-position: 0 -25px;} .expand {background-position: -116px -25px;} /* Alternating backgrounds for posts, and several other sections of the forum. */ .windowbg, #preview_body, .windowbg2 {} /* General code for generic divs. Should make them behave. */ /* @todo - Not keen on this. Do no-tag-names solution instead? */ /* @todo - When sorted out take care of div.core_posts too */ div.windowbg, div.windowbg2 { overflow: auto; padding: 10px 0; } /* Other highlighted text, such as search results. */ .highlight { font-weight: bold; font-size: 1.071em; } /* Legacy highlight color, for selected membergroups etc. */ /* Used by JS to show a selected item. @todo - deprecate? */ .highlight2 { font-size: 1.071em; } /* Sometimes there will be an error when you post */ .error { color: red; } .border_error { border: 1px solid red !important; } /* Messages that somehow need to attract the attention. */ .alert { color: red; } /* Colors for warnings. */ .warn_mute { color: red; } .warn_moderate, .softalert { color: #ffa500; } .warn_watch, .success { color: green; } .moderation_link, .moderation_link:visited { color: red; font-weight: bold; } /* Used for sections that need somewhat larger corners */ /* @todo - Daft name. Other stuffz. :P */ .roundframe { overflow: hidden; margin: 2px 0 0 0; padding: 9px; } .roundframe p { padding: 6px; } /* The generic wrapper thingy. Used by generic list template */ .generic_list_wrapper { overflow: auto; margin: 0; padding: 8px 8px 16px 8px; } .generic_list_wrapper .additional_row { margin: 0; padding: 10px 0 0; } /* The .information box is used by the after_title additional row */ .generic_list_wrapper .information .additional_row { border: none; padding: 6px 0; } .generic_list_wrapper .information { margin: 0; padding: 0; border: none; } /* @todo - Ha. Just another silly bunch of divs. */ .content { padding: 0.2em 1em; } .content p { margin: 0 0 6px 0; } /* Styles used by the auto suggest control. */ .auto_suggest_div { position: absolute; z-index: 100; visibility: hidden; } .auto_suggest_div:focus { outline: none !important; } .auto_suggest_item { padding: 1px 4px; } .auto_suggest_item_hover { padding: 1px 4px; cursor: pointer; } /* To ensure the question and the input are on two different lines */ .verificationquestion label { display: block; width: 100%; } /* $BBC */ /* ------------------------------------------------------- */ /* The "Quote:" and "Code:" header parts... */ .codeheader, .quoteheader { margin: 6px 0 0 0; padding: 4px 6px 2px 6px; font-weight: bold; font-size: 0.857em; } /* [Select] link to copy code. */ .codeoperation { font-weight: normal; } /* A quote, perhaps from another post. */ .bbc_standard_quote, .bbc_alternate_quote, /* A code block - maybe PHP ;) - shared styles. */ .bbc_code { overflow: auto; margin: 0 0 1em 0; padding: 6px 10px; font-size: 0.857em; } /* Extra code block styling. */ .bbc_code { overflow: auto; height: 20em; white-space: nowrap; font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace; resize: vertical; } .bbc_code .tab { width: 4ex; white-space:pre; display: inline-block; } /* Stop em compounding when elements are nested. */ /* @todo - Scrap old extra divs in Subs.php. */ .bbc_standard_quote .bbc_alternate_quote, .bbc_alternate_quote .bbc_standard_quote, .bbc_standard_quote .bbc_code, .bbc_alternate_quote .bbc_code, .bbc_standard_quote .codeheader, .bbc_alternate_quote .codeheader, .bbc_standard_quote .quoteheader, .bbc_alternate_quote .quoteheader, /* And for quote inside small text areas, like the topic summary. */ #topic_summary .bbc_standard_quote, #topic_summary .bbc_alternate_quote , #topic_summary .bbc_code, #topic_summary .codeheader, #topic_summary .quoteheader { font-size: 1em; } /* Styling for BBC tags */ .bbc_size { line-height: 1.4em; } /* @todo - Are all these "inherit" declarations really necessary? */ .bbc_color a { color: inherit; } .bbc_strong { color: inherit; } .bbc_img { border: 0; max-width: 100%; } .bbc_table { color: inherit; font: inherit; } .bbc_table td { color: inherit; font: inherit; vertical-align: top; padding: 0 1em 0 0; } .bbc_table th { color: inherit; font: inherit; font-weight: bold; padding: 0 1em 0 0; } .bbc_u { text-decoration: underline; } .bbc_list { padding: 0 0 0 35px; text-align: left; list-style-type: square; } /* Everything is same except HTML5 valid */ .bbc_tt { font-family: "DejaVu Sans Mono", Monaco, "Lucida Console", "Courier New", monospace; } .bbc_pre { font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace; overflow: auto; } .bbc_footnotes { margin-top: 10px; padding: 4px 8px 4px 0; font-size: small; overflow: auto; } .footnote_return { font-size: 1.357em; } /* Shorten url's inside posts. */ a.bbc_link { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; vertical-align: bottom; word-wrap: normal; } /* $AJAX */ /* ------------------------------------------------------- */ /* The "Loading" bar for quick edit, etc. */ #ajax_in_progress { position: fixed; top: 0; left: 0; padding: 15px; width: 100%; text-align: center; font-size: 1.571em; z-index: 100; } #ajax_in_progress a { color: orange; text-decoration: underline; } /* $MAIN. */ /* ------------------------------------------------------- */ /* The top bar. */ #top_section { margin: 0; padding: 0; } #top_section_notice { float: left; margin: 0; padding: 14px 8px 0 8px; line-height: 1.286em; min-width: 38%; } #top_section_notice .toggle_login { display: inline; cursor: pointer; } #top_section_notice form { white-space: nowrap; width: 100%; } .top_button { line-height: 1.286em; max-height: 1.357em; padding: 2px; margin-left: 1px; vertical-align: top; } .top_button img { vertical-align: middle; padding: 2px; } #password_login { display: inline-block; vertical-align: middle; -webkit-appearance: caps-lock-indicator; } #search_form { padding: 12px 3px 4px 8px; float: right; } #search_form * { margin: 0; border-radius: 0; /* Webkit (bleh) fix. */ float: left; } /* The logo and slogan. */ #header { padding: 2px 2px 0 2px; } /* The main title. */ #forumtitle, .rightheader #forumtitle { padding: 10px 10px 6px 13px; font-size: 2.357em; line-height: 1.455em; } .centerheader .forumlink { display: none; } .rightheader #forumtitle .forumlink { float: right; } /* Float these items to the right. @todo - Simplify. */ #logobox, .rightheader #logobox { float: right; padding: 0 12px 0 12px; max-width: 40%; } .centerheader #logobox { width: 100%; } .rightheader #logobox, .rightheader #logo { float: left; padding-bottom: 7px; } .centerheader #logobox, .centerheader #logo, .centerheader #siteslogan { float: none; display: block; margin: 0 auto; text-align: center; } #siteslogan { clear: both; } /* Tweak the logo */ #logo { margin: 0 8px 0 0; padding: 0; float: right; } .rightheader #logo { margin: 0 0 0 8px; } /* Main forum area. */ /* Box-shadow only on this one. */ #wrapper { margin-top: 20px; padding: 1.2em 1em; } /* The user info, news, etc.*/ #news { vertical-align: top; padding: 0 0 1em 0; margin-left: -1px; } #news .bbc_link { display: inline; } /* The login form. */ #guest_form { padding: 0 0 8px 0; } #guest_form input, #guest_form select { font-size: 1.071em; margin: 0 0 8px 0; } .modtask { margin: 1em 0 0 0; } .modtask a { font-weight: bold; } /* The content section */ #main_content_section { padding: 1em 0 0 0; min-height: 180px; } /* The footer with copyright links etc. */ #footer_section { margin: 35px 0 0 0; } #footer_section .wrapper { padding: 20px 5px; } #footer_section p, #footer_section a { font-size: 0.857em; } #footer_section li { display: inline; padding-right: 5px; } #footer_section .copyright { display: inline; visibility: visible; font-family: Verdana, Arial, sans-serif; font-size: 0.857em; } #footer_section .rssfeeds { float: right; padding-top: 2px; width: 21px; margin: auto; text-align: center; } /* $MENUS */ /* This section contains code for the main forum menu (#main_menu), /* and for the secondary menus in admin/profile/pm (.admin_menu), /* and for the tertiary menu strip in admin/etc (#adm_submenus). /* /* Top level