MediaWiki:Common.css

/* Refreshed Skin Tweaks */ /* Google Fonts */ @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville%7COvo');

/*redo header */

/* title is creates in common.js */

1. jfatitle {

   position: absolute;
   top: 4px;
   left: 214px;
   z-index: 10001;
   color: #fff;

}

1. jfatitle a, #jfatitle a:visited {

   color: #fff;
   font-size: 36px;

}

@media (min-width: 601px) {

   /* tablet and desktop */
   #site-info img {
       width: 130px;
       height: 130px;
       top: 20px;
       position: absolute;
       left: 30px;
   }

   #sidebar-wrapper {
       position: relative;
       float: left;
       margin-top: 70px;
   }

   #sidebar {
       position: relative;
       float: left;
   }

   #header-wrapper {
       position: relative;
       top: 30;
       left: 200;
   }

   #content-wrapper {
       padding-left: 8px;
       top: 0;
   }

}

@media (max-width: 1000px) and (min-width: 601px) {

   /* tablet */
   #site-info img {
       left: 14px;
   }

   #jfatitle {
       left: 186px;
       top: 8px;
   }

}

/* odd size for header adjustment to keep left and right stuff from overlapping */ @media (max-width: 760px) and (min-width: 601px) {

   /* tablet */
   #jfatitle a, #jfatitle a:visited {
       font-size: 26px;
       left: 170px;
       top: 12px;
   }

}

/* styling for phones and smaller tablets */ @media (max-width: 600px) {

   /* title is created in common.js */
   #header-wrapper {
       top: 0;
   }

   #jfatitle {
       top: 8px;
       left: 58px;
       position: fixed;
   }

   #jfatitle a, a:visited {
       color: #fff;
       font-size: 26px;
   }

   .avatar {
       margin-top: 2px;
   }

   #small-toolbox-wrapper {
       font-size: 2.2em;
   }

}

/* redo header end */

/* major fixes */

/* titles should wrap no matter where */ @media (max-width: 1000px) and (min-width: 601px) {

   #firstHeading {
       white-space: normal;
   }

}

@media (max-width: 600px) {

   #firstHeading {
       white-space: normal;
   }

}

/* global styling */

body {

   font-family: "Ovo", sans-serif;
   background-color: #7a7a7a; /* bg-color of site */;
   background-color: #f7f7f7;
   color: #555; /* content/text color of site */;

}

DIV#bodyContent {

   font-family: "Ovo", sans-serif;

}

h1, #firstHeading {

   font-family: "Libre+Baskerville", serif;
   color: #555;
   font-weight: normal;
   font-size: 34px;
   margin-top: 10px;

}

h2, h3, h4, h5, h6 {

   font-family: "Libre+Baskerville", serif;
   color: rgb(198, 93, 25);
   font-weight: normal;

}

a, a:visited {

   color: #5a7c9f;

}

a.new, a.new:visited {

   color: #5a7c9f;

}

a.new:hover {

   border-bottom: 0.25em solid #a55858;

}

/* header */

1. header-wrapper {

   background: #7a7a7a; /* bg-color/gradient of header web component */;
   border-bottom: 3px solid rgb(198, 93, 25);;

}

.header-button:hover, .header-dropdown-item:hover, .header-button-active, .sitedropdown-highlighted, .dropdown-highlighted {

   /*background-color:  bg-color of header items and dropdown menus */;
   /* color:  content/text color of header items and dropdown menus */;

}

/* sidebar */

1. sidebar-wrapper {

   color: #444;

}

1. sidebar a, #sidebar a:hover, #sidebar a:visited {

   color: #444;
   xfont-weight: bold;
   color: #5a7c9f;
   margin-right: 10px;
   margin-bottom: 5px;
   line-height: 18px;

}

/* menu headings */

1. sidebar h1 {

   color: rgb(198, 93, 25);
   xfont-weight: bold;
   margin-left: 20px;
   margin-right: 20px;
   margin-top: 12px;
   margin-bottom: 6px;
   border-bottom: 1px solid;
   font-size: 16px;

}

/* content */

1. bodyContent {

   padding: 0 1em;
   line-height: 1.5em;
   font-size: 1.2em;
   word-wrap: break-word;
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   color: #555;

}

