/* -------------------------------------------------------------- /* $Common /* -------------------------------------------------------------- */ /* stylelint-disable selector-max-compound-selectors */ /* stylelint-disable selector-no-qualifying-type */ html { font-size: 100%; /* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */ height: 101%; } body { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 16px; line-height: normal; word-wrap: break-word; margin: 0; padding: 12px 0; -webkit-print-color-adjust: exact; } h1 { /* Forum name */ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; margin-top: 15px; margin-right: 200px; } h2 { /* Forum header titles */ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; margin: 0.8em 0 0.2em; } h2.solo { margin-bottom: 20px; } h3 { /* Sub-headers (also used as post headers, but defined later) */ font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-transform: uppercase; border-bottom: 1px solid transparent; margin-top: 20px; margin-bottom: 3px; padding-bottom: 2px; } h4 { /* Forum and topic list titles */ font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; font-size: 13px; } p { font-size: 11px; line-height: 14px; margin-bottom: 16px; } img { border-width: 0; } hr { border: 0 solid transparent; border-top-width: 1px; display: block; clear: both; height: 1px; margin: 5px 0; } hr.dashed { border-top-style: dashed; margin: 10px 0; } hr.divider { display: none; } p.right { text-align: right; } p.jumpbox-return { float: left; margin-top: 10px; margin-bottom: 0; } b, strong { font-weight: bold; } .text-strong { font-weight: bold; } i, em { font-style: italic; } .text-italics { font-style: italic; } u { text-decoration: underline; } ul { list-style-type: disc; } ol { list-style-type: decimal; } li { display: list-item; } ul ul, ol ul { list-style-type: circle; } ol ol ul, ol ul ul, ul ol ul, ul ul ul { list-style-type: square; } a:hover { text-decoration: underline; } /* Main blocks ---------------------------------------- */ .wrap { border: 1px solid transparent; border-radius: 8px; min-width: 625px; max-width: 1152px; margin: 0 auto; padding: 15px; } .page-body { clear: both; margin: 4px 0; } .page-footer { clear: both; } .page-footer h3 { margin-top: 20px; } .c-hero { display: inline-flex; flex: 1; flex-direction: row; align-self: auto; padding: 12px; } .c-hero-logo { width: 150px; padding-right: 16px; } .c-hero-logo-img { width: 149px; height: 52px; margin-top: 0; } .c-hero-heading { flex: 1; align-self: auto; margin: 0; } /* Round cornered boxes and backgrounds ---------------------------------------- */ .headerbar { border-radius: 7px; display: flex; flex-direction: column; margin-bottom: 4px; padding: 5px; } .navbar { border-radius: 7px; padding: 3px 10px; } .forabg { border-radius: 7px; clear: both; margin-bottom: 4px; padding: 5px; } .forumbg { border-radius: 7px; clear: both; margin-bottom: 4px; padding: 5px; } .panel { border-radius: 7px; margin-bottom: 4px; padding: 5px 10px; } .post { background-repeat: no-repeat; background-position: 100% 0; border-radius: 7px; position: relative; margin-bottom: 4px; padding: 5px 10px; } .rowbg { margin: 5px 5px 2px; } /* Horizontal lists ---------------------------------------- */ .navbar ul.linklist { padding: 2px 0; list-style-type: none; } ul.linklist { display: block; margin: 0; } .cp-main .panel { padding: 5px 10px; } ul.linklist > li { font-size: 11px; line-height: 24px; float: left; width: auto; margin-right: 7px; padding-top: 1px; list-style-type: none; } ul.linklist > li.rightside, p.rightside, a.rightside { text-align: right; float: right; margin-right: 0; margin-left: 7px; } ul.navlinks { border-top: 1px solid transparent; } ul.leftside { text-align: left; float: left; margin-right: 5px; margin-left: 0; } ul.rightside { text-align: right; float: right; margin-right: -5px; margin-left: 5px; } ul.linklist li.responsive-menu { position: relative; margin: 0 5px 0 0; } .hasjs ul.linklist.leftside, .hasjs ul.linklist.rightside { max-width: 48%; } .hasjs ul.linklist.fullwidth { max-width: none; } li.responsive-menu.dropdown-right .dropdown { left: -9px; } li.responsive-menu.dropdown-left .dropdown { right: -6px; } ul.linklist .dropdown { top: 22px; } ul.linklist .dropdown-up .dropdown { top: auto; bottom: 18px; } /* Bulletin icons for list items ---------------------------------------- */ ul.linklist.bulletin > li:before { font-size: inherit; line-height: inherit; display: inline-block; padding-right: 4px; content: "\2022"; } ul.linklist.bulletin > li:first-child:before, ul.linklist.bulletin > li.rightside:last-child:before { content: none; } ul.linklist.bulletin > li.no-bulletin:before { content: none; } .responsive-menu:before { display: none !important; } /* Profile in overall_header.html */ .header-profile { vertical-align: top; display: inline-block; } a.header-avatar, a.header-avatar:hover { text-decoration: none; } a.header-avatar img { vertical-align: middle; width: auto; max-height: 20px; margin-bottom: 2px; } /* Dropdown menu ---------------------------------------- */ .dropdown-container { position: relative; } .dropdown-container-right { float: right; } .dropdown-container-left { float: left; } .nojs .dropdown-container:hover .dropdown { display: block !important; } .dropdown { border: 1px solid transparent; border-radius: 5px; position: absolute; z-index: 201; top: 1.2em; left: 0; display: none; margin-right: -500px; padding: 9px 0 0; } .dropdown.live-search { top: auto; } .dropdown-container.topic-tools { float: left; } .dropdown-up .dropdown { top: auto; bottom: 1.2em; padding: 0 0 9px; } .dropdown-left .dropdown, .nojs .rightside .dropdown { right: 0; left: auto; margin-right: 0; margin-left: -500px; } .dropdown-button-control .dropdown { top: 24px; } .dropdown-button-control.dropdown-up .dropdown { top: auto; bottom: 24px; } .dropdown .pointer, .dropdown .pointer-inner { border-top-width: 0; border-right: 10px dashed transparent; border-bottom: 10px solid transparent; border-left: 10px dashed transparent; position: absolute; display: block; width: 0; height: 0; -webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */ transform: rotate(360deg); } .dropdown-up .pointer, .dropdown-up .pointer-inner { border-top: 10px solid transparent; border-bottom-width: 0; } .dropdown .pointer { z-index: 301; top: -1px; right: auto; left: 10px; } .dropdown-up .pointer { top: auto; bottom: -1px; } .dropdown-left .dropdown .pointer, .nojs .rightside .dropdown .pointer { right: 10px; left: auto; } .dropdown .pointer-inner { top: auto; bottom: -11px; left: -10px; } .dropdown-up .pointer-inner { top: -11px; bottom: auto; } .dropdown .dropdown-contents { border: 1px solid transparent; border-radius: 5px; position: relative; z-index: 201; overflow: hidden; overflow-y: auto; max-height: 300px; padding: 5px; } .dropdown-contents a { display: block; padding: 5px; } .jumpbox { margin: 5px 0; } .jumpbox .dropdown li { border-top: 1px solid transparent; } .jumpbox .dropdown-contents { text-decoration: none; padding: 0; } .jumpbox .dropdown-contents li { padding: 0; } .jumpbox .dropdown-contents a { text-decoration: none; width: 100%; margin-right: 20px; padding: 5px 10px; } .jumpbox .spacer { display: inline-block; width: 0; } .jumpbox .spacer + .spacer { width: 20px; } .jumpbox .dropdown-select { margin: 0; } .dropdown li { font-size: 11px !important; line-height: normal !important; text-align: left; white-space: nowrap; border-top: 1px dotted transparent; display: list-item; float: none !important; margin: 0; list-style: none; } .dropdown-contents > li { padding-right: 15px; } .dropdown-nonscroll > li { padding-right: 0; } .dropdown li:first-child, .dropdown li.separator + li, .dropdown li li { border-top: 0; } .dropdown li li:first-child { margin-top: 4px; } .dropdown li li:last-child { padding-bottom: 0; } .dropdown li li { border-top: 1px dotted transparent; padding-left: 18px; } .wrap .dropdown li, .dropdown.wrap li, .dropdown-extended li { white-space: normal; } .dropdown li.separator { border-top: 1px solid transparent; padding: 0; } .dropdown li.separator:first-child, .dropdown li.separator:last-child { display: none !important; } /* Responsive breadcrumbs ---------------------------------------- */ .breadcrumbs .crumb { font-weight: bold; word-wrap: normal; float: left; } .breadcrumbs .crumb:before { font-weight: bold; padding: 0 0.5em; content: "\2039"; } .breadcrumbs .crumb:first-child:before { content: none; } .breadcrumbs .crumb a { vertical-align: bottom; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .breadcrumbs.wrapped .crumb a { letter-spacing: -0.019em; } .breadcrumbs.wrapped .crumb.wrapped-medium a { letter-spacing: -0.025em; } .breadcrumbs.wrapped .crumb.wrapped-tiny a { letter-spacing: -0.031em; } .breadcrumbs .crumb.wrapped-max a { max-width: 120px; } .breadcrumbs .crumb.wrapped-wide a { max-width: 100px; } .breadcrumbs .crumb.wrapped-medium a { max-width: 80px; } .breadcrumbs .crumb.wrapped-small a { max-width: 60px; } .breadcrumbs .crumb.wrapped-tiny a { max-width: 40px; } /* Table styles ---------------------------------------- */ table.table1 { width: 100%; } .ucp-main table.table1 { padding: 2px; } table.table1 thead th { font-size: 10px; font-weight: normal; line-height: 13px; text-transform: uppercase; padding: 0 0 4px 3px; } table.table1 thead th span { padding-left: 7px; } table.table1 tbody tr { border: 1px solid transparent; } table.table1 td { font-size: 11px; } table.table1 tbody td { border-top: 1px solid transparent; padding: 5px; } table.table1 tbody th { text-align: left; border-bottom: 1px solid transparent; padding: 5px; } /* Specific column styles */ table.table1 .name { text-align: left; } table.table1 .center { text-align: center; } table.table1 .reportby { width: 15%; } table.table1 .posts { text-align: center; width: 7%; } table.table1 .joined { text-align: left; width: 15%; } table.table1 .active { text-align: left; width: 15%; } table.table1 .mark { text-align: center; width: 7%; } table.table1 .info { text-align: left; width: 30%; } table.table1 .info div { white-space: normal; overflow: hidden; width: 100%; } table.table1 .autocol { line-height: 22px; white-space: nowrap; } table.table1 thead .autocol { padding-left: 10px; } table.table1 span.rank-img { float: right; width: auto; } table.info td { padding: 3px; } table.info tbody th { font-weight: normal; text-align: right; vertical-align: top; padding: 3px; } .forumbg table.table1 { margin: 0; } .forumbg-table > .inner { margin: 0 -1px; } .color_palette_placeholder table { border-spacing: 1px; border-collapse: separate; } /* Misc layout styles ---------------------------------------- */ /* column[1-2] styles are containers for two column layouts */ .column1 { float: left; clear: left; width: 49%; } .column2 { float: right; clear: right; width: 49%; } /* General classes for placing floating blocks */ .left-box { text-align: left; float: left; width: auto; max-width: 100%; } .left-box.profile-details { width: 80%; } .right-box { text-align: right; float: right; width: auto; max-width: 100%; } dl.details { font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; font-size: 11px; } dl.details dt { text-align: right; display: block; float: left; clear: left; width: 30%; } dl.details dd { text-overflow: ellipsis; float: left; overflow: hidden; width: 65%; margin-bottom: 5px; margin-left: 0; padding-left: 5px; } .clearfix, fieldset dl, ul.topiclist dl, dl.polls { overflow: hidden; } fieldset.fields1 ul.recipients { line-height: 1.8; overflow-y: auto; max-height: 150px; list-style-type: none; } fieldset.fields1 dd.recipients { clear: left; margin-left: 11px; } fieldset.fields1 ul.recipients input.button2 { font-size: 12px; margin-right: 0; padding: 0; } fieldset.fields1 dl.pmlist > dt { width: auto !important; } fieldset.fields1 dl.pmlist dd.recipients { margin-left: 0 !important; } /* Action-bars (container for post/reply buttons, pagination, etc.) ---------------------------------------- */ .action-bar { font-size: 11px; margin: 4px 0; } .forabg + .action-bar { margin-top: 12px; } .action-bar .button { float: left; margin-right: 5px; } .action-bar .button-search { margin-right: 0; } /* Pagination ---------------------------------------- */ .pagination { text-align: right; float: right; width: auto; } .action-bar.bar-bottom .pagination { margin-top: 0; } .action-bar .pagination .button { float: none; margin-right: 0; } .pagination > ul { display: inline-block; margin-left: 5px; list-style: none; } .pagination > ul > li { font-size: 100%; line-height: normal; vertical-align: middle; display: inline-block; padding: 0; } .pagination li a, .pagination li span { border-radius: 2px; padding: 2px 5px; } .pagination li.active span { font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica; font-size: 13px; font-weight: normal; line-height: 1.4; text-align: center; vertical-align: middle; white-space: nowrap; border: 1px solid transparent; display: inline-block; } .pagination li.ellipsis span { border: none; padding: 0; } .pagination li.page-jump { margin-right: 5px; } .pagination li.page-jump a { padding: 2px; } .pagination li.page-jump a i { font-size: 21px; line-height: 21px; } .pagination .arrow a { padding: 2px 0; } /* Pagination in viewforum for multipage topics */ .row .pagination { display: block; margin-top: 3px; margin-bottom: 3px; } .row .pagination > ul { margin: 0; } .row .pagination li a, .row .pagination li span { font-size: 9px; border-radius: 2px; width: 14px; height: 17px; padding: 1px 3px; } /* jQuery popups ---------------------------------------- */ .phpbb_alert { border: 1px solid transparent; position: fixed; z-index: 601; top: 150px; right: 0; left: 0; display: none; width: 620px; margin: 0 auto; padding: 0 25px 20px; } .phpbb_alert .alert_close { float: right; margin-top: 0; margin-right: -22px; } .phpbb_alert p { margin: 8px 0; padding-bottom: 8px; } .phpbb_alert label { display: block; margin: 8px 0; padding-bottom: 8px; } .phpbb_alert div.alert_text > p, .phpbb_alert div.alert_text > label, .phpbb_alert div.alert_text > select, .phpbb_alert div.alert_text > textarea, .phpbb_alert div.alert_text > input { font-size: 11px; } .darkenwrapper { position: relative; z-index: 401; display: none; } .darken { opacity: 0.5; position: fixed; z-index: 501; top: 0; left: 0; width: 100%; height: 100%; } .loading_indicator { position: fixed; z-index: 701; top: 50%; left: 50%; display: none; } .loader { width: 48px; height: 48px; padding: 12px; } .spinner { -webkit-animation: rotator 1s linear infinite; animation: rotator 1s linear infinite; } /* stylelint-disable no-unknown-animations */ .spinner-path { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite; animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite; stroke-dasharray: 187; stroke-dashoffset: 0; } /* stylelint-enable no-unknown-animations */ /* stylelint-disable at-rule-no-vendor-prefix */ @-webkit-keyframes rotator { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } } @keyframes rotator { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } } @-webkit-keyframes dash { 0% { stroke-dashoffset: 187; } 50% { -webkit-transform: rotate(135deg); transform: rotate(135deg); stroke-dashoffset: 46.75; } 100% { -webkit-transform: rotate(450deg); transform: rotate(450deg); stroke-dashoffset: 187; } } @keyframes dash { 0% { stroke-dashoffset: 187; } 50% { -webkit-transform: rotate(135deg); transform: rotate(135deg); stroke-dashoffset: 46.75; } 100% { -webkit-transform: rotate(450deg); transform: rotate(450deg); stroke-dashoffset: 187; } } /* stylelint-enable at-rule-no-vendor-prefix */ /* Miscellaneous styles ---------------------------------------- */ .copyright { font-size: 10px; text-align: center; padding: 10px; } .footer-row { font-size: 10px; line-height: 1.8; margin: 0; } .small { font-size: 90% !important; } .titlespace { margin-bottom: 15px; } .headerspace { margin-top: 20px; } .error { font-size: 10px; font-weight: bold; } div.rules { font-size: 11px; border-radius: 7px; margin: 10px 0; padding: 5px 10px; } div.rules ul, div.rules ol { margin-left: 20px; } p.post-notice { position: relative; min-height: 14px; margin-bottom: 11px; padding: 5px; } form > p.post-notice strong { line-height: 20px; } .stat-block { clear: both; } .top-anchor { position: absolute; top: -20px; display: block; } .clear { font-size: 1px; line-height: 1px; background: transparent; display: block; clear: both; } /* Inner box-model clearing */ .inner:after, ul.linklist:after, .action-bar:after, .notification-text:after, .tabs-container:after, .tabs > ul:after, .minitabs > ul:after, .postprofile .avatar-container:after { display: block; clear: both; content: ""; } /* stylelint-disable declaration-property-unit-whitelist */ .emoji { width: 1em; min-width: 18px; height: 1em; min-height: 18px; } /* stylelint-enable declaration-property-unit-whitelist */ .smilies { vertical-align: text-bottom; } .icon-notification { position: relative; } .member-search { float: left; margin: 0; padding: 6px 10px; } .member-search strong { font-size: 11px; } .dropdown-extended { z-index: 201; display: none; } .dropdown-extended .dropdown-extended-list { clear: both; overflow-x: hidden; overflow-y: auto; max-height: 350px; } .dropdown-extended .dropdown-extended-item { border-top: 1px solid; position: relative; float: none; clear: both; margin: 0 !important; padding: 0; list-style-type: none; } .dropdown-extended .dropdown-extended-item:first-child { border-top: none; } .dropdown-extended .dropdown-extended-item.no-notifications { padding: 10px; } .dropdown-extended .dropdown-contents { position: absolute; width: 340px; max-height: none; padding: 0; } .nojs .dropdown-extended .dropdown-contents { position: relative; } .dropdown-extended .header { font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 33px; text-align: left; text-transform: uppercase; border-bottom: 1px solid; border-radius: 5px 5px 0 0; /* needs moved to colurs.css */ text-shadow: 1px 1px 1px #ffffff; padding: 0 10px; } .dropdown-extended .header .header-settings { font-weight: normal; text-transform: none; float: right; } .dropdown-extended .header .header-settings a { display: inline-block; padding: 0 5px; } .dropdown-extended .header:after { display: table; clear: both; content: ""; } .dropdown-extended .footer { font-size: 12px; text-align: center; } .dropdown-extended .notification-block, .dropdown-extended .dropdown-extended-item.no-url { padding: 8px; } .dropdown-extended .footer > a { padding: 5px 0; } .dropdown-extended .dropdown-extended-item a, .notification-menu dt > a, .dropdown-extended .footer > a { text-decoration: none; display: block; } .notification-avatar, .notification-menu .notification-list .notification-item .avatar, .notification-menu .notification-list .notification-item .gravatar { float: left; width: auto !important; max-width: 50px; height: auto !important; max-height: 50px; margin-right: 5px; } .notification-item p { margin-bottom: 4px; } .notification-reference, .notification-location, .notification-reason { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .notification-time { font-size: 10px; text-align: right; margin: 0; } .notification-menu .notifications { margin-left: 50px; padding: 5px; } .notification-menu .notifications a { display: block; } .notifications-title { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px !important; } .notifications-title strong { font-weight: bold; } .notifications-time { font-size: 10px !important; } .notification-text { margin-left: 58px; } .badge { font-size: 10px; line-height: 1; text-align: center; white-space: nowrap; border-radius: 10px; opacity: 0.8; position: relative; top: 3px; float: right; margin-left: 3px; padding: 4px 6px; } .badge.hidden { display: none; } /* Navbar specific list items ---------------------------------------- */ .linklist .quick-links { margin: 0 7px 0 0; } .linklist.compact .rightside > a > span { display: none; } .dropdown-page-jump .dropdown { top: 20px; } .dropdown-page-jump.dropdown-up .dropdown { bottom: 20px; } .dropdown-page-jump input.tiny { width: 50px; } .dropdown .clone.hidden { display: none; } .dropdown .clone.hidden + li.separator { display: none; } .dropdown .clone.hidden + li { border-top: none; } /* stylelint-enable selector-max-compound-selectors */ /* stylelint-enable selector-no-qualifying-type */