User:DominicMauro/myskin.css

/* ******************************** */ /* GLOBAL                          */ /* ******************************** */

/* the globalwrapper font-family is the only font-family statement throughout; all font sizes used are absolute (to avoid the problem of nesting: 'small' of '70%' of '12.5px'); font size system used is: 14px for body text, 12px for tables and 10px for header/footer; 0.92: the footer sticking method of http://www.themaninblue.com/writing/perspective/2005/08/29/ has been adapted which means that major elements are no longer pushed down to make room for the header - instead #content has been given top- and bottom-padding to make room for the header and footer, respectively;

html, body, #globalWrapper {height: 100% !important;}  /* footerstick */ body {background: none !important;} #globalWrapper { font-family: Verdana, Arial, Sans-Serif !important; font-size: 14px !important; }

/* ******************************** */ /* CONTENT                         */ /* ******************************** */

/* 'column content' is a wrapper for 'content' which contains a heading and bodyContent; column-content and content both start at the top and end at the bottom of the page but content is given top and bottom padding to leave room for the header and footer, respectively; z-indexing is needed for colum-content (z=1) to defer to the header and footer (z=10); a width of 80% and auto-margins left and right result in 10% empty space on each side;

#column-content { position: relative !important; float: none !important; z-index: 1 !important; clear: both !important; width: 80% !important; min-height: 100% !important; /* footerstick */ margin: 0 auto !important; } #content { border: none !important; margin: 0 !important; padding: 225px 0 200px !important; /* footerstick */ background: none !important; text-align: justify !important; }

/* ******************************** */ /* COLMN-ONE                       */ /* ******************************** */

/* Column-one is the header, containing all portlets (.portlet) - menus, article tabs, search box, logo etc.; it is at the end of the html so to get it at the top, it is positioned absolutely; z-indexing is needed for the header (z=10) to overlap colum-content (z=1); 90% width means 10% empty space to the right matching the 10% to the right of column-content;

#column-one { position: absolute !important; z-index: 10 !important; top: 0px !important; width: 90% !important; height: 175px !important; border: none !important; margin: 0 !important; padding: 0 !important; padding-top: 4px !important; background-color: #3371A3 !important; font-size: 10px !important; } .pBody { border: none !important; padding: 0 !important; background-color: transparent !important; }

/* ********************************* */ /* PORTLETS/MENUS                   */ /* ********************************* */

/* 0.93: No portlets deleted. These settings apply to all portlets and are as such default portlet settings but they are in many cases overruled by id selectors (except for the menus in the top right corner such as p-navigation, p-tb, p-interaction, and p-lang which are not given 'special treatment'); this way obviates the need to list those menus - something that would be problematic as they go by different names from site to site; they are kept as position: relative in order to float them right; an unfortunate by-product of this is that they reverse order: p-navigation being first ends up right-most etc.; display: block is used as the simplest way to rid them of list paraphernalia; the foreign language sister links are trimmed to a list of the top nine (excl. japanese);

.portlet { display: block !important; overflow: visible !important; float: right !important; clear: both !important; width: 100px !important; max-height: 150px !important; margin: 0 !important; padding: 0 !important; padding-right: 10px !important; line-height: 1.75em !important; text-align: right !important; text-transform: lowercase !important; } .portlet .pBody { display: none !important; position: absolute !important; text-align: left !important; } .portlet:hover .pBody { display: block !important; top: 0 !important; right: -100px !important; } .portlet ul, .portlet li { display: block !important; width: 100px !important; margin: 0 !important; padding: 0 !important; line-height: 1.75em !important; } #p-tb ul, #p-interaction ul {margin-top: 4px !important;} .portlet li {padding-left: 10px !important;} .portlet li:first-child {padding-bottom: 1px !important;}

.portlet * {font-weight: normal !important;} .portlet h5 { padding: 0 !important; cursor: pointer !important; color: white !important; line-height: 1.75em !important; } .portlet a { color: inherit !important; background-color: transparent !important; }  .portlet a:hover {color: #99B8D1 !important;}			/* a mix of white and header color */

