Do you have audio cassette or reel tapes, MiniDisc, DAT, 8mm/Hi8 video tapes, or VHS tapes
containing live recordings, interviews, or demos? Please see Contributing, or e-mail us.

To discuss Depeche Mode with other fans, please consider joining the official Depeche Mode Discord server or independent fan server Discord for the Masses.
To coordinate site work, we recommend the Depeche Mode Live Editor Discord group.

MediaWiki:Common.css: Difference between revisions

From DM Live - the Depeche Mode live encyclopedia for the masses
Jump to navigationJump to search
No edit summary
No edit summary
 
(98 intermediate revisions by 2 users not shown)
Line 3: Line 3:


.noticebar {
.noticebar {
   background: #efe url('https://dmlive.wiki/images/thumb/5/58/Noticebar_background_rev.png/800px-Noticebar_background_rev.png') no-repeat left center;
   background: #efe url('https://dmlive.wiki/w/images/thumb/5/58/Noticebar_background_rev.png/800px-Noticebar_background_rev.png') no-repeat left center;
   background-color: #f1f1f1;
   background-color: #f1f1f1;
   border: 1px solid #9d68d9;
   border: 1px solid #9d68d9;
Line 196: Line 196:
background: rgb(42,12,20) !important;
background: rgb(42,12,20) !important;
background: linear-gradient(190deg, rgba(42,12,20,1) 0%, rgba(100,45,39,1) 19%, rgba(130,34,37,1) 38%, rgba(46,23,34,1) 75%, rgba(140,54,43,1) 92%, rgba(179,115,89,1) 100%) !important;
background: linear-gradient(190deg, rgba(42,12,20,1) 0%, rgba(100,45,39,1) 19%, rgba(130,34,37,1) 38%, rgba(46,23,34,1) 75%, rgba(140,54,43,1) 92%, rgba(179,115,89,1) 100%) !important;
}
body.page-SubHuman table#InfoboxShell.round {
background: rgb(21,36,59) !important;
background: linear-gradient(33deg, rgba(21,36,59,1) 0%, rgba(25,55,107,1) 38%, rgba(49,86,166,1) 100%) !important;
}
}


Line 409: Line 414:
nav ul li a {margin-top: -2px;}
nav ul li a {margin-top: -2px;}


/* Content theft protection */
.cquote {
p, h1, h2, h3, body {
font-size: 95% !important;
-webkit-touch-callout: none;
margin-left: auto !important;
-webkit-user-select: none;
margin-right: auto !important;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:200,400,500,700,900');
 
 
a {
text-decoration: none;
color: #CC2C24;
}
a:hover {
text-decoration: none;
color: #000;
}
ul {
padding-left: 0;
}
}
li {
.cquote td {
list-style: none;
padding-top: 0 !important;
}
}
* {
.cquote td#text {
box-sizing: border-box;
padding-bottom: 6px !important;
}
}
body {
.cquote td#q-mark {
font-family: 'Libre Franklin', sans-serif;
line-height: 1 !important;
background-image:url(../img/sitebg.jpg);
background-size: 100%;
min-height: 100%;
}
::selection {
background-color: #EBEBF2;
color: #83828D;
}
}


#spopup{
.page-Main_Page #catlinks {
    width: 300px;
     display: none;
    position: fixed;
    bottom: 50px;
    right: 50px;
     display:none;
    z-index:90;
}
}


.fundraiser {
/* Sample source album overview styling */
width: 100%;
.image-container {
height: auto;
    display: flex;
}
    align-items: flex-start; /* Ensure images start at the top of their container */
#headermobile{
    title: none !important; /* Overwrite the title attribute */
display: none;
}
}


.modal {
.img-responsive {
  opacity: 0;
    width: 100px;
  visibility: hidden;
    height: 100px;
  position: fixed;
    object-fit: cover; /* Ensure the entire container is filled, preserving aspect ratio */
  top: 0;
    aspect-ratio: 1 / 1; /* Enforce a fixed aspect ratio of 1:1 */
  right: 0;
    transition: box-shadow 0.6s ease, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .4s ease;
  z-index: 999999;
}
}


.modal__bg {
.img-responsive:hover {
  position: absolute;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Apply subtle shadow on hover */
  top: 0;
    transform: scale(1.05); /* Slightly enlarge the image on hover */
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}
}


.modal-state {
.text-container {
  display: none;
    margin-left: 10px;
    width: calc(100% - 100px - 10px); /* Adjust margin and width as needed */
}
}


.modal-state:checked + .modal {
#image-rotation > div {
  opacity: 1;
    display: none;
   visibility: visible;
   }
#image-rotation > div:first-child {
    display: block;
}
}


.modal-state:checked + .modal .modal__inner {
/* Content theft protection */
  top: 0;
/*p, h1, h2, h3, body { */
}
/*-webkit-touch-callout: none; */
/*-webkit-user-select: none; */
/*-khtml-user-select: none;*/
/*-moz-user-select: none; */
/*-ms-user-select: none; */
/*user-select: none; */
/*}*/


.modal__inner {
.mw-hidden-cats-ns-shown {display: none}
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 75%;
  margin: auto;
  overflow: hidden;
  background: #fff;
  padding: 1em 1em;
  height: 75%;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
display: none;
}
 
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
iframe {
  border: 0px;
}
.tooltip {
    position: relative;
    display: inline-block;
color: #746B52;
font-size: 24px;
padding: 10px;
}
 
.tooltip .tooltiptext {
    visibility: hidden;
    width: 650px;
    background-color: #CDC9BC;
    color: #000;
    text-align: center;
    padding: 5px;
font-size: 16px;
font-weight: 400;
text-transform: lowercase; 
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 110%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
#titlebar {
width: 100%;
background-image:url(../img/titlebg.jpg);
background-size: 100%;
height: 45px;
color: #FFF;
padding: 15px;
text-align: right;
font-size: 14px;
}
#prefooter {
  display: block;
  height: 200px;
  background-image: url('../img/prefooter.jpg');
  background-size: cover;
  background-position: center;
}
.bigtitle {
font-size: 30px;
font-weight:900;
letter-spacing: -1px;
color: #D12D24;
text-transform: uppercase;
}
.bigtitle2 {
font-size: 40px;
font-weight:900;
letter-spacing: -1px;
color: #000;
}
.bigtitle3 {
font-size: 40px;
font-weight:900;
letter-spacing: -1px;
color: #fff;
}
.yearname {
font-size: 100px;
font-weight:900;
letter-spacing: -1px;
color: #D12D24;
display: block;
float: left;
padding: 20px;
}
.miscname {
font-size: 70px;
font-weight:900;
letter-spacing: -1px;
color: #D12D24;
text-align: center;
line-height: 90px;
}
.suffixset {
background-image:url(../img/sitebg.jpg);
color: #CDC9BC;
text-transform: uppercase;
font-size: 14px;
padding: 4px 6px 2px;
line-height: 30px;
}
.suffixsetinc {
background: #D12D24;
color: #FFF;
text-transform: uppercase;
font-size: 14px;
padding: 4px 6px 2px;
line-height: 30px;
}
 