.mw-parser-output a.external, .mw-parser-output a.external:visited {

   color: #5a7c9f;

}

/* give [expand] [collapse] some breathing room */ .mw-collapsible-toggle {

   margin-left: 10px;

}

/* toc */

1. jfa-toc {

}

1. toc {

   float: right;
   margin-left: 20px;
   margin-bottom: 20px;
   max-width: 50%;
   background-color: #fff;
   padding: 16px;

}

/* hide table of contents numbering */ .tocnumber {

   display: none;

}

.toctext, .tocnumber {

   font-size: .95em;
   color: #5a7c9f;

}

/* the little show/hide on toc */

1. toc .toctogglelabel, #toc .toctogglecheckbox {

   color: #5a7c9f;

}

.toclevel-2, .toclevel-3, .toclevel-4 {

   list-style-type: circle;

}

.header-button:hover, .header-button-active, .header-dropdown-item:hover {

   background-color: rgb(198, 93, 25);

}

.standard-toolbox {

   font-family: "Ovo", sans-serif;
   height: 1.5em;
   position: absolute;
   bottom: 1.20em;
   font-size: 13px;

}

.standard-toolbox a.selected {

   border-bottom: 0;

}

.fixed-toolbox {

   top: .3em;

}

/* mobile ?? */

1. user-info .header-menu {

   top: 2.75em;
   background-color: rgb(198, 93, 25);
   padding: 0.15em 0 0.15em 0

}

.sidebar-shower {

   background-color: rgb(198, 93, 25);

}

1. header-wrapper .search-form {

   xbackground-color: rgb(198, 93, 25);

}

/* styling for medium and large sized tablets */ @media (max-width: 1000px) and (min-width: 601px) {

   #header-wrapper .search-form {
       background-color: rgb(198, 93, 25); /* bg-color of search on tablet */;
   }

}

/* styling for phones and smaller tablets */ @media (max-width: 600px) {

   #sidebar-wrapper {
       background-color: #f7f7f7 /* bg-color of sidebar on phones */;
       color: #444;

   }

   #user-info .header-menu {
       background-color: #333 /* bg-color of user dropdown menu */;
   }

   #toc {
       float: none;
       margin-left: 0;
       width: 100%;
       max-width: 100%;
   }

   #bodyContent {
       font-size: 1.3em;
   }

   /* TEMPLATES....................................*/
   /* first set fonts for templates */
   .jfa-expand, .jfa-plaintext {
       color: #555;
   }

   .jfaredflag {
       color: #333;
       text-transform: uppercase;
       font-weight: bold;
   }

   .jfanote {
       margin-bottom: 16px;
       margin-top: 16px;
       padding-right: 10px;
       padding-left: 14px;
       font-size: .9em;
       line-height: 1.4em;
       border-left: 1px solid gray;
       color: #98582a;
   }

   .jfastart, .jfaoutline-head, .jfaclipboard-head {
       margin-bottom: 0;
       margin-top: 0;
       padding-right: 0;
       padding-left: 0;
       font-size: .8em;
   }

   .jfastart {
       font-style: italic;
       text-align: center;
       font-size: .75em;
       color: rgb(198, 93, 25);
       margin-bottom: 10px;
   }

   /* Stop Expand/Collapse Crowding */
   .mw-customtoggle, .mw-collapsible-toggle {
       margin-left: 10px;
   }

   /* for jfa-h4wrap template */
   div#content h4.jfa-hwrap, div#content h4.jfa-hwrap + p {
       display: inline !important;
       font-family: "Ovo", sans-serif !important;
       color: #eac2b4 !important;
   }

   /* for jfa-hwrap template */
   .jfa-hwrap {
       margin-top: -16px;
   }

   .jfa-hwrap h1,
   .jfa-hwrap h2,
   .jfa-hwrap h3,
   .jfa-hwrap h4,
   .jfa-hwrap h5,
   .jfa-hwrap h6,
   .jfa-hwrap p {
       display: inline;
   }

   /* plain text expand, 2nd row */
   #jfa-factsheet-help {
       color: rgb(198, 93, 25) !important;
       font-size: .9em !important;
       font-style: italic !important;
   }

   #jfa-share a:hover {
       border-bottom: 1px #444;
   }

}