User:Facetofcathy/vector.css

From Fanlore
Jump to navigation Jump to search

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/*To allow users to easily make minor changes -- Change backgrounds to white by using transparent.  Use 1em for all font sizes (footer is .8em). Use inherit for text color.*/

/*Kill the images making the grey background and blue borders*/
body,
div#content,
div#footer,
#mw-head-base,
#mw-page-base,
div.vectorTabs,
div.vectorTabs span,
div.vectorTabs ul,
div.vectorTabs ul li,
div.vectorTabs li.selected,
div.vectorMenu h5 a {
  background-image: none;
  background-color: transparent;
  }

/*Basic Styles -- color, font, font size*/
/*Background and font family*/
html,
body {
  background-color: white;
  font-family: Verdana, Helvetica, sans-serif;
  color: black;
  }
div#content  {
  color: inherit;
  }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  }
/*Reset font size to 1em*/
#bodyContent,
#p-personal li,
div#mw-panel div.portal div.body ul li,
div.vectorTabs li a,
div#mw-panel div.portal h5 {
  font-size: 1em;
  }
/*footer font size is smaller, background grey, text black, margin sets off the footer from the right edge the same as the content above*/
div#footer  {
  background-color: #f9f9f9;
  color: black;
  margin-right: 1em;
  }
div#footer ul li {
  font-size: 0.8em;
  color: inherit;
  }
/*Main Page Heading*/
#firstHeading {
  border-bottom: 0;
  font-family: "Times New Roman", times, georgia, serif;
  font-size: 2em;
}
/*Line height -- note: the use of unitless line height is recommended to achieve the expected result*/
p {
  line-height: 1.8;
  }

/*code samples - white background solid border, wrap if necessary*/
pre {
  background: transparent;
  color: inherit;
  border: 1px solid #E5E5E5;
  line-height: 1.3;
  white-space: pre-wrap;
  }

/*Link colours*/
/*Set Fanlore blue and visited purple.*/
a,
div.vectorTabs li a,
div.vectorMenu li a,
div#mw-panel div.portal div.body ul li a,
#preftoc a {
  color: #005C76;
  }
a:visited,
div#mw-panel div.portal div.body ul li a:visited,
.mw-body a.extiw:visited,
.mw-body a.external:visited  {
  color: #3a1a7a; 
  }
/*changing red shades to meet contrast guidelines on white background*/
a.new, 
#p-personal a.new {
  color: #b30000;
  }

a.new:visited, 
#p-personal a.new:visited,
div.vectorTabs li.new a, 
div.vectorTabs li.new a:visited {
  color: #760000;
  }
/*Current Page tabs and Sidebar Headings are black*/
#mw-panel.collapsible-nav .portal.collapsed h5,
#mw-panel.collapsible-nav .portal.collapsed h5 a,
div.vectorTabs li.selected a, 
div.vectorTabs li.selected a:visited {
  color: inherit;
  }
/*Arrows*/
#mw-panel.collapsible-nav .portal h5,
#mw-panel.collapsible-nav .portal.collapsed h5  {
  background: url(/w/skins/common/images/Arr_d.png) left center no-repeat;
  background: url(/w/skins/common/images/Arr_d.png) left center no-repeat!ie;
  }
/* Catagory links */
#catlinks {
  border: 1px solid #3393AA;
  background: transparent;
  padding: .8em;
  clear: both;
}
.catlinks li {
  line-height: 1;
  margin: 0;
  padding:0;
}
.catlinks a { 
  font-weight: bold;
}
.catlinks ul li a {
  padding: 0 1em;
}
/*Positioning of Menus and Logo*/
/*colour border on personal menu make it full width, height at least size of logo */
#p-personal {
  border-bottom: 1px solid #840c1a;
  width: 100%;
  right: 0;
  height: 2.5em;
  }
/*Float the menu itself and let the container worry about the left offset*/
#p-personal ul  {
  float: right;
  margin: 0 0.75em 0 160px;
  padding-left: 0;
  }
/*Get the Logo in the upper left with an em measure for position, shrink image if needed, don't stretch it, border used to provide some horizontal padding, and background colour appears if image fails to load*/
#p-logo {
  top: -5.25em;
  width: auto;
  height: auto;
  border-right: solid white 0.5em;
  border-left: solid white 0.5em;
  }
#p-logo a  {
  height: 5em;
  width: 12em;
  max-width: 160px;
  background-position: center left;
  background-size: cover;
  background-color: #005C76
  }

/*Second top border*/
div#mw-head {
  height: 5em;
  border-bottom: 1px solid #EA9439;
  padding-bottom: 0.25em;
  }

/*Position the sidebar with an em measure and wide enough width. Padd the top to drop it below main page heading Padding is heading plus the space left for the jump to nav to bring the sidebar inline with the first line of content--usually*/
div#mw-panel {
  top: 5.25em;
  padding-top: 4.4em;
  width: 12em;
  }
/*Make the head base hold both menus*/
#mw-head-base  {
  height: 5.25em;
  margin: 0;
  }
/*Get rid of the redundant page base*/
#mw-page-base  {
  display: none;
  }
/*Make room for sidebar*/
div#content,
div#footer {
  margin-left: 12em;
  }
#left-navigation {
  left: 12.5em;
  }
/*Template Styles*/
/*Infobox is sometimes floated over elements with other background colours, so it must have its own colours set.*/
.infobox {
  background-color: white!important;
  color: black; 
  border: 1px solid #900;
  margin-bottom: 0.25em;
  margin-left: 1em;
  padding: 0.25em;
  font-size: inherit;
  line-height: 1.5;
  width: 40%;
  float: right;
  clear: right; 
}
.infobox th {
  background-color: #E4E4E4;
}
blockquote.quotation {
  border: 1px solid #4F9CA1;
  padding: 1em;
  display: block;
  line-height: 1.5;
  overflow: hidden; /*makes the border not extend under the infobox*/
}
/*Presumptive Quotation2 Template style*/
blockquote.quotation2 {
  border:1px solid #CCC; 
  background-color:#EEE;
  color: black;
  padding: 1em;
  display: block;
  line-height: 1.5;
}
div.message {
    border: 2px solid #DBCB93;
    background: none repeat scroll 0 0 #FFF8D7;/*Just a titch lighter*/
    padding-left: 1em;
    padding-right: 1em;
    display: table;
}
/*Presumptive tagbox styling for templates that use this style*/
.tagbox {
  width: auto;
  text-align: center;
  background-color: #ECF1EF;
  color: black;  
  padding:.3em;
  }
/*Presumptive style for table heading in Image Summary templates*/
.summary-heading  {
  font-weight: bold; 
  background-color: #E4E4E4;
  color: black;
  }
/*Presumptive style for Related Links template*/
.related-main {
  background-color: #C2D6DE;
  color: black;
  text-align: center;
}
.related-heading {
  background-color: #ECF1EF;
  color: black;
}
/*End Skin*/

/*New since first draft submission*/
/*The : style of indent that is used on talk pages to thread conversations and on some pages produces a dl and dd element-needs the same line height as the p element*/
dd {
  line-height: 1.8;
  }