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:Vector.css

From DM Live - the Depeche Mode live encyclopedia for the masses
Jump to navigationJump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will affect users of the Vector skin */

.toc {
    border-radius: 1em;
    border: 1px solid #d7d7d9;
    background: #f0f0f2;
    display: table;
    zoom: 1;
    padding: 7px;
    font-size: 95%;
}

.Round {
    -webkit-border-radius: 10px;
    background: #ffe;
    border: 2px solid #4E8234;
    margin: 0.10px;
    padding: 4px;
    vertical-align: top;
}

/*Gallery*/
li.gallerybox {
    border: 1px solid #d7d7d9;
    display: inline-block;
    vertical-align: top;
    background: #f0f0f2;
    height: 205px;
    border-radius: 10px;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -icab-border-radius: 10px; 
    -o-border-radius: 10px;
}

li.gallerybox div.thumb {
    background-color: #e3e3e5;
    border: 1px solid #d7d7d9;
    margin: 2px 2px 0px 2px;
    text-align: center;
    border-radius: 10px;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -icab-border-radius: 10px; 
    -o-border-radius: 10px;
}

div.gallerytext {
    font-size: 85%;
    line-height: 12px;
    overflow: hidden;
    padding: 0px 4px;
    word-wrap: break-word;
    height: 50px;
}

div.thumbinner {
    text-align: left;
    border: 1px solid #d7d7d9;
    line-height: 1.4em;
    padding: 3px;
    font-size: 94%;
    padding: 3px;
    background-color: #f0f0f2;
    overflow: hidden;
}

/* General Menu Styling */
#flexmenu li,
#flexmenu li a{
    border: 0;
    list-style: none;
    line-height: 1;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    transition: all ease-in-out .3s;
}

#flexmenu ul li a {
    padding: 17px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
}

#flexmenu ul li.has-sub > a {
    padding-right: 30px;
}
/* Drop icon */
#flexmenu ul li.has-sub > a:after {
    position: absolute;
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #fff;
    content: '';
}
#flexmenu ul ul li.has-sub > a:after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #FFF;
    content: '';
}
#flexmenu > ul > li.has-sub > a:before {
    position: absolute;
    top: 19px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #fff;
    transition: all .25s ease;
}
#flexmenu > ul > li.has-sub:hover > a:before {
    top: 23px;
    height: 0;
}
#flexmenu ul ul li.has-sub > a:before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #FFF;
    content: '';
    transition: all .3s ease;
}
#flexmenu ul ul > li.has-sub:hover > a:before {
    top: 17px;
    height: 0;
}
#flexmenu ul ul li.has-sub:hover,
#flexmenu ul li.has-sub ul li.has-sub ul li:hover {
    background: #fff;
}
/* Submenu default states, removed by hover gives the animation */
#flexmenu ul ul {
    position: absolute;
    left: -9999px;
}
#flexmenu li:hover > ul {
    left: auto;
}
#flexmenu ul ul li {
    height: 0;
    background: #262629;
    transition: all .25s ease
}
#flexmenu li:hover > ul > li {
    height: 35px;
}
/* tertiary menu */
#flexmenu ul ul ul {
    margin-left: 100%;
    top: 0;
}
#flexmenu ul ul li a {
    padding: 11px 15px;
    width: 170px;
    font-size: 12px;
    text-decoration: none;
    color: #FFF;
    font-weight: 400;
}

/* Content */
#main{
  color: #FFF;
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.note {
  width: 80vw;
  max-width: 320px;
  max-height: 200px;
  text-align: center;
  background: #F14F80;
  font-size: 1vw;
  padding: 10px;
  background-clip: padding-box;
}
.note h2 {
  font-weight: 300;
  font-size: 1.5em;
  margin: 10px 0 0;
}
.note p{
  margin: 5px;
}