/* language class selectors - see http://en.wikipedia.org/wiki/List_of_Wikipedias#By_article_count */ #p-lang li	:not(.interwiki-de) :not(.interwiki-en) :not(.interwiki-es) :not(.interwiki-fr) :not(.interwiki-it) :not(.interwiki-nl) :not(.interwiki-pl) :not(.interwiki-pt) :not(.interwiki-sv) {display: none !important;}

/* ******************************** */ /* P-LOGO                          */ /* ******************************** */

/* 0.92: p-logo now actually fullfills its role as the logo-/headergraphic container; see 'HEADER BACKGROUND IMAGES' sections for individual images (one for each domain);

#p-logo { width: 700px !important; margin: 0 !important; } #p-logo .pBody {display: block !important;} #p-logo a, #p-logo a:hover { display: block !important; width: 700px !important; height: 150px !important; background-position: top left !important; }

/* ********************************* */ /* SEARCH BOX                       */ /* ********************************* */

/* The search box is dropped to just below the right bottom of column-one by absolute positioning; */

#p-search { display: none !important; position: absolute !important; right: 0 !important; bottom: -30px !important; height: 30px !important; width: auto !important; margin: 0 !important; padding-right: 0 !important; } #p-search .pBody { display: block !important; position: relative !important; margin-top: 5px !important; } #p-search:hover .pBody {right: 0 !important;} #p-search h5 {display: none !important;}

/* ******************************** */ /* P-CACTIONS                      */ /* ******************************** */

/* the article tabs menu; as with p-personal it's dropped to the bottom of the header by absolute positioning (in this case -25px to have it exactly beneath the header); left: 11.11% (1/9) is an approximation of the 10% to the left of column-content: 11.11% of (column-one's) 90% of body width ~= 10% of body width; the effect is to left align p-caction with content; selected tab(s) are moved up 25px ('flipped'); z-indexing (z=5) is needed in order to overrule p-personal (z=4) in case of conflict (narrow window); a few settings are inserted in order to overrule our own 'default' portlet settings (see above); vertical centering is achieved by vertical alignment & height=line-height (same in p-personal and footer); talk pages with no entries are indicated by inserting text (" NEW") after the link;

#p-cactions { position: absolute !important; z-index: 5 !important; top: auto !important; bottom: -25px !important; left: 11.11% !important; width: auto !important; margin: 0 !important;				/* overrule .portlet */ overflow: visible !important;			/* overrule .portlet */ } #p-cactions .pBody { display: block !important; position: relative !important; } #p-cactions:hover .pBody {right: auto !important;} #p-cactions ul, #p-cactions li {width: auto !important;} #p-cactions li { position: relative !important; float: left !important; padding: 0 !important; border: none !important; vertical-align: middle !important; height: 25px !important; line-height: 25px !important; color: black !important;			/* overrule .portlet */ }

#p-cactions li.selected {top: -25px !important;} #p-cactions li.selected a:hover {color: black !important;}

#p-cactions li a { padding: 0 15px !important; text-transform: uppercase !important; } li#ca-talk.new a:after {content: " (NEW)" !important;}

/* ******************************** */ /* P-PERSONAL                      */ /* ******************************** */