#upcoming {
padding: 40px 80px;
float: left;
display:block;
width: 100%;
}
#upcoming2 {
padding: 20px 80px 40px 80px;
float: left;
display:block;
width: 100%;
}
#recds {
width: 100%;
padding: 0px 80px;
float: left;
display:block;
}
#home_left {
padding: 0px 40px 40px 80px;
width: 50%;
float: left;
display:block;
}
#home_right {
padding: 0px 80px 0px 40px;
width: 50%;
float: left;
display:block;
}
.cover {
width: 100%;
}
#disc_left {
padding: 0px 40px 40px 80px;
width: 35%;
float: left;
display: block;
}
#disc_right {
padding: 0px 80px 0px 40px;
width: 65%;
float: left;
display:block;
}
#song_left {
padding: 0px 40px 40px 80px;
width: 50%;
float: left;
display: block;
}
#song_right {
padding: 0px 80px 0px 40px;
width: 50%;
float: left;
display:block;
}
#rightdiv {
width: 100%;
float: left;
display: block;
padding-bottom: 40px;
}
#rightdiv_day {
width: 100%;
float: left;
display: block;
min-height: 500px;
padding-bottom: 40px;
}
#rightdivtext {
width: 100%;
float: left;
display: block;
text-align: right;
padding: 10px 0 40px 0;
}
#rightdiv2 {
width: 100%;
float: left;
display:block;
}
#rightdiv_nomu {
width: 100%;
float: left;
display:block;
padding-top: 40px;
}
#rightdiv_simu {
display: none;
}
#contentblock {
width: 100%;
background: url('../img/semitransparent.png');
margin-top: 20px;
float: left;
display: block;
position: relative;
}
.redtext {
color: #D12D24;
}
#plaintext {
padding: 20px;
color: #000;
font-size: 18px;
text-align: left;
display: block;
float: left;
line-height:160%;
width: 100%;
}
#plaintextreview {
padding: 20px 0px 0px 20px;
color: #000;
font-size: 18px;
text-align: left;
display: block;
float: left;
line-height:160%;
width: 100%;
}
#plaintextreview2 {
padding: 0px 20px 20px 20px;
color: #000;
font-size: 18px;
text-align: left;
display: block;
float: left;
line-height:90%;
width: 100%;
}
.review {
font-size: 15px;
}
#plaintextmedia {
padding: 10px 20px 20px 20px;
color: #000;
text-align: left;
display: block;
float: left;
line-height:80%;
width: 100%;
}
#plaintext_albumstats {
padding: 20px;
color: #000;
font-size: 18px;
text-align: left;
display: block;
float: left;
line-height:110%;
width: 100%;
}
#plaintextsong {
padding: 20px;
color: #000;
font-size: 18px;
text-align: left;
display: block;
float: left;
line-height:160%;
width: auto;
}
#plaintextsong2 {
padding: 20px 20px 20px 140px;
color: #000;
font-size: 18px;
text-align: left;
display: block;
float: left;
line-height:160%;
width: auto;
}
#plaintext2 {
width: 100%;
padding: 20px;
color: #000;
font-size: 18px;
text-align: left;
display: block;
float: left;
line-height:160%;
text-align:center;
}
.huge{
font-size: 50px;
line-height: 110%;
}
#twit {
padding: 50px 20px 20px 20px;
font-weight: 400;
font-size: 14px;
}
#twit a{
color: #000;
}
#twit a:hover{
color: #CC2C24;
}
#plaintext3 {
width: 100%;
padding: 20px;
color: #000;
font-size: 14px;
text-align: left;
display: block;
float: left;
line-height:100%;
}
#nulldiv {
 
}
#showblock {
width: 100%;
background: url('../img/semitransparent.png');
margin-top: 20px;
float: left;
display:block;
position:relative;
}
#showblockbg {
width: 100%;
background: url('../img/newfeature.png');
background-size: cover;
margin-top: 20px;
float: left;
display:block;
position:relative;
text-align: center;
}
#yearblock {
width: 100%;
margin-top: 20px;
float: left;
display: block;
height: 250px;
padding: 45px;
}
#miscblock {
width: 100%;
margin-top: 20px;
float: left;
display: block;
padding: 40px;
background-image: url("../img/newfeature.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
}
#detailalb {
width: 100%;
float: left;
display:block;
text-align: center;
text-transform: uppercase;
}
#detaildetail {
width: 100%;
margin-bottom: 20px;
float: left;
display:block;
text-align: center;
text-transform: uppercase;
}
#detaillink {
width: 100%;
margin-top: 20px;
float: left;
display:block;
text-align: center;
text-transform: uppercase;
}
#detaillink a{
color: #746B52;
font-weight:700;
font-size: 15px;
}
#detaillink a:hover{
color: #CDC9BC;
}
#detaillink2 {
width: 100%;
margin-top: 20px;
float: left;
display:block;
text-align: center;
text-transform: uppercase;
}
#detaillink2 a{
color: #746B52;
font-size: 15px;
}
#detaillink2 a:hover{
color: #CDC9BC;
}
#prefix {
width: 35px;
display: block;
float: left;
color: #CDC9BC;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-focus: ignore;
-moz-user-focus: ignore;
-webkit-user-focus: ignore;
-ms-user-focus: ignore;
}
.suffix {
background-color: #CDC9BC;
color: #000;
text-transform:uppercase;
font-size: 12px;
padding: 3px;
margin-left: 3px;
}
.suffix2 {
background-color: #746B52;
color: #FFF;
text-transform:uppercase;
font-size: 12px;
padding: 3px;
margin-left: 3px;
}
#setlistlink{
color: #000;
}
#setlistlink a{
color: #000;
}
#setlistlink a:hover{
color: 000;
font-weight: bold;
}
#disc {
color: #fff;
text-align: center;
    position: relative;
top: 0;
left: 0;
width: 19%;
height: 0;
    padding-bottom: 19%;
text-align: center;
display: block;
float: left;
margin-right: 1%;
margin-bottom: 1%;
}
 
