User:Jrajav/myskin.css

@charset "UTF-8";

/* Action: Remove a few distracting and unnecessary elements */ /* Include this if #footer is displayed: #f-copyrightico, */ /* The "A Wikimedia project" icon */ /* Include this if #footer is displayed: #f-poweredbyico, */ /* The "Powered by Mediawiki" icon */ .articleFeedback, /* The huge "Rate this page" box */ .searchButton, /* The button on the search field */ {   display: none; }
 * 1) footer, /* The section at the bottom that contains #f-copyrightico, #f-poweredbyico, "This page under Creative Commons", "Contact us", "Privacy policy", etc. etc. */
 * 2) siteSub, /* The text under every article title: "From Wikipedia, the free encyclopedia" */
 * 3) jump-to-nav,
 * 4) p-search h3, /* The label on the search field */
 * 1) p-logo, /* The portlet logo */
 * 2) column-one h2 /* The header for the navigation menu */

/* Description: The whole page */ /* Action: Set the default font (Highly recommended to install Adobe's Source Sans Pro) */ body {   /* Top this stack with your font of choice, or reduce to (sans-)serif for your browser default. I recommend installing Adobe's Source Sans Pro. */   font-family: 'Source Sans Pro', Corbel, 'Bitstream Vera Sans', 'DejaVu Sans Condensed', 'Liberation Sans', 'Lucida Grande', 'Lucida Sans', 'Helvetica Neue', Helvetica, Calibri, sans-serif; font-size: 16px; color: #313131; }

/* Description: Container for the search field and related labels and buttons. */ /* Action: Position it at the top of the page instead of in the portlets where it's defined */ {   position: absolute; top: 0; left: 0; width: 100%; }
 * 1) p-search

/* Description: The actual search field */ /* Action: Various spacing */ {   display: block; margin: 1em auto 0; width: 480px; }
 * 1) searchInput

/* Description: The container element for the main article -- basically everything except for the portlets, the category links, and the footer */ /* Action: Various spacing */ {   margin: 4em auto 0; padding: 0 2em; line-height: 1.5em; max-width: 840px; }
 * 1) column-content

a.image {   position: relative; }

/* Description: Custom image overlays */ /* Action: Make them zoom on hover */ a.image:hover .jrajav-image-overlay-left {   max-width: 840px !important; z-index: 1; }

a.image:hover .jrajav-image-overlay-right {   max-width: 838px !important; z-index: 1; }

/* Description: Custom image overlays */ /* Action: Animate their size transitions */ .jrajav-image-overlay-animate {   transition: 0.2s; transition-property: max-width, z-index; -webkit-transition: 0.2s; -webkit-transition-property: max-width, z-index; -moz-transition: 0.2s; -moz-transition-property: max-width, z-index; }

/* Description: h1.firstHeading - Article title, h2 - Section headers (The first level in the table of contents) */ /* Action: Add a border to the bottom of the main headers of the article */ h1.firstHeading, h2 {   border-bottom: 1px solid black; }

/* Description: All headers, including the title */ /* Action: Add some padding so they don't jut right against other elements (Such as the border set above) */ h1, h2, h3, h4, h5, h6 {   padding-top: 0.5em; padding-bottom: 0.17em; overflow: hidden; }

/* Description: The category links at the bottom of some articles */ /* Action: Space them a little down from the bottom */ {   margin-top: 1.5em; }
 * 1) catlinks

/* Description: The globs of links that float to the left of the article and underneath the logo on vanilla Wikipedia */ /* Action: Make them float to the left of each so that they arrange themselves horizontally across the page */ .portlet {   float: left; padding-left: 2.5em; padding-bottom: 2.5em; }

/* Description: The lists of links inside portlets */ /* Action: Remove the normal list styling applied by browsers so they're flat */ .pBody ul { list-style-type: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; }

/* Description: Container element for the portlets */ /* Action: Add some spacing and a border for a visual break between the content (the article) and the navigation. */ /* NOTE: This element does contain the portlets logically, but not visually. Setting a full border, not just a border-top, will not look like you expect. */ {   margin: 3.5em 0; border-top: 1px solid #999; }
 * 1) column-one

/* Description: The footer */ /* Action: Make it smaller and less obtrusive. (Note that I currently set it to display: none above, anyway) */ {   margin-top: 5em; font-size: 60%; }
 * 1) footer

/* Without this little hack, the text editing area on "Edit" pages will only take up a portion of the box that they should, based on the well-intentioned but horrible "Columns" user preference that can't NOT be set. */ {   width: 100%; }
 * 1) wpTextbox1

/* Description: Left floating thumbnails */ /* Action: Give them more margin */ div.tleft {   margin: 0.5em 1.2em 1.2em 0; }

/* Description: Right floating thumbnails */ /* Action Give them more margin */ div.tright {   margin: 0.5em 0 1.2em 1.2em; }

/* Description: Image blurbs that float to the right of article content */ /* Action: Give them smaller text to set them apart from the article */ .thumbinner {   font-size: 90%; }

/* Description: Code blocks */ /* Action: Give them a better box */ .mw-code, .jrajav-code {   background-color: #F5F5F5; margin: 0.2em; padding: 0.6em; }

/* Description: Source code blocks */ /* Action: Set font and make them overflow (Get scrollbars instead of getting wider than article) */ div.mw-geshi div, div.mw-geshi div pre, span.mw-geshi, .jrajav-code {   /* Top this stack with your font of choice, or reduce to monospace for your browser default. I recommend installing Adobe's Source Code Pro. */   /* You can thank Wikipedia's CSSers for the ugly need for !important */ font-family: 'Source Code Pro', Consolas, Inconsolata, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Liberation Mono', Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'Courier New', Courier, monospace !important; overflow: auto; }

/* Description: Full image previews on image pages */ /* Action: Make them overflow (Get scrollbars instead of getting wider than article) */ div.fullImageLink {   overflow: auto; }

/* Description: Centered quotes */ /* Action: Remove normal spacing for paragraphs */ table.cquote p { margin: 0; }

/* Description: List items inside of tables (infoboxes) */ /* Action: Reset the line-height so they aren't squished */ span.item {   line-height: 1.3em; }

/* Description: Infobox for some taxonomy templates */ /* Action: Correct its height to be font-agnostic */ {   height: 1.5em !important; }
 * 1) Timeline-row