@media screen and (max-width: 768px) {
  /* Center the logo and remove the bar */
    .logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 46px;
        text-align: center;
        padding: 10px 0 0 0;
        color: #fff;
    }
  
  /* Hamburger */
    .button {
        background: #9d68d9;
        width: 60px;
        height: 48px;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        z-index: 10000;
    }
    .button:after {
        position: absolute;
        top: 22px;
        right: 20px;
        display: block;
        height: 4px;
        width: 20px;
        border-top: 2px solid #dddddd;
        border-bottom: 2px solid #dddddd;
        content: '';
    }
    .button:before {
        transition: all .3s ease;
        position: absolute;
        top: 16px;
        right: 20px;
        display: block;
        height: 2px;
        width: 20px;
        background: #ddd;
        content: '';
    }
  /* Turn it into an X when open */
    .button.menu-opened{
      background: #2e1f62;
    }
    .button.menu-opened:after {
        transition: all .3s ease;    
        top: 23px;
        border: 0;
        height: 2px;
        width: 19px;
        background: #fff;
        transform: rotate(45deg);
    }
    .button.menu-opened:before {
        top: 23px;
        background: #fff;
        width: 19px;
        transform: rotate(-45deg);
    }
  /* reset horizontal styles */
    #flexmenu ul {
        display: none;
    }
    #flexmenu ul li,
    #flexmenu ul li a,
    #flexmenu ul ul li a{
        width: 100%;
    }

    #flexmenu ul ul li,
    #flexmenu li:hover > ul > li {
        height: auto;  
    }
    #flexmenu ul ul li a {
        padding-left: 25px;
    }
    #flexmenu ul ul ul li a {
        padding-left: 35px;
    }

    #flexmenu ul ul,
    #flexmenu ul ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left;
    }
    #flexmenu ul ul ul li.active a {
        border-left: none;
    }
    #flexmenu > ul > li.has-sub > ul > li.focus > a,
    #flexmenu > ul ul > li.has-sub > ul > li.focus > a {
        background: #262626;
        transition: all .3s ease;
    }
  /* remove cross when menu item is toggled */
    #flexmenu > ul > li.has-sub > a:after,
    #flexmenu > ul > li.has-sub > a:before,
    #flexmenu ul ul > li.has-sub > a:after,
    #flexmenu ul ul > li.has-sub > a:before {
        display: none;
    }

  /* submenu toggles */
    #flexmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        display: block;
        height: 46px;
        width: 46px;
        cursor: pointer;
    }
    #flexmenu ul ul .submenu-button {
        height: 34px;
        width: 34px;
    }
    #flexmenu .submenu-button:after {
        position: absolute;
        top: 22px;
        right: 19px;
        width: 8px;
        height: 2px;
        display: block;
        background: #1b130f;
        content: '';
    }
    #flexmenu ul ul .submenu-button:after {
        top: 15px;
        right: 13px;
    }
    #flexmenu .submenu-button.submenu-opened:after {
        background: #fff;
    }
    #flexmenu .submenu-button:before {
        position: absolute;
        top: 19px;
        right: 22px;
        display: block;
        width: 2px;
        height: 8px;
        background: #ddd;
        content: ''
    }
    #flexmenu ul ul .submenu-button:before {
        top: 12px;
        right: 16px;
    }
    #flexmenu .submenu-button.submenu-opened:before {
        display: none;
    }   
  
  .note{
    font-size: 3vw;
  }
}

@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 {
	list-style: none;
}
* {
	box-sizing: border-box;
}
body {
	font-family: 'Libre Franklin', sans-serif;
	background-image:url(../img/sitebg.jpg);
	background-size: 100%;
	min-height: 100%;
}
::selection {
	background-color: #EBEBF2;
	color: #83828D;
}

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

.fundraiser {
width: 100%;
height: auto;
}
#headermobile{
	display: none;
}

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .4s ease;
  z-index: 999999;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

.modal__inner {
  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;
}
}

.skdslider{
	width: 100%;
	position: relative;
	display: block;
	overflow: hidden;
	height: auto;
}
.skdslider2{
	display: hidden;
}

.skdslider ul.slides{ margin:0; padding:0; list-style-type:none;}
.skdslider ul.slides li
{
   display: none;
}
.skdslider ul.slides li img{
    width: 100%;
	height:100%;
	border:0;
	
}



.skdslider ul.slide-navs {
    bottom: 20px;
    left: 50%;
    position: absolute;
	list-style-type: none;
    margin: 0;
    padding: 0;
}


.skdslider ul.slide-navs li {
    float: left;
	background: url("image/slide-bg.png") no-repeat scroll 0 0 transparent;
	height:12px;
	width:12px;
	margin-right:4px;
	cursor:pointer;
}
.skdslider ul.slide-navs li.current-slide {
  background: url("image/slide-bg-active.png") no-repeat scroll 0 0 transparent;
}

.skdslider .slide-desc {
    background: url("image/slide_desc.png") repeat scroll 0 0 transparent;
    left: 0;
    padding: 0 15px 0 15px;
    position: absolute;
    bottom: 15%;
    max-width: 85%;
	display:inline-block;
}
.skdslider .slide-desc > h2 {
    color: #CFDB0C;
    font-family: 'Oswald';
    font-size: 25px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-transform: uppercase;
}

.skdslider .slide-desc > p {
    color: #FFFFFF;
    font-family: 'Oswald';
    font-size: 16px;
    line-height: 20px;
    margin-top: 5px;
}
.skdslider .slide-desc > p a.more {
    color:#990000;
	font-size:20px;
	text-decoration:none;
}
.skdslider .slide-desc > p a.more:hover {
text-decoration:underline;
}

.skdslider a.prev{
    background: url("image/left.png") no-repeat scroll 0 0 transparent;
	width:35px;
	height:35px;
	display:block;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:2%;
	margin-top:-17px;
}

.skdslider a.next{
    background: url("image/right.png") no-repeat scroll 0 0 transparent;
	width:35px;
	height:35px;
	display:block;
	cursor:pointer;
	position:absolute;
	top:50%;
	right:2%;
	margin-top:-17px;
}
.skdslider a.prev:hover{
  
}
.skdslider a.next:hover{
  
}

.skdslider a.play{
    background: url("image/play.png") no-repeat scroll center center transparent;
	width:35px;
	height:35px;
	display:none;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:48%;
	margin-top:-17px;
}

.skdslider a.pause{
    background: url("image/pause.png") no-repeat scroll center center transparent;
	width:35px;
	height:35px;
	display:none;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:48%;
	margin-top:-17px;
}

.skdslider2{
	width: 100%;
	position: relative;
	display: block;
	overflow: hidden;
	height: auto;
}
.skdslider2 ul.slides{ margin:0; padding:0; list-style-type:none;}
.skdslider2 ul.slides li
{
   display: none;
}
.skdslider2 ul.slides li img{
    width: 100%;
	height:100%;
	border:0;
	
}
Retrieved from "https://dmlive.wiki/w/index.php?title=MediaWiki:Vector.css&oldid=35681"