#disc:hover{
filter: grayscale(100%);
opacity: 0.5;
    filter: alpha(opacity=50);
}
#blankdiv {
width: 19%;
height: 0;
    padding-bottom: 19%;
display: block;
float: left;
margin-right: 1%;
margin-bottom: 1%;
}
#plaintextline {
padding: 0px 20px 20px 20px;
color: #000;
font-size: 18px;
text-align :center;
overflow: hidden;
margin: auto;
line-height:160%;
width: 100%;
}
#plaintextline2 {
padding: 20px 20px 20px 20px;
color: #000;
font-size: 18px;
text-align :center;
overflow: hidden;
margin: auto;
line-height:160%;
width: 100%;
}
#mediabg {
color: #000;
width: 20%;
height: 0;
padding-bottom: 20%;
text-align: center;
display: inline-table;
margin-right: 2%;
filter: grayscale(100%);
-webkit-box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.60);
-moz-box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.60);
box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.60);
    position: relative;
}
#mediabg:hover{
filter: none;
color: #fff;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
}
#picbg {
color: #000;
width: 7.9%;
height: 0;
padding-bottom: 7.9%;
margin-bottom: 0.3%;
margin-right: 0.3%;
text-align: center;
display: block;
float: left;
filter: grayscale(100%);
-webkit-box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.60);
-moz-box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.60);
box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.60);
}
#picbg:hover{
filter: none;
color: #fff;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
}
#videoplayer {
width: 23.8%;
display: inline-table;
margin-right: 1%;
    position: relative;
}
#lineupmember {
color: #000;
width: 23.8%;
height: 0;
padding-bottom: 23.8%;
text-align: center;
display: inline-table;
margin-right: 1%;
filter: grayscale(100%);
-webkit-box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.50);
-moz-box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.50);
box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.50);
    position: relative;
}
#lineupmember:hover{
filter: none;
color: #fff;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
}
.memberbig {
font-size: 24px;
}
#lineupmember:hover #lineupmembertext{
font-size: 0px;
}
#lineupmember:hover .memberbig{
font-size: 0px;
}
#lineupmemberpast {
color: #000;
width: 18.8%;
height: 0;
padding-bottom: 18.9%;
text-align: center;
display: inline-table;
margin-right: 1%;
filter: grayscale(100%);
-webkit-box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.50);
-moz-box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.50);
box-shadow: inset 0px 0px 0px 500px rgba(255,255,255,0.50);
    position: relative;
}
#lineupmemberpast:hover{
filter: none;
color: #fff;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
}
#lineupmemberpast:hover #lineupmembertext{
font-size: 0px;
}
#mediabg:hover #mediatext{
font-size: 0px;
}
#lineupmemberpast:hover .memberbig{
font-size: 0px;
}
#lineupmember2 {
color: #000;
width: 18%;
height: 0;
text-align: center;
display: inline-table;
margin-right: 1%;
position: relative; 
}
#lineupmember2past {
color: #000;
width: 18.8%;
text-align: center;
display: inline-table;
margin-top: 1%;
margin-right: 1%;
}
#lineupmembertext {
position: absolute;
bottom: 15px;
text-align: center;
width: 100%;
line-height: 100%;
}
#mediatext {
position: absolute;
bottom: 15px;
text-align: center;
width: 100%;
line-height: 100%;
}
#disctext {
position: absolute;
top: 42%;
text-align: center;
width: 100%;
height: 0;
    padding-bottom: 100%;
line-height: 100%;
color: #000;
opacity: 0;
    filter: alpha(opacity=0);
}
#disctext:hover {
opacity: 1;
    filter: alpha(opacity=100);
transition: .50s;
}
.blockyearname{
float: right;
display:block;
height: 250px;
text-align: right;
}
.yearlink {
font-weight:900;
color: #000;
width: 70px;
float: left;
display:block;
text-align: center;
}
 
