| /* INTRODUCTION |
| /* INTRODUCTION |
| /* This variant is the standard, light, Elkarte default theme. |
| /* This variant is the standard, light, Elkarte default theme. |
| /* This is eye candy only. All the layout code is in index.css. |
| /* This is eye candy only. All the layout code is in index.css. |
| /* |
| /* |
| /* All theme variants depend on the layout code for stability. |
| /* All theme variants depend on the layout code for stability. |
| /* It is better to copy code to a variant CSS file for testing. |
| /* It is better to copy code to a variant CSS file for testing. |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* $CONTENTS - still a bit WIP. @todo |
| /* $CONTENTS - still a bit WIP. @todo |
| /* |
| /* |
| /* $GENERAL.............Global resets, clearfixes, etc. |
| /* $GENERAL.............Global resets, clearfixes, etc. |
| /* $COMMON..............Common classes to drive you bonkers. |
| /* $COMMON..............Common classes to drive you bonkers. |
| /* $BBC.................Quotes, code blocks, BBC styles. |
| /* $BBC.................Quotes, code blocks, BBC styles. |
| /* $AJAX................The "loading" bar (quick edit, etc). |
| /* $AJAX................The "loading" bar (quick edit, etc). |
| /* |
| /* |
| /* $MAIN................Forum header, wrapper, and footer. |
| /* $MAIN................Forum header, wrapper, and footer. |
| /* $MENUS...............Main and secondary menus. |
| /* $MENUS...............Main and secondary menus. |
| /* $LINKTREE............The breadcrumbs. |
| /* $LINKTREE............The breadcrumbs. |
| /* $BUTTONS.............Most button strips. |
| /* $BUTTONS.............Most button strips. |
| /* $PAGELINKS...........Page navigation links. |
| /* $PAGELINKS...........Page navigation links. |
| /* |
| /* |
| /* $TABLES..............Generic tables (memberlist, error log, etc). |
| /* $TABLES..............Generic tables (memberlist, error log, etc). |
| /* $SETTINGS............Generic lists for settings pages. |
| /* $SETTINGS............Generic lists for settings pages. |
| /* $BOARDS..............Board index, sub-boards, and message index. |
| /* $BOARDS..............Board index, sub-boards, and message index. |
| /* |
| /* |
| /* $TOPICS..............The display template (topic view), including send. |
| /* $TOPICS..............The display template (topic view), including send. |
| /* $EDITOR..............Main editor (posts, events, polls) and topic summary. |
| /* $EDITOR..............Main editor (posts, events, polls) and topic summary. |
| /* $MODERATE............Move topic, split topic, merge topic. |
| /* $MODERATE............Move topic, split topic, merge topic. |
| /* |
| /* |
| /* $PROFILE.............The profile areas. |
| /* $PROFILE.............The profile areas. |
| /* $PERSONAL............The personal messages (PM) areas. |
| /* $PERSONAL............The personal messages (PM) areas. |
| /* $CALENDAR............Wombats (and the calendar). |
| /* $CALENDAR............Wombats (and the calendar). |
| /* $STATISTICS..........The statistics centre. |
| /* $STATISTICS..........The statistics centre. |
| /* |
| /* |
| /* $HELP................Help pages, help icons and pop-ups, tooltips. |
| /* $HELP................Help pages, help icons and pop-ups, tooltips. |
| /* $SEARCH..............Search pages, including memberlist search. |
| /* $SEARCH..............Search pages, including memberlist search. |
| /* $MEMBERLIST..........The memberlist table. |
| /* $MEMBERLIST..........The memberlist table. |
| /* $LOGIN...............Login and registration, maintenance mode. |
| /* $LOGIN...............Login and registration, maintenance mode. |
| /* |
| /* |
| /* $BOXES...............Message boxes (error, warning, info, etc). |
| /* $BOXES...............Message boxes (error, warning, info, etc). |
| /* $PROGRESS............Nifty progress bars. |
| /* $PROGRESS............Nifty progress bars. |
| /* $MEDIA...............Experimental media queries. |
| /* $MEDIA...............Experimental media queries. |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| |
| |
| |
| |
| |
| |
| |
| |
| /* $GENERAL */ |
| /* $GENERAL */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* Normal, standard links. */ |
| /* Normal, standard links. */ |
| a, a:link, a:visited, |
| a, a:link, a:visited, |
| /* Links that open in a new window. */ |
| /* Links that open in a new window. */ |
| a.new_win:link, a.new_win:visited { |
| a.new_win:link, a.new_win:visited { |
| color: #49643d; |
| color: #49643d; |
| text-decoration: none; |
| text-decoration: none; |
| } |
| } |
| /* Cursor declared here.Should not be required anywhere else. */ |
| /* Cursor declared here.Should not be required anywhere else. */ |
| a:hover, a.new_win:hover { |
| a:hover, a.new_win:hover { |
| text-decoration: underline; |
| text-decoration: underline; |
| } |
| } |
| |
| |
| /* Stop white band under footer on short pages. */ |
| /* Stop white band under footer on short pages. */ |
| /* This color should match $FOOTER background. */ |
| /* This color should match $FOOTER background. */ |
| html { |
| html { |
| background: #222; |
| background: #222; |
| } |
| } |
| body { |
| body { |
| background: #555; |
| background: #555; |
| background-image: linear-gradient(to right, #333 0%, #888 50%, #333 100%); |
| background-image: linear-gradient(to right, #333 0%, #888 50%, #333 100%); |
| color: #666; |
| color: #666; |
| } |
| } |
| fieldset { |
| fieldset { |
| border: none; |
| |
| background: transparent; |
| background: transparent; |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| padding: 6px; |
| padding: 6px; |
| box-shadow: none; |
| box-shadow: none; |
| box-shadow: inset -1px -1px 3px #fff; |
| box-shadow: inset -1px -1px 3px #fff; |
| border-radius: 5px; |
| border-radius: 5px; |
| margin: 5px 0; |
| margin: 5px 0; |
| } |
| } |
| legend { |
| legend { |
| background: url(../../images/selected_open.png) no-repeat scroll left center transparent; |
| background: url(../../images/selected_open.png) no-repeat scroll left center transparent; |
| cursor: pointer; |
| cursor: pointer; |
| padding-left: 20px; |
| padding: 0 0 2px 20px; |
| color: #333; |
| color: #333; |
| font-size: 1.214em; |
| font-size: 1.071em; |
| margin-left: 15px; |
| margin-left: 15px; |
| } |
| } |
| .collapsed legend { |
| .collapsed legend { |
| background: url(../../images/selected.png) no-repeat scroll left center transparent; |
| background: url(../../images/selected.png) no-repeat scroll left center transparent; |
| } |
| } |
| |
| |
| input, button, select, textarea, .editor { |
| input, button, select, textarea, .editor { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-radius: 2px; |
| border-radius: 2px; |
| background: #fff; |
| background: #fff; |
| color: #666; |
| color: #666; |
| } |
| } |
| |
| |
| input:hover, textarea:hover, button:hover, select:hover { |
| input:hover, textarea:hover, button:hover, select:hover { |
| border: 1px solid #999; |
| border: 1px solid #999; |
| } |
| } |
| textarea:hover, .editor:hover { |
| textarea:hover, .editor:hover { |
| background: #fbfbfb; |
| background: #fbfbfb; |
| } |
| } |
| input:focus, textarea:focus, button:focus, select:focus, .editor:focus { |
| input:focus, textarea:focus, button:focus, select:focus, .editor:focus { |
| border: 1px solid #999; |
| border: 1px solid #999; |
| } |
| } |
| /* Give disabled text input elements a different background color. */ |
| /* Give disabled text input elements a different background color. */ |
| input[disabled].input_text, input[disabled].input_password { |
| input[disabled].input_text, input[disabled].input_password { |
| background: #eee; |
| background: #eee; |
| } |
| } |
| |
| |
| /* The OpenID login form */ |
| /* The OpenID login form */ |
| .openid_login { |
| .openid_login { |
| padding-left: 20px; |
| padding-left: 20px; |
| background: white url(../../images/openid.png) no-repeat; |
| background: white url(../../images/openid.png) no-repeat; |
| background-position: 2% 50%; |
| background-position: 2% 50%; |
| } |
| } |
| |
| |
| /* Common button styling. */ |
| /* Common button styling. */ |
| /* It is being replaced with three classes: */ |
| /* It is being replaced with three classes: */ |
| /* .button_submit is not floated */ |
| /* .button_submit is not floated */ |
| /* .right_submit is right floated */ |
| /* .right_submit is right floated */ |
| /* .left_submit is left floated */ |
| /* .left_submit is left floated */ |
| /* The button_reset class may need attention too. */ |
| /* The button_reset class may need attention too. */ |
| .button_submit, .right_submit, .left_submit, .button_reset, |
| .button_submit, .right_submit, .left_submit, .button_reset, |
| /* Anchors styled to look like buttons. */ |
| /* Anchors styled to look like buttons. */ |
| /* These have standard body text size. Can be chained with smalltext class. */ |
| /* These have standard body text size. Can be chained with smalltext class. */ |
| .linkbutton:link, .linkbutton_right:link, .linkbutton_left:link, |
| .linkbutton:link, .linkbutton_right:link, .linkbutton_left:link, |
| .linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited { |
| .linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited { |
| border-radius: 2px; |
| border-radius: 2px; |
| border: 1px solid #afafaf; |
| border: 1px solid #afafaf; |
| border-top: 1px solid #cfcfcf; |
| border-top: 1px solid #cfcfcf; |
| border-left: 1px solid #bfbfbf; |
| border-left: 1px solid #bfbfbf; |
| background: #f4f4f4; |
| background: #f4f4f4; |
| background-image: linear-gradient(to bottom, #fff, #e4e4e4); |
| background-image: linear-gradient(to bottom, #fff, #e4e4e4); |
| color: #555; |
| color: #555; |
| box-shadow: 1px 1px 2px #e5e5e5, 0 -1px 0 #e4e4e4 inset; |
| box-shadow: 1px 1px 2px #e5e5e5, 0 -1px 0 #e4e4e4 inset; |
| } |
| } |
| |
| |
| /* Hover effects. */ |
| /* Hover effects. */ |
| .button_submit:hover, .right_submit:hover, .left_submit:hover, |
| .button_submit:hover, .right_submit:hover, .left_submit:hover, |
| .button_reset:hover, |
| .button_reset:hover, |
| .linkbutton:hover, .linkbutton_right:hover, .linkbutton_left:hover { |
| .linkbutton:hover, .linkbutton_right:hover, .linkbutton_left:hover { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-top: 1px solid #afafaf; |
| border-top: 1px solid #afafaf; |
| border-left: 1px solid #afafaf; |
| border-left: 1px solid #afafaf; |
| background: #f0f0f0; |
| background: #f0f0f0; |
| box-shadow: 2px 1px 1px rgba(0,0,0,0.07) inset; |
| box-shadow: 2px 1px 1px rgba(0,0,0,0.07) inset; |
| color: #555; |
| color: #555; |
| text-decoration: none; |
| text-decoration: none; |
| } |
| } |
| |
| |
| /* the new "button" */ |
| /* the new "button" */ |
| .new_posts, .new_posts:visited, .new_posts:link { |
| .new_posts, .new_posts:visited, .new_posts:link { |
| border-radius: 2px; |
| border-radius: 2px; |
| background: #5aa05e; |
| background: #5aa05e; |
| color: #fff; |
| color: #fff; |
| } |
| } |
| /* approval indicator */ |
| /* approval indicator */ |
| .require_approval { |
| .require_approval { |
| border-radius: 4px; |
| border-radius: 4px; |
| background: #f3b200; |
| background: #f3b200; |
| color: #fff; |
| color: #fff; |
| } |
| } |
| |
| |
| /* Standard horizontal rule.. ([hr], etc.) */ |
| /* Standard horizontal rule.. ([hr], etc.) */ |
| hr { |
| hr { |
| border-left: 0; |
| border-left: 0; |
| border-top: 1px solid #bbb; |
| border-top: 1px solid #bbb; |
| background: #eee; |
| background: #eee; |
| background-color: #eee; |
| background-color: #eee; |
| } |
| } |
| |
| |
| strong { |
| strong { |
| font-weight: bold; |
| font-weight: bold; |
| } |
| } |
| |
| |
| /* Use demi bold font weight for some key areas */ |
| /* Use demi bold font weight for some key areas */ |
| .codeheader, .quoteheader, |
| .codeheader, .quoteheader, |
| .expand_pages, |
| .expand_pages, |
| .table_head>th, |
| .table_head>th, |
| .topic_sorting_row>h3, .topic_name h4 a, |
| .topic_sorting_row>h3, .topic_name h4 a, |
| .poster .name, |
| .poster .name, |
| .keyinfo h5 a, .keyinfo h5 a strong, |
| .keyinfo h5 a, .keyinfo h5 a strong, |
| .ui-tabs .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav .ui-state-active, |
| .ui-tabs .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav .ui-state-active, |
| .ui-dialog .ui-dialog-titlebar, |
| .ui-dialog .ui-dialog-titlebar, |
| .popup_heading { |
| .popup_heading { |
| font-weight: 600; |
| font-weight: 600; |
| -webkit-font-smoothing: antialiased; |
| -webkit-font-smoothing: antialiased; |
| font-family: "Segoe UI Semibold", "Helvetica Neue Medium", "Helvetica Neue"; |
| font-family: "Segoe UI Semibold", "Segoe UI", "Helvetica Neue Medium", "Helvetica Neue"; |
| } |
| } |
| |
| |
| /* @todo - Test this everywhere. */ |
| /* @todo - Test this everywhere. */ |
| .standard_category { |
| .standard_category { |
| border-radius: 4px 4px 0 0; |
| border-radius: 4px 4px 0 0; |
| background: #e4e4e4; |
| background: #e4e4e4; |
| box-shadow: 1px 2px 4px #eee; |
| box-shadow: 1px 2px 4px #eee; |
| } |
| } |
| /* @todo - Test this everywhere. */ |
| /* @todo - Test this everywhere. */ |
| .standard_category>.content { |
| .standard_category>.content { |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| background: #fff; |
| background: #fff; |
| } |
| } |
| |
| |
| /* Styles for main headers. */ |
| /* Styles for main headers. */ |
| .category_header, .forum_category .category_header { |
| .category_header, .forum_category .category_header { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-top: 1px solid #ddd; |
| border-top: 1px solid #ddd; |
| border-bottom: 1px solid #bbb; |
| border-bottom: 1px solid #bbb; |
| border-radius: 3px 3px 0 0; |
| border-radius: 3px 3px 0 0; |
| background: #ebebeb; |
| background: #ebebeb; |
| background-image: linear-gradient(to bottom, #fafafa, #eaeaea); |
| background-image: linear-gradient(to bottom, #fafafa, #eaeaea); |
| color: #566450; |
| color: #566450; |
| text-shadow: 1px 1px 0 #ebebeb; |
| text-shadow: 1px 1px 0 #ebebeb; |
| } |
| } |
| /* Single ones a bit darker than board index ones. */ |
| /* Single ones a bit darker than board index ones. */ |
| .forumposts .category_header, .content_category .category_header { |
| .forumposts .category_header, .content_category .category_header { |
| border-top: 1px solid #cfcfcf; |
| border-top: 1px solid #cfcfcf; |
| border-bottom: 1px solid #b7b7b7; |
| border-bottom: 1px solid #b7b7b7; |
| background: #e9e9e9; |
| background: #e9e9e9; |
| background-image: linear-gradient(to bottom, #f6f6f6, #e4e4e4); |
| background-image: linear-gradient(to bottom, #f6f6f6, #e4e4e4); |
| } |
| } |
| /* Styles for subsection headers. @todo */ |
| /* Styles for subsection headers. @todo */ |
| .secondary_header { |
| .secondary_header { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-top: 1px solid #dfdfdf; |
| border-top: 1px solid #dfdfdf; |
| background: #fafafa; |
| background: #fafafa; |
| background-image: linear-gradient(to bottom, #fafafa, #ebebeb); |
| background-image: linear-gradient(to bottom, #fafafa, #ebebeb); |
| text-shadow: 1px 1px 0 #fff; |
| text-shadow: 1px 1px 0 #fff; |
| } |
| } |
| |
| |
| .category_header a:link { |
| .category_header a:link { |
| color: #777; |
| color: #777; |
| } |
| } |
| |
| |
| /* Upshrink image in the general category headers */ |
| /* Upshrink image in the general category headers */ |
| #category_toggle, #category_toggle_more, #upshrink_header { |
| #category_toggle, #category_toggle_more, #upshrink_header { |
| border-radius: 2px; |
| border-radius: 2px; |
| } |
| } |
| |
| |
| /* Upshrink image in the page top for the header collapse */ |
| /* Upshrink image in the page top for the header collapse */ |
| #collapse_button .linklevel1 { |
| #collapse_button .linklevel1 { |
| border-radius: 2px; |
| border-radius: 2px; |
| } |
| } |
| |
| |
| /* Custom highlighted text style for modern browsers. */ |
| /* Custom highlighted text style for modern browsers. */ |
| /* Nicer than default blue. Needs two separate rules. */ |
| /* Nicer than default blue. Needs two separate rules. */ |
| ::-moz-selection { |
| ::-moz-selection { |
| background: #d8ffdf; |
| background: #d8ffdf; |
| color: #444; |
| color: #444; |
| } |
| } |
| ::selection { |
| ::selection { |
| background: #d8ffdf; |
| background: #d8ffdf; |
| color: #444; |
| color: #444; |
| } |
| } |
| |
| |
| /* Other highlighted text, such as search results. */ |
| /* Other highlighted text, such as search results. */ |
| .highlight { |
| .highlight { |
| color: #ff7200; |
| color: #ff7200; |
| } |
| } |
| |
| |
| /* Used for sections that need somewhat larger corners */ |
| /* Used for sections that need somewhat larger corners */ |
| /* @todo - Daft name. Other stuffz. :P */ |
| /* @todo - Daft name. Other stuffz. :P */ |
| .roundframe { |
| .roundframe { |
| border: 1px solid #c5c5c5; |
| border: 1px solid #c5c5c5; |
| border-radius: 7px; |
| border-radius: 7px; |
| background: #f5f5f5; |
| background: #f5f5f5; |
| } |
| } |
| |
| |
| /* The generic wrapper thingy. */ |
| /* The generic wrapper thingy. */ |
| .generic_list_wrapper { |
| .generic_list_wrapper { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-radius: 7px; |
| border-radius: 7px; |
| box-shadow: 0 -2px 2px rgba(0,0,0,0.1); |
| box-shadow: 0 -2px 2px rgba(0,0,0,0.1); |
| } |
| } |
| .generic_list_wrapper .additional_row { |
| .generic_list_wrapper .additional_row { |
| border-radius: 0; |
| border-radius: 0; |
| } |
| } |
| .generic_list_wrapper .title_bar { |
| .generic_list_wrapper .title_bar { |
| border-bottom: 1px solid #fff; |
| border-bottom: 1px solid #fff; |
| border-radius: 0; |
| border-radius: 0; |
| background: none; |
| background: none; |
| } |
| } |
| .generic_list_wrapper .information { |
| .generic_list_wrapper .information { |
| border-bottom: 1px solid #fff; |
| border-bottom: 1px solid #fff; |
| background: none; |
| background: none; |
| } |
| } |
| |
| |
| /* Styles used by the auto suggest control. */ |
| /* Styles used by the auto suggest control. */ |
| .auto_suggest_div { |
| .auto_suggest_div { |
| border: 1px solid #bbb; |
| border: 1px solid #bbb; |
| border-radius: 3px; |
| border-radius: 3px; |
| } |
| } |
| .auto_suggest_div:focus { |
| .auto_suggest_div:focus { |
| border: 1px solid #bbb; |
| border: 1px solid #bbb; |
| } |
| } |
| .auto_suggest_item { |
| .auto_suggest_item { |
| background: #ddd; |
| background: #ddd; |
| } |
| } |
| .auto_suggest_item_hover { |
| .auto_suggest_item_hover { |
| background: #888; |
| background: #888; |
| color: #eee; |
| color: #eee; |
| } |
| } |
| |
| |
| /* $BBC */ |
| /* $BBC */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* The "Quote:" and "Code:" header parts... */ |
| /* The "Quote:" and "Code:" header parts... */ |
| .codeheader, .quoteheader { |
| .codeheader, .quoteheader { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-bottom: none; |
| border-bottom: none; |
| background: #fff; |
| background: #fff; |
| color: #555; |
| color: #555; |
| } |
| } |
| .codeheader { |
| .codeheader { |
| border-top: 3px solid #aaa; |
| border-top: 3px solid #aaa; |
| } |
| } |
| /* [Select] link to copy code. */ |
| /* [Select] link to copy code. */ |
| .codeoperation { |
| .codeoperation { |
| font-weight: normal; |
| font-weight: normal; |
| } |
| } |
| /* A quote, perhaps from another post. */ |
| /* A quote, perhaps from another post. */ |
| .bbc_standard_quote, .bbc_alternate_quote, |
| .bbc_standard_quote, .bbc_alternate_quote, |
| /* A code block - maybe PHP ;) - shared styles. */ |
| /* A code block - maybe PHP ;) - shared styles. */ |
| .bbc_code { |
| .bbc_code { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-top: none; |
| border-top: none; |
| background: #fff; |
| background: #fff; |
| } |
| } |
| /* Extra quote styling */ |
| /* Extra quote styling */ |
| .bbc_standard_quote, .bbc_alternate_quote, .quoteheader { |
| .bbc_standard_quote, .bbc_alternate_quote, .quoteheader { |
| box-shadow: 2px 2px 2px #ddd; |
| box-shadow: 2px 2px 2px #ddd; |
| } |
| } |
| /* Extra code block styling. */ |
| /* Extra code block styling. */ |
| .bbc_code { |
| .bbc_code { |
| border-top: 3px solid #aaa; |
| border-top: 3px solid #aaa; |
| border-bottom: 3px solid #aaa; |
| border-bottom: 3px solid #aaa; |
| background: #f8f8f8; |
| background: #f8f8f8; |
| } |
| } |
| /* Styling for BBC tags */ |
| /* Styling for BBC tags */ |
| .bbc_link:link, .bbc_link:visited { |
| .bbc_link:link, .bbc_link:visited { |
| color: #377828; |
| color: #377828; |
| box-shadow: 0 -1px 0 #cedccb inset; |
| box-shadow: 0 -1px 0 #cedccb inset; |
| } |
| } |
| .bbc_link:hover { |
| .bbc_link:hover { |
| color: #377828; |
| color: #377828; |
| box-shadow: 0 -1px 0 #66aa55 inset; |
| box-shadow: 0 -1px 0 #66aa55 inset; |
| text-decoration: none; |
| text-decoration: none; |
| } |
| } |
| /* /me uses this a lot. (emote, try typing /me in a post.) */ |
| /* /me uses this a lot. (emote, try typing /me in a post.) */ |
| .meaction { |
| .meaction { |
| color: #50aa3a; |
| color: #50aa3a; |
| } |
| } |
| .meaction:before { |
| .meaction:before { |
| content: "\270c"; |
| content: "\270c"; |
| font-size: 1.714em; |
| font-size: 1.714em; |
| line-height: 1em; |
| line-height: 1em; |
| } |
| } |
| .spoilerheader { |
| .spoilerheader { |
| font-weight: bold; |
| font-weight: bold; |
| cursor: pointer; |
| cursor: pointer; |
| font-size: 0.857em; |
| font-size: 0.857em; |
| } |
| } |
| .spoiler { |
| .spoiler { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| padding: 0.3em; |
| padding: 0.3em; |
| background-color: #eee; |
| background-color: #eee; |
| } |
| } |
| div.bbc_footnotes { |
| div.bbc_footnotes { |
| border-top: 1px solid #bfbfbf; |
| border-top: 1px solid #bfbfbf; |
| } |
| } |
| .bbc_footnotes .target:target { |
| .bbc_footnotes .target:target { |
| background-color: #d8ffdf; |
| background-color: #d8ffdf; |
| } |
| } |
| sup.bbc_footnotes, sup.bbc_footnotes a { |
| sup.bbc_footnotes, sup.bbc_footnotes a { |
| color: #50aa3a; |
| color: #50aa3a; |
| font-weight: 700; |
| font-weight: 700; |
| } |
| } |
| div.bbc_footnotes .meaction{ |
| div.bbc_footnotes .meaction{ |
| display: inline-block; |
| display: inline-block; |
| } |
| } |
| |
| |
| |
| |
| /* $AJAX */ |
| /* $AJAX */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* The "Loading" bar for quick edit, etc. */ |
| /* The "Loading" bar for quick edit, etc. */ |
| #ajax_in_progress { |
| #ajax_in_progress { |
| border-bottom: 4px solid #3d6e32; |
| border-bottom: 4px solid #3d6e32; |
| background: #fff; |
| background: #fff; |
| color: #306430; |
| color: #306430; |
| } |
| } |
| #ajax_in_progress a { |
| #ajax_in_progress a { |
| text-decoration: underline; |
| text-decoration: underline; |
| } |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| /* $MAIN. */ |
| /* $MAIN. */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* The top bar. */ |
| /* The top bar. */ |
| #top_section { |
| #top_section { |
| background: #f4f4f4; |
| background: #f4f4f4; |
| background-image: linear-gradient(to bottom, #fff, #eee); |
| background-image: linear-gradient(to bottom, #fff, #eee); |
| box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 1px 0 #3a642d inset; |
| box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 1px 0 #3a642d inset; |
| border-top: 4px solid #5ba048; |
| border-top: 4px solid #5ba048; |
| border-bottom: 4px solid #3d6e32; |
| border-bottom: 4px solid #3d6e32; |
| } |
| } |
| /* Maintenance mode warning. */ |
| /* Maintenance mode warning. */ |
| .notice { |
| .notice { |
| font-weight: 700; |
| font-weight: 700; |
| color: #a80000; |
| color: #a80000; |
| } |
| } |
| #search_form .input_text { |
| #search_form .input_text { |
| border-radius: 2px 0 0 2px; |
| border-radius: 2px 0 0 2px; |
| border-right: none; |
| border-right: none; |
| } |
| } |
| #search_form .button_submit { |
| #search_form .button_submit { |
| border-radius: 0 2px 2px 0; |
| border-radius: 0 2px 2px 0; |
| font-variant: small-caps; |
| font-variant: small-caps; |
| color: #333; |
| color: #333; |
| } |
| } |
| #search_form select { |
| #search_form select { |
| border: 1px solid #afafaf; |
| border: 1px solid #afafaf; |
| border-right: none; |
| border-right: none; |
| opacity: 0.8; |
| opacity: 0.8; |
| } |
| } |
| #search_form select:focus { |
| #search_form select:focus { |
| border: 1px solid #999; |
| border: 1px solid #999; |
| border-right: none; |
| border-right: none; |
| opacity: 1; |
| opacity: 1; |
| } |
| } |
| .forumtitle>a { |
| .forumtitle>a { |
| color: #377828; |
| color: #377828; |
| text-shadow: 1px 1px 0 #fff; |
| text-shadow: 1px 1px 0 #fff; |
| } |
| } |
| /* News section. */ |
| /* News section. */ |
| #news { |
| #news { |
| font-size: 0.929em; |
| font-size: 0.929em; |
| } |
| } |
| #news>h2 { |
| #news>h2 { |
| float: left; |
| float: left; |
| color: #4b863c; |
| color: #4b863c; |
| font-size: 1.286em; |
| font-size: 1.286em; |
| line-height: 1.286em; |
| line-height: 1.286em; |
| font-weight: 700; |
| font-weight: 700; |
| font-variant: small-caps; |
| font-variant: small-caps; |
| margin: 7px -4em 0 12px; |
| margin: -2px 1em 0 0; |
| |
| height: 1em; |
| } |
| } |
| #news>h2:after { |
| #news>h2:after { |
| content: "\2026"; |
| content: "\2026"; |
| } |
| } |
| #news_line, #elkFadeScroller { |
| #news_line, #news { |
| padding: 6px 12px; |
| padding: 6px 12px; |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| background: #fff; |
| background: #fff; |
| box-shadow: 1px 2px 3px #eee; |
| box-shadow: 1px 2px 3px #eee; |
| /* Longhand style due to JS bug in IE! */ |
| /* Longhand style due to JS bug in IE! */ |
| color: #666666; |
| color: #666666; |
| height: 60px; |
| height: 60px; |
| min-height: 60px; |
| min-height: 60px; |
| overflow: auto; |
| overflow: auto; |
| resize: vertical; |
| resize: vertical; |
| text-indent: 5em; |
| |
| } |
| } |
| /* Main forum area. */ |
| /* Main forum area. */ |
| /* Box-shadow only on this one. */ |
| /* Box-shadow only on this one. */ |
| #wrapper { |
| #wrapper { |
| border: 3px solid #4b863c; |
| border: 3px solid #4b863c; |
| margin-top: 16px; |
| margin-top: 16px; |
| border-radius: 5px; |
| border-radius: 5px; |
| background: #fafafa; |
| background: #fafafa; |
| box-shadow: 0 2px 4px #111; |
| box-shadow: 0 2px 4px #111; |
| padding-top: 12px; |
| padding-top: 12px; |
| border-top: 3px solid #5ba048; |
| border-top: 3px solid #5ba048; |
| border-bottom: 3px solid #437837; |
| border-bottom: 3px solid #437837; |
| } |
| } |
| /* The footer with copyright links etc. */ |
| /* The footer with copyright links etc. */ |
| #footer_section { |
| #footer_section { |
| color: #bbb; |
| color: #bbb; |
| background: #222; |
| background: #222; |
| border-top: 6px solid #3d6e32; |
| border-top: 6px solid #3d6e32; |
| box-shadow: 0 -1px 0 #777, 0 1px 0 #0e0e0e inset; |
| box-shadow: 0 -1px 0 #777, 0 1px 0 #0e0e0e inset; |
| } |
| } |
| #footer_section p, #footer_section a { |
| #footer_section p, #footer_section a { |
| color: #bbb; |
| color: #bbb; |
| } |
| } |
| #footer_section .rssfeeds { |
| #footer_section .rssfeeds { |
| color: orange; |
| color: orange; |
| background-color: white; |
| background-color: white; |
| border-radius: 0.3em; |
| border-radius: 0.3em; |
| text-shadow: 1px 1px 0px #000; |
| text-shadow: 1px 1px 0 #000; |
| } |
| } |
| |
| |
| #debug_logging a, #debug_logging strong { |
| #debug_logging a, #debug_logging strong { |
| color: yellow; |
| color: yellow; |
| } |
| } |
| #debug_logging { |
| #debug_logging { |
| color: #bbb; |
| color: #bbb; |
| background: #222; |
| background: #222; |
| margin: 0 auto; |
| margin: 0 auto; |
| max-width: 90em; |
| max-width: 90em; |
| width: 90%; |
| width: 90%; |
| } |
| } |
| #debug_logging_wrapper { |
| #debug_logging_wrapper { |
| background: #222; |
| background: #222; |
| } |
| } |
| |
| |
| |
| |
| /* $MENUS */ |
| /* $MENUS */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* Level 1 Menu bar: link or button. General styling. */ |
| /* Level 1 Menu bar: link or button. General styling. */ |
| .linklevel1, .linklevel1:link, .linklevel1:visited { |
| .linklevel1, .linklevel1:link, .linklevel1:visited { |
| border-radius: 2px; |
| border-radius: 2px; |
| border: 1px solid #afafaf; |
| border: 1px solid #afafaf; |
| border-top: 1px solid #cfcfcf; |
| border-top: 1px solid #cfcfcf; |
| border-left: 1px solid #bfbfbf; |
| border-left: 1px solid #bfbfbf; |
| background: #f4f4f4; |
| background: #f4f4f4; |
| background-image: linear-gradient(to bottom, #fff, #e4e4e4); |
| background-image: linear-gradient(to bottom, #fff, #e4e4e4); |
| box-shadow: 1px 1px 2px #e5e5e5; |
| box-shadow: 1px 1px 2px #e5e5e5; |
| color: #566e4b; |
| color: #566e4b; |
| } |
| } |
| |
| |
| /* Level 1 button hover and focus effects. */ |
| /* Level 1 button hover and focus effects. */ |
| .linklevel1:hover, .listlevel1:hover .linklevel1, |
| .linklevel1:hover, .listlevel1:hover .linklevel1, |
| .linklevel2:hover, .listlevel2:hover .linklevel2, |
| .linklevel2:hover, .listlevel2:hover .linklevel2, |
| .linklevel3:hover, .listlevel3:hover .linklevel3, |
| .linklevel3:hover, .listlevel3:hover .linklevel3, |
| #menu_sidebar .linklevel1:hover, #menu_sidebar .listlevel1:hover .linklevel1, |
| #menu_sidebar .linklevel1:hover, #menu_sidebar .listlevel1:hover .linklevel1, |
| #menu_current_area>strong>.linklevel1 { |
| #menu_current_area>strong>.linklevel1 { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-top: 1px solid #afafaf; |
| border-top: 1px solid #afafaf; |
| border-left: 1px solid #afafaf; |
| border-left: 1px solid #afafaf; |
| background: #f0f0f0; |
| background: #f0f0f0; |
| box-shadow: 2px 1px 1px rgba(0,0,0,0.07) inset; |
| box-shadow: 2px 1px 1px rgba(0,0,0,0.07) inset; |
| color: #555; |
| color: #555; |
| text-decoration: none; |
| text-decoration: none; |
| } |
| } |
| .poster li.listlevel1:hover { |
| .poster li.listlevel1:hover { |
| background: transparent; |
| background: transparent; |
| border: none; |
| border: none; |
| box-shadow: none; |
| box-shadow: none; |
| } |
| } |
| .poster li.poster_online:hover .linklevel1 { |
| .poster li.poster_online:hover .linklevel1 { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-top: 1px solid #afafaf; |
| border-top: 1px solid #afafaf; |
| border-left: 1px solid #afafaf; |
| border-left: 1px solid #afafaf; |
| background: #f0f0f0; |
| background: #f0f0f0; |
| box-shadow: 2px 1px 1px rgba(0,0,0,0.07) inset; |
| box-shadow: 2px 1px 1px rgba(0,0,0,0.07) inset; |
| color: #555; |
| color: #555; |
| } |
| } |
| .poster li.poster_online .nolink { |
| .poster li.poster_online .nolink { |
| border: 1px solid #afafaf; |
| border: 1px solid #afafaf; |
| border-top: 1px solid #cfcfcf; |
| border-top: 1px solid #cfcfcf; |
| border-left: 1px solid #bfbfbf; |
| border-left: 1px solid #bfbfbf; |
| background: #f4f4f4; |
| background: #f4f4f4; |
| background-image: linear-gradient(to bottom, #fff, #e4e4e4); |
| background-image: linear-gradient(to bottom, #fff, #e4e4e4); |
| box-shadow: 1px 1px 2px #e5e5e5; |
| box-shadow: 1px 1px 2px #e5e5e5; |
| color: #566e4b; |
| color: #566e4b; |
| display: block; |
| display: block; |
| line-height: 2em; |
| line-height: 2em; |
| margin: 3px 1.5em; |
| margin: 3px 1.5em; |
| position: relative; |
| position: relative; |
| } |
| } |
| .poster li.poster_online .nolink img { |
| .poster li.poster_online .nolink img { |
| vertical-align: middle; |
| vertical-align: middle; |
| } |
| } |
| .poster li.subsections.listlevel1:hover .linklevel1 { |
| .poster li.subsections.listlevel1:hover .linklevel1 { |
| background: transparent; |
| background: transparent; |
| border: none; |
| border: none; |
| box-shadow: none; |
| box-shadow: none; |
| } |
| } |
| /* Level 1 active buttons. */ |
| /* Level 1 active buttons. */ |
| .linklevel1.active, .listlevel1:hover .active, |
| .linklevel1.active, .listlevel1:hover .active, |
| #collapse_button .linklevel1, .pm_indicator, .likes_indicator { |
| #collapse_button .linklevel1, .pm_indicator, .likes_indicator { |
| border: 1px solid #38642e; |
| border: 1px solid #38642e; |
| border-left: 1px solid #38642d; |
| border-left: 1px solid #38642d; |
| border-top: 1px solid #4b863c; |
| border-top: 1px solid #4b863c; |
| background: #4b863c; |
| background: #4b863c; |
| background-image: linear-gradient(to bottom, #5ba048, #3d6e32); |
| background-image: linear-gradient(to bottom, #5ba048, #3d6e32); |
| color: #fff; |
| color: #fff; |
| font-weight: bold; |
| font-weight: bold; |
| box-shadow: 1px 1px 2px #bbb; |
| box-shadow: 1px 1px 2px #bbb; |
| } |
| } |
| /* Hover effects for those buttons. */ |
| /* Hover effects for those buttons. */ |
| .linklevel1.active:hover,.listlevel1:hover .linklevel1.active, |
| .linklevel1.active:hover,.listlevel1:hover .linklevel1.active, |
| #collapse_button .linklevel1:hover, .linklevel1:hover .pm_indicator { |
| #collapse_button .linklevel1:hover, .linklevel1:hover .pm_indicator { |
| border: 1px solid #5aa049; |
| border: 1px solid #5aa049; |
| border-top: 1px solid #2d5024; |
| border-top: 1px solid #2d5024; |
| border-left: 1px solid #2d5024; |
| border-left: 1px solid #2d5024; |
| background: #437837; |
| background: #437837; |
| box-shadow: 1px 1px 1px rgba(0,0,0,0.3) inset; |
| box-shadow: 1px 1px 1px rgba(0,0,0,0.3) inset; |
| } |
| } |
| .linklevel1:hover .pm_indicator { |
| .linklevel1:hover .pm_indicator { |
| box-shadow: 0 -1px 0 #3d6e32 inset; |
| box-shadow: 0 -1px 0 #3d6e32 inset; |
| } |
| } |
| .linklevel1.active:hover .pm_indicator { |
| .linklevel1.active:hover .pm_indicator { |
| border-bottom: 1px solid #2d5024; |
| border-bottom: 1px solid #2d5024; |
| } |
| } |
| /* Top level subsection indicators. */ |
| /* Top level subsection indicators. */ |
| /* Comment these out if you don't want them. */ |
| /* Comment these out if you don't want them. */ |
| .subsections:hover .linklevel1:after { |
| .subsections:hover .linklevel1:after { |
| position: absolute; |
| position: absolute; |
| right: 0.4em; |
| right: 0.4em; |
| content: " \25bc"; |
| content: " \25bc"; |
| } |
| } |
| #main_menu .subsections:hover .linklevel1:after { |
| #main_menu .subsections:hover .linklevel1:after { |
| top: 88%; |
| top: 88%; |
| font-size: 1.429em; |
| font-size: 1.429em; |
| color: #eee; |
| color: #eee; |
| text-shadow: 0 4px 0 #3d6e32; |
| text-shadow: 0 4px 0 #3d6e32; |
| } |
| } |
| .admin_menu .subsections:hover .linklevel1:after { |
| .admin_menu .subsections:hover .linklevel1:after { |
| top: 72%; |
| top: 72%; |
| color: #3d6e32; |
| color: #3d6e32; |
| font-size: 1.214em; |
| font-size: 1.214em; |
| } |
| } |
| /* Corrections for other menus. */ |
| /* Corrections for other menus. */ |
| .quickbuttons .subsections:hover .linklevel1:after { |
| .quickbuttons .subsections:hover .linklevel1:after { |
| top: 1.9em; |
| top: 1.9em; |
| font-size: 1em; |
| font-size: 1em; |
| } |
| } |
| .subsections:hover .name.linklevel1:after { |
| .subsections:hover .name.linklevel1:after { |
| top: 1.6em; |
| top: 1.6em; |
| font-size: 1em; |
| font-size: 1em; |
| color: #5ba048; |
| color: #5ba048; |
| } |
| } |
| .poster2 .subsections:hover .name.linklevel1:after { |
| .poster2 .subsections:hover .name.linklevel1:after { |
| top: 1em; |
| top: 1em; |
| } |
| } |
| /* Do one override here for .poster. Still saves code all round. */ |
| /* Do one override here for .poster. Still saves code all round. */ |
| .poster_avatar .linklevel1, .poster_avatar:hover .linklevel1, |
| .poster_avatar .linklevel1, .poster_avatar:hover .linklevel1, |
| .poster_avatar .linklevel1:focus, |
| .poster_avatar .linklevel1:focus, |
| .name.linklevel1, .name.linklevel1:hover, .name.linklevel1:focus { |
| .name.linklevel1, .name.linklevel1:hover, .name.linklevel1:focus { |
| background: none; |
| background: none; |
| border: none; |
| border: none; |
| box-shadow: none; |
| box-shadow: none; |
| color: #4b863c; |
| color: #4b863c; |
| } |
| } |
| .name.linklevel1:hover { |
| .name.linklevel1:hover { |
| text-decoration: underline; |
| text-decoration: underline; |
| } |
| } |
| /* Levels 2 and 3: drop menu wrapper. */ |
| /* Levels 2 and 3: drop menu wrapper. */ |
| .menulevel2, .menulevel3 { |
| .menulevel2, .menulevel3 { |
| border: 1px solid #afafaf; |
| border: 1px solid #afafaf; |
| border-top: 1px solid #cfcfcf; |
| border-top: 1px solid #cfcfcf; |
| border-left: 1px solid #bfbfbf; |
| border-left: 1px solid #bfbfbf; |
| border-radius: 2px; |
| border-radius: 2px; |
| background: #fff; |
| background: #fff; |
| box-shadow: 3px 3px 3px rgba(0,0,0,0.2); |
| box-shadow: 3px 3px 3px rgba(0,0,0,0.2); |
| } |
| } |
| /* Tricky PM indicator. Define it carefully, |
| /* Tricky PM indicator. Define it carefully, |
| /* just in case someone tries to use this class elsewhere. */ |
| /* just in case someone tries to use this class elsewhere. */ |
| .pm_indicator, .likes_indicator { |
| .pm_indicator, .likes_indicator { |
| position: absolute; |
| position: absolute; |
| top: -1.45em; |
| top: -1.45em; |
| right: -0.4em; |
| right: -0.4em; |
| float: left; |
| float: left; |
| padding: 0 0.7em; |
| padding: 0 0.7em; |
| border-radius: 8px 8px 8px 0; |
| border-radius: 8px 8px 8px 0; |
| box-shadow: 2px 2px 3px rgba(0,0,0,0.25), 0 -1px 0 #3d6e32 inset; |
| box-shadow: 2px 2px 3px rgba(0,0,0,0.25), 0 -1px 0 #3d6e32 inset; |
| font-weight: 700; |
| font-weight: 700; |
| line-height: 1.7em; |
| line-height: 1.7em; |
| font-size: 0.929em; |
| font-size: 0.929em; |
| z-index: 2; |
| z-index: 2; |
| } |
| } |
| .poster .pm_indicator { |
| .poster .pm_indicator { |
| font-size: 1em; |
| font-size: 1em; |
| } |
| } |
| #dropdown_menu_1 .pm_indicator { |
| #dropdown_menu_1 .pm_indicator { |
| margin-top: 5px; |
| margin-top: 5px; |
| margin-right: 2px; |
| margin-right: 2px; |
| } |
| } |
| .likes_indicator { |
| .likes_indicator { |
| font-size: .857em; |
| font-size: .857em; |
| border-radius: 4px 4px 4px 0; |
| |
| box-shadow: 2px 2px 2px rgba(0,0,0,0.25); |
| box-shadow: 2px 2px 2px rgba(0,0,0,0.25); |
| border-radius: 6px 6px 6px 0; |
| border-radius: 6px 6px 6px 0; |
| line-height: 1.5em; |
| line-height: 1.5em; |
| top: -1.2em; |
| top: -1.2em; |
| } |
| } |
| /* Levels 2 and 3 drop menus: link or button. */ |
| /* Levels 2 and 3 drop menus: link or button. */ |
| .linklevel2:link, .linklevel2:visited, .linklevel3:link, .linklevel3:visited { |
| .linklevel2:link, .linklevel2:visited, .linklevel3:link, .linklevel3:visited { |
| border: 1px solid transparent; |
| border: 1px solid transparent; |
| color: #666; |
| color: #666; |
| } |
| } |
| /* Admin menu icons. */ |
| /* Admin menu icons. */ |
| .linklevel2>img { |
| .linklevel2>img { |
| margin: 0 0 0 -4px; |
| margin: 0 0 0 -4px; |
| vertical-align: middle; |
| vertical-align: middle; |
| } |
| } |
| /* Level 2: subsection indicators. */ |
| /* Level 2: subsection indicators. */ |
| .listlevel2.subsections .linklevel2:after, |
| .listlevel2.subsections .linklevel2:after, |
| #menu_sidebar .subsections .linklevel1:after, |
| #menu_sidebar .subsections .linklevel1:after, |
| #menu_sidebar .subsections:hover .linklevel1:after { |
| #menu_sidebar .subsections:hover .linklevel1:after { |
| position: absolute; |
| position: absolute; |
| top: 0; |
| top: 0; |
| right: 6px; |
| right: 6px; |
| color: #777; |
| color: #777; |
| content: "\2192"; |
| content: "\2192"; |
| font-size: 1.286em; |
| font-size: 1.286em; |
| } |
| } |
| /* Level 2: dividers between admin/moderation, and pm/profile links. */ |
| /* Level 2: dividers between admin/moderation, and pm/profile links. */ |
| #button_admin .listlevel2.subsections, #button_pm .listlevel2.subsections { |
| #button_admin .listlevel2.subsections, #button_pm .listlevel2.subsections { |
| margin-top: 7px; |
| margin-top: 7px; |
| padding-top: 4px; |
| padding-top: 4px; |
| border-top: 1px solid #ddd; |
| border-top: 1px solid #ddd; |
| box-shadow: 0 -1px 0 #bbb; |
| box-shadow: 0 -1px 0 #bbb; |
| } |
| } |
| /* Levels 2 and 3: highlighting of current section */ |
| /* Levels 2 and 3: highlighting of current section */ |
| /* @todo - Should probably be applied to main menu as well, for consistency. */ |
| /* @todo - Should probably be applied to main menu as well, for consistency. */ |
| .linklevel2.chosen, .linklevel3.chosen, |
| .linklevel2.chosen, .linklevel3.chosen, |
| #menu_current_area .linklevel1 { |
| #menu_current_area .linklevel1 { |
| font-weight: 700; |
| font-weight: 700; |
| } |
| } |
| |
| |
| /* Styles for sidebar menus. |
| /* Styles for sidebar menus. |
| ------------------------------------------------------- */ |
| ------------------------------------------------------- */ |
| /* Cancel default backgrounds for sidebar. */ |
| /* Cancel default backgrounds for sidebar. */ |
| #menu_sidebar .linklevel1 { |
| #menu_sidebar .linklevel1 { |
| border: 1px solid transparent; |
| border: 1px solid transparent; |
| background: none; |
| background: none; |
| box-shadow: none; |
| box-shadow: none; |
| color: #555; |
| color: #555; |
| } |
| } |
| /*End sidebar flyout coding. */ |
| /*End sidebar flyout coding. */ |
| |
| |
| |
| |
| /* $BOARDICONS */ |
| /* $BOARDICONS */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| .board_icon { |
| .board_icon { |
| display: block; |
| display: block; |
| float: left; |
| float: left; |
| width: 48px; |
| width: 48px; |
| height: 48px; |
| height: 48px; |
| } |
| } |
| .board_key:before { |
| .board_key:before { |
| display: block; |
| display: block; |
| float: left; |
| float: left; |
| height: 24px; |
| height: 24px; |
| width: 26px; |
| width: 26px; |
| content: ""; |
| content: ""; |
| } |
| } |
| .category_boards .board_icon, .board_key:before { |
| .category_boards .board_icon, .board_key:before { |
| background-repeat: no-repeat; |
| background-repeat: no-repeat; |
| background-image: url(../../images/_light/board_icons.png); |
| background-image: url(../../images/_light/board_icons.png); |
| } |
| } |
| .on_board { |
| .on_board { |
| background-position: 0 0; |
| background-position: 0 0; |
| } |
| } |
| .on2_board { |
| .on2_board { |
| background-position: -72px 0; |
| background-position: -72px 0; |
| } |
| } |
| .off_board { |
| .off_board { |
| background-position: -144px 0; |
| background-position: -144px 0; |
| } |
| } |
| .redirect_board { |
| .redirect_board { |
| background-position: -216px 0; |
| background-position: -216px 0; |
| } |
| } |
| .new_some_board:before { |
| .new_some_board:before { |
| background-position: -300px -14px; |
| background-position: -300px -14px; |
| } |
| } |
| .new_none_board:before { |
| .new_none_board:before { |
| background-position: -372px -14px; |
| background-position: -372px -14px; |
| } |
| } |
| .new_redirect_board:before { |
| .new_redirect_board:before { |
| background-position: -444px -14px; |
| background-position: -444px -14px; |
| } |
| } |
| |
| |
| |
| |
| /* $LINKTREE */ |
| /* $LINKTREE */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* The navigation list (i.e. linktree) */ |
| /* The navigation list (i.e. linktree) */ |
| /* Wrapper/background. */ |
| /* Wrapper/background. */ |
| .navigate_section { |
| .navigate_section { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-radius: 2px; |
| border-radius: 2px; |
| background: #fcfcfc; |
| background: #fcfcfc; |
| box-shadow: 1px 2px 3px #eee; |
| box-shadow: 1px 2px 3px #eee; |
| } |
| } |
| /* Color for linktree items. */ |
| /* Color for linktree items. */ |
| .linktree a { |
| .linktree a { |
| color: #555; |
| color: #555; |
| } |
| } |
| .linktree { |
| .linktree { |
| border-bottom: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| box-shadow: 0 -2px 0 -1px #ccc, 3px -2px 0 -1px #ccc, 3px 1px 0 -1px #ccc; |
| box-shadow: 0 -2px 0 -1px #ccc, 3px -2px 0 -1px #ccc, 3px 1px 0 -1px #ccc; |
| } |
| } |
| .linktree:hover a, .linktree>a:hover, |
| .linktree:hover a, .linktree>a:hover, |
| .linktree:last-child, .linktree:last-child>a, |
| .linktree:last-child, .linktree:last-child>a, |
| .linktree:last-child>a:hover, .linktree:last-child strong { |
| .linktree:last-child>a:hover, .linktree:last-child strong { |
| color: #fff; |
| color: #fff; |
| text-decoration: none; |
| text-decoration: none; |
| } |
| } |
| .linktree:after { |
| .linktree:after { |
| box-shadow: 2px -2px 0 1px rgba(200, 204, 204, 0.9); |
| box-shadow: 2px -2px 0 1px rgba(200, 204, 204, 0.9); |
| background: #fcfcfc; |
| background: #fcfcfc; |
| } |
| } |
| .linktree:hover, .linktree:last-child { |
| .linktree:hover, .linktree:last-child { |
| background: #5ba048; |
| background: #5ba048; |
| background-image: linear-gradient(0deg, #4b863c, #5ba048); |
| background-image: linear-gradient(0deg, #4b863c, #5ba048); |
| } |
| } |
| .linktree:hover:after, .linktree:last-child:after { |
| .linktree:hover:after, .linktree:last-child:after { |
| background: #5ba048; |
| background: #5ba048; |
| background-image: linear-gradient(-45deg, #4b863c, #5ba048); |
| background-image: linear-gradient(-45deg, #4b863c, #5ba048); |
| } |
| } |
| .linktree:last-child:hover, .linktree:last-child:hover:after { |
| .linktree:last-child:hover, .linktree:last-child:hover:after { |
| background: #4b863c; |
| background: #4b863c; |
| } |
| } |
| |
| |
| /* $BUTTONS */ |
| /* $BUTTONS */ |
| /* This section contains code for the quickbuttons (quote, quick edit, etc) |
| /* This section contains code for the quickbuttons (quote, quick edit, etc) |
| /* and for the buttonlist class (reply, add poll, notify, etc). |
| /* and for the buttonlist class (reply, add poll, notify, etc). |
| /* These classes share some styling. |
| /* These classes share some styling. |
| /* Declarations are amalgamated where styling is shared. |
| /* Declarations are amalgamated where styling is shared. |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* Styles for the standard button lists. |
| /* Styles for the standard button lists. |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* @todo - Save code by amalgamating common button background declarations. */ |
| /* @todo - Save code by amalgamating common button background declarations. */ |
| .buttonlist li a { |
| .buttonlist li a.linklevel1 { |
| text-transform: uppercase; |
| text-transform: uppercase; |
| |
| box-shadow: 1px 1px 2px #e5e5e5, 0 -1px 0 #e4e4e4 inset; |
| } |
| } |
| /* The active one */ |
| /* The active one */ |
| .buttonlist li a.active { |
| .buttonlist li a.active { |
| box-shadow: 1px 1px 2px #ccc; |
| box-shadow: 1px 1px 2px #ccc; |
| |
| box-shadow: 1px 1px 2px #e5e5e5, 0 -1px 0 #3d6e32 inset; |
| } |
| } |
| |
| |
| /* The quick buttons. */ |
| /* The quick buttons. */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| .quickbuttons .modified { |
| .quickbuttons .modified { |
| color: #777; |
| color: #777; |
| } |
| } |
| /* Cancel generic border-radius. */ |
| /* Cancel generic border-radius. */ |
| .quickbuttons .linklevel1 { |
| .quickbuttons .linklevel1 { |
| color: #555; |
| color: #555; |
| border-radius: 0; |
| border-radius: 0; |
| } |
| } |
| /* Radius left end of the first (Quote) button. */ |
| /* Radius left end of the first (Quote) button. */ |
| .linklevel1.quote_button { |
| .linklevel1.quote_button { |
| border-radius: 2px 0 0 2px; |
| border-radius: 2px 0 0 2px; |
| } |
| } |
| /* Radius right end of the last button. */ |
| /* Radius right end of the last button. */ |
| .linklevel1.post_options, .linklevel1.remove_button { |
| .linklevel1.post_options, .linklevel1.remove_button { |
| border-radius: 0 2px 2px 0; |
| border-radius: 0 2px 2px 0; |
| } |
| } |
| /* Single buttons get all corners rounded. */ |
| /* Single buttons get all corners rounded. */ |
| .follow_ups .linklevel1, #topic_summary .linklevel1 { |
| .follow_ups .linklevel1, #topic_summary .linklevel1 { |
| border-radius: 2px; |
| border-radius: 2px; |
| } |
| } |
| |
| |
| |
| |
| /* $PAGELINKS */ |
| /* $PAGELINKS */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| .selectbox, .pagelinks { |
| .selectbox, .pagelinks { |
| color: #555; |
| color: #555; |
| } |
| } |
| .pagelinks .navPages { |
| .pagelinks .navPages { |
| border: 1px solid #afafaf; |
| border: 1px solid #afafaf; |
| border-top: 1px solid #bbb; |
| border-top: 1px solid #bbb; |
| background-image: linear-gradient(to bottom, #fcfcfc 0%, #e5e5e5 100%); |
| background-image: linear-gradient(to bottom, #fcfcfc 0%, #e5e5e5 100%); |
| color: #555; |
| color: #555; |
| } |
| } |
| .pagelinks .navPages:hover, .pagelinks .current_page { |
| .pagelinks .navPages:hover, .pagelinks .current_page { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-top: 1px solid #afafaf; |
| border-top: 1px solid #afafaf; |
| border-left: 1px solid #afafaf; |
| border-left: 1px solid #afafaf; |
| background: #f0f0f0; |
| background: #f0f0f0; |
| box-shadow: 2px 1px 1px rgba(0,0,0,0.07) inset; |
| box-shadow: 2px 1px 1px rgba(0,0,0,0.07) inset; |
| /* @todo - Simplify. */ |
| /* @todo - Simplify. */ |
| color: #555; |
| color: #555; |
| text-decoration: none; |
| text-decoration: none; |
| } |
| } |
| .pagelinks :first-child { |
| .pagelinks :first-child { |
| border-radius: 2px 0 0 2px; |
| border-radius: 2px 0 0 2px; |
| } |
| } |
| .pagelinks :last-child { |
| .pagelinks :last-child { |
| border-radius: 0 2px 2px 0; |
| border-radius: 0 2px 2px 0; |
| } |
| } |
| /* our buddies « » */ |
| /* our buddies « » */ |
| .small_pagelinks:before { |
| .small_pagelinks:before { |
| content: '\00AB'; |
| content: '\00AB'; |
| float: left; |
| float: left; |
| font-size: 1.286em; |
| font-size: 1.286em; |
| } |
| } |
| .small_pagelinks:after { |
| .small_pagelinks:after { |
| content: '\00BB'; |
| content: '\00BB'; |
| float: left; |
| float: left; |
| font-size: 1.286em; |
| font-size: 1.286em; |
| } |
| } |
| |
| |
| /* Globally accessible top/bottom links. */ |
| /* Globally accessible top/bottom links. */ |
| #gotop, #gobottom { |
| #gotop, #gobottom { |
| border: 1px solid #222; |
| border: 1px solid #222; |
| border-bottom: none; |
| border-bottom: none; |
| border-radius: 0 20px 0 0; |
| border-radius: 0 20px 0 0; |
| background: #eee; |
| background: #eee; |
| color: #eee; |
| color: #eee; |
| opacity: 0.2; |
| opacity: 0.2; |
| } |
| } |
| #gobottom { |
| #gobottom { |
| border-top: none; |
| border-top: none; |
| border-radius: 0 0 20px 0; |
| border-radius: 0 0 20px 0; |
| } |
| } |
| #gotop:hover, #gobottom:hover { |
| #gotop:hover, #gobottom:hover { |
| color: #444; |
| color: #444; |
| text-decoration: none; |
| text-decoration: none; |
| opacity: 1; |
| opacity: 1; |
| } |
| } |
| /* Skip navigation link. */ |
| /* Skip navigation link. */ |
| #top { |
| #top { |
| border: 4px solid #5ba048; |
| border: 4px solid #5ba048; |
| border-radius: 0 0 6px 6px; |
| border-radius: 0 0 6px 6px; |
| background: #fff; |
| background: #fff; |
| } |
| } |
| |
| |
| |
| |
| /* $TABLES */ |
| /* $TABLES */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| |
| |
| /* @todo */ |
| /* @todo */ |
| /* A general table class. */ |
| /* A general table class. */ |
| .table_grid { |
| .table_grid { |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| border-top: none; |
| border-top: none; |
| } |
| } |
| .table_head>th { |
| .table_head>th { |
| border-top: 2px solid #ddd; |
| border-top: 2px solid #ddd; |
| border-bottom: 2px solid #ddd; |
| border-bottom: 2px solid #ddd; |
| background: #fff; |
| background: #fff; |
| color: #555; |
| color: #555; |
| } |
| } |
| /* Basic cells. */ |
| /* Basic cells. */ |
| .table_grid td, .letterspacing { |
| .table_grid td, .letterspacing { |
| border-bottom: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| } |
| } |
| |
| /* Subtle zebra striping for rows. */ |
| .table_grid .standard_row:nth-child(even) { |
| .table_grid .standard_row:nth-child(even) { |
| background: #fafafa; |
| background: #fafafa; |
| } |
| } |
| |
| .table_grid .standard_row { |
| |
| background: #fff; |
| |
| } |
| /* Legacy highlight color, for selected membergroups etc. */ |
| /* Legacy highlight color, for selected membergroups etc. */ |
| /* Used by JS to show a selected item. Still used in manage languages */ |
| /* Used by JS to show a selected item. Still used in manage languages */ |
| .table_grid .standard_row.highlight2 { |
| .table_grid .standard_row.highlight2 { |
| background: #d1e1ef; |
| background: #d1e1ef; |
| color: #555; |
| color: #555; |
| } |
| } |
| |
| |
| /* For Errors.template.php. */ |
| /* For Errors.template.php. */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| #errorfile_table .current { |
| #errorfile_table .current { |
| border: 1px solid #444; |
| border: 1px solid #444; |
| background: #fff5cd; |
| background: #fff5cd; |
| } |
| } |
| |
| |
| /* $BOARDS */ |
| /* $BOARDS */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* Set up some general framing classes. @todo */ |
| /* Set up some general framing classes. @todo */ |
| /* .forum_category for board index/sub-boards. */ |
| /* .forum_category for board index/sub-boards. */ |
| /* .forumposts for thread pages and recent posts, etc. */ |
| /* .forumposts for thread pages and recent posts, etc. */ |
| /* .content_category for general divisions around the place. */ |
| /* .content_category for general divisions around the place. */ |
| /* All styled the same in default variant, but available for fun and games. */ |
| /* All styled the same in default variant, but available for fun and games. */ |
| |
| |
| /* The board categories and newsfader - some shared styling. */ |
| /* The board categories and newsfader - some shared styling. */ |
| .forum_category, .forumposts, .content_category { |
| .forum_category, .forumposts, .content_category { |
| border-radius: 5px 5px 0 0; |
| border-radius: 5px 5px 0 0; |
| background: #deedda; |
| background: #deedda; |
| box-shadow: 1px 2px 3px #eee; |
| box-shadow: 1px 2px 3px #eee; |
| } |
| } |
| /* @todo - Clean this up, once new classes are assigned to old windowbg stuffz. */ |
| /* @todo - Clean this up, once new classes are assigned to old windowbg stuffz. */ |
| .board_row, .childboard_row, .forumposts>div, .forumposts>li, |
| .board_row, .childboard_row, .forumposts>div, .forumposts>li, |
| .content_category>div, .content_category>li { |
| .content_category>div, .content_category>li { |
| border: 1px solid #cfcfcf; |
| border: 1px solid #cfcfcf; |
| background: #fff; |
| background: #fff; |
| } |
| } |
| .forumposts .windowbg, .forumposts .windowbg2 { |
| .forumposts .windowbg, .forumposts .windowbg2 { |
| margin-top: 2px; |
| margin-top: 2px; |
| } |
| } |
| .board_row.parent_board { |
| .board_row.parent_board { |
| border-bottom: none; |
| border-bottom: none; |
| } |
| } |
| .childboard_row { |
| .childboard_row { |
| border-top: none; |
| border-top: none; |
| } |
| } |
| .board_latest { |
| .board_latest { |
| border-left: 1px solid #ccc; |
| border-left: 1px solid #ccc; |
| } |
| } |
| .board_name >a { |
| .board_name >a { |
| color: #377828; |
| color: #377828; |
| } |
| } |
| .board_stats { |
| .board_stats { |
| color: #777; |
| color: #777; |
| } |
| } |
| .lastpost_link>a { |
| .lastpost_link>a { |
| color: #377828; |
| color: #377828; |
| } |
| } |
| .board_latest strong { |
| .board_latest strong { |
| color: #777; |
| color: #777; |
| } |
| } |
| .childboards { |
| .childboards { |
| border-top: 1px solid #ccc; |
| border-top: 1px solid #ccc; |
| } |
| } |
| .childboard_row h4, .board_new_posts { |
| .childboard_row h4, .board_new_posts { |
| font-weight: 700; |
| font-weight: 700; |
| color: #777; |
| color: #777; |
| } |
| } |
| /* Styles for the info center on the board index. */ |
| /* Styles for the info center on the board index. */ |
| .ic_section_header { |
| .ic_section_header { |
| border-bottom: 1px solid #ddd; |
| border-bottom: 1px solid #ddd; |
| } |
| } |
| .ic_section_header>a { |
| .ic_section_header>a { |
| color: #666; |
| color: #666; |
| } |
| } |
| #ic_recentposts td, #ps_recentposts td, #ps_recenttopics td { |
| #ic_recentposts td, #ps_recentposts td, #ps_recenttopics td { |
| border-top: 1px solid #ddd; |
| border-top: 1px solid #ddd; |
| } |
| } |
| .recentpost>strong>a, .inline>strong>a { |
| .recentpost>strong>a, .inline>strong>a { |
| color: #46823c; |
| color: #46823c; |
| } |
| } |
| #expanded_pages_container a { |
| #expanded_pages_container a { |
| background: #fff; |
| background: #fff; |
| } |
| } |
| /* The board description and who-is-viewing stuff. */ |
| /* The board description and who-is-viewing stuff. */ |
| #description_board { |
| #description_board { |
| background: #e4e4e4; |
| background: #e4e4e4; |
| border-radius: 4px 4px 0 0; |
| border-radius: 4px 4px 0 0; |
| box-shadow: 1px 2px 4px #eee; |
| box-shadow: 1px 2px 4px #eee; |
| } |
| } |
| #description_board .generalinfo, #forumposts .generalinfo { |
| #description_board .generalinfo, #forumposts .generalinfo { |
| background: #fff; |
| background: #fff; |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| border-bottom: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| } |
| } |
| .topic_listing { |
| .topic_listing { |
| background: #e4e4e4; |
| background: #e4e4e4; |
| box-shadow: 1px 2px 4px #eee; |
| box-shadow: 1px 2px 4px #eee; |
| } |
| } |
| .topic_listing>li { |
| .topic_listing>li { |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| border-bottom: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| } |
| } |
| .basic_row { |
| .basic_row { |
| background: #fff; |
| background: #fff; |
| } |
| } |
| .topic_sorting_row { |
| .topic_sorting_row { |
| background: transparent; |
| background: transparent; |
| } |
| } |
| #sort_by { |
| #sort_by { |
| border: 2px solid #d1d1d1; |
| border: 2px solid #d1d1d1; |
| border-bottom: none; |
| border-bottom: none; |
| border-radius: 5px 5px 0 0; |
| border-radius: 5px 5px 0 0; |
| } |
| } |
| #sort_by.topic_sorting_recent { |
| #sort_by.topic_sorting_recent { |
| border: 1px solid #d1d1d1; |
| border: 1px solid #d1d1d1; |
| border-bottom: none; |
| border-bottom: none; |
| } |
| } |
| .sort_by_container { |
| .sort_by_container { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-radius: 2px; |
| border-radius: 2px; |
| } |
| } |
| .topic_name h4 a { |
| .topic_name h4 a { |
| color: #4b863c; |
| color: #4b863c; |
| } |
| } |
| .sticky_row .topic_name h4 a, .locked_row.sticky_row .topic_name h4 a { |
| .sticky_row .topic_name h4 a, .locked_row.sticky_row .topic_name h4 a { |
| color: #555; |
| color: #555; |
| } |
| } |
| |
| |
| .locked_row .topic_name h4 a { |
| .locked_row .topic_name h4 a { |
| color: #777; |
| color: #777; |
| } |
| } |
| .sticky_row .topic_name h4 a.new_posts, .locked_row.sticky_row .topic_name h4 a.new_posts, .locked_row .topic_name h4 a.new_posts { |
| .sticky_row .topic_name h4 a.new_posts, .locked_row.sticky_row .topic_name h4 a.new_posts, .locked_row .topic_name h4 a.new_posts { |
| color: #fff; |
| color: #fff; |
| } |
| } |
| .topic_stats { |
| .topic_stats { |
| color: #777; |
| color: #777; |
| } |
| } |
| .qaction_row { |
| .qaction_row { |
| background: #fff; |
| background: #fff; |
| } |
| } |
| .approvetopic_row, .approve_row { |
| .approvetopic_row, .approve_row { |
| background: #fff5cd; |
| background: #fff5cd; |
| } |
| } |
| .sticky_row, .locked_row.sticky_row { |
| .sticky_row, .locked_row.sticky_row { |
| background: #ffffe0; |
| background: #ffffe0; |
| } |
| } |
| .locked_row, .locked_row.core_posts { |
| .locked_row, .locked_row.core_posts { |
| background: #f7f7f7; |
| background: #f7f7f7; |
| } |
| } |
| #topic_icons { |
| #topic_icons { |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| border-radius: 3px; |
| border-radius: 3px; |
| } |
| } |
| .jump_to_header { |
| .jump_to_header { |
| background: #ebebeb; |
| background: #ebebeb; |
| background-image: linear-gradient(to bottom, #fafafa, #eaeaea); |
| background-image: linear-gradient(to bottom, #fafafa, #eaeaea); |
| color: #566450; |
| color: #566450; |
| box-shadow: 2px 1px rgba(1,1,1,0.07) inset; |
| box-shadow: 2px 1px rgba(1,1,1,0.07) inset; |
| } |
| } |
| .jump_to_header:hover { |
| .jump_to_header:hover { |
| background: #f0f0f0; |
| background: #f0f0f0; |
| color: #555; |
| color: #555; |
| } |
| } |
| /* --------------------------------------------------------------------- */ |
| /* --------------------------------------------------------------------- */ |
| /* The following are alternative layout orders for the board index rows. */ |
| /* The following are alternative layout orders for the board index rows. */ |
| /* They are basic demonstrations only. Extra custom styling can be done. |
| /* They are basic demonstrations only. Extra custom styling can be done. |
| /* These demos can be commented and un-commented to see them in action. |
| /* These demos can be commented and un-commented to see them in action. |
| /* Note: similar tricks can be performed with the new message index too. |
| /* Note: similar tricks can be performed with the new message index too. |
| /* --------------------------------------------------------------------- */ |
| /* --------------------------------------------------------------------- */ |
| /* This one simply puts the board stats back in the old SMF location. */ |
| /* This one simply puts the board stats back in the old SMF location. */ |
| /* |
| /* |
| .board_stats { |
| .board_stats { |
| text-align: left; |
| text-align: left; |
| padding: 1px 6px 1px 0; |
| padding: 1px 6px 1px 0; |
| float: left; |
| float: left; |
| } |
| } |
| */ |
| */ |
| /* This one flips the row left to right, and sets the lastpost text to LTR. */ |
| /* This one flips the row left to right, and sets the lastpost text to LTR. */ |
| /* |
| /* |
| .board_row { |
| .board_row { |
| direction: rtl; |
| direction: rtl; |
| } |
| } |
| .board_latest { |
| .board_latest { |
| direction: ltr; |
| direction: ltr; |
| border: none; |
| border: none; |
| } |
| } |
| */ |
| */ |
| /* This one does the LTR flip, and puts the board icon at far right. */ |
| /* This one does the LTR flip, and puts the board icon at far right. */ |
| /* |
| /* |
| .board_row { |
| .board_row { |
| direction: rtl; |
| direction: rtl; |
| } |
| } |
| .icon_anchor { |
| .icon_anchor { |
| float: right; |
| float: right; |
| padding: 2px 0 0 6px; |
| padding: 2px 0 0 6px; |
| } |
| } |
| .board_latest { |
| .board_latest { |
| direction: ltr; |
| direction: ltr; |
| border: none; |
| border: none; |
| } |
| } |
| */ |
| */ |
| /* ------------------------------------------------------ */ |
| /* ------------------------------------------------------ */ |
| /* This is where the fun starts. Absolute positioning. :D */ |
| /* This is where the fun starts. Absolute positioning. :D */ |
| /* ------------------------------------------------------ */ |
| /* ------------------------------------------------------ */ |
| /* This one takes the previous example, and puts the board icon back to far left. */ |
| /* This one takes the previous example, and puts the board icon back to far left. */ |
| /* |
| /* |
| .board_row { |
| .board_row { |
| direction: rtl; |
| direction: rtl; |
| position: relative; |
| position: relative; |
| } |
| } |
| .icon_anchor { |
| .icon_anchor { |
| position: absolute; |
| position: absolute; |
| left: 8px; |
| left: 8px; |
| } |
| } |
| .board_latest { |
| .board_latest { |
| direction: ltr; |
| direction: ltr; |
| border: none; |
| border: none; |
| padding-left: 66px; |
| padding-left: 66px; |
| } |
| } |
| */ |
| */ |
| /* You want more? Ok. This one does the above, but also puts board stats over |
| /* You want more? Ok. This one does the above, but also puts board stats over |
| /* at far right, and sets board name and description back to left aligned. */ |
| /* at far right, and sets board name and description back to left aligned. */ |
| /* |
| /* |
| .board_row { |
| .board_row { |
| direction: rtl; |
| direction: rtl; |
| position: relative; |
| position: relative; |
| } |
| } |
| .board_info { |
| .board_info { |
| direction: ltr; |
| direction: ltr; |
| padding-right: 8.4em; |
| padding-right: 8.4em; |
| } |
| } |
| .icon_anchor { |
| .icon_anchor { |
| position: absolute; |
| position: absolute; |
| left: 8px; |
| left: 8px; |
| } |
| } |
| .board_description, .moderators { |
| .board_description, .moderators { |
| margin: 0; |
| margin: 0; |
| } |
| } |
| .board_latest { |
| .board_latest { |
| direction: ltr; |
| direction: ltr; |
| border: none; |
| border: none; |
| padding-left: 66px; |
| padding-left: 66px; |
| } |
| } |
| .board_stats { |
| .board_stats { |
| position: absolute; |
| position: absolute; |
| right: 8px; |
| right: 8px; |
| } |
| } |
| */ |
| */ |
| /* There are more options, but those should be enough to give the general idea. */ |
| /* There are more options, but those should be enough to give the general idea. */ |
| /* ------------------------------------------------ */ |
| /* ------------------------------------------------ */ |
| /* End alternative layouts. Back to standard stuff. */ |
| /* End alternative layouts. Back to standard stuff. */ |
| /* ------------------------------------------------ */ |
| /* ------------------------------------------------ */ |
| |
| |
| /* $TOPICS */ |
| /* $TOPICS */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| |
| |
| /* The display template (topic view). |
| /* The display template (topic view). |
| /* Poll vote options */ |
| /* Poll vote options */ |
| #poll_options .options { |
| #poll_options .options { |
| border-top: 1px solid #9999aa; |
| border-top: 1px solid #9999aa; |
| } |
| } |
| |
| |
| /* Poll results */ |
| /* Poll results */ |
| #poll_options .options .percentage { |
| #poll_options .options .percentage { |
| background: #fff; |
| background: #fff; |
| } |
| } |
| |
| |
| /* On to the posts */ |
| /* On to the posts */ |
| .forumposts { |
| .forumposts { |
| border-radius: 4px 4px 0 0; |
| border-radius: 4px 4px 0 0; |
| background: #e2e2e2; |
| background: #e2e2e2; |
| box-shadow: 1px 2px 4px #eee; |
| box-shadow: 1px 2px 4px #eee; |
| } |
| } |
| /* Poster and postarea + moderation area underneath */ |
| /* Poster and postarea + moderation area underneath */ |
| .forumposts .windowbg, .forumposts .windowbg2, |
| .forumposts .windowbg, .forumposts .windowbg2, |
| .forumposts .approvebg, .forumposts .approvebg2, .core_posts { |
| .forumposts .approvebg, .forumposts .approvebg2, .core_posts { |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| border-bottom: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| background: #fff; |
| background: #fff; |
| } |
| } |
| |
| |
| /* Colors for background of posts requiring approval */ |
| /* Colors for background of posts requiring approval */ |
| .forumposts .approvebg, .forumposts .approvebg2 { |
| .forumposts .approvebg, .forumposts .approvebg2 { |
| background: #fff5cd; |
| background: #fff5cd; |
| } |
| } |
| |
| |
| /* @todo - Add an h3 for a11y? Breaks Stoopidfish. Bleh. :P */ |
| /* @todo - Add an h3 for a11y? Breaks Stoopidfish. Bleh. :P */ |
| .poster .name { |
| .poster .name { |
| color: #46823c; |
| color: #46823c; |
| } |
| } |
| |
| |
| /* Drop menu for the poster info. */ |
| /* Drop menu for the poster info. */ |
| .poster .listlevel1.sfhover .menulevel2, .poster .listlevel1:hover .menulevel2 { |
| .poster .listlevel1.sfhover .menulevel2, .poster .listlevel1:hover .menulevel2 { |
| background: #fff; |
| background: #fff; |
| } |
| } |
| .report_seperator { |
| .report_seperator { |
| background: #bbb; |
| background: #bbb; |
| border-bottom: 1px solid #eee; |
| border-bottom: 1px solid #eee; |
| |
| max-width: 14em; |
| } |
| } |
| /* @todo - Save code by amalgamating common button background declarations. */ |
| /* @todo - Save code by amalgamating common button background declarations. */ |
| .poster_online .linklevel1 { |
| .poster_online .linklevel1 { |
| border: 1px solid #afafaf; |
| border: 1px solid #afafaf; |
| border-top: 1px solid #cfcfcf; |
| border-top: 1px solid #cfcfcf; |
| border-left: 1px solid #bfbfbf; |
| border-left: 1px solid #bfbfbf; |
| border-radius: 2px; |
| border-radius: 2px; |
| background: #f4f4f4; |
| background: #f4f4f4; |
| background-image: linear-gradient(to bottom, #fcfcfc 0%, #e5e5e5 100%); |
| background-image: linear-gradient(to bottom, #fcfcfc 0%, #e5e5e5 100%); |
| box-shadow: 1px 1px 2px #eee; |
| box-shadow: 1px 1px 2px #eee; |
| } |
| } |
| .poster_online .linklevel1:hover { |
| .poster_online .linklevel1:hover { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-top: 1px solid #aaa; |
| border-top: 1px solid #aaa; |
| border-left: 1px solid #bbb; |
| border-left: 1px solid #bbb; |
| background: #f0f0f0; |
| background: #f0f0f0; |
| box-shadow: 1px 1px 1px rgba(0,0,0,0.07) inset; |
| box-shadow: 1px 1px 1px rgba(0,0,0,0.07) inset; |
| text-decoration: none; |
| text-decoration: none; |
| } |
| } |
| .post_subject { |
| .post_subject { |
| color: #777; |
| color: #777; |
| } |
| } |
| /* @todo - Move strong tag outside anchor. Will save css. */ |
| /* @todo - Move strong tag outside anchor. Will save css. */ |
| .keyinfo h5 a, .keyinfo h5 a strong { |
| .keyinfo h5 a, .keyinfo h5 a strong { |
| color: #46823c; |
| color: #46823c; |
| } |
| } |
| |
| |
| .inner { |
| .inner { |
| border-top: 1px solid #bfbfbf; |
| border-top: 1px solid #bfbfbf; |
| } |
| } |
| /* All the signatures used in the forum. */ |
| /* All the signatures used in the forum. */ |
| .signature, .attachments, .custom_fields_above_signature { |
| .signature, .attachments, .custom_fields_above_signature { |
| border-top: 1px solid #bfbfbf; |
| border-top: 1px solid #bfbfbf; |
| } |
| } |
| /* Used by video embed JS when autolinking video links */ |
| /* Used by video embed JS when autolinking video links */ |
| .elk_video { |
| .elk_video { |
| border: #27a348 1px solid; |
| border: #27a348 1px solid; |
| border-top: 0; |
| border-top: 0; |
| } |
| } |
| .elk_videoheader { |
| .elk_videoheader { |
| border: #27a348 1px solid; |
| border: #27a348 1px solid; |
| } |
| } |
| |
| |
| .requiredfield:before { |
| .requiredfield:before { |
| content: ' '; |
| content: ' '; |
| border: 10px solid transparent; |
| border: 10px solid transparent; |
| border-bottom-color: #437837; |
| border-bottom-color: #437837; |
| } |
| } |
| .requiredfield { |
| .requiredfield { |
| color: #FFFFFF; |
| color: #FFFFFF; |
| background: #437837; |
| background: #437837; |
| border-bottom: 1px solid #5aa049; |
| border-bottom: 1px solid #5aa049; |
| border-left: 1px solid #2d5024; |
| border-left: 1px solid #2d5024; |
| border-right: 1px solid #5aa049; |
| border-right: 1px solid #5aa049; |
| border-top: 1px solid #2d5024; |
| border-top: 1px solid #2d5024; |
| } |
| } |
| |
| |
| /* $EDITOR */ |
| /* $EDITOR */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| |
| |
| /* The main post editor section. */ |
| /* The main post editor section. */ |
| #preview_body { |
| #preview_body { |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| border-bottom: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| background: #fff; |
| background: #fff; |
| } |
| } |
| |
| |
| #postAdditionalOptionsHeader, #postDraftOptionsHeader { |
| #postAdditionalOptionsHeader, #postDraftOptionsHeader { |
| background: #fafafa; |
| background: #fafafa; |
| background-image: linear-gradient(to bottom, #fafafa 0%, #ebebeb 100%); |
| background-image: linear-gradient(to bottom, #fafafa 0%, #ebebeb 100%); |
| } |
| } |
| #postAdditionalOptions, #postDraftOptions { |
| #postAdditionalOptions, #postDraftOptions { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-radius: 0 0 4px 4px; |
| border-radius: 0 0 4px 4px; |
| background: #fdfdfd; |
| background: #fdfdfd; |
| border-top: none; |
| border-top: none; |
| } |
| } |
| #postAdditionalOptionsNC { |
| #postAdditionalOptionsNC { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-radius: 4px; |
| border-radius: 4px; |
| background: #fdfdfd; |
| background: #fdfdfd; |
| } |
| } |
| .drop_area { |
| .drop_area { |
| -webkit-font-smoothing: antialiased; |
| -webkit-font-smoothing: antialiased; |
| color: #444444; |
| color: #444444; |
| background-color: rgb(230, 230, 230); |
| background-color: rgb(230, 230, 230); |
| border: dashed 1px #ccc; |
| border: dashed 1px #ccc; |
| } |
| } |
| .statusbar { |
| .statusbar { |
| border-top: 1px solid #A9CCD1; |
| border-top: 1px solid #A9CCD1; |
| border-bottom: 1px solid #A9CCD1; |
| border-bottom: 1px solid #A9CCD1; |
| background: rgb(241, 241, 241); |
| background: rgb(241, 241, 241); |
| } |
| } |
| |
| |
| .progressBar { |
| .progressBar { |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| } |
| } |
| |
| |
| .progressBar div { |
| .progressBar div { |
| color: #fff; |
| color: #fff; |
| background-color: green; |
| background-color: green; |
| } |
| } |
| |
| |
| .abort, .remove { |
| .abort, .remove { |
| background-color: #A8352F; |
| background-color: #A8352F; |
| border-radius: 5px; |
| border-radius: 5px; |
| color: #fff; |
| color: #fff; |
| cursor: pointer; |
| cursor: pointer; |
| } |
| } |
| .drop_attachments_error { |
| .drop_attachments_error { |
| color: #ff0000; |
| color: #ff0000; |
| } |
| } |
| |
| |
| #postMoreOptions, #postAttachment, #postAttachment2 { |
| #postMoreOptions, #postAttachment, #postAttachment2 { |
| border-top: 1px solid #ccc; |
| border-top: 1px solid #ccc; |
| } |
| } |
| |
| |
| #postDraftOptions .settings dd, #postDraftOptions .settings dt{ |
| #postDraftOptions .settings dd, #postDraftOptions .settings dt{ |
| border-top: 1px solid #e4e4e4; |
| border-top: 1px solid #e4e4e4; |
| } |
| } |
| /* $MODERATE */ |
| /* $MODERATE */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| |
| |
| .split_messages .post { |
| .split_messages .post { |
| border-top: 1px solid #fff; |
| border-top: 1px solid #fff; |
| } |
| } |
| |
| |
| /* Styles for the $TABS */ |
| /* Styles for the $TABS */ |
| /* We can't control what jqueryui pollutes the DOM with, so deal with it */ |
| /* We can't control what jqueryui pollutes the DOM with, so deal with it */ |
| /* Styles for the profile summary tabs, or any jquery ui tabs */ |
| /* Styles for the profile summary tabs, or any jquery ui tabs */ |
| /* ---------------------------------------------------------- */ |
| /* ---------------------------------------------------------- */ |
| |
| |
| .ui-tabs .ui-tabs-nav li { |
| .ui-tabs .ui-tabs-nav li { |
| border: 1px #ccc solid; |
| border: 1px #ccc solid; |
| border-radius: 2px 2px 0 0; |
| border-radius: 2px 2px 0 0; |
| color: #fff; |
| color: #fff; |
| } |
| } |
| .ui-tabs .ui-tabs-nav li a { |
| .ui-tabs .ui-tabs-nav li a { |
| background: #f0f0f0; |
| background: #f0f0f0; |
| border-bottom-color: #ccc; |
| border-bottom-color: #ccc; |
| outline: none; |
| outline: none; |
| border-radius: 2px 2px 0 0; |
| border-radius: 2px 2px 0 0; |
| } |
| } |
| |
| |
| .ui-tabs .ui-tabs-nav .ui-state-default a { |
| .ui-tabs .ui-tabs-nav .ui-state-default a { |
| background: #f0f0f0; |
| background: #f0f0f0; |
| background: linear-gradient(to bottom, #fff, #e4e4e4) repeat scroll 0 0 #f4f4f4; |
| background: linear-gradient(to bottom, #fff, #e4e4e4) repeat scroll 0 0 #f4f4f4; |
| } |
| } |
| .ui-tabs .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav .ui-state-active { |
| .ui-tabs .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav .ui-state-active { |
| background: #437837; |
| background: #437837; |
| background: linear-gradient(to bottom, #5ba048, #3d6e32) repeat scroll 0 0 #4b863c; |
| background: linear-gradient(to bottom, #5ba048, #3d6e32) repeat scroll 0 0 #4b863c; |
| color: #fff; |
| color: #fff; |
| border-radius: 2px 2px 0 0; |
| border-radius: 2px 2px 0 0; |
| } |
| } |
| .ui-tabs .ui-state-hover { |
| .ui-tabs .ui-state-hover { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-top: 1px solid #afafaf; |
| border-top: 1px solid #afafaf; |
| border-left: 1px solid #afafaf; |
| border-left: 1px solid #afafaf; |
| background: #f0f0f0; |
| background: #f0f0f0; |
| color: #555; |
| color: #555; |
| text-decoration: none; |
| text-decoration: none; |
| } |
| } |
| |
| |
| /* $PROFILE */ |
| /* $PROFILE */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* Profile colors */ |
| /* Profile colors */ |
| |
| |
| .ui-tabs .ui-tabs-panel { |
| .ui-tabs .ui-tabs-panel { |
| background: none repeat scroll 0 0 #fff; |
| background: none repeat scroll 0 0 #fff; |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| border-top: 1px #ccc solid; |
| border-top: 1px #ccc solid; |
| } |
| } |
| #profilecenter, #profile_attachments, #unwatched_topics { |
| #profilecenter, #profile_attachments, #unwatched_topics { |
| background: #efefef; |
| background: #efefef; |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-radius: 7px; |
| border-radius: 7px; |
| box-shadow: 0 -2px 2px rgba(0,0,0,0.1); |
| box-shadow: 0 -2px 2px rgba(0,0,0,0.1); |
| } |
| } |
| #profilecenter .windowbg, #profilecenter .windowbg2, |
| #profilecenter .windowbg, #profilecenter .windowbg2, |
| #profile_attachments .windowbg, #profile_attachments .windowbg2, |
| #profile_attachments .windowbg, #profile_attachments .windowbg2, |
| #unwatched_topics .windowbg, #unwatched_topics .windowbg2 { |
| #unwatched_topics .windowbg, #unwatched_topics .windowbg2 { |
| border: none; |
| border: none; |
| background: #fff; |
| background: #fff; |
| } |
| } |
| .profileblock { |
| .profileblock { |
| background: none repeat scroll 0 0 #fff; |
| background: none repeat scroll 0 0 #fff; |
| } |
| } |
| .profileblock ul li:not(:first-child):before { |
| .profileblock ul li:not(:first-child):before { |
| content: "\20\7C\20"; |
| content: "\20\7C\20"; |
| } |
| } |
| #detailedinfo dt, #tracking dt, .profileblock dt { |
| #detailedinfo dt, #tracking dt, .profileblock dt { |
| color: #555; |
| color: #555; |
| } |
| } |
| |
| |
| .activity_stats li span { |
| .activity_stats li span { |
| border: solid #555; |
| border: solid #555; |
| border-width: 1px 1px 1px 1px; |
| border-width: 1px 1px 1px 1px; |
| border-right: none; |
| border-right: none; |
| border-left: none; |
| border-left: none; |
| background: #eee; |
| background: #eee; |
| } |
| } |
| .activity_stats li .bar { |
| .activity_stats li .bar { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-bottom: none; |
| border-bottom: none; |
| background: #fff; |
| background: #fff; |
| } |
| } |
| .activity_stats li .bar div { |
| .activity_stats li .bar div { |
| background: #47b263; |
| background: #47b263; |
| background-image: linear-gradient(to bottom, #60bc78 0%, #27a348 100%); |
| background-image: linear-gradient(to bottom, #60bc78 0%, #27a348 100%); |
| } |
| } |
| |
| |
| .topic_details { |
| .topic_details { |
| border-bottom: 1px solid #999; |
| border-bottom: 1px solid #999; |
| } |
| } |
| |
| |
| .ignoreboards a { |
| .ignoreboards a { |
| border-bottom: 1px solid #c4c4c4; |
| border-bottom: 1px solid #c4c4c4; |
| } |
| } |
| .ignoreboards a:hover { |
| .ignoreboards a:hover { |
| border-bottom: 1px solid #555; |
| border-bottom: 1px solid #555; |
| text-decoration: none; |
| text-decoration: none; |
| } |
| } |
| .vcard, .profile_attachment { |
| .vcard, .profile_attachment { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-radius: 6px; |
| border-radius: 6px; |
| } |
| } |
| .attachment_title { |
| .attachment_title { |
| border-bottom: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| } |
| } |
| |
| |
| #warndiv .ui-widget-header { |
| #warndiv .ui-widget-header { |
| background: transparent; |
| background: transparent; |
| } |
| } |
| #warndiv .watched .ui-widget-header { |
| #warndiv .watched .ui-widget-header { |
| background: green; |
| background: green; |
| } |
| } |
| #warndiv .moderated .ui-widget-header { |
| #warndiv .moderated .ui-widget-header { |
| background: orange; |
| background: orange; |
| } |
| } |
| #warndiv .muted .ui-widget-header { |
| #warndiv .muted .ui-widget-header { |
| background: red; |
| background: red; |
| } |
| } |
| |
| |
| |
| |
| /* $PERSONAL */ |
| /* $PERSONAL */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| |
| |
| #personal_messages .capacity_bar { |
| #personal_messages .capacity_bar { |
| border: 1px solid #adadad; |
| border: 1px solid #adadad; |
| } |
| } |
| #personal_messages .capacity_bar span { |
| #personal_messages .capacity_bar span { |
| border-right: 1px solid #adadad; |
| border-right: 1px solid #adadad; |
| } |
| } |
| #personal_messages .capacity_bar .empty { |
| #personal_messages .capacity_bar .empty { |
| background: #a6d69d; |
| background: #a6d69d; |
| } |
| } |
| #personal_messages .capacity_bar .filled { |
| #personal_messages .capacity_bar .filled { |
| background: #eea800; |
| background: #eea800; |
| } |
| } |
| #personal_messages .capacity_bar .full { |
| #personal_messages .capacity_bar .full { |
| background: #f10909; |
| background: #f10909; |
| } |
| } |
| .addrules dt.floatleft { |
| .addrules dt.floatleft { |
| color: #555; |
| color: #555; |
| } |
| } |
| |
| |
| /* $CALENDAR */ |
| /* $CALENDAR */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* Calendar colors for birthdays, events and holidays */ |
| /* Calendar colors for birthdays, events and holidays */ |
| .birthday { |
| .birthday { |
| color: #920ac4; |
| color: #920ac4; |
| } |
| } |
| .event { |
| .event { |
| color: #078907; |
| color: #078907; |
| } |
| } |
| .holiday { |
| .holiday { |
| color: #555080; |
| color: #555080; |
| } |
| } |
| .calendar_table { |
| .calendar_table { |
| border-top: 1px solid #ddd; |
| border-top: 1px solid #ddd; |
| background: #ddd; |
| background: #ddd; |
| } |
| } |
| .calendar_table th, .calendar_table td { |
| .calendar_table th, .calendar_table td { |
| background: #fff; |
| background: #fff; |
| } |
| } |
| /* Used to indicate the current day. */ |
| /* Used to indicate the current day. */ |
| #main_grid .calendar_today, #month_grid .calendar_today { |
| #main_grid .calendar_today, #month_grid .calendar_today { |
| border: 1px solid #aaa; |
| border: 1px solid #aaa; |
| background: #ebffd8; |
| background: #ebffd8; |
| } |
| } |
| #main_grid .weeks { |
| #main_grid .weeks { |
| font-weight: normal; |
| font-weight: normal; |
| font-size: 1em; |
| font-size: 1em; |
| } |
| } |
| #main_grid .weeks a:hover { |
| #main_grid .weeks a:hover { |
| text-decoration: none; |
| text-decoration: none; |
| } |
| } |
| #main_grid .days { |
| #main_grid .days { |
| vertical-align: top; |
| vertical-align: top; |
| } |
| } |
| .weeklist { |
| .weeklist { |
| background: #e4e4e4; |
| background: #e4e4e4; |
| } |
| } |
| .weeklist>li { |
| .weeklist>li { |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| background: #fff; |
| background: #fff; |
| } |
| } |
| .weekdays { |
| .weekdays { |
| border-left: 2px solid #ddd; |
| border-left: 2px solid #ddd; |
| } |
| } |
| .weeklist h4 a:hover { |
| .weeklist h4 a:hover { |
| text-decoration: none; |
| text-decoration: none; |
| } |
| } |
| .modify_event { |
| .modify_event { |
| color: red; |
| color: red; |
| } |
| } |
| .hidelink { |
| .hidelink { |
| font-style: italic; |
| font-style: italic; |
| } |
| } |
| /* Add a background that fits with the calendar. */ |
| /* Add a background that fits with the calendar. */ |
| #calendar_navigation { |
| #calendar_navigation { |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| border-top: none; |
| border-top: none; |
| } |
| } |
| |
| |
| /* $HELP */ |
| /* $HELP */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| |
| |
| #helpmain { |
| #helpmain { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-radius: 7px; |
| border-radius: 7px; |
| box-shadow: 0 -2px 2px rgba(0,0,0,0.1); |
| box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1); |
| } |
| } |
| |
| |
| /* Styles for the tooltips. */ |
| /* Styles for the tooltips. */ |
| .tooltip { |
| .tooltip { |
| border: 1px solid #aaa; |
| border: 1px solid #aaa; |
| border-radius: 4px; |
| border-radius: 4px; |
| background: #fff; |
| background: #fff; |
| box-shadow: 3px 3px 3px rgba(0,0,0,0.3); |
| box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); |
| } |
| } |
| /* The darkened background for help pop-ups. */ |
| /* The darkened background for help pop-ups. */ |
| .popup_container { |
| .popup_container { |
| /* Flat colour fallback will be bad (visually), ie8 only though. */ |
| /* Flat colour fallback will be bad (visually), ie8 only though. */ |
| background: rgb(0,0,0); |
| background: rgb(0, 0, 0); |
| background: rgba(0,0,0,0.4); |
| background: rgba(0, 0, 0, 0.4); |
| } |
| } |
| /* The actual pop-up wrapper. */ |
| /* The actual pop-up wrapper. */ |
| .popup_window { |
| .popup_window { |
| border: 1px solid #777; |
| border: 1px solid #777; |
| border-radius: 7px 7px 3px 3px; |
| border-radius: 7px 7px 3px 3px; |
| background-color: #fafafa; |
| background-color: #fafafa; |
| box-shadow: 0 4px 6px rgba(0,0,0,0.6); |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6); |
| } |
| } |
| /* The text content, hopefully helpful. */ |
| /* The text content, hopefully helpful. */ |
| .popup_content { |
| .popup_content { |
| border: 1px solid #bbb; |
| border: 1px solid #bbb; |
| border-bottom: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| border-radius: 6px 6px 2px 2px; |
| border-radius: 6px 6px 2px 2px; |
| background: #f5f5f5; |
| background: #f5f5f5; |
| box-shadow: 0 -2px 3px rgba(0,0,0,0.15); |
| box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.15); |
| } |
| } |
| |
| |
| /* $SEARCH */ |
| /* $SEARCH */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| |
| |
| #mlsearch_options { |
| #mlsearch_options { |
| background: #fafafa; |
| background: #fafafa; |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| border-radius: 5px; |
| border-radius: 5px; |
| } |
| } |
| |
| .search_results_posts { |
| |
| background: #fff; |
| |
| } |
| .search_results_posts .topic_body { |
| .search_results_posts .topic_body { |
| border-top: 1px solid #CCCCCC; |
| border-top: 1px solid #ccc; |
| box-shadow: 0px 1px 0px #FFFFFF inset; |
| box-shadow: 0 1px 0 #fff inset; |
| |
| } |
| |
| .search_results_posts>li { |
| |
| border-bottom: 4px solid #ddd; |
| } |
| } |
| |
| |
| /* $MEMBERLIST */ |
| /* $MEMBERLIST */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| .mlist .mlist_header div { |
| .mlist .mlist_header div { |
| border-top: none; |
| border-top: none; |
| } |
| } |
| .mlist li div, .whos_online dt div, .whos_online dd:nth-child(odd) div { |
| .mlist li div, .whos_online dt div, .whos_online dd:nth-child(odd) div { |
| background-color: #fff; |
| background-color: #fff; |
| border-top: 1px solid #ccc; |
| border-top: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| } |
| } |
| .mlist li.alternate_row div, .whos_online dd:nth-child(even) div { |
| .mlist li.alternate_row div, .whos_online dd:nth-child(even) div { |
| background-color: #fafafa; |
| background-color: #fafafa; |
| border-top: 1px solid #ccc; |
| border-top: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| border-bottom: 1px solid #ccc; |
| } |
| } |
| .mlist li div:first-child { |
| .mlist li div:first-child { |
| border-left: 1px solid #ccc; |
| border-left: 1px solid #ccc; |
| } |
| } |
| .mlist li div:last-child { |
| .mlist li div:last-child { |
| border-right: 1px solid #ccc; |
| border-right: 1px solid #ccc; |
| } |
| } |
| .letter_row h3 { |
| .letter_row h3 { |
| border: 1px solid #ccc; |
| border: 1px solid #ccc; |
| border-radius: 6px 6px 0 0; |
| border-radius: 6px 6px 0 0; |
| } |
| } |
| /* $LOGIN */ |
| /* $LOGIN */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| |
| |
| .coppa_contact { |
| .coppa_contact { |
| border: 1px solid #555; |
| border: 1px solid #555; |
| background: #fff; |
| background: #fff; |
| color: #555; |
| color: #555; |
| } |
| } |
| .valid_input { |
| .valid_input { |
| background: #f5fff0; |
| background: #f5fff0; |
| } |
| } |
| .invalid_input { |
| .invalid_input { |
| background: #fff0f0; |
| background: #fff0f0; |
| } |
| } |
| |
| |
| /* $BOXES */ |
| /* $BOXES */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| |
| |
| |
| /* Lotsa boxes. */ |
| |
| .description, .information, .warningbox, .successbox, .infobox, .errorbox { |
| |
| background: #fff; |
| |
| border: 1px solid #ccc; |
| |
| } |
| |
| /* Information boxes. */ |
| |
| .information { |
| |
| background: #f0f6f0; |
| |
| } |
| .warningbox { |
| .warningbox { |
| border-top: 1px solid #ffd324; |
| border-top: 1px solid #ffd324; |
| border-bottom: 1px solid #ffd324; |
| border-bottom: 1px solid #ffd324; |
| background: #fff6ca url(../../images/profile/warning_moderate.png) 10px 50% no-repeat; |
| background: #fff6ca url(../../images/profile/warning_moderate.png) 10px 50% no-repeat; |
| } |
| } |
| .successbox { |
| .successbox { |
| border-top: 1px solid green; |
| border-top: 1px solid green; |
| border-bottom: 1px solid green; |
| border-bottom: 1px solid green; |
| background: #efe url(../../images/icons/field_valid.png) 10px 50% no-repeat; |
| background: #efe url(../../images/icons/field_valid.png) 10px 50% no-repeat; |
| } |
| } |
| .infobox { |
| .infobox { |
| border-top: 1px solid #3a87ad; |
| border-top: 1px solid #3a87ad; |
| border-bottom: 1px solid #3a87ad; |
| border-bottom: 1px solid #3a87ad; |
| background: #d9edf7 url(../../images/icons/quick_sticky.png) 10px 50% no-repeat; |
| background: #d9edf7 url(../../images/icons/quick_sticky.png) 10px 50% no-repeat; |
| } |
| } |
| .errorbox { |
| .errorbox { |
| border-top: 2px solid #c34; |
| border-top: 2px solid #c34; |
| border-bottom: 2px solid #c34; |
| border-bottom: 2px solid #c34; |
| background: #fee url(../../images/profile/warning_mute.png) 10px 50% no-repeat; |
| background: #fee url(../../images/profile/warning_mute.png) 10px 50% no-repeat; |
| } |
| } |
| |
| |
| |
| |
| /* $PROGRESS */ |
| /* $PROGRESS */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* Styles for the progress bar */ |
| /* Styles for the progress bar */ |
| .progress_bar { |
| .progress_bar { |
| border: 1px solid black; |
| border: 1px solid black; |
| border-radius: 5px; |
| border-radius: 5px; |
| background: white; |
| background: white; |
| box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); |
| box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); |
| } |
| } |
| .progress_bar .full_bar { |
| .progress_bar .full_bar { |
| border-radius: 3px; |
| border-radius: 3px; |
| color: black; |
| color: black; |
| } |
| } |
| .progress_bar .green_percent { |
| .progress_bar .green_percent { |
| background-color: green; |
| background-color: green; |
| } |
| } |
| .progress_bar .blue_percent { |
| .progress_bar .blue_percent { |
| background-color: blue; |
| background-color: blue; |
| } |
| } |
| |
| |
| /* $STATISTICS */ |
| /* $STATISTICS */ |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| .statistics .category_header { |
| .statistics .category_header { |
| background: none; |
| background: none; |
| border: none; |
| border: none; |
| border-bottom: 2px solid #ccc; |
| border-bottom: 2px solid #ccc; |
| text-shadow: none; |
| text-shadow: none; |
| } |
| } |
| .statistics .flow_hidden, #forum_history .flow_hidden { |
| .statistics .flow_hidden, #forum_history .flow_hidden { |
| border: 1px solid #ddd; |
| border: 1px solid #ddd; |
| background: #fefefe; |
| background: #fefefe; |
| } |
| } |
| .stats.floatleft { |
| .stats.floatleft { |
| border-right: 1px solid #ccc; |
| border-right: 1px solid #ccc; |
| } |
| } |
| #top_row .stats dd, .statsbar { |
| #top_row .stats dd, .statsbar { |
| border: 1px solid #aaa; |
| border: 1px solid #aaa; |
| background: #fff; |
| background: #fff; |
| } |
| } |
| /* Methinks topic links, etc need a little more oomph next to the orange bars. */ |
| /* Methinks topic links, etc need a little more oomph next to the orange bars. */ |
| #top_row .stats dd { |
| #top_row .stats dd { |
| border: 1px solid transparent; |
| border: 1px solid transparent; |
| background: none; |
| background: none; |
| } |
| } |
| .statsbar .bar { |
| .statsbar .bar { |
| background: #47b263; |
| background: #47b263; |
| background-image: linear-gradient(to bottom, #60bc78 0%, #27a348 100%); |
| background-image: linear-gradient(to bottom, #60bc78 0%, #27a348 100%); |
| } |
| } |
| /* Absolute positioning stops these breaking the bars on narrow screens. */ |
| /* Absolute positioning stops these breaking the bars on narrow screens. */ |
| .statsbar .righttext { |
| .statsbar .righttext { |
| background: #fff; |
| background: #fff; |
| } |
| } |
| #stats { |
| #stats { |
| border: none; |
| border: none; |
| } |
| } |
| |
| |
| /* Test code - an attempt to make recent posts less overwhelming. */ |
| /* Test code - an attempt to make recent posts less overwhelming. */ |
| #recentposts .inner { |
| #recentposts .inner { |
| height: 7.2em; |
| height: 7.2em; |
| overflow: hidden; |
| overflow: hidden; |
| resize: vertical; |
| resize: vertical; |
| position: relative; |
| position: relative; |
| } |
| } |
| #recentposts .inner blockquote { |
| #recentposts .inner blockquote { |
| height: 1.5em; |
| height: 1.5em; |
| overflow: hidden; |
| overflow: hidden; |
| } |
| } |
| |
| |
| /*floating error box*/ |
| /* floating error box */ |
| /* currently used by like funcationality*/ |
| /* currently used by like funcationality */ |
| .floating_error { |
| .floating_error { |
| |
| background: #fff; |
| background: rgba(255, 255, 255, 1); |
| background: rgba(255, 255, 255, 1); |
| font-size: 15px; |
| font-size: 15px; |
| color: #404040; |
| color: #404040; |
| border-radius: 10px; |
| border-radius: 10px; |
| border: solid 1px #E4E4E4; |
| border: solid 1px #E4E4E4; |
| } |
| } |
| |
| |
| .floating_error .error_heading { |
| .floating_error .error_heading { |
| font-weight: bold; |
| font-weight: bold; |
| } |
| } |
| |
| |
| .floating_error .error_msg { |
| .floating_error .error_msg { |
| color: #3D3C3C; |
| color: #3D3C3C; |
| } |
| } |
| |
| |
| .floating_error .error_btn { |
| .floating_error .error_btn { |
| border-top: solid 1px #D6D6D6; |
| border-top: solid 1px #D6D6D6; |
| color: #157DFB; |
| color: #157DFB; |
| font-size: 16px; |
| font-size: 16px; |
| font-weight: bold; |
| font-weight: bold; |
| } |
| } |
| |
| |
| .floating_error .error_btn:hover { |
| .floating_error .error_btn:hover { |
| cursor: pointer; |
| cursor: pointer; |
| } |
| } |
| |
| |
| /* $MEDIA */ |
| /* $MEDIA */ |
| /* Experimental media queries. |
| /* Experimental media queries. |
| /* ------------------------------------------------------- */ |
| /* ------------------------------------------------------- */ |
| /* NOTE: |
| /* NOTE: |
| /* When setting break points for media queries, don't set them in pixels. |
| /* When setting break points for media queries, don't set them in pixels. |
| /* Use em instead. |
| /* Use em instead. |
| /* Why? Because the point of re-stacking/dropping content is to fit it all |
| /* Why? Because the point of re-stacking/dropping content is to fit it all |
| /* in the available space. This is dependent not just on width in pixels, |
| /* in the available space. This is dependent not just on width in pixels, |
| /* but also on the user-selected text size that is set in the browser. |
| /* but also on the user-selected text size that is set in the browser. |
| /* |
| /* |
| /* If, for whatever reason (eyesight, pixel pitch, workstation arrangement, etc) |
| /* If, for whatever reason (eyesight, pixel pitch, workstation arrangement, etc) |
| /* a user requires text 50% larger than theme default, then their screen is |
| /* a user requires text 50% larger than theme default, then their screen is |
| /* effectively a lot smaller than its nominal resolution would indicate. |
| /* effectively a lot smaller than its nominal resolution would indicate. |
| /* If the break points are set in em, suddenly the media queries become equally |
| /* If the break points are set in em, suddenly the media queries become equally |
| /* responsive for all users, without any extra code being required. |
| /* responsive for all users, without any extra code being required. |
| /* |
| /* |
| /* Testing em break points is just as easy as testing pixels, |
| /* Testing em break points is just as easy as testing pixels, |
| /* and it will make more people happier. This is cool. :) |
| /* and it will make more people happier. This is cool. :) |
| /* |
| /* |
| /* Of course, having comments to map em to px for each query is a good idea too. |
| /* Of course, having comments to map em to px for each query is a good idea too. |
| |
| |
| /* Smartphones (portrait & landscape) drop the stats (views/replys) and last post from the screen */ |
| /* Smartphones (portrait & landscape) drop the stats (views/replys) and last post from the screen */ |
| |
| |
| /* This one does 800 screens at default font size. */ |
| /* This one does 800 screens at default font size. */ |
| @media screen and (max-width: 50em) { |
| @media screen and (max-width: 50em) { |
| #menu_sidebar { |
| #menu_sidebar { |
| border: 1px solid #aaa; |
| border: 1px solid #aaa; |
| border-radius: 4px; |
| border-radius: 4px; |
| background: #fff; |
| background: #fff; |
| box-shadow: 3px 3px 3px rgba(0,0,0,0.3); |
| box-shadow: 3px 3px 3px rgba(0,0,0,0.3); |
| } |
| } |
| [data-icon]:before { |
| [data-icon]:before { |
| font-family: 'FontAwesome'; |
| font-family: 'FontAwesome'; |
| border: 3px solid #666; |
| border: 3px solid #666; |
| padding: 1px; |
| padding: 1px; |
| margin: 2px; |
| margin: 2px; |
| height: 1.15em; |
| height: 1.15em; |
| width: 1.15em; |
| width: 1.15em; |
| text-align: center; |
| text-align: center; |
| display: inline-block; |
| display: inline-block; |
| border-radius: 4px; |
| border-radius: 4px; |
| line-height: 1.2em; |
| line-height: 1.2em; |
| font-size: 2em; |
| font-size: 2em; |
| color: #666; |
| color: #666; |
| content: attr(data-icon); |
| content: attr(data-icon); |
| } |
| } |
| .indicator[data-icon]:before { |
| .indicator[data-icon]:before { |
| color: #5ba048; |
| color: #5ba048; |
| } |
| } |
| #main_menu .linklevel1 { |
| #main_menu .linklevel1 { |
| margin-right: 2px; |
| margin-right: 2px; |
| } |
| } |
| #main_menu .linklevel1.active, #main_menu .linklevel1.active:hover { |
| #main_menu .linklevel1.active, #main_menu .linklevel1.active:hover { |
| border: 1px solid transparent; |
| border: 1px solid transparent; |
| background: transparent; |
| background: transparent; |
| } |
| } |
| .listlevel1#button_profile .linklevel1 { |
| .listlevel1#button_profile .linklevel1 { |
| min-width: 0.5em; |
| min-width: 0.5em; |
| } |
| } |
| .mlist li div.posts { |
| .mlist li div.posts { |
| border-right: 1px solid #ccc; |
| border-right: 1px solid #ccc; |
| } |
| } |
| } |
| } |
| /* This one does up to 540 screens. */ |
| /* This one does up to 540 screens. */ |
| @media screen and (max-width: 33.750em) { |
| @media screen and (max-width: 33.750em) { |
| #gotop, #gobottom { |
| #gotop, #gobottom { |
| border: 1px solid #222; |
| border: 1px solid #222; |
| } |
| } |
| #gobottom { |
| #gobottom { |
| border-radius: 0; |
| border-radius: 0; |
| } |
| } |
| #gotop { |
| #gotop { |
| border-radius: 0 8px 0 0; |
| border-radius: 0 8px 0 0; |
| } |
| } |
| #gotop:hover, #gobottom:hover { |
| #gotop:hover, #gobottom:hover { |
| color: #444; |
| color: #444; |
| text-decoration: none; |
| text-decoration: none; |
| opacity: 1; |
| opacity: 1; |
| } |
| } |
| .board_latest { |
| .board_latest { |
| border-left: 0; |
| border-left: 0; |
| } |
| } |
| .frame { |
| .frame { |
| border-radius: 0; |
| border-radius: 0; |
| } |
| } |
| .board_lastpost { |
| .board_lastpost { |
| border-top: 1px solid #ccc; |
| border-top: 1px solid #ccc; |
| } |
| } |
| .topic_listing>li { |
| .topic_listing>li { |
| border: 1px solid #aaa; |
| border: 1px solid #aaa; |
| box-shadow: 3px 3px 6px #e5e5e5; |
| box-shadow: 3px 3px 6px #e5e5e5; |
| } |
| } |
| .poster:after, .posterarea:before { |
| .poster:after, .posterarea:before { |
| border-bottom: 1px solid #bfbfbf; |
| border-bottom: 1px solid #bfbfbf; |
| } |
| } |
| .board_icon { |
| .board_icon { |
| width: 20px; |
| width: 20px; |
| height: 20px; |
| height: 20px; |
| } |
| } |
| .on_board, .on2_board { |
| .on_board, .on2_board { |
| background-position: -300px -14px; |
| background-position: -300px -14px; |
| } |
| } |
| .off_board { |
| .off_board { |
| background-position: -372px -14px; |
| background-position: -372px -14px; |
| } |
| } |
| .redirect_board { |
| .redirect_board { |
| background-position: -444px -14px; |
| background-position: -444px -14px; |
| } |
| } |
| .forumposts .windowbg2 { |
| .forumposts .windowbg2 { |
| background-color: #fafafa; |
| background-color: #fafafa; |
| } |
| } |
| .forumposts .windowbg, .forumposts .windowbg2 { |
| .forumposts .windowbg, .forumposts .windowbg2 { |
| border: 1px solid #bfbfbf; |
| border: 1px solid #bfbfbf; |
| box-shadow: 3px 3px 6px #e5e5e5; |
| box-shadow: 3px 3px 6px #e5e5e5; |
| border-radius: 3px; |
| border-radius: 3px; |
| margin-top: 8px; |
| margin-top: 8px; |
| } |
| } |
| .forum_category, .forumposts, .content_category { |
| .forum_category, .forumposts, .content_category { |
| background: #fff; |
| background: #fff; |
| border: none; |
| border: none; |
| } |
| } |
| .listlevel2.subsections .linklevel2::after { |
| .listlevel2.subsections .linklevel2::after { |
| content: ''; |
| content: ''; |
| } |
| } |
| .stats.floatleft { |
| .stats.floatleft { |
| border: none; |
| border: none; |
| } |
| } |
| .subsections:hover .linklevel1:after { |
| .subsections:hover .linklevel1:after { |
| content: ""; |
| content: ""; |
| } |
| } |
| .whos_online dd div { |
| .whos_online dd div { |
| border-bottom: none !important; |
| border-bottom: none !important; |
| border-top: none !important; |
| border-top: none !important; |
| } |
| } |
| .whos_online dd:nth-child(even), .whos_online dd:nth-child(odd) { |
| .whos_online dd:nth-child(even), .whos_online dd:nth-child(odd) { |
| margin-top: 1px; |
| margin-top: 1px; |
| border-top: 1px solid #ccc; |
| border-top: 1px solid #ccc; |
| } |
| } |
| .online_member { |
| .online_member { |
| font-size: 1.6em; |
| font-size: 1.6em; |
| } |
| } |
| .track_ip { |
| .track_ip { |
| float: right; |
| float: right; |
| font-size: 0.7em; |
| font-size: 0.7em; |
| } |
| } |
| .track_ip:before { |
| .track_ip:before { |
| content: ""; |
| content: ""; |
| } |
| } |
| .track_ip:after { |
| .track_ip:after { |
| content: ""; |
| content: ""; |
| } |
| } |
| } |
| } |
| @media screen and (max-width: 30em) { |
| @media screen and (max-width: 30em) { |
| .mlist li .group { |
| .mlist li .group { |
| border-right: 1px solid #ccc; |
| border-right: 1px solid #ccc; |
| } |
| } |
| } |
| } |