/* profile links; as with p-tabs dropped to the bottom by absolute positioning (top-bottom-left-and-right all have to be invoked to combat default placing); display as block/tablecell works (not sure why, though) to get the list items on a straight line; z-indexing (z=4) is needed in order to defer to p-cactions (z=4) in case of conflict (narrow window);

#p-personal { top: auto !important; bottom: 15px !important; left: auto !important; right: 0 !important; } #p-personal h5 {display: block !important;} #p-personal li { background-image: none !important; text-align: left; text-transform: lowercase !important; color: black !important; } /* #p-personal { display: block !important; position: absolute !important; z-index: 4 !important; top: auto !important; bottom: 0 !important; left: auto !important; right: 0 !important; width: auto !important; margin: 0 !important; padding-right: 0 !important; } #p-personal .pBody { display: block !important; position: relative !important; } #p-personal:hover .pBody {right: auto !important;} #p-personal ul, #p-personal li {width: auto !important;} #p-personal ul {padding: 0 !important;} #p-personal li { display: table-cell !important; padding: 0 10px !important; vertical-align: middle !important; height: 25px !important; line-height: 25px !important; background-image: none !important; color: white !important; }

#p-personal li a {text-transform: lowercase !important;} #p-personal li a:hover {padding-bottom: 0 !important;}

/* ******************************** */ /* FOOTER                          */ /* ******************************** */

/* negative top-margin (equal to height) means footer height does not add to column-content's min-height: 100% - footer is dragged up into content's bottom-padding of 200px; 90% width means 10% empty space to the right matching the 10% to the right of column-content; content is trimmed for a more minimalist feel (copyright notice and icons have to go); list items are deliberately right-floated individually to reverse order ("the first shall be the last");

#footer { position: relative !important; z-index: 10 !important; width: 90% !important; height: 100px !important; border: none !important; margin: 0 !important; margin-top: -100px !important; /* footerstick */ padding: 0 !important; background: #3371A3 !important; color: white !important; font-size: 10px !important; } #f-list { display: inline !important; vertical-align: middle !important; height: 25px !important; line-height: 25px !important; } #f-list li { display: block !important; float: right !important; } #footer a {color: inherit !important;}

#footer > *:not(#f-list), #footer #copyright {display: none !important;}

/* ******************************** */ /* TEXT                            */ /* ******************************** */

/* Various preferences regarding text elements; quotes, lists and stubs: mainly undoing damage from table styling (as some of these are either contained within or coded as tables);

/* paragraphs */ .infobox + p {margin-top: 0 !important;}

