User:RainbowJester/vector.css

/* -- Kingdompedia Green (vector skin) -- * Adapted from http://kingdompedia.emeraldkingdom.com/skins/vector/screen.css.

/* - Background - * (A pale green color, with an image of Marks aligned top-left, repeating to fill the page - * the image will tile to fill any screen-size or page length).

body { background: #FAFFFA url("http://kingdompedia.emeraldkingdom.com/images/d/d4/VSBackgroundTile.png") top left; background-repeat:repeat; }

/* - Header - * This is the MediaWiki header, which stretches across the top of Kingdompedia. * (It's colored the same as the background and has a shorter version of the Marks image over the top * - which, when aligned bottom-left, tiles seamlessly with the background image. * The header image is repeated, and will tile if it's too short to fill wider screens.)

background: #FAFFFA; }
 * 1) mw-head-base {

background: #FAFFFA url("http://kingdompedia.emeraldkingdom.com/images/7/76/VSHeader.png") left bottom; background-repeat:repeat; }
 * 1) mw-head {

/* - Main page box - * This is the bit where the contents of wiki pages sit. * It *could* have a background image - but readability is important. * (Ours is the default plain white, with a 1-pixel dotted green border. * The default background border image has been removed). border: 1px dotted #228b68; background-image:none; }
 * 1) content {
 * 1) content {

div#content { margin-left: 10em; padding: 1em; background-image: none; }

/* - Side nav - */ * (The nav-bar down the left side. * The section headings are bold, and colored to match the page border. * We also have some matching horizontal break images).

width:300px; }
 * 1) mw-panel {

div#mw-panel div.portal h5 { font-weight: bold; color: #106b4c; }

div#mw-panel div.portal div.body { background-image: url("http://kingdompedia.emeraldkingdom.com/images/4/4e/VSHorizontalbreak2.png"); }

/* - Tool box & footer - * (These two things are lumped together here because they have the same background & border properties - none. * This makes them transparent - to match in with the nav-bar, which shows the background image behind its contents. * We could have a separate background image for these, or a solid color - but the background Mark image showing  * through is pretty! I have only checked Safari, Firefox and Chrome for transparentness-compatibility). border: none; background:none; }
 * 1) p-tb,#footer {
 * 1) p-tb,#footer {

/* - Tabs - * (These are the page tabs at the top. * The tabs use one background image, with little break images in front of them.  * Ours are green gradient images, with the background image being partially transparent to blend in  * gradually with the header. Safari, Chrome and FireFirefox are fine with this - but I haven't checked others yet). div.vectorTabs { background-image: url("http://kingdompedia.emeraldkingdom.com/images/3/3c/VSTabsbg.png"); }

div.vectorTabs ul li { background:none; } div.vectorTabs li a { background-image: url("http://kingdompedia.emeraldkingdom.com/images/6/6d/VSVertical_brk2.png"); }

div.vectorTabs li.selected { background:none; }

/* - Table of contents - float:right; border:1px solid #bae9ba; background-color:#e7ffe7; margin:10px; }
 * (This colors the automatically generated tables of contents green, instead of the usual blue,
 * and aligns it to the right of the page instead of the left.)
 * 1) toc {
 * 1) toc {

/* - Categories - * (These are the little bars that appear across the bottom of categorized pages. * Ours are green, rather than the usual blue). .catlinks { border: 1px solid #bae9ba; background-color: #e7ffe7; padding: 5px; margin-top: 1em; clear: both; }