/* Stylesheet for WikklyText You should not make local changes here. Instead, edit the 'StyleSheet' item in your wiki and override the styles you want to change. The comments show the associated WikklyText markup. Note that the 'wikkly-' prefix is attached to all names. This is to avoid any conflicts with other .css files you might have included, or that might be included with Drupal, etc. When using these styles from within WikklyText you do NOT need to add the 'wikkly-' prefix. For example, to use 'wikkly-indent' as an inline CSS style, do: {{indent{ ... content ... }}} */ /******************************************************************* Page-level styling. Applies only when an entire page is rendered. Pages are rendered into the following DIVs: wikkly-outside-container: Contains title + menu + content. wikkly-title-container: Contains just the title area. wikkly-navmenu-container: Contains the navigation menu. wikkly-content-container: Contains the rendered text. wikkly-footer-container: The page footer area. ********************************************************************/ /* used for in standalone documents */ body.wikkly-body { background: #205f26; font: 12px/170% Verdana; padding: 0px; margin: 0px; } /* spacer on top of wikkly-outside-container (just adding a margin-top to outside-container does not work everywhere) */ div.wikkly-top-spacer { height: 10px; margin: 0px; padding: 0px; } /* the single
inside */ div.wikkly-outside-container { width: 90%; margin-top: 0px; margin-left: 20px; padding-top: 10px; background: white; padding-left: 10px; padding-right: 10px; padding-bottom: 20px; border: 3px solid #222222; min-height: 600px; /* for small items, make sure navitem is inside me */ } /* the
for the footer area */ div.wikkly-footer-container { font-size: 0.75em; text-align: center; color: #cccccc; } a.wikkly-footer-content:link { color: white; } a.wikkly-footer-content:visited { color: white; } /* the
for the title area */ div.wikkly-title-container { padding-bottom: 1em; margin-bottom: 0em; } /* the
for the navigation menu area */ div.wikkly-navmenu-container { border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; float: left; width: 15%; min-width: 80px; font-size: 80%; overflow: hidden; /* IE7 shows overflow in highlighting */ background: white; /* in case I overflow content box, at least I'll have a bgcolor */ } /* keep search box from overflowing navmenu */ input.wikkly-navmenu { width: 90%; } /* list items for navmenu */ ul.wikkly-navmenu { list-style-type: none; list-style-position: inside; margin-left: 0px; padding-left: 1em; padding-top: 0.5em; } li.wikkly-navmenu { padding-left: 0.5em; display: block; } li.wikkly-navmenu:hover { background: #ffff00; } /* currently selected (not just hovered-over) menu item */ li.wikkly-navmenu-focused { padding-left: 0.5em; background: #eeeeee; display: block; } /* for links in the navmenu */ a.wikkly-navmenu { color: blue; text-decoration: none; width: 100%; display: block; } /* only for IE -- it doesn't honor the :hover defined above */ a.wikkly-navmenu:hover { background: #ffff00; } input.wikkly-navmenu { font-size: 0.9em; } /* the
for the rendered content */ div.wikkly-content-container { width: 80%; margin-left: 15%; min-width: 300px; } /* for SiteTitle */ .wikkly-site-title { font-size: 1.8em; font-weight: bold; color: #a05318; } /* for SiteSubtitle */ .wikkly-site-subtitle { font-size: 0.9em; color: #a05318; } /* outer box for individual item */ .wikkly-item-container { } /* box for individual item header (includes title, taglines, ...) */ .wikkly-item-header { border-bottom: 1px solid #bbbbbb; border-top: 1px solid #bbbbbb; background: #eeeeee; margin-bottom: 0.8em; padding: 0.5em; width: 100%; } /* individual tiddler title */ .wikkly-item-title { font-size: 1.4em; font-weight: bold; color: #a05318; } /* content portion of an individual item */ .wikkly-item-content { margin-bottom: 2em; padding-left: 0.5em; padding-right: 0.5em; } /* for editing page */ .wikkly-edit-textarea { width: 100%; font: 10px/120% Courier; } .wikkly-edit-input { width: 55%; font: 10px/120% Courier; } /* for forms */ fieldset.wikkly-form { border: none; } /************************************************************ Core styling - used at the markup level independent of overall page layout. (Not all of these map to a specific piece of markup, but all are assumed to be present by the wikklytext core.) ************************************************************/ /* internal links */ a.wikkly-a-internal { text-decoration: none; } /* links to unknown items (either unknown CamelWords or [[Unknown Name]]). The idea being that the user is given a link they can click to create the item. */ a.wikkly-a-unknown-item { text-decoration: none; color: red; border-bottom: 1px dashed red; } /* external links - show image after link to give visual cue */ a.wikkly-a-www:after { content: url(img_link_www.png); /* don't have to add 'css/' since it is relative */ } /* __underline__ */ .wikkly-u { text-decoration: underline; } /* --strike through-- */ .wikkly-strike { text-decoration: line-through; } /* a convenient style, useful to indent a block as {{indent{ ... }}} */ .wikkly-indent { margin-left: 3em; } /* monospace style, like in HTML */ .wikkly-tt { font-family: monospace; font-weight: bold; } /* "grayed out" text (usage: {{grayout{ ... }}}) */ .wikkly-grayout { color: #999999; } /* for displaying errors that occurred */ .wikkly-error-container { margin-left: 1em; margin-right: 1em; margin-top: 2em; margin-bottom: 2em; border: 2px solid #da0000; } /* for the "Generated by ..."
*/ .wikkly-generated-by { margin-top: 5em; padding-left: .8em; font-size: .85em; color: #999999; } /* for internally-generated error messages */ .wikkly-error-head { color: yellow; background: #da0000; font-weight: bold; padding-left: 1em; padding-right: 1em; padding-top: 0.4em; padding-bottom: 0.4em; } .wikkly-error-body { background: #cccccc; border: 1px solid #999999; color: black; font-family: monospace; padding-left: .8em; padding-right: .8em; padding-top: .8em; padding-bottom: .8em; text-align: left; /* in case I'm inside another block */ } /* {{{ Block of code }}} */ .wikkly-code-block { background: #eeeeee; border: 1px solid #cccccc; color: black; font-family: monospace; padding-left: .8em; padding-right: .8em; padding-top: .8em; padding-bottom: .8em; margin-left: 1em; margin-right: 1em; margin-top: 1em; margin-bottom: 0em; overflow: auto; text-align: left; /* in case I'm inside another block */ } /* {{{inline code}}} */ .wikkly-code-inline { background: #eeeeee; border: 1px solid #cccccc; color: black; font-family: monospace; padding-left: .3em; padding-right: .3em; overflow: auto; } /* ---- */ .wikkly-separator { /* from: http://www.blakems.com/experimental/hr/ */ border: none 0; border-top: 1px dashed #000;/*the border*/ width: 100%; height: 1px;/*whatever the total width of the border-top and border-bottom equal*/ } /* @@highlighted text@@ */ .wikkly-highlight { color: #da0000; font-weight: bold; } /* Tables (define , ,
,
, and ) */ .wikkly-table { border: 1px solid #888888; border-collapse: collapse; padding: 1em; margin: 1em; /* if you want centered tables ... */ /*margin-left: auto; margin-right: auto;*/ /* font-size: .9em;*/ } .wikkly-caption { font-weight: bold; } .wikkly-tr { border: 1px solid #888888; border-collapse: collapse; } .wikkly-th { border: 1px solid #888888; border-collapse: collapse; padding-left: .4em; padding-right: .4em; padding-top: .2em; padding-bottom: .2em; background: #f5f298; } .wikkly-td { border: 1px solid #888888; border-collapse: collapse; padding-left: 0.5em; padding-right: 0.5em; padding-top: .5em; padding-bottom: .5em; background: #fffff5; } /* !Heading Allowed to use up to 6 levels. */ .wikkly-h1 { color: white; background: #1e5918; /* use px so all headers are offset by same amount */ padding-left: 10px; padding-top: 0.3em; padding-bottom: 0.3em; margin: 0; } .wikkly-h2 { color: white; background: #1e5918; padding-left: 10px; padding-top: 0.15em; padding-bottom: 0.15em; margin: 0; } .wikkly-h3 { color: white; background: #1e5918; padding-left: 10px; padding-top: 0.15em; padding-bottom: 0.15em; margin: 0; } .wikkly-h4 { color: white; background: #1e5918; padding-left: 10px; padding-top: 0.2em; padding-bottom: 0.2em; margin: 0; } .wikkly-h5 { color: white; background: #1e5918; padding-left: 10px; padding-top: 0.2em; padding-bottom: 0.2em; margin: 0; } .wikkly-h6 { color: white; background: #1e5918; padding-left: 10px; padding-top: 0.2em; padding-bottom: 0.2em; margin: 0; } /* <<< Block-Indent <<< */ .wikkly-block-indent { border-left: 1px solid blue; margin-left: 1em; margin-top: 1em; margin-bottom: 1em; padding-left: 1em; overflow: auto; text-align: left; /* in case I'm inside another block */ } /* >> Line indent > Line */ .wikkly-line-indent { border-left: 1px solid blue; margin-left: 1em; margin-top: 1em; margin-bottom: 1em; padding-left: 1em; overflow: auto; text-align: left; /* in case I'm inside another block */ } .wikkly-img { /* border: 2px;*/ } /* # list items (numbered lists) Allow 6 levels. IMPORTANT! You should NOT specify indenting here on a per-level basis. Let the browser take care of that. This is important when you have for example: * ## *** To the browser, '***' is a SECOND-LEVEL
    , not a third-level, so it will use the 2nd level symbol. The wikkly-to-html code copies this behaviour when picking classes from below. Trying to force indenting at this level will screw up formatting when you have mixed lists. */ .wikkly-ol-li1 { list-style-type: decimal; /* list-style-image: none; list-style-position: outside; background: transparent;*/ text-align: left; } .wikkly-ol-li2 { list-style-type: lower-alpha; /* list-style-image: none; list-style-position: outside; background: transparent;*/ } .wikkly-ol-li3 { list-style-type: lower-roman; /* list-style-image: none; list-style-position: outside; background: transparent;*/ } .wikkly-ol-li4 { list-style-type: decimal; /* list-style-image: none; list-style-position: outside; background: transparent;*/ } .wikkly-ol-li5 { list-style-type: lower-alpha; /* list-style-image: none; list-style-position: outside; background: transparent;*/ } .wikkly-ol-li6 { list-style-type: lower-roman; /* list-style-image: none; list-style-position: outside; background: transparent;*/ } /* * list items (unnumbered lists) Allow 6 levels. */ .wikkly-ul-li1 { /* list-style-type: disc; list-style-image: none; list-style-position: outside;*/ /* background: transparent;*/ text-align: left; /* margin-left: 3em;*/ } .wikkly-ul-li2 { /* list-style-type: circle; list-style-image: none; list-style-position: outside; background: transparent;*/ } .wikkly-ul-li3 { /* list-style-type: square; list-style-image: none; list-style-position: outside; background: transparent;*/ } .wikkly-ul-li4 { /* list-style-type: disc; list-style-image: none; list-style-position: outside; background: transparent;*/ } .wikkly-ul-li5 { /* list-style-type: circle; list-style-image: none; list-style-position: outside; background: transparent;*/ } .wikkly-ul-li6 { /* list-style-type: square; list-style-image: none; list-style-position: outside; background: transparent;*/ } /* Definitions lists: ;Term :Definition */ .wikkly-dl { } .wikkly-dt { font-weight: bold; } .wikkly-dd { } /* Styles used in wikCoreMacros.py */ /* <> */ div.wikkly-warnbox-container { margin-left: 1em; margin-right: 6em; margin-top: .5em; margin-bottom: .5em; } div.wikkly-warnbox-title { text-align: center; font-weight: bold; border: 1px solid #000000; background: #da0000; color: #ffffff; padding-top: 3px; padding-bottom: 3px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; } div.wikkly-warnbox-body { border: 1px solid #888888; background: #eeeead; color: #000000; padding-left: 1em; padding-right: 1em; padding-top: 0.8em; padding-bottom: 0.8em; } /* for <> (boxes with no title) */ div.wikkly-warnbox-mini { margin-left: 1em; margin-right: 6em; margin-top: .5em; margin-bottom: .5em; border: 2px solid #da0000; background: #eeeead; color: #000000; padding-left: 1em; padding-right: 1em; padding-top: 0.8em; padding-bottom: 0.8em; } /* <> */ div.wikkly-notebox { border: 1px solid #888888; background: #fcf9ab; color: #000000; margin-left: 1em; margin-right: 6em; margin-top: .5em; margin-bottom: .5em; padding-left: 1em; padding-right: 1em; padding-top: 0.8em; padding-bottom: 0.8em; } /* <> */ div.wikkly-infobox-container { margin-left: 1em; margin-right: 6em; margin-top: .5em; margin-bottom: .5em; } div.wikkly-infobox-title { text-align: center; font-weight: bold; border: 1px solid #000000; background: #318c37; color: #ffffff; padding-top: 3px; padding-bottom: 3px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; } div.wikkly-infobox-body { border: 1px solid #888888; background: #dcd6bd; color: #000000; padding-left: 1em; padding-right: 1em; padding-top: 0.8em; padding-bottom: 0.8em; } /* for <> (no title bar) */ div.wikkly-infobox-mini { margin-left: 1em; margin-right: 6em; margin-top: .5em; margin-bottom: .5em; border: 2px solid #888888; background: #b5d689; color: #000000; padding-left: 1em; padding-right: 1em; padding-top: 0.8em; padding-bottom: 0.8em; } /* <> */ div.wikkly-codebox-container { margin-left: 1em; background: #eeeeee; margin-top: .5em; margin-bottom: .5em; overflow: auto; } /* The title for the code box */ div.wikkly-codebox-title { background: #555555; color: #ffff00; font-weight: bold; padding-left: .8em; padding-right: .8em; padding-top: 4px; padding-bottom: 4px; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; } /* The code itself */ div.wikkly-codebox-body { background: #eeeeee; color: black; font-family: monospace; padding-left: .8em; padding-right: .8em; padding-top: 4px; padding-bottom: 4px; border: 1px solid #cccccc; overflow: auto; text-align: left; /* in case I'm inside another block */ } /* -------------------------------------------------------------------------- Backwards-compatibility - I initially defined these without the 'wikkly-' prefix, so I need to keep them for existing generated content. Eventually these will go away so don't use in any new macros. -------------------------------------------------------------------------- */ /* <> */ div.infobox-container { margin-left: 1em; margin-right: 3em; margin-top: 1em; margin-bottom: 1em } div.infobox-title { text-align: center; font-weight: bold; border: 1px solid #000000; background: #318c74; color: #ffffff; padding-top: 3px; padding-bottom: 3px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; } div.infobox-body { border: 1px solid #888888; background: #e3efef; color: #000000; padding-left: 1em; padding-right: 1em; padding-top: 0.8em; padding-bottom: 0.8em; } /* <> */ div.codebox-container { margin-left: 1em; background: #eeeeee; margin-top: 1em; margin-bottom: 1em; overflow: auto; } /* The title for the code box */ div.codebox-title { background: #555555; color: #ffff00; font-weight: bold; padding-left: .8em; padding-right: .8em; padding-top: 4px; padding-bottom: 4px; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; } /* The code itself */ div.codebox-body { background: #eeeeee; color: black; font-family: monospace; padding-left: .8em; padding-right: .8em; padding-top: 4px; padding-bottom: 4px; border: 1px solid #cccccc; overflow: auto; text-align: left; /* in case I'm inside another block */ } /* <> */ div.warnbox-container { margin-left: 1em; margin-right: 3em; margin-top: 1em; margin-bottom: 1em } div.warnbox-title { text-align: center; font-weight: bold; border: 1px solid #000000; background: #ff0000; color: #ffffff; padding-top: 3px; padding-bottom: 3px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; } div.warnbox-body { border: 1px solid #888888; background: #eeeead; color: #000000; padding-left: 1em; padding-right: 1em; padding-top: 0.8em; padding-bottom: 0.8em; } /* Styles used for test/demo purposes. Don't rely on these being here in future versions. NOTE: These are meant to be copied & pasted to TiddlyWiki as part of the test suit. TiddlyWiki doesn't accept '-' in style names, so I use underscores for these. */ .wikkly-test_overline { text-decoration: overline; }