/* Letters版式页，Letters相关外围可以用，也可以不用 */

:root {
  --bg-blue-color: #546d7c;
  --text-color: #f4f4f4;
  --link-color: #925a07;
  --bg-yellow-color: #f4f4e6;
  --bg-lightblue-color: #7fa2b9;
  --text-yellow-color: #ffdb8e;
  --bg-grey-color: #607c8e;
}

blockquote{
background-color: var(--bg-blue-color);
color: var(--text-color);
}
#header {
background-image: url(/api/css-proxy?url=https%3A%2F%2Fscpsandboxcn.wdfiles.com%2Flocal--files%2Fcollab%3Aletters%2FlettersV3S.png);
}

@media (max-width: 767px) {
#side-bar {
    background-color: transparent;
}

#header h1, #header h2{
    margin-right: 0px;
    font-size: 50%;
}

#header h2 span{
    margin-right: 0px;
    font-size: 20%;
}
}

#header h1 a {
    display: block;
    margin: 0;
    padding: 80px 0 25px;
    font-size: 0px;
    line-height: 0px;
    max-height: 0px;
    color: transparent;
    background: transparent;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    text-shadow: none;
    text-decoration: none;
    letter-spacing: 0.9px;
}

#header h1 a::before {
    content: "Letters娱乐";
    font-size: 40px !important;
    color: var(--text-color);
}

h1, #page-title {
    color: var(--bg-blue-color);
}

#header h2 span {
    display: block;
    margin: 0;
    padding: 19px 0;
    font-size: 0px;
    line-height: 0px;
    max-height: 0px;
    font-weight: bold;
    color: transparent;
    text-shadow: none;
}

#header h2 span::before {
    content: '　游戏，改变，生活　';
    color: var(--text-color);
    font-size: 10px;
}

#search-top-box-input {
    color: var(--bg-blue-color);
    background-color: var(--bg-blue-color);
}
#search-top-box-input:hover,
#search-top-box-input:focus {
    color: var(--text-color);
    background-color: var(--bg-blue-color);
}
#search-top-box-form input[type=submit] {
    border-color: #999;
    color: var(--text-color);
    background-color: var(--bg-blue-color);
    background: linear-gradient(to bottom, var(--bg-grey-color), var(--bg-blue-color), #445865);
}
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    border-color: #f0fcff;
    color: #f0fcff;
    background-color: #5607C8;
    background: linear-gradient(to bottom, var(--bg-grey-color), var(--bg-blue-color), #445865);
}

#page-content .collapsible-block-unfolded-link a.collapsible-block-link {
    color: var(--link-color);
    font-size: 150%;
}
#page-content .collapsible-block-folded a.collapsible-block-link {
    color: var(--link-color);
    font-size: 150%;
}
#side-bar .heading{
    color: var(--text-yellow-color);
    border-bottom: solid 1px var(--text-yellow-color);
}
body {
    background-color: var(--bg-yellow-color)
} 
a, a:visited{
    color: var(--link-color);
}
#side-bar a,
#side-bar a:visited {
    color: var(--text-yellow-color);
}
#side-bar .side-block{
    background-color: var(--bg-blue-color) !important;
    border-color: var(--bg-blue-color);
}
#side-bar div.menu-item .sub-text {
    color: var(--text-yellow-color);
}
div#container-wrap{
    background:url(/api/css-proxy?url=https%3A%2F%2Fscp-wiki-cn.wdfiles.com%2Flocal--files%2Fcomponent%3Aletters-theme%2FlettersBG2.jpg) top left repeat-x
}

a.newpage{
color: var(--link-color);
}

/* Page Rating Module Customizations */
.page-rate-widget-box .rate-points {
  background-color: var(--bg-blue-color) !important;
  border-color: var(--bg-blue-color);
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
  background-color: var(--bg-lightblue-color);
  border-color: var(--bg-blue-color);
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
  background-color: transparent;
  color: var(--bg-blue-color) ;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
  background-color: var(--bg-blue-color);
  color: var(--bg-lightblue-color);
}
.page-rate-widget-box .cancel {
  background-color: var(--bg-blue-color);
  border-color: var(--bg-blue-color);
}
.page-rate-widget-box .cancel a {
  background-color: transparent;
  color: var(--text-color);
}
.page-rate-widget-box .cancel a:hover {
  background-color: var(--bg-blue-color);
  color: var(--bg-lightblue-color);
}
#side-bar div.menu-item img {
    width: 13px;
    height: 13px;
    border: 0;
    margin-right: 2px;
    position: relative;
    bottom: -2px;
    -webkit-filter: url(#colorize);
    filter: invert(57%) sepia(100%) saturate(398%) hue-rotate(353deg) brightness(98%) contrast(93%);
   
}

/* Credit module customizations */
 
#u-credit-view-button {
    display: block;
    text-align: right;
}
 
.rate-box-with-credit-button{
    background-color: var(--bg-blue-color) !important;
    border: solid 1px var(--bg-blue-color) !important;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}
.rate-box-with-credit-button .creditButton p a{
    border-left: solid 1px var(--bg-blue-color) !important;
}
.rate-box-with-credit-button .creditButton p a:hover {
    background-color: var(--bg-blue-color);
    color: var(--bg-lightblue-color);
}
.rate-box-with-credit-button .page-rate-widget-box .cancel {
    border-radius: 0;
    border-bottom: 0;
}
.rate-box-with-credit-button .page-rate-widget-box .cancel a:hover {
    border-radius: 0;
}
.rate-box-with-credit-button .page-rate-widget-box .rate-points {
    border-left: 0;
    border-bottom: 0;
}
.rate-box-with-credit-button .page-rate-widget-box .rateup,
.rate-box-with-credit-button .page-rate-widget-box .ratedown {
    border-bottom: 0;
}
.creditButtonStandalone p a{
    background-color: var(--bg-blue-color);
    color: var(--text-color);
}
.creditButtonStandalone p a:hover {
    background: var(--bg-blue-color) !important;
    color: var(--bg-lightblue-color) !important;
}

/* TOP MENU */
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background-color:var(--bg-grey-color);
    color: var(--text-yellow-color); 
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background-color: var(--bg-blue-color); 
}
#top-bar ul li ul a, #top-bar a:hover {
    color: var(--text-yellow-color); 
    background-color: var(--bg-blue-color);
}