.yearlink a{
color: #000;
}
.yearlink a:hover{
color: #CC2C24;
}
#showblock:hover {
background: #fff;
transition: .25s;
}
#date {
background: #D12D24;
padding: 20px 20px 15px 20px;
width: 130px;
color: #fff;
font-weight:700;
font-size: 20px;
text-align: center;
display: block;
float: left;
}
.crossed {
text-decoration:line-through;
}
#dateyear{
background: #DCD9D0;
padding: 20px 20px 15px 20px;
width: 130px;
color: #746B52;
font-weight:700;
font-size: 20px;
text-align: center;
display: block;
float: left;
}
#textsong{
background: #DCD9D0;
padding: 40px 20px 36px 20px;
width: 120px;
color: #746B52;
font-weight:700;
font-size: 20px;
text-align: center;
display: block;
float: left;
}
#textsong2{
background: #DCD9D0;
padding: 26px 20px 22px 20px;
width: 120px;
color: #746B52;
font-weight:700;
font-size: 20px;
text-align: center;
display: block;
float: left;
position:absolute;
top:0;
bottom:0;
}
#recsource{
background: #DCD9D0;
padding: 22px 20px 18px 20px;
width: 170px;
color: #746B52;
font-size: 20px;
text-align: center;
display: block;
float: left;
position:absolute;
top:0;
bottom:0;
}
#screens{
padding: 0px 0px 12px 190px;
width: 100%;
display: block;
float: right;
}
.screen{
width: 23%;
margin-right: 2%;
}
.stl{
height: 150px;
}
#notcirc{
background: #000;
padding: 20px 20px 20px 20px;
width: 250px;
color: #FFF;
font-size: 20px;
text-align: center;
display: block;
float: right;
}
#downloadbutton{
background: #D12D24;
padding: 20px 20px 20px 20px;
width: 250px;
color: #FFF;
font-size: 20px;
text-align: center;
display: block;
float: right;
}
#downloadbutton:hover{
color: #000;
}
#downloadbuttonstream{
background: #D12D24;
padding: 20px 20px 20px 20px;
width: 250px;
color: #FFF;
font-size: 20px;
text-align: center;
display: block;
float: right;
cursor: pointer;
}
#downloadbuttonstream:hover{
color: #000;
}
.ago{
color: #746B52;
}
.year {
font-size: 30px;
font-weight:700;
}
#place {
padding: 16px 20px 12px 20px;
color: #000;
font-size: 20px;
text-align: left;
display: block;
float: left;
line-height:160%;
}
#place2 {
padding: 16px 20px 12px 190px;
color: #000;
font-size: 20px;
text-align: left;
display: block;
float: left;
line-height:160%;
}
#discsongs {
display: block;
float: left;
width: 56%;
border-bottom: 1px solid #fff;
padding: 5px 0 5px 0;
}
#disctimes {
display: block;
float: left;
width: 12%;
text-align: center;
border-bottom: 1px solid #fff;
padding: 5px 0 5px 0;
}
#disctimes a{
color: #000;
}
#disctimes a:hover{
color: #D12D24;
}
#discdates {
display: block;
float: left;
width: 16%;
text-align: right;
border-bottom: 1px solid #fff;
padding: 5px 0 5px 0;
}
#coversong {
display: block;
float: left;
width: 30%;
text-align: right;
margin-right: 5%;
}
#albumsong {
display: block;
float: left;
width: 60%;
text-align: left;
}
#discdates a{
color: #000;
}
#discdates a:hover{
color: #D12D24;
}
.smalltext {
font-size: 12px;
color: #666;
}
#notes {
padding: 0px 20px 12px 190px;
color: #666666;
font-size: 16px;
text-align: left;
display: block;
float: left;
width: 100%;
}
#mobile {
display: none;
}
.location {
font-size: 24px;
text-transform: uppercase;
letter-spacing: 3px;
font-weight:200;
}
.locationyear {
font-size: 24px;
text-transform: uppercase;
font-weight:200;
}
.locationyear2 {
text-transform: uppercase;
}
.locationyear3 {
font-size: 24px;
font-weight:200;
}
#recording {
padding: 27px 20px 17px 20px;
color: #746B52;
font-size: 45px;
text-align: center;
display: block;
float: right;
font-weight:700;
width: 170px;
line-height:50%;
background: #DCD9D0;
}
#recording_suff {
padding: 35px 18px 34px 19px;
color: #746B52;
font-size: 23px;
text-align: center;
display: block;
float: right;
font-weight:700;
width: 170px;
background: #DCD9D0;
letter-spacing: -1px;
}
#recording_doub {
padding: 18px 18px 22px 19px;
color: #746B52;
font-size: 23px;
text-align: center;
display: block;
float: right;
font-weight:700;
width: 170px;
background: #DCD9D0;
letter-spacing: -1px;
}
#recording_download {
padding: 20px 18px 21px 19px;
color: #746B52;
font-size: 15px;
text-align: center;
display: block;
float: right;
width: 170px;
background: #DCD9D0;
letter-spacing: -1px;
}
#recording_new {
padding: 35px 18px 21px 19px;
font-size: 22px;
text-align: center;
display: block;
float: right;
width: 100px;
color: #D12D24;
letter-spacing: -1px;
}
.left {
font-size: 15px;
text-transform: uppercase;
font-weight:200;
}
.leftactive {
font-size: 15px;
text-transform: uppercase;
font-weight:500;
}
.leftinactive {
font-size: 15px;
text-transform: uppercase;
font-weight:200;
color: #BEB7A5;
}
 
#footer {
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  font-size: 13px;
  text-align: right;
background-image:url(../img/bg.jpg);
background-size: 100%;
float: left;
display:block;
width: 100%;
}
 
 
.select{
padding: 10px;
margin: 10px;
background: #D2D2C6;
border: 0px;
}
.buttonok{
padding: 10px;
border: 0px;
background: #000;
color: #fff;
}
.buttonok:hover{
padding: 10px;
border: 0px;
background: #CC2C24;
}
#icon1{
position: absolute;
width: 50px;
height: 50px;
padding: 25px;
left: 0px;
margin-top: 29px;
transition: .25s;
background: url(../img/menu1.png);
background-size: 100%;
}
#icon2 {
position: absolute;
width: 50px;
height: 50px;
padding: 25px;
left: 0px;
margin-top: 29px;
transition: .25s;
background: url(../img/menu2.png);
background-size: 100%;
}
#icon3 {
position: absolute;
width: 50px;
height: 50px;
padding: 25px;
left: 0px;
margin-top: 29px;
transition: .25s;
background: url(../img/menu3.png);
background-size: 100%;
}
#icon4 {
position: absolute;
width: 50px;
height: 50px;
padding: 25px;
left: 0px;
margin-top: 29px;
transition: .25s;
background: url(../img/menu4.png);
background-size: 100%;
}
#icon5 {
position: absolute;
width: 50px;
height: 50px;
padding: 25px;
left: 0px;
margin-top: 29px;
transition: .25s;
background: url(../img/menu5.png);
background-size: 100%;
}
#icon6 {
position: absolute;
width: 50px;
height: 50px;
padding: 25px;
left: 0px;
margin-top: 29px;
transition: .25s;
background: url(../img/menu6.png);
background-size: 100%;
}
/* ==================================== */
/*     Navigaton Menu
/* ==================================== */
 
.menu-wrap {
background: url(../img/bg.jpg);
text-transform: uppercase;
letter-spacing: -1px;
position: fixed;
top: 0;
height: 100%;
width: 380px;
margin-left: -380px;
font-size: 18px;
font-weight:900;
overflow: auto;
transition: .25s;
z-index: 10;
}
.menu-show {
margin-left: 0;
}
.menu-sidebar {
margin: 75px 0 80px 0px;
position: relative;
top: 70px;
}
.menu-sidebar li {
padding: 45px 50px 0;
}
.menu-sidebar li > a {
color: #746B52;
position: relative;
font-weight:900;
}
.menu-sidebar li > a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 100%;
left: 50%;
 
}
.menu-sidebar li > a:hover {
color: #000;
transition: .25s;
font-weight:900;
}
.menu-sidebar .menu-item-has-children {
position: relative;
}
.menu-sidebar .menu-item-has-children .sub-menu {
display: none;
}
.slideimg {
display: none; 
}
 
#archive_left {
width: 30%;
float: left;
display: block;
}
#archive_right {
width: 70%;
float: left;
display: block;
}
.original2{
font-size: 13px;
color: #666;
}
.detail{
font-size: 13px;
line-height: 100%;
color: #666;
padding-top: 10px;
padding-right: 30px;
}
.detailhome{
font-size: 16px;
line-height: 100%;
color: #666;
padding-top: 10px;
padding-right: 30px;
}
.detaildisc{
font-size: 12px;
line-height: 100%;
color: #666;
padding-top: 10px;
padding-right: 30px;
}
.detail2{
display: none;
}
 
.textb {
border: 0px;width: 90%;
background-image:url(../img/bg.jpg);
padding: 10px;
margin: 5px;
}
 
.messb {
width: 95%;
border: 0px;
background-image:url(../img/bg.jpg);
padding: 10px;
margin: 5px;
}
 
