/* * The great z-index overview: * * 10000: above-overlay messages, tutorial highlights, tutorial qtips * 9999: progress overlay, Bugs button, development bar * 9998: global messages * 9997: noscript/nobrowser warnings * 9996: pop menus (top, actions, share, etc), p:selectOneMenu panel, p:autoComplete panel, p:calendar panel * 9995: nav panel, curate panel, dialogs * 9994: fixed header, curate/mail tabs * 9993: clickonly pop menus (e.g. advanced search) */ /* Fonts ------------------------------------------------------------------------------------------------------------ */ body, body .normal { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 24px; } body h1, body .heavy { font-size: 2.5em; font-weight: 400; line-height: 1em; } body h2 { font-size: 1.6em; font-weight: 500; } body h3 { font-size: 1.3em; font-weight: 500; } body label { font-size: 1em; font-weight: 500; } body strong, body dt, body b, body .bold { font-size: 1em; font-weight: 600; } body code, body .code { font-family: Consolas, Monaco, "Lucida Console", "Courier New", monospace, serif; font-size: .8em; line-height: 1em; letter-spacing: -1px; } body input::-ms-clear { display: none; /* Hides IE10 inline clear button from inputs. */ } body input, body select, body textarea { border: 1px solid #caccce; border-radius: 4px; background: #f2f4f7; min-height: 25px; } body small, body .small { font-size: .8em; line-height: 1em; } body .centered { margin: 0 auto; text-align: center; } body .center { text-align: center; } body a.button { font-size: 1.2em; line-height: 1.4em; } div#dev-warning { position: fixed; width: 100%; height: 8px; background-color: pink; z-index: 9999; } .above-overlay { z-index: 10000; position: relative; /* needed to make z-index work */ background: white; } /* Icon extensions ------------------------------------------------------------------------------------------- */ body .icon { font-size: 1.2em; } body .small .icon { font-size: 1em; } .icon.font:before { content: "A"; font-family: Georgia; font-size: 1.2em; } .icon.social { padding: 1px; width: 1em; height: 1em; text-align: center; } /* The following makes p:button/p:commandButton/p:menuitem compatible with IonIcons icon names in icon attribute. */ body .ui-icon.icon { text-indent: 0; background-image: none !important; width: 1em; height: 1em; overflow: visible; } .ui-button-icon-only:not(.small) .ui-icon, .ui-button-text-icon-left:not(.small) .ui-icon, .ui-button-text-icon-right:not(.small) .ui-icon { margin-top: -.5em; } /* Replace Primefaces icons with Ionicons */ .ui-dialog .ui-dialog-titlebar-close .ui-icon, .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon, .ui-datatable .ui-row-editor .ui-icon, .ui-chkbox-box .ui-chkbox-icon.ui-icon-blank, .ui-chkbox-box .ui-chkbox-icon.ui-icon-check { text-indent: 0; background-image: none !important; width: 1em; height: 1em; font-family: "Ionicons"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ui-icon.ui-icon-closethick:hover { text-decoration: none; } .ui-icon.ui-icon-closethick:before, .ui-icon.ui-icon-close:before { content: "\f129"; } .ui-icon.ui-icon-pencil:before { content: "\f2bf"; } .ui-icon.ui-icon-check:before { content: "\f121"; } /* General ---------------------------------------------------------------------------------------------------------- */ html { height: 100%; overflow-y: scroll; /* Sticky vertical scrollbar to prevent horizontal shifts on navigation. */ } body { height: 100%; margin: 0; padding: 0; background: #f2f4f7; word-wrap: break-word; overflow: visible !important; /* Prevent Jira Feedback thing (Bugs button) from adding an extra scrollbar to body. */ } h1 { margin: 0; padding: 10px 15px; } h2 { margin: 0; padding: 10px; } h3 { margin: 0; padding: 10px 0; } h4 { margin: 0; padding: 0; } p, pre, dl { padding: 0 15px; } dd { margin: 0; padding: 0 0 10px 0; } hr { height: 1px; margin: 0; border: 0; color: #d6dae0; background: #d6dae0; } img { border-radius: 4px; } .hidden { display: none; } .filtered { display: none !important; } .fadeout { position: relative; } .fadeout:after { content: ""; pointer-events: none; position: absolute; background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); } input[type=search] { -webkit-appearance: none; /* Disable Chrome proprietary style (inset, rounded borders, etc). */ } textarea { min-height: 73px; /* Same height as 3 lines Helvetica Neue 16px. Will be autosized by jQuery Autosize plugin. */ } textarea.code { line-height: 1.4em; letter-spacing: 0; } span.progress { display: inline-block; margin: -1px .5em; width: 16px; height: 11px; background-image: url(https://zeef.io/resources/zeef/images/progress.gif.xhtml?ln=zeef); } /* Buttons/links ---------------------------------------------------------------------------------------------------- */ body a img { border: 0; /* IE. */ } body .ui-button.ui-state-default { min-width: 40px; height: 40px; line-height: 38px; /* Same as height minus 1px border. */ margin: 0 5px; padding: 0 .8em; border: 0; } body .ui-button.ui-state-default.small { min-width: 30px; height: 30px; min-height: 30px; line-height: 30px; /* Same as height. */ margin-right: 0; font-size: 1em; /* Override body .small. */ } body .ui-button-text-only .ui-button-text { padding: 0; } body .ui-button-text-icon-left .ui-button-icon-left { left: .5em; } body .ui-button-text-icon-left .ui-button-text { padding: 0 0 0 1.5em; line-height: inherit; } body .ui-button-text-icon-right .ui-button-text { padding: 0 1em 0 0; } body .ui-button-icon-only .ui-icon { margin-left: -.5em; } body .ui-button-icon-only .ui-button-text { line-height: 1em; } body .ui-button.ui-state-default.ui-spinner-button { height: 50%; margin: 1px; padding: 0; } body .ui-button .icon+.text { margin-left: .5em; } body .actionable { position: relative; } body .actions a { float: left; text-align: center; padding: 3px 8px; text-decoration: none; } body .actions { position: absolute; right: 0; } body .actions.round a, body .blocks .link.block .image.markdown .actions a, body .blocks .image.block .markdown .actions a { width: 14px; height: 24px; background: white; border-radius: 15px; border: 1px solid #d6dae0; } /* TODO: Not happy with how this progresses. The .actionable .actions was initially designed to cover all of them. If it's supposed to show up permanent, simply remove .actionable from markup and do not breakdown in specific selector. */ body .col1-only, html #alias.actionable .actions, html #page .block .actionable .menu, html #page .block.profile .actionable .actions, html #page.non-editable .block .actionable .actions, html #page .block .markdown .content .actions, html #page.condensed .block:hover .actionable .menu { display: none; } body.col1 .col1-only, html #alias.actionable:hover .actions, html.no-touch #page .block .actionable:hover .menu, html.no-touch #page .block.profile .actionable:hover .actions, html.no-touch #page.non-editable .block .actionable:hover .actions, html.no-touch #page .block .markdown:hover .content .actions, html.no-touch #page .actionable .suggested.link .menu, html.touch #page .block:hover .actionable .menu, html.touch #page .block.profile .actionable .actions, html.touch #page.non-editable .block .actionable .actions, html.touch #page .block .markdown .content .actions, html.touch #page.condensed .block:hover .actionable .menu { display: block; } html .blocks .block h3 .sorter i.ion-arrow-down-b { visibility: hidden; } html.touch .blocks .block h3 .sorter i.ion-arrow-down-b, html.no-touch .blocks .block h3 .sorter:hover i.ion-arrow-down-b { visibility: visible; } /* TODO: document/unify/abstract this */ .blocks .block[data-order=e] h3 .sorter[data-order=e] i.ion-arrow-down-b, .blocks .block[data-order=a] h3 .sorter[data-order=a] i.ion-arrow-down-b, .blocks .block[data-order=c] h3 .sorter[data-order=c] i.ion-arrow-down-b { visibility: visible; } html.touch #page.non-editable .blocks .link.block h3 .sorter[data-order=e], #page.non-editable .blocks .link.block h3 .sorter[data-order=c] { visibility: hidden; } html.touch #page.non-editable .blocks .link.block h3 .sorter[data-order=c], #page.non-editable .blocks .link.block[data-order=c] h3 .sorter[data-order=c], #page.non-editable .blocks .link.block:hover h3 .sorter[data-order=c] { visibility: visible; } #page.non-editable .blocks .block[data-curator-order=a] h3, #page.non-editable .blocks .block[data-curator-order=c] h3 { padding-left: 15px !important; } #page.non-editable .blocks .block[data-curator-order=a] h3 .sorter[data-order=e], #page.non-editable .blocks .block[data-curator-order=c] h3 .sorter[data-order=e], #page.non-editable .blocks .block[data-curator-order=a] ol li.link .index, #page.non-editable .blocks .block[data-curator-order=c] ol li.link .index { visibility: hidden; } #page.non-editable .blocks .block[data-curator-order=a] ol, #page.non-editable .blocks .block[data-curator-order=c] ol { padding-left: 1.25em !important; } html.dragging .qtip, html.dragging .actionable .menu, html.dragging li.link.dragged .index, html.dragging li.link.dragged .number { display: none !important; } /* Colors ----------------------------------------------------------------------------------------------------------- */ body { color: #1d1e1e; } body .grayout { color: #a2a7aa; font-style: italic; } body h2 .grayout { font-weight: 400; font-style: normal; } body .grayout.ui-state-error { border: 0; color: white !important; background-color: #ff714d !important; } body .notification { border-radius: 4px; background: white; border: 1px solid #d6dae0; } body .notification .message { display: block; margin : 15px; padding: 15px; border: 2px dashed #d6dae0; } body .notification .message.wrap { whitespace: pre-wrap; } body .add.block.ui-state-error { border-color: #c41432 !important; } body a { color: #1564ae; text-decoration: none; } body a.danger, body span.error { color: #c41432; } body a label, body a:focus, body a:hover { text-decoration: underline; } body a:active { background: inherit; /* IE. */ } body .actions a { color: #a2a7aa; } body .actions a:focus, body .actions a:hover { color: inherit; } body .ui-button.ui-state-default { /* Regular buttons. */ color: #a2a7aa; background: white; border: 1px solid #d6dae0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body .ui-button.ui-state-default .ui-icon { background-image: url(https://zeef.io/resources/zeef/images/ui-icons_1564ae_256x240.png.xhtml?ln=zeef); } body .ui-button.ui-state-focus, body .ui-button.ui-state-hover, body .ui-button:focus, body .ui-button:hover { background: #f2f4f7; } body .ui-button.ui-state-focus .ui-icon, body .ui-button.ui-state-hover .ui-icon { background-image: url(https://zeef.io/resources/zeef/images/ui-icons_1d1e1e_256x240.png.xhtml?ln=zeef); } body .ui-button.action.ui-state-default, /* E.g. create/logout button. */ body .ui-button.action { color: white; background: #1564ae; border: 1px solid #1564ae; } body .ui-button.action.ui-state-default .ui-icon { background-image: url(https://zeef.io/resources/zeef/images/ui-icons_ffffff_256x240.png.xhtml?ln=zeef); } body .ui-button.action.ui-state-focus, body .ui-button.action.ui-state-hover, body .ui-button.action:focus, body .ui-button.action:hover { background: #426c9b; } body .ui-button.action.ui-state-disabled, body .ui-button.action.ui-state-disabled:hover { background: #535454; opacity: inherit; } body .ui-button.alternate.ui-state-default, /* Alternative color */ body .ui-button.alternate { color: white; background: #ff714d; border: 1px solid #ff714d; } body .ui-button.alternate.ui-state-default .ui-icon { background-image: url(https://zeef.io/resources/zeef/images/ui-icons_ffffff_256x240.png.xhtml?ln=zeef); } body .ui-button.alternate.ui-state-focus, body .ui-button.alternate.ui-state-hover, body .ui-button.alternate:focus, body .ui-button.alternate:hover { background: #c41432; } body .ui-button.important.ui-state-default, /* E.g. create button. */ body .ui-button.important { color: white; background: #7fbd3a; border: 1px solid #7fbd3a; } body .ui-button.important.progress { border: 2px solid #7fbd3a; background: #caccce; } body .ui-button.important.progress:hover { border-color: #6ca230; background: #a2a7aa; } body .ui-button.important.ui-state-default .ui-icon { background-image: url(https://zeef.io/resources/zeef/images/ui-icons_ffffff_256x240.png.xhtml?ln=zeef); } body .ui-button.important.ui-state-focus, body .ui-button.important.ui-state-hover, body .ui-button.important:focus, body .ui-button.important:hover { color: white; background: #6ca230; border-color: #6ca230; } body .ui-button.important.orange.ui-state-default { /* E.g. delete/destroy button. */ color: white; background: #ff714d; border: 1px solid #ff714d; } body .ui-button.important.orange.ui-state-focus, body .ui-button.important.orange.ui-state-hover, body .ui-button.important.orange:focus, body .ui-button.important.orange:hover { background: #ef6332; } body .ui-button.danger.ui-state-default { /* E.g. delete/destroy button. */ color: white; background: #c41432; border: 1px solid #c41432; } body .ui-button.danger.ui-state-focus, body .ui-button.danger.ui-state-hover, body .ui-button.danger:focus, body .ui-button.danger:hover { background: #a30f2f; } body .ui-button.danger-inversed.ui-state-default { /* E.g. deactivate button. */ color: #c41432; background: white; border: 1px solid #c41432; } body .ui-button.danger-inversed.ui-state-focus, body .ui-button.danger-inversed.ui-state-hover, body .ui-button.danger-inversed:focus, body .ui-button.danger-inversed:hover { background: #f2f4f7; } body .ui-button.disabled.ui-state-default { color: white; background: #535454; border: 1px solid #535454; } body .ui-button.transparent.ui-state-default { /* E.g. cancel button. */ color: #a2a7aa; background: none; border: none; } body .ui-button.transparent.ui-state-focus .ui-button-text, body .ui-button.transparent.ui-state-hover .ui-button-text, body .ui-button.transparent:focus .ui-button-text, body .ui-button.transparent:hover .ui-button-text { text-decoration: underline; } body .ui-button.text .ui-button-text, body .ui-button.text .text { color: #1564ae; } body .ui-button.text.ui-state-focus .ui-button-text, body .ui-button.text.ui-state-focus .text, body .ui-button.text.ui-state-hover .ui-button-text, body .ui-button.text.ui-state-hover .text, body .ui-button.text:focus .ui-button-text, body .ui-button.text:focus .text, body .ui-button.text:hover .ui-button-text, body .ui-button.text:hover .text { text-decoration: underline; } body .ui-button.highlight.ui-state-default, /* E.g. create button. */ body .ui-button.highlight { background: #fbf8a3; border-color: #f8ec7e; } body .ui-button.round { border-radius: 2em; } body .ui-button.right { float: right; margin-right: 0; margin-bottom: 1em; } body label { color: #1d1e1e; } body label>i { position: relative; float: left; width: 1em; height: 1em; margin: 2px 8px 2px 1px; padding: 1px; color: #a2a7aa; text-align: center; } body label .verified { position: absolute; top: -.6em; right: -.6em } body a.button { display: inline-block; width: 30px; height: 30px; margin: 0 .5em; text-align: center; color: #a2a7aa; text-decoration: none; } body a.button:focus, body a.button:hover { color: #1d1e1e; } body a.button.help { border-radius: 1em; color: #caccce; } body a.button.help:focus, body a.button.help:hover { color: #1d1e1e; } body a.button.text { width: auto; } body a.button.text i { vertical-align: middle; } body a.button.text .text { font-size: .8em; margin-left: .25em; } /* Social provider colors (classnames should match FontAwesome icon names) ------------------------------------------ */ body .facebook, body .facebook-square, body .ui-widget-content .facebook { background: #3b5998; color: white; } body .twitter, body .ui-widget-content .twitter { background: #00c6f2; color: white; } body .linkedin, body .ui-widget-content .linkedin { background: #00649b; color: white; } body .googleplus, body .ui-widget-content .googleplus { background: #cf3e2c; color: white; } body .reddit, body .ui-widget-content .reddit { background: #336699; color: white; } body .hackernews, body .ui-widget-content .hackernews { background: #ff6600; color: white; } body .bufferapp, body .ui-widget-content .bufferapp { background: #333; color: white; } body .pinterest, body .ui-widget-content .pinterest { background: #bd081c; color: white; } body .whatsapp, body .ui-widget-content .whatsapp { background: #4dc247; color: white; } body .mail, body .ui-widget-content .mail { background: #1564ae; color: white; } body .verified { width: 1em !important; height: 1em !important; border-radius: 1em; font-size: .5em; background: #138143; color: white; line-height: .5em; padding: 1px; border: 1px white solid; } /* Menu (like user navigation menu and block action menu) ----------------------------------------------------------- */ body ul.menu, body ul.menu ul:not(.menu) { margin: 0; padding: 0; white-space: nowrap; list-style-type: none; } body ul.menu li { display: inline; margin: 0; padding: 15px; } body ul.menu li a { color: inherit; text-decoration: none; } body ul.menu li a.plain { color: #1564ae; } body ul.menu li a.plain:hover .text { text-decoration: underline; } body ul.menu li i { display: inline-block; width: 1em; text-align: center; } body ul.menu li i.social ~ .text, /* social icon before login menu item */ body ul.menu li .text ~ i.social { /* social icons after logout menu item */ margin-left: .25em; } body ul.menu li img { margin: 5px 0; } body ul.menu>li { position: relative; padding: 0 .25em; } body ul.menu>li>a { padding: .5em 0; } body ul.menu>li.active { z-index: 9996; } body ul.menu.clickonly>li.active { z-index: 9993; } body ul.menu>li a.active { color: inherit; text-decoration: none; } body ul.menu>li.active ul:not(.menu) { display: block; } body ul.menu ul:not(.menu) { display: none; position: absolute; min-width: 200px; right: -12px; border: 1px solid #d6dae0; border-radius: 4px; color: #1d1e1e; background-color: white; text-align: left; line-height: normal; -webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); } body ul.menu ul:not(.menu), x:-moz-any-link { right: -5px; /* Firefox. */ } body ul.menu ul:not(.menu):after { content: "\25b2"; /* top-triangle */ position: absolute; top: -13px; right: 16px; font-size: 16px; line-height: 16px; color: white; text-shadow: 0 -4px 5px rgba(0,0,0,0.3); -webkit-transform: scaleX(2.0); -moz-transform: scaleX(2.0); -ms-transform: scaleX(2.0); -o-transform: scaleX(2.0); transform: scaleX(2.0); } body ul.menu ul.left { left: 0; right: inherit; } body ul.menu ul.left:after { left: 16px; right: inherit; } body ul.menu ul:not(.menu) li { display: block; padding: 0; } body ul.menu ul:not(.menu) li .item, body ul.menu ul:not(.menu) li a.ui-button.wide { display: block; cursor: pointer; } body ul.menu ul:not(.menu) li .item { padding: .2em .8em; } body ul.menu ul:not(.menu) li button { margin: 10px; } body ul.menu ul:not(.menu) li .item img { margin: .5em 0; } body ul.menu ul:not(.menu) li .item .cell { display: table-cell; } body .pagelink .region { position: relative; top: 3px; padding-left: .5em; } body .pagelink .status { padding-left: .5em; width: 100%; text-align: right; } body ul.menu ul:not(.menu) li.broken { padding: .5em; } body ul.menu ul:not(.menu) li:first-child .item { border-top-left-radius: 4px; border-top-right-radius: 4px; } body ul.menu ul:not(.menu) li:last-child .item { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } body ul.menu ul:not(.menu) li .item:hover { background-color: #f2f4f7; } body ul.menu ul:not(.menu) li .text { display: inline-block; padding: .5em 0; margin-left: .25em; } body ul.menu ul:not(.menu) li>.text { padding: .5em; } body ul.menu ul:not(.menu) li fieldset { margin: 0; padding: 0 1em .5em; white-space: normal; } body ul.menu ul:not(.menu) li a.ui-button { margin: .5em; } body ul.menu ol { padding-left: 1em; } body ul.menu ol li .item { border-radius: 0 !important; } /* Checkmark list */ body ul.checkmarks { padding-left: 1.25em; list-style-type: none; } body ul.checkmarks li { position: relative; } body ul.checkmarks li:before { position: absolute; left: -1.25em; font-family: "FontAwesome"; content: "\f00c"; color: #7fbd3a; } /* Dynamic menus (share menu, sort menu, block menu, link menu, add block form, etc) */ body .dynamic-menu { display: none; } /* Page status (classnames should match PageStatus enum field names) ------------------------------------------------ */ .page-status { display: inline-block; padding: 0 1em; color: white; font-size: .8em; line-height: 2em; letter-spacing: -1px; text-align: center; border-radius: 2px; } .page-status.NEW { background: #ddc512; } .page-status.UNDER_REVIEW { background: #1564ae; } .page-status.PUBLISHED { background: #6ca230; } .page-status.NEEDS_WORK { background: #ff714d; } .page-status.UNPUBLISHED { background: #c41432; } .page-status.WIDGETS { /* Hack! See ZEEF-1347. */ background: #1564ae; } /* Link status (classnames should match LinkStatus enum field names) ------------------------------------------------ */ .link-status { display: inline-block; padding: 0 1em; color: white; font-size: .8em; line-height: 2em; letter-spacing: -1px; text-align: center; border-radius: 2px; } .link-status.OK { background: #6ca230; } .link-status.UNREACHABLE { background: #ddc512; } .link-status.REDIRECT_LOOP, .link-status.REDIRECT_INVALID { background: #ff714d; } .link-status.ERROR { background: #c41432; } /* Entity status (there's no enum for that so far) ------------------------------------------------------------------ */ .entity-status { display: inline-block; position: relative; top: -2px; margin-left: 5px; padding: 3px; color: white; font-size: .6em; font-weight: 400; line-height: 1em; } .entity-status.new { background: #7fbd3a; } .entity-status.promoted { background: #7fbd3a; font-size: .8em; } /* Region flags ----------------------------------------------------------------------------------------------------- */ .region-flag { display: inline-block; width: 22px; height: 14px; margin-right: 3px; background-image: url("https://zeef.io/sprite/flags?2016.8"); } /* Notification badge ----------------------------------------------------------------------------------------------- */ .badge { position: relative; top: -7px; margin: 0 2px 0 5px; padding: 0 3px; background-color: #7fbd3a; border-radius: 7px; font: 10px Arial, sans-serif; line-height: 10px; color: white; } /* Profile pictures ------------------------------------------------------------------------------------------------ */ .profile-picture img { border-radius: 50px; vertical-align: middle; } /* Favicons --------------------------------------------------------------------------------------------------------- */ .favicon, [class^='favicon-'] { width: 16px; height: 16px; border-radius: 0; background-image: url(https://zeef.io/resources/zeef/images/default_favicon.png.xhtml?ln=zeef); } [class^='favicon-profile-'] { border-radius: 8px; } #blockForm_toc [class^='favicon-'] { display: none; } #blockForm_toc li.link>a .title { padding-left: 0; } /* qTip ------------------------------------------------------------------------------------------------------------- */ .qtip-zeef { font-size: 1em; line-height: 1.2em; background-color: white; border: 0; border-bottom: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); } .qtip-zeef .profile-picture { float: left; margin-right: .5em; } /* qTip-tutorial Visible on mobile----------------------------------------------------------------------------------- */ .qtip-zeef-tutorial { font-size: 1em; line-height: 1.2em; background-color: white; border: 0; border-bottom: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); } /* Global messages -------------------------------------------------------------------------------------------------- */ body .ui-messages-info-icon, body .ui-messages-warn-icon, body .ui-messages-error-icon, body .ui-messages-fatal-icon { display: none; } body .ui-messages-info-summary, body .ui-messages-warn-summary, body .ui-messages-error-summary, body .ui-messages-fatal-summary { margin: 0; font-weight: 400; } body .ui-messages-close { margin: -.5em; padding: .5em; } body .ui-messages-close .ui-icon { background-image: url(https://zeef.io/resources/zeef/images/ui-icons_1d1e1e_256x240.png.xhtml?ln=zeef); } body .ui-messages-info { color: white; background: #7fbd3a; border-color: #138143; } body .ui-messages-warn { color: #1d1e1e; background: #cfdcf9; border-color: #1564ae; } body .ui-messages-error { color: #c41432; background: #fca2ba; border-color: #c41432; } body .ui-messages-fatal { color: white; background: #ff714d; border-color: #1d1e1e; } body .ui-messages-fatal a { color: #1d1e1e; } /* Body ------------------------------------------------------------------------------------------------------------- */ #body-wrapper { margin: 0 auto; /* Following declarations takes care of sticky footer. */ min-height: 100%; /* Modern browsers. */ height: auto !important; /* IE6-7. */ height: 100%; /* IE6-7. */ margin-bottom: -400px; /* Must be the negative of #push-footer.height. */ } /* Header ----------------------------------------------------------------------------------------------------------- */ #header-wrapper { position: fixed; left: 0; right: 0; height: 70px; background: white; border-bottom: 1px solid #d6dae0; z-index: 9994; } #header { position: relative; margin: 0 auto; padding: 13px 0; } #header img.small { width: 40px; height: 40px; vertical-align: top; margin-right: 5px; } #header h1.alias, #header h2.owner { float: left; width: 380px; padding: 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; } #header h1.alias .page-status, #header h1.alias .ui-selectonemenu, #header #ownerAvatar { display: none; } #header h1.alias .text { vertical-align: top; } #header h2.owner { font-size: 1.3em; color: #1d1e1e; } #header h2.owner img { margin: 0 .25em; } #header .info { float: left; } /* Logo ----------------------------------------------------------------------------------------------------- */ #logo { float: left; width: 380px; padding: 0 10px; margin: -10px 0; } #logo h1 { padding: 0; } #logo img { border-radius: 0; } /* Search --------------------------------------------------------------------------------------------------- */ #search { position: absolute; left: 400px; width: 380px; padding: 0 10px; } #searchForm .ui-autocomplete-input { padding-right: 70px; } #searchMenu { margin: 0 0 -2px; padding: 0; list-style-type: none; background: white; } #searchMenu span.error, #searchMenu span.small { display: block; padding: 0 .5em; font-size: .8em; line-height: 24px; } #searchMenu span.small { display: block !important; } #search>#searchMenu span.error, #search>#searchMenu span.small { -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.2); box-shadow: 0 2px 2px -1px rgba(0,0,0,0.2); } #searchMenuButton { display: none; position: absolute; top: 0; right: 10px; background: white; } #searchMenuButton .create-page { display: none; bottom: -3px; background: none; } #searchMenuButton i { font-size: 1.5em; } #searchMenuButton .create-page i { color: #ff714d; } #searchMenuButton li { padding: 0; } #searchMenuButton #searchMenu { display: block; width: 380px; padding: 8px; margin-top: 30px; } #home #searchMenu, #content #searchMenu { display: block; width: 380px; margin: 0 auto 30px; } #home #searchMenu .ui-autocomplete-input, #content #searchMenu .ui-autocomplete-input, #navPanel #searchMenu .ui-autocomplete-input, #home #searchMenu .inner.inline-content, #content #searchMenu .inner.inline-content, #navPanel #searchMenu .inner.inline-content { background: white; } #searchForm .inner.inline-content { right: 60px; top: 1px; bottom: 1px; padding: 0 1em; background-color: #f2f4f7; color: #caccce; } #searchForm .inner.inline-content i { line-height: 38px; } #searchFilterMenu>li, #searchFilterMenu>li>a { display: block; } #searchFilterMenu>li>a>i { vertical-align: middle; } #searchFilterMenu li.hidden { display: none; } #searchFilterMenu a.advanced { display: block; padding: 15px; text-align: right; font-size: .8em; color: #1564ae; } #searchFilterMenu fieldset { width: 310px; padding: 1em; } #searchFilterMenu .ui-buttonset { margin-right: 0; } #searchFilterMenu .ui-selectonebutton .ui-button { height: inherit; padding: 4px 5px 4px 4px; margin: 0; } #searchFilterMenu .ui-selectonebutton .ui-button:not(:last-of-type) { border-right: none; } #searchFilterMenu .ui-selectonebutton .ui-button.ui-state-active { background-color: #d6dae0; } #searchFilterMenu .ui-selectonebutton .ui-button.ui-state-disabled { display: none; } #header.scrolled #search>#searchMenu { display: none; } #header.scrolled #searchMenuButton { display: block; } /* User ----------------------------------------------------------------------------------------------------- */ #user { position: relative; float: right; max-width: 380px; padding: 0 10px; text-align: right; line-height: 40px; } #user ul.menu>li>a.ui-button { margin: 0; } #user form { display: inline; } #userMenu i.icon.ion-arrow-down-b { font-size: .9em; color: #848a8e; } #user #createPage { margin-left: 1em; } #user #pagesMenu #createPage { margin-left: .5em; } /* Page ------------------------------------------------------------------------------------------------------------- */ #page { position: relative; } #page.editable .link.block li.link .menu { background: white; } #page.editable li.link [class^='favicon-'] { cursor: move; } #page-info { margin: 1em; text-align: center; } #page .sendEmailButton { display: none; /* Only shown on 1 column layout. */ } /* Homepage ------------------------------------------------------------------------------------------------- */ #page.home.loading, #page.home.loading * { visibility: hidden !important; } #home { position: relative; max-width: 1200px; margin: 20px auto 0 auto; padding-bottom: 2em; } #home h2 { color: #1d1e1e; font-size: 4.2em; font-weight: 300; line-height: 1em; } #home p { width: 380px; font-size: 1em !important; font-weight: 300; color: #848a8e; margin: 10px; } /* Fullpage */ body.full #searchMenuButton { display: none !important; } body.full #header-wrapper { top: 0; width: 100%; } body.full #info-wrapper.home { margin-bottom: 20px; border-bottom: 1px solid #d6dae0; } body.full.background-image #info-wrapper.home { background-size: cover; background-position: bottom; color: #1564ae; border-bottom: none; } body.full #home { margin: 30px auto; } body.full #home h2 { color: inherit; font-size: 2.5em; font-weight: 500; line-height: 1.3em; max-width: 600px; } body.full #home p { color: black; font-size: 1.2em !important; font-weight: 300; line-height: 1.5em; padding: 0; width: 340px; } body.full #home a { color: white; text-decoration: underline; } body.full #fullpage-arrow { position: absolute; bottom: 10px; left: 50%; font-size: 4em; width: 100px; margin-left: -50px; text-align: center; } body.full #fullpage-arrow a { color: white; } body.full #content-wrapper { padding-top: 0; } body.full #blocks { border-bottom: 1px solid #d6dae0; } body.full #blocks { max-width: 800px; margin: 0 auto; padding: 20px 0; } /* Search */ body.full #home #searchMenu { display: block; width: 380px; background: transparent; margin: 30px 10px; padding: 0; list-style-type: none; } body.full #searchMenu #searchFilterMenu { display: none; } /* Trending */ #trending { max-width: 800px; margin: 0 auto; box-sizing: border-box; text-align: center; background-color: transparent !important; } #trending h3 { font-size: 2em; } #trending ul { clear: left; list-style-type: none; padding: 0; text-align: center; } #trending li { display: inline-block; position: relative; padding: 0; margin: 7px 6px 0 0; border: 1px solid #d6dae0; border-radius: 4px; line-height: 24px; white-space: nowrap; background-color: white; } #trending li:hover { border-color: #6ca230; background-color: rgba(59, 198, 119, 0.2); } #trending li a { color: #1d1e1e; margin: 0; line-height: 30px; } #trending li a:hover, #trending li:hover a { text-decoration: none; color: #6ca230; } #trending #popular-tags li a { padding: 10px 11px; } #trending #hubs li a { width: 148px; display: inline-block; line-height: 20px; padding-bottom: 7px; } #trending #hubs li img { border-radius: 4px 4px 0 0; } /* Call to action */ #call-to-action { margin: 40px auto 50px; max-width: 790px; text-align: center; padding: 15px; box-sizing: border-box; border: 1px solid #d6dae0; border-radius: 4px; background-color: white; } #call-to-action h3 { font-size: 2em; padding-bottom: 18px; } #call-to-action p { font-weight: 400; margin: 0; padding-bottom: 10px; padding-top: 18px; } /* Status (instructions/publishing) ------------------------------------------------------------------------- */ #status { position: relative; margin: 0 auto; padding: 2em 0 1em; } #notification { float: left; width: 780px; margin: 0 10px 1em; } #notification form ul { margin: 1em 0; padding: 0 10px; list-style-type: none; } #notification form li { padding: 5px 0; } #publishing { margin-right: 10px; text-align: right; } #publishing a.ui-button .ui-button-text { line-height: 2em; } /* Info ----------------------------------------------------------------------------------------------------- */ #info-wrapper { background: white; border-top: 1px solid #d6dae0; border-bottom: 1px solid #d6dae0; } #info-wrapper.home { background: none; border: none; } #info { position: relative; margin: 0 auto; padding: 10px 0; } #info-wrapper.margin { margin-top: 4em; } #info-actions { position: absolute; right: -6px; top: -42px; } #info-actions ul { margin: 0; padding: 0 10px; list-style-type: none; } #info-actions li { float: left; margin: 0 5px; padding: 5px 0; border: 1px solid #d6dae0; border-radius: 4px 4px 0 0; background: #f2f4f7; } #info-actions li.active { border-bottom: 1px solid white; background: white; } #info-actions li.active a { color: inherit; } #info-actions li i { vertical-align: middle; } /* Banner --------------------------------------------------------------------------------------------------- */ #banner { position: absolute; width: 100%; height: 350px; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; /* !important hack is needed because Chrome disregards it when background-image is declared later (via style attribute). */ } #banner .actions { bottom: 10px; right: 10px; } /* Page with banner --------------------------------------------------------------------------------------------- */ #page.banner #info-wrapper { position: relative; height: 400px; background: none; border: 0; } #page.banner #info { position: absolute; left: 0; right: 0; bottom: 0; width: 1160px; padding: 10px; border: 1px solid #d6dae0; border-radius: 4px; /* White with a little bit opacity in a gradient. */ background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 30px, rgba(255,255,255,1) 150px); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 30px, rgba(255,255,255,1) 150px); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0.8) 30px, rgba(255,255,255,1) 150px); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0.8) 30px, rgba(255,255,255,1) 150px); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,0.8) 30px, rgba(255,255,255,1) 150px); /* W3C */ } #page.banner.non-editable #status { padding: 0; } #page.banner #pageAction { right: 1em; } /* Page title + follow ---------------------------------------------------------------------------- */ #pageTitle { position: relative; } #pageTitle>div { display: inline-block; } #alias { position: relative; } #alias .actions { top: 0; right: -1em; } #owner h2 { padding-left: 0; } #owner .profile-picture img { margin: 0 .25em; vertical-align: bottom; } #competingPages i { color: #1564ae; } #pageAction { position: absolute; top: 1.25em; right: .5em; } /* Page picture + description + tags ------------------------------------------------------------------------ */ #pagePicture { float: left; margin: .5em 0; padding: 0 15px; } #pageDescription { float: left; width: 60%; margin-top: -.5em; } #pageTags { clear: left; margin: 1em 0 0; padding: 0 15px; } #pageTags li { display: inline-block; margin: 0 0 .5em; } #pageTags a { display: block; padding: 0 10px; border: 1px solid #a2a7aa; border-radius: 4px; color: #535454; background: white; } #pageTags a:hover { text-decoration: none; background: #f2f4f7; } /* Page picture should be smaller and left from page title when there's no description. --------------------- */ #info.no-description:not(.no-picture) #pageTitle { margin-left: 95px; } #info.no-description #pagePicture { margin-top: -47px; padding-right: 0; } #info.no-description #pagePicture img { float: left; width: 80px; height: 80px; } /* Page stats ----------------------------------------------------------------------------------------------- */ #pageStatistics { padding: 0 .5em; } #pageStatistics ul { margin: 0; padding: 0; list-style-type: none; } #pageStatistics ul li { padding: 2px .5em; } #pageStatistics ul li.small { /* "no data available" */ font-size: .8em; } #pageStatistics ul li, #pageStatistics ul li a, #pageStatistics ul li a:hover { color: inherit; text-decoration: none; } #pageStatistics ul li i { margin-right: .5em; width: 1em; text-align: center; } #pageStatistics ul li a:hover i { color: inherit; } #pageStatistics .loading { font-style: italic; } #pageStatistics .ui-outputpanel-loading { background: none; } #extendedPageStats { margin: .5em; position: absolute; top: 3em; right: 0; } /* Content ---------------------------------------------------------------------------------------------------------- */ #content-wrapper { /* Following declaration takes care of sticky header. */ padding-top: 70px; /* Must be the same as #header-wrapper.height. */ } #content { position: relative; margin: 0 auto; } #content fieldset, #content article { background: white; border-radius: 4px; } /* Actions top/bottom --------------------------------------------------------------------------------------- */ #actions-top, #actions-bottom { padding: 1em .25em 0; } #actions-bottom { border-top: 1px solid #d6dae0; } #actions-top .menu.left, #actions-bottom .menu.left { float: left; } #actions-top .menu.right, #actions-bottom .menu.right { float: right; } #actions-top>form li, #actions-bottom>form li { padding: 0; } #actions-top .ui-button, #actions-bottom .ui-button { margin-bottom: 1em; } .ui-button.transparent.follow .icon, .button.follow i { color: #ddc512; } .ui-button.transparent.follow:hover .icon, .button.follow:hover i { color: #ff714d; } .ui-button.thank .icon { color: #c41432; } .ui-button.thank:hover .icon { color: #ff002b; } .ui-button.suggest .icon { color: #7fbd3a; } .ui-button.suggest:hover .icon { color: #6ca230; } #actions-top>form ul.add-block, #actions-bottom>form ul.add-block { padding: 0 0 1em; } #actions-top>form ul.add-block li, #actions-bottom>form ul.add-block li { float: left; } #actions-top>form ul.add-block button, #actions-bottom>form ul.add-block button { width: 75px; height: 75px; margin: 16px 0 0 16px; } #actions-top>form ul.add-block button .ui-icon.icon, #actions-bottom>form ul.add-block button .ui-icon.icon { position: static; font-size: 2em; margin-top: 5px; margin-bottom: -10px; } #actions-top>form ul.add-block button .ui-button-text, #actions-bottom>form ul.add-block button .ui-button-text { padding: 0; font-size: 1em; line-height: 1em; } .actions-share-button { } .actions-share-button .share-buttons { display: inline-block; vertical-align: middle; margin-top: -2px; margin-left: .5em; } .actions-share-button .share-buttons .share-button, .ui-button.share .ui-button.more { width: 25px; height: 25px; line-height: 25px; } .ui-button.share .ui-button.more { top: 2px; margin: 0; padding: 0; min-width: 25px; min-height: 25px; } .actions-share-button .share-buttons .share-button:not(.actions-only) { display: none; } .actions-share-button .ui-button.more { } /* Tab button ---------------------------------------------------------------------------------------------- */ #tabs { position: fixed; right: 0; top: 50%; z-index: 9994; } #tabs .tab { margin: .5em 0; border-radius: 4px 0 0 4px; -webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); } #tabs .tab a { margin: 0; padding: .2em; font-size: 1.2em; line-height: 2em; height: 2.5em; width: 3em; } #tabs .tab i { margin: .1em; vertical-align: middle; } #tabs .tab i.icon.ion-chevron-left { font-size: .9em; } /* Blocks --------------------------------------------------------------------------------------------------- */ #page.condensed .blocks .condensable { display: none; } #page.condensed .blocks .block h3 { border-radius: 4px; } #page.condensed .blocks .add.block { visibility: hidden; } .blocks .column { /* This is only inserted by JavaScript. */ float: left; width: 400px; border-bottom: 1px solid transparent; /* Avoid collapsing when empty. */ } .blocks .block { position: relative; float: left; /* Fallback for JavaScript-disabled clients. */ width: 382px; margin: 0 9px 20px; border-radius: 4px; border: 1px solid #d6dae0; background: white; box-sizing: border-box; } .blocks .block:nth-child(3n+1) { clear: left; /* Fallback for JavaScript-disabled clients. */ } .blocks.togglableSection h2 { margin: 1em 10px 0; border-top: 1px solid #1d1e1e; text-align: center; } .blocks.togglableSection h2 .text { position: relative; top: -1em; padding: 0 .5em; background: #f2f4f7; } body .blocks .block h3 { padding: 15px; border-radius: 4px 4px 0 0; } .blocks .block h3 .title { display: block; } .blocks .block h3 .title i { padding: 0 .1em; font-size: 1em; color: #a2a7aa; } .blocks .block h3 .title i.toggle { float: right; } .blocks .block h3 .sorter { position: relative; cursor: pointer; } .blocks .block h3 .sorter i:not(.ion-information) { font-size: .6em; color: #a2a7aa; } .blocks .block h3>.sorter { position: absolute; display: inline-block; width: 2em; height: 1em; top: .7em; text-align: center; } .blocks .block h3>.sorter[data-order=e] { left: 0; } .blocks .block h3>.sorter[data-order=c] { right: 0; } .blocks .block h3 .sorter i.ion-arrow-down-b { padding-left: 3px; } .blocks .block h3 .text.sorter i.ion-arrow-down-b { position: absolute; right: -15px; bottom: 3px; } .blocks .block h3 .clicks.sorter i.ion-arrow-down-b { position: absolute; right: 2px; top: 7px; } .blocks .block .promoted h3 .text { font-weight: 700; } .blocks .block h3 .actions { top: 13px; right: 9px; background: white; font-size: .8em; } .blocks .block h3 .actions a { padding: 3px 6px; } .blocks .block h3 input { display: inline; width: 285px; height: 32px; margin: -4px -5px; padding: 4px; outline: 0; font: inherit; } .blocks .block h3 input::-ms-clear { display: none; /* Hide IE clear button. */ } .blocks .block h3 button { width: 28px; height: 28px; font-size: .8em; } .blocks .block h3 .inline-content { font-size: .6em; top: 0; bottom: 0; right: 0; } .blocks .block h3 .inline-content i { padding: 1px 3px; font-size: 2em; } .blocks .block h3 .stats { position: absolute; right: 12px; } .blocks .block h3 .number, .blocks .block .link .number { color: #a2a7aa; font-size: .8em; cursor: inherit; } .blocks .block .non-public h3, .blocks .block .non-public ul.menu, .blocks .block .non-public h3 .actions { color: white; background: #1d1e1e; } .blocks .block ul.menu { position: absolute; top: 14px; right: 2.8em; line-height: 30px; background: white; } .blocks .block ul.menu>li { padding: 0; } .blocks .block ul.menu>li:not(.owner)>a { padding: 5px; color: #a2a7aa; text-decoration: none; } .blocks .block ul.menu>li>a:hover { color: inherit; } .blocks .block ul.menu ul { margin-top: 3px; } .blocks .block ul.menu li.more { float: left; margin: 0 -3px; font-size: .8em; } .blocks .block ul.menu.fixed li.more i { font-size: 1.2em; vertical-align: text-bottom; } .blocks .block ul.menu li.more span { margin-top: -2px; } .blocks .mirrored.block ul.menu li.more span { display: none; } .blocks .block ul.menu li.monetized { color: #a2a7aa; } .blocks .block ul.menu.fixed { position: static; height: 30px; padding: 10px 5px 10px 9px; text-align: right; background: none; } .blocks .block ul.menu.fixed li i { font-size: 1.4em; } .blocks .block ul.menu.fixed li.suggest i { color: #7fbd3a; } .blocks .block ul.left.menu { display: block !important; left: .5em; right: auto; line-height: inherit; background: none; } .blocks .link.block:not(.feed) h3 { padding: 15px 40px 15px 35px; } .blocks div.droparea { border: 2px dashed #a2a7aa; border-radius: 4px; background: white; } .blocks.togglableSection .block { border-color: #f8ec7e; background-color: #fbf8a3; } /* Add block ----------------------------------------------------------------------------------------------- */ .blocks .add.block { width: 382px; height: 211px; border: 2px dashed #a2a7aa; background: #f2f4f7; } .blocks .add.block p { position: absolute; display: table; width: 100%; height: 100%; padding: 0; margin: -1em 0; text-align: center; } .blocks .add.block i { display: table-cell; font-size: 8.75em; color: #a2a7aa; vertical-align: middle; } .blocks .add.block ol { list-style-type: none; } .blocks .add.block form { display: block; } .blocks .add.block ul { list-style-type: none; padding: 0; margin: -1em 0; background: #f2f4f7; opacity: 0; -webkit-transition: opacity .25s ease-out; -moz-transition: opacity .25s ease-out; -ms-transition: opacity .25s ease-out; -o-transition: opacity .25s ease-out; transition: opacity .25s ease-out; } .blocks .add.block ul li { display: inline; } .blocks .add.block button { margin: 38px 0 0 38px; height: 130px; width: 130px; border-radius: 8px; background: none; } .blocks .add.block:hover p { display: none; } .blocks .add.block:hover ul { opacity: 1; -webkit-transition: opacity .25s ease-out; -moz-transition: opacity .25s ease-out; -ms-transition: opacity .25s ease-out; -o-transition: opacity .25s ease-out; transition: opacity .25s ease-out; } .blocks .add.block button.ui-state-hover, .blocks .add.block button.ui-state-focus, .blocks .add.block button:hover, .blocks .add.block button:focus { color: white; background: #1564ae; } .blocks .add.block button .ui-button-text { padding: 0; font-size: 1.3em; } .blocks .add.block button .ui-icon.icon { position: static; width: 1.1em; height: 1.1em; padding-top: .5em; font-size: 2em; } .blocks .add.block p.droparea { background: white; border-color: #535454; } .blocks .add.block.droparea .icon { color: #535454; } /* Link blocks -------------------------------------------------------------------------------------- */ .blocks .link.block .image.markdown { margin-bottom: 10px; } .blocks .link.block .image.markdown .actions { top: 10px; right: 10px; } .blocks .link.block .image.markdown img { border-radius: 0; } .blocks .block .description p, .blocks .link.block .description .markdown .editor textarea { margin-top: 0; } .blocks .link.block ol { margin: 0; padding-left: 2.25em; list-style-type: none; *list-style-type: decimal; /* Keep using default numbering for IE6/7 */ counter-reset: li; } .blocks .link.block li.link .index { position: absolute; left: -2.25em; height: 1.25em; width: 1.75em; text-align: right; letter-spacing: -1px; color: #a2a7aa; margin-top: 2px; } .blocks .link.block ol.ordered-by-ai li.link a:first-letter { font-weight: 700; } .blocks .link.block ol.ordered-by-ai li.link .index, .blocks .link.block ol.ordered-by-ci li.link .index { color: rgba(0,0,0,0.2); } .blocks .link.block li.link.promoted .index { font-weight: 700; color: #7fbd3a; } .blocks .link.block li.link .number { position: absolute; top: 0; right: 1em; margin-top: 2px; visibility: hidden; } #page.editable .blocks .link.block li.link .number, .blocks .link.block:hover li.link .number, .blocks .link.block[data-order=c] li.link .number { visibility: visible; } .blocks .link.block li.link { position: relative; } .blocks .link.block li.link>a { display: block; margin-right: 2.25em; padding: 4px 0; line-height: 20px; text-decoration: none; color: #1564ae; } .blocks .link.block li.link>a.searchengine-url { color:#1d1e1e; } .blocks .link.block li.link>a:visited, .blocks .text.block p>a:visited { color: #138143; } .blocks .link.block li.link>a:visited:hover, .blocks .link.block li.link>a:hover, .blocks .text.block p>a:visited:hover { text-decoration: underline; } .blocks .link.block li.link>a .favicon, .blocks .link.block li.link>a [class^='favicon-'] { position: absolute; top: 5px; } .blocks .link.block li.link>a .title { display: block; padding-left: 23px; } .blocks .link.block li.link.promoted>a .text { font-weight: 700; } .blocks .link.block li.link>a .profile-picture { position: relative; margin-left: 5px; } .blocks .link.block li.link.broken:not(.ignored)>a, .blocks .link.block li.link.broken:not(.ignored) ul.menu>li.broken>a { color: #c41432; } .blocks .link.block li.link.broken:not(.ignored) ul.menu>li.broken>a:hover { color: #a30f2f; } .blocks .link.block li.link.broken .link-menu.broken .ui-chkbox { margin: .5em; } .blocks .link.block li.link.suggested { position: relative; } .blocks .link.block:not(.suggested) li.link.suggested:before { display: none; } .blocks .link.block li.ui-draggable-dragging { margin-right: 2.25em; border: 1px dashed #a2a7aa; border-radius: 4px; background: white; } .blocks .link.block li.ui-draggable-dragging>a { margin-right: 0; } .blocks .link.block li.link ul.menu { position: absolute; top: 0; right: 2.25em; padding-right: .5em; } .blocks .link.block p button { height: auto; min-height: 40px; margin: 1em; } .blocks .link.block.suggested, .blocks .link.block.suggested ul.menu:not(.fixed), .blocks .link.block:not(.suggested) li.link.suggested>a { background: #f2fae8; } .blocks .link.block.suggested li.link.suggested { list-style-type: decimal; } .blocks .link.block .suggest { margin: 0; padding: 0; text-align: right; background: none; } .blocks .link.block .suggest .ui-button.ui-state-default { margin: 0; border-radius: 4px 0 0 0; } .blocks .link.block .add { margin: 0 .5em .5em; } .blocks .link.block .add.emptymenu { margin-top: -2em; } .blocks .link.block .add span.error { display: block; font-size: .8em; } .blocks .link.block p.droparea { margin: 1em 15px; } .blocks .link.block p.droparea, .blocks .link.block ol:not(.ordered-by-ei).droparea { border: 1px dashed #a2a7aa; border-radius: 4px; background: #f2f4f7; } .blocks .link.block p.droparea span { visibility: hidden; } .blocks .link.block li.droparea, .blocks .link.block tr.droparea { height: 0; margin-right: 2.25em; padding: 2px 0; border: 1px dashed #a2a7aa; border-radius: 4px; background: #f2f4f7; color: #a2a7aa; text-align: center; font-size: .8em; vertical-align: middle; overflow: hidden; } /* Text blocks -------------------------------------------------------------------------------------- */ .blocks .text.block { } .blocks .text.block ul.menu li.more { display: none; } .blocks .text.block .markdown { margin: -1em 0 -.5em; } .blocks .text.block .content.limited { max-height: 246px; } /* Image blocks ------------------------------------------------------------------------------------- */ .blocks .image.block .markdown .content img { width: 380px; border-radius: 0 0 3px 3px; vertical-align: top; } .blocks .image.block .markdown .actions { top: 10px; right: 10px; } .blocks .image.block fieldset { width: auto; margin: 0; padding: 10px; -webkit-box-shadow: none; box-shadow: none; background: none; } .blocks .image.block .markdown .editor fieldset img { width: 360px; } .blocks .image.block ul.menu.fixed { display: none; } /* Mirrored blocks ---------------------------------------------------------------------------------- */ .blocks .mirrored.block { } .blocks .mirrored.block .owner { position: absolute; left: 2.5em; margin-top: -6px; } .blocks .mirrored.block .owner img { vertical-align: middle; margin-right: 5px; } .blocks .block ul.menu>li.owner>a { color: #1564ae; } .blocks .block ul.menu>li.owner>a:hover { text-decoration: underline; } .blocks .block ul.menu>li.footer { float: left; } .blocks .block ul.menu>li.footer a { color: #1564ae; } .blocks .block ul.menu>li.footer a:hover { text-decoration: underline; } /* Activity blocks --------------------------------------------------------------------------------- */ .blocks .activity.block .activity { position: relative; padding: 2px 15px; } .blocks .activity.block .activity .date { position: absolute; width: 2.25em; left: .25em; text-align: right; color: #a2a7aa; } .blocks .activity.block .activity [class^='favicon-'] { position: absolute; left: 3em; top: 5px; } .blocks .activity.block .activity p { padding-left: 2.25em; margin: 0; } .blocks .activity.block .activity.short p { padding-left: 3.5em; } .blocks .activity.block .activity.short i { position: absolute; left: 2.5em; margin-top: 2px; } /* Profile block ----------------------------------------------------------------------------------- */ .blocks .profile.block .markdown textarea { margin-top: 0; width: 350px; } .blocks .profile.block ul.social { float: left; list-style-type: none; margin: 0; padding: 0 15px; } .blocks .profile.block ul.social li i { display: inline-block; width: 18px; height: 18px; padding: 1px; text-align: center; } .blocks .profile.block ul.social li i img { margin: -2px -1px; } .blocks .profile.block ul.social li i.grayout { color: white; background-color: #a2a7aa; } .blocks .profile.block ul.social li a { position: relative; display: inline-block; padding: 2px 0; text-decoration: none; } .blocks .profile.block ul.social li a .text { padding-left: 3px; } .blocks .profile.block ul.social li a:hover .text { text-decoration: underline; } .blocks .profile.block ul.social li a .verified { position: absolute; top: -.6em; left: 1.7em; } #kloutScore { display: inline-block; vertical-align: middle; visibility: hidden; overflow: visible; height: 24px; width: 24px; font-size: 13px; line-height: 16px; text-align: center; color: white; background-image: url(https://zeef.io/resources/zeef/images/klout-score-flag_24x24.png.xhtml?ln=zeef); background-repeat: no-repeat; } #kloutScore a { color: white; text-decoration:none; } /* Block menu -------------------------------------------------------------------------------------- */ #blockMenuDisplayWeight { margin: .5em; } #blockMenuDisplayWeight input { width: 3em; padding-right: 1.25em; } #blockMenuDisplayWeight button { vertical-align: middle; } /* Page share menu --------------------------------------------------------------------------------- */ #pageShareMenu { display: inline; } #pageShareMenu fieldset { width: 230px; } #pageShareMenu fieldset h2 { padding-bottom: 0; font-size: 1.2em; } #pageShareMenu a.button { color: #1564ae; } #pageShareMenu a.button:hover { text-decoration: underline; } /* CSS3 blocks (Search results and "Subjects" and "Curators" pages) ------------------------------------------ */ .blocks .pager { margin: 1em; font-size: 1.3em; font-weight: 500; text-align: center; } .blocks .columns { -webkit-columns: 3; -moz-columns: 3; columns: 3; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } .blocks .columns.two { width: 66.66666%; -webkit-columns: 2; -moz-columns: 2; columns: 2; float: left; } .blocks .columns .block { display: inline-block; float: none; width: 382px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid-column; } .blocks .columns .break { -webkit-column-break-before: always; -moz-column-break-before: always; break-before: always; -webkit-column-break-after: always; -moz-column-break-after: always; break-after: always; } .blocks .columns+.break { margin: 0 10px 20px; border-bottom: 1px solid #d6dae0; } .blocks .columns.plain .link.block ol { padding-left: .85em; } .blocks .columns.plain .link.block li.link>a { display: inline-block; margin-right: 1em; } /* Settings ----------------------------------------------------------------------------------------------------- */ #page .wrapped.plain { width: auto; margin: 1em 10px 2em; padding: 0; border: 1px solid #d6dae0; border-radius: 4px; background: white; } #page .wrapped.plain fieldset { width: 362px; margin: 15px; padding: 0; border: 0; float: left; } #page .wrapped.plain h2 { margin: 10px 15px; padding: 0; } /* #settings fieldset.page { position: relative; padding-right: 418px; } #settings fieldset.page .right-side { position: absolute; right: 1em; top: 3.2em; width: 343px; } */ #settings form>.buttons { margin: 1em; text-align: right; } #settings form .buttons.float { float: right; margin-right: 1em; } #settings .field.datalist { margin-top: -1em; } #settings .field.datalist tbody tr { background: #f2f4f7; } #settings .field.datalist tbody td.action { text-align: right; } #settings .field.google-result { line-height: 1em; margin-bottom: 2em; } #settings .field.google-result h3 { color: #1a0dab; font-weight: 400; line-height: 1em; } #settings .field.google-result img { float: left; border-radius: 0; background: #f2f4f7; } #settings .field.google-result .result { font-size: small; } #settings .field.google-result .url { width: 359px; color: #006621; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #settings .field.google-result .description { } #settings .field.google-result label.add { margin: 1em 0; cursor: pointer; color: #ff714d; font-weight: 400; } .page-picture-image-empty a { display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100px; height: 100px; padding-top: .5em; border: 2px dashed #a2a7aa; border-radius: 4px; color: #a2a7aa; text-align: center; text-decoration: none; } #settings #page-banner-image-empty a { display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 359px; height: 100px; padding-top: .5em; border: 2px dashed #a2a7aa; border-radius: 4px; color: #a2a7aa; text-align: center; text-decoration: none; } /* Create page -------------------------------------------------------------------------------------------------- */ #content.plain #createPageForm h2, #content.plain #createPageForm h2+p, #content.plain #createPageForm>fieldset { margin: 0 auto .5em; position: relative; } #content.plain #createPageForm h2, #content.plain #createPageForm h2+p { padding: 0; width: 400px; } #content.plain #createPageForm>fieldset { width: 380px; } #createPageForm .subtitle { position: absolute; left: 0; color: #a2a7aa; } #createPageForm .ui-button.wide { width: 100%; margin: 0; } #createPageForm .count { position: absolute; display: block; right: .5em; top: -3.5em; } #createPageForm .ui-datalist.scraped .add, #createPageForm .ui-datalist.selected .remove, #createPageForm .ui-datalist.rank .rank { display: block; } #createPageForm .hidden, #createPageForm .ui-datalist.rank a { display: none; } #createPageForm .ui-datalist-data { list-style-type: none; padding: 0; margin: 0; } #createPageForm .scrapedLink { position: relative; padding: .25em 0; } #createPageForm .ui-datalist.scraped .scrapedLink { padding-right: 4em; border-bottom: 1px solid #e6e7e8; } #createPageForm .ui-datalist.selected .scrapedLink { padding-right: 4em; border-top: 1px solid #e6e7e8; } #createPageForm .ui-button.add { position: absolute; top: .85em; right: 0; } #createPageForm .ui-button.remove { position: absolute; top: .85em; right: 0; } #createPageForm .ui-button.remove .ion-checkmark-round { color: #7fbd3a; } #createPageForm a.more { color: #a2a7aa; } #createPageForm .ui-datalist label, #createPageForm .ui-datalist a { display: block; width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #createPageForm a.count, #createPageForm .ui-datalist a { font-size: .8em; } #createPageForm a.count i { margin-left: .25em; } #createPageForm .ui-datalist.rank { margin: 1em 0; } #createPageForm .ui-datalist.rank .scrapedLink { padding-left: 2em; } #createPageForm .ui-datalist.rank .index { position: absolute; left: 0; margin-top: .25em; width: 1.25em; text-align: right; letter-spacing: -1px; color: #a2a7aa; } #createPageForm .ui-datalist.rank .rank { cursor: move; position: absolute; top: .25em; right: .5em; } #createPageForm .ui-datalist.rank .ui-sortable-helper, #createPageForm .ui-datalist.rank .ui-sortable-droparea { border: 2px dashed #a2a7aa; border-radius: 4px; background: white; } #createPageForm .ui-datalist.rank .ui-sortable-droparea { padding: 2px; } #createPageForm .rank-title { padding-left: 1.5em; } #createPageForm .rank-hash { position: absolute; top: 1.5em; left: 2em; color: #a2a7aa; } #createPageForm .field, #createPageForm .buttons { position: relative; } #createPageForm[data-step=SEARCH] .image.step1_name:after { position: absolute; display: block; content: " "; background-image: url("https://zeef.io/resources/zeef/images/create-page/step1_name_147x85.png.xhtml?ln=zeef"); width: 147px; height: 85px; right: -157px; top: -60px; } #createPageForm[data-step=SELECT]:not(.toggled) .image.step2_search:before { position: absolute; display: block; content: " "; background-image: url("https://zeef.io/resources/zeef/images/create-page/step2_search_96x85.png.xhtml?ln=zeef"); width: 96px; height: 85px; left: -106px; top: -60px; } #createPageForm[data-step=SELECT]:not(.added) .image.step2_select:after { position: absolute; display: block; content: " "; background-image: url("https://zeef.io/resources/zeef/images/create-page/step2_select_97x82.png.xhtml?ln=zeef"); width: 97px; height: 82px; right: -107px; top: 5px; } #createPageForm[data-step=SELECT].toggled .image.step2_note:before { position: absolute; display: block; content: " "; background-image: url("https://zeef.io/resources/zeef/images/create-page/step2_note_121x84.png.xhtml?ln=zeef"); width: 121px; height: 84px; left: -131px; top: -64px; } #createPageForm[data-step=SELECT].awesome .image.step2_5links:before { /* can't use :after due to ui-helper-clearfix on it */ position: absolute; display: block; content: " "; background-image: url("https://zeef.io/resources/zeef/images/create-page/step2_5links_247x116.png.xhtml?ln=zeef"); width: 247px; height: 116px; right: -197px; top: -86px; } #createPageForm[data-step=RANK] .image.step3_rank:after { position: absolute; display: block; content: " "; background-image: url("https://zeef.io/resources/zeef/images/create-page/step3_rank_101x73.png.xhtml?ln=zeef"); width: 101px; height: 73px; right: -107px; top: -53px; } /* Activity ----------------------------------------------------------------------------------------------------- */ .activities ul { margin: 0 1em 1em; padding: 0; list-style-type: none; display: table; border-collapse: collapse; } .activities li { display: table-row; border: 1px solid #caccce; border-left-color: #d6dae0; border-right-color: #e6e7e8; } .activities li:nth-child(odd) { background: #f2f4f7; } .activities li:nth-child(odd) .date { background: #e6e7e8; } .activities li:nth-child(even) { background: white; } .activities li:nth-child(even) .date { background: #f2f4f7; } .activities li:nth-child(odd) .new { background: #e6eddd; } .activities li:nth-child(odd) .new .date { background: #dce6d2; } .activities li:nth-child(even) .new { background: #f2fae8; } .activities li:nth-child(even) .new .date { background: #e6eddd; } .activities .profile-picture { float: left; margin: -.25em 1em; } .activities .activity { } .activities .activity>span { display: table-cell; padding: 1em; vertical-align: top; } .activities .activity .date { width: 2em; text-align: center; border-right: 1px solid #d6dae0; } .activities .activity .type { width: 2em; text-align: center; border-right: 1px solid #e6e7e8; } .activities .activity .text { } .activity .type i { color: #a2a7aa; } .activity .type i.suggestion { color: #7fbd3a; } .activity .type i.follow { color: #ddc512; } .activity .text p { margin: 0; padding: 0; display: inline-block; word-break: break-word; } /* Footer ----------------------------------------------------------------------------------------------------------- */ #push-footer { height: 400px; /* Must be #footer.height. */ margin-top: 1em; } #footer-wrapper { background: white; } #footer { margin: 0 auto; height: 400px; /* When changing this, change #push-footer.height and #body-wrapper.margin-bottom as well. */ } #footer section { float: left; width: 170px; padding: 15px; } #footer section h3 { padding: 5px 0; border-bottom: 1px solid #caccce; color: inherit; } #footer section p, #footer section ul { padding: 0; font-size: .9em; } #footer section ul { list-style-type: none; } #footer section.wide { width: 370px; } #footer section.wide ul { float: left; width: 170px; } #footer section.wide ul:last-of-type { margin-left: 30px; } ul.follow { padding: 0; } ul.follow li { display: inline-block; } ul.follow li a { text-decoration: none; } ul.follow li i { width: 1em; height: 1em; margin: 0 5px; padding: 5px; text-align: center; } #footer label { display: block; font-size: 1.2em; color: #1564ae; } #footer .logo { text-align: center; } #footer img { margin-top: 10px; border-radius: 0; } #footer .copyright { color: #1d1e1e; font-size: .8em; } #bugs { border: 0; color: white; background: #c41432; z-index: 9999; } #bugs i { font-size: 1.5em; margin: 5px 5px 0 0; bottom: -3px; position: relative; } #ideas { border: 0; color: white; background: #ff714d; } #ideas i { font-size: 1.5em; margin: 5px 5px 0 0; bottom: -3px; position: relative; } /* Forms ------------------------------------------------------------------------------------------------------------ */ fieldset { width: 380px; margin: 0 auto 1em; padding: .8em 50px; border: none; } fieldset h1, fieldset h2 { position: relative; width: 100%; padding: 10px 0; } fieldset p { padding: 0; } fieldset p.small { margin-top: -.25em; } fieldset .field, fieldset .info, fieldset .buttons, fieldset .link { margin: 10px 0; } fieldset .info.ui-messages-info, fieldset .ui-messages .ui-messages-warn { border: 0; } fieldset .info.ui-messages-info p { margin: 0; } fieldset .or { text-align: center; margin-bottom: 1em; } form .rule { margin: 30px 0 10px; border-top: 1px solid #d6dae0; text-align: center; } form .rule>div>span { position: relative; top: -.8em; padding: 0 1em; color: #1d1e1e; background: white; } fieldset .field label { display: block; } fieldset .field label.small { /* E.g. "remember me". */ display: inline; position: relative; top: -4px; padding: 0 4px; } label.small, label small, label .small, label a:not(.inline), fieldset .field td label, fieldset .field li label { font-weight: 400; } fieldset .field label small, /* E.g. social connect, remaining chars, forgot password, not shown publicly, etc */ fieldset .field label a:not(.inline) { /* E.g. "forgot password?" */ position: relative; left: 10px; font-size: .8em; } fieldset .field label .icon.box { /* E.g. publish page checklist */ border: 1px solid #caccce; border-radius: 2px; } fieldset .field label .icon.box.ion-checkmark-round { color: #7fbd3a; } fieldset .field span.error { font-size: .8em; } fieldset .field.search-results .results-report { padding: 0 5px; } fieldset .field.search-results .results-report .total-results { } fieldset .field.search-results .results-report .results-per-page { float: right; } fieldset .field.search-results .results-report .results-per-page a { padding: 2px 6px; } fieldset .field.search-results .results-report .results-per-page a.active { color: inherit; text-decoration: none; background: #d6dae0; } fieldset .field .ui-datatable thead th, fieldset .field .ui-datatable tbody td { position: relative; padding: 5px; border: 0; border-bottom: 1px solid #f2f4f7; font-weight: 400; text-align: left; } fieldset .field.search-results .ui-datatable thead th .ui-chkbox-all { position: relative; top: -2px; right: -2px; } fieldset .field.search-results .ui-datatable thead th label.small { top: auto; padding: 0; font-size: 1em; } fieldset .field.search-results .ui-datatable thead th .ui-column-filter { height: 30px; width: auto; float: right; } fieldset .field.search-results .ui-datatable tbody tr.ui-state-hover, fieldset .field.search-results .ui-datatable tbody tr.ui-state-highlight { border: 0; } fieldset .field.search-results .ui-datatable tbody td .ui-chkbox { position: relative; top: -4px; right: -4px; } fieldset .field.search-results .ui-datatable tbody td label { position: relative; } fieldset .field.search-results .ui-datatable tbody td i { position: absolute; top: 0; right: 0; color: #1d1e1e; } fieldset .field.search-results .ui-datatable tbody td a { display: block; width: 315px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } fieldset .field.checklist-all { margin-bottom: 0; padding-left: 40px; } fieldset .field.block { border-bottom: 1px solid transparent; /* Fix collapsing margin. */ border-radius: 4px; -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); } fieldset .field.block h3 { padding: 5px 15px; border-radius: 4px 4px 0 0; border-bottom: 1px solid #f2f4f7; } fieldset .field.block ol.checklist { margin: 0; padding-left: 40px; overflow: hidden; } fieldset .field.block ol.checklist li { position: relative; } fieldset .field.block ol.checklist li .ui-chkbox { position: relative; top: 1px; } fieldset .field.block ol.checklist li label { display: inline-block; width: 270px; padding: 2px 0 2px 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } fieldset .field.block ol.checklist li label [class^='favicon-'] { position: absolute; left: 25px; top: 5px; } fieldset .field span .inline { display: inline; } fieldset .field span.right { float: right; } fieldset .field .ui-selectonemenu { width: 100% !important; } fieldset .field .ui-slider-horizontal { margin: .5em 0; } fieldset .field .ui-fileupload.ui-state-error .ui-button { border: 1px solid #c41432; } fieldset .field .ui-fileupload .ui-button-text { font-size: 1.2em; } body .ui-inputfield { display: block; width: 100%; height: 40px; padding: 8px; } body .ui-selectonemenu { height: 40px; } body .ui-selectmanymenu { height: auto; max-height: 200px; } body .ui-autocomplete-multiple .ui-inputfield { height: auto; line-height: 36px; padding: 0 6px; } body .ui-autocomplete-multiple .ui-autocomplete-token { margin: 5px 5px 0 0; border-color: #d6dae0; line-height: 24px; } body .ui-autocomplete-multiple .ui-autocomplete-token-icon { margin-top: -7px; } body .ui-inputtextarea { min-height: 73px; } body .ui-inputtextarea[readonly] { min-height: 73px; white-space: pre-wrap; } form .suggestions { display: block; margin: 2px 0; } form .suggestions .ui-button.ui-state-default.tag { height: 20px; min-height: 20px; margin: 2px 4px; padding: 0 4px; line-height: normal; border: 1px solid #d6dae0; color: inherit; background: #f2f4f7; font-size: 1em; text-decoration: none; } form .suggestions i { cursor: pointer; color: #a2a7aa; font-size: 1em; } form .suggestions i:hover { color: #535454; } form .suggestions button.tag.ui-button-text-icon-right .ui-button-text { padding-right: 1.4em; font-size: .8em; } form .suggestions button.tag.ui-button-text-icon-right .ui-button-icon-right.icon { top: 6px; right: -1px; height: 20px; border-radius: 0 4px 4px 0; font-size: 1em; line-height: 20px; } form .suggestions button.tag:hover, form .suggestions button.tag.ui-state-hover { border-color: #1d1e1e; } form .suggestions button.tag.ui-button-text-icon-right .ui-button-icon-right.icon { color: white; background: #1564ae; } form .suggestions button.tag.ui-button-text-icon-right .ui-button-icon-right.icon:hover { background: #426c9b; } form .input-inline { position: relative; } form .input-inline .inline-content { position: absolute; top: 0; bottom: 0; right: 0; border-radius: 0 4px 4px 0; } form .input-inline .inline-content.left { left: 0; right: auto; border-radius: 4px 0 0 4px; } form .input-inline .inline-content>.text { padding: 8px 6px; font-size: .8em; } form .input-inline .inline-content>.ui-button.ui-state-default { margin: 0; width: inherit; border-radius: 0; border: none; border-right: 1px solid #f2f4f7; } form .input-inline .inline-content>.ui-button.ui-state-default:last-child { border-radius: 0 3px 3px 0; border-right: none; } form .input-inline .inline-content>.ui-button-icon-only.ui-state-default { width: 45px; } form .input-inline .inline-content>.ui-selectonemenu { border: 0; height: 38px; font-size: .8em; } form .input-inline .inline-content>.ui-selectonemenu, form .input-inline .inline-content>.ui-selectonemenu .ui-selectonemenu-label { border-radius: 0 3px 3px 0; } form .input-inline .inline-content.left>.ui-selectonemenu, form .input-inline .inline-content.left>.ui-selectonemenu .ui-selectonemenu-label { border-radius: 3px 0 0 3px; } form .input-inline .inline-content>.ui-selectonemenu .ui-selectonemenu-label { line-height: 2em; } form .input-inline .inline-content>.ui-selectonemenu .ui-selectonemenu-label, form .input-inline .inline-content>.ui-selectonemenu .ui-selectonemenu-trigger { background: #caccce; } form .input-inline .inline-content>.ui-selectonemenu .ui-selectonemenu-trigger { border-radius: 0; } form .input-inline .ui-autocomplete { padding-right: 0 !important; } form .input-inline span.ui-autocomplete.ui-state-error { border: 0; } form .input-inline .inline-content>* { float: left; } form .inline-nobg .input-inline .inline-content { background: none; } form .input-inline .inline-content .ion-happy-outline, form .input-inline .inline-content .ion-sad-outline, form .input-inline .inline-content .ion-sad { font-size: 2.25em; padding: 3px 5px 3px 0; } form .input-inline .inline-content .ion-happy-outline { color: #6ca230; } form .input-inline .inline-content .ion-sad-outline { color: #ff714d; } form .input-inline .inline-content .ion-sad { color: #c41432; } form .simulate-input { display: block; width: 380px; padding: 7px 8px; border: 1px solid #d6dae0; border-radius: 4px; background: #f2f4f7; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.2); box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.2); } form .simulate-input:hover { border-color: #1d1e1e; } form .simulate-input a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } form .input-inline.simulate-input .inline-content { top: 0; right: 0; bottom: 0; } form .inputlist { margin: 0; padding: 0; list-style-type: none; } form .inputlist li { position: relative; margin-bottom: 2px; } form .inputlist.select .ui-chkbox, form .inputlist.select .ui-radiobutton { position: absolute; top: 16px; margin: 0; } form .inputlist.select .item { margin: -5px 0 0 25px } form .inputlist.select .item i { position: absolute; top: 1em; right: .5em; color: #535454; background: #f2f4f7; } fieldset ul.social { margin: -5px; padding: 0; list-style-type: none; } fieldset ul.social li { float: left; margin: 5px; width: 185px; } fieldset ul.social a.connect { display: block; height: 40px; line-height: 42px; margin: 0; padding: 0 10px; text-align: left; text-decoration: none; font-size: 1em; white-space: nowrap; color: white; } fieldset ul.social a.connect:active { background: #535454; } fieldset ul.social a.connect i { position: relative; top: 2px; padding-right: 10px; font-size: 25px; } fieldset .social-connect { float: right; margin-right: 1em; } fieldset .split { margin: 0 -30px; padding: 10px 0; } fieldset .split .cell { display: table-cell; } fieldset .split .part { width: 330px; padding: 0 30px; vertical-align: top; } fieldset .split .part.half { width: 159px; } fieldset .split .rule { width: 1px; border-top: 0; background: #d6dae0; vertical-align: middle; } fieldset .split .rule>div { position: relative; } fieldset .split .rule>div>span { position: absolute; top: -1em; right: -1.3em; /* Works only for "Or"! :X */ padding: .8em; color: #1d1e1e; background: white; } fieldset .split ul.social li { width: 160px; } fieldset .switch { margin: 0 -5px -6px; } fieldset .switch .button { float: left; width: 185px; margin: 5px; text-align: center; } fieldset .split .switch .button { width: 160px; } fieldset .switch .button a { display: block; padding: 5px 10px; color: inherit; background: #f2f4f7; text-decoration: none; } fieldset .switch .button.active a { border: 1px solid #d6dae0; border-bottom-color: white; background: white; cursor: default; } fieldset .group { margin-bottom: 1em; padding: 0 1em; border: 1px solid #d6dae0; } fieldset .picture { float: left; margin: 0 10px; } fieldset .picture a { display: block; } fieldset .small.note { color: #1d1e1e; } fieldset .notification { padding: .8em; } fieldset .field.half { /* So far, used on /customize-widget only. */ width: 115px; float: left; margin-right: 1em; } fieldset .field.left75 { /* So far, used on editLinkDialog only. */ width: 72%; float: left; margin-right: 3%; } fieldset .field.right25 { /* So far, used on editLinkDialog only. */ width: 25%; float: right; } fieldset dl { margin: 0; padding: 8px 8px 0; border: 1px solid #caccce; border-radius: 4px; background: #f2f4f7; } fieldset dl dt:after { display: inline-block; content: ":"; } fieldset dl dt { float:left; margin-right: .5em; } fieldset dl dd { padding-bottom: 8px; } .ui-dialog fieldset h2 { padding: 0 0 10px; } /* Curate ----------------------------------------------------------------------------------------------------------- */ #curatePanel { position: fixed; display: none; width: 420px; height: 100%; top: 0; right: 0; background: white; -webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); z-index: 9995; } #curatePanel .ui-panel-title { display: block; width: 330px; } #curatePanel .ui-panel-content { width: 380px; } #curatePanel .ui-datatable-tablewrapper { overflow-y: auto; } #curatePanel fieldset { padding: 0; } #curatePanel tbody label { cursor: move; } #curatePanel .ui-sortable-helper { padding: 4px; border-radius: 4px; background: #f2f4f7; -webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); } #curatePanel .ui-sortable-helper tr { background: #f2f4f7; } #curatePanel .ui-sortable-helper td { border: 0; } #curatePanel .ui-sortable-helper td.ui-selection-column { display: none; } /* Replace checkbox icon with drag icon while dragging */ #curatePanel .ui-sortable-helper .ui-chkbox-icon { content: "\f130"; } #curatePanel .ui-datatable .ui-paginator { float: none; } /* Hamburger nav panel ---------------------------------------------------------------------------------------------- */ #hamburger { position: absolute; display: none; line-height: 3em; } #hamburger a { outline: none; font-size: 1.5em; color: #1d1e1e; } #navPanel { position: fixed; display: none; top: 0; left: -310px; width: 300px; height: 100%; overflow-y: auto; background: #f2f4f7; -webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); z-index: 9995; } #navPanel::-webkit-scrollbar { display: none; } #navPanel #searchMenu { background: none; } #navPanel>ul { margin: 0; padding: 0 .5em; white-space: nowrap; } #navPanel>ul>li.search-menu { display: none; } #navPanel>ul>li { display: block; padding: .25em 0; line-height: 40px; border-bottom: 1px #d6dae0 solid; } #navPanel>ul>li a:not(.ui-button) { color: inherit; text-decoration: none; } #navPanel>ul>li>a.ui-button, #navPanel>ul>li .ui-inputtext { margin: .75em 0; } #navPanel>ul>li .ui-inputtext { background: white; } #navPanel>ul.follow { padding: 0 .25em; } #navPanel>ul.follow>li { display: inline; height: auto; border: 0; } /* Plain pages ------------------------------------------------------------------------------------------------------ */ #content.plain { padding: 20px 0; } #content.plain>fieldset, #content.plain form fieldset { width: 721px; padding: .8em 20px; } #content.plain form#searchForm fieldset { width: 300px; } #content.plain article fieldset { width: 380px; padding: .8em 50px; -webkit-box-shadow: none; box-shadow: none; } #content.plain article { width: 600px; margin: 0 auto; } #content.plain article, #content.plain>form>fieldset { border: 1px solid #d6dae0; } #content.plain section { padding: 1em; } #content.plain article img.full-width { width: 540px; } #content.plain article.clean { border: none; background: #f2f4f7; } article.clean.blog { width: 800px !important; } article.clean.blog h2{ font: 700 32px "Helvetica-Neue", Helvetica, Arial, FreeSans, sans-serif; color: #1564AE; } .blog-more { left: 43%; position: relative; cursor: pointer; } .blogposts { max-height:457px; overflow:hidden; } .blogposts img, .blogpost img { max-width:700px; } .blogposts img.aligncenter, .blogpost img.aligncenter { margin-left: auto; margin-right: auto; display: block; } .blogposts .alignright, .blogpost .alignright { float: right; margin: 5px 0 15px 15px; } .blogposts .alignleft, .blogpost .alignleft { float: left; margin: 0 15px 15px 0px; } .blogposts h3, .blogposts h4, .blogposts h5, .blogposts h6, .blogposts h7, .blogposts h8, .blogpost h3, .blogpost h4, .blogpost h5, .blogpost h6, .blogpost h7, .blogpost h8 { padding: 10px 0 0 15px; } article.clean.blog .call-to-action-bottom { text-align: center; margin: 0 auto; max-width: 650px; padding: 20px; } article.clean.blog .button.orange { font-size: 18px; font-weight: 500; width: 236px; background-color: #EF6332; opacity: 0.85; position: relative; text-decoration: none; cursor: pointer; color: white !important; border-radius: 6px; line-height: 2em; height: 38px; } .blog-paginator { left: 24%; position: relative; } #content.plain img.featurepreview{ display: block; margin-left: auto; margin-right: auto; border: solid #e6e7e8 1px; padding: 15px; max-width: 90%; } #content.plain img.inline{ vertical-align: middle; } #content.plain section.clean{ border: 1px solid #d6dae0; border-radius: 4px; background: white; margin-bottom: 1em; } #content.plain section.faq div{ display:none; } #content.plain section.faq i { float: right; padding: 0; font-size: 1.7em; cursor: pointer; } #content.plain section.faq h2 { font-size: 1.2em; padding: 2px; padding-left: 15px; cursor: pointer; } #content.plain div.feature{ display: inline-block; position: relative; width: 31%; vertical-align:top; } #content.plain div.feature i{ display: inline-block; position: relative; text-align: center; width: 100%; font-size: 6.2em; padding: 0 15px; } #content.plain div.feature span{ display: inline-block; position: relative; text-align: center; padding: 0 15px; width: 100%; } #content.plain div.feature p{ display: inline-block; position: relative; text-align: center; width: 100%; } #content.plain img.team{ width:150px; height:150px; border-radius:100px; margin-left: 30px; } #content.plain section.clean div.team-member-photo{ float:right; } #content.plain section.clean div.team-member-photo{ float:right; } #content.plain section.clean div.team-member-photo img{ width:300px; height:300px; border-radius:180px; } #content.plain section.clean h2.jobtitle{ padding-left: 18px; } #content.plain section.clean a.team-member-profile-button{ margin: auto; width: 200px; display: block; } #content #content-menu { margin-bottom: 15px; margin-left: 32%; } #content #content-menu a { color: #1564ae; } #content #content-menu>li>a { padding: .5em 1em; } #content #content-menu>li>a.current { border-bottom: 2px solid #ef6332; color: #ef6332; } #content #content-menu ul:not(.menu) { min-width: 0; right: auto; left: 0; border-top-color: white; border-radius: 0 0 4px 4px; top: 25px; -webkit-box-shadow: none; box-shadow: none; } #content #content-menu ul:not(.menu) li:first-child .item { border-radius: 0; } .blogpost img{ max-width: 750px; } /* Search results --------------------------------------------------------------------------------------------------- */ #searchResultsTitle { font-size: 1.6em; } #searchResults .ui-widget-content { background: #f2f4f7; } #searchResults .ui-paginator.ui-paginator-top .ui-paginator-current { display: none; } #searchResults .ui-paginator.ui-paginator-bottom .ui-paginator-current { display: block; } #searchResults .searchResult { margin: 1em 0; } #searchResults .searchResult .info { position: relative; margin: 0 10px; background: white; border-radius: 4px; border: 1px solid #d6dae0; height: 100px; overflow: hidden; } #searchResults .searchResult .info .page-image { float: left; } #searchResults .searchResult .info .page-image img { border-radius: 3px 0 0 3px; border-right: 1px solid #d6dae0; } #searchResults .searchResult .info .page-info { margin: 0 100px; overflow: hidden; } #searchResults .searchResult .info .page-info .alias { display: inline-block; margin: 10px 15px 5px; padding: 0; font-size: 1.5em; color: #1564ae; } #searchResults .searchResult .info .page-info .alias i { margin: 0 .5em; font-size: 1em; color: #1d1e1e; } #searchResults .searchResult .info .page-info .page-status { font-size: .6em; } #searchResults .searchResult .info .page-info .owner { display: inline-block; margin: 0 15px; padding: 0; font-size: .9em; } #searchResults .searchResult .info .page-info .profile-picture { } #searchResults .searchResult .info .page-info .profile-picture img { margin-right: .5em; } #searchResults .searchResult .info .page-info .description { height: 60px; margin-top: -8px; overflow: hidden; } #searchResults .searchResult .info .page-info .owner-description { display: none; } #searchResults .searchResult .info .page-results { position: absolute; right: 0; border-left: 1px solid #d6dae0; } #searchResults .searchResult .info .page-results a { display: block; width: 100px; padding: 35px 0; text-align: center; } #searchResults .searchResult .info .page-results i { display: block; color: #a2a7aa; } #searchResults .searchResult .columns { margin: 1em 0 0; -webkit-columns: 2; -moz-columns: 2; columns: 2; } #searchResults .searchResult .columns .block { background: white; } #searchResults .searchResult .columns .link.block .link .i { position: absolute; left: -2em; height: 1.25em; width: 1.25em; text-align: right; color: #a2a7aa; margin-top: 2px; } #searchResults .searchResult .columns .link.block .link .actions a { text-decoration: underline; } #searchResults .searchResult .columns .link.block .link .match { display: block; margin-left: 20px; font-size: .8em; } #searchResults .searchResult mark { color: inherit; background-color: inherit; font-weight: bold; } .highlight { background-color: #fbf8a3; } /* Errorpages ------------------------------------------------------------------------------------------------------- */ #errorpage-detail pre { font-size: .9em; width: 100%; height: 300px; overflow: auto; } /* Markdown --------------------------------------------------------------------------------------------------------- */ .markdown h4, .markdown h5, .markdown h6 { margin: 1em 0 0 !important; padding: 0 15px !important; font-family: inherit !important; font-weight: 500 !important; color: inherit !important; background: inherit !important; } .markdown h4 { font-size: 1.6em; } .markdown h5 { font-size: 1.4em; } .markdown h6 { font-size: 1.2em; } .markdown blockquote { margin: 0 10px; border-left: 3px solid #d6dae0; } .markdown pre { overflow-x: auto; word-wrap: normal; } .markdown hr { height: 2px; margin: 0 10px; border: 0; color: #d6dae0; background: #d6dae0; } .markdown p { clear: left; overflow: hidden; } .markdown p img { float: left; margin-right: .5em; } .markdown li { margin-right: 10px; } .markdown li p { margin: 1em 0; overflow: visible; } .markdown { position: relative; } .markdown .content.limited { overflow: hidden; } .markdown .content.limited .actions { top: 12px; /* Awkward, yes. Is caused by overflow:hidden on nested paragraphs. */ } .markdown .content.limited.fadeout:after { width: 380px; height: 2em; bottom: 0; left: 0; } .markdown .actions { top: -3px; right: 0; } .markdown .editor { display: none; position: relative; } .markdown .editor.show { display: block; } .markdown .editor textarea { display: block; width: 350px; margin: 15px; padding: 0; border: 0; outline: 0; resize: vertical; font: inherit; background: #f2f4f7; } .markdown .editor .field { margin: 5px 15px; /* Block description checkbox. */ } .markdown .editor .field label.small { /* Block description checkbox label. */ display: inline; position: relative; top: -4px; padding: 0 4px; } .markdown .editor .actions { position: static; margin: 0 15px 1em 10px; text-align: right; } .markdown .editor .actions .help { float: left; line-height: 2em; } .markdown .more { position: absolute; display: none; right: -.5em; bottom: 0; } .markdown .more a { padding: .5em; text-decoration: none; color: #a2a7aa; } .markdown .more a:hover { color: inherit; } /* PrimeFaces Overrides (TODO: move to custom copy of primefaces.css ) ---------------------------------------------- */ .ui-inputfield, .ui-chkbox-box { background: #f2f4f7; } .ui-chkbox-box .ui-chkbox-icon { position: relative; top: -3px; left: 2px; } .ui-inputfield, .ui-selectonemenu { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ui-selectonemenu .ui-selectonemenu-label { color: inherit; line-height: 1.5em; width: 100% !important; } .ui-selectonemenu .ui-selectonemenu-trigger { background: #f2f4f7; border: 0; } .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon { margin-top: 12px; background: none; overflow: visible; text-align: center; } .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon:after { content: "\f104"; display: block; text-indent: 0; } .ui-autocomplete-panel, .ui-selectonemenu-panel, .ui-datepicker { z-index: 9996 !important; } .ui-selectonemenu-panel.fixed { width: 380px; position: fixed; } .ui-selectonemenu-panel .ui-selectonemenu-items-wrapper { border-radius: 4px; } .ui-selectonemenu-panel .ui-selectonemenu-table .ui-selectonemenu-item { height: 40px; border-color: white; } .ui-selectonemenu-panel .ui-selectonemenu-table .ui-selectonemenu-item i { width: 1em; text-align: center; } .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-disabled, .ui-selectlistbox-list .ui-selectlistbox-item.ui-state-disabled { display: none; } .ui-selectmanycheckbox label, .ui-selectoneradio label { margin: 2px 8px; font-weight: 400; } .ui-selectmanycheckbox.ui-state-error { border: 0; } .jcrop-holder { background: none !important; /* Remove black bg which is ugly on transparent images. */ } .jcrop-holder>input { top: 0 !important; /* ZEEF-1291 */ } .ui-dialog { width: auto !important; border: 0; background: white; -webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); z-index: 9995 !important; } .ui-dialog.form { /* Entry form dialogs. Modal, positioned absolute near top, not draggable, but scrollable with page. */ position: absolute; margin-top: 90px; } .ui-dialog.form.ui-overlay-hidden { /* Causes otherwise "magic" padding below footer. */ height: 0 !important; } .ui-dialog.confirm { /* Confirm dialogs. Modal, positioned fixed in center, not draggable and not scrollable with page. */ width: 380px !important; } .ui-dialog.help { /* Help dialogs. Non-modal, positioned fixed in center and draggable. */ width: 380px !important; background: #fbf8a3; } .ui-dialog.share { /* Share dialog. Non-modal, positioned automatically, not draggable, but scrollable with page, overflow visible. */ position: absolute; width: 380px !important; overflow: visible; } .ui-panel { padding: 0; } .ui-panel .ui-panel-titlebar { border-radius: 4px 4px 0 0; } .ui-panel .ui-panel-titlebar, .ui-dialog .ui-dialog-titlebar { font-size: 1.4em; font-weight: 500; padding: 0; background: #f2f4f7; } .ui-panel .ui-panel-titlebar .ui-panel-title, .ui-dialog .ui-dialog-titlebar .ui-dialog-title { position: relative; width: 510px; margin: 0; padding: 12px 20px; } .ui-panel .ui-panel-titlebar .ui-panel-title .faq, .ui-dialog .ui-dialog-titlebar .ui-dialog-title .faq { position: absolute; margin: 0; right: 0; font-size: .8em; } .ui-dialog.confirm .ui-dialog-titlebar .ui-dialog-title { width: 285px !important; } .ui-dialog.confirm .ui-dialog-content fieldset { width: auto; } .ui-panel .ui-panel-titlebar-close, .ui-dialog .ui-dialog-titlebar-close { margin: 0; border: 0; padding: 0; color: inherit; background: inherit; text-decoration: none; } .ui-panel .ui-panel-titlebar-icon, .ui-panel .ui-panel-titlebar-icon:hover, .ui-panel .ui-panel-titlebar-icon:focus { margin: 0 -50px 0 0; } .ui-dialog .ui-dialog-titlebar-close .ui-icon { margin: 0 15px; height: 2.4em; line-height: 2.4em; } .ui-dialog.help .ui-dialog-titlebar { font-size: 1.1em; } .ui-dialog.help .ui-dialog-titlebar { background: #ddc512; } .ui-dialog.help .ui-dialog-titlebar .ui-dialog-title { width: auto; padding: 5px 10px; } .ui-dialog.share .ui-dialog-titlebar .ui-dialog-title { width: 285px; } .ui-dialog.help .ui-dialog-titlebar-close .ui-icon { margin: 5px 9px; height: auto; line-height: inherit; } .ui-dialog .ui-dialog-titlebar .ui-dialog-title .link-to-dialog a { margin-left: 10px; font-size: .8em; color: #a2a7aa; } .ui-dialog .ui-dialog-content { padding: 0; overflow: visible; } .ui-dialog.help .ui-dialog-content { font-size: .8em; } #content-wrapper .ui-dialog-content fieldset { padding: .2em .8em; margin-bottom: 0; -webkit-box-shadow: none; box-shadow: none; } .ui-dialog.share .ui-dialog-content fieldset { width: auto; } .ui-state-highlight a { color: inherit; } .ui-paginator { margin: .5em 0; text-align: right; } .ui-paginator .ui-paginator-first.ui-state-disabled, .ui-paginator .ui-paginator-prev.ui-state-disabled, .ui-paginator .ui-paginator-next.ui-state-disabled, .ui-paginator .ui-paginator-last.ui-state-disabled { color: #e6e7e8; background: white; opacity: inherit; } .ui-paginator .ui-paginator-pages .ui-paginator-page, .ui-paginator .ui-paginator-first, .ui-paginator .ui-paginator-prev, .ui-paginator .ui-paginator-next, .ui-paginator .ui-paginator-last { height: 30px; min-width: 30px; padding: 0; border-radius: 4px; border: 1px solid #caccce; color: #a2a7aa; background: #f2f4f7; vertical-align: middle; text-align: center; line-height: 30px; } .ui-datatable .ui-paginator-prev { margin: 0; border-radius: 4px 0 0 4px; } .ui-datatable .ui-paginator-next { margin: 0; border-radius: 0 4px 4px 0; } .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active { font-weight: bold; color: #1d1e1e; border-color: #848a8e; } .ui-paginator *.ui-state-hover { color: #1d1e1e; border-color: #848a8e; } .ui-paginator .ui-paginator-rpp-options { margin: 0; height: 30px; } label.ui-state-error, .ui-widget-content label.ui-state-error { border: 0; color: inherit; background: none; } .ui-overlaypanel { border: 0; background: white; -webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); box-shadow: 0 0 9px 0 rgba(0,0,0,0.4); } .ui-tabs { padding: 0; border-bottom: 1px solid transparent; /* Fix collapsing margin. */ } .ui-tabs .ui-tabs-panel { padding: 0; } .ui-tabs.ui-tabs-top > .ui-tabs-nav { margin-bottom: 1em; padding-left: 0; } .ui-tabs .ui-tabs-nav { border-bottom: 1px solid #d6dae0; border-radius: 0; } .ui-tabs .ui-tabs-nav li { background: #f2f4f7; border-color: #d6dae0; } .ui-tabs .ui-tabs-nav li a { padding: .25em .5em; color: inherit; } .ui-tabs .ui-tabs-nav li.ui-state-active { background: white; } .ui-tabs .ui-tabs-nav li.ui-state-active a { margin-bottom: -1px; border-bottom: 1px solid white; } .ui-tabs .ui-tabs-nav li.ui-state-active { background: white; border-color: #d6dae0; } .ui-tabs .ui-tabs-nav li.ui-state-active a { margin-bottom: -1px; border-bottom: 1px solid white; } .ui-datalist.grid { margin: 10px; } .ui-datalist.grid ul { padding: 0; border: 1px solid #d6dae0; border-radius: 4px; list-style-type: none; } .ui-datalist.grid li { display: inline-block; width: 370px; padding: 7px 9px; border-left: 1px solid #d6dae0; margin-left: -1px; } .ui-datalist.grid li a { display: block; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sharing ---------------------------------------------------------------------------------------------------------- */ #share { float: left; width: 385px; height: 34px; margin-top: 1em; } .share-buttons .share-button { float: left; width: 30px; height: 30px; line-height: 30px; border-radius: 30px; margin-right: .5em; font-size: 1em; text-align: center; } .share-buttons .share-button.dialog-only, .share-buttons .share-button.mobile-only { display: none; } #shareDialog .share-button.dialog-only:not(.mobile-only) { display: inherit; } .share-buttons .share-button i { line-height: 1.5em; } .share-buttons a, .share-buttons a:hover, .share-buttons a:focus { display: block; height: 100%; border-radius: 30px; color: inherit; text-decoration: none; } #status #share { float: none; clear: left; padding: 0 .5em; } #disqus_thread { margin: 0 10px; } /* Normal screens (3-column layout) --------------------------------------------------------------------------------- */ /* This covers desktops more than 1200px and tablets (w=1024px) in landscape ---------------------------------------- */ @media screen, screen and (max-device-width: 1024px) and (orientation: landscape) { body { min-width: 1200px; } body .wrapped { width: 1200px; } body .wrapped.narrow { max-width: 800px; } } /* Medium screens (2-column layout) --------------------------------------------------------------------------------- */ /* This covers desktops less than 1200px and tablets (w=1024px) in portrait ----------------------------------------- */ @media print, screen and (max-width: 1199px) and (min-device-width: 1025px), screen and (max-width: 1023px) and (max-device-width: 1024px) and (orientation: portrait) { body { min-width: 800px; } body .wrapped { width: 800px; } #header h1.alias { width: 310px; } #search { left: 0; } #search>#searchMenu, #header h2.owner, #settings fieldset.page .right-side { display: none; } #searchMenuButton { display: block; } #notification { width: 380px; } #page .wrapped.plain fieldset { width: 359px; } #page.banner #info { width: 760px; } #settings fieldset.page { padding-right: 1em; } #home h2 { font-size: 3em; } .blocks .home.block.col2wide { width: 782px; } #footer { height: 575px; } #footer section.col2wide { width: 370px; } .blocks .columns { -webkit-columns: 2; -moz-columns: 2; columns: 2; } .blocks .columns .break { display: none; } #createPageForm .subtitle { position: static; } #content #content-menu { margin-bottom: 15px; margin-left: 0%; } #content #content-menu>li>a { padding: .5em .5em; } #content.plain { padding: 20px 0 0 0px; } #content.plain img.team { width: 100px; height: 100px; border-radius: 100px; margin-left: 28px; } .faq img { width: 350px; height: 350px; } .faq h2 { font-size: 1.2em; } #content.plain section.clean div.team-member-photo img { width: 150px; height: 150px; border-radius: 180px; } #content.plain section.clean a.team-member-profile-button { margin: auto; width: 200px; display: block; } article.clean.blog { width: 400px !important; } #content.plain { padding: 20px 0 0 0px; } .blog-paginator { left: -3%; position: relative; width: 105%; } } /* Small screens (1-column layout) ---------------------------------------------------------------------------------- */ /* This covers desktops less than 800px and mobiles (w=768px) in any orientation ------------------------------------ */ /* WARNING: this doesn't "extend" from 2-column layout selectors! Best copypaste the same selectors ----------------- */ @media screen and (max-width: 799px) and (min-device-width: 769px), screen and (max-width: 767px) and (max-device-width: 768px) { body { min-width: 400px; font-size: 17px; } body .icon { font-size: 1.1em; } body .wrapped { width: 400px; } #header-wrapper { height: 54px; } #header { padding: 7px 0; } #navPanel, #hamburger { display: block; } #logo { margin: -3px 0; height: 42px; text-align: center; overflow: hidden; } #header h1.alias { width: 275px; margin-left: 50px; text-align: center; } #search { left: 0; } #searchMenuButton .search-menu, #search>#searchMenu, #user, #header h2.owner, #pageTags, #page:not(.home) .blocks .block .body, #tabs { display: none; } /* Exception for first linkblock on the page */ #page:not(.home) .blocks .block.link:first-of-type .body { display:block; } #searchMenuButton, #searchMenuButton .create-page { display: block; } #searchMenuButton #searchMenu { margin-top: 20px; } #searchMenuButton>li>a>i { line-height: 1.5em; } #searchForm ul.menu ul:not(.menu) { right: -2.5em; } #searchFilterMenu fieldset { width: 340px; } #content-wrapper { padding-top: 54px; } #status { padding: 2.5em 0 3.5em; } #notification { width: 380px; margin-bottom: 1em; } #page.banner #info { width: 380px; padding-left: 0; padding-right: 0; } #page.banner #info, #page #info { padding-bottom: 3.5em; } #info-wrapper { margin-bottom: 1em; } #pageAction { top: auto; bottom: 1em; } #page.banner #pageAction { right: .75em; } #alias, #owner { font-size: .7em; } #pageTitle>#alias { display: block; } #pageTitle>#owner { display: block; float: left; } #owner h2 { padding: 10px 15px; } #owner h2 img { width: 20px; height: 20px; } #competingPages { position: absolute; right: 1em; bottom: .5em; } #pageDescription { width: auto; } #info:not(.no-picture) #pageTitle>#alias { margin-left: 45px; } #info:not(.no-picture) #pagePicture { margin-top: -85px; padding-right: 0; } #info:not(.no-picture) #pagePicture img { width: 30px; height: 30px; } #actions-top { float: left; margin-top: -91px; margin-left: .25em; } #page.banner #actions-top { margin-left: 1em; } #actions-top ul.menu { white-space: inherit; text-align: right; } #actions-bottom ul.menu.right { white-space: inherit; float: none; text-align: center; } #settings fieldset.page { padding-right: 1em; } #page .sendEmailButton { display: inline; } #home h2 { font-size: 3em; } .blocks .home.block.col2wide { width: 382px; } #page:not(.home) .blocks .block { margin-bottom: -1px; } #page:not(.home) .blocks { margin-bottom: 1em; } .blocks .block h3 .title { cursor: pointer; } #page .blocks .link.block h3 { padding: 15px; } .blocks .link.block li.link ul.menu { right: 0; } #footer section.col2wide { width: inherit; } #footer section.col2wide .subsection { float: left; width: 380px; padding: 10px; } #footer { height: 770px; } #content.plain article, #content.plain>fieldset, #content.plain form fieldset { width: auto; } #page .wrapped.plain fieldset, #settings #page-banner-image-empty a, #settings .field.google-result .url { width: 348px; } .blocks .columns, #searchResults .searchResult .columns { -webkit-columns: 1; -moz-columns: 1; columns: 1; } .blocks .columns+.break { border-bottom: 0; } .blocks .add.block { margin-top: 1em; margin-bottom: 1em; } fieldset .split .cell { display: block; margin: 0 auto; } fieldset .split .rule { width: inherit; border-top: 1px solid #d6dae0; margin: 40px 40px 20px; } fieldset .split .rule>div { left: -50%; top: -.5em; } .ui-dialog { width: 380px !important; } .ui-panel .ui-panel-titlebar .ui-panel-title, .ui-dialog .ui-dialog-titlebar .ui-dialog-title { width: 285px; } .ui-selectonemenu-panel.fixed { width: 350px; } form .simulate-input { width: 360px; } #content.plain>fieldset, #content.plain article fieldset, #content.plain form fieldset { width: 360px; padding: .5em 10px; } #content.plain article img.full-width { width: 334px; } #content-wrapper .ui-dialog-content fieldset { width: auto; } .share-buttons .share-button.mobile-only:not(.dialog-only), #shareDialog .share-button.mobile-only { display: inherit; } #searchResults .searchResult .info { height: 200px; } #searchResults .searchResult .info .page-image img { border-radius: 3px 0 0 0; } #searchResults .searchResult .info .page-info { margin-right: 0; } #searchResults .searchResult .info .page-info .owner { display: block; margin: 10px 15px; } #searchResults .searchResult .info .page-info .description { height: 110px; } #searchResults .searchResult .info .page-results { top: 100px; right: auto; border-right: 1px solid #d6dae0; border-left: 0; } body.full #home { margin: 10px auto; } #trending #hubs li a { width: 185px; } #trending #hubs li img { width: 185px; height: 63px; } #content.plain #createPageForm h2, #content.plain #createPageForm h2+p { width: auto; padding: 0 11px; font-size: 1.2em; } #createPageForm .subtitle { position: static; } #createPageForm .image:before, #createPageForm .image:after { display: none !important; } ul.menu.content>li { position: relative; padding: 0 .15em; } /* Mobuile UI: Hide as much as possible screen noise. */ #settings .right-side, #actions-top .toggleSection, #actions-top .toggleCondensedView, #actions-top .menu.right .share, #actions-bottom .menu.left, #actions-bottom .menu.right li:not(.share), #profile-breadcrumb, #content .togglableSection, #page .blocks .block .sorter[data-order=e], #page .blocks .block .sorter[data-order=c], #page .blocks .block .sorter i.ion-arrow-down-b, #page .blocks .block .title i.ion-information, #page .blocks .link.block li.link .number, .qtip-zeef, .hideOnSmall { display: none !important; } /* Mobuile UI: Remove border radius. */ #page.banner #info, #page .wrapped.plain, #page .blocks .block h3, #page .blocks .block { border-radius: 0; } #call-to-action>div>span>iframe{ width: 362px !important; } #call-to-action>div>span{ max-width: 374px !important; } #call-to-action{ max-width: 374px !important; } }