User:Bart v M/myskin.css

Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump.
This code will be executed when previewing this page.
Documentation for this user script can be added at User:Bart v M/myskin. This user script seems to have an accompanying .js page at User:Bart v M/myskin.js.
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/* Default *
 * Resetting the margins and paddings, and defining the font-family
 */

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
}

/* Lay-out *
 * Set paddings and margins, and clear the floats of the menu items and the sidebar
 */

h1#header { margin-left: 3%; }
div#column-one { padding: 0 3%; }
div#globalWrapper { clear: both; }
div#column-content { margin: 0 3%; }
div#content { padding: 20px; margin-right: 206px; /* 200 + 2*6px padding of div#sidebar + (-6px) margin of div#sidebar*/ }
div#sidebar { width: 212px; margin-right: -6px; /* for the right corner */
	float: right; padding-top: 16px; /* so if the first item is selected the corners don't interfere */ }
div#footer { clear: both; padding: 0 3%; }

/* Header *
 * Replace the header with an image
 */

h1#header {
	text-indent: -9999px;
	background-image: url(http://home.planet.nl/~merri033/header.png);
	height: 78px;
	width: 505px;
}

/* Footer *
 * Style the footer
 */
 
#footer div { /* Flot the logos to the right */
	float: right;
	width: 200px;
	text-align: center;
	clear: both;
	margin: 1em 0;
}

#footer a img {
	border: none;
}

#footer ul {
	list-style: none;
	padding: 1em;
	margin-right: 200px;
}

/* Top menu *
 * Apply proper paddings and font-styling to the menu
 * Float the menu items (h5) and text to the left to make the menu horizontal.
 */

div#column-one {
	height: 2em; /* height 1em + 2 * 0.5em padding */
}

div#column-one div.portlet, div#column-one p {
	float: left;
	padding: 0.5em;
}

div#column-one h5, div#column-one p {
	font-size: 1em;
	line-height: 1em; /* makes the menu 1em high */
	font-weight: normal;
}

div#column-one p {
	font-weight: bold;
}

 /*
 * Hide and position the submenus
 */
 
div#column-one div.portlet {
	position: relative;
}

div#column-one div.pBody {
	display: none;
	position: absolute;
	top: 2em; /* the menu is 2em high */
}

/* 
 * Style the menu
 */
 
div#column-one div.pBody {
	width: 15em; /* this is the maximum width before the menu items start wrapping */
}

div#column-one ul {
	list-style: none;
	float: left; /* by floating the list the menu items the menu gets as wide as the largest item */
	border-bottom: 1px solid #bcb699;
	border-left: 1px solid #bcb699;
	border-right: 1px solid #bcb699;
}

div#column-one li {
	margin: 3px; /* this is so the highlight for the items don't touch the side */
	padding: 3px;
}

/* 
 * Add the icons
 */

div#column-one div.pBody { /* this is to make the text of the submenu line up with the headers */
	margin-left: -28px; /* 3px padding + 3px margin of #column-one li + 16px icon + 6px icon padding */
}

div#column-one li a { /* make some room for the icons and define background properties */
	padding-left: 21px; /* 16px icon + 3px padding and 3px margin from #column-one li */
	background-position: left center;
	background-repeat: no-repeat;
}

li#n-Main-page a { background-image: url(http://home.planet.nl/~merri033/house.png); }
li#n-Contents a { background-image: url(http://home.planet.nl/~merri033/book.png); }
li#n-Featured-content a { background-image: url(http://home.planet.nl/~merri033/medal_gold_3.png); }
li#n-currentevents a { background-image: url(http://home.planet.nl/~merri033/time.png); }
li#n-randompage a { background-image: url(http://home.planet.nl/~merri033/arrow_switch.png); }

li#n-About-Wikipedia a { background-image: url(http://home.planet.nl/~merri033/information.png); }
li#n-portal a { background-image: url(http://home.planet.nl/~merri033/group.png); }
li#n-recentchanges a { background-image: url(http://home.planet.nl/~merri033/page_lightning.png); }
li#n-contact a { background-image: url(http://home.planet.nl/~merri033/email.png); }
li#n-sitesupport a { background-image: url(http://home.planet.nl/~merri033/money.png); }
li#n-help a { background-image: url(http://home.planet.nl/~merri033/help.png); }

li#t-whatlinkshere a { background-image: url(http://home.planet.nl/~merri033/link_go.png); }
li#t-recentchangeslinked a { background-image: url(http://home.planet.nl/~merri033/hourglass_link.png); }
li#t-contributions a { background-image: url(http://home.planet.nl/~merri033/user_edit.png); }
li#t-log a { background-image: url(http://home.planet.nl/~merri033/user_lightning.png); }
li#t-emailuser a { background-image: url(http://home.planet.nl/~merri033/user_email.png); }
li#t-print a { background-image: url(http://home.planet.nl/~merri033/printer.png); }
li#t-permalink a { background-image: url(http://home.planet.nl/~merri033/page_link.png); }
li#t-cite a { background-image: url(http://home.planet.nl/~merri033/page_green.png); }