/*Hamburger Button*/
.toggle-button {
position: fixed;
width: 70px;
height: 70px;
top: 45px;
left: 45px;
padding: 21px;
transition: .25s;
z-index: 15;
background: url(../img/logo.png);
background-size: 100%;
}
.toggle-button.active {
background: url(../img/logo2.png);
background-size: 100%;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-logo {
position: fixed;
width: 290px;
height: 70px;
top: 46px;
left: 100px;
padding: 21px;
transition: .25s;
z-index: 15;
color: #fff;
font-size: 23px;
font-weight:900;
letter-spacing: -1px;
}
.toggle-logo.active {
display: none;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 41%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #000;
border-bottom: none;
top: 24px;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #000;
margin-top: 7px;
margin-bottom: 7px;
top: 26px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #000;
border-top: none;
top: 42px;
}
.toggle-button .menu-bar-top.active  {
border: 4px solid #FFF;
border-bottom: none;
top: 24px;
}
.toggle-button .menu-bar-middle.active  {
height: 4px;
background-color: #FFF;
margin-top: 7px;
margin-bottom: 7px;
top: 26px;
}
.toggle-button .menu-bar-bottom.active {
border: 4px solid #FFF;
border-top: none;
top: 42px;
}
.button-open {
left: 25px;
background: url(../img/logo2.png);
background-size: 100%;
}
.button-open .menu-bar-top {
border-color: #fff;
transform: rotate(45deg) translate(6px, 6px);
transition: .5s;
}
.button-open .menu-bar-middle {
background-color: #fff;
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
border-color: #fff;
transform: rotate(-45deg) translate(7px, -7px);
transition: .5s;
}
.button-open .toggle-logo {
left: 80px;
color: #000;
}
 
/* Text Block */
.wrapper {
width: 40%;
margin: 100px auto 0;
color: #83828D;
}
.wrapper .text {
padding: 30px;
}
.wrapper .text .heading {
margin-bottom: 40px;
font-size: 2em;
}
.wrapper .text p {
line-height: 1.6em;
}
.wrapper .text .buttons {
margin-top: 40px;
}
 
/* Buttons */
.wrapper .buttons .button {
display: inline-block;
margin-right: 20px;
padding: 20px 25px;
border-radius: 2em;
background-color: #70CE64;
color: #fff;
font-size: .9em;
font-weight: 700;
transition: background-color .3s;
}
.wrapper .buttons .button-secondary {
background-color: #FF6746;
}
.wrapper .buttons .button-primary:hover {
background-color: #84D07A;
}
.wrapper .buttons .button-secondary:hover {
background-color: #FF7D60;
}
 
/*Active state for the buttons*/
.wrapper .buttons .button-primary:active {
background-color: #70CE64;
}
.wrapper .buttons .button-secondary:active {
background-color: #FF6746;
}
 
/*Icons*/
.wrapper .buttons .button span {
position: relative;
display: inline-block;
padding-right: 20px;
}
.wrapper .buttons .button span::after {
position: absolute;
font-family: "FontAwesome";
right: -3px;
font-size: 14px;
top: 0;
transition: top .3s, right .3s;
}
.wrapper .buttons .button-primary span::after {
content: "\f019";
}
.wrapper .buttons .button-secondary span::after {
content: "\f178";
}
/*Slight icons animation*/
.wrapper .buttons .button-primary:hover span::after {
top: 4px;
}
.wrapper .buttons .button-secondary:hover span::after {
right: -6px;
}
 
 
#header {
background: #000;
height: 25%;
width: 100%;
}
.year-2020 {
background-image: url("../img/year/2020.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2019 {
background-image: url("../img/year/2019.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2018 {
background-image: url("../img/year/2018.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2017 {
background-image: url("../img/year/2017.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2016 {
background-image: url("../img/year/2016.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2015 {
background-image: url("../img/year/2015.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2014 {
background-image: url("../img/year/2014.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2013 {
background-image: url("../img/year/2013.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2012 {
background-image: url("../img/year/2012.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2011 {
background-image: url("../img/year/2011.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2010 {
background-image: url("../img/year/2010.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2007 {
background-image: url("../img/year/2007.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2006 {
background-image: url("../img/year/2006.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2005 {
background-image: url("../img/year/2005.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2004 {
background-image: url("../img/year/2004.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2003 {
background-image: url("../img/year/2003.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2002 {
background-image: url("../img/year/2002.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2001 {
background-image: url("../img/year/2001.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-2000 {
background-image: url("../img/year/2000.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1999 {
background-image: url("../img/year/1999.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1998 {
background-image: url("../img/year/1998.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1997 {
background-image: url("../img/year/1997.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1996 {
background-image: url("../img/year/1996.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1995 {
background-image: url("../img/year/1995.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1994 {
background-image: url("../img/year/1994.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1993 {
background-image: url("../img/year/1993.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1992 {
background-image: url("../img/year/1992.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1991 {
background-image: url("../img/year/1991.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1990 {
background-image: url("../img/year/1990.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1989 {
background-image: url("../img/year/1989.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1988 {
background-image: url("../img/year/1988.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1987 {
background-image: url("../img/year/1987.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1986 {
background-image: url("../img/year/1986.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1985 {
background-image: url("../img/year/1985.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1984 {
background-image: url("../img/year/1984.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1983 {
background-image: url("../img/year/1983.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
.year-1982 {
background-image: url("../img/year/1982.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;
}
#hand1{
float: left;
display:block;
width: 25%;
}
#hand2{
float: left;
display:block;
width:75%;
}
 
@media only screen and (max-device-width: 770px) and (-webkit-min-device-pixel-ratio: 1) {
#headernormal{
display: none;
}
#headermobile{
display: block;
}
#titlebar {
width: 100%;
background-image:url(../img/titlebg.jpg);
background-size: 100%;
height: auto;
color: #FFF;
padding: 15px;
text-align: center;
font-size: 14px;
}
#hand1{
width: 100%;
float: left;
display: block;
}
#hand2{
width: 100%;
float: left;
display: block;
}
#date {
width: 100%;
}
#dateyear {
width: 100%;
}
#textsong {
width: 100%;
padding: 40px 20px 36px 20px;
}
#textsong2 {
width: 100%;
position:relative;
}
#recsource {
width: 100%;
position:relative;
}
#upcoming {
padding: 40px 40px;
}
#upcoming2 {
padding: 40px 40px;
}
#place {
width: 100%;
text-align: center;
}
#place2 {
padding-left: 0px;
padding-right: 0px;
width: 100%;
text-align: center;
}
#recording {
width: 100%;
float: left;
}
#recording_suff {
width: 100%;
float: left;
}
#recording_doub {
width: 100%;
float: left;
}
#recording_download {
width: 100%;
float: left;
}
#recording_new {
width: 100%;
float: left;
padding: 5px 18px 5px 19px;
}
.yearname {
width: 100%;
float: left;
text-align: center;
font-size: 70px;
}
.miscname {
width: 100%;
float: left;
text-align: center;
}
.blockyearname {
width: 100%;
float: left;
text-align: center;
}
#home_left {
width: 100%;
float: left;
padding: 20px 40px;
}
#home_right {
width: 100%;
float: left;
padding: 20px 40px;
display:block:
}
#disc_left {
width: 100%;
float: left;
padding: 20px 40px;
}
#disc_right {
width: 100%;
float: left;
padding: 20px 40px;
display:block:
}
#song_left {
width: 100%;
float: left;
padding: 20px 40px;
}
#song_right {
width: 100%;
float: left;
padding: 20px 40px;
display:block:
}
#right {
width: 100%;
float: left;
display:block:
}
#archive_left {
width: 100%;
float: left;
}
#archive_right {
width: 100%;
float: left;
}
#screens {
width: 100%;
float: left;
padding: 0px 20px 12px 20px;
}
.screen{
width: 49%;
margin-right: 1%;
margin-bottom: 1%;
}
#notcirc {
width: 100%;
float: left;
padding: 10px;
}
#recds {
width: 100%;
float: left;
padding: 20px 40px;
}
 
#notes {
padding: 0px 20px 12px 20px;
text-align: center;
}
.detail2 {
width: 100%;
float: left;
display: block;
font-size: 12px;
color: #666;
line-height: 120%;
}
#yearblock {
width: 100%;
margin-top: 20px;
float: left;
display:block;
height: auto;
padding: 35px;
}
#miscblock {
width: 100%;
margin-top: 20px;
float: left;
display:block;
height: auto;
padding: 20px;
background-image: url("../img/misc.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#videoplayer {
width: 100%;
}
#lineupmember {
width: 100%;
height: 0;
padding-bottom: 100%;
filter: none;
color: #fff;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
margin-right: 0;
margin-bottom: 1%;
margin-right: 1%;
}
#mediabg {
width: 100%;
height: 0;
padding-bottom: 25%;
filter: none;
margin-bottom: 1%;
margin-right: 0%;
}
#picbg {
width: 23%;
height: 0;
padding-bottom: 23%;
filter: none;
margin-bottom: 1%;
margin-right: 1%;
}
#lineupmemberpast {
width: 48%;
height: 0;
padding-bottom: 48%;
filter: none;
color: #fff;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
margin-right: 0;
margin-bottom: 1%;
margin-right: 1%;
}
#lineupmember2 {
width: 100%;
height: 50px;
filter: none;
margin-right: 0;
margin-bottom: 1%;
margin-right: 1%;
}
#lineupmember2past {
width: 100%;
height: 50px;
filter: none;
margin-right: 0;
margin-bottom: 1%;
margin-right: 1%;
}
#rightdiv_simu {
display: block;
float:left;
width: 100%;
padding-bottom: 40px;
}
#disc {
width: 100%;
height: 0;
    padding-bottom: 100%;
