Difference between revisions of "Pivot.css"

Revision as of 17:49, 20 April 2020

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');

<!-- BODY AND HEADERS -->
body {
  font-family: 'Hind', 'Arial', sans-serif;
  font-weight:400;
  font-size:16px;
}

body.page-Injuries_at_Home_or_Due_to_the_Home_Office #bodyContent p {
  font-family: 'Bitter', serif; 
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', 'Arial', sans-serif; 
  font-weight:500;
  text-transform:uppercase;
}
h1 {
  font-size:48px; 
}
h2 {
  font-size:36px; 
}
#mw-content-text h2 {
  margin-bottom:15px; 
}
h3 { 
  font-size:24px; 
}
  h4 {
}

h3#tagline {
  display:none; 
}

<!-- LINKS AND BUTTONS -->
a { 
  color:#f2b70a;
}

a:hover {
  color:#f2b70a; 
  text-decoration:underline;
}

ul li a { 
  color:#231f20;
}
button, .button {
  font-family: 'Oswald', 'arial', sans-serif; 
  border-radius:0px;
  border-width:2px;
  border-color:#231f20; 
  color:#231f20; 
  background-transparent;
}
button:hover, button:focus, .button:hover, .button:focus {
  background-color:#231f20;
}

button.radius, .button.radius {
  border-radius:0px; 
}

button.secondary, .button.secondary {
  border-color:#ffc528;
  color: #ffc528;
  background:transparent;
}

button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
  border-color:#231f20;
  background:#231f20;
  color:#ffc528; 
}

button.secondary.yellow, .button.secondary.yellow {
  width:100%;
  color:#FFc528 !important;
  margin:5px 0 25px;
  padding:8px 0 7px;
  text-transform:uppercase;
}
button.secondary.yellow:hover,
button.secondary.yellow:active,
button.secondary.yellow:focus, 
.button.secondary.yellow:hover,
.button.secondary.yellow:active,
.button.secondary.yellow:focus {
  color:#231f20 !important;
  background:#FFC528;
  border:2px solid #FFC528;
  text-decoration:none;
}

button span, .button span {
  font-family: 'Oswald', 'Arial', sans-serif !important; 
  font-size: 16px; 
  text-transform:uppercase;
}

#p-cactions > a.button.pull-right {
  margin-top:30px;
}

<!-- NAVIGATIONS -->
.tab-bar {
  background:#FFC528; 
}
.tab-bar .title {
  text-align:left;
}

.title > a {
  font-family: 'Oswald', 'Arial', sans-serif; 
  font-weight:500;
  text-transform:uppercase;
} 

.navbar-links {
  position:relative;
  top:-3px; 
}

.navbar-links span a { 
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 400; 
  margin:0 20px;
}

.navbar-links span a:hover {
  color:#fff; 
}
#sidebar ul a.toc-nav-link { 
  font-family:'Oswald', 'Arial', sans-serif;
  font-size: 1.08em;
  color:#FFC528;
  text-transform:uppercase;
  margin-bottom:15px; 
  display:block;
}
.search-bar-section {
  padding-top:4px; 
}

span#menu-user {
  color:#000; 
}

#sidebar {
  height:100%;
  position:relative;
}
.side-nav { 
  font-family:'Hind', 'Arial', sans-serif;
}
.side-nav li {
  margin:0 0 10px 0; 
}

.side-nav li a:not(.button) {
  padding:0px; 
}

.right-off-canvas-menu, .left-off-canvas-menu {
  background:#231F20;
}

ul.off-canvas-list {
  padding:15px;
}

ul.off-canvas-list li {
  margin-bottom:15px;
}
ul.off-canvas-list li a {
  padding:0px;
  color:#FFF;
}

ul.off-canvas-list li a:hover {
  background:transparent;
}

<!-- PAGE ELEMENTS --> 
#bodyContent hr {
  display:none;
}
#bodyContent center {
  text-align:left;
}
#page-content > .row {
  background:#FFF; 
}
#p-cactions {
  background-color:#FFF;
  padding-bottom:0px;
}
#content-updates-notification { 
  background: #231f20;
  color: #ffc528;
  padding:15px 30px;
}

#toc, .toc, .mw-warning { 
  border:1px solid #231f20;
  max-width:500px;
  padding:20px;
  background:#FFF;
}

#toc #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle { 
  text-align:left; 
}
.toctogglelabel { 
  color:#ffc528; 
}
.toclevel-1 > a { 
  font-family: 'Oswald', 'Arial', sans-serif; 
  font-size:16px;
}
.toc a { 
  color:#231f20; 
}
.mw-content-ltr h2 { 
  border:0px; 
}
#toc ul, .toc ul { 
  margin:0px; 
}
.mw-content-ltr h2 { 
  border-bottom: 2px solid #ffc528; 
}
table.wikitable { 
  background-color:#FFF; 
  margin-top:20px !important;
}
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
  border:2px solid #ffc528;
  color:#ffc528;
  background:transparent;
}
.mw-content-text hr { 
  display:none; 
}

#bodyContent.mw-bodytext {
  max-width:880px;
}
<!-- FOOTER -->
footer.row {
  margin:0 -50px 0 !important;
  padding:10px 40px 5px;
  background-color:#ffc528;
  border:0px;
}
.footer-right-icons {
  display:none;
}
.div-footer-left {
  width:100%;
}
ul#footer-left li {
  display:inline;
}
ul#footer-left li#footer-copyright-notice, 
ul#footer-left li#footer-lastmod {
  display:block;
}
#footer a:hover {
  color:#FFF; 
}

@media only screen and (min-width: 64.0625em){
#p-cactions { 
  padding-left:50px; 
  padding-right:50px; 
}
}

@media only screen and (min-width: 40.0625em) {
body { 
  font-size:16px; 
}
h1, h1.title { 
  font-size:48px;
}
h2 { 
  font-size:36px; 
}
h3 { 
  font-size:24px; 
}
h4 { }
p, ul, ol, dl { 
  font-size:16px; 
}
}

@media screen and (max-width: 1379px) and (min-width: 800px) {
#p-cactions { 
  left:0px; 
  padding-left:50px;
  padding-right:50px;
}
}

@media screen and (max-width: 799px) {
.navbar-links { 
  display:none; 
}
#p-cactions { 
  left:0px; 
  padding-left:50px;
  padding-right:50px;
}
ul#footer-right li {
  float:left;
  margin:0 .5em .5em 0 
}
.search-bar-section {
  right:30px;
  left:60%; 
}
#p-cactions > a.button.pull-right {
  margin-top:20px;
}