/* Pre-arranged text block */ pre { border: none !important; background-color: #EEEEEE !important; }

/* Headlines */ h1, h2, h3 {font-weight: normal !important;} h1 { font-size: 170% !important; border-bottom: none !important; padding-top: 0 !important; }

/* Hyperlinks */ a {text-decoration: none !important;}

/* Lists */ ul, ol { list-style-image: none !important; list-style-position: inside !important; } #bodyContent > ul, #bodyContent > ol 	{margin-left: 0 !important;} table ul, table ol	{font-size: 14px !important;} .references-small {overflow: hidden !important;} .references {margin: 0 1em 0 0 !important;}

/* Indentation - reinstated for talk-pages, see "url-specific" section */ dd {margin-left: 0 !important;}

/* Quotes */ blockquote, table.cquote { border: none !important; background: transparent !important; font-size: 14px !important; font-style: italic !important; }

/* Announcements - I do donate and encourage you to do the same. I just can't find a nonobtrusive place for this... Sorry :( */ #siteNotice {margin-bottom: 1em !important;}  #donate, #anontip {display: none !important;}

/* Stubs / disambiguation tables / redirection notice */ #stub, #stub table, #disambig table {font-size: 14px !important;} #stub td, #stub th, #disambig, .dablink, #contentSub { margin-left: 0 !important; padding-left: 0 !important; }

/* ******************************** */ /* TABLES                          */ /* ******************************** */

/* basically four types of tables are styled: infoboxes, navboxes, wikitables and toccolours (which is probably 95% of all tables found on wp); others are left as they are apart from font size and some padding; colours used throughout is #666666 for header bg and borders and #EEEEEE for header text and (in wikitables) cell bg; the system to identify headings (and thereby assign them a different colour scheme) is mostly concerned with header cells, first rows, single cell rows, cells with background color and various combinations of these traits; it is a crude sort of pattern identification and as such doesn't succeed every time;

/* - */ /* Global           */ /* - */ table { font-size: 12px !important; text-align: left !important; } td, th {padding: 0.5em !important;} caption, th:only-child:empty, td:only-child:empty {display: none !important;}

/* - */ /* Infoboxes        */ /* - */

/* infoboxes - tables ususally placed to the right at the beginning of the article to give quick facts, statistics, key names etc.

.infobox { border-collapse: collapse !important; border: thin solid #666666 !important; margin: 0 0 15px 15px !important; } /* general cell settings */ .infobox th, .infobox td { border: none !important; background-color: white !important; } .infobox div {background-color: transparent !important;}

/* text alignment and weight */ .infobox td:only-child {text-align: center !important} .infobox ul {text-align: left !important} .infobox span, .infobox font {color: inherit !important}

/* targetting headings - background */ .infobox > tbody > tr:first-child > td:only-child, .infobox th:only-child, .infobox td:only-child[style*="background"] { background-color: #666666 !important; color: #EEEEEE !important; text-align: center !important; } /* targetting headings - text */ .infobox > tbody > tr:first-child > td:only-child > *, .infobox > tbody > tr:first-child > td:only-child > * > *,	/* in case the color element is nested in a bold/big/.. element, e.g. 'Knesset' */ .infobox th:only-child > *, .infobox th:only-child > * > *, .infobox td:only-child[style*="background"] > *, .infobox td:only-child[style*="background"] > * > * {color: inherit !important;}

/* Special cases */ /* moron alert: table within table, e.g. 'Discrimination' */ .infobox td:only-child table td { background-color: white !important; color: black !important; }   .infobox td:only-child table td a {color: inherit !important;}

/* sisterproject infoboxes - little single project reference boxes */ div.sisterproject { border: none !important; margin-top: 15px !important; margin-bottom: 15px !important; padding: 1em !important; background-color: #EEEEEE !important; text-align: left !important; } /* sisterproject infoboxes - tables with references to all sisterprojects for some reason the element.style width is ignored? */ table.infobox.sisterproject { margin-top: 15px !important; margin-bottom: 15px !important; display: block !important; padding: 0 !important; text-align: left !important; }

/* - */ /* Navigation boxes */ /* - */

/* navigation boxes are for the most part the show/hide logs at the bottom of the page; very easy to style as the only heading is the first line; 'subheadings' are the headings in the hidden part of the table and are presented first so as not to overrule the main heading styling;

.navbox span[style*="float:"] {font-size: 10px !important;} .collapsible, .NavFrame, .navbox { clear: both !important; margin-top: 15px !important; margin-bottom: 15px !important; padding: 0 !important; border: thin solid #666666 !important; background-color: white !important; border-collapse: collapse !important; }

/* subheadings */ .collapsible td, .collapsible th, .navbox td, .navbox th, .NavContent th { border: none !important; background-color: white !important; color: black !important; } .collapsible th a,  .navbox th a,  .NavContent th a { color: black !important; font-weight: bold !important; }

/* targetting headings */ .NavHead, table.navbox > tbody > tr:first-child > *, table.collapsible > tbody > tr:first-child > * {background-color: #666666 !important;} .NavHead, .NavHead *, table.navbox > tbody > tr:first-child *, table.collapsible > tbody > tr:first-child * {color: #EEEEEE !important;}

/* - */ /* Toccolours       */ /* - */

/* toccolours are a strange mix of tables (e.g. bottom table, see "Shakespeare": 'Part of a series on William Shakespeare and his work', and infobox style table, see "Caffeine") and text boxes (e.g. quote boxes, left or right aligned, see "Shakespeare) with no real common denominator; a modicum of harmonization is attempted along the lines of the navbox styling;

table.toccolours { border-color: #666666 !important; border-collapse: collapse !important; padding: 0 !important; background-color: white !important; } table.toccolours th, table.toccolours td 	{border: none !important;} table.toccolours th:not(:only-child) { background-color: white !important; color: black !important; font-weight: bold !important; } table.toccolours td:not(:only-child) { background-color: white !important; color: black !important; } table.toccolours > tbody > tr:first-child > th, table.toccolours > tbody > tr:first-child > td, table.toccolours > tbody > tr > th:only-child[style*="background"] { background-color: #666666 !important; color: #EEEEEE !important; } table.toccolours > tbody > tr:first-child > th *, table.toccolours > tbody > tr:first-child > td *, table.toccolours > tbody > tr > th:only-child[style*="background"] * {color: inherit !important;}

/* - */ /* Wikitable /      */ /* Sortable         */ /* - */

/* wikitables are the 'tables tables' - spreadsheet/database like presentations; 'sortable' tables are like wikitables, only with the javascript option to sort by any column you click on; filehistory tables are used to log (mainly) picture changes; fairly easy to style as the td/th difference is well understood and respected here; cell background is made #EEEEEE (note that this is table, not td bg - thus use of colour coding on cells prevail, e.g. http://en.wikipedia.org/wiki/Germanic_languages) seems easier to navigate vast spreadsheets with a little less contrast, no?;

.wikitable, .sortable, .filehistory { margin-top: 15px !important; margin-bottom: 15px !important; border: none !important; background-color: #EEEEEE !important; }

/* headings */ .wikitable tr:first-child td, .wikitable th, .sortable th, .sortable tr:first-child td, .filehistory tr:first-child * { background-color: #666666 !important; color: #EEEEEE !important; font-weight: bold !important; } /* general cell settings */ .wikitable th, .wikitable td, .sortable th, .sortable td, .filehistory th, .filehistory td	{border: thin solid #666666 !important;}

/* text embellishments */ .wikitable a {color: inherit !important;} .wikitable td a[href*="/wiki/"],				/* existing wiki article link */ .sortable tr:not(:first-child) td a[href*="/wiki/"] {border-bottom: thin dotted #666666 !important;} .wikitable td a[href*="/w/"],					/* as yet non-existent wiki article link */ .sortable tr:not(:first-child) td a[href*="/w/"] {border-bottom: thin dashed #666666 !important;} .wikitable td b {font-weight: normal !important;}

/* ******************************** */ /* BOXES                           */ /* ******************************** */

/* Boxes are an assortment of minor tables and divs that are made to stand out in some way or other from the text flow; most of these efforts either try to integrate them in text flow or just to insert the standard colour scheme in place of the default one;

/* - */ /* Table of contents */ /* - */ #toc { border: none !important; margin: 1em 0 !important; padding: 0 !important; background-color: white !important; font-size: inherit !important; } #toc td {padding: 0 !important;} #toctitle {text-align: left !important;}

.toc:not(#toc), .toc:not(#toc) table { background: white !important; border-collapse: collapse !important; } .toc:not(#toc) th { border: none !important; background: #666666 !important; color: #EEEEEE !important; }

/* - */ /* Category links   */ /* - */ #catlinks { text-align: justify !important; border: none !important; padding: 1em !important; background-color: #EEEEEE !important; } #catlinks a {color: black !important;} p.catlinks > a:first-child {font-weight: bold !important;}

/* - */ /* Messageboxes     */ /* - */

/* amboxes are the new warning boxes (NPOV etc.); .messagebox are used for various purposes, mainly talk pages; filetoc, imagelicense and shareduploadnotice tables are various boxes and tables used on file info pages;

.ambox { display: block !important; margin: 10px 0 !important; border-top: none !important; border-right: none !important; border-bottom: none !important; background-color: #EEEEEE !important; font-size: 14px !important; } .messagebox, #filetoc, #imageLicense, .sharedUploadNotice table { border: none !important; margin: 0 !important; background-color: #EEEEEE !important; }

/* - */ /* Galleries        */ /* - */ .gallery { border: none !important; margin: 15px 0 !important;} .gallery td {background-color: #EEEEEE !important;} .gallerybox {background-color: transparent !important;} .gallerytext { background-color: transparent !important; padding: 15px !important; text-align: justify !important; }

/* - */ /* Wikisource spec. */ /* - */

.authortemplate, .headertemplate { border: none !important; margin-bottom: 0 !important; background: #666666 !important; } .author_notes, .header_notes { border: thin solid #666666 !important; background: white !important; } .authortemplate, .authortemplate a, .headertemplate, .headertemplate a	{color: #EEEEEE !important;} .auhtor_notes td:empty, .header_notes td:empty {display: none !important;}

/* - */ /* Various          */ /* - */ table[style*="background-color: rgb(255, 206, 158)"] td,	/* chess boards e.g. 'chess' */ td.toccolours table td					/* team colours e.g. 'Man U' - doesn't fix bg colour issue */ {padding: 0 !important;}

/* ******************************** */ /* IMAGES                          */ /* ******************************** */

/* images are for the most part encased in the .thumb class (as well as either the .left or .tright class); the #EEEEEE/black colour scheme is used; .tnone are floated right - if not, the entire width is filled with background-color;

.thumb { display: block !important; background-color: #EEEEEE !important; border: none !important; } .tnone { float: right !important; margin-left: 1.5em !important; } .thumbinner { border: none !important; padding: 5px !important; background-color: inherit !important; } .thumb img {border: none !important;} .thumbcaption {margin-top: 20px !important} .thumbcaption .magnify {display: none !important} /* Featured, spoken, semiprotected icons v-aligned with #content */ #cornerbox,		/* source: feature */ #administrator,	/* pedia: protected */ .topicon		/* pedia: feature/spoken */ {top: 225px !important;} #cornerbox *, #administrator *, .topicon * { line-height: 0px !important; background-color: transparent !important; }

} /* end of global settings - start of domain-specific settings */

/* ******************************** */ /* DOMAIN/URL SPECIFIC             */ /* ******************************** */

/* */ /* Header Background Images         */ /* */

@-moz-document domain(en.wikibooks.org) { #p-logo a {background-image: url(http://pics.viharpander.dk/stylish/wikisquare/books_700x175.png) !important;} } @-moz-document domain(en.wikipedia.org) { #p-logo a {background-image: url(http://pics.viharpander.dk/stylish/wikisquare/pedia_700x175.png) !important;} } @-moz-document domain(en.wikiquote.org) { #p-logo a {background-image: url(http://pics.viharpander.dk/stylish/wikisquare/quote_700x175.png) !important;} } @-moz-document domain(en.wikisource.org) { #p-logo a {background-image: url(http://pics.viharpander.dk/stylish/wikisquare/source_700x175.png) !important;} } @-moz-document domain(en.wikiversity.org) { #p-logo a {background-image: url(http://pics.viharpander.dk/stylish/wikisquare/versity_700x175.png) !important;} } @-moz-document domain(en.wiktionary.org) { #p-logo a {background-image: url(http://pics.viharpander.dk/stylish/wikisquare/tionary_700x175.png) !important;} } @-moz-document domain(wikimedia.org) { #p-logo a {background-image: url(http://pics.viharpander.dk/stylish/wikisquare/media_700x175.png) !important;} }

/* */ /* Url-specific                     */ /* */

/* Talk pages - reinstating indentation */ @-moz-document url-prefix("http://en.wikipedia.org/wiki/Talk:") { dd {margin-left: 2em !important;} } /* wikipedia main page - beautyfication */ @-moz-document url("http://en.wikipedia.org/wiki/Main_Page") { .MainPageBG, table { border: none !important; margin-top: 0 !important; padding: 0 !important; background-color: white !important; font-size: 14px !important; text-align: justify !important; } .MainPageBG h2 { border: none !important; font-weight: normal !important; background-color: #CEDFF2 !important; }