/* Sidebar *
 * Styling of the menus
 */
 
div#sidebar ul {
	list-style: none;
}

#sidebar .portlet {
	background-image: url(http://home.planet.nl/~merri033/bg-sidebar-ruler.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-bottom: 10px;
	margin-bottom: 8px;
}

.portlet h5, #p-cactions li, #p-personal li, #p-tb2 li { /* smaller height looks better, but favorites can be multiple lines */
	height: 13px;
}

div#sidebar li, div#sidebar h5 {
	padding: 12px 0 18px 36px;
	margin: -6px 0 -9px 0;
	font-size: 1em;
}

div#sidebar form {
	margin: 0 13px;
	text-align: center;
}

#searchInput {
	display: block;
	margin: 5px 0;
	width: 180px;
}

div#sidebar input {
  border: 1px solid #000;
	background-color: #bcb699;
}

div#sidebar li a img {
	border: none;
	vertical-align: middle;
}

div#sidebar li.selected {
	background-image: url(http://home.planet.nl/~merri033/bg-sidebar-selected.png);
	background-repeat: no-repeat;
}

div#sidebar li.new a {
	color: #775240;
	font-style: italic;
}

div#sidebar li.selected-first { /* The first of two adjacent selected items */
	background-image: url(http://home.planet.nl/~merri033/bg-sidebar-selected-first.png);
	background-repeat: no-repeat;
}

div#sidebar li.selected-second { /* The second of two adjacent selected items */
	background-image: url(http://home.planet.nl/~merri033/bg-sidebar-selected-second.png);
	background-repeat: no-repeat;
}

/* 
 * Add the icons
 */
 
div#sidebar li a {
	margin-left: -23px;
	padding-left: 23px;
	background-position: left center;
	background-repeat: no-repeat;
}

div#sidebar li.selected a {
	font-weight: bold;
}

/*
 * 'Views' icons
 */

#ca-nstab-main a { background-image: url(http://home.planet.nl/~merri033/house.png); }
#ca-nstab-user a { background-image: url(http://home.planet.nl/~merri033/user.png); }
#ca-nstab-image a { background-image: url(http://home.planet.nl/~merri033/image.png); }
#ca-nstab-portal a { background-image: url(http://home.planet.nl/~merri033/layout.png); }
#ca-talk a { background-image: url(http://home.planet.nl/~merri033/comments.png); }
#ca-edit a { background-image: url(http://home.planet.nl/~merri033/page_edit.png); }
#ca-addsection a { background-image: url(http://home.planet.nl/~merri033/page_add.png); }
#ca-viewsource a { background-image: url(http://home.planet.nl/~merri033/page_code.png); }
#ca-history a { background-image: url(http://home.planet.nl/~merri033/hourglass.png); }
#ca-move a { background-image: url(http://home.planet.nl/~merri033/page_go.png); }
#ca-watch a { background-image: url(http://home.planet.nl/~merri033/eye.png); }

/* 
 * Favorites
 */

#ca-favorites a { background-image: url(http://home.planet.nl/~merri033/star.png); }
li.favorite a { background-image: url(http://home.planet.nl/~merri033/star_silver.png); }
div#sidebar li a.remove-favorite { padding-left: 0; margin-left: 0; background: none; }

/*
 * Toolbox
 */

#t-upload a { background-image: url(http://home.planet.nl/~merri033/image_add.png); }
#t-specialpages a { background-image: url(http://home.planet.nl/~merri033/page_gear.png); }

/*
 * 'Personal menu' icons
 */

#pt-userpage a { background-image: url(http://home.planet.nl/~merri033/user.png); }
#pt-mytalk a { background-image: url(http://home.planet.nl/~merri033/user_comment.png); }
#pt-preferences a { background-image: url(http://home.planet.nl/~merri033/wrench_orange.png); }
#pt-watchlist a { background-image: url(http://home.planet.nl/~merri033/page_find.png); }
#pt-mycontris a { background-image: url(http://home.planet.nl/~merri033/user_edit.png); }
#pt-logout a { background-image: url(http://home.planet.nl/~merri033/door_in.png); }

/* Autcomplete
 * Styles for the autocomplete form
 */
 
#p-search, #searchform {
	overflow:visible !important;
}

#autocompletebox {
	display: block;
	position: absolute;
	border: solid 1px #000;
	background: #bcb699;
	overflow: auto;
	visibility: hidden;
	width: 180px;
	opacity: 0.95;
}

/* Backgrounds and border *
 * Here all the background images and colors + borders defined
 */
 
body {
	background-color: #000;
}
 
div#column-one { /* The top menu */
	background-color: #e9e2be;
	background-image: url(http://home.planet.nl/~merri033/bg-menu.png);
	background-repeat: repeat-x;
}

div#column-one ul { /* The top submenu */
	background-color: #e9e2be;
	opacity: 0.95;
}

