|
/* |
|
Custom stylesheet for /v/apple (https://voat.co/v/apple) |
|
Stylesheet based on Minity by Nurdoidz (https://voat.co/user/nurdoidz) |
|
Sidebar image from the official Apple website (https://www.apple.com) |
|
*/ |
|
|
|
/* FONTS AND TEXT */ |
|
@import url( https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic ); |
|
|
|
body {font-family: "-apple-system-font", Roboto, Helvetica, Arial, Geneva, sans-serif; font-size: 11px;} |
|
.alert-title {font-family: "-apple-system-font", Roboto, Helvetica, Arial, Geneva, sans-serif; font-size: 18px;} |
|
.alert-h1 {font-family: "-apple-system-font", Roboto, Helvetica, Arial, Geneva, sans-serif; font-size: 12px; font-weight: bold;} |
|
.alert-h2 {font-family: "-apple-system-font", Roboto, Helvetica, Arial, Geneva, sans-serif; font-size: 16px;} |
|
|
|
/* DASHBOARD */ |
|
.top-bar {text-transform: uppercase; font-size: 11px;} |
|
.dark .top-bar a {color: #FFF;} |
|
.dark .top-bar a:hover {color: #FFF; text-decoration: underline;} |
|
.light .top-bar a {color: #333;} |
|
.light .top-bar a:hover {color: #333; text-decoration: underline;} |
|
|
|
#dashboard h1 {text-transform: uppercase; font-size: 16px; font-weight: bold;} |
|
#dashboard ul li {text-transform: lowercase;} |
|
|
|
.dark #dashboard h1 {color: #FFF;} |
|
.light #dashboard h1 {color: #333;} |
|
|
|
.dark #dashboard ul li a:hover {color: #4AABE7;} |
|
.light #dashboard ul li a:hover {color: #4AABE7;} |
|
|
|
/* TOP SUBVERSES LIST */ |
|
.sr-list {text-transform: uppercase; font-size: 11px;} |
|
#sr-more-link {text-transform: uppercase; font-size: 11px;} |
|
|
|
/* TOP SUBSCRIPTION MENU */ |
|
.whoaSubscriptionMenu {text-transform: uppercase; font-size: 11px;} |
|
|
|
/* HEADER SUBVERSE NAME */ |
|
.pagename {text-transform: capitalize;} |
|
|
|
/* SIDEBAR SUBVERSE NAME */ |
|
.whoaversename {text-transform: capitalize;} |
|
.subverse {text-transform: capitalize;} |
|
|
|
/* VOAT LOGO */ |
|
/* The size of the Voat logo must be 112 x 31 pixels. */ |
|
#header-img {background: url(https://i.imgur.com/qFsYQXg.png); padding-left: 112px;} |
|
|
|
/* APPLE LOGO */ |
|
#header{margin-bottom: 172px;} |
|
#header::before { |
|
content: ''; |
|
width: 108px; |
|
height: 128px; |
|
display: block; |
|
position: absolute; |
|
top: 103px; |
|
left: 50%; |
|
margin-left: -54px; |
|
background: url(https://i.imgur.com/DAqAhhL.png); |
|
background-size: 108px 128px; |
|
} |
|
|
|
/* HEADER TEXT AND SUBSCRIPTION MENU COLORS */ |
|
#header:focus {outline: none;} |
|
|
|
.dark .whoaSubscriptionMenu li ul li a:hover { |
|
background: #737373; |
|
background: -webkit-linear-gradient( top,#828282,#737373 ); |
|
background: -moz-linear-gradient( top,#828282,#737373 ); |
|
background: -ms-linear-gradient( top,#828282,#737373 ); |
|
background: -o-linear-gradient( top,#828282,#737373 ); |
|
color: #FFF !important; |
|
} |
|
|
|
.dark #sr-more-link:hover {background: #555; color: #FFF; text-decoration: none;} |
|
|
|
.dark .sr-list li a {color: #FFF;} |
|
.dark #sr-header-area .selected a {color: #838383;} |
|
.dark .drop-arrow {border-color: #FFF transparent transparent;} |
|
.dark .pagename a:hover {color: #8F8F8F;} |
|
.dark .tabmenu li.selected a:hover {color: #8F8F8F;} |
|
.dark #header-account a:hover {color: #8F8F8F;} |
|
|
|
.light .whoaSubscriptionMenu li ul li a:hover { |
|
background: #A1A1A1; |
|
background: -webkit-linear-gradient( top,#ABABAB,#A1A1A1 ); |
|
background: -moz-linear-gradient( top,#ABABAB,#A1A1A1 ); |
|
background: -ms-linear-gradient( top,#ABABAB,#A1A1A1 ); |
|
background: -o-linear-gradient( top,#ABABAB,#A1A1A1 ); |
|
color: #FBFBFB !important; |
|
} |
|
|
|
.light #sr-more-link:hover {background: #A0A0A0; color: #FFF; text-decoration: none;} |
|
|
|
.light .sr-list li a {color: #333;} |
|
.light #sr-header-area .selected a {color: #434343;} |
|
.light .drop-arrow {border-color: #333 transparent transparent;} |
|
.light .pagename a:hover {color: #A0A0A0;} |
|
.light .tabmenu li.selected a:hover {color: #A0A0A0;} |
|
.light #header-account a:hover {color: #A0A0A0;} |
|
|
|
/* LINK AND TEXT COLORS */ |
|
.userstats-submission-title:hover {color: #4AABE7;} |
|
.userstats-submission-author:hover {color: #4AABE7;} |
|
.userstats-submission-subverse:hover {color: #4AABE7;} |
|
|
|
.link a.subverse:hover {color: #4AABE7;} |
|
.link a.author:hover {color: #4AABE7; text-decoration: underline;} |
|
|
|
a:hover {color: #4AABE7;} |
|
|
|
.field-validation-error {color: #4AABE7;} |
|
|
|
.titlebox h1 a:hover {color: #4AABE7;} |
|
|
|
.footer a:link, .footer a:visited {color: gray;} |
|
.footer a:hover, .footer a:active {color: #4AABE7;} |
|
|
|
.dark .linklisting .tagline a.author:link, .dark .linklisting .tagline a.author:visited {color: #ABABAB; font-weight: bold; text-decoration: none;} |
|
.light .linklisting .tagline a.author:link, .light .linklisting .tagline a.author:visited {color: #6D6D6D; font-weight: bold; text-decoration: none;} |
|
.dark .linklisting .tagline a.author:hover, .dark .linklisting .tagline a.author:active {color: #4AABE7; text-decoration: none;} |
|
.light .linklisting .tagline a.author:hover, .light .linklisting .tagline a.author:active {color: #4AABE7; text-decoration: none;} |
|
|
|
.domain {text-transform: lowercase;} |
|
.domain a:hover {color: #4AABE7; text-decoration: none;} |
|
|
|
.menuarea a:link, .menuarea a:visited {color: gray;} |
|
.menuarea a:hover, .menuarea a:active {color: #4AABE7;} |
|
|
|
.tagline a {color: #4AABE7;} |
|
.tagline a:visited {color: #4AABE7;} |
|
.tagline a:hover {color: #4AABE7; text-decoration: underline;} |
|
|
|
.dark .user .upvoatsGiven a {color: #DFDFDF !important;} |
|
.light .user .upvoatsGiven a {color: #404040 !important;} |
|
|
|
#header-account .logged-out a:link, #header-account .logged-out a:visited {color: #4AABE7; text-decoration: none;} |
|
#header-account .logged-out a:hover, #header-account .logged-out a:active {color: #4AABE7; text-decoration: underline;} |
|
|
|
#sortingThingy a:link, #sortingThingy a:visited {color: #4AABE7; text-decoration: none;} |
|
#sortingThingy a:hover, #sortingThingy a:active {text-decoration: underline;} |
|
|
|
/* ALERT TITLE COLORS */ |
|
.dark .alert-title {color: #DFDFDF;} |
|
.dark .alert-h1 {color: #DFDFDF;} |
|
.dark .alert-h2 {color: #DFDFDF;} |
|
|
|
.light .alert-title {color: #404040;} |
|
.light .alert-h1 {color: #404040;} |
|
.light .alert-h2 {color: #404040;} |
|
|
|
/* LINK TITLE COLORS */ |
|
.dark .link a.title.may-blank {color: #C3C3C3; font-weight: bold;} |
|
.light .link a.title.may-blank {color: #4A4A4A; font-weight: bold;} |
|
|
|
.dark .link a.title.may-blank:hover {color: #56A8DA; text-decoration: none;} |
|
.light .link a.title.may-blank:hover {color: #4AABE7; text-decoration: none;} |
|
|
|
.link a.title.may-blank:visited {color: #8A8A8A;} |
|
|
|
/* LINK THUMBNAILS */ |
|
.thumbnail {display: none;} |
|
|
|
/* SIDEBAR IMAGE */ |
|
/* The width of the sidebar image must be 280 pixels, change the padding value to match the height of the image. */ |
|
.dark .side .md:nth-of-type(1){background: url(https://i.imgur.com/pBACmUV.png) top center no-repeat; padding: 224px 0 0; margin: 10px 0 0;} |
|
.light .side .md:nth-of-type(1){background: url(https://i.imgur.com/KL00ikV.png) top center no-repeat; padding: 224px 0 0; margin: 10px 0 0;} |
|
|
|
/* SIDEBAR LINK AND TEXT COLORS */ |
|
.side .alert-h1 {text-transform: uppercase;} |
|
|
|
.dark .side .titlebox .bottom, .dark .side .titlebox .bottom a, .dark .side .titlebox .bottom a:visited {color: gray;} |
|
.dark .side .titlebox .bottom a:hover {color: #4AABE7;} |
|
.light .side .titlebox .bottom, .light .side .titlebox .bottom a, .light .side .titlebox .bottom a:visited {color: gray;} |
|
.light .side .titlebox .bottom a:hover {color: #4AABE7;} |
|
|
|
.dark .side .sidecontentbox, .dark .side .sidecontentbox a, .dark .side .sidecontentbox a:visited {color: gray;} |
|
.dark .side .sidecontentbox a:hover {color: #4AABE7;} |
|
.light .side .sidecontentbox, .light .side .sidecontentbox a, .light .side .sidecontentbox a:visited {color: gray;} |
|
.light .side .sidecontentbox a:hover {color: #4AABE7;} |
|
|
|
.dark .side .md a,.dark .side .md a:visited {color: gray;} |
|
.dark .side .md a:hover {color: #4AABE7;} |
|
.light .side .md a,.light .side .md a:visited {color: gray;} |
|
.light .side .md a:hover {color: #4AABE7;} |
|
|
|
.dark .side .sidecontentbox .content, .dark .side .sidecontentbox .content a, .dark .side .sidecontentbox .content a:visited {color: gray;} |
|
.dark .side .sidecontentbox .content a:hover {color: #4AABE7;} |
|
.light .side .sidecontentbox .content {color: gray;} |
|
|
|
.side .titlebox .bottom {border: none;} |
|
|
|
.side div.titlebox.submissioninfo a, .side div.titlebox.submissioninfo a:visited {color: gray; font-weight: bold; text-decoration: none;} |
|
.side div.titlebox.submissioninfo a:hover, .side div.titlebox.submissioninfo a:active {color: #4AABE7; text-decoration: none;} |
|
|
|
.dark .side div.titlebox.submissioninfo {background: #303030; border: 1px solid #272727; border-radius: 2px; padding: 8px;} |
|
.light .side div.titlebox.submissioninfo {background: #FCFCFC; border: 1px solid #E4E4E4; border-radius: 2px; padding: 8px;} |
|
|
|
.dark .side .alert-h2 {color: #DFDFDF; font-size: 14px; font-weight: bold; text-transform: uppercase;} |
|
.light .side .alert-h2 {color: #404040; font-size: 14px; font-weight: bold; text-transform: uppercase;} |
|
|
|
#moderation_tools a:hover {text-decoration: none;} |
|
|
|
.side .md a:hover {text-decoration: none;} |
|
|
|
/* SIDEBAR MARKDOWN CODE */ |
|
.dark .side .md h2 { |
|
color: #DFDFDF; |
|
font-size: 14px; |
|
text-transform: uppercase; |
|
border-bottom: 2px solid; |
|
margin-bottom: 2px; |
|
border-color: #222; |
|
} |
|
.light .side .md h2 { |
|
color: #404040; |
|
font-size: 14px; |
|
text-transform: uppercase; |
|
border-bottom: 2px solid; |
|
margin-bottom: 2px; |
|
border-color: #DDD; |
|
} |
|
|
|
.dark .side .md hr {margin: 10px 0; border: none;} |
|
.light .side .md hr {margin: 10px 0; border: none;} |
|
|
|
.dark .side .md blockquote a {color: gray;} |
|
.light .side .md blockquote a {color: gray;} |
|
.dark .side .md blockquote ul {padding: 0px; margin-top: 6px; margin-bottom: 5px;} |
|
.light .side .md blockquote ul {padding: 0px; margin-top: 6px; margin-bottom: 5px;} |
|
.dark .side .md blockquote { |
|
background: #303030; |
|
border-color: #272727; |
|
border-width: 1px; |
|
box-shadow: none; |
|
margin: 0px; |
|
padding: 0px 5px; |
|
} |
|
.light .side .md blockquote { |
|
background: #FCFCFC; |
|
border-color: #E4E4E4; |
|
border-width: 1px; |
|
box-shadow: none; |
|
margin: 0px; |
|
padding: 0px 5px; |
|
} |
|
|
|
.dark .side .md blockquote > blockquote { |
|
background: #303030; |
|
border-bottom: 1px solid #272727; |
|
border-top: none; |
|
border-left: none; |
|
border-right: none; |
|
box-shadow: none; |
|
margin: 0px; |
|
padding: 0px 10px; |
|
} |
|
.light .side .md blockquote > blockquote { |
|
background: #FCFCFC; |
|
border-bottom: 1px solid #E4E4E4; |
|
border-top: none; |
|
border-left: none; |
|
border-right: none; |
|
box-shadow: none; |
|
margin: 0px; |
|
padding: 0px 10px; |
|
} |
|
|
|
.dark .side .md table { |
|
background-color: #303030; |
|
width: 280px; |
|
box-shadow: none; |
|
margin: 0; |
|
font-weight: normal; |
|
} |
|
.dark .side .md table thead { |
|
border-bottom: 2px solid #272727; |
|
border-bottom: none; |
|
color: #DFDFDF; |
|
font-weight: normal; |
|
} |
|
.dark .side .md td, .dark .md th { |
|
border: 1px solid #272727; |
|
line-height: normal; |
|
padding: 5px; |
|
font-weight: normal; |
|
} |
|
|
|
.light .side .md table { |
|
background-color: #FCFCFC; |
|
width: 280px; |
|
box-shadow: none; |
|
margin: 0; |
|
font-weight: normal; |
|
} |
|
.light .side .md table thead { |
|
border-bottom: 2px solid #E4E4E4; |
|
border-bottom: none; |
|
color: #DFDFDF; |
|
font-weight: normal; |
|
} |
|
.light .side .md td, .light .md th { |
|
border: 1px solid #E4E4E4; |
|
line-height: normal; |
|
padding: 5px; |
|
font-weight: normal; |
|
} |
|
|
|
/* MARKDOWN CODE */ |
|
.md a:hover {color: #4AABE7 !important; text-decoration: underline;} |
|
|
|
.dark .md a:visited {color: #56A8DA; text-decoration: none;} |
|
.light .md a:visited {color: #4AABE7; text-decoration: none;} |
|
|
|
.dark .md blockquote { |
|
background: #292929; |
|
border-color: #242424 #242424 #242424 #202020; |
|
border-style: solid; |
|
border-width: 1px 1px 1px 3px; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.1 ); |
|
font-size: inherit; |
|
margin: 5px 10px; |
|
padding: 0 8px 4px; |
|
} |
|
|
|
.light .md blockquote { |
|
background: #F5F5F5; |
|
border-color: #E8E8E8 #E8E8E8 #E8E8E8 #DBDBDB; |
|
border-style: solid; |
|
border-width: 1px 1px 1px 3px; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.1 ); |
|
font-size: inherit; |
|
margin: 5px 10px; |
|
padding: 0 8px 4px; |
|
} |
|
|
|
.dark .link .usertext .md blockquote {background:#292929;} |
|
|
|
.dark .link .usertext .md pre {background:#2E2E2E;} |
|
.dark .link .usertext .md code {background:#2E2E2E;} |
|
|
|
.dark pre, |
|
.dark code {background: #2E2E2E; border: 1px solid #272727; color: #CCC;} |
|
.dark pre code {border: 0;} |
|
|
|
.light pre, |
|
.light code {background: #F5F5F5; border: 1px solid #CCC; color: #333;} |
|
.light pre code {border: 0;} |
|
|
|
.dark .comment .comment .comment blockquote, |
|
.dark .comment .comment .comment .comment .comment blockquote, |
|
.dark .comment .comment .comment .comment .comment .comment .comment blockquote, |
|
.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment blockquote, |
|
.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment blockquote {background-color: #292929;} |
|
.dark .comment .comment blockquote, |
|
.dark .comment .comment .comment .comment blockquote, |
|
.dark .comment .comment .comment .comment .comment .comment blockquote, |
|
.dark .comment .comment .comment .comment .comment .comment .comment .comment blockquote, |
|
.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment blockquote {background-color: #333333;} |
|
|
|
/* TOP TAB MENU BUTTONS */ |
|
.dark .tabmenu li.selected a.contribute { |
|
background: #4B4B4B; |
|
background: -webkit-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -moz-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -ms-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -o-linear-gradient( top,#4B4B4B,#454545 ); |
|
border: solid #303030; |
|
border-width: 1px 1px 2px; |
|
color: #DDD; |
|
font-weight: bold; |
|
} |
|
.dark .tabmenu li.selected a.contribute:hover { |
|
background: #414141; |
|
background: -webkit-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -moz-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -ms-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -o-linear-gradient( top,#414141,#3B3B3B ); |
|
border-color: #2D2D2D; |
|
} |
|
|
|
.light .tabmenu li.selected a.contribute { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -moz-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -ms-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -o-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
border: solid #D1D1D1; |
|
border-width: 1px 1px 2px; |
|
color: #4C4C4C; |
|
font-weight: bold; |
|
} |
|
.light .tabmenu li.selected a.contribute:hover { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -moz-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -ms-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -o-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
border-color: #CCC; |
|
} |
|
|
|
/* TOP TAB MENU BUTTONS UNSELECTED */ |
|
.dark .tabmenu li.disabled a.contribute { |
|
background: #4B4B4B; |
|
background: -webkit-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -moz-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -ms-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -o-linear-gradient( top,#4B4B4B,#454545 ); |
|
border: solid #303030; |
|
border-width: 1px 1px 2px; |
|
color: #DDD; |
|
} |
|
.dark .tabmenu li.disabled a.contribute:hover { |
|
background: #414141; |
|
background: -webkit-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -moz-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -ms-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -o-linear-gradient( top,#414141,#3B3B3B ); |
|
border-color: #2D2D2D; |
|
} |
|
|
|
.light .tabmenu li.disabled a.contribute { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -moz-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -ms-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -o-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
border: solid #D1D1D1; |
|
border-width: 1px 1px 2px; |
|
color: #4C4C4C; |
|
} |
|
.light .tabmenu li.disabled a.contribute:hover { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -moz-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -ms-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -o-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
border-color: #CCC; |
|
} |
|
|
|
/* BUTTONS */ |
|
.dark .btn-whoaverse.contribute { |
|
background: #4B4B4B; |
|
background: -webkit-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -moz-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -ms-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -o-linear-gradient( top,#4B4B4B,#454545 ); |
|
border-color: #303030; |
|
color: #DDD; |
|
} |
|
.dark .btn-whoaverse.contribute:hover { |
|
background: #414141; |
|
background: -webkit-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -moz-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -ms-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -o-linear-gradient( top,#414141,#3B3B3B ); |
|
border-color: #2D2D2D; |
|
} |
|
|
|
.light .btn-whoaverse.contribute { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -moz-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -ms-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -o-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
border-color: #D1D1D1; |
|
color: #4C4C4C; |
|
} |
|
.light .btn-whoaverse.contribute:hover { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -moz-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -ms-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -o-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
border-color: #CCC; |
|
} |
|
|
|
.dark .btn-whoaverse.btn-block.contribute:hover { |
|
background: #414141; |
|
background: -webkit-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -moz-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -ms-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -o-linear-gradient( top,#414141,#3B3B3B ); |
|
border-color: #2D2D2D; |
|
color: #FFF; |
|
} |
|
|
|
.dark .btn-whoaverse-paging:hover { |
|
background: #414141; |
|
background: -webkit-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -moz-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -ms-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -o-linear-gradient( top,#414141,#3B3B3B ); |
|
border-color: #2D2D2D; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.15 ); |
|
color: #FFF; |
|
text-decoration: none; |
|
} |
|
|
|
.light .btn-whoaverse-paging { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -moz-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -ms-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -o-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
border: 1px solid #D1D1D1; |
|
border-radius: 2px; |
|
color: #4C4C4C; |
|
display: inline-block; |
|
font-size: 10px; |
|
font-weight: bold; |
|
padding: 2px 6px; |
|
text-align: center; |
|
} |
|
.light .btn-whoaverse-paging:hover { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -moz-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -ms-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -o-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
border-color: #CCC; |
|
color: #444; |
|
text-decoration: none; |
|
} |
|
.light .btn-whoaverse-paging a {color: #4C4C4C !important;} |
|
.light .btn-whoaverse-paging:visited {color: #4C4C4C !important;} |
|
|
|
/* BODY BUTTONS */ |
|
.btn-whoaverse-paging {font-weight: bold;} |
|
|
|
.dark .btn-whoaverse-paging {font-weight: bold;} |
|
|
|
.dark .btn-whoaverse:hover { |
|
background: #414141; |
|
background: -webkit-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -moz-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -ms-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -o-linear-gradient( top,#414141,#3B3B3B ); |
|
border-color: #2D2D2D; |
|
color: #FFF; |
|
} |
|
|
|
/* SUBSCRIBE BUTTONS */ |
|
.side .btn-whoaverse-paging {font-weight: bold;} |
|
|
|
.dark .side .btn-whoaverse-paging {font-weight: bold;} |
|
|
|
.dark .btn-blocksubverse { |
|
background: #4B4B4B; |
|
background: -webkit-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -moz-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -ms-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -o-linear-gradient( top,#4B4B4B,#454545 ); |
|
border-color: #303030; |
|
color: #FFF; |
|
} |
|
.dark .btn-blocksubverse:hover { |
|
background: #414141; |
|
background: -webkit-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -moz-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -ms-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -o-linear-gradient( top,#414141,#3B3B3B ); |
|
border-color: #2D2D2D; |
|
color: #FFF; |
|
} |
|
|
|
.dark .btn-whoaverse-paging.btn-xs.btn-default.btn-sub { |
|
background: #3C74B3; |
|
background: -webkit-linear-gradient( top,#3C74B3,#326BAC ); |
|
background: -moz-linear-gradient( top,#3C74B3,#326BAC ); |
|
background: -ms-linear-gradient( top,#3C74B3,#326BAC ); |
|
background: -o-linear-gradient( top,#3C74B3,#326BAC ); |
|
border: 1px solid #2A5C93; |
|
color: #FFF; |
|
} |
|
.dark .btn-whoaverse-paging.btn-xs.btn-default.btn-sub:hover { |
|
background: #4B4B4B; |
|
background: -webkit-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -moz-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -ms-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -o-linear-gradient( top,#4B4B4B,#454545 ); |
|
border-color: #303030; |
|
} |
|
|
|
.light .btn-whoaverse-paging.btn-xs.btn-default.btn-sub { |
|
background: #BBE5FF; |
|
background: -webkit-linear-gradient( top,#BBE5FF,#A6DDFF ); |
|
background: -moz-linear-gradient( top,#BBE5FF,#A6DDFF ); |
|
background: -ms-linear-gradient( top,#BBE5FF,#A6DDFF ); |
|
background: -o-linear-gradient( top,#BBE5FF,#A6DDFF ); |
|
border: 1px solid #70B7E3; |
|
color: #2B4758; |
|
} |
|
.light .btn-whoaverse-paging.btn-xs.btn-default.btn-sub:hover { |
|
background: #A7DEFF; |
|
background: -webkit-linear-gradient( top,#A7DEFF,#91D5FF ); |
|
background: -moz-linear-gradient( top,#A7DEFF,#91D5FF ); |
|
background: -ms-linear-gradient( top,#A7DEFF,#91D5FF ); |
|
background: -o-linear-gradient( top,#A7DEFF,#91D5FF ); |
|
border-color: #61AFE0; |
|
} |
|
|
|
.light .btn-unsub { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -moz-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -ms-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -o-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
border: 1px solid #D1D1D1; |
|
color: #4C4C4C; |
|
} |
|
.light .btn-unsub:hover,.btn-unsub:active,.btn-unsub:focus { |
|
background: #A7DEFF; |
|
background: -webkit-linear-gradient( top,#A7DEFF,#91D5FF ); |
|
background: -moz-linear-gradient( top,#A7DEFF,#91D5FF ); |
|
background: -ms-linear-gradient( top,#A7DEFF,#91D5FF ); |
|
background: -o-linear-gradient( top,#A7DEFF,#91D5FF ); |
|
border-color: #61AFE0; |
|
color: #2B4758; |
|
} |
|
|
|
/* OTHER BUTTONS */ |
|
.dark a.btn-tour { |
|
background: #4B4B4B; |
|
background: -webkit-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -moz-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -ms-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -o-linear-gradient( top,#4B4B4B,#454545 ); |
|
border: 1px solid #303030; |
|
border-radius: 2px; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.1 ); |
|
color: #FFF; |
|
display: inline-block; |
|
font-size: 12px; |
|
margin-top: 10px; |
|
padding: 3px 7px; |
|
text-align: center; |
|
} |
|
.dark .btn-tour:hover { |
|
background: #414141; |
|
background: -webkit-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -moz-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -ms-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -o-linear-gradient( top,#414141,#3B3B3B ); |
|
border: 1px solid #2D2D2D; |
|
border-radius: 2px; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.1 ); |
|
color: #FFF; |
|
display: inline-block; |
|
font-size: 12px; |
|
margin-top: 10px; |
|
padding: 3px 7px; |
|
text-align: center; |
|
} |
|
|
|
.light a.btn-tour { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -moz-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -ms-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -o-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
border: 1px solid #D1D1D1; |
|
border-radius: 2px; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.1 ); |
|
color: #4C4C4C; |
|
display: inline-block; |
|
font-size: 12px; |
|
margin-top: 10px; |
|
padding: 3px 7px; |
|
text-align: center; |
|
} |
|
.light .btn-tour:hover { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -moz-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -ms-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -o-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
border: 1px solid #CCC; |
|
border-radius: 2px; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.1 ); |
|
color: #4C4C4C; |
|
display: inline-block; |
|
font-size: 12px; |
|
margin-top: 10px; |
|
padding: 3px 7px; |
|
text-align: center; |
|
} |
|
|
|
.dark .btn-whoaverse-medium { |
|
background: #4B4B4B; |
|
background: -webkit-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -moz-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -ms-linear-gradient( top,#4B4B4B,#454545 ); |
|
background: -o-linear-gradient( top,#4B4B4B,#454545 ); |
|
border: 1px solid #303030; |
|
border-radius: 2px; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.1 ); |
|
color: #FFF; |
|
cursor: pointer; |
|
display: inline-block; |
|
font-size: 12px; |
|
padding: 2px 8px; |
|
text-align: center; |
|
} |
|
.dark .btn-whoaverse-medium:hover { |
|
background: #414141; |
|
background: -webkit-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -moz-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -ms-linear-gradient( top,#414141,#3B3B3B ); |
|
background: -o-linear-gradient( top,#414141,#3B3B3B ); |
|
border-color: #2D2D2D; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.15 ); |
|
color: #FFF; |
|
} |
|
|
|
.light .btn-whoaverse-medium { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -moz-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -ms-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
background: -o-linear-gradient( top,#FDFDFD,#F7F7F7 ); |
|
border: 1px solid #D1D1D1; |
|
border-radius: 2px; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.1 ); |
|
color: #4C4C4C; |
|
cursor: pointer; |
|
display: inline-block; |
|
font-size: 12px; |
|
font-weight: bold; |
|
padding: 2px 8px; |
|
text-align: center; |
|
} |
|
.light .btn-whoaverse-medium:hover { |
|
background: #F8F8F8; |
|
background: -webkit-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -moz-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -ms-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
background: -o-linear-gradient( top,#F8F8F8,#F2F2F2 ); |
|
border-color: #CCC; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.15 ); |
|
color: #4C4C4C; |
|
} |
|
|
|
/* STICKY LINK */ |
|
.dark .promoted { |
|
text-transform: capitalize; |
|
background: #62C6FA; |
|
border: 1px solid #62C6FA; |
|
border-radius: 2px; |
|
color: #0A1319; |
|
display: inline-block; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
margin-right: 3px; |
|
max-width: 74px; |
|
min-width: 74px; |
|
overflow: hidden; |
|
padding: 2px; |
|
text-align: center; |
|
white-space: nowrap; |
|
vertical-align: middle; |
|
} |
|
.light .promoted { |
|
text-transform: capitalize; |
|
background: #62C6FA; |
|
border: 1px solid #62C6FA; |
|
border-radius: 2px; |
|
color: #F0F9FF; |
|
display: inline-block; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
margin-right: 3px; |
|
max-width: 74px; |
|
min-width: 74px; |
|
overflow: hidden; |
|
padding: 2px; |
|
text-align: center; |
|
white-space: nowrap; |
|
vertical-align: middle; |
|
} |
|
div.submission.even.link.stickied a.title.may-blank {color: #62C6FA;} |
|
div.submission.even.link.stickied a.title.may-blank:hover {text-decoration: underline;} |
|
|
|
/* LINK FLAIRS */ |
|
.link .flair {font-size: 11px;} |
|
|
|
.dark .linkflairlabel { |
|
background: #555555; |
|
border: 1px solid #555555; |
|
color: #DDDDDD; |
|
border-radius: 2px; |
|
display: inline-block; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
margin-right: 3px; |
|
min-width: 74px; |
|
overflow: hidden; |
|
padding: 2px 4px; |
|
text-align: center; |
|
white-space: nowrap; |
|
vertical-align: middle; |
|
} |
|
.light .linkflairlabel { |
|
background: #DDDDDD; |
|
border: 1px solid #DDDDDD; |
|
color: #555555; |
|
border-radius: 2px; |
|
display: inline-block; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
margin-right: 3px; |
|
min-width: 74px; |
|
overflow: hidden; |
|
padding: 2px 4px; |
|
text-align: center; |
|
white-space: nowrap; |
|
vertical-align: middle; |
|
} |
|
|
|
.dark .important-flair { |
|
text-transform: uppercase; |
|
background: #B44747 !important; |
|
border: 1px solid #B44747 !important; |
|
color: #120707 !important; |
|
border-radius: 2px; |
|
display: inline-block; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
margin-right: 3px; |
|
min-width: 74px; |
|
overflow: hidden; |
|
padding: 2px 4px; |
|
text-align: center; |
|
white-space: nowrap; |
|
vertical-align: middle; |
|
} |
|
.light .important-flair { |
|
text-transform: uppercase; |
|
background: #B44747 !important; |
|
border: 1px solid #B44747 !important; |
|
color: #F7EDED !important; |
|
border-radius: 2px; |
|
display: inline-block; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
margin-right: 3px; |
|
min-width: 74px; |
|
overflow: hidden; |
|
padding: 2px 4px; |
|
text-align: center; |
|
white-space: nowrap; |
|
vertical-align: middle; |
|
} |
|
|
|
.dark #anonflair,.dark #archivedflair { |
|
background: #555555 !important; |
|
border: 1px solid #555555 !important; |
|
color: #DDDDDD !important; |
|
} |
|
.light #anonflair,.light #archivedflair { |
|
background: #DDDDDD !important; |
|
border: 1px solid #DDDDDD !important; |
|
color: #555555 !important; |
|
} |
|
|
|
#nsfwflair,.nsfw-flair { |
|
background: #B44747 !important; |
|
border: 1px solid #B44747 !important; |
|
color: #F7EDED !important; |
|
} |
|
|
|
/* NSFW LINK FLAIRS */ |
|
/* |
|
.title[title*="nsfw"]:before, |
|
.title[title*="NSFW"]:before { |
|
background: #B44747; |
|
border: 1px solid #B44747; |
|
color: #F7EDED; |
|
border-radius: 2px; |
|
display: inline-block; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
margin-right: 7px; |
|
min-width: 74px; |
|
overflow: hidden; |
|
padding: 2px 4px; |
|
text-align: center; |
|
white-space: nowrap; |
|
vertical-align: middle; |
|
content:"NSFW"; |
|
} |
|
*/ |
|
/* COMMENTS */ |
|
.dark .alert-notice {background: #292929; border-color: #222222 #222222 #222222;} |
|
.light .alert-notice {background: #f4f4f4; border-color: #dddddd #dddddd #dddddd;} |
|
|
|
/* COMMENT USER FLAIRS */ |
|
.comment a.submitter {color: #62C6FA;} |
|
.comment a.moderator {color: #3FBF4C;} |
|
.comment a.admin {color: #E12D39;} |
|
|
|
.dark .comment a.moderator.author,.dark .comment a.submitter.author,.dark .content a[href$="/user/-none-"]{ |
|
background-color: #62C6FA; |
|
border: 1px solid #62C6FA; |
|
border-radius: 2px; |
|
padding: 1px 4px; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
color: #111D25; |
|
} |
|
.dark .comment a.moderator.author,.dark .content a[href$="/-none-"],.dark .content a[href$="/none"]{ |
|
background-color: #3FBF4C; |
|
border: 1px solid #3FBF4C; |
|
border-radius: 2px; |
|
padding: 1px 4px; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
color: #0B1D0C; |
|
} |
|
.dark .comment a.admin.author,.dark .content a[href$="/-none-"],.dark .content a[href$="/none"]{ |
|
background-color: #E12D39; |
|
border: 1px solid #E12D39; |
|
border-radius: 2px; |
|
padding: 1px 4px; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
color: #160406; |
|
/*color: #FCEAEC;*/ |
|
} |
|
|
|
.light .comment a.moderator.author,.light .comment a.submitter.author,.light .content a[href$="/user/-none-"]{ |
|
background-color: #62C6FA; |
|
border: 1px solid #62C6FA; |
|
border-radius: 2px; |
|
padding: 1px 4px; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
color: #111D25; |
|
} |
|
.light .comment a.moderator.author,.light .content a[href$="/-none-"],.light .content a[href$="/none"]{ |
|
background-color: #3FBF4C; |
|
border: 1px solid #3FBF4C; |
|
border-radius: 2px; |
|
padding: 1px 4px; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
color: #0B1D0C; |
|
} |
|
.light .comment a.admin.author,.light .content a[href$="/-none-"],.light .content a[href$="/none"]{ |
|
background-color: #E12D39; |
|
border: 1px solid #E12D39; |
|
border-radius: 2px; |
|
padding: 1px 4px; |
|
font-family: inherit; |
|
font-size: 11px; |
|
font-weight: bold; |
|
letter-spacing: 0px; |
|
line-height: 11px; |
|
color: #160406; |
|
/*color: #FCEAEC;*/ |
|
} |
|
|
|
/* HIGHLIGHTED COMMENT */ |
|
.dark .highlightedComment {background: #444444 !important; border: 1px dashed #555555 !important;} |
|
.light .highlightedComment {background: #FFEA9A !important; border: 1px dashed #DEC05F !important;} |
|
|
|
/* YOU ARE A MODERATOR TAG LINE */ |
|
.titlebox form.toggle, .leavemoderator {background: transparent; color: gray; font-size: smaller; margin: 0; padding: 3px 0;} |
|
.leavemoderator a:link,.leavemoderator a:visited {color: gray;} |
|
.leavemoderator a:hover,.leavemoderator a:active {color: gray; text-decoration: underline;} |
|
|
|
/* UNIVERSAL SPOILER TAGS */ |
|
.md a[href="#s"] {display: inline-block; color: inherit;} |
|
.md a[href="#s"]::after { |
|
content: attr(title); |
|
background: #36627D; |
|
color: #36627D; |
|
border: 1px solid #060C0F; |
|
padding: 2px; |
|
visibility: visible; |
|
margin-left: 5px; |
|
cursor: default; |
|
} |
|
.md a[href="#s"]:hover::after, |
|
.md a[href="#s"]:active::after {color: #DFDFDF; background: #142630;} |
|
|
|
/* ACCOUNT */ |
|
.notification-counter {background-color: #E62C36; border: 1px solid #E62C36; border-radius: 16px; color: #FFF; font-weight: bold;} |
|
|
|
/* RETINA DISPLAY SUPPORT */ |
|
@media only screen and (min--moz-device-pixel-ratio: 2), |
|
only screen and (-o-min-device-pixel-ratio: 2/1), |
|
only screen and (-webkit-min-device-pixel-ratio: 2), |
|
only screen and (min-device-pixel-ratio: 2) { |
|
|
|
/* VOAT LOGO */ |
|
/* The background-size must match the image dimensions of the non retina 1x image. */ |
|
#header-img {background: url(https://i.imgur.com/jrxjLmo.png); background-size: 112px 31px; padding-left: 112px;} |
|
/* APPLE LOGO */ |
|
#header::before { |
|
content: ''; |
|
width: 108px; |
|
height: 128px; |
|
display: block; |
|
position: absolute; |
|
top: 103px; |
|
left: 50%; |
|
margin-left: -54px; |
|
background: url(https://i.imgur.com/0S2RtjX.png); |
|
background-size: 108px 128px; |
|
} |
|
/* SIDEBAR IMAGE */ |
|
/* The background-size must match the image dimensions of the non retina 1x image, change the padding value to match the height of the non retina 1x image. */ |
|
.dark .side .md:nth-of-type(1){background: url(https://i.imgur.com/uCvuXCg.png) top center no-repeat; background-size: 280px 224px; padding: 224px 0 0; margin: 10px 0 0;} |
|
.light .side .md:nth-of-type(1){background: url(https://i.imgur.com/vg7zsPV.png) top center no-repeat; background-size: 280px 224px; padding: 224px 0 0; margin: 10px 0 0;} |
|
} |
|
|
|
/* RESPONSIVITY */ |
|
@media ( max-width: 870px ) { |
|
.dark .tabmenu li.selected a { |
|
background: #333; |
|
background: -webkit-linear-gradient( top,#333,#2D2D2D ); |
|
background: -moz-linear-gradient( top,#333,#2D2D2D ); |
|
background: -ms-linear-gradient( top,#333,#2D2D2D ); |
|
background: -o-linear-gradient( top,#333,#2D2D2D ); |
|
border: 1px solid #222; |
|
box-shadow: 0 1px 0 hsla( 0,0%,0%,0.35 ); |
|
color: #FFF; |
|
font-weight: bold; |
|
} |
|
.side .md table {min-width: 265px;} |
|
.dark .side .md table {background-color: #303030;} |
|
div.side.show-mobile-sidebar {top: -87px; z-index: 9999;} |
|
/* APPLE LOGO */ |
|
#header{margin-bottom: 86px;} |
|
#header::before { |
|
content: ''; |
|
width: 54px; |
|
height: 64px; |
|
display: block; |
|
position: absolute; |
|
top: 92px; |
|
left: 50%; |
|
margin-left: -27px; |
|
background: url(https://i.imgur.com/ieLLaRa.png); |
|
background-size: 54px 64px; |
|
} |
|
/* RETINA DISPLAY SUPPORT */ |
|
@media only screen and (min--moz-device-pixel-ratio: 2), |
|
only screen and (-o-min-device-pixel-ratio: 2/1), |
|
only screen and (-webkit-min-device-pixel-ratio: 2), |
|
only screen and (min-device-pixel-ratio: 2) { |
|
|
|
/* APPLE LOGO */ |
|
#header::before { |
|
content: ''; |
|
width: 54px; |
|
height: 64px; |
|
display: block; |
|
position: absolute; |
|
top: 92px; |
|
left: 50%; |
|
margin-left: -27px; |
|
background: url(https://i.imgur.com/DAqAhhL.png); |
|
background-size: 54px 64px; |
|
} |
|
} |
|
} |
|
|
|
/* PAGE WIDTH */ |
|
#container {margin-left: auto; margin-right: auto; max-width: 1200px;} |
|
#header-banner {margin: 0 auto; max-width: 1200px;} |