margin-right: 0%;
margin-bottom: 3%;
}
#blankdiv {
display:none;
}
#desktop {
display: none;
}
#mobile {
display: block;
}
#coversong {
display: none;
}
#albumsong {
text-align: center;
width: 100%;
}
#plaintextsong {
text-align: center;
width: 100%;
}
#plaintextsong2 {
text-align: center;
width: 100%;
padding: 20px;
}
#plaintextmedia {
padding: 20px;
}
#plaintextline {
padding-top: 20px;
}
}
@media only screen and (max-width: 770px) {
#headernormal{
display: none;
}
#headermobile{
display: block;
}
#titlebar {
width: 100%;
background-image:url(../img/titlebg.jpg);
background-size: 100%;
height: auto;
color: #FFF;
padding: 15px;
text-align: center;
font-size: 14px;
}
#hand1{
width: 100%;
float: left;
display: block;
}
#hand2{
width: 100%;
float: left;
display: block;
}
#date {
width: 100%;
}
#dateyear {
width: 100%;
}
#textsong {
width: 100%;
}
#textsong2 {
width: 100%;
position:relative;
padding: 40px 20px 36px 20px;
}
#recsource {
width: 100%;
position:relative;
}
#upcoming {
padding: 40px 40px;
}
#upcoming2 {
padding: 40px 40px;
}
#place {
width: 100%;
text-align: center;
}
#place2 {
padding-left: 0px;
padding-right: 0px;
width: 100%;
text-align: center;
}
#recording {
width: 100%;
float: left;
}
#recording_suff {
width: 100%;
float: left;
}
#recording_doub {
width: 100%;
float: left;
}
#recording_download {
width: 100%;
float: left;
}
#recording_new {
width: 100%;
float: left;
padding: 5px 18px 5px 19px;
}
.yearname {
width: 100%;
float: left;
text-align: center;
font-size: 70px;
}
.miscname {
width: 100%;
float: left;
text-align: center;
}
.blockyearname {
width: 100%;
float: left;
text-align: center;
}
#home_left {
width: 100%;
float: left;
padding: 20px 40px;
}
#home_right {
width: 100%;
float: left;
padding: 20px 40px;
display:block:
}
#disc_left {
width: 100%;
float: left;
padding: 20px 40px;
}
#disc_right {
width: 100%;
float: left;
padding: 20px 40px;
display:block:
}
#song_left {
width: 100%;
float: left;
padding: 20px 40px;
}
#song_right {
width: 100%;
float: left;
padding: 20px 40px;
display:block:
}
#right {
width: 100%;
float: left;
display:block:
}
#archive_left {
width: 100%;
float: left;
}
#archive_right {
width: 100%;
float: left;
}
#screens {
width: 100%;
float: left;
padding: 0px 20px 12px 20px;
}
.screen{
width: 49%;
margin-right: 1%;
margin-bottom: 1%;
}
#downloadbutton {
width: 100%;
float: left;
padding: 10px;
margin-bottom: 15px;
}
.downloadbuttonstream {
width: 100%;
float: left;
padding: 10px;
margin-bottom: 15px;
}
#notcirc {
width: 100%;
float: left;
padding: 10px;
margin-bottom: 15px;
}
#recds {
width: 100%;
float: left;
padding: 20px 40px;
}
 