div#globalWrapper { /* Page background gradient */
	background-image: url(http://home.planet.nl/~merri033/bg.png);
	background-repeat: repeat-x;
}

div#column-content { /* Faux columns background */
	background-image: url(http://home.planet.nl/~merri033/bg-column-content.png);
	background-repeat: repeat-y;
	background-position: right;
	background-color: #fff; /* The background color of the content */
}

div#sidebar { /* Sidebar corners */
	background-image: url(http://home.planet.nl/~merri033/bg-sidebar-top.png);
	background-repeat: no-repeat;
	margin-right: -6px;
}

div#content { /* Shadow of the menu */
	background-image: url(http://home.planet.nl/~merri033/bg-content.png);
	background-repeat: repeat-x;
}

div#footer {
	background-image: url(http://home.planet.nl/~merri033/bg-footer.png);
	background-repeat: repeat-x;
	background-color: #4d4229;
	border-top: 3px solid #bcb699;
}

/* Links *
 * Styles for the links outside the content
 */
 
div#column-one a, div#sidebar a { /* Links in the top menu and sidebar*/
	color: #000;
	text-decoration: none;
}

div#sidebar a:hover { /* Hover over the links in de sidebar */
	font-weight: bold;
}

div#column-one li:hover { /* Hover over a submenu item */
	background-color: #bcb699;
}

#footer, #footer a {
	color: #fff;
}

/* Content
 * This is the style of the content, copied from the monobook sking
 */

#content table {
    font-size: 100%;
    background: White;
}
#content a {
    text-decoration: none;
    color: #002bb8;
    background: none;
}
#content a:visited { color: #5a3696; }
#content a:active { color: Orange; }
#content a:hover { text-decoration: underline; }
#content a.stub { color: #772233; }
a.new,
#content #p-personal a.new { color:#ba0000; }
a.new:visited,
#content #p-personal a.new:visited { color:#a55858; }

#content img {
    border: none;
    vertical-align: middle;
}
#content p {
    margin: 0.4em 0em 0.5em 0em;
    line-height: 1.5em;
}

#content p img { margin: 0; }

#content hr {
    height: 1px;
    color: #aaaaaa;
    background-color: #aaaaaa;
    border: 0;
    margin: 0.2em 0 0.2em 0;
}

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
    color: Black;
    background: none;
    font-weight: normal;
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    border-bottom: 1px solid #aaaaaa;
}
#content h1 { font-size: 188%; }
#content h2 { font-size: 150%; }
#content h3, #content h4, #content h5, #content h6 { 
    border-bottom: none;
    font-weight: bold;
}
#content h3 { font-size: 132%; }
#content h4 { font-size: 116%; }
#content h5 { font-size: 100%; }
#content h6 { font-size: 80%;  }

#content ul { 
    line-height: 1.5em;
    list-style-type: square;
    margin: 0.3em 0 0 1.5em;
    padding:0;
    list-style-image: url("bullet.gif");
}
#content ol {
    line-height: 1.5em;
    margin: 0.3em 0 0 3.2em;
    padding:0;
    list-style-image: none;
}
#content li { margin-bottom: 0.1em; }
#content dt { 
    font-weight: bold; 
    margin-bottom: 0.1em;
}
#content dl{
    margin-top: 0.2em;
    margin-bottom: 0.5em;
}
#content dd {
    line-height: 1.5em;
    margin-left: 2em;
    margin-bottom: 0.1em;
}

#content fieldset {
    border: 1px solid #2f6fab;
    margin: 1em 0em 1em 0em;
    padding: 0em 1em 1em 1em;
    line-height: 1.5em;
}
#content legend {
    background: White;
    padding: 0.5em;
    font-size: 95%;
}
#content form {
    border: none;
    margin: 0;
}

#content textarea {
    border: 1px solid #2f6fab;  
    color: Black;
    background-color: white;
    width: 100%;
    padding: 0.1em;
    overflow: auto;
}
/* hide this from ie/mac and konq2.2 */
@media All {
    #content head:first-child+body input {
        visibility: visible;
        border: 1px solid #2f6fab;  
        color: Black;
        background-color: white;
        vertical-align: middle;
        padding: 0.2em;
    }
}
#content input.historysubmit {
    padding: 0 0.3em 0.3em 0.3em !important;
    font-size: 94%;
    cursor: pointer;
    height: 1.7em !important;
    margin-left: 1.6em;
}
#content input[type="radio"],
#content input[type="checkbox"] { border:none; }
#content select {
    border: 1px solid #2f6fab;  
    color: Black;
    vertical-align: top;
}
#content abbr, #content acronym, #content .explain {
    border-bottom: 1px dotted Black;
    color: Black;
    background: none;
    cursor: help;
}
#content q {
    font-family: Times, "Times New Roman", serif;
    font-style: italic;
}
#content code { background-color: #f9f9f9; }
#content pre {
    padding: 1em;
    border: 1px dashed #2f6fab;
    color: Black;
    background-color: #f9f9f9;
    line-height: 1.1em;
}