Common.css
From Whole Latte Love Support Library
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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Clear the cache in Tools → Preferences
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300,300i,700');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif');
body {font-family: 'Open Sans', sans-serif;}
.top-bar-logo{
padding: 5px;
}
.title-name{
font-family: 'Noto Serif', serif;
font-weight:700;
}
h1,h2,h3,h4{
font-family: 'Open Sans Bold', sans-serif;
font-weight:700;
border: none;
}
h1{
color: #717275;
font-family: 'Open Sans Bold', sans-serif;
font-weight:700;
}
.mw-body h1 {
color: #717275;
font-family: 'Open Sans Condensed', sans-serif;
font-weight:700;
}
h2{
color: #717275;
font-family: 'Open Sans Bold', sans-serif;
padding-bottom: 8px;
margin-bottom: 30px;
}
.mw-body h2 {
color: #717275;
font-family: 'Open Sans Condensed', sans-serif;
}
h3{
color: #717275;
font-family: 'Open Sans Bold', sans-serif;
font-weight:500;
margin-top: 0 !important;
}
.mw-body h3 {
color: #717275;
font-family: 'Open Sans Condensed', sans-serif;
font-weight:700;
}
h4{
font-size: 1.125em;
font-family: 'Open Sans',sans-serif;
font-weight: 300;
line-height: 1.6;
}
div#mw-panel div.portal div.body ul li a{
color:#717275
}
div#mw-panel div.portal div.body ul li a:visited{
color:#717275;
}
.mainbanner{
max-width:100%;
height:auto;
width:auto;
}
img {
max-width: 100%; height: auto; width: auto\9; /* ie8 */
}
{font-family: 'Open Sans', sans-serif;}
/* New Wiki CSS */
.nav-ptag{
color: black;
font-weight: 700;
text-align:center;
line-height: 1.2;
padding: 10px 0;
font-family: 'Open Sans Bold', sans-serif;
height: 80px;
}
.mobile-nav-ptag{
color: black;
font-weight: 700;
text-align:left;
line-height: 1.2;
padding: 15px 0;
padding-left: 65px;
font-family: 'Open Sans Bold', sans-serif;
margin-bottom: 0px;
font-size: 16px;
}
.anchor-list-item{
display: inline-block;
font-size: 18px;
color: #333 !important;
background-color: #f1f1f1;
padding: 5px 10px;
margin: 5px;
min-width: 340px;
}
.anchor-list-item:hover{
background-color: #0e90a3;
color: #fff !important;
transition: 0.1s;
}
.anchor-ul{
text-align:center;
margin: 0px;
}
p.media-caption{
font-family: 'Open Sans Bold', sans-serif;
font-size: 18px;
text-align:center;
font-weight: 700;
}
.manual-box{
border: 1px solid #f1f1f1;
padding: 10px;
text-align: center;
}
.manual-name{
text-align:center;
font-family: 'Open Sans Bold', sans-serif;
font-weight: 700;
}
/* Product Page Banner*/
@media (max-width: 767px){
.text-overlay{
position: inherit;
transform: none;
margin-bottom: 15px;
margin-top: -30px;
}
.text-overlay h1 {
color: #000;
text-shadow: none;
font-size: 1.5em;
margin-bottom: 0px;
}
div#content > h1#firstHeading{
margin-top: -55px;
}
.banner-image{
display:none;
}
#mw-content-text ul{
margin-left: 5px;
}
.anchor-list-item{
min-width: 100%;
}
}
div#content > h1#firstHeading{
font-family: 'Noto Serif', serif;
}
.negative-margin{
margin: -40px 0 !important;
}
@media (min-width: 768px){
div#content > h1#firstHeading{
display: none;
}
.banner-image{
margin-top: -30px;
}
.text-overlay {
position: absolute;
transform: translate(10%,-175%);
color: #fff;
text-align: left;
line-height: 1;
text-shadow: 2px 2px 4px #4f4f4f;
width: auto;
}
.text-overlay h1{
color: #fff;
font-size: 2.5em;
margin-bottom: 0px;
}
}
.mainbanner{
max-width:100%;
height:auto;
width:auto;
}
@media (max-width: 767px){
.desktop-nav{
display: none;
}
.desktop-banner{
display: none;
}
div#content > h1#firstHeading{
display: none;
}
}
@media (min-width: 768px) and (max-width: 1200px){
.text-overlay {
transform: translate(10%,-205%);
}
.text-overlay h1{
font-size: 2em !important;
}
}
/* Mobile Menu CSS */
.mobile-menu-use{
max-width: 400px;
background: url(https://static.wholelattelove.com/wiki/icons/Mobile_NavIcon3_Normal_01.jpg);
background-color: #f1f1f1;
background-repeat: no-repeat;
min-height: 50px;
margin-bottom: 5px;margin-bottom: 10px;
background-position-y: center;
border: 1px solid #ccc;
background-position-x: 5px;
float: left;
}
.mobile-menu-cm{
max-width: 400px;
background: url(https://static.wholelattelove.com/wiki/icons/Mobile_NavIcon3_Normal_02.jpg);
background-color: #f1f1f1;
background-repeat: no-repeat;
min-height: 50px;
margin-bottom: 5px;margin-bottom: 10px;
background-position-y: center;
background-position-x: 5px;
border: 1px solid #ccc;
float: left;
}
.mobile-menu-trouble{
max-width: 400px;
background: url(https://static.wholelattelove.com/wiki/icons/Mobile_NavIcon3_Normal_03.jpg);
background-color: #f1f1f1;
background-repeat: no-repeat;
min-height: 50px;
margin-bottom: 5px;margin-bottom: 10px;
background-position-y: center;
background-position-x: 5px;
border: 1px solid #ccc;
float: left;
}
.mobile-menu-dm{
max-width: 400px;
background: url(https://static.wholelattelove.com/wiki/icons/Mobile_NavIcon3_Normal_04.jpg);
background-color: #f1f1f1;
background-repeat: no-repeat;
min-height: 50px;
margin-bottom: 5px;margin-bottom: 10px;
background-position-y: center;
background-position-x: 5px;
border: 1px solid #ccc;
float: left;
}
.mobile-menu-specs{
max-width: 400px;
background: url(https://static.wholelattelove.com/wiki/icons/Mobile_NavIcon3_Normal_05.jpg);
background-color: #f1f1f1;
background-repeat: no-repeat;
min-height: 50px;
margin-bottom: 5px;margin-bottom: 10px;
background-position-y: center;
background-position-x: 5px;
border: 1px solid #ccc;
float: left;
}
.mobile-menu-blog{
max-width: 400px;
background: url(https://static.wholelattelove.com/wiki/icons/Mobile_NavIcon3_Normal_06.jpg);
background-color: #f1f1f1;
background-repeat: no-repeat;
min-height: 50px;
margin-bottom: 5px;margin-bottom: 10px;
background-position-y: center;
background-position-x: 5px;
border: 1px solid #ccc;
float: left;
}
@media (min-width: 641px){
.mobile-menu-use.medium-6{
width: 48.678%;
margin: 4px;
}
.mobile-menu-cm.medium-6{
width: 48.678%;
margin: 4px;
}
.mobile-menu-trouble.medium-6{
width: 48.678%;
margin: 4px;
}
.mobile-menu-dm.medium-6{
width: 48.678%;
margin: 4px;
}
.mobile-menu-specs.medium-6{
width: 48.678%;
margin: 4px;
}
.mobile-menu-blog.medium-6{
width: 48.678%;
margin: 4px;
}
}
.row .mobile-nav{
padding: 0px !important;
}
.desktop-nav{
text-align: center;
width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px){
.mobile-nav{
display: none;
}
}
@media (max-width: 560px){
.title-name{
font-size: 1.1em;
line-height: 2.4em;
}
}
@media (max-width: 333px){
.title-name{
font-size: 1em;
line-height: 2.4em;
}
}
li.title.back.js-generated > h5 > a{
color: #fff !important;
}
.top-bar .toggle-topbar.menu-icon > a{
color: #fff !important;
}
/* TOP BAR STYLES */
.top-bar ul{
color: #fff !important;
}
.top-bar .title-area {
padding: 10px 0;
}
.top-bar-section ul {
padding: 10px 0;
}
.top-bar-logo{
padding: 5px;
}
.top-bar .toggle-topbar.menu-icon a{
color: #fff !important;
}
@media (min-width: 641px){
.top-bar{
height: auto;
}
}
@media (max-width: 640px){
.top-bar{
height: 65px;
}
}
.homepage-nav-title{
text-align:center;
font-family: 'Open Sans Bold', sans-serif;
font-weight: 700;
margin: 0;
padding: 15px 0;
}
.homepage-nav-copy{
text-align:center;
font-size: 15px;
line-height: 1.3;
margin: 0;
padding-bottom: 15px;
}
.homepage-nav-link{
text-align:center;
font-family: 'Open Sans Bold', sans-serif;
font-weight: 700;
font-size: 16px;
}
.homepage-copy{
font-size: 16px;
line-height: 1.4;
}
.top-bar .toggle-topbar.menu-icon a span::after{
box-shadow: 0 0 0 1px #fff, 0 7px 0 1px #fff, 0 14px 0 1px #fff !important;
}