#notes {
padding: 0px 20px 12px 20px;
text-align: center;
}
.detail2 {
width: 100%;
float: left;
display: block;
font-size: 12px;
color: #666;
line-height: 120%;
}
#yearblock {
width: 100%;
margin-top: 20px;
float: left;
display:block;
height: auto;
padding: 35px;
}
#miscblock {
width: 100%;
margin-top: 20px;
float: left;
display:block;
height: auto;
padding: 20px;
background-image: url("../img/misc.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#mediabg {
width: 100%;
height: 0;
padding-bottom: 25%;
filter: none;
margin-bottom: 1%;
margin-right: 0%;
}
#videoplayer {
width: 100%;
}
#lineupmember {
width: 100%;
height: 0;
padding-bottom: 100%;
filter: none;
color: #fff;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
margin-right: 0;
margin-bottom: 1%;
margin-right: 1%;
}
#lineupmemberpast {
width: 100%;
height: 0;
padding-bottom: 100%;
filter: none;
color: #fff;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
margin-bottom: 1%;
margin-right: 1%;
}
#lineupmember2 {
width: 100%;
height: 50px;
filter: none;
margin-right: 0;
margin-bottom: 1%;
margin-right: 1%;
}
#lineupmember2past {
width: 100%;
height: 50px;
filter: none;
margin-right: 0;
margin-bottom: 1%;
margin-right: 1%;
}
#rightdiv_simu {
display: block;
float:left;
width: 100%;
padding-bottom: 40px;
}
#disc {
width: 100%;
height: 0;
    padding-bottom: 100%;
margin-right: 0%;
margin-bottom: 3%;
}
#picbg {
width: 23%;
height: 0;
padding-bottom: 23%;
filter: none;
margin-bottom: 1%;
margin-right: 1%;
}
#blankdiv {
display:none;
}
#desktop {
display: none;
}
#mobile {
display: block;
}
#coversong {
display: none;
}
#albumsong {
text-align: center;
width: 100%;
}
#plaintextsong {
text-align: center;
width: 100%;
}
#plaintextsong2 {
text-align: center;
width: 100%;
padding: 20px;
}
#plaintextmedia {
padding: 20px;
}
#plaintextline {
padding-top: 20px;
}
}

Latest revision as of 00:53, 18 April 2024

/* CSS placed here will be applied to all skins */
/* Be sure to update Mobile.css as well! Song page infobox styles must also appear in Mobile.css in order to render on the mobile site. */

.noticebar {
  background: #efe url('https://dmlive.wiki/w/images/thumb/5/58/Noticebar_background_rev.png/800px-Noticebar_background_rev.png') no-repeat left center;
  background-color: #f1f1f1;
  border: 1px solid #9d68d9;
  margin-top: 0.2em;
  margin-bottom: 1.2em;
  padding: 0.2em;
  text-align: center;
}

/* Infobox */
.infobox {
    background: #eee;
    border: 1px solid #aaa;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}
.infobox th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}
.infobox td {
    vertical-align: top;
}

.round {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-icab-border-radius: 10px;
-o-border-radius: 10px;
}

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* Song page infobox styles */
body.page-Walking_In_My_Shoes table#InfoboxShell.round {
background: rgb(106,41,145) !important;
background: linear-gradient(155deg, rgba(106,41,145,1) 3%, rgba(111,127,187,1) 24%, rgba(137,175,220,1) 32%, rgba(103,91,165,1) 55%, rgba(101,41,139,1) 65%, rgba(100,43,140,1) 76%, rgba(90,57,78,1) 95%, rgba(65,34,39,1) 100%) !important;
}

body.page-My_Joy table#InfoboxShell.round {
background: rgb(106,41,145) !important;
background: linear-gradient(155deg, rgba(106,41,145,1) 3%, rgba(111,127,187,1) 24%, rgba(137,175,220,1) 32%, rgba(103,91,165,1) 55%, rgba(101,41,139,1) 65%, rgba(100,43,140,1) 76%, rgba(90,57,78,1) 95%, rgba(65,34,39,1) 100%) !important;
}

body.page-In_Your_Room table#InfoboxShell.round {
background: rgb(234,155,112) !important;
background: linear-gradient(180deg, rgba(234,155,112,1) 0%, rgba(235,124,107,1) 10%, rgba(201,79,90,1) 26%, rgba(184,77,87,1) 32%, rgba(137,74,85,1) 47%, rgba(99,76,86,1) 60%, rgba(215,98,89,1) 63%, rgba(242,191,110,1) 65%, rgba(215,98,89,1) 67%, rgba(99,76,86,1) 69%, rgba(99,76,86,1) 74%, rgba(197,209,101,1) 77%, rgba(99,76,86,1) 80%, rgba(99,76,86,1) 87%, rgba(79,141,118,1) 90%, rgba(62,62,70,1) 94%) !important;
}

body.page-Condemnation table#InfoboxShell.round {
background: rgb(243,243,235) !important;
background: linear-gradient(231deg, rgba(243,243,235,1) 4%, rgba(232,215,208,1) 8%, rgba(210,183,172,1) 11%, rgba(198,168,157,1) 13%, rgba(138,124,113,1) 34%, rgba(62,62,70,1) 66%, rgba(60,62,61,1) 100%) !important;
}

body.page-Never_Let_Me_Down_Again table#InfoboxShell.round {
background: rgb(143,186,202) !important;
background: linear-gradient(148deg, rgba(143,186,202,1) 0%, rgba(163,202,217,1) 14%, rgba(120,149,165,1) 38%, rgba(100,113,132,1) 53%, rgba(96,93,110,1) 66%, rgba(87,82,88,1) 74%, rgba(88,77,81,1) 80%, rgba(59,59,59,1) 100%) !important;
}

body.page-Shake_The_Disease table#InfoboxShell.round {
background: rgb(139,188,218) !important;
background: linear-gradient(148deg, rgba(139,188,218,1) 0%, rgba(195,213,215,1) 16%, rgba(246,240,224,1) 30%, rgba(214,205,210,1) 44%, rgba(238,195,202,1) 51%, rgba(215,169,145,1) 59%, rgba(210,122,120,1) 69%, rgba(203,112,81,1) 80%, rgba(110,75,79,1) 90%) !important;
}

body.page-Home table#InfoboxShell.round {
background: rgb(44,204,239) !important;
background: linear-gradient(181deg, rgba(44,204,239,1) 0%, rgba(39,106,139,1) 44%, rgba(130,85,65,1) 48%, rgba(105,214,226,1) 51%, rgba(254,251,246,1) 54%, rgba(254,251,246,1) 66%, rgba(233,77,33,1) 72%, rgba(227,99,45,1) 77%, rgba(204,89,58,1) 83%, rgba(221,114,78,1) 100%) !important;
}

body.page-I_Feel_Loved table#InfoboxShell.round {
background: rgb(177,174,167) !important;
background: linear-gradient(181deg, rgba(177,174,167,1) 0%, rgba(186,171,133,1) 21%, rgba(174,135,56,1) 30%, rgba(182,173,154,1) 68%, rgba(164,170,204,1) 89%, rgba(140,152,190,1) 99%) !important;
}

body.page-Dirt table#InfoboxShell.round {
background: rgb(177,174,167) !important;
background: linear-gradient(181deg, rgba(177,174,167,1) 0%, rgba(186,171,133,1) 21%, rgba(174,135,56,1) 30%, rgba(182,173,154,1) 68%, rgba(164,170,204,1) 89%, rgba(140,152,190,1) 99%) !important;
}

body.page-Only_When_I_Lose_Myself table#InfoboxShell.round {
background: rgb(172,110,33) !important;
background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
}

body.page-Surrender table#InfoboxShell.round {
background: rgb(172,110,33) !important;
background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
}

body.page-Headstar table#InfoboxShell.round {
background: rgb(172,110,33) !important;
background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
}

body.page-Cover_Me table#InfoboxShell.round {
background: rgb(30,49,107) !important;
background: linear-gradient(107deg, rgba(30,49,107,1) 0%, rgba(18,24,56,1) 18%, rgba(7,7,7,1) 37%, rgba(87,113,189,1) 57%, rgba(169,180,226,1) 67%, rgba(225,232,247,1) 76%, rgba(169,180,226,1) 82%, rgba(18,18,26,1) 99%) !important;
}

body.page-Welcome_To_My_World table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Angel table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Secret_To_The_End table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-My_Little_Universe table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Slow table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Broken table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-The_Child_Inside table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Soft_Touch_/_Raw_Nerve table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Alone table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Goodbye table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Long_Time_Lie table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Happens_All_The_Time table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Always table#InfoboxShell.round {
background: rgb(241,164,151) !important;
background: linear-gradient(242deg, rgba(241,164,151,1) 0%, rgba(235,95,90,1) 100%) !important;
}
body.page-Should_Be_Higher table#InfoboxShell.round {
background: rgb(42,12,20) !important;
background: linear-gradient(190deg, rgba(42,12,20,1) 0%, rgba(100,45,39,1) 19%, rgba(130,34,37,1) 38%, rgba(46,23,34,1) 75%, rgba(140,54,43,1) 92%, rgba(179,115,89,1) 100%) !important;
}

body.page-SubHuman table#InfoboxShell.round {
background: rgb(21,36,59) !important;
background: linear-gradient(33deg, rgba(21,36,59,1) 0%, rgba(25,55,107,1) 38%, rgba(49,86,166,1) 100%) !important;
}

.featured {
background: rgb(255,249,212) !important;
background: linear-gradient(148deg, rgba(255,249,212,1) 0%, rgba(255,252,245,1) 58%, rgba(255,244,230,1) 83%, rgba(237,239,240,1) 100%) !important;
}

.avoid-clicks {
  display: block;
  pointer-events: none;
}

code {
background: rgb(252,228,237) !important;
background: linear-gradient(148deg, rgba(252,228,237,1) 0%, rgba(255,232,204,1) 100%) !important;
}

body.page-Shake_The_Disease table#InfoboxShell.round:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Top navbar */
.navigation {
  height: 35px;
  background: #07080d;
}
.brand {
  position: absolute;
  padding-left: 20px;
  padding-right: 20px;
  float: left;
  line-height: 35px;
  text-transform: lowercase;
  font-size: 1.4em !important;
}
.brand a, .brand a:visited {
  color: #fbfbfb;
  text-decoration: none;
}
.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}
nav {
  float: right;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
}
nav ul li a, nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 35px;
  background: #07080d;
  color: #fbfbfb;
  text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
  background: #9d68d9;
  color: #fbfbfb;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 190px;
  margin-top: -2px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #07080d;
  height: 35px;
  width: 70px;
  z-index: 1;
}
@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
  }
  nav {
    width: 100%;
    padding: 35px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }
  .nav-dropdown {
    position: static;
  }
}
@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 5px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #fbfbfb;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}
.brand a, .brand a:visited {
  font-size: 1.35em;
  z-index: 1;
}
nav {
  font-size: 1.4em;
  z-index: 1;
}
nav:hover {
  text-decoration: none !important;
  z-index: 1;
}
nav ul li ul li a {
  font-size: small;
  line-height: 15px;
  z-index: 1;
}
nav ul li a, nav ul li a:visited {
  text-decoration: none !important;
  z-index: 1;
}
.navigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}
@media only screen and (max-width: 798px)
nav ul li a {margin-top: -2px;}

.cquote {
	font-size: 95% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.cquote td {
	padding-top: 0 !important;
}
.cquote td#text {
	padding-bottom: 6px !important;
}
.cquote td#q-mark {
	line-height: 1 !important;
}

.page-Main_Page #catlinks {
    display: none;
}

/* Sample source album overview styling */
.image-container {
    display: flex;
    align-items: flex-start; /* Ensure images start at the top of their container */
    title: none !important; /* Overwrite the title attribute */
}

.img-responsive {
    width: 100px;
    height: 100px;
    object-fit: cover; /* Ensure the entire container is filled, preserving aspect ratio */
    aspect-ratio: 1 / 1; /* Enforce a fixed aspect ratio of 1:1 */
    transition: box-shadow 0.6s ease, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.img-responsive:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Apply subtle shadow on hover */
    transform: scale(1.05); /* Slightly enlarge the image on hover */
}

.text-container {
    margin-left: 10px;
    width: calc(100% - 100px - 10px); /* Adjust margin and width as needed */
}

#image-rotation > div {
    display: none;
  }
#image-rotation > div:first-child {
    display: block;
}

/* Content theft protection */
/*p, h1, h2, h3, body { */
/*-webkit-touch-callout: none; */
/*-webkit-user-select: none; */
/*-khtml-user-select: none;*/
/*-moz-user-select: none; */
/*-ms-user-select: none; */
/*user-select: none; */
/*}*/

.mw-hidden-cats-ns-shown {display: none}
Retrieved from "https://dmlive.wiki/w/index.php?title=MediaWiki:Common.css&